diff --git a/resources/library/interactivities/Syllabes.wgt/img/slate-help-white.png b/resources/library/interactivities/Syllabes.wgt/img/slate-help-white.png
new file mode 100644
index 0000000000000000000000000000000000000000..7b5ebfd8d29a9283767b2a42ff801178434f729d
Binary files /dev/null and b/resources/library/interactivities/Syllabes.wgt/img/slate-help-white.png differ
diff --git a/resources/library/interactivities/Syllabes.wgt/img/slate-help.png b/resources/library/interactivities/Syllabes.wgt/img/slate-help.png
new file mode 100644
index 0000000000000000000000000000000000000000..069052d0061dacbeaa3bd022259a5db0e37a9f16
Binary files /dev/null and b/resources/library/interactivities/Syllabes.wgt/img/slate-help.png differ
diff --git a/resources/library/interactivities/Syllabes.wgt/index.html b/resources/library/interactivities/Syllabes.wgt/index.html
index deccbde917fce6a9181b166823acb38f62decd2a..f0e87e3b1a9d976f3a28a53309f14a9c1407fdbc 100644
--- a/resources/library/interactivities/Syllabes.wgt/index.html
+++ b/resources/library/interactivities/Syllabes.wgt/index.html
@@ -56,27 +56,30 @@
<td class="b_top_left"> </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>
<select class="style_select">
<option value="1"></option>
<option value="2"></option>
+ <option value="3"></option>
</select>
</td>
<td class="b_top_right"> </td>
</tr>
-
+
<tr>
<td class="b_center_left"> </td>
<td>
+ <div id="help"></div>
<div id="ub-widget">
-
+
</div>
</td>
<td class="b_center_right"> </td>
</tr>
-
+
<tr style="height: 54px;">
<td class="b_bottom_left"> </td>
<td class="b_bottom_center"> </td>
diff --git a/resources/library/interactivities/Syllabes.wgt/locales/fr/index.html b/resources/library/interactivities/Syllabes.wgt/locales/fr/index.html
index 1a6b9dad7d1387c92cd529ab72e9ffefaad78306..99f21db7821ca4c01aa54c3bfce39d443e47763f 100644
--- a/resources/library/interactivities/Syllabes.wgt/locales/fr/index.html
+++ b/resources/library/interactivities/Syllabes.wgt/locales/fr/index.html
@@ -33,27 +33,30 @@
<td class="b_top_left"> </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>
<select class="style_select">
<option value="1"></option>
<option value="2"></option>
+ <option value="3"></option>
</select>
</td>
<td class="b_top_right"> </td>
</tr>
-
+
<tr>
<td class="b_center_left"> </td>
<td>
+ <div id="help"></div>
<div id="ub-widget">
-
+
</div>
</td>
<td class="b_center_right"> </td>
</tr>
-
+
<tr style="height: 54px;">
<td class="b_bottom_left"> </td>
<td class="b_bottom_center"> </td>
diff --git a/resources/library/interactivities/Syllabes.wgt/locales/fr/scripts/wcontainer.js b/resources/library/interactivities/Syllabes.wgt/locales/fr/scripts/wcontainer.js
index fc0a762f426d2099967bd8893cbae3b85033d689..43ec3fc3d685bee7260dbb0c53e9478bd17322f9 100644
--- a/resources/library/interactivities/Syllabes.wgt/locales/fr/scripts/wcontainer.js
+++ b/resources/library/interactivities/Syllabes.wgt/locales/fr/scripts/wcontainer.js
@@ -1,11 +1,14 @@
var sankoreLang = {
view: "Afficher",
edit: "Modifier",
- example: "so*phi*sti*qué",
+ example: "so*phis*ti*qué",
wgt_name: "Syllabe",
reload: "Recharger",
slate: "ardoise",
- pad: "tablette"
+ pad: "tablette",
+ none: "aucun",
+ help: "aide",
+ help_content: "Ceci est un exemple de contenu de l'aide ..."
};
// if use the "view/edit" button or rely on the api instead
diff --git a/resources/library/interactivities/Syllabes.wgt/locales/ru/index.html b/resources/library/interactivities/Syllabes.wgt/locales/ru/index.html
index 1a6b9dad7d1387c92cd529ab72e9ffefaad78306..99f21db7821ca4c01aa54c3bfce39d443e47763f 100644
--- a/resources/library/interactivities/Syllabes.wgt/locales/ru/index.html
+++ b/resources/library/interactivities/Syllabes.wgt/locales/ru/index.html
@@ -33,27 +33,30 @@
<td class="b_top_left"> </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>
<select class="style_select">
<option value="1"></option>
<option value="2"></option>
+ <option value="3"></option>
</select>
</td>
<td class="b_top_right"> </td>
</tr>
-
+
<tr>
<td class="b_center_left"> </td>
<td>
+ <div id="help"></div>
<div id="ub-widget">
-
+
</div>
</td>
<td class="b_center_right"> </td>
</tr>
-
+
<tr style="height: 54px;">
<td class="b_bottom_left"> </td>
<td class="b_bottom_center"> </td>
diff --git a/resources/library/interactivities/Syllabes.wgt/locales/ru/scripts/wcontainer.js b/resources/library/interactivities/Syllabes.wgt/locales/ru/scripts/wcontainer.js
index fecdffe58a627b17194e76d4953c5fde4b7c77eb..cf158ff3994fcd58c65ba9e8c6ad67838f454f2c 100644
--- a/resources/library/interactivities/Syllabes.wgt/locales/ru/scripts/wcontainer.js
+++ b/resources/library/interactivities/Syllabes.wgt/locales/ru/scripts/wcontainer.js
@@ -5,7 +5,10 @@ var sankoreLang = {
wgt_name: "Разделить слово",
reload: "Обновить",
slate: "Узор",
- pad: "Планшет"
+ pad: "Планшет",
+ none: "Нет",
+ help: "Помощь",
+ help_content: "Пример текста помощи ..."
};
// if use the "view/edit" button or rely on the api instead
diff --git a/resources/library/interactivities/Syllabes.wgt/scripts/spl-word.js b/resources/library/interactivities/Syllabes.wgt/scripts/spl-word.js
index 35120a3d87b55b5d62a6ab5be7ec8921126bf859..e46e7f0d05025022e74d2391db1acb09262ee3aa 100644
--- a/resources/library/interactivities/Syllabes.wgt/scripts/spl-word.js
+++ b/resources/library/interactivities/Syllabes.wgt/scripts/spl-word.js
@@ -54,10 +54,13 @@ $(document).ready(function()
changeStyle(sankore.preference("spl_word_style",""));
$(".style_select").val(sankore.preference("spl_word_style",""));
} else
- changeStyle(1)
+ changeStyle("3")
$("#wgt_display").text(sankoreLang.view);
$("#wgt_edit").text(sankoreLang.edit);
+ $("#wgt_help").text(sankoreLang.help);
+ $("#help").html(sankoreLang.help_content);
+
$("#wgt_display, #wgt_edit").click(function(event){
if(this.id == "wgt_display"){
if(!$(this).hasClass("selected")){
@@ -79,8 +82,24 @@ $(document).ready(function()
}
}
});
+
$("#wgt_name").text(sankoreLang.wgt_name);
+ $("#wgt_help").click(function(){
+ var tmp = $(this);
+ if($(this).hasClass("open")){
+ $("#help").slideUp("100", function(){
+ tmp.removeClass("open");
+ $("#ub-widget").show();
+ });
+ } else {
+ $("#ub-widget").hide();
+ $("#help").slideDown("100", function(){
+ tmp.addClass("open");
+ });
+ }
+ });
+
$("#wgt_reload").text(sankoreLang.reload).click(function(){
if($("#wgt_display").hasClass("selected")){
$("#wgt_edit").trigger("click");
@@ -92,6 +111,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());
@@ -181,34 +201,58 @@ $(document).ready(function()
//changing the style
function changeStyle(val){
- if(val == 1){
- $(".b_top_left").removeClass("btl_pad");
- $(".b_top_center").removeClass("btc_pad");
- $(".b_top_right").removeClass("btr_pad");
- $(".b_center_left").removeClass("bcl_pad");
- $(".b_center_right").removeClass("bcr_pad");
- $(".b_bottom_right").removeClass("bbr_pad");
- $(".b_bottom_left").removeClass("bbl_pad");
- $(".b_bottom_center").removeClass("bbc_pad");
- $("#wgt_reload").removeClass("pad_color").removeClass("pad_reload");
- $("#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");
- } else {
- $(".b_top_left").addClass("btl_pad");
- $(".b_top_center").addClass("btc_pad");
- $(".b_top_right").addClass("btr_pad");
- $(".b_center_left").addClass("bcl_pad");
- $(".b_center_right").addClass("bcr_pad");
- $(".b_bottom_right").addClass("bbr_pad");
- $(".b_bottom_left").addClass("bbl_pad");
- $(".b_bottom_center").addClass("bbc_pad");
- $("#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("pad_select");
+ switch(val){
+ case "1":
+ $(".b_top_left").removeClass("btl_pad").removeClass("without_back");
+ $(".b_top_center").removeClass("btc_pad").removeClass("without_back");
+ $(".b_top_right").removeClass("btr_pad").removeClass("without_back");
+ $(".b_center_left").removeClass("bcl_pad").removeClass("without_back");
+ $(".b_center_right").removeClass("bcr_pad").removeClass("without_back");
+ $(".b_bottom_right").removeClass("bbr_pad").removeClass("without_back");
+ $(".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");
+ $(".style_select").removeClass("pad_select").removeClass("none_select").val(val);
+ $("body, html").removeClass("without_radius");
+ break;
+ case "2":
+ $(".b_top_left").addClass("btl_pad").removeClass("without_back");
+ $(".b_top_center").addClass("btc_pad").removeClass("without_back");
+ $(".b_top_right").addClass("btr_pad").removeClass("without_back");
+ $(".b_center_left").addClass("bcl_pad").removeClass("without_back");
+ $(".b_center_right").addClass("bcr_pad").removeClass("without_back");
+ $(".b_bottom_right").addClass("bbr_pad").removeClass("without_back");
+ $(".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");
+ $(".style_select").addClass("pad_select").removeClass("none_select").val(val);
+ $("body, html").removeClass("without_radius");
+ break;
+ case "3":
+ $(".b_top_left").addClass("without_back").removeClass("btl_pad");
+ $(".b_top_center").addClass("without_back").removeClass("btc_pad");
+ $(".b_top_right").addClass("without_back").removeClass("btr_pad");
+ $(".b_center_left").addClass("without_back").removeClass("bcl_pad");
+ $(".b_center_right").addClass("without_back").removeClass("bcr_pad");
+ $(".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");
+ $("#wgt_name").addClass("pad_color");
+ $(".style_select").addClass("none_select").val(val);
+ $("body, html").addClass("without_radius");
+ break;
}
}
diff --git a/resources/library/interactivities/Syllabes.wgt/scripts/wcontainer.js b/resources/library/interactivities/Syllabes.wgt/scripts/wcontainer.js
index 0d40d0d29e82c8ecb9aab2197829a10d4b2e1353..daaf20b3b3570e29ae0501a5c79fc3201bb4a878 100644
--- a/resources/library/interactivities/Syllabes.wgt/scripts/wcontainer.js
+++ b/resources/library/interactivities/Syllabes.wgt/scripts/wcontainer.js
@@ -5,7 +5,10 @@ var sankoreLang = {
wgt_name: "Split a word",
reload: "Reload",
slate: "Wood",
- pad: "Pad"
+ pad: "Pad",
+ none: "None",
+ help: "Help",
+ help_content: "This is an example of help content ..."
};
// if use the "view/edit" button or rely on the api instead
diff --git a/resources/library/interactivities/Syllabes.wgt/styles/master.css b/resources/library/interactivities/Syllabes.wgt/styles/master.css
index 7e39b7f27bdfea246f90db15784d9b6ebe42bb65..9775eba8e11449d3ea778696a1ea556550265493 100644
--- a/resources/library/interactivities/Syllabes.wgt/styles/master.css
+++ b/resources/library/interactivities/Syllabes.wgt/styles/master.css
@@ -4,24 +4,26 @@ html, body{
margin: 0;
padding: 0;
border-radius: 50px;
+ overflow: hidden;
}
body{
background-image: url(../img/bg.png);
}
-
h1{
font-size:18px;
margin-bottom:20px;
margin-top:0px;
}
+
#ub-widget{
width: 100%;
height: 100%;
min-height: 180px;
overflow: auto;
color: white;
+ word-wrap: break-word;
}
input{
diff --git a/resources/library/interactivities/Syllabes.wgt/styles/spl-word.css b/resources/library/interactivities/Syllabes.wgt/styles/spl-word.css
index f280bee56fbe31ab379926d5fc0b060304b18251..3bcf504f8538b8511f9981686e7213fe24be11f5 100644
--- a/resources/library/interactivities/Syllabes.wgt/styles/spl-word.css
+++ b/resources/library/interactivities/Syllabes.wgt/styles/spl-word.css
@@ -108,7 +108,6 @@
#wgt_name{
height: 44px;
- width: 200px;
margin: 10px 10px 0 10px;
padding: 0;
float: left;
@@ -117,9 +116,8 @@
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;
@@ -129,7 +127,6 @@
}
#wgt_display{
- width: 100px;
padding-left: 40px;
background-image: url(../img/slate-edit.png);
background-repeat: no-repeat;
@@ -138,7 +135,6 @@
}
#wgt_edit{
- width: 100px;
padding-left: 40px;
background-image: url(../img/slate-edit.png);
background-repeat: no-repeat;
@@ -217,3 +213,42 @@
color: white !important;
background-image: url(../img/ar_down_white.png) !important;
}
+
+
+.without_radius{
+ border-radius: 0 !important;
+}
+
+.without_back{
+ background: none !important;
+}
+
+.none_select{
+ background-color: #333 !important;
+ color: white !important;
+ background-image: url(../img/ar_down_white.png) !important;
+}
+
+.pad_help{
+ background-image: url(../img/slate-help-white.png) !important;
+}
+
+#wgt_help{
+ padding-left: 32px;
+ background-image: url(../img/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{
+
+}
\ No newline at end of file