function onTemplateLoadedCallback() { } function editRow(app, index) { var parameters = app.parameters; var row = $("
"); row.append("
"+fr.njin.i18n.transformation.row.label(index+1)+"
"); var cards = $("
"); row.append(cards); var beforecontent = parameters.value("#"+index+"before"); var aftercontent = parameters.value("#"+index+"after"); var before = $("
"+( beforecontent !== undefined ? beforecontent : "" )+"
"+fr.njin.i18n.transformation.label.drop+"
"+fr.njin.i18n.transformation.label.before+"
"); var after = $("
"+( aftercontent !== undefined ? aftercontent : "" )+"
"+fr.njin.i18n.transformation.label.drop+"
"+fr.njin.i18n.transformation.label.after+"
"); 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 = $("
"); var aftercard = $("
"); 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 = "coq.png"; sample2 = "poule.png"; } else { sample1 = "boeuf.png"; sample2 = "vache.png"; } }*/ var before = $("
"+( beforecontent !== undefined ? beforecontent : "" )+"
"); var after = $("
"+( aftercontent !== undefined ? aftercontent : "" )+"
"); 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 = $('').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 = $('').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 = $('').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"); scene.append(table); var before = $("
"); var box = $("
"); var after = $("
"); 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"); } } });