diff --git a/resources/library/interactivities/Transformation.wgt/css/images/trgDown.png b/resources/library/interactivities/Transformation.wgt/css/images/trgDown.png new file mode 100644 index 00000000..632be5fb Binary files /dev/null and b/resources/library/interactivities/Transformation.wgt/css/images/trgDown.png differ diff --git a/resources/library/interactivities/Transformation.wgt/css/images/trgLeft.png b/resources/library/interactivities/Transformation.wgt/css/images/trgLeft.png new file mode 100644 index 00000000..6b20ab95 Binary files /dev/null and b/resources/library/interactivities/Transformation.wgt/css/images/trgLeft.png differ diff --git a/resources/library/interactivities/Transformation.wgt/css/images/trgRight.png b/resources/library/interactivities/Transformation.wgt/css/images/trgRight.png new file mode 100644 index 00000000..05646be0 Binary files /dev/null and b/resources/library/interactivities/Transformation.wgt/css/images/trgRight.png differ diff --git a/resources/library/interactivities/Transformation.wgt/css/images/trgUp.png b/resources/library/interactivities/Transformation.wgt/css/images/trgUp.png new file mode 100644 index 00000000..869adf5b Binary files /dev/null and b/resources/library/interactivities/Transformation.wgt/css/images/trgUp.png differ diff --git a/resources/library/interactivities/Transformation.wgt/css/ubw-main.css b/resources/library/interactivities/Transformation.wgt/css/ubw-main.css index 09b0a91b..c9449dc5 100644 --- a/resources/library/interactivities/Transformation.wgt/css/ubw-main.css +++ b/resources/library/interactivities/Transformation.wgt/css/ubw-main.css @@ -6,6 +6,63 @@ html, body { color: #666666; } +::-webkit-scrollbar { + width: 14px; +} + + +::-webkit-scrollbar-thumb { + /*border-radius: 10px; */ + background-color:lightgray; + border: 2px solid gray; +} + +::-webkit-scrollbar-button:vertical:start{ + border-top-right-radius: 10px; + border-top-left-radius: 10px; + background-color:lightgray; + background-image: url(images/trgUp.png); + background-size: 8px auto; + background-position: center; + background-repeat: no-repeat; + border: 2px solid gray; +} + +::-webkit-scrollbar-button:vertical:end{ + border-bottom-right-radius: 10px; + border-bottom-left-radius: 10px; + background-color:lightgray; + background-image: url(images/trgDown.png); + background-size: 8px auto; + background-position: center; + background-repeat: no-repeat; + border: 2px solid gray; +} + +::-webkit-scrollbar-button:horizontal:start{ + width: 14px; + border-bottom-left-radius: 10px; + border-top-left-radius: 10px; + background-color:lightgray; + background-image: url(images/trgLeft.png); + background-size: 8px auto; + background-position: center; + background-repeat: no-repeat; + border: 2px solid gray; +} + +::-webkit-scrollbar-button:horizontal:end{ + width: 14px; + border-bottom-right-radius: 10px; + border-top-right-radius: 10px; + background-color:lightgray; + background-image: url(images/trgRight.png); + background-size: 8px auto; + background-position: center; + background-repeat: no-repeat; + border: 2px solid gray; +} + #ubwidget { position: absolute; top: 0; diff --git a/resources/library/interactivities/Transformation.wgt/js/lib/ubw-main.js b/resources/library/interactivities/Transformation.wgt/js/lib/ubw-main.js index 06213d1c..149854fd 100644 --- a/resources/library/interactivities/Transformation.wgt/js/lib/ubw-main.js +++ b/resources/library/interactivities/Transformation.wgt/js/lib/ubw-main.js @@ -13,257 +13,294 @@ * along with this program. If not, see . */ function log(object) { - console.log(object); + console.log(object); } function initAfterI18nMessagesLoaded(reload, templates, callbacks) { - document.title = fr.njin.i18n.document.title; + document.title = fr.njin.i18n.document.title; - var ubwidget = $("#ubwidget"); + var ubwidget = $("#ubwidget"); - var parameters = Object.create(Parameters,{ - container: { - value: ubwidget - }, - delegate: { - value: window.sankore || Object.create(ParametersDelegate) - } - }); + var parameters = Object.create(Parameters,{ + container: { + value: ubwidget + }, + delegate: { + value: window.sankore || Object.create(ParametersDelegate) + } + }); - var app = Object.create(App, { - container: { - value: ubwidget - }, - parameters: { - value: parameters - }, - reload: { - value: reload - } - }); + var app = Object.create(App, { + container: { + value: ubwidget + }, + parameters: { + value: parameters + }, + reload: { + value: reload + } + }); - app.init(); - app.onEdit = false; + app.init(); + app.onEdit = false; - if(templates.toolbar) { - $("#toolbar").html(Mustache.render(templates.toolbar, window)); - } - if(templates.parameters) { - $("#parameters").html(Mustache.render(templates.parameters, window)); - } + if(templates.toolbar) { + $("#toolbar").html(Mustache.render(templates.toolbar, window)); + } + if(templates.parameters) { + $("#parameters").html(Mustache.render(templates.parameters, window)); + } - if(callbacks.onTemplatesLoaded && typeof callbacks.onTemplatesLoaded === 'function') { - callbacks.onTemplatesLoaded(app); - } + if(callbacks.onTemplatesLoaded && typeof callbacks.onTemplatesLoaded === 'function') { + callbacks.onTemplatesLoaded(app); + } - log("Update setting views with stored parameters"); - $("#parameters (input|select)[role=parameter]").each(function(i, input) { - (function(input){ - var key = input.name; - var type = input.type; - var isRadioOrcheckbox = (type !== undefined && (type === "checkbox" || type === "radio")); - var stored = parameters.value(key); - if(isRadioOrcheckbox) - $(input).attr("checked", (typeof stored === "string" ? stored === "true" : stored)); - else - $(input).val(stored); - $(input).change(function(){ - var val = (isRadioOrcheckbox ? $(this).is(":checked") : $(this).val()); - parameters.value(key, val); - }); - })(input); - }); + log("Update setting views with stored parameters"); + $("#parameters (input|select)[role=parameter]").each(function(i, input) { + (function(input){ + var key = input.name; + var type = input.type; + var isRadioOrcheckbox = (type !== undefined && (type === "checkbox" || type === "radio")); + var stored = parameters.value(key); + if(isRadioOrcheckbox) + $(input).attr("checked", (typeof stored === "string" ? stored === "true" : stored)); + else + $(input).val(stored); + $(input).change(function(){ + var val = (isRadioOrcheckbox ? $(this).is(":checked") : $(this).val()); + parameters.value(key, val); + }); + })(input); + }); - log("Toobar Initialisation"); - $("button[role=edit]").click(function(){ - app.onEdit = true; - $(document.body).addClass("onEdit"); - if(callbacks.onEdit && typeof callbacks.onEdit === 'function') { - callbacks.onEdit(app); - } - }); - $("button[role=view]").click(function(){ - app.onEdit = false; - $(document.body).removeClass("onEdit"); - if(callbacks.onView && typeof callbacks.onView === 'function') { - callbacks.onView(app); - } - }); - $("button[role=reload]").click(function(){ - app.reload(); - }); - $("button[role=help]").click(function(){ - $("body").toggleClass("showHelp"); - }); + log("Toobar Initialisation"); + $("button[role=edit]").click(function(){ + app.onEdit = true; + if(window.sankore) + window.sankore.enableDropOnWidget(app.onEdit); + $(document.body).addClass("onEdit"); + if(callbacks.onEdit && typeof callbacks.onEdit === 'function') { + callbacks.onEdit(app); + } + }); + $("button[role=view]").click(function(){ + app.onEdit = false; + if(window.sankore) + window.sankore.enableDropOnWidget(app.onEdit); + $(document.body).removeClass("onEdit"); + if(callbacks.onView && typeof callbacks.onView === 'function') { + callbacks.onView(app); + } + }); + $("button[role=reload]").click(function(){ + app.reload(); + }); + $("button[role=help]").click(function(){ + $("body").toggleClass("showHelp"); + }); - $("select[name='themes']").change(function() { - $("body").get(0).className = $("body")[0].className.replace(/\btheme-[^\s]*\b/gi, ''); - $("body").addClass("theme-"+$(this).val()); - }); - $("body").addClass("theme-"+$("select[name='themes']").val()); + $("select[name='themes']").change(function() { + $("body").get(0).className = $("body")[0].className.replace(/\btheme-[^\s]*\b/gi, ''); + $("body").addClass("theme-"+$(this).val()); + }); + $("body").addClass("theme-"+$("select[name='themes']").val()); } function init(reload, templates, callbacks){ - var locale = window.sankore ? sankore.locale() : ""; - $.i18n.properties({ - name: 'Messages', - path: 'i18n/', - language: locale, - callback: function(){ - initAfterI18nMessagesLoaded(reload, templates, callbacks); - } - }); + var locale = window.sankore ? sankore.locale() : ""; + $.i18n.properties({ + name: 'Messages', + path: 'i18n/', + language: locale, + callback: function(){ + initAfterI18nMessagesLoaded(reload, templates, callbacks); + } + }); } var Parameters = (function(){ - var self = Object.create({}, { - container: { - value: null - }, - delegate: { - value: null - }, - value: { - value: function(key, value) { - if(value === undefined) { - var val = this.delegate.preference(key); - log("Retrieve parameter value ["+val+"] as type ["+(typeof val)+"] for key : ["+key+"]"); - return (val !== undefined && (typeof val !== "string" || val)) ? val : $("#ubwidget").data(key); - } - else { - log("Set parameter value ["+value+"] for key : ["+key+"]"); - this.delegate.setPreference(key, value); - this.container.trigger("preferenceChange", {key: key, value: value}); - } - } - } - }); - return self; + var self = Object.create({}, { + container: { + value: null + }, + delegate: { + value: null + }, + value: { + value: function(key, value) { + if(value === undefined) { + var val = this.delegate.preference(key); + log("Retrieve parameter value ["+val+"] as type ["+(typeof val)+"] for key : ["+key+"]"); + return (val !== undefined && (typeof val !== "string" || val)) ? val : $("#ubwidget").data(key); + } + else { + log("Set parameter value ["+value+"] for key : ["+key+"]"); + this.delegate.setPreference(key, value); + this.container.trigger("preferenceChange", { + key: key, + value: value + }); + } + } + } + }); + return self; })(); var ParametersDelegate = (function(){ - var self = Object.create({}, { - preference: { - value: function(key) { - return this[key]; - } - }, - setPreference: { - value: function(key, value) { - this[key] = value; - } - } - }); - return self; + var self = Object.create({}, { + preference: { + value: function(key) { + return this[key]; + } + }, + setPreference: { + value: function(key, value) { + this[key] = value; + } + } + }); + return self; })(); var App = (function() { var self = Object.create({}, { - container: { - value: null - }, - parameters: { - value: null - }, + container: { + value: null + }, + parameters: { + value: null + }, init: { - value: function() { - var that = this; - this.container.bind("preferenceChange", function(evt, parameter) { - that.reload(parameter); - }); - this.reload(); - } + value: function() { + var that = this; + this.container.bind("preferenceChange", function(evt, parameter) { + that.reload(parameter); + }); + this.reload(); + } + }, + reload: { + value: function(parameter) { + if(parameter === undefined) + log("Reload"); + else + log("Update"); + } }, - reload: { - value: function(parameter) { - if(parameter === undefined) - log("Reload"); - else - log("Update"); - } - }, - utils: { - value: Object.create({}, { - shuffle: { - value: function(array) { - var unpickedSize = array.length; - while(unpickedSize > 0) { - var n = Math.floor(Math.random()*unpickedSize); - var temp = array[unpickedSize-1]; - array[unpickedSize-1] = array[n]; - array[n] = temp; - unpickedSize--; - } - } - }, - guid: { - value: function() { - var S4 = function() { - return (((1+Math.random())*0x10000)|0).toString(16).substring(1); - }; - return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4()); - } - }, - droppable: { - value: function($e, callback) { - $e.bind("dragover", function(){ - $(this).addClass("hover"); - return false; - }); - $e.bind("dragleave", function(){ - $(this).removeClass("hover"); - return false; - }); - $e.bind("drop", function(e){ - $(this).removeClass("hover"); - e = e || window.event; - e.preventDefault(); - // jQuery wraps the originalEvent, so we try to detect that here... - e = e.originalEvent || e; + utils: { + value: Object.create({}, { + shuffle: { + value: function(array) { + var unpickedSize = array.length; + while(unpickedSize > 0) { + var n = Math.floor(Math.random()*unpickedSize); + var temp = array[unpickedSize-1]; + array[unpickedSize-1] = array[n]; + array[n] = temp; + unpickedSize--; + } + } + }, + guid: { + value: function() { + var S4 = function() { + return (((1+Math.random())*0x10000)|0).toString(16).substring(1); + }; + return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4()); + } + }, + droppable: { + value: function($e, callback) { + $e.bind("dragover", function(){ + $(this).addClass("hover"); + return false; + }); + $e.bind("dragleave", function(){ + $(this).removeClass("hover"); + return false; + }); + $e.bind("drop", function(e){ + $(this).removeClass("hover"); + e = e || window.event; + e.preventDefault(); + // jQuery wraps the originalEvent, so we try to detect that here... + e = e.originalEvent || e; - if(window.sankore) { - function stringToXML(text){ - if (window.ActiveXObject){ - var doc=new ActiveXObject('Microsoft.XMLDOM'); - doc.async='false'; - doc.loadXML(text); - } else { - var parser=new DOMParser(); - doc=parser.parseFromString(text,'text/xml'); - } - return doc; - } - var file = stringToXML(e.dataTransfer.getData("text/plain")); - callback({ - src: $(file).find("path:eq(0)").text() - }); - return false; - } + if(window.sankore) { + function stringToXML(text){ + if (window.ActiveXObject){ + var doc=new ActiveXObject('Microsoft.XMLDOM'); + doc.async='false'; + doc.loadXML(text); + } else { + var parser=new DOMParser(); + doc=parser.parseFromString(text,'text/xml'); + } + return doc; + } + var file = stringToXML(e.dataTransfer.getData("text/plain")); + var tmp_img = $("").attr("src", $(file).find("path:eq(0)").text()); + var w = 0; + var h = 0; + $(this).append(tmp_img); + setTimeout(function(){ + if(tmp_img.height() >= tmp_img.width()){ + if(tmp_img.height() > 180){ + h = 180; + tmp_img.attr("height",h); + w = tmp_img.width(); + } else { + h = tmp_img.height(); + w = tmp_img.width(); + } + + } + else{ + if(tmp_img.width() > 180){ + w = 180; + tmp_img.attr("width",w); + h = tmp_img.height(); + } else { + h = tmp_img.height(); + w = tmp_img.width(); + } + } + callback({ + src: $(file).find("path:eq(0)").text(), + width: w, + height: h + }); + tmp_img.remove(); + }, 6) + return false; + } - // Using e.files with fallback because e.dataTransfer is immutable and can't be overridden in Polyfills (http://sandbox.knarly.com/js/dropfiles/). - var files = (e.files || e.dataTransfer.files); - for (var i = 0; i < files.length; i++) { - // Loop through our files with a closure so each of our FileReader's are isolated. - (function (i) { - if(typeof FileReader !== "undefined") { - var reader = new FileReader(); - reader.onload = function (event) { - callback({ - src: event.target.result, - title: (files[i].name), - alt: (files[i].name) - }); - }; - reader.readAsDataURL(files[i]); - } - })(i); - } - return false; - }); - } - } - }) - } + // Using e.files with fallback because e.dataTransfer is immutable and can't be overridden in Polyfills (http://sandbox.knarly.com/js/dropfiles/). + var files = (e.files || e.dataTransfer.files); + for (var i = 0; i < files.length; i++) { + // Loop through our files with a closure so each of our FileReader's are isolated. + (function (i) { + if(typeof FileReader !== "undefined") { + var reader = new FileReader(); + reader.onload = function (event) { + callback({ + src: event.target.result, + title: (files[i].name), + alt: (files[i].name) + }); + }; + reader.readAsDataURL(files[i]); + } + })(i); + } + return false; + }); + } + } + }) + } }); return self; })(); \ No newline at end of file diff --git a/resources/library/interactivities/Transformation.wgt/js/main.js b/resources/library/interactivities/Transformation.wgt/js/main.js index 0777887b..ff614cb8 100644 --- a/resources/library/interactivities/Transformation.wgt/js/main.js +++ b/resources/library/interactivities/Transformation.wgt/js/main.js @@ -3,197 +3,200 @@ 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 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 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+"
"); + 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); + makeEditable(app, before, index); + makeEditable(app, after, index); - cards.append(before); - cards.append(after); + cards.append(before); + cards.append(after); - return row; + 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 before = $("
"+( beforecontent !== undefined ? beforecontent : "" )+"
"); - var after = $("
"+( aftercontent !== undefined ? aftercontent : "" )+"
"); - - var usePicture = parameters.value("#UsePicture"+index+"before") === "true" - || parameters.value("#UsePicture"+index+"before") == 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(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]; + var parameters = app.parameters; + var beforecard = $("
"); + var aftercard = $("
"); + + var beforecontent = parameters.value("#"+index+"before"); + var aftercontent = parameters.value("#"+index+"after"); + + 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(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(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 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)"); + 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); - } - } + 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(); + 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); + 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); - 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"); - } - }); - } + 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)); - } + for(var i=number ; i>0 ; i--) { + makeCard(i-1, cards(app, i-1)); + } - if(window.sankore) - window.sankore.enableDropOnWidget(app.onEdit); + if(window.sankore) + window.sankore.enableDropOnWidget(app.onEdit); } function reloadCallback(parameter) { - if(parameter === undefined || parameter.key === "number" ) - reloadApp(this); + 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); + var callbacks = { + onTemplatesLoaded: onTemplateLoadedCallback, + onEdit: reloadApp, + onView: reloadApp + }; + init(reloadCallback, { + toolbar: toolbarTemplate, + parameters: parametersTemplate + }, callbacks); }); \ No newline at end of file