help for 'Choisir' widget

12 years ago · 493e0c12c4
parent 31e8bbd1d3
commit 493e0c12c4
9 changed files with 101 additions and 8 deletions
--- a/resources/library/interactivities/Choisir.wgt/css/basic.css
+++ b/resources/library/interactivities/Choisir.wgt/css/basic.css
@ -17,6 +17,7 @@ html, body{
    margin: 0;
    padding: 0;    
    border-radius: 50px;
+    overflow: hidden;
 }

 body{
@ -469,7 +470,6 @@ body{

 #wgt_name{
    height: 44px;
-    width: 360px;
    margin: 10px 10px 0 10px;
    padding: 0;
    float: left;
@ -478,9 +478,8 @@ body{
    color: #8c5730;
 }

-#wgt_reload, #wgt_edit, #wgt_display{
+#wgt_reload, #wgt_edit, #wgt_display, #wgt_help{
    cursor: pointer;
-    width: 80px;
    height: 44px;
    margin: 10px 10px 0 0;
    float: right;
@ -490,7 +489,6 @@ body{
 }

 #wgt_display{
-    width: 100px;
    padding-left: 40px;
    background-image: url(../images/slate-edit.png);
    background-repeat: no-repeat;
@ -499,7 +497,6 @@ body{
 }

 #wgt_edit{    
-    width: 100px;
    padding-left: 40px;
    background-image: url(../images/slate-edit.png);
    background-repeat: no-repeat;
@ -591,4 +588,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{
+    
 }
--- a/resources/library/interactivities/Choisir.wgt/images/slate-help-white.png
+++ b/resources/library/interactivities/Choisir.wgt/images/slate-help-white.png
--- a/resources/library/interactivities/Choisir.wgt/images/slate-help.png
+++ b/resources/library/interactivities/Choisir.wgt/images/slate-help.png
--- a/resources/library/interactivities/Choisir.wgt/index.html
+++ b/resources/library/interactivities/Choisir.wgt/index.html
@ -51,6 +51,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>
@ -66,6 +67,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>
--- a/resources/library/interactivities/Choisir.wgt/locales/fr/index.html
+++ b/resources/library/interactivities/Choisir.wgt/locales/fr/index.html
@ -26,6 +26,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>
@ -41,6 +42,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>
--- a/resources/library/interactivities/Choisir.wgt/locales/fr/scripts/selQuestionApp.js
+++ b/resources/library/interactivities/Choisir.wgt/locales/fr/scripts/selQuestionApp.js
@ -39,7 +39,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 ..."
 };

 var questionArray;
@ -61,6 +63,8 @@ function init(){
    $("#wgt_edit").text(sankoreLang.edit);
    $("#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);
@ -138,6 +142,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").text(sankoreLang.reload).click(function(){
        if($("#wgt_edit").css("display") == "none")
@ -722,6 +741,7 @@ function changeStyle(val){
            $(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back");
            $(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
            $("#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");
@ -738,6 +758,7 @@ function changeStyle(val){
            $(".b_bottom_left").addClass("bbl_pad").removeClass("without_back");
            $(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
            $("#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");
@ -753,6 +774,7 @@ function changeStyle(val){
            $(".b_bottom_right").addClass("without_back").removeClass("bbr_pad");
            $(".b_bottom_left").addClass("without_back").removeClass("bbl_pad");
            $(".b_bottom_center").addClass("without_back").removeClass("bbc_pad");
+            $("#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");
--- a/resources/library/interactivities/Choisir.wgt/locales/ru/index.html
+++ b/resources/library/interactivities/Choisir.wgt/locales/ru/index.html
@ -26,6 +26,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>
@ -41,6 +42,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>
--- a/resources/library/interactivities/Choisir.wgt/locales/ru/scripts/selQuestionApp.js
+++ b/resources/library/interactivities/Choisir.wgt/locales/ru/scripts/selQuestionApp.js
@ -39,7 +39,9 @@ var sankoreLang = {
    reload: "Обновить",
    slate: "Узор",
    pad: "Планшет",
-    none: "Нет"
+    none: "Нет",
+    help: "Помощь",
+    help_content: "Пример текста помощи ..."
 };

 var questionArray;
@ -61,6 +63,8 @@ function init(){
    $("#wgt_edit").text(sankoreLang.edit);
    $("#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);
@ -139,6 +143,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").text(sankoreLang.reload).click(function(){
        if($("#wgt_edit").css("display") == "none")
            $("#wgt_display").trigger("click");
@ -722,6 +741,7 @@ function changeStyle(val){
            $(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back");
            $(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
            $("#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");
@ -738,6 +758,7 @@ function changeStyle(val){
            $(".b_bottom_left").addClass("bbl_pad").removeClass("without_back");
            $(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
            $("#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");
@ -753,6 +774,7 @@ function changeStyle(val){
            $(".b_bottom_right").addClass("without_back").removeClass("bbr_pad");
            $(".b_bottom_left").addClass("without_back").removeClass("bbl_pad");
            $(".b_bottom_center").addClass("without_back").removeClass("bbc_pad");
+            $("#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");
--- a/resources/library/interactivities/Choisir.wgt/scripts/selQuestionApp.js
+++ b/resources/library/interactivities/Choisir.wgt/scripts/selQuestionApp.js
@ -39,7 +39,9 @@ var sankoreLang = {
    reload: "Reload",
    slate: "Wood",
    pad: "Pad",
-    none: "None"
+    none: "None",
+    help: "Help",
+    help_content: "This is an example of help content ..."
 };

 var questionArray;
@ -61,6 +63,8 @@ function init(){
    $("#wgt_edit").text(sankoreLang.edit);
    $("#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);
@ -139,6 +143,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").text(sankoreLang.reload).click(function(){
        if($("#wgt_edit").css("display") == "none")
            $("#wgt_display").trigger("click");
@ -722,6 +741,7 @@ function changeStyle(val){
            $(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back");
            $(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
            $("#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");
@ -738,6 +758,7 @@ function changeStyle(val){
            $(".b_bottom_left").addClass("bbl_pad").removeClass("without_back");
            $(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
            $("#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");
@ -753,6 +774,7 @@ function changeStyle(val){
            $(".b_bottom_right").addClass("without_back").removeClass("bbr_pad");
            $(".b_bottom_left").addClass("without_back").removeClass("bbl_pad");
            $(".b_bottom_center").addClass("without_back").removeClass("bbc_pad");
+            $("#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");