main.js

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) {
        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) {
        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;
        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);
});