Claudio Valerio
11 years ago
parent
afad2faa04
commit
ab689ce289
@ -1,16 +1,18 @@ |
||||
<?xml version="1.0" encoding="UTF-8"?> |
||||
<widget xmlns="http://www.w3.org/ns/widgets" |
||||
xmlns:ub="http://uniboard.mnemis.com/widgets" |
||||
id="http://uniboard.mnemis.com/widgets/notes" |
||||
version="1.2" |
||||
width="950" |
||||
height="600" |
||||
ub:resizable="true"> |
||||
|
||||
<name>Notes</name> |
||||
<author href="http://www.getuniboard.com" |
||||
email="info@mnemis.com">Mnemis SA</author> |
||||
<description>Associer images</description> |
||||
|
||||
<content src="index.html"/> |
||||
</widget> |
||||
<?xml version="1.0" encoding="UTF-8"?> |
||||
<widget xmlns="http://www.w3.org/ns/widgets" |
||||
xmlns:ub="http://uniboard.mnemis.com/widgets" |
||||
id="http://uniboard.mnemis.com/widgets/notes" |
||||
version="1.2" |
||||
width="950" |
||||
height="560" |
||||
minimum_height="300" |
||||
minimum_width="670" |
||||
ub:resizable="false"> |
||||
|
||||
<name>Notes</name> |
||||
<author href="http://www.getuniboard.com" |
||||
email="info@mnemis.com">Mnemis SA</author> |
||||
<description>Associer images</description> |
||||
|
||||
<content src="index.html"/> |
||||
</widget> |
||||
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1,60 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<title>D'n'd</title> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> |
||||
<link rel="stylesheet" type="text/css" href="../../css/basic.css"/> |
||||
<script type="text/javascript" src="../../js/jquery-1.6.2.min.js"></script> |
||||
<script type="text/javascript" src="../../js/jquery-ui-1.8.9.custom.min.js"></script> |
||||
<script type="text/javascript" src="js/script.js"></script> |
||||
<script type="text/javascript"> |
||||
$(document).ready(function(){ |
||||
if(window.sankore) |
||||
sankore.enableDropOnWidget(false); |
||||
start(); |
||||
}); |
||||
</script> |
||||
</head> |
||||
<body> |
||||
<table class="body_table" cellpadding=0 cellspacing=0> |
||||
<tr style="height: 54px;"> |
||||
<td class="b_top_left"> </td> |
||||
<td class="b_top_center"> |
||||
<div id="wgt_name"></div> |
||||
<div id="wgt_help"></div> |
||||
<div id="wgt_reload"></div> |
||||
<div id="wgt_display" class="selected"></div> |
||||
<div id="wgt_edit"></div> |
||||
</td> |
||||
<td class="b_top_right"> </td> |
||||
</tr> |
||||
|
||||
<tr> |
||||
<td class="b_center_left"> </td> |
||||
<td> |
||||
<div id="help"></div> |
||||
<div id="data"> |
||||
<div id="parameters"> |
||||
<div class="inline"> |
||||
<label> |
||||
<select id="style_select"> |
||||
<option value="1"></option> |
||||
<option value="2"></option> |
||||
<option value="3"></option> |
||||
</select> |
||||
</label> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</td> |
||||
<td class="b_center_right"> </td> |
||||
</tr> |
||||
|
||||
<tr style="height: 54px;"> |
||||
<td class="b_bottom_left"> </td> |
||||
<td class="b_bottom_center"> </td> |
||||
<td class="b_bottom_right"> </td> |
||||
</tr> |
||||
</table> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,806 @@ |
||||
var sankoreLang = { |
||||
display: "Display",
|
||||
edit: "Edit",
|
||||
short_desc: "Select the number \"three\".",
|
||||
add: "Add new block", |
||||
enter: "Enter your instruction here ...", |
||||
wgt_name: "Associate images", |
||||
reload: "Reload", |
||||
slate: "slate", |
||||
pad: "pad", |
||||
none: "none", |
||||
help: "Help", |
||||
help_content:
|
||||
"<p> <h2>Associate images</h2> </p>" + |
||||
"<p> <h3>Choose the correct picture</h3> </p>" + |
||||
"<p> Drag and drop the image in the correct area. If the result is incorrect, the area turns in red. If the result is correct, the area turns in green. </p> "+ |
||||
"<p> Reload “button” resets the exercises. </p>" + |
||||
"<p> Enter the “Edit” mode to :</p>" + |
||||
"<ul> <li> choose the theme of the App : pad, slate, or none (by default : none), </li>" + |
||||
"<li> modify the exercise.</li> </ul>" + |
||||
|
||||
"<p>In edition mode : </p>" + |
||||
"<ul><li>click on the text field to change the instruction,</li>" + |
||||
"<li>add picture frames clicking on the “+”,</li>" + |
||||
"<li>drag an drop pictures from your library,</li>" + |
||||
"<li>set the correct image of your activity clicking on the submit button “v” on the frame,</li>" + |
||||
"<li>delete a frame clicking on the cross button on the frame,</li>" + |
||||
"<li>replace a picture clicking on the reload icon on the frame,</li>" + |
||||
"<li>“Display” button comes back to the activity.</li></ul>", |
||||
theme: "Theme" |
||||
}; |
||||
|
||||
//main function
|
||||
function start(){ |
||||
|
||||
$("#wgt_display").text(sankoreLang.display); |
||||
$("#wgt_edit").text(sankoreLang.edit); |
||||
$("#wgt_name").text(sankoreLang.wgt_name); |
||||
$("#wgt_reload").text(sankoreLang.reload); |
||||
$("#wgt_help").text(sankoreLang.help); |
||||
$("#help").html(sankoreLang.help_content); |
||||
$("#style_select option[value='1']").text(sankoreLang.slate); |
||||
$("#style_select option[value='2']").text(sankoreLang.pad); |
||||
$("#style_select option[value='3']").text(sankoreLang.none); |
||||
var tmpl = $("div.inline label").html(); |
||||
$("div.inline label").html(sankoreLang.theme + tmpl) |
||||
|
||||
if(window.sankore){ |
||||
if(sankore.preference("associer","")){ |
||||
var data = jQuery.parseJSON(sankore.preference("associer","")); |
||||
importData(data); |
||||
} else { |
||||
showExample(); |
||||
} |
||||
}
|
||||
else
|
||||
showExample(); |
||||
//events
|
||||
if (window.widget) { |
||||
window.widget.onleave = function(){ |
||||
exportData(); |
||||
} |
||||
} |
||||
|
||||
$("#wgt_help").click(function(){ |
||||
var tmp = $(this); |
||||
if($(this).hasClass("open")){ |
||||
$(this).removeClass("help_pad").removeClass("help_wood") |
||||
$("#help").slideUp("100", function(){ |
||||
tmp.removeClass("open"); |
||||
$("#data").show(); |
||||
}); |
||||
} else { |
||||
($("#style_select").val() == 1)?$(this).removeClass("help_pad").addClass("help_wood"):$(this).removeClass("help_wood").addClass("help_pad"); |
||||
$("#data").hide(); |
||||
$("#help").slideDown("100", function(){ |
||||
tmp.addClass("open"); |
||||
}); |
||||
} |
||||
}); |
||||
|
||||
$("#wgt_reload").click(function(){ |
||||
if($("#wgt_display").hasClass("selected")){ |
||||
$("#wgt_edit").trigger("click"); |
||||
$("#wgt_display").trigger("click"); |
||||
} else { |
||||
$("#wgt_display").trigger("click"); |
||||
} |
||||
}); |
||||
|
||||
$("#wgt_reload, #wgt_display, #wgt_edit").mouseover(function(){ |
||||
exportData(); |
||||
}); |
||||
|
||||
$("#style_select").change(function (event){ |
||||
changeStyle($(this).find("option:selected").val()); |
||||
}) |
||||
|
||||
$("#wgt_display, #wgt_edit").click(function(event){ |
||||
if(this.id == "wgt_display"){ |
||||
if(!$(this).hasClass("selected")){ |
||||
if(window.sankore) |
||||
sankore.enableDropOnWidget(false); |
||||
$(this).addClass("selected"); |
||||
$("#wgt_edit").removeClass("selected"); |
||||
$("#parameters").css("display", "none"); |
||||
// $(".add_block").remove();
|
||||
$(".cont").each(function(){ |
||||
var container = $(this); |
||||
var tmp_i = 0; |
||||
var tmp_array = []; |
||||
|
||||
container.find(".text_cont").removeAttr("contenteditable"); |
||||
container.find(".add_img").remove(); |
||||
// container.find(".close_cont").remove();
|
||||
container.find(".img_block").each(function(){ |
||||
if($(this).find("img").attr("src") != "img/drop_img.png"){ |
||||
$(this).find(".close_img").remove(); |
||||
$(this).find(".clear_img").remove(); |
||||
$(this).find(".true_img").remove(); |
||||
$(this).find(".false_img").remove(); |
||||
$(this).removeAttr("ondragenter") |
||||
.removeAttr("ondragleave") |
||||
.removeAttr("ondragover") |
||||
.removeAttr("ondrop") |
||||
.addClass("img_gray"); |
||||
} else
|
||||
$(this).remove(); |
||||
}); |
||||
var img_answers = $("<div class='imgs_answers imgs_answers_gray'><img src='img/drop_img.png' style='margin-top: 11px;'/></div>").insertAfter(container.find(".sub_cont")); |
||||
container.find(".img_block").each(function(){ |
||||
$(this).css("float",""); |
||||
tmp_array.push($(this)); |
||||
});
|
||||
tmp_array = shuffle(tmp_array); |
||||
for(var i = 0; i<tmp_array.length;i++){ |
||||
tmp_array[i].draggable({ |
||||
helper:'clone', |
||||
zIndex:100, |
||||
appendTo: '#data' |
||||
}); |
||||
tmp_array[i].appendTo(container.find(".imgs_cont")); |
||||
} |
||||
|
||||
img_answers.droppable({ |
||||
hoverClass: 'dropHere', |
||||
drop: function(event, ui) { |
||||
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){ |
||||
if($(this).children()[0].tagName == "IMG") |
||||
$(this).children().remove(); |
||||
else |
||||
$(ui.draggable).parent().append($(this).children()); |
||||
$(this).append($(ui.draggable));
|
||||
if($(this).children().length == 1){
|
||||
if($(this).children().find("input").val() == "1") |
||||
$(this).removeClass("imgs_answers_gray") |
||||
.removeClass("imgs_answers_red") |
||||
.addClass("imgs_answers_green"); |
||||
else |
||||
$(this).removeClass("imgs_answers_gray") |
||||
.removeClass("imgs_answers_green") |
||||
.addClass("imgs_answers_red"); |
||||
}
|
||||
} |
||||
} |
||||
}); |
||||
|
||||
container.find(".imgs_cont").droppable({ |
||||
hoverClass: 'dropBack', |
||||
drop: function(event, ui) { |
||||
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){ |
||||
if(this != $(ui.draggable).parent()[0]){ |
||||
var tmp_cont = $(ui.draggable).parent(); |
||||
$(this).append($(ui.draggable)); |
||||
tmp_cont.append("<img src='img/drop_img.png' style='margin-top: 11px;'/>"); |
||||
var answers = ""; |
||||
$(this).parent().find(".imgs_answers .img_block").each(function(){ |
||||
answers += $(this).find("input").val(); |
||||
}); |
||||
if(tmp_cont.children()[0].tagName == "IMG") |
||||
tmp_cont.removeClass("imgs_answers_green") |
||||
.removeClass("imgs_answers_red") |
||||
.addClass("imgs_answers_gray"); |
||||
else |
||||
if(tmp_cont.children().length == 1){
|
||||
if(tmp_cont.children().find("input").val() == "1") |
||||
tmp_cont.removeClass("imgs_answers_gray") |
||||
.removeClass("imgs_answers_red") |
||||
.addClass("imgs_answers_green"); |
||||
else |
||||
tmp_cont.removeClass("imgs_answers_gray") |
||||
.removeClass("imgs_answers_green") |
||||
.addClass("imgs_answers_red"); |
||||
}
|
||||
} |
||||
} |
||||
} |
||||
}); |
||||
}); |
||||
|
||||
$(this).css("display", "none"); |
||||
$("#wgt_edit").css("display", "block"); |
||||
} |
||||
} else {
|
||||
if(!$(this).hasClass("selected")){ |
||||
if(window.sankore) |
||||
sankore.enableDropOnWidget(true); |
||||
$(this).addClass("selected"); |
||||
$("#wgt_display").removeClass("selected"); |
||||
$("#parameters").css("display", "block"); |
||||
$(".cont").each(function(){ |
||||
var container = $(this); |
||||
container.find(".imgs_answers").find(".img_block").each(function(){ |
||||
$(this).appendTo(container.find(".imgs_cont")) |
||||
}); |
||||
container.find(".imgs_answers").remove(); |
||||
// $("<div class='close_cont'>").appendTo(container);
|
||||
container.find(".text_cont").attr("contenteditable","true"); |
||||
|
||||
var add_img = $("<div class='add_img'>"); |
||||
container.find(".img_block").each(function(){ |
||||
$(this).draggable("destroy"); |
||||
$(this).attr("ondragenter", "return false;") |
||||
.attr("ondragleave", "$(this).css(\"background-color\",\"\"); return false;") |
||||
.attr("ondragover", "$(this).css(\"background-color\",\"#ccc\"); return false;") |
||||
.attr("ondrop", "$(this).css(\"background-color\",\"\"); return onDropTarget(this,event);") |
||||
.css("float","left"); |
||||
$("<div class='close_img'>").appendTo($(this)); |
||||
$("<div class='clear_img'>").appendTo($(this)); |
||||
if($(this).find("input").val() == "1"){ |
||||
$("<div class='false_img'>").appendTo($(this)); |
||||
} |
||||
else{ |
||||
$("<div class='true_img'>").appendTo($(this)); |
||||
} |
||||
}); |
||||
container.find(".imgs_cont").append(add_img) |
||||
});
|
||||
|
||||
// $("<div class='add_block'>" + sankoreLang.add + "</div>").appendTo("#data");
|
||||
$(this).css("display", "none"); |
||||
$("#wgt_display").css("display", "block"); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
//add new block
|
||||
// $(".add_block").live("click", function(){
|
||||
// addContainer();
|
||||
// });
|
||||
|
||||
//adding new img
|
||||
$(".add_img").live("click", function(){ |
||||
addImgBlock($(this)); |
||||
}); |
||||
|
||||
//deleting a block
|
||||
// $(".close_cont").live("click",function(){
|
||||
// $(this).parent().remove();
|
||||
// refreshBlockNumbers();
|
||||
// });
|
||||
|
||||
//deleting the img block
|
||||
$(".close_img").live("click", function(){ |
||||
var i = 0; |
||||
var tmp_obj = $(this).parent().parent();
|
||||
$(this).parent().remove();
|
||||
}); |
||||
|
||||
//cleaning an image
|
||||
$(".clear_img").live("click",function(){ |
||||
$(this).parent().find("img").attr("src","img/drop_img.png"); |
||||
}); |
||||
|
||||
//correct image
|
||||
$(".true_img").live("click",function(){
|
||||
$(this).parent().parent().find(".img_block").each(function(){ |
||||
$(this).find("input").val(0); |
||||
var tmp_div = $(this).find(".false_img"); |
||||
if(tmp_div) |
||||
tmp_div.removeClass("false_img").addClass("true_img"); |
||||
}) |
||||
$(this).parent().find("input").val(1); |
||||
$(this).removeClass("true_img").addClass("false_img"); |
||||
}); |
||||
|
||||
//wrong image
|
||||
$(".false_img").live("click",function(){ |
||||
$(this).parent().find("input").val(0); |
||||
$(this).removeClass("false_img").addClass("true_img"); |
||||
}); |
||||
} |
||||
|
||||
//export
|
||||
function exportData(){ |
||||
var array_to_export = []; |
||||
if($("#wgt_edit").hasClass("selected")){ |
||||
$(".cont").each(function(){ |
||||
var cont_obj = new Object(); |
||||
cont_obj.style = $("#style_select").find("option:selected").val(); |
||||
cont_obj.text = $(this).find(".text_cont").text(); |
||||
cont_obj.mode = "edit"; |
||||
cont_obj.imgs = []; |
||||
$(this).find(".img_block").each(function(){ |
||||
var img_obj = new Object(); |
||||
img_obj.value = $(this).find("input").val(); |
||||
img_obj.link = $(this).find("img").attr("src").replace("../../",""); |
||||
img_obj.ht = $(this).find("img").height(); |
||||
img_obj.wd = $(this).find("img").width(); |
||||
cont_obj.imgs.push(img_obj); |
||||
}); |
||||
array_to_export.push(cont_obj); |
||||
}); |
||||
} else { |
||||
$(".cont").each(function(){ |
||||
var cont_obj = new Object(); |
||||
cont_obj.style = $("#style_select").find("option:selected").val(); |
||||
cont_obj.text = $(this).find(".text_cont").text(); |
||||
cont_obj.mode = "display"; |
||||
cont_obj.imgs = []; |
||||
if($(this).find(".imgs_answers").children()[0].tagName == "DIV"){ |
||||
var tmp_cont = $(this).find(".imgs_answers").find(".img_block"); |
||||
var img_obj = new Object(); |
||||
img_obj.value = tmp_cont.find("input").val(); |
||||
img_obj.link = tmp_cont.find("img").attr("src").replace("../../",""); |
||||
img_obj.ht = tmp_cont.find("img").height(); |
||||
img_obj.wd = tmp_cont.find("img").width(); |
||||
img_obj.cont = "answers"; |
||||
cont_obj.imgs.push(img_obj); |
||||
} |
||||
$(this).find(".imgs_cont .img_block").each(function(){ |
||||
var img_obj = new Object(); |
||||
img_obj.value = $(this).find("input").val(); |
||||
img_obj.link = $(this).find("img").attr("src").replace("../../",""); |
||||
img_obj.ht = $(this).find("img").height(); |
||||
img_obj.wd = $(this).find("img").width(); |
||||
img_obj.cont = "cont"; |
||||
cont_obj.imgs.push(img_obj); |
||||
}); |
||||
array_to_export.push(cont_obj); |
||||
}); |
||||
} |
||||
|
||||
if($(".cont").size() == 0){ |
||||
var cont_obj = new Object(); |
||||
cont_obj.style = $("#style_select").find("option:selected").val(); |
||||
cont_obj.tmp = "clear"; |
||||
array_to_export.push(cont_obj); |
||||
} |
||||
|
||||
if(window.sankore) |
||||
sankore.setPreference("associer", JSON.stringify(array_to_export));
|
||||
} |
||||
|
||||
//import
|
||||
function importData(data){
|
||||
for(var i in data){ |
||||
if(data[i].tmp){ |
||||
changeStyle(data[i].style); |
||||
$("#style_select").val(data[i].style); |
||||
} else { |
||||
if(i == 0){ |
||||
changeStyle(data[i].style); |
||||
$("#style_select").val(data[i].style); |
||||
} |
||||
if(data[i].mode == "edit"){
|
||||
var tmp_array = []; |
||||
var container = $("<div class='cont'>"); |
||||
var sub_container = $("<div class='sub_cont'>").appendTo(container); |
||||
var imgs_answers = $("<div class='imgs_answers imgs_answers_gray'><img src='img/drop_img.png' style='margin-top: 11px;'/></div>").appendTo(container); |
||||
var imgs_container = $("<div class='imgs_cont'>").appendTo(container);
|
||||
|
||||
// var number = $("<div class='number_cont'>"+ (++tmp) +"</div>").appendTo(sub_container);
|
||||
var text = $("<div class='text_cont'>" + data[i].text + "</div>").appendTo(sub_container); |
||||
|
||||
for(var j in data[i].imgs){ |
||||
var img_block = $("<div class='img_block img_gray' style='text-align: center;'>"); |
||||
var img = $("<img src='../../" + data[i].imgs[j].link + "' style='display: inline;'>");
|
||||
img.height(data[i].imgs[j].ht);
|
||||
if((120 - data[i].imgs[j].ht) > 0) |
||||
img.css("margin",(120 - data[i].imgs[j].ht)/2 + "px 0"); |
||||
var hidden_input = $("<input type='hidden'>").val(data[i].imgs[j].value); |
||||
img_block.append(hidden_input).append(img); |
||||
tmp_array.push(img_block);
|
||||
} |
||||
tmp_array = shuffle(tmp_array); |
||||
for(j in tmp_array){ |
||||
tmp_array[j].draggable({ |
||||
helper:'clone', |
||||
zIndex:100, |
||||
appendTo: '#data' |
||||
}); |
||||
tmp_array[j].appendTo(imgs_container); |
||||
} |
||||
imgs_answers.droppable({ |
||||
hoverClass: 'dropHere', |
||||
drop: function(event, ui) { |
||||
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){ |
||||
if($(this).children()[0].tagName == "IMG") |
||||
$(this).children().remove(); |
||||
else |
||||
$(ui.draggable).parent().append($(this).children()); |
||||
$(this).append($(ui.draggable));
|
||||
if($(this).children().length == 1){
|
||||
if($(this).children().find("input").val() == "1") |
||||
$(this).removeClass("imgs_answers_gray") |
||||
.removeClass("imgs_answers_red") |
||||
.addClass("imgs_answers_green"); |
||||
else |
||||
$(this).removeClass("imgs_answers_gray") |
||||
.removeClass("imgs_answers_green") |
||||
.addClass("imgs_answers_red"); |
||||
}
|
||||
} |
||||
} |
||||
}); |
||||
imgs_container.droppable({ |
||||
hoverClass: 'dropBack', |
||||
drop: function(event, ui) { |
||||
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){ |
||||
if(this != $(ui.draggable).parent()[0]){ |
||||
var tmp_cont = $(ui.draggable).parent(); |
||||
$(this).append($(ui.draggable)); |
||||
tmp_cont.append("<img src='img/drop_img.png' style='margin-top: 11px;'/>"); |
||||
var answers = ""; |
||||
$(this).parent().find(".imgs_answers .img_block").each(function(){ |
||||
answers += $(this).find("input").val(); |
||||
}); |
||||
if(tmp_cont.children()[0].tagName == "IMG") |
||||
tmp_cont.removeClass("imgs_answers_green") |
||||
.removeClass("imgs_answers_red") |
||||
.addClass("imgs_answers_gray"); |
||||
else |
||||
if(tmp_cont.children().length == 1){
|
||||
if(tmp_cont.children().find("input").val() == "1") |
||||
tmp_cont.removeClass("imgs_answers_gray") |
||||
.removeClass("imgs_answers_red") |
||||
.addClass("imgs_answers_green"); |
||||
else |
||||
tmp_cont.removeClass("imgs_answers_gray") |
||||
.removeClass("imgs_answers_green") |
||||
.addClass("imgs_answers_red"); |
||||
}
|
||||
} |
||||
} |
||||
} |
||||
});
|
||||
container.appendTo("#data"); |
||||
} else { |
||||
container = $("<div class='cont'>"); |
||||
sub_container = $("<div class='sub_cont'>").appendTo(container); |
||||
imgs_answers = $("<div class='imgs_answers'></div>").appendTo(container); |
||||
$("<img src='img/drop_img.png' style='margin-top: 11px;'/>").appendTo(imgs_answers); |
||||
imgs_container = $("<div class='imgs_cont'>").appendTo(container);
|
||||
|
||||
// number = $("<div class='number_cont'>"+ (++tmp) +"</div>").appendTo(sub_container);
|
||||
text = $("<div class='text_cont'>" + data[i].text + "</div>").appendTo(sub_container); |
||||
|
||||
for(j in data[i].imgs){ |
||||
img_block = $("<div class='img_block img_gray' style='text-align: center;'>"); |
||||
img = $("<img src='../../" + data[i].imgs[j].link + "' style='display: inline;'>"); |
||||
img.height(data[i].imgs[j].ht); |
||||
if((120 - data[i].imgs[j].ht) > 0) |
||||
img.css("margin",(120 - data[i].imgs[j].ht)/2 + "px 0"); |
||||
hidden_input = $("<input type='hidden'>").val(data[i].imgs[j].value); |
||||
img_block.append(hidden_input).append(img); |
||||
img_block.draggable({ |
||||
helper:'clone', |
||||
zIndex:100, |
||||
appendTo: '#data' |
||||
}); |
||||
if(data[i].imgs[j].cont == "cont") |
||||
img_block.appendTo(imgs_container); |
||||
else{ |
||||
imgs_answers.empty(); |
||||
img_block.appendTo(imgs_answers); |
||||
if(data[i].imgs[j].value == "1") |
||||
imgs_answers.addClass("imgs_answers_green"); |
||||
else |
||||
imgs_answers.addClass("imgs_answers_red"); |
||||
} |
||||
} |
||||
|
||||
imgs_answers.droppable({ |
||||
hoverClass: 'dropHere', |
||||
drop: function(event, ui) { |
||||
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){ |
||||
if($(this).children()[0].tagName == "IMG") |
||||
$(this).children().remove(); |
||||
else |
||||
$(ui.draggable).parent().append($(this).children()); |
||||
$(this).append($(ui.draggable));
|
||||
if($(this).children().length == 1){
|
||||
if($(this).children().find("input").val() == "1") |
||||
$(this).removeClass("imgs_answers_gray") |
||||
.removeClass("imgs_answers_red") |
||||
.addClass("imgs_answers_green"); |
||||
else |
||||
$(this).removeClass("imgs_answers_gray") |
||||
.removeClass("imgs_answers_green") |
||||
.addClass("imgs_answers_red"); |
||||
}
|
||||
} |
||||
} |
||||
}); |
||||
imgs_container.droppable({ |
||||
hoverClass: 'dropBack', |
||||
drop: function(event, ui) { |
||||
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){ |
||||
if(this != $(ui.draggable).parent()[0]){ |
||||
var tmp_cont = $(ui.draggable).parent(); |
||||
$(this).append($(ui.draggable)); |
||||
tmp_cont.append("<img src='img/drop_img.png' style='margin-top: 11px;'/>"); |
||||
var answers = ""; |
||||
$(this).parent().find(".imgs_answers .img_block").each(function(){ |
||||
answers += $(this).find("input").val(); |
||||
}); |
||||
if(tmp_cont.children()[0].tagName == "IMG") |
||||
tmp_cont.removeClass("imgs_answers_green") |
||||
.removeClass("imgs_answers_red") |
||||
.addClass("imgs_answers_gray"); |
||||
else |
||||
if(tmp_cont.children().length == 1){
|
||||
if(tmp_cont.children().find("input").val() == "1") |
||||
tmp_cont.removeClass("imgs_answers_gray") |
||||
.removeClass("imgs_answers_red") |
||||
.addClass("imgs_answers_green"); |
||||
else |
||||
tmp_cont.removeClass("imgs_answers_gray") |
||||
.removeClass("imgs_answers_green") |
||||
.addClass("imgs_answers_red"); |
||||
}
|
||||
} |
||||
} |
||||
} |
||||
});
|
||||
container.appendTo("#data"); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
//example
|
||||
function showExample(){ |
||||
|
||||
changeStyle("3"); |
||||
var tmp_array = []; |
||||
|
||||
var container = $("<div class='cont'>").appendTo("#data"); |
||||
var sub_container = $("<div class='sub_cont'>").appendTo(container); |
||||
var imgs_answers = $("<div class='imgs_answers imgs_answers_gray'><img src='img/drop_img.png' style='margin-top: 11px;'/></div>").appendTo(container); |
||||
var imgs_container = $("<div class='imgs_cont'>").appendTo(container); |
||||
|
||||
// var number = $("<div class='number_cont'>1</div>").appendTo(sub_container);
|
||||
var text = $("<div class='text_cont'>" + sankoreLang.short_desc + "</div>").appendTo(sub_container); |
||||
|
||||
$("<input type='hidden' value='1'/>").appendTo(imgs_container); |
||||
|
||||
var img1 = $("<div class='img_block img_gray' style='text-align: center;'></div>"); |
||||
$("<input type='hidden' value='0'/>").appendTo(img1); |
||||
$("<img src=\"../../objects/0.gif\" style=\"display: inline;\" height=\"120\"/>").appendTo(img1); |
||||
var img2 = $("<div class='img_block img_gray' style='text-align: center;'></div>"); |
||||
$("<input type='hidden' value='0'/>").appendTo(img2); |
||||
$("<img src=\"../../objects/1.gif\" style=\"display: inline;\" height=\"120\"/>").appendTo(img2); |
||||
var img3 = $("<div class='img_block img_gray' style='text-align: center;'></div>"); |
||||
$("<input type='hidden' value='0'/>").appendTo(img3); |
||||
$("<img src=\"../../objects/2.gif\" style=\"display: inline;\" height=\"120\"/>").appendTo(img3); |
||||
var img4 = $("<div class='img_block img_gray' style='text-align: center;'></div>"); |
||||
$("<input type='hidden' value='1'/>").appendTo(img4); |
||||
$("<img src=\"../../objects/3.gif\" style=\"display: inline;\" height=\"120\"/>").appendTo(img4); |
||||
var img5 = $("<div class='img_block img_gray' style='text-align: center;'></div>"); |
||||
$("<input type='hidden' value='0'/>").appendTo(img5); |
||||
$("<img src=\"../../objects/4.gif\" style=\"display: inline;\" height=\"120\"/>").appendTo(img5);
|
||||
|
||||
tmp_array.push(img1, img2, img3, img4, img5); |
||||
tmp_array = shuffle(tmp_array); |
||||
for(var i = 0; i<tmp_array.length;i++){ |
||||
tmp_array[i].draggable({ |
||||
helper:'clone', |
||||
zIndex:100, |
||||
appendTo: '#data' |
||||
}); |
||||
tmp_array[i].appendTo(imgs_container); |
||||
} |
||||
imgs_answers.droppable({ |
||||
hoverClass: 'dropHere', |
||||
drop: function(event, ui) { |
||||
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){ |
||||
if($(this).children()[0].tagName == "IMG") |
||||
$(this).children().remove(); |
||||
else |
||||
$(ui.draggable).parent().append($(this).children()); |
||||
$(this).append($(ui.draggable));
|
||||
if($(this).children().length == 1){
|
||||
if($(this).children().find("input").val() == "1") |
||||
$(this).removeClass("imgs_answers_gray") |
||||
.removeClass("imgs_answers_red") |
||||
.addClass("imgs_answers_green"); |
||||
else |
||||
$(this).removeClass("imgs_answers_gray") |
||||
.removeClass("imgs_answers_green") |
||||
.addClass("imgs_answers_red"); |
||||
}
|
||||
} |
||||
} |
||||
}); |
||||
imgs_container.droppable({ |
||||
hoverClass: 'dropBack', |
||||
drop: function(event, ui) { |
||||
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){ |
||||
if(this != $(ui.draggable).parent()[0]){ |
||||
var tmp_cont = $(ui.draggable).parent(); |
||||
$(this).append($(ui.draggable)); |
||||
tmp_cont.append("<img src='img/drop_img.png' style='margin-top: 11px;'/>"); |
||||
var answers = ""; |
||||
$(this).parent().find(".imgs_answers .img_block").each(function(){ |
||||
answers += $(this).find("input").val(); |
||||
}); |
||||
if(tmp_cont.children()[0].tagName == "IMG") |
||||
tmp_cont.removeClass("imgs_answers_green") |
||||
.removeClass("imgs_answers_red") |
||||
.addClass("imgs_answers_gray"); |
||||
else |
||||
if(tmp_cont.children().length == 1){
|
||||
if(tmp_cont.children().find("input").val() == "1") |
||||
tmp_cont.removeClass("imgs_answers_gray") |
||||
.removeClass("imgs_answers_red") |
||||
.addClass("imgs_answers_green"); |
||||
else |
||||
tmp_cont.removeClass("imgs_answers_gray") |
||||
.removeClass("imgs_answers_green") |
||||
.addClass("imgs_answers_red"); |
||||
}
|
||||
} |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
|
||||
//changing the style
|
||||
function changeStyle(val){ |
||||
switch(val){ |
||||
case "1": |
||||
$(".b_top_left").removeClass("btl_pad").removeClass("without_back"); |
||||
$(".b_top_center").removeClass("btc_pad").removeClass("without_back"); |
||||
$(".b_top_right").removeClass("btr_pad").removeClass("without_back"); |
||||
$(".b_center_left").removeClass("bcl_pad").removeClass("without_back"); |
||||
$(".b_center_right").removeClass("bcr_pad").removeClass("without_back"); |
||||
$(".b_bottom_right").removeClass("bbr_pad").removeClass("without_back"); |
||||
$(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back"); |
||||
$(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back"); |
||||
$("#wgt_reload").removeClass("pad_color").removeClass("pad_reload"); |
||||
$("#wgt_help").removeClass("pad_color").removeClass("pad_help"); |
||||
$("#wgt_edit").removeClass("pad_color").removeClass("pad_edit"); |
||||
$("#wgt_name").removeClass("pad_color"); |
||||
$("#wgt_display").addClass("display_wood"); |
||||
$("#style_select").val(val); |
||||
$("body, html").removeClass("without_radius").addClass("radius_ft"); |
||||
break; |
||||
case "2": |
||||
$(".b_top_left").addClass("btl_pad").removeClass("without_back"); |
||||
$(".b_top_center").addClass("btc_pad").removeClass("without_back"); |
||||
$(".b_top_right").addClass("btr_pad").removeClass("without_back"); |
||||
$(".b_center_left").addClass("bcl_pad").removeClass("without_back"); |
||||
$(".b_center_right").addClass("bcr_pad").removeClass("without_back"); |
||||
$(".b_bottom_right").addClass("bbr_pad").removeClass("without_back"); |
||||
$(".b_bottom_left").addClass("bbl_pad").removeClass("without_back"); |
||||
$(".b_bottom_center").addClass("bbc_pad").removeClass("without_back"); |
||||
$("#wgt_reload").addClass("pad_color").addClass("pad_reload"); |
||||
$("#wgt_help").addClass("pad_color").addClass("pad_help"); |
||||
$("#wgt_edit").addClass("pad_color").addClass("pad_edit"); |
||||
$("#wgt_name").addClass("pad_color"); |
||||
$("#wgt_display").removeClass("display_wood"); |
||||
$("#style_select").val(val); |
||||
$("body, html").removeClass("without_radius").removeClass("radius_ft"); |
||||
break; |
||||
case "3": |
||||
$(".b_top_left").addClass("without_back").removeClass("btl_pad"); |
||||
$(".b_top_center").addClass("without_back").removeClass("btc_pad"); |
||||
$(".b_top_right").addClass("without_back").removeClass("btr_pad"); |
||||
$(".b_center_left").addClass("without_back").removeClass("bcl_pad"); |
||||
$(".b_center_right").addClass("without_back").removeClass("bcr_pad"); |
||||
$(".b_bottom_right").addClass("without_back").removeClass("bbr_pad"); |
||||
$(".b_bottom_left").addClass("without_back").removeClass("bbl_pad"); |
||||
$(".b_bottom_center").addClass("without_back").removeClass("bbc_pad"); |
||||
$("#wgt_help").addClass("pad_color").addClass("pad_help"); |
||||
$("#wgt_reload").addClass("pad_color").addClass("pad_reload"); |
||||
$("#wgt_edit").addClass("pad_color").addClass("pad_edit"); |
||||
$("#wgt_name").addClass("pad_color"); |
||||
$("#wgt_display").removeClass("display_wood"); |
||||
$("#style_select").val(val); |
||||
$("body, html").addClass("without_radius").removeClass("radius_ft"); |
||||
break; |
||||
} |
||||
} |
||||
|
||||
|
||||
//check result
|
||||
function checkResult(event) |
||||
{ |
||||
var str = ""; |
||||
var right_str = $(event.target).find("input").val(); |
||||
$(event.target).find(".img_block").each(function(){ |
||||
str += $(this).find("input").val() + "*"; |
||||
}); |
||||
if(str == right_str) |
||||
$(event.target).css("background-color","#9f9"); |
||||
} |
||||
|
||||
//add new container
|
||||
//function addContainer(){
|
||||
// var container = $("<div class='cont'>");
|
||||
// var sub_container = $("<div class='sub_cont'>").appendTo(container);
|
||||
// var imgs_container = $("<div class='imgs_cont'>").appendTo(container);
|
||||
//
|
||||
// var close = $("<div class='close_cont'>").appendTo(container);
|
||||
// var number = $("<div class='number_cont'>"+ ($(".cont").size() + 1) +"</div>").appendTo(sub_container);
|
||||
// var text = $("<div class='text_cont' contenteditable>" + sankoreLang.enter + "</div>").appendTo(sub_container);
|
||||
//
|
||||
// $("<input type='hidden' value='1*2*3*4*5*'/>").appendTo(imgs_container);
|
||||
// var add_img = $("<div class='add_img'>").appendTo(imgs_container);
|
||||
// container.insertBefore($(".add_block"));
|
||||
//}
|
||||
|
||||
//add new img block
|
||||
function addImgBlock(dest){ |
||||
var img_block = $("<div class='img_block img_gray' ondragenter='return false;' ondragleave='$(this).css(\"background-color\",\"\"); return false;' ondragover='$(this).css(\"background-color\",\"#ccc\"); return false;' ondrop='$(this).css(\"background-color\",\"\"); return onDropTarget(this,event);' style='text-align: center; float: left;'></div>").insertBefore(dest); |
||||
$("<div class='close_img'>").appendTo(img_block); |
||||
$("<div class='clear_img'>").appendTo(img_block); |
||||
$("<div class='true_img'>").appendTo(img_block); |
||||
$("<input type='hidden' value='0'/>").appendTo(img_block); |
||||
$("<img src='img/drop_img.png' height='120'/>").appendTo(img_block); |
||||
} |
||||
|
||||
//function refreshBlockNumbers(){
|
||||
// var i = 0;
|
||||
// $(".cont").each(function(){
|
||||
// $(this).find(".number_cont").text(++i);
|
||||
// })
|
||||
//}
|
||||
|
||||
//shuffles an array
|
||||
function shuffle( arr ) |
||||
{ |
||||
var pos, tmp; |
||||
|
||||
for( var i = 0; i < arr.length; i++ ) |
||||
{ |
||||
pos = Math.round( Math.random() * ( arr.length - 1 ) ); |
||||
tmp = arr[pos]; |
||||
arr[pos] = arr[i]; |
||||
arr[i] = tmp; |
||||
} |
||||
return arr; |
||||
} |
||||
|
||||
|
||||
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; |
||||
} |
||||
|
||||
function onDropTarget(obj, event) { |
||||
$(obj).find("img").remove(); |
||||
if (event.dataTransfer) { |
||||
var format = "text/plain"; |
||||
var textData = event.dataTransfer.getData(format); |
||||
if (!textData) { |
||||
alert(":("); |
||||
} |
||||
textData = stringToXML(textData); |
||||
var tmp = textData.getElementsByTagName("path")[0].firstChild.textContent; |
||||
var tmp_img = $("<img/>").attr("src", "../../" + tmp); |
||||
$(obj).append(tmp_img); |
||||
setTimeout(function(){ |
||||
if(tmp_img.height() >= tmp_img.width()) |
||||
tmp_img.attr("height", "120"); |
||||
else{ |
||||
tmp_img.attr("width","120"); |
||||
var h = tmp_img.height(); |
||||
tmp_img.attr("height",h); |
||||
tmp_img.css("margin",(120 - tmp_img.height())/2 + "px 0"); |
||||
} |
||||
}, 6) |
||||
|
||||
} |
||||
else { |
||||
alert ("Your browser does not support the dataTransfer object."); |
||||
} |
||||
|
||||
if (event.stopPropagation) { |
||||
event.stopPropagation (); |
||||
} |
||||
else { |
||||
event.cancelBubble = true; |
||||
} |
||||
return false; |
||||
} |
||||
|
||||
@ -1,16 +1,17 @@ |
||||
<?xml version="1.0" encoding="UTF-8"?> |
||||
<widget xmlns="http://www.w3.org/ns/widgets" |
||||
xmlns:ub="http://uniboard.mnemis.com/widgets" |
||||
id="http://uniboard.mnemis.com/widgets/notes" |
||||
version="1.2" |
||||
width="950" |
||||
height="600" |
||||
ub:resizable="true"> |
||||
|
||||
<name>Notes</name> |
||||
<author href="http://www.getuniboard.com" |
||||
email="info@mnemis.com">Mnemis SA</author> |
||||
<description>Associer images</description> |
||||
|
||||
<content src="index.html"/> |
||||
</widget> |
||||
<?xml version="1.0" encoding="UTF-8"?> |
||||
<widget xmlns="http://www.w3.org/ns/widgets" |
||||
xmlns:ub="http://uniboard.mnemis.com/widgets" |
||||
id="http://uniboard.mnemis.com/widgets/notes" |
||||
version="1.2" |
||||
width="950" |
||||
height="560" |
||||
minimum_height="300" |
||||
minimum_width="710" |
||||
ub:resizable="false"> |
||||
<name>Notes</name> |
||||
<author href="http://www.getuniboard.com" |
||||
email="info@mnemis.com">Mnemis SA</author> |
||||
<description>Associer images</description> |
||||
|
||||
<content src="index.html"/> |
||||
</widget> |
||||
|
||||
@ -1,471 +1,470 @@ |
||||
html, body{ |
||||
width: 100%; |
||||
height: 100%; |
||||
margin: 0; |
||||
padding: 0; |
||||
border-radius: 35px; |
||||
overflow: hidden; |
||||
font-family: sans-serif; |
||||
} |
||||
|
||||
body{ |
||||
background-image: url(../img/bg.png); |
||||
} |
||||
|
||||
.toggle_mode{ |
||||
width: 100%; |
||||
height: 25px; |
||||
border-bottom: 1px solid black; |
||||
background-color: #ccc; |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
z-index: 2; |
||||
} |
||||
|
||||
#display_img, #edit_img{ |
||||
width: 15px; |
||||
height: 15px; |
||||
margin: 5px 10px; |
||||
} |
||||
|
||||
#display_text, #edit_text{ |
||||
height: 19px; |
||||
padding: 3px 0 0 0; |
||||
} |
||||
|
||||
.selected{ |
||||
|
||||
} |
||||
|
||||
#display:hover, #edit:hover{ |
||||
background-color: #999; |
||||
} |
||||
|
||||
.cont{ |
||||
width: 100%; |
||||
border-bottom: 1px solid black; |
||||
margin: 0; |
||||
padding: 0; |
||||
position: relative; |
||||
} |
||||
|
||||
.sub_cont{ |
||||
width: 100%; |
||||
padding: 0; |
||||
margin: 20px 0 0 0; |
||||
min-height: 60px; |
||||
} |
||||
|
||||
.imgs_cont{ |
||||
width: 100%; |
||||
min-height: 142px; |
||||
margin: 0; |
||||
} |
||||
|
||||
.imgs_answers{ |
||||
width: 162px; |
||||
margin: 0 auto; |
||||
margin-bottom: 10px; |
||||
min-height: 142px; |
||||
border: 2px dashed #ccc; |
||||
text-align: center; |
||||
} |
||||
|
||||
.imgs_answers_gray{ |
||||
|
||||
} |
||||
|
||||
.imgs_answers_green{ |
||||
background-color: #9f9; |
||||
} |
||||
|
||||
.imgs_answers_red{ |
||||
background-color: #f99; |
||||
} |
||||
|
||||
.number_cont{ |
||||
width: 40px; |
||||
height: 33px; |
||||
margin-left: 40px; |
||||
margin-right: 10px; |
||||
background-image: url(../img/circle.png); |
||||
background-repeat: no-repeat; |
||||
text-align: center; |
||||
float: left; |
||||
font-size: 130%; |
||||
padding-top: 7px; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.text_cont{ |
||||
width: 80%; |
||||
min-height: 40px; |
||||
max-height: 60px; |
||||
float: right; |
||||
background-color: #999; |
||||
border-top-left-radius: 20px; |
||||
border-bottom-left-radius: 20px; |
||||
} |
||||
|
||||
.close_cont{ |
||||
width: 20px; |
||||
height: 20px; |
||||
background-image: url(../img/close_cont.png); |
||||
cursor: pointer; |
||||
position: absolute; |
||||
top: -15px; |
||||
left: 5px; |
||||
} |
||||
|
||||
.add_img{ |
||||
width: 120px; |
||||
height: 120px; |
||||
margin: 10px 20px; |
||||
background-image: url(../img/add_img.png); |
||||
background-position: center; |
||||
background-repeat: no-repeat; |
||||
cursor: pointer; |
||||
display: inline-block; |
||||
} |
||||
|
||||
.img_block{ |
||||
width: 120px; |
||||
height: 120px; |
||||
margin: 10px 20px; |
||||
cursor: pointer; |
||||
display: inline-block; |
||||
position: relative; |
||||
} |
||||
|
||||
.img_gray{ |
||||
border: 1px solid #ccc; |
||||
-moz-box-shadow: #ccc -1px 0 4px; |
||||
-webkit-box-shadow: #ccc -1px 0 4px; |
||||
box-shadow: #ccc -1px 0 4px; |
||||
} |
||||
|
||||
.close_img, .true_img, .false_img{ |
||||
width: 30px; |
||||
height: 30px; |
||||
background-repeat: no-repeat; |
||||
position: absolute; |
||||
right: -15px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.close_img{ |
||||
background-image: url(../img/close_img.png); |
||||
top: -15px; |
||||
} |
||||
|
||||
.true_img{ |
||||
background-image: url(../img/false.png); |
||||
top: 15px; |
||||
} |
||||
|
||||
.false_img{ |
||||
background-image: url(../img/true.png); |
||||
top: 15px; |
||||
} |
||||
|
||||
.add_block{ |
||||
margin: 20px 0 0 20px; |
||||
width: 110px; |
||||
height: 25px; |
||||
background-image: url(../img/add_block.png); |
||||
background-repeat: no-repeat; |
||||
padding-left: 40px; |
||||
padding-top: 5px; |
||||
cursor: pointer; |
||||
background-color: #ccc; |
||||
-webkit-border-radius: 15px; |
||||
border-radius: 15px; |
||||
} |
||||
|
||||
.dropHere{ |
||||
background-color: #ccc; |
||||
} |
||||
|
||||
.dropBack{ |
||||
|
||||
} |
||||
|
||||
.audio_block{ |
||||
width: 120px; |
||||
height: 30px; |
||||
padding: 5px 0 5px 10px; |
||||
float: left; |
||||
border-right: 3px solid white; |
||||
} |
||||
|
||||
.audio_gray{ |
||||
border-top-left-radius: 15px; |
||||
border-bottom-left-radius: 15px; |
||||
background-color: white; |
||||
} |
||||
|
||||
.audio_desc{ |
||||
width: 73%; |
||||
max-height: 40px; |
||||
overflow-x: hidden; |
||||
float: right; |
||||
margin-left: 20px; |
||||
word-break: break-all; |
||||
} |
||||
|
||||
.play, .stop{ |
||||
height: 30px; |
||||
width: 70px; |
||||
float: left; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.play{ |
||||
background-image: url(../img/play.png); |
||||
} |
||||
|
||||
.stop{ |
||||
background-image: url(../img/stop.png); |
||||
} |
||||
|
||||
.replay{ |
||||
height: 30px; |
||||
width: 32px; |
||||
margin-left: 10px; |
||||
float: left; |
||||
background-image: url(../img/replay.png); |
||||
background-repeat: no-repeat; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.gray{ |
||||
background-color: #ccc; |
||||
} |
||||
|
||||
/*new design*/ |
||||
|
||||
.body_table{ |
||||
width: 100%; |
||||
height: 100%; |
||||
border-spacing: 0; |
||||
} |
||||
|
||||
/*top*/ |
||||
|
||||
.b_top_left{ |
||||
width: 54px; |
||||
background-image: url(../img/top_left.png); |
||||
background-repeat: no-repeat; |
||||
} |
||||
|
||||
.b_top_right{ |
||||
width: 54px; |
||||
background-image: url(../img/top_right.png); |
||||
background-repeat: no-repeat; |
||||
} |
||||
|
||||
.b_top_center{ |
||||
height: 54px; |
||||
background-image: url(../img/top.png); |
||||
background-repeat: repeat-x; |
||||
} |
||||
|
||||
/*bottom*/ |
||||
|
||||
.b_bottom_left{ |
||||
width: 54px; |
||||
background-image: url(../img/bottom_left.png); |
||||
background-repeat: no-repeat; |
||||
} |
||||
|
||||
.b_bottom_right{ |
||||
width: 54px; |
||||
background-image: url(../img/bottom_right.png); |
||||
background-repeat: no-repeat; |
||||
} |
||||
|
||||
.b_bottom_center{ |
||||
background-image: url(../img/bottom.png); |
||||
background-repeat: repeat-x; |
||||
} |
||||
|
||||
/*center*/ |
||||
|
||||
.b_center_left{ |
||||
width: 54px; |
||||
background-image: url(../img/left.png); |
||||
background-repeat: repeat-y; |
||||
} |
||||
|
||||
.b_center_right{ |
||||
width: 54px; |
||||
background-image: url(../img/right.png); |
||||
background-repeat: repeat-y; |
||||
} |
||||
|
||||
#data{ |
||||
width: 100%; |
||||
height: 100%; |
||||
min-height: 250px; |
||||
overflow: auto; |
||||
} |
||||
|
||||
#wgt_name{ |
||||
height: 44px; |
||||
margin: 10px 10px 0 10px; |
||||
padding: 0; |
||||
float: left; |
||||
font-family: sans-serif; |
||||
font-size: 24px; |
||||
color: #7F613F; |
||||
text-shadow: #FFDCA9 0 1px 0; |
||||
} |
||||
|
||||
#wgt_reload, #wgt_edit, #wgt_display, #wgt_help{ |
||||
cursor: pointer; |
||||
margin: 10px 10px 0 0; |
||||
float: right; |
||||
font-family: sans-serif; |
||||
font-size: 24px; |
||||
line-height: 32px; |
||||
} |
||||
|
||||
#wgt_display{ |
||||
padding-left: 35px; |
||||
background: url(../img/toolbar-edit.png) left -32px no-repeat; |
||||
color: white; |
||||
display: none; |
||||
} |
||||
|
||||
#wgt_edit{ |
||||
padding-left: 35px; |
||||
background: url(../img/slate-toolbar-edit.png) left top no-repeat; |
||||
color: #7F613F; |
||||
text-shadow: #FFDCA9 0 1px 0; |
||||
} |
||||
|
||||
#wgt_reload{ |
||||
padding-left: 35px; |
||||
background: url(../img/slate-toolbar-reload.png) left top no-repeat; |
||||
color: #7F613F; |
||||
text-shadow: #FFDCA9 0 1px 0; |
||||
} |
||||
|
||||
.btl_pad{ |
||||
background-image: url(../img/pad-top-left.png) !important; |
||||
} |
||||
|
||||
.btc_pad{ |
||||
background-image: url(../img/pad-top.png) !important; |
||||
} |
||||
|
||||
.btr_pad{ |
||||
background-image: url(../img/pad-top-right.png) !important; |
||||
} |
||||
|
||||
.bcl_pad{ |
||||
background-image: url(../img/pad-left.png) !important; |
||||
} |
||||
|
||||
.bcr_pad{ |
||||
background-image: url(../img/pad-right.png) !important; |
||||
} |
||||
|
||||
.bbl_pad{ |
||||
background-image: url(../img/pad-bottom-left.png) !important; |
||||
} |
||||
|
||||
.bbc_pad{ |
||||
background-image: url(../img/pad-bottom.png) !important; |
||||
} |
||||
|
||||
.bbr_pad{ |
||||
background-image: url(../img/pad-bottom-right.png) !important; |
||||
} |
||||
|
||||
.without_radius{ |
||||
border-radius: 0 !important; |
||||
} |
||||
|
||||
.without_back{ |
||||
background: none !important; |
||||
} |
||||
|
||||
.pad_color{ |
||||
color: #FC9 !important; |
||||
text-shadow: none !important; |
||||
} |
||||
|
||||
.pad_reload{ |
||||
background: url(../img/toolbar-reload.png) left top no-repeat !important; |
||||
} |
||||
|
||||
.pad_edit{ |
||||
background: url(../img/toolbar-edit.png) left top no-repeat !important; |
||||
} |
||||
|
||||
.pad_help{ |
||||
background: url(../img/toolbar-help.png) left top no-repeat !important; |
||||
} |
||||
|
||||
.help_wood{ |
||||
background: url(../img/slate-toolbar-help.png) left -32px no-repeat !important; |
||||
color: white !important; |
||||
text-shadow: #7F613F 0 -1px 0 !important; |
||||
} |
||||
|
||||
.help_pad{ |
||||
background: url(../img/toolbar-help.png) left -32px no-repeat !important; |
||||
color: white !important; |
||||
} |
||||
|
||||
#wgt_help{ |
||||
padding-left: 35px; |
||||
background: url(../img/slate-toolbar-help.png) left top no-repeat; |
||||
color: #7F613F; |
||||
text-shadow: #FFDCA9 0 1px 0; |
||||
} |
||||
|
||||
#help{ |
||||
height: 100%; |
||||
overflow: auto; |
||||
display: none; |
||||
background-color: #ccc; |
||||
padding: 5px; |
||||
} |
||||
|
||||
.open{ |
||||
|
||||
} |
||||
|
||||
#parameters{ |
||||
display: none; |
||||
padding: 10px 20px; |
||||
background: url("../img/parameters-bg.png"); |
||||
border-radius: 4px 4px 0 0; |
||||
} |
||||
|
||||
.inline{ |
||||
display: inline-block; |
||||
font-family: sans-serif; |
||||
font-size: 14px; |
||||
color: #666; |
||||
} |
||||
|
||||
#parameters label { |
||||
font-style: italic; |
||||
} |
||||
|
||||
#style_select{ |
||||
margin-left: 10px; |
||||
} |
||||
|
||||
.display_wood{ |
||||
background: url(../img/slate-toolbar-edit.png) left -32px no-repeat !important; |
||||
text-shadow: #7F613F 0 -1px 0; |
||||
} |
||||
|
||||
.radius_ft{ |
||||
border-radius: 45px !important; |
||||
html, body{ |
||||
width: 100%; |
||||
height: 100%; |
||||
margin: 0; |
||||
padding: 0; |
||||
border-radius: 35px; |
||||
overflow: hidden; |
||||
font-family: sans-serif; |
||||
} |
||||
|
||||
body{ |
||||
background-image: url(../img/bg.png); |
||||
} |
||||
|
||||
.toggle_mode{ |
||||
width: 100%; |
||||
height: 25px; |
||||
border-bottom: 1px solid black; |
||||
background-color: #ccc; |
||||
position: fixed; |
||||
top: 0; |
||||
left: 0; |
||||
z-index: 2; |
||||
} |
||||
|
||||
#display_img, #edit_img{ |
||||
width: 15px; |
||||
height: 15px; |
||||
margin: 5px 10px; |
||||
} |
||||
|
||||
#display_text, #edit_text{ |
||||
height: 19px; |
||||
padding: 3px 0 0 0; |
||||
} |
||||
|
||||
.selected{ |
||||
|
||||
} |
||||
|
||||
#display:hover, #edit:hover{ |
||||
background-color: #999; |
||||
} |
||||
|
||||
.cont{ |
||||
width: 100%; |
||||
border-bottom: 1px solid black; |
||||
margin: 0; |
||||
padding: 0; |
||||
position: relative; |
||||
} |
||||
|
||||
.sub_cont{ |
||||
width: 100%; |
||||
padding: 0; |
||||
margin: 20px 0 0 0; |
||||
min-height: 60px; |
||||
} |
||||
|
||||
.imgs_cont{ |
||||
width: 100%; |
||||
min-height: 142px; |
||||
margin: 0; |
||||
} |
||||
|
||||
.imgs_answers{ |
||||
width: 162px; |
||||
margin: 0 auto; |
||||
margin-bottom: 10px; |
||||
min-height: 142px; |
||||
border: 2px dashed #ccc; |
||||
text-align: center; |
||||
} |
||||
|
||||
.imgs_answers_gray{ |
||||
|
||||
} |
||||
|
||||
.imgs_answers_green{ |
||||
background-color: #9f9; |
||||
} |
||||
|
||||
.imgs_answers_red{ |
||||
background-color: #f99; |
||||
} |
||||
|
||||
.number_cont{ |
||||
width: 40px; |
||||
height: 33px; |
||||
margin-left: 40px; |
||||
margin-right: 10px; |
||||
background-image: url(../img/circle.png); |
||||
background-repeat: no-repeat; |
||||
text-align: center; |
||||
float: left; |
||||
font-size: 130%; |
||||
padding-top: 7px; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.text_cont{ |
||||
width: 80%; |
||||
min-height: 40px; |
||||
max-height: 60px; |
||||
float: right; |
||||
background-color: #999; |
||||
border-top-left-radius: 20px; |
||||
border-bottom-left-radius: 20px; |
||||
} |
||||
|
||||
.close_cont{ |
||||
width: 20px; |
||||
height: 20px; |
||||
background-image: url(../img/close_cont.png); |
||||
cursor: pointer; |
||||
position: absolute; |
||||
top: -15px; |
||||
left: 5px; |
||||
} |
||||
|
||||
.add_img{ |
||||
width: 120px; |
||||
height: 120px; |
||||
margin: 10px 20px; |
||||
background-image: url(../img/add_img.png); |
||||
background-position: center; |
||||
background-repeat: no-repeat; |
||||
cursor: pointer; |
||||
display: inline-block; |
||||
} |
||||
|
||||
.img_block{ |
||||
width: 120px; |
||||
height: 120px; |
||||
margin: 10px 20px; |
||||
cursor: pointer; |
||||
display: inline-block; |
||||
position: relative; |
||||
} |
||||
|
||||
.img_gray{ |
||||
border: 1px solid #ccc; |
||||
-moz-box-shadow: #ccc -1px 0 4px; |
||||
-webkit-box-shadow: #ccc -1px 0 4px; |
||||
box-shadow: #ccc -1px 0 4px; |
||||
} |
||||
|
||||
.close_img, .true_img, .false_img{ |
||||
width: 30px; |
||||
height: 30px; |
||||
background-repeat: no-repeat; |
||||
position: absolute; |
||||
right: -15px; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.close_img{ |
||||
background-image: url(../img/close_img.png); |
||||
top: -15px; |
||||
} |
||||
|
||||
.true_img{ |
||||
background-image: url(../img/false.png); |
||||
top: 15px; |
||||
} |
||||
|
||||
.false_img{ |
||||
background-image: url(../img/true.png); |
||||
top: 15px; |
||||
} |
||||
|
||||
.add_block{ |
||||
margin: 20px 0 0 20px; |
||||
width: 110px; |
||||
height: 25px; |
||||
background-image: url(../img/add_block.png); |
||||
background-repeat: no-repeat; |
||||
padding-left: 40px; |
||||
padding-top: 5px; |
||||
cursor: pointer; |
||||
background-color: #ccc; |
||||
-webkit-border-radius: 15px; |
||||
border-radius: 15px; |
||||
} |
||||
|
||||
.dropHere{ |
||||
background-color: #ccc; |
||||
} |
||||
|
||||
.dropBack{ |
||||
|
||||
} |
||||
|
||||
.audio_block{ |
||||
width: 120px; |
||||
height: 30px; |
||||
padding: 5px 0 5px 10px; |
||||
float: left; |
||||
border-right: 3px solid white; |
||||
} |
||||
|
||||
.audio_gray{ |
||||
border-top-left-radius: 15px; |
||||
border-bottom-left-radius: 15px; |
||||
background-color: white; |
||||
} |
||||
|
||||
.audio_desc{ |
||||
width: 70%; |
||||
max-height: 40px; |
||||
overflow-x: hidden; |
||||
float: right; |
||||
word-break: break-all; |
||||
} |
||||
|
||||
.play, .stop{ |
||||
height: 30px; |
||||
width: 70px; |
||||
float: left; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.play{ |
||||
background-image: url(../img/play.png); |
||||
} |
||||
|
||||
.stop{ |
||||
background-image: url(../img/stop.png); |
||||
} |
||||
|
||||
.replay{ |
||||
height: 30px; |
||||
width: 32px; |
||||
margin-left: 10px; |
||||
float: left; |
||||
background-image: url(../img/replay.png); |
||||
background-repeat: no-repeat; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.gray{ |
||||
background-color: #ccc; |
||||
} |
||||
|
||||
/*new design*/ |
||||
|
||||
.body_table{ |
||||
width: 100%; |
||||
height: 100%; |
||||
border-spacing: 0; |
||||
} |
||||
|
||||
/*top*/ |
||||
|
||||
.b_top_left{ |
||||
width: 54px; |
||||
background-image: url(../img/top_left.png); |
||||
background-repeat: no-repeat; |
||||
} |
||||
|
||||
.b_top_right{ |
||||
width: 54px; |
||||
background-image: url(../img/top_right.png); |
||||
background-repeat: no-repeat; |
||||
} |
||||
|
||||
.b_top_center{ |
||||
height: 54px; |
||||
background-image: url(../img/top.png); |
||||
background-repeat: repeat-x; |
||||
} |
||||
|
||||
/*bottom*/ |
||||
|
||||
.b_bottom_left{ |
||||
width: 54px; |
||||
background-image: url(../img/bottom_left.png); |
||||
background-repeat: no-repeat; |
||||
} |
||||
|
||||
.b_bottom_right{ |
||||
width: 54px; |
||||
background-image: url(../img/bottom_right.png); |
||||
background-repeat: no-repeat; |
||||
} |
||||
|
||||
.b_bottom_center{ |
||||
background-image: url(../img/bottom.png); |
||||
background-repeat: repeat-x; |
||||
} |
||||
|
||||
/*center*/ |
||||
|
||||
.b_center_left{ |
||||
width: 54px; |
||||
background-image: url(../img/left.png); |
||||
background-repeat: repeat-y; |
||||
} |
||||
|
||||
.b_center_right{ |
||||
width: 54px; |
||||
background-image: url(../img/right.png); |
||||
background-repeat: repeat-y; |
||||
} |
||||
|
||||
#data{ |
||||
width: 100%; |
||||
height: 100%; |
||||
min-height: 250px; |
||||
overflow: auto; |
||||
} |
||||
|
||||
#wgt_name{ |
||||
height: 44px; |
||||
margin: 10px 10px 0 10px; |
||||
padding: 0; |
||||
float: left; |
||||
font-family: sans-serif; |
||||
font-size: 24px; |
||||
color: #7F613F; |
||||
text-shadow: #FFDCA9 0 1px 0; |
||||
} |
||||
|
||||
#wgt_reload, #wgt_edit, #wgt_display, #wgt_help{ |
||||
cursor: pointer; |
||||
margin: 10px 10px 0 0; |
||||
float: right; |
||||
font-family: sans-serif; |
||||
font-size: 24px; |
||||
line-height: 32px; |
||||
} |
||||
|
||||
#wgt_display{ |
||||
padding-left: 35px; |
||||
background: url(../img/toolbar-edit.png) left -32px no-repeat; |
||||
color: white; |
||||
display: none; |
||||
} |
||||
|
||||
#wgt_edit{ |
||||
padding-left: 35px; |
||||
background: url(../img/slate-toolbar-edit.png) left top no-repeat; |
||||
color: #7F613F; |
||||
text-shadow: #FFDCA9 0 1px 0; |
||||
} |
||||
|
||||
#wgt_reload{ |
||||
padding-left: 35px; |
||||
background: url(../img/slate-toolbar-reload.png) left top no-repeat; |
||||
color: #7F613F; |
||||
text-shadow: #FFDCA9 0 1px 0; |
||||
} |
||||
|
||||
.btl_pad{ |
||||
background-image: url(../img/pad-top-left.png) !important; |
||||
} |
||||
|
||||
.btc_pad{ |
||||
background-image: url(../img/pad-top.png) !important; |
||||
} |
||||
|
||||
.btr_pad{ |
||||
background-image: url(../img/pad-top-right.png) !important; |
||||
} |
||||
|
||||
.bcl_pad{ |
||||
background-image: url(../img/pad-left.png) !important; |
||||
} |
||||
|
||||
.bcr_pad{ |
||||
background-image: url(../img/pad-right.png) !important; |
||||
} |
||||
|
||||
.bbl_pad{ |
||||
background-image: url(../img/pad-bottom-left.png) !important; |
||||
} |
||||
|
||||
.bbc_pad{ |
||||
background-image: url(../img/pad-bottom.png) !important; |
||||
} |
||||
|
||||
.bbr_pad{ |
||||
background-image: url(../img/pad-bottom-right.png) !important; |
||||
} |
||||
|
||||
.without_radius{ |
||||
border-radius: 0 !important; |
||||
} |
||||
|
||||
.without_back{ |
||||
background: none !important; |
||||
} |
||||
|
||||
.pad_color{ |
||||
color: #FC9 !important; |
||||
text-shadow: none !important; |
||||
} |
||||
|
||||
.pad_reload{ |
||||
background: url(../img/toolbar-reload.png) left top no-repeat !important; |
||||
} |
||||
|
||||
.pad_edit{ |
||||
background: url(../img/toolbar-edit.png) left top no-repeat !important; |
||||
} |
||||
|
||||
.pad_help{ |
||||
background: url(../img/toolbar-help.png) left top no-repeat !important; |
||||
} |
||||
|
||||
.help_wood{ |
||||
background: url(../img/slate-toolbar-help.png) left -32px no-repeat !important; |
||||
color: white !important; |
||||
text-shadow: #7F613F 0 -1px 0 !important; |
||||
} |
||||
|
||||
.help_pad{ |
||||
background: url(../img/toolbar-help.png) left -32px no-repeat !important; |
||||
color: white !important; |
||||
} |
||||
|
||||
#wgt_help{ |
||||
padding-left: 35px; |
||||
background: url(../img/slate-toolbar-help.png) left top no-repeat; |
||||
color: #7F613F; |
||||
text-shadow: #FFDCA9 0 1px 0; |
||||
} |
||||
|
||||
#help{ |
||||
height: 100%; |
||||
overflow: auto; |
||||
display: none; |
||||
background-color: #ccc; |
||||
padding: 5px; |
||||
} |
||||
|
||||
.open{ |
||||
|
||||
} |
||||
|
||||
#parameters{ |
||||
display: none; |
||||
padding: 10px 20px; |
||||
background: url("../img/parameters-bg.png"); |
||||
border-radius: 4px 4px 0 0; |
||||
} |
||||
|
||||
.inline{ |
||||
display: inline-block; |
||||
font-family: sans-serif; |
||||
font-size: 14px; |
||||
color: #666; |
||||
} |
||||
|
||||
#parameters label { |
||||
font-style: italic; |
||||
} |
||||
|
||||
#style_select{ |
||||
margin-left: 10px; |
||||
} |
||||
|
||||
.display_wood{ |
||||
background: url(../img/slate-toolbar-edit.png) left -32px no-repeat !important; |
||||
text-shadow: #7F613F 0 -1px 0; |
||||
} |
||||
|
||||
.radius_ft{ |
||||
border-radius: 45px !important; |
||||
} |
||||
|
After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1,60 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<title>D'n'd</title> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> |
||||
<link rel="stylesheet" type="text/css" href="../../css/basic.css"/> |
||||
<script type="text/javascript" src="../../js/jquery-1.6.2.min.js"></script> |
||||
<script type="text/javascript" src="../../js/jquery-ui-1.8.9.custom.min.js"></script> |
||||
<script type="text/javascript" src="js/script.js"></script> |
||||
<script type="text/javascript"> |
||||
$(document).ready(function(){ |
||||
if(window.sankore) |
||||
sankore.enableDropOnWidget(false); |
||||
start(); |
||||
}); |
||||
</script> |
||||
</head> |
||||
<body> |
||||
<table class="body_table" cellpadding=0 cellspacing=0> |
||||
<tr style="height: 54px;"> |
||||
<td class="b_top_left"> </td> |
||||
<td class="b_top_center"> |
||||
<div id="wgt_name"></div> |
||||
<div id="wgt_help"></div> |
||||
<div id="wgt_reload"></div> |
||||
<div id="wgt_display" class="selected"></div> |
||||
<div id="wgt_edit"></div> |
||||
</td> |
||||
<td class="b_top_right"> </td> |
||||
</tr> |
||||
|
||||
<tr> |
||||
<td class="b_center_left"> </td> |
||||
<td> |
||||
<div id="help"></div> |
||||
<div id="data"> |
||||
<div id="parameters"> |
||||
<div class="inline"> |
||||
<label> |
||||
<select id="style_select"> |
||||
<option value="1"></option> |
||||
<option value="2"></option> |
||||
<option value="3"></option> |
||||
</select> |
||||
</label> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</td> |
||||
<td class="b_center_right"> </td> |
||||
</tr> |
||||
|
||||
<tr style="height: 54px;"> |
||||
<td class="b_bottom_left"> </td> |
||||
<td class="b_bottom_center"> </td> |
||||
<td class="b_bottom_right"> </td> |
||||
</tr> |
||||
</table> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,918 @@ |
||||
var sankoreLang = { |
||||
display: "Display",
|
||||
edit: "Edit",
|
||||
short_desc: "How many signals do you hear?",
|
||||
add: "Add new block", |
||||
enter: "Enter your instruction here ...", |
||||
wgt_name: "Associate to the audio", |
||||
reload: "Reload", |
||||
slate: "slate", |
||||
pad: "pad", |
||||
none: "none", |
||||
help: "Help", |
||||
help_content:
|
||||
"<p> <h2>Associate to the audio</h2> </p>" + |
||||
"<p> <h3> Match a picture to a sound</h3> </p>" + |
||||
"<p> Drag and drop the image in the correct area. If the result is incorrect, the area turns in red. If the result is correct, the area turns in green. </p> "+ |
||||
"<p> Reload “button” resets the exercises. </p>" + |
||||
"<p> Enter the “Edit” mode to : </ p>" + |
||||
"<ul> <li> choose the theme of the App : pad, slate, or none (by default : none), </li>" + |
||||
"<li> modify the exercise.</li> </ul>" + |
||||
|
||||
"<p>In edition mode : </p>" + |
||||
"<ul><li>modify the instruction clicking on the field,</li>" + |
||||
"<li>replace the audio file, dragging and dropping a new one from your library,</li>" + |
||||
"<li>add picture frames clicking on the “+”,</li>" + |
||||
"<li>drag an drop pictures from your library,</li>" + |
||||
"<li>set the correct image of your activity clicking on the submit button “v” on the frame,</li>" + |
||||
"<li>delete a frame clicking on the cross button on the frame,</li>" + |
||||
"<li>replace a picture, dragging a new one from your library,</li>" + |
||||
"<li>“Display” button comes back to the activity.</li></ul>", |
||||
theme: "Theme" |
||||
}; |
||||
|
||||
//main function
|
||||
function start(){ |
||||
|
||||
$("#wgt_display").text(sankoreLang.display); |
||||
$("#wgt_edit").text(sankoreLang.edit); |
||||
$("#wgt_name").text(sankoreLang.wgt_name); |
||||
$("#wgt_reload").text(sankoreLang.reload); |
||||
$("#wgt_help").text(sankoreLang.help); |
||||
$("#help").html(sankoreLang.help_content); |
||||
$("#style_select option[value='1']").text(sankoreLang.slate); |
||||
$("#style_select option[value='2']").text(sankoreLang.pad); |
||||
$("#style_select option[value='3']").text(sankoreLang.none); |
||||
var tmpl = $("div.inline label").html(); |
||||
$("div.inline label").html(sankoreLang.theme + tmpl) |
||||
|
||||
if(window.sankore){ |
||||
if(sankore.preference("associer_sound","")){ |
||||
var data = jQuery.parseJSON(sankore.preference("associer_sound","")); |
||||
importData(data); |
||||
} |
||||
else
|
||||
showExample(); |
||||
if(sankore.preference("as_snd_style","")){ |
||||
changeStyle(sankore.preference("as_snd_style","")); |
||||
$("#style_select").val(sankore.preference("as_snd_style","")); |
||||
} else |
||||
changeStyle("3") |
||||
}
|
||||
else
|
||||
showExample(); |
||||
|
||||
//events
|
||||
if (window.widget) { |
||||
window.widget.onleave = function(){ |
||||
exportData(); |
||||
sankore.setPreference("as_snd_style", $("#style_select").find("option:selected").val()); |
||||
} |
||||
} |
||||
|
||||
$("#wgt_help").click(function(){ |
||||
var tmp = $(this); |
||||
if($(this).hasClass("open")){ |
||||
$(this).removeClass("help_pad").removeClass("help_wood") |
||||
$("#help").slideUp("100", function(){ |
||||
tmp.removeClass("open"); |
||||
$("#data").show(); |
||||
}); |
||||
} else { |
||||
($("#style_select").val() == 1)?$(this).removeClass("help_pad").addClass("help_wood"):$(this).removeClass("help_wood").addClass("help_pad"); |
||||
$("#data").hide(); |
||||
$("#help").slideDown("100", function(){ |
||||
tmp.addClass("open"); |
||||
}); |
||||
} |
||||
}); |
||||
|
||||
$("#wgt_reload").click(function(){ |
||||
if($("#wgt_display").hasClass("selected")){ |
||||
$("#wgt_edit").trigger("click"); |
||||
$("#wgt_display").trigger("click"); |
||||
} else { |
||||
$("#wgt_display").trigger("click"); |
||||
} |
||||
}); |
||||
|
||||
$("#wgt_reload, #wgt_display, #wgt_edit").mouseover(function(){ |
||||
exportData(); |
||||
}); |
||||
|
||||
$("#style_select").change(function (event){ |
||||
changeStyle($(this).find("option:selected").val()); |
||||
}) |
||||
|
||||
$("#wgt_display, #wgt_edit").click(function(event){ |
||||
if(this.id == "wgt_display"){ |
||||
if(!$(this).hasClass("selected")){ |
||||
if(window.sankore) |
||||
sankore.enableDropOnWidget(false); |
||||
$(this).addClass("selected"); |
||||
$("#wgt_edit").removeClass("selected"); |
||||
$("#parameters").css("display", "none"); |
||||
// $(".add_block").remove();
|
||||
$(".cont").each(function(){ |
||||
var container = $(this); |
||||
var tmp_i = 0; |
||||
var tmp_array = []; |
||||
|
||||
container.find(".text_cont .audio_desc").removeAttr("contenteditable"); |
||||
container.find(".audio_block").removeAttr("ondragenter") |
||||
.removeAttr("ondragleave") |
||||
.removeAttr("ondragover") |
||||
.removeAttr("ondrop") |
||||
container.find(".add_img").remove(); |
||||
// container.find(".close_cont").remove();
|
||||
container.find(".img_block").each(function(){ |
||||
if($(this).find("img").attr("src") != "img/drop_img.png"){ |
||||
$(this).find(".close_img").remove(); |
||||
$(this).find(".true_img").remove(); |
||||
$(this).find(".false_img").remove(); |
||||
$(this).removeAttr("ondragenter") |
||||
.removeAttr("ondragleave") |
||||
.removeAttr("ondragover") |
||||
.removeAttr("ondrop") |
||||
.addClass("img_gray"); |
||||
} else
|
||||
$(this).remove(); |
||||
}); |
||||
var img_answers = $("<div class='imgs_answers imgs_answers_gray'><img src='img/drop_img.png' style='margin-top: 11px;'/></div>").insertAfter(container.find(".sub_cont")); |
||||
container.find(".img_block").each(function(){ |
||||
$(this).css("float",""); |
||||
tmp_array.push($(this)); |
||||
});
|
||||
tmp_array = shuffle(tmp_array); |
||||
for(var i = 0; i<tmp_array.length;i++){ |
||||
tmp_array[i].draggable({ |
||||
helper:'clone', |
||||
zIndex:100, |
||||
appendTo: '#data' |
||||
}); |
||||
tmp_array[i].appendTo(container.find(".imgs_cont")); |
||||
} |
||||
|
||||
img_answers.droppable({ |
||||
hoverClass: 'dropHere', |
||||
drop: function(event, ui) { |
||||
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){ |
||||
if($(this).children()[0].tagName == "IMG") |
||||
$(this).children().remove(); |
||||
else |
||||
$(ui.draggable).parent().append($(this).children()); |
||||
$(this).append($(ui.draggable));
|
||||
if($(this).children().length == 1){
|
||||
if($(this).children().find("input").val() == "1") |
||||
$(this).removeClass("imgs_answers_gray") |
||||
.removeClass("imgs_answers_red") |
||||
.addClass("imgs_answers_green"); |
||||
else |
||||
$(this).removeClass("imgs_answers_gray") |
||||
.removeClass("imgs_answers_green") |
||||
.addClass("imgs_answers_red"); |
||||
}
|
||||
} |
||||
} |
||||
}); |
||||
|
||||
container.find(".imgs_cont").droppable({ |
||||
hoverClass: 'dropBack', |
||||
drop: function(event, ui) { |
||||
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){ |
||||
if(this != $(ui.draggable).parent()[0]){ |
||||
var tmp_cont = $(ui.draggable).parent(); |
||||
$(this).append($(ui.draggable)); |
||||
tmp_cont.append("<img src='img/drop_img.png' style='margin-top: 11px;'/>"); |
||||
var answers = ""; |
||||
$(this).parent().find(".imgs_answers .img_block").each(function(){ |
||||
answers += $(this).find("input").val(); |
||||
}); |
||||
if(tmp_cont.children()[0].tagName == "IMG") |
||||
tmp_cont.removeClass("imgs_answers_green") |
||||
.removeClass("imgs_answers_red") |
||||
.addClass("imgs_answers_gray"); |
||||
else |
||||
if(tmp_cont.children().length == 1){
|
||||
if(tmp_cont.children().find("input").val() == "1") |
||||
tmp_cont.removeClass("imgs_answers_gray") |
||||
.removeClass("imgs_answers_red") |
||||
.addClass("imgs_answers_green"); |
||||
else |
||||
tmp_cont.removeClass("imgs_answers_gray") |
||||
.removeClass("imgs_answers_green") |
||||
.addClass("imgs_answers_red"); |
||||
}
|
||||
} |
||||
} |
||||
} |
||||
}); |
||||
}); |
||||
$(this).css("display", "none"); |
||||
$("#wgt_edit").css("display", "block"); |
||||
} |
||||
} else {
|
||||
if(!$(this).hasClass("selected")){ |
||||
if(window.sankore) |
||||
sankore.enableDropOnWidget(true); |
||||
$(this).addClass("selected"); |
||||
$("#wgt_display").removeClass("selected"); |
||||
$("#parameters").css("display", "block"); |
||||
|
||||
$(".cont").each(function(){ |
||||
var container = $(this); |
||||
container.find(".imgs_answers").find(".img_block").each(function(){ |
||||
$(this).appendTo(container.find(".imgs_cont")) |
||||
}); |
||||
container.find(".imgs_answers").remove(); |
||||
// $("<div class='close_cont'>").appendTo(container);
|
||||
container.find(".imgs_cont").css("background-color", ""); |
||||
container.find(".text_cont .audio_desc").attr("contenteditable","true"); |
||||
container.find(".audio_block").attr("ondragenter", "return false;") |
||||
.attr("ondragleave", "$(this).removeClass('audio_gray'); return false;") |
||||
.attr("ondragover", "$(this).addClass('audio_gray'); return false;") |
||||
.attr("ondrop", "$(this).removeClass('audio_gray'); return onDropAudio(this,event);"); |
||||
var add_img = $("<div class='add_img'>"); |
||||
container.find(".img_block").each(function(){ |
||||
$(this).draggable("destroy"); |
||||
$(this).attr("ondragenter", "return false;") |
||||
.attr("ondragleave", "$(this).css(\"background-color\",\"\"); return false;") |
||||
.attr("ondragover", "$(this).css(\"background-color\",\"#ccc\"); return false;") |
||||
.attr("ondrop", "$(this).css(\"background-color\",\"\"); return onDropTarget(this,event);") |
||||
.css("float","left"); |
||||
$("<div class='close_img'>").appendTo($(this)); |
||||
if($(this).find("input").val() == "1"){ |
||||
$("<div class='false_img'>").appendTo($(this)); |
||||
} |
||||
else{ |
||||
$("<div class='true_img'>").appendTo($(this)); |
||||
} |
||||
}); |
||||
container.find(".imgs_cont").append(add_img) |
||||
});
|
||||
|
||||
// $("<div class='add_block'>" + sankoreLang.add + "</div>").appendTo("#data");
|
||||
$(this).css("display", "none"); |
||||
$("#wgt_display").css("display", "block"); |
||||
} |
||||
} |
||||
|
||||
$("audio").each(function(){ |
||||
this.pause(); |
||||
$(this).parent().find(":first-child").removeClass("stop").addClass("play"); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
//add new block
|
||||
// $(".add_block").live("click", function(){
|
||||
// addContainer();
|
||||
// });
|
||||
|
||||
//adding new img
|
||||
$(".add_img").live("click", function(){ |
||||
addImgBlock($(this)); |
||||
}); |
||||
|
||||
//deleting a block
|
||||
// $(".close_cont").live("click",function(){
|
||||
// $(this).parent().remove();
|
||||
// refreshBlockNumbers();
|
||||
// });
|
||||
|
||||
//deleting the img block
|
||||
$(".close_img").live("click", function(){ |
||||
var i = 0; |
||||
var tmp_obj = $(this).parent().parent();
|
||||
$(this).parent().remove();
|
||||
}); |
||||
|
||||
//correct image
|
||||
$(".true_img").live("click",function(){
|
||||
$(this).parent().parent().find(".img_block").each(function(){ |
||||
$(this).find("input").val(0); |
||||
var tmp_div = $(this).find(".false_img"); |
||||
if(tmp_div) |
||||
tmp_div.removeClass("false_img").addClass("true_img"); |
||||
}) |
||||
$(this).parent().find("input").val(1); |
||||
$(this).removeClass("true_img").addClass("false_img"); |
||||
}); |
||||
|
||||
//wrong image
|
||||
$(".false_img").live("click",function(){ |
||||
$(this).parent().find("input").val(0); |
||||
$(this).removeClass("false_img").addClass("true_img"); |
||||
}); |
||||
|
||||
//play/pause event
|
||||
$(".play, .stop").live("click", function(){ |
||||
var tmp_audio = $(this); |
||||
var audio = tmp_audio.parent().find("audio").get(0); |
||||
if($(this).hasClass("play")){
|
||||
if(tmp_audio.parent().find("source").attr("src")){ |
||||
tmp_audio.removeClass("play").addClass("stop"); |
||||
var id = setInterval(function(){ |
||||
if(audio.currentTime == audio.duration){ |
||||
clearInterval(id); |
||||
tmp_audio.removeClass("stop").addClass("play"); |
||||
} |
||||
}, 10); |
||||
tmp_audio.parent().find("input").val(id); |
||||
audio.play(); |
||||
} |
||||
} else { |
||||
$(this).removeClass("stop").addClass("play"); |
||||
clearInterval( tmp_audio.parent().find("input").val()) |
||||
audio.pause(); |
||||
} |
||||
}); |
||||
|
||||
$(".replay").live("click", function(){ |
||||
var tmp_audio = $(this).prev(); |
||||
var audio = $(this).parent().find("audio").get(0);
|
||||
if(tmp_audio.parent().find("source").attr("src")){ |
||||
$(this).prev().removeClass("play").addClass("stop"); |
||||
clearInterval($(this).parent().find("input").val()); |
||||
var id = setInterval(function(){ |
||||
if(audio.currentTime == audio.duration){ |
||||
clearInterval(id); |
||||
tmp_audio.removeClass("stop").addClass("play"); |
||||
} |
||||
}, 10); |
||||
tmp_audio.parent().find("input").val(id); |
||||
audio.currentTime = 0; |
||||
audio.play(); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
//export
|
||||
function exportData(){ |
||||
var array_to_export = []; |
||||
if($("#wgt_edit").hasClass("selected")){ |
||||
$(".cont").each(function(){ |
||||
var cont_obj = new Object(); |
||||
cont_obj.text = $(this).find(".audio_desc").text(); |
||||
cont_obj.audio = $(this).find("source").attr("src").replace("../../","");; |
||||
cont_obj.mode = "edit"; |
||||
cont_obj.imgs = []; |
||||
$(this).find(".img_block").each(function(){ |
||||
var img_obj = new Object(); |
||||
img_obj.value = $(this).find("input").val(); |
||||
img_obj.link = $(this).find("img").attr("src").replace("../../",""); |
||||
img_obj.ht = $(this).find("img").height(); |
||||
img_obj.wd = $(this).find("img").width(); |
||||
cont_obj.imgs.push(img_obj); |
||||
}); |
||||
array_to_export.push(cont_obj); |
||||
}); |
||||
} else { |
||||
$(".cont").each(function(){ |
||||
var cont_obj = new Object(); |
||||
cont_obj.text = $(this).find(".audio_desc").text(); |
||||
cont_obj.audio = $(this).find("source").attr("src").replace("../../",""); |
||||
cont_obj.mode = "display"; |
||||
cont_obj.imgs = []; |
||||
if($(this).find(".imgs_answers").children()[0].tagName == "DIV"){ |
||||
var tmp_cont = $(this).find(".imgs_answers").find(".img_block"); |
||||
var img_obj = new Object(); |
||||
img_obj.value = tmp_cont.find("input").val(); |
||||
img_obj.link = tmp_cont.find("img").attr("src").replace("../../",""); |
||||
img_obj.ht = tmp_cont.find("img").height(); |
||||
img_obj.wd = tmp_cont.find("img").width(); |
||||
img_obj.cont = "answers"; |
||||
cont_obj.imgs.push(img_obj); |
||||
} |
||||
$(this).find(".imgs_cont .img_block").each(function(){ |
||||
var img_obj = new Object(); |
||||
img_obj.value = $(this).find("input").val(); |
||||
img_obj.link = $(this).find("img").attr("src").replace("../../",""); |
||||
img_obj.ht = $(this).find("img").height(); |
||||
img_obj.wd = $(this).find("img").width(); |
||||
img_obj.cont = "cont"; |
||||
cont_obj.imgs.push(img_obj); |
||||
}); |
||||
array_to_export.push(cont_obj); |
||||
}); |
||||
} |
||||
if(window.sankore) |
||||
sankore.setPreference("associer_sound", JSON.stringify(array_to_export)); |
||||
} |
||||
|
||||
//import
|
||||
function importData(data){ |
||||
|
||||
for(var i in data){ |
||||
if(data[i].mode == "edit"){
|
||||
var tmp_array = []; |
||||
var container = $("<div class='cont'>"); |
||||
var sub_container = $("<div class='sub_cont'>").appendTo(container); |
||||
var imgs_answers = $("<div class='imgs_answers imgs_answers_gray'><img src='img/drop_img.png' style='margin-top: 11px;'/></div>").appendTo(container); |
||||
var imgs_container = $("<div class='imgs_cont'>").appendTo(container);
|
||||
|
||||
// var number = $("<div class='number_cont'>"+ (++tmp) +"</div>").appendTo(sub_container);
|
||||
var text = $("<div class='text_cont'>").appendTo(sub_container); |
||||
var audio_block = $("<div class='audio_block'>").appendTo(text); |
||||
$("<div class='play'>").appendTo(audio_block); |
||||
$("<div class='replay'>").appendTo(audio_block); |
||||
var source = $("<source/>").attr("src", "../../" + data[i].audio); |
||||
var audio = $("<audio>").appendTo(audio_block); |
||||
audio.append(source); |
||||
$("<input type='hidden'/>").appendTo(audio_block); |
||||
$("<div class='audio_desc'>" + data[i].text + "</div>").appendTo(text); |
||||
|
||||
for(var j in data[i].imgs){ |
||||
var img_block = $("<div class='img_block img_gray' style='text-align: center;'>"); |
||||
var img = $("<img src='../../" + data[i].imgs[j].link + "' style='display: inline;'>"); |
||||
img.height(data[i].imgs[j].ht); |
||||
if((120 - data[i].imgs[j].ht) > 0) |
||||
img.css("margin",(120 - data[i].imgs[j].ht)/2 + "px 0"); |
||||
var hidden_input = $("<input type='hidden'>").val(data[i].imgs[j].value); |
||||
img_block.append(hidden_input).append(img); |
||||
tmp_array.push(img_block); |
||||
} |
||||
tmp_array = shuffle(tmp_array); |
||||
for(j in tmp_array){ |
||||
tmp_array[j].draggable({ |
||||
helper:'clone', |
||||
zIndex:100, |
||||
appendTo: '#data' |
||||
}); |
||||
tmp_array[j].appendTo(imgs_container); |
||||
} |
||||
imgs_answers.droppable({ |
||||
hoverClass: 'dropHere', |
||||
drop: function(event, ui) { |
||||
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){ |
||||
if($(this).children()[0].tagName == "IMG") |
||||
$(this).children().remove(); |
||||
else |
||||
$(ui.draggable).parent().append($(this).children()); |
||||
$(this).append($(ui.draggable));
|
||||
if($(this).children().length == 1){
|
||||
if($(this).children().find("input").val() == "1") |
||||
$(this).removeClass("imgs_answers_gray") |
||||
.removeClass("imgs_answers_red") |
||||
.addClass("imgs_answers_green"); |
||||
else |
||||
$(this).removeClass("imgs_answers_gray") |
||||
.removeClass("imgs_answers_green") |
||||
.addClass("imgs_answers_red"); |
||||
}
|
||||
} |
||||
} |
||||
}); |
||||
imgs_container.droppable({ |
||||
hoverClass: 'dropBack', |
||||
drop: function(event, ui) { |
||||
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){ |
||||
if(this != $(ui.draggable).parent()[0]){ |
||||
var tmp_cont = $(ui.draggable).parent(); |
||||
$(this).append($(ui.draggable)); |
||||
tmp_cont.append("<img src='img/drop_img.png' style='margin-top: 11px;'/>"); |
||||
var answers = ""; |
||||
$(this).parent().find(".imgs_answers .img_block").each(function(){ |
||||
answers += $(this).find("input").val(); |
||||
}); |
||||
if(tmp_cont.children()[0].tagName == "IMG") |
||||
tmp_cont.removeClass("imgs_answers_green") |
||||
.removeClass("imgs_answers_red") |
||||
.addClass("imgs_answers_gray"); |
||||
else |
||||
if(tmp_cont.children().length == 1){
|
||||
if(tmp_cont.children().find("input").val() == "1") |
||||
tmp_cont.removeClass("imgs_answers_gray") |
||||
.removeClass("imgs_answers_red") |
||||
.addClass("imgs_answers_green"); |
||||
else |
||||
tmp_cont.removeClass("imgs_answers_gray") |
||||
.removeClass("imgs_answers_green") |
||||
.addClass("imgs_answers_red"); |
||||
}
|
||||
} |
||||
} |
||||
} |
||||
});
|
||||
container.appendTo("#data"); |
||||
} else { |
||||
container = $("<div class='cont'>"); |
||||
sub_container = $("<div class='sub_cont'>").appendTo(container); |
||||
imgs_answers = $("<div class='imgs_answers'></div>").appendTo(container); |
||||
$("<img src='img/drop_img.png' style='margin-top: 11px;'/>").appendTo(imgs_answers); |
||||
imgs_container = $("<div class='imgs_cont'>").appendTo(container);
|
||||
|
||||
// number = $("<div class='number_cont'>"+ (++tmp) +"</div>").appendTo(sub_container);
|
||||
text = $("<div class='text_cont'>").appendTo(sub_container); |
||||
audio_block = $("<div class='audio_block'>").appendTo(text); |
||||
$("<div class='play'>").appendTo(audio_block); |
||||
$("<div class='replay'>").appendTo(audio_block); |
||||
source = $("<source/>").attr("src", "../../" + data[i].audio); |
||||
audio = $("<audio>").appendTo(audio_block); |
||||
audio.append(source); |
||||
$("<input type='hidden'/>").appendTo(audio_block); |
||||
$("<div class='audio_desc'>" + data[i].text + "</div>").appendTo(text); |
||||
|
||||
for(j in data[i].imgs){ |
||||
img_block = $("<div class='img_block img_gray' style='text-align: center;'>"); |
||||
img = $("<img src='../../" + data[i].imgs[j].link + "' style='display: inline;'>"); |
||||
img.height(data[i].imgs[j].ht); |
||||
if((120 - data[i].imgs[j].ht) > 0) |
||||
img.css("margin",(120 - data[i].imgs[j].ht)/2 + "px 0"); |
||||
hidden_input = $("<input type='hidden'>").val(data[i].imgs[j].value); |
||||
img_block.append(hidden_input).append(img); |
||||
img_block.draggable({ |
||||
helper:'clone', |
||||
zIndex:100, |
||||
appendTo: '#data' |
||||
}); |
||||
if(data[i].imgs[j].cont == "cont") |
||||
img_block.appendTo(imgs_container); |
||||
else{ |
||||
imgs_answers.empty(); |
||||
img_block.appendTo(imgs_answers); |
||||
if(data[i].imgs[j].value == "1") |
||||
imgs_answers.addClass("imgs_answers_green"); |
||||
else |
||||
imgs_answers.addClass("imgs_answers_red"); |
||||
} |
||||
} |
||||
|
||||
imgs_answers.droppable({ |
||||
hoverClass: 'dropHere', |
||||
drop: function(event, ui) { |
||||
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){ |
||||
if($(this).children()[0].tagName == "IMG") |
||||
$(this).children().remove(); |
||||
else |
||||
$(ui.draggable).parent().append($(this).children()); |
||||
$(this).append($(ui.draggable));
|
||||
if($(this).children().length == 1){
|
||||
if($(this).children().find("input").val() == "1") |
||||
$(this).removeClass("imgs_answers_gray") |
||||
.removeClass("imgs_answers_red") |
||||
.addClass("imgs_answers_green"); |
||||
else |
||||
$(this).removeClass("imgs_answers_gray") |
||||
.removeClass("imgs_answers_green") |
||||
.addClass("imgs_answers_red"); |
||||
}
|
||||
} |
||||
} |
||||
}); |
||||
imgs_container.droppable({ |
||||
hoverClass: 'dropBack', |
||||
drop: function(event, ui) { |
||||
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){ |
||||
if(this != $(ui.draggable).parent()[0]){ |
||||
var tmp_cont = $(ui.draggable).parent(); |
||||
$(this).append($(ui.draggable)); |
||||
tmp_cont.append("<img src='img/drop_img.png' style='margin-top: 11px;'/>"); |
||||
var answers = ""; |
||||
$(this).parent().find(".imgs_answers .img_block").each(function(){ |
||||
answers += $(this).find("input").val(); |
||||
}); |
||||
if(tmp_cont.children()[0].tagName == "IMG") |
||||
tmp_cont.removeClass("imgs_answers_green") |
||||
.removeClass("imgs_answers_red") |
||||
.addClass("imgs_answers_gray"); |
||||
else |
||||
if(tmp_cont.children().length == 1){
|
||||
if(tmp_cont.children().find("input").val() == "1") |
||||
tmp_cont.removeClass("imgs_answers_gray") |
||||
.removeClass("imgs_answers_red") |
||||
.addClass("imgs_answers_green"); |
||||
else |
||||
tmp_cont.removeClass("imgs_answers_gray") |
||||
.removeClass("imgs_answers_green") |
||||
.addClass("imgs_answers_red"); |
||||
}
|
||||
} |
||||
} |
||||
} |
||||
});
|
||||
container.appendTo("#data"); |
||||
} |
||||
} |
||||
} |
||||
|
||||
//example
|
||||
function showExample(){ |
||||
|
||||
var tmp_array = []; |
||||
|
||||
var container = $("<div class='cont'>").appendTo("#data"); |
||||
var sub_container = $("<div class='sub_cont'>").appendTo(container); |
||||
var imgs_answers = $("<div class='imgs_answers imgs_answers_gray'><img src='img/drop_img.png' style='margin-top: 11px;'/></div>").appendTo(container); |
||||
var imgs_container = $("<div class='imgs_cont'>").appendTo(container); |
||||
|
||||
// var number = $("<div class='number_cont'>1</div>").appendTo(sub_container);
|
||||
var text = $("<div class='text_cont'>").appendTo(sub_container); |
||||
var audio_block = $("<div class='audio_block'>").appendTo(text); |
||||
$("<div class='play'>").appendTo(audio_block); |
||||
$("<div class='replay'>").appendTo(audio_block); |
||||
var source = $("<source/>").attr("src", "../../objects/beep.wav"); |
||||
var audio = $("<audio>").appendTo(audio_block); |
||||
audio.append(source); |
||||
$("<input type='hidden'/>").appendTo(audio_block); |
||||
var audio_desc = $("<div class='audio_desc'>" + sankoreLang.short_desc + "</div>").appendTo(text); |
||||
|
||||
$("<input type='hidden' value='1'/>").appendTo(imgs_container); |
||||
|
||||
var img1 = $("<div class='img_block img_gray' style='text-align: center;'></div>"); |
||||
$("<input type='hidden' value='0'/>").appendTo(img1); |
||||
$("<img src=\"../../objects/0.gif\" style=\"display: inline;\" height=\"120\"/>").appendTo(img1); |
||||
var img2 = $("<div class='img_block img_gray' style='text-align: center;'></div>"); |
||||
$("<input type='hidden' value='1'/>").appendTo(img2); |
||||
$("<img src=\"../../objects/1.gif\" style=\"display: inline;\" height=\"120\"/>").appendTo(img2); |
||||
var img3 = $("<div class='img_block img_gray' style='text-align: center;'></div>"); |
||||
$("<input type='hidden' value='0'/>").appendTo(img3); |
||||
$("<img src=\"../../objects/2.gif\" style=\"display: inline;\" height=\"120\"/>").appendTo(img3); |
||||
var img4 = $("<div class='img_block img_gray' style='text-align: center;'></div>"); |
||||
$("<input type='hidden' value='0'/>").appendTo(img4); |
||||
$("<img src=\"../../objects/3.gif\" style=\"display: inline;\" height=\"120\"/>").appendTo(img4); |
||||
var img5 = $("<div class='img_block img_gray' style='text-align: center;'></div>"); |
||||
$("<input type='hidden' value='0'/>").appendTo(img5); |
||||
$("<img src=\"../../objects/4.gif\" style=\"display: inline;\" height=\"120\"/>").appendTo(img5);
|
||||
|
||||
tmp_array.push(img1, img2, img3, img4, img5); |
||||
tmp_array = shuffle(tmp_array); |
||||
for(var i = 0; i<tmp_array.length;i++){ |
||||
tmp_array[i].draggable({ |
||||
helper:'clone', |
||||
zIndex:100, |
||||
appendTo: '#data' |
||||
}); |
||||
tmp_array[i].appendTo(imgs_container); |
||||
} |
||||
imgs_answers.droppable({ |
||||
hoverClass: 'dropHere', |
||||
drop: function(event, ui) { |
||||
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){ |
||||
if($(this).children()[0].tagName == "IMG") |
||||
$(this).children().remove(); |
||||
else |
||||
$(ui.draggable).parent().append($(this).children()); |
||||
$(this).append($(ui.draggable));
|
||||
if($(this).children().length == 1){
|
||||
if($(this).children().find("input").val() == "1") |
||||
$(this).removeClass("imgs_answers_gray") |
||||
.removeClass("imgs_answers_red") |
||||
.addClass("imgs_answers_green"); |
||||
else |
||||
$(this).removeClass("imgs_answers_gray") |
||||
.removeClass("imgs_answers_green") |
||||
.addClass("imgs_answers_red"); |
||||
}
|
||||
} |
||||
} |
||||
}); |
||||
imgs_container.droppable({ |
||||
hoverClass: 'dropBack', |
||||
drop: function(event, ui) { |
||||
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){ |
||||
if(this != $(ui.draggable).parent()[0]){ |
||||
var tmp_cont = $(ui.draggable).parent(); |
||||
$(this).append($(ui.draggable)); |
||||
tmp_cont.append("<img src='img/drop_img.png' style='margin-top: 11px;'/>"); |
||||
var answers = ""; |
||||
$(this).parent().find(".imgs_answers .img_block").each(function(){ |
||||
answers += $(this).find("input").val(); |
||||
}); |
||||
if(tmp_cont.children()[0].tagName == "IMG") |
||||
tmp_cont.removeClass("imgs_answers_green") |
||||
.removeClass("imgs_answers_red") |
||||
.addClass("imgs_answers_gray"); |
||||
else |
||||
if(tmp_cont.children().length == 1){
|
||||
if(tmp_cont.children().find("input").val() == "1") |
||||
tmp_cont.removeClass("imgs_answers_gray") |
||||
.removeClass("imgs_answers_red") |
||||
.addClass("imgs_answers_green"); |
||||
else |
||||
tmp_cont.removeClass("imgs_answers_gray") |
||||
.removeClass("imgs_answers_green") |
||||
.addClass("imgs_answers_red"); |
||||
}
|
||||
} |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
|
||||
//check result
|
||||
function checkResult(event) |
||||
{ |
||||
var str = ""; |
||||
var right_str = $(event.target).find("input").val(); |
||||
$(event.target).find(".img_block").each(function(){ |
||||
str += $(this).find("input").val() + "*"; |
||||
}); |
||||
if(str == right_str) |
||||
$(event.target).css("background-color","#9f9"); |
||||
} |
||||
|
||||
//add new container
|
||||
//function addContainer(){
|
||||
// var container = $("<div class='cont'>");
|
||||
// var sub_container = $("<div class='sub_cont'>").appendTo(container);
|
||||
// var imgs_container = $("<div class='imgs_cont'>").appendTo(container);
|
||||
//
|
||||
// var close = $("<div class='close_cont'>").appendTo(container);
|
||||
// var number = $("<div class='number_cont'>"+ ($(".cont").size() + 1) +"</div>").appendTo(sub_container);
|
||||
// var text = $("<div class='text_cont'>").appendTo(sub_container);
|
||||
// var audio_block = $("<div class='audio_block'>").appendTo(text);
|
||||
// audio_block.attr("ondragenter", "return false;")
|
||||
// .attr("ondragleave", "$(this).removeClass('audio_gray'); return false;")
|
||||
// .attr("ondragover", "$(this).addClass('audio_gray'); return false;")
|
||||
// .attr("ondrop", "$(this).removeClass('audio_gray'); return onDropAudio(this,event);");
|
||||
// $("<div class='play'>").appendTo(audio_block);
|
||||
// $("<div class='replay'>").appendTo(audio_block);
|
||||
// var source = $("<source/>").attr("src", "");
|
||||
// var audio = $("<audio>").appendTo(audio_block);
|
||||
// audio.append(source);
|
||||
// $("<input type='hidden'/>").appendTo(audio_block);
|
||||
// var audio_desc = $("<div class='audio_desc' contenteditable>" + sankoreLang.enter + "</div>").appendTo(text);
|
||||
//
|
||||
// $("<input type='hidden' value='1'/>").appendTo(imgs_container);
|
||||
// var add_img = $("<div class='add_img'>").appendTo(imgs_container);
|
||||
// container.insertBefore($(".add_block"));
|
||||
//}
|
||||
|
||||
//add new img block
|
||||
function addImgBlock(dest){ |
||||
var img_block = $("<div class='img_block img_gray' ondragenter='return false;' ondragleave='$(this).css(\"background-color\",\"\"); return false;' ondragover='$(this).css(\"background-color\",\"#ccc\"); return false;' ondrop='$(this).css(\"background-color\",\"\"); return onDropTarget(this,event);' style='text-align: center; float: left;'></div>").insertBefore(dest); |
||||
$("<div class='close_img'>").appendTo(img_block); |
||||
$("<div class='true_img'>").appendTo(img_block); |
||||
$("<input type='hidden' value='0'/>").appendTo(img_block); |
||||
$("<img src='img/drop_img.png' height='120'/>").appendTo(img_block); |
||||
} |
||||
|
||||
//function refreshBlockNumbers(){
|
||||
// var i = 0;
|
||||
// $(".cont").each(function(){
|
||||
// $(this).find(".number_cont").text(++i);
|
||||
// })
|
||||
//}
|
||||
|
||||
//shuffles an array
|
||||
function shuffle( arr ) |
||||
{ |
||||
var pos, tmp; |
||||
|
||||
for( var i = 0; i < arr.length; i++ ) |
||||
{ |
||||
pos = Math.round( Math.random() * ( arr.length - 1 ) ); |
||||
tmp = arr[pos]; |
||||
arr[pos] = arr[i]; |
||||
arr[i] = tmp; |
||||
} |
||||
return arr; |
||||
} |
||||
|
||||
|
||||
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; |
||||
} |
||||
|
||||
//changing the style
|
||||
function changeStyle(val){ |
||||
switch(val){ |
||||
case "1": |
||||
$(".b_top_left").removeClass("btl_pad").removeClass("without_back"); |
||||
$(".b_top_center").removeClass("btc_pad").removeClass("without_back"); |
||||
$(".b_top_right").removeClass("btr_pad").removeClass("without_back"); |
||||
$(".b_center_left").removeClass("bcl_pad").removeClass("without_back"); |
||||
$(".b_center_right").removeClass("bcr_pad").removeClass("without_back"); |
||||
$(".b_bottom_right").removeClass("bbr_pad").removeClass("without_back"); |
||||
$(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back"); |
||||
$(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back"); |
||||
$("#wgt_reload").removeClass("pad_color").removeClass("pad_reload"); |
||||
$("#wgt_help").removeClass("pad_color").removeClass("pad_help"); |
||||
$("#wgt_edit").removeClass("pad_color").removeClass("pad_edit"); |
||||
$("#wgt_name").removeClass("pad_color"); |
||||
$("#wgt_display").addClass("display_wood"); |
||||
$("#style_select").val(val); |
||||
$("body, html").removeClass("without_radius").addClass("radius_ft"); |
||||
break; |
||||
case "2": |
||||
$(".b_top_left").addClass("btl_pad").removeClass("without_back"); |
||||
$(".b_top_center").addClass("btc_pad").removeClass("without_back"); |
||||
$(".b_top_right").addClass("btr_pad").removeClass("without_back"); |
||||
$(".b_center_left").addClass("bcl_pad").removeClass("without_back"); |
||||
$(".b_center_right").addClass("bcr_pad").removeClass("without_back"); |
||||
$(".b_bottom_right").addClass("bbr_pad").removeClass("without_back"); |
||||
$(".b_bottom_left").addClass("bbl_pad").removeClass("without_back"); |
||||
$(".b_bottom_center").addClass("bbc_pad").removeClass("without_back"); |
||||
$("#wgt_reload").addClass("pad_color").addClass("pad_reload"); |
||||
$("#wgt_help").addClass("pad_color").addClass("pad_help"); |
||||
$("#wgt_edit").addClass("pad_color").addClass("pad_edit"); |
||||
$("#wgt_name").addClass("pad_color"); |
||||
$("#wgt_display").removeClass("display_wood"); |
||||
$("#style_select").val(val); |
||||
$("body, html").removeClass("without_radius").removeClass("radius_ft"); |
||||
break; |
||||
case "3": |
||||
$(".b_top_left").addClass("without_back").removeClass("btl_pad"); |
||||
$(".b_top_center").addClass("without_back").removeClass("btc_pad"); |
||||
$(".b_top_right").addClass("without_back").removeClass("btr_pad"); |
||||
$(".b_center_left").addClass("without_back").removeClass("bcl_pad"); |
||||
$(".b_center_right").addClass("without_back").removeClass("bcr_pad"); |
||||
$(".b_bottom_right").addClass("without_back").removeClass("bbr_pad"); |
||||
$(".b_bottom_left").addClass("without_back").removeClass("bbl_pad"); |
||||
$(".b_bottom_center").addClass("without_back").removeClass("bbc_pad"); |
||||
$("#wgt_help").addClass("pad_color").addClass("pad_help"); |
||||
$("#wgt_reload").addClass("pad_color").addClass("pad_reload"); |
||||
$("#wgt_edit").addClass("pad_color").addClass("pad_edit"); |
||||
$("#wgt_name").addClass("pad_color"); |
||||
$("#wgt_display").removeClass("display_wood"); |
||||
$("#style_select").val(val); |
||||
$("body, html").addClass("without_radius").removeClass("radius_ft"); |
||||
break; |
||||
} |
||||
} |
||||
|
||||
function onDropTarget(obj, event) { |
||||
$(obj).find("img").remove(); |
||||
if (event.dataTransfer) { |
||||
var format = "text/plain"; |
||||
var textData = event.dataTransfer.getData(format); |
||||
if (!textData) { |
||||
alert(":("); |
||||
} |
||||
textData = stringToXML(textData); |
||||
var tmp = textData.getElementsByTagName("path")[0].firstChild.textContent; |
||||
var tmp_img = $("<img/>").attr("src", "../../" + tmp); |
||||
$(obj).append(tmp_img); |
||||
setTimeout(function(){ |
||||
if(tmp_img.height() >= tmp_img.width()) |
||||
tmp_img.attr("height", "120"); |
||||
else{ |
||||
tmp_img.attr("width","120"); |
||||
var h = tmp_img.height(); |
||||
tmp_img.attr("height",h); |
||||
tmp_img.css("margin",(120 - tmp_img.height())/2 + "px 0"); |
||||
} |
||||
}, 6) |
||||
} |
||||
else { |
||||
alert ("Your browser does not support the dataTransfer object."); |
||||
} |
||||
|
||||
if (event.stopPropagation) { |
||||
event.stopPropagation (); |
||||
} |
||||
else { |
||||
event.cancelBubble = true; |
||||
} |
||||
return false; |
||||
} |
||||
|
||||
function onDropAudio(obj, event) { |
||||
if (event.dataTransfer) { |
||||
var format = "text/plain"; |
||||
var textData = event.dataTransfer.getData(format); |
||||
if (!textData) { |
||||
alert(":("); |
||||
} |
||||
textData = stringToXML(textData); |
||||
var tmp = textData.getElementsByTagName("path")[0].firstChild.textContent; |
||||
var tmp_type = textData.getElementsByTagName("type")[0].firstChild.textContent; |
||||
if(tmp_type.substr(0, 5) == "audio"){
|
||||
var audio_block = $(obj); |
||||
$(obj).find("audio").remove(); |
||||
audio_block.find(":first-child").removeClass("stop").addClass("play"); |
||||
var source = $("<source/>").attr("src", "../../" + tmp); |
||||
var audio = $("<audio>").appendTo(audio_block); |
||||
audio.append(source); |
||||
} |
||||
} |
||||
else { |
||||
alert ("Your browser does not support the dataTransfer object."); |
||||
} |
||||
|
||||
if (event.stopPropagation) { |
||||
event.stopPropagation (); |
||||
} |
||||
else { |
||||
event.cancelBubble = true; |
||||
} |
||||
return false; |
||||
} |
||||
|
||||
if (window.widget) { |
||||
window.widget.onremove = function(){ |
||||
$("audio").each(function(){ |
||||
this.pause(); |
||||
$(this).parent().find(":first-child").removeClass("stop").addClass("play"); |
||||
}); |
||||
} |
||||
} |
||||
@ -1,308 +1,309 @@ |
||||
html, body { |
||||
margin:0; |
||||
padding: 0; |
||||
font-family: "helvetica neue"; |
||||
font-size: 14px; |
||||
color: #666666; |
||||
margin:0; |
||||
padding: 0; |
||||
font-family: "helvetica neue"; |
||||
font-size: 14px; |
||||
color: #666666; |
||||
} |
||||
|
||||
#ubwidget { |
||||
position: absolute; |
||||
top: 0; |
||||
bottom: 0; |
||||
left: 0; |
||||
right: 0; |
||||
background: url("images/bg.png"); |
||||
position: absolute; |
||||
top: 0; |
||||
bottom: 0; |
||||
left: 0; |
||||
right: 0; |
||||
background: url("images/bg.png"); |
||||
} |
||||
|
||||
.theme-pad #ubwidget { |
||||
border-radius: 40px; |
||||
border-width: 52px; |
||||
|
||||
-webkit-border-image: url("images/pad-bd.png") 52 repeat; |
||||
-moz-border-image: url("images/pad-bd.png") 52 repeat; |
||||
border-image: url("images/pad-bd.png") 52 repeat; |
||||
border-radius: 40px; |
||||
border-width: 52px; |
||||
|
||||
-webkit-border-image: url("images/pad-bd.png") 52 repeat; |
||||
-moz-border-image: url("images/pad-bd.png") 52 repeat; |
||||
border-image: url("images/pad-bd.png") 52 repeat; |
||||
} |
||||
|
||||
.theme-slate #ubwidget { |
||||
border-radius: 44px; |
||||
border-width: 52px; |
||||
|
||||
-webkit-border-image: url("images/slate-bd.png") 52 repeat; |
||||
-moz-border-image: url("images/slate-bd.png") 52 repeat; |
||||
border-image: url("images/slate-bd.png") 52 repeat; |
||||
border-radius: 44px; |
||||
border-width: 52px; |
||||
|
||||
-webkit-border-image: url("images/slate-bd.png") 52 repeat; |
||||
-moz-border-image: url("images/slate-bd.png") 52 repeat; |
||||
border-image: url("images/slate-bd.png") 52 repeat; |
||||
} |
||||
|
||||
#ubwidget > .wrapper { |
||||
position: absolute; |
||||
top: 0px; |
||||
bottom: 0px; |
||||
left: 0px; |
||||
right: 0px; |
||||
overflow: hidden; |
||||
position: absolute; |
||||
top: 0px; |
||||
bottom: 0px; |
||||
left: 0px; |
||||
right: 0px; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
|
||||
.theme-slate #ubwidget > .wrapper, .theme-pad #ubwidget > .wrapper { |
||||
position: absolute; |
||||
top: -49px; |
||||
bottom: -5px; |
||||
left: -5px; |
||||
right: -5px; |
||||
overflow: hidden; |
||||
position: absolute; |
||||
top: -49px; |
||||
bottom: -5px; |
||||
left: -5px; |
||||
right: -5px; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
#toolbar { |
||||
display: table; |
||||
width: 100%; |
||||
height: 44px; |
||||
font-size: 24px; |
||||
color: #FFCC99; |
||||
padding:0 10px; |
||||
display: table; |
||||
width: 100%; |
||||
height: 44px; |
||||
font-size: 24px; |
||||
color: #FFCC99; |
||||
padding:0 10px; |
||||
} |
||||
|
||||
.theme-pad #toolbar, .theme-slate #toolbar { |
||||
height: 38px; |
||||
padding: 6px 0 0; |
||||
height: 38px; |
||||
padding: 6px 0 0; |
||||
} |
||||
|
||||
.theme-slate #toolbar { |
||||
color: #7F613F; |
||||
text-shadow: #FFDCA9 0 1px 0; |
||||
color: #7F613F; |
||||
text-shadow: #FFDCA9 0 1px 0; |
||||
} |
||||
|
||||
|
||||
#toolbar > * { |
||||
display: table-cell; |
||||
height: 100%; |
||||
vertical-align: middle; |
||||
display: table-cell; |
||||
height: 100%; |
||||
vertical-align: middle; |
||||
} |
||||
|
||||
#toolbar .actions { |
||||
text-align: right; |
||||
text-align: right; |
||||
} |
||||
|
||||
#toolbar button, h1 { |
||||
font-weight: normal; |
||||
font-size: 24px; |
||||
color: #FFCC99; |
||||
margin: 0; |
||||
font-weight: normal; |
||||
font-size: 24px; |
||||
color: #FFCC99; |
||||
margin: 0; |
||||
} |
||||
|
||||
.theme-slate #toolbar button, .theme-slate h1 { |
||||
color: #7F613F; |
||||
text-shadow: #FFDCA9 0 1px 0; |
||||
color: #7F613F; |
||||
text-shadow: #FFDCA9 0 1px 0; |
||||
} |
||||
|
||||
#toolbar button { |
||||
border: none; |
||||
padding: none; |
||||
outline: none; |
||||
background: none; |
||||
|
||||
cursor: pointer; |
||||
padding-left: 34px; |
||||
margin-left: 10px; |
||||
height: 32px; |
||||
border: none; |
||||
padding: none; |
||||
outline: none; |
||||
background: none; |
||||
|
||||
cursor: pointer; |
||||
padding-left: 34px; |
||||
margin-left: 10px; |
||||
height: 32px; |
||||
} |
||||
|
||||
#toolbar button span { |
||||
display: block; |
||||
line-height: 32px; |
||||
display: block; |
||||
line-height: 32px; |
||||
} |
||||
|
||||
#toolbar button[role='edit'] { |
||||
background: url("images/toolbar-edit.png") left top no-repeat; |
||||
background: url("images/toolbar-edit.png") left top no-repeat; |
||||
} |
||||
|
||||
#toolbar button[role='view'] { |
||||
display: none; |
||||
color: #FFF; |
||||
background: url("images/toolbar-edit.png") left -32px no-repeat; |
||||
display: none; |
||||
color: #FFF; |
||||
background: url("images/toolbar-edit.png") left -32px no-repeat; |
||||
} |
||||
|
||||
#toolbar button[role='reload'] { |
||||
background: url("images/toolbar-reload.png") left top no-repeat; |
||||
background: url("images/toolbar-reload.png") left top no-repeat; |
||||
} |
||||
|
||||
#toolbar button[role='help'] { |
||||
background: url("images/toolbar-help.png") left top no-repeat; |
||||
display: none; |
||||
background: url("images/toolbar-help.png") left top no-repeat; |
||||
display: none; |
||||
} |
||||
|
||||
.hasHelp #toolbar button[role='help'] { |
||||
display: inline-block; |
||||
display: inline-block; |
||||
} |
||||
|
||||
.showHelp #toolbar button[role='help'] { |
||||
color: #FFF; |
||||
background-position: left -32px; |
||||
color: #FFF; |
||||
background-position: left -32px; |
||||
} |
||||
|
||||
.theme-slate #toolbar button[role='edit'] { |
||||
background-image: url("images/slate-toolbar-edit.png"); |
||||
background-image: url("images/slate-toolbar-edit.png"); |
||||
} |
||||
|
||||
.theme-slate #toolbar button[role='view'] { |
||||
text-shadow: #7F613F 0 -1px 0; |
||||
background: url("images/slate-toolbar-edit.png") left -32px no-repeat; |
||||
text-shadow: #7F613F 0 -1px 0; |
||||
background: url("images/slate-toolbar-edit.png") left -32px no-repeat; |
||||
} |
||||
|
||||
.theme-slate #toolbar button[role='reload'] { |
||||
background-image: url("images/slate-toolbar-reload.png"); |
||||
background-image: url("images/slate-toolbar-reload.png"); |
||||
} |
||||
|
||||
.theme-slate #toolbar button[role='help'] { |
||||
background-image: url("images/slate-toolbar-help.png"); |
||||
background-image: url("images/slate-toolbar-help.png"); |
||||
} |
||||
|
||||
.showHelp.theme-slate #toolbar button[role='help'] { |
||||
text-shadow: #7F613F 0 -1px 0; |
||||
text-shadow: #7F613F 0 -1px 0; |
||||
} |
||||
|
||||
|
||||
.onEdit #toolbar button[role='view'] { |
||||
display: inline-block; |
||||
display: inline-block; |
||||
} |
||||
|
||||
.onEdit #toolbar button[role='edit'] { |
||||
display: none; |
||||
display: none; |
||||
} |
||||
|
||||
#help { |
||||
width: 300px; |
||||
height: 400px; |
||||
position: absolute; |
||||
margin-top: 10px; |
||||
right: 10px; |
||||
z-index: 10000; |
||||
display: none; |
||||
width: 300px; |
||||
height: 400px; |
||||
position: absolute; |
||||
margin-top: 10px; |
||||
right: 10px; |
||||
z-index: 10000; |
||||
display: none; |
||||
} |
||||
|
||||
.showHelp #help { |
||||
display: block; |
||||
display: block; |
||||
} |
||||
|
||||
#content { |
||||
position: absolute; |
||||
top: 44px; |
||||
bottom: 0; |
||||
overflow: auto; |
||||
left: 0; |
||||
right: 0; |
||||
position: absolute; |
||||
top: 44px; |
||||
bottom: 0; |
||||
overflow: auto; |
||||
left: 0; |
||||
right: 0; |
||||
|
||||
background-image: -moz-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: -webkit-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: -o-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: -ms-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: -moz-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: -webkit-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: -o-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: -ms-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
} |
||||
|
||||
#parameters { |
||||
display:none; |
||||
padding: 10px 20px; |
||||
background: url("images/parameters-bg.png"); |
||||
|
||||
-webkit-border-radius: 4px 4px 0 0; |
||||
-moz-border-radius: 4px 4px 0 0; |
||||
-mz-border-radius: 4px 4px 0 0; |
||||
border-radius: 4px 4px 0 0; |
||||
display:none; |
||||
padding: 10px 20px; |
||||
background: url("images/parameters-bg.png"); |
||||
|
||||
-webkit-border-radius: 4px 4px 0 0; |
||||
-moz-border-radius: 4px 4px 0 0; |
||||
-mz-border-radius: 4px 4px 0 0; |
||||
border-radius: 4px 4px 0 0; |
||||
} |
||||
|
||||
#parameters label { |
||||
font-style: italic; |
||||
font-style: italic; |
||||
} |
||||
|
||||
#parameters label > select, #parameters label > input{ |
||||
margin-left: 10px; |
||||
margin-left: 10px; |
||||
width: 80px; |
||||
} |
||||
|
||||
#parameters > div.inline { |
||||
display: inline-block; |
||||
display: inline-block; |
||||
} |
||||
|
||||
#parameters > div.inline+div.inline { |
||||
margin-left: 20px; |
||||
margin-left: 20px; |
||||
} |
||||
|
||||
#parameters input[type=text], |
||||
#parameters input[type=number] { |
||||
height: 26px; |
||||
border: 1px solid #BBB; |
||||
background-color: #FFF; |
||||
|
||||
padding: 0 4px; |
||||
|
||||
-webkit-border-radius: 4px; |
||||
-moz-border-radius: 4px; |
||||
-ms-border-radius: 4px; |
||||
border-radius: 4px; |
||||
|
||||
-webkit-box-shadow: 0 1px 0 #FFF; |
||||
-moz-box-shadow: 0 1px 0 #FFF; |
||||
-ms-box-shadow: 0 1px 0 #FFF; |
||||
box-shadow: 0 1px 0 #FFF; |
||||
height: 26px; |
||||
border: 1px solid #BBB; |
||||
background-color: #FFF; |
||||
|
||||
padding: 0 4px; |
||||
|
||||
-webkit-border-radius: 4px; |
||||
-moz-border-radius: 4px; |
||||
-ms-border-radius: 4px; |
||||
border-radius: 4px; |
||||
|
||||
-webkit-box-shadow: 0 1px 0 #FFF; |
||||
-moz-box-shadow: 0 1px 0 #FFF; |
||||
-ms-box-shadow: 0 1px 0 #FFF; |
||||
box-shadow: 0 1px 0 #FFF; |
||||
} |
||||
|
||||
#parameters input.tiny { |
||||
width: 40px; |
||||
width: 40px; |
||||
} |
||||
|
||||
#parameters input.small { |
||||
width: 80px; |
||||
width: 80px; |
||||
} |
||||
|
||||
#parameters input.medium { |
||||
width: 120px; |
||||
width: 120px; |
||||
} |
||||
|
||||
#parameters input.long { |
||||
width: 160px; |
||||
width: 160px; |
||||
} |
||||
|
||||
#scene { |
||||
padding: 20px; |
||||
padding: 20px; |
||||
} |
||||
|
||||
#scene > * { |
||||
margin: 0 auto; |
||||
margin: 0 auto; |
||||
} |
||||
.onEdit #scene { |
||||
} |
||||
|
||||
.onEdit #parameters { |
||||
display: block; |
||||
display: block; |
||||
} |
||||
|
||||
/* |
||||
.card-container { |
||||
-webkit-perspective: 600px; |
||||
width:100%; |
||||
height: 100%; |
||||
-webkit-perspective: 600px; |
||||
width:100%; |
||||
height: 100%; |
||||
} |
||||
.card { |
||||
position: relative; |
||||
width:100%; |
||||
height: 100%; |
||||
position: relative; |
||||
width:100%; |
||||
height: 100%; |
||||
} |
||||
.card > div { |
||||
position: absolute; |
||||
width:100%; |
||||
height: 100%; |
||||
-webkit-transform-style: preserve-3d; |
||||
-webkit-transition: all .5s ease-in-out; |
||||
-webkit-backface-visibility: hidden; |
||||
position: absolute; |
||||
width:100%; |
||||
height: 100%; |
||||
-webkit-transform-style: preserve-3d; |
||||
-webkit-transition: all .5s ease-in-out; |
||||
-webkit-backface-visibility: hidden; |
||||
} |
||||
.card > div:first-child { |
||||
-webkit-transform: rotateY( 0deg ); |
||||
-webkit-transform: rotateY( 0deg ); |
||||
} |
||||
.card > div:last-child { |
||||
-webkit-transform: rotateY( -180deg ); |
||||
-webkit-transform: rotateY( -180deg ); |
||||
} |
||||
.card.flip > div:first-child { |
||||
-webkit-transform: rotateY( 180deg ); |
||||
-webkit-transform: rotateY( 180deg ); |
||||
} |
||||
.card.flip > div:last-child { |
||||
-webkit-transform: rotateY( 0deg ); |
||||
-webkit-transform: rotateY( 0deg ); |
||||
} |
||||
*/ |
||||
|
||||
@ -1,308 +1,309 @@ |
||||
html, body { |
||||
margin:0; |
||||
padding: 0; |
||||
font-family: "helvetica neue"; |
||||
font-size: 14px; |
||||
color: #666666; |
||||
margin:0; |
||||
padding: 0; |
||||
font-family: "helvetica neue"; |
||||
font-size: 14px; |
||||
color: #666666; |
||||
} |
||||
|
||||
#ubwidget { |
||||
position: absolute; |
||||
top: 0; |
||||
bottom: 0; |
||||
left: 0; |
||||
right: 0; |
||||
background: url("images/bg.png"); |
||||
position: absolute; |
||||
top: 0; |
||||
bottom: 0; |
||||
left: 0; |
||||
right: 0; |
||||
background: url("images/bg.png"); |
||||
} |
||||
|
||||
.theme-pad #ubwidget { |
||||
border-radius: 40px; |
||||
border-width: 52px; |
||||
|
||||
-webkit-border-image: url("images/pad-bd.png") 52 repeat; |
||||
-moz-border-image: url("images/pad-bd.png") 52 repeat; |
||||
border-image: url("images/pad-bd.png") 52 repeat; |
||||
border-radius: 40px; |
||||
border-width: 52px; |
||||
|
||||
-webkit-border-image: url("images/pad-bd.png") 52 repeat; |
||||
-moz-border-image: url("images/pad-bd.png") 52 repeat; |
||||
border-image: url("images/pad-bd.png") 52 repeat; |
||||
} |
||||
|
||||
.theme-slate #ubwidget { |
||||
border-radius: 44px; |
||||
border-width: 52px; |
||||
|
||||
-webkit-border-image: url("images/slate-bd.png") 52 repeat; |
||||
-moz-border-image: url("images/slate-bd.png") 52 repeat; |
||||
border-image: url("images/slate-bd.png") 52 repeat; |
||||
border-radius: 44px; |
||||
border-width: 52px; |
||||
|
||||
-webkit-border-image: url("images/slate-bd.png") 52 repeat; |
||||
-moz-border-image: url("images/slate-bd.png") 52 repeat; |
||||
border-image: url("images/slate-bd.png") 52 repeat; |
||||
} |
||||
|
||||
#ubwidget > .wrapper { |
||||
position: absolute; |
||||
top: 0px; |
||||
bottom: 0px; |
||||
left: 0px; |
||||
right: 0px; |
||||
overflow: hidden; |
||||
position: absolute; |
||||
top: 0px; |
||||
bottom: 0px; |
||||
left: 0px; |
||||
right: 0px; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
|
||||
.theme-slate #ubwidget > .wrapper, .theme-pad #ubwidget > .wrapper { |
||||
position: absolute; |
||||
top: -49px; |
||||
bottom: -5px; |
||||
left: -5px; |
||||
right: -5px; |
||||
overflow: hidden; |
||||
position: absolute; |
||||
top: -49px; |
||||
bottom: -5px; |
||||
left: -5px; |
||||
right: -5px; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
#toolbar { |
||||
display: table; |
||||
width: 100%; |
||||
height: 44px; |
||||
font-size: 24px; |
||||
color: #FFCC99; |
||||
padding:0 10px; |
||||
display: table; |
||||
width: 100%; |
||||
height: 44px; |
||||
font-size: 24px; |
||||
color: #FFCC99; |
||||
padding:0 10px; |
||||
} |
||||
|
||||
.theme-pad #toolbar, .theme-slate #toolbar { |
||||
height: 38px; |
||||
padding: 6px 0 0; |
||||
height: 38px; |
||||
padding: 6px 0 0; |
||||
} |
||||
|
||||
.theme-slate #toolbar { |
||||
color: #7F613F; |
||||
text-shadow: #FFDCA9 0 1px 0; |
||||
color: #7F613F; |
||||
text-shadow: #FFDCA9 0 1px 0; |
||||
} |
||||
|
||||
|
||||
#toolbar > * { |
||||
display: table-cell; |
||||
height: 100%; |
||||
vertical-align: middle; |
||||
display: table-cell; |
||||
height: 100%; |
||||
vertical-align: middle; |
||||
} |
||||
|
||||
#toolbar .actions { |
||||
text-align: right; |
||||
text-align: right; |
||||
} |
||||
|
||||
#toolbar button, h1 { |
||||
font-weight: normal; |
||||
font-size: 24px; |
||||
color: #FFCC99; |
||||
margin: 0; |
||||
font-weight: normal; |
||||
font-size: 24px; |
||||
color: #FFCC99; |
||||
margin: 0; |
||||
} |
||||
|
||||
.theme-slate #toolbar button, .theme-slate h1 { |
||||
color: #7F613F; |
||||
text-shadow: #FFDCA9 0 1px 0; |
||||
color: #7F613F; |
||||
text-shadow: #FFDCA9 0 1px 0; |
||||
} |
||||
|
||||
#toolbar button { |
||||
border: none; |
||||
padding: none; |
||||
outline: none; |
||||
background: none; |
||||
|
||||
cursor: pointer; |
||||
padding-left: 34px; |
||||
margin-left: 10px; |
||||
height: 32px; |
||||
border: none; |
||||
padding: none; |
||||
outline: none; |
||||
background: none; |
||||
|
||||
cursor: pointer; |
||||
padding-left: 34px; |
||||
margin-left: 10px; |
||||
height: 32px; |
||||
} |
||||
|
||||
#toolbar button span { |
||||
display: block; |
||||
line-height: 32px; |
||||
display: block; |
||||
line-height: 32px; |
||||
} |
||||
|
||||
#toolbar button[role='edit'] { |
||||
background: url("images/toolbar-edit.png") left top no-repeat; |
||||
background: url("images/toolbar-edit.png") left top no-repeat; |
||||
} |
||||
|
||||
#toolbar button[role='view'] { |
||||
display: none; |
||||
color: #FFF; |
||||
background: url("images/toolbar-edit.png") left -32px no-repeat; |
||||
display: none; |
||||
color: #FFF; |
||||
background: url("images/toolbar-edit.png") left -32px no-repeat; |
||||
} |
||||
|
||||
#toolbar button[role='reload'] { |
||||
background: url("images/toolbar-reload.png") left top no-repeat; |
||||
background: url("images/toolbar-reload.png") left top no-repeat; |
||||
} |
||||
|
||||
#toolbar button[role='help'] { |
||||
background: url("images/toolbar-help.png") left top no-repeat; |
||||
display: none; |
||||
background: url("images/toolbar-help.png") left top no-repeat; |
||||
display: none; |
||||
} |
||||
|
||||
.hasHelp #toolbar button[role='help'] { |
||||
display: inline-block; |
||||
display: inline-block; |
||||
} |
||||
|
||||
.showHelp #toolbar button[role='help'] { |
||||
color: #FFF; |
||||
background-position: left -32px; |
||||
color: #FFF; |
||||
background-position: left -32px; |
||||
} |
||||
|
||||
.theme-slate #toolbar button[role='edit'] { |
||||
background-image: url("images/slate-toolbar-edit.png"); |
||||
background-image: url("images/slate-toolbar-edit.png"); |
||||
} |
||||
|
||||
.theme-slate #toolbar button[role='view'] { |
||||
text-shadow: #7F613F 0 -1px 0; |
||||
background: url("images/slate-toolbar-edit.png") left -32px no-repeat; |
||||
text-shadow: #7F613F 0 -1px 0; |
||||
background: url("images/slate-toolbar-edit.png") left -32px no-repeat; |
||||
} |
||||
|
||||
.theme-slate #toolbar button[role='reload'] { |
||||
background-image: url("images/slate-toolbar-reload.png"); |
||||
background-image: url("images/slate-toolbar-reload.png"); |
||||
} |
||||
|
||||
.theme-slate #toolbar button[role='help'] { |
||||
background-image: url("images/slate-toolbar-help.png"); |
||||
background-image: url("images/slate-toolbar-help.png"); |
||||
} |
||||
|
||||
.showHelp.theme-slate #toolbar button[role='help'] { |
||||
text-shadow: #7F613F 0 -1px 0; |
||||
text-shadow: #7F613F 0 -1px 0; |
||||
} |
||||
|
||||
|
||||
.onEdit #toolbar button[role='view'] { |
||||
display: inline-block; |
||||
display: inline-block; |
||||
} |
||||
|
||||
.onEdit #toolbar button[role='edit'] { |
||||
display: none; |
||||
display: none; |
||||
} |
||||
|
||||
#help { |
||||
width: 300px; |
||||
height: 400px; |
||||
position: absolute; |
||||
margin-top: 10px; |
||||
right: 10px; |
||||
z-index: 10000; |
||||
display: none; |
||||
width: 300px; |
||||
height: 400px; |
||||
position: absolute; |
||||
margin-top: 10px; |
||||
right: 10px; |
||||
z-index: 10000; |
||||
display: none; |
||||
} |
||||
|
||||
.showHelp #help { |
||||
display: block; |
||||
display: block; |
||||
} |
||||
|
||||
#content { |
||||
position: absolute; |
||||
top: 44px; |
||||
bottom: 0; |
||||
overflow: auto; |
||||
left: 0; |
||||
right: 0; |
||||
position: absolute; |
||||
top: 44px; |
||||
bottom: 0; |
||||
overflow: auto; |
||||
left: 0; |
||||
right: 0; |
||||
|
||||
background-image: -moz-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: -webkit-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: -o-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: -ms-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: -moz-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: -webkit-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: -o-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: -ms-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
} |
||||
|
||||
#parameters { |
||||
display:none; |
||||
padding: 10px 20px; |
||||
background: url("images/parameters-bg.png"); |
||||
|
||||
-webkit-border-radius: 4px 4px 0 0; |
||||
-moz-border-radius: 4px 4px 0 0; |
||||
-mz-border-radius: 4px 4px 0 0; |
||||
border-radius: 4px 4px 0 0; |
||||
display:none; |
||||
padding: 10px 20px; |
||||
background: url("images/parameters-bg.png"); |
||||
|
||||
-webkit-border-radius: 4px 4px 0 0; |
||||
-moz-border-radius: 4px 4px 0 0; |
||||
-mz-border-radius: 4px 4px 0 0; |
||||
border-radius: 4px 4px 0 0; |
||||
} |
||||
|
||||
#parameters label { |
||||
font-style: italic; |
||||
font-style: italic; |
||||
} |
||||
|
||||
#parameters label > select, #parameters label > input{ |
||||
margin-left: 10px; |
||||
margin-left: 10px; |
||||
width: 80px; |
||||
} |
||||
|
||||
#parameters > div.inline { |
||||
display: inline-block; |
||||
display: inline-block; |
||||
} |
||||
|
||||
#parameters > div.inline+div.inline { |
||||
margin-left: 20px; |
||||
margin-left: 20px; |
||||
} |
||||
|
||||
#parameters input[type=text], |
||||
#parameters input[type=number] { |
||||
height: 26px; |
||||
border: 1px solid #BBB; |
||||
background-color: #FFF; |
||||
|
||||
padding: 0 4px; |
||||
|
||||
-webkit-border-radius: 4px; |
||||
-moz-border-radius: 4px; |
||||
-ms-border-radius: 4px; |
||||
border-radius: 4px; |
||||
|
||||
-webkit-box-shadow: 0 1px 0 #FFF; |
||||
-moz-box-shadow: 0 1px 0 #FFF; |
||||
-ms-box-shadow: 0 1px 0 #FFF; |
||||
box-shadow: 0 1px 0 #FFF; |
||||
height: 26px; |
||||
border: 1px solid #BBB; |
||||
background-color: #FFF; |
||||
|
||||
padding: 0 4px; |
||||
|
||||
-webkit-border-radius: 4px; |
||||
-moz-border-radius: 4px; |
||||
-ms-border-radius: 4px; |
||||
border-radius: 4px; |
||||
|
||||
-webkit-box-shadow: 0 1px 0 #FFF; |
||||
-moz-box-shadow: 0 1px 0 #FFF; |
||||
-ms-box-shadow: 0 1px 0 #FFF; |
||||
box-shadow: 0 1px 0 #FFF; |
||||
} |
||||
|
||||
#parameters input.tiny { |
||||
width: 40px; |
||||
width: 40px; |
||||
} |
||||
|
||||
#parameters input.small { |
||||
width: 80px; |
||||
width: 80px; |
||||
} |
||||
|
||||
#parameters input.medium { |
||||
width: 120px; |
||||
width: 120px; |
||||
} |
||||
|
||||
#parameters input.long { |
||||
width: 160px; |
||||
width: 160px; |
||||
} |
||||
|
||||
#scene { |
||||
padding: 20px; |
||||
padding: 20px; |
||||
} |
||||
|
||||
#scene > * { |
||||
margin: 0 auto; |
||||
margin: 0 auto; |
||||
} |
||||
.onEdit #scene { |
||||
} |
||||
|
||||
.onEdit #parameters { |
||||
display: block; |
||||
display: block; |
||||
} |
||||
|
||||
/* |
||||
.card-container { |
||||
-webkit-perspective: 600px; |
||||
width:100%; |
||||
height: 100%; |
||||
-webkit-perspective: 600px; |
||||
width:100%; |
||||
height: 100%; |
||||
} |
||||
.card { |
||||
position: relative; |
||||
width:100%; |
||||
height: 100%; |
||||
position: relative; |
||||
width:100%; |
||||
height: 100%; |
||||
} |
||||
.card > div { |
||||
position: absolute; |
||||
width:100%; |
||||
height: 100%; |
||||
-webkit-transform-style: preserve-3d; |
||||
-webkit-transition: all .5s ease-in-out; |
||||
-webkit-backface-visibility: hidden; |
||||
position: absolute; |
||||
width:100%; |
||||
height: 100%; |
||||
-webkit-transform-style: preserve-3d; |
||||
-webkit-transition: all .5s ease-in-out; |
||||
-webkit-backface-visibility: hidden; |
||||
} |
||||
.card > div:first-child { |
||||
-webkit-transform: rotateY( 0deg ); |
||||
-webkit-transform: rotateY( 0deg ); |
||||
} |
||||
.card > div:last-child { |
||||
-webkit-transform: rotateY( -180deg ); |
||||
-webkit-transform: rotateY( -180deg ); |
||||
} |
||||
.card.flip > div:first-child { |
||||
-webkit-transform: rotateY( 180deg ); |
||||
-webkit-transform: rotateY( 180deg ); |
||||
} |
||||
.card.flip > div:last-child { |
||||
-webkit-transform: rotateY( 0deg ); |
||||
-webkit-transform: rotateY( 0deg ); |
||||
} |
||||
*/ |
||||
|
||||
@ -1,75 +1,90 @@ |
||||
<!doctype html> |
||||
<html xmlns="http://www.w3.org/1999/xhtml"> |
||||
|
||||
<head> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
||||
|
||||
<link rel="stylesheet" href="css/ubw-main.css"> |
||||
<link rel="stylesheet" href="css/main.css"> |
||||
<head> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
||||
|
||||
<script src="js/templates.js" type="text/javascript" charset="utf-8"></script> |
||||
|
||||
<script src="js/lib/modernizr.js" type="text/javascript"></script> |
||||
<script src="js/lib/jquery-1.7.1.min.js" type="text/javascript"></script> |
||||
<script src="js/lib/jquery-css-transform.js" type="text/javascript"></script> |
||||
<script src="js/lib/jquery.i18n.properties-min-1.0.9.js" type="text/javascript" charset="utf-8"></script> |
||||
<script src="js/lib/mustache.js" type="text/javascript"></script> |
||||
<script src="js/lib/ubw-main.js" type="text/javascript"></script> |
||||
<script src="js/main.js" type="text/javascript" charset="utf-8"></script> |
||||
|
||||
</head> |
||||
<link rel="stylesheet" href="css/ubw-main.css"> |
||||
<link rel="stylesheet" href="css/main.css"> |
||||
|
||||
<body class="hasHelp"> |
||||
<div id="ubwidget" data-themes="pad"> |
||||
<div class="wrapper"> |
||||
<div id="toolbar"> |
||||
</div> |
||||
<div id="help"> |
||||
<iframe src="help.html" width="100%" height="100%" frameborder="0"></iframe> |
||||
</div> |
||||
<div id="content"> |
||||
<div id="parameters"> |
||||
</div> |
||||
<div id="scene"> |
||||
<div id="disc"> |
||||
<div class="circle result hide"> |
||||
<div> |
||||
<div id="result"> |
||||
<div> |
||||
<div class="front">?</div> |
||||
<div class="back">12</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="circle numbers"> |
||||
<div><div>0</div></div> |
||||
<div><div>1</div></div> |
||||
<div><div>2</div></div> |
||||
<div><div>3</div></div> |
||||
<div><div>4</div></div> |
||||
<div><div>5</div></div> |
||||
<div><div>6</div></div> |
||||
<div><div>7</div></div> |
||||
<div><div>8</div></div> |
||||
<div><div>9</div></div> |
||||
<div><div>10</div></div> |
||||
<div><div>11</div></div> |
||||
</div> |
||||
<div class="circle operators"> |
||||
<div><div>+</div></div> |
||||
<div><div>*</div></div> |
||||
<div><div>-</div></div> |
||||
<div><div>/</div></div> |
||||
</div> |
||||
<div class="circle input"> |
||||
<div></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</body> |
||||
<script src="js/templates.js" type="text/javascript" charset="utf-8"></script> |
||||
|
||||
</html> |
||||
<script src="js/lib/modernizr.js" type="text/javascript"></script> |
||||
<script src="js/lib/jquery-1.7.1.min.js" type="text/javascript"></script> |
||||
<script src="js/lib/jquery-css-transform.js" type="text/javascript"></script> |
||||
<script src="js/lib/jquery.i18n.properties-min-1.0.9.js" type="text/javascript" charset="utf-8"></script> |
||||
<script src="js/lib/mustache.js" type="text/javascript"></script> |
||||
<script src="js/lib/ubw-main.js" type="text/javascript"></script> |
||||
<script src="js/main.js" type="text/javascript" charset="utf-8"></script> |
||||
<script type="text/javascript"> |
||||
$(document).ready(function(){ |
||||
$(".circle.input>div").keydown(function(){ |
||||
if((event.keyCode < 48 || event.keyCode > 57) && event.keyCode != 189 && event.keyCode != 46 && event.keyCode != 8 && event.keyCode != 37 && event.keyCode != 39) |
||||
return false; |
||||
if(event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 37 || event.keyCode == 39) |
||||
return true; |
||||
else{ |
||||
if(this.innerHTML != "<br>") |
||||
return (this.innerHTML.charAt(0) == '-')?(this.innerHTML.length > 2)?false:true:(this.innerHTML.length > 1)?(event.keyCode == 189)?true:false:true; |
||||
else |
||||
return true; |
||||
} |
||||
}) |
||||
}) |
||||
</script> |
||||
</head> |
||||
|
||||
<body class="hasHelp"> |
||||
<div id="ubwidget" data-themes="pad"> |
||||
<div class="wrapper"> |
||||
<div id="toolbar"> |
||||
</div> |
||||
<div id="help"> |
||||
<iframe src="help.html" width="100%" height="100%" frameborder="0"></iframe> |
||||
</div> |
||||
<div id="content"> |
||||
<div id="parameters"> |
||||
</div> |
||||
<div id="scene"> |
||||
<div id="disc"> |
||||
<div class="circle result hide"> |
||||
<div> |
||||
<div id="result"> |
||||
<div> |
||||
<div class="front">?</div> |
||||
<div class="back">12</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="circle numbers"> |
||||
<div><div>0</div></div> |
||||
<div><div>1</div></div> |
||||
<div><div>2</div></div> |
||||
<div><div>3</div></div> |
||||
<div><div>4</div></div> |
||||
<div><div>5</div></div> |
||||
<div><div>6</div></div> |
||||
<div><div>7</div></div> |
||||
<div><div>8</div></div> |
||||
<div><div>9</div></div> |
||||
<div><div>10</div></div> |
||||
<div><div>11</div></div> |
||||
</div> |
||||
<div class="circle operators"> |
||||
<div><div>+</div></div> |
||||
<div><div>*</div></div> |
||||
<div><div>-</div></div> |
||||
<div><div>/</div></div> |
||||
</div> |
||||
<div class="circle input"> |
||||
<div></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</body> |
||||
|
||||
</html> |
||||
|
||||
@ -1,308 +1,310 @@ |
||||
html, body { |
||||
margin:0; |
||||
padding: 0; |
||||
font-family: "helvetica neue"; |
||||
font-size: 14px; |
||||
color: #666666; |
||||
margin:0; |
||||
padding: 0; |
||||
font-family: "helvetica neue"; |
||||
font-size: 14px; |
||||
color: #666666; |
||||
} |
||||
|
||||
#ubwidget { |
||||
position: absolute; |
||||
top: 0; |
||||
bottom: 0; |
||||
left: 0; |
||||
right: 0; |
||||
background: url("images/bg.png"); |
||||
position: absolute; |
||||
top: 0; |
||||
bottom: 0; |
||||
left: 0; |
||||
right: 0; |
||||
background: url("images/bg.png"); |
||||
} |
||||
|
||||
.theme-pad #ubwidget { |
||||
border-radius: 40px; |
||||
border-width: 52px; |
||||
|
||||
-webkit-border-image: url("images/pad-bd.png") 52 repeat; |
||||
-moz-border-image: url("images/pad-bd.png") 52 repeat; |
||||
border-image: url("images/pad-bd.png") 52 repeat; |
||||
border-radius: 40px; |
||||
border-width: 52px; |
||||
|
||||
-webkit-border-image: url("images/pad-bd.png") 52 repeat; |
||||
-moz-border-image: url("images/pad-bd.png") 52 repeat; |
||||
border-image: url("images/pad-bd.png") 52 repeat; |
||||
} |
||||
|
||||
.theme-slate #ubwidget { |
||||
border-radius: 44px; |
||||
border-width: 52px; |
||||
|
||||
-webkit-border-image: url("images/slate-bd.png") 52 repeat; |
||||
-moz-border-image: url("images/slate-bd.png") 52 repeat; |
||||
border-image: url("images/slate-bd.png") 52 repeat; |
||||
border-radius: 44px; |
||||
border-width: 52px; |
||||
|
||||
-webkit-border-image: url("images/slate-bd.png") 52 repeat; |
||||
-moz-border-image: url("images/slate-bd.png") 52 repeat; |
||||
border-image: url("images/slate-bd.png") 52 repeat; |
||||
} |
||||
|
||||
#ubwidget > .wrapper { |
||||
position: absolute; |
||||
top: 0px; |
||||
bottom: 0px; |
||||
left: 0px; |
||||
right: 0px; |
||||
overflow: hidden; |
||||
position: absolute; |
||||
top: 0px; |
||||
bottom: 0px; |
||||
left: 0px; |
||||
right: 0px; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
|
||||
.theme-slate #ubwidget > .wrapper, .theme-pad #ubwidget > .wrapper { |
||||
position: absolute; |
||||
top: -49px; |
||||
bottom: -5px; |
||||
left: -5px; |
||||
right: -5px; |
||||
overflow: hidden; |
||||
position: absolute; |
||||
top: -49px; |
||||
bottom: -5px; |
||||
left: -5px; |
||||
right: -5px; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
#toolbar { |
||||
display: table; |
||||
width: 100%; |
||||
height: 44px; |
||||
font-size: 24px; |
||||
color: #FFCC99; |
||||
padding:0 10px; |
||||
display: table; |
||||
width: 100%; |
||||
height: 44px; |
||||
font-size: 24px; |
||||
color: #FFCC99; |
||||
padding:0 10px; |
||||
} |
||||
|
||||
.theme-pad #toolbar, .theme-slate #toolbar { |
||||
height: 38px; |
||||
padding: 6px 0 0; |
||||
height: 38px; |
||||
padding: 6px 0 0; |
||||
} |
||||
|
||||
.theme-slate #toolbar { |
||||
color: #7F613F; |
||||
text-shadow: #FFDCA9 0 1px 0; |
||||
color: #7F613F; |
||||
text-shadow: #FFDCA9 0 1px 0; |
||||
} |
||||
|
||||
|
||||
#toolbar > * { |
||||
display: table-cell; |
||||
height: 100%; |
||||
vertical-align: middle; |
||||
display: table-cell; |
||||
height: 100%; |
||||
vertical-align: middle; |
||||
} |
||||
|
||||
#toolbar .actions { |
||||
text-align: right; |
||||
text-align: right; |
||||
} |
||||
|
||||
#toolbar button, h1 { |
||||
font-weight: normal; |
||||
font-size: 24px; |
||||
color: #FFCC99; |
||||
margin: 0; |
||||
font-weight: normal; |
||||
font-size: 24px; |
||||
color: #FFCC99; |
||||
margin: 0; |
||||
} |
||||
|
||||
.theme-slate #toolbar button, .theme-slate h1 { |
||||
color: #7F613F; |
||||
text-shadow: #FFDCA9 0 1px 0; |
||||
color: #7F613F; |
||||
text-shadow: #FFDCA9 0 1px 0; |
||||
} |
||||
|
||||
#toolbar button { |
||||
border: none; |
||||
padding: none; |
||||
outline: none; |
||||
background: none; |
||||
|
||||
cursor: pointer; |
||||
padding-left: 34px; |
||||
margin-left: 10px; |
||||
height: 32px; |
||||
border: none; |
||||
padding: none; |
||||
outline: none; |
||||
background: none; |
||||
|
||||
cursor: pointer; |
||||
padding-left: 34px; |
||||
margin-left: 10px; |
||||
height: 32px; |
||||
} |
||||
|
||||
#toolbar button span { |
||||
display: block; |
||||
line-height: 32px; |
||||
display: block; |
||||
line-height: 32px; |
||||
} |
||||
|
||||
#toolbar button[role='edit'] { |
||||
background: url("images/toolbar-edit.png") left top no-repeat; |
||||
background: url("images/toolbar-edit.png") left top no-repeat; |
||||
} |
||||
|
||||
#toolbar button[role='view'] { |
||||
display: none; |
||||
color: #FFF; |
||||
background: url("images/toolbar-edit.png") left -32px no-repeat; |
||||
display: none; |
||||
color: #FFF; |
||||
background: url("images/toolbar-edit.png") left -32px no-repeat; |
||||
} |
||||
|
||||
#toolbar button[role='reload'] { |
||||
background: url("images/toolbar-reload.png") left top no-repeat; |
||||
background: url("images/toolbar-reload.png") left top no-repeat; |
||||
} |
||||
|
||||
#toolbar button[role='help'] { |
||||
background: url("images/toolbar-help.png") left top no-repeat; |
||||
display: none; |
||||
background: url("images/toolbar-help.png") left top no-repeat; |
||||
display: none; |
||||
} |
||||
|
||||
.hasHelp #toolbar button[role='help'] { |
||||
display: inline-block; |
||||
display: inline-block; |
||||
} |
||||
|
||||
.showHelp #toolbar button[role='help'] { |
||||
color: #FFF; |
||||
background-position: left -32px; |
||||
color: #FFF; |
||||
background-position: left -32px; |
||||
} |
||||
|
||||
.theme-slate #toolbar button[role='edit'] { |
||||
background-image: url("images/slate-toolbar-edit.png"); |
||||
background-image: url("images/slate-toolbar-edit.png"); |
||||
} |
||||
|
||||
.theme-slate #toolbar button[role='view'] { |
||||
text-shadow: #7F613F 0 -1px 0; |
||||
background: url("images/slate-toolbar-edit.png") left -32px no-repeat; |
||||
text-shadow: #7F613F 0 -1px 0; |
||||
background: url("images/slate-toolbar-edit.png") left -32px no-repeat; |
||||
} |
||||
|
||||
.theme-slate #toolbar button[role='reload'] { |
||||
background-image: url("images/slate-toolbar-reload.png"); |
||||
background-image: url("images/slate-toolbar-reload.png"); |
||||
} |
||||
|
||||
.theme-slate #toolbar button[role='help'] { |
||||
background-image: url("images/slate-toolbar-help.png"); |
||||
background-image: url("images/slate-toolbar-help.png"); |
||||
} |
||||
|
||||
.showHelp.theme-slate #toolbar button[role='help'] { |
||||
text-shadow: #7F613F 0 -1px 0; |
||||
text-shadow: #7F613F 0 -1px 0; |
||||
} |
||||
|
||||
|
||||
.onEdit #toolbar button[role='view'] { |
||||
display: inline-block; |
||||
display: inline-block; |
||||
} |
||||
|
||||
.onEdit #toolbar button[role='edit'] { |
||||
display: none; |
||||
display: none; |
||||
} |
||||
|
||||
#help { |
||||
width: 300px; |
||||
height: 400px; |
||||
position: absolute; |
||||
margin-top: 10px; |
||||
right: 10px; |
||||
z-index: 10000; |
||||
display: none; |
||||
width: 300px; |
||||
height: 400px; |
||||
position: absolute; |
||||
margin-top: 10px; |
||||
right: 10px; |
||||
z-index: 10000; |
||||
display: none; |
||||
} |
||||
|
||||
.showHelp #help { |
||||
display: block; |
||||
display: block; |
||||
} |
||||
|
||||
#content { |
||||
position: absolute; |
||||
top: 44px; |
||||
bottom: 0; |
||||
overflow: auto; |
||||
left: 0; |
||||
right: 0; |
||||
position: absolute; |
||||
top: 44px; |
||||
bottom: 0; |
||||
overflow: auto; |
||||
left: 0; |
||||
right: 0; |
||||
|
||||
background-image: -moz-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: -webkit-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: -o-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: -ms-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: -moz-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: -webkit-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: -o-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: -ms-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
} |
||||
|
||||
#parameters { |
||||
display:none; |
||||
padding: 10px 20px; |
||||
background: url("images/parameters-bg.png"); |
||||
|
||||
-webkit-border-radius: 4px 4px 0 0; |
||||
-moz-border-radius: 4px 4px 0 0; |
||||
-mz-border-radius: 4px 4px 0 0; |
||||
border-radius: 4px 4px 0 0; |
||||
display:none; |
||||
padding: 10px 20px; |
||||
background: url("images/parameters-bg.png"); |
||||
|
||||
-webkit-border-radius: 4px 4px 0 0; |
||||
-moz-border-radius: 4px 4px 0 0; |
||||
-mz-border-radius: 4px 4px 0 0; |
||||
border-radius: 4px 4px 0 0; |
||||
} |
||||
|
||||
#parameters label { |
||||
font-style: italic; |
||||
font-style: italic; |
||||
} |
||||
|
||||
#parameters label > select, #parameters label > input{ |
||||
margin-left: 10px; |
||||
margin-left: 10px; |
||||
width: 80px; |
||||
} |
||||
|
||||
#parameters > div.inline { |
||||
display: inline-block; |
||||
display: inline-block; |
||||
margin-right: 20px; |
||||
} |
||||
|
||||
#parameters > div.inline+div.inline { |
||||
margin-left: 20px; |
||||
margin-right: 20px; |
||||
} |
||||
|
||||
#parameters input[type=text], |
||||
#parameters input[type=number] { |
||||
height: 26px; |
||||
border: 1px solid #BBB; |
||||
background-color: #FFF; |
||||
|
||||
padding: 0 4px; |
||||
|
||||
-webkit-border-radius: 4px; |
||||
-moz-border-radius: 4px; |
||||
-ms-border-radius: 4px; |
||||
border-radius: 4px; |
||||
|
||||
-webkit-box-shadow: 0 1px 0 #FFF; |
||||
-moz-box-shadow: 0 1px 0 #FFF; |
||||
-ms-box-shadow: 0 1px 0 #FFF; |
||||
box-shadow: 0 1px 0 #FFF; |
||||
height: 26px; |
||||
border: 1px solid #BBB; |
||||
background-color: #FFF; |
||||
|
||||
padding: 0 4px; |
||||
|
||||
-webkit-border-radius: 4px; |
||||
-moz-border-radius: 4px; |
||||
-ms-border-radius: 4px; |
||||
border-radius: 4px; |
||||
|
||||
-webkit-box-shadow: 0 1px 0 #FFF; |
||||
-moz-box-shadow: 0 1px 0 #FFF; |
||||
-ms-box-shadow: 0 1px 0 #FFF; |
||||
box-shadow: 0 1px 0 #FFF; |
||||
} |
||||
|
||||
#parameters input.tiny { |
||||
width: 40px; |
||||
width: 40px; |
||||
} |
||||
|
||||
#parameters input.small { |
||||
width: 80px; |
||||
width: 80px; |
||||
} |
||||
|
||||
#parameters input.medium { |
||||
width: 120px; |
||||
width: 120px; |
||||
} |
||||
|
||||
#parameters input.long { |
||||
width: 160px; |
||||
width: 160px; |
||||
} |
||||
|
||||
#scene { |
||||
padding: 20px; |
||||
padding: 20px; |
||||
} |
||||
|
||||
#scene > * { |
||||
margin: 0 auto; |
||||
margin: 0 auto; |
||||
} |
||||
.onEdit #scene { |
||||
} |
||||
|
||||
.onEdit #parameters { |
||||
display: block; |
||||
display: block; |
||||
} |
||||
|
||||
/* |
||||
.card-container { |
||||
-webkit-perspective: 600px; |
||||
width:100%; |
||||
height: 100%; |
||||
-webkit-perspective: 600px; |
||||
width:100%; |
||||
height: 100%; |
||||
} |
||||
.card { |
||||
position: relative; |
||||
width:100%; |
||||
height: 100%; |
||||
position: relative; |
||||
width:100%; |
||||
height: 100%; |
||||
} |
||||
.card > div { |
||||
position: absolute; |
||||
width:100%; |
||||
height: 100%; |
||||
-webkit-transform-style: preserve-3d; |
||||
-webkit-transition: all .5s ease-in-out; |
||||
-webkit-backface-visibility: hidden; |
||||
position: absolute; |
||||
width:100%; |
||||
height: 100%; |
||||
-webkit-transform-style: preserve-3d; |
||||
-webkit-transition: all .5s ease-in-out; |
||||
-webkit-backface-visibility: hidden; |
||||
} |
||||
.card > div:first-child { |
||||
-webkit-transform: rotateY( 0deg ); |
||||
-webkit-transform: rotateY( 0deg ); |
||||
} |
||||
.card > div:last-child { |
||||
-webkit-transform: rotateY( -180deg ); |
||||
-webkit-transform: rotateY( -180deg ); |
||||
} |
||||
.card.flip > div:first-child { |
||||
-webkit-transform: rotateY( 180deg ); |
||||
-webkit-transform: rotateY( 180deg ); |
||||
} |
||||
.card.flip > div:last-child { |
||||
-webkit-transform: rotateY( 0deg ); |
||||
-webkit-transform: rotateY( 0deg ); |
||||
} |
||||
*/ |
||||
|
||||
@ -0,0 +1,60 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<title>D'n'd</title> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> |
||||
<link rel="stylesheet" type="text/css" href="../../css/basic.css"/> |
||||
<script type="text/javascript" src="../../js/jquery-1.6.2.min.js"></script> |
||||
<script type="text/javascript" src="../../js/jquery-ui-1.8.9.custom.min.js"></script> |
||||
<script type="text/javascript" src="js/script.js"></script> |
||||
<script type="text/javascript"> |
||||
$(document).ready(function(){ |
||||
if(window.sankore) |
||||
sankore.enableDropOnWidget(false); |
||||
start(); |
||||
}); |
||||
</script> |
||||
</head> |
||||
<body> |
||||
<table class="body_table" cellpadding=0 cellspacing=0> |
||||
<tr style="height: 54px;"> |
||||
<td class="b_top_left"> </td> |
||||
<td class="b_top_center"> |
||||
<div id="wgt_name"></div> |
||||
<div id="wgt_help"></div> |
||||
<div id="wgt_reload"></div> |
||||
<div id="wgt_display" class="selected"></div> |
||||
<div id="wgt_edit"></div> |
||||
</td> |
||||
<td class="b_top_right"> </td> |
||||
</tr> |
||||
|
||||
<tr> |
||||
<td class="b_center_left"> </td> |
||||
<td> |
||||
<div id="help"></div> |
||||
<div id="data"> |
||||
<div id="parameters"> |
||||
<div class="inline"> |
||||
<label> |
||||
<select id="style_select"> |
||||
<option value="1"></option> |
||||
<option value="2"></option> |
||||
<option value="3"></option> |
||||
</select> |
||||
</label> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</td> |
||||
<td class="b_center_right"> </td> |
||||
</tr> |
||||
|
||||
<tr style="height: 54px;"> |
||||
<td class="b_bottom_left"> </td> |
||||
<td class="b_bottom_center"> </td> |
||||
<td class="b_bottom_right"> </td> |
||||
</tr> |
||||
</table> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,811 @@ |
||||
var sankoreLang = { |
||||
display: "Display",
|
||||
edit: "Edit",
|
||||
first_desc: "Odd numbers",
|
||||
second_desc: "Even numbers",
|
||||
enter: "Enter your category name here ...", |
||||
add: "Add new block", |
||||
wgt_name: "Categorize pictures", |
||||
reload: "Reload", |
||||
slate: "slate", |
||||
pad: "pad", |
||||
none: "none", |
||||
help: "Help", |
||||
help_content:
|
||||
"<p> <h2> Categorize pictures </h2> </p>" + |
||||
"<p> <h3> Sort pictures according to the name of the category</h3> </p>" + |
||||
|
||||
"<p> Drag and drop pictures in the corresponding category. All pictures should be placed to get a feed back from interactivity. If the result is incorrect, the area turns in red. If the result is correct, the area turns in green.</p> "+ |
||||
|
||||
"<p> “Reload” button resets the exercises. </p>" + |
||||
|
||||
"<p> Enter the “Edit” mode to : </p>" + |
||||
"<ul> <li> choose the theme of interactivity : pad, slate or none (none by default),</li>" + |
||||
"<li> modify the exercise.</li> </ul>" + |
||||
|
||||
"<p>In edition mode : </p>" + |
||||
"<ul> <li> edit the category clicking on the text field,</li>" + |
||||
"<li> add an another category clicking on the “+”,</li>" + |
||||
"<li> drag and drop pictures from your library on the correct category,</li>" + |
||||
"<li> delete a picture clicking on the cross button on the frame,</li>" + |
||||
"<li> remove a category clicking on the “-” sign on the right,</li>" + |
||||
"<li>“Display” button comes back to the activity.</li></ul>", |
||||
theme: "Theme" |
||||
}; |
||||
|
||||
//main function
|
||||
function start(){ |
||||
|
||||
$("#wgt_display").text(sankoreLang.display); |
||||
$("#wgt_edit").text(sankoreLang.edit); |
||||
$("#wgt_name").text(sankoreLang.wgt_name); |
||||
$("#wgt_reload").text(sankoreLang.reload); |
||||
$("#wgt_help").text(sankoreLang.help); |
||||
$("#help").html(sankoreLang.help_content); |
||||
$("#style_select option[value='1']").text(sankoreLang.slate); |
||||
$("#style_select option[value='2']").text(sankoreLang.pad); |
||||
$("#style_select option[value='3']").text(sankoreLang.none); |
||||
var tmpl = $("div.inline label").html(); |
||||
$("div.inline label").html(sankoreLang.theme + tmpl) |
||||
|
||||
if(window.sankore){ |
||||
if(sankore.preference("categoriser_images","")){ |
||||
var data = jQuery.parseJSON(sankore.preference("categoriser_images","")); |
||||
importData(data); |
||||
} else { |
||||
showExample(); |
||||
} |
||||
}
|
||||
else
|
||||
showExample(); |
||||
|
||||
if (window.widget) { |
||||
window.widget.onleave = function(){ |
||||
exportData(); |
||||
} |
||||
} |
||||
|
||||
$("#wgt_help").click(function(){ |
||||
var tmp = $(this); |
||||
if($(this).hasClass("open")){ |
||||
$(this).removeClass("help_pad").removeClass("help_wood") |
||||
$("#help").slideUp("100", function(){ |
||||
tmp.removeClass("open"); |
||||
$("#data").show(); |
||||
}); |
||||
} else { |
||||
($("#style_select").val() == 1)?$(this).removeClass("help_pad").addClass("help_wood"):$(this).removeClass("help_wood").addClass("help_pad"); |
||||
$("#data").hide(); |
||||
$("#help").slideDown("100", function(){ |
||||
tmp.addClass("open"); |
||||
}); |
||||
} |
||||
}); |
||||
|
||||
$("#wgt_reload").click(function(){ |
||||
if($("#wgt_display").hasClass("selected")){ |
||||
$("#wgt_edit").trigger("click"); |
||||
$("#wgt_display").trigger("click"); |
||||
} else { |
||||
$("#wgt_display").trigger("click"); |
||||
} |
||||
}); |
||||
|
||||
$("#wgt_reload, #wgt_display, #wgt_edit").mouseover(function(){ |
||||
exportData(); |
||||
}); |
||||
|
||||
$("#style_select").change(function (event){ |
||||
changeStyle($(this).find("option:selected").val()); |
||||
}) |
||||
|
||||
$("#wgt_display, #wgt_edit").click(function(event){ |
||||
if(this.id == "wgt_display"){ |
||||
if(!$(this).hasClass("selected")){ |
||||
$(this).addClass("selected"); |
||||
$("#wgt_edit").removeClass("selected"); |
||||
$("#parameters").css("display","none"); |
||||
if(window.sankore) |
||||
sankore.enableDropOnWidget(false); |
||||
// $(".add_block").remove();
|
||||
$(".cont").each(function(){ |
||||
var container = $(this); |
||||
var tmp_i = 0; |
||||
var tmp_right = ""; |
||||
var tmp_array = []; |
||||
|
||||
// container.find(".close_cont").remove();
|
||||
container.find(".imgs_cont").each(function(){
|
||||
$(this).find(".del_category").remove(); |
||||
$(this).find(".add_category").remove();
|
||||
$(this).removeAttr("ondragenter") |
||||
.removeAttr("ondragleave") |
||||
.removeAttr("ondragover") |
||||
.removeAttr("ondrop")
|
||||
.find(".cat_desc").attr("disabled","disabled"); |
||||
var tmp_count = $(this).find(".img_block").size(); |
||||
$(this).find("input[name='count']").val(tmp_count); |
||||
$(this).find(".img_block").each(function(){ |
||||
$(this).find(".close_img").remove(); |
||||
tmp_array.push($(this)); |
||||
$(this).remove(); |
||||
}); |
||||
$(this).droppable({ |
||||
hoverClass: 'dropHere', |
||||
drop: function(event, ui) { |
||||
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){ |
||||
var tmp_ui = $(ui.draggable).parent(); |
||||
$(this).append($(ui.draggable)); |
||||
checkCorrectness(tmp_ui); |
||||
} |
||||
} |
||||
}); |
||||
$(this).removeAttr("style"); |
||||
}); |
||||
|
||||
var all_imgs = $("<div class='all_imgs'>").appendTo(container); |
||||
|
||||
tmp_array = shuffle(tmp_array); |
||||
for(var i = 0; i<tmp_array.length;i++){ |
||||
tmp_array[i].draggable({ |
||||
helper:'clone', |
||||
zIndex:100, |
||||
appendTo: '#data' |
||||
}); |
||||
tmp_array[i].appendTo(all_imgs); |
||||
} |
||||
|
||||
all_imgs.droppable({ |
||||
hoverClass: 'dropBack', |
||||
drop: function(event, ui) { |
||||
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){ |
||||
if(this != $(ui.draggable).parent()[0]){ |
||||
var tmp_ui = $(ui.draggable).parent();
|
||||
$(this).append($(ui.draggable)); |
||||
checkCorrectness(tmp_ui); |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
}); |
||||
$(this).css("display", "none"); |
||||
$("#wgt_edit").css("display", "block"); |
||||
} |
||||
} else {
|
||||
if(!$(this).hasClass("selected")){ |
||||
$(this).addClass("selected"); |
||||
$("#wgt_display").removeClass("selected"); |
||||
$("#parameters").css("display","block"); |
||||
if(window.sankore) |
||||
sankore.enableDropOnWidget(true); |
||||
$(".cont").each(function(){ |
||||
var container = $(this); |
||||
|
||||
// $("<div class='close_cont'>").appendTo(container);
|
||||
container.find(".imgs_cont").each(function(){ |
||||
$("<button class='del_category'></button>").appendTo($(this)); |
||||
$("<button class='add_category'></button>").appendTo($(this)); |
||||
$(this).attr("ondragenter", "return false;") |
||||
.attr("ondragleave", "$(this).css(\"background-color\",\"#E6F6FF\"); return false;") |
||||
.attr("ondragover", "$(this).css(\"background-color\",\"#C3E9FF\"); return false;") |
||||
.attr("ondrop", "$(this).css(\"background-color\",\"#E6F6FF\"); return onDropTarget(this,event);") |
||||
.removeClass("red_cont") |
||||
.removeClass("green_cont") |
||||
.addClass("def_cont") |
||||
.droppable("destroy") |
||||
.find(".cat_desc").removeAttr("disabled"); |
||||
var tmp_img_cont = $(this); |
||||
var tmp_mask = $(this).find("input[name='mask']").val(); |
||||
container.find(".img_block").each(function(){ |
||||
if($(this).find("input").val() == tmp_mask){ |
||||
$("<div class='close_img'>").appendTo($(this)); |
||||
$(this).appendTo(tmp_img_cont); |
||||
} |
||||
}); |
||||
}); |
||||
container.find(".all_imgs").remove(); |
||||
}); |
||||
|
||||
|
||||
// $("<div class='add_block'>" + sankoreLang.add + "</div>").appendTo("#data");
|
||||
$(this).css("display", "none"); |
||||
$("#wgt_display").css("display", "block"); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
//add new block
|
||||
// $(".add_block").live("click", function(){
|
||||
// addContainer();
|
||||
// });
|
||||
|
||||
//adding new img
|
||||
$(".add_img").live("click", function(){ |
||||
addImgBlock($(this)); |
||||
}); |
||||
|
||||
//deleting a block
|
||||
// $(".close_cont").live("click",function(){
|
||||
// $(this).parent().remove();
|
||||
// refreshBlockNumbers();
|
||||
// });
|
||||
|
||||
//deleting the img block
|
||||
$(".close_img").live("click", function(){
|
||||
$(this).parent().remove();
|
||||
}); |
||||
|
||||
//adding new category
|
||||
$(".add_category").live("click",function(){ |
||||
addCategory($(this).parent()); |
||||
}); |
||||
|
||||
//deleting the category
|
||||
$(".del_category").live("click",function(){ |
||||
if($(this).parent().parent().find(".imgs_cont").size() == 1){ |
||||
$(this).parent().find(".img_block").remove(); |
||||
$(this).parent().find(".cat_desc").val(sankoreLang.enter); |
||||
} else { |
||||
$(this).parent().remove(); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
//export
|
||||
function exportData(){ |
||||
var array_to_export = []; |
||||
if($("#wgt_edit").hasClass("selected")){ |
||||
$(".cont").each(function(){ |
||||
var cont_obj = new Object(); |
||||
cont_obj.style = $("#style_select").find("option:selected").val(); |
||||
cont_obj.mode = "edit"; |
||||
cont_obj.conts = []; |
||||
$(this).find(".imgs_cont").each(function(){ |
||||
var img_cont = new Object(); |
||||
img_cont.mask = $(this).find("input[name='mask']").val(); |
||||
img_cont.count = $(this).find(".img_block").size(); |
||||
img_cont.text = $(this).find(".cat_desc").val(); |
||||
img_cont.imgs = []; |
||||
$(this).find(".img_block").each(function(){ |
||||
var img_obj = new Object(); |
||||
img_obj.value = $(this).find("input").val(); |
||||
img_obj.link = $(this).find("img").attr("src").replace("../../","");
|
||||
img_obj.ht = $(this).find("img").height(); |
||||
img_obj.wd = $(this).find("img").width(); |
||||
img_cont.imgs.push(img_obj); |
||||
}); |
||||
cont_obj.conts.push(img_cont); |
||||
}); |
||||
array_to_export.push(cont_obj); |
||||
}); |
||||
} else { |
||||
$(".cont").each(function(){ |
||||
var cont_obj = new Object(); |
||||
cont_obj.style = $("#style_select").find("option:selected").val(); |
||||
cont_obj.mode = "display"; |
||||
cont_obj.conts = []; |
||||
$(this).find(".imgs_cont").each(function(){ |
||||
var img_cont = new Object(); |
||||
img_cont.mask = $(this).find("input[name='mask']").val(); |
||||
img_cont.count = $(this).find("input[name='count']").val(); |
||||
img_cont.text = $(this).find(".cat_desc").val(); |
||||
img_cont.imgs = []; |
||||
$(this).find(".img_block").each(function(){ |
||||
var img_obj = new Object(); |
||||
img_obj.value = $(this).find("input").val(); |
||||
img_obj.link = $(this).find("img").attr("src").replace("../../","");
|
||||
img_obj.ht = $(this).find("img").height(); |
||||
img_obj.wd = $(this).find("img").width(); |
||||
img_cont.imgs.push(img_obj); |
||||
}); |
||||
cont_obj.conts.push(img_cont); |
||||
}); |
||||
cont_obj.all_imgs = []; |
||||
$(this).find(".all_imgs .img_block").each(function(){ |
||||
var img = new Object(); |
||||
img.value = $(this).find("input").val(); |
||||
img.link = $(this).find("img").attr("src").replace("../../","");
|
||||
img.ht = $(this).find("img").height(); |
||||
img.wd = $(this).find("img").width(); |
||||
cont_obj.all_imgs.push(img); |
||||
}); |
||||
array_to_export.push(cont_obj); |
||||
}); |
||||
} |
||||
|
||||
if($(".cont").size() == 0){ |
||||
var cont_obj = new Object(); |
||||
cont_obj.style = $("#style_select").find("option:selected").val(); |
||||
cont_obj.tmp = "clear"; |
||||
array_to_export.push(cont_obj); |
||||
} |
||||
if(window.sankore) |
||||
sankore.setPreference("categoriser_images", JSON.stringify(array_to_export)); |
||||
} |
||||
|
||||
//import
|
||||
function importData(data){ |
||||
|
||||
for(var i in data){ |
||||
if(data[i].tmp){ |
||||
changeStyle(data[i].style); |
||||
$("#style_select").val(data[i].style); |
||||
} else { |
||||
if(i == 0){ |
||||
changeStyle(data[i].style); |
||||
$("#style_select").val(data[i].style); |
||||
} |
||||
if(data[i].mode == "edit"){
|
||||
var tmp_array = []; |
||||
var container = $("<div class='cont'>"); |
||||
var sub_container = $("<div class='sub_cont'>").appendTo(container);
|
||||
// $("<div class='number_cont'>"+ (++tmp) +"</div>").appendTo(sub_container);
|
||||
|
||||
for(var j in data[i].conts){ |
||||
var imgs_container = $("<div class='imgs_cont def_cont'>").appendTo(container); |
||||
|
||||
$("<input type='hidden' name='mask' value='" + data[i].conts[j].mask + "'/>").appendTo(imgs_container); |
||||
$("<input type='hidden' name='count' value='" + data[i].conts[j].count + "'/>").appendTo(imgs_container); |
||||
var tmp_div = $("<div style='width: 100%; overflow: hidden;'>").appendTo(imgs_container); |
||||
$("<input type='text' class='cat_desc' value='" + data[i].conts[j].text + "' disabled/>").appendTo(tmp_div); |
||||
for(var k in data[i].conts[j].imgs){ |
||||
var block_img = $("<div class='img_block' style='text-align: center;'></div>"); |
||||
$("<input type='hidden' value='" + data[i].conts[j].imgs[k].value + "'/>").appendTo(block_img); |
||||
var img = $("<img src=\"../../" + data[i].conts[j].imgs[k].link + "\" style=\"display: inline;\"/>").appendTo(block_img);
|
||||
img.height(data[i].conts[j].imgs[k].ht); |
||||
if((120 - data[i].conts[j].imgs[k].ht) > 0) |
||||
img.css("margin",(120 - data[i].conts[j].imgs[k].ht)/2 + "px 0"); |
||||
tmp_array.push(block_img); |
||||
} |
||||
|
||||
imgs_container.droppable({ |
||||
hoverClass: 'dropHere', |
||||
drop: function(event, ui) { |
||||
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){ |
||||
var tmp_ui = $(ui.draggable).parent(); |
||||
$(this).append($(ui.draggable)); |
||||
checkCorrectness(tmp_ui); |
||||
} |
||||
} |
||||
});
|
||||
} |
||||
|
||||
var all_imgs = $("<div class='all_imgs'>").appendTo(container);
|
||||
|
||||
tmp_array = shuffle(tmp_array); |
||||
for(j in tmp_array){ |
||||
tmp_array[j].draggable({ |
||||
helper:'clone', |
||||
zIndex:100, |
||||
appendTo: '#data' |
||||
}); |
||||
tmp_array[j].appendTo(all_imgs); |
||||
} |
||||
|
||||
all_imgs.sortable(); |
||||
|
||||
all_imgs.droppable({ |
||||
hoverClass: 'dropBack', |
||||
drop: function(event, ui) { |
||||
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){ |
||||
if(this != $(ui.draggable).parent()[0]){ |
||||
var tmp_ui = $(ui.draggable).parent();
|
||||
$(this).append($(ui.draggable)); |
||||
checkCorrectness(tmp_ui); |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
|
||||
container.appendTo("#data"); |
||||
} else { |
||||
container = $("<div class='cont'>"); |
||||
sub_container = $("<div class='sub_cont'>").appendTo(container);
|
||||
// $("<div class='number_cont'>" + (++tmp) + "</div>").appendTo(sub_container);
|
||||
|
||||
for(j in data[i].conts){ |
||||
var tmp_img_array = []; |
||||
imgs_container = $("<div class='imgs_cont def_cont'>").appendTo(container);
|
||||
$("<input type='hidden' name='mask' value='" + data[i].conts[j].mask + "'/>").appendTo(imgs_container); |
||||
$("<input type='hidden' name='count' value='" + data[i].conts[j].count + "'/>").appendTo(imgs_container); |
||||
tmp_div = $("<div style='width: 100%; overflow: hidden;'>").appendTo(imgs_container); |
||||
$("<input type='text' class='cat_desc' value='" + data[i].conts[j].text + "' disabled/>").appendTo(tmp_div); |
||||
for(k in data[i].conts[j].imgs){ |
||||
block_img = $("<div class='img_block' style='text-align: center;'></div>"); |
||||
$("<input type='hidden' value='" + data[i].conts[j].imgs[k].value + "'/>").appendTo(block_img); |
||||
img = $("<img src=\"../../" + data[i].conts[j].imgs[k].link + "\" style=\"display: inline;\"/>").appendTo(block_img); |
||||
img.height(data[i].conts[j].imgs[k].ht); |
||||
if((120 - data[i].conts[j].imgs[k].ht) > 0) |
||||
img.css("margin",(120 - data[i].conts[j].imgs[k].ht)/2 + "px 0"); |
||||
tmp_img_array.push(block_img); |
||||
} |
||||
|
||||
tmp_img_array = shuffle(tmp_img_array); |
||||
for(k in tmp_img_array){ |
||||
tmp_img_array[k].draggable({ |
||||
helper:'clone', |
||||
zIndex:100, |
||||
appendTo: '#data' |
||||
}); |
||||
tmp_img_array[k].appendTo(imgs_container); |
||||
} |
||||
|
||||
imgs_container.droppable({ |
||||
hoverClass: 'dropHere', |
||||
drop: function(event, ui) { |
||||
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){ |
||||
var tmp_ui = $(ui.draggable).parent(); |
||||
$(this).append($(ui.draggable)); |
||||
checkCorrectness(tmp_ui); |
||||
} |
||||
} |
||||
});
|
||||
} |
||||
|
||||
all_imgs = $("<div class='all_imgs'>").appendTo(container);
|
||||
var all_imgs_arr = []; |
||||
for(j in data[i].all_imgs){
|
||||
block_img = $("<div class='img_block' style='text-align: center;'></div>"); |
||||
$("<input type='hidden' value='" + data[i].all_imgs[j].value + "'/>").appendTo(block_img); |
||||
img = $("<img src=\"../../" + data[i].all_imgs[j].link + "\" style=\"display: inline;\"/>").appendTo(block_img); |
||||
img.height(data[i].all_imgs[j].ht); |
||||
if((120 - data[i].all_imgs[j].ht) > 0) |
||||
img.css("margin",(120 - data[i].all_imgs[j].ht)/2 + "px 0"); |
||||
all_imgs_arr.push(block_img); |
||||
}
|
||||
|
||||
all_imgs_arr = shuffle(all_imgs_arr); |
||||
for(k in all_imgs_arr){ |
||||
all_imgs_arr[k].draggable({ |
||||
helper:'clone', |
||||
zIndex:100, |
||||
appendTo: '#data' |
||||
}); |
||||
all_imgs_arr[k].appendTo(all_imgs); |
||||
} |
||||
|
||||
all_imgs.sortable(); |
||||
|
||||
all_imgs.droppable({ |
||||
hoverClass: 'dropBack', |
||||
drop: function(event, ui) { |
||||
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){ |
||||
if(this != $(ui.draggable).parent()[0]){ |
||||
var tmp_ui = $(ui.draggable).parent();
|
||||
$(this).append($(ui.draggable)); |
||||
checkCorrectness(tmp_ui); |
||||
} |
||||
} |
||||
} |
||||
});
|
||||
container.appendTo("#data"); |
||||
checkCorrectness(all_imgs); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
//example
|
||||
function showExample(){ |
||||
|
||||
changeStyle("3"); |
||||
var tmp_array = []; |
||||
|
||||
var container = $("<div class='cont'>").appendTo("#data"); |
||||
var sub_container = $("<div class='sub_cont'>").appendTo(container); |
||||
var imgs_container_one = $("<div class='imgs_cont def_cont'>").appendTo(container); |
||||
var imgs_container_two = $("<div class='imgs_cont def_cont'>").appendTo(container); |
||||
var all_imgs = $("<div class='all_imgs'>").appendTo(container); |
||||
|
||||
// var number = $("<div class='number_cont'>1</div>").appendTo(sub_container);
|
||||
|
||||
$("<input type='hidden' name='mask' value='1'/>").appendTo(imgs_container_one); |
||||
$("<input type='hidden' name='count' value='2'/>").appendTo(imgs_container_one); |
||||
var tmp_div_one = $("<div style='width: 100%; overflow: hidden;'>").appendTo(imgs_container_one); |
||||
$("<input type='text' class='cat_desc' value='" + sankoreLang.first_desc + "' disabled/>").appendTo(tmp_div_one); |
||||
|
||||
$("<input type='hidden' name='mask' value='2'/>").appendTo(imgs_container_two); |
||||
$("<input type='hidden' name='count' value='3'/>").appendTo(imgs_container_two); |
||||
var tmp_div_two = $("<div style='width: 100%; overflow: hidden;'>").appendTo(imgs_container_two); |
||||
$("<input type='text' class='cat_desc' value='" + sankoreLang.second_desc + "' disabled/>").appendTo(tmp_div_two); |
||||
|
||||
var img1 = $("<div class='img_block' style='text-align: center;'></div>"); |
||||
$("<input type='hidden' value='2'/>").appendTo(img1); |
||||
$("<img src=\"../../objects/0.gif\" style=\"display: inline;\" height=\"120\"/>").appendTo(img1); |
||||
var img2 = $("<div class='img_block' style='text-align: center;'></div>"); |
||||
$("<input type='hidden' value='1'/>").appendTo(img2); |
||||
$("<img src=\"../../objects/1.gif\" style=\"display: inline;\" height=\"120\"/>").appendTo(img2); |
||||
var img3 = $("<div class='img_block' style='text-align: center;'></div>"); |
||||
$("<input type='hidden' value='2'/>").appendTo(img3); |
||||
$("<img src=\"../../objects/2.gif\" style=\"display: inline;\" height=\"120\"/>").appendTo(img3); |
||||
var img4 = $("<div class='img_block' style='text-align: center;'></div>"); |
||||
$("<input type='hidden' value='1'/>").appendTo(img4); |
||||
$("<img src=\"../../objects/3.gif\" style=\"display: inline;\" height=\"120\"/>").appendTo(img4); |
||||
var img5 = $("<div class='img_block' style='text-align: center;'></div>"); |
||||
$("<input type='hidden' value='2'/>").appendTo(img5); |
||||
$("<img src=\"../../objects/4.gif\" style=\"display: inline;\" height=\"120\"/>").appendTo(img5);
|
||||
|
||||
tmp_array.push(img1, img2, img3, img4, img5); |
||||
tmp_array = shuffle(tmp_array); |
||||
for(var i = 0; i<tmp_array.length;i++){ |
||||
tmp_array[i].draggable({ |
||||
helper:'clone', |
||||
zIndex:100, |
||||
appendTo: '#data' |
||||
}); |
||||
tmp_array[i].appendTo(all_imgs); |
||||
} |
||||
all_imgs.sortable(); |
||||
|
||||
imgs_container_one.droppable({ |
||||
hoverClass: 'dropHere', |
||||
drop: function(event, ui) { |
||||
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){ |
||||
var tmp_ui = $(ui.draggable).parent(); |
||||
$(this).append($(ui.draggable)); |
||||
checkCorrectness(tmp_ui); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
imgs_container_two.droppable({ |
||||
hoverClass: 'dropHere', |
||||
drop: function(event, ui) { |
||||
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){ |
||||
var tmp_ui = $(ui.draggable).parent(); |
||||
$(this).append($(ui.draggable)); |
||||
checkCorrectness(tmp_ui); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
all_imgs.droppable({ |
||||
hoverClass: 'dropBack', |
||||
drop: function(event, ui) { |
||||
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){ |
||||
if(this != $(ui.draggable).parent()[0]){ |
||||
var tmp_ui = $(ui.draggable).parent();
|
||||
$(this).append($(ui.draggable)); |
||||
checkCorrectness(tmp_ui); |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
|
||||
//function that allows to add new category
|
||||
function addCategory(obj){ |
||||
var imgs_container = $("<div class='imgs_cont def_cont'>").insertAfter(obj);
|
||||
$("<input type='hidden' name='mask' value='" + returnId() + "'/>").appendTo(imgs_container);
|
||||
$("<input type='hidden' name='count' value=''/>").appendTo(imgs_container);
|
||||
var tmp_div = $("<div style='width: 100%; overflow: hidden;'>").appendTo(imgs_container); |
||||
$("<input type='text' class='cat_desc' value='" + sankoreLang.enter + "'>").appendTo(tmp_div);
|
||||
$("<button class='del_category'></button>").appendTo(imgs_container); |
||||
$("<button class='add_category'></button>").appendTo(imgs_container); |
||||
imgs_container.attr("ondragenter", "return false;") |
||||
.attr("ondragleave", "$(this).css(\"background-color\",\"#e6f6ff\"); return false;") |
||||
.attr("ondragover", "$(this).css(\"background-color\",\"#c3e9ff\"); return false;") |
||||
.attr("ondrop", "$(this).css(\"background-color\",\"#e6f6ff\"); return onDropTarget(this,event);"); |
||||
} |
||||
|
||||
//add new container
|
||||
//function addContainer(){
|
||||
// var container = $("<div class='cont'>");
|
||||
// var sub_container = $("<div class='sub_cont'>").appendTo(container);
|
||||
// var imgs_container = $("<div class='imgs_cont def_cont'>").appendTo(container);
|
||||
//
|
||||
// var close = $("<div class='close_cont'>").appendTo(container);
|
||||
// var number = $("<div class='number_cont'>"+ ($(".cont").size() + 1) +"</div>").appendTo(sub_container);
|
||||
//
|
||||
// $("<input type='hidden' name='mask' value='" + returnId() + "'/>").appendTo(imgs_container);
|
||||
// $("<input type='hidden' name='count' value=''/>").appendTo(imgs_container);
|
||||
// var tmp_div = $("<div style='width: 100%; overflow: hidden;'>").appendTo(imgs_container);
|
||||
// $("<input type='text' class='cat_desc' value='" + sankoreLang.enter + "'/>").appendTo(tmp_div);
|
||||
// $("<button class='del_category'></button>").appendTo(imgs_container);
|
||||
// $("<button class='add_category'></button>").appendTo(imgs_container);
|
||||
// imgs_container.attr("ondragenter", "return false;")
|
||||
// .attr("ondragleave", "$(this).css(\"background-color\",\"#e6f6ff\"); return false;")
|
||||
// .attr("ondragover", "$(this).css(\"background-color\",\"#c3e9ff\"); return false;")
|
||||
// .attr("ondrop", "$(this).css(\"background-color\",\"#e6f6ff\"); return onDropTarget(this,event);");
|
||||
// container.insertBefore($(".add_block"));
|
||||
//}
|
||||
|
||||
//function refreshBlockNumbers(){
|
||||
// var i = 0;
|
||||
// $(".cont").each(function(){
|
||||
// $(this).find(".number_cont").text(++i);
|
||||
// })
|
||||
//}
|
||||
|
||||
//shuffles an array
|
||||
function shuffle( arr ) |
||||
{ |
||||
var pos, tmp; |
||||
|
||||
for( var i = 0; i < arr.length; i++ ) |
||||
{ |
||||
pos = Math.round( Math.random() * ( arr.length - 1 ) ); |
||||
tmp = arr[pos]; |
||||
arr[pos] = arr[i]; |
||||
arr[i] = tmp; |
||||
} |
||||
return arr; |
||||
} |
||||
|
||||
//changing the style
|
||||
function changeStyle(val){ |
||||
switch(val){ |
||||
case "1": |
||||
$(".b_top_left").removeClass("btl_pad").removeClass("without_back"); |
||||
$(".b_top_center").removeClass("btc_pad").removeClass("without_back"); |
||||
$(".b_top_right").removeClass("btr_pad").removeClass("without_back"); |
||||
$(".b_center_left").removeClass("bcl_pad").removeClass("without_back"); |
||||
$(".b_center_right").removeClass("bcr_pad").removeClass("without_back"); |
||||
$(".b_bottom_right").removeClass("bbr_pad").removeClass("without_back"); |
||||
$(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back"); |
||||
$(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back"); |
||||
$("#wgt_reload").removeClass("pad_color").removeClass("pad_reload"); |
||||
$("#wgt_help").removeClass("pad_color").removeClass("pad_help"); |
||||
$("#wgt_edit").removeClass("pad_color").removeClass("pad_edit"); |
||||
$("#wgt_name").removeClass("pad_color"); |
||||
$("#wgt_display").addClass("display_wood"); |
||||
$("#style_select").val(val); |
||||
$("body, html").removeClass("without_radius").addClass("radius_ft"); |
||||
break; |
||||
case "2": |
||||
$(".b_top_left").addClass("btl_pad").removeClass("without_back"); |
||||
$(".b_top_center").addClass("btc_pad").removeClass("without_back"); |
||||
$(".b_top_right").addClass("btr_pad").removeClass("without_back"); |
||||
$(".b_center_left").addClass("bcl_pad").removeClass("without_back"); |
||||
$(".b_center_right").addClass("bcr_pad").removeClass("without_back"); |
||||
$(".b_bottom_right").addClass("bbr_pad").removeClass("without_back"); |
||||
$(".b_bottom_left").addClass("bbl_pad").removeClass("without_back"); |
||||
$(".b_bottom_center").addClass("bbc_pad").removeClass("without_back"); |
||||
$("#wgt_reload").addClass("pad_color").addClass("pad_reload"); |
||||
$("#wgt_help").addClass("pad_color").addClass("pad_help"); |
||||
$("#wgt_edit").addClass("pad_color").addClass("pad_edit"); |
||||
$("#wgt_name").addClass("pad_color"); |
||||
$("#wgt_display").removeClass("display_wood"); |
||||
$("#style_select").val(val); |
||||
$("body, html").removeClass("without_radius").removeClass("radius_ft"); |
||||
break; |
||||
case "3": |
||||
$(".b_top_left").addClass("without_back").removeClass("btl_pad"); |
||||
$(".b_top_center").addClass("without_back").removeClass("btc_pad"); |
||||
$(".b_top_right").addClass("without_back").removeClass("btr_pad"); |
||||
$(".b_center_left").addClass("without_back").removeClass("bcl_pad"); |
||||
$(".b_center_right").addClass("without_back").removeClass("bcr_pad"); |
||||
$(".b_bottom_right").addClass("without_back").removeClass("bbr_pad"); |
||||
$(".b_bottom_left").addClass("without_back").removeClass("bbl_pad"); |
||||
$(".b_bottom_center").addClass("without_back").removeClass("bbc_pad"); |
||||
$("#wgt_help").addClass("pad_color").addClass("pad_help"); |
||||
$("#wgt_reload").addClass("pad_color").addClass("pad_reload"); |
||||
$("#wgt_edit").addClass("pad_color").addClass("pad_edit"); |
||||
$("#wgt_name").addClass("pad_color"); |
||||
$("#wgt_display").removeClass("display_wood"); |
||||
$("#style_select").val(val); |
||||
$("body, html").addClass("without_radius").removeClass("radius_ft"); |
||||
break; |
||||
} |
||||
} |
||||
|
||||
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; |
||||
} |
||||
|
||||
//return id
|
||||
function returnId(){ |
||||
var tmp = Math.random().toString(); |
||||
return tmp.substr(2); |
||||
} |
||||
|
||||
//a func for checking when smth will drop
|
||||
function checkOnDrop(dest){ |
||||
var tmp_count = dest.find("input[name='count']").val(); |
||||
var tmp_mask = dest.find("input[name='mask']").val(); |
||||
if(dest.find(".img_block").size() == tmp_count){ |
||||
var tmp_right = true;
|
||||
dest.find(".img_block").each(function(){ |
||||
if($(this).find("input").val() != tmp_mask) |
||||
tmp_right = false; |
||||
});
|
||||
if(tmp_right) |
||||
dest.removeClass("def_cont").removeClass("red_cont").addClass("green_cont"); |
||||
else |
||||
dest.removeClass("def_cont").removeClass("green_cont").addClass("red_cont"); |
||||
} else
|
||||
dest.removeClass("def_cont").removeClass("green_cont").addClass("red_cont"); |
||||
} |
||||
|
||||
//checking source on correctness
|
||||
function checkCorrectness(source){ |
||||
if(!source.hasClass("all_imgs")){ |
||||
if(source.parent().find(".all_imgs").find(".img_block").size() == 0){ |
||||
source.parent().find(".imgs_cont").each(function(){ |
||||
checkOnDrop($(this)) |
||||
}) |
||||
} else { |
||||
source.parent().find(".imgs_cont").each(function(){ |
||||
$(this).addClass("def_cont").removeClass("green_cont").removeClass("red_cont"); |
||||
}) |
||||
} |
||||
} else { |
||||
if(source.find(".img_block").size() > 0){ |
||||
source.parent().find(".imgs_cont").each(function(){ |
||||
$(this).addClass("def_cont").removeClass("green_cont").removeClass("red_cont"); |
||||
}) |
||||
} else { |
||||
source.parent().find(".imgs_cont").each(function(){ |
||||
checkOnDrop($(this)) |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
|
||||
function onDropTarget(obj, event) { |
||||
if (event.dataTransfer) { |
||||
var format = "text/plain"; |
||||
var textData = event.dataTransfer.getData(format); |
||||
if (!textData) { |
||||
alert(":("); |
||||
} |
||||
textData = stringToXML(textData); |
||||
if(textData.getElementsByTagName("ready")[0].firstChild.textContent == "true"){ |
||||
var tmp = textData.getElementsByTagName("path")[0].firstChild.textContent; |
||||
var img_block = $("<div class='img_block' style='text-align: center;'>"); |
||||
$("<div class='close_img'>").appendTo(img_block);
|
||||
$("<input type='hidden' value='" + $(obj).find("input[name='mask']").val() + "'/>").appendTo(img_block); |
||||
var tmp_img = $("<img style='display: inline;'/>").attr("src", "../../" + tmp).appendTo(img_block); |
||||
img_block.draggable({ |
||||
helper:'clone', |
||||
zIndex:100, |
||||
appendTo: '#data' |
||||
}); |
||||
$(obj).append(img_block); |
||||
|
||||
if(tmp_img.height() == 0){ |
||||
var tmp_id = setInterval(function(){ |
||||
if(tmp_img.height() != 0){ |
||||
if(tmp_img.height() >= tmp_img.width()) |
||||
tmp_img.attr("height", "120"); |
||||
else{ |
||||
tmp_img.attr("width","120"); |
||||
var h = tmp_img.height(); |
||||
tmp_img.attr("height",h); |
||||
tmp_img.css("margin",(120 - tmp_img.height())/2 + "px 0"); |
||||
} |
||||
clearInterval(tmp_id); |
||||
} |
||||
}, 10); |
||||
} else { |
||||
if(tmp_img.height() >= tmp_img.width()) |
||||
tmp_img.attr("height", "120"); |
||||
else{ |
||||
tmp_img.attr("width","120"); |
||||
var h = tmp_img.height(); |
||||
tmp_img.attr("height",h); |
||||
tmp_img.css("margin",(120 - tmp_img.height())/2 + "px 0"); |
||||
} |
||||
}
|
||||
} |
||||
} |
||||
else { |
||||
alert ("Your browser does not support the dataTransfer object."); |
||||
} |
||||
|
||||
if (event.stopPropagation) { |
||||
event.stopPropagation (); |
||||
} |
||||
else { |
||||
event.cancelBubble = true; |
||||
} |
||||
return false; |
||||
} |
||||
@ -0,0 +1,60 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<title>D'n'd</title> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> |
||||
<link rel="stylesheet" type="text/css" href="../../css/basic.css"/> |
||||
<script type="text/javascript" src="../../js/jquery-1.6.2.min.js"></script> |
||||
<script type="text/javascript" src="../../js/jquery-ui-1.8.9.custom.min.js"></script> |
||||
<script type="text/javascript" src="js/script.js"></script> |
||||
<script type="text/javascript"> |
||||
$(document).ready(function(){ |
||||
if(window.sankore) |
||||
sankore.enableDropOnWidget(false); |
||||
start(); |
||||
}); |
||||
</script> |
||||
</head> |
||||
<body> |
||||
<table class="body_table" cellpadding=0 cellspacing=0> |
||||
<tr style="height: 54px;"> |
||||
<td class="b_top_left"> </td> |
||||
<td class="b_top_center"> |
||||
<div id="wgt_name"></div> |
||||
<div id="wgt_help"></div> |
||||
<div id="wgt_reload"></div> |
||||
<div id="wgt_display" class="selected"></div> |
||||
<div id="wgt_edit"></div> |
||||
</td> |
||||
<td class="b_top_right"> </td> |
||||
</tr> |
||||
|
||||
<tr> |
||||
<td class="b_center_left"> </td> |
||||
<td> |
||||
<div id="help"></div> |
||||
<div id="data"> |
||||
<div id="parameters"> |
||||
<div class="inline"> |
||||
<label> |
||||
<select id="style_select"> |
||||
<option value="1"></option> |
||||
<option value="2"></option> |
||||
<option value="3"></option> |
||||
</select> |
||||
</label> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</td> |
||||
<td class="b_center_right"> </td> |
||||
</tr> |
||||
|
||||
<tr style="height: 54px;"> |
||||
<td class="b_bottom_left"> </td> |
||||
<td class="b_bottom_center"> </td> |
||||
<td class="b_bottom_right"> </td> |
||||
</tr> |
||||
</table> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,747 @@ |
||||
var sankoreLang = { |
||||
display: "Display",
|
||||
edit: "Edit",
|
||||
first_desc: "Fruits",
|
||||
second_desc: "Vegetables", |
||||
potatoes: "Potato", |
||||
carrot: "Carrot", |
||||
onion: "Onion", |
||||
apple: "Apple", |
||||
pear: "Pear", |
||||
enter: "Enter your category name here ...", |
||||
add: "Add new block", |
||||
text: "Some text", |
||||
wgt_name: "Categorize text", |
||||
reload: "Reload", |
||||
slate: "slate", |
||||
pad: "pad", |
||||
none: "none", |
||||
help: "Help", |
||||
help_content:
|
||||
"<p><h2>Categorize text</h2></p>" + |
||||
"<p><h3>Sort labels according to the name of the category</h3></p>" + |
||||
"<p>Drag and drop labels in the corresponding category. All pictures should be placed to get a feed back from interactivity. If the result is incorrect, the area turns in red. If the result is correct, the area turns in green.</p>" + |
||||
"<p>“Reload” button resets the exercises.</p>" + |
||||
"<p>Enter the “Edit” mode to :</p>" + |
||||
"<ul><li>choose the theme of interactivity : pad, slate or none (none by default),</li>" + |
||||
"<li>modify the exercise.</li></ul>" + |
||||
"<p>In edition mode :</p>" + |
||||
"<ul><li>edit the category clicking on the text field,</li>" + |
||||
"<li>add an another category clicking on the “+” (small one),</li>" + |
||||
"<li>add a label clicking on the “+” (big one) on the correct category,</li>" + |
||||
"<li>modify the text field clicking on it,</li>" + |
||||
"<li>remove a label clicking on the cross button on the frame,</li>" + |
||||
"<li>delete a category clicking on the “-” sign on the right,</li>" + |
||||
"<li>“Display” button comes back to the activity.</li></ul>", |
||||
theme: "Theme" |
||||
}; |
||||
|
||||
//main function
|
||||
function start(){ |
||||
|
||||
$("#wgt_display").text(sankoreLang.display); |
||||
$("#wgt_edit").text(sankoreLang.edit); |
||||
$("#wgt_name").text(sankoreLang.wgt_name); |
||||
$("#wgt_reload").text(sankoreLang.reload); |
||||
$("#wgt_help").text(sankoreLang.help); |
||||
$("#help").html(sankoreLang.help_content); |
||||
$("#style_select option[value='1']").text(sankoreLang.slate); |
||||
$("#style_select option[value='2']").text(sankoreLang.pad); |
||||
$("#style_select option[value='3']").text(sankoreLang.none); |
||||
var tmpl = $("div.inline label").html(); |
||||
$("div.inline label").html(sankoreLang.theme + tmpl) |
||||
|
||||
if(window.sankore){ |
||||
if(sankore.preference("categoriser_text","")){ |
||||
var data = jQuery.parseJSON(sankore.preference("categoriser_text","")); |
||||
importData(data); |
||||
} else { |
||||
showExample(); |
||||
} |
||||
}
|
||||
else
|
||||
showExample(); |
||||
|
||||
if (window.widget) { |
||||
window.widget.onleave = function(){ |
||||
exportData(); |
||||
} |
||||
} |
||||
|
||||
$("#wgt_help").click(function(){ |
||||
var tmp = $(this); |
||||
if($(this).hasClass("open")){ |
||||
$(this).removeClass("help_pad").removeClass("help_wood") |
||||
$("#help").slideUp("100", function(){ |
||||
tmp.removeClass("open"); |
||||
$("#data").show(); |
||||
}); |
||||
} else { |
||||
($("#style_select").val() == 1)?$(this).removeClass("help_pad").addClass("help_wood"):$(this).removeClass("help_wood").addClass("help_pad"); |
||||
$("#data").hide(); |
||||
$("#help").slideDown("100", function(){ |
||||
tmp.addClass("open"); |
||||
}); |
||||
} |
||||
}); |
||||
|
||||
$("#wgt_reload").click(function(){ |
||||
if($("#wgt_display").hasClass("selected")){ |
||||
$("#wgt_edit").trigger("click"); |
||||
$("#wgt_display").trigger("click"); |
||||
} else { |
||||
$("#wgt_display").trigger("click"); |
||||
} |
||||
}); |
||||
|
||||
$("#wgt_reload, #wgt_display, #wgt_edit").mouseover(function(){ |
||||
exportData(); |
||||
}); |
||||
|
||||
$("#style_select").change(function (event){ |
||||
changeStyle($(this).find("option:selected").val()); |
||||
}) |
||||
|
||||
$("#wgt_display, #wgt_edit").click(function(event){ |
||||
if(this.id == "wgt_display"){ |
||||
if(!$(this).hasClass("selected")){ |
||||
$(this).addClass("selected"); |
||||
$("#wgt_edit").removeClass("selected"); |
||||
$("#parameters").css("display","none"); |
||||
// $(".add_block").remove();
|
||||
$(".cont").each(function(){ |
||||
var container = $(this); |
||||
var tmp_i = 0; |
||||
var tmp_right = ""; |
||||
var tmp_array = []; |
||||
|
||||
// container.find(".close_cont").remove();
|
||||
container.find(".imgs_cont").each(function(){
|
||||
$(this).find(".del_category").remove(); |
||||
$(this).find(".add_img").remove(); |
||||
$(this).find(".add_category").remove();
|
||||
$(this).removeAttr("ondragenter") |
||||
.removeAttr("ondragleave") |
||||
.removeAttr("ondragover") |
||||
.removeAttr("ondrop")
|
||||
.find(".cat_desc").attr("disabled","disabled"); |
||||
var tmp_count = $(this).find(".img_block").size(); |
||||
$(this).find("input[name='count']").val(tmp_count); |
||||
$(this).find(".img_block").each(function(){ |
||||
$(this).find(".close_img").remove(); |
||||
var tmp_text = $(this).find(".text_cont"); |
||||
tmp_text.removeAttr("contenteditable") |
||||
.css("margin", ($(this).height() - tmp_text.height())/2 + "px 0px"); |
||||
tmp_array.push($(this)); |
||||
$(this).remove(); |
||||
}); |
||||
$(this).droppable({ |
||||
hoverClass: 'dropHere', |
||||
drop: function(event, ui) { |
||||
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){ |
||||
var tmp_ui = $(ui.draggable).parent(); |
||||
$(this).append($(ui.draggable)); |
||||
checkCorrectness(tmp_ui); |
||||
} |
||||
} |
||||
}); |
||||
$(this).removeAttr("style"); |
||||
}); |
||||
|
||||
var all_imgs = $("<div class='all_imgs'>").appendTo(container); |
||||
|
||||
tmp_array = shuffle(tmp_array); |
||||
for(var i = 0; i<tmp_array.length;i++){ |
||||
tmp_array[i].draggable({ |
||||
helper:'clone', |
||||
zIndex:100, |
||||
appendTo: '#data' |
||||
}); |
||||
tmp_array[i].appendTo(all_imgs); |
||||
} |
||||
|
||||
all_imgs.droppable({ |
||||
hoverClass: 'dropBack', |
||||
drop: function(event, ui) { |
||||
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){ |
||||
if(this != $(ui.draggable).parent()[0]){ |
||||
var tmp_ui = $(ui.draggable).parent();
|
||||
$(this).append($(ui.draggable)); |
||||
checkCorrectness(tmp_ui); |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
}); |
||||
$(this).css("display", "none"); |
||||
$("#wgt_edit").css("display", "block"); |
||||
} |
||||
} else {
|
||||
if(!$(this).hasClass("selected")){ |
||||
$(this).addClass("selected"); |
||||
$("#wgt_display").removeClass("selected"); |
||||
$("#parameters").css("display","block"); |
||||
$(".cont").each(function(){ |
||||
var container = $(this); |
||||
|
||||
// $("<div class='close_cont'>").appendTo(container);
|
||||
container.find(".imgs_cont").each(function(){ |
||||
$("<button class='del_category'></button>").appendTo($(this)); |
||||
$("<button class='add_category'></button>").appendTo($(this)); |
||||
$(this).removeClass("red_cont") |
||||
.removeClass("green_cont") |
||||
.addClass("def_cont") |
||||
.droppable("destroy") |
||||
.find(".cat_desc").removeAttr("disabled"); |
||||
var tmp_img_cont = $(this); |
||||
var tmp_mask = $(this).find("input[name='mask']").val(); |
||||
container.find(".img_block").each(function(){ |
||||
$(this).draggable("destroy") |
||||
.find(".text_cont").attr("contenteditable","true") |
||||
.removeAttr("style"); |
||||
if($(this).find("input").val() == tmp_mask){ |
||||
$("<div class='close_img'>").appendTo($(this)); |
||||
$(this).appendTo(tmp_img_cont); |
||||
} |
||||
}); |
||||
$("<div class='add_img'>").appendTo($(this)); |
||||
}); |
||||
container.find(".all_imgs").remove(); |
||||
}); |
||||
|
||||
|
||||
// $("<div class='add_block'>" + sankoreLang.add + "</div>").appendTo("#data");
|
||||
$(this).css("display", "none"); |
||||
$("#wgt_display").css("display", "block"); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
// //add new block
|
||||
// $(".add_block").live("click", function(){
|
||||
// addContainer();
|
||||
// });
|
||||
|
||||
//adding new img
|
||||
$(".add_img").live("click", function(){ |
||||
addText($(this).parent(), $(this)); |
||||
}); |
||||
|
||||
// //deleting a block
|
||||
// $(".close_cont").live("click",function(){
|
||||
// $(this).parent().remove();
|
||||
// refreshBlockNumbers();
|
||||
// });
|
||||
|
||||
//deleting the img block
|
||||
$(".close_img").live("click", function(){
|
||||
$(this).parent().remove();
|
||||
}); |
||||
|
||||
//adding new category
|
||||
$(".add_category").live("click",function(){ |
||||
addCategory($(this).parent()); |
||||
}); |
||||
|
||||
//deleting the category
|
||||
$(".del_category").live("click",function(){ |
||||
if($(this).parent().parent().find(".imgs_cont").size() == 1){ |
||||
$(this).parent().find(".img_block").remove(); |
||||
$(this).parent().find(".cat_desc").val(sankoreLang.enter); |
||||
} else { |
||||
$(this).parent().remove(); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
//export
|
||||
function exportData(){ |
||||
var array_to_export = []; |
||||
if($("#wgt_edit").hasClass("selected")){ |
||||
$(".cont").each(function(){ |
||||
var cont_obj = new Object(); |
||||
cont_obj.mode = "edit"; |
||||
cont_obj.conts = []; |
||||
$(this).find(".imgs_cont").each(function(){ |
||||
var img_cont = new Object(); |
||||
cont_obj.style = $("#style_select").find("option:selected").val(); |
||||
img_cont.mask = $(this).find("input[name='mask']").val(); |
||||
img_cont.count = $(this).find(".img_block").size(); |
||||
img_cont.text = $(this).find(".cat_desc").val(); |
||||
img_cont.imgs = []; |
||||
$(this).find(".img_block").each(function(){ |
||||
var img_obj = new Object(); |
||||
img_obj.value = $(this).find("input").val(); |
||||
img_obj.text = $(this).find(".text_cont").text(); |
||||
img_cont.imgs.push(img_obj); |
||||
}); |
||||
cont_obj.conts.push(img_cont); |
||||
}); |
||||
array_to_export.push(cont_obj); |
||||
}); |
||||
} else { |
||||
$(".cont").each(function(){ |
||||
var cont_obj = new Object(); |
||||
cont_obj.mode = "display"; |
||||
cont_obj.conts = []; |
||||
$(this).find(".imgs_cont").each(function(){ |
||||
var img_cont = new Object(); |
||||
cont_obj.style = $("#style_select").find("option:selected").val(); |
||||
img_cont.mask = $(this).find("input[name='mask']").val(); |
||||
img_cont.count = $(this).find("input[name='count']").val(); |
||||
img_cont.text = $(this).find(".cat_desc").val(); |
||||
img_cont.imgs = []; |
||||
$(this).find(".img_block").each(function(){ |
||||
var img_obj = new Object(); |
||||
img_obj.value = $(this).find("input").val(); |
||||
img_obj.text = $(this).find(".text_cont").text(); |
||||
img_cont.imgs.push(img_obj); |
||||
}); |
||||
cont_obj.conts.push(img_cont); |
||||
}); |
||||
cont_obj.all_imgs = []; |
||||
$(this).find(".all_imgs .img_block").each(function(){ |
||||
var img = new Object(); |
||||
img.value = $(this).find("input").val(); |
||||
img.text = $(this).find(".text_cont").text(); |
||||
cont_obj.all_imgs.push(img); |
||||
}); |
||||
array_to_export.push(cont_obj); |
||||
}); |
||||
} |
||||
|
||||
if($(".cont").size() == 0){ |
||||
var cont_obj = new Object(); |
||||
cont_obj.style = $("#style_select").find("option:selected").val(); |
||||
cont_obj.tmp = "clear"; |
||||
array_to_export.push(cont_obj); |
||||
} |
||||
if(window.sankore) |
||||
sankore.setPreference("categoriser_text", JSON.stringify(array_to_export)); |
||||
} |
||||
|
||||
//import
|
||||
function importData(data){ |
||||
|
||||
for(var i in data){ |
||||
if(data[i].tmp){ |
||||
changeStyle(data[i].style); |
||||
$("#style_select").val(data[i].style); |
||||
} |
||||
else { |
||||
if(i == 0){ |
||||
changeStyle(data[i].style); |
||||
$("#style_select").val(data[i].style); |
||||
} |
||||
if(data[i].mode == "edit"){
|
||||
var tmp_array = []; |
||||
var container = $("<div class='cont'>").appendTo("#data"); |
||||
var sub_container = $("<div class='sub_cont'>").appendTo(container);
|
||||
// $("<div class='number_cont'>"+ (++tmp) +"</div>").appendTo(sub_container);
|
||||
|
||||
for(var j in data[i].conts){ |
||||
var imgs_container = $("<div class='imgs_cont def_cont'>").appendTo(container); |
||||
|
||||
$("<input type='hidden' name='mask' value='" + data[i].conts[j].mask + "'/>").appendTo(imgs_container); |
||||
$("<input type='hidden' name='count' value='" + data[i].conts[j].count + "'/>").appendTo(imgs_container); |
||||
var tmp_div = $("<div style='width: 100%; overflow: hidden;'>").appendTo(imgs_container); |
||||
$("<input type='text' class='cat_desc' value='" + data[i].conts[j].text + "' disabled/>").appendTo(tmp_div); |
||||
for(var k in data[i].conts[j].imgs){ |
||||
var block_img = $("<div class='img_block' style='text-align: center;'></div>"); |
||||
$("<input type='hidden' value='" + data[i].conts[j].imgs[k].value + "'/>").appendTo(block_img);
|
||||
$("<div class='text_cont'>" + data[i].conts[j].imgs[k].text + "</div>").appendTo(block_img); |
||||
tmp_array.push(block_img); |
||||
} |
||||
|
||||
imgs_container.droppable({ |
||||
hoverClass: 'dropHere', |
||||
drop: function(event, ui) { |
||||
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){ |
||||
var tmp_ui = $(ui.draggable).parent(); |
||||
$(this).append($(ui.draggable)); |
||||
checkCorrectness(tmp_ui); |
||||
} |
||||
} |
||||
});
|
||||
} |
||||
|
||||
var all_imgs = $("<div class='all_imgs'>").appendTo(container);
|
||||
|
||||
tmp_array = shuffle(tmp_array); |
||||
for(j in tmp_array){ |
||||
tmp_array[j].draggable({ |
||||
helper:'clone', |
||||
zIndex:100, |
||||
appendTo: '#data' |
||||
}); |
||||
tmp_array[j].appendTo(all_imgs); |
||||
var tmp_text = tmp_array[j].find(".text_cont"); |
||||
tmp_text.css("margin", (tmp_array[j].height() - tmp_text.height())/2 + "px 0px"); |
||||
} |
||||
|
||||
all_imgs.sortable(); |
||||
|
||||
all_imgs.droppable({ |
||||
hoverClass: 'dropBack', |
||||
drop: function(event, ui) { |
||||
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){ |
||||
if(this != $(ui.draggable).parent()[0]){ |
||||
var tmp_ui = $(ui.draggable).parent();
|
||||
$(this).append($(ui.draggable)); |
||||
checkCorrectness(tmp_ui); |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
} else { |
||||
container = $("<div class='cont'>").appendTo("#data"); |
||||
sub_container = $("<div class='sub_cont'>").appendTo(container);
|
||||
// $("<div class='number_cont'>" + (++tmp) + "</div>").appendTo(sub_container);
|
||||
|
||||
for(j in data[i].conts){ |
||||
var tmp_img_array = []; |
||||
imgs_container = $("<div class='imgs_cont def_cont'>").appendTo(container);
|
||||
$("<input type='hidden' name='mask' value='" + data[i].conts[j].mask + "'/>").appendTo(imgs_container); |
||||
$("<input type='hidden' name='count' value='" + data[i].conts[j].count + "'/>").appendTo(imgs_container); |
||||
tmp_div = $("<div style='width: 100%; overflow: hidden;'>").appendTo(imgs_container); |
||||
$("<input type='text' class='cat_desc' value='" + data[i].conts[j].text + "' disabled/>").appendTo(tmp_div); |
||||
for(k in data[i].conts[j].imgs){ |
||||
block_img = $("<div class='img_block' style='text-align: center;'></div>"); |
||||
$("<input type='hidden' value='" + data[i].conts[j].imgs[k].value + "'/>").appendTo(block_img);
|
||||
$("<div class='text_cont'>" + data[i].conts[j].imgs[k].text + "</div>").appendTo(block_img); |
||||
tmp_img_array.push(block_img); |
||||
} |
||||
|
||||
tmp_img_array = shuffle(tmp_img_array); |
||||
for(k in tmp_img_array){ |
||||
tmp_img_array[k].draggable({ |
||||
helper:'clone', |
||||
zIndex:100, |
||||
appendTo: '#data' |
||||
}); |
||||
tmp_img_array[k].appendTo(imgs_container); |
||||
tmp_text = tmp_img_array[k].find(".text_cont"); |
||||
tmp_text.css("margin", (tmp_img_array[k].height() - tmp_text.height())/2 + "px 0px"); |
||||
} |
||||
|
||||
imgs_container.droppable({ |
||||
hoverClass: 'dropHere', |
||||
drop: function(event, ui) { |
||||
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){ |
||||
var tmp_ui = $(ui.draggable).parent(); |
||||
$(this).append($(ui.draggable)); |
||||
checkCorrectness(tmp_ui); |
||||
} |
||||
} |
||||
});
|
||||
} |
||||
|
||||
all_imgs = $("<div class='all_imgs'>").appendTo(container);
|
||||
var all_imgs_arr = []; |
||||
for(j in data[i].all_imgs){
|
||||
block_img = $("<div class='img_block' style='text-align: center;'></div>"); |
||||
$("<input type='hidden' value='" + data[i].all_imgs[j].value + "'/>").appendTo(block_img);
|
||||
$("<div class='text_cont'>" + data[i].all_imgs[j].text + "</div>").appendTo(block_img); |
||||
all_imgs_arr.push(block_img); |
||||
}
|
||||
|
||||
all_imgs_arr = shuffle(all_imgs_arr); |
||||
for(k in all_imgs_arr){ |
||||
all_imgs_arr[k].draggable({ |
||||
helper:'clone', |
||||
zIndex:100, |
||||
appendTo: '#data' |
||||
}); |
||||
all_imgs_arr[k].appendTo(all_imgs); |
||||
tmp_text = all_imgs_arr[k].find(".text_cont"); |
||||
tmp_text.css("margin", (all_imgs_arr[k].height() - tmp_text.height())/2 + "px 0px"); |
||||
} |
||||
|
||||
all_imgs.sortable(); |
||||
|
||||
all_imgs.droppable({ |
||||
hoverClass: 'dropBack', |
||||
drop: function(event, ui) { |
||||
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){ |
||||
if(this != $(ui.draggable).parent()[0]){ |
||||
var tmp_ui = $(ui.draggable).parent();
|
||||
$(this).append($(ui.draggable)); |
||||
checkCorrectness(tmp_ui); |
||||
} |
||||
} |
||||
} |
||||
});
|
||||
checkCorrectness(all_imgs); |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
//example
|
||||
function showExample(){ |
||||
|
||||
changeStyle("3"); |
||||
var tmp_array = []; |
||||
|
||||
var container = $("<div class='cont'>").appendTo("#data"); |
||||
var sub_container = $("<div class='sub_cont'>").appendTo(container); |
||||
var imgs_container_one = $("<div class='imgs_cont def_cont'>").appendTo(container); |
||||
var imgs_container_two = $("<div class='imgs_cont def_cont'>").appendTo(container); |
||||
var all_imgs = $("<div class='all_imgs'>").appendTo(container); |
||||
|
||||
// var number = $("<div class='number_cont'>1</div>").appendTo(sub_container);
|
||||
|
||||
$("<input type='hidden' name='mask' value='1'/>").appendTo(imgs_container_one); |
||||
$("<input type='hidden' name='count' value='2'/>").appendTo(imgs_container_one); |
||||
var tmp_div_one = $("<div style='width: 100%; overflow: hidden;'>").appendTo(imgs_container_one); |
||||
$("<input type='text' class='cat_desc' value='" + sankoreLang.first_desc + "' disabled/>").appendTo(tmp_div_one); |
||||
|
||||
$("<input type='hidden' name='mask' value='2'/>").appendTo(imgs_container_two); |
||||
$("<input type='hidden' name='count' value='3'/>").appendTo(imgs_container_two); |
||||
var tmp_div_two = $("<div style='width: 100%; overflow: hidden;'>").appendTo(imgs_container_two); |
||||
$("<input type='text' class='cat_desc' value='" + sankoreLang.second_desc + "' disabled/>").appendTo(tmp_div_two); |
||||
|
||||
var text1 = $("<div class='img_block' style='text-align: center;'></div>"); |
||||
$("<input type='hidden' value='2'/>").appendTo(text1); |
||||
$("<div class='text_cont'>" + sankoreLang.potatoes + "</div>").appendTo(text1); |
||||
var text2 = $("<div class='img_block' style='text-align: center;'></div>"); |
||||
$("<input type='hidden' value='1'/>").appendTo(text2); |
||||
$("<div class='text_cont'>" + sankoreLang.apple + "</div>").appendTo(text2); |
||||
var text3 = $("<div class='img_block' style='text-align: center;'></div>"); |
||||
$("<input type='hidden' value='2'/>").appendTo(text3); |
||||
$("<div class='text_cont'>" + sankoreLang.carrot + "</div>").appendTo(text3); |
||||
var text4 = $("<div class='img_block' style='text-align: center;'></div>"); |
||||
$("<input type='hidden' value='1'/>").appendTo(text4); |
||||
$("<div class='text_cont'>" + sankoreLang.pear + "</div>").appendTo(text4); |
||||
var text5 = $("<div class='img_block' style='text-align: center;'></div>"); |
||||
$("<input type='hidden' value='2'/>").appendTo(text5); |
||||
$("<div class='text_cont'>" + sankoreLang.onion + "</div>").appendTo(text5);
|
||||
|
||||
tmp_array.push(text1, text2, text3, text4, text5); |
||||
tmp_array = shuffle(tmp_array); |
||||
for(var i = 0; i<tmp_array.length;i++){ |
||||
tmp_array[i].draggable({ |
||||
helper:'clone', |
||||
zIndex:100, |
||||
appendTo: '#data' |
||||
}); |
||||
tmp_array[i].find(".text_cont").css("margin", "21px 0px"); |
||||
tmp_array[i].appendTo(all_imgs); |
||||
} |
||||
all_imgs.sortable(); |
||||
|
||||
imgs_container_one.droppable({ |
||||
hoverClass: 'dropHere', |
||||
drop: function(event, ui) { |
||||
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){ |
||||
var tmp_ui = $(ui.draggable).parent(); |
||||
$(this).append($(ui.draggable)); |
||||
checkCorrectness(tmp_ui); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
imgs_container_two.droppable({ |
||||
hoverClass: 'dropHere', |
||||
drop: function(event, ui) { |
||||
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){ |
||||
var tmp_ui = $(ui.draggable).parent(); |
||||
$(this).append($(ui.draggable)); |
||||
checkCorrectness(tmp_ui); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
all_imgs.droppable({ |
||||
hoverClass: 'dropBack', |
||||
drop: function(event, ui) { |
||||
if($(ui.draggable).parent().parent().html() == $(this).parent().html()){ |
||||
if(this != $(ui.draggable).parent()[0]){ |
||||
var tmp_ui = $(ui.draggable).parent();
|
||||
$(this).append($(ui.draggable)); |
||||
checkCorrectness(tmp_ui); |
||||
} |
||||
} |
||||
} |
||||
}); |
||||
} |
||||
|
||||
//add text block
|
||||
function addText(dest, source){ |
||||
|
||||
var text_block = $("<div class='img_block' style='text-align: center;'>").insertBefore(source); |
||||
$("<div class='close_img'>").appendTo(text_block);
|
||||
$("<input type='hidden' value='" + dest.find("input[name='mask']").val() + "'/>").appendTo(text_block); |
||||
$("<div class='text_cont' contenteditable='true'>" + sankoreLang.text + "</div>").appendTo(text_block);
|
||||
} |
||||
|
||||
//function that allows to add new category
|
||||
function addCategory(obj){ |
||||
var imgs_container = $("<div class='imgs_cont def_cont'>").insertAfter(obj);
|
||||
$("<input type='hidden' name='mask' value='" + returnId() + "'/>").appendTo(imgs_container);
|
||||
$("<input type='hidden' name='count' value=''/>").appendTo(imgs_container);
|
||||
var tmp_div = $("<div style='width: 100%; overflow: hidden;'>").appendTo(imgs_container); |
||||
$("<input type='text' class='cat_desc' value='" + sankoreLang.enter + "'>").appendTo(tmp_div);
|
||||
$("<button class='del_category'></button>").appendTo(imgs_container); |
||||
$("<button class='add_category'></button>").appendTo(imgs_container); |
||||
$("<div class='add_img'>").appendTo(imgs_container); |
||||
} |
||||
|
||||
//add new container
|
||||
//function addContainer(){
|
||||
// var container = $("<div class='cont'>");
|
||||
// var sub_container = $("<div class='sub_cont'>").appendTo(container);
|
||||
// var imgs_container = $("<div class='imgs_cont def_cont'>").appendTo(container);
|
||||
//
|
||||
// var close = $("<div class='close_cont'>").appendTo(container);
|
||||
// var number = $("<div class='number_cont'>"+ ($(".cont").size() + 1) +"</div>").appendTo(sub_container);
|
||||
//
|
||||
// $("<input type='hidden' name='mask' value='" + returnId() + "'/>").appendTo(imgs_container);
|
||||
// $("<input type='hidden' name='count' value=''/>").appendTo(imgs_container);
|
||||
// var tmp_div = $("<div style='width: 100%; overflow: hidden;'>").appendTo(imgs_container);
|
||||
// $("<input type='text' class='cat_desc' value='" + sankoreLang.enter + "'/>").appendTo(tmp_div);
|
||||
// $("<button class='del_category'></button>").appendTo(imgs_container);
|
||||
// $("<button class='add_category'></button>").appendTo(imgs_container);
|
||||
// $("<div class='add_img'>").appendTo(imgs_container);
|
||||
// container.insertBefore($(".add_block"));
|
||||
//}
|
||||
|
||||
//function refreshBlockNumbers(){
|
||||
// var i = 0;
|
||||
// $(".cont").each(function(){
|
||||
// $(this).find(".number_cont").text(++i);
|
||||
// })
|
||||
//}
|
||||
|
||||
//shuffles an array
|
||||
function shuffle( arr ) |
||||
{ |
||||
var pos, tmp; |
||||
|
||||
for( var i = 0; i < arr.length; i++ ) |
||||
{ |
||||
pos = Math.round( Math.random() * ( arr.length - 1 ) ); |
||||
tmp = arr[pos]; |
||||
arr[pos] = arr[i]; |
||||
arr[i] = tmp; |
||||
} |
||||
return arr; |
||||
} |
||||
|
||||
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; |
||||
} |
||||
|
||||
//return id
|
||||
function returnId(){ |
||||
var tmp = Math.random().toString(); |
||||
return tmp.substr(2); |
||||
} |
||||
|
||||
//changing the style
|
||||
function changeStyle(val){ |
||||
switch(val){ |
||||
case "1": |
||||
$(".b_top_left").removeClass("btl_pad").removeClass("without_back"); |
||||
$(".b_top_center").removeClass("btc_pad").removeClass("without_back"); |
||||
$(".b_top_right").removeClass("btr_pad").removeClass("without_back"); |
||||
$(".b_center_left").removeClass("bcl_pad").removeClass("without_back"); |
||||
$(".b_center_right").removeClass("bcr_pad").removeClass("without_back"); |
||||
$(".b_bottom_right").removeClass("bbr_pad").removeClass("without_back"); |
||||
$(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back"); |
||||
$(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back"); |
||||
$("#wgt_reload").removeClass("pad_color").removeClass("pad_reload"); |
||||
$("#wgt_help").removeClass("pad_color").removeClass("pad_help"); |
||||
$("#wgt_edit").removeClass("pad_color").removeClass("pad_edit"); |
||||
$("#wgt_name").removeClass("pad_color"); |
||||
$("#wgt_display").addClass("display_wood"); |
||||
$("#style_select").val(val); |
||||
$("body, html").removeClass("without_radius").addClass("radius_ft"); |
||||
break; |
||||
case "2": |
||||
$(".b_top_left").addClass("btl_pad").removeClass("without_back"); |
||||
$(".b_top_center").addClass("btc_pad").removeClass("without_back"); |
||||
$(".b_top_right").addClass("btr_pad").removeClass("without_back"); |
||||
$(".b_center_left").addClass("bcl_pad").removeClass("without_back"); |
||||
$(".b_center_right").addClass("bcr_pad").removeClass("without_back"); |
||||
$(".b_bottom_right").addClass("bbr_pad").removeClass("without_back"); |
||||
$(".b_bottom_left").addClass("bbl_pad").removeClass("without_back"); |
||||
$(".b_bottom_center").addClass("bbc_pad").removeClass("without_back"); |
||||
$("#wgt_reload").addClass("pad_color").addClass("pad_reload"); |
||||
$("#wgt_help").addClass("pad_color").addClass("pad_help"); |
||||
$("#wgt_edit").addClass("pad_color").addClass("pad_edit"); |
||||
$("#wgt_name").addClass("pad_color"); |
||||
$("#wgt_display").removeClass("display_wood"); |
||||
$("#style_select").val(val); |
||||
$("body, html").removeClass("without_radius").removeClass("radius_ft"); |
||||
break; |
||||
case "3": |
||||
$(".b_top_left").addClass("without_back").removeClass("btl_pad"); |
||||
$(".b_top_center").addClass("without_back").removeClass("btc_pad"); |
||||
$(".b_top_right").addClass("without_back").removeClass("btr_pad"); |
||||
$(".b_center_left").addClass("without_back").removeClass("bcl_pad"); |
||||
$(".b_center_right").addClass("without_back").removeClass("bcr_pad"); |
||||
$(".b_bottom_right").addClass("without_back").removeClass("bbr_pad"); |
||||
$(".b_bottom_left").addClass("without_back").removeClass("bbl_pad"); |
||||
$(".b_bottom_center").addClass("without_back").removeClass("bbc_pad"); |
||||
$("#wgt_help").addClass("pad_color").addClass("pad_help"); |
||||
$("#wgt_reload").addClass("pad_color").addClass("pad_reload"); |
||||
$("#wgt_edit").addClass("pad_color").addClass("pad_edit"); |
||||
$("#wgt_name").addClass("pad_color"); |
||||
$("#wgt_display").removeClass("display_wood"); |
||||
$("#style_select").val(val); |
||||
$("body, html").addClass("without_radius").removeClass("radius_ft"); |
||||
break; |
||||
} |
||||
} |
||||
|
||||
//a func for checking when smth will drop
|
||||
function checkOnDrop(dest){ |
||||
var tmp_count = dest.find("input[name='count']").val(); |
||||
var tmp_mask = dest.find("input[name='mask']").val(); |
||||
if(dest.find(".img_block").size() == tmp_count){ |
||||
var tmp_right = true;
|
||||
dest.find(".img_block").each(function(){ |
||||
if($(this).find("input").val() != tmp_mask) |
||||
tmp_right = false; |
||||
});
|
||||
if(tmp_right) |
||||
dest.removeClass("def_cont").removeClass("red_cont").addClass("green_cont"); |
||||
else |
||||
dest.removeClass("def_cont").removeClass("green_cont").addClass("red_cont"); |
||||
} else
|
||||
dest.removeClass("def_cont").removeClass("green_cont").addClass("red_cont"); |
||||
} |
||||
|
||||
//checking source on correctness
|
||||
function checkCorrectness(source){ |
||||
if(!source.hasClass("all_imgs")){ |
||||
if(source.parent().find(".all_imgs").find(".img_block").size() == 0){ |
||||
source.parent().find(".imgs_cont").each(function(){ |
||||
checkOnDrop($(this)) |
||||
}) |
||||
} else { |
||||
source.parent().find(".imgs_cont").each(function(){ |
||||
$(this).addClass("def_cont").removeClass("green_cont").removeClass("red_cont"); |
||||
}) |
||||
} |
||||
} else { |
||||
if(source.find(".img_block").size() > 0){ |
||||
source.parent().find(".imgs_cont").each(function(){ |
||||
$(this).addClass("def_cont").removeClass("green_cont").removeClass("red_cont"); |
||||
}) |
||||
} else { |
||||
source.parent().find(".imgs_cont").each(function(){ |
||||
checkOnDrop($(this)) |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
@ -1,90 +1,32 @@ |
||||
<!-- |
||||
To change this template, choose Tools | Templates |
||||
and open the template in the editor. |
||||
--> |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<title></title> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
||||
<link rel="stylesheet" type="text/css" href="css/basic.css"/> |
||||
<script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script> |
||||
<script type="text/javascript" src="scripts/selQuestionApp.js"></script> |
||||
<script type="text/javascript"> |
||||
if (parent && parent.loaded) |
||||
parent.loaded(); |
||||
|
||||
$(document).ready(function(){ |
||||
var lang = ""; //locale language |
||||
if(window.sankore){ |
||||
lang = sankore.locale().substr(0,2); |
||||
} else |
||||
lang = "en"; |
||||
if(lang == "en"){ |
||||
//sankore.enableDropOnWidget(false); |
||||
init(); |
||||
} |
||||
else{ |
||||
returnStatus(lang); |
||||
} |
||||
|
||||
function returnStatus(lang){ |
||||
$.ajax({ |
||||
type: 'POST', |
||||
url:'locales/' + lang + '/index.html', |
||||
statusCode: { |
||||
404: function() { |
||||
init(); |
||||
}, |
||||
200: function(){ |
||||
window.location.href = 'locales/' + lang + '/index.html'; |
||||
} |
||||
var lang = (window.sankore)?sankore.locale().substr(0,2):"en"; //local language |
||||
|
||||
$.ajax({ |
||||
type: 'POST', |
||||
url:'locales/' + lang + '/index.html', |
||||
statusCode: { |
||||
404: function() { |
||||
window.location.href = 'locales/en/index.html'; |
||||
}, |
||||
200: function(){ |
||||
window.location.href = 'locales/' + lang + '/index.html'; |
||||
} |
||||
}); |
||||
} |
||||
}); |
||||
} |
||||
}); |
||||
}); |
||||
</script> |
||||
</head> |
||||
<body> |
||||
<table class="body_table" cellpadding=0 cellspacing=0> |
||||
<tr style="height: 54px;"> |
||||
<td class="b_top_left"> </td> |
||||
<td class="b_top_center"> |
||||
<div id="wgt_name"></div> |
||||
<div id="wgt_help"></div> |
||||
<div id="wgt_reload"></div> |
||||
<div id="wgt_display" class="selected"></div> |
||||
<div id="wgt_edit"></div> |
||||
</td> |
||||
<td class="b_top_right"> </td> |
||||
</tr> |
||||
|
||||
<tr> |
||||
<td class="b_center_left"> </td> |
||||
<td> |
||||
<div id="help"></div> |
||||
<div id="data"> |
||||
<div id="parameters"> |
||||
<div class="inline"> |
||||
<label> |
||||
<select id="style_select"> |
||||
<option value="1"></option> |
||||
<option value="2"></option> |
||||
<option value="3"></option> |
||||
</select> |
||||
</label> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</td> |
||||
<td class="b_center_right"> </td> |
||||
</tr> |
||||
|
||||
<tr style="height: 54px;"> |
||||
<td class="b_bottom_left"> </td> |
||||
<td class="b_bottom_center"> </td> |
||||
<td class="b_bottom_right"> </td> |
||||
</tr> |
||||
</table> |
||||
</body> |
||||
</html> |
||||
|
||||
@ -0,0 +1,59 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<title></title> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
||||
<link rel="stylesheet" type="text/css" href="../../css/basic.css"/> |
||||
<script type="text/javascript" src="../../scripts/jquery-1.6.2.min.js"></script> |
||||
<script type="text/javascript" src="scripts/selQuestionApp.js"></script> |
||||
<script type="text/javascript"> |
||||
|
||||
$(document).ready(function(){ |
||||
init(); |
||||
}); |
||||
|
||||
</script> |
||||
</head> |
||||
<body> |
||||
<table class="body_table" cellpadding=0 cellspacing=0> |
||||
<tr style="height: 54px;"> |
||||
<td class="b_top_left"> </td> |
||||
<td class="b_top_center"> |
||||
<div id="wgt_name"></div> |
||||
<div id="wgt_help"></div> |
||||
<div id="wgt_reload"></div> |
||||
<div id="wgt_display" class="selected"></div> |
||||
<div id="wgt_edit"></div> |
||||
</td> |
||||
<td class="b_top_right"> </td> |
||||
</tr> |
||||
|
||||
<tr> |
||||
<td class="b_center_left"> </td> |
||||
<td> |
||||
<div id="help"></div> |
||||
<div id="data"> |
||||
<div id="parameters"> |
||||
<div class="inline"> |
||||
<label> |
||||
<select id="style_select"> |
||||
<option value="1"></option> |
||||
<option value="2"></option> |
||||
<option value="3"></option> |
||||
</select> |
||||
</label> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</td> |
||||
<td class="b_center_right"> </td> |
||||
</tr> |
||||
|
||||
<tr style="height: 54px;"> |
||||
<td class="b_bottom_left"> </td> |
||||
<td class="b_bottom_center"> </td> |
||||
<td class="b_bottom_right"> </td> |
||||
</tr> |
||||
</table> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,792 @@ |
||||
/* |
||||
* This program is free software: you can redistribute it and/or modify |
||||
* it under the terms of the GNU General Public License as published by |
||||
* the Free Software Foundation, either version 3 of the License, or |
||||
* (at your option) any later version. |
||||
* |
||||
* This program is distributed in the hope that it will be useful, |
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
* GNU General Public License for more details. |
||||
* |
||||
* You should have received a copy of the GNU General Public License |
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/ |
||||
|
||||
var sankoreLang = { |
||||
edit: "Edit", |
||||
display:"Display", |
||||
question:"Question", |
||||
example_question:"This is an example of the question", |
||||
answer:"This is one possible answer", |
||||
q:"Q", |
||||
add_new_question:" Add a new question ...", |
||||
options:"Options", |
||||
close:"Close", |
||||
delete_question:"Delete question", |
||||
delete_answer:"Delete the possibility", |
||||
right_answer:"Right answer", |
||||
template_question:"Enter your question here ...", |
||||
template_answer:"Enter one possible answer here ...", |
||||
add_answer:"Add one possible answer", |
||||
select_text:"Choose the right answer", |
||||
options_desc:"You can choose one of the three options of displaying possibilities.", |
||||
radio_desc:"One right answer only and the possibilities are displayed as radio buttons.", |
||||
checkbox_desc:"Several right answers and possibilities are displayed as checkboxes.", |
||||
select_desc:"One right answer only and possibilities are displayed as pull-down menu.", |
||||
a:"A", |
||||
wgt_name: "Choose the right answer", |
||||
reload: "Reload", |
||||
slate: "slate", |
||||
pad: "pad", |
||||
none: "none", |
||||
help: "Help", |
||||
help_content:
|
||||
"<p><h2> Choose the right answer</h2></p>" + |
||||
"<p><h3> Multiple-Choice Question (MCQ)</h3></p>" + |
||||
"<p>Multiple-choice question. The goal is to choose the correct answer.</p>" + |
||||
"<p>“Reload” button resets the exercises.</p>" + |
||||
|
||||
"<p> Enter the “Edit” mode to :</p>" + |
||||
"<ul><li> choose the theme of interactivity : pad, slate or none (none by default),</li>" + |
||||
"<li> modify the exercise.</li></ul>" + |
||||
|
||||
"<p>In edition mode :</p>" + |
||||
"<ul> <li> click on “Add a new question”,</li>" + |
||||
"<li>edit the text field clicking on the text field “Enter your question here ... ”,</li>" + |
||||
"<li>click on “Options” to select the type of our MCQ (one correct answer, multiple correct answers, drop down) and close it,</li>" + |
||||
"<li>add a new possible answer if needed,</li>" + |
||||
"<li>modify the text field clicking on it,</li>" + |
||||
"<li>set the correct answer by clicking in the checkbox to the left of the text field,</li>" + |
||||
"<li>remove a label clicking on the cross button on the frame,</li>" + |
||||
"<li>delete a possible answer clicking on the cross on the left,</li>" + |
||||
"<li>“Display” button comes back to the activity.</li></ul>", |
||||
theme: "Theme" |
||||
}; |
||||
|
||||
var questionArray; |
||||
var currentQstId = ""; |
||||
var lang = ""; //locale language
|
||||
var begin = true; |
||||
|
||||
function init(){ |
||||
|
||||
//variables
|
||||
var toggleFlag = false; |
||||
var endFlag = false; |
||||
var mode = true; |
||||
questionArray = new Array();
|
||||
var popupFlag = false |
||||
var flagForSelect = false;
|
||||
|
||||
$("#wgt_display").text(sankoreLang.display); |
||||
$("#wgt_edit").text(sankoreLang.edit); |
||||
$("#wgt_name").text(sankoreLang.wgt_name); |
||||
$("#wgt_reload").text(sankoreLang.reload); |
||||
$("#wgt_help").text(sankoreLang.help); |
||||
$("#help").html(sankoreLang.help_content); |
||||
$("#style_select option[value='1']").text(sankoreLang.slate); |
||||
$("#style_select option[value='2']").text(sankoreLang.pad); |
||||
$("#style_select option[value='3']").text(sankoreLang.none); |
||||
var tmpl = $("div.inline label").html(); |
||||
$("div.inline label").html(sankoreLang.theme + tmpl) |
||||
|
||||
//popup message
|
||||
var popupText = $("<div id='popupWordInfo' class='popupWordInfo'></div>").appendTo("#data"); |
||||
|
||||
// adding question block
|
||||
var addQstDiv = $("<div id='addQstDiv' class='addQstDiv'>").appendTo("#data"); |
||||
var addQstButton = $("<button id='addQstButton' class='addQstButton'>").appendTo("#addQstDiv");
|
||||
var addQsqSpan1 = $("<span id='addQsqSpan1'>" + sankoreLang.q + "1</span>").appendTo("#addQstButton"); |
||||
var addQsqSpan2 = $("<span id='addQsqSpan2'>" + sankoreLang.add_new_question + "</span>").appendTo("#addQstButton"); |
||||
|
||||
//import saved data
|
||||
if(window.sankore){ |
||||
if(sankore.preference("qstArrayData","") && sankore.preference("qstArrayData","") != "[]") |
||||
questionArray = jQuery.parseJSON(sankore.preference("qstArrayData",""));
|
||||
else |
||||
questionArray = jQuery.parseJSON('[{"text":"' + sankoreLang.example_question + '","type":"1","id":538,"rightAns":"2","answers":[{"id":953,"text":"' + sankoreLang.answer + ' 1.","value":1,"state":"","was":false},{"id":526,"text":"' + sankoreLang.answer + ' 2.","value":2,"state":"","was":false},{"id":473,"text":"' + sankoreLang.answer + ' 3.","value":3,"state":"","was":false}]}]'); |
||||
|
||||
for(i in questionArray){ |
||||
addQstBlock(questionArray[i].id, questionArray[i].text, questionArray[i].type,"style='display: none;'"); |
||||
for(j in questionArray[i].answers) |
||||
addAnsBlock(questionArray[i].answers[j].id, questionArray[i].id, questionArray[i].answers[j].text, true, questionArray[i].rightAns, questionArray[i].type); |
||||
} |
||||
displayData(); |
||||
} |
||||
else{
|
||||
questionArray = jQuery.parseJSON('[{"text":"' + sankoreLang.example_question + '","type":"1","id":538,"rightAns":"2","answers":[{"id":953,"text":"' + sankoreLang.answer + ' 1.","value":1,"state":"","was":false},{"id":526,"text":"' + sankoreLang.answer + ' 2.","value":2,"state":"","was":false},{"id":473,"text":"' + sankoreLang.answer + ' 3.","value":3,"state":"","was":false}]}]'); |
||||
for(i in questionArray){ |
||||
addQstBlock(questionArray[i].id, questionArray[i].text, questionArray[i].type,"style='display: none;'"); |
||||
for(j in questionArray[i].answers) |
||||
addAnsBlock(questionArray[i].answers[j].id, questionArray[i].id, questionArray[i].answers[j].text, true, questionArray[i].rightAns, questionArray[i].type); |
||||
} |
||||
displayData(); |
||||
} |
||||
|
||||
//saving widget data into sankore object for a correct import
|
||||
if (window.widget) { |
||||
window.widget.onleave = function(){ |
||||
sankore.setPreference("qstArrayData", JSON.stringify(questionArray)); |
||||
sankore.setPreference("choisir_style", $("#style_select").find("option:selected").val()); |
||||
} |
||||
} |
||||
|
||||
if(window.sankore) |
||||
if(sankore.preference("choisir_style","")){ |
||||
changeStyle(sankore.preference("choisir_style","")); |
||||
$("#style_select").val(sankore.preference("choisir_style","")); |
||||
} else |
||||
changeStyle("3") |
||||
|
||||
$("#wgt_display, #wgt_edit").click(function(event){ |
||||
if(this.id == "wgt_display"){ |
||||
if(!$(this).hasClass("selected")){
|
||||
$(this).addClass("selected"); |
||||
$("#wgt_edit").removeClass("selected"); |
||||
$("#parameters").css("display","none");
|
||||
$(this).css("display", "none"); |
||||
$("#wgt_edit").css("display", "block"); |
||||
displayData(true); |
||||
mode = true; |
||||
if(window.sankore){ |
||||
sankore.setPreference("qstArrayData", JSON.stringify(questionArray)); |
||||
sankore.setPreference("choisir_style", $("#style_select").find("option:selected").val()); |
||||
} |
||||
} |
||||
} else {
|
||||
if(!$(this).hasClass("selected")){ |
||||
$(this).addClass("selected"); |
||||
$("#wgt_display").removeClass("selected"); |
||||
$("#parameters").css("display","block");
|
||||
$(this).css("display", "none"); |
||||
$("#wgt_display").css("display", "block"); |
||||
editData(); |
||||
mode = false; |
||||
} |
||||
} |
||||
}); |
||||
|
||||
$("#wgt_help").click(function(){ |
||||
var tmp = $(this); |
||||
if($(this).hasClass("open")){ |
||||
$(this).removeClass("help_pad").removeClass("help_wood") |
||||
$("#help").slideUp("100", function(){ |
||||
tmp.removeClass("open"); |
||||
$("#data").show(); |
||||
}); |
||||
} else { |
||||
($("#style_select").val() == 1)?$(this).removeClass("help_pad").addClass("help_wood"):$(this).removeClass("help_wood").addClass("help_pad"); |
||||
$("#data").hide(); |
||||
$("#help").slideDown("100", function(){ |
||||
tmp.addClass("open"); |
||||
}); |
||||
} |
||||
}); |
||||
|
||||
$("#wgt_reload").text(sankoreLang.reload).click(function(){ |
||||
if($("#wgt_edit").css("display") == "none") |
||||
$("#wgt_display").trigger("click"); |
||||
else{ |
||||
editData(); |
||||
mode = false; |
||||
displayData(true); |
||||
mode = true; |
||||
} |
||||
}); |
||||
|
||||
$("#style_select option[value='1']").text(sankoreLang.slate); |
||||
$("#style_select option[value='2']").text(sankoreLang.pad); |
||||
|
||||
$("#style_select").change(function (event){ |
||||
changeStyle($(this).find("option:selected").val()); |
||||
}) |
||||
|
||||
// add question
|
||||
addQstButton.click(function(){
|
||||
//question block
|
||||
var id = Math.round(Math.random()*1000);
|
||||
var obj = new Question(); |
||||
obj.id = id; |
||||
questionArray.push(obj); |
||||
|
||||
addQstBlock(id, sankoreLang.template_question, "",""); |
||||
|
||||
if(window.sankore) |
||||
sankore.setPreference("qstArrayData", JSON.stringify(questionArray)); |
||||
}); |
||||
|
||||
//set used at this moment question id into the variable
|
||||
$(".qstDiv").live('mouseover', function() { |
||||
currentQstId = this.id; |
||||
}); |
||||
|
||||
//set used at this moment question id into the variable
|
||||
$(".qstDivDisplay").live('mouseover', function() { |
||||
if(!flagForSelect) |
||||
currentQstId = this.id.replace("qstDivDisplay",""); |
||||
}); |
||||
|
||||
//adding new answer
|
||||
$(".ansAdd").live('click', function(){ |
||||
|
||||
var id = Math.round(Math.random()*1000);
|
||||
var obj = new Answer(); |
||||
obj.id = id; |
||||
getNeededElement(questionArray, currentQstId).answers.push(obj); |
||||
|
||||
addAnsBlock(id, currentQstId, sankoreLang.template_answer); |
||||
}); |
||||
|
||||
//set answer text
|
||||
$(".ansContent").live('keyup', function(event){ |
||||
var id = $(event.target).attr("id").replace("ansContent",""); |
||||
getNeededElement(getNeededElement(questionArray, currentQstId).answers,id).text = $(event.target).text(); |
||||
}); |
||||
|
||||
//set question text
|
||||
$(".qstContent").live('keyup', function(event){ |
||||
var id = $(event.target).attr("id").replace("qstContent",""); |
||||
getNeededElement(questionArray, id).text = $(event.target).text(); |
||||
}); |
||||
|
||||
//question div border
|
||||
$(".qstContent").live('mouseover', function(event){ |
||||
$(event.target).css({ |
||||
border:"3px solid #00C6FF" |
||||
}); |
||||
}); |
||||
|
||||
// deleting question div border
|
||||
$(".qstContent").live('mouseout', function(event){ |
||||
$(event.target).css({ |
||||
border:"3px solid #ccc" |
||||
}); |
||||
}); |
||||
|
||||
//answer div border
|
||||
$(".ansContent").live('mouseover', function(event){ |
||||
$(event.target).css({ |
||||
border:"3px solid #00C6FF" |
||||
}); |
||||
}); |
||||
|
||||
// deleting answer div border
|
||||
$(".ansContent").live('mouseout', function(event){ |
||||
$(event.target).css({ |
||||
border:"3px solid #ccc" |
||||
}); |
||||
}); |
||||
|
||||
//delete answer
|
||||
$(".ansDelete").live('click', function(){ |
||||
popupText.hide(); |
||||
var id = this.id.replace("ansDelete",""); |
||||
$("#" + currentQstId + " #" + id).remove(); |
||||
for(var i in questionArray) |
||||
if(questionArray[i].id == currentQstId){ |
||||
questionArray[i].rightAns = questionArray[i].rightAns.replace($("#" + currentQstId + " #" + id + " input:checkbox").val(),""); |
||||
for(var j in questionArray[i].answers) |
||||
if(questionArray[i].answers[j].id == id){ |
||||
if(j == 0) |
||||
questionArray[i].answers.shift(); |
||||
else |
||||
if((j+1) == questionArray[i].answers.length) |
||||
questionArray[i].answers.pop(); |
||||
else |
||||
questionArray[i].answers = questionArray[i].answers.slice(0,j).concat(questionArray[i].answers.slice(j+1));
|
||||
break; |
||||
} |
||||
} |
||||
refreshAns(); |
||||
}); |
||||
|
||||
//delete question
|
||||
// $(".qstDelete").live('click', function(){
|
||||
// popupText.hide();
|
||||
// $("#" + currentQstId).remove();
|
||||
// for(var i in questionArray)
|
||||
// if(questionArray[i].id == currentQstId){
|
||||
// if(i == 0)
|
||||
// questionArray.shift();
|
||||
// else
|
||||
// if((i+1) == questionArray.length)
|
||||
// questionArray.pop();
|
||||
// else
|
||||
// questionArray = questionArray.slice(0,i).concat(questionArray.slice(i+1));
|
||||
// break;
|
||||
// }
|
||||
// refreshQst();
|
||||
// });
|
||||
|
||||
//change options
|
||||
$(".changeOptions").live('click', function(){ |
||||
$("#" + currentQstId + "qstOptions .changeOptions").hide(); |
||||
$("#" + currentQstId + "qstOptions .applyChanges").show(); |
||||
$("#" + currentQstId + "qstOptChoice").show('fast'); |
||||
}); |
||||
|
||||
//apply changes
|
||||
$(".applyChanges").live('click', function(){ |
||||
$("#" + currentQstId + "qstOptions .applyChanges").hide(); |
||||
$("#" + currentQstId + "qstOptions .changeOptions").show(); |
||||
$("#" + currentQstId + "qstOptChoice").hide('fast'); |
||||
}); |
||||
|
||||
//select option
|
||||
$(".qstOptChoice input:radio").live('click', function(event){ |
||||
if(!mode){ |
||||
$("#" + currentQstId + "qstOptChoice input:radio").removeAttr("checked"); |
||||
$(event.target).attr("checked", "checked"); |
||||
getNeededElement(questionArray, currentQstId).type = $(event.target).attr("value"); |
||||
} |
||||
}); |
||||
|
||||
//select right ansver in edit mode and answer question in display mode
|
||||
$(".newAnswer input").live('click', function(event){ |
||||
|
||||
if(!mode){ |
||||
if(getNeededElement(questionArray, currentQstId).type == "1" || getNeededElement(questionArray, currentQstId).type == "3"){ |
||||
$("#" + currentQstId + "ansDiv input").removeAttr("checked"); |
||||
$(event.target).attr("checked", "checked"); |
||||
getNeededElement(questionArray, currentQstId).rightAns = $(event.target).attr("value"); |
||||
} else { |
||||
(event.target.checked) ? $(event.target).attr("checked", "checked") : $(event.target).removeAttr("checked", "checked"); |
||||
getNeededElement(questionArray, currentQstId).rightAns = ""; |
||||
for(var i in $("#" + currentQstId + "ansDiv input")){ |
||||
if($("#" + currentQstId + "ansDiv input")[i].checked) |
||||
getNeededElement(questionArray, currentQstId).rightAns += $("#" + currentQstId + "ansDiv input")[i].value + ", "; |
||||
} |
||||
} |
||||
} else { |
||||
if(event.target.type == "radio"){ |
||||
checkingAnswers("radio", getNeededElement(questionArray, currentQstId).answers, event.target.value); |
||||
if(event.target.value == getNeededElement(questionArray, currentQstId).rightAns) |
||||
$(event.target).next().next().css("background-color","#6c0"); |
||||
else |
||||
$(event.target).next().next().css("background-color","red"); |
||||
} else { |
||||
checkingAnswers("box", getNeededElement(questionArray, currentQstId).answers, event.target.value, event.target.checked); |
||||
if(getNeededElement(questionArray, currentQstId).rightAns.replace(/,/g,"").indexOf(event.target.value + " ", 0) != -1) |
||||
$(event.target).next().next().css("background-color","#6c0"); |
||||
else |
||||
$(event.target).next().next().css("background-color","red"); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
//popup messages
|
||||
// $(".qstDelete").live('mouseover', function(evt){
|
||||
// popupFlag = true;
|
||||
// popupText.text(sankoreLang.delete_question)
|
||||
// .css("top", evt.pageY + 15)
|
||||
// .css("left", evt.pageX - 40)
|
||||
// .css({
|
||||
// width:"130px"
|
||||
// })
|
||||
// .show("fast", function(){
|
||||
// if(!popupFlag)
|
||||
// popupText.hide();
|
||||
// });
|
||||
// });
|
||||
|
||||
$(".ansDelete").live('mouseover', function(evt){ |
||||
popupFlag = true; |
||||
popupText.text(sankoreLang.delete_answer) |
||||
.css("top", evt.pageY + 15) |
||||
.css("left", evt.pageX - 40) |
||||
.css({ |
||||
width:"130px" |
||||
}) |
||||
.show("fast", function(){ |
||||
if(!popupFlag) |
||||
popupText.hide(); |
||||
}); |
||||
}); |
||||
|
||||
$(".newAnswer input").live('mouseover', function(evt){ |
||||
if(!mode){ |
||||
popupFlag = true; |
||||
popupText.text(sankoreLang.right_answer) |
||||
.css("top", evt.pageY + 15) |
||||
.css("left", evt.pageX - 40) |
||||
.css({ |
||||
width:"130px" |
||||
}) |
||||
.show("fast", function(){ |
||||
if(!popupFlag) |
||||
popupText.hide(); |
||||
}); |
||||
} |
||||
}); |
||||
|
||||
$(".ansDelete, .newAnswer input").live('mousemove', function(evt){ |
||||
if(!mode){ |
||||
popupText.css("top", evt.pageY + 15) |
||||
.css("left", evt.pageX - 40); |
||||
} |
||||
}); |
||||
|
||||
$(".ansDelete, .newAnswer input").live('mouseout', function(evt){ |
||||
if(!mode){ |
||||
popupFlag = false; |
||||
popupText.hide(); |
||||
} |
||||
}); |
||||
|
||||
//answer the questions
|
||||
|
||||
$("select").live('change', function(evt){ |
||||
if(mode){ |
||||
checkingAnswers("sel", getNeededElement(questionArray, currentQstId).answers, event.target.value); |
||||
if(event.target.value == getNeededElement(questionArray, currentQstId).rightAns) |
||||
$(event.target).css("background-color","#6c0"); |
||||
else |
||||
$(event.target).css("background-color","red"); |
||||
if(event.target.value == 0) |
||||
$(event.target).css("background-color",""); |
||||
flagForSelect = false; |
||||
} |
||||
}); |
||||
|
||||
$("select").live('mousedown', function(evt){ |
||||
if(mode){ |
||||
flagForSelect = true; |
||||
} |
||||
}); |
||||
|
||||
//toggle button click trigger
|
||||
//toggleButton.trigger("click");
|
||||
//show data in display mode
|
||||
function displayData(){ |
||||
// $("#addQstDiv").hide();
|
||||
$(".qstDiv").hide(); |
||||
addToPage(questionArray); |
||||
} |
||||
|
||||
//set widget in edit mode
|
||||
function editData(){ |
||||
for(var i in questionArray)
|
||||
for(var j in questionArray[i].answers){ |
||||
questionArray[i].answers[j].state = ""; |
||||
questionArray[i].answers[j].was = false |
||||
}
|
||||
|
||||
$(".qstDivDisplay").remove(); |
||||
|
||||
// $("#addQstDiv").show('fast');
|
||||
$(".qstDiv").show('fast'); |
||||
} |
||||
|
||||
// show questions and answers in display mode
|
||||
function addToPage(array){ |
||||
var counter = 1; |
||||
for(var i in array){ |
||||
|
||||
var qstDiv = $("<div class='qstDivDisplay' id='" + array[i].id + "qstDivDisplay'>");
|
||||
var spanOptConn = $("<div class='spanOptConn'>").appendTo(qstDiv);
|
||||
// var qstNumber = $("<span class='qstNumber'>" + sankoreLang.question + " " + counter + "</span>").appendTo(spanOptConn);
|
||||
var qstContent = $("<div class='qstContentDisplay'>" + array[i].text + "</div>").appendTo(qstDiv);
|
||||
var ansDiv = $("<div class='ansDiv' id='" + array[i].id + "ansDiv'>").appendTo(qstDiv); |
||||
|
||||
var ansCount = 1; |
||||
var type = array[i].type; |
||||
var selInput = $("<select>"); |
||||
if(type == 3){ |
||||
var newAnswer = $("<div class='newAnswer'>");
|
||||
newAnswer.appendTo(ansDiv); |
||||
var selectSpan = $("<span id='answerText'>").appendTo(newAnswer); |
||||
selInput.appendTo(selectSpan); |
||||
$("<option value='0'>" + sankoreLang.select_text + "</option>").appendTo(selInput); |
||||
} |
||||
for(var j in array[i].answers){
|
||||
switch(type){ |
||||
case "1": |
||||
var local_state = ""; |
||||
var local_color = ""; |
||||
if(begin){ |
||||
local_state = array[i].answers[j].state; |
||||
local_color = (array[i].answers[j].value == array[i].rightAns)?((array[i].answers[j].was)?"style='background-color: #6c0;'":""):((array[i].answers[j].was)?"style='background-color: red;'":""); |
||||
} |
||||
newAnswer = $("<div class='newAnswer'>"); |
||||
var ansInput = $("<input type='radio' name='" + counter + "' value='" + array[i].answers[j].value + "' " + local_state + " style='float: left; margin-right: 10px;'/>").appendTo(newAnswer); |
||||
var ansSpan = $("<span class='ansSpanDisplay'>" + ansCount + ".</span>").appendTo(newAnswer);
|
||||
var ansContent = $("<div class='ansContentDisplay' " + local_color + "><span id='answerText'>" + array[i].answers[j].text + "</span></div>").appendTo(newAnswer); |
||||
newAnswer.appendTo(ansDiv); |
||||
break; |
||||
case "2": |
||||
local_state = ""; |
||||
local_color = ""; |
||||
if(begin){ |
||||
local_state = (array[i].answers[j].state)?"checked":""; |
||||
local_color = (array[i].rightAns.replace(/,/g,"").indexOf(array[i].answers[j].value + " ", 0) != -1)?((array[i].answers[j].was)?"style='background-color: #6c0;'":""):((array[i].answers[j].was)?"style='background-color: red;'":""); |
||||
} |
||||
newAnswer = $("<div class='newAnswer'>"); |
||||
ansInput = $("<input type='checkbox' value='" + array[i].answers[j].value + "' " + local_state + " style='float: left; margin-right: 10px;'/>").appendTo(newAnswer); |
||||
ansSpan = $("<span class='ansSpanDisplay'>" + ansCount + ".</span>").appendTo(newAnswer);
|
||||
ansContent = $("<div class='ansContentDisplay' " + local_color + "><span id='answerText'>" + array[i].answers[j].text + "</span></div>").appendTo(newAnswer); |
||||
newAnswer.appendTo(ansDiv); |
||||
break; |
||||
case "3": |
||||
local_state = ""; |
||||
local_color = ""; |
||||
if(begin){ |
||||
local_state = (array[i].answers[j].state)?"selected":""; |
||||
local_color = (array[i].answers[j].value == array[i].rightAns)?((array[i].answers[j].was)?"#6c0":""):((array[i].answers[j].was)?"red":""); |
||||
} |
||||
ansInput = $("<option value='" + array[i].answers[j].value + "' " + local_state + ">" + array[i].answers[j].text + "</option>").appendTo(selInput); |
||||
if(local_state && local_color) |
||||
selInput.css("background-color",local_color); |
||||
break; |
||||
}
|
||||
ansCount++; |
||||
} |
||||
qstDiv.appendTo("#data"); |
||||
counter++; |
||||
} |
||||
begin = false; |
||||
} |
||||
} |
||||
|
||||
//add new question block in a edit mode
|
||||
function addQstBlock(id, text, type, style){ |
||||
var qstDiv = $("<div class='qstDiv' id='" + id + "' " + style + ">"); |
||||
var spanOptConn = $("<div class='spanOptConn'>").appendTo(qstDiv); |
||||
|
||||
// var count = $(".qstNumber").size();
|
||||
// var qstNumber = $("<span class='qstNumber'>" + sankoreLang.q + (count + 1) + "</span>").appendTo(spanOptConn);
|
||||
|
||||
var qstOptions = $("<div class='qstOptions' id='" + id + "qstOptions'>").appendTo(spanOptConn); |
||||
var changeOptions = $("<button class='changeOptions'>" + sankoreLang.options + "</button>").appendTo(qstOptions); |
||||
var applyChanges = $("<button class='applyChanges' style='display: none;'>" + sankoreLang.close + "</button>").appendTo(qstOptions); |
||||
// var qstDelete = $("<button class='qstDelete'>").appendTo(qstOptions);
|
||||
|
||||
var qstOptChoice = $("<div class='qstOptChoice' id='" + id + "qstOptChoice' style='display: none;'>").appendTo(qstDiv); |
||||
var optDesc = $("<div style='height: 65px;'>").appendTo(qstOptChoice); |
||||
var optDescImg = $("<div class='optDescImg'>").appendTo(optDesc); |
||||
var optDescText = $("<div class='optDescText'>" + sankoreLang.options_desc + "</div>").appendTo(optDesc); |
||||
|
||||
var type1 = $("<div class='type'>").appendTo(qstOptChoice); |
||||
var contentType1 = $("<div class='contentType'>").appendTo(type1); |
||||
var divType1 = $("<div class='divType1'>").appendTo(contentType1); |
||||
var textType1 = $("<div class='textType'>" + sankoreLang.radio_desc + "</div>").appendTo(contentType1); |
||||
|
||||
var type2 = $("<div class='type'>").appendTo(qstOptChoice); |
||||
var contentType2 = $("<div class='contentType'>").appendTo(type2); |
||||
var divType2 = $("<div class='divType2'>").appendTo(contentType2); |
||||
var textType2 = $("<div class='textType'>" + sankoreLang.checkbox_desc + "</div>").appendTo(contentType2); |
||||
|
||||
var type3 = $("<div class='type'>").appendTo(qstOptChoice); |
||||
var contentType3 = $("<div class='contentType'>").appendTo(type3); |
||||
var divType3 = $("<div class='divType3'>").appendTo(contentType3); |
||||
var textType3 = $("<div class='textType'>" + sankoreLang.select_desc + "</div>").appendTo(contentType3); |
||||
|
||||
switch(type){ |
||||
case "1": |
||||
var radioType1 = $("<div class='radioDiv'><div class='radioType'><input type='radio' value='1' checked/><div></div>").appendTo(type1); |
||||
var radioType2 = $("<div class='radioDiv'><div class='radioType'><input type='radio' value='2'/><div></div>").appendTo(type2); |
||||
var radioType3 = $("<div class='radioDiv'><div class='radioType'><input type='radio' value='3'/><div></div>").appendTo(type3); |
||||
break; |
||||
case "2": |
||||
radioType1 = $("<div class='radioDiv'><div class='radioType'><input type='radio' value='1'/><div></div>").appendTo(type1); |
||||
radioType2 = $("<div class='radioDiv'><div class='radioType'><input type='radio' value='2' checked/><div></div>").appendTo(type2); |
||||
radioType3 = $("<div class='radioDiv'><div class='radioType'><input type='radio' value='3'/><div></div>").appendTo(type3); |
||||
break; |
||||
case "3": |
||||
radioType1 = $("<div class='radioDiv'><div class='radioType'><input type='radio' value='1'/><div></div>").appendTo(type1); |
||||
radioType2 = $("<div class='radioDiv'><div class='radioType'><input type='radio' value='2'/><div></div>").appendTo(type2); |
||||
radioType3 = $("<div class='radioDiv'><div class='radioType'><input type='radio' value='3' checked/><div></div>").appendTo(type3); |
||||
break; |
||||
default: |
||||
radioType1 = $("<div class='radioDiv'><div class='radioType'><input type='radio' value='1'/><div></div>").appendTo(type1); |
||||
radioType2 = $("<div class='radioDiv'><div class='radioType'><input type='radio' value='2'/><div></div>").appendTo(type2); |
||||
radioType3 = $("<div class='radioDiv'><div class='radioType'><input type='radio' value='3'/><div></div>").appendTo(type3); |
||||
break; |
||||
} |
||||
|
||||
var qstContent = $("<div class='qstContent' id='" + id + "qstContent' contenteditable='true'>" + text + "</div>").appendTo(qstDiv); |
||||
|
||||
var ansDiv = $("<div class='ansDiv' id='" + id + "ansDiv'>").appendTo(qstDiv); |
||||
var ansAdd = $("<button class='ansAdd'>" + sankoreLang.add_answer + "</button>").appendTo(ansDiv); |
||||
qstDiv.insertBefore("#addQstDiv"); |
||||
// $("#addQsqSpan1").text(sankoreLang.q + (count + 2));
|
||||
} |
||||
|
||||
//add answers
|
||||
function addAnsBlock(id, currId, text, stage, rightAns, type){ |
||||
var newAnswer = $("<div class='newAnswer' id='" + id + "'>"); |
||||
var value; |
||||
var check = ""; |
||||
if(stage){ |
||||
value = getNeededElement(getNeededElement(questionArray, currId).answers,id).value; |
||||
if(type != "2"){ |
||||
if(rightAns == value) |
||||
check = "checked='true'"; |
||||
} |
||||
else { |
||||
rightAns = rightAns.replace(/,/g,""); |
||||
if(rightAns.indexOf(value + " ", 0) != -1) |
||||
check = "checked='true'";
|
||||
} |
||||
} |
||||
else { |
||||
value = ($("#" + currId + " .newAnswer input:checkbox").last().val()) ? parseInt($("#" + currId + " .newAnswer input:checkbox").last().val()) + 1 : 1; |
||||
getNeededElement(getNeededElement(questionArray, currId).answers,id).value = value; |
||||
} |
||||
var count = $("#" + currId + " .newAnswer").size() + 1; |
||||
var input = $("<input type='checkbox' style='float: left;' value='" + value + "' " + check + ">").appendTo(newAnswer); |
||||
var ansSpan = $("<span class='ansSpan'>" + sankoreLang.a + count + "</span>").appendTo(newAnswer); |
||||
var ansContent = $("<div class='ansContent' id='" + id +"ansContent' contenteditable='true'>" + text + "</div>").appendTo(newAnswer); |
||||
var ansDelete = $("<button class='ansDelete' id='" + id + "ansDelete'>").appendTo(newAnswer); |
||||
newAnswer.insertBefore("#" + currId + "ansDiv .ansAdd");
|
||||
|
||||
if(window.sankore) |
||||
sankore.setPreference("qstArrayData", JSON.stringify(questionArray)); |
||||
} |
||||
|
||||
//get needed array element
|
||||
function getNeededElement(array,id){ |
||||
for(var i in array) |
||||
if(array[i].id == id) |
||||
return array[i]; |
||||
} |
||||
|
||||
//check on fill
|
||||
function checkArrayOnFill(array){ |
||||
var count = 0; |
||||
|
||||
for(var i in array) |
||||
count++; |
||||
|
||||
return count; |
||||
} |
||||
|
||||
//refresh answers numbers
|
||||
function refreshAns(){ |
||||
var count = $("#" + currentQstId + " .newAnswer").size();
|
||||
for(var i = 0; i < count; i ++) |
||||
$($("#" + currentQstId + " .newAnswer span")[i]).text(sankoreLang.a + (i+1)); |
||||
} |
||||
|
||||
//refresh questions numbers
|
||||
function refreshQst(){ |
||||
var count = $(".qstNumber").size();
|
||||
for(var i = 0; i < count; i ++) |
||||
$($(".qstNumber")[i]).text(sankoreLang.q + (i+1)); |
||||
$("#addQsqSpan1").text(sankoreLang.q + ++count); |
||||
} |
||||
|
||||
//check answers
|
||||
function checkingAnswers(type, array, value, state){ |
||||
switch(type){ |
||||
case "radio": |
||||
for(var i in array) |
||||
if(array[i].value == value){ |
||||
array[i].state = "checked"; |
||||
array[i].was = true; |
||||
} else
|
||||
array[i].state = "";
|
||||
break; |
||||
case "box": |
||||
for(i in array) |
||||
if(array[i].value == value){ |
||||
array[i].state = state; |
||||
array[i].was = true; |
||||
}
|
||||
break; |
||||
case "sel": |
||||
for(i in array) |
||||
if(array[i].value == value){ |
||||
array[i].state = "selected"; |
||||
array[i].was = true; |
||||
} else
|
||||
array[i].state = "";
|
||||
break; |
||||
} |
||||
} |
||||
|
||||
//question constructor
|
||||
function Question(){ |
||||
|
||||
this.text = ""; |
||||
|
||||
this.type = "1"; |
||||
|
||||
this.id = ""; |
||||
|
||||
this.rightAns = ""; |
||||
|
||||
this.answers = new Array(); |
||||
|
||||
} |
||||
|
||||
//answer constructor
|
||||
function Answer(){ |
||||
|
||||
this.id = ""; |
||||
|
||||
this.text = ""; |
||||
|
||||
this.value = ""; |
||||
|
||||
this.state = ""; |
||||
|
||||
this.was = false; |
||||
} |
||||
|
||||
//changing the style
|
||||
function changeStyle(val){ |
||||
switch(val){ |
||||
case "1": |
||||
$(".b_top_left").removeClass("btl_pad").removeClass("without_back"); |
||||
$(".b_top_center").removeClass("btc_pad").removeClass("without_back"); |
||||
$(".b_top_right").removeClass("btr_pad").removeClass("without_back"); |
||||
$(".b_center_left").removeClass("bcl_pad").removeClass("without_back"); |
||||
$(".b_center_right").removeClass("bcr_pad").removeClass("without_back"); |
||||
$(".b_bottom_right").removeClass("bbr_pad").removeClass("without_back"); |
||||
$(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back"); |
||||
$(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back"); |
||||
$("#wgt_reload").removeClass("pad_color").removeClass("pad_reload"); |
||||
$("#wgt_help").removeClass("pad_color").removeClass("pad_help"); |
||||
$("#wgt_edit").removeClass("pad_color").removeClass("pad_edit"); |
||||
$("#wgt_name").removeClass("pad_color"); |
||||
$("#wgt_display").addClass("display_wood"); |
||||
$("#style_select").val(val); |
||||
$("body, html").removeClass("without_radius").addClass("radius_ft"); |
||||
break; |
||||
case "2": |
||||
$(".b_top_left").addClass("btl_pad").removeClass("without_back"); |
||||
$(".b_top_center").addClass("btc_pad").removeClass("without_back"); |
||||
$(".b_top_right").addClass("btr_pad").removeClass("without_back"); |
||||
$(".b_center_left").addClass("bcl_pad").removeClass("without_back"); |
||||
$(".b_center_right").addClass("bcr_pad").removeClass("without_back"); |
||||
$(".b_bottom_right").addClass("bbr_pad").removeClass("without_back"); |
||||
$(".b_bottom_left").addClass("bbl_pad").removeClass("without_back"); |
||||
$(".b_bottom_center").addClass("bbc_pad").removeClass("without_back"); |
||||
$("#wgt_reload").addClass("pad_color").addClass("pad_reload"); |
||||
$("#wgt_help").addClass("pad_color").addClass("pad_help"); |
||||
$("#wgt_edit").addClass("pad_color").addClass("pad_edit"); |
||||
$("#wgt_name").addClass("pad_color"); |
||||
$("#wgt_display").removeClass("display_wood"); |
||||
$("#style_select").val(val); |
||||
$("body, html").removeClass("without_radius").removeClass("radius_ft"); |
||||
break; |
||||
case "3": |
||||
$(".b_top_left").addClass("without_back").removeClass("btl_pad"); |
||||
$(".b_top_center").addClass("without_back").removeClass("btc_pad"); |
||||
$(".b_top_right").addClass("without_back").removeClass("btr_pad"); |
||||
$(".b_center_left").addClass("without_back").removeClass("bcl_pad"); |
||||
$(".b_center_right").addClass("without_back").removeClass("bcr_pad"); |
||||
$(".b_bottom_right").addClass("without_back").removeClass("bbr_pad"); |
||||
$(".b_bottom_left").addClass("without_back").removeClass("bbl_pad"); |
||||
$(".b_bottom_center").addClass("without_back").removeClass("bbc_pad"); |
||||
$("#wgt_help").addClass("pad_color").addClass("pad_help"); |
||||
$("#wgt_reload").addClass("pad_color").addClass("pad_reload"); |
||||
$("#wgt_edit").addClass("pad_color").addClass("pad_edit"); |
||||
$("#wgt_name").addClass("pad_color"); |
||||
$("#wgt_display").removeClass("display_wood"); |
||||
$("#style_select").val(val); |
||||
$("body, html").addClass("without_radius").removeClass("radius_ft"); |
||||
break; |
||||
} |
||||
} |
||||
@ -0,0 +1,66 @@ |
||||
<!-- |
||||
To change this template, choose Tools | Templates |
||||
and open the template in the editor. |
||||
--> |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<title></title> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
||||
<link rel="stylesheet" type="text/css" href="../../css/basic.css"/> |
||||
<script type="text/javascript" src="../../scripts/jquery-1.6.2.min.js"></script> |
||||
<script src="../../scripts/jquery.disable.text.select.js" type="text/javascript"></script> |
||||
<script type="text/javascript" src="scripts/blackYellow.js"></script> |
||||
<script type="text/javascript"> |
||||
|
||||
$(document).ready(function(){ |
||||
init(); |
||||
}); |
||||
|
||||
</script> |
||||
</head> |
||||
<body> |
||||
<table class="body_table" cellpadding=0 cellspacing=0> |
||||
<tr style="height: 54px;"> |
||||
<td class="b_top_left"> </td> |
||||
<td class="b_top_center"> |
||||
<div id="wgt_name"></div> |
||||
<div id="wgt_help"></div> |
||||
<div id="wgt_reload"></div> |
||||
<div id="wgt_display" class="selected"></div> |
||||
<div id="wgt_edit"></div> |
||||
</td> |
||||
<td class="b_top_right"> </td> |
||||
</tr> |
||||
|
||||
<tr> |
||||
<td class="b_center_left"> </td> |
||||
<td> |
||||
<div id="help"></div> |
||||
<div id="parameters"> |
||||
<div class="inline"> |
||||
<label> |
||||
<select id="style_select"> |
||||
<option value="1"></option> |
||||
<option value="2"></option> |
||||
<option value="3"></option> |
||||
</select> |
||||
</label> |
||||
<button id="wgt_add"></button> |
||||
</div> |
||||
</div> |
||||
<div id="data"> |
||||
|
||||
</div> |
||||
</td> |
||||
<td class="b_center_right"> </td> |
||||
</tr> |
||||
|
||||
<tr style="height: 54px;"> |
||||
<td class="b_bottom_left"> </td> |
||||
<td class="b_bottom_center"> </td> |
||||
<td class="b_bottom_right"> </td> |
||||
</tr> |
||||
</table> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,625 @@ |
||||
/* |
||||
* This program is free software: you can redistribute it and/or modify |
||||
* it under the terms of the GNU General Public License as published by |
||||
* the Free Software Foundation, either version 3 of the License, or |
||||
* (at your option) any later version. |
||||
* |
||||
* This program is distributed in the hope that it will be useful, |
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
* GNU General Public License for more details. |
||||
* |
||||
* You should have received a copy of the GNU General Public License |
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/ |
||||
|
||||
var sankoreLang = { |
||||
display: "Close",
|
||||
edit: "Edit",
|
||||
add: "Add",
|
||||
enter_data: "Enter data:",
|
||||
enter_result: "Enter result:",
|
||||
ok: "Ok",
|
||||
cancel: "Cancel", |
||||
wgt_name: "Contrast", |
||||
reload: "Reload", |
||||
slate: "slate", |
||||
pad: "pad", |
||||
none: "none", |
||||
help: "Help", |
||||
help_content:
|
||||
"<p><h2>Contrast</h2> </p>" + |
||||
"<p><h3>Color game</h3> </p>" + |
||||
|
||||
"<p>Hide and show text playing with the background color (yellow or black). Hide and show data dragging and dropping text fields to the right or the left.</p> "+ |
||||
"<p>“Reload” button resets the exercises.</p>" + |
||||
"<p>Enter the “Edit” mode to :</p>" + |
||||
"<ul><li>choose the theme of interactivity : pad, slate or none (none by default),</li>" + |
||||
"<li>modify an exercise or create a new one.</li></ul>" + |
||||
|
||||
"<p>To create a new label :</p>" + |
||||
"<ul><li> click on “+ Add”,</li>" + |
||||
"<li>Enter the data for example “3x15”,</li>" + |
||||
"<li>Enter the result, for example “15” and click “OK”. </li> </ul>" + |
||||
"<p>To modify data or results, click directly on text fields.</p>" + |
||||
"<p>To delete a label, click on the “X”.</p>" + |
||||
"<p>“Display” button comes back to the activity.</p>", |
||||
theme: "Theme" |
||||
}; |
||||
|
||||
function init(){ |
||||
|
||||
//variables
|
||||
var toggleFlag = false; // detects toggling in toggle button
|
||||
var endFlag = false; // ending of toggling in toggle button
|
||||
var addToggleStart = false; // detects toggling in add button
|
||||
var addToggleEnd = false; // ending of toggling in add button
|
||||
var shadowOver = false; |
||||
var mode = false; |
||||
var popupFlag = false |
||||
var flagForSelect = false; |
||||
var dragElement = null; //the element that must be dragging
|
||||
var lang = ""; //locale language
|
||||
var resizeFlag = true; |
||||
|
||||
var coords = { |
||||
left:0, |
||||
top:0 |
||||
} |
||||
|
||||
var resizeObj = { |
||||
y:false, |
||||
x:false, |
||||
width:0, |
||||
height:0 |
||||
} |
||||
|
||||
var opacityChanged = false; |
||||
|
||||
$("#wgt_display").text(sankoreLang.display); |
||||
$("#wgt_edit").text(sankoreLang.edit); |
||||
$("#wgt_add").text(sankoreLang.add); |
||||
$("#wgt_name").text(sankoreLang.wgt_name); |
||||
$("#wgt_reload").text(sankoreLang.reload); |
||||
$("#wgt_help").text(sankoreLang.help); |
||||
$("#help").html(sankoreLang.help_content); |
||||
$("#style_select option[value='1']").text(sankoreLang.slate); |
||||
$("#style_select option[value='2']").text(sankoreLang.pad); |
||||
$("#style_select option[value='3']").text(sankoreLang.none); |
||||
var tmpl = $("div.inline label").html(); |
||||
$("div.inline label").html(sankoreLang.theme + tmpl) |
||||
|
||||
if(window.sankore){ |
||||
if(sankore.preference("blackYellowData","")){ |
||||
var importArray = jQuery.parseJSON(sankore.preference("blackYellowData","")); |
||||
for(var i in importArray){ |
||||
var tmpReadyTask = $("<div class='readyTask'>"); |
||||
var exprContainer = $("<div class='taskContainer' style='color: yellow;'>" + importArray[i].data1 + "</div>").appendTo(tmpReadyTask); |
||||
var resContainer = $("<div class='taskContainer' style='color: black;'>"+ importArray[i].data2 + "</div>").appendTo(tmpReadyTask); |
||||
tmpReadyTask.width(importArray[i].width) |
||||
.height(importArray[i].height) |
||||
.css("position","absolute") |
||||
.css("top",importArray[i].top) |
||||
.css("left",importArray[i].left);
|
||||
tmpReadyTask.appendTo("#data"); |
||||
}
|
||||
} |
||||
$(document).disableTextSelect(); |
||||
} |
||||
|
||||
/* ------------- BUTTONS -------------*/ |
||||
|
||||
if(window.sankore){ |
||||
if(sankore.preference("by_style","")){ |
||||
changeStyle(sankore.preference("by_style","")); |
||||
$("#style_select").val(sankore.preference("by_style","")); |
||||
} else |
||||
changeStyle("3") |
||||
} else |
||||
changeStyle("3") |
||||
|
||||
$("#wgt_display, #wgt_edit").click(function(event){ |
||||
if(this.id == "wgt_display"){ |
||||
if(!$(this).hasClass("selected")){
|
||||
$(this).addClass("selected"); |
||||
$("#wgt_edit").removeClass("selected"); |
||||
$("#parameters").css("display","none");
|
||||
var tmpwh = $(window).height(); |
||||
var tmpww = $(window).width(); |
||||
resizeFlag = true; |
||||
window.resizeTo(tmpww, tmpwh - 44) |
||||
$("#data").css("padding-bottom",""); |
||||
$("#leftDiv").css("border-top-left-radius","7px"); |
||||
$("#rightDiv").css("border-top-right-radius","7px"); |
||||
$(this).css("display", "none"); |
||||
$("#wgt_edit").css("display", "block"); |
||||
mode = false; |
||||
$(".leftDiv, .rightDiv").animate({ |
||||
"opacity":"1" |
||||
},"fast",function(){ |
||||
if(opacityChanged){ |
||||
if($(".editContainer").size() != 0){ |
||||
$(".editContainer").each(function(index, domElem){ |
||||
var tmpReadyTask = $(domElem).find(".readyTask"); |
||||
tmpReadyTask.width($(domElem).width()) |
||||
.height($(domElem).height()) |
||||
.css("position","absolute") |
||||
.css("top",$(domElem).position().top - 40) |
||||
.css("left",$(domElem).position().left) |
||||
.find(".taskContainer").removeAttr("contenteditable");
|
||||
|
||||
$(domElem).remove(); |
||||
tmpReadyTask.appendTo("#data"); |
||||
}); |
||||
} |
||||
opacityChanged = false; |
||||
} |
||||
}); |
||||
|
||||
$(document).disableTextSelect();
|
||||
} |
||||
} else {
|
||||
if(!$(this).hasClass("selected")){ |
||||
$(this).addClass("selected"); |
||||
$("#wgt_display").removeClass("selected"); |
||||
$("#parameters").css("display","block");
|
||||
tmpwh = $(window).height(); |
||||
tmpww = $(window).width(); |
||||
resizeFlag = true; |
||||
window.resizeTo(tmpww, tmpwh + 44) |
||||
$("#data").css("padding-bottom","42px"); |
||||
$("#leftDiv").css("border-top-left-radius","0px"); |
||||
$("#rightDiv").css("border-top-right-radius","0px"); |
||||
$(this).css("display", "none"); |
||||
$("#wgt_display").css("display", "block"); |
||||
mode = true;
|
||||
$(document).enableTextSelect();
|
||||
$(".leftDiv, .rightDiv").animate({ |
||||
"opacity":"0.4" |
||||
},"fast",function(){ |
||||
if(!opacityChanged){ |
||||
if($(".readyTask").size() != 0){ |
||||
var tmp_arr = []; |
||||
$(".readyTask").each(function(){ |
||||
tmp_arr.push($(this)); |
||||
}) |
||||
orderItems(tmp_arr); |
||||
$(".readyTask").each(function(index, domElem){
|
||||
var editContent = $("<div class='editContainer'>").width($(domElem).width() + 10).height($(domElem) + 10).appendTo("#data"); |
||||
var closeItem = $("<div class='closeItem'>").appendTo(editContent); |
||||
editContent.css("top", $(domElem).position().top).css("left", $(domElem).position().left); |
||||
$(domElem).css("position","static") |
||||
.width("100%") |
||||
.height("100%") |
||||
.find(".taskContainer").attr("contenteditable", "true"); |
||||
$(domElem).appendTo(editContent); |
||||
}); |
||||
} |
||||
opacityChanged = true; |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
$("#wgt_help").click(function(){ |
||||
var tmp = $(this); |
||||
if($(this).hasClass("open")){ |
||||
$(this).removeClass("help_pad").removeClass("help_wood") |
||||
$("#help").slideUp("100", function(){ |
||||
tmp.removeClass("open"); |
||||
$("#data").show(); |
||||
($("#wgt_edit").hasClass("selected"))?$("#parameters").show():''; |
||||
}); |
||||
} else {
|
||||
($("#style_select").val() == 1)?$(this).removeClass("help_pad").addClass("help_wood"):$(this).removeClass("help_wood").addClass("help_pad"); |
||||
$("#data, #parameters").hide(); |
||||
$("#help").slideDown("100", function(){ |
||||
tmp.addClass("open"); |
||||
}); |
||||
} |
||||
}); |
||||
|
||||
$("#wgt_reload").click(function(){ |
||||
reloadItems(); |
||||
}); |
||||
|
||||
$("#wgt_add").click(function(){ |
||||
if($("#wgt_help").hasClass("open")){ |
||||
$("#help").slideUp("100", function(){ |
||||
$("#wgt_help").removeClass("open"); |
||||
$("#data").show(); |
||||
}); |
||||
} |
||||
shadowDiv.show(); |
||||
shadowOver = true; |
||||
popupBack.show("slow");
|
||||
$(document).disableTextSelect(); |
||||
}); |
||||
|
||||
$("#style_select option[value='1']").text(sankoreLang.slate); |
||||
$("#style_select option[value='2']").text(sankoreLang.pad); |
||||
|
||||
$("#style_select").change(function (event){ |
||||
changeStyle($(this).find("option:selected").val()); |
||||
}) |
||||
|
||||
/* -------------- END OF WORK WITH BUTTONS ---------------*/ |
||||
|
||||
//basic divs
|
||||
var leftDiv = $("<div id='leftDiv' class='leftDiv'>").appendTo("#data"); |
||||
var rightDiv = $("<div id='rightDiv' class='rightDiv'>").appendTo("#data"); |
||||
|
||||
//divs for adding a new item
|
||||
var shadowDiv = $("<div id='shadowDiv' class='shadowDiv'>").appendTo("html"); |
||||
var popupBack = $("<div id='popupBack' class='popupBack'>").appendTo("#data"); |
||||
|
||||
//input fields and buttons for a popup window
|
||||
var expressionDiv = $("<div id='expressionDiv' class='popupContainers'>").appendTo(popupBack); |
||||
var experssionLabel = $("<span id='experssionLabel' class='popupLabels'><b>" + sankoreLang.enter_data + "</b></span>").appendTo(expressionDiv); |
||||
var expresionText = $("<input type='text' id='expresionText' class='expresionInput'/>").appendTo(expressionDiv); |
||||
|
||||
var resultDiv = $("<div id='resultDiv' class='popupContainers'>").appendTo(popupBack); |
||||
var resultLabel = $("<span id='resultLabel' class='popupLabels'><b>" + sankoreLang.enter_result + "</b></span>").appendTo(resultDiv); |
||||
var resultText = $("<input type='text' id='resultText' class='expresionInput'/>").appendTo(resultDiv); |
||||
|
||||
var popupButtonsDiv= $("<div id='popupButtonsDiv' class='popupContainers'>").appendTo(popupBack); |
||||
var cancelButton = $("<input type='button' id='cancelButton' class='popupButtons' value='" + sankoreLang.cancel + "'/>").appendTo(popupButtonsDiv); |
||||
var okButton = $("<input type='button' id='okButton' class='popupButtons' value='" + sankoreLang.ok + "'/>").appendTo(popupButtonsDiv); |
||||
|
||||
/* -------------- A WORK WITH POPUP BUTTONS AND FIELDS ---------------*/ |
||||
|
||||
$("#resultText, #expresionText").keyup(function(){ |
||||
if($(this).val()){ |
||||
$(this).css("background-color", "#ff9"); |
||||
} |
||||
}); |
||||
|
||||
cancelButton.click(function(){ |
||||
popupBack.hide("slow", function(){ |
||||
$("#resultText, #expresionText").val("") |
||||
.css("background-color", "#ffc"); |
||||
shadowDiv.hide(); |
||||
shadowOver = false;
|
||||
$(document).enableTextSelect(); |
||||
});
|
||||
}); |
||||
|
||||
okButton.click(function(){ |
||||
if(checkEmptyFields(expresionText) && checkEmptyFields(resultText)){ |
||||
popupBack.hide("slow", function(){ |
||||
shadowDiv.hide(); |
||||
shadowOver = false; |
||||
addTask(expresionText.val(), resultText.val()); |
||||
exportToSankore(); |
||||
$("#resultText, #expresionText").val("") |
||||
.css("background-color", "#ffc"); |
||||
$(document).enableTextSelect(); |
||||
}) |
||||
} |
||||
}); |
||||
|
||||
/* -------------- THE END OF WORK WITH POPUP BUTTONS AND FIELDS ---------------*/
|
||||
|
||||
// a work with dragging possibility
|
||||
$("input:text").mouseover(function(){ |
||||
$(document).enableTextSelect();
|
||||
}); |
||||
|
||||
$("input:text").mouseout(function(){ |
||||
$(document).disableTextSelect();
|
||||
}); |
||||
|
||||
$(".readyTask, .editContainer").live("mousedown",function(event){ |
||||
if($("#wgt_display").hasClass("selected")){ |
||||
if(!shadowOver){ |
||||
dragElement = $(this); |
||||
coords.left = event.pageX - $(this).position().left; |
||||
coords.top = event.pageY - $(this).position().top; |
||||
resizeObj.width = $(this).width(); |
||||
resizeObj.height = $(this).height(); |
||||
} |
||||
$(document).disableTextSelect(); |
||||
} |
||||
}); |
||||
|
||||
$("body").mouseup(function(event){ |
||||
if($("#wgt_display").hasClass("selected")){ |
||||
if(!shadowOver){ |
||||
if (dragElement) { |
||||
exportToSankore(); |
||||
} |
||||
dragElement = null; |
||||
resizeObj.x = false; |
||||
resizeObj.y = false; |
||||
} |
||||
} |
||||
}); |
||||
|
||||
$("body").mousemove(function(event){ |
||||
if(dragElement && !shadowOver && $("#wgt_display").hasClass("selected")){
|
||||
var top = event.pageY - coords.top; |
||||
var left = event.pageX - coords.left; |
||||
var bottom = top + dragElement.height(); |
||||
var right = left + dragElement.width();
|
||||
if(resizeObj.x){ |
||||
if(right < ($(window).width() - 54)) |
||||
dragElement.width(event.pageX - dragElement.position().left); |
||||
} |
||||
else if(resizeObj.y){
|
||||
if(bottom < ($(window).height() - 54)) |
||||
dragElement.height(event.pageY - dragElement.position().top); |
||||
} |
||||
else { |
||||
if((top > 54) && (bottom < ($(window).height() - 54))) |
||||
dragElement.css("top",event.pageY - coords.top); |
||||
if((left >= 54) && (right < ($(window).width() - 54)))
|
||||
dragElement.css("left", event.pageX - coords.left); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
//closing item
|
||||
$(".closeItem").live("click", function(){ |
||||
if(!shadowOver){ |
||||
$(this).parent().remove(); |
||||
if($(".editContainer").size() > 0){
|
||||
var prev = $(".editContainer:first"); |
||||
if((prev.position().left == 54) && (prev.position().top != 60)) |
||||
prev.css("top", "60px");
|
||||
var prevBottom = prev.position().top + prev.height(), |
||||
prevLeft = prev.position().left; |
||||
if(prev.next().length) |
||||
recursionCall(prevBottom, prevLeft, prev.next()); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
$(".taskContainer").live("keyup", function(){ |
||||
if($(".editContainer").size() > 1){
|
||||
var prev = $(".editContainer:first"), |
||||
prevBottom = prev.position().top + prev.height(), |
||||
prevLeft = prev.position().left; |
||||
recursionCall(prevBottom, prevLeft, prev.next()); |
||||
} |
||||
}) |
||||
|
||||
function recursionCall(prevBottom, prevLeft, curr){ |
||||
var curHeight = curr.height(), |
||||
curLeft = curr.position().left; |
||||
if(prevLeft == curLeft){ |
||||
if((prevBottom + 15 + curHeight) < ($(window).height() - 54)) |
||||
curr.css("top", prevBottom + 15 + "px");
|
||||
else |
||||
curr.css("top", "100px").css("left", prevLeft + 255 + "px");
|
||||
} else { |
||||
if((prevBottom + 15 + curHeight) < ($(window).height() - 54)) |
||||
curr.css("top", prevBottom + 15 + "px").css("left", prevLeft + "px");
|
||||
else |
||||
curr.css("top", "100px").css("left", prevLeft + 255 + "px"); |
||||
} |
||||
prevBottom = curr.position().top + curr.height(), |
||||
prevLeft = curr.position().left; |
||||
if(curr.next().length) |
||||
recursionCall(prevBottom, prevLeft, curr.next()); |
||||
}
|
||||
|
||||
//$("#leftDiv,#rightDiv,#shadowDiv").css("height", $(window).height());
|
||||
popupBack.css("top", ($(window).height() - 138)*50/$(window).height() + "%"); |
||||
popupBack.css("left", ($(window).width() - 360)*50/$(window).width() + "%"); |
||||
|
||||
$(window).resize(function(){ |
||||
if(!resizeFlag){ |
||||
if($("#wgt_edit").hasClass("selected")){ |
||||
if($(".editContainer").size() > 1){
|
||||
var prev = $(".editContainer:first"), |
||||
prevBottom = prev.position().top + prev.height(), |
||||
prevLeft = prev.position().left; |
||||
recursionCall(prevBottom, prevLeft, prev.next()); |
||||
} |
||||
} else { |
||||
var tmp_array = []; |
||||
$(".readyTask").each(function(){ |
||||
tmp_array.push($(this)); |
||||
}); |
||||
orderItems(tmp_array); |
||||
} |
||||
popupBack.css("top", ($(window).height() - 138)*50/$(window).height() + "%"); |
||||
popupBack.css("left", ($(window).width() - 360)*50/$(window).width() + "%"); |
||||
} else
|
||||
resizeFlag = false; |
||||
}); |
||||
|
||||
if (window.widget) { |
||||
window.widget.onleave = function(){ |
||||
exportToSankore(); |
||||
sankore.setPreference("by_style", $("#style_select").find("option:selected").val()); |
||||
} |
||||
} |
||||
|
||||
// export data
|
||||
function exportToSankore(){
|
||||
|
||||
var arrayToExport = new Array();
|
||||
if(mode){
|
||||
if($(".editContainer").size() != 0){ |
||||
$(".editContainer").each(function(index, domElem){ |
||||
var objToExport = { |
||||
data1:"", |
||||
data2:"", |
||||
width:0, |
||||
height:0, |
||||
top:0, |
||||
left:0 |
||||
}
|
||||
objToExport.data1 = $(domElem).find(".readyTask").find(":first-child").text(); |
||||
objToExport.data2 = $(domElem).find(".readyTask").find(":last-child").text(); |
||||
objToExport.width = $(domElem).width(); |
||||
objToExport.height = $(domElem).height(); |
||||
objToExport.top = $(domElem).position().top - 40; |
||||
objToExport.left = $(domElem).position().left; |
||||
arrayToExport.push(objToExport); |
||||
}); |
||||
} |
||||
} else {
|
||||
if($(".readyTask").size() != 0){ |
||||
$(".readyTask").each(function(index, domElem){ |
||||
var objToExport = { |
||||
data1:"", |
||||
data2:"", |
||||
width:0, |
||||
height:0, |
||||
top:0, |
||||
left:0 |
||||
}
|
||||
objToExport.data1 = $(domElem).find(":first-child").text(); |
||||
objToExport.data2 = $(domElem).find(":last-child").text(); |
||||
objToExport.width = $(domElem).width(); |
||||
objToExport.height = $(domElem).height(); |
||||
objToExport.top = $(domElem).position().top; |
||||
objToExport.left = $(domElem).position().left; |
||||
arrayToExport.push(objToExport); |
||||
}); |
||||
}
|
||||
} |
||||
if(window.sankore) |
||||
sankore.setPreference("blackYellowData", JSON.stringify(arrayToExport)); |
||||
} |
||||
} |
||||
|
||||
//checking empty fields
|
||||
function checkEmptyFields(field){ |
||||
if(field.val() == ""){ |
||||
field.css("background-color", "red"); |
||||
return false; |
||||
} else { |
||||
field.css("background-color", "#ff9"); |
||||
return true; |
||||
} |
||||
} |
||||
|
||||
//reload
|
||||
function reloadItems(){ |
||||
if($("#wgt_edit").hasClass("selected")) |
||||
$("#wgt_display").trigger("click"); |
||||
else{ |
||||
var tmp_array = []; |
||||
$(".readyTask").each(function(){ |
||||
tmp_array.push($(this)); |
||||
}); |
||||
tmp_array = shuffle(tmp_array); |
||||
orderItems(tmp_array); |
||||
}
|
||||
|
||||
} |
||||
|
||||
//order items
|
||||
function orderItems(items){ |
||||
var bottom = ($("#wgt_edit").hasClass("selected"))?85:45, |
||||
lastItemLeft = 54;
|
||||
for (var i in items){ |
||||
if((bottom + items[i].height()) < ($(window).height() - 54)){ |
||||
items[i].css("top", bottom + 15 + "px").css("left", lastItemLeft + "px").appendTo("#data"); |
||||
bottom += items[i].height() + 15; |
||||
} else { |
||||
bottom = 100; |
||||
lastItemLeft += 255; |
||||
items[i].css("top", bottom + "px").css("left", lastItemLeft + "px").appendTo("#data"); |
||||
bottom += items[i].height(); |
||||
} |
||||
}
|
||||
} |
||||
|
||||
//shuffles an array
|
||||
function shuffle( arr ) |
||||
{ |
||||
var pos, tmp;
|
||||
for( var i = 0; i < arr.length; i++ ) |
||||
{ |
||||
pos = Math.round( Math.random() * ( arr.length - 1 ) ); |
||||
tmp = arr[pos]; |
||||
arr[pos] = arr[i]; |
||||
arr[i] = tmp; |
||||
} |
||||
return arr; |
||||
} |
||||
|
||||
//adding a new task to the page
|
||||
function addTask(expression, result){ |
||||
var lastItem = $(".editContainer:last"), |
||||
lastItemPos = lastItem.length ? lastItem.position().top : 85, |
||||
lastItemHeight = lastItem.length ? lastItem.height() : 0, |
||||
lastItemLeft = lastItem.length ? lastItem.position().left : 54; |
||||
var bottom = lastItemPos + lastItemHeight + 85; |
||||
var editContent = $("<div class='editContainer'>"); |
||||
$("<div class='closeItem'>").appendTo(editContent); |
||||
var main = $("<div class='readyTask'>"); |
||||
$("<div class='taskContainer' style='color: yellow;' contenteditable='true'>" + expression + "</div>").appendTo(main); |
||||
$("<div class='taskContainer' style='color: black;' contenteditable='true'>"+ result + "</div>").appendTo(main); |
||||
if(bottom < ($(window).height() - 54)){ |
||||
editContent.css("top", lastItemPos + lastItemHeight + 15 + "px").css("left", lastItemLeft + "px").appendTo("#data"); |
||||
} else { |
||||
lastItemPos = 85; |
||||
editContent.css("top", lastItemPos + 15 + "px").css("left", lastItemLeft + 255 + "px").appendTo("#data"); |
||||
}
|
||||
main.appendTo(editContent); |
||||
} |
||||
|
||||
//changing the style
|
||||
function changeStyle(val){ |
||||
switch(val){ |
||||
case "1": |
||||
$(".b_top_left").removeClass("btl_pad").removeClass("without_back"); |
||||
$(".b_top_center").removeClass("btc_pad").removeClass("without_back"); |
||||
$(".b_top_right").removeClass("btr_pad").removeClass("without_back"); |
||||
$(".b_center_left").removeClass("bcl_pad").removeClass("without_back"); |
||||
$(".b_center_right").removeClass("bcr_pad").removeClass("without_back"); |
||||
$(".b_bottom_right").removeClass("bbr_pad").removeClass("without_back"); |
||||
$(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back"); |
||||
$(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back"); |
||||
$("#wgt_reload").removeClass("pad_color").removeClass("pad_reload"); |
||||
$("#wgt_help").removeClass("pad_color").removeClass("pad_help"); |
||||
$("#wgt_edit").removeClass("pad_color").removeClass("pad_edit"); |
||||
$("#wgt_name").removeClass("pad_color"); |
||||
$("#wgt_display").addClass("display_wood"); |
||||
$("#style_select").val(val); |
||||
$("body, html").removeClass("without_radius").addClass("radius_ft"); |
||||
break; |
||||
case "2": |
||||
$(".b_top_left").addClass("btl_pad").removeClass("without_back"); |
||||
$(".b_top_center").addClass("btc_pad").removeClass("without_back"); |
||||
$(".b_top_right").addClass("btr_pad").removeClass("without_back"); |
||||
$(".b_center_left").addClass("bcl_pad").removeClass("without_back"); |
||||
$(".b_center_right").addClass("bcr_pad").removeClass("without_back"); |
||||
$(".b_bottom_right").addClass("bbr_pad").removeClass("without_back"); |
||||
$(".b_bottom_left").addClass("bbl_pad").removeClass("without_back"); |
||||
$(".b_bottom_center").addClass("bbc_pad").removeClass("without_back"); |
||||
$("#wgt_reload").addClass("pad_color").addClass("pad_reload"); |
||||
$("#wgt_help").addClass("pad_color").addClass("pad_help"); |
||||
$("#wgt_edit").addClass("pad_color").addClass("pad_edit"); |
||||
$("#wgt_name").addClass("pad_color"); |
||||
$("#wgt_display").removeClass("display_wood"); |
||||
$("#style_select").val(val); |
||||
$("body, html").removeClass("without_radius").removeClass("radius_ft"); |
||||
break; |
||||
case "3": |
||||
$(".b_top_left").addClass("without_back").removeClass("btl_pad"); |
||||
$(".b_top_center").addClass("without_back").removeClass("btc_pad"); |
||||
$(".b_top_right").addClass("without_back").removeClass("btr_pad"); |
||||
$(".b_center_left").addClass("without_back").removeClass("bcl_pad"); |
||||
$(".b_center_right").addClass("without_back").removeClass("bcr_pad"); |
||||
$(".b_bottom_right").addClass("without_back").removeClass("bbr_pad"); |
||||
$(".b_bottom_left").addClass("without_back").removeClass("bbl_pad"); |
||||
$(".b_bottom_center").addClass("without_back").removeClass("bbc_pad"); |
||||
$("#wgt_help").addClass("pad_color").addClass("pad_help"); |
||||
$("#wgt_reload").addClass("pad_color").addClass("pad_reload"); |
||||
$("#wgt_edit").addClass("pad_color").addClass("pad_edit"); |
||||
$("#wgt_name").addClass("pad_color"); |
||||
$("#wgt_display").removeClass("display_wood"); |
||||
$("#style_select").val(val); |
||||
$("body, html").addClass("without_radius").removeClass("radius_ft"); |
||||
break; |
||||
} |
||||
if($("#wgt_edit").hasClass("selected")) |
||||
$(document).enableTextSelect();
|
||||
} |
||||
@ -1,308 +1,319 @@ |
||||
html, body { |
||||
margin:0; |
||||
padding: 0; |
||||
font-family: "helvetica neue"; |
||||
font-size: 14px; |
||||
color: #666666; |
||||
} |
||||
|
||||
#ubwidget { |
||||
position: absolute; |
||||
top: 0; |
||||
bottom: 0; |
||||
left: 0; |
||||
right: 0; |
||||
background: url("images/bg.png"); |
||||
} |
||||
|
||||
.theme-pad #ubwidget { |
||||
border-radius: 40px; |
||||
border-width: 52px; |
||||
|
||||
-webkit-border-image: url("images/pad-bd.png") 52 repeat; |
||||
-moz-border-image: url("images/pad-bd.png") 52 repeat; |
||||
border-image: url("images/pad-bd.png") 52 repeat; |
||||
} |
||||
|
||||
.theme-slate #ubwidget { |
||||
border-radius: 44px; |
||||
border-width: 52px; |
||||
|
||||
-webkit-border-image: url("images/slate-bd.png") 52 repeat; |
||||
-moz-border-image: url("images/slate-bd.png") 52 repeat; |
||||
border-image: url("images/slate-bd.png") 52 repeat; |
||||
} |
||||
|
||||
#ubwidget > .wrapper { |
||||
position: absolute; |
||||
top: 0px; |
||||
bottom: 0px; |
||||
left: 0px; |
||||
right: 0px; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
|
||||
.theme-slate #ubwidget > .wrapper, .theme-pad #ubwidget > .wrapper { |
||||
position: absolute; |
||||
top: -49px; |
||||
bottom: -5px; |
||||
left: -5px; |
||||
right: -5px; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
#toolbar { |
||||
display: table; |
||||
width: 100%; |
||||
height: 44px; |
||||
font-size: 24px; |
||||
color: #FFCC99; |
||||
padding:0 10px; |
||||
} |
||||
|
||||
.theme-pad #toolbar, .theme-slate #toolbar { |
||||
height: 38px; |
||||
padding: 6px 0 0; |
||||
} |
||||
|
||||
.theme-slate #toolbar { |
||||
color: #7F613F; |
||||
text-shadow: #FFDCA9 0 1px 0; |
||||
} |
||||
|
||||
|
||||
#toolbar > * { |
||||
display: table-cell; |
||||
height: 100%; |
||||
vertical-align: middle; |
||||
} |
||||
|
||||
#toolbar .actions { |
||||
text-align: right; |
||||
} |
||||
|
||||
#toolbar button, h1 { |
||||
font-weight: normal; |
||||
font-size: 24px; |
||||
color: #FFCC99; |
||||
margin: 0; |
||||
} |
||||
|
||||
.theme-slate #toolbar button, .theme-slate h1 { |
||||
color: #7F613F; |
||||
text-shadow: #FFDCA9 0 1px 0; |
||||
} |
||||
|
||||
#toolbar button { |
||||
border: none; |
||||
padding: none; |
||||
outline: none; |
||||
background: none; |
||||
|
||||
cursor: pointer; |
||||
padding-left: 34px; |
||||
margin-left: 10px; |
||||
height: 32px; |
||||
} |
||||
|
||||
#toolbar button span { |
||||
display: block; |
||||
line-height: 32px; |
||||
} |
||||
|
||||
#toolbar button[role='edit'] { |
||||
background: url("images/toolbar-edit.png") left top no-repeat; |
||||
} |
||||
|
||||
#toolbar button[role='view'] { |
||||
display: none; |
||||
color: #FFF; |
||||
background: url("images/toolbar-edit.png") left -32px no-repeat; |
||||
} |
||||
|
||||
#toolbar button[role='reload'] { |
||||
background: url("images/toolbar-reload.png") left top no-repeat; |
||||
} |
||||
|
||||
#toolbar button[role='help'] { |
||||
background: url("images/toolbar-help.png") left top no-repeat; |
||||
display: none; |
||||
} |
||||
|
||||
.hasHelp #toolbar button[role='help'] { |
||||
display: inline-block; |
||||
} |
||||
|
||||
.showHelp #toolbar button[role='help'] { |
||||
color: #FFF; |
||||
background-position: left -32px; |
||||
} |
||||
|
||||
.theme-slate #toolbar button[role='edit'] { |
||||
background-image: url("images/slate-toolbar-edit.png"); |
||||
} |
||||
|
||||
.theme-slate #toolbar button[role='view'] { |
||||
text-shadow: #7F613F 0 -1px 0; |
||||
background: url("images/slate-toolbar-edit.png") left -32px no-repeat; |
||||
} |
||||
|
||||
.theme-slate #toolbar button[role='reload'] { |
||||
background-image: url("images/slate-toolbar-reload.png"); |
||||
} |
||||
|
||||
.theme-slate #toolbar button[role='help'] { |
||||
background-image: url("images/slate-toolbar-help.png"); |
||||
} |
||||
|
||||
.showHelp.theme-slate #toolbar button[role='help'] { |
||||
text-shadow: #7F613F 0 -1px 0; |
||||
} |
||||
|
||||
|
||||
.onEdit #toolbar button[role='view'] { |
||||
display: inline-block; |
||||
} |
||||
|
||||
.onEdit #toolbar button[role='edit'] { |
||||
display: none; |
||||
} |
||||
|
||||
#help { |
||||
width: 300px; |
||||
height: 400px; |
||||
position: absolute; |
||||
margin-top: 10px; |
||||
right: 10px; |
||||
z-index: 10000; |
||||
display: none; |
||||
} |
||||
|
||||
.showHelp #help { |
||||
display: block; |
||||
} |
||||
|
||||
#content { |
||||
position: absolute; |
||||
top: 44px; |
||||
bottom: 0; |
||||
overflow: auto; |
||||
left: 0; |
||||
right: 0; |
||||
|
||||
background-image: -moz-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: -webkit-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: -o-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: -ms-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
} |
||||
|
||||
#parameters { |
||||
display:none; |
||||
padding: 10px 20px; |
||||
background: url("images/parameters-bg.png"); |
||||
|
||||
-webkit-border-radius: 4px 4px 0 0; |
||||
-moz-border-radius: 4px 4px 0 0; |
||||
-mz-border-radius: 4px 4px 0 0; |
||||
border-radius: 4px 4px 0 0; |
||||
} |
||||
|
||||
#parameters label { |
||||
font-style: italic; |
||||
} |
||||
|
||||
#parameters label > select, #parameters label > input{ |
||||
margin-left: 10px; |
||||
} |
||||
|
||||
#parameters > div.inline { |
||||
display: inline-block; |
||||
} |
||||
|
||||
#parameters > div.inline+div.inline { |
||||
margin-left: 20px; |
||||
} |
||||
|
||||
#parameters input[type=text], |
||||
#parameters input[type=number] { |
||||
height: 26px; |
||||
border: 1px solid #BBB; |
||||
background-color: #FFF; |
||||
|
||||
padding: 0 4px; |
||||
|
||||
-webkit-border-radius: 4px; |
||||
-moz-border-radius: 4px; |
||||
-ms-border-radius: 4px; |
||||
border-radius: 4px; |
||||
|
||||
-webkit-box-shadow: 0 1px 0 #FFF; |
||||
-moz-box-shadow: 0 1px 0 #FFF; |
||||
-ms-box-shadow: 0 1px 0 #FFF; |
||||
box-shadow: 0 1px 0 #FFF; |
||||
} |
||||
|
||||
#parameters input.tiny { |
||||
width: 40px; |
||||
} |
||||
|
||||
#parameters input.small { |
||||
width: 80px; |
||||
} |
||||
|
||||
#parameters input.medium { |
||||
width: 120px; |
||||
} |
||||
|
||||
#parameters input.long { |
||||
width: 160px; |
||||
} |
||||
|
||||
#scene { |
||||
padding: 20px; |
||||
} |
||||
|
||||
#scene > * { |
||||
margin: 0 auto; |
||||
} |
||||
.onEdit #scene { |
||||
} |
||||
|
||||
.onEdit #parameters { |
||||
display: block; |
||||
} |
||||
|
||||
/* |
||||
.card-container { |
||||
-webkit-perspective: 600px; |
||||
width:100%; |
||||
height: 100%; |
||||
} |
||||
.card { |
||||
position: relative; |
||||
width:100%; |
||||
height: 100%; |
||||
} |
||||
.card > div { |
||||
position: absolute; |
||||
width:100%; |
||||
height: 100%; |
||||
-webkit-transform-style: preserve-3d; |
||||
-webkit-transition: all .5s ease-in-out; |
||||
-webkit-backface-visibility: hidden; |
||||
} |
||||
.card > div:first-child { |
||||
-webkit-transform: rotateY( 0deg ); |
||||
} |
||||
.card > div:last-child { |
||||
-webkit-transform: rotateY( -180deg ); |
||||
} |
||||
.card.flip > div:first-child { |
||||
-webkit-transform: rotateY( 180deg ); |
||||
} |
||||
.card.flip > div:last-child { |
||||
-webkit-transform: rotateY( 0deg ); |
||||
} |
||||
*/ |
||||
html, body { |
||||
margin:0; |
||||
padding: 0; |
||||
font-family: "helvetica neue"; |
||||
font-size: 14px; |
||||
color: #666666; |
||||
} |
||||
|
||||
#ubwidget { |
||||
position: absolute; |
||||
top: 0; |
||||
bottom: 0; |
||||
left: 0; |
||||
right: 0; |
||||
background: url("images/bg.png"); |
||||
} |
||||
|
||||
.theme-pad #ubwidget { |
||||
border-radius: 40px; |
||||
border-width: 52px; |
||||
|
||||
-webkit-border-image: url("images/pad-bd.png") 52 repeat; |
||||
-moz-border-image: url("images/pad-bd.png") 52 repeat; |
||||
border-image: url("images/pad-bd.png") 52 repeat; |
||||
} |
||||
|
||||
.theme-slate #ubwidget { |
||||
border-radius: 44px; |
||||
border-width: 52px; |
||||
|
||||
-webkit-border-image: url("images/slate-bd.png") 52 repeat; |
||||
-moz-border-image: url("images/slate-bd.png") 52 repeat; |
||||
border-image: url("images/slate-bd.png") 52 repeat; |
||||
} |
||||
|
||||
#ubwidget > .wrapper { |
||||
position: absolute; |
||||
top: 0px; |
||||
bottom: 0px; |
||||
left: 0px; |
||||
right: 0px; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
|
||||
.theme-slate #ubwidget > .wrapper, .theme-pad #ubwidget > .wrapper { |
||||
position: absolute; |
||||
top: -49px; |
||||
bottom: -5px; |
||||
left: -5px; |
||||
right: -5px; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
#toolbar { |
||||
display: table; |
||||
width: 100%; |
||||
height: 44px; |
||||
font-size: 24px; |
||||
color: #FFCC99; |
||||
padding:0 10px; |
||||
} |
||||
|
||||
.theme-pad #toolbar, .theme-slate #toolbar { |
||||
height: 38px; |
||||
padding: 6px 0 0; |
||||
} |
||||
|
||||
.theme-slate #toolbar { |
||||
color: #7F613F; |
||||
text-shadow: #FFDCA9 0 1px 0; |
||||
} |
||||
|
||||
|
||||
#toolbar > * { |
||||
display: table-cell; |
||||
height: 100%; |
||||
vertical-align: middle; |
||||
} |
||||
|
||||
#toolbar .actions { |
||||
text-align: right; |
||||
} |
||||
|
||||
#toolbar button, h1 { |
||||
font-weight: normal; |
||||
font-size: 24px; |
||||
color: #FFCC99; |
||||
margin: 0; |
||||
} |
||||
|
||||
.theme-slate #toolbar button, .theme-slate h1 { |
||||
color: #7F613F; |
||||
text-shadow: #FFDCA9 0 1px 0; |
||||
} |
||||
|
||||
#toolbar button { |
||||
border: none; |
||||
padding: none; |
||||
outline: none; |
||||
background: none; |
||||
|
||||
cursor: pointer; |
||||
padding-left: 34px; |
||||
margin-left: 10px; |
||||
height: 32px; |
||||
} |
||||
|
||||
#toolbar button span { |
||||
display: block; |
||||
line-height: 32px; |
||||
} |
||||
|
||||
#toolbar button[role='edit'] { |
||||
background: url("images/toolbar-edit.png") left top no-repeat; |
||||
} |
||||
|
||||
#toolbar button[role='view'] { |
||||
display: none; |
||||
color: #FFF; |
||||
background: url("images/toolbar-edit.png") left -32px no-repeat; |
||||
} |
||||
|
||||
#toolbar button[role='reload'] { |
||||
background: url("images/toolbar-reload.png") left top no-repeat; |
||||
} |
||||
|
||||
#toolbar button[role='help'] { |
||||
background: url("images/toolbar-help.png") left top no-repeat; |
||||
display: none; |
||||
} |
||||
|
||||
.hasHelp #toolbar button[role='help'] { |
||||
display: inline-block; |
||||
} |
||||
|
||||
.showHelp #toolbar button[role='help'] { |
||||
color: #FFF; |
||||
background-position: left -32px; |
||||
} |
||||
|
||||
.theme-slate #toolbar button[role='edit'] { |
||||
background-image: url("images/slate-toolbar-edit.png"); |
||||
} |
||||
|
||||
.theme-slate #toolbar button[role='view'] { |
||||
text-shadow: #7F613F 0 -1px 0; |
||||
background: url("images/slate-toolbar-edit.png") left -32px no-repeat; |
||||
} |
||||
|
||||
.theme-slate #toolbar button[role='reload'] { |
||||
background-image: url("images/slate-toolbar-reload.png"); |
||||
} |
||||
|
||||
.theme-slate #toolbar button[role='help'] { |
||||
background-image: url("images/slate-toolbar-help.png"); |
||||
} |
||||
|
||||
.showHelp.theme-slate #toolbar button[role='help'] { |
||||
text-shadow: #7F613F 0 -1px 0; |
||||
} |
||||
|
||||
|
||||
.onEdit #toolbar button[role='view'] { |
||||
display: inline-block; |
||||
} |
||||
|
||||
.onEdit #toolbar button[role='edit'] { |
||||
display: none; |
||||
} |
||||
|
||||
#help { |
||||
width: 300px; |
||||
height: 400px; |
||||
position: absolute; |
||||
margin-top: 10px; |
||||
right: 10px; |
||||
z-index: 10000; |
||||
display: none; |
||||
} |
||||
|
||||
.showHelp #help { |
||||
display: block; |
||||
} |
||||
|
||||
#content { |
||||
position: absolute; |
||||
top: 44px; |
||||
bottom: 0; |
||||
overflow: auto; |
||||
left: 0; |
||||
right: 0; |
||||
|
||||
background-image: -moz-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: -webkit-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: -o-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: -ms-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
background-image: radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||
} |
||||
|
||||
#parameters { |
||||
display:none; |
||||
padding: 10px 20px; |
||||
background: url("images/parameters-bg.png"); |
||||
height: 24px; |
||||
-webkit-border-radius: 4px 4px 0 0; |
||||
-moz-border-radius: 4px 4px 0 0; |
||||
-mz-border-radius: 4px 4px 0 0; |
||||
border-radius: 4px 4px 0 0; |
||||
} |
||||
|
||||
#parameters label { |
||||
font-style: italic; |
||||
} |
||||
|
||||
#parameters label > select, #parameters label > input{ |
||||
margin-left: 10px; |
||||
} |
||||
|
||||
#parameters > div.inline { |
||||
float: left; |
||||
} |
||||
|
||||
#parameters > div.inline > div{ |
||||
float: left; |
||||
height: 28px; |
||||
margin-right: 8px; |
||||
padding-top: 5px; |
||||
font-family: "helvetica neue"; |
||||
font-size: 14px; |
||||
color: #666666; |
||||
font-style: italic; |
||||
} |
||||
|
||||
#parameters > div.inline+div.inline { |
||||
margin-left: 20px; |
||||
} |
||||
|
||||
#parameters input[type=text], |
||||
#parameters input[type=number] { |
||||
height: 26px; |
||||
border: 1px solid #BBB; |
||||
background-color: #FFF; |
||||
|
||||
padding: 0 4px; |
||||
|
||||
-webkit-border-radius: 4px; |
||||
-moz-border-radius: 4px; |
||||
-ms-border-radius: 4px; |
||||
border-radius: 4px; |
||||
|
||||
-webkit-box-shadow: 0 1px 0 #FFF; |
||||
-moz-box-shadow: 0 1px 0 #FFF; |
||||
-ms-box-shadow: 0 1px 0 #FFF; |
||||
box-shadow: 0 1px 0 #FFF; |
||||
} |
||||
|
||||
#parameters input.tiny { |
||||
width: 40px; |
||||
} |
||||
|
||||
#parameters input.small { |
||||
width: 80px; |
||||
} |
||||
|
||||
#parameters input.medium { |
||||
width: 120px; |
||||
} |
||||
|
||||
#parameters input.long { |
||||
width: 160px; |
||||
} |
||||
|
||||
#scene { |
||||
padding: 20px; |
||||
} |
||||
|
||||
#scene > * { |
||||
margin: 0 auto; |
||||
} |
||||
.onEdit #scene { |
||||
} |
||||
|
||||
.onEdit #parameters { |
||||
display: block; |
||||
} |
||||
|
||||
/* |
||||
.card-container { |
||||
-webkit-perspective: 600px; |
||||
width:100%; |
||||
height: 100%; |
||||
} |
||||
.card { |
||||
position: relative; |
||||
width:100%; |
||||
height: 100%; |
||||
} |
||||
.card > div { |
||||
position: absolute; |
||||
width:100%; |
||||
height: 100%; |
||||
-webkit-transform-style: preserve-3d; |
||||
-webkit-transition: all .5s ease-in-out; |
||||
-webkit-backface-visibility: hidden; |
||||
} |
||||
.card > div:first-child { |
||||
-webkit-transform: rotateY( 0deg ); |
||||
} |
||||
.card > div:last-child { |
||||
-webkit-transform: rotateY( -180deg ); |
||||
} |
||||
.card.flip > div:first-child { |
||||
-webkit-transform: rotateY( 180deg ); |
||||
} |
||||
.card.flip > div:last-child { |
||||
-webkit-transform: rotateY( 0deg ); |
||||
} |
||||
*/ |
||||
|
||||
@ -1,33 +1,31 @@ |
||||
var toolbarTemplate =
|
||||
'<h1 class="title">{{fr.njin.i18n.document.title}}</h1>'+ |
||||
'<div class="actions">'+ |
||||
'<button role="edit"><span>{{fr.njin.i18n.toolbar.edit}}</span></button>'+ |
||||
'<button role="view"><span>{{fr.njin.i18n.toolbar.view}}</span></button>'+ |
||||
'<button role="reload"><span>{{fr.njin.i18n.toolbar.reload}}</span></button>'+ |
||||
'<button role="help"><span>{{fr.njin.i18n.toolbar.help}}</span></button>'+ |
||||
'</div>'; |
||||
|
||||
var parametersTemplate =
|
||||
'<div class="inline">'+ |
||||
'<label>{{fr.njin.i18n.parameters.label.themes}}'+ |
||||
'<select name="themes" role="parameter">'+ |
||||
'<option value="pad">{{fr.njin.i18n.parameters.label.pad.themes}}</option>'+
|
||||
'<option value="slate">{{fr.njin.i18n.parameters.label.slate.themes}}</option>'+ |
||||
'<option value="none">{{fr.njin.i18n.parameters.label.none.themes}}</option>'+ |
||||
'</select>'+ |
||||
'</label>'+ |
||||
'</div>'+ |
||||
'<div class="inline">'+ |
||||
'<label>{{fr.njin.i18n.boite.parameters.label.count}}'+ |
||||
'<input class="tiny" type="number" name="count" role="parameter">' |
||||
'</label>'+ |
||||
'</div>'; |
||||
|
||||
|
||||
var objectTemplate =
|
||||
'<div id="{{object}}">'+ |
||||
'<!--<div class="tools">'+ |
||||
'<button role="duplicate">{{fr.njin.i18n.boite.parameters.label.duplicate}}</button>'+ |
||||
'<button role="remove">{{fr.njin.i18n.boite.parameters.label.remove}}</button>'+ |
||||
'</div>-->'+ |
||||
var toolbarTemplate =
|
||||
'<h1 class="title">{{fr.njin.i18n.document.title}}</h1>'+ |
||||
'<div class="actions">'+ |
||||
'<button role="edit"><span>{{fr.njin.i18n.toolbar.edit}}</span></button>'+ |
||||
'<button role="view"><span>{{fr.njin.i18n.toolbar.view}}</span></button>'+ |
||||
'<button role="reload"><span>{{fr.njin.i18n.toolbar.reload}}</span></button>'+ |
||||
'<button role="help"><span>{{fr.njin.i18n.toolbar.help}}</span></button>'+ |
||||
'</div>'; |
||||
|
||||
var parametersTemplate =
|
||||
'<div class="inline">'+ |
||||
'<label>{{fr.njin.i18n.parameters.label.themes}}'+ |
||||
'<select name="themes" role="parameter">'+ |
||||
'<option value="pad">{{fr.njin.i18n.parameters.label.pad.themes}}</option>'+
|
||||
'<option value="slate">{{fr.njin.i18n.parameters.label.slate.themes}}</option>'+ |
||||
'<option value="none">{{fr.njin.i18n.parameters.label.none.themes}}</option>'+ |
||||
'</select>'+ |
||||
'</label>'+ |
||||
'</div>'+ |
||||
'<div class="inline">'+ |
||||
'<div>{{fr.njin.i18n.boite.parameters.label.count}}</div>'+ |
||||
'<input class="tiny" type="number" name="count" role="parameter"></div>'; |
||||
|
||||
|
||||
var objectTemplate =
|
||||
'<div id="{{object}}">'+ |
||||
'<!--<div class="tools">'+ |
||||
'<button role="duplicate">{{fr.njin.i18n.boite.parameters.label.duplicate}}</button>'+ |
||||
'<button role="remove">{{fr.njin.i18n.boite.parameters.label.remove}}</button>'+ |
||||
'</div>-->'+ |
||||
'</div>'; |
||||
@ -0,0 +1,64 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<title>D'n'd</title> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> |
||||
<link rel="stylesheet" type="text/css" href="../../css/basic.css"/> |
||||
<script type="text/javascript" src="../../js/jquery-1.6.2.min.js"></script> |
||||
<script type="text/javascript" src="../../js/jquery-ui-1.8.9.custom.min.js"></script> |
||||
<script type="text/javascript" src="../../js/easySlider1.5.js"></script> |
||||
<script type="text/javascript" src="js/script.js"></script> |
||||
<script type="text/javascript"> |
||||
$(document).ready(function(){ |
||||
if(window.sankore) |
||||
sankore.enableDropOnWidget(false); |
||||
start(); |
||||
}); |
||||
</script> |
||||
</head> |
||||
<body> |
||||
<table class="body_table" cellpadding=0 cellspacing=0> |
||||
<tr style="height: 54px;"> |
||||
<td class="b_top_left"> </td> |
||||
<td class="b_top_center"> |
||||
<div id="wgt_name"></div> |
||||
<div id="wgt_help"></div> |
||||
<div id="wgt_display" class="selected"></div> |
||||
<div id="wgt_edit"></div> |
||||
</td> |
||||
<td class="b_top_right"> </td> |
||||
</tr> |
||||
|
||||
<tr> |
||||
<td class="b_center_left"> </td> |
||||
<td> |
||||
<div id="help"></div> |
||||
<div id="slider"> |
||||
<div id="parameters"> |
||||
<div class="inline"> |
||||
<label> |
||||
<select id="style_select"> |
||||
<option value="1"></option> |
||||
<option value="2"></option> |
||||
<option value="3"></option> |
||||
</select> |
||||
</label> |
||||
</div> |
||||
</div> |
||||
<ul> |
||||
</ul> |
||||
</div> |
||||
<span id="prevBtn"><a href="javascript:void(0);"></a></span> |
||||
<span id="nextBtn"><a href="javascript:void(0);"></a></span> |
||||
</td> |
||||
<td class="b_center_right"> </td> |
||||
</tr> |
||||
|
||||
<tr style="height: 54px;"> |
||||
<td class="b_bottom_left"> </td> |
||||
<td class="b_bottom_center"> </td> |
||||
<td class="b_bottom_right"> </td> |
||||
</tr> |
||||
</table> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,686 @@ |
||||
var sankoreLang = { |
||||
display: "Display",
|
||||
edit: "Edit",
|
||||
text_content: "This is an example. Instead of this text you can put your own content.",
|
||||
new_txt: "New text block", |
||||
new_slide: "This is new slide.", |
||||
wgt_name: "Slider", |
||||
slate: "slate", |
||||
pad: "tablet", |
||||
none: "none", |
||||
help: "Help", |
||||
help_content:
|
||||
"<p><h2>Slider</h2></p>" + |
||||
"<p><h3>Booklet pages.</h3></p>" + |
||||
"<p>Slider is a booklet with pages. This booklet can be enriched with text, images, sound and videos.</p>" + |
||||
"<p>Enter the “Edit” mode to :</p>" + |
||||
"<ul><li>choose the theme of interactivity : pad, slate or none (none by default),</li>" + |
||||
"<li>edit the pages of the booklet.</li></ul>" + |
||||
"<p>On each page, you can :</p>" + |
||||
"<ul><li> insert text boxes with the “T+” on the left (to modify these text boxes, click inside the text and write),</li>" + |
||||
"<li>insert pictures, sounds and videos dragging and dropping files from the library,</li>" + |
||||
"<li>move texts, pictures, sounds and videos inside the page by clicking and dragging the multidirectional arrows located on the frame,</li>" + |
||||
"<li>enlarge the size of an element with the double arrow at the bottom right of the frame,</li>" + |
||||
"<li>delete an item with the “X”.</li></ul>" + |
||||
"<p>To add a page, click on the “+” green arrow at the bottom.</p>" + |
||||
"<p>To delete a page, click on the red cross.</p>" + |
||||
"<p>“Display” button comes back to the activity.</p>", |
||||
theme: "Theme" |
||||
}; |
||||
|
||||
//some flags
|
||||
var mouse_state = false; |
||||
|
||||
//object for resize
|
||||
var resize_obj = { |
||||
object: null, |
||||
top: 0, |
||||
left: 0, |
||||
clicked: false, |
||||
k: 0 |
||||
} |
||||
|
||||
//main function
|
||||
function start(){ |
||||
|
||||
$("#wgt_display").text(sankoreLang.display); |
||||
$("#wgt_edit").text(sankoreLang.edit); |
||||
$("#wgt_name").text(sankoreLang.wgt_name); |
||||
$("#wgt_help").text(sankoreLang.help); |
||||
$("#help").html(sankoreLang.help_content); |
||||
$("#style_select option[value='1']").text(sankoreLang.slate); |
||||
$("#style_select option[value='2']").text(sankoreLang.pad); |
||||
$("#style_select option[value='3']").text(sankoreLang.none); |
||||
var tmpl = $("div.inline label").html(); |
||||
$("div.inline label").html(sankoreLang.theme + tmpl) |
||||
|
||||
if(window.sankore){ |
||||
if(sankore.preference("etudier","")){ |
||||
var data = jQuery.parseJSON(sankore.preference("etudier","")); |
||||
importData(data); |
||||
} |
||||
else
|
||||
showExample(); |
||||
if(sankore.preference("etudier_style","")){ |
||||
changeStyle(sankore.preference("etudier_style","")); |
||||
$("#style_select").val(sankore.preference("etudier_style","")); |
||||
} else |
||||
changeStyle("3") |
||||
}
|
||||
else
|
||||
showExample(); |
||||
|
||||
//events
|
||||
if (window.widget) { |
||||
window.widget.onleave = function(){ |
||||
if(!$("#wgt_help").hasClass("open")){ |
||||
exportData(); |
||||
sankore.setPreference("etudier_style", $("#style_select").find("option:selected").val()); |
||||
sankore.setPreference("etudier_cur_page", $("#slider").getPage()); |
||||
sankore.setPreference("etudier_left_nav", $("#prevBtn a").css("display")); |
||||
sankore.setPreference("etudier_right_nav", $("#nextBtn a").css("display")); |
||||
} |
||||
} |
||||
} |
||||
|
||||
$("#style_select").change(function (event){ |
||||
changeStyle($(this).find("option:selected").val()); |
||||
}) |
||||
|
||||
$("#wgt_help").click(function(){ |
||||
var tmp = $(this); |
||||
if($(this).hasClass("open")){ |
||||
$(this).removeClass("help_pad").removeClass("help_wood") |
||||
$("#help").hide(); |
||||
tmp.removeClass("open"); |
||||
$("#slider").show(); |
||||
} else { |
||||
($("#style_select").val() == 1)?$(this).removeClass("help_pad").addClass("help_wood"):$(this).removeClass("help_wood").addClass("help_pad"); |
||||
exportData(); |
||||
sankore.setPreference("etudier_style", $("#style_select").find("option:selected").val()); |
||||
sankore.setPreference("etudier_cur_page", $("#slider").getPage()); |
||||
sankore.setPreference("etudier_left_nav", $("#prevBtn a").css("display")); |
||||
sankore.setPreference("etudier_right_nav", $("#nextBtn a").css("display"));
|
||||
$("#slider").hide(); |
||||
$("#help").show(); |
||||
tmp.addClass("open"); |
||||
} |
||||
}); |
||||
|
||||
$("#wgt_display, #wgt_edit").click(function(event){ |
||||
if(this.id == "wgt_display"){ |
||||
if(!$(this).hasClass("selected")){ |
||||
if(window.sankore) |
||||
sankore.enableDropOnWidget(false); |
||||
$(this).addClass("selected"); |
||||
$("#wgt_edit").removeClass("selected"); |
||||
$("#parameters").css("display","none"); |
||||
var tmpwh = $(window).height(); |
||||
var tmpww = $(window).width(); |
||||
window.resizeTo(tmpww, tmpwh - 44) |
||||
$("#slider li>div").each(function(){ |
||||
var container = $(this); |
||||
container.removeAttr("ondragenter") |
||||
.removeAttr("ondragleave") |
||||
.removeAttr("ondragover") |
||||
.removeAttr("ondrop"); |
||||
|
||||
container.find(".text_block").each(function(){ |
||||
$(this).draggable(); |
||||
$(this).find(".move_block").remove(); |
||||
$(this).find(".close_img").remove(); |
||||
$(this).find(".size_up").remove(); |
||||
$(this).find(".size_down").remove(); |
||||
$(this).find(".resize_block").remove(); |
||||
$(this).find(".real_text").removeAttr("contenteditable"); |
||||
$(this).removeClass("block_border"); |
||||
$(this).css("position","absolute"); |
||||
}); |
||||
|
||||
container.find(".img_block").each(function(){ |
||||
$(this).draggable(); |
||||
$(this).find(".close_img").remove(); |
||||
$(this).find(".move_block").remove(); |
||||
$(this).find(".resize_block").remove(); |
||||
$(this).removeClass("block_border"); |
||||
$(this).css("position","absolute"); |
||||
}); |
||||
|
||||
container.find(".audio_block").each(function(){ |
||||
$(this).find(".close_img").remove(); |
||||
$(this).removeClass("block_border"); |
||||
$(this).css("position","absolute"); |
||||
}); |
||||
|
||||
container.find(".add_left").remove(); |
||||
container.find(".add_right").remove(); |
||||
container.find(".close_slide").remove(); |
||||
container.find(".add_text").remove(); |
||||
}); |
||||
$(this).css("display", "none"); |
||||
$("#wgt_edit").css("display", "block"); |
||||
} |
||||
} else {
|
||||
if(!$(this).hasClass("selected")){ |
||||
if(window.sankore) |
||||
sankore.enableDropOnWidget(true); |
||||
$(this).addClass("selected"); |
||||
$("#wgt_display").removeClass("selected"); |
||||
$("#parameters").css("display","block"); |
||||
tmpwh = $(window).height(); |
||||
tmpww = $(window).width(); |
||||
window.resizeTo(tmpww, tmpwh + 44) |
||||
$("#slider li>div").each(function(){ |
||||
var container = $(this); |
||||
container.attr("ondragenter", "return false;") |
||||
.attr("ondragleave", "$(this).css(\"background\",\"none\"); return false;") |
||||
.attr("ondragover", "$(this).css(\"background-color\",\"#ccc\"); return false;") |
||||
.attr("ondrop", "$(this).css(\"background\",\"none\"); return onDropTarget(this,event);"); |
||||
|
||||
container.find(".text_block").each(function(){ |
||||
$(this).draggable("destroy"); |
||||
$("<div class='move_block' contenteditable='false'>").appendTo($(this)); |
||||
$("<div class='close_img' contenteditable='false'>").appendTo($(this)); |
||||
$("<div class='size_up' contenteditable='false'>").appendTo($(this)); |
||||
$("<div class='size_down' contenteditable='false'>").appendTo($(this)); |
||||
$("<div class='resize_block' contenteditable='false'>").appendTo($(this)); |
||||
$(this).find(".real_text").attr("contenteditable", "true"); |
||||
$(this).addClass("block_border"); |
||||
}); |
||||
|
||||
container.find(".img_block").each(function(){ |
||||
$(this).draggable("destroy"); |
||||
$("<div class='move_block' contenteditable='false'>").appendTo($(this)); |
||||
$("<div class='close_img' contenteditable='false'>").appendTo($(this)); |
||||
$("<div class='resize_block' contenteditable='false'>").appendTo($(this)); |
||||
$(this).addClass("block_border"); |
||||
}); |
||||
|
||||
container.find(".audio_block").each(function(){ |
||||
$("<div class='close_img' contenteditable='false'>").appendTo($(this)); |
||||
$(this).addClass("block_border"); |
||||
}); |
||||
|
||||
$("<div class='add_left'>").appendTo(container); |
||||
$("<div class='add_right'>").appendTo(container); |
||||
$("<div class='close_slide'>").appendTo(container); |
||||
$("<div class='add_text'>").appendTo(container); |
||||
$(window).trigger("resize") |
||||
});
|
||||
$(this).css("display", "none"); |
||||
$("#wgt_display").css("display", "block"); |
||||
} |
||||
} |
||||
|
||||
$("audio").each(function(){ |
||||
this.pause(); |
||||
$(this).parent().find(":first-child").removeClass("stop").addClass("play"); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
//deleting the img block
|
||||
$(".close_img").live("click", function(){
|
||||
$(this).parent().remove();
|
||||
}); |
||||
|
||||
//increase a size of text
|
||||
$(".size_up").live("click", function(){ |
||||
$(this).parent().height(""); |
||||
var fz = parseInt($(this).parent().css("font-size").replace("px", "")); |
||||
$(this).parent().css("font-size", fz+1 + "px"); |
||||
}); |
||||
|
||||
//decrease a size of text
|
||||
$(".size_down").live("click", function(){
|
||||
var fz = parseInt($(this).parent().css("font-size").replace("px", "")); |
||||
fz = ((fz - 1) < 8)?8:fz-1; |
||||
$(this).parent().css("font-size", fz + "px");
|
||||
}); |
||||
|
||||
//play/pause event
|
||||
$(".play, .stop").live("click", function(){ |
||||
var tmp_audio = $(this); |
||||
var audio = tmp_audio.parent().find("audio").get(0); |
||||
if($(this).hasClass("play")){
|
||||
if(tmp_audio.parent().find("source").attr("src")){ |
||||
tmp_audio.removeClass("play").addClass("stop"); |
||||
var id = setInterval(function(){ |
||||
if(audio.currentTime == audio.duration){ |
||||
clearInterval(id); |
||||
tmp_audio.removeClass("stop").addClass("play"); |
||||
} |
||||
}, 10); |
||||
tmp_audio.parent().find("input").val(id); |
||||
audio.play(); |
||||
} |
||||
} else { |
||||
$(this).removeClass("stop").addClass("play"); |
||||
clearInterval( tmp_audio.parent().find("input").val()) |
||||
audio.pause(); |
||||
} |
||||
}); |
||||
|
||||
$(".replay").live("click", function(){ |
||||
var tmp_audio = $(this).prev(); |
||||
var audio = $(this).parent().find("audio").get(0);
|
||||
if(tmp_audio.parent().find("source").attr("src")){ |
||||
$(this).prev().removeClass("play").addClass("stop"); |
||||
clearInterval($(this).parent().find("input").val()); |
||||
var id = setInterval(function(){ |
||||
if(audio.currentTime == audio.duration){ |
||||
clearInterval(id); |
||||
tmp_audio.removeClass("stop").addClass("play"); |
||||
} |
||||
}, 10); |
||||
tmp_audio.parent().find("input").val(id); |
||||
audio.currentTime = 0; |
||||
audio.play(); |
||||
} |
||||
}); |
||||
|
||||
//moving objects
|
||||
$(".move_block").live("mouseover",function(){ |
||||
$(this).parent().draggable(); |
||||
}); |
||||
|
||||
$(".move_block").live("mouseleave",function(){ |
||||
if(!mouse_state) |
||||
$(this).parent().draggable("destroy"); |
||||
}); |
||||
|
||||
$(".move_block").live("mousedown",function(){ |
||||
mouse_state = true; |
||||
}); |
||||
|
||||
$(".move_block").live("mouseup",function(){ |
||||
mouse_state = false; |
||||
}); |
||||
|
||||
//resize block
|
||||
$(".resize_block").live("mousedown", function(){ |
||||
resize_obj.object = $(this); |
||||
resize_obj.top = event.clientY; |
||||
resize_obj.left = event.clientX; |
||||
resize_obj.clicked = true; |
||||
if($(this).parent().hasClass("img_block")) |
||||
resize_obj.k = $(this).parent().find("img").width() / $(this).parent().find("img").height(); |
||||
}) |
||||
|
||||
$("li>div").live("mouseup", function(){ |
||||
resize_obj.object = null; |
||||
resize_obj.top = 0; |
||||
resize_obj.left = 0; |
||||
resize_obj.clicked = false; |
||||
}) |
||||
|
||||
$("li>div").live("mousemove", function(){ |
||||
if(resize_obj.clicked){ |
||||
if(resize_obj.object.parent().hasClass("text_block")){
|
||||
var width = resize_obj.object.parent().width() - resize_obj.left + event.clientX; |
||||
resize_obj.left = event.clientX; |
||||
resize_obj.top = event.clientY; |
||||
resize_obj.object.parent().width(width).height(""); |
||||
} else { |
||||
var img_width = resize_obj.object.parent().find("img").width() - resize_obj.left + event.clientX; |
||||
var img_height = img_width / resize_obj.k; |
||||
resize_obj.left = event.clientX; |
||||
resize_obj.top = event.clientY; |
||||
resize_obj.object.parent().find("img").width(img_width).height(img_height); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
//closing a slide
|
||||
$(".close_slide").live("click", function(){ |
||||
$(this).parent().parent().remove(); |
||||
$("#slider").removeSlide(); |
||||
}); |
||||
|
||||
//adding new slides
|
||||
$(".add_left").live("click", function(){ |
||||
var cur_li = $(this).parent().parent(); |
||||
var new_li = $("<li>"); |
||||
new_li.width(cur_li.width()).height(cur_li.height()).css("float","left"); |
||||
var new_div = $("<div>").appendTo(new_li); |
||||
new_div.attr("ondragenter", "return false;") |
||||
.attr("ondragleave", "$(this).css(\"background-color\",\"\"); return false;") |
||||
.attr("ondragover", "$(this).css(\"background-color\",\"#ccc\"); return false;") |
||||
.attr("ondrop", "$(this).css(\"background-color\",\"\"); return onDropTarget(this,event);"); |
||||
var example = $("<div class='text_block' style='position: absolute;'>").addClass("block_border"); |
||||
$("<div class='real_text' contenteditable='true'>" + sankoreLang.new_slide + "</div>").appendTo(example); |
||||
$("<div class='move_block' contenteditable='false'>").appendTo(example); |
||||
$("<div class='close_img' contenteditable='false'>").appendTo(example); |
||||
$("<div class='size_up' contenteditable='false'>").appendTo(example); |
||||
$("<div class='size_down' contenteditable='false'>").appendTo(example); |
||||
$("<div class='resize_block' contenteditable='false'>").appendTo(example); |
||||
example.css("top","40%").css("left","40%"); |
||||
new_div.append(example); |
||||
$("<div class='add_left'>").appendTo(new_div); |
||||
$("<div class='add_right'>").appendTo(new_div); |
||||
$("<div class='close_slide'>").appendTo(new_div); |
||||
$("<div class='add_text'>").appendTo(new_div); |
||||
new_li.insertBefore(cur_li); |
||||
$("#slider").addSlide("before"); |
||||
}); |
||||
|
||||
$(".add_right").live("click", function(){ |
||||
var cur_li = $(this).parent().parent(); |
||||
var new_li = $("<li>"); |
||||
new_li.width(cur_li.width()).height(cur_li.height()).css("float","left"); |
||||
var new_div = $("<div>").appendTo(new_li); |
||||
new_div.attr("ondragenter", "return false;") |
||||
.attr("ondragleave", "$(this).css(\"background-color\",\"\"); return false;") |
||||
.attr("ondragover", "$(this).css(\"background-color\",\"#ccc\"); return false;") |
||||
.attr("ondrop", "$(this).css(\"background-color\",\"\"); return onDropTarget(this,event);"); |
||||
var example = $("<div class='text_block' style='position: absolute;'>").addClass("block_border"); |
||||
$("<div class='real_text' contenteditable='true'>" + sankoreLang.new_slide + "</div>").appendTo(example); |
||||
$("<div class='move_block' contenteditable='false'>").appendTo(example); |
||||
$("<div class='close_img' contenteditable='false'>").appendTo(example); |
||||
$("<div class='size_up' contenteditable='false'>").appendTo(example); |
||||
$("<div class='size_down' contenteditable='false'>").appendTo(example); |
||||
$("<div class='resize_block' contenteditable='false'>").appendTo(example); |
||||
example.css("top","40%").css("left","40%"); |
||||
new_div.append(example); |
||||
$("<div class='add_left'>").appendTo(new_div); |
||||
$("<div class='add_right'>").appendTo(new_div); |
||||
$("<div class='close_slide'>").appendTo(new_div); |
||||
$("<div class='add_text'>").appendTo(new_div); |
||||
new_li.insertAfter(cur_li); |
||||
$("#slider").addSlide("after"); |
||||
}); |
||||
|
||||
$(".add_text").live("click", function(){ |
||||
var container = $(this).parent(); |
||||
var text_block = $("<div class='text_block'><div class='real_text' contenteditable='true'>" + sankoreLang.new_txt + "</div></div>").appendTo(container); |
||||
$("<div class='move_block' contenteditable='false'>").appendTo(text_block); |
||||
$("<div class='close_img' contenteditable='false'>").appendTo(text_block); |
||||
$("<div class='size_up' contenteditable='false'>").appendTo(text_block); |
||||
$("<div class='size_down' contenteditable='false'>").appendTo(text_block); |
||||
$("<div class='resize_block' contenteditable='false'>").appendTo(text_block); |
||||
text_block.addClass("block_border"); |
||||
}); |
||||
} |
||||
|
||||
//export
|
||||
function exportData(){ |
||||
var array_to_export = []; |
||||
$("#slider li>div").each(function(){ |
||||
var cont_obj = new Object(); |
||||
cont_obj.w = $(this).parent().width(); |
||||
cont_obj.h = $(this).parent().height(); |
||||
cont_obj.text = []; |
||||
$(this).find(".text_block").each(function(){ |
||||
var txt_block = new Object(); |
||||
txt_block.top = $(this).position().top; |
||||
txt_block.left = $(this).position().left; |
||||
txt_block.w = $(this).width(); |
||||
txt_block.fz = $(this).css("font-size"); |
||||
txt_block.val = $(this).find(".real_text").html(); |
||||
cont_obj.text.push(txt_block); |
||||
}); |
||||
cont_obj.imgs = []; |
||||
$(this).find(".img_block").each(function(){ |
||||
var img_obj = new Object(); |
||||
img_obj.link = $(this).find("img").attr("src").replace("../../",""); |
||||
img_obj.h = $(this).find("img").height(); |
||||
img_obj.w = $(this).find("img").width(); |
||||
img_obj.top = $(this).position().top; |
||||
img_obj.left = $(this).position().left; |
||||
cont_obj.imgs.push(img_obj); |
||||
}); |
||||
cont_obj.audio = []; |
||||
$(this).find(".audio_block").each(function(){ |
||||
var audio_block = new Object(); |
||||
audio_block.top = $(this).position().top; |
||||
audio_block.left = $(this).position().left; |
||||
audio_block.val = $(this).find("source").attr("src").replace("../../",""); |
||||
cont_obj.audio.push(audio_block); |
||||
}); |
||||
array_to_export.push(cont_obj); |
||||
}); |
||||
sankore.setPreference("etudier", JSON.stringify(array_to_export)); |
||||
} |
||||
|
||||
//import
|
||||
function importData(data){ |
||||
|
||||
var width = 0; |
||||
var height = 0; |
||||
|
||||
for(var i in data){ |
||||
|
||||
width = data[i].w; |
||||
height = data[i].h; |
||||
var li = $("<li style='float: left; width: " + data[i].w + "; height: " + data[i].h + ";'>"); |
||||
var div = $("<div>").appendTo(li); |
||||
|
||||
for(var j in data[i].text){ |
||||
var text_div = $("<div class='text_block'><div class='real_text'>" + data[i].text[j].val + "</div></div>"); |
||||
text_div.draggable().css("position","absolute") |
||||
.width(data[i].text[j].w) |
||||
.css("top", data[i].text[j].top) |
||||
.css("left", data[i].text[j].left) |
||||
.css("font-size", data[i].text[j].fz) |
||||
.appendTo(div); |
||||
} |
||||
|
||||
for(j in data[i].imgs){ |
||||
var img_div = $("<div class='img_block' style='text-align: center;'>");
|
||||
img_div.draggable().css("position","absolute") |
||||
.css("top", data[i].imgs[j].top) |
||||
.css("left", data[i].imgs[j].left) |
||||
.appendTo(div); |
||||
$("<img src='../../" + data[i].imgs[j].link + "' style='display: inline;' width='" + data[i].imgs[j].w + "' height='" + data[i].imgs[j].h + "'/>").appendTo(img_div); |
||||
} |
||||
|
||||
for(j in data[i].audio){ |
||||
var audio_div = $("<div class='audio_block'>"); |
||||
$("<div class='play'>").appendTo(audio_div); |
||||
$("<div class='replay'>").appendTo(audio_div); |
||||
var tmp_audio = $("<audio>").appendTo(audio_div); |
||||
$("<source src='../../" + data[i].audio[j].val + "' />").appendTo(tmp_audio); |
||||
audio_div.draggable().css("position","absolute") |
||||
.css("top", data[i].audio[j].top) |
||||
.css("left", data[i].audio[j].left) |
||||
.appendTo(div); |
||||
} |
||||
|
||||
$("#slider ul").append(li);
|
||||
} |
||||
|
||||
$(window).trigger("resize") |
||||
$("#slider").width(width).height(height).easySlider({ |
||||
prevText: '', |
||||
nextText: '', |
||||
controlsShow: false |
||||
}); |
||||
$("#slider").goToSlide(sankore.preference("etudier_cur_page","")); |
||||
$("#prevBtn a").css("display", sankore.preference("etudier_left_nav","")); |
||||
$("#nextBtn a").css("display", sankore.preference("etudier_right_nav","")); |
||||
} |
||||
|
||||
//example
|
||||
function showExample(){ |
||||
|
||||
var li1 = $("<li>"); |
||||
var div1 = $("<div>").appendTo(li1); |
||||
$("<div class='text_block'><div class='real_text'>" + sankoreLang.text_content + "</div></div>").draggable().appendTo(div1) |
||||
li1.width($("#slider").width()).height($("#slider").height()); |
||||
$("#slider ul").append(li1); |
||||
var li2 = $("<li>"); |
||||
var div2 = $("<div>").appendTo(li2); |
||||
var img = $("<div class='img_block' style='text-align: center;'></div>").draggable().appendTo(div2); |
||||
$("<img src=\"../../objects/1.gif\" style=\"display: inline;\" height=\"120\"/>").appendTo(img); |
||||
li2.width($("#slider").width()).height($("#slider").height()); |
||||
$("#slider ul").append(li2); |
||||
var li3 = $("<li>"); |
||||
var div3 = $("<div>").appendTo(li3); |
||||
li3.width($("#slider").width()).height($("#slider").height()); |
||||
$("<div class='text_block'><div class='real_text'>" + sankoreLang.text_content + "</div></div>").draggable().appendTo(div3); |
||||
var audio_block = $("<div class='audio_block'>").draggable().appendTo(div3); |
||||
$("<div class='play'>").appendTo(audio_block); |
||||
$("<div class='replay'>").appendTo(audio_block); |
||||
var source = $("<source/>").attr("src", "../../objects/bateaux.mp3"); |
||||
var audio = $("<audio>").appendTo(audio_block); |
||||
audio.append(source); |
||||
$("#slider ul").append(li3); |
||||
var li4 = $("<li>"); |
||||
var div4 = $("<div>").appendTo(li4); |
||||
$("<div class='text_block'><div class='real_text'>" + sankoreLang.text_content + "</div></div>").draggable().appendTo(div4); |
||||
var img2 = $("<div class='img_block' style='text-align: center;'></div>").draggable().appendTo(div4); |
||||
$("<img src=\"../../objects/1.gif\" style=\"display: inline;\" height=\"120\"/>").appendTo(img2); |
||||
var audio_block2 = $("<div class='audio_block'>").draggable().appendTo(div4); |
||||
$("<div class='play'>").appendTo(audio_block2); |
||||
$("<div class='replay'>").appendTo(audio_block2); |
||||
var source2 = $("<source/>").attr("src", "../../objects/bateaux.mp3"); |
||||
var audio2 = $("<audio>").appendTo(audio_block2); |
||||
audio2.append(source2); |
||||
li4.width($("#slider").width()).height($("#slider").height()); |
||||
$("#slider ul").append(li4); |
||||
$(".text_block, .audio_block, .img_block").each(function(){ |
||||
$(this).css("position","absolute"); |
||||
}); |
||||
$("#slider").easySlider({ |
||||
prevText: '', |
||||
nextText: '', |
||||
controlsShow: false |
||||
}); |
||||
} |
||||
|
||||
//string into xml-format
|
||||
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; |
||||
} |
||||
|
||||
//changing the style
|
||||
function changeStyle(val){ |
||||
switch(val){ |
||||
case "1": |
||||
$(".b_top_left").removeClass("btl_pad").removeClass("without_back"); |
||||
$(".b_top_center").removeClass("btc_pad").removeClass("without_back"); |
||||
$(".b_top_right").removeClass("btr_pad").removeClass("without_back"); |
||||
$(".b_center_left").removeClass("bcl_pad").removeClass("without_back"); |
||||
$(".b_center_right").removeClass("bcr_pad").removeClass("without_back"); |
||||
$(".b_bottom_right").removeClass("bbr_pad").removeClass("without_back"); |
||||
$(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back"); |
||||
$(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back"); |
||||
$("#wgt_help").removeClass("pad_color").removeClass("pad_help"); |
||||
$("#wgt_edit").removeClass("pad_color").removeClass("pad_edit"); |
||||
$("#wgt_name").removeClass("pad_color"); |
||||
$("#wgt_display").addClass("display_wood"); |
||||
$("#style_select").val(val); |
||||
$("body, html").removeClass("without_radius").addClass("radius_ft"); |
||||
break; |
||||
case "2": |
||||
$(".b_top_left").addClass("btl_pad").removeClass("without_back"); |
||||
$(".b_top_center").addClass("btc_pad").removeClass("without_back"); |
||||
$(".b_top_right").addClass("btr_pad").removeClass("without_back"); |
||||
$(".b_center_left").addClass("bcl_pad").removeClass("without_back"); |
||||
$(".b_center_right").addClass("bcr_pad").removeClass("without_back"); |
||||
$(".b_bottom_right").addClass("bbr_pad").removeClass("without_back"); |
||||
$(".b_bottom_left").addClass("bbl_pad").removeClass("without_back"); |
||||
$(".b_bottom_center").addClass("bbc_pad").removeClass("without_back"); |
||||
$("#wgt_help").addClass("pad_color").addClass("pad_help"); |
||||
$("#wgt_edit").addClass("pad_color").addClass("pad_edit"); |
||||
$("#wgt_name").addClass("pad_color"); |
||||
$("#wgt_display").removeClass("display_wood"); |
||||
$("#style_select").val(val); |
||||
$("body, html").removeClass("without_radius").removeClass("radius_ft"); |
||||
break; |
||||
case "3": |
||||
$(".b_top_left").addClass("without_back").removeClass("btl_pad"); |
||||
$(".b_top_center").addClass("without_back").removeClass("btc_pad"); |
||||
$(".b_top_right").addClass("without_back").removeClass("btr_pad"); |
||||
$(".b_center_left").addClass("without_back").removeClass("bcl_pad"); |
||||
$(".b_center_right").addClass("without_back").removeClass("bcr_pad"); |
||||
$(".b_bottom_right").addClass("without_back").removeClass("bbr_pad"); |
||||
$(".b_bottom_left").addClass("without_back").removeClass("bbl_pad"); |
||||
$(".b_bottom_center").addClass("without_back").removeClass("bbc_pad"); |
||||
$("#wgt_help").addClass("pad_color").addClass("pad_help"); |
||||
$("#wgt_edit").addClass("pad_color").addClass("pad_edit"); |
||||
$("#wgt_name").addClass("pad_color"); |
||||
$("#wgt_display").removeClass("display_wood"); |
||||
$("#style_select").val(val); |
||||
$("body, html").addClass("without_radius").removeClass("radius_ft"); |
||||
break; |
||||
} |
||||
} |
||||
|
||||
//drop handler
|
||||
function onDropTarget(obj, event) { |
||||
if (event.dataTransfer) { |
||||
var format = "text/plain"; |
||||
var textData = event.dataTransfer.getData(format); |
||||
if (!textData) { |
||||
alert(":("); |
||||
} |
||||
textData = stringToXML(textData); |
||||
var tmp = textData.getElementsByTagName("path")[0].firstChild.textContent; |
||||
var tmp_type = textData.getElementsByTagName("type")[0].firstChild.textContent; |
||||
if(tmp_type.substr(0, 5) == "audio"){
|
||||
var audio_block = $("<div class='audio_block'>").draggable().appendTo($(obj)); |
||||
audio_block.css("position","absolute").css("top",event.clientY - 54).css("left",event.clientX - 54); |
||||
$("<div class='close_img' contenteditable='false'>").appendTo(audio_block); |
||||
audio_block.addClass("block_border"); |
||||
$("<div class='play'>").appendTo(audio_block); |
||||
$("<div class='replay'>").appendTo(audio_block); |
||||
var source = $("<source/>").attr("src", "../../" + tmp); |
||||
var audio = $("<audio>").appendTo(audio_block); |
||||
audio.append(source); |
||||
} else { |
||||
var img_block = $("<div class='img_block' style='text-align: center;'></div>").appendTo($(obj)); |
||||
img_block.css("top",event.clientY - 54).css("left",event.clientX - 54); |
||||
$("<div class='move_block' contenteditable='false'>").appendTo(img_block); |
||||
$("<div class='close_img' contenteditable='false'>").appendTo(img_block); |
||||
$("<div class='resize_block' contenteditable='false'>").appendTo(img_block); |
||||
img_block.addClass("block_border"); |
||||
var tmp_img = $("<img src=\"../../" + tmp + "\" style=\"display: inline;\"/>").appendTo(img_block); |
||||
setTimeout(function(){ |
||||
if(tmp_img.height() >= tmp_img.width()) |
||||
tmp_img.attr("height", "120"); |
||||
else{ |
||||
tmp_img.attr("width","120"); |
||||
tmp_img.css("margin",(120 - tmp_img.height())/2 + "px 0"); |
||||
} |
||||
}, 6) |
||||
} |
||||
} |
||||
else { |
||||
alert ("Your browser does not support the dataTransfer object."); |
||||
} |
||||
|
||||
if (event.stopPropagation) { |
||||
event.stopPropagation (); |
||||
} |
||||
else { |
||||
event.cancelBubble = true; |
||||
} |
||||
return false; |
||||
} |
||||
|
||||
if (window.widget) { |
||||
window.widget.onremove = function(){ |
||||
$("audio").each(function(){ |
||||
this.pause(); |
||||
$(this).parent().find(":first-child").removeClass("stop").addClass("play"); |
||||
}); |
||||
} |
||||
} |
||||
|
||||
$(window).resize(function(){ |
||||
var slider = $("#slider"); |
||||
slider.width($(this).width() - 108).height($(this).height() - 108); |
||||
$("#slider li").each(function(){ |
||||
$(this).width(slider.width()).height(slider.height()); |
||||
}); |
||||
slider.setSize(slider.width(), slider.height()); |
||||
}) |
||||
|
After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1,61 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<title>D'n'd</title> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> |
||||
<link rel="stylesheet" type="text/css" href="../../css/basic.css"/> |
||||
<script type="text/javascript" src="../../js/jquery-1.6.2.min.js"></script> |
||||
<script type="text/javascript" src="../../js/jquery-ui-1.8.9.custom.min.js"></script> |
||||
<script type="text/javascript" src="js/script.js"></script> |
||||
<script type="text/javascript"> |
||||
$(document).ready(function(){ |
||||
if(window.sankore) |
||||
sankore.enableDropOnWidget(false); |
||||
start(); |
||||
}); |
||||
</script> |
||||
</head> |
||||
<body> |
||||
<table class="body_table" cellpadding=0 cellspacing=0> |
||||
<tr style="height: 54px;"> |
||||
<td class="b_top_left"> </td> |
||||
<td class="b_top_center"> |
||||
<div id="wgt_name"></div> |
||||
<div id="wgt_help"></div> |
||||
<div id="wgt_reload"></div> |
||||
<div id="wgt_display" class="selected"></div> |
||||
<div id="wgt_edit"></div> |
||||
</td> |
||||
<td class="b_top_right"> </td> |
||||
</tr> |
||||
|
||||
<tr> |
||||
<td class="b_center_left"> </td> |
||||
<td> |
||||
<div id="help"></div> |
||||
<div id="data"> |
||||
<div id="parameters"> |
||||
<div class="inline"> |
||||
<label> |
||||
<select id="style_select"> |
||||
<option value="1"></option> |
||||
<option value="2"></option> |
||||
<option value="3"></option> |
||||
</select> |
||||
</label> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</td> |
||||
<td class="b_center_right"> </td> |
||||
</tr> |
||||
|
||||
<tr style="height: 54px;"> |
||||
<td class="b_bottom_left"> </td> |
||||
<td class="b_bottom_center"> </td> |
||||
<td class="b_bottom_right"> </td> |
||||
</tr> |
||||
</table> |
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,565 @@ |
||||
var sankoreLang = { |
||||
display: "Display",
|
||||
edit: "Edit",
|
||||
short_desc: "Place the pictures in ascending order.",
|
||||
add: "Add new block", |
||||
enter: "Enter your instruction here ...", |
||||
wgt_name: "Order pictures", |
||||
reload: "Reload", |
||||
slate: "slate", |
||||
pad: "pad", |
||||
none: "none", |
||||
help: "Help", |
||||
help_content:
|
||||
"<p> <h2> Order pictures </h2> </p>" + |
||||
"<p> <h3> Sort pictures in the order requested</h3> </p>" + |
||||
|
||||
"<p> The number on the frame indicates the order in which the images should be classified. Drag and drop to rank pictures. Once all pictures are correctly classified, the area turns in green. </p> "+ |
||||
"<p> Reload “button resets the exercises. </p>" + |
||||
|
||||
"<p> Enter the “Edit” mode to : </p>" + |
||||
"<ul> <li> choose the theme of interactivity : pad, slate or none (by default : none),</li>" + |
||||
"<li> modify the exercise. </li></ul>" + |
||||
|
||||
"<p>In edition mode : </p>" + |
||||
"<ul><li> modify the instruction clicking on the text field,</li>" + |
||||
"<li> add picture frames clicking on the “+”,</li>" + |
||||
"<li> drag an drop pictures from your library,</li>" + |
||||
"<li> change the order of images by dragging them,</li>" + |
||||
"<li> delete a frame, clicking the cross (X),</li>" + |
||||
"<li> change a picture clicking the “reload” button on the frame,</li>" + |
||||
"<li> “Display” button comes back to the activity.</li> </ul>", |
||||
theme: "Theme" |
||||
}; |
||||
|
||||
//main function
|
||||
function start(){ |
||||
|
||||
$("#wgt_display").text(sankoreLang.display); |
||||
$("#wgt_edit").text(sankoreLang.edit); |
||||
$("#wgt_name").text(sankoreLang.wgt_name); |
||||
$("#wgt_reload").text(sankoreLang.reload); |
||||
$("#wgt_help").text(sankoreLang.help); |
||||
$("#help").html(sankoreLang.help_content); |
||||
$("#style_select option[value='1']").text(sankoreLang.slate); |
||||
$("#style_select option[value='2']").text(sankoreLang.pad); |
||||
$("#style_select option[value='3']").text(sankoreLang.none); |
||||
var tmpl = $("div.inline label").html(); |
||||
$("div.inline label").html(sankoreLang.theme + tmpl) |
||||
|
||||
if(window.sankore){ |
||||
if(sankore.preference("odr_des_imgs","")){ |
||||
var data = jQuery.parseJSON(sankore.preference("odr_des_imgs","")); |
||||
importData(data); |
||||
} else { |
||||
showExample(); |
||||
} |
||||
}
|
||||
else
|
||||
showExample(); |
||||
|
||||
//events
|
||||
if (window.widget) { |
||||
window.widget.onleave = function(){ |
||||
exportData(); |
||||
} |
||||
} |
||||
|
||||
$("#wgt_help").click(function(){ |
||||
var tmp = $(this); |
||||
if($(this).hasClass("open")){ |
||||
$(this).removeClass("help_pad").removeClass("help_wood") |
||||
$("#help").slideUp("100", function(){ |
||||
tmp.removeClass("open"); |
||||
$("#data").show(); |
||||
}); |
||||
} else { |
||||
($("#style_select").val() == 1)?$(this).removeClass("help_pad").addClass("help_wood"):$(this).removeClass("help_wood").addClass("help_pad"); |
||||
$("#data").hide(); |
||||
$("#help").slideDown("100", function(){ |
||||
tmp.addClass("open"); |
||||
}); |
||||
} |
||||
}); |
||||
|
||||
$("#wgt_reload").click(function(){ |
||||
if($("#wgt_display").hasClass("selected")){ |
||||
$("#wgt_edit").trigger("click"); |
||||
$("#wgt_display").trigger("click"); |
||||
} else { |
||||
$("#wgt_display").trigger("click"); |
||||
} |
||||
}); |
||||
|
||||
$("#wgt_reload, #wgt_display, #wgt_edit").mouseover(function(){ |
||||
exportData(); |
||||
}); |
||||
|
||||
$("#style_select").change(function (event){ |
||||
changeStyle($(this).find("option:selected").val()); |
||||
}) |
||||
|
||||
$("#wgt_display, #wgt_edit").click(function(event){ |
||||
if(this.id == "wgt_display"){ |
||||
if(!$(this).hasClass("selected")){ |
||||
if(window.sankore) |
||||
sankore.enableDropOnWidget(false); |
||||
$(this).addClass("selected"); |
||||
$("#wgt_edit").removeClass("selected"); |
||||
$("#parameters").css("display","none"); |
||||
// $(".add_block").remove();
|
||||
$(".cont").each(function(){ |
||||
var container = $(this); |
||||
var tmp_i = 0; |
||||
var tmp_right = ""; |
||||
var tmp_array = []; |
||||
|
||||
container.find(".text_cont").removeAttr("contenteditable"); |
||||
container.find(".add_img").remove(); |
||||
// container.find(".close_cont").remove();
|
||||
container.find(".img_block").each(function(){ |
||||
if($(this).find("img").attr("src") != "img/drop_img.png"){ |
||||
$(this).find(".close_img").remove(); |
||||
$(this).find(".clear_img").remove(); |
||||
$(this).find(".numb_img").remove(); |
||||
$(this).removeAttr("ondragenter") |
||||
.removeAttr("ondragleave") |
||||
.removeAttr("ondragover") |
||||
.removeAttr("ondrop"); |
||||
$(this).find("input").val(++tmp_i) |
||||
tmp_right += tmp_i + "*"; |
||||
} else
|
||||
$(this).remove(); |
||||
}); |
||||
container.find(".imgs_cont>input").val(tmp_right); |
||||
|
||||
container.find(".img_block").each(function(){ |
||||
$(this).css("float",""); |
||||
tmp_array.push($(this)); |
||||
});
|
||||
tmp_array = shuffle(tmp_array); |
||||
for(var i = 0; i<tmp_array.length;i++) |
||||
tmp_array[i].appendTo(container.find(".imgs_cont")); |
||||
container.find(".imgs_cont").sortable( { |
||||
update: checkResult |
||||
} ); |
||||
}); |
||||
$(this).css("display", "none"); |
||||
$("#wgt_edit").css("display", "block"); |
||||
} |
||||
} else {
|
||||
if(!$(this).hasClass("selected")){ |
||||
if(window.sankore) |
||||
sankore.enableDropOnWidget(true); |
||||
$(this).addClass("selected"); |
||||
$("#wgt_display").removeClass("selected"); |
||||
$("#parameters").css("display","block"); |
||||
$(".cont").each(function(){ |
||||
var container = $(this); |
||||
|
||||
// $("<div class='close_cont'>").appendTo(container);
|
||||
container.find(".text_cont").attr("contenteditable","true"); |
||||
//container.find(".imgs_cont").sortable("destroy");
|
||||
container.find(".imgs_cont").css("background-color", ""); |
||||
|
||||
var add_img = $("<div class='add_img'>"); |
||||
container.find(".img_block").each(function(){ |
||||
$(this).attr("ondragenter", "return false;") |
||||
.attr("ondragleave", "$(this).css(\"background-color\",\"\"); return false;") |
||||
.attr("ondragover", "$(this).css(\"background-color\",\"#ccc\"); return false;") |
||||
.attr("ondrop", "$(this).css(\"background-color\",\"\"); return onDropTarget(this,event);") |
||||
//.css("float","left");
|
||||
$("<div class='close_img'>").appendTo($(this)); |
||||
$("<div class='clear_img'>").appendTo($(this)); |
||||
$("<div class='numb_img'>" + $(this).find("input").val() + "</div>").appendTo($(this)); |
||||
}); |
||||
rightOrder(container.find(".imgs_cont")); |
||||
container.find(".imgs_cont").append(add_img) |
||||
});
|
||||
|
||||
// $("<div class='add_block'>" + sankoreLang.add + "</div>").appendTo("#data");
|
||||
$(this).css("display", "none"); |
||||
$("#wgt_display").css("display", "block"); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
//add new block
|
||||
// $(".add_block").live("click", function(){
|
||||
// addContainer();
|
||||
// });
|
||||
|
||||
//adding new img
|
||||
$(".add_img").live("click", function(){ |
||||
addImgBlock($(this)); |
||||
}); |
||||
|
||||
//deleting a block
|
||||
// $(".close_cont").live("click",function(){
|
||||
// $(this).parent().remove();
|
||||
// refreshBlockNumbers();
|
||||
// });
|
||||
|
||||
//deleting the img block
|
||||
$(".close_img").live("click", function(){ |
||||
var i = 0; |
||||
var tmp_obj = $(this).parent().parent();
|
||||
$(this).parent().remove(); |
||||
if(tmp_obj.find(".img_block").size() > 0){ |
||||
refreshImgNumbers(tmp_obj); |
||||
} |
||||
|
||||
}); |
||||
|
||||
//cleaning an image
|
||||
$(".clear_img").live("click",function(){ |
||||
//$(this).parent().find(".fill_img").remove();
|
||||
$(this).parent().find("img").attr("src","img/drop_img.png"); |
||||
}); |
||||
} |
||||
|
||||
//export
|
||||
function exportData(){ |
||||
var array_to_export = []; |
||||
if($("#edit").hasClass("selected")){ |
||||
$(".cont").each(function(){ |
||||
var container = $(this); |
||||
var tmp_right = ""; |
||||
var tmp_i = 0; |
||||
container.find(".img_block").each(function(){ |
||||
if($(this).html().match(/<img/)){ |
||||
$(this).find("input").val(++tmp_i) |
||||
tmp_right += tmp_i + "*"; |
||||
} |
||||
}); |
||||
container.find(".imgs_cont>input").val(tmp_right); |
||||
}); |
||||
} |
||||
$(".cont").each(function(){ |
||||
var cont_obj = new Object(); |
||||
cont_obj.style = $("#style_select").find("option:selected").val(); |
||||
cont_obj.text = $(this).find(".text_cont").text(); |
||||
cont_obj.right = $(this).find(".imgs_cont>input").val(); |
||||
cont_obj.imgs = []; |
||||
$(this).find(".img_block").each(function(){ |
||||
var img_obj = new Object(); |
||||
img_obj.value = $(this).find("input").val(); |
||||
img_obj.link = $(this).find("img").attr("src").replace("../../",""); |
||||
img_obj.ht = $(this).find("img").height(); |
||||
img_obj.wd = $(this).find("img").width(); |
||||
cont_obj.imgs.push(img_obj); |
||||
}); |
||||
array_to_export.push(cont_obj); |
||||
}); |
||||
|
||||
if($(".cont").size() == 0){ |
||||
var cont_obj = new Object(); |
||||
cont_obj.style = $("#style_select").find("option:selected").val(); |
||||
cont_obj.tmp = "clear"; |
||||
array_to_export.push(cont_obj); |
||||
} |
||||
if(window.sankore) |
||||
sankore.setPreference("odr_des_imgs", JSON.stringify(array_to_export)); |
||||
if($("#wgt_display").hasClass("selected")){ |
||||
if(window.sankore) |
||||
sankore.setPreference("odr_des_imgs_state", "display"); |
||||
} |
||||
else{ |
||||
if(window.sankore) |
||||
sankore.setPreference("odr_des_imgs_state", "edit"); |
||||
} |
||||
} |
||||
|
||||
//import
|
||||
function importData(data){ |
||||
|
||||
for(var i in data){ |
||||
if(data[i].tmp){ |
||||
changeStyle(data[i].style); |
||||
$("#style_select").val(data[i].style); |
||||
} |
||||
else { |
||||
if(i == 0){ |
||||
changeStyle(data[i].style); |
||||
$("#style_select").val(data[i].style); |
||||
} |
||||
var tmp_array = []; |
||||
var container = $("<div class='cont'>"); |
||||
var sub_container = $("<div class='sub_cont'>").appendTo(container); |
||||
var imgs_container = $("<div class='imgs_cont'>").appendTo(container);
|
||||
|
||||
// var number = $("<div class='number_cont'>"+ (++tmp) +"</div>").appendTo(sub_container);
|
||||
var text = $("<div class='text_cont'>" + data[i].text + "</div>").appendTo(sub_container); |
||||
|
||||
$("<input type='hidden' value='" + data[i].right + "'/>").appendTo(imgs_container); |
||||
|
||||
for(var j in data[i].imgs){ |
||||
var img_block = $("<div class='img_block' style='text-align: center;'>"); |
||||
var img = $("<img src='../../" + data[i].imgs[j].link + "' style='display: inline;'>"); |
||||
img.height(data[i].imgs[j].ht); |
||||
if((120 - data[i].imgs[j].ht) > 0) |
||||
img.css("margin",(120 - data[i].imgs[j].ht)/2 + "px 0"); |
||||
var hidden_input = $("<input type='hidden'>").val(data[i].imgs[j].value); |
||||
img_block.append(hidden_input).append(img); |
||||
tmp_array.push(img_block); |
||||
} |
||||
if(sankore.preference("odr_des_imgs_state","")){ |
||||
if(sankore.preference("odr_des_imgs_state","") == "edit") |
||||
tmp_array = shuffle(tmp_array); |
||||
} else
|
||||
tmp_array = shuffle(tmp_array); |
||||
|
||||
for(j = 0; j<tmp_array.length;j++) |
||||
tmp_array[j].appendTo(imgs_container); |
||||
imgs_container.sortable().bind('sortupdate', function(event, ui) { |
||||
checkResult(event); |
||||
});
|
||||
container.appendTo("#data");
|
||||
imgs_container.trigger("sortupdate")
|
||||
}
|
||||
} |
||||
} |
||||
|
||||
//example
|
||||
function showExample(){ |
||||
|
||||
changeStyle("3"); |
||||
var tmp_array = []; |
||||
|
||||
var container = $("<div class='cont'>"); |
||||
var sub_container = $("<div class='sub_cont'>").appendTo(container); |
||||
var imgs_container = $("<div class='imgs_cont'>").appendTo(container); |
||||
|
||||
// var number = $("<div class='number_cont'>1</div>").appendTo(sub_container);
|
||||
var text = $("<div class='text_cont'>" + sankoreLang.short_desc + "</div>").appendTo(sub_container); |
||||
|
||||
$("<input type='hidden' value='1*2*3*4*5*'/>").appendTo(imgs_container); |
||||
|
||||
var img1 = $("<div class='img_block' style='text-align: center;'></div>"); |
||||
$("<input type='hidden' value='1'/>").appendTo(img1); |
||||
$("<img src=\"../../objects/0.gif\" style=\"display: inline;\" height=\"120\"/>").appendTo(img1); |
||||
var img2 = $("<div class='img_block' style='text-align: center;'></div>"); |
||||
$("<input type='hidden' value='2'/>").appendTo(img2); |
||||
$("<img src=\"../../objects/1.gif\" style=\"display: inline;\" height=\"120\"/>").appendTo(img2); |
||||
var img3 = $("<div class='img_block' style='text-align: center;'></div>"); |
||||
$("<input type='hidden' value='3'/>").appendTo(img3); |
||||
$("<img src=\"../../objects/2.gif\" style=\"display: inline;\" height=\"120\"/>").appendTo(img3); |
||||
var img4 = $("<div class='img_block' style='text-align: center;'></div>"); |
||||
$("<input type='hidden' value='4'/>").appendTo(img4); |
||||
$("<img src=\"../../objects/3.gif\" style=\"display: inline;\" height=\"120\"/>").appendTo(img4); |
||||
var img5 = $("<div class='img_block' style='text-align: center;'></div>"); |
||||
$("<input type='hidden' value='5'/>").appendTo(img5); |
||||
$("<img src=\"../../objects/4.gif\" style=\"display: inline;\" height=\"120\"/>").appendTo(img5);
|
||||
|
||||
tmp_array.push(img1, img2, img3, img4, img5); |
||||
tmp_array = shuffle(tmp_array); |
||||
for(var i = 0; i<tmp_array.length;i++) |
||||
tmp_array[i].appendTo(imgs_container); |
||||
imgs_container.sortable().bind('sortupdate', function(event, ui) { |
||||
checkResult(event); |
||||
}); |
||||
|
||||
container.appendTo("#data"); |
||||
} |
||||
|
||||
//check result
|
||||
function checkResult(event) |
||||
{ |
||||
if($("#wgt_display").hasClass("selected")){ |
||||
var str = ""; |
||||
var right_str = $(event.target).find("input").val(); |
||||
$(event.target).find(".img_block").each(function(){ |
||||
str += $(this).find("input").val() + "*"; |
||||
}); |
||||
if(str == right_str) |
||||
$(event.target).css("background-color","#9f9"); |
||||
else |
||||
$(event.target).css("background-color",""); |
||||
} else { |
||||
refreshImgNumbers($(event.target)); |
||||
} |
||||
} |
||||
|
||||
//add new container
|
||||
//function addContainer(){
|
||||
// var container = $("<div class='cont'>");
|
||||
// var sub_container = $("<div class='sub_cont'>").appendTo(container);
|
||||
// var imgs_container = $("<div class='imgs_cont'>").appendTo(container);
|
||||
//
|
||||
// var close = $("<div class='close_cont'>").appendTo(container);
|
||||
// var number = $("<div class='number_cont'>"+ ($(".cont").size() + 1) +"</div>").appendTo(sub_container);
|
||||
// var text = $("<div class='text_cont' contenteditable>" + sankoreLang.enter + "</div>").appendTo(sub_container);
|
||||
//
|
||||
// $("<input type='hidden' value='1*2*3*4*5*'/>").appendTo(imgs_container);
|
||||
// var add_img = $("<div class='add_img'>").appendTo(imgs_container);
|
||||
// container.insertBefore($(".add_block"));
|
||||
//}
|
||||
|
||||
//add new img block
|
||||
function addImgBlock(dest){ |
||||
var img_block = $("<div class='img_block' ondragenter='return false;' ondragleave='$(this).css(\"background-color\",\"\"); return false;' ondragover='$(this).css(\"background-color\",\"#ccc\"); return false;' ondrop='$(this).css(\"background-color\",\"\"); return onDropTarget(this,event);' style='text-align: center;'></div>").insertBefore(dest); |
||||
var tmp_counter = dest.parent().find(".img_block").size(); |
||||
$("<div class='close_img'>").appendTo(img_block); |
||||
$("<div class='clear_img'>").appendTo(img_block); |
||||
$("<div class='numb_img'>" + tmp_counter + "</div>").appendTo(img_block); |
||||
$("<input type='hidden' value='" + tmp_counter + "'/>").appendTo(img_block); |
||||
$("<img src='img/drop_img.png' height='120'/>").appendTo(img_block); |
||||
} |
||||
|
||||
//function refreshBlockNumbers(){
|
||||
// var i = 0;
|
||||
// $(".cont").each(function(){
|
||||
// $(this).find(".number_cont").text(++i);
|
||||
// })
|
||||
//}
|
||||
|
||||
//shuffles an array
|
||||
function shuffle( arr ) |
||||
{ |
||||
var pos, tmp; |
||||
|
||||
for( var i = 0; i < arr.length; i++ ) |
||||
{ |
||||
pos = Math.round( Math.random() * ( arr.length - 1 ) ); |
||||
tmp = arr[pos]; |
||||
arr[pos] = arr[i]; |
||||
arr[i] = tmp; |
||||
} |
||||
return arr; |
||||
} |
||||
|
||||
//regulation the images in right order
|
||||
function rightOrder(source){ |
||||
var tmp_arr = []; |
||||
var tmp_var; |
||||
source.find(".img_block").each(function(){ |
||||
tmp_arr.push($(this)); |
||||
$(this).remove(); |
||||
}); |
||||
for(var i = 0; i < tmp_arr.length; i++) |
||||
for(var j = 0; j < tmp_arr.length - 1; j++){ |
||||
if(tmp_arr[j].find("input").val() > tmp_arr[j+1].find("input").val()){ |
||||
tmp_var = tmp_arr[j]; |
||||
tmp_arr[j] = tmp_arr[j+1]; |
||||
tmp_arr[j+1] = tmp_var; |
||||
} |
||||
} |
||||
for(i in tmp_arr) |
||||
source.append(tmp_arr[i]); |
||||
} |
||||
|
||||
//refresh the numbers of the images
|
||||
function refreshImgNumbers(source){ |
||||
var tmp = 1; |
||||
source.find(".img_block").each(function(){ |
||||
$(this).find("input").val(tmp); |
||||
$(this).find(".numb_img").text(tmp); |
||||
tmp++; |
||||
}); |
||||
} |
||||
|
||||
//changing the style
|
||||
function changeStyle(val){ |
||||
switch(val){ |
||||
case "1": |
||||
$(".b_top_left").removeClass("btl_pad").removeClass("without_back"); |
||||
$(".b_top_center").removeClass("btc_pad").removeClass("without_back"); |
||||
$(".b_top_right").removeClass("btr_pad").removeClass("without_back"); |
||||
$(".b_center_left").removeClass("bcl_pad").removeClass("without_back"); |
||||
$(".b_center_right").removeClass("bcr_pad").removeClass("without_back"); |
||||
$(".b_bottom_right").removeClass("bbr_pad").removeClass("without_back"); |
||||
$(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back"); |
||||
$(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back"); |
||||
$("#wgt_reload").removeClass("pad_color").removeClass("pad_reload"); |
||||
$("#wgt_help").removeClass("pad_color").removeClass("pad_help"); |
||||
$("#wgt_edit").removeClass("pad_color").removeClass("pad_edit"); |
||||
$("#wgt_name").removeClass("pad_color"); |
||||
$("#wgt_display").addClass("display_wood"); |
||||
$("#style_select").val(val); |
||||
$("body, html").removeClass("without_radius").addClass("radius_ft"); |
||||
break; |
||||
case "2": |
||||
$(".b_top_left").addClass("btl_pad").removeClass("without_back"); |
||||
$(".b_top_center").addClass("btc_pad").removeClass("without_back"); |
||||
$(".b_top_right").addClass("btr_pad").removeClass("without_back"); |
||||
$(".b_center_left").addClass("bcl_pad").removeClass("without_back"); |
||||
$(".b_center_right").addClass("bcr_pad").removeClass("without_back"); |
||||
$(".b_bottom_right").addClass("bbr_pad").removeClass("without_back"); |
||||
$(".b_bottom_left").addClass("bbl_pad").removeClass("without_back"); |
||||
$(".b_bottom_center").addClass("bbc_pad").removeClass("without_back"); |
||||
$("#wgt_reload").addClass("pad_color").addClass("pad_reload"); |
||||
$("#wgt_help").addClass("pad_color").addClass("pad_help"); |
||||
$("#wgt_edit").addClass("pad_color").addClass("pad_edit"); |
||||
$("#wgt_name").addClass("pad_color"); |
||||
$("#wgt_display").removeClass("display_wood"); |
||||
$("#style_select").val(val); |
||||
$("body, html").removeClass("without_radius").removeClass("radius_ft"); |
||||
break; |
||||
case "3": |
||||
$(".b_top_left").addClass("without_back").removeClass("btl_pad"); |
||||
$(".b_top_center").addClass("without_back").removeClass("btc_pad"); |
||||
$(".b_top_right").addClass("without_back").removeClass("btr_pad"); |
||||
$(".b_center_left").addClass("without_back").removeClass("bcl_pad"); |
||||
$(".b_center_right").addClass("without_back").removeClass("bcr_pad"); |
||||
$(".b_bottom_right").addClass("without_back").removeClass("bbr_pad"); |
||||
$(".b_bottom_left").addClass("without_back").removeClass("bbl_pad"); |
||||
$(".b_bottom_center").addClass("without_back").removeClass("bbc_pad"); |
||||
$("#wgt_help").addClass("pad_color").addClass("pad_help"); |
||||
$("#wgt_reload").addClass("pad_color").addClass("pad_reload"); |
||||
$("#wgt_edit").addClass("pad_color").addClass("pad_edit"); |
||||
$("#wgt_name").addClass("pad_color"); |
||||
$("#wgt_display").removeClass("display_wood"); |
||||
$("#style_select").val(val); |
||||
$("body, html").addClass("without_radius").removeClass("radius_ft"); |
||||
break; |
||||
} |
||||
} |
||||
|
||||
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; |
||||
} |
||||
|
||||
function onDropTarget(obj, event) { |
||||
$(obj).find("img").remove(); |
||||
if (event.dataTransfer) { |
||||
var format = "text/plain"; |
||||
var textData = event.dataTransfer.getData(format); |
||||
if (!textData) { |
||||
alert(":("); |
||||
} |
||||
textData = stringToXML(textData); |
||||
var tmp = textData.getElementsByTagName("path")[0].firstChild.textContent; |
||||
var tmp_img = $("<img/>").attr("src", "../../" + tmp); |
||||
$(obj).append(tmp_img); |
||||
setTimeout(function(){ |
||||
if(tmp_img.height() >= tmp_img.width()) |
||||
tmp_img.attr("height", "120"); |
||||
else{ |
||||
tmp_img.attr("width","120"); |
||||
var h = tmp_img.height(); |
||||
tmp_img.attr("height",h); |
||||
tmp_img.css("margin",(120 - tmp_img.height())/2 + "px 0"); |
||||
} |
||||
}, 6) |
||||
} |
||||
else { |
||||
alert ("Your browser does not support the dataTransfer object."); |
||||
} |
||||
|
||||
if (event.stopPropagation) { |
||||
event.stopPropagation (); |
||||
} |
||||
else { |
||||
event.cancelBubble = true; |
||||
} |
||||
return false; |
||||
} |
||||
|
||||
@ -0,0 +1,60 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<title>D'n'd</title> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> |
||||
<link rel="stylesheet" type="text/css" href="../../css/basic.css"/> |
||||
<script type="text/javascript" src="../../js/jquery-1.8.0.min.js"></script> |
||||
<script type="text/javascript" src="../../js/jquery-ui-1.8.23.custom.min.js"></script> |
||||
<script type="text/javascript" src="js/script.js"></script> |
||||
<script type="text/javascript"> |
||||
$(document).ready(function(){ |
||||
if(window.sankore) |
||||
sankore.enableDropOnWidget(false); |
||||
start(); |
||||
}); |
||||
</script> |
||||
</head> |
||||
<body> |
||||
<table class="body_table" cellpadding=0 cellspacing=0> |
||||
<tr style="height: 54px;"> |
||||
<td class="b_top_left"> </td> |
||||
<td class="b_top_center"> |
||||
<div id="wgt_name"></div> |
||||
<div id="wgt_help"></div> |
||||
<div id="wgt_reload"></div> |
||||
<div id="wgt_display" class="selected"></div> |
||||
<div id="wgt_edit"></div> |
||||
</td> |
||||
<td class="b_top_right"> </td> |
||||
</tr> |
||||
|
||||
<tr> |
||||
<td class="b_center_left"> </td> |
||||
<td> |
||||
<div id="help"></div> |
||||
<div id="data"> |
||||
<div id="parameters"> |
||||
<div class="inline"> |
||||
<label> |
||||
<select id="style_select"> |
||||
<option value="1"></option> |
||||
<option value="2"></option> |
||||
<option value="3"></option> |
||||
</select> |
||||
</label> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</td> |
||||
<td class="b_center_right"> </td> |
||||
</tr> |
||||
|
||||
<tr style="height: 54px;"> |
||||
<td class="b_bottom_left"> </td> |
||||
<td class="b_bottom_center"> </td> |
||||
<td class="b_bottom_right"> </td> |
||||
</tr> |
||||
</table> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,564 @@ |
||||
var sankoreLang = { |
||||
display: "Display",
|
||||
edit: "Edit",
|
||||
short_desc: "Listen to the sound and make the correct word.",
|
||||
add: "Add new block", |
||||
enter: "Enter your instruction here ...", |
||||
example: "example", |
||||
wgt_name: "Order letters", |
||||
reload: "Reload", |
||||
slate: "slate", |
||||
pad: "pad", |
||||
none: "none", |
||||
help: "Help", |
||||
help_content:
|
||||
"<p> <h2> Order letters </ h2> </p>" + |
||||
"<p> <h3>Drag and drop labels in the correct order</h3> </p>" + |
||||
"<p> Listen to the audio file and drag and drop labels in the correct order. If the result is correct, the area turns in green. </p> "+ |
||||
|
||||
"<p> You can also use this activity with numbers.</p>" + |
||||
|
||||
"<p>“Reload” button resets the exercises. </p>" + |
||||
|
||||
"<p> Enter the “Edit” mode to : </p>" + |
||||
"<ul> <li> choose the theme of the App : pad, slate, or none (by default : none), </li>" + |
||||
"<li> modify the exercise.</li> </ul>" + |
||||
"<p>In edition mode : </p>" + |
||||
"<ul><li>insert an audio dragging and dropping a file from your library, </li>" + |
||||
"<li>edit the text field “Enter your instruction here...”,</li>" + |
||||
"<li>write the desired word instead of “example”,</li>" + |
||||
"<li>set the correct image of your activity clicking on the submit button “v” on the frame, </li>" + |
||||
"<li>replace an audio file, dragging a new one from your library, </li>" + |
||||
"<li>“Display” button comes back to the activity.</li></ul>", |
||||
theme: "Theme" |
||||
}; |
||||
|
||||
//main function
|
||||
function start(){ |
||||
|
||||
$("#wgt_display").text(sankoreLang.display); |
||||
$("#wgt_edit").text(sankoreLang.edit); |
||||
$("#wgt_name").text(sankoreLang.wgt_name); |
||||
$("#wgt_reload").text(sankoreLang.reload); |
||||
$("#wgt_help").text(sankoreLang.help); |
||||
$("#help").html(sankoreLang.help_content); |
||||
$("#style_select option[value='1']").text(sankoreLang.slate); |
||||
$("#style_select option[value='2']").text(sankoreLang.pad); |
||||
$("#style_select option[value='3']").text(sankoreLang.none); |
||||
var tmpl = $("div.inline label").html(); |
||||
$("div.inline label").html(sankoreLang.theme + tmpl) |
||||
|
||||
if(window.sankore){ |
||||
if(sankore.preference("ord_let","")){ |
||||
var data = jQuery.parseJSON(sankore.preference("ord_let","")); |
||||
importData(data); |
||||
} |
||||
else
|
||||
showExample(); |
||||
if(sankore.preference("ord_let_style","")){ |
||||
changeStyle(sankore.preference("ord_let_style","")); |
||||
$("#style_select").val(sankore.preference("ord_let_style","")); |
||||
} else |
||||
changeStyle("3") |
||||
}
|
||||
else
|
||||
showExample(); |
||||
//events
|
||||
if (window.widget) { |
||||
window.widget.onleave = function(){ |
||||
exportData(); |
||||
sankore.setPreference("ord_let_style", $("#style_select").find("option:selected").val()); |
||||
} |
||||
} |
||||
|
||||
$("#wgt_help").click(function(){ |
||||
var tmp = $(this); |
||||
if($(this).hasClass("open")){ |
||||
$(this).removeClass("help_pad").removeClass("help_wood") |
||||
$("#help").slideUp("100", function(){ |
||||
tmp.removeClass("open"); |
||||
$("#data").show(); |
||||
}); |
||||
} else { |
||||
($("#style_select").val() == 1)?$(this).removeClass("help_pad").addClass("help_wood"):$(this).removeClass("help_wood").addClass("help_pad"); |
||||
$("#data").hide(); |
||||
$("#help").slideDown("100", function(){ |
||||
tmp.addClass("open"); |
||||
}); |
||||
} |
||||
}); |
||||
|
||||
$("#wgt_reload").click(function(){ |
||||
if($("#wgt_display").hasClass("selected")){ |
||||
setTimeout('$("#wgt_display").trigger("click")', 10) |
||||
$("#wgt_edit").trigger("click");
|
||||
} else { |
||||
$("#wgt_display").trigger("click"); |
||||
} |
||||
}); |
||||
|
||||
$("#wgt_reload, #wgt_display, #wgt_edit").mouseover(function(){ |
||||
exportData(); |
||||
}); |
||||
|
||||
$("#style_select").change(function (event){ |
||||
changeStyle($(this).find("option:selected").val()); |
||||
}) |
||||
|
||||
$("#wgt_display, #wgt_edit").click(function(event){ |
||||
if(this.id == "wgt_display"){ |
||||
if(!$(this).hasClass("selected")){ |
||||
if(window.sankore) |
||||
sankore.enableDropOnWidget(false); |
||||
$(this).addClass("selected"); |
||||
$("#wgt_edit").removeClass("selected"); |
||||
$("#parameters").css("display","none"); |
||||
// $(".add_block").remove();
|
||||
$(".cont").each(function(){ |
||||
var container = $(this); |
||||
var tmp_array = []; |
||||
var ans_container = container.find(".audio_answer"); |
||||
|
||||
container.find(".text_cont .audio_desc").removeAttr("contenteditable"); |
||||
container.find(".audio_block").removeAttr("ondragenter") |
||||
.removeAttr("ondragleave") |
||||
.removeAttr("ondragover") |
||||
.removeAttr("ondrop") |
||||
// container.find(".close_cont").remove();
|
||||
var answer = ans_container.text(); |
||||
ans_container.prev().val(answer) |
||||
ans_container.remove(); |
||||
var ul_cont = $("<ul id='sortable' class='imgs_answers_gray'>").insertAfter(container.find(".sub_cont")); |
||||
for(var j in answer){ |
||||
var tmp_letter = $("<li class='ui-state-default'>" + answer[j] + "</li>"); |
||||
tmp_array.push(tmp_letter); |
||||
}
|
||||
tmp_array = shuffle(tmp_array); |
||||
for(var i = 0; i<tmp_array.length;i++) |
||||
tmp_array[i].appendTo(ul_cont); |
||||
ul_cont.sortable({ |
||||
revert: true,
|
||||
placeholder: "highlight",
|
||||
update: checkResult |
||||
}); |
||||
}); |
||||
$(this).css("display", "none"); |
||||
$("#wgt_edit").css("display", "block"); |
||||
} |
||||
} else {
|
||||
if(!$(this).hasClass("selected")){ |
||||
if(window.sankore) |
||||
sankore.enableDropOnWidget(true); |
||||
$(this).addClass("selected"); |
||||
$("#wgt_display").removeClass("selected"); |
||||
$("#parameters").css("display","block"); |
||||
$(".cont").each(function(){ |
||||
var container = $(this); |
||||
// $("<div class='close_cont'>").appendTo(container);
|
||||
container.find("#sortable").removeClass("imgs_answers_red") |
||||
.removeClass("imgs_answers_green") |
||||
.addClass("imgs_answers_gray") |
||||
.sortable("destroy"); |
||||
container.find(".text_cont .audio_desc").attr("contenteditable","true"); |
||||
container.find(".audio_block").attr("ondragenter", "return false;") |
||||
.attr("ondragleave", "$(this).removeClass('audio_gray'); return false;") |
||||
.attr("ondragover", "$(this).addClass('audio_gray'); return false;") |
||||
.attr("ondrop", "$(this).removeClass('audio_gray'); return onDropAudio(this,event);");
|
||||
$("<div class='audio_answer' contenteditable>" + container.find("ul").next().val() + "</div>").appendTo(container); |
||||
container.find("ul").remove(); |
||||
});
|
||||
// $("<div class='add_block'>" + sankoreLang.add + "</div>").appendTo("#data");
|
||||
$(this).css("display", "none"); |
||||
$("#wgt_display").css("display", "block"); |
||||
} |
||||
} |
||||
|
||||
$("audio").each(function(){ |
||||
this.pause(); |
||||
$(this).parent().find(":first-child").removeClass("stop").addClass("play"); |
||||
}); |
||||
|
||||
}); |
||||
|
||||
//add new block
|
||||
// $(".add_block").live("click", function(){
|
||||
// addContainer();
|
||||
// });
|
||||
|
||||
//adding new img
|
||||
$(".add_img").live("click", function(){ |
||||
addImgBlock($(this)); |
||||
}); |
||||
|
||||
//deleting a block
|
||||
// $(".close_cont").live("click",function(){
|
||||
// $(this).parent().remove();
|
||||
// refreshBlockNumbers();
|
||||
// });
|
||||
|
||||
//deleting the img block
|
||||
$(".close_img").live("click", function(){ |
||||
var i = 0; |
||||
var tmp_obj = $(this).parent().parent();
|
||||
$(this).parent().remove();
|
||||
}); |
||||
|
||||
//correct image
|
||||
$(".true_img").live("click",function(){
|
||||
$(this).parent().parent().find(".img_block").each(function(){ |
||||
$(this).find("input").val(0); |
||||
var tmp_div = $(this).find(".false_img"); |
||||
if(tmp_div) |
||||
tmp_div.removeClass("false_img").addClass("true_img"); |
||||
}) |
||||
$(this).parent().find("input").val(1); |
||||
$(this).removeClass("true_img").addClass("false_img"); |
||||
}); |
||||
|
||||
//wrong image
|
||||
$(".false_img").live("click",function(){ |
||||
$(this).parent().find("input").val(0); |
||||
$(this).removeClass("false_img").addClass("true_img"); |
||||
}); |
||||
|
||||
//play/pause event
|
||||
$(".play, .stop").live("click", function(){ |
||||
var tmp_audio = $(this); |
||||
var audio = tmp_audio.parent().find("audio").get(0); |
||||
if($(this).hasClass("play")){
|
||||
if(tmp_audio.parent().find("source").attr("src")){ |
||||
tmp_audio.removeClass("play").addClass("stop"); |
||||
var id = setInterval(function(){ |
||||
if(audio.currentTime == audio.duration){ |
||||
clearInterval(id); |
||||
tmp_audio.removeClass("stop").addClass("play"); |
||||
} |
||||
}, 10); |
||||
tmp_audio.parent().find("input").val(id); |
||||
audio.play(); |
||||
} |
||||
} else { |
||||
$(this).removeClass("stop").addClass("play"); |
||||
clearInterval( tmp_audio.parent().find("input").val()) |
||||
audio.pause(); |
||||
} |
||||
}); |
||||
|
||||
$(".replay").live("click", function(){ |
||||
var tmp_audio = $(this).prev(); |
||||
var audio = $(this).parent().find("audio").get(0);
|
||||
if(tmp_audio.parent().find("source").attr("src")){ |
||||
$(this).prev().removeClass("play").addClass("stop"); |
||||
clearInterval($(this).parent().find("input").val()); |
||||
var id = setInterval(function(){ |
||||
if(audio.currentTime == audio.duration){ |
||||
clearInterval(id); |
||||
tmp_audio.removeClass("stop").addClass("play"); |
||||
} |
||||
}, 10); |
||||
tmp_audio.parent().find("input").val(id); |
||||
audio.currentTime = 0; |
||||
audio.play(); |
||||
} |
||||
}); |
||||
} |
||||
|
||||
//export
|
||||
function exportData(){ |
||||
var array_to_export = []; |
||||
if($("#wgt_edit").hasClass("selected")){ |
||||
$(".cont").each(function(){ |
||||
var cont_obj = new Object(); |
||||
cont_obj.text = $(this).find(".audio_desc").text(); |
||||
cont_obj.audio = $(this).find("source").attr("src"); |
||||
cont_obj.answer = $(this).find(".audio_answer").text(); |
||||
cont_obj.cur_answer = "";
|
||||
array_to_export.push(cont_obj); |
||||
}); |
||||
} else { |
||||
$(".cont").each(function(){ |
||||
var cont_obj = new Object(); |
||||
cont_obj.text = $(this).find(".audio_desc").text(); |
||||
cont_obj.audio = $(this).find("source").attr("src"); |
||||
cont_obj.answer = $(this).find("ul").next().val();
|
||||
cont_obj.cur_answer = getAnswer($(this).find("ul")); |
||||
array_to_export.push(cont_obj); |
||||
}); |
||||
} |
||||
sankore.setPreference("ord_let", JSON.stringify(array_to_export)); |
||||
if($("#wgt_display").hasClass("selected")) |
||||
sankore.setPreference("ord_let_state", "display"); |
||||
else |
||||
sankore.setPreference("ord_let_state", "edit"); |
||||
} |
||||
|
||||
//import
|
||||
function importData(data){ |
||||
|
||||
for(var i in data){
|
||||
var tmp_array = []; |
||||
var container = $("<div class='cont'>").appendTo("#data"); |
||||
var sub_container = $("<div class='sub_cont'>").appendTo(container); |
||||
var imgs_container = $("<ul id='sortable' class='imgs_answers_gray'>").appendTo(container);
|
||||
|
||||
// $("<div class='number_cont'>"+ (++tmp) +"</div>").appendTo(sub_container);
|
||||
var text = $("<div class='text_cont'>").appendTo(sub_container); |
||||
var audio_block = $("<div class='audio_block'>").appendTo(text); |
||||
$("<div class='play'>").appendTo(audio_block); |
||||
$("<div class='replay'>").appendTo(audio_block); |
||||
var source = $("<source/>").attr("src", data[i].audio); |
||||
var audio = $("<audio>").appendTo(audio_block); |
||||
audio.append(source); |
||||
$("<input type='hidden'/>").appendTo(audio_block); |
||||
$("<div class='audio_desc'>" + data[i].text + "</div>").appendTo(text); |
||||
$("<input type='hidden' value='" + data[i].answer + "'/>").appendTo(container); |
||||
if(data[i].cur_answer) |
||||
for(var j in data[i].cur_answer){ |
||||
var tmp_letter = $("<li class='ui-state-default'>" + data[i].cur_answer[j] + "</li>"); |
||||
tmp_array.push(tmp_letter); |
||||
}
|
||||
else |
||||
for(j in data[i].answer){ |
||||
tmp_letter = $("<li class='ui-state-default'>" + data[i].answer[j] + "</li>");
|
||||
tmp_array.push(tmp_letter); |
||||
} |
||||
|
||||
if(sankore.preference("ord_let_state","")){ |
||||
if(sankore.preference("ord_let_state","") == "edit") |
||||
tmp_array = shuffle(tmp_array); |
||||
} else
|
||||
tmp_array = shuffle(tmp_array); |
||||
|
||||
for(j = 0; j<tmp_array.length;j++) |
||||
tmp_array[j].appendTo(imgs_container); |
||||
|
||||
imgs_container.sortable({ |
||||
revert: true,
|
||||
placeholder: "highlight" |
||||
}).bind('sortupdate', function(event, ui) { |
||||
checkResult(event); |
||||
});
|
||||
if(data[i].cur_answer) |
||||
imgs_container.trigger("sortupdate") |
||||
} |
||||
} |
||||
|
||||
//example
|
||||
function showExample(){ |
||||
|
||||
var tmp_array = [];
|
||||
var container = $("<div class='cont'>").appendTo("#data"); |
||||
var sub_container = $("<div class='sub_cont'>").appendTo(container); |
||||
var imgs_container = $("<ul id='sortable' class='imgs_answers_gray'>").appendTo(container); |
||||
|
||||
// var number = $("<div class='number_cont'>1</div>").appendTo(sub_container);
|
||||
var text = $("<div class='text_cont'>").appendTo(sub_container); |
||||
var audio_block = $("<div class='audio_block'>").appendTo(text); |
||||
$("<div class='play'>").appendTo(audio_block); |
||||
$("<div class='replay'>").appendTo(audio_block); |
||||
var source = $("<source/>").attr("src", "../../objects/example_en.mp3"); |
||||
var audio = $("<audio>").appendTo(audio_block); |
||||
audio.append(source); |
||||
$("<input type='hidden'/>").appendTo(audio_block); |
||||
var audio_desc = $("<div class='audio_desc'>" + sankoreLang.short_desc + "</div>").appendTo(text); |
||||
|
||||
$("<input type='hidden' value='" + sankoreLang.example + "'/>").appendTo(container); |
||||
|
||||
for(var j in sankoreLang.example){ |
||||
var tmp_letter = $("<li class='ui-state-default'>" + sankoreLang.example[j] + "</li>"); |
||||
tmp_array.push(tmp_letter); |
||||
}
|
||||
|
||||
tmp_array = shuffle(tmp_array); |
||||
for(var i = 0; i<tmp_array.length;i++) |
||||
tmp_array[i].appendTo(imgs_container); |
||||
imgs_container.sortable({ |
||||
revert: true,
|
||||
placeholder: "highlight" |
||||
}).bind('sortupdate', function(event, ui) { |
||||
checkResult(event); |
||||
}); |
||||
} |
||||
|
||||
//add new container
|
||||
//function addContainer(){
|
||||
// var container = $("<div class='cont'>");
|
||||
// var sub_container = $("<div class='sub_cont'>").appendTo(container);
|
||||
//
|
||||
// $("<div class='number_cont'>"+ ($(".cont").size() + 1) +"</div>").appendTo(sub_container);
|
||||
// var text = $("<div class='text_cont'>").appendTo(sub_container);
|
||||
// var audio_block = $("<div class='audio_block'>").appendTo(text);
|
||||
// audio_block.attr("ondragenter", "return false;")
|
||||
// .attr("ondragleave", "$(this).removeClass('audio_gray'); return false;")
|
||||
// .attr("ondragover", "$(this).addClass('audio_gray'); return false;")
|
||||
// .attr("ondrop", "$(this).removeClass('audio_gray'); return onDropAudio(this,event);");
|
||||
// $("<div class='play'>").appendTo(audio_block);
|
||||
// $("<div class='replay'>").appendTo(audio_block);
|
||||
// var source = $("<source/>").attr("src", "");
|
||||
// var audio = $("<audio>").appendTo(audio_block);
|
||||
// audio.append(source);
|
||||
// $("<input type='hidden'/>").appendTo(audio_block);
|
||||
// $("<div class='audio_desc' contenteditable>" + sankoreLang.enter + "</div>").appendTo(text);
|
||||
//
|
||||
// var tmp_input = $("<input type='hidden' value=''/>").insertAfter(sub_container);
|
||||
// var close = $("<div class='close_cont'>").insertAfter(tmp_input);
|
||||
// $("<div class='audio_answer' contenteditable>" + sankoreLang.example + "</div>").insertAfter(close);
|
||||
// container.insertBefore($(".add_block"));
|
||||
//}
|
||||
|
||||
//function refreshBlockNumbers(){
|
||||
// var i = 0;
|
||||
// $(".cont").each(function(){
|
||||
// $(this).find(".number_cont").text(++i);
|
||||
// })
|
||||
//}
|
||||
|
||||
//shuffles an array
|
||||
function shuffle( arr ) |
||||
{ |
||||
var pos, tmp; |
||||
|
||||
for( var i = 0; i < arr.length; i++ ) |
||||
{ |
||||
pos = Math.round( Math.random() * ( arr.length - 1 ) ); |
||||
tmp = arr[pos]; |
||||
arr[pos] = arr[i]; |
||||
arr[i] = tmp; |
||||
} |
||||
return arr; |
||||
} |
||||
|
||||
//check result
|
||||
function checkResult(event) |
||||
{ |
||||
var str = ""; |
||||
var right_str = $(event.target).next().val(); |
||||
$(event.target).find("li.ui-state-default").each(function(){ |
||||
str += $(this).text(); |
||||
}); |
||||
if(str == right_str) |
||||
$(event.target).removeClass("imgs_answers_gray") |
||||
.removeClass("imgs_answers_red") |
||||
.addClass("imgs_answers_green"); |
||||
else |
||||
$(event.target).removeClass("imgs_answers_gray") |
||||
.removeClass("imgs_answers_green"); |
||||
} |
||||
|
||||
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; |
||||
} |
||||
|
||||
//changing the style
|
||||
function changeStyle(val){ |
||||
switch(val){ |
||||
case "1": |
||||
$(".b_top_left").removeClass("btl_pad").removeClass("without_back"); |
||||
$(".b_top_center").removeClass("btc_pad").removeClass("without_back"); |
||||
$(".b_top_right").removeClass("btr_pad").removeClass("without_back"); |
||||
$(".b_center_left").removeClass("bcl_pad").removeClass("without_back"); |
||||
$(".b_center_right").removeClass("bcr_pad").removeClass("without_back"); |
||||
$(".b_bottom_right").removeClass("bbr_pad").removeClass("without_back"); |
||||
$(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back"); |
||||
$(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back"); |
||||
$("#wgt_reload").removeClass("pad_color").removeClass("pad_reload"); |
||||
$("#wgt_help").removeClass("pad_color").removeClass("pad_help"); |
||||
$("#wgt_edit").removeClass("pad_color").removeClass("pad_edit"); |
||||
$("#wgt_name").removeClass("pad_color"); |
||||
$("#wgt_display").addClass("display_wood"); |
||||
$("#style_select").val(val); |
||||
$("body, html").removeClass("without_radius").addClass("radius_ft"); |
||||
break; |
||||
case "2": |
||||
$(".b_top_left").addClass("btl_pad").removeClass("without_back"); |
||||
$(".b_top_center").addClass("btc_pad").removeClass("without_back"); |
||||
$(".b_top_right").addClass("btr_pad").removeClass("without_back"); |
||||
$(".b_center_left").addClass("bcl_pad").removeClass("without_back"); |
||||
$(".b_center_right").addClass("bcr_pad").removeClass("without_back"); |
||||
$(".b_bottom_right").addClass("bbr_pad").removeClass("without_back"); |
||||
$(".b_bottom_left").addClass("bbl_pad").removeClass("without_back"); |
||||
$(".b_bottom_center").addClass("bbc_pad").removeClass("without_back"); |
||||
$("#wgt_reload").addClass("pad_color").addClass("pad_reload"); |
||||
$("#wgt_help").addClass("pad_color").addClass("pad_help"); |
||||
$("#wgt_edit").addClass("pad_color").addClass("pad_edit"); |
||||
$("#wgt_name").addClass("pad_color"); |
||||
$("#wgt_display").removeClass("display_wood"); |
||||
$("#style_select").val(val); |
||||
$("body, html").removeClass("without_radius").removeClass("radius_ft"); |
||||
break; |
||||
case "3": |
||||
$(".b_top_left").addClass("without_back").removeClass("btl_pad"); |
||||
$(".b_top_center").addClass("without_back").removeClass("btc_pad"); |
||||
$(".b_top_right").addClass("without_back").removeClass("btr_pad"); |
||||
$(".b_center_left").addClass("without_back").removeClass("bcl_pad"); |
||||
$(".b_center_right").addClass("without_back").removeClass("bcr_pad"); |
||||
$(".b_bottom_right").addClass("without_back").removeClass("bbr_pad"); |
||||
$(".b_bottom_left").addClass("without_back").removeClass("bbl_pad"); |
||||
$(".b_bottom_center").addClass("without_back").removeClass("bbc_pad"); |
||||
$("#wgt_help").addClass("pad_color").addClass("pad_help"); |
||||
$("#wgt_reload").addClass("pad_color").addClass("pad_reload"); |
||||
$("#wgt_edit").addClass("pad_color").addClass("pad_edit"); |
||||
$("#wgt_name").addClass("pad_color"); |
||||
$("#wgt_display").removeClass("display_wood"); |
||||
$("#style_select").val(val); |
||||
$("body, html").addClass("without_radius").removeClass("radius_ft"); |
||||
break; |
||||
} |
||||
} |
||||
|
||||
function onDropAudio(obj, event) { |
||||
if (event.dataTransfer) { |
||||
var format = "text/plain"; |
||||
var textData = event.dataTransfer.getData(format); |
||||
if (!textData) { |
||||
alert(":("); |
||||
} |
||||
textData = stringToXML(textData); |
||||
var tmp = textData.getElementsByTagName("path")[0].firstChild.textContent; |
||||
var tmp_type = textData.getElementsByTagName("type")[0].firstChild.textContent; |
||||
if(tmp_type.substr(0, 5) == "audio"){
|
||||
$(obj).find("audio").remove(); |
||||
$(obj).find(":first-child").removeClass("stop").addClass("play"); |
||||
var source = $("<source/>").attr("src", "../../" + tmp); |
||||
var audio = $("<audio>").appendTo($(obj)); |
||||
audio.append(source);
|
||||
} |
||||
} |
||||
else { |
||||
alert ("Your browser does not support the dataTransfer object."); |
||||
} |
||||
|
||||
if (event.stopPropagation) { |
||||
event.stopPropagation (); |
||||
} |
||||
else { |
||||
event.cancelBubble = true; |
||||
} |
||||
return false; |
||||
} |
||||
|
||||
//get text
|
||||
function getAnswer(obj){ |
||||
var answer = ""; |
||||
obj.find("li.ui-state-default").each(function(){ |
||||
answer += $(this).text(); |
||||
}); |
||||
return answer; |
||||
} |
||||
|
||||
if (window.widget) { |
||||
window.widget.onremove = function(){ |
||||
$("audio").each(function(){ |
||||
this.pause(); |
||||
$(this).parent().find(":first-child").removeClass("stop").addClass("play"); |
||||
}); |
||||
} |
||||
} |
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,68 @@ |
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
||||
"http://www.w3.org/TR/html4/loose.dtd"> |
||||
|
||||
<html> |
||||
|
||||
<head> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
||||
<title>Template</title> |
||||
|
||||
<!--Styles--> |
||||
<link rel="stylesheet" type="text/css" href="../../styles/master.css"> |
||||
<link rel="stylesheet" type="text/css" href="../../styles/of_puppets.css"> |
||||
<!--Scripts--> |
||||
<script type="text/javascript" src="../../scripts/jquery-1.6.2.min.js"></script> |
||||
<script type="text/javascript" src="../../scripts/jquery-ui-1.8.9.custom.min.js"></script> |
||||
<script type="text/javascript" src="scripts/template2.js"></script> |
||||
<script type="text/javascript"> |
||||
$(document).ready(function(){ |
||||
$("#ub-widget").append('<div id="mp_setup"></div><div id="mp_word"></div>'); |
||||
modeView(); |
||||
}); |
||||
</script> |
||||
</head> |
||||
|
||||
<body> |
||||
<table class="body_table" cellpadding=0 cellspacing=0> |
||||
<tr style="height: 54px;"> |
||||
<td class="b_top_left"> </td> |
||||
<td class="b_top_center"> |
||||
<div id="wgt_name"></div> |
||||
<div id="wgt_help"></div> |
||||
<div id="wgt_reload"></div> |
||||
<div id="wgt_display" class="selected"></div> |
||||
<div id="wgt_edit"></div> |
||||
</td> |
||||
<td class="b_top_right"> </td> |
||||
</tr> |
||||
|
||||
<tr> |
||||
<td class="b_center_left"> </td> |
||||
<td> |
||||
<div id="help"></div> |
||||
<div id="ub-widget"> |
||||
<div id="parameters"> |
||||
<div class="inline"> |
||||
<label> |
||||
<select id="style_select"> |
||||
<option value="1"></option> |
||||
<option value="2"></option> |
||||
<option value="3"></option> |
||||
</select> |
||||
</label> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</td> |
||||
<td class="b_center_right"> </td> |
||||
</tr> |
||||
|
||||
<tr style="height: 54px;"> |
||||
<td class="b_bottom_left"> </td> |
||||
<td class="b_bottom_center"> </td> |
||||
<td class="b_bottom_right"> </td> |
||||
</tr> |
||||
</table> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -0,0 +1,435 @@ |
||||
|
||||
/* |
||||
Sankore API |
||||
*/ |
||||
|
||||
function startEditing() |
||||
{ |
||||
modeEdit(); |
||||
} |
||||
|
||||
function stopEditing() |
||||
{ |
||||
modeView(); |
||||
} |
||||
|
||||
function initialize() |
||||
{ |
||||
|
||||
} |
||||
|
||||
function checkResponse() |
||||
{ |
||||
checkWord(); |
||||
} |
||||
/* |
||||
/ END sankore api |
||||
*/ |
||||
|
||||
var sankoreLang = { |
||||
view: "Display",
|
||||
edit: "Edit", |
||||
example: "a*long*,*long*time*ago*...", |
||||
wgt_name: "Order words", |
||||
reload: "Reload", |
||||
slate: "slate", |
||||
pad: "pad", |
||||
none: "none", |
||||
help: "Help", |
||||
help_content:
|
||||
"<p><h2>Order words </h2> </p>" + |
||||
"<p><h3>Order words to reconstruct a correct sentence</h3></p>" + |
||||
|
||||
"<p>The interactivity displays labels in a random order. Drag and drop words in correct order. If the result is correct, the area turns in green.</p> "+ |
||||
"<p>“Reload” button resets the exercises. </p>" + |
||||
|
||||
"<p> Enter the “Edit” mode to : </p>" + |
||||
"<ul> <li> choose the theme of the App : pad, slate, or none (by default : none), </li>" + |
||||
"<li> determine the sentence and place separation between words. </li> </ul>" + |
||||
|
||||
"<p>To create a new exercise : </p>" + |
||||
"<ul><li>insert the desired sentence,</li>" + |
||||
"<li> add spaces in the sentence, inserting “*” between each word. Do not place a star at the beginning or the end of your sentence.</li></ul>" + |
||||
"<p>“Display” button comes back to the activity.</p>", |
||||
theme: "Theme" |
||||
}; |
||||
|
||||
var word = ""; |
||||
var curWord = ""; |
||||
|
||||
if(window.sankore){ |
||||
word = (sankore.preference("rightOrdWords", ""))?sankore.preference("rightOrdWords", ""):sankoreLang.example; |
||||
curWord = (sankore.preference("currentOrdWords", ""))?sankore.preference("currentOrdWords", ""):""; |
||||
} else { |
||||
word = sankoreLang.example; |
||||
} |
||||
|
||||
// array of dom elements
|
||||
var letters = []; |
||||
|
||||
var editMode = false; // just a flag
|
||||
|
||||
var wgtState = false; // just another flag
|
||||
|
||||
// if use the "edit" button or rely on the api instead
|
||||
var isSankore = false; |
||||
// whether to do window.resize or not (window = widget area)
|
||||
var isBrowser = ( typeof( widget ) == "undefined" ); |
||||
|
||||
// hardcoded parameters, not very good
|
||||
var input_width = 606; |
||||
var widget_padding = 0; |
||||
var min_view_width = 400; |
||||
|
||||
|
||||
$(document).ready(function(){ |
||||
if(window.sankore){ |
||||
if(sankore.preference("ord_words_style","")){ |
||||
changeStyle(sankore.preference("ord_words_style","")); |
||||
} else |
||||
changeStyle("3") |
||||
} else
|
||||
changeStyle("3") |
||||
$("#wgt_display").text(sankoreLang.view); |
||||
$("#wgt_edit").text(sankoreLang.edit); |
||||
$("#wgt_help").text(sankoreLang.help); |
||||
$("#help").html(sankoreLang.help_content);
|
||||
$("#style_select option[value='1']").text(sankoreLang.slate); |
||||
$("#style_select option[value='2']").text(sankoreLang.pad); |
||||
$("#style_select option[value='3']").text(sankoreLang.none); |
||||
var tmpl = $("div.inline label").html(); |
||||
$("div.inline label").html(sankoreLang.theme + tmpl) |
||||
|
||||
$("#style_select").change(function (event){ |
||||
changeStyle($(this).find("option:selected").val()); |
||||
}) |
||||
|
||||
$("#wgt_display, #wgt_edit").click(function(event){ |
||||
if(this.id == "wgt_display"){ |
||||
if(!$(this).hasClass("selected")){
|
||||
$(this).addClass("selected"); |
||||
$("#wgt_edit").removeClass("selected"); |
||||
$("#parameters").css("display","none");
|
||||
$(this).css("display", "none"); |
||||
$("#wgt_edit").css("display", "block"); |
||||
modeView(); |
||||
} |
||||
} else {
|
||||
if(!$(this).hasClass("selected")){ |
||||
$(this).addClass("selected"); |
||||
$("#wgt_display").removeClass("selected"); |
||||
$("#parameters").css("display","block");
|
||||
$(this).css("display", "none"); |
||||
$("#wgt_display").css("display", "block"); |
||||
modeEdit(); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
$("#wgt_name").text(sankoreLang.wgt_name); |
||||
|
||||
$("#wgt_help").click(function(){ |
||||
var tmp = $(this); |
||||
if($(this).hasClass("open")){ |
||||
$(this).removeClass("help_pad").removeClass("help_wood") |
||||
$("#help").slideUp("100", function(){ |
||||
tmp.removeClass("open"); |
||||
$("#ub-widget").show(); |
||||
}); |
||||
} else {
|
||||
($("#style_select").val() == 1)?$(this).removeClass("help_pad").addClass("help_wood"):$(this).removeClass("help_wood").addClass("help_pad"); |
||||
$("#ub-widget").hide(); |
||||
$("#help").slideDown("100", function(){ |
||||
tmp.addClass("open"); |
||||
}); |
||||
} |
||||
}); |
||||
|
||||
$("#wgt_reload").text(sankoreLang.reload).click(function(){ |
||||
if(wgtState) |
||||
$("#wgt_display").trigger("click"); |
||||
else |
||||
{ |
||||
$( "#mp_word" ).empty(); |
||||
|
||||
// create new set of letters
|
||||
var letters; |
||||
letters = shuffle( createWordLetters( word ) ); |
||||
|
||||
for( i in letters ){ |
||||
$("#mp_word").append( letters[i] ); |
||||
} |
||||
|
||||
// in sankore api there would be a function to check
|
||||
// the answer, so no update parameter would be needed
|
||||
if( !isSankore ){ |
||||
$( "#mp_word" ).sortable( { |
||||
update: checkWord |
||||
} ); |
||||
} else $( "#mp_word" ).sortable(); |
||||
|
||||
// adjustWidth
|
||||
var totalLettersWidth = 0; |
||||
for( i in letters ){ |
||||
var currentWidth = $( letters[i] ).outerWidth( true ); |
||||
totalLettersWidth += currentWidth; |
||||
} |
||||
totalLettersWidth += 1; |
||||
|
||||
var width = Math.max( |
||||
totalLettersWidth, |
||||
min_view_width |
||||
); |
||||
|
||||
// shift the words to the right to center them
|
||||
if( width > totalLettersWidth ){ |
||||
$( "#mp_word" ).css( "margin-left", Math.round( (width - totalLettersWidth)/2 ) ); |
||||
} |
||||
else{ |
||||
$( "#mp_word" ).css( "margin-left", 0 ); |
||||
} |
||||
} |
||||
});
|
||||
|
||||
}) |
||||
|
||||
/* |
||||
================= |
||||
createWordLetters |
||||
================= |
||||
returns array of dom elements |
||||
*/ |
||||
function createWordLetters( word ) |
||||
{ |
||||
var ch, el; |
||||
var letters = []; |
||||
|
||||
if( word.indexOf( '*' ) != -1 ) |
||||
{ |
||||
var tmp = word.split( '*' ); |
||||
for( i in tmp ) |
||||
{ |
||||
ch = tmp[i]; |
||||
el = document.createElement( "div" ); |
||||
$(el).addClass( "letter" ).text( ch ); |
||||
letters.push( el ); |
||||
} |
||||
} |
||||
else |
||||
{ |
||||
for( var i = 0; i < word.length; i++ ) |
||||
{ |
||||
ch = word.charAt( i ); |
||||
el = document.createElement( "div" ); |
||||
$(el).addClass( "letter" ).text( ch ); |
||||
letters.push( el ); |
||||
} |
||||
} |
||||
return letters; |
||||
} |
||||
|
||||
//changing the style
|
||||
function changeStyle(val){ |
||||
switch(val){ |
||||
case "1": |
||||
$(".b_top_left").removeClass("btl_pad").removeClass("without_back"); |
||||
$(".b_top_center").removeClass("btc_pad").removeClass("without_back"); |
||||
$(".b_top_right").removeClass("btr_pad").removeClass("without_back"); |
||||
$(".b_center_left").removeClass("bcl_pad").removeClass("without_back"); |
||||
$(".b_center_right").removeClass("bcr_pad").removeClass("without_back"); |
||||
$(".b_bottom_right").removeClass("bbr_pad").removeClass("without_back"); |
||||
$(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back"); |
||||
$(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back"); |
||||
$("#wgt_reload").removeClass("pad_color").removeClass("pad_reload"); |
||||
$("#wgt_help").removeClass("pad_color").removeClass("pad_help"); |
||||
$("#wgt_edit").removeClass("pad_color").removeClass("pad_edit"); |
||||
$("#wgt_name").removeClass("pad_color"); |
||||
$("#wgt_display").addClass("display_wood"); |
||||
$("#style_select option:first").attr('selected',true); |
||||
$("body, html").removeClass("without_radius").addClass("radius_ft"); |
||||
break; |
||||
case "2": |
||||
$(".b_top_left").addClass("btl_pad").removeClass("without_back"); |
||||
$(".b_top_center").addClass("btc_pad").removeClass("without_back"); |
||||
$(".b_top_right").addClass("btr_pad").removeClass("without_back"); |
||||
$(".b_center_left").addClass("bcl_pad").removeClass("without_back"); |
||||
$(".b_center_right").addClass("bcr_pad").removeClass("without_back"); |
||||
$(".b_bottom_right").addClass("bbr_pad").removeClass("without_back"); |
||||
$(".b_bottom_left").addClass("bbl_pad").removeClass("without_back"); |
||||
$(".b_bottom_center").addClass("bbc_pad").removeClass("without_back"); |
||||
$("#wgt_reload").addClass("pad_color").addClass("pad_reload"); |
||||
$("#wgt_help").addClass("pad_color").addClass("pad_help"); |
||||
$("#wgt_edit").addClass("pad_color").addClass("pad_edit"); |
||||
$("#wgt_name").addClass("pad_color"); |
||||
$("#wgt_display").removeClass("display_wood"); |
||||
$("#style_select option:first").next().attr('selected',true); |
||||
$("body, html").removeClass("without_radius").removeClass("radius_ft"); |
||||
break; |
||||
case "3": |
||||
$(".b_top_left").addClass("without_back").removeClass("btl_pad"); |
||||
$(".b_top_center").addClass("without_back").removeClass("btc_pad"); |
||||
$(".b_top_right").addClass("without_back").removeClass("btr_pad"); |
||||
$(".b_center_left").addClass("without_back").removeClass("bcl_pad"); |
||||
$(".b_center_right").addClass("without_back").removeClass("bcr_pad"); |
||||
$(".b_bottom_right").addClass("without_back").removeClass("bbr_pad"); |
||||
$(".b_bottom_left").addClass("without_back").removeClass("bbl_pad"); |
||||
$(".b_bottom_center").addClass("without_back").removeClass("bbc_pad"); |
||||
$("#wgt_help").addClass("pad_color").addClass("pad_help"); |
||||
$("#wgt_reload").addClass("pad_color").addClass("pad_reload"); |
||||
$("#wgt_edit").addClass("pad_color").addClass("pad_edit"); |
||||
$("#wgt_name").addClass("pad_color"); |
||||
$("#wgt_display").removeClass("display_wood"); |
||||
$("#style_select option:last").attr('selected',true); |
||||
$("body, html").addClass("without_radius").removeClass("radius_ft"); |
||||
break; |
||||
} |
||||
} |
||||
|
||||
/* |
||||
===================== |
||||
checkWord |
||||
===================== |
||||
scans the letters and checks
|
||||
if they are in the right order |
||||
*/ |
||||
function checkWord() |
||||
{
|
||||
var str = ""; |
||||
$( "#mp_word .letter" ).each( function(){ |
||||
str += $(this).text(); |
||||
}); |
||||
var w = word; |
||||
while( w.indexOf( '*' ) != -1 ) |
||||
{ |
||||
w = w.replace( '*', '' ); |
||||
} |
||||
//alert(str + " | " + w)
|
||||
if( str == w ){ |
||||
$( "#mp_word .letter" ).addClass( "right" ); |
||||
//message( "Right!" );
|
||||
} else { |
||||
$( "#mp_word .letter" ).removeClass( "right" ); |
||||
} |
||||
} |
||||
|
||||
/* |
||||
============== |
||||
shuffle |
||||
============== |
||||
shuffles an array |
||||
*/ |
||||
function shuffle( arr ) |
||||
{ |
||||
var pos, tmp; |
||||
|
||||
for( var i = 0; i < arr.length; i++ ) |
||||
{ |
||||
pos = Math.round( Math.random() * ( arr.length - 1 ) ); |
||||
tmp = arr[pos]; |
||||
arr[pos] = arr[i]; |
||||
arr[i] = tmp; |
||||
} |
||||
return arr; |
||||
} |
||||
|
||||
|
||||
|
||||
/* |
||||
================== |
||||
modeView() |
||||
================== |
||||
turns the widget into the view mode |
||||
*/ |
||||
function modeView() |
||||
{ |
||||
if( editMode ){ |
||||
word = $( "#mp_word .wgt_cont" ).val(); |
||||
} |
||||
|
||||
wgtState = false; |
||||
|
||||
// clean the previous word
|
||||
$( "#mp_word" ).empty(); |
||||
|
||||
// create new set of letters
|
||||
var letters; |
||||
if(window.sankore && curWord && !editMode) |
||||
letters = createWordLetters( curWord ); |
||||
else |
||||
letters = shuffle( createWordLetters( word ) ); |
||||
|
||||
for( i in letters ){ |
||||
$("#mp_word").append( letters[i] ); |
||||
} |
||||
|
||||
// in sankore api there would be a function to check
|
||||
// the answer, so no update parameter would be needed
|
||||
if( !isSankore ){ |
||||
$( "#mp_word" ).sortable( { |
||||
update: checkWord |
||||
} ); |
||||
} else $( "#mp_word" ).sortable(); |
||||
|
||||
// adjustWidth
|
||||
var totalLettersWidth = 0; |
||||
for( i in letters ){ |
||||
var currentWidth = $( letters[i] ).outerWidth( true ); |
||||
totalLettersWidth += currentWidth; |
||||
} |
||||
totalLettersWidth += 1; |
||||
|
||||
var width = Math.max( |
||||
totalLettersWidth, |
||||
min_view_width |
||||
); |
||||
|
||||
// shift the words to the right to center them
|
||||
if( width > totalLettersWidth ){ |
||||
$( "#mp_word" ).css( "margin-left", Math.round( (width - totalLettersWidth)/2 ) ); |
||||
} |
||||
else{ |
||||
$( "#mp_word" ).css( "margin-left", 0 ); |
||||
} |
||||
|
||||
checkWord(); |
||||
} |
||||
|
||||
/* |
||||
================ |
||||
modeEdit |
||||
================ |
||||
*/ |
||||
function modeEdit() |
||||
{ |
||||
editMode = true; |
||||
wgtState = true; |
||||
$( "#mp_word").sortable( "destroy" ); |
||||
$( "#mp_word").css( "margin-left", 0 ).empty().append('<textarea class="wgt_cont">'+word+'</textarea>'); |
||||
|
||||
} |
||||
|
||||
if (window.widget) { |
||||
window.widget.onleave = function(){ |
||||
sankore.setPreference("ord_words_style", $("#style_select").find("option:selected").val()); |
||||
if($( "#mp_word .wgt_cont" ).val()) |
||||
{ |
||||
modeView(); |
||||
var str = ""; |
||||
$( "#mp_word .letter" ).each( function(){ |
||||
str += $(this).text() + "*"; |
||||
});
|
||||
str = str.substr(0, str.length - 1);
|
||||
sankore.setPreference("currentOrdWords", str);
|
||||
modeEdit(); |
||||
} |
||||
else{ |
||||
str = ""; |
||||
$( "#mp_word .letter" ).each( function(){ |
||||
str += $(this).text() + "*"; |
||||
});
|
||||
str = str.substr(0, str.length - 1);
|
||||
sankore.setPreference("currentOrdWords", str); |
||||
} |
||||
sankore.setPreference("rightOrdWords", word); |
||||
} |
||||
} |
||||
@ -0,0 +1,68 @@ |
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
||||
"http://www.w3.org/TR/html4/loose.dtd"> |
||||
|
||||
<html> |
||||
<head> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
||||
<title>Template</title> |
||||
<!--Styles--> |
||||
<link rel="stylesheet" type="text/css" href="../../styles/master.css"> |
||||
<link rel="stylesheet" type="text/css" href="../../styles/of_puppets.css"> |
||||
<!--Scripts--> |
||||
<script type="text/javascript" src="../../scripts/jquery-1.6.2.min.js"></script> |
||||
<script type="text/javascript" src="../../scripts/jquery-ui-1.8.9.custom.min.js"></script> |
||||
<script type="text/javascript" src="script/template2.js"></script> |
||||
<script type="text/javascript"> |
||||
$(document).ready(function(){ |
||||
if(window.sankore) |
||||
sankore.enableDropOnWidget(false); |
||||
$("#ub-widget").append('<div id="mp_setup"></div><div id="mp_word"></div>'); |
||||
modeView(); |
||||
}); |
||||
</script> |
||||
</head> |
||||
|
||||
<body> |
||||
<table class="body_table" cellpadding=0 cellspacing=0> |
||||
<tr style="height: 54px;"> |
||||
<td class="b_top_left"> </td> |
||||
<td class="b_top_center"> |
||||
<div id="wgt_name"></div> |
||||
<div id="wgt_help"></div> |
||||
<div id="wgt_reload"></div> |
||||
<div id="wgt_display" class="selected"></div> |
||||
<div id="wgt_edit"></div> |
||||
</td> |
||||
<td class="b_top_right"> </td> |
||||
</tr> |
||||
|
||||
<tr> |
||||
<td class="b_center_left"> </td> |
||||
<td> |
||||
<div id="help"></div> |
||||
<div id="ub-widget"> |
||||
<div id="parameters"> |
||||
<div class="inline"> |
||||
<label> |
||||
<select id="style_select"> |
||||
<option value="1"></option> |
||||
<option value="2"></option> |
||||
<option value="3"></option> |
||||
</select> |
||||
</label> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</td> |
||||
<td class="b_center_right"> </td> |
||||
</tr> |
||||
|
||||
<tr style="height: 54px;"> |
||||
<td class="b_bottom_left"> </td> |
||||
<td class="b_bottom_center"> </td> |
||||
<td class="b_bottom_right"> </td> |
||||
</tr> |
||||
</table> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -0,0 +1,389 @@ |
||||
|
||||
/* |
||||
Sankore API |
||||
*/ |
||||
|
||||
function startEditing() |
||||
{ |
||||
modeEdit(); |
||||
} |
||||
|
||||
function stopEditing() |
||||
{ |
||||
modeView(); |
||||
} |
||||
|
||||
function initialize() |
||||
{ |
||||
|
||||
} |
||||
|
||||
function checkResponse() |
||||
{ |
||||
checkWord(); |
||||
} |
||||
/* |
||||
/ END sankore api |
||||
*/ |
||||
|
||||
var sankoreLang = { |
||||
edit: "Edit", |
||||
view: "Display", |
||||
example: "this is\nan example\nsentence", |
||||
wgt_name: "Order sentences", |
||||
reload: "Reload", |
||||
slate: "slate", |
||||
pad: "pad", |
||||
none: "none", |
||||
help: "Help", |
||||
help_content:
|
||||
"<p><h2> Order sentences</h2></p>" + |
||||
"<p><h3> Order fragments of the sentence to reconstruct the text.</h3> </p>" + |
||||
"<p>The interactivity displays labels in a random order. Drag and drop fragments in correct order. If the result is correct, the area turns in green.</p> "+ |
||||
|
||||
"<p>“Reload “button resets the exercises. </p>" + |
||||
|
||||
"<p> Enter the “Edit” mode to : </p>" + |
||||
"<ul> <li> choose the theme of the App : pad, slate, or none (by default : none),</li>" + |
||||
"<li>determine the text and fragments. </li></ul>" + |
||||
|
||||
"<p>To create a new exercise : </p>" + |
||||
"<ul><li>insert the desired text in the text field,</li>" + |
||||
"<li>create fragments adding a new line.</li></ul> "+ |
||||
"<p>“Display” button comes back to the activity.</p>", |
||||
theme: "Theme" |
||||
} |
||||
|
||||
|
||||
var sentence = ""; |
||||
var curSentence = ""; |
||||
|
||||
if(window.sankore){ |
||||
sentence = (sankore.preference("rightOrdPhrases", ""))?sankore.preference("rightOrdPhrases", ""):sankoreLang.example; |
||||
curSentence = (sankore.preference("currentOrdPhrases", ""))?sankore.preference("currentOrdPhrases", ""):""; |
||||
} else { |
||||
sentence = sankoreLang.example; |
||||
} |
||||
|
||||
var doCheck = true; |
||||
|
||||
// array of dom elements
|
||||
var phrases = []; |
||||
|
||||
var editMode = false; // just a flag
|
||||
|
||||
var wgtState = false; // just another flag
|
||||
|
||||
// if use the "edit" button or rely on the api instead
|
||||
var isSankore = false; |
||||
// whether to do window.resize or not (window = widget area)
|
||||
var isBrowser = ( typeof( widget ) == "undefined" ); |
||||
|
||||
// hardcoded parameters, not very good
|
||||
var input_width = 606; |
||||
var widget_padding = 0; |
||||
|
||||
$(document).ready(function(){ |
||||
if(window.sankore) |
||||
if(sankore.preference("ord_phrases_style","")){ |
||||
changeStyle(sankore.preference("ord_phrases_style","")); |
||||
$("#style_select").val(sankore.preference("ord_phrases_style","")); |
||||
} else |
||||
changeStyle("3") |
||||
|
||||
$("#wgt_display").text(sankoreLang.view); |
||||
$("#wgt_edit").text(sankoreLang.edit); |
||||
$("#wgt_help").text(sankoreLang.help); |
||||
$("#help").html(sankoreLang.help_content); |
||||
$("#style_select option[value='1']").text(sankoreLang.slate); |
||||
$("#style_select option[value='2']").text(sankoreLang.pad); |
||||
$("#style_select option[value='3']").text(sankoreLang.none);
|
||||
|
||||
var tmpl = $("div.inline label").html(); |
||||
$("div.inline label").html(sankoreLang.theme + tmpl) |
||||
|
||||
$("#style_select").change(function (event){ |
||||
changeStyle($(this).find("option:selected").val()); |
||||
}) |
||||
|
||||
$("#wgt_display, #wgt_edit").click(function(event){ |
||||
if(this.id == "wgt_display"){ |
||||
if(!$(this).hasClass("selected")){
|
||||
$(this).addClass("selected"); |
||||
$("#wgt_edit").removeClass("selected"); |
||||
$("#parameters").css("display","none");
|
||||
$(this).css("display", "none"); |
||||
$("#wgt_edit").css("display", "block"); |
||||
modeView(); |
||||
} |
||||
} else {
|
||||
if(!$(this).hasClass("selected")){ |
||||
$(this).addClass("selected"); |
||||
$("#wgt_display").removeClass("selected"); |
||||
$("#parameters").css("display","block");
|
||||
$(this).css("display", "none"); |
||||
$("#wgt_display").css("display", "block"); |
||||
modeEdit(); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
$("#wgt_name").text(sankoreLang.wgt_name); |
||||
|
||||
$("#wgt_help").click(function(){ |
||||
var tmp = $(this); |
||||
if($(this).hasClass("open")){ |
||||
$(this).removeClass("help_pad").removeClass("help_wood") |
||||
$("#help").slideUp("100", function(){ |
||||
tmp.removeClass("open"); |
||||
$("#ub-widget").show(); |
||||
}); |
||||
} else {
|
||||
($("#style_select").val() == 1)?$(this).removeClass("help_pad").addClass("help_wood"):$(this).removeClass("help_wood").addClass("help_pad"); |
||||
$("#ub-widget").hide(); |
||||
$("#help").slideDown("100", function(){ |
||||
tmp.addClass("open"); |
||||
}); |
||||
} |
||||
}); |
||||
|
||||
$("#wgt_reload").text(sankoreLang.reload).click(function(){ |
||||
if(wgtState) |
||||
$("#wgt_display").trigger("click"); |
||||
else |
||||
{ |
||||
$( "#mp_word" ).empty(); |
||||
|
||||
var phrases; |
||||
phrases = shuffle( createElements( sentence ) ); |
||||
|
||||
for( i in phrases ){ |
||||
$("#mp_word").append( phrases[i] ); |
||||
} |
||||
|
||||
// in sankore api there would be a function to check
|
||||
// the answer, so no update parameter would be needed
|
||||
$( "#mp_word" ).sortable(); |
||||
if( !isSankore ){ |
||||
$( "#mp_word" ).sortable( { |
||||
update: checkSentence |
||||
} ); |
||||
} else
|
||||
$( "#mp_word" ).sortable(); |
||||
} |
||||
}); |
||||
|
||||
|
||||
}) |
||||
|
||||
function str_replace( w, b, s ){ |
||||
while( s.indexOf( w ) != -1 ){ |
||||
s = s.replace( w, b ); |
||||
} |
||||
return s; |
||||
} |
||||
|
||||
/* |
||||
============== |
||||
shuffle |
||||
============== |
||||
shuffles an array |
||||
*/ |
||||
function shuffle( arr ) |
||||
{ |
||||
var pos, tmp; |
||||
|
||||
for( var i = 0; i < arr.length; i++ ) |
||||
{ |
||||
pos = Math.round( Math.random() * ( arr.length - 1 ) ); |
||||
tmp = arr[pos]; |
||||
arr[pos] = arr[i]; |
||||
arr[i] = tmp; |
||||
} |
||||
return arr; |
||||
} |
||||
|
||||
/* |
||||
================= |
||||
createWordLetters |
||||
================= |
||||
returns array of dom elements |
||||
*/ |
||||
function createElements( sentence ) |
||||
{ |
||||
var el; |
||||
var elements = []; |
||||
var phrases = sentence.split( "\n" ); |
||||
|
||||
for( i in phrases ) |
||||
{ |
||||
el = document.createElement( "div" ); |
||||
$( el ).addClass( "phrase" ).text( phrases[i] ); |
||||
elements.push( el ); |
||||
} |
||||
return elements; |
||||
} |
||||
|
||||
//changing the style
|
||||
function changeStyle(val){ |
||||
switch(val){ |
||||
case "1": |
||||
$(".b_top_left").removeClass("btl_pad").removeClass("without_back"); |
||||
$(".b_top_center").removeClass("btc_pad").removeClass("without_back"); |
||||
$(".b_top_right").removeClass("btr_pad").removeClass("without_back"); |
||||
$(".b_center_left").removeClass("bcl_pad").removeClass("without_back"); |
||||
$(".b_center_right").removeClass("bcr_pad").removeClass("without_back"); |
||||
$(".b_bottom_right").removeClass("bbr_pad").removeClass("without_back"); |
||||
$(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back"); |
||||
$(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back"); |
||||
$("#wgt_reload").removeClass("pad_color").removeClass("pad_reload"); |
||||
$("#wgt_help").removeClass("pad_color").removeClass("pad_help"); |
||||
$("#wgt_edit").removeClass("pad_color").removeClass("pad_edit"); |
||||
$("#wgt_name").removeClass("pad_color"); |
||||
$("#wgt_display").addClass("display_wood"); |
||||
$("#style_select option:first").attr('selected',true); |
||||
$("body, html").removeClass("without_radius").addClass("radius_ft"); |
||||
break; |
||||
case "2": |
||||
$(".b_top_left").addClass("btl_pad").removeClass("without_back"); |
||||
$(".b_top_center").addClass("btc_pad").removeClass("without_back"); |
||||
$(".b_top_right").addClass("btr_pad").removeClass("without_back"); |
||||
$(".b_center_left").addClass("bcl_pad").removeClass("without_back"); |
||||
$(".b_center_right").addClass("bcr_pad").removeClass("without_back"); |
||||
$(".b_bottom_right").addClass("bbr_pad").removeClass("without_back"); |
||||
$(".b_bottom_left").addClass("bbl_pad").removeClass("without_back"); |
||||
$(".b_bottom_center").addClass("bbc_pad").removeClass("without_back"); |
||||
$("#wgt_reload").addClass("pad_color").addClass("pad_reload"); |
||||
$("#wgt_help").addClass("pad_color").addClass("pad_help"); |
||||
$("#wgt_edit").addClass("pad_color").addClass("pad_edit"); |
||||
$("#wgt_name").addClass("pad_color"); |
||||
$("#wgt_display").removeClass("display_wood"); |
||||
$("#style_select option:first").next().attr('selected',true); |
||||
$("body, html").removeClass("without_radius").removeClass("radius_ft"); |
||||
break; |
||||
case "3": |
||||
$(".b_top_left").addClass("without_back").removeClass("btl_pad"); |
||||
$(".b_top_center").addClass("without_back").removeClass("btc_pad"); |
||||
$(".b_top_right").addClass("without_back").removeClass("btr_pad"); |
||||
$(".b_center_left").addClass("without_back").removeClass("bcl_pad"); |
||||
$(".b_center_right").addClass("without_back").removeClass("bcr_pad"); |
||||
$(".b_bottom_right").addClass("without_back").removeClass("bbr_pad"); |
||||
$(".b_bottom_left").addClass("without_back").removeClass("bbl_pad"); |
||||
$(".b_bottom_center").addClass("without_back").removeClass("bbc_pad"); |
||||
$("#wgt_help").addClass("pad_color").addClass("pad_help"); |
||||
$("#wgt_reload").addClass("pad_color").addClass("pad_reload"); |
||||
$("#wgt_edit").addClass("pad_color").addClass("pad_edit"); |
||||
$("#wgt_name").addClass("pad_color"); |
||||
$("#wgt_display").removeClass("display_wood"); |
||||
$("#style_select option:last").attr('selected',true); |
||||
$("body, html").addClass("without_radius").removeClass("radius_ft"); |
||||
break; |
||||
} |
||||
} |
||||
|
||||
function checkSentence() |
||||
{ |
||||
if( !doCheck ) |
||||
return; |
||||
|
||||
var ph = []; |
||||
$( "#mp_word .phrase" ).each( function() |
||||
{ |
||||
ph.push( $( this ).text() ); |
||||
}); |
||||
if( ph.join( "\n" ) == str_replace( "\r", "", sentence ) ){ |
||||
$( "#mp_word .phrase" ).addClass( "right" ); |
||||
} else { |
||||
$( "#mp_word .phrase" ).removeClass( "right" ); |
||||
} |
||||
} |
||||
|
||||
/* |
||||
================== |
||||
modeView() |
||||
================== |
||||
turns the widget into the view mode |
||||
*/ |
||||
function modeView() |
||||
{ |
||||
if( editMode ){ |
||||
sentence = str_replace( "\r", "", $( "#mp_word textarea" ).attr( "value" ) ); |
||||
var p = sentence.split( "\n" ); |
||||
var p2 = []; |
||||
var t; |
||||
for( var i in p ) |
||||
{ |
||||
t = jQuery.trim( p[i] ); |
||||
if( t ) p2.push( t ); |
||||
} |
||||
sentence = p2.join( "\n" ); |
||||
} |
||||
|
||||
wgtState = false; |
||||
|
||||
// clean the previous word
|
||||
$( "#mp_word" ).empty(); |
||||
|
||||
var phrases; |
||||
// create new set of elements
|
||||
if(window.sankore && curSentence && !editMode) |
||||
phrases = createElements( curSentence ); |
||||
else |
||||
phrases = shuffle( createElements( sentence ) ); |
||||
|
||||
for( i in phrases ){ |
||||
$("#mp_word").append( phrases[i] ); |
||||
} |
||||
|
||||
// in sankore api there would be a function to check
|
||||
// the answer, so no update parameter would be needed
|
||||
$( "#mp_word" ).sortable(); |
||||
if( !isSankore ){ |
||||
$( "#mp_word" ).sortable( { |
||||
update: checkSentence |
||||
} ); |
||||
} else
|
||||
$( "#mp_word" ).sortable(); |
||||
|
||||
checkSentence(); |
||||
} |
||||
|
||||
/* |
||||
================ |
||||
modeEdit |
||||
================ |
||||
*/ |
||||
function modeEdit() |
||||
{ |
||||
editMode = true; |
||||
wgtState = true; |
||||
|
||||
$( "#mp_word").css( "margin-left", 0 ).empty() |
||||
.append('<textarea cols="50" rows="5">'+sentence+'</textarea>'); |
||||
} |
||||
|
||||
if (window.widget) { |
||||
window.widget.onleave = function(){ |
||||
sankore.setPreference("ord_phrases_style", $("#style_select").find("option:selected").val()); |
||||
if($( "#mp_word textarea" ).val()) |
||||
{ |
||||
modeView(); |
||||
var ph = []; |
||||
$( "#mp_word .phrase" ).each( function() |
||||
{ |
||||
ph.push( $( this ).text() ); |
||||
});
|
||||
sankore.setPreference("currentOrdPhrases", ph.join( "\n" ));
|
||||
modeEdit(); |
||||
} |
||||
else{ |
||||
ph = []; |
||||
$( "#mp_word .phrase" ).each( function() |
||||
{ |
||||
ph.push( $( this ).text() ); |
||||
});
|
||||
sankore.setPreference("currentOrdPhrases", ph.join( "\n" )); |
||||
} |
||||
sankore.setPreference("rightOrdPhrases", sentence); |
||||
} |
||||
} |
||||
@ -0,0 +1,60 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<title>D'n'd</title> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> |
||||
<link rel="stylesheet" type="text/css" href="../../css/basic.css"/> |
||||
<script type="text/javascript" src="../../js/jquery-1.6.2.min.js"></script> |
||||
<script type="text/javascript" src="../../js/jquery-ui-1.8.9.custom.min.js"></script> |
||||
<script type="text/javascript" src="js/script.js"></script> |
||||
<script type="text/javascript"> |
||||
$(document).ready(function(){ |
||||
if(window.sankore) |
||||
sankore.enableDropOnWidget(false); |
||||
start(); |
||||
}); |
||||
</script> |
||||
</head> |
||||
<body> |
||||
<table class="body_table" cellpadding=0 cellspacing=0> |
||||
<tr style="height: 54px;"> |
||||
<td class="b_top_left"> </td> |
||||
<td class="b_top_center"> |
||||
<div id="wgt_name"></div> |
||||
<div id="wgt_help"></div> |
||||
<div id="wgt_reload"></div> |
||||
<div id="wgt_display" class="selected"></div> |
||||
<div id="wgt_edit"></div> |
||||
</td> |
||||
<td class="b_top_right"> </td> |
||||
</tr> |
||||
|
||||
<tr> |
||||
<td class="b_center_left"> </td> |
||||
<td> |
||||
<div id="help"></div> |
||||
<div id="data"> |
||||
<div id="parameters"> |
||||
<div class="inline"> |
||||
<label> |
||||
<select id="style_select"> |
||||
<option value="1"></option> |
||||
<option value="2"></option> |
||||
<option value="3"></option> |
||||
</select> |
||||
</label> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</td> |
||||
<td class="b_center_right"> </td> |
||||
</tr> |
||||
|
||||
<tr style="height: 54px;"> |
||||
<td class="b_bottom_left"> </td> |
||||
<td class="b_bottom_center"> </td> |
||||
<td class="b_bottom_right"> </td> |
||||
</tr> |
||||
</table> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,559 @@ |
||||
var sankoreLang = { |
||||
display: "Display",
|
||||
edit: "Edit",
|
||||
short_desc: "Select animals from the following list:",
|
||||
add: "Add new block", |
||||
enter: "Enter your instruction here ...", |
||||
cat: "cat", |
||||
ball: "ball", |
||||
shovel: "shovel", |
||||
dog: "dog", |
||||
tree: "tree", |
||||
wgt_name: "Select", |
||||
reload: "Reload", |
||||
slate: "slate", |
||||
pad: "pad", |
||||
none: "none", |
||||
help: "Help", |
||||
help_content:
|
||||
"<p> <h2>Select</h2> </p>" + |
||||
"<p> <h3> Select the correct element in the list </h3> </p>" + |
||||
"<p> Choose correct element(s). If the result is correct, the area turns in green.</p>" + |
||||
"<p> “Reload “button resets the exercises.</p>" + |
||||
"<p> Enter the “Edit” mode to :</p>" + |
||||
"<ul><li> choose the theme of the App : pad, slate, or none (by default : none),</li>" + |
||||
"<li> modify the exercise.</li></ul>" + |
||||
"<p>In edition mode :</p>" + |
||||
"<ul><li> edit the instruction clicking on the text field,</li>" + |
||||
"<li> add text fields with “+T”,</li>" + |
||||
"<li> select the correct answer clicking in the box,</li>" + |
||||
"<li> change the order of images by dragging them,</li>" + |
||||
"<li> delete a frame clicking the cross (X),</li>" + |
||||
"<li> “Display” button comes back to the activity.</li></ul>", |
||||
theme: "Theme" |
||||
}; |
||||
|
||||
//main function
|
||||
function start(){ |
||||
|
||||
$("#wgt_display").text(sankoreLang.display); |
||||
$("#wgt_edit").text(sankoreLang.edit); |
||||
$("#wgt_name").text(sankoreLang.wgt_name); |
||||
$("#wgt_reload").text(sankoreLang.reload); |
||||
$("#wgt_help").text(sankoreLang.help); |
||||
$("#help").html(sankoreLang.help_content); |
||||
$("#style_select option[value='1']").text(sankoreLang.slate); |
||||
$("#style_select option[value='2']").text(sankoreLang.pad); |
||||
$("#style_select option[value='3']").text(sankoreLang.none); |
||||
var tmpl = $("div.inline label").html(); |
||||
$("div.inline label").html(sankoreLang.theme + tmpl) |
||||
|
||||
if(window.sankore){ |
||||
if(sankore.preference("selectionner","")){ |
||||
var data = jQuery.parseJSON(sankore.preference("selectionner","")); |
||||
importData(data); |
||||
} else
|
||||
showExample(); |
||||
if(sankore.preference("sel_style","")){ |
||||
changeStyle(sankore.preference("sel_style","")); |
||||
$("#style_select").val(sankore.preference("sel_style","")); |
||||
} else |
||||
changeStyle("3") |
||||
}
|
||||
else
|
||||
showExample(); |
||||
|
||||
//events
|
||||
if (window.widget) { |
||||
window.widget.onleave = function(){ |
||||
exportData(); |
||||
sankore.setPreference("sel_style", $("#style_select").find("option:selected").val()); |
||||
} |
||||
} |
||||
|
||||
$("#wgt_help").click(function(){ |
||||
var tmp = $(this); |
||||
if($(this).hasClass("open")){ |
||||
$(this).removeClass("help_pad").removeClass("help_wood") |
||||
$("#help").slideUp("100", function(){ |
||||
tmp.removeClass("open"); |
||||
$("#data").show(); |
||||
}); |
||||
} else { |
||||
($("#style_select").val() == 1)?$(this).removeClass("help_pad").addClass("help_wood"):$(this).removeClass("help_wood").addClass("help_pad"); |
||||
$("#data").hide(); |
||||
$("#help").slideDown("100", function(){ |
||||
tmp.addClass("open"); |
||||
}); |
||||
} |
||||
}); |
||||
|
||||
$("#wgt_reload").click(function(){ |
||||
if($("#wgt_display").hasClass("selected")){ |
||||
$(".cont").each(function(){ |
||||
var container = $(this); |
||||
container.find(".img_block, .text_block").each(function(){ |
||||
$(this).find("input:checkbox").removeAttr("checked"); |
||||
$(this).find("input:checkbox").parent().parent().removeClass("right"); |
||||
});
|
||||
}); |
||||
} |
||||
else |
||||
$("#wgt_display").trigger("click"); |
||||
}); |
||||
|
||||
$("#style_select").change(function (event){ |
||||
changeStyle($(this).find("option:selected").val()); |
||||
}) |
||||
|
||||
$("#wgt_display, #wgt_edit").click(function(event){ |
||||
if(this.id == "wgt_display"){ |
||||
if(!$(this).hasClass("selected")){ |
||||
if(window.sankore) |
||||
sankore.enableDropOnWidget(false); |
||||
$(this).addClass("selected"); |
||||
$("#wgt_edit").removeClass("selected"); |
||||
$("#parameters").css("display","none"); |
||||
// $(".add_block").remove();
|
||||
$(".cont").each(function(){ |
||||
var container = $(this); |
||||
|
||||
container.find(".text_cont").removeAttr("contenteditable"); |
||||
container.find(".add_img").remove(); |
||||
// container.find(".close_cont").remove();
|
||||
container.find(".imgs_cont").removeAttr("ondragenter") |
||||
.removeAttr("ondragleave") |
||||
.removeAttr("ondragover") |
||||
.removeAttr("ondrop"); |
||||
container.find(".img_block, .text_block").each(function(){ |
||||
$(this).find(".close_img").remove();
|
||||
$(this).find(".text_subblock").removeAttr("contenteditable"); |
||||
$(this).find("input:checkbox").removeAttr("checked") |
||||
});
|
||||
|
||||
}); |
||||
$(this).css("display", "none"); |
||||
$("#wgt_edit").css("display", "block"); |
||||
} |
||||
} else {
|
||||
if(!$(this).hasClass("selected")){ |
||||
if(window.sankore) |
||||
sankore.enableDropOnWidget(true); |
||||
$(this).addClass("selected"); |
||||
$("#wgt_display").removeClass("selected"); |
||||
$("#parameters").css("display","block"); |
||||
|
||||
$(".cont").each(function(){ |
||||
var container = $(this); |
||||
|
||||
// $("<div class='close_cont'>").appendTo(container);
|
||||
container.find(".text_cont").attr("contenteditable","true"); |
||||
container.find(".imgs_cont").removeClass("right") |
||||
.attr("ondragenter", "return false;") |
||||
.attr("ondragleave", "$(this).removeClass('over'); return false;") |
||||
.attr("ondragover", "$(this).addClass('over'); return false;") |
||||
.attr("ondrop", "$(this).removeClass('over'); return onDropTarget(this,event);"); |
||||
|
||||
var add_img = $("<div class='add_img'>"); |
||||
container.find(".img_block, .text_block").each(function(){ |
||||
$("<div class='close_img'>").appendTo($(this)); |
||||
if($(this).find("input:hidden").val() == 0) |
||||
$(this).find("input:checkbox").attr('checked', false); |
||||
else |
||||
$(this).find("input:checkbox").attr('checked', true); |
||||
$(this).find(".text_subblock").attr("contenteditable","true");
|
||||
}); |
||||
add_img.insertBefore(container.find(".clear")); |
||||
}); |
||||
|
||||
// $("<div class='add_block'>" + sankoreLang.add + "</div>").appendTo("#data");
|
||||
$(this).css("display", "none"); |
||||
$("#wgt_display").css("display", "block"); |
||||
} |
||||
} |
||||
}); |
||||
|
||||
//add new block
|
||||
// $(".add_block").live("click", function(){
|
||||
// addContainer();
|
||||
// });
|
||||
|
||||
//checkbox events
|
||||
$("input:checkbox").live("click", function(){ |
||||
if($("#wgt_display").hasClass("selected")){ |
||||
var flag = true; |
||||
var block = $(this).parent().parent(); |
||||
block.find(".text_block, .img_block, .audio_block").each(function(){ |
||||
if($(this).find("input:checkbox").is(':checked') && $(this).find("input:hidden").val() == 0)
|
||||
flag = false;
|
||||
else if(!$(this).find("input:checkbox").is(':checked') && $(this).find("input:hidden").val() == 1) |
||||
flag = false;
|
||||
}); |
||||
if(flag) |
||||
block.addClass("right"); |
||||
else |
||||
block.removeClass("right"); |
||||
} else { |
||||
if($(this).is(":checked")) |
||||
$(this).parent().find("input:hidden").val(1); |
||||
else |
||||
$(this).parent().find("input:hidden").val(0); |
||||
} |
||||
}); |
||||
|
||||
//play/pause event
|
||||
$(".play, .stop").live("click", function(){ |
||||
var tmp_audio = $(this); |
||||
var audio = tmp_audio.parent().find("audio").get(0); |
||||
if($(this).hasClass("play")){
|
||||
if(tmp_audio.parent().find("source").attr("src")){ |
||||
tmp_audio.removeClass("play").addClass("stop"); |
||||
var id = setInterval(function(){ |
||||
if(audio.currentTime == audio.duration){ |
||||
clearInterval(id); |
||||
tmp_audio.removeClass("stop").addClass("play"); |
||||
} |
||||
}, 10); |
||||
tmp_audio.parent().find("input").val(id); |
||||
audio.play(); |
||||
} |
||||
} else { |
||||
$(this).removeClass("stop").addClass("play"); |
||||
clearInterval( tmp_audio.parent().find("input").val()) |
||||
audio.pause(); |
||||
} |
||||
}); |
||||
|
||||
$(".replay").live("click", function(){ |
||||
var tmp_audio = $(this).prev(); |
||||
var audio = $(this).parent().find("audio").get(0);
|
||||
if(tmp_audio.parent().find("source").attr("src")){ |
||||
$(this).prev().removeClass("play").addClass("stop"); |
||||
clearInterval($(this).parent().find("input").val()); |
||||
var id = setInterval(function(){ |
||||
if(audio.currentTime == audio.duration){ |
||||
clearInterval(id); |
||||
tmp_audio.removeClass("stop").addClass("play"); |
||||
} |
||||
}, 10); |
||||
tmp_audio.parent().find("input").val(id); |
||||
audio.currentTime = 0; |
||||
audio.play(); |
||||
} |
||||
}); |
||||
|
||||
//adding new img
|
||||
$(".add_img").live("click", function(){ |
||||
addTextBlock($(this)); |
||||
}); |
||||
|
||||
//deleting a block
|
||||
// $(".close_cont").live("click",function(){
|
||||
// $(this).parent().remove();
|
||||
// refreshBlockNumbers();
|
||||
// });
|
||||
|
||||
//deleting the img block
|
||||
$(".close_img").live("click", function(){ |
||||
$(this).parent().remove(); |
||||
}); |
||||
|
||||
$("#wgt_reload, #wgt_display, #wgt_edit").live("mouseover",function(){ |
||||
exportData(); |
||||
}) |
||||
} |
||||
|
||||
//export
|
||||
function exportData(){ |
||||
var array_to_export = []; |
||||
$(".cont").each(function(){ |
||||
var cont_obj = new Object(); |
||||
cont_obj.text = $(this).find(".text_cont").text(); |
||||
cont_obj.blocks = []; |
||||
$(this).find(".img_block, .audio_block, .text_block").each(function(){ |
||||
var tmp_block = new Object(); |
||||
if($("#wgt_display").hasClass("selected")) |
||||
tmp_block.state = "display"; |
||||
else |
||||
tmp_block.state = "edit"; |
||||
if($(this).hasClass("img_block")){ |
||||
if($(this).find(".audio_block").size() == 0){ |
||||
tmp_block.src = $(this).find("img").attr("src").replace("../../",""); |
||||
tmp_block.hidden = $(this).find("input:hidden").val(); |
||||
tmp_block.h = $(this).find("img").height(); |
||||
tmp_block.w = $(this).find("img").width();
|
||||
tmp_block.type = "img"; |
||||
tmp_block.checked = $(this).find("input:checkbox").attr("checked"); |
||||
} |
||||
} |
||||
if($(this).hasClass("audio_block")){ |
||||
tmp_block.src = $(this).find("source").attr("src").replace("../../",""); |
||||
tmp_block.hidden = $(this).parent().find("input:hidden").val(); |
||||
tmp_block.type = "audio"; |
||||
tmp_block.checked = $(this).parent().find("input:checkbox").attr("checked"); |
||||
} |
||||
if($(this).hasClass("text_block")){ |
||||
tmp_block.text = $(this).find(".text_subblock").text(); |
||||
tmp_block.hidden = $(this).find("input:hidden").val(); |
||||
tmp_block.type = "text"; |
||||
tmp_block.checked = $(this).find("input:checkbox").attr("checked"); |
||||
}
|
||||
cont_obj.blocks.push(tmp_block); |
||||
}); |
||||
array_to_export.push(cont_obj); |
||||
}); |
||||
if(window.sankore) |
||||
sankore.setPreference("selectionner", JSON.stringify(array_to_export)); |
||||
} |
||||
|
||||
//import
|
||||
function importData(data){ |
||||
|
||||
for(var i in data){ |
||||
|
||||
var container = $("<div class='cont'>").appendTo("#data"); |
||||
var sub_container = $("<div class='sub_cont'>").appendTo(container); |
||||
var imgs_container = $("<div class='imgs_cont'>").appendTo(container);
|
||||
$("<div class='clear'>").appendTo(imgs_container); |
||||
|
||||
// $("<div class='number_cont'>" + (++tmp) + "</div>").appendTo(sub_container);
|
||||
$("<div class='text_cont'>" + data[i].text + "</div>").appendTo(sub_container); |
||||
|
||||
for(var j in data[i].blocks){ |
||||
switch(data[i].blocks[j].type){ |
||||
case "text": |
||||
var text_block = $("<div class='text_block'>").insertBefore(imgs_container.find(".clear")); |
||||
$("<div class='text_subblock'>" + data[i].blocks[j].text + "</div>").appendTo(text_block);
|
||||
$("<input type='hidden' value='" + data[i].blocks[j].hidden + "'/>").appendTo(text_block);
|
||||
$("<input type='checkbox' class='ch_box'/>").attr("checked",(data[i].blocks[j].state == "display")?((data[i].blocks[j].checked == "checked")?true:false):false).appendTo(text_block); |
||||
break; |
||||
case "img": |
||||
var img_block = $("<div class='img_block' style='text-align: center;'></div>").insertBefore(imgs_container.find(".clear")); |
||||
$("<input type='hidden' value='" + data[i].blocks[j].hidden + "'/>").appendTo(img_block);
|
||||
$("<input type='checkbox' class='ch_box'/>").attr("checked",(data[i].blocks[j].state == "display")?((data[i].blocks[j].checked == "checked")?true:false):false).appendTo(img_block) |
||||
var img = $("<img src=\"../../" + data[i].blocks[j].src + "\" style=\"display: inline;\"/>").appendTo(img_block); |
||||
img.height(data[i].blocks[j].h); |
||||
if((120 - data[i].blocks[j].h) > 0) |
||||
img.css("margin",(120 - data[i].blocks[j].h)/2 + "px 0"); |
||||
break; |
||||
case "audio": |
||||
var img_tmp = $("<div class='img_block'>").insertBefore(imgs_container.find(".clear")); |
||||
var audio_block = $("<div class='audio_block'>").appendTo(img_tmp); |
||||
$("<div class='play'>").appendTo(audio_block); |
||||
$("<div class='replay'>").appendTo(audio_block); |
||||
var source = $("<source/>").attr("src", "../../" + data[i].blocks[j].src); |
||||
var audio = $("<audio>").appendTo(audio_block); |
||||
audio.append(source); |
||||
$("<input type='hidden' value='" + data[i].blocks[j].hidden + "'/>").appendTo(img_tmp);
|
||||
$("<input type='checkbox' class='ch_box'/>").attr("checked",(data[i].blocks[j].state == "display")?((data[i].blocks[j].checked == "checked")?true:false):false).appendTo(img_tmp) |
||||
break; |
||||
} |
||||
} |
||||
} |
||||
|
||||
var block = $("input:checkbox").parent().parent(); |
||||
block.each(function(){ |
||||
var flag = true; |
||||
$(this).find(".text_block, .img_block, .audio_block").each(function(){ |
||||
if($(this).find("input:checkbox").is(':checked') && $(this).find("input:hidden").val() == 0)
|
||||
flag = false;
|
||||
else if(!$(this).find("input:checkbox").is(':checked') && $(this).find("input:hidden").val() == 1) |
||||
flag = false;
|
||||
}); |
||||
if(flag) |
||||
$(this).addClass("right"); |
||||
else |
||||
$(this).removeClass("right"); |
||||
}) |
||||
} |
||||
|
||||
//example
|
||||
function showExample(){ |
||||
|
||||
var container = $("<div class='cont'>"); |
||||
var sub_container = $("<div class='sub_cont'>").appendTo(container); |
||||
var imgs_container = $("<div class='imgs_cont'>").appendTo(container); |
||||
|
||||
// $("<div class='number_cont'>1</div>").appendTo(sub_container);
|
||||
$("<div class='text_cont'>" + sankoreLang.short_desc + "</div>").appendTo(sub_container); |
||||
|
||||
var tmp1 = $("<div class='text_block'>").appendTo(imgs_container);
|
||||
$("<div class='text_subblock'>" + sankoreLang.cat + "</div>").appendTo(tmp1);
|
||||
$("<input type='hidden' value='1'/>").appendTo(tmp1);
|
||||
$("<input type='checkbox' class='ch_box'/>").appendTo(tmp1) |
||||
var tmp2 = $("<div class='text_block'>").appendTo(imgs_container);
|
||||
$("<div class='text_subblock'>" + sankoreLang.ball + "</div>").appendTo(tmp2);
|
||||
$("<input type='hidden' value='0'/>").appendTo(tmp2);
|
||||
$("<input type='checkbox' class='ch_box'/>").appendTo(tmp2) |
||||
var tmp3 = $("<div class='text_block'>").appendTo(imgs_container);
|
||||
$("<div class='text_subblock'>" + sankoreLang.shovel + "</div>").appendTo(tmp3);
|
||||
$("<input type='hidden' value='0'/>").appendTo(tmp3);
|
||||
$("<input type='checkbox' class='ch_box'/>").appendTo(tmp3) |
||||
var tmp4 = $("<div class='text_block'>").appendTo(imgs_container);
|
||||
$("<div class='text_subblock'>" + sankoreLang.dog + "</div>").appendTo(tmp4);
|
||||
$("<input type='hidden' value='1'/>").appendTo(tmp4);
|
||||
$("<input type='checkbox' class='ch_box'/>").appendTo(tmp4) |
||||
var tmp5 = $("<div class='text_block'>").appendTo(imgs_container);
|
||||
$("<div class='text_subblock'>" + sankoreLang.tree + "</div>").appendTo(tmp5);
|
||||
$("<input type='hidden' value='0'/>").appendTo(tmp5);
|
||||
$("<input type='checkbox' class='ch_box'/>").appendTo(tmp5) |
||||
$("<div class='clear'>").appendTo(imgs_container); |
||||
|
||||
container.appendTo("#data") |
||||
} |
||||
|
||||
//add new container
|
||||
//function addContainer(){
|
||||
// var container = $("<div class='cont'>");
|
||||
// var sub_container = $("<div class='sub_cont'>").appendTo(container);
|
||||
// var imgs_container = $("<div class='imgs_cont'>").appendTo(container);
|
||||
// imgs_container.attr("ondragenter", "return false;")
|
||||
// .attr("ondragleave", "$(this).removeClass('over'); return false;")
|
||||
// .attr("ondragover", "$(this).addClass('over'); return false;")
|
||||
// .attr("ondrop", "$(this).removeClass('over'); return onDropTarget(this,event);");
|
||||
//
|
||||
// $("<div class='close_cont'>").appendTo(container);
|
||||
// $("<div class='number_cont'>"+ ($(".cont").size() + 1) +"</div>").appendTo(sub_container);
|
||||
// var text = $("<div class='text_cont' contenteditable>" + sankoreLang.enter + "</div>").appendTo(sub_container);
|
||||
//
|
||||
// $("<div class='add_img'>").appendTo(imgs_container);
|
||||
// $("<div class='clear'>").appendTo(imgs_container);
|
||||
// container.insertBefore($(".add_block"));
|
||||
//}
|
||||
|
||||
//add new img block
|
||||
function addTextBlock(dest){ |
||||
var tmp = $("<div class='text_block'>").insertBefore(dest) |
||||
$("<div class='text_subblock' contenteditable='true'>" + sankoreLang.enter + "</div>").appendTo(tmp);
|
||||
$("<input type='hidden' value='0'/>").appendTo(tmp);
|
||||
$("<input type='checkbox' class='ch_box'/>").appendTo(tmp); |
||||
$("<div class='close_img'>").appendTo(tmp); |
||||
} |
||||
|
||||
//function refreshBlockNumbers(){
|
||||
// var i = 0;
|
||||
// $(".cont").each(function(){
|
||||
// $(this).find(".number_cont").text(++i);
|
||||
// })
|
||||
//}
|
||||
|
||||
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; |
||||
} |
||||
|
||||
//changing the style
|
||||
function changeStyle(val){ |
||||
switch(val){ |
||||
case "1": |
||||
$(".b_top_left").removeClass("btl_pad").removeClass("without_back"); |
||||
$(".b_top_center").removeClass("btc_pad").removeClass("without_back"); |
||||
$(".b_top_right").removeClass("btr_pad").removeClass("without_back"); |
||||
$(".b_center_left").removeClass("bcl_pad").removeClass("without_back"); |
||||
$(".b_center_right").removeClass("bcr_pad").removeClass("without_back"); |
||||
$(".b_bottom_right").removeClass("bbr_pad").removeClass("without_back"); |
||||
$(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back"); |
||||
$(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back"); |
||||
$("#wgt_reload").removeClass("pad_color").removeClass("pad_reload"); |
||||
$("#wgt_help").removeClass("pad_color").removeClass("pad_help"); |
||||
$("#wgt_edit").removeClass("pad_color").removeClass("pad_edit"); |
||||
$("#wgt_name").removeClass("pad_color"); |
||||
$("#wgt_display").addClass("display_wood"); |
||||
$("#style_select").val(val); |
||||
$("body, html").removeClass("without_radius").addClass("radius_ft"); |
||||
break; |
||||
case "2": |
||||
$(".b_top_left").addClass("btl_pad").removeClass("without_back"); |
||||
$(".b_top_center").addClass("btc_pad").removeClass("without_back"); |
||||
$(".b_top_right").addClass("btr_pad").removeClass("without_back"); |
||||
$(".b_center_left").addClass("bcl_pad").removeClass("without_back"); |
||||
$(".b_center_right").addClass("bcr_pad").removeClass("without_back"); |
||||
$(".b_bottom_right").addClass("bbr_pad").removeClass("without_back"); |
||||
$(".b_bottom_left").addClass("bbl_pad").removeClass("without_back"); |
||||
$(".b_bottom_center").addClass("bbc_pad").removeClass("without_back"); |
||||
$("#wgt_reload").addClass("pad_color").addClass("pad_reload"); |
||||
$("#wgt_help").addClass("pad_color").addClass("pad_help"); |
||||
$("#wgt_edit").addClass("pad_color").addClass("pad_edit"); |
||||
$("#wgt_name").addClass("pad_color"); |
||||
$("#wgt_display").removeClass("display_wood"); |
||||
$("#style_select").val(val); |
||||
$("body, html").removeClass("without_radius").removeClass("radius_ft"); |
||||
break; |
||||
case "3": |
||||
$(".b_top_left").addClass("without_back").removeClass("btl_pad"); |
||||
$(".b_top_center").addClass("without_back").removeClass("btc_pad"); |
||||
$(".b_top_right").addClass("without_back").removeClass("btr_pad"); |
||||
$(".b_center_left").addClass("without_back").removeClass("bcl_pad"); |
||||
$(".b_center_right").addClass("without_back").removeClass("bcr_pad"); |
||||
$(".b_bottom_right").addClass("without_back").removeClass("bbr_pad"); |
||||
$(".b_bottom_left").addClass("without_back").removeClass("bbl_pad"); |
||||
$(".b_bottom_center").addClass("without_back").removeClass("bbc_pad"); |
||||
$("#wgt_help").addClass("pad_color").addClass("pad_help"); |
||||
$("#wgt_reload").addClass("pad_color").addClass("pad_reload"); |
||||
$("#wgt_edit").addClass("pad_color").addClass("pad_edit"); |
||||
$("#wgt_name").addClass("pad_color"); |
||||
$("#wgt_display").removeClass("display_wood"); |
||||
$("#style_select").val(val); |
||||
$("body, html").addClass("without_radius").removeClass("radius_ft"); |
||||
break; |
||||
} |
||||
} |
||||
|
||||
function onDropTarget(obj, event) { |
||||
if (event.dataTransfer) { |
||||
var format = "text/plain"; |
||||
var textData = event.dataTransfer.getData(format); |
||||
if (!textData) { |
||||
alert(":("); |
||||
} |
||||
textData = stringToXML(textData); |
||||
var tmp = textData.getElementsByTagName("path")[0].firstChild.textContent; |
||||
var tmp_type = textData.getElementsByTagName("type")[0].firstChild.textContent; |
||||
if(tmp_type.substr(0, 5) == "audio"){
|
||||
var img_tmp = $("<div class='img_block'>").insertBefore($(obj).find(".add_img")); |
||||
var audio_block = $("<div class='audio_block'>").appendTo(img_tmp) |
||||
$("<div class='close_img'>").appendTo(img_tmp); |
||||
$("<div class='play'>").appendTo(audio_block); |
||||
$("<div class='replay'>").appendTo(audio_block); |
||||
var source = $("<source/>").attr("src", "../../" + tmp); |
||||
var audio = $("<audio>").appendTo(audio_block); |
||||
audio.append(source); |
||||
$("<input type='hidden' value='0'/>").appendTo(img_tmp);
|
||||
$("<input type='checkbox' class='ch_box'/>").appendTo(img_tmp) |
||||
} else { |
||||
var img_block = $("<div class='img_block' style='text-align: center;'></div>").insertBefore($(obj).find(".add_img")); |
||||
$("<div class='close_img'>").appendTo(img_block); |
||||
$("<input type='hidden' value='0'/>").appendTo(img_block);
|
||||
$("<input type='checkbox' class='ch_box'/>").appendTo(img_block) |
||||
var tmp_img = $("<img src=\"../../" + tmp + "\" style=\"display: inline;\"/>").appendTo(img_block); |
||||
setTimeout(function(){ |
||||
if(tmp_img.height() >= tmp_img.width()) |
||||
tmp_img.attr("height", "120"); |
||||
else{ |
||||
tmp_img.attr("width","120"); |
||||
var h = tmp_img.height(); |
||||
tmp_img.attr("height",h); |
||||
tmp_img.css("margin",(120 - tmp_img.height())/2 + "px 0"); |
||||
} |
||||
}, 6); |
||||
} |
||||
} |
||||
else { |
||||
alert ("Your browser does not support the dataTransfer object."); |
||||
} |
||||
|
||||
if (event.stopPropagation) { |
||||
event.stopPropagation (); |
||||
} |
||||
else { |
||||
event.cancelBubble = true; |
||||
} |
||||
return false; |
||||
} |
||||
@ -0,0 +1,70 @@ |
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
||||
"http://www.w3.org/TR/html4/loose.dtd"> |
||||
|
||||
<html> |
||||
|
||||
<head> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
||||
<title>Template</title> |
||||
|
||||
<!--Styles--> |
||||
<link rel="stylesheet" type="text/css" href="../../styles/master.css"> |
||||
<link rel="stylesheet" type="text/css" href="../../styles/wcontainer.css"> |
||||
<link rel="stylesheet" type="text/css" href="../../styles/app.css"> |
||||
<!--Scripts--> |
||||
<script type="text/javascript" src="../../scripts/jquery-1.6.2.min.js"></script> |
||||
<script type="text/javascript" src="../../scripts/ext.js"></script> |
||||
<script type="text/javascript" src="scripts/wcontainer.js"></script> |
||||
<script type="text/javascript" src="../../scripts/app.js"></script> |
||||
<script type="text/javascript"> |
||||
$(document).ready(function(){ |
||||
if(window.sankore) |
||||
sankore.enableDropOnWidget(false); |
||||
}); |
||||
</script> |
||||
</head> |
||||
|
||||
<body> |
||||
<table class="body_table" cellpadding=0 cellspacing=0> |
||||
<tr style="height: 54px;"> |
||||
<td class="b_top_left"> </td> |
||||
<td class="b_top_center"> |
||||
<div id="wgt_name"></div> |
||||
<div id="wgt_help"></div> |
||||
<div id="wgt_reload"></div> |
||||
<div id="wgt_display" class="selected"></div> |
||||
<div id="wgt_edit"></div> |
||||
</td> |
||||
<td class="b_top_right"> </td> |
||||
</tr> |
||||
|
||||
<tr> |
||||
<td class="b_center_left"> </td> |
||||
<td> |
||||
<div id="help"></div> |
||||
<div id="ub-widget"> |
||||
<div id="parameters"> |
||||
<div class="inline"> |
||||
<label> |
||||
<select id="style_select"> |
||||
<option value="1"></option> |
||||
<option value="2"></option> |
||||
<option value="3"></option> |
||||
</select> |
||||
</label> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</td> |
||||
<td class="b_center_right"> </td> |
||||
</tr> |
||||
|
||||
<tr style="height: 54px;"> |
||||
<td class="b_bottom_left"> </td> |
||||
<td class="b_bottom_center"> </td> |
||||
<td class="b_bottom_right"> </td> |
||||
</tr> |
||||
</table> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -0,0 +1,210 @@ |
||||
var sankoreLang = { |
||||
view: "Display",
|
||||
edit: "Edit", |
||||
example: "this is a bunch of words which should be split apart", |
||||
wgt_name: "Split a sentence", |
||||
reload: "Reload", |
||||
slate: "slate", |
||||
pad: "pad", |
||||
none: "none", |
||||
help: "Help", |
||||
help_content:
|
||||
"<p><h2>Split a sentence</h2></p>" + |
||||
"<p><h3> Separate words in a sentence</h3></p>" + |
||||
"<p>The sentence is written without separations between words. The goal is to insert spaces in right places. If the result is correct, the area turns in green.</p> "+ |
||||
|
||||
"<p>To add separations between words, move the cursor and click between two characters, a separation is then added.</p>" + |
||||
"<p>“Reload” button resets the exercise.</p>" + |
||||
|
||||
|
||||
"<p>Enter the “Edit” mode to : </p>" + |
||||
"<ul><li> choose the theme of the App : pad, slate, or none (by default : none),</li>" + |
||||
"<li>modify the sentence (select the text field).</li></ul>" + |
||||
"<p>“Display” button comes back to the activity.</p>", |
||||
theme: "Theme" |
||||
}; |
||||
|
||||
// if use the "view/edit" button or rely on the api instead
|
||||
var isSankore = false; |
||||
// whether to do window.resize or not (window = widget area)
|
||||
var isBrowser = ( typeof( widget ) == "undefined" ); |
||||
|
||||
function wcontainer( containerID ) |
||||
{ |
||||
// some protecred variables
|
||||
var thisInstance = this; |
||||
this.editMode = false; |
||||
var data = {}; // see setData and getData
|
||||
|
||||
// widget size parameters
|
||||
this.minHeight = 100; |
||||
this.minWidth = 400; |
||||
|
||||
// set to 0 for no max width restriction
|
||||
this.maxWidth = 0; |
||||
|
||||
// links to the elements of the widget
|
||||
this.elements = {}; |
||||
|
||||
/* |
||||
============ |
||||
create |
||||
============ |
||||
- creates html base, inits this.elements, assings events |
||||
*/ |
||||
this.create = function( containerID ) |
||||
{ |
||||
var html =
|
||||
'<div id="mp_content">' + |
||||
'<div class="viewmode" id="mp_view">' + |
||||
'</div>' + |
||||
'<div class="editmode" id="mp_edit">' + |
||||
'</div>' + |
||||
'</div>'; |
||||
|
||||
var container = $( containerID ); |
||||
|
||||
container.append( html ); |
||||
this.elements.edit = container.find( ".editmode" ); |
||||
this.elements.view = container.find( ".viewmode" ); |
||||
this.elements.container = container; |
||||
this.elements.subcontainer = container.find( "#mp_content" ); |
||||
this.elements.containerView = this.elements.subcontainer.find( ".viewmode" ); |
||||
this.elements.containerEdit = this.elements.subcontainer.find( ".editmode" ); |
||||
|
||||
$("#wgt_edit").live("click", function(){ |
||||
thisInstance.modeEdit(); |
||||
} ); |
||||
|
||||
$("#wgt_display").live("click", function(){ |
||||
thisInstance.modeView(); |
||||
} ); |
||||
}; |
||||
|
||||
|
||||
/* |
||||
=============== |
||||
setViewContent |
||||
=============== |
||||
- assigns custom html to the viewmode container |
||||
*/ |
||||
this.setViewContent = function( html ) |
||||
{ |
||||
this.elements.container.find( "#mp_content .viewmode" ).html( html ); |
||||
}; |
||||
|
||||
/* |
||||
=============== |
||||
setEditContent |
||||
=============== |
||||
- assigns custom html to the editmode container |
||||
*/ |
||||
this.setEditContent = function( html ) |
||||
{ |
||||
this.elements.container.find( "#mp_content .editmode" ).html( html ); |
||||
}; |
||||
|
||||
|
||||
|
||||
/* |
||||
========================= |
||||
modeEdit and modeView |
||||
========================= |
||||
- switch the widget betweed modes |
||||
* for customization extend onEditMode and onViewMode |
||||
*/ |
||||
this.modeEdit = function() |
||||
{ |
||||
this.onEditMode(); |
||||
this.editMode = true; |
||||
this.elements.edit.removeClass( "hide" ); |
||||
this.elements.view.addClass( "hide" ); |
||||
|
||||
//this.adjustSize();
|
||||
}; |
||||
this.modeView = function() |
||||
{ |
||||
this.onViewMode(); |
||||
this.editMode = false; |
||||
this.elements.edit.addClass( "hide" ); |
||||
this.elements.view.removeClass( "hide" ); |
||||
|
||||
//this.adjustSize();
|
||||
}; |
||||
|
||||
|
||||
/* |
||||
====================== |
||||
setData and getData |
||||
====================== |
||||
- store some data inside |
||||
*/ |
||||
this.setData = function( name, value ){ |
||||
data[name] = value; |
||||
}; |
||||
this.getData = function( name ){ |
||||
if( typeof( data[name] ) == "undefined" ){ |
||||
return null; |
||||
} else return data[name]; |
||||
}; |
||||
|
||||
|
||||
// redefinable methods
|
||||
|
||||
/* |
||||
========================== |
||||
onEditMode and onViewMode |
||||
========================== |
||||
- these are called when the mode is being changed |
||||
*/ |
||||
this.onEditMode = function(){ |
||||
//
|
||||
}; |
||||
this.onViewMode = function(){ |
||||
//
|
||||
}; |
||||
|
||||
/* |
||||
====================== |
||||
viewSize and editSize |
||||
====================== |
||||
- calculate container size for the adjustSize method |
||||
* they are likely to be redefined for each particular widget |
||||
*/ |
||||
this.viewSize = function(){ |
||||
return { |
||||
w: this.elements.containerView.outerWidth(), |
||||
h: this.elements.containerView.outerHeight() |
||||
}; |
||||
}; |
||||
this.editSize = function(){ |
||||
return { |
||||
w: this.elements.containerEdit.outerWidth(), |
||||
h: this.elements.containerEdit.outerHeight() |
||||
}; |
||||
}; |
||||
|
||||
/* |
||||
===================== |
||||
checkAnswer |
||||
===================== |
||||
- check if the exercise in the view mode was done right |
||||
* redefine it for each particular widget |
||||
*/ |
||||
this.checkAnswer = function() |
||||
{ |
||||
//
|
||||
}; |
||||
|
||||
|
||||
// constructor end
|
||||
|
||||
// if the constructor was called with a parameter,
|
||||
// call create() automatically
|
||||
if( arguments.length > 0 ){ |
||||
this.create( containerID ); |
||||
} |
||||
this.setData( "dw", this.elements.container.outerWidth( true ) - this.elements.container.width() ); |
||||
this.setData( "dh", this.elements.container.outerHeight( true ) - this.elements.container.height() ); |
||||
window.winstance = thisInstance; |
||||
} |
||||
@ -1,97 +1,35 @@ |
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
||||
"http://www.w3.org/TR/html4/loose.dtd"> |
||||
|
||||
<html> |
||||
|
||||
<head> |
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
||||
<title>Template</title> |
||||
|
||||
<!--Styles--> |
||||
<link rel="stylesheet" type="text/css" href="styles/master.css"> |
||||
<link rel="stylesheet" type="text/css" href="styles/wcontainer.css"> |
||||
<link rel="stylesheet" type="text/css" href="styles/app.css"> |
||||
<!--Scripts--> |
||||
<script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script> |
||||
<script type="text/javascript" src="scripts/ext.js"></script> |
||||
<script type="text/javascript" src="scripts/wcontainer.js"></script> |
||||
<script type="text/javascript" src="scripts/app2.js"></script> |
||||
<script type="text/javascript"> |
||||
if (parent && parent.loaded) |
||||
parent.loaded(); |
||||
|
||||
$(document).ready(function(){ |
||||
if(window.sankore) |
||||
sankore.enableDropOnWidget(false); |
||||
var lang = ""; //locale language |
||||
if(window.sankore){ |
||||
lang = sankore.locale().substr(0,2); |
||||
} else |
||||
lang = "en"; |
||||
if(lang != "en"){ |
||||
returnStatus(lang); |
||||
} |
||||
|
||||
function returnStatus(lang){ |
||||
$.ajax({ |
||||
type: 'POST', |
||||
url:'locales/' + lang + '/index.html', |
||||
statusCode: { |
||||
404: function() { |
||||
alert(lang) |
||||
}, |
||||
200: function(){ |
||||
|
||||
window.location.href = 'locales/' + lang + '/index.html'; |
||||
} |
||||
var lang = (window.sankore)?sankore.locale().substr(0,2):"en"; //local language |
||||
|
||||
$.ajax({ |
||||
type: 'POST', |
||||
url: 'locales/' + lang + '/index.html', |
||||
statusCode: { |
||||
404: function() { |
||||
window.location.href = 'locales/en/index.html'; |
||||
}, |
||||
200: function(){ |
||||
window.location.href = 'locales/' + lang + '/index.html'; |
||||
} |
||||
}); |
||||
} |
||||
} |
||||
}); |
||||
}); |
||||
</script> |
||||
</head> |
||||
|
||||
<body> |
||||
<table class="body_table" cellpadding=0 cellspacing=0> |
||||
<tr style="height: 54px;"> |
||||
<td class="b_top_left"> </td> |
||||
<td class="b_top_center"> |
||||
<div id="wgt_name"></div> |
||||
<div id="wgt_help"></div> |
||||
<div id="wgt_reload"></div> |
||||
<div id="wgt_display" class="selected"></div> |
||||
<div id="wgt_edit"></div> |
||||
</td> |
||||
<td class="b_top_right"> </td> |
||||
</tr> |
||||
|
||||
<tr> |
||||
<td class="b_center_left"> </td> |
||||
<td> |
||||
<div id="help"></div> |
||||
<div id="ub-widget"> |
||||
<div id="parameters"> |
||||
<div class="inline"> |
||||
<label> |
||||
<select id="style_select"> |
||||
<option value="1"></option> |
||||
<option value="2"></option> |
||||
<option value="3"></option> |
||||
</select> |
||||
</label> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</td> |
||||
<td class="b_center_right"> </td> |
||||
</tr> |
||||
|
||||
<tr style="height: 54px;"> |
||||
<td class="b_bottom_left"> </td> |
||||
<td class="b_bottom_center"> </td> |
||||
<td class="b_bottom_right"> </td> |
||||
</tr> |
||||
</table> |
||||
|
||||
</body> |
||||
|
||||
</html> |
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue