some fixes in Syllabes widget

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

@@ -56,27 +56,30 @@
                 <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>
                     <select class="style_select">
                         <option value="1"></option>
                         <option value="2"></option>
+                        <option value="3"></option>
                     </select>
                 </td>
                 <td class="b_top_right">&nbsp;</td>
             </tr>
-       
+
             <tr>
                 <td class="b_center_left">&nbsp;</td>
                 <td>
+                    <div id="help"></div>
                     <div id="ub-widget">
-                        
+
                     </div>
                 </td>
                 <td class="b_center_right">&nbsp;</td>
             </tr>     
-        
+
             <tr style="height: 54px;">
                 <td class="b_bottom_left">&nbsp;</td>
                 <td class="b_bottom_center">&nbsp;</td>

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

@@ -33,27 +33,30 @@
                 <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>
                     <select class="style_select">
                         <option value="1"></option>
                         <option value="2"></option>
+                        <option value="3"></option>
                     </select>
                 </td>
                 <td class="b_top_right">&nbsp;</td>
             </tr>
-       
+
             <tr>
                 <td class="b_center_left">&nbsp;</td>
                 <td>
+                    <div id="help"></div>
                     <div id="ub-widget">
-                        
+
                     </div>
                 </td>
                 <td class="b_center_right">&nbsp;</td>
             </tr>     
-        
+
             <tr style="height: 54px;">
                 <td class="b_bottom_left">&nbsp;</td>
                 <td class="b_bottom_center">&nbsp;</td>

resources/library/interactivities/Syllabes.wgt/locales/fr/scripts/wcontainer.js

@@ -1,11 +1,14 @@
 var sankoreLang = {
     view: "Afficher", 
     edit: "Modifier",
-    example: "so*phi*sti*qué",
+    example: "so*phis*ti*qué",
     wgt_name: "Syllabe",
     reload: "Recharger",
     slate: "ardoise",
-    pad: "tablette"
+    pad: "tablette",
+    none: "aucun",
+    help: "aide",
+    help_content: "Ceci est un exemple de contenu de l'aide ..."
 };
 
 // if use the "view/edit" button or rely on the api instead

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

@@ -33,27 +33,30 @@
                 <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>
                     <select class="style_select">
                         <option value="1"></option>
                         <option value="2"></option>
+                        <option value="3"></option>
                     </select>
                 </td>
                 <td class="b_top_right">&nbsp;</td>
             </tr>
-       
+
             <tr>
                 <td class="b_center_left">&nbsp;</td>
                 <td>
+                    <div id="help"></div>
                     <div id="ub-widget">
-                        
+
                     </div>
                 </td>
                 <td class="b_center_right">&nbsp;</td>
             </tr>     
-        
+
             <tr style="height: 54px;">
                 <td class="b_bottom_left">&nbsp;</td>
                 <td class="b_bottom_center">&nbsp;</td>

resources/library/interactivities/Syllabes.wgt/locales/ru/scripts/wcontainer.js

@@ -5,7 +5,10 @@ var sankoreLang = {
     wgt_name: "Разделить слово",
     reload: "Обновить",
     slate: "Узор",
-    pad: "Планшет"
+    pad: "Планшет",
+    none: "Нет",
+    help: "Помощь",
+    help_content: "Пример текста помощи ..."
 };
 
 // if use the "view/edit" button or rely on the api instead

resources/library/interactivities/Syllabes.wgt/scripts/spl-word.js

@@ -54,10 +54,13 @@ $(document).ready(function()
         changeStyle(sankore.preference("spl_word_style",""));
         $(".style_select").val(sankore.preference("spl_word_style",""));
     } else
-        changeStyle(1)
+        changeStyle("3")
 
     $("#wgt_display").text(sankoreLang.view);
     $("#wgt_edit").text(sankoreLang.edit);
