updated 'Cat text' app

resources/library/interactivities/Cat text.wgt/css/basic.css

@@ -3,7 +3,7 @@ html, body{
     height: 100%;
     margin: 0;
     padding: 0;
-    border-radius: 50px;
+    border-radius: 35px;
     overflow: hidden;
 }
 
@@ -28,14 +28,6 @@ body{
     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;
@@ -286,57 +278,40 @@ body{
     margin: 10px 10px 0 10px;
     padding: 0;
     float: left;
-    /*font-family: "Lobster13Regular";*/
+    font-family: Arial,Helvetica,sans-serif;
     font-size: 24px;
-    color: #8c5730;
+    color: #7F613F;
+    text-shadow: #FFDCA9 0 1px 0;
 }
 
 #wgt_reload, #wgt_edit, #wgt_display, #wgt_help{
     cursor: pointer;
-    height: 44px;
     margin: 10px 10px 0 0;
     float: right;
-    /*font-family: "Lobster13Regular";*/
-    font-size: 24px;   
-    color: #8c5730;
+    font-family: Arial,Helvetica,sans-serif;
+    font-size: 24px;    
+    line-height: 32px;
 }
 
 #wgt_display{
-    padding-left: 40px;
-    background-image: url(../img/slate-edit.png);
-    background-repeat: no-repeat;
-    background-position: top 0;
+    padding-left: 35px;
+    background: url(../img/toolbar-edit.png) left -32px no-repeat;
+    color: white;
     display: none;
 }
 
 #wgt_edit{    
