help for 'selectionner' widget

resources/library/interactivities/Selectionner.wgt/css/basic.css

@@ -4,6 +4,7 @@ html, body{
     margin: 0;
     padding: 0;    
     border-radius: 50px;
+    overflow: hidden;
 }
 
 body{
@@ -133,12 +134,12 @@ body{
     -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;
+    background-color: white;
 }
 
 .audio_block{
@@ -317,7 +318,6 @@ body{
 
 #wgt_name{
     height: 44px;
-    width: 200px;
     margin: 10px 10px 0 10px;
     padding: 0;
     float: left;
@@ -326,9 +326,8 @@ body{
     color: #8c5730;
 }
 
-#wgt_reload, #wgt_edit, #wgt_display{
+#wgt_reload, #wgt_edit, #wgt_display, #wgt_help{
     cursor: pointer;
-    width: 80px;
     height: 44px;
     margin: 10px 10px 0 0;
     float: right;
@@ -338,7 +337,6 @@ body{
 }
 
 #wgt_display{
-    width: 100px;
     padding-left: 40px;
     background-image: url(../img/slate-edit.png);
     background-repeat: no-repeat;
@@ -347,7 +345,6 @@ body{
 }
 
 #wgt_edit{    
-    width: 100px;
     padding-left: 40px;
     background-image: url(../img/slate-edit.png);
     background-repeat: no-repeat;
@@ -440,3 +437,27 @@ body{
     color: white !important;
     background-image: url(../img/ar_down_white.png) !important;
 }
+
+.pad_help{
+    background-image: url(../img/slate-help-white.png) !important;
+}
+
+#wgt_help{
+    padding-left: 32px;
+    background-image: url(../img/slate-help.png);
+    background-repeat: no-repeat;
+    background-position: top 0;
+}
+
+#help{
+    width: 100%;
+    height: 100%;    
+    overflow: auto;
+    display: none;
+    background-color: #ccc;
+    padding: 5px;
+}
+
+.open{
+    
+}
\ No newline at end of file

resources/library/interactivities/Selectionner.wgt/index.html

@@ -48,6 +48,7 @@
                 <td class="b_top_left">&nbsp;</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>
@@ -63,6 +64,7 @@
             <tr>
                 <td class="b_center_left">&nbsp;</td>
                 <td>
+                    <div id="help"></div>
                     <div id="data">
                         
                     </div>

resources/library/interactivities/Selectionner.wgt/js/script.js

@@ -13,7 +13,9 @@ var sankoreLang = {
     reload: "Reload",
     slate: "Wood",
     pad: "Pad",
-    none: "None"
+    none: "None",
+    help: "Help",
+    help_content: "This is an example of help content ..."
 };
 
 //main function
@@ -23,6 +25,8 @@ function start(){
     $("#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);
@@ -50,6 +54,21 @@ function start(){
         }
     }
     
+    $("#wgt_help").click(function(){
+        var tmp = $(this);
+        if($(this).hasClass("open")){
+            $("#help").slideUp("100", function(){
+                tmp.removeClass("open");
+                $("#data").show();
+            });
+        } else {            
+            $("#data").hide();
+            $("#help").slideDown("100", function(){
+                tmp.addClass("open");
+            });
+        }
+    });
+    
     $("#wgt_reload").click(function(){
         if($("#wgt_display").hasClass("selected")){
             $(".cont").each(function(){
@@ -252,7 +271,7 @@ function exportData(){
                 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");
+                tmp_block.checked = $(this).parent().find("input:checkbox").attr("checked");
             }
             if($(this).hasClass("text_block")){
                 tmp_block.text = $(this).find(".text_subblock").text();
@@ -294,7 +313,10 @@ function importData(data){
                     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)
-                    $("<img src=\"" + data[i].blocks[j].src + "\" width='" + data[i].blocks[j].w + "' height='" + data[i].blocks[j].h + "' style=\"display: inline;\"/>").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"));
@@ -422,6 +444,7 @@ function changeStyle(val){
             $(".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_display").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_name").removeClass("pad_color");
@@ -438,6 +461,7 @@ function changeStyle(val){
             $(".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_display").addClass("pad_color").addClass("pad_edit");
             $("#wgt_name").addClass("pad_color");
@@ -453,6 +477,7 @@ function changeStyle(val){
             $(".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_display").addClass("pad_color").addClass("pad_edit");
@@ -495,6 +520,8 @@ function onDropTarget(obj, event) {
                     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);

resources/library/interactivities/Selectionner.wgt/locales/fr/index.html

@@ -22,6 +22,7 @@
                 <td class="b_top_left">&nbsp;</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>
@@ -37,6 +38,7 @@
             <tr>
                 <td class="b_center_left">&nbsp;</td>
                 <td>
+                    <div id="help"></div>
                     <div id="data">
                         
                     </div>

resources/library/interactivities/Selectionner.wgt/locales/fr/js/script.js

@@ -13,7 +13,9 @@ var sankoreLang = {
     reload: "Recharger",
     slate: "ardoise",
     pad: "tablette",
-    none: "aucun"
+    none: "aucun",
+    help: "aide",
+    help_content: "Ceci est un exemple de contenu de l'aide ..."
 };
 
 //main function
@@ -23,6 +25,8 @@ function start(){
     $("#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);
@@ -50,8 +54,33 @@ function start(){
         }
     }
     
+    $("#wgt_help").click(function(){
+        var tmp = $(this);
+        if($(this).hasClass("open")){
+            $("#help").slideUp("100", function(){
+                tmp.removeClass("open");
+                $("#data").show();
+            });
+        } else {            
+            $("#data").hide();
+            $("#help").slideDown("100", function(){
+                tmp.addClass("open");
+            });
+        }
+    });
+    
     $("#wgt_reload").click(function(){
-        window.location.reload();
+        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){
@@ -240,7 +269,7 @@ function exportData(){
                 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).find("input:checkbox").attr("checked");
+                tmp_block.checked = $(this).parent().find("input:checkbox").attr("checked");
             }
             if($(this).hasClass("text_block")){
                 tmp_block.text = $(this).find(".text_subblock").text();
@@ -282,7 +311,10 @@ function importData(data){
                     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)
-                    $("<img src=\"../../" + data[i].blocks[j].src + "\" width='" + data[i].blocks[j].w + "' height='" + data[i].blocks[j].h + "' style=\"display: inline;\"/>").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"));
@@ -411,6 +443,7 @@ function changeStyle(val){
             $(".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_display").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_name").removeClass("pad_color");
@@ -427,6 +460,7 @@ function changeStyle(val){
             $(".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_display").addClass("pad_color").addClass("pad_edit");
             $("#wgt_name").addClass("pad_color");
@@ -442,6 +476,7 @@ function changeStyle(val){
             $(".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_display").addClass("pad_color").addClass("pad_edit");
@@ -484,6 +519,8 @@ function onDropTarget(obj, event) {
                     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);

resources/library/interactivities/Selectionner.wgt/locales/ru/index.html

@@ -22,6 +22,7 @@
                 <td class="b_top_left">&nbsp;</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>
@@ -37,6 +38,7 @@
             <tr>
                 <td class="b_center_left">&nbsp;</td>
                 <td>
+                    <div id="help"></div>
                     <div id="data">
                         
                     </div>

resources/library/interactivities/Selectionner.wgt/locales/ru/js/script.js

@@ -13,7 +13,9 @@ var sankoreLang = {
     reload: "Обновить",
     slate: "Узор",
     pad: "Планшет",
-    none: "Нет"
+    none: "Нет",
+    help: "Помощь",
+    help_content: "Пример текста помощи ..."
 };
 
 //main function
@@ -23,6 +25,8 @@ function start(){
     $("#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);
@@ -50,8 +54,33 @@ function start(){
         }
     }
     
+    $("#wgt_help").click(function(){
+        var tmp = $(this);
+        if($(this).hasClass("open")){
+            $("#help").slideUp("100", function(){
+                tmp.removeClass("open");
+                $("#data").show();
+            });
+        } else {            
+            $("#data").hide();
+            $("#help").slideDown("100", function(){
+                tmp.addClass("open");
+            });
+        }
+    });
+    
     $("#wgt_reload").click(function(){
-        window.location.reload();
+        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){
@@ -209,6 +238,8 @@ function start(){
     $(".close_img").live("click", function(){
         $(this).parent().remove();
     });
+
+    
 }
 
 //export
@@ -238,7 +269,7 @@ function exportData(){
                 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).find("input:checkbox").attr("checked");
+                tmp_block.checked = $(this).parent().find("input:checkbox").attr("checked");
             }
             if($(this).hasClass("text_block")){
                 tmp_block.text = $(this).find(".text_subblock").text();
@@ -280,7 +311,10 @@ function importData(data){
                     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)
-                    $("<img src=\"../../" + data[i].blocks[j].src + "\" width='" + data[i].blocks[j].w + "' height='" + data[i].blocks[j].h + "' style=\"display: inline;\"/>").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"));
@@ -409,6 +443,7 @@ function changeStyle(val){
             $(".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_display").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_name").removeClass("pad_color");
@@ -425,6 +460,7 @@ function changeStyle(val){
             $(".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_display").addClass("pad_color").addClass("pad_edit");
             $("#wgt_name").addClass("pad_color");
@@ -440,6 +476,7 @@ function changeStyle(val){
             $(".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_display").addClass("pad_color").addClass("pad_edit");
@@ -482,6 +519,8 @@ function onDropTarget(obj, event) {
                     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);