updated 'Syllabes' app

resources/library/interactivities/Syllabes.wgt/config.xml

@@ -4,7 +4,7 @@
 		xmlns:ub="http://uniboard.mnemis.com/widgets"
         id="http://www.example.net/widgets/helloworld" 
         version="1.0"
-        width="750"
+        width="770"
         height="320" 
 		ub:resizable="true">
 		

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

@@ -60,11 +60,6 @@
                     <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>
@@ -74,7 +69,17 @@
                 <td>
                     <div id="help"></div>
                     <div id="ub-widget">
-
+                        <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/Syllabes.wgt/locales/fr/index.html

@@ -37,11 +37,6 @@
                     <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>
@@ -51,7 +46,17 @@
                 <td>
                     <div id="help"></div>
                     <div id="ub-widget">
-
+                        <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/Syllabes.wgt/locales/fr/scripts/wcontainer.js

@@ -1,5 +1,5 @@
 var sankoreLang = {
-    view: "Afficher", 
+    view: "Fermer", 
     edit: "Modifier",
     example: "so*phis*ti*qué",
     wgt_name: "Syllabe",
@@ -9,20 +9,21 @@ var sankoreLang = {
     none: "aucun",
     help: "Aide",
     help_content: "<p><h2>Syllabe</h2></p>"+
-"<p><h3>Séparer les syllabes d’un mot.</h3></p>"+
+    "<p><h3>Séparer les syllabes d’un mot.</h3></p>"+
 
-"<p>Un mot est écrit et le but est de découper le mot en syllabes. Une fois que le découpage est correct, le mot se colore en vert.</p>"+
-"<p>Pour ajouter une séparation entre deux syllabes, déplacez le curseur et cliquez entre deux lettres, une séparation s’ajoute. </p>"+
+    "<p>Un mot est écrit et le but est de découper le mot en syllabes. Une fois que le découpage est correct, le mot se colore en vert.</p>"+
+    "<p>Pour ajouter une séparation entre deux syllabes, déplacez le curseur et cliquez entre deux lettres, une séparation s’ajoute. </p>"+
 
-"<p>Le bouton “Recharger” réinitialise l’exercice.</p>"+
+    "<p>Le bouton “Recharger” réinitialise l’exercice.</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 tablette), </li>"+
-"<li>de déterminer le mot sur lequel travailler.</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 tablette), </li>"+
+    "<li>de déterminer le mot sur lequel travailler.</li></ul>"+
 
-"<p>Ecrivez simplement dans la zone de texte le mot en insérant entre les syllabes une étoile *.</p>"+
+    "<p>Ecrivez simplement dans la zone de texte le mot en insérant entre les syllabes une étoile *.</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"
 
 };
 
@@ -118,7 +119,7 @@ function wcontainer( containerID )
         this.elements.edit.removeClass( "hide" );
         this.elements.view.addClass( "hide" );
 		
-        //this.adjustSize();
+    //this.adjustSize();
     };
     this.modeView = function()
     {
@@ -127,7 +128,7 @@ function wcontainer( containerID )
         this.elements.edit.addClass( "hide" );
         this.elements.view.removeClass( "hide" );
 		
-        //this.adjustSize();
+    //this.adjustSize();
     };
 	
 

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

@@ -37,11 +37,6 @@
                     <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>
@@ -51,7 +46,17 @@
                 <td>
                     <div id="help"></div>
                     <div id="ub-widget">
-
+                        <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/Syllabes.wgt/locales/ru/scripts/wcontainer.js

