OpenBoard/resources/library/interactivities/Transformation.wgt/js/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));
		}
		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);
});