updated 'Etudier' app

resources/library/interactivities/Etudier.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;
@@ -362,57 +354,33 @@ li>div{
     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{
+#wgt_edit, #wgt_display, #wgt_help{
     cursor: pointer;
-    height: 44px;
     margin: 10px 10px 0 0;
     float: right;
-    /*font-family: "Lobster13Regular";*/
+    font-family: Arial,Helvetica,sans-serif;
-    font-size: 24px;   
+    font-size: 24px;    
-    color: #8c5730;
+    line-height: 32px;
 }
 
 #wgt_display{
-    padding-left: 40px;
+    padding-left: 35px;
-    background-image: url(../img/slate-edit.png);
+    background: url(../img/toolbar-edit.png) left -32px no-repeat;
-    background-repeat: no-repeat;
+    color: white;
-    background-position: top 0;
     display: none;
 }
 
 #wgt_edit{    
-    padding-left: 40px;
+    padding-left: 35px;
-    background-image: url(../img/slate-edit.png);
+    background: url(../img/slate-toolbar-edit.png) left top no-repeat;
-    background-repeat: no-repeat;
+    color: #7F613F;
-    background-position: top 0;
+    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;
 }
 
 .btl_pad{
@@ -447,58 +415,88 @@ li>div{
     background-image: url(../img/pad-bottom-right.png) !important;
 }
 
-.pad_color{
+.without_radius{
-    color: white !important;
+    border-radius: 0 !important;
 }
 
-.pad_reload{
+.without_back{
-    background-image: url(../img/slate-toolbar-reload-white.png) !important;
+    background: none !important;
 }
 
-.pad_edit{
+.pad_color{
-    background-image: url(../img/slate-display.png) !important;
+    color: #FC9 !important;
+    text-shadow: none !important;
 }
 
-.pad_select{
+.pad_reload{
-    background-color: black !important;
+    background: url(../img/toolbar-reload.png) left top no-repeat !important;
-    color: white !important;
-    background-image: url(../img/ar_down_white.png) !important;
 }
 
-.without_radius{
+.pad_edit{
-    border-radius: 0 !important;
+    background: url(../img/toolbar-edit.png) left top no-repeat !important;    
 }
 
-.without_back{
+.pad_help{
-    background: none !important;
+    background: url(../img/toolbar-help.png) left top no-repeat !important;
 }
 
-.none_select{
+.help_wood{
-    background-color: #333 !important;
+    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{
+.help_pad{
-    background-image: url(../img/slate-help-white.png) !important;
+    background: url(../img/toolbar-help.png) left -32px no-repeat !important;
+    color: white !important;
 }
 
 #wgt_help{
-    padding-left: 32px;
+    padding-left: 35px;
-    background-image: url(../img/slate-help.png);
+    background: url(../img/slate-toolbar-help.png) left top no-repeat;
-    background-repeat: no-repeat;
+    color: #7F613F;
-    background-position: top 0;
+    text-shadow: #FFDCA9 0 1px 0;
 }
 
 #help{
-    width: 100%;
     height: 100%;    
     overflow: auto;
     display: none;
     background-color: #ccc;
-    padding: 5px 0 5px 5px;
+    padding: 5px;
 }
 
 .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/Etudier.wgt/index.html

@@ -52,11 +52,6 @@
                     <div id="wgt_help"></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>
@@ -66,6 +61,17 @@
                 <td>
                     <div id="help"></div>
                     <div id="slider">
+                        <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>
                         <ul>							
                         </ul>
                     </div>

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

@@ -1,5 +1,5 @@
 var sankoreLang = {
-    display: "Display", 
+    display: "Close", 
     edit: "Edit", 
     text_content: "This is an example. Instead of this text you can put your own content.", 
     new_txt: "New text block",
@@ -9,7 +9,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"
 };
 
 //some flags
@@ -31,9 +32,11 @@ function start(){
     $("#wgt_name").text(sankoreLang.wgt_name);
     $("#wgt_help").text(sankoreLang.help);
     $("#help").html(sankoreLang.help_content);
-    $(".style_select option[value='1']").text(sankoreLang.slate);
+    $("#style_select option[value='1']").text(sankoreLang.slate);
-    $(".style_select option[value='2']").text(sankoreLang.pad);
+    $("#style_select option[value='2']").text(sankoreLang.pad);
-    $(".style_select option[value='3']").text(sankoreLang.none);
+    $("#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("etudier","")){
@@ -44,7 +47,7 @@ function start(){
             showExample();
         if(sankore.preference("etudier_style","")){
             changeStyle(sankore.preference("etudier_style",""));
-            $(".style_select").val(sankore.preference("etudier_style",""));
+            $("#style_select").val(sankore.preference("etudier_style",""));
         } else
             changeStyle("3")
     } 
@@ -56,7 +59,7 @@ function start(){
         window.widget.onleave = function(){
             if(!$("#wgt_help").hasClass("open")){
                 exportData();
-                sankore.setPreference("etudier_style", $(".style_select").find("option:selected").val());
+                sankore.setPreference("etudier_style", $("#style_select").find("option:selected").val());
                 sankore.setPreference("etudier_cur_page", $("#slider").getPage());
                 sankore.setPreference("etudier_left_nav", $("#prevBtn a").css("display"));
                 sankore.setPreference("etudier_right_nav", $("#nextBtn a").css("display"));
@@ -64,19 +67,21 @@ function start(){
         }
     }
     
-    $(".style_select").change(function (event){
+    $("#style_select").change(function (event){
         changeStyle($(this).find("option:selected").val());
     })
     
     $("#wgt_help").click(function(){
         var tmp = $(this);
         if($(this).hasClass("open")){
+            $(this).removeClass("help_pad").removeClass("help_wood")
             $("#help").hide();
             tmp.removeClass("open");
             $("#slider").show();
         } else {
+            ($("#style_select").val() == 1)?$(this).removeClass("help_pad").addClass("help_wood"):$(this).removeClass("help_wood").addClass("help_pad");
             exportData();
-            sankore.setPreference("etudier_style", $(".style_select").find("option:selected").val());
+            sankore.setPreference("etudier_style", $("#style_select").find("option:selected").val());
             sankore.setPreference("etudier_cur_page", $("#slider").getPage());
             sankore.setPreference("etudier_left_nav", $("#prevBtn a").css("display"));
             sankore.setPreference("etudier_right_nav", $("#nextBtn a").css("display"));            
@@ -93,8 +98,10 @@ function start(){
                     sankore.enableDropOnWidget(false);
                 $(this).addClass("selected");
                 $("#wgt_edit").removeClass("selected");
-                $(".style_select").css("display","none");
+                $("#parameters").css("display","none");
-                
+                var tmpwh = $(window).height();
+                var tmpww = $(window).width();
+                window.resizeTo(tmpww, tmpwh - 44)
                 $("#slider li>div").each(function(){
                     var container = $(this);
                     container.removeAttr("ondragenter")
@@ -143,8 +150,10 @@ function start(){
                     sankore.enableDropOnWidget(true);
                 $(this).addClass("selected");
                 $("#wgt_display").removeClass("selected");
-                $(".style_select").css("display","block");
+                $("#parameters").css("display","block");
-                
+                tmpwh = $(window).height();
+                tmpww = $(window).width();
+                window.resizeTo(tmpww, tmpwh + 44)
                 $("#slider li>div").each(function(){
                     var container = $(this);
                     container.attr("ondragenter", "return false;")
@@ -556,10 +565,10 @@ function changeStyle(val){
             $(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
             $("#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);
+            $("#wgt_display").addClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").removeClass("without_radius").addClass("radius_ft");
             break;
         case "2":
             $(".b_top_left").addClass("btl_pad").removeClass("without_back");
@@ -572,10 +581,10 @@ function changeStyle(val){
             $(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
             $("#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);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").removeClass("without_radius").removeClass("radius_ft");
             break;
         case "3":
             $(".b_top_left").addClass("without_back").removeClass("btl_pad");
@@ -588,10 +597,10 @@ function changeStyle(val){
             $(".b_bottom_center").addClass("without_back").removeClass("bbc_pad");
             $("#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("none_select").val(val);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").addClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").addClass("without_radius").removeClass("radius_ft");
             break;
     }
 }

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

@@ -25,12 +25,7 @@
                     <div id="wgt_name"></div>
                     <div id="wgt_help"></div>                    
                     <div id="wgt_display" class="selected"></div>
-                    <div id="wgt_edit"></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>
@@ -40,6 +35,17 @@
                 <td>
                     <div id="help"></div>
                     <div id="slider">
+                        <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>
                         <ul>							
                         </ul>
                     </div>

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

@@ -1,5 +1,5 @@
 var sankoreLang = {
-    display: "Afficher", 
+    display: "Fermer", 
     edit: "Modifier", 
     text_content: "Ceci est un exemple. Au lieu de ce texte, vous pouvez mettre votre propre texte ou glisser-déposer une image, un son ou une vidéo.", 
     new_txt: "Nouveau bloc de texte",
@@ -10,25 +10,26 @@ var sankoreLang = {
     none: "Aucun",
     help: "Aide",
     help_content: "<p><h2>Etudier</h2></p>"+
-"<p><h3>Livret de pages.</h3></p>"+
+    "<p><h3>Livret de pages.</h3></p>"+
 
-"<p>L’interactivité Etudier permet d’ajouter un livret avec des pages. Ce livret peut être enrichi avec du texte, des images, du son et des vidéos.</p>"+
+    "<p>L’interactivité Etudier permet d’ajouter un livret avec des pages. Ce livret peut être enrichi avec du texte, des images, du son et des vidéos.</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>"+
+    "<ul><li>de choisir le thème de l’interactivité : tablette, ardoise ou aucun (par défaut aucun),</li>"+
-"<li>de modifier les pages du livret.</li></ul>"+
+    "<li>de modifier les pages du livret.</li></ul>"+
 
-"<p>Sur chaque page, vous pouvez :</p>"+ 
+    "<p>Sur chaque page, vous pouvez :</p>"+ 
-"<ul><li>insérer des zones de texte avec le bouton “+T” situé en haut à gauche de l’interactivité. (pour modifier ces zones de texte, cliquez à l’intérieur et écrivez du texte),</li>"+
+    "<ul><li>insérer des zones de texte avec le bouton “+T” situé en haut à gauche de l’interactivité. (pour modifier ces zones de texte, cliquez à l’intérieur et écrivez du texte),</li>"+
-"<li>insérer des images, sons et vidéos par glisser-déposer de fichiers depuis la bibliothèque jusqu’à l’intérieur de la page du livret,</li>"+
+    "<li>insérer des images, sons et vidéos par glisser-déposer de fichiers depuis la bibliothèque jusqu’à l’intérieur de la page du livret,</li>"+
-"<li>déplacer les textes, images, sons et vidéos à l’intérieur de la page en cliquant et en déplaçant la flèche multidirectionnelle qui se situe dans le coin supérieur gauche de chaque élément,</li>"+
+    "<li>déplacer les textes, images, sons et vidéos à l’intérieur de la page en cliquant et en déplaçant la flèche multidirectionnelle qui se situe dans le coin supérieur gauche de chaque élément,</li>"+
-"<li>agrandir la taille d’un élément avec la double flèche en bas à droite de celui-ci,</li>"+
+    "<li>agrandir la taille d’un élément avec la double flèche en bas à droite de celui-ci,</li>"+
-"<li>supprimer un élément avec la case en haut à droite de celui-ci.</li></ul>"+
+    "<li>supprimer un élément avec la case en haut à droite de celui-ci.</li></ul>"+
 
-"<p>Pour ajouter une page, cliquez sur la flèche verte accompagnée d’un “+” se trouvant en bas à gauche et à droite.</p>"+
+    "<p>Pour ajouter une page, cliquez sur la flèche verte accompagnée d’un “+” se trouvant en bas à gauche et à droite.</p>"+
-"<p>Pour supprimer une page, cliquez sur la croix rouge située en haut à droite de la page.</p>"+
+    "<p>Pour supprimer une page, cliquez sur la croix rouge située en haut à droite de la page.</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"
 
 };
 
@@ -51,9 +52,11 @@ function start(){
     $("#wgt_name").text(sankoreLang.wgt_name);
     $("#wgt_help").text(sankoreLang.help);
     $("#help").html(sankoreLang.help_content);
-    $(".style_select option[value='1']").text(sankoreLang.slate);
+    $("#style_select option[value='1']").text(sankoreLang.slate);
-    $(".style_select option[value='2']").text(sankoreLang.pad);
+    $("#style_select option[value='2']").text(sankoreLang.pad);
-    $(".style_select option[value='3']").text(sankoreLang.none);
+    $("#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("etudier","")){
@@ -64,7 +67,7 @@ function start(){
             showExample();
         if(sankore.preference("etudier_style","")){
             changeStyle(sankore.preference("etudier_style",""));
-            $(".style_select").val(sankore.preference("etudier_style",""));
+            $("#style_select").val(sankore.preference("etudier_style",""));
         } else
             changeStyle("3")
     } 
@@ -76,7 +79,7 @@ function start(){
         window.widget.onleave = function(){
             if(!$("#wgt_help").hasClass("open")){
                 exportData();
-                sankore.setPreference("etudier_style", $(".style_select").find("option:selected").val());
+                sankore.setPreference("etudier_style", $("#style_select").find("option:selected").val());
                 sankore.setPreference("etudier_cur_page", $("#slider").getPage());
                 sankore.setPreference("etudier_left_nav", $("#prevBtn a").css("display"));
                 sankore.setPreference("etudier_right_nav", $("#nextBtn a").css("display"));
@@ -84,19 +87,21 @@ function start(){
         }
     }
     
-    $(".style_select").change(function (event){
+    $("#style_select").change(function (event){
         changeStyle($(this).find("option:selected").val());
     })
     
     $("#wgt_help").click(function(){
         var tmp = $(this);
         if($(this).hasClass("open")){
+            $(this).removeClass("help_pad").removeClass("help_wood")
             $("#help").hide();
             tmp.removeClass("open");
             $("#slider").show();
         } else {
+            ($("#style_select").val() == 1)?$(this).removeClass("help_pad").addClass("help_wood"):$(this).removeClass("help_wood").addClass("help_pad");
             exportData();
-            sankore.setPreference("etudier_style", $(".style_select").find("option:selected").val());
+            sankore.setPreference("etudier_style", $("#style_select").find("option:selected").val());
             sankore.setPreference("etudier_cur_page", $("#slider").getPage());
             sankore.setPreference("etudier_left_nav", $("#prevBtn a").css("display"));
             sankore.setPreference("etudier_right_nav", $("#nextBtn a").css("display"));            
@@ -113,7 +118,10 @@ function start(){
                     sankore.enableDropOnWidget(false);
                 $(this).addClass("selected");
                 $("#wgt_edit").removeClass("selected");
-                $(".style_select").css("display","none");
+                $("#parameters").css("display","none");
+                var tmpwh = $(window).height();
+                var tmpww = $(window).width();
+                window.resizeTo(tmpww, tmpwh - 44)
                 
                 $("#slider li>div").each(function(){
                     var container = $(this);
@@ -163,7 +171,10 @@ function start(){
                     sankore.enableDropOnWidget(true);
                 $(this).addClass("selected");
                 $("#wgt_display").removeClass("selected");
-                $(".style_select").css("display","block");
+                $("#parameters").css("display","block");
+                tmpwh = $(window).height();
+                tmpww = $(window).width();
+                window.resizeTo(tmpww, tmpwh + 44)
                 
                 $("#slider li>div").each(function(){
                     var container = $(this);
@@ -577,10 +588,10 @@ function changeStyle(val){
             $(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
             $("#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);
+            $("#wgt_display").addClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").removeClass("without_radius").addClass("radius_ft");
             break;
         case "2":
             $(".b_top_left").addClass("btl_pad").removeClass("without_back");
@@ -593,10 +604,10 @@ function changeStyle(val){
             $(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
             $("#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);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").removeClass("without_radius").removeClass("radius_ft");
             break;
         case "3":
             $(".b_top_left").addClass("without_back").removeClass("btl_pad");
@@ -609,10 +620,10 @@ function changeStyle(val){
             $(".b_bottom_center").addClass("without_back").removeClass("bbc_pad");
             $("#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("none_select").val(val);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").addClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").addClass("without_radius").removeClass("radius_ft");
             break;
     }
 }

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

@@ -25,12 +25,7 @@
                     <div id="wgt_name"></div>
                     <div id="wgt_help"></div>                    
                     <div id="wgt_display" class="selected"></div>
-                    <div id="wgt_edit"></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>
@@ -40,6 +35,17 @@
                 <td>
                     <div id="help"></div>
                     <div id="slider">
+                        <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>
                         <ul>							
                         </ul>
                     </div>

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

@@ -1,5 +1,5 @@
 var sankoreLang = {
-    display: "Показать", 
+    display: "Закрыть", 
     edit: "Изменить",
     text_content: "Это - пример. Вместо этого текста вы можете ввести свой собственный контент.", 
     new_txt: "Новый текстовый блок.",
@@ -9,7 +9,8 @@ var sankoreLang = {
     pad: "Планшет",
     none: "Нет",
     help: "Помощь",
-    help_content: "Пример текста помощи ..."
+    help_content: "Пример текста помощи ...",
+    theme: "Тема"
 };
 
 //some flags
@@ -31,9 +32,11 @@ function start(){
     $("#wgt_name").text(sankoreLang.wgt_name);
     $("#wgt_help").text(sankoreLang.help);
     $("#help").html(sankoreLang.help_content);
-    $(".style_select option[value='1']").text(sankoreLang.slate);
+    $("#style_select option[value='1']").text(sankoreLang.slate);
-    $(".style_select option[value='2']").text(sankoreLang.pad);
+    $("#style_select option[value='2']").text(sankoreLang.pad);
-    $(".style_select option[value='3']").text(sankoreLang.none);
+    $("#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("etudier","")){
@@ -44,7 +47,7 @@ function start(){
             showExample();
         if(sankore.preference("etudier_style","")){
             changeStyle(sankore.preference("etudier_style",""));
-            $(".style_select").val(sankore.preference("etudier_style",""));
+            $("#style_select").val(sankore.preference("etudier_style",""));
         } else
             changeStyle("3")
     } 
@@ -56,7 +59,7 @@ function start(){
         window.widget.onleave = function(){
             if(!$("#wgt_help").hasClass("open")){
                 exportData();
-                sankore.setPreference("etudier_style", $(".style_select").find("option:selected").val());
+                sankore.setPreference("etudier_style", $("#style_select").find("option:selected").val());
                 sankore.setPreference("etudier_cur_page", $("#slider").getPage());
                 sankore.setPreference("etudier_left_nav", $("#prevBtn a").css("display"));
                 sankore.setPreference("etudier_right_nav", $("#nextBtn a").css("display"));
@@ -64,19 +67,21 @@ function start(){
         }
     }
     
-    $(".style_select").change(function (event){
+    $("#style_select").change(function (event){
         changeStyle($(this).find("option:selected").val());
     })
     
     $("#wgt_help").click(function(){
         var tmp = $(this);
         if($(this).hasClass("open")){
+            $(this).removeClass("help_pad").removeClass("help_wood")
             $("#help").hide();
             tmp.removeClass("open");
             $("#slider").show();
         } else {
+            ($("#style_select").val() == 1)?$(this).removeClass("help_pad").addClass("help_wood"):$(this).removeClass("help_wood").addClass("help_pad");
             exportData();
-            sankore.setPreference("etudier_style", $(".style_select").find("option:selected").val());
+            sankore.setPreference("etudier_style", $("#style_select").find("option:selected").val());
             sankore.setPreference("etudier_cur_page", $("#slider").getPage());
             sankore.setPreference("etudier_left_nav", $("#prevBtn a").css("display"));
             sankore.setPreference("etudier_right_nav", $("#nextBtn a").css("display"));            
@@ -93,7 +98,10 @@ function start(){
                     sankore.enableDropOnWidget(false);
                 $(this).addClass("selected");
                 $("#wgt_edit").removeClass("selected");
-                $(".style_select").css("display","none");
+                $("#parameters").css("display","none");
+                var tmpwh = $(window).height();
+                var tmpww = $(window).width();
+                window.resizeTo(tmpww, tmpwh - 44)
                 
                 $("#slider li>div").each(function(){
                     var container = $(this);
@@ -109,7 +117,8 @@ function start(){
                         $(this).find(".size_up").remove();
                         $(this).find(".size_down").remove();
                         $(this).find(".resize_block").remove();
-                        $(this).removeAttr("contenteditable").removeClass("block_border");
+                        $(this).find(".real_text").removeAttr("contenteditable");
+                        $(this).removeClass("block_border");
                         $(this).css("position","absolute");
                     });
                     
@@ -142,7 +151,10 @@ function start(){
                     sankore.enableDropOnWidget(true);
                 $(this).addClass("selected");
                 $("#wgt_display").removeClass("selected");
-                $(".style_select").css("display","block");
+                $("#parameters").css("display","block");
+                tmpwh = $(window).height();
+                tmpww = $(window).width();
+                window.resizeTo(tmpww, tmpwh + 44)
                 
                 $("#slider li>div").each(function(){
                     var container = $(this);
@@ -158,7 +170,8 @@ function start(){
                         $("<div class='size_up' contenteditable='false'>").appendTo($(this));
                         $("<div class='size_down' contenteditable='false'>").appendTo($(this));
                         $("<div class='resize_block' contenteditable='false'>").appendTo($(this));
-                        $(this).attr("contenteditable", "true").addClass("block_border");
+                        $(this).find(".real_text").attr("contenteditable", "true");
+                        $(this).addClass("block_border");
                     });
                     
                     container.find(".img_block").each(function(){
@@ -292,7 +305,7 @@ function start(){
                 //var height = resize_obj.object.parent().height() - resize_obj.top + event.clientY;
                 resize_obj.left = event.clientX;
                 resize_obj.top = event.clientY;
-                resize_obj.object.parent().width(width).height("");
+                resize_obj.object.parent().width(width);
             } else {
                 width = resize_obj.object.parent().width() - resize_obj.left + event.clientX;
                 var height = resize_obj.object.parent().height() - resize_obj.top + event.clientY;
@@ -367,13 +380,13 @@ function start(){
     
     $(".add_text").live("click", function(){
         var container = $(this).parent();
-        var text_block = $("<div class='text_block'>" + sankoreLang.new_txt + "</div>").appendTo(container);
+        var text_block = $("<div class='text_block'><div class='real_text' contenteditable='true'>" + sankoreLang.new_txt + "</div></div>").appendTo(container);
         $("<div class='move_block' contenteditable='false'>").appendTo(text_block);
         $("<div class='close_img' contenteditable='false'>").appendTo(text_block);
         $("<div class='size_up' contenteditable='false'>").appendTo(text_block);
         $("<div class='size_down' contenteditable='false'>").appendTo(text_block);
         $("<div class='resize_block' contenteditable='false'>").appendTo(text_block);
-        text_block.attr("contenteditable", "true").addClass("block_border");
+        text_block.addClass("block_border");
     });
 }
 
@@ -391,7 +404,7 @@ function exportData(){
             txt_block.left = $(this).position().left;
             txt_block.w = $(this).width();
             txt_block.fz = $(this).css("font-size");
-            txt_block.val = $(this).text();
+            txt_block.val = $(this).find(".real_text").html();
             cont_obj.text.push(txt_block);
         });
         cont_obj.imgs = [];
@@ -433,7 +446,7 @@ function importData(data){
         var div = $("<div>").appendTo(li);
         
         for(var j in data[i].text){
-            var text_div = $("<div class='text_block'>" + data[i].text[j].val + "</div>");
+            var text_div = $("<div class='text_block'><div class='real_text'>" + data[i].text[j].val + "</div></div>");
             text_div.draggable().css("position","absolute")
             .width(data[i].text[j].w)
             .css("top", data[i].text[j].top)
@@ -486,7 +499,7 @@ function showExample(){
     
     var li1 = $("<li>");
     var div1 = $("<div>").appendTo(li1);
-    $("<div class='text_block'>" + sankoreLang.text_content + "</div>").draggable().appendTo(div1)
+    $("<div class='text_block'><div class='real_text'>" + sankoreLang.text_content + "</div></div>").draggable().appendTo(div1)
     li1.width($("#slider").width()).height($("#slider").height());
     $("#slider ul").append(li1);
     var li2 = $("<li>");
@@ -507,7 +520,7 @@ function showExample(){
     $("#slider ul").append(li3);
     var li4 = $("<li>");
     var div4 = $("<div>").appendTo(li4);
-    $("<div class='text_block'>" + sankoreLang.text_content + "</div>").draggable().appendTo(div4);
+    $("<div class='text_block'><div class='real_text'>" + sankoreLang.text_content + "</div></div>").draggable().appendTo(div4);
     var img2 = $("<div class='img_block' style='text-align: center;'></div>").draggable().appendTo(div4);
     $("<img src=\"../../objects/1.gif\" style=\"display: inline;\" height=\"120\"/>").appendTo(img2);
     var audio_block2 = $("<div class='audio_block'>").draggable().appendTo(div4);
@@ -555,10 +568,10 @@ function changeStyle(val){
             $(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
             $("#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);
+            $("#wgt_display").addClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").removeClass("without_radius").addClass("radius_ft");
             break;
         case "2":
             $(".b_top_left").addClass("btl_pad").removeClass("without_back");
@@ -571,10 +584,10 @@ function changeStyle(val){
             $(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
             $("#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);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").removeClass("without_radius").removeClass("radius_ft");
             break;
         case "3":
             $(".b_top_left").addClass("without_back").removeClass("btl_pad");
@@ -587,10 +600,10 @@ function changeStyle(val){
             $(".b_bottom_center").addClass("without_back").removeClass("bbc_pad");
             $("#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("none_select").val(val);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").addClass("without_radius");
+            $("#style_select").val(val);
+            $("body, html").addClass("without_radius").removeClass("radius_ft");
             break;
     }
 }
@@ -663,4 +676,4 @@ $(window).resize(function(){
         $(this).width(slider.width()).height(slider.height());
     });
     slider.setSize(slider.width(), slider.height());
-})
+})