Merge remote-tracking branch 'origin/develop' into claudio-dev

plugins/cffadaptor/src/UBCFFAdaptor.cpp

@@ -550,8 +550,8 @@ QDomElement UBCFFAdaptor::UBToCFFConverter::parsePage(const QString &pageFileNam
                 pageFile.close();
                 return QDomElement();
             }
-        } else if (tagname == tUBZGroup) {
+        } else if (tagname == tUBZGroups) {
-            group = parseGroupPageSection(nextTopElement);
+            group = parseGroupsPageSection(nextTopElement);
             if (group.isNull()) {
                 qDebug() << "Page doesn't contains any groups.";
                 pageFile.close();
@@ -634,6 +634,7 @@ QDomElement UBCFFAdaptor::UBToCFFConverter::parseSvgPageSection(const QDomElemen
         else if (tagName == tUBZLine)          parseUBZLine(nextElement, svgElements);
         else if (tagName == tUBZPolygon)       parseUBZPolygon(nextElement, svgElements);
         else if (tagName == tUBZPolyline)      parseUBZPolyline(nextElement, svgElements);
+        else if (tagName == tUBZGroups)        parseGroupsPageSection(nextElement);
 
         nextElement = nextElement.nextSiblingElement();
     }
@@ -694,14 +695,36 @@ bool UBCFFAdaptor::UBToCFFConverter::writeExtendedIwbSection()
 // extended element options
 // editable, background, locked are supported for now
 
-QDomElement UBCFFAdaptor::UBToCFFConverter::parseGroupPageSection(const QDomElement &element)
+QDomElement UBCFFAdaptor::UBToCFFConverter::parseGroupsPageSection(const QDomElement &groupRoot)
 {
 //    First sankore side implementation needed. TODO in Sankore 1.5
-    Q_UNUSED(element)
+    if (!groupRoot.hasChildNodes()) {
-    qDebug() << "parsing ubz group section";
+        qDebug() << "Group root is empty";
         return QDomElement();
     }
 
+    QDomElement groupElement = groupRoot.firstChildElement();
+
+    while (!groupElement.isNull()) {
+        QDomElement extendedElement = mDataModel->createElementNS(iwbNS, groupElement.tagName());
+        QDomElement groupChildElement = groupElement.firstChildElement();
+        while (!groupChildElement.isNull()) {
+            QDomElement extSubElement = mDataModel->createElementNS(iwbNS, groupChildElement.tagName());
+            extSubElement.setAttribute(aRef, groupChildElement.attribute(aID, QUuid().toString()));
+            extendedElement.appendChild(extSubElement);
+
+            groupChildElement = groupChildElement.nextSiblingElement();
+        }
+
+        mExtendedElements.append(extendedElement);
+
+        groupElement = groupElement.nextSiblingElement();
+    }
+
+    qDebug() << "parsing ubz group section";
+    return groupRoot;
+}
+
 QString UBCFFAdaptor::UBToCFFConverter::getDstContentFolderName(const QString &elementType)
 {
     QString sRet;
@@ -1250,6 +1273,19 @@ bool UBCFFAdaptor::UBToCFFConverter::setCFFAttribute(const QString &attributeNam
         {
             setGeometryFromUBZ(ubzElement, svgElement);
         }
+        else
+            if (attributeName.contains(aUBZUuid))
+            {
+
+                QString parentId = ubzElement.attribute(aUBZParent);
+                QString id;
+                if (!parentId.isEmpty())
+                    id = "{" + parentId + "}" + "{" + ubzElement.attribute(aUBZUuid)+"}";
+                else
+                    id = "{" + ubzElement.attribute(aUBZUuid)+"}";
+
+                svgElement.setAttribute(aID, id);
+            }
         else 
             if (attributeName.contains(aUBZHref)||attributeName.contains(aSrc))
             {
@@ -1799,7 +1835,10 @@ bool UBCFFAdaptor::UBToCFFConverter::parseUBZPolygon(const QDomElement &element,
 
         if (0 < iwbElementPart.attributes().count())
         {   
-            QString id = QUuid::createUuid().toString();
+            QString id = svgElementPart.attribute(aUBZUuid);
+            if (id.isEmpty())
+                id = QUuid::createUuid().toString();
+
             svgElementPart.setAttribute(aID, id);
             iwbElementPart.setAttribute(aRef, id);     
 

plugins/cffadaptor/src/UBCFFAdaptor.h

@@ -63,7 +63,7 @@ private:
         QDomElement parseSvgPageSection(const QDomElement &element);
         void writeQDomElementToXML(const QDomNode &node);
         bool writeExtendedIwbSection();
-        QDomElement parseGroupPageSection(const QDomElement &element);
+        QDomElement parseGroupsPageSection(const QDomElement &groupRoot);
 
         bool createBackground(const QDomElement &element, QMultiMap<int, QDomElement> &dstSvgList);
         QString createBackgroundImage(const QDomElement &element, QSize size);

plugins/cffadaptor/src/UBCFFConstants.h

@@ -28,6 +28,7 @@ const QString tIWBPageSet = "pageset";
 const QString tId = "id";
 const QString tElement = "element";
 const QString tUBZGroup = "group";
+const QString tUBZGroups = "groups";
 const QString tUBZG = "g";
 const QString tUBZPolygon = "polygon";
 const QString tUBZPolyline = "polyline";
@@ -67,6 +68,7 @@ const QString aBackground = "background";
 const QString aCrossedBackground = "crossed-background";
 const QString aUBZType = "type";
 const QString aUBZUuid = "uuid";
+const QString aUBZParent = "parent";
 const QString aFill = "fill"; // IWB attribute contans color to fill
 
 const QString aID = "id";   // ID of any svg element can be placed in to iwb section
@@ -334,8 +336,10 @@ stroke-lineshape-end \
 const QString ubzElementAttributesToConvert(" \
 xlink:href, \
 src, \
-transform \
+transform, \
-");
+uuid \
+"
+);
 
 // additional attributes. Have references in SVG section.
 const QString svgElementAttributes(" \

resources/library/interactivities/Ordre phrase.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/Ordre phrase.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/Ordre phrase.wgt/locales/fr/script/template2.js

@@ -26,7 +26,7 @@ function checkResponse()
 */
 
 var sankoreLang = {
-    view: "Afficher", 
+    view: "Fermer", 
     edit: "Modifier",
     example: "Cette phrase\nest un\nexemple",
     wgt_name: "Ordonner des phrases",
@@ -49,10 +49,10 @@ var sankoreLang = {
     "<p>Pour insérer du texte dans la zone, cliquez sur la zone et saisissez le texte souhaité.</p>"+
     "<p>Pour ajouter des séparations dans l’énoncé, retournez à la ligne. Votre texte sera séparé lors d'un retour à la ligne.</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"
 };
 
-
 var sentence = "";
 var curSentence = "";
 
@@ -82,9 +82,10 @@ var input_width = 606;
 var widget_padding = 0;
 
 $(document).ready(function(){
+    if(window.sankore)
         if(sankore.preference("ord_phrases_style","")){
             changeStyle(sankore.preference("ord_phrases_style",""));
-        $(".style_select").val(sankore.preference("ord_phrases_style",""));
+            $("#style_select").val(sankore.preference("ord_phrases_style",""));
         } else
             changeStyle("3")
         
@@ -92,13 +93,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");
                 modeView();
@@ -107,7 +118,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");
                 modeEdit();
@@ -120,11 +131,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");
@@ -158,13 +171,7 @@ $(document).ready(function(){
         }
     });
     
-    $(".style_select option[value='1']").text(sankoreLang.slate);
-    $(".style_select option[value='2']").text(sankoreLang.pad);
-    $(".style_select option[value='3']").text(sankoreLang.none);
     
-    $(".style_select").change(function (event){
-        changeStyle($(this).find("option:selected").val());
-    })
 })
 
 function str_replace( w, b, s ){
@@ -230,10 +237,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);
+            $("#wgt_display").addClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#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");
@@ -247,10 +254,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);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#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");
@@ -264,10 +271,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);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").addClass("without_radius");
+            $("#style_select option:last").attr('selected',true);
+            $("body, html").addClass("without_radius").removeClass("radius_ft");
             break;
     }
 }
@@ -355,7 +362,7 @@ function modeEdit()
 
 if (window.widget) {
     window.widget.onleave = function(){
-        sankore.setPreference("ord_phrases_style", $(".style_select").find("option:selected").val());
+        sankore.setPreference("ord_phrases_style", $("#style_select").find("option:selected").val());
         if($( "#mp_word textarea" ).val())
         {
             modeView();

resources/library/interactivities/Ordre phrase.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/Ordre phrase.wgt/locales/ru/script/template2.js

@@ -27,7 +27,7 @@ function checkResponse()
 
 var sankoreLang = {
     edit: "Изменить",
-    view: "Просмотр",
+    view: "Закрыть",
     example: "это\nпример\nпредложения",
     wgt_name: "Порядок фраз",
     reload: "Обновить",
@@ -35,10 +35,10 @@ var sankoreLang = {
     pad: "Планшет",
     none: "Нет",
     help: "Помощь",
-    help_content: "Пример текста помощи ..."
+    help_content: "Пример текста помощи ...",
+    theme: "Тема"
 }
 
-
 var sentence = "";
 var curSentence = "";
 
@@ -68,9 +68,10 @@ var input_width = 606;
 var widget_padding = 0;
 
 $(document).ready(function(){
+    if(window.sankore)
         if(sankore.preference("ord_phrases_style","")){
             changeStyle(sankore.preference("ord_phrases_style",""));
-        $(".style_select").val(sankore.preference("ord_phrases_style",""));
+            $("#style_select").val(sankore.preference("ord_phrases_style",""));
         } else
             changeStyle("3")
         
@@ -78,13 +79,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");
                 modeView();
@@ -93,7 +104,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");
                 modeEdit();
@@ -106,11 +117,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");
@@ -144,13 +157,7 @@ $(document).ready(function(){
         }
     });
     
-    $(".style_select option[value='1']").text(sankoreLang.slate);
-    $(".style_select option[value='2']").text(sankoreLang.pad);
-    $(".style_select option[value='3']").text(sankoreLang.none);
     
-    $(".style_select").change(function (event){
-        changeStyle($(this).find("option:selected").val());
-    })
 })
 
 function str_replace( w, b, s ){
@@ -216,10 +223,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);
+            $("#wgt_display").addClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#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");
@@ -233,10 +240,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);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#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");
@@ -250,10 +257,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);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").addClass("without_radius");
+            $("#style_select option:last").attr('selected',true);
+            $("body, html").addClass("without_radius").removeClass("radius_ft");
             break;
     }
 }
@@ -341,7 +348,7 @@ function modeEdit()
 
 if (window.widget) {
     window.widget.onleave = function(){
-        sankore.setPreference("ord_phrases_style", $(".style_select").find("option:selected").val());
+        sankore.setPreference("ord_phrases_style", $("#style_select").find("option:selected").val());
         if($( "#mp_word textarea" ).val())
         {
             modeView();

resources/library/interactivities/Ordre phrase.wgt/scripts/template2.js

@@ -28,7 +28,7 @@ function checkResponse()
 
 var sankoreLang = {
     edit: "Edit",
-    view: "Display",
+    view: "Close",
     example: "this is\nan example\nsentence",
     wgt_name: "Order phrases",
     reload: "Reload",
@@ -36,7 +36,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"
 }
 
 
@@ -72,7 +73,7 @@ $(document).ready(function(){
     if(window.sankore)
         if(sankore.preference("ord_phrases_style","")){
             changeStyle(sankore.preference("ord_phrases_style",""));
-            $(".style_select").val(sankore.preference("ord_phrases_style",""));
+            $("#style_select").val(sankore.preference("ord_phrases_style",""));
         } else
             changeStyle("3")
         
@@ -80,13 +81,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");
                 modeView();
@@ -95,7 +106,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");
                 modeEdit();
@@ -108,11 +119,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");
@@ -146,13 +159,7 @@ $(document).ready(function(){
         }
     });
     
-    $(".style_select option[value='1']").text(sankoreLang.slate);
-    $(".style_select option[value='2']").text(sankoreLang.pad);
-    $(".style_select option[value='3']").text(sankoreLang.none);
     
-    $(".style_select").change(function (event){
-        changeStyle($(this).find("option:selected").val());
-    })
 })
 
 function str_replace( w, b, s ){
@@ -218,10 +225,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);
+            $("#wgt_display").addClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#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");
@@ -235,10 +242,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);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#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");
@@ -252,10 +259,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);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").addClass("without_radius");
+            $("#style_select option:last").attr('selected',true);
+            $("body, html").addClass("without_radius").removeClass("radius_ft");
             break;
     }
 }
@@ -343,7 +350,7 @@ function modeEdit()
 
 if (window.widget) {
     window.widget.onleave = function(){
-        sankore.setPreference("ord_phrases_style", $(".style_select").find("option:selected").val());
+        sankore.setPreference("ord_phrases_style", $("#style_select").find("option:selected").val());
         if($( "#mp_word textarea" ).val())
         {
             modeView();

resources/library/interactivities/Ordre phrase.wgt/styles/of_puppets.css

@@ -3,7 +3,7 @@ html, body{
     height: 100%;
     margin: 0;
     padding: 0;    
-    border-radius: 50px;
+    border-radius: 35px;
     overflow: hidden;
 }
 
@@ -149,57 +149,40 @@ textarea{
     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-family: Arial,Helvetica,sans-serif;
     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;
+    padding-left: 35px;
-    background-image: url(../img/slate-toolbar-reload.png);
+    background: url(../img/slate-toolbar-reload.png) left top no-repeat;
-    background-repeat: no-repeat;
+    color: #7F613F;
-    background-position: top 0;
+    text-shadow: #FFDCA9 0 1px 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{
@@ -234,51 +217,50 @@ textarea{
     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;
@@ -289,3 +271,34 @@ textarea{
 .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/Selectionner.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;
@@ -322,57 +314,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-family: Arial,Helvetica,sans-serif;
     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;
+    padding-left: 35px;
-    background-image: url(../img/slate-toolbar-reload.png);
+    background: url(../img/slate-toolbar-reload.png) left top no-repeat;
-    background-repeat: no-repeat;
+    color: #7F613F;
-    background-position: top 0;
+    text-shadow: #FFDCA9 0 1px 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{
@@ -407,51 +382,50 @@ body{
     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;
@@ -462,3 +436,34 @@ 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/Selectionner.wgt/index.html

@@ -52,11 +52,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>
@@ -66,7 +61,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/Selectionner.wgt/js/script.js

@@ -1,5 +1,5 @@
 var sankoreLang = {
-    display: "Display", 
+    display: "Close", 
     edit: "Edit", 
     short_desc: "Select animals from the following list:", 
     add: "Add new block",
@@ -15,7 +15,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
@@ -27,9 +28,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='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("selectionner","")){
@@ -39,7 +42,7 @@ function start(){
             showExample();
         if(sankore.preference("sel_style","")){
             changeStyle(sankore.preference("sel_style",""));
-            $(".style_select").val(sankore.preference("sel_style",""));
+            $("#style_select").val(sankore.preference("sel_style",""));
         } else
             changeStyle("3")
     } 
@@ -50,18 +53,20 @@ function start(){
     if (window.widget) {
         window.widget.onleave = function(){
             exportData();
-            sankore.setPreference("sel_style", $(".style_select").find("option:selected").val());
+            sankore.setPreference("sel_style", $("#style_select").find("option:selected").val());
         }
     }
     
     $("#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 {
+            ($("#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");
@@ -83,7 +88,7 @@ function start(){
             $("#wgt_display").trigger("click");
     });
     
-    $(".style_select").change(function (event){
+    $("#style_select").change(function (event){
         changeStyle($(this).find("option:selected").val());
     })
     
@@ -94,7 +99,7 @@ function start(){
                     sankore.enableDropOnWidget(false);
                 $(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);
@@ -122,7 +127,7 @@ function start(){
                     sankore.enableDropOnWidget(true);
                 $(this).addClass("selected");
                 $("#wgt_display").removeClass("selected");
-                $(".style_select").css("display","block");
+                $("#parameters").css("display","block");
                 
                 $(".cont").each(function(){
                     var container = $(this);
@@ -446,10 +451,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);
+            $("#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");
@@ -463,10 +468,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);
+            $("#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");
@@ -480,10 +485,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);
+            $("#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/Selectionner.wgt/locales/fr/index.html

@@ -26,11 +26,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>
@@ -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/Selectionner.wgt/locales/fr/js/script.js

@@ -1,5 +1,5 @@
 var sankoreLang = {
-    display: "Afficher", 
+    display: "Fermer", 
     edit: "Modifier", 
     short_desc: "Sélectionner les animaux dans la liste suivante :", 
     add: "Nouveau bloc",
@@ -33,7 +33,8 @@ var sankoreLang = {
 
     "<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
@@ -45,9 +46,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='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("selectionner","")){
@@ -57,7 +60,7 @@ function start(){
             showExample();
         if(sankore.preference("sel_style","")){
             changeStyle(sankore.preference("sel_style",""));
-            $(".style_select").val(sankore.preference("sel_style",""));
+            $("#style_select").val(sankore.preference("sel_style",""));
         } else
             changeStyle("3")
     } 
@@ -68,18 +71,20 @@ function start(){
     if (window.widget) {
         window.widget.onleave = function(){
             exportData();
-            sankore.setPreference("sel_style", $(".style_select").find("option:selected").val());
+            sankore.setPreference("sel_style", $("#style_select").find("option:selected").val());
         }
     }
     
     $("#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 {
+            ($("#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");
@@ -101,7 +106,7 @@ function start(){
             $("#wgt_display").trigger("click");
     });
     
-    $(".style_select").change(function (event){
+    $("#style_select").change(function (event){
         changeStyle($(this).find("option:selected").val());
     })
     
@@ -112,7 +117,7 @@ function start(){
                     sankore.enableDropOnWidget(false);
                 $(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);
@@ -140,7 +145,7 @@ function start(){
                     sankore.enableDropOnWidget(true);
                 $(this).addClass("selected");
                 $("#wgt_display").removeClass("selected");
-                $(".style_select").css("display","block");
+                $("#parameters").css("display","block");
                 
                 $(".cont").each(function(){
                     var container = $(this);
@@ -463,10 +468,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);
+            $("#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");
@@ -480,10 +485,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);
+            $("#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");
@@ -497,10 +502,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);
+            $("#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/Selectionner.wgt/locales/ru/index.html

@@ -26,11 +26,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>
@@ -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/Selectionner.wgt/locales/ru/js/script.js

@@ -1,5 +1,5 @@
 var sankoreLang = {
-    display: "Показать", 
+    display: "Закрыть", 
     edit: "Изменить", 
     short_desc: "Выберите животных из следующего списка:", 
     add: "Новый блок",
@@ -15,7 +15,8 @@ var sankoreLang = {
     pad: "Планшет",
     none: "Нет",
     help: "Помощь",
-    help_content: "Пример текста помощи ..."
+    help_content: "Пример текста помощи ...",
+    theme: "Тема"
 };
 
 //main function
@@ -27,9 +28,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='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("selectionner","")){
@@ -39,7 +42,7 @@ function start(){
             showExample();
         if(sankore.preference("sel_style","")){
             changeStyle(sankore.preference("sel_style",""));
-            $(".style_select").val(sankore.preference("sel_style",""));
+            $("#style_select").val(sankore.preference("sel_style",""));
         } else
             changeStyle("3")
     } 
@@ -50,18 +53,20 @@ function start(){
     if (window.widget) {
         window.widget.onleave = function(){
             exportData();
-            sankore.setPreference("sel_style", $(".style_select").find("option:selected").val());
+            sankore.setPreference("sel_style", $("#style_select").find("option:selected").val());
         }
     }
     
     $("#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 {
+            ($("#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");
@@ -83,7 +88,7 @@ function start(){
             $("#wgt_display").trigger("click");
     });
     
-    $(".style_select").change(function (event){
+    $("#style_select").change(function (event){
         changeStyle($(this).find("option:selected").val());
     })
     
@@ -94,7 +99,7 @@ function start(){
                     sankore.enableDropOnWidget(false);
                 $(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);
@@ -122,7 +127,7 @@ function start(){
                     sankore.enableDropOnWidget(true);
                 $(this).addClass("selected");
                 $("#wgt_display").removeClass("selected");
-                $(".style_select").css("display","block");
+                $("#parameters").css("display","block");
                 
                 $(".cont").each(function(){
                     var container = $(this);
@@ -445,10 +450,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);
+            $("#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");
@@ -462,10 +467,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);
+            $("#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");
@@ -479,10 +484,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);
+            $("#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/Separe phrase.wgt/index.html

@@ -58,11 +58,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>
@@ -72,7 +67,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 phrase.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 phrase.wgt/locales/fr/scripts/wcontainer.js

@@ -1,5 +1,5 @@
 var sankoreLang = {
-    view: "Afficher", 
+    view: "Fermer", 
     edit: "Modifier",
     example: "Ceci est une série de mots à séparer correctement",
     wgt_name: "Séparer une phrase",
@@ -27,7 +27,8 @@ var sankoreLang = {
     "<p>Ecrivez simplement une phrase dans la zone de texte.</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"
 
 };
 

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

@@ -20,7 +20,6 @@
         <script type="text/javascript" src="../../scripts/app.js"></script>
         <script type="text/javascript">
             $(document).ready(function(){
-                alert(2)
                 if(window.sankore)
                     sankore.enableDropOnWidget(false);                         
             });
@@ -37,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>
@@ -51,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 phrase.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/Separe phrase.wgt/scripts/app.js

@@ -31,7 +31,7 @@ $(document).ready(function()
     
     if (window.widget) {
         window.widget.onleave = function(){
-            sankore.setPreference("spl_phrase_style", $(".style_select").find("option:selected").val());
+            sankore.setPreference("spl_phrase_style", $("#style_select").find("option:selected").val());
             if(w.editMode){
                 sankore.setPreference("ordSplPhrases", w.elements.container.find( "textarea" ).val());
                 sankore.setPreference("ordSplPhrasesState", "0");
@@ -47,7 +47,6 @@ $(document).ready(function()
     
     if(window.sankore && sankore.preference("spl_phrase_style","")){
         changeStyle(sankore.preference("spl_phrase_style",""));
-        $(".style_select").val(sankore.preference("spl_phrase_style",""));
     } else
         changeStyle("3")
     
@@ -55,13 +54,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();
@@ -70,7 +79,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();
@@ -83,11 +92,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");
@@ -104,14 +115,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">' + sentence + '</textarea></div>' );
@@ -276,10 +279,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);
+            $("#wgt_display").addClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#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");
@@ -293,10 +296,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);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").removeClass("without_radius");
+            $("#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");
@@ -310,10 +313,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);
+            $("#wgt_display").removeClass("display_wood");
-            $("body, html").addClass("without_radius");
+            $("#style_select option:last").attr('selected',true);
+            $("body, html").addClass("without_radius").removeClass("radius_ft");
             break;
     }
     }

resources/library/interactivities/Separe phrase.wgt/scripts/wcontainer.js

@@ -1,5 +1,5 @@
 var sankoreLang = {
-    view: "Display", 
+    view: "Close", 
     edit: "Edit",
     example: "this is a bunch of words which should be split apart",
     wgt_name: "Split a phrase",
@@ -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 phrase.wgt/styles/app.css

@@ -109,57 +109,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-family: Arial,Helvetica,sans-serif;
     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;
+    padding-left: 35px;
-    background-image: url(../img/slate-toolbar-reload.png);
+    background: url(../img/slate-toolbar-reload.png) left top no-repeat;
-    background-repeat: no-repeat;
+    color: #7F613F;
-    background-position: top 0;
+    text-shadow: #FFDCA9 0 1px 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{
@@ -194,51 +177,50 @@
     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;
@@ -249,3 +231,34 @@
 .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/Separe phrase.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/Separe texte.wgt/index.html

@@ -27,7 +27,6 @@
                     lang = sankore.locale().substr(0,2);    
                 } else 
                     lang = "en";
-
                 if(lang != "en"){
                     returnStatus(lang);
                 }
@@ -61,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>
@@ -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

@@ -1,5 +1,5 @@
 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",
@@ -26,7 +26,8 @@ var sankoreLang = {
     "<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"
 
 };
 

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

@@ -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/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);
+                $("#wgt_display").addClass("display_wood");
-                $("body, html").removeClass("without_radius");
+                $("#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);
+                $("#wgt_display").removeClass("display_wood");
-                $("body, html").removeClass("without_radius");
+                $("#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);
+                $("#wgt_display").removeClass("display_wood");
-                $("body, html").addClass("without_radius");
+                $("#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

@@ -1,5 +1,5 @@
 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-family: Arial,Helvetica,sans-serif;
     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;
+    padding-left: 35px;
-    background-image: url(../img/slate-toolbar-reload.png);
+    background: url(../img/slate-toolbar-reload.png) left top no-repeat;
-    background-repeat: no-repeat;
+    color: #7F613F;
-    background-position: top 0;
+    text-shadow: #FFDCA9 0 1px 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{
@@ -195,51 +178,50 @@
     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;
@@ -250,3 +232,34 @@
 .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/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;
 }
 

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">