You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
572 lines
23 KiB
572 lines
23 KiB
13 years ago
|
var sankoreLang = {
|
||
12 years ago
|
display: "Display",
|
||
|
13 years ago
|
edit: "Edit",
|
||
|
|
short_desc: "Place the pictures in ascending order.",
|
||
|
|
add: "Add new block",
|
||
|
13 years ago
|
enter: "Enter your instruction here ...",
|
||
|
12 years ago
|
wgt_name: "Order pictures",
|
||
|
13 years ago
|
reload: "Reload",
|
||
|
12 years ago
|
slate: "slate",
|
||
|
|
pad: "pad",
|
||
|
|
none: "none",
|
||
12 years ago
|
help: "Help",
|
||
|
12 years ago
|
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>" +
|
||
|
12 years ago
|
"<ul> <li> choose the theme of interactivity : pad, slate or none (by default : none),</li>" +
|
||
|
12 years ago
|
"<li> modify an exercise or create a new one. </li> </ul>" +
|
||
|
|
|
||
|
|
"<p>To create a new exercise : </p>" +
|
||
|
|
"<ul> <li> click on “New block”,</li>" +
|
||
|
|
"<li> insert an instruction clicking on the text field “Enter your instruction here ... ”,</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> </ul>" +
|
||
|
|
|
||
|
|
"<p> To delete a frame, click the cross (X).</p>" +
|
||
|
|
"<p> To change a picture, click the “reload” button on the frame.</p>" +
|
||
|
|
|
||
|
|
"<p> To delete a whole exercise, click the cross to the left. </p>" +
|
||
|
|
|
||
|
|
"<p> “Display” button comes back to the activity.</p>",
|
||
12 years ago
|
theme: "Theme"
|
||
|
13 years ago
|
};
|
||
|
|
|
||
|
|
//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);
|
||
|
12 years ago
|
$("#wgt_help").text(sankoreLang.help);
|
||
|
|
$("#help").html(sankoreLang.help_content);
|
||
|
12 years ago
|
$("#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)
|
||
|
13 years ago
|
|
||
|
|
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(){
|
||
|
13 years ago
|
exportData();
|
||
|
13 years ago
|
}
|
||
|
|
}
|
||
|
|
|
||
|
12 years ago
|
$("#wgt_help").click(function(){
|
||
|
|
var tmp = $(this);
|
||
|
|
if($(this).hasClass("open")){
|
||
|
12 years ago
|
$(this).removeClass("help_pad").removeClass("help_wood")
|
||
|
12 years ago
|
$("#help").slideUp("100", function(){
|
||
|
|
tmp.removeClass("open");
|
||
|
|
$("#data").show();
|
||
|
|
});
|
||
|
12 years ago
|
} else {
|
||
|
|
($("#style_select").val() == 1)?$(this).removeClass("help_pad").addClass("help_wood"):$(this).removeClass("help_wood").addClass("help_pad");
|
||
|
12 years ago
|
$("#data").hide();
|
||
|
|
$("#help").slideDown("100", function(){
|
||
|
|
tmp.addClass("open");
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
13 years ago
|
$("#wgt_reload").click(function(){
|
||
|
13 years ago
|
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();
|
||
|
13 years ago
|
});
|
||
|
|
|
||
|
12 years ago
|
$("#style_select").change(function (event){
|
||
|
13 years ago
|
changeStyle($(this).find("option:selected").val());
|
||
|
|
})
|
||
|
|
|
||
|
|
$("#wgt_display, #wgt_edit").click(function(event){
|
||
|
|
if(this.id == "wgt_display"){
|
||
|
|
if(!$(this).hasClass("selected")){
|
||
|
12 years ago
|
if(window.sankore)
|
||
|
|
sankore.enableDropOnWidget(false);
|
||
|
13 years ago
|
$(this).addClass("selected");
|
||
|
|
$("#wgt_edit").removeClass("selected");
|
||
|
12 years ago
|
$("#parameters").css("display","none");
|
||
|
13 years ago
|
$(".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")){
|
||
|
12 years ago
|
if(window.sankore)
|
||
|
|
sankore.enableDropOnWidget(true);
|
||
|
13 years ago
|
$(this).addClass("selected");
|
||
|
|
$("#wgt_display").removeClass("selected");
|
||
|
12 years ago
|
$("#parameters").css("display","block");
|
||
|
13 years ago
|
$(".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();
|
||
|
12 years ago
|
cont_obj.style = $("#style_select").find("option:selected").val();
|
||
|
13 years ago
|
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");
|
||
|
|
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();
|
||
|
12 years ago
|
cont_obj.style = $("#style_select").find("option:selected").val();
|
||
|
13 years ago
|
cont_obj.tmp = "clear";
|
||
|
|
array_to_export.push(cont_obj);
|
||
|
|
}
|
||
|
12 years ago
|
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");
|
||
|
|
}
|
||
|
13 years ago
|
}
|
||
|
|
|
||
|
|
//import
|
||
|
|
function importData(data){
|
||
|
|
|
||
|
|
var tmp = 0;
|
||
|
|
for(var i in data){
|
||
|
|
if(data[i].tmp){
|
||
|
|
changeStyle(data[i].style);
|
||
|
12 years ago
|
$("#style_select").val(data[i].style);
|
||
|
13 years ago
|
}
|
||
|
|
else {
|
||
|
|
if(i == 0){
|
||
|
|
changeStyle(data[i].style);
|
||
|
12 years ago
|
$("#style_select").val(data[i].style);
|
||
|
13 years ago
|
}
|
||
|
|
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;'>");
|
||
|
12 years ago
|
img.height(data[i].imgs[j].ht);
|
||
|
13 years ago
|
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);
|
||
|
|
}
|
||
|
13 years ago
|
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);
|
||
|
|
|
||
|
13 years ago
|
for(j = 0; j<tmp_array.length;j++)
|
||
|
|
tmp_array[j].appendTo(imgs_container);
|
||
|
13 years ago
|
imgs_container.sortable().bind('sortupdate', function(event, ui) {
|
||
|
|
checkResult(event);
|
||
|
|
});
|
||
|
13 years ago
|
container.appendTo("#data");
|
||
|
13 years ago
|
imgs_container.trigger("sortupdate")
|
||
|
13 years ago
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
//example
|
||
|
|
function showExample(){
|
||
|
|
|
||
|
12 years ago
|
changeStyle("3");
|
||
|
13 years ago
|
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);
|
||
|
13 years ago
|
imgs_container.sortable().bind('sortupdate', function(event, ui) {
|
||
|
|
checkResult(event);
|
||
|
|
});
|
||
|
13 years ago
|
|
||
|
|
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){
|
||
|
12 years ago
|
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");
|
||
|
12 years ago
|
$("#wgt_help").removeClass("pad_color").removeClass("pad_help");
|
||
|
12 years ago
|
$("#wgt_edit").removeClass("pad_color").removeClass("pad_edit");
|
||
|
|
$("#wgt_name").removeClass("pad_color");
|
||
|
12 years ago
|
$("#wgt_display").addClass("display_wood");
|
||
|
|
$("#style_select").val(val);
|
||
|
|
$("body, html").removeClass("without_radius").addClass("radius_ft");
|
||
|
12 years ago
|
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");
|
||
|
12 years ago
|
$("#wgt_help").addClass("pad_color").addClass("pad_help");
|
||
|
12 years ago
|
$("#wgt_edit").addClass("pad_color").addClass("pad_edit");
|
||
|
|
$("#wgt_name").addClass("pad_color");
|
||
|
12 years ago
|
$("#wgt_display").removeClass("display_wood");
|
||
|
|
$("#style_select").val(val);
|
||
|
|
$("body, html").removeClass("without_radius").removeClass("radius_ft");
|
||
|
12 years ago
|
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");
|
||
|
12 years ago
|
$("#wgt_help").addClass("pad_color").addClass("pad_help");
|
||
|
12 years ago
|
$("#wgt_reload").addClass("pad_color").addClass("pad_reload");
|
||
|
|
$("#wgt_edit").addClass("pad_color").addClass("pad_edit");
|
||
|
|
$("#wgt_name").addClass("pad_color");
|
||
|
12 years ago
|
$("#wgt_display").removeClass("display_wood");
|
||
|
|
$("#style_select").val(val);
|
||
|
|
$("body, html").addClass("without_radius").removeClass("radius_ft");
|
||
|
12 years ago
|
break;
|
||
|
13 years ago
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
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");
|
||
|
12 years ago
|
var h = tmp_img.height();
|
||
|
|
tmp_img.attr("height",h);
|
||
|
13 years ago
|
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;
|
||
|
|
}
|
||
|
|
|