@ -1,17 +1,11 @@
var sankoreLang = {
var sankoreLang = {
display : "Afficher" ,
display : "Afficher" ,
edit : "Modifier" ,
edit : "Modifier" ,
first _desc : "Fruits" ,
first _desc : "Les nombres impairs" ,
second _desc : "Légumes" ,
second _desc : "Les nombres pairs" ,
potatoes : "Pomme de terre" ,
carrot : "Carotte" ,
onion : "Oignon" ,
apple : "Pomme" ,
pear : "Poire" ,
enter : "Saisir le nom de la catégorie ici ..." ,
enter : "Saisir le nom de la catégorie ici ..." ,
add : "Nouveau bloc" ,
add : "Nouveau bloc" ,
text : "Texte" ,
wgt _name : "Catégoriser des images" ,
wgt _name : "Catégoriser des textes" ,
reload : "Recharger" ,
reload : "Recharger" ,
slate : "Ardoise" ,
slate : "Ardoise" ,
pad : "Tablette"
pad : "Tablette"
@ -28,8 +22,8 @@ function start(){
$ ( ".style_select option[value='2']" ) . text ( sankoreLang . pad ) ;
$ ( ".style_select option[value='2']" ) . text ( sankoreLang . pad ) ;
if ( window . sankore ) {
if ( window . sankore ) {
if ( sankore . preference ( "categoriser_text " , "" ) ) {
if ( sankore . preference ( "categoriser_images " , "" ) ) {
var data = jQuery . parseJSON ( sankore . preference ( "categoriser_text " , "" ) ) ;
var data = jQuery . parseJSON ( sankore . preference ( "categoriser_images " , "" ) ) ;
importData ( data ) ;
importData ( data ) ;
} else {
} else {
showExample ( ) ;
showExample ( ) ;
@ -40,12 +34,21 @@ function start(){
if ( window . widget ) {
if ( window . widget ) {
window . widget . onleave = function ( ) {
window . widget . onleave = function ( ) {
//exportData();
exportData ( ) ;
}
}
}
}
$ ( "#wgt_reload" ) . click ( function ( ) {
$ ( "#wgt_reload" ) . click ( function ( ) {
window . location . reload ( ) ;
if ( $ ( "#wgt_display" ) . hasClass ( "selected" ) ) {
$ ( "#wgt_edit" ) . trigger ( "click" ) ;
$ ( "#wgt_display" ) . trigger ( "click" ) ;
} else {
$ ( "#wgt_display" ) . trigger ( "click" ) ;
}
} ) ;
$ ( "#wgt_reload, #wgt_display, #wgt_edit" ) . mouseover ( function ( ) {
exportData ( ) ;
} ) ;
} ) ;
$ ( ".style_select" ) . change ( function ( event ) {
$ ( ".style_select" ) . change ( function ( event ) {
@ -58,6 +61,7 @@ function start(){
$ ( this ) . addClass ( "selected" ) ;
$ ( this ) . addClass ( "selected" ) ;
$ ( "#wgt_edit" ) . removeClass ( "selected" ) ;
$ ( "#wgt_edit" ) . removeClass ( "selected" ) ;
$ ( ".style_select" ) . css ( "display" , "none" ) ;
$ ( ".style_select" ) . css ( "display" , "none" ) ;
sankore . enableDropOnWidget ( false ) ;
$ ( ".add_block" ) . remove ( ) ;
$ ( ".add_block" ) . remove ( ) ;
$ ( ".cont" ) . each ( function ( ) {
$ ( ".cont" ) . each ( function ( ) {
var container = $ ( this ) ;
var container = $ ( this ) ;
@ -68,7 +72,6 @@ function start(){
container . find ( ".close_cont" ) . remove ( ) ;
container . find ( ".close_cont" ) . remove ( ) ;
container . find ( ".imgs_cont" ) . each ( function ( ) {
container . find ( ".imgs_cont" ) . each ( function ( ) {
$ ( this ) . find ( ".del_category" ) . remove ( ) ;
$ ( this ) . find ( ".del_category" ) . remove ( ) ;
$ ( this ) . find ( ".add_img" ) . remove ( ) ;
$ ( this ) . find ( ".add_category" ) . remove ( ) ;
$ ( this ) . find ( ".add_category" ) . remove ( ) ;
$ ( this ) . removeAttr ( "ondragenter" )
$ ( this ) . removeAttr ( "ondragenter" )
. removeAttr ( "ondragleave" )
. removeAttr ( "ondragleave" )
@ -79,9 +82,6 @@ function start(){
$ ( this ) . find ( "input[name='count']" ) . val ( tmp _count ) ;
$ ( this ) . find ( "input[name='count']" ) . val ( tmp _count ) ;
$ ( this ) . find ( ".img_block" ) . each ( function ( ) {
$ ( this ) . find ( ".img_block" ) . each ( function ( ) {
$ ( this ) . find ( ".close_img" ) . remove ( ) ;
$ ( this ) . find ( ".close_img" ) . remove ( ) ;
var tmp _text = $ ( this ) . find ( ".text_cont" ) ;
tmp _text . removeAttr ( "contenteditable" )
. css ( "margin" , ( $ ( this ) . height ( ) - tmp _text . height ( ) ) / 2 + "px 0px" ) ;
tmp _array . push ( $ ( this ) ) ;
tmp _array . push ( $ ( this ) ) ;
$ ( this ) . remove ( ) ;
$ ( this ) . remove ( ) ;
} ) ;
} ) ;
@ -131,14 +131,19 @@ function start(){
$ ( this ) . addClass ( "selected" ) ;
$ ( this ) . addClass ( "selected" ) ;
$ ( "#wgt_display" ) . removeClass ( "selected" ) ;
$ ( "#wgt_display" ) . removeClass ( "selected" ) ;
$ ( ".style_select" ) . css ( "display" , "block" ) ;
$ ( ".style_select" ) . css ( "display" , "block" ) ;
sankore . enableDropOnWidget ( true ) ;
$ ( ".cont" ) . each ( function ( ) {
$ ( ".cont" ) . each ( function ( ) {
var container = $ ( this ) ;
var container = $ ( this ) ;
$ ( "<div class='close_cont'>" ) . appendTo ( container ) ;
$ ( "<div class='close_cont'>" ) . appendTo ( container ) ;
container . find ( ".imgs_cont" ) . each ( function ( ) {
container . find ( ".imgs_cont" ) . each ( function ( ) {
$ ( "<button class='del_category'></button>" ) . appendTo ( $ ( this ) ) ;
$ ( "<button class='del_category'>-</button>" ) . appendTo ( $ ( this ) ) ;
$ ( "<button class='add_category'></button>" ) . appendTo ( $ ( this ) ) ;
$ ( "<button class='add_category'>+</button>" ) . appendTo ( $ ( this ) ) ;
$ ( this ) . removeClass ( "red_cont" )
$ ( this ) . attr ( "ondragenter" , "return false;" )
. attr ( "ondragleave" , "$(this).css(\"background-color\",\"#E6F6FF\"); return false;" )
. attr ( "ondragover" , "$(this).css(\"background-color\",\"#C3E9FF\"); return false;" )
. attr ( "ondrop" , "$(this).css(\"background-color\",\"#E6F6FF\"); return onDropTarget(this,event);" )
. removeClass ( "red_cont" )
. removeClass ( "green_cont" )
. removeClass ( "green_cont" )
. addClass ( "def_cont" )
. addClass ( "def_cont" )
. droppable ( "destroy" )
. droppable ( "destroy" )
@ -146,15 +151,11 @@ function start(){
var tmp _img _cont = $ ( this ) ;
var tmp _img _cont = $ ( this ) ;
var tmp _mask = $ ( this ) . find ( "input[name='mask']" ) . val ( ) ;
var tmp _mask = $ ( this ) . find ( "input[name='mask']" ) . val ( ) ;
container . find ( ".img_block" ) . each ( function ( ) {
container . find ( ".img_block" ) . each ( function ( ) {
$ ( this ) . draggable ( "destroy" )
. find ( ".text_cont" ) . attr ( "contenteditable" , "true" )
. removeAttr ( "style" ) ;
if ( $ ( this ) . find ( "input" ) . val ( ) == tmp _mask ) {
if ( $ ( this ) . find ( "input" ) . val ( ) == tmp _mask ) {
$ ( "<div class='close_img'>" ) . appendTo ( $ ( this ) ) ;
$ ( "<div class='close_img'>" ) . appendTo ( $ ( this ) ) ;
$ ( this ) . appendTo ( tmp _img _cont ) ;
$ ( this ) . appendTo ( tmp _img _cont ) ;
}
}
} ) ;
} ) ;
$ ( "<div class='add_img'>" ) . appendTo ( $ ( this ) ) ;
} ) ;
} ) ;
container . find ( ".all_imgs" ) . remove ( ) ;
container . find ( ".all_imgs" ) . remove ( ) ;
} ) ;
} ) ;
@ -174,7 +175,7 @@ function start(){
//adding new img
//adding new img
$ ( ".add_img" ) . live ( "click" , function ( ) {
$ ( ".add_img" ) . live ( "click" , function ( ) {
addText ( $ ( this ) . parent ( ) , $ ( this ) ) ;
addImgBlock ( $ ( this ) ) ;
} ) ;
} ) ;
//deleting a block
//deleting a block
@ -202,26 +203,19 @@ function start(){
$ ( this ) . parent ( ) . remove ( ) ;
$ ( this ) . parent ( ) . remove ( ) ;
}
}
} ) ;
} ) ;
$ ( ".text_cont" ) . live ( "blur" , function ( ) {
exportData ( ) ;
} ) . live ( "keyup" , function ( e ) {
if ( e . keyCode == 13 )
exportData ( ) ;
} ) ;
}
}
//export
//export
function exportData ( ) {
function exportData ( ) {
var array _to _export = [ ] ;
var array _to _export = [ ] ;
if ( $ ( "#wgt_ edit" ) . hasClass ( "selected" ) ) {
if ( $ ( "#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 . mode = "edit" ;
cont _obj . mode = "edit" ;
cont _obj . conts = [ ] ;
cont _obj . conts = [ ] ;
$ ( this ) . find ( ".imgs_cont" ) . each ( function ( ) {
$ ( this ) . find ( ".imgs_cont" ) . each ( function ( ) {
var img _cont = new Object ( ) ;
var img _cont = new Object ( ) ;
cont _obj . style = $ ( ".style_select" ) . find ( "option:selected" ) . val ( ) ;
img _cont . mask = $ ( this ) . find ( "input[name='mask']" ) . val ( ) ;
img _cont . mask = $ ( this ) . find ( "input[name='mask']" ) . val ( ) ;
img _cont . count = $ ( this ) . find ( ".img_block" ) . size ( ) ;
img _cont . count = $ ( this ) . find ( ".img_block" ) . size ( ) ;
img _cont . text = $ ( this ) . find ( ".cat_desc" ) . val ( ) ;
img _cont . text = $ ( this ) . find ( ".cat_desc" ) . val ( ) ;
@ -229,7 +223,10 @@ 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 . text = $ ( this ) . find ( ".text_cont" ) . text ( ) ;
img _obj . link = $ ( this ) . find ( "img" ) . attr ( "src" ) . replace ( "../../" , "" ) ;
;
img _obj . ht = $ ( this ) . find ( "img" ) . height ( ) ;
img _obj . wd = $ ( this ) . find ( "img" ) . width ( ) ;
img _cont . imgs . push ( img _obj ) ;
img _cont . imgs . push ( img _obj ) ;
} ) ;
} ) ;
cont _obj . conts . push ( img _cont ) ;
cont _obj . conts . push ( img _cont ) ;
@ -239,11 +236,11 @@ function exportData(){
} else {
} else {
$ ( ".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 . mode = "display" ;
cont _obj . mode = "display" ;
cont _obj . conts = [ ] ;
cont _obj . conts = [ ] ;
$ ( this ) . find ( ".imgs_cont" ) . each ( function ( ) {
$ ( this ) . find ( ".imgs_cont" ) . each ( function ( ) {
var img _cont = new Object ( ) ;
var img _cont = new Object ( ) ;
cont _obj . style = $ ( ".style_select" ) . find ( "option:selected" ) . val ( ) ;
img _cont . mask = $ ( this ) . find ( "input[name='mask']" ) . val ( ) ;
img _cont . mask = $ ( this ) . find ( "input[name='mask']" ) . val ( ) ;
img _cont . count = $ ( this ) . find ( "input[name='count']" ) . val ( ) ;
img _cont . count = $ ( this ) . find ( "input[name='count']" ) . val ( ) ;
img _cont . text = $ ( this ) . find ( ".cat_desc" ) . val ( ) ;
img _cont . text = $ ( this ) . find ( ".cat_desc" ) . val ( ) ;
@ -251,7 +248,10 @@ 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 . text = $ ( this ) . find ( ".text_cont" ) . text ( ) ;
img _obj . link = $ ( this ) . find ( "img" ) . attr ( "src" ) . replace ( "../../" , "" ) ;
;
img _obj . ht = $ ( this ) . find ( "img" ) . height ( ) ;
img _obj . wd = $ ( this ) . find ( "img" ) . width ( ) ;
img _cont . imgs . push ( img _obj ) ;
img _cont . imgs . push ( img _obj ) ;
} ) ;
} ) ;
cont _obj . conts . push ( img _cont ) ;
cont _obj . conts . push ( img _cont ) ;
@ -260,7 +260,10 @@ 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 . text = $ ( this ) . find ( ".text_cont" ) . text ( ) ;
img . link = $ ( this ) . find ( "img" ) . attr ( "src" ) . replace ( "../../" , "" ) ;
;
img . ht = $ ( this ) . find ( "img" ) . height ( ) ;
img . wd = $ ( this ) . find ( "img" ) . width ( ) ;
cont _obj . all _imgs . push ( img ) ;
cont _obj . all _imgs . push ( img ) ;
} ) ;
} ) ;
array _to _export . push ( cont _obj ) ;
array _to _export . push ( cont _obj ) ;
@ -274,7 +277,7 @@ function exportData(){
array _to _export . push ( cont _obj ) ;
array _to _export . push ( cont _obj ) ;
}
}
sankore . setPreference ( "categoriser_text " , JSON . stringify ( array _to _export ) ) ;
sankore . setPreference ( "categoriser_images " , JSON . stringify ( array _to _export ) ) ;
}
}
//import
//import
@ -285,15 +288,14 @@ function importData(data){
if ( data [ i ] . tmp ) {
if ( data [ i ] . tmp ) {
changeStyle ( data [ i ] . style ) ;
changeStyle ( data [ i ] . style ) ;
$ ( ".style_select" ) . val ( data [ i ] . style ) ;
$ ( ".style_select" ) . val ( data [ i ] . style ) ;
}
} else {
else {
if ( i == 0 ) {
if ( i == 0 ) {
changeStyle ( data [ i ] . style ) ;
changeStyle ( data [ i ] . style ) ;
$ ( ".style_select" ) . val ( data [ i ] . style ) ;
$ ( ".style_select" ) . val ( data [ i ] . style ) ;
}
}
if ( data [ i ] . mode == "edit" ) {
if ( data [ i ] . mode == "edit" ) {
var tmp _array = [ ] ;
var tmp _array = [ ] ;
var container = $ ( "<div class='cont'>" ) . appendTo ( "#data" ) ;
var container = $ ( "<div class='cont'>" ) ;
var sub _container = $ ( "<div class='sub_cont'>" ) . appendTo ( container ) ;
var sub _container = $ ( "<div class='sub_cont'>" ) . appendTo ( container ) ;
$ ( "<div class='number_cont'>" + ( ++ tmp ) + "</div>" ) . appendTo ( sub _container ) ;
$ ( "<div class='number_cont'>" + ( ++ tmp ) + "</div>" ) . appendTo ( sub _container ) ;
@ -306,8 +308,14 @@ function importData(data){
$ ( "<input type='text' class='cat_desc' value='" + data [ i ] . conts [ j ] . text + "' disabled/>" ) . appendTo ( tmp _div ) ;
$ ( "<input type='text' class='cat_desc' value='" + data [ i ] . conts [ j ] . text + "' disabled/>" ) . appendTo ( tmp _div ) ;
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 ) ;
$ ( "<div class='text_cont'>" + data [ i ] . conts [ j ] . imgs [ k ] . text + "</div>" ) . 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 . attr ( "height" , "120" ) ;
else {
img . attr ( "width" , "120" ) ;
img . css ( "margin" , ( 120 - data [ i ] . conts [ j ] . imgs [ k ] . ht ) / 2 + "px 0" ) ;
}
tmp _array . push ( block _img ) ;
tmp _array . push ( block _img ) ;
}
}
@ -320,7 +328,7 @@ function importData(data){
checkCorrectness ( tmp _ui ) ;
checkCorrectness ( tmp _ui ) ;
}
}
}
}
} ) ;
} ) ;
}
}
var all _imgs = $ ( "<div class='all_imgs'>" ) . appendTo ( container ) ;
var all _imgs = $ ( "<div class='all_imgs'>" ) . appendTo ( container ) ;
@ -333,8 +341,6 @@ function importData(data){
appendTo : '#data'
appendTo : '#data'
} ) ;
} ) ;
tmp _array [ j ] . appendTo ( all _imgs ) ;
tmp _array [ j ] . appendTo ( all _imgs ) ;
var tmp _text = tmp _array [ j ] . find ( ".text_cont" ) ;
tmp _text . css ( "margin" , ( tmp _array [ j ] . height ( ) - tmp _text . height ( ) ) / 2 + "px 0px" ) ;
}
}
all _imgs . sortable ( ) ;
all _imgs . sortable ( ) ;
@ -351,8 +357,10 @@ function importData(data){
}
}
}
}
} ) ;
} ) ;
container . appendTo ( "#data" ) ;
} else {
} else {
container = $ ( "<div class='cont'>" ) . appendTo ( "#data" ) ;
container = $ ( "<div class='cont'>" ) ;
sub _container = $ ( "<div class='sub_cont'>" ) . appendTo ( container ) ;
sub _container = $ ( "<div class='sub_cont'>" ) . appendTo ( container ) ;
$ ( "<div class='number_cont'>" + ( ++ tmp ) + "</div>" ) . appendTo ( sub _container ) ;
$ ( "<div class='number_cont'>" + ( ++ tmp ) + "</div>" ) . appendTo ( sub _container ) ;
@ -365,8 +373,14 @@ function importData(data){
$ ( "<input type='text' class='cat_desc' value='" + data [ i ] . conts [ j ] . text + "' disabled/>" ) . appendTo ( tmp _div ) ;
$ ( "<input type='text' class='cat_desc' value='" + data [ i ] . conts [ j ] . text + "' disabled/>" ) . appendTo ( tmp _div ) ;
for ( k in data [ i ] . conts [ j ] . imgs ) {
for ( k in data [ i ] . conts [ j ] . 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 ] . conts [ j ] . imgs [ k ] . value + "'/>" ) . appendTo ( block _img ) ;
$ ( "<input type='hidden' value='" + data [ i ] . conts [ j ] . imgs [ k ] . value + "'/>" ) . appendTo ( block _img ) ;
$ ( "<div class='text_cont'>" + data [ i ] . conts [ j ] . imgs [ k ] . text + "</div>" ) . 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 . attr ( "height" , "120" ) ;
else {
img . attr ( "width" , "120" ) ;
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 ) ;
}
}
@ -378,8 +392,6 @@ function importData(data){
appendTo : '#data'
appendTo : '#data'
} ) ;
} ) ;
tmp _img _array [ k ] . appendTo ( imgs _container ) ;
tmp _img _array [ k ] . appendTo ( imgs _container ) ;
tmp _text = tmp _img _array [ k ] . find ( ".text_cont" ) ;
tmp _text . css ( "margin" , ( tmp _img _array [ k ] . height ( ) - tmp _text . height ( ) ) / 2 + "px 0px" ) ;
}
}
imgs _container . droppable ( {
imgs _container . droppable ( {
@ -391,7 +403,7 @@ function importData(data){
checkCorrectness ( tmp _ui ) ;
checkCorrectness ( tmp _ui ) ;
}
}
}
}
} ) ;
} ) ;
checkCorrectness ( imgs _container ) ;
checkCorrectness ( imgs _container ) ;
}
}
@ -399,8 +411,8 @@ function importData(data){
var all _imgs _arr = [ ] ;
var all _imgs _arr = [ ] ;
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 ) ;
$ ( "<div class='text_cont'> " + data [ i ] . all _imgs [ j ] . text + "</div >") . appendTo ( block _img ) ;
$ ( "<img src=\"../../" + data [ i ] . all _imgs [ j ] . link + "\" style=\"display: inline;\" height=\" " + data [ i ] . all _imgs [ j ] . ht + "\"/ >") . appendTo ( block _img ) ;
all _imgs _arr . push ( block _img ) ;
all _imgs _arr . push ( block _img ) ;
}
}
@ -412,8 +424,6 @@ function importData(data){
appendTo : '#data'
appendTo : '#data'
} ) ;
} ) ;
all _imgs _arr [ k ] . appendTo ( all _imgs ) ;
all _imgs _arr [ k ] . appendTo ( all _imgs ) ;
tmp _text = all _imgs _arr [ k ] . find ( ".text_cont" ) ;
tmp _text . css ( "margin" , ( all _imgs _arr [ k ] . height ( ) - tmp _text . height ( ) ) / 2 + "px 0px" ) ;
}
}
all _imgs . sortable ( ) ;
all _imgs . sortable ( ) ;
@ -430,6 +440,7 @@ function importData(data){
}
}
}
}
} ) ;
} ) ;
container . appendTo ( "#data" ) ;
}
}
}
}
}
}
@ -459,23 +470,23 @@ function showExample(){
var tmp _div _two = $ ( "<div style='width: 100%; overflow: hidden;'>" ) . appendTo ( imgs _container _two ) ;
var tmp _div _two = $ ( "<div style='width: 100%; overflow: hidden;'>" ) . appendTo ( imgs _container _two ) ;
$ ( "<input type='text' class='cat_desc' value='" + sankoreLang . second _desc + "' disabled/>" ) . appendTo ( tmp _div _two ) ;
$ ( "<input type='text' class='cat_desc' value='" + sankoreLang . second _desc + "' disabled/>" ) . appendTo ( tmp _div _two ) ;
var text 1 = $ ( "<div class='img_block' style='text-align: center;'></div>" ) ;
var img 1 = $ ( "<div class='img_block' style='text-align: center;'></div>" ) ;
$ ( "<input type='hidden' value='2'/>" ) . appendTo ( text 1) ;
$ ( "<input type='hidden' value='2'/>" ) . appendTo ( img 1) ;
$ ( "<div class='text_cont'>" + sankoreLang . potatoes + "</div >" ) . appendTo ( text 1) ;
$ ( "<img src=\"../../objects/0.gif\" style=\"display: inline;\" height=\"120\"/ >" ) . appendTo ( img 1) ;
var text 2 = $ ( "<div class='img_block' style='text-align: center;'></div>" ) ;
var img 2 = $ ( "<div class='img_block' style='text-align: center;'></div>" ) ;
$ ( "<input type='hidden' value='1'/>" ) . appendTo ( text 2) ;
$ ( "<input type='hidden' value='1'/>" ) . appendTo ( img 2) ;
$ ( "<div class='text_cont'>" + sankoreLang . apple + "</div >" ) . appendTo ( text 2) ;
$ ( "<img src=\"../../objects/1.gif\" style=\"display: inline;\" height=\"120\"/ >" ) . appendTo ( img 2) ;
var text 3 = $ ( "<div class='img_block' style='text-align: center;'></div>" ) ;
var img 3 = $ ( "<div class='img_block' style='text-align: center;'></div>" ) ;
$ ( "<input type='hidden' value='2'/>" ) . appendTo ( text 3) ;
$ ( "<input type='hidden' value='2'/>" ) . appendTo ( img 3) ;
$ ( "<div class='text_cont'>" + sankoreLang . carrot + "</div >" ) . appendTo ( text 3) ;
$ ( "<img src=\"../../objects/2.gif\" style=\"display: inline;\" height=\"120\"/ >" ) . appendTo ( img 3) ;
var text 4 = $ ( "<div class='img_block' style='text-align: center;'></div>" ) ;
var img 4 = $ ( "<div class='img_block' style='text-align: center;'></div>" ) ;
$ ( "<input type='hidden' value='1'/>" ) . appendTo ( text 4) ;
$ ( "<input type='hidden' value='1'/>" ) . appendTo ( img 4) ;
$ ( "<div class='text_cont'>" + sankoreLang . pear + "</div >" ) . appendTo ( text 4) ;
$ ( "<img src=\"../../objects/3.gif\" style=\"display: inline;\" height=\"120\"/ >" ) . appendTo ( img 4) ;
var text 5 = $ ( "<div class='img_block' style='text-align: center;'></div>" ) ;
var img 5 = $ ( "<div class='img_block' style='text-align: center;'></div>" ) ;
$ ( "<input type='hidden' value='2'/>" ) . appendTo ( text 5) ;
$ ( "<input type='hidden' value='2'/>" ) . appendTo ( img 5) ;
$ ( "<div class='text_cont'>" + sankoreLang . onion + "</div >" ) . appendTo ( text 5) ;
$ ( "<img src=\"../../objects/4.gif\" style=\"display: inline;\" height=\"120\"/ >" ) . appendTo ( img 5) ;
tmp _array . push ( text1 , text2 , text3 , text4 , text 5) ;
tmp _array . push ( img1 , img2 , img3 , img4 , img 5) ;
tmp _array = shuffle ( tmp _array ) ;
tmp _array = shuffle ( tmp _array ) ;
for ( var i = 0 ; i < tmp _array . length ; i ++ ) {
for ( var i = 0 ; i < tmp _array . length ; i ++ ) {
tmp _array [ i ] . draggable ( {
tmp _array [ i ] . draggable ( {
@ -483,7 +494,6 @@ function showExample(){
zIndex : 100 ,
zIndex : 100 ,
appendTo : '#data'
appendTo : '#data'
} ) ;
} ) ;
tmp _array [ i ] . find ( ".text_cont" ) . css ( "margin" , "21px 0px" ) ;
tmp _array [ i ] . appendTo ( all _imgs ) ;
tmp _array [ i ] . appendTo ( all _imgs ) ;
}
}
all _imgs . sortable ( ) ;
all _imgs . sortable ( ) ;
@ -524,15 +534,6 @@ function showExample(){
} ) ;
} ) ;
}
}
//add text block
function addText ( dest , source ) {
var text _block = $ ( "<div class='img_block' style='text-align: center;'>" ) . insertBefore ( source ) ;
$ ( "<div class='close_img'>" ) . appendTo ( text _block ) ;
$ ( "<input type='hidden' value='" + dest . find ( "input[name='mask']" ) . val ( ) + "'/>" ) . appendTo ( text _block ) ;
$ ( "<div class='text_cont' contenteditable='true'>" + sankoreLang . text + "</div>" ) . appendTo ( text _block ) ;
}
//function that allows to add new category
//function that allows to add new category
function addCategory ( obj ) {
function addCategory ( obj ) {
var imgs _container = $ ( "<div class='imgs_cont def_cont'>" ) . insertAfter ( obj ) ;
var imgs _container = $ ( "<div class='imgs_cont def_cont'>" ) . insertAfter ( obj ) ;
@ -540,9 +541,12 @@ function addCategory(obj){
$ ( "<input type='hidden' name='count' value=''/>" ) . appendTo ( imgs _container ) ;
$ ( "<input type='hidden' name='count' value=''/>" ) . appendTo ( imgs _container ) ;
var tmp _div = $ ( "<div style='width: 100%; overflow: hidden;'>" ) . appendTo ( imgs _container ) ;
var tmp _div = $ ( "<div style='width: 100%; overflow: hidden;'>" ) . appendTo ( imgs _container ) ;
$ ( "<input type='text' class='cat_desc' value='" + sankoreLang . enter + "'>" ) . appendTo ( tmp _div ) ;
$ ( "<input type='text' class='cat_desc' value='" + sankoreLang . enter + "'>" ) . appendTo ( tmp _div ) ;
$ ( "<button class='del_category'></button>" ) . appendTo ( imgs _container ) ;
$ ( "<button class='del_category'>-</button>" ) . appendTo ( imgs _container ) ;
$ ( "<button class='add_category'></button>" ) . appendTo ( imgs _container ) ;
$ ( "<button class='add_category'>+</button>" ) . appendTo ( imgs _container ) ;
$ ( "<div class='add_img'>" ) . appendTo ( imgs _container ) ;
imgs _container . attr ( "ondragenter" , "return false;" )
. attr ( "ondragleave" , "$(this).css(\"background-color\",\"\"); return false;" )
. attr ( "ondragover" , "$(this).css(\"background-color\",\"\"); return false;" )
. attr ( "ondrop" , "$(this).css(\"background-color\",\"\"); return onDropTarget(this,event);" ) ;
}
}
//add new container
//add new container
@ -558,9 +562,12 @@ function addContainer(){
$ ( "<input type='hidden' name='count' value=''/>" ) . appendTo ( imgs _container ) ;
$ ( "<input type='hidden' name='count' value=''/>" ) . appendTo ( imgs _container ) ;
var tmp _div = $ ( "<div style='width: 100%; overflow: hidden;'>" ) . appendTo ( imgs _container ) ;
var tmp _div = $ ( "<div style='width: 100%; overflow: hidden;'>" ) . appendTo ( imgs _container ) ;
$ ( "<input type='text' class='cat_desc' value='" + sankoreLang . enter + "'/>" ) . appendTo ( tmp _div ) ;
$ ( "<input type='text' class='cat_desc' value='" + sankoreLang . enter + "'/>" ) . appendTo ( tmp _div ) ;
$ ( "<button class='del_category'></button>" ) . appendTo ( imgs _container ) ;
$ ( "<button class='del_category'>-</button>" ) . appendTo ( imgs _container ) ;
$ ( "<button class='add_category'></button>" ) . appendTo ( imgs _container ) ;
$ ( "<button class='add_category'>+</button>" ) . appendTo ( imgs _container ) ;
$ ( "<div class='add_img'>" ) . appendTo ( imgs _container ) ;
imgs _container . attr ( "ondragenter" , "return false;" )
. attr ( "ondragleave" , "$(this).css(\"background-color\",\"\"); return false;" )
. attr ( "ondragover" , "$(this).css(\"background-color\",\"\"); return false;" )
. attr ( "ondrop" , "$(this).css(\"background-color\",\"\"); return onDropTarget(this,event);" ) ;
container . insertBefore ( $ ( ".add_block" ) ) ;
container . insertBefore ( $ ( ".add_block" ) ) ;
}
}
@ -598,11 +605,6 @@ function stringToXML(text){
return doc ;
return doc ;
}
}
//return id
function returnId ( ) {
var tmp = Math . random ( ) . toString ( ) ;
return tmp . substr ( 2 ) ;
}
//changing the style
//changing the style
function changeStyle ( val ) {
function changeStyle ( val ) {
@ -637,6 +639,12 @@ function changeStyle(val){
}
}
}
}
//return id
function returnId ( ) {
var tmp = Math . random ( ) . toString ( ) ;
return tmp . substr ( 2 ) ;
}
//a func for checking when smth will drop
//a func for checking when smth will drop
function checkOnDrop ( dest , source ) {
function checkOnDrop ( dest , source ) {
dest . append ( source ) ;
dest . append ( source ) ;
@ -692,3 +700,60 @@ function checkCorrectness(source){
. addClass ( "red_cont" ) ;
. addClass ( "red_cont" ) ;
}
}
}
}
function onDropTarget ( obj , event ) {
if ( event . dataTransfer ) {
var format = "text/plain" ;
var textData = event . dataTransfer . getData ( format ) ;
if ( ! textData ) {
alert ( ":(" ) ;
}
textData = stringToXML ( textData ) ;
if ( textData . getElementsByTagName ( "ready" ) [ 0 ] . firstChild . textContent == "true" ) {
var tmp = textData . getElementsByTagName ( "path" ) [ 0 ] . firstChild . textContent ;
var img _block = $ ( "<div class='img_block' style='text-align: center;'>" ) ;
$ ( "<div class='close_img'>" ) . appendTo ( img _block ) ;
$ ( "<input type='hidden' value='" + $ ( obj ) . find ( "input[name='mask']" ) . val ( ) + "'/>" ) . appendTo ( img _block ) ;
var tmp _img = $ ( "<img style='display: inline;'/>" ) . attr ( "src" , "../../" + tmp ) . appendTo ( img _block ) ;
img _block . draggable ( {
helper : 'clone' ,
zIndex : 100 ,
appendTo : '#data'
} ) ;
$ ( obj ) . append ( img _block ) ;
if ( tmp _img . height ( ) == 0 ) {
var tmp _id = setInterval ( function ( ) {
if ( tmp _img . height ( ) != 0 ) {
if ( tmp _img . height ( ) >= tmp _img . width ( ) )
tmp _img . attr ( "height" , "120" ) ;
else {
tmp _img . attr ( "width" , "120" ) ;
tmp _img . css ( "margin" , ( 120 - tmp _img . height ( ) ) / 2 + "px 0" ) ;
}
clearInterval ( tmp _id ) ;
}
} , 10 ) ;
} else {
if ( tmp _img . height ( ) >= tmp _img . width ( ) )
tmp _img . attr ( "height" , "120" ) ;
else {
tmp _img . attr ( "width" , "120" ) ;
tmp _img . css ( "margin" , ( 120 - tmp _img . height ( ) ) / 2 + "px 0" ) ;
}
}
}
exportData ( ) ;
}
else {
alert ( "Your browser does not support the dataTransfer object." ) ;
}
if ( event . stopPropagation ) {
event . stopPropagation ( ) ;
}
else {
event . cancelBubble = true ;
}
return false ;
}