updated 'Separe texte' app

resources/library/interactivities/Separe texte.wgt/index.html

@@ -27,7 +27,6 @@
                     lang = sankore.locale().substr(0,2);    
                 } else 
                     lang = "en";
-
                 if(lang != "en"){
                     returnStatus(lang);
                 }
@@ -60,12 +59,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>
@@ -75,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/Separe texte.wgt/locales/fr/index.html

@@ -36,11 +36,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>
@@ -50,7 +45,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/Separe texte.wgt/locales/fr/scripts/wcontainer.js

 var sankoreLang = {
-    view: "Afficher", 
+    view: "Fermer", 
     edit: "Modifier",
     example: "bonjour, ceci est la première phrase. salut, c'est la deuxième phrase. bonjour à nouveau, c'est la troisième phrase. bonjour, c'est la quatrième phrase. salut, désolé, je suis en retard, je suis la cinquième phrase.",
     wgt_name: "Séparer un texte",
@@ -10,23 +10,24 @@ var sankoreLang = {
     help: "Aide",
     help_content: "<p><h3>Séparer les phrases d’un texte.</h3></p>"+
 
-"<p>Un texte est écrit sans que les points entre les phrases n’apparaissent. Le but de cette activité est d’insérer les points aux bons endroits. Une fois que les points sont placés correctement, la phrase se colore en vert.</p>"+
+    "<p>Un texte est écrit sans que les points entre les phrases n’apparaissent. Le but de cette activité est d’insérer les points aux bons endroits. Une fois que les points sont placés correctement, la phrase se colore en vert.</p>"+
 
-"<p>Pour ajouter les points entre les phrases, déplacez le curseur et cliquez entre deux mots, un point s’ajoute alors.</p>"+
+    "<p>Pour ajouter les points entre les phrases, déplacez le curseur et cliquez entre deux mots, un point s’ajoute alors.</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>"+
+    "<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 déterminer le texte sur lequel travailler.</li></ul>"+
+    "<ul><li>de choisir le thème de l’interactivité : tablette, ardoise ou aucun (par défaut aucun), </li>"+
+    "<li>de déterminer le texte sur lequel travailler.</li></ul>"+
 
-"<p>Ecrivez simplement dans la zone de texte les différentes phrases séparées par des points.<b> NB : Les points d’interrogation, les deux points “:”, les points-virgules “;” et les points d’exclamation ne sont pas pris en compte.</b></p>"+
+    "<p>Ecrivez simplement dans la zone de texte les différentes phrases séparées par des points.<b> NB : Les points d’interrogation, les deux points “:”, les points-virgules “;” et les points d’exclamation ne sont pas pris en compte.</b></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"
 
 };
 
@@ -57,7 +58,7 @@ function wcontainer( containerID )
 	create
 	============
 	- creates html base, inits this.elements, assings events
-	*/
+     */
     this.create = function( containerID )
     {
         var html = 
@@ -93,7 +94,7 @@ function wcontainer( containerID )
 	setViewContent
 	===============
 	- assigns custom html to the viewmode container
-	*/
+     */
     this.setViewContent = function( html )
     {
         this.elements.container.find( "#mp_content .viewmode" ).html( html );
@@ -104,7 +105,7 @@ function wcontainer( containerID )
 	setEditContent
 	===============
 	- assigns custom html to the editmode container
-	*/
+     */
     this.setEditContent = function( html )
     {
         this.elements.container.find( "#mp_content .editmode" ).html( html );
@@ -117,8 +118,8 @@ function wcontainer( containerID )
 	modeEdit and modeView
 	=========================
 	- switch the widget betweed modes
-	* for customization extend onEditMode and onViewMode
-	*/
+     * for customization extend onEditMode and onViewMode
+     */
     this.modeEdit = function()
     {
         this.onEditMode();
@@ -126,7 +127,7 @@ function wcontainer( containerID )
         this.elements.edit.removeClass( "hide" );
         this.elements.view.addClass( "hide" );
 		
-        //this.adjustSize();
+    //this.adjustSize();
     };
     this.modeView = function()
     {
@@ -135,7 +136,7 @@ function wcontainer( containerID )
         this.elements.edit.addClass( "hide" );
         this.elements.view.removeClass( "hide" );
 		
-        //this.adjustSize();
+    //this.adjustSize();
     };
 	
 	
@@ -145,7 +146,7 @@ function wcontainer( containerID )
 	setData and getData
 	======================
 	- store some data inside
-	*/
+     */
     this.setData = function( name, value ){
         data[name] = value;
     };
@@ -163,7 +164,7 @@ function wcontainer( containerID )
 	onEditMode and onViewMode
 	==========================
 	- these are called when the mode is being changed
-	*/
+     */
     this.onEditMode = function(){
     //
     };
@@ -176,8 +177,8 @@ function wcontainer( containerID )
 	viewSize and editSize
 	======================
 	- calculate container size for the adjustSize method
-	* they are likely to be redefined for each particular widget
-	*/
+     * they are likely to be redefined for each particular widget
+     */
     this.viewSize = function(){
         return {
             w: this.elements.containerView.outerWidth(),
@@ -196,8 +197,8 @@ function wcontainer( containerID )
 	checkAnswer
 	=====================
 	- check if the exercise in the view mode was done right
-	* redefine it for each particular widget
-	*/
+     * redefine it for each particular widget
+     */
     this.checkAnswer = function()
     {
     //

resources/library/interactivities/Separe texte.wgt/locales/ru/index.html

@@ -36,11 +36,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>
@@ -50,7 +45,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/Separe texte.wgt/locales/ru/scripts/wcontainer.js

 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/Separe texte.wgt/scripts/app2.js

@@ -32,7 +32,7 @@ $(document).ready(function()
     
     if (window.widget) {
         window.widget.onleave = function(){
-            sankore.setPreference("spl_text_style", $(".style_select").find("option:selected").val());
+            sankore.setPreference("spl_text_style", $("#style_select").find("option:selected").val());
             if(w.editMode){
                 sankore.setPreference("ordSplText", w.elements.container.find( "textarea" ).val());
                 sankore.setPreference("ordSplTextState", "0");
@@ -48,7 +48,7 @@ $(document).ready(function()
     
     if(sankore.preference("spl_text_style","")){
         changeStyle(sankore.preference("spl_text_style",""));
-        $(".style_select").val(sankore.preference("spl_text_style",""));
+        $("#style_select").val(sankore.preference("spl_text_style",""));
     } else
         changeStyle("3")
     
@@ -56,13 +56,23 @@ $(document).ready(function()
     $("#wgt_edit").text(sankoreLang.edit);
     $("#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);
+    
+    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();
@@ -71,7 +81,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();
@@ -84,11 +94,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");
@@ -105,14 +117,6 @@ $(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());
-    })  
-    
     w.maxWidth = 600;
 	
     w.setEditContent( '<div class="inputwrap"><textarea class="percent">' + sentences + '</textarea></div>' );
@@ -279,10 +283,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");
@@ -296,10 +300,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");
@@ -313,10 +317,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/Separe texte.wgt/scripts/wcontainer.js

 var sankoreLang = {
-    view: "Display", 
+    view: "Close", 
     edit: "Edit",
     example: "hello, this is the first sentence. hi, this is the second sentence. hello again, this is the third sentence. good morning, this is the fourth sentence. hi, sorry, i\'m late, i\'m the fifth sentence.",
     wgt_name: "Split a text",
@@ -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/Separe texte.wgt/styles/app.css

@@ -110,57 +110,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{
@@ -195,51 +178,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;
@@ -248,5 +230,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;
 }
\ No newline at end of file

resources/library/interactivities/Separe texte.wgt/styles/master.css

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