+    $("#wgt_help").text(sankoreLang.help);
+    $("#help").html(sankoreLang.help_content);
+    
     $("#wgt_display, #wgt_edit").click(function(event){
         if(this.id == "wgt_display"){
             if(!$(this).hasClass("selected")){                
@@ -79,8 +82,24 @@ $(document).ready(function()
             }
         }
     });
+    
     $("#wgt_name").text(sankoreLang.wgt_name);
     
+    $("#wgt_help").click(function(){
+        var tmp = $(this);
+        if($(this).hasClass("open")){
+            $("#help").slideUp("100", function(){
+                tmp.removeClass("open");
+                $("#ub-widget").show();
+            });
+        } else {            
+            $("#ub-widget").hide();
+            $("#help").slideDown("100", function(){
+                tmp.addClass("open");
+            });
+        }
+    });
+    
     $("#wgt_reload").text(sankoreLang.reload).click(function(){
         if($("#wgt_display").hasClass("selected")){
             $("#wgt_edit").trigger("click");
@@ -92,6 +111,7 @@ $(document).ready(function()
     
     $(".style_select option[value='1']").text(sankoreLang.slate);
     $(".style_select option[value='2']").text(sankoreLang.pad);
+    $(".style_select option[value='3']").text(sankoreLang.none);
     
     $(".style_select").change(function (event){
         changeStyle($(this).find("option:selected").val());
@@ -181,34 +201,58 @@ $(document).ready(function()
     
     //changing the style
     function changeStyle(val){
-        if(val == 1){
-            $(".b_top_left").removeClass("btl_pad");
-            $(".b_top_center").removeClass("btc_pad");
-            $(".b_top_right").removeClass("btr_pad");
-            $(".b_center_left").removeClass("bcl_pad");
-            $(".b_center_right").removeClass("bcr_pad");
-            $(".b_bottom_right").removeClass("bbr_pad");
-            $(".b_bottom_left").removeClass("bbl_pad");
-            $(".b_bottom_center").removeClass("bbc_pad");
-            $("#wgt_reload").removeClass("pad_color").removeClass("pad_reload");
-            $("#wgt_edit").removeClass("pad_color").removeClass("pad_edit");
-            $("#wgt_display").removeClass("pad_color").removeClass("pad_edit");
-            $("#wgt_name").removeClass("pad_color");
-            $(".style_select").removeClass("pad_select");
-        } else {
-            $(".b_top_left").addClass("btl_pad");
-            $(".b_top_center").addClass("btc_pad");
-            $(".b_top_right").addClass("btr_pad");
-            $(".b_center_left").addClass("bcl_pad");
-            $(".b_center_right").addClass("bcr_pad");
-            $(".b_bottom_right").addClass("bbr_pad");
-            $(".b_bottom_left").addClass("bbl_pad");
-            $(".b_bottom_center").addClass("bbc_pad");
-            $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
-            $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
-            $("#wgt_display").addClass("pad_color").addClass("pad_edit");
-            $("#wgt_name").addClass("pad_color");
-            $(".style_select").addClass("pad_select");
+        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_display").removeClass("pad_color").removeClass("pad_edit");
+                $("#wgt_name").removeClass("pad_color");
+                $(".style_select").removeClass("pad_select").removeClass("none_select").val(val);
+                $("body, html").removeClass("without_radius");
+                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_display").addClass("pad_color").addClass("pad_edit");
+                $("#wgt_name").addClass("pad_color");
+                $(".style_select").addClass("pad_select").removeClass("none_select").val(val);
+                $("body, html").removeClass("without_radius");
+                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_display").addClass("pad_color").addClass("pad_edit");
+                $("#wgt_name").addClass("pad_color");
+                $(".style_select").addClass("none_select").val(val);
+                $("body, html").addClass("without_radius");
+                break;
         }
     }
 	

resources/library/interactivities/Syllabes.wgt/scripts/wcontainer.js

@@ -5,7 +5,10 @@ var sankoreLang = {
     wgt_name: "Split a word",
     reload: "Reload",
     slate: "Wood",
-    pad: "Pad"
+    pad: "Pad",
+    none: "None",
+    help: "Help",
+    help_content: "This is an example of help content ..."
 };
 
 // if use the "view/edit" button or rely on the api instead

resources/library/interactivities/Syllabes.wgt/styles/master.css

@@ -4,24 +4,26 @@ html, body{
     margin: 0;
     padding: 0;    
     border-radius: 50px;
+    overflow: hidden;
 }
 
 body{
     background-image: url(../img/bg.png);
 }
 
-
 h1{
     font-size:18px;
     margin-bottom:20px;
     margin-top:0px;
 }
+
 #ub-widget{
     width: 100%;
     height: 100%;    
     min-height: 180px;
     overflow: auto;
     color: white;
+    word-wrap: break-word;
 }
 
 input{

resources/library/interactivities/Syllabes.wgt/styles/spl-word.css

@@ -108,7 +108,6 @@
 
 #wgt_name{
     height: 44px;
-    width: 200px;
     margin: 10px 10px 0 10px;
     padding: 0;
     float: left;
@@ -117,9 +116,8 @@
     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;
@@ -129,7 +127,6 @@
 }
 
 #wgt_display{
-    width: 100px;
     padding-left: 40px;
     background-image: url(../img/slate-edit.png);
     background-repeat: no-repeat;
@@ -138,7 +135,6 @@
 }
 
 #wgt_edit{    
-    width: 100px;
     padding-left: 40px;
     background-image: url(../img/slate-edit.png);
     background-repeat: no-repeat;
@@ -217,3 +213,42 @@
     color: white !important;
     background-image: url(../img/ar_down_white.png) !important;
 }
+
+
+.without_radius{
+    border-radius: 0 !important;
+}
+
+.without_back{
+    background: none !important;
+}
+
+.none_select{
+    background-color: #333 !important;
+    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{
+    
+}