новые иконки в OpenBoard
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
OpenBoard/resources/library/interactivities/Transformation.wgt/js/main.js

199 lines
6.2 KiB

13 years ago
function onTemplateLoadedCallback() {
}
function editRow(app, index) {
var parameters = app.parameters;
var row = $("<div/>");
row.append("<div class='label'><div>"+fr.njin.i18n.transformation.row.label(index+1)+"</div></div>");
var cards = $("<div class='cards'/>");
row.append(cards);
var beforecontent = parameters.value("#"+index+"before");
var aftercontent = parameters.value("#"+index+"after");
var before = $("<div rel='before'><div class='switch'><label>"+fr.njin.i18n.transformation.label.usePicture+"<input type='checkbox' name='switch'></label></div><div class='card'><div class='text'><div>"+( beforecontent !== undefined ? beforecontent : "" )+"</div></div><div class='picture'><div></div><div class='dropzone'><div>"+fr.njin.i18n.transformation.label.drop+"</div></div></div></div><div class='label'>"+fr.njin.i18n.transformation.label.before+"</div></div>");
var after = $("<div rel='after'><div class='switch'><label>"+fr.njin.i18n.transformation.label.usePicture+"<input type='checkbox' name='switch'></label></div><div class='card'><div class='text'><div>"+( aftercontent !== undefined ? aftercontent : "" )+"</div></div><div class='picture'><div></div><div class='dropzone'><div>"+fr.njin.i18n.transformation.label.drop+"</div></div></div></div><div class='label'>"+fr.njin.i18n.transformation.label.after+"</div></div>");
makeEditable(app, before, index);
makeEditable(app, after, index);
cards.append(before);
cards.append(after);
return row;
}
function cards(app, index) {
var parameters = app.parameters;
var beforecard = $("<div class='part before closed'/>");
var aftercard = $("<div class='part after'/>");
var beforecontent = parameters.value("#"+index+"before");
var aftercontent = parameters.value("#"+index+"after");
var before = $("<div rel='before'><div class='card'><div class='text'><div>"+( beforecontent !== undefined ? beforecontent : "" )+"</div></div><div class='picture'><div></div></div></div></div>");
var after = $("<div rel='after'><div class='card'><div class='text'><div>"+( aftercontent !== undefined ? aftercontent : "" )+"</div></div><div class='picture'><div></div></div></div></div>");
var usePicture = parameters.value("#UsePicture"+index+"before") === "true"
|| parameters.value("#UsePicture"+index+"before") == true;
if(usePicture) {
13 years ago
before.addClass("usePicture");
var f = $.parseJSON(parameters.value("#Picture"+index+"before"));
if(f !== null) {
var $img = $('<img src="" class="uploadPic" title="" alt="" />').attr(f);
before.find(".picture>div:eq(0)").append($img);
}
}
usePicture = parameters.value("#UsePicture"+index+"after") === "true"
|| parameters.value("#UsePicture"+index+"after") == true;
if(usePicture) {
13 years ago
after.addClass("usePicture");
var f = $.parseJSON(parameters.value("#Picture"+index+"after"));
if(f !== null) {
var $img = $('<img src="" class="uploadPic" title="" alt="" />').attr(f);
after.find(".picture>div:eq(0)").append($img);
}
}
beforecard.append(before);
aftercard.append(after);
return [beforecard, aftercard];
}
function makeEditable(app, row, index) {
var parameters = app.parameters;
var editable = row.find(".text>div").eq(0);
var key = index+editable.parent().parent().parent().attr('rel');
editable.get(0).contentEditable = true;
editable.bind('blur keyup paste', function(){
parameters.value("#"+key, $(this).html());
});
var checkbox = row.find("input[name='switch']");
function setSwicth() {
var val = parameters.value("#UsePicture"+key) === "true"
|| parameters.value("#UsePicture"+key) === true;
13 years ago
if(val) {
row.addClass("usePicture");
}else {
row.removeClass("usePicture");
}
checkbox.attr("checked", val);
}
checkbox.change(function() {
parameters.value("#UsePicture"+key, $(this).is(':checked'));
setSwicth();
});
setSwicth();
var dropzone = row.find(".dropzone");
var pictureHolder = dropzone.parent().find(">div:eq(0)");
function setPicture() {
var f = $.parseJSON(parameters.value("#Picture"+key));
if(f !== null) {
var $img = $('<img src="" class="uploadPic" title="" alt="" />').attr(f);
pictureHolder.empty();
pictureHolder.append($img);
}
}
app.utils.droppable(dropzone, function(f) {
parameters.value("#Picture"+key, JSON.stringify(f));
setPicture();
});
setPicture();
}
function reloadApp(app) {
var number = app.parameters.value("number");
var scene = $("#scene");
scene.empty();
if(app.onEdit) {
var editcards = $("#edit-cards");
editcards.empty();
for(var i=0 ; i<number ; i++) {
editcards.append(editRow(app, i));
}
return;
}
var table = $("<div id='table'/>");
scene.append(table);
var before = $("<div class='deck before'><div></div></div>");
var box = $("<div class='box'><div></div></div>");
var after = $("<div class='deck after'><div></div></div>");
if(number === 0)
before.addClass("empty");
after.addClass("empty");
table.append(before);
table.append(box);
table.append(after);
box.find(">div").css("z-index", number+1);
var beforeDeck = before.find(">div");
var afterDeck = after.find(">div");
var beforeLeftPosition = box.find(">div").position().left - beforeDeck.position().left + 10 + 40; //10px de padding dans la box + 40px d'ombre dans l'image
function makeCard(i, cards) {
beforeDeck.append(cards[0]);
afterDeck.append(cards[1]);
cards[1].css("left", -beforeLeftPosition+"px");
cards[1].css("z-index", i);
cards[0].click(function(e) {
var c = $(this);
c.removeClass("closed");
c.unbind(e);
c.animate({
left : beforeLeftPosition
}, 1000, function(){
setTimeout(function(){
cards[1].animate({
left: 0
}, 1000, function(){
after.removeClass("empty");
});
}, 1000);
c.remove();
});
if(i === 0) {
before.addClass("empty");
}
});
}
for(var i=number ; i>0 ; i--) {
makeCard(i-1, cards(app, i-1));
}
if(window.sankore)
window.sankore.enableDropOnWidget(app.onEdit);
}
function reloadCallback(parameter) {
if(parameter === undefined || parameter.key === "number" )
reloadApp(this);
}
$(document).ready(function(){
var callbacks = {
onTemplatesLoaded: onTemplateLoadedCallback,
onEdit: reloadApp,
onView: reloadApp
};
init(reloadCallback, {toolbar: toolbarTemplate, parameters: parametersTemplate}, callbacks);
});