Commit 06def14a authored by unknown's avatar unknown

help for 'ordre images' widget

parent 1525be32
......@@ -4,6 +4,7 @@ html, body{
margin: 0;
padding: 0;
border-radius: 50px;
overflow: hidden;
}
body{
......@@ -240,7 +241,6 @@ body{
#wgt_name{
height: 44px;
width: 300px;
margin: 10px 10px 0 10px;
padding: 0;
float: left;
......@@ -249,9 +249,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;
......@@ -261,7 +260,6 @@ body{
}
#wgt_display{
width: 100px;
padding-left: 40px;
background-image: url(../img/slate-edit.png);
background-repeat: no-repeat;
......@@ -270,7 +268,6 @@ body{
}
#wgt_edit{
width: 100px;
padding-left: 40px;
background-image: url(../img/slate-edit.png);
background-repeat: no-repeat;
......@@ -362,4 +359,28 @@ body{
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
......@@ -48,6 +48,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>
......@@ -59,17 +60,18 @@
</td>
<td class="b_top_right">&nbsp;</td>
</tr>
<tr>
<td class="b_center_left">&nbsp;</td>
<td>
<div id="help"></div>
<div id="data">
</div>
</td>
<td class="b_center_right">&nbsp;</td>
</tr>
<tr style="height: 54px;">
<td class="b_bottom_left">&nbsp;</td>
<td class="b_bottom_center">&nbsp;</td>
......
......@@ -8,7 +8,9 @@ var sankoreLang = {
reload: "Reload",
slate: "Wood",
pad: "Pad",
none: "None"
none: "None",
help: "Help",
help_content: "This is an example of help content ..."
};
//main function
......@@ -18,6 +20,8 @@ function start(){
$("#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);
......@@ -40,6 +44,21 @@ function start(){
}
}
$("#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(){
if($("#wgt_display").hasClass("selected")){
$("#wgt_edit").trigger("click");
......@@ -255,7 +274,7 @@ function importData(data){
for(var j in data[i].imgs){
var img_block = $("<div class='img_block' style='text-align: center;'>");
var img = $("<img src='" + data[i].imgs[j].link + "' style='display: inline;'>");
img.height(data[i].imgs[j].ht).width(data[i].imgs[j].wd);
img.height(data[i].imgs[j].ht);
if((120 - data[i].imgs[j].ht) > 0)
img.css("margin",(120 - data[i].imgs[j].ht)/2 + "px 0");
var hidden_input = $("<input type='hidden'>").val(data[i].imgs[j].value);
......@@ -430,6 +449,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");
......@@ -446,6 +466,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");
......@@ -461,6 +482,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");
......@@ -500,9 +522,10 @@ function onDropTarget(obj, event) {
tmp_img.attr("height", "120");
else{
tmp_img.attr("width","120");
var h = tmp_img.height();
tmp_img.attr("height",h);
tmp_img.css("margin",(120 - tmp_img.height())/2 + "px 0");
}
exportData();
}, 6)
}
else {
......
......@@ -22,6 +22,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>
......@@ -37,6 +38,7 @@
<tr>
<td class="b_center_left">&nbsp;</td>
<td>
<div id="help"></div>
<div id="data">
</div>
......
......@@ -9,7 +9,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 ..."
};
//main function
......@@ -19,6 +21,8 @@ function start(){
$("#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);
......@@ -41,6 +45,21 @@ function start(){
}
}
$("#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(){
if($("#wgt_display").hasClass("selected")){
$("#wgt_edit").trigger("click");
......@@ -248,7 +267,7 @@ function importData(data){
for(var j in data[i].imgs){
var img_block = $("<div class='img_block' style='text-align: center;'>");
var img = $("<img src='../../" + data[i].imgs[j].link + "' style='display: inline;'>");
img.height(data[i].imgs[j].ht).width(data[i].imgs[j].wd);
img.height(data[i].imgs[j].ht);
if((120 - data[i].imgs[j].ht) > 0)
img.css("margin",(120 - data[i].imgs[j].ht)/2 + "px 0");
var hidden_input = $("<input type='hidden'>").val(data[i].imgs[j].value);
......@@ -349,7 +368,7 @@ function addContainer(){
//add new img block
function addImgBlock(dest){
var img_block = $("<div class='img_block' ondragenter='return false;' ondragleave='$(this).css(\"background-color\",\"white\"); return false;' ondragover='$(this).css(\"background-color\",\"#ccc\"); return false;' ondrop='$(this).css(\"background-color\",\"white\"); return onDropTarget(this,event);' style='text-align: center;'></div>").insertBefore(dest);
var img_block = $("<div class='img_block' ondragenter='return false;' ondragleave='$(this).css(\"background-color\",\"\"); return false;' ondragover='$(this).css(\"background-color\",\"#ccc\"); return false;' ondrop='$(this).css(\"background-color\",\"\"); return onDropTarget(this,event);' style='text-align: center;'></div>").insertBefore(dest);
var tmp_counter = dest.parent().find(".img_block").size();
$("<div class='close_img'>").appendTo(img_block);
$("<div class='clear_img'>").appendTo(img_block);
......@@ -422,6 +441,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");
......@@ -438,6 +458,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");
......@@ -453,6 +474,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");
......@@ -492,9 +514,10 @@ function onDropTarget(obj, event) {
tmp_img.attr("height", "120");
else{
tmp_img.attr("width","120");
var h = tmp_img.height();
tmp_img.attr("height",h);
tmp_img.css("margin",(120 - tmp_img.height())/2 + "px 0");
}
exportData();
}, 6)
}
else {
......
......@@ -22,6 +22,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>
......@@ -37,6 +38,7 @@
<tr>
<td class="b_center_left">&nbsp;</td>
<td>
<div id="help"></div>
<div id="data">
</div>
......
......@@ -9,7 +9,9 @@ var sankoreLang = {
reload: "Обновить",
slate: "Узор",
pad: "Планшет",
none: "Нет"
none: "Нет",
help: "Помощь",
help_content: "Пример текста помощи ..."
};
//main function
......@@ -19,6 +21,8 @@ function start(){
$("#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);
......@@ -41,6 +45,21 @@ function start(){
}
}
$("#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(){
if($("#wgt_display").hasClass("selected")){
$("#wgt_edit").trigger("click");
......@@ -248,7 +267,7 @@ function importData(data){
for(var j in data[i].imgs){
var img_block = $("<div class='img_block' style='text-align: center;'>");
var img = $("<img src='../../" + data[i].imgs[j].link + "' style='display: inline;'>");
img.height(data[i].imgs[j].ht).width(data[i].imgs[j].wd);
img.height(data[i].imgs[j].ht);
if((120 - data[i].imgs[j].ht) > 0)
img.css("margin",(120 - data[i].imgs[j].ht)/2 + "px 0");
var hidden_input = $("<input type='hidden'>").val(data[i].imgs[j].value);
......@@ -349,7 +368,7 @@ function addContainer(){
//add new img block
function addImgBlock(dest){
var img_block = $("<div class='img_block' ondragenter='return false;' ondragleave='$(this).css(\"background-color\",\"white\"); return false;' ondragover='$(this).css(\"background-color\",\"#ccc\"); return false;' ondrop='$(this).css(\"background-color\",\"white\"); return onDropTarget(this,event);' style='text-align: center;'></div>").insertBefore(dest);
var img_block = $("<div class='img_block' ondragenter='return false;' ondragleave='$(this).css(\"background-color\",\"\"); return false;' ondragover='$(this).css(\"background-color\",\"#ccc\"); return false;' ondrop='$(this).css(\"background-color\",\"\"); return onDropTarget(this,event);' style='text-align: center;'></div>").insertBefore(dest);
var tmp_counter = dest.parent().find(".img_block").size();
$("<div class='close_img'>").appendTo(img_block);
$("<div class='clear_img'>").appendTo(img_block);
......@@ -422,6 +441,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");
......@@ -438,6 +458,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");
......@@ -453,6 +474,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");
......@@ -492,6 +514,8 @@ function onDropTarget(obj, event) {
tmp_img.attr("height", "120");
else{
tmp_img.attr("width","120");
var h = tmp_img.height();
tmp_img.attr("height",h);
tmp_img.css("margin",(120 - tmp_img.height())/2 + "px 0");
}
exportData();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment