help for 'Contraste' widget

resources/library/interactivities/Contraste.wgt/css/basic.css

@@ -4,6 +4,7 @@ html, body{
     margin: 0;
     padding: 0;    
     border-radius: 50px;
+    overflow: hidden;
 }
 
 body{
@@ -255,7 +256,6 @@ body{
 
 #wgt_name{
     height: 44px;
-    width: 200px;
     margin: 10px 10px 0 10px;
     padding: 0;
     float: left;
@@ -264,9 +264,8 @@ body{
     color: #8c5730;
 }
 
-#wgt_reload, #wgt_edit, #wgt_display,#wgt_add{
+#wgt_reload, #wgt_edit, #wgt_display,#wgt_add, #wgt_help{
     cursor: pointer;
-    width: 95px;
     height: 44px;
     margin: 10px 10px 0 0;
     float: right;
@@ -276,7 +275,6 @@ body{
 }
 
 #wgt_display{
-    width: 100px;
     padding-left: 40px;
     background-image: url(../images/slate-edit.png);
     background-repeat: no-repeat;
@@ -285,7 +283,6 @@ body{
 }
 
 #wgt_edit{    
-    width: 100px;
     padding-left: 40px;
     background-image: url(../images/slate-edit.png);
     background-repeat: no-repeat;
@@ -389,4 +386,28 @@ body{
     background-color: #333 !important;
     color: white !important;
     background-image: url(../images/ar_down_white.png) !important;
+}
+
+.pad_help{
+    background-image: url(../images/slate-help-white.png) !important;
+}
+
+#wgt_help{
+    padding-left: 32px;
+    background-image: url(../images/slate-help.png);
+    background-repeat: no-repeat;
+    background-position: top 0;
+}
+
+#help{
+    width: 100%;
+    height: 100%;    
+    overflow: auto;
+    display: none;
+    background-color: #ccc;
+    padding: 5px;
+}
+
+.open{
+    
 }

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

@@ -47,6 +47,7 @@
                 <td class="b_top_left">&nbsp;</td>
                 <td class="b_top_center">
                     <div id="wgt_name"></div>
+                    <div id="wgt_help"></div> 
                     <div id="wgt_reload"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>
@@ -63,6 +64,7 @@
             <tr>
                 <td class="b_center_left">&nbsp;</td>
                 <td>
+                    <div id="help"></div>
                     <div id="data">
                         
                     </div>

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

@@ -27,6 +27,7 @@ and open the template in the editor.
                 <td class="b_top_left">&nbsp;</td>
                 <td class="b_top_center">
                     <div id="wgt_name"></div>
+                    <div id="wgt_help"></div> 
                     <div id="wgt_reload"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>
@@ -43,6 +44,7 @@ and open the template in the editor.
             <tr>
                 <td class="b_center_left">&nbsp;</td>
                 <td>
+                    <div id="help"></div>
                     <div id="data">
                         
                     </div>

resources/library/interactivities/Contraste.wgt/locales/fr/scripts/blackYellow.js

@@ -25,7 +25,9 @@ var sankoreLang = {
     reload: "Recharger",
     slate: "ardoise",
     pad: "tablette",
-    none: "aucun"
+    none: "aucun",
+    help: "aide",
+    help_content: "Ceci est un exemple de contenu de l'aide ..."
 };
 
 function init(){
@@ -60,6 +62,8 @@ function init(){
     $("#wgt_add").text(sankoreLang.add);
     $("#wgt_name").text(sankoreLang.wgt_name);
     $("#wgt_reload").text(sankoreLang.reload);
+    $("#wgt_help").text(sankoreLang.help);
+    $("#help").html(sankoreLang.help_content);
     $(".style_select option[value='1']").text(sankoreLang.slate);
     $(".style_select option[value='2']").text(sankoreLang.pad);
     $(".style_select option[value='3']").text(sankoreLang.none);
@@ -157,6 +161,21 @@ function init(){
             }
         }
     });
+    
+    $("#wgt_help").click(function(){
+        var tmp = $(this);
+        if($(this).hasClass("open")){
+            $("#help").slideUp("100", function(){
+                tmp.removeClass("open");
+                $("#data").show();
+            });
+        } else {            
+            $("#data").hide();
+            $("#help").slideDown("100", function(){
+                tmp.addClass("open");
+            });
+        }
+    });
 
     $("#wgt_reload").click(function(){
         window.location.reload();
@@ -400,6 +419,7 @@ function changeStyle(val){
             $(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").removeClass("pad_color").removeClass("pad_reload");
             $("#wgt_edit").removeClass("pad_color").removeClass("pad_edit");
+            $("#wgt_help").removeClass("pad_color").removeClass("pad_help");
             $("#wgt_display").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_add").removeClass("pad_color").removeClass("pad_add");
             $("#wgt_name").removeClass("pad_color");
@@ -417,6 +437,7 @@ function changeStyle(val){
             $(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
             $("#wgt_add").addClass("pad_color").addClass("pad_add");
             $("#wgt_name").addClass("pad_color");
@@ -434,6 +455,7 @@ function changeStyle(val){
             $(".b_bottom_center").addClass("without_back").removeClass("bbc_pad");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
             $("#wgt_add").addClass("pad_color").addClass("pad_add");
             $("#wgt_name").addClass("pad_color");

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

@@ -27,6 +27,7 @@ and open the template in the editor.
                 <td class="b_top_left">&nbsp;</td>
                 <td class="b_top_center">
                     <div id="wgt_name"></div>
+                    <div id="wgt_help"></div> 
                     <div id="wgt_reload"></div>                    
                     <div id="wgt_display" class="selected"></div>
                     <div id="wgt_edit"></div>
@@ -43,6 +44,7 @@ and open the template in the editor.
             <tr>
                 <td class="b_center_left">&nbsp;</td>
                 <td>
+                    <div id="help"></div>
                     <div id="data">
                         
                     </div>

resources/library/interactivities/Contraste.wgt/locales/ru/scripts/blackYellow.js

@@ -25,7 +25,9 @@ var sankoreLang = {
     reload: "Обновить",
     slate: "Узор",
     pad: "Планшет",
-    none: "Нет"
+    none: "Нет",
+    help: "Помощь",
+    help_content: "Пример текста помощи ..."
 };
 
 function init(){
@@ -60,6 +62,8 @@ function init(){
     $("#wgt_add").text(sankoreLang.add);
     $("#wgt_name").text(sankoreLang.wgt_name);
     $("#wgt_reload").text(sankoreLang.reload);
+    $("#wgt_help").text(sankoreLang.help);
+    $("#help").html(sankoreLang.help_content);
     $(".style_select option[value='1']").text(sankoreLang.slate);
     $(".style_select option[value='2']").text(sankoreLang.pad);
     $(".style_select option[value='3']").text(sankoreLang.none);
@@ -157,6 +161,21 @@ function init(){
             }
         }
     });
+    
+    $("#wgt_help").click(function(){
+        var tmp = $(this);
+        if($(this).hasClass("open")){
+            $("#help").slideUp("100", function(){
+                tmp.removeClass("open");
+                $("#data").show();
+            });
+        } else {            
+            $("#data").hide();
+            $("#help").slideDown("100", function(){
+                tmp.addClass("open");
+            });
+        }
+    });
 
     $("#wgt_reload").click(function(){
         window.location.reload();
@@ -400,6 +419,7 @@ function changeStyle(val){
             $(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").removeClass("pad_color").removeClass("pad_reload");
             $("#wgt_edit").removeClass("pad_color").removeClass("pad_edit");
+            $("#wgt_help").removeClass("pad_color").removeClass("pad_help");
             $("#wgt_display").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_add").removeClass("pad_color").removeClass("pad_add");
             $("#wgt_name").removeClass("pad_color");
@@ -417,6 +437,7 @@ function changeStyle(val){
             $(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
             $("#wgt_add").addClass("pad_color").addClass("pad_add");
             $("#wgt_name").addClass("pad_color");
@@ -434,6 +455,7 @@ function changeStyle(val){
             $(".b_bottom_center").addClass("without_back").removeClass("bbc_pad");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
             $("#wgt_add").addClass("pad_color").addClass("pad_add");
             $("#wgt_name").addClass("pad_color");

resources/library/interactivities/Contraste.wgt/scripts/blackYellow.js

@@ -25,7 +25,9 @@ var sankoreLang = {
     reload: "Reload",
     slate: "Wood",
     pad: "Pad",
-    none: "None"
+    none: "None",
+    help: "Help",
+    help_content: "This is an example of help content ..."
 };
 
 function init(){
@@ -60,6 +62,8 @@ function init(){
     $("#wgt_add").text(sankoreLang.add);
     $("#wgt_name").text(sankoreLang.wgt_name);
     $("#wgt_reload").text(sankoreLang.reload);
+    $("#wgt_help").text(sankoreLang.help);
+    $("#help").html(sankoreLang.help_content);
     $(".style_select option[value='1']").text(sankoreLang.slate);
     $(".style_select option[value='2']").text(sankoreLang.pad);
     $(".style_select option[value='3']").text(sankoreLang.none);
@@ -158,6 +162,21 @@ function init(){
         }
     });
 
+    $("#wgt_help").click(function(){
+        var tmp = $(this);
+        if($(this).hasClass("open")){
+            $("#help").slideUp("100", function(){
+                tmp.removeClass("open");
+                $("#data").show();
+            });
+        } else {            
+            $("#data").hide();
+            $("#help").slideDown("100", function(){
+                tmp.addClass("open");
+            });
+        }
+    });
+
     $("#wgt_reload").click(function(){
         window.location.reload();
     });
@@ -374,8 +393,8 @@ function checkEmptyFields(field){
 //adding a new task to the page
 function addTask(expression, result){
     var lastItem = $(".editContainer:last"),
-        lastItemPos = lastItem.length ? lastItem.position().top : 45,
-        lastItemHeight = lastItem.length ? lastItem.height() : 0;
+    lastItemPos = lastItem.length ? lastItem.position().top : 45,
+    lastItemHeight = lastItem.length ? lastItem.height() : 0;
     var editContent = $("<div class='editContainer'>").width(240).height(70).css("top", lastItemPos + lastItemHeight + 15 + "px").appendTo("#data");
     var closeItem = $("<div class='closeItem'>").appendTo(editContent);
     var rightResize = $("<div class='rightResize'>").appendTo(editContent);
@@ -400,6 +419,7 @@ function changeStyle(val){
             $(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").removeClass("pad_color").removeClass("pad_reload");
             $("#wgt_edit").removeClass("pad_color").removeClass("pad_edit");
+            $("#wgt_help").removeClass("pad_color").removeClass("pad_help");
             $("#wgt_display").removeClass("pad_color").removeClass("pad_edit");
             $("#wgt_add").removeClass("pad_color").removeClass("pad_add");
             $("#wgt_name").removeClass("pad_color");
@@ -417,6 +437,7 @@ function changeStyle(val){
             $(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
             $("#wgt_add").addClass("pad_color").addClass("pad_add");
             $("#wgt_name").addClass("pad_color");
@@ -434,6 +455,7 @@ function changeStyle(val){
             $(".b_bottom_center").addClass("without_back").removeClass("bbc_pad");
             $("#wgt_reload").addClass("pad_color").addClass("pad_reload");
             $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
+            $("#wgt_help").addClass("pad_color").addClass("pad_help");
             $("#wgt_display").addClass("pad_color").addClass("pad_edit");
             $("#wgt_add").addClass("pad_color").addClass("pad_add");
             $("#wgt_name").addClass("pad_color");