@@ -1,5 +1,5 @@
 var sankoreLang = {
-    view: "Показать", 
+    view: "Закрыть", 
     edit: "Изменить",
     example: "слож*ный",
     wgt_name: "Разделить слово",
@@ -8,7 +8,8 @@ var sankoreLang = {
     pad: "Планшет",
     none: "Нет",
     help: "Помощь",
-    help_content: "Пример текста помощи ..."
+    help_content: "Пример текста помощи ...",
+    theme: "Тема"
 };
 
 // if use the "view/edit" button or rely on the api instead

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

@@ -36,7 +36,7 @@ $(document).ready(function()
 
     if (window.widget) {
         window.widget.onleave = function(){
-            sankore.setPreference("spl_word_style", $(".style_select").find("option:selected").val());
+            sankore.setPreference("spl_word_style", $("#style_select").find("option:selected").val());
             if(w.editMode){
                 sankore.setPreference("ordSplWords", w.elements.container.find( "input" ).val().trim( ['*'] ));
                 sankore.setPreference("ordSplWordsState", "0");
@@ -52,21 +52,31 @@ $(document).ready(function()
 
     if(sankore.preference("spl_word_style","")){
         changeStyle(sankore.preference("spl_word_style",""));
-        $(".style_select").val(sankore.preference("spl_word_style",""));
+        $("#style_select").val(sankore.preference("spl_word_style",""));
     } else
         changeStyle("3")
 
     $("#wgt_display").text(sankoreLang.view);
     $("#wgt_edit").text(sankoreLang.edit);
     $("#wgt_help").text(sankoreLang.help);
-    $("#help").html(sankoreLang.help_content);
+    $("#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);
+    
+    var tmpl = $("div.inline label").html();
+    $("div.inline label").html(sankoreLang.theme + tmpl)
+    
+    $("#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")){                
                 $(this).addClass("selected");
                 $("#wgt_edit").removeClass("selected");
-                $(".style_select").css("display","none");                
+                $("#parameters").css("display","none");                
                 $(this).css("display", "none");
                 $("#wgt_edit").css("display", "block");
                 w.modeView();
@@ -75,7 +85,7 @@ $(document).ready(function()
             if(!$(this).hasClass("selected")){
                 $(this).addClass("selected");
                 $("#wgt_display").removeClass("selected");
-                $(".style_select").css("display","block");                
+                $("#parameters").css("display","block");                
                 $(this).css("display", "none");
                 $("#wgt_display").css("display", "block");
                 w.modeEdit();
@@ -88,11 +98,13 @@ $(document).ready(function()
     $("#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");
                 $("#ub-widget").show();
             });
         } else {            
+            ($("#style_select").val() == 1)?$(this).removeClass("help_pad").addClass("help_wood"):$(this).removeClass("help_wood").addClass("help_pad");
             $("#ub-widget").hide();
             $("#help").slideDown("100", function(){
                 tmp.addClass("open");
@@ -108,14 +120,6 @@ $(document).ready(function()
             $("#wgt_display").trigger("click");
         }
     });
-    
-    $(".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());
-    })
 
     // onViewMode
     w.onViewMode = function()
@@ -214,10 +218,10 @@ $(document).ready(function()
                 $("#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 option:first").attr('selected',true);
+                $("body, html").removeClass("without_radius").addClass("radius_ft");
                 break;
             case "2":
                 $(".b_top_left").addClass("btl_pad").removeClass("without_back");
@@ -231,10 +235,10 @@ $(document).ready(function()
                 $("#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 option:first").next().attr('selected',true);
+                $("body, html").removeClass("without_radius").removeClass("radius_ft");
                 break;
             case "3":
                 $(".b_top_left").addClass("without_back").removeClass("btl_pad");
@@ -248,10 +252,10 @@ $(document).ready(function()
                 $("#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 option:last").attr('selected',true);
+                $("body, html").addClass("without_radius").removeClass("radius_ft");
                 break;
         }
     }

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

@@ -1,5 +1,5 @@
 var sankoreLang = {
-    view: "Display", 
+    view: "Close", 
     edit: "Edit",
     example: "so*phis*ti*ca*ted",
     wgt_name: "Split a word",
@@ -8,7 +8,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"
 };
 
 // if use the "view/edit" button or rely on the api instead

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

@@ -3,7 +3,7 @@ html, body{
     height: 100%;
     margin: 0;
     padding: 0;    
-    border-radius: 50px;
+    border-radius: 35px;
     overflow: hidden;
 }
 

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

@@ -111,57 +111,40 @@
     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{
@@ -196,52 +179,50 @@
     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;
@@ -250,5 +231,36 @@
 }
 
 .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;
 }