Commit e67b39f7 authored by unknown's avatar unknown

help for 'Cat images' widget

parent 16293724
...@@ -43,10 +43,6 @@ function start(){ ...@@ -43,10 +43,6 @@ function start(){
} }
} }
$(".imgs_cont").click(function(){
alert($(this).html())
});
$("#wgt_help").click(function(){ $("#wgt_help").click(function(){
var tmp = $(this); var tmp = $(this);
if($(this).hasClass("open")){ if($(this).hasClass("open")){
...@@ -363,6 +359,7 @@ function importData(data){ ...@@ -363,6 +359,7 @@ function importData(data){
for(var j in data[i].imgs){ for(var j in data[i].imgs){
var img_block = $("<div class='img_block img_gray' style='text-align: center;'>"); var img_block = $("<div class='img_block img_gray' style='text-align: center;'>");
var img = $("<img src='" + data[i].imgs[j].link + "' style='display: inline;'>"); var img = $("<img src='" + data[i].imgs[j].link + "' style='display: inline;'>");
img.height(data[i].imgs[j].ht); img.height(data[i].imgs[j].ht);
if((120 - data[i].imgs[j].ht) > 0) if((120 - data[i].imgs[j].ht) > 0)
...@@ -776,9 +773,10 @@ function onDropTarget(obj, event) { ...@@ -776,9 +773,10 @@ function onDropTarget(obj, event) {
tmp_img.attr("height", "120"); tmp_img.attr("height", "120");
else{ else{
tmp_img.attr("width","120"); 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"); tmp_img.css("margin",(120 - tmp_img.height())/2 + "px 0");
} }
exportData();
}, 6) }, 6)
} }
......
...@@ -766,6 +766,8 @@ function onDropTarget(obj, event) { ...@@ -766,6 +766,8 @@ function onDropTarget(obj, event) {
tmp_img.attr("height", "120"); tmp_img.attr("height", "120");
else{ else{
tmp_img.attr("width","120"); 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"); tmp_img.css("margin",(120 - tmp_img.height())/2 + "px 0");
} }
exportData(); exportData();
......
...@@ -767,6 +767,8 @@ function onDropTarget(obj, event) { ...@@ -767,6 +767,8 @@ function onDropTarget(obj, event) {
tmp_img.attr("height", "120"); tmp_img.attr("height", "120");
else{ else{
tmp_img.attr("width","120"); 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"); tmp_img.css("margin",(120 - tmp_img.height())/2 + "px 0");
} }
exportData(); exportData();
......
...@@ -836,6 +836,8 @@ function onDropTarget(obj, event) { ...@@ -836,6 +836,8 @@ function onDropTarget(obj, event) {
tmp_img.attr("height", "120"); tmp_img.attr("height", "120");
else{ else{
tmp_img.attr("width","120"); 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"); tmp_img.css("margin",(120 - tmp_img.height())/2 + "px 0");
} }
}, 6) }, 6)
......
...@@ -821,6 +821,8 @@ function onDropTarget(obj, event) { ...@@ -821,6 +821,8 @@ function onDropTarget(obj, event) {
tmp_img.attr("height", "120"); tmp_img.attr("height", "120");
else{ else{
tmp_img.attr("width","120"); 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"); tmp_img.css("margin",(120 - tmp_img.height())/2 + "px 0");
} }
}, 6) }, 6)
......
...@@ -821,6 +821,8 @@ function onDropTarget(obj, event) { ...@@ -821,6 +821,8 @@ function onDropTarget(obj, event) {
tmp_img.attr("height", "120"); tmp_img.attr("height", "120");
else{ else{
tmp_img.attr("width","120"); 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"); tmp_img.css("margin",(120 - tmp_img.height())/2 + "px 0");
} }
}, 6) }, 6)
......
...@@ -4,6 +4,7 @@ html, body{ ...@@ -4,6 +4,7 @@ html, body{
margin: 0; margin: 0;
padding: 0; padding: 0;
border-radius: 50px; border-radius: 50px;
overflow: hidden;
} }
body{ body{
...@@ -175,7 +176,7 @@ body{ ...@@ -175,7 +176,7 @@ body{
} }
.dropBack{ .dropBack{
} }
.def_cont{ .def_cont{
...@@ -260,7 +261,6 @@ body{ ...@@ -260,7 +261,6 @@ body{
#wgt_name{ #wgt_name{
height: 44px; height: 44px;
width: 300px;
margin: 10px 10px 0 10px; margin: 10px 10px 0 10px;
padding: 0; padding: 0;
float: left; float: left;
...@@ -269,9 +269,8 @@ body{ ...@@ -269,9 +269,8 @@ body{
color: #8c5730; color: #8c5730;
} }
#wgt_reload, #wgt_edit, #wgt_display{ #wgt_reload, #wgt_edit, #wgt_display, #wgt_help{
cursor: pointer; cursor: pointer;
width: 80px;
height: 44px; height: 44px;
margin: 10px 10px 0 0; margin: 10px 10px 0 0;
float: right; float: right;
...@@ -281,7 +280,6 @@ body{ ...@@ -281,7 +280,6 @@ body{
} }
#wgt_display{ #wgt_display{
width: 100px;
padding-left: 40px; padding-left: 40px;
background-image: url(../img/slate-edit.png); background-image: url(../img/slate-edit.png);
background-repeat: no-repeat; background-repeat: no-repeat;
...@@ -290,7 +288,6 @@ body{ ...@@ -290,7 +288,6 @@ body{
} }
#wgt_edit{ #wgt_edit{
width: 100px;
padding-left: 40px; padding-left: 40px;
background-image: url(../img/slate-edit.png); background-image: url(../img/slate-edit.png);
background-repeat: no-repeat; background-repeat: no-repeat;
...@@ -382,4 +379,28 @@ body{ ...@@ -382,4 +379,28 @@ body{
background-color: #333 !important; background-color: #333 !important;
color: white !important; color: white !important;
background-image: url(../img/ar_down_white.png) !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 @@ ...@@ -48,6 +48,7 @@
<td class="b_top_left">&nbsp;</td> <td class="b_top_left">&nbsp;</td>
<td class="b_top_center"> <td class="b_top_center">
<div id="wgt_name"></div> <div id="wgt_name"></div>
<div id="wgt_help"></div>
<div id="wgt_reload"></div> <div id="wgt_reload"></div>
<div id="wgt_display" class="selected"></div> <div id="wgt_display" class="selected"></div>
<div id="wgt_edit"></div> <div id="wgt_edit"></div>
...@@ -63,6 +64,7 @@ ...@@ -63,6 +64,7 @@
<tr> <tr>
<td class="b_center_left">&nbsp;</td> <td class="b_center_left">&nbsp;</td>
<td> <td>
<div id="help"></div>
<div id="data"> <div id="data">
</div> </div>
......
...@@ -9,7 +9,9 @@ var sankoreLang = { ...@@ -9,7 +9,9 @@ var sankoreLang = {
reload: "Reload", reload: "Reload",
slate: "Wood", slate: "Wood",
pad: "Pad", pad: "Pad",
none: "None" none: "None",
help: "Help",
help_content: "This is an example of help content ..."
}; };
//main function //main function
...@@ -19,6 +21,8 @@ function start(){ ...@@ -19,6 +21,8 @@ function start(){
$("#wgt_edit").text(sankoreLang.edit); $("#wgt_edit").text(sankoreLang.edit);
$("#wgt_name").text(sankoreLang.wgt_name); $("#wgt_name").text(sankoreLang.wgt_name);
$("#wgt_reload").text(sankoreLang.reload); $("#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);
...@@ -40,6 +44,21 @@ function start(){ ...@@ -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(){ $("#wgt_reload").click(function(){
if($("#wgt_display").hasClass("selected")){ if($("#wgt_display").hasClass("selected")){
$("#wgt_edit").trigger("click"); $("#wgt_edit").trigger("click");
...@@ -212,7 +231,7 @@ function start(){ ...@@ -212,7 +231,7 @@ function start(){
//export //export
function exportData(){ function exportData(){
var array_to_export = []; var array_to_export = [];
if($("#edit").hasClass("selected")){ if($("#wgt_edit").hasClass("selected")){
$(".cont").each(function(){ $(".cont").each(function(){
var cont_obj = new Object(); var cont_obj = new Object();
cont_obj.style = $(".style_select").find("option:selected").val(); cont_obj.style = $(".style_select").find("option:selected").val();
...@@ -310,13 +329,10 @@ function importData(data){ ...@@ -310,13 +329,10 @@ function importData(data){
for(var k in data[i].conts[j].imgs){ for(var k in data[i].conts[j].imgs){
var block_img = $("<div class='img_block' style='text-align: center;'></div>"); var block_img = $("<div class='img_block' style='text-align: center;'></div>");
$("<input type='hidden' value='" + data[i].conts[j].imgs[k].value + "'/>").appendTo(block_img); $("<input type='hidden' value='" + data[i].conts[j].imgs[k].value + "'/>").appendTo(block_img);
var img = $("<img src=\"" + data[i].conts[j].imgs[k].link + "\" style=\"display: inline;\"/>").appendTo(block_img); var img = $("<img src=\"" + data[i].conts[j].imgs[k].link + "\" style=\"display: inline;\"/>").appendTo(block_img);
if(data[i].conts[j].imgs[k].ht >= data[i].conts[j].imgs[k].wd) img.height(data[i].conts[j].imgs[k].ht);
img.attr("height", "120"); if((120 - data[i].conts[j].imgs[k].ht) > 0)
else{
img.attr("width","120");
img.css("margin",(120 - data[i].conts[j].imgs[k].ht)/2 + "px 0"); img.css("margin",(120 - data[i].conts[j].imgs[k].ht)/2 + "px 0");
}
tmp_array.push(block_img); tmp_array.push(block_img);
} }
...@@ -376,12 +392,9 @@ function importData(data){ ...@@ -376,12 +392,9 @@ function importData(data){
block_img = $("<div class='img_block' style='text-align: center;'></div>"); block_img = $("<div class='img_block' style='text-align: center;'></div>");
$("<input type='hidden' value='" + data[i].conts[j].imgs[k].value + "'/>").appendTo(block_img); $("<input type='hidden' value='" + data[i].conts[j].imgs[k].value + "'/>").appendTo(block_img);
img = $("<img src=\"" + data[i].conts[j].imgs[k].link + "\" style=\"display: inline;\"/>").appendTo(block_img); img = $("<img src=\"" + data[i].conts[j].imgs[k].link + "\" style=\"display: inline;\"/>").appendTo(block_img);
if(data[i].conts[j].imgs[k].ht >= data[i].conts[j].imgs[k].wd) img.height(data[i].conts[j].imgs[k].ht);
img.attr("height", "120"); if((120 - data[i].conts[j].imgs[k].ht) > 0)
else{
img.attr("width","120");
img.css("margin",(120 - data[i].conts[j].imgs[k].ht)/2 + "px 0"); img.css("margin",(120 - data[i].conts[j].imgs[k].ht)/2 + "px 0");
}
tmp_img_array.push(block_img); tmp_img_array.push(block_img);
} }
...@@ -413,7 +426,10 @@ function importData(data){ ...@@ -413,7 +426,10 @@ function importData(data){
for(j in data[i].all_imgs){ for(j in data[i].all_imgs){
block_img = $("<div class='img_block' style='text-align: center;'></div>"); block_img = $("<div class='img_block' style='text-align: center;'></div>");
$("<input type='hidden' value='" + data[i].all_imgs[j].value + "'/>").appendTo(block_img); $("<input type='hidden' value='" + data[i].all_imgs[j].value + "'/>").appendTo(block_img);
$("<img src=\"" + data[i].all_imgs[j].link + "\" style=\"display: inline;\" height=\"" + data[i].all_imgs[j].ht + "\"/>").appendTo(block_img); img = $("<img src=\"" + data[i].all_imgs[j].link + "\" style=\"display: inline;\"/>").appendTo(block_img);
img.height(data[i].all_imgs[j].ht);
if((120 - data[i].all_imgs[j].ht) > 0)
img.css("margin",(120 - data[i].all_imgs[j].ht)/2 + "px 0");
all_imgs_arr.push(block_img); all_imgs_arr.push(block_img);
} }
...@@ -607,6 +623,7 @@ function changeStyle(val){ ...@@ -607,6 +623,7 @@ function changeStyle(val){
$(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back"); $(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back");
$(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back"); $(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
$("#wgt_reload").removeClass("pad_color").removeClass("pad_reload"); $("#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_edit").removeClass("pad_color").removeClass("pad_edit");
$("#wgt_display").removeClass("pad_color").removeClass("pad_edit"); $("#wgt_display").removeClass("pad_color").removeClass("pad_edit");
$("#wgt_name").removeClass("pad_color"); $("#wgt_name").removeClass("pad_color");
...@@ -623,6 +640,7 @@ function changeStyle(val){ ...@@ -623,6 +640,7 @@ function changeStyle(val){
$(".b_bottom_left").addClass("bbl_pad").removeClass("without_back"); $(".b_bottom_left").addClass("bbl_pad").removeClass("without_back");
$(".b_bottom_center").addClass("bbc_pad").removeClass("without_back"); $(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
$("#wgt_reload").addClass("pad_color").addClass("pad_reload"); $("#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_edit").addClass("pad_color").addClass("pad_edit");
$("#wgt_display").addClass("pad_color").addClass("pad_edit"); $("#wgt_display").addClass("pad_color").addClass("pad_edit");
$("#wgt_name").addClass("pad_color"); $("#wgt_name").addClass("pad_color");
...@@ -638,6 +656,7 @@ function changeStyle(val){ ...@@ -638,6 +656,7 @@ function changeStyle(val){
$(".b_bottom_right").addClass("without_back").removeClass("bbr_pad"); $(".b_bottom_right").addClass("without_back").removeClass("bbr_pad");
$(".b_bottom_left").addClass("without_back").removeClass("bbl_pad"); $(".b_bottom_left").addClass("without_back").removeClass("bbl_pad");
$(".b_bottom_center").addClass("without_back").removeClass("bbc_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_reload").addClass("pad_color").addClass("pad_reload");
$("#wgt_edit").addClass("pad_color").addClass("pad_edit"); $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
$("#wgt_display").addClass("pad_color").addClass("pad_edit"); $("#wgt_display").addClass("pad_color").addClass("pad_edit");
...@@ -750,6 +769,8 @@ function onDropTarget(obj, event) { ...@@ -750,6 +769,8 @@ function onDropTarget(obj, event) {
tmp_img.attr("height", "120"); tmp_img.attr("height", "120");
else{ else{
tmp_img.attr("width","120"); 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"); tmp_img.css("margin",(120 - tmp_img.height())/2 + "px 0");
} }
clearInterval(tmp_id); clearInterval(tmp_id);
...@@ -760,6 +781,8 @@ function onDropTarget(obj, event) { ...@@ -760,6 +781,8 @@ function onDropTarget(obj, event) {
tmp_img.attr("height", "120"); tmp_img.attr("height", "120");
else{ else{
tmp_img.attr("width","120"); 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"); tmp_img.css("margin",(120 - tmp_img.height())/2 + "px 0");
} }
} }
......
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
<td class="b_top_left">&nbsp;</td> <td class="b_top_left">&nbsp;</td>
<td class="b_top_center"> <td class="b_top_center">
<div id="wgt_name"></div> <div id="wgt_name"></div>
<div id="wgt_help"></div>
<div id="wgt_reload"></div> <div id="wgt_reload"></div>
<div id="wgt_display" class="selected"></div> <div id="wgt_display" class="selected"></div>
<div id="wgt_edit"></div> <div id="wgt_edit"></div>
...@@ -33,17 +34,18 @@ ...@@ -33,17 +34,18 @@
</td> </td>
<td class="b_top_right">&nbsp;</td> <td class="b_top_right">&nbsp;</td>
</tr> </tr>
<tr> <tr>
<td class="b_center_left">&nbsp;</td> <td class="b_center_left">&nbsp;</td>
<td> <td>
<div id="help"></div>
<div id="data"> <div id="data">
</div> </div>
</td> </td>
<td class="b_center_right">&nbsp;</td> <td class="b_center_right">&nbsp;</td>
</tr> </tr>
<tr style="height: 54px;"> <tr style="height: 54px;">
<td class="b_bottom_left">&nbsp;</td> <td class="b_bottom_left">&nbsp;</td>
<td class="b_bottom_center">&nbsp;</td> <td class="b_bottom_center">&nbsp;</td>
......
...@@ -9,7 +9,9 @@ var sankoreLang = { ...@@ -9,7 +9,9 @@ var sankoreLang = {
reload: "Recharger", reload: "Recharger",
slate: "ardoise", slate: "ardoise",
pad: "tablette", pad: "tablette",
none: "aucun" none: "aucun",
help: "aide",
help_content: "Ceci est un exemple de contenu de l'aide ..."
}; };
//main function //main function
...@@ -19,6 +21,8 @@ function start(){ ...@@ -19,6 +21,8 @@ function start(){
$("#wgt_edit").text(sankoreLang.edit); $("#wgt_edit").text(sankoreLang.edit);
$("#wgt_name").text(sankoreLang.wgt_name); $("#wgt_name").text(sankoreLang.wgt_name);
$("#wgt_reload").text(sankoreLang.reload); $("#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);
...@@ -40,6 +44,21 @@ function start(){ ...@@ -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(){ $("#wgt_reload").click(function(){
if($("#wgt_display").hasClass("selected")){ if($("#wgt_display").hasClass("selected")){
$("#wgt_edit").trigger("click"); $("#wgt_edit").trigger("click");
...@@ -210,7 +229,7 @@ function start(){ ...@@ -210,7 +229,7 @@ function start(){
//export //export
function exportData(){ function exportData(){
var array_to_export = []; var array_to_export = [];
if($("#edit").hasClass("selected")){ if($("#wgt_edit").hasClass("selected")){
$(".cont").each(function(){ $(".cont").each(function(){
var cont_obj = new Object(); var cont_obj = new Object();
cont_obj.style = $(".style_select").find("option:selected").val(); cont_obj.style = $(".style_select").find("option:selected").val();
...@@ -225,8 +244,7 @@ function exportData(){ ...@@ -225,8 +244,7 @@ function exportData(){
$(this).find(".img_block").each(function(){ $(this).find(".img_block").each(function(){
var img_obj = new Object(); var img_obj = new Object();
img_obj.value = $(this).find("input").val(); img_obj.value = $(this).find("input").val();
img_obj.link = $(this).find("img").attr("src").replace("../../",""); img_obj.link = $(this).find("img").attr("src").replace("../../","");
;
img_obj.ht = $(this).find("img").height(); img_obj.ht = $(this).find("img").height();
img_obj.wd = $(this).find("img").width(); img_obj.wd = $(this).find("img").width();
img_cont.imgs.push(img_obj); img_cont.imgs.push(img_obj);
...@@ -250,8 +268,7 @@ function exportData(){ ...@@ -250,8 +268,7 @@ function exportData(){
$(this).find(".img_block").each(function(){ $(this).find(".img_block").each(function(){
var img_obj = new Object(); var img_obj = new Object();
img_obj.value = $(this).find("input").val(); img_obj.value = $(this).find("input").val();
img_obj.link = $(this).find("img").attr("src").replace("../../",""); img_obj.link = $(this).find("img").attr("src").replace("../../","");
;
img_obj.ht = $(this).find("img").height(); img_obj.ht = $(this).find("img").height();
img_obj.wd = $(this).find("img").width(); img_obj.wd = $(this).find("img").width();
img_cont.imgs.push(img_obj); img_cont.imgs.push(img_obj);
...@@ -262,8 +279,7 @@ function exportData(){ ...@@ -262,8 +279,7 @@ function exportData(){
$(this).find(".all_imgs .img_block").each(function(){ $(this).find(".all_imgs .img_block").each(function(){
var img = new Object(); var img = new Object();
img.value = $(this).find("input").val(); img.value = $(this).find("input").val();
img.link = $(this).find("img").attr("src").replace("../../",""); img.link = $(this).find("img").attr("src").replace("../../","");
;
img.ht = $(this).find("img").height(); img.ht = $(this).find("img").height();
img.wd = $(this).find("img").width(); img.wd = $(this).find("img").width();
cont_obj.all_imgs.push(img); cont_obj.all_imgs.push(img);
...@@ -312,12 +328,9 @@ function importData(data){ ...@@ -312,12 +328,9 @@ function importData(data){
var block_img = $("<div class='img_block' style='text-align: center;'></div>"); var block_img = $("<div class='img_block' style='text-align: center;'></div>");
$("<input type='hidden' value='" + data[i].conts[j].imgs[k].value + "'/>").appendTo(block_img); $("<input type='hidden' value='" + data[i].conts[j].imgs[k].value + "'/>").appendTo(block_img);
var img = $("<img src=\"../../" + data[i].conts[j].imgs[k].link + "\" style=\"display: inline;\"/>").appendTo(block_img); var img = $("<img src=\"../../" + data[i].conts[j].imgs[k].link + "\" style=\"display: inline;\"/>").appendTo(block_img);
if(data[i].conts[j].imgs[k].ht >= data[i].conts[j].imgs[k].wd) img.height(data[i].conts[j].imgs[k].ht);
img.attr("height", "120"); if((120 - data[i].conts[j].imgs[k].ht) > 0)
else{
img.attr("width","120");
img.css("margin",(120 - data[i].conts[j].imgs[k].ht)/2 + "px 0"); img.css("margin",(120 - data[i].conts[j].imgs[k].ht)/2 + "px 0");
}
tmp_array.push(block_img); tmp_array.push(block_img);
} }
...@@ -377,12 +390,9 @@ function importData(data){ ...@@ -377,12 +390,9 @@ function importData(data){
block_img = $("<div class='img_block' style='text-align: center;'></div>"); block_img = $("<div class='img_block' style='text-align: center;'></div>");
$("<input type='hidden' value='" + data[i].conts[j].imgs[k].value + "'/>").appendTo(block_img); $("<input type='hidden' value='" + data[i].conts[j].imgs[k].value + "'/>").appendTo(block_img);
img = $("<img src=\"../../" + data[i].conts[j].imgs[k].link + "\" style=\"display: inline;\"/>").appendTo(block_img); img = $("<img src=\"../../" + data[i].conts[j].imgs[k].link + "\" style=\"display: inline;\"/>").appendTo(block_img);
if(data[i].conts[j].imgs[k].ht >= data[i].conts[j].imgs[k].wd) img.height(data[i].conts[j].imgs[k].ht);
img.attr("height", "120"); if((120 - data[i].conts[j].imgs[k].ht) > 0)
else{
img.attr("width","120");
img.css("margin",(120 - data[i].conts[j].imgs[k].ht)/2 + "px 0"); img.css("margin",(120 - data[i].conts[j].imgs[k].ht)/2 + "px 0");
}
tmp_img_array.push(block_img); tmp_img_array.push(block_img);
} }
...@@ -414,7 +424,10 @@ function importData(data){ ...@@ -414,7 +424,10 @@ function importData(data){
for(j in data[i].all_imgs){ for(j in data[i].all_imgs){
block_img = $("<div class='img_block' style='text-align: center;'></div>"); block_img = $("<div class='img_block' style='text-align: center;'></div>");
$("<input type='hidden' value='" + data[i].all_imgs[j].value + "'/>").appendTo(block_img); $("<input type='hidden' value='" + data[i].all_imgs[j].value + "'/>").appendTo(block_img);
$("<img src=\"../../" + data[i].all_imgs[j].link + "\" style=\"display: inline;\" height=\"" + data[i].all_imgs[j].ht + "\"/>").appendTo(block_img); img = $("<img src=\"../../" + data[i].all_imgs[j].link + "\" style=\"display: inline;\"/>").appendTo(block_img);
img.height(data[i].all_imgs[j].ht);
if((120 - data[i].all_imgs[j].ht) > 0)
img.css("margin",(120 - data[i].all_imgs[j].ht)/2 + "px 0");
all_imgs_arr.push(block_img); all_imgs_arr.push(block_img);
} }
...@@ -621,6 +634,7 @@ function changeStyle(val){ ...@@ -621,6 +634,7 @@ function changeStyle(val){
$(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back"); $(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back");
$(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back"); $(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
$("#wgt_reload").removeClass("pad_color").removeClass("pad_reload"); $("#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_edit").removeClass("pad_color").removeClass("pad_edit");
$("#wgt_display").removeClass("pad_color").removeClass("pad_edit"); $("#wgt_display").removeClass("pad_color").removeClass("pad_edit");
$("#wgt_name").removeClass("pad_color"); $("#wgt_name").removeClass("pad_color");
...@@ -637,6 +651,7 @@ function changeStyle(val){ ...@@ -637,6 +651,7 @@ function changeStyle(val){
$(".b_bottom_left").addClass("bbl_pad").removeClass("without_back"); $(".b_bottom_left").addClass("bbl_pad").removeClass("without_back");
$(".b_bottom_center").addClass("bbc_pad").removeClass("without_back"); $(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
$("#wgt_reload").addClass("pad_color").addClass("pad_reload"); $("#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_edit").addClass("pad_color").addClass("pad_edit");
$("#wgt_display").addClass("pad_color").addClass("pad_edit"); $("#wgt_display").addClass("pad_color").addClass("pad_edit");
$("#wgt_name").addClass("pad_color"); $("#wgt_name").addClass("pad_color");
...@@ -652,6 +667,7 @@ function changeStyle(val){ ...@@ -652,6 +667,7 @@ function changeStyle(val){
$(".b_bottom_right").addClass("without_back").removeClass("bbr_pad"); $(".b_bottom_right").addClass("without_back").removeClass("bbr_pad");
$(".b_bottom_left").addClass("without_back").removeClass("bbl_pad"); $(".b_bottom_left").addClass("without_back").removeClass("bbl_pad");
$(".b_bottom_center").addClass("without_back").removeClass("bbc_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_reload").addClass("pad_color").addClass("pad_reload");
$("#wgt_edit").addClass("pad_color").addClass("pad_edit"); $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
$("#wgt_display").addClass("pad_color").addClass("pad_edit"); $("#wgt_display").addClass("pad_color").addClass("pad_edit");
...@@ -752,6 +768,8 @@ function onDropTarget(obj, event) { ...@@ -752,6 +768,8 @@ function onDropTarget(obj, event) {
tmp_img.attr("height", "120"); tmp_img.attr("height", "120");
else{ else{
tmp_img.attr("width","120"); 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"); tmp_img.css("margin",(120 - tmp_img.height())/2 + "px 0");
} }
clearInterval(tmp_id); clearInterval(tmp_id);
...@@ -762,6 +780,8 @@ function onDropTarget(obj, event) { ...@@ -762,6 +780,8 @@ function onDropTarget(obj, event) {
tmp_img.attr("height", "120"); tmp_img.attr("height", "120");
else{ else{
tmp_img.attr("width","120"); 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"); tmp_img.css("margin",(120 - tmp_img.height())/2 + "px 0");
} }
} }
......
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
<td class="b_top_left">&nbsp;</td> <td class="b_top_left">&nbsp;</td>
<td class="b_top_center"> <td class="b_top_center">
<div id="wgt_name"></div> <div id="wgt_name"></div>
<div id="wgt_help"></div>
<div id="wgt_reload"></div> <div id="wgt_reload"></div>
<div id="wgt_display" class="selected"></div> <div id="wgt_display" class="selected"></div>
<div id="wgt_edit"></div> <div id="wgt_edit"></div>
...@@ -33,17 +34,18 @@ ...@@ -33,17 +34,18 @@
</td> </td>
<td class="b_top_right">&nbsp;</td> <td class="b_top_right">&nbsp;</td>
</tr> </tr>
<tr> <tr>
<td class="b_center_left">&nbsp;</td> <td class="b_center_left">&nbsp;</td>
<td> <td>
<div id="help"></div>
<div id="data"> <div id="data">
</div> </div>
</td> </td>
<td class="b_center_right">&nbsp;</td> <td class="b_center_right">&nbsp;</td>
</tr> </tr>
<tr style="height: 54px;"> <tr style="height: 54px;">
<td class="b_bottom_left">&nbsp;</td> <td class="b_bottom_left">&nbsp;</td>
<td class="b_bottom_center">&nbsp;</td> <td class="b_bottom_center">&nbsp;</td>
......
...@@ -9,7 +9,9 @@ var sankoreLang = { ...@@ -9,7 +9,9 @@ var sankoreLang = {
reload: "Обновить", reload: "Обновить",
slate: "Узор", slate: "Узор",
pad: "Планшет", pad: "Планшет",
none: "Нет" none: "Нет",
help: "Помощь",
help_content: "Пример текста помощи ..."
}; };
//main function //main function
...@@ -19,6 +21,8 @@ function start(){ ...@@ -19,6 +21,8 @@ function start(){
$("#wgt_edit").text(sankoreLang.edit); $("#wgt_edit").text(sankoreLang.edit);
$("#wgt_name").text(sankoreLang.wgt_name); $("#wgt_name").text(sankoreLang.wgt_name);
$("#wgt_reload").text(sankoreLang.reload); $("#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);
...@@ -40,6 +44,21 @@ function start(){ ...@@ -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(){ $("#wgt_reload").click(function(){
if($("#wgt_display").hasClass("selected")){ if($("#wgt_display").hasClass("selected")){
$("#wgt_edit").trigger("click"); $("#wgt_edit").trigger("click");
...@@ -210,7 +229,7 @@ function start(){ ...@@ -210,7 +229,7 @@ function start(){
//export //export
function exportData(){ function exportData(){
var array_to_export = []; var array_to_export = [];
if($("#edit").hasClass("selected")){ if($("#wgt_edit").hasClass("selected")){
$(".cont").each(function(){ $(".cont").each(function(){
var cont_obj = new Object(); var cont_obj = new Object();
cont_obj.style = $(".style_select").find("option:selected").val(); cont_obj.style = $(".style_select").find("option:selected").val();
...@@ -312,12 +331,9 @@ function importData(data){ ...@@ -312,12 +331,9 @@ function importData(data){
var block_img = $("<div class='img_block' style='text-align: center;'></div>"); var block_img = $("<div class='img_block' style='text-align: center;'></div>");
$("<input type='hidden' value='" + data[i].conts[j].imgs[k].value + "'/>").appendTo(block_img); $("<input type='hidden' value='" + data[i].conts[j].imgs[k].value + "'/>").appendTo(block_img);
var img = $("<img src=\"../../" + data[i].conts[j].imgs[k].link + "\" style=\"display: inline;\"/>").appendTo(block_img); var img = $("<img src=\"../../" + data[i].conts[j].imgs[k].link + "\" style=\"display: inline;\"/>").appendTo(block_img);
if(data[i].conts[j].imgs[k].ht >= data[i].conts[j].imgs[k].wd) img.height(data[i].conts[j].imgs[k].ht);
img.attr("height", "120"); if((120 - data[i].conts[j].imgs[k].ht) > 0)
else{
img.attr("width","120");
img.css("margin",(120 - data[i].conts[j].imgs[k].ht)/2 + "px 0"); img.css("margin",(120 - data[i].conts[j].imgs[k].ht)/2 + "px 0");
}
tmp_array.push(block_img); tmp_array.push(block_img);
} }
...@@ -377,12 +393,9 @@ function importData(data){ ...@@ -377,12 +393,9 @@ function importData(data){
block_img = $("<div class='img_block' style='text-align: center;'></div>"); block_img = $("<div class='img_block' style='text-align: center;'></div>");
$("<input type='hidden' value='" + data[i].conts[j].imgs[k].value + "'/>").appendTo(block_img); $("<input type='hidden' value='" + data[i].conts[j].imgs[k].value + "'/>").appendTo(block_img);
img = $("<img src=\"../../" + data[i].conts[j].imgs[k].link + "\" style=\"display: inline;\"/>").appendTo(block_img); img = $("<img src=\"../../" + data[i].conts[j].imgs[k].link + "\" style=\"display: inline;\"/>").appendTo(block_img);
if(data[i].conts[j].imgs[k].ht >= data[i].conts[j].imgs[k].wd) img.height(data[i].conts[j].imgs[k].ht);
img.attr("height", "120"); if((120 - data[i].conts[j].imgs[k].ht) > 0)
else{
img.attr("width","120");
img.css("margin",(120 - data[i].conts[j].imgs[k].ht)/2 + "px 0"); img.css("margin",(120 - data[i].conts[j].imgs[k].ht)/2 + "px 0");
}
tmp_img_array.push(block_img); tmp_img_array.push(block_img);
} }
...@@ -414,7 +427,10 @@ function importData(data){ ...@@ -414,7 +427,10 @@ function importData(data){
for(j in data[i].all_imgs){ for(j in data[i].all_imgs){
block_img = $("<div class='img_block' style='text-align: center;'></div>"); block_img = $("<div class='img_block' style='text-align: center;'></div>");
$("<input type='hidden' value='" + data[i].all_imgs[j].value + "'/>").appendTo(block_img); $("<input type='hidden' value='" + data[i].all_imgs[j].value + "'/>").appendTo(block_img);
$("<img src=\"../../" + data[i].all_imgs[j].link + "\" style=\"display: inline;\" height=\"" + data[i].all_imgs[j].ht + "\"/>").appendTo(block_img); img = $("<img src=\"../../" + data[i].all_imgs[j].link + "\" style=\"display: inline;\"/>").appendTo(block_img);
img.height(data[i].all_imgs[j].ht);
if((120 - data[i].all_imgs[j].ht) > 0)
img.css("margin",(120 - data[i].all_imgs[j].ht)/2 + "px 0");
all_imgs_arr.push(block_img); all_imgs_arr.push(block_img);
} }
...@@ -621,6 +637,7 @@ function changeStyle(val){ ...@@ -621,6 +637,7 @@ function changeStyle(val){
$(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back"); $(".b_bottom_left").removeClass("bbl_pad").removeClass("without_back");
$(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back"); $(".b_bottom_center").removeClass("bbc_pad").removeClass("without_back");
$("#wgt_reload").removeClass("pad_color").removeClass("pad_reload"); $("#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_edit").removeClass("pad_color").removeClass("pad_edit");
$("#wgt_display").removeClass("pad_color").removeClass("pad_edit"); $("#wgt_display").removeClass("pad_color").removeClass("pad_edit");
$("#wgt_name").removeClass("pad_color"); $("#wgt_name").removeClass("pad_color");
...@@ -637,6 +654,7 @@ function changeStyle(val){ ...@@ -637,6 +654,7 @@ function changeStyle(val){
$(".b_bottom_left").addClass("bbl_pad").removeClass("without_back"); $(".b_bottom_left").addClass("bbl_pad").removeClass("without_back");
$(".b_bottom_center").addClass("bbc_pad").removeClass("without_back"); $(".b_bottom_center").addClass("bbc_pad").removeClass("without_back");
$("#wgt_reload").addClass("pad_color").addClass("pad_reload"); $("#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_edit").addClass("pad_color").addClass("pad_edit");
$("#wgt_display").addClass("pad_color").addClass("pad_edit"); $("#wgt_display").addClass("pad_color").addClass("pad_edit");
$("#wgt_name").addClass("pad_color"); $("#wgt_name").addClass("pad_color");
...@@ -652,6 +670,7 @@ function changeStyle(val){ ...@@ -652,6 +670,7 @@ function changeStyle(val){
$(".b_bottom_right").addClass("without_back").removeClass("bbr_pad"); $(".b_bottom_right").addClass("without_back").removeClass("bbr_pad");
$(".b_bottom_left").addClass("without_back").removeClass("bbl_pad"); $(".b_bottom_left").addClass("without_back").removeClass("bbl_pad");
$(".b_bottom_center").addClass("without_back").removeClass("bbc_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_reload").addClass("pad_color").addClass("pad_reload");
$("#wgt_edit").addClass("pad_color").addClass("pad_edit"); $("#wgt_edit").addClass("pad_color").addClass("pad_edit");
$("#wgt_display").addClass("pad_color").addClass("pad_edit"); $("#wgt_display").addClass("pad_color").addClass("pad_edit");
...@@ -752,6 +771,8 @@ function onDropTarget(obj, event) { ...@@ -752,6 +771,8 @@ function onDropTarget(obj, event) {
tmp_img.attr("height", "120"); tmp_img.attr("height", "120");
else{ else{
tmp_img.attr("width","120"); 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"); tmp_img.css("margin",(120 - tmp_img.height())/2 + "px 0");
} }
clearInterval(tmp_id); clearInterval(tmp_id);
...@@ -762,6 +783,8 @@ function onDropTarget(obj, event) { ...@@ -762,6 +783,8 @@ function onDropTarget(obj, event) {
tmp_img.attr("height", "120"); tmp_img.attr("height", "120");
else{ else{
tmp_img.attr("width","120"); 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"); tmp_img.css("margin",(120 - tmp_img.height())/2 + "px 0");
} }
} }
......
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