diff --git a/resources/library/interactivities/Selectionner.wgt/css/basic.css b/resources/library/interactivities/Selectionner.wgt/css/basic.css new file mode 100644 index 00000000..6ae31837 --- /dev/null +++ b/resources/library/interactivities/Selectionner.wgt/css/basic.css @@ -0,0 +1,420 @@ +html, body{ + width: 100%; + height: 100%; + margin: 0; + padding: 0; + border-radius: 50px; +} + +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; +} + +.green_point{ + background-image: url(../img/green_point.png); +} + +.red_point{ + background-image: url(../img/red_point.png); +} + +#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%; + margin: 0; +} + +.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; + float: right; + background-color: #ccc; + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; + padding-left: 10px; +} + +.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_text.png); + background-position: center; + background-repeat: no-repeat; + cursor: pointer; + float: left; + display: inline-block; +} + +.img_block{ + display: inline-block; +} + +.img_block, .text_block{ + width: 120px; + height: 120px; + margin: 10px 20px; + cursor: pointer; + float: left; + position: relative; + border: 1px solid #ccc; + -moz-box-shadow: #ccc -1px 0 4px; + -webkit-box-shadow: #ccc -1px 0 4px; + box-shadow: #ccc -1px 0 4px; + background-color: white; +} + +.text_block{ + display: table; + text-align: center; +} + +.audio_block{ + width: 120px; + height: 30px; + margin: 44px 5px; + position: relative; + float: left; + display: inline-block; +} + +.text_subblock{ + display: table-cell; + vertical-align: middle; + font-size: 120%; +} + +.close_img, .clear_img, .numb_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; +} + +.clear_img{ + background-image: url(../img/clear_img.png); + top: 15px; +} + +.numb_img{ + background-image: url(../img/numb_img.png); + left: -15px; + top: -15px; + color: white; + font-weight: bold; + font-size: 130%; +} + +.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; +} + +.ch_box{ + margin: 0; + padding: 0; + position: absolute; + bottom: 0; + right: 0; +} + +.right{ + background-color: #9f9; +} + +.clear{ + clear: both; +} + +.over{ + background-color: #ccc; +} + +.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; +} + +/*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; + width: 200px; + margin: 10px 10px 0 10px; + padding: 0; + float: left; + /*font-family: "Lobster13Regular";*/ + font-size: 24px; + color: #8c5730; +} + +#wgt_reload, #wgt_edit, #wgt_display{ + cursor: pointer; + width: 80px; + height: 44px; + margin: 10px 10px 0 0; + float: right; + /*font-family: "Lobster13Regular";*/ + font-size: 24px; + color: #8c5730; +} + +#wgt_display{ + width: 100px; + padding-left: 40px; + background-image: url(../img/slate-edit.png); + background-repeat: no-repeat; + background-position: top 0; + display: none; +} + +#wgt_edit{ + width: 100px; + padding-left: 40px; + background-image: url(../img/slate-edit.png); + background-repeat: no-repeat; + background-position: top 0; +} + +#wgt_reload{ + padding-left: 40px; + background-image: url(../img/slate-toolbar-reload.png); + background-repeat: no-repeat; + background-position: top 0; +} + +.style_select{ + width: 120px; + /*font-family: "Lobster13Regular";*/ + font-size: 24px; + float: right; + margin: 10px 20px 0 0; + border-radius: 10px; + background-image: url(../img/ar_down.png); + background-color: #d4aa79; + color: #8c5730; + background-position: 105px 11px; + background-repeat: no-repeat; + -webkit-appearance: menulist-text; + display: none; +} + +.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; +} + +.pad_color{ + color: white !important; +} + +.pad_reload{ + background-image: url(../img/slate-toolbar-reload-white.png) !important; +} + +.pad_edit{ + background-image: url(../img/slate-display.png) !important; +} + +.pad_select{ + background-color: black !important; + color: white !important; + background-image: url(../img/ar_down_white.png) !important; +} diff --git a/resources/library/interactivities/Selectionner.wgt/img/add_block.png b/resources/library/interactivities/Selectionner.wgt/img/add_block.png new file mode 100644 index 00000000..50f95408 Binary files /dev/null and b/resources/library/interactivities/Selectionner.wgt/img/add_block.png differ diff --git a/resources/library/interactivities/Selectionner.wgt/img/circle.png b/resources/library/interactivities/Selectionner.wgt/img/circle.png new file mode 100644 index 00000000..4de395a3 Binary files /dev/null and b/resources/library/interactivities/Selectionner.wgt/img/circle.png differ diff --git a/resources/library/interactivities/Selectionner.wgt/img/close_cont.png b/resources/library/interactivities/Selectionner.wgt/img/close_cont.png new file mode 100644 index 00000000..210b4d6d Binary files /dev/null and b/resources/library/interactivities/Selectionner.wgt/img/close_cont.png differ diff --git a/resources/library/interactivities/Selectionner.wgt/img/green_point.png b/resources/library/interactivities/Selectionner.wgt/img/green_point.png new file mode 100644 index 00000000..a2a44680 Binary files /dev/null and b/resources/library/interactivities/Selectionner.wgt/img/green_point.png differ diff --git a/resources/library/interactivities/Selectionner.wgt/img/play.png b/resources/library/interactivities/Selectionner.wgt/img/play.png new file mode 100644 index 00000000..cdd651ae Binary files /dev/null and b/resources/library/interactivities/Selectionner.wgt/img/play.png differ diff --git a/resources/library/interactivities/Selectionner.wgt/img/red_point.png b/resources/library/interactivities/Selectionner.wgt/img/red_point.png new file mode 100644 index 00000000..f6daa19a Binary files /dev/null and b/resources/library/interactivities/Selectionner.wgt/img/red_point.png differ diff --git a/resources/library/interactivities/Selectionner.wgt/img/replay.png b/resources/library/interactivities/Selectionner.wgt/img/replay.png new file mode 100644 index 00000000..8d6c192b Binary files /dev/null and b/resources/library/interactivities/Selectionner.wgt/img/replay.png differ diff --git a/resources/library/interactivities/Selectionner.wgt/img/stop.png b/resources/library/interactivities/Selectionner.wgt/img/stop.png new file mode 100644 index 00000000..782c41cf Binary files /dev/null and b/resources/library/interactivities/Selectionner.wgt/img/stop.png differ diff --git a/resources/library/interactivities/Selectionner.wgt/js/script.js b/resources/library/interactivities/Selectionner.wgt/js/script.js new file mode 100644 index 00000000..a625e979 --- /dev/null +++ b/resources/library/interactivities/Selectionner.wgt/js/script.js @@ -0,0 +1,492 @@ +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 the desired", + reload: "Reload", + slate: "Wood", + pad: "Pad" +}; + +//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); + $(".style_select option[value='1']").text(sankoreLang.slate); + $(".style_select option[value='2']").text(sankoreLang.pad); + + 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(1) + } + else + showExample(); + + //events + if (window.widget) { + window.widget.onleave = function(){ + exportData(); + sankore.setPreference("sel_style", $(".style_select").find("option:selected").val()); + } + } + + $("#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"); + $(".style_select").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"); + $(".style_select").css("display","block"); + + $(".cont").each(function(){ + var container = $(this); + + $("
").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 = $("
"); + container.find(".img_block, .text_block").each(function(){ + $("
").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")); + }); + + $("
" + sankoreLang.add + "
").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"); + 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"); + tmp_block.hidden = $(this).parent().find("input:hidden").val(); + tmp_block.type = "audio"; + tmp_block.checked = $(this).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); + }); + + sankore.setPreference("selectionner", JSON.stringify(array_to_export)); +} + +//import +function importData(data){ + + var tmp = 0; + for(var i in data){ + + var container = $("
").appendTo("#data"); + var sub_container = $("
").appendTo(container); + var imgs_container = $("
").appendTo(container); + $("
").appendTo(imgs_container); + + $("
" + (++tmp) + "
").appendTo(sub_container); + $("
" + data[i].text + "
").appendTo(sub_container); + + for(var j in data[i].blocks){ + switch(data[i].blocks[j].type){ + case "text": + var text_block = $("
").insertBefore(imgs_container.find(".clear")); + $("
" + data[i].blocks[j].text + "
").appendTo(text_block); + $("").appendTo(text_block); + $("").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 = $("
").insertBefore(imgs_container.find(".clear")); + $("").appendTo(img_block); + $("").attr("checked",(data[i].blocks[j].state == "display")?((data[i].blocks[j].checked == "checked")?true:false):false).appendTo(img_block) + $("").appendTo(img_block); + break; + case "audio": + var img_tmp = $("
").insertBefore(imgs_container.find(".clear")); + var audio_block = $("
").appendTo(img_tmp); + $("
").appendTo(audio_block); + $("
").appendTo(audio_block); + var source = $("").attr("src", data[i].blocks[j].src); + var audio = $("