-    padding-left: 40px;
-    background-image: url(../img/slate-edit.png);
-    background-repeat: no-repeat;
-    background-position: top 0;
+    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: 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;
+    padding-left: 35px;
+    background: url(../img/slate-toolbar-reload.png) left top no-repeat;
+    color: #7F613F;
+    text-shadow: #FFDCA9 0 1px 0;
 }
 
 .btl_pad{
@@ -371,51 +346,50 @@ body{
     background-image: url(../img/pad-bottom-right.png) !important;
 }
 
-.pad_color{
-    color: white !important;
+.without_radius{
+    border-radius: 0 !important;
 }
 
-.pad_reload{
-    background-image: url(../img/slate-toolbar-reload-white.png) !important;
+.without_back{
+    background: none !important;
 }
 
-.pad_edit{
-    background-image: url(../img/slate-display.png) !important;
+.pad_color{
+    color: #FC9 !important;
+    text-shadow: none !important;
 }
 
-.pad_select{
-    background-color: black !important;
-    color: white !important;
-    background-image: url(../img/ar_down_white.png) !important;
+.pad_reload{
+    background: url(../img/toolbar-reload.png) left top no-repeat !important;
 }
 
-.without_radius{
-    border-radius: 0 !important;
+.pad_edit{
+    background: url(../img/toolbar-edit.png) left top no-repeat !important;    
 }
 
-.without_back{
-    background: none !important;
+.pad_help{
+    background: url(../img/toolbar-help.png) left top no-repeat !important;
 }
 
-.none_select{
-    background-color: #333 !important;
+.help_wood{
+    background: url(../img/slate-toolbar-help.png) left -32px no-repeat !important;
     color: white !important;
-    background-image: url(../img/ar_down_white.png) !important;
+    text-shadow: #7F613F 0 -1px 0 !important;
 }
 
-.pad_help{
-    background-image: url(../img/slate-help-white.png) !important;
+.help_pad{
+    background: url(../img/toolbar-help.png) left -32px no-repeat !important;
+    color: white !important;
 }
 
 #wgt_help{
-    padding-left: 32px;
-    background-image: url(../img/slate-help.png);
-    background-repeat: no-repeat;
-    background-position: top 0;
+    padding-left: 35px;
+    background: url(../img/slate-toolbar-help.png) left top no-repeat;
+    color: #7F613F;
+    text-shadow: #FFDCA9 0 1px 0;
 }
 
 #help{
-    width: 100%;
     height: 100%;    
     overflow: auto;
     display: none;
@@ -424,5 +398,36 @@ body{
 }
 
 .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: "helvetica neue";
+    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;
 }

resources/library/interactivities/Cat text.wgt/index.html

@@ -16,6 +16,7 @@
                     lang = sankore.locale().substr(0,2);    
                 } else 
                     lang = "en";
+                lang = "fr";
                 if(lang == "en"){
                     if(window.sankore)
                         sankore.enableDropOnWidget(false);
@@ -51,12 +52,7 @@
                     <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>
+                    <div id="wgt_edit"></div>                    
                 </td>
                 <td class="b_top_right">&nbsp;</td>
             </tr>
@@ -66,7 +62,17 @@
                 <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">&nbsp;</td>

resources/library/interactivities/Cat text.wgt/js/script.js

@@ -1,5 +1,5 @@
 var sankoreLang = {
-    display: "Display", 
+    display: "Close", 
     edit: "Edit", 
     first_desc: "Fruits", 
     second_desc: "Vegetables",
@@ -17,7 +17,8 @@ var sankoreLang = {
     pad: "Pad",
     none: "None",
     help: "Help",
-    help_content: "This is an example of help content ..."
+    help_content: "This is an example of help content ...",
+    theme: "Theme"
 };
 
 //main function
@@ -29,9 +30,11 @@ function start(){
     $("#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);
+    $("#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","")){
@@ -53,11 +56,13 @@ function start(){
     $("#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 {            
+        } 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");
@@ -78,7 +83,7 @@ function start(){
         exportData();
     });
     
-    $(".style_select").change(function (event){
+    $("#style_select").change(function (event){
         changeStyle($(this).find("option:selected").val());
     })
     
@@ -87,7 +92,7 @@ function start(){
             if(!$(this).hasClass("selected")){
                 $(this).addClass("selected");
                 $("#wgt_edit").removeClass("selected");
-                $(".style_select").css("display","none");
+                $("#parameters").css("display","none");
                 $(".add_block").remove();
                 $(".cont").each(function(){
                     var container = $(this);
@@ -160,7 +165,7 @@ function start(){
             if(!$(this).hasClass("selected")){
                 $(this).addClass("selected");
                 $("#wgt_display").removeClass("selected");
-                $(".style_select").css("display","block");
+                $("#parameters").css("display","block");
                 $(".cont").each(function(){
                     var container = $(this);
                     
@@ -244,7 +249,7 @@ function exportData(){
             cont_obj.conts = [];
             $(this).find(".imgs_cont").each(function(){
                 var img_cont = new Object();
-                cont_obj.style = $(".style_select").find("option:selected").val();
+                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();
@@ -266,7 +271,7 @@ function exportData(){
             cont_obj.conts = [];
             $(this).find(".imgs_cont").each(function(){
                 var img_cont = new Object();
-                cont_obj.style = $(".style_select").find("option:selected").val();
+                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();
@@ -292,7 +297,7 @@ function exportData(){
     
     if($(".cont").size() == 0){
         var cont_obj = new Object();
-        cont_obj.style = $(".style_select").find("option:selected").val();
+        cont_obj.style = $("#style_select").find("option:selected").val();
         cont_obj.tmp = "clear";
         array_to_export.push(cont_obj);
     }
@@ -307,12 +312,12 @@ function importData(data){
     for(var i in data){
         if(data[i].tmp){
             changeStyle(data[i].style);
-            $(".style_select").val(data[i].style);
+            $("#style_select").val(data[i].style);
         }
         else {
             if(i == 0){
                 changeStyle(data[i].style);
-                $(".style_select").val(data[i].style);
+                $("#style_select").val(data[i].style);
             }
             if(data[i].mode == "edit"){          
                 var tmp_array = [];
@@ -642,10 +647,10 @@ function changeStyle(val){
             $("#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");
+            $("#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");
@@ -659,10 +664,10 @@ function changeStyle(val){
             $("#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");
+            $("#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");
@@ -676,10 +681,10 @@ function changeStyle(val){
             $("#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");
+            $("#wgt_display").removeClass("display_wood");
+            $("#style_select").val(val);
+            $("body, html").addClass("without_radius").removeClass("radius_ft");
             break;
     }
 }

resources/library/interactivities/Cat text.wgt/locales/fr/index.html

@@ -25,12 +25,7 @@
                     <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>
+                    <div id="wgt_edit"></div>                    
                 </td>
                 <td class="b_top_right">&nbsp;</td>
             </tr>
@@ -40,7 +35,17 @@
                 <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">&nbsp;</td>

resources/library/interactivities/Cat text.wgt/locales/fr/js/script.js

@@ -1,5 +1,5 @@
 var sankoreLang = {
-    display: "Afficher", 
+    display: "Fermer", 
     edit: "Modifier", 
     first_desc: "Fruits", 
     second_desc: "Légumes",
@@ -18,27 +18,28 @@ var sankoreLang = {
     none: "aucun",
     help: "Aide",
     help_content: "<p><h2>Catégoriser des textes</h2></p>"+
-"<p><h3>Classer des étiquettes de mots en fonction de la dénomination de la catégorie.</h3></p>"+
+    "<p><h3>Classer des étiquettes de mots en fonction de la dénomination de la catégorie.</h3></p>"+
 
-"<p>L’activité s’effectue par un glisser-déposer de l’étiquette de mots dans la catégorie correspondante. Tant que toutes les étiquettes de mots ne sont pas classées, la zone reste rouge. Une fois que toutes les étiquettes de mots sont classées dans la bonne catégorie, la zone se colore en vert.</p>"+
+    "<p>L’activité s’effectue par un glisser-déposer de l’étiquette de mots dans la catégorie correspondante. Tant que toutes les étiquettes de mots ne sont pas classées, la zone reste rouge. Une fois que toutes les étiquettes de mots sont classées dans la bonne catégorie, la zone se colore en vert.</p>"+
 
-"<p>Le bouton “Recharger” réinitialise les exercices.</p>"+
+    "<p>Le bouton “Recharger” réinitialise les exercices.</p>"+
 
-"<p>Le bouton “Modifier” vous permet :</p>"+
-"<ul><li>de choisir le thème de l’interactivité : tablette, ardoise ou aucun (par défaut aucun),</li>"+
-"<li>de modifier un exercice ou d’en créer de nouveaux dans la même activité.</li></ul>"+
+    "<p>Le bouton “Modifier” vous permet :</p>"+
+    "<ul><li>de choisir le thème de l’interactivité : tablette, ardoise ou aucun (par défaut aucun),</li>"+
+    "<li>de modifier un exercice ou d’en créer de nouveaux dans la même activité.</li></ul>"+
 
-"<p>En mode édition, pour créer un nouvel exercice, cliquez sur “Nouveau bloc” en bas, une zone bleue apparaît, c’est une catégorie, puis.</p>"+
-"<ul><li>insérez le nom de la catégorie (par exemple “fruits”, “légumes”, “mammifères”...) en cliquant dans le champ de texte “Saisir le nom de la catégorie ici …”,</li>"+
-"<li>cliquez sur le gros “+” situé à gauche de la catégorie ce qui vous permet de rajouter des étiquettes de mots,</li>"+
-"<li>entrez des mots dans ces étiquettes,</li>"+
-"<li>ajoutez ensuite une catégorie (ou plusieurs) en cliquant sur le signe “+” situé à droite de la catégorie, complétez par son nom et ajoutez des étiquettes de mots.</li></ul>"+
-"<p>Pour supprimer une étiquette de mots, cliquez sur la croix située dans le coin supérieur droit de celle-ci.</p>"+
-"<p>Pour supprimer une catégorie, cliquez sur le signe “-” situé à droite de celle-ci.</p>"+
+    "<p>En mode édition, pour créer un nouvel exercice, cliquez sur “Nouveau bloc” en bas, une zone bleue apparaît, c’est une catégorie, puis.</p>"+
+    "<ul><li>insérez le nom de la catégorie (par exemple “fruits”, “légumes”, “mammifères”...) en cliquant dans le champ de texte “Saisir le nom de la catégorie ici …”,</li>"+
+    "<li>cliquez sur le gros “+” situé à gauche de la catégorie ce qui vous permet de rajouter des étiquettes de mots,</li>"+
+    "<li>entrez des mots dans ces étiquettes,</li>"+
+    "<li>ajoutez ensuite une catégorie (ou plusieurs) en cliquant sur le signe “+” situé à droite de la catégorie, complétez par son nom et ajoutez des étiquettes de mots.</li></ul>"+
+    "<p>Pour supprimer une étiquette de mots, cliquez sur la croix située dans le coin supérieur droit de celle-ci.</p>"+
+    "<p>Pour supprimer une catégorie, cliquez sur le signe “-” situé à droite de celle-ci.</p>"+
 
-"<p>Pour supprimer un exercice, cliquez sur la croix à gauche du numéro de l’exercice.</p>"+
+    "<p>Pour supprimer un exercice, cliquez sur la croix à gauche du numéro de l’exercice.</p>"+
 
-"<p>Le bouton “Afficher” vous permet d’utiliser l’activité.</p>"
+    "<p>Le bouton “Afficher” vous permet d’utiliser l’activité.</p>",
+    theme: "Thème"
 };
 
 //main function
@@ -50,9 +51,11 @@ function start(){
     $("#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);
+    $("#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","")){
@@ -74,11 +77,13 @@ function start(){
     $("#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 {            
+        } 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");
@@ -99,7 +104,7 @@ function start(){
         exportData();
     });
     
-    $(".style_select").change(function (event){
+    $("#style_select").change(function (event){
         changeStyle($(this).find("option:selected").val());
     })
     
@@ -108,7 +113,7 @@ function start(){
             if(!$(this).hasClass("selected")){
                 $(this).addClass("selected");
                 $("#wgt_edit").removeClass("selected");
-                $(".style_select").css("display","none");
+                $("#parameters").css("display","none");
                 $(".add_block").remove();
                 $(".cont").each(function(){
                     var container = $(this);
@@ -181,7 +186,7 @@ function start(){
             if(!$(this).hasClass("selected")){
                 $(this).addClass("selected");
                 $("#wgt_display").removeClass("selected");
-                $(".style_select").css("display","block");
+                $("#parameters").css("display","block");
                 $(".cont").each(function(){
                     var container = $(this);
                     
@@ -265,7 +270,7 @@ function exportData(){
             cont_obj.conts = [];
             $(this).find(".imgs_cont").each(function(){
                 var img_cont = new Object();
-                cont_obj.style = $(".style_select").find("option:selected").val();
+                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();
@@ -287,7 +292,7 @@ function exportData(){
             cont_obj.conts = [];
             $(this).find(".imgs_cont").each(function(){
                 var img_cont = new Object();
-                cont_obj.style = $(".style_select").find("option:selected").val();
+                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();
@@ -313,7 +318,7 @@ function exportData(){
     
     if($(".cont").size() == 0){
         var cont_obj = new Object();
-        cont_obj.style = $(".style_select").find("option:selected").val();
+        cont_obj.style = $("#style_select").find("option:selected").val();
         cont_obj.tmp = "clear";
         array_to_export.push(cont_obj);
     }
@@ -328,12 +333,12 @@ function importData(data){
     for(var i in data){
         if(data[i].tmp){
             changeStyle(data[i].style);
-            $(".style_select").val(data[i].style);
+            $("#style_select").val(data[i].style);
         }
         else {
             if(i == 0){
                 changeStyle(data[i].style);
-                $(".style_select").val(data[i].style);
+                $("#style_select").val(data[i].style);
             }
             if(data[i].mode == "edit"){          
                 var tmp_array = [];
@@ -664,10 +669,10 @@ function changeStyle(val){
             $("#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");
+            $("#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");
@@ -681,10 +686,10 @@ function changeStyle(val){
             $("#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");
+            $("#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");
@@ -698,10 +703,10 @@ function changeStyle(val){
             $("#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");
+            $("#wgt_display").removeClass("display_wood");
+            $("#style_select").val(val);
+            $("body, html").addClass("without_radius").removeClass("radius_ft");
             break;
     }
 }

resources/library/interactivities/Cat text.wgt/locales/ru/index.html

@@ -25,12 +25,7 @@
                     <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>
+                    <div id="wgt_edit"></div>                    
                 </td>
                 <td class="b_top_right">&nbsp;</td>
             </tr>
@@ -40,7 +35,17 @@
                 <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">&nbsp;</td>

resources/library/interactivities/Cat text.wgt/locales/ru/js/script.js

@@ -1,5 +1,5 @@
 var sankoreLang = {
-    display: "Показать", 
+    display: "Закрыть", 
     edit: "Изменить", 
     first_desc: "Фрукты", 
     second_desc: "Овощи",
@@ -17,7 +17,8 @@ var sankoreLang = {
     pad: "Планшет",
     none: "Нет",
     help: "Помощь",
-    help_content: "Пример текста помощи ..."
+    help_content: "Пример текста помощи ...",
+    theme: "Тема"
 };
 
 //main function
@@ -29,9 +30,11 @@ function start(){
     $("#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);
+    $("#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","")){
@@ -53,11 +56,13 @@ function start(){
     $("#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 {            
+        } 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");
@@ -78,7 +83,7 @@ function start(){
         exportData();
     });
     
-    $(".style_select").change(function (event){
+    $("#style_select").change(function (event){
         changeStyle($(this).find("option:selected").val());
     })
     
@@ -87,7 +92,7 @@ function start(){
             if(!$(this).hasClass("selected")){
                 $(this).addClass("selected");
                 $("#wgt_edit").removeClass("selected");
-                $(".style_select").css("display","none");
+                $("#parameters").css("display","none");
                 $(".add_block").remove();
                 $(".cont").each(function(){
                     var container = $(this);
@@ -160,7 +165,7 @@ function start(){
             if(!$(this).hasClass("selected")){
                 $(this).addClass("selected");
                 $("#wgt_display").removeClass("selected");
-                $(".style_select").css("display","block");
+                $("#parameters").css("display","block");
                 $(".cont").each(function(){
                     var container = $(this);
                     
@@ -244,7 +249,7 @@ function exportData(){
             cont_obj.conts = [];
             $(this).find(".imgs_cont").each(function(){
                 var img_cont = new Object();
-                cont_obj.style = $(".style_select").find("option:selected").val();
+                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();
@@ -266,7 +271,7 @@ function exportData(){
             cont_obj.conts = [];
             $(this).find(".imgs_cont").each(function(){
                 var img_cont = new Object();
-                cont_obj.style = $(".style_select").find("option:selected").val();
+                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();
@@ -292,7 +297,7 @@ function exportData(){
     
     if($(".cont").size() == 0){
         var cont_obj = new Object();
-        cont_obj.style = $(".style_select").find("option:selected").val();
+        cont_obj.style = $("#style_select").find("option:selected").val();
         cont_obj.tmp = "clear";
         array_to_export.push(cont_obj);
     }
@@ -307,12 +312,12 @@ function importData(data){
     for(var i in data){
         if(data[i].tmp){
             changeStyle(data[i].style);
-            $(".style_select").val(data[i].style);
+            $("#style_select").val(data[i].style);
         }
         else {
             if(i == 0){
                 changeStyle(data[i].style);
-                $(".style_select").val(data[i].style);
+                $("#style_select").val(data[i].style);
             }
             if(data[i].mode == "edit"){          
                 var tmp_array = [];
@@ -452,7 +457,7 @@ function importData(data){
                             }
                         }
                     }
-                });
+                });       
                 checkCorrectness(all_imgs);
             }
         }
@@ -643,10 +648,10 @@ function changeStyle(val){
             $("#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");
+            $("#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");
@@ -660,10 +665,10 @@ function changeStyle(val){
             $("#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");
+            $("#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");
@@ -677,10 +682,10 @@ function changeStyle(val){
             $("#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");
+            $("#wgt_display").removeClass("display_wood");
+            $("#style_select").val(val);
+            $("body, html").addClass("without_radius").removeClass("radius_ft");
             break;
     }
 }