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.
232 lines
8.2 KiB
232 lines
8.2 KiB
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 sample1 = "", sample2 = "";
|
|
|
|
if(!window.sankore || !window.sankore.preference("trans","")){
|
|
if(index == 1){
|
|
sample1 = "<img src='images/coq.png' class='uploadPic' title='coq.png' alt='coq.png'/>";
|
|
sample2 = "<img src='images/poule.png' class='uploadPic' title='poule.png' alt='poule.png'/>";
|
|
} else {
|
|
sample1 = "<img src='images/boeuf.png' class='uploadPic' title='boeuf.png' alt='boeuf.png'/>";
|
|
sample2 = "<img src='images/vache.png' class='uploadPic' title='vache.png' alt='vache.png'/>";
|
|
}
|
|
}*/
|
|
|
|
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(!window.sankore || !window.sankore.preference("trans",""))
|
|
//usePicture = true;
|
|
|
|
if(usePicture) {
|
|
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(!window.sankore || !window.sankore.preference("trans",""))
|
|
//usePicture = true;
|
|
|
|
if(usePicture) {
|
|
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 tmp_flag = false;
|
|
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;
|
|
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));
|
|
}
|
|
if(window.sankore)
|
|
window.sankore.enableDropOnWidget(app.onEdit);
|
|
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);
|
|
setTimeout(function(){
|
|
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");
|
|
}
|
|
}, 3000);
|
|
|
|
});
|
|
}
|
|
|
|
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);
|
|
|
|
if (window.widget) {
|
|
window.widget.onleave = function(){
|
|
sankore.setPreference("trans", "true");
|
|
}
|
|
}
|
|
}); |