| 1 |
|
| 2 |
// The active pagelayer element |
| 3 |
var pagelayer_active = {}; |
| 4 |
|
| 5 |
// List of pagelayer icons |
| 6 |
var pagelayer_icons = {}; |
| 7 |
|
| 8 |
// The inline editor |
| 9 |
var pagelayer_editor = {}; |
| 10 |
|
| 11 |
// The active pagelayer element |
| 12 |
var pagelayer_active_tab = {}; |
| 13 |
|
| 14 |
// Loads the Data |
| 15 |
function pagelayer_data(jEle, clean){ |
| 16 |
|
| 17 |
var ret = new Object(); |
| 18 |
|
| 19 |
// Get the data |
| 20 |
ret.tag = pagelayer_tag(jEle); |
| 21 |
ret.id = jEle.attr('pagelayer-id'); |
| 22 |
ret.$ = jEle; |
| 23 |
|
| 24 |
// Parse the attributes |
| 25 |
ret.atts = new Object(); |
| 26 |
ret.tmp = new Object(); |
| 27 |
|
| 28 |
jQuery.each(jEle[0].attributes, function(index, att){ |
| 29 |
if(att.name.match(/pagelayer\-a\-/i)){ |
| 30 |
ret.atts[att.name.substr(12)] = att.value; |
| 31 |
} |
| 32 |
|
| 33 |
if(att.name.match(/pagelayer\-tmp\-/i)){ |
| 34 |
ret.tmp[att.name.substr(14)] = att.value; |
| 35 |
} |
| 36 |
}); |
| 37 |
|
| 38 |
//console.log(ret.atts); |
| 39 |
//console.log(ret.tmp); |
| 40 |
|
| 41 |
clean = clean || false; |
| 42 |
|
| 43 |
// Remove values which have 'req'. NOTE : 'show' ones will be allowed |
| 44 |
if(clean){ |
| 45 |
|
| 46 |
var tag = ret.tag; |
| 47 |
|
| 48 |
// Anything to set ? |
| 49 |
ret.set = {}; |
| 50 |
|
| 51 |
// All props |
| 52 |
var all_props = pagelayer_shortcodes[tag]; |
| 53 |
|
| 54 |
// Loop through all props |
| 55 |
for(var i in pagelayer_tabs){ |
| 56 |
|
| 57 |
var tab = pagelayer_tabs[i]; |
| 58 |
|
| 59 |
for(var section in all_props[tab]){ |
| 60 |
|
| 61 |
var props = section in pagelayer_shortcodes[tag] ? pagelayer_shortcodes[tag][section] : pagelayer_styles[section]; |
| 62 |
|
| 63 |
// In case of widgets its possible ! |
| 64 |
if(pagelayer_empty(props)){ |
| 65 |
continue; |
| 66 |
} |
| 67 |
|
| 68 |
for(var x in props){ |
| 69 |
|
| 70 |
var prop = props[x]; |
| 71 |
|
| 72 |
// Are we to set this value ? |
| 73 |
if(!(x in ret.atts) && 'default' in prop && !pagelayer_empty(prop['default'])){ |
| 74 |
ret.set[x] = prop['default']; |
| 75 |
} |
| 76 |
|
| 77 |
if(!('req' in prop)){ |
| 78 |
continue; |
| 79 |
} |
| 80 |
|
| 81 |
//console.log('[pagelayer_data] Cleaning :'+x); |
| 82 |
|
| 83 |
// List of considerations |
| 84 |
var show = prop['req']; |
| 85 |
|
| 86 |
// We will hide by default |
| 87 |
var toShow = true; |
| 88 |
|
| 89 |
for(var showParam in show){ |
| 90 |
var reqval = show[showParam]; |
| 91 |
var except = showParam.substr(0, 1) == '!' ? true : false; |
| 92 |
showParam = except ? showParam.substr(1) : showParam; |
| 93 |
var val = ret.atts[showParam] || ''; |
| 94 |
|
| 95 |
//console.log('Show '+x+' '+showParam+' '+reqval+' '+val); |
| 96 |
|
| 97 |
// Is the value not the same, then we can show |
| 98 |
if(except){ |
| 99 |
|
| 100 |
if(typeof reqval == 'string' && reqval == val){ |
| 101 |
toShow = false; |
| 102 |
break; |
| 103 |
} |
| 104 |
|
| 105 |
// Its an array and a value is found, then dont show |
| 106 |
if(typeof reqval != 'string' && reqval.indexOf(val) > -1){ |
| 107 |
toShow = false; |
| 108 |
break; |
| 109 |
} |
| 110 |
|
| 111 |
// The value must be equal |
| 112 |
}else{ |
| 113 |
|
| 114 |
if(typeof reqval == 'string' && reqval != val){ |
| 115 |
toShow = false; |
| 116 |
break; |
| 117 |
} |
| 118 |
|
| 119 |
// Its an array and no value is found, then dont show |
| 120 |
if(typeof reqval != 'string' && reqval.indexOf(val) === -1){ |
| 121 |
toShow = false; |
| 122 |
break; |
| 123 |
} |
| 124 |
} |
| 125 |
|
| 126 |
} |
| 127 |
|
| 128 |
// Are we to show ? |
| 129 |
if(!toShow){ |
| 130 |
//console.log('Delete : '+x); |
| 131 |
delete ret.atts[x]; |
| 132 |
delete ret.atts[x+'_tablet'];// Any tablet and mobile values as well |
| 133 |
delete ret.atts[x+'_mobile']; |
| 134 |
delete ret.set[x]; |
| 135 |
} |
| 136 |
} |
| 137 |
} |
| 138 |
} |
| 139 |
|
| 140 |
} |
| 141 |
|
| 142 |
return ret; |
| 143 |
|
| 144 |
}; |
| 145 |
|
| 146 |
// Setup the properties |
| 147 |
function pagelayer_elpd_setup(){ |
| 148 |
|
| 149 |
// The Dialag box of the element properties |
| 150 |
// pagelayer-ELPD - Element Properties Dialog |
| 151 |
pagelayer_elpd_html = '<div class="pagelayer-elpd-tabs">'+ |
| 152 |
'<div class="pagelayer-elpd-tab" pagelayer-elpd-tab="settings" pagelayer-elpd-active-tab=1>Settings</div>'+ |
| 153 |
//'<div class="pagelayer-elpd-tab" pagelayer-elpd-tab="styles">Style</div>'+ |
| 154 |
'<div class="pagelayer-elpd-tab" pagelayer-elpd-tab="options">Options</div>'+ |
| 155 |
'<div class="pagelayer-elpd-options">'+ |
| 156 |
'<i class="fa fa-clone" />'+ |
| 157 |
'<i class="fa fa-trash" />'+ |
| 158 |
'</div>'+ |
| 159 |
'</div>'+ |
| 160 |
'<div class="pagelayer-elpd-body"></div>'+ |
| 161 |
'<div class="pagelayer-elpd-holder"></div>'; |
| 162 |
|
| 163 |
// Create the dialog box |
| 164 |
pagelayer.$$('#pagelayer-elpd').append(pagelayer_elpd_html); |
| 165 |
pagelayer_elpd = pagelayer.$$('#pagelayer-elpd'); |
| 166 |
|
| 167 |
pagelayer.$$('.pagelayer-elpd-close').on('click', function(){ |
| 168 |
pagelayer_elpd.hide(); |
| 169 |
pagelayer.$$('.pagelayer-elpd-header').hide(); |
| 170 |
pagelayer.$$('.pagelayer-shortcodes').show(); |
| 171 |
pagelayer.$$('.pagelayer-logo').show(); |
| 172 |
pagelayer.$$('.pagelayer-elpd-body').removeAttr('pagelayer-element-id').empty(); |
| 173 |
pagelayer_active = {}; |
| 174 |
}); |
| 175 |
|
| 176 |
// Copy |
| 177 |
pagelayer.$$('.pagelayer-elpd-options>.fa-clone').on('click', function(){ |
| 178 |
pagelayer_copy_element(pagelayer_active.el.$); |
| 179 |
}); |
| 180 |
|
| 181 |
// Delete |
| 182 |
pagelayer.$$('.pagelayer-elpd-options>.fa-trash').on('click', function(){ |
| 183 |
pagelayer_delete_element(pagelayer_active.el.$); |
| 184 |
//pagelayer.$$('.pagelayer-elpd-close').click(); |
| 185 |
}); |
| 186 |
|
| 187 |
// The tabs |
| 188 |
pagelayer_elpd.find('.pagelayer-elpd-tab').on('click', function(){ |
| 189 |
var attr = 'pagelayer-elpd-active-tab'; |
| 190 |
pagelayer_elpd.find('.pagelayer-elpd-tab').each(function(){ |
| 191 |
jQuery(this).removeAttr(attr); |
| 192 |
}); |
| 193 |
jQuery(this).attr(attr, 1); |
| 194 |
|
| 195 |
// Trigger the showing of rows |
| 196 |
pagelayer_elpd_show_rows(); |
| 197 |
}); |
| 198 |
|
| 199 |
}; |
| 200 |
|
| 201 |
// Open the properties |
| 202 |
function pagelayer_elpd_open(jEle){ |
| 203 |
|
| 204 |
// Set the position of the element and show |
| 205 |
//pagelayer_elpd.css('left', pagelayer_elpd_pos[0]); |
| 206 |
//pagelayer_elpd.css('top', pagelayer_elpd_pos[1]); |
| 207 |
pagelayer_elpd.show(); |
| 208 |
pagelayer.$$('.pagelayer-elpd-header').show(); |
| 209 |
pagelayer.$$('.pagelayer-logo').hide(); |
| 210 |
pagelayer.$$('.pagelayer-shortcodes').hide(); |
| 211 |
|
| 212 |
// The property holder |
| 213 |
var holder = pagelayer.$$('.pagelayer-elpd-body'); |
| 214 |
holder.html(' '); |
| 215 |
|
| 216 |
var el = pagelayer_elpd_generate(jEle, holder); |
| 217 |
|
| 218 |
// Set the active element |
| 219 |
pagelayer_active.el = el; |
| 220 |
|
| 221 |
// Set the header |
| 222 |
pagelayer.$$('.pagelayer-elpd-title').html('Edit '+pagelayer_shortcodes[el.tag]['name']); |
| 223 |
|
| 224 |
}; |
| 225 |
|
| 226 |
// Show the properties window |
| 227 |
function pagelayer_elpd_generate(jEle, holder){ |
| 228 |
|
| 229 |
// Get the id, tag, atts, data, etc |
| 230 |
var el = pagelayer_data(jEle); |
| 231 |
//console.log(el); |
| 232 |
|
| 233 |
// Is it a valid type ? |
| 234 |
if(pagelayer_empty(pagelayer_shortcodes[el.tag])){ |
| 235 |
pagelayer_error('Could not find this shortcode : '+el.tag); |
| 236 |
} |
| 237 |
|
| 238 |
// Set the holder |
| 239 |
holder.attr('pagelayer-element-id', el.id); |
| 240 |
//console.log(el.id); |
| 241 |
|
| 242 |
var all_props = pagelayer_shortcodes[el.tag]; |
| 243 |
|
| 244 |
var sec_open_class = 'pagelayer-elpd-section-open'; |
| 245 |
|
| 246 |
for(var i in pagelayer_tabs){ |
| 247 |
var tab = pagelayer_tabs[i]; |
| 248 |
var section_close = false;// First section always open |
| 249 |
for(var section in all_props[tab]){ |
| 250 |
//console.log(tab+' '+section); |
| 251 |
|
| 252 |
var props = section in pagelayer_shortcodes[el.tag] ? pagelayer_shortcodes[el.tag][section] : pagelayer_styles[section]; |
| 253 |
//console.log(props); |
| 254 |
|
| 255 |
var sec = jQuery('<div class="pagelayer-elpd-section" section="'+section+'" pagelayer-show-tab="'+tab+'">'+ |
| 256 |
'<div class="pagelayer-elpd-section-name '+sec_open_class+'"><i class="fa"></i>'+all_props[tab][section]+'</div>'+ |
| 257 |
'<div class="pagelayer-elpd-section-rows"></div>'+ |
| 258 |
'</div>'); |
| 259 |
holder.append(sec); |
| 260 |
|
| 261 |
// The row holder |
| 262 |
sec = sec.find('.pagelayer-elpd-section-rows'); |
| 263 |
|
| 264 |
// Close all except the first section |
| 265 |
if(section_close){ |
| 266 |
sec.hide().prev().removeClass(sec_open_class); |
| 267 |
} |
| 268 |
section_close = true; |
| 269 |
|
| 270 |
if('widget' in all_props && section == 'params'){ |
| 271 |
pagelayer_elpd_widget_settings(el, sec, true); |
| 272 |
continue; |
| 273 |
} |
| 274 |
|
| 275 |
// Reset / Create the cache |
| 276 |
for(var x in props){ |
| 277 |
|
| 278 |
props[x]['c'] = new Object(); |
| 279 |
props[x]['c']['val'] = '';// Blank Val |
| 280 |
props[x]['c']['name'] = x;// Add the Name of the row i.e. attribute of the element |
| 281 |
|
| 282 |
// Set default to value of attribute if any |
| 283 |
if(x in el.atts){ |
| 284 |
props[x]['c']['val'] = el.atts[x]; |
| 285 |
} |
| 286 |
|
| 287 |
// Set element |
| 288 |
props[x]['el'] = el; |
| 289 |
|
| 290 |
// Add the row |
| 291 |
pagelayer_elpd_row(sec, tab, section, props, x); |
| 292 |
|
| 293 |
} |
| 294 |
} |
| 295 |
} |
| 296 |
|
| 297 |
/*// Set the default values in the PROPERTIES |
| 298 |
var fn_load = window['pagelayer_load_elp_'+el.tag]; |
| 299 |
|
| 300 |
if(typeof fn_load == 'function'){ |
| 301 |
fn_load(el, props); |
| 302 |
}*/ |
| 303 |
|
| 304 |
// Section open close |
| 305 |
holder.find('>.pagelayer-elpd-section>.pagelayer-elpd-section-name').on('click', function(){ |
| 306 |
var _sec = jQuery(this); |
| 307 |
var par = _sec.parent(); |
| 308 |
|
| 309 |
pagelayer_active_tab.id = el.id; |
| 310 |
pagelayer_active_tab.section = par.attr('section'); |
| 311 |
|
| 312 |
// Get the active tab |
| 313 |
var active_tab = pagelayer_elpd.find('[pagelayer-elpd-active-tab]').attr('pagelayer-elpd-tab'); |
| 314 |
|
| 315 |
// Close all but dont touch yourself |
| 316 |
holder.children().each(function (){ |
| 317 |
var curSec = jQuery(this); |
| 318 |
if(par.is(curSec)) return;// Skip the current option |
| 319 |
if(curSec.attr('pagelayer-show-tab') != active_tab) return;// Skip the non active tabs as is |
| 320 |
curSec.find('.pagelayer-elpd-section-rows').hide().prev().removeClass(sec_open_class); |
| 321 |
}); |
| 322 |
|
| 323 |
// Now toggle your self |
| 324 |
par.find('.pagelayer-elpd-section-rows').toggle(); |
| 325 |
|
| 326 |
if(_sec.next().is(':visible')){ |
| 327 |
_sec.addClass(sec_open_class); |
| 328 |
}else{ |
| 329 |
_sec.removeClass(sec_open_class); |
| 330 |
} |
| 331 |
|
| 332 |
}); |
| 333 |
|
| 334 |
if(!pagelayer_empty(pagelayer_active_tab) && pagelayer_active_tab.id == el.id){ |
| 335 |
holder.find('>[section='+pagelayer_active_tab.section+']>.pagelayer-elpd-section-name').click(); |
| 336 |
} |
| 337 |
|
| 338 |
// Handle the showing of rows |
| 339 |
pagelayer_elpd_show_rows(); |
| 340 |
|
| 341 |
return el; |
| 342 |
|
| 343 |
}; |
| 344 |
|
| 345 |
// Show a row |
| 346 |
function pagelayer_elpd_row(holder, tab, section, props, name){ |
| 347 |
|
| 348 |
// The Prop |
| 349 |
var prop = props[name]; |
| 350 |
//console.log(tab+' '+name+' '+prop.el.tag); |
| 351 |
|
| 352 |
var fn = window['pagelayer_elp_'+prop['type']]; |
| 353 |
|
| 354 |
if(typeof fn == 'function'){ |
| 355 |
|
| 356 |
var row = jQuery('<div class="pagelayer-form-item" pagelayer-elp-name="'+name+'" />'); |
| 357 |
|
| 358 |
// Append the row |
| 359 |
holder.append(row); |
| 360 |
|
| 361 |
var fn_ui = window['pagelayer_elp_'+prop['type']+'_ui']; |
| 362 |
|
| 363 |
// Is there a UI Handler ? |
| 364 |
if(typeof fn_ui == 'function'){ |
| 365 |
|
| 366 |
fn_ui(row, prop); |
| 367 |
|
| 368 |
// Use the default mechanism |
| 369 |
}else{ |
| 370 |
|
| 371 |
// The label |
| 372 |
pagelayer_elp_label(row, prop); |
| 373 |
|
| 374 |
// The main property |
| 375 |
fn(row, prop); |
| 376 |
|
| 377 |
// Is there a description ? |
| 378 |
if(!pagelayer_empty(prop['desc'])){ |
| 379 |
pagelayer_elp_desc(row, prop['desc']); |
| 380 |
} |
| 381 |
|
| 382 |
} |
| 383 |
|
| 384 |
return row; |
| 385 |
|
| 386 |
} |
| 387 |
|
| 388 |
}; |
| 389 |
|
| 390 |
// Show the rows as per the active tab and also handle the rows that are supposed to be shown or not |
| 391 |
function pagelayer_elpd_show_rows(){ |
| 392 |
|
| 393 |
//console.log('Called'); |
| 394 |
|
| 395 |
// Get the active tab |
| 396 |
var active_tab = pagelayer_elpd.find('[pagelayer-elpd-active-tab]').attr('pagelayer-elpd-tab'); |
| 397 |
|
| 398 |
pagelayer_elpd.find('[pagelayer-show-tab]').each(function(){ |
| 399 |
var sec = jQuery(this); |
| 400 |
|
| 401 |
// Is it the active tab ? |
| 402 |
if(sec.attr('pagelayer-show-tab') != active_tab){ |
| 403 |
sec.hide(); |
| 404 |
}else{ |
| 405 |
sec.show(); |
| 406 |
} |
| 407 |
}); |
| 408 |
|
| 409 |
// Find all Elements in the Property dialog and loop |
| 410 |
pagelayer_elpd.find('[pagelayer-element-id]').each(function(){ |
| 411 |
|
| 412 |
var holder = jQuery(this); |
| 413 |
var id = holder.attr('pagelayer-element-id'); |
| 414 |
var jEle = pagelayer_ele_by_id(id); |
| 415 |
var tag = pagelayer_tag(jEle); |
| 416 |
//console.log('Main : '+id+' - '+tag); |
| 417 |
//console.log(pagelayer_active); |
| 418 |
|
| 419 |
// All props |
| 420 |
var all_props = pagelayer_shortcodes[tag]; |
| 421 |
|
| 422 |
// Loop through all props |
| 423 |
for(var i in pagelayer_tabs){ |
| 424 |
|
| 425 |
var tab = pagelayer_tabs[i]; |
| 426 |
|
| 427 |
for(var section in all_props[tab]){ |
| 428 |
|
| 429 |
var props = section in pagelayer_shortcodes[tag] ? pagelayer_shortcodes[tag][section] : pagelayer_styles[section]; |
| 430 |
|
| 431 |
for(var x in props){ |
| 432 |
|
| 433 |
var prop = props[x]; |
| 434 |
|
| 435 |
// If the prop is a group, we continue |
| 436 |
if(prop['type'] == 'group'){ |
| 437 |
continue; |
| 438 |
} |
| 439 |
|
| 440 |
// Find the row |
| 441 |
var row = false; |
| 442 |
|
| 443 |
holder.find('[pagelayer-elp-name='+x+']').each(function(){ |
| 444 |
var j = jQuery(this); |
| 445 |
var _id = j.closest('[pagelayer-element-id]').attr('pagelayer-element-id'); |
| 446 |
//console.log(_id+' = '+id); |
| 447 |
|
| 448 |
// Is the parent the same ? |
| 449 |
if(_id == id){ |
| 450 |
row = j; |
| 451 |
} |
| 452 |
}); |
| 453 |
|
| 454 |
// Do you have a show or hide ? |
| 455 |
if(!row){ |
| 456 |
//console.log('Not Found : '+x+' - '+id); |
| 457 |
continue; |
| 458 |
} |
| 459 |
|
| 460 |
// Is the row visible ? |
| 461 |
if(row.closest('[pagelayer-show-tab]').attr('pagelayer-show-tab') != active_tab){ |
| 462 |
row.hide(); |
| 463 |
continue; |
| 464 |
} |
| 465 |
|
| 466 |
// Now lets show or hide the element |
| 467 |
if(!('req' in prop || 'show' in prop)){ |
| 468 |
row.show(); |
| 469 |
continue; |
| 470 |
} |
| 471 |
|
| 472 |
// List of considerations |
| 473 |
var show = {}; |
| 474 |
|
| 475 |
// We have both req and show, so lets just combine the values and then show |
| 476 |
// NOTE : We need to make an array and not just merge the 2 as they are references |
| 477 |
if('req' in prop && 'show' in prop){ |
| 478 |
|
| 479 |
// Add the req values |
| 480 |
show = JSON.parse(JSON.stringify(prop['req'])); |
| 481 |
|
| 482 |
// Now the show values need to be looped |
| 483 |
for(var t in prop['show']){ |
| 484 |
show[t] = prop['show'][t]; |
| 485 |
} |
| 486 |
|
| 487 |
}else{ |
| 488 |
show = 'req' in prop ? prop['req'] : prop['show']; |
| 489 |
} |
| 490 |
|
| 491 |
// We will hide by default |
| 492 |
var toShow = true; |
| 493 |
|
| 494 |
for(var showParam in show){ |
| 495 |
var reqval = show[showParam]; |
| 496 |
var except = showParam.substr(0, 1) == '!' ? true : false; |
| 497 |
showParam = except ? showParam.substr(1) : showParam; |
| 498 |
var val = pagelayer_get_att(jEle, showParam) || ''; |
| 499 |
|
| 500 |
//console.log('Show '+x+' '+showParam+' '+reqval+' '+val); |
| 501 |
|
| 502 |
// Is the value not the same, then we can show |
| 503 |
if(except){ |
| 504 |
|
| 505 |
if(typeof reqval == 'string' && reqval == val){ |
| 506 |
toShow = false; |
| 507 |
break; |
| 508 |
} |
| 509 |
|
| 510 |
// Its an array and a value is found, then dont show |
| 511 |
if(typeof reqval != 'string' && reqval.indexOf(val) > -1){ |
| 512 |
toShow = false; |
| 513 |
break; |
| 514 |
} |
| 515 |
|
| 516 |
// The value must be equal |
| 517 |
}else{ |
| 518 |
|
| 519 |
if(typeof reqval == 'string' && reqval != val){ |
| 520 |
toShow = false; |
| 521 |
break; |
| 522 |
} |
| 523 |
|
| 524 |
// Its an array and no value is found, then dont show |
| 525 |
if(typeof reqval != 'string' && reqval.indexOf(val) === -1){ |
| 526 |
toShow = false; |
| 527 |
break; |
| 528 |
} |
| 529 |
} |
| 530 |
} |
| 531 |
|
| 532 |
// Are we to show ? |
| 533 |
if(toShow){ |
| 534 |
row.show(); |
| 535 |
}else{ |
| 536 |
row.hide(); |
| 537 |
} |
| 538 |
|
| 539 |
} |
| 540 |
} |
| 541 |
} |
| 542 |
|
| 543 |
}); |
| 544 |
|
| 545 |
}; |
| 546 |
|
| 547 |
var pagelayer_widget_timer; |
| 548 |
var pagelayer_widget_cache = {}; |
| 549 |
|
| 550 |
// Load the widget settings |
| 551 |
function pagelayer_elpd_widget_settings(el, sec, onfocus){ |
| 552 |
|
| 553 |
var show_form = function(html){ |
| 554 |
|
| 555 |
sec.html('<form class="pagelayer-widgets-form">'+html+'</form>'); |
| 556 |
|
| 557 |
// Handle on form data change |
| 558 |
sec.find('form :input').on('change', function(){ |
| 559 |
//console.log('Changed !'); |
| 560 |
|
| 561 |
// Clear any previous timeout |
| 562 |
clearTimeout(pagelayer_widget_timer); |
| 563 |
|
| 564 |
// Set a timer for constant change |
| 565 |
pagelayer_widget_timer = setTimeout(function(){ |
| 566 |
pagelayer_elpd_widget_settings(el, sec); |
| 567 |
//console.log('Calling'); |
| 568 |
}, 500); |
| 569 |
|
| 570 |
}); |
| 571 |
} |
| 572 |
|
| 573 |
// Is it onfocus ? |
| 574 |
onfocus = onfocus || false; |
| 575 |
|
| 576 |
// Its an onfocus |
| 577 |
if(onfocus && el.id in pagelayer_widget_cache){ |
| 578 |
show_form(pagelayer_widget_cache[el.id]); |
| 579 |
return true; |
| 580 |
} |
| 581 |
|
| 582 |
var post = {}; |
| 583 |
post['action'] = 'pagelayer_wp_widget'; |
| 584 |
post['nonce'] = pagelayer_ajax_nonce; |
| 585 |
post['tag'] = el.tag; |
| 586 |
post['pagelayer-id'] = el.id; |
| 587 |
|
| 588 |
// Any atts ? |
| 589 |
if('widget_data' in el.atts){ |
| 590 |
post['widget_data'] = el.atts['widget_data']; |
| 591 |
} |
| 592 |
|
| 593 |
// Post any existing data |
| 594 |
var form = sec.find('form'); |
| 595 |
if(form.length > 0){ |
| 596 |
//console.log(form.serialize()); |
| 597 |
post['values'] = form.serialize(); |
| 598 |
} |
| 599 |
|
| 600 |
jQuery.ajax({ |
| 601 |
url: pagelayer_ajax_url, |
| 602 |
type: 'post', |
| 603 |
data: post, |
| 604 |
success: function(data) { |
| 605 |
//console.log('Widget Data');console.log(data); |
| 606 |
|
| 607 |
// Show the form |
| 608 |
if('form' in data){ |
| 609 |
show_form(data['form']); |
| 610 |
|
| 611 |
// Store in cache |
| 612 |
pagelayer_widget_cache[el.id] = data['form']; |
| 613 |
} |
| 614 |
|
| 615 |
// Show the content |
| 616 |
if('html' in data){ |
| 617 |
el.$.html(data['html']); |
| 618 |
pagelayer_sc_render(el.$);// Re-Render the CSS |
| 619 |
} |
| 620 |
|
| 621 |
// Any set attributes ? |
| 622 |
if('widget_data' in data){ |
| 623 |
pagelayer_set_atts(el.$, 'widget_data', JSON.stringify(data['widget_data'])); |
| 624 |
} |
| 625 |
|
| 626 |
}, |
| 627 |
fail: function(data) { |
| 628 |
alert('Some error occured in getting the widget data'); |
| 629 |
} |
| 630 |
}); |
| 631 |
|
| 632 |
} |
| 633 |
|
| 634 |
// Will set the attribute and also render |
| 635 |
function _pagelayer_set_atts(row, val, no_default){ |
| 636 |
var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id'); |
| 637 |
var jEle = jQuery('[pagelayer-id='+id+']'); |
| 638 |
|
| 639 |
// Is there a unit ? |
| 640 |
var uEle = row.find('.pagelayer-elp-units'); |
| 641 |
if(uEle.length > 0){ |
| 642 |
var unit = uEle.find('[selected]').html(); |
| 643 |
if(Array.isArray(val)){ |
| 644 |
for(var i in val){ |
| 645 |
if(val[i].length < 1){ |
| 646 |
continue; |
| 647 |
} |
| 648 |
val[i] = val[i]+unit; |
| 649 |
} |
| 650 |
}else{ |
| 651 |
val = val+unit; |
| 652 |
} |
| 653 |
} |
| 654 |
|
| 655 |
// Are we in another mode ? |
| 656 |
var mEle = row.find('.pagelayer-elp-screen'); |
| 657 |
var mode = mEle.length > 0 && pagelayer_get_screen_mode() != 'desktop' ? '_'+pagelayer_get_screen_mode() : ''; |
| 658 |
|
| 659 |
pagelayer_set_atts(jEle, row.attr('pagelayer-elp-name')+mode, val); |
| 660 |
|
| 661 |
// Are we to skip setting defaults ? |
| 662 |
no_default = no_default || false; |
| 663 |
if(!no_default){ |
| 664 |
|
| 665 |
// We need to set defaults for dependents |
| 666 |
var hasSet = pagelayer_set_default_atts(jEle, 5); |
| 667 |
|
| 668 |
// We need to reopen the left panel |
| 669 |
// Note : If two simultaneous calls are made, then this will cause problems |
| 670 |
// Also after this is called, ROW is destroyed and no other row related stuff will work i.e. set_atts in the same calls will fail |
| 671 |
if(hasSet){ |
| 672 |
pagelayer_elpd_open(jEle); |
| 673 |
} |
| 674 |
} |
| 675 |
|
| 676 |
// Render |
| 677 |
pagelayer_sc_render(jEle); |
| 678 |
}; |
| 679 |
|
| 680 |
// Will set the attribute but not render |
| 681 |
function _pagelayer_set_tmp_atts(row, suffix, val){ |
| 682 |
var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id'); |
| 683 |
var jEle = jQuery('[pagelayer-id='+id+']'); |
| 684 |
pagelayer_set_tmp_atts(jEle, row.attr('pagelayer-elp-name')+'-'+suffix, val); |
| 685 |
}; |
| 686 |
|
| 687 |
// Get the tmp att |
| 688 |
function _pagelayer_get_tmp_att(row, suffix){ |
| 689 |
var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id'); |
| 690 |
var jEle = jQuery('[pagelayer-id='+id+']'); |
| 691 |
return pagelayer_get_tmp_att(jEle, row.attr('pagelayer-elp-name')+'-'+suffix); |
| 692 |
}; |
| 693 |
|
| 694 |
// Create the Label |
| 695 |
function pagelayer_elp_label(row, prop){ |
| 696 |
row.append('<div class="pagelayer-elp-label-div"><label class="pagelayer-elp-label">'+prop['label']+'</label></div>'); |
| 697 |
|
| 698 |
var label = row.children('.pagelayer-elp-label-div'); |
| 699 |
|
| 700 |
// Do we have screen ? |
| 701 |
if('screen' in prop){ |
| 702 |
var screen = '<div class="pagelayer-elp-screen">'+ |
| 703 |
'<i class="fa fa-desktop" />'+ |
| 704 |
'<i class="fa fa-tablet" />'+ |
| 705 |
'<i class="fa fa-mobile" />'+ |
| 706 |
'</div>'; |
| 707 |
label.append(screen); |
| 708 |
|
| 709 |
// Set screen mode on change |
| 710 |
label.find('.fa').on('click', function(){ |
| 711 |
var mode = 'desktop'; |
| 712 |
var jEle = jQuery(this); |
| 713 |
|
| 714 |
// Tablet ? |
| 715 |
if(jEle.hasClass('fa-tablet')){ |
| 716 |
mode = 'tablet'; |
| 717 |
} |
| 718 |
|
| 719 |
// Mobile ? |
| 720 |
if(jEle.hasClass('fa-mobile')){ |
| 721 |
mode = 'mobile'; |
| 722 |
} |
| 723 |
|
| 724 |
pagelayer_set_screen_mode(mode); |
| 725 |
|
| 726 |
}); |
| 727 |
|
| 728 |
// On change of screen handle the values |
| 729 |
label.find('.pagelayer-elp-screen').on('pagelayer-screen-changed', function(e){ |
| 730 |
|
| 731 |
var mode = pagelayer_get_screen_mode(); |
| 732 |
var modes = {desktop: '', tablet: '_tablet', mobile: '_mobile'}; |
| 733 |
|
| 734 |
// Get the current current new val |
| 735 |
prop.c['val'] = pagelayer_get_att(prop.el.$, prop.c['name']+modes[mode]); |
| 736 |
|
| 737 |
// Handle the amount |
| 738 |
if(pagelayer_empty(prop.c['val'])){ |
| 739 |
prop.c['val'] = ''; |
| 740 |
} |
| 741 |
|
| 742 |
// Remove the siblings |
| 743 |
label.siblings().each(function(){ |
| 744 |
var j = jQuery(this); |
| 745 |
|
| 746 |
if(j.hasClass('pagelayer-elp-desc')){ |
| 747 |
return; |
| 748 |
} |
| 749 |
|
| 750 |
j.remove(); |
| 751 |
}); |
| 752 |
|
| 753 |
// Create the vals again |
| 754 |
var fn = window['pagelayer_elp_'+prop['type']]; |
| 755 |
|
| 756 |
// The main property |
| 757 |
fn(row, prop); |
| 758 |
|
| 759 |
}) |
| 760 |
|
| 761 |
} |
| 762 |
|
| 763 |
// Do we have units ? |
| 764 |
if('units' in prop){ |
| 765 |
|
| 766 |
var units = ''; |
| 767 |
var tmp_val = prop.c['val']; |
| 768 |
var default_unit = 0; |
| 769 |
|
| 770 |
// Get unit from value |
| 771 |
if(!(pagelayer_empty(tmp_val))){ |
| 772 |
|
| 773 |
for(var i in prop['units']){ |
| 774 |
if(tmp_val.search(prop['units'][i]) != -1){ |
| 775 |
default_unit = i; |
| 776 |
} |
| 777 |
} |
| 778 |
} |
| 779 |
|
| 780 |
for(var i in prop['units']){ |
| 781 |
units += '<span '+(i == default_unit ? 'selected' : '')+'>'+prop['units'][i]+'</span>'; |
| 782 |
} |
| 783 |
|
| 784 |
label.append('<div class="pagelayer-elp-units">'+units+'</div>'); |
| 785 |
|
| 786 |
// Set unit on change |
| 787 |
label.find('.pagelayer-elp-units span').on('click', function(){ |
| 788 |
|
| 789 |
label.find('.pagelayer-elp-units span').each(function(){ |
| 790 |
jQuery(this).removeAttr('selected'); |
| 791 |
}); |
| 792 |
|
| 793 |
jQuery(this).attr('selected', 1); |
| 794 |
|
| 795 |
}); |
| 796 |
|
| 797 |
} |
| 798 |
|
| 799 |
}; |
| 800 |
|
| 801 |
// Create the Description |
| 802 |
function pagelayer_elp_desc(row, label){ |
| 803 |
//row.append('<div class="pagelayer-elp-desc">'+label+'</div>'); |
| 804 |
}; |
| 805 |
|
| 806 |
// The Text property |
| 807 |
function pagelayer_elp_text(row, prop){ |
| 808 |
|
| 809 |
var div = '<div class="pagelayer-elp-text-div">'+ |
| 810 |
'<input type="text" class="pagelayer-elp-text" name="'+prop.c['name']+'" value="'+prop.c['val']+'"></input>'+ |
| 811 |
'</div>'; |
| 812 |
|
| 813 |
row.append(div); |
| 814 |
|
| 815 |
row.find('input').on('input', function(){ |
| 816 |
_pagelayer_set_atts(row, pagelayer_trim(jQuery(this).val()));// Save and Render |
| 817 |
}); |
| 818 |
|
| 819 |
}; |
| 820 |
|
| 821 |
// The Select property |
| 822 |
function pagelayer_elp_select(row, prop){ |
| 823 |
|
| 824 |
var options = ''; |
| 825 |
var option = function(val, lang){ |
| 826 |
var selected = (val != prop.c['val']) ? '' : 'selected="selected"'; |
| 827 |
return '<option class="pagelayer-elp-select-option" value="'+val+'" '+selected+'>'+lang+'</option>'; |
| 828 |
} |
| 829 |
|
| 830 |
for (x in prop['list']){ |
| 831 |
|
| 832 |
// Single item |
| 833 |
if(typeof prop['list'][x] == 'string'){ |
| 834 |
options += option(x, prop['list'][x]); |
| 835 |
|
| 836 |
// Groups |
| 837 |
}else{ |
| 838 |
options += '<optgroup label="'+x+'">'; |
| 839 |
|
| 840 |
for(var y in prop['list'][x]){ |
| 841 |
options += option(y, prop['list'][x][y]); |
| 842 |
} |
| 843 |
|
| 844 |
options += '</optgroup>'; |
| 845 |
} |
| 846 |
} |
| 847 |
|
| 848 |
var div = '<div class="pagelayer-elp-select-div pagelayer-elp-pos-rel">'+ |
| 849 |
'<select class="pagelayer-elp-select pagelayer-select" name="'+prop.c['name']+'">'+options+'</select>'+ |
| 850 |
'</div>'; |
| 851 |
|
| 852 |
row.append(div); |
| 853 |
|
| 854 |
row.find('select').on('change', function(){ |
| 855 |
|
| 856 |
var sEle = jQuery(this); |
| 857 |
|
| 858 |
if(sEle.attr('name') == "animation"){ |
| 859 |
_pagelayer_trigger_anim(row, sEle.val()); |
| 860 |
} |
| 861 |
|
| 862 |
_pagelayer_set_atts(row, sEle.val());// Save and Render |
| 863 |
|
| 864 |
}); |
| 865 |
|
| 866 |
} |
| 867 |
|
| 868 |
function _pagelayer_trigger_anim(row, anim){ |
| 869 |
var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id'); |
| 870 |
var classList = $('[pagelayer-id='+id+']').attr('class'); |
| 871 |
classList = classList.split(/\s+/); |
| 872 |
//console.log(classList); |
| 873 |
var options = []; |
| 874 |
row.find('option').each(function(){ |
| 875 |
var found = $.inArray( $(this).val(), classList ); |
| 876 |
if( found != -1){ |
| 877 |
//var found = $(this).val(); |
| 878 |
$('[pagelayer-id='+id+']').removeClass($(this).val()); |
| 879 |
//break; |
| 880 |
} |
| 881 |
//options.push($(this).val()); |
| 882 |
}); |
| 883 |
$('[pagelayer-id='+id+']').removeClass('pagelayer-wow').addClass(anim + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ |
| 884 |
$(this).removeClass(anim+ ' animated'); |
| 885 |
}); |
| 886 |
} |
| 887 |
|
| 888 |
// The Checkbox property |
| 889 |
function pagelayer_elp_checkbox(row, prop){ |
| 890 |
|
| 891 |
var div = '<div class="pagelayer-elp-checkbox-div">'+ |
| 892 |
'<input type="checkbox" name="'+prop.c['name']+'" class="pagelayer-elp-checkbox" />'+ |
| 893 |
'</div>'; |
| 894 |
|
| 895 |
row.append(div); |
| 896 |
|
| 897 |
if(prop.c['val'].length > 0){ |
| 898 |
row.find('input').attr('checked', 'checked'); |
| 899 |
}else{ |
| 900 |
row.find('input').removeAttr('checked'); |
| 901 |
} |
| 902 |
|
| 903 |
// When the change is called |
| 904 |
row.find('input').on('change', function(){ |
| 905 |
|
| 906 |
// We set to string true or false |
| 907 |
var val = jQuery(this).is(':checked') ? 'true' : ''; |
| 908 |
|
| 909 |
_pagelayer_set_atts(row, val);// Save and Render |
| 910 |
}); |
| 911 |
|
| 912 |
} |
| 913 |
|
| 914 |
// The Radio property |
| 915 |
function pagelayer_elp_radio(row, prop){ |
| 916 |
|
| 917 |
var active = 'pagelayer-elp-radio-active'; |
| 918 |
var div = '<div class="pagelayer-elp-radio-div">'; |
| 919 |
|
| 920 |
for(var x in prop.list){ |
| 921 |
var addclass = (prop.c['val'] == x) ? active : ''; |
| 922 |
div += '<a class="pagelayer-elp-radio '+addclass+'" val="'+x+'">'+prop.list[x]+'</a>'; |
| 923 |
} |
| 924 |
|
| 925 |
div += '<div>'; |
| 926 |
|
| 927 |
row.append(div); |
| 928 |
|
| 929 |
row.find('.pagelayer-elp-radio').each(function(){ |
| 930 |
|
| 931 |
jQuery(this).on('click', function (){ |
| 932 |
|
| 933 |
// Remove existing active class |
| 934 |
jQuery(this).parent().find('.'+active).removeClass(active); |
| 935 |
|
| 936 |
// Set active |
| 937 |
jQuery(this).addClass(active); |
| 938 |
|
| 939 |
_pagelayer_set_atts(row, jQuery(this).attr('val'));// Save and Render |
| 940 |
|
| 941 |
}); |
| 942 |
|
| 943 |
}); |
| 944 |
|
| 945 |
} |
| 946 |
|
| 947 |
// The Image Property |
| 948 |
function pagelayer_elp_image(row, prop){ |
| 949 |
|
| 950 |
var style = ''; |
| 951 |
var tmp = prop.c['name']+'-url'; |
| 952 |
var def = pagelayer_url+'/images/default-image.png'; |
| 953 |
var src = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : def; |
| 954 |
|
| 955 |
// Do we have a URL set ? |
| 956 |
style = 'style="background-image:url(\''+src+'\')"'; |
| 957 |
|
| 958 |
var div = '<div class="pagelayer-elp-image-div">'+ |
| 959 |
'<div class="pagelayer-elp-image" '+style+'></div>'+ |
| 960 |
'<div class="pagelayer-elp-image-delete"><i class="fa fa-trash" /></div>'+ |
| 961 |
'</div>'; |
| 962 |
|
| 963 |
row.append(div); |
| 964 |
|
| 965 |
// Set an Image |
| 966 |
row.find('.pagelayer-elp-image').on('click', function(){ |
| 967 |
|
| 968 |
var button = jQuery(this); |
| 969 |
|
| 970 |
// Load the frame |
| 971 |
var frame = pagelayer_select_frame('image'); |
| 972 |
|
| 973 |
// On select update the stuff |
| 974 |
frame.on({ |
| 975 |
'select': function(){ |
| 976 |
|
| 977 |
var state = frame.state(); |
| 978 |
var id = url = ''; |
| 979 |
|
| 980 |
// External URL |
| 981 |
if('props' in state){ |
| 982 |
|
| 983 |
id = url = state.props.attributes.url; |
| 984 |
|
| 985 |
// Internal from gallery |
| 986 |
}else{ |
| 987 |
|
| 988 |
var attachment = frame.state().get('selection').first().toJSON(); |
| 989 |
//console.log(attachment); |
| 990 |
|
| 991 |
// Set the new ID and URL |
| 992 |
id = attachment.id; |
| 993 |
url = attachment.url; |
| 994 |
|
| 995 |
// Keep a list of all sizes |
| 996 |
for(var x in attachment.sizes){ |
| 997 |
_pagelayer_set_tmp_atts(row, x+'-url', attachment.sizes[x].url); |
| 998 |
} |
| 999 |
|
| 1000 |
} |
| 1001 |
|
| 1002 |
// Update thumbnail |
| 1003 |
button.css('background-image', 'url(\''+url+'\')'); |
| 1004 |
|
| 1005 |
// Save and render |
| 1006 |
_pagelayer_set_tmp_atts(row, 'url', url); |
| 1007 |
_pagelayer_set_atts(row, id); |
| 1008 |
|
| 1009 |
}, |
| 1010 |
// On open select the appropriate images in the media manager |
| 1011 |
'open': function() { |
| 1012 |
var selection = frame.state().get('selection'); |
| 1013 |
var wp_id = prop.el.$.attr('pagelayer-a-id'); |
| 1014 |
selection.reset( wp_id ? [ wp.media.attachment( wp_id ) ] : [] ); |
| 1015 |
} |
| 1016 |
}); |
| 1017 |
|
| 1018 |
frame.open(button); |
| 1019 |
|
| 1020 |
return false; |
| 1021 |
|
| 1022 |
}); |
| 1023 |
|
| 1024 |
// Delete this |
| 1025 |
row.find('.pagelayer-elp-image-delete').on('click', function(){ |
| 1026 |
|
| 1027 |
// Update thumbnail |
| 1028 |
row.find('.pagelayer-elp-image').css('background-image', 'url(\''+def+'\')'); |
| 1029 |
|
| 1030 |
// Set to blank and render |
| 1031 |
_pagelayer_set_atts(row, '', true); |
| 1032 |
|
| 1033 |
_pagelayer_set_tmp_atts(row, 'url', def); |
| 1034 |
_pagelayer_set_atts(row, def); |
| 1035 |
|
| 1036 |
}); |
| 1037 |
|
| 1038 |
} |
| 1039 |
|
| 1040 |
// The Multi Image Property |
| 1041 |
function pagelayer_elp_multi_image(row, prop){ |
| 1042 |
|
| 1043 |
var div = '<div class="pagelayer-elp-multi_image-div">'+ |
| 1044 |
'<center><button class="pagelayer-elp-button">'+pagelayer_l('Add Images')+'</button></center>'+ |
| 1045 |
'<div class="pagelayer-elp-multi_image-thumbs"></div>'+ |
| 1046 |
'</div>'; |
| 1047 |
|
| 1048 |
row.append(div); |
| 1049 |
|
| 1050 |
var tmp = prop.c['name']+'-urls'; |
| 1051 |
var ids = new Array(); |
| 1052 |
|
| 1053 |
// Any IDs ? |
| 1054 |
if(!pagelayer_empty(prop.c['val'])){ |
| 1055 |
ids = prop.c['val'].split(','); |
| 1056 |
//console.log(ids); |
| 1057 |
} |
| 1058 |
|
| 1059 |
// Do we have a URL set ? |
| 1060 |
if(ids.length > 0 && tmp in prop.el.tmp){ |
| 1061 |
var images = JSON.parse(prop.el.tmp[tmp]); |
| 1062 |
//console.log(images); |
| 1063 |
|
| 1064 |
for(var x in ids){ |
| 1065 |
row.find('.pagelayer-elp-multi_image-thumbs').append('<div class="pagelayer-elp-multi_image-thumb" style="background-image: url(\''+images['i'+ids[x]]+'\');"></div>'); |
| 1066 |
} |
| 1067 |
} |
| 1068 |
|
| 1069 |
var pagelayer_init_frame = function(state){ |
| 1070 |
|
| 1071 |
var button = row.find('.pagelayer-elp-multi_image-thumbs'); |
| 1072 |
//console.log(ids); |
| 1073 |
|
| 1074 |
// Load the frame |
| 1075 |
var frame = pagelayer_select_frame('multi_image', 'gallery'+state); |
| 1076 |
|
| 1077 |
frame.on({ |
| 1078 |
|
| 1079 |
// Set the current selection if any |
| 1080 |
'open': function(){ |
| 1081 |
|
| 1082 |
// Do we have anything |
| 1083 |
if(ids.length > 0){ |
| 1084 |
|
| 1085 |
var selection = ''; |
| 1086 |
|
| 1087 |
if(state == '-edit'){ |
| 1088 |
selection = frame.state().get('library'); |
| 1089 |
}else{ |
| 1090 |
selection = frame.state().get('selection'); |
| 1091 |
} |
| 1092 |
|
| 1093 |
// Add to current selection |
| 1094 |
for(var x in ids){ |
| 1095 |
attachment = wp.media.attachment(ids[x]); |
| 1096 |
attachment.fetch(); |
| 1097 |
selection.add(attachment ? [ attachment ] : [] ); |
| 1098 |
} |
| 1099 |
} |
| 1100 |
}, |
| 1101 |
|
| 1102 |
// When images are selected |
| 1103 |
'update': function(selection){ |
| 1104 |
|
| 1105 |
//console.log(selection); |
| 1106 |
|
| 1107 |
// Remove thumbnails |
| 1108 |
row.find('.pagelayer-elp-multi_image-thumb').remove(); |
| 1109 |
|
| 1110 |
//Fetch selected images |
| 1111 |
var attachments = selection.map(function(attachment){ |
| 1112 |
attachment.toJSON(); |
| 1113 |
return attachment; |
| 1114 |
}); |
| 1115 |
|
| 1116 |
//console.log(attachments); |
| 1117 |
|
| 1118 |
var img_ids = []; |
| 1119 |
var urls = {}; |
| 1120 |
var img_urls = {}; |
| 1121 |
var titles = {}; |
| 1122 |
var links = {}; |
| 1123 |
var captions = {}; |
| 1124 |
|
| 1125 |
for(var i = 0; i < attachments.length; ++i){ |
| 1126 |
|
| 1127 |
// Add Id and urls to array |
| 1128 |
var id = attachments[i].id; |
| 1129 |
var _id = 'i'+id; |
| 1130 |
img_ids.push(id); |
| 1131 |
urls[_id] = attachments[i].attributes.url; |
| 1132 |
|
| 1133 |
// Create thumbnails |
| 1134 |
button.append('<div class="pagelayer-elp-multi_image-thumb" style="background-image: url(\''+attachments[i].attributes.url+'\');"></div>'); |
| 1135 |
|
| 1136 |
//get title |
| 1137 |
titles[_id] = attachments[i].attributes.title; |
| 1138 |
links[_id] = attachments[i].attributes.link; |
| 1139 |
captions[_id] = attachments[i].attributes.caption; |
| 1140 |
|
| 1141 |
// Create a URL |
| 1142 |
img_urls[_id] = {} |
| 1143 |
|
| 1144 |
for(var x in attachments[i].attributes.sizes){ |
| 1145 |
img_urls[_id][x] = attachments[i].attributes.sizes[x].url; |
| 1146 |
} |
| 1147 |
|
| 1148 |
} |
| 1149 |
|
| 1150 |
//console.log(img_urls); |
| 1151 |
|
| 1152 |
// Save and render |
| 1153 |
_pagelayer_set_tmp_atts(row, 'urls', JSON.stringify(urls)); |
| 1154 |
_pagelayer_set_tmp_atts(row, 'all-urls', JSON.stringify(img_urls)); |
| 1155 |
_pagelayer_set_tmp_atts(row, 'all-titles', JSON.stringify(titles)); |
| 1156 |
_pagelayer_set_tmp_atts(row, 'all-links', JSON.stringify(links)); |
| 1157 |
_pagelayer_set_tmp_atts(row, 'all-captions', JSON.stringify(captions)); |
| 1158 |
_pagelayer_set_atts(row, img_ids); |
| 1159 |
|
| 1160 |
// Update the IDs incase the user clicks on it again |
| 1161 |
ids = img_ids; |
| 1162 |
|
| 1163 |
} |
| 1164 |
|
| 1165 |
}); |
| 1166 |
|
| 1167 |
frame.open(button); |
| 1168 |
|
| 1169 |
return false; |
| 1170 |
|
| 1171 |
}; |
| 1172 |
|
| 1173 |
row.find('.pagelayer-elp-multi_image-thumbs').on('click', function(){ |
| 1174 |
pagelayer_init_frame('-edit'); |
| 1175 |
}); |
| 1176 |
|
| 1177 |
row.find('.pagelayer-elp-button').on('click', function(){ |
| 1178 |
pagelayer_init_frame(ids.length > 0 ? '-library' : ''); |
| 1179 |
}); |
| 1180 |
|
| 1181 |
} |
| 1182 |
|
| 1183 |
// The Video Property |
| 1184 |
function pagelayer_elp_video(row, prop){ |
| 1185 |
|
| 1186 |
var tmp = prop.c['name']+'-url'; |
| 1187 |
var src = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : prop.c['val']; |
| 1188 |
|
| 1189 |
var div = '<div class="pagelayer-elp-video-div pagelayer-elp-input-icon">'+ |
| 1190 |
'<input class="pagelayer-elp-video" name="'+prop.c['name']+'" type="text" value="'+src+'">'+ |
| 1191 |
'<i class="fa fa-folder-open" />'+ |
| 1192 |
'</input></div>'; |
| 1193 |
|
| 1194 |
row.append(div); |
| 1195 |
|
| 1196 |
row.find('.pagelayer-elp-video-div .fa').on('click', function(){ |
| 1197 |
|
| 1198 |
var button = jQuery(this); |
| 1199 |
|
| 1200 |
// Load the frame |
| 1201 |
var frame = pagelayer_select_frame('video'); |
| 1202 |
|
| 1203 |
// On select update the stuff |
| 1204 |
frame.on({ |
| 1205 |
|
| 1206 |
'select': function(){ |
| 1207 |
|
| 1208 |
var state = frame.state(); |
| 1209 |
var id = url = ''; |
| 1210 |
|
| 1211 |
// External URL |
| 1212 |
if('props' in state){ |
| 1213 |
|
| 1214 |
id = url = state.props.attributes.url; |
| 1215 |
|
| 1216 |
// Internal from gallery |
| 1217 |
}else{ |
| 1218 |
|
| 1219 |
var attachment = frame.state().get('selection').first().toJSON(); |
| 1220 |
//console.log(attachment); |
| 1221 |
|
| 1222 |
id = attachment.id; |
| 1223 |
url = attachment.url; |
| 1224 |
|
| 1225 |
} |
| 1226 |
|
| 1227 |
// Update URL |
| 1228 |
button.prev().val(url); |
| 1229 |
|
| 1230 |
// Save and render |
| 1231 |
_pagelayer_set_tmp_atts(row, 'url', url); |
| 1232 |
_pagelayer_set_atts(row, id); |
| 1233 |
|
| 1234 |
} |
| 1235 |
|
| 1236 |
}); |
| 1237 |
|
| 1238 |
frame.open(button); |
| 1239 |
|
| 1240 |
return false; |
| 1241 |
|
| 1242 |
}); |
| 1243 |
|
| 1244 |
// Edited the video URL directly |
| 1245 |
row.find('.pagelayer-elp-video').on('change', function(){ |
| 1246 |
|
| 1247 |
var input = jQuery(this); |
| 1248 |
|
| 1249 |
// Set the new URL |
| 1250 |
_pagelayer_set_tmp_atts(row, 'url', input.val()); |
| 1251 |
_pagelayer_set_atts(row, input.val()); |
| 1252 |
|
| 1253 |
}); |
| 1254 |
|
| 1255 |
} |
| 1256 |
|
| 1257 |
|
| 1258 |
// The Audio Property |
| 1259 |
function pagelayer_elp_audio(row, prop){ |
| 1260 |
|
| 1261 |
var tmp = prop.c['name']+'-url'; |
| 1262 |
var src = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : prop.c['val']; |
| 1263 |
|
| 1264 |
var div = '<div class="pagelayer-elp-audio-div pagelayer-elp-input-icon">'+ |
| 1265 |
'<input class="pagelayer-elp-audio" name="'+prop.c['name']+'" type="text" value="'+src+'" />'+ |
| 1266 |
'<i class="fa fa-bars" />'+ |
| 1267 |
'</div>'; |
| 1268 |
|
| 1269 |
row.append(div); |
| 1270 |
|
| 1271 |
// Choose from media |
| 1272 |
row.find('.pagelayer-elp-audio-div .fa').on('click', function(){ |
| 1273 |
|
| 1274 |
var button = jQuery(this); |
| 1275 |
|
| 1276 |
// Load the frame |
| 1277 |
var frame = pagelayer_select_frame('audio'); |
| 1278 |
|
| 1279 |
frame.on({ |
| 1280 |
|
| 1281 |
'select': function(){ |
| 1282 |
|
| 1283 |
var state = frame.state(); |
| 1284 |
var id = url = ''; |
| 1285 |
|
| 1286 |
// External URL |
| 1287 |
if('props' in state){ |
| 1288 |
|
| 1289 |
id = url = state.props.attributes.url; |
| 1290 |
|
| 1291 |
// Internal from gallery |
| 1292 |
}else{ |
| 1293 |
|
| 1294 |
var attachment = frame.state().get('selection').first().toJSON(); |
| 1295 |
//console.log(attachment); |
| 1296 |
|
| 1297 |
id = attachment.id; |
| 1298 |
url = attachment.url; |
| 1299 |
|
| 1300 |
} |
| 1301 |
|
| 1302 |
// Update URL |
| 1303 |
button.prev().val(url); |
| 1304 |
|
| 1305 |
// Save and render |
| 1306 |
_pagelayer_set_tmp_atts(row, 'url', url); |
| 1307 |
_pagelayer_set_atts(row, id); |
| 1308 |
|
| 1309 |
} |
| 1310 |
|
| 1311 |
}); |
| 1312 |
|
| 1313 |
frame.open(button); |
| 1314 |
|
| 1315 |
return false; |
| 1316 |
|
| 1317 |
}); |
| 1318 |
|
| 1319 |
// Edited the media URL directly |
| 1320 |
row.find('.pagelayer-elp-audio').on('change', function(){ |
| 1321 |
|
| 1322 |
var input = jQuery(this); |
| 1323 |
|
| 1324 |
// Set the new URL |
| 1325 |
_pagelayer_set_tmp_atts(row, 'url', input.val()); |
| 1326 |
_pagelayer_set_atts(row, input.val()); |
| 1327 |
|
| 1328 |
}); |
| 1329 |
|
| 1330 |
} |
| 1331 |
|
| 1332 |
// The Media Property |
| 1333 |
function pagelayer_elp_media(row, prop){ |
| 1334 |
|
| 1335 |
var tmp = prop.c['name']+'-url'; |
| 1336 |
var src = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : prop.c['val']; |
| 1337 |
|
| 1338 |
var div = '<div class="pagelayer-elp-media-div pagelayer-elp-input-icon">'+ |
| 1339 |
'<input class="pagelayer-elp-media" value="'+src+'" type="text" />'+ |
| 1340 |
'<i class="fa fa-bars" />'+ |
| 1341 |
'</div>'; |
| 1342 |
|
| 1343 |
row.append(div); |
| 1344 |
|
| 1345 |
row.find('.pagelayer-elp-media-div .fa-bars').on('click', function(){ |
| 1346 |
|
| 1347 |
var button = jQuery(this); |
| 1348 |
|
| 1349 |
// Load the frame |
| 1350 |
var frame = pagelayer_select_frame('media'); |
| 1351 |
|
| 1352 |
frame.on({ |
| 1353 |
|
| 1354 |
'select': function(){ |
| 1355 |
|
| 1356 |
var state = frame.state(); |
| 1357 |
var id = url = ''; |
| 1358 |
|
| 1359 |
// External URL |
| 1360 |
if('props' in state){ |
| 1361 |
|
| 1362 |
id = url = state.props.attributes.url; |
| 1363 |
|
| 1364 |
// Internal from gallery |
| 1365 |
}else{ |
| 1366 |
|
| 1367 |
var attachment = frame.state().get('selection').first().toJSON(); |
| 1368 |
//console.log(attachment); |
| 1369 |
|
| 1370 |
id = attachment.id; |
| 1371 |
url = attachment.url; |
| 1372 |
|
| 1373 |
} |
| 1374 |
|
| 1375 |
// Update URL |
| 1376 |
button.prev().val(url); |
| 1377 |
|
| 1378 |
// Save and render |
| 1379 |
_pagelayer_set_tmp_atts(row, 'url', url); |
| 1380 |
_pagelayer_set_atts(row, id); |
| 1381 |
|
| 1382 |
} |
| 1383 |
|
| 1384 |
}); |
| 1385 |
|
| 1386 |
frame.open(button); |
| 1387 |
|
| 1388 |
return false; |
| 1389 |
|
| 1390 |
}); |
| 1391 |
|
| 1392 |
// Edited the media URL directly |
| 1393 |
row.find('.pagelayer-elp-media').on('change', function(){ |
| 1394 |
|
| 1395 |
var input = jQuery(this); |
| 1396 |
|
| 1397 |
// Set the new URL |
| 1398 |
_pagelayer_set_tmp_atts(row, 'url', input.val()); |
| 1399 |
_pagelayer_set_atts(row, input.val()); |
| 1400 |
|
| 1401 |
}); |
| 1402 |
|
| 1403 |
} |
| 1404 |
|
| 1405 |
// The Slider Property |
| 1406 |
function pagelayer_elp_slider(row, prop){ |
| 1407 |
|
| 1408 |
var div = '<div class="pagelayer-elp-slider-div">'+ |
| 1409 |
'<input type="range" class="pagelayer-elp-slider" value="'+prop.c['val']+'" min="'+prop['min']+'" max="'+prop['max']+'" step="'+prop['step']+'"/>'+ |
| 1410 |
'<input type="number" class="pagelayer-elp-slider-value" value="'+prop.c['val']+'" min="'+prop['min']+'" max="'+prop['max']+'" step="'+prop['step']+'"/>'+ |
| 1411 |
'</div>'+ |
| 1412 |
'</div>'; |
| 1413 |
|
| 1414 |
row.append(div); |
| 1415 |
|
| 1416 |
// Set an value in span |
| 1417 |
row.find('.pagelayer-elp-slider-div input').on('input', function(){ |
| 1418 |
|
| 1419 |
row.find('.pagelayer-elp-slider-div input').val(this.value); |
| 1420 |
|
| 1421 |
_pagelayer_set_atts(row, this.value);// Save and Render |
| 1422 |
|
| 1423 |
}); |
| 1424 |
|
| 1425 |
} |
| 1426 |
|
| 1427 |
// The Editor proprety |
| 1428 |
function pagelayer_elp_editor(row, prop){ |
| 1429 |
|
| 1430 |
var div = '<div class="pagelayer-elp-editor-div">'+ |
| 1431 |
'<textarea class="pagelayer-elp-editor">'+prop.c['val']+'</textarea>'+ |
| 1432 |
'</div>'; |
| 1433 |
|
| 1434 |
row.append(div); |
| 1435 |
|
| 1436 |
var editor = row.find('.pagelayer-elp-editor'); |
| 1437 |
|
| 1438 |
// No SVG Icons for now |
| 1439 |
//jQuery.trumbowyg.svgPath = false; |
| 1440 |
|
| 1441 |
// Initiate the editor |
| 1442 |
editor.trumbowyg({ |
| 1443 |
autogrow: false, |
| 1444 |
btns:[ |
| 1445 |
['viewHTML'], |
| 1446 |
['undo', 'redo'], // Only supported in Blink browsers |
| 1447 |
['formatting'], |
| 1448 |
['foreColor', 'backColor'], |
| 1449 |
['strong', 'em', 'del'], |
| 1450 |
['superscript', 'subscript'], |
| 1451 |
['link'], |
| 1452 |
['wpmedia'], |
| 1453 |
['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'], |
| 1454 |
['unorderedList', 'orderedList'], |
| 1455 |
['horizontalRule'], |
| 1456 |
['removeformat'], |
| 1457 |
['fullscreen'] |
| 1458 |
], |
| 1459 |
imageWidthModalEdit: true, |
| 1460 |
|
| 1461 |
// Handle the changes made in the editor |
| 1462 |
}).on('tbwchange', function(){ |
| 1463 |
_pagelayer_set_atts(row, editor.trumbowyg('html'));// Save and Render |
| 1464 |
}); |
| 1465 |
|
| 1466 |
} |
| 1467 |
|
| 1468 |
// The Link proprety |
| 1469 |
function pagelayer_elp_link(row, prop){ |
| 1470 |
|
| 1471 |
// TODO : Implement pagelayer-elp-link-icon |
| 1472 |
var div = '<div class="pagelayer-elp-link-div pagelayer-elp-input-icon">'+ |
| 1473 |
'<input class="pagelayer-elp-link" type="text" value="'+prop.c['val']+'" />'+ |
| 1474 |
'<i class="fa fa-link pagelayer-elp-link-icon" />'+ |
| 1475 |
'</div>'; |
| 1476 |
|
| 1477 |
row.append(div); |
| 1478 |
|
| 1479 |
// Set a Link |
| 1480 |
row.find('.pagelayer-elp-link').on('change', function(){ |
| 1481 |
_pagelayer_set_atts(row, jQuery(this).val());// Save and Render |
| 1482 |
}); |
| 1483 |
|
| 1484 |
} |
| 1485 |
|
| 1486 |
// The Textarea property |
| 1487 |
function pagelayer_elp_textarea(row, prop){ |
| 1488 |
|
| 1489 |
var div = '<div class="pagelayer-elp-textarea-div">'+ |
| 1490 |
'<textarea class="pagelayer-elp-textarea">'+prop.c['val']+'</textarea>'+ |
| 1491 |
'</div>'; |
| 1492 |
|
| 1493 |
row.append(div); |
| 1494 |
|
| 1495 |
// Handle on change |
| 1496 |
row.find('.pagelayer-elp-textarea').on('input', function(){ |
| 1497 |
_pagelayer_set_atts(row, pagelayer_trim(jQuery(this).val()));// Save and Render |
| 1498 |
}); |
| 1499 |
}; |
| 1500 |
|
| 1501 |
// Clear all editable |
| 1502 |
function pagelayer_clear_editable(){ |
| 1503 |
|
| 1504 |
// Destroy all |
| 1505 |
for(var x in pagelayer_editor){ |
| 1506 |
pagelayer_editor[x].pen.destroy(); |
| 1507 |
pagelayer_editor[x].$.removeClass('pagelayer-pen'); |
| 1508 |
} |
| 1509 |
|
| 1510 |
}; |
| 1511 |
|
| 1512 |
// Makes a field editable in the DOM |
| 1513 |
function pagelayer_make_editable(jEle, e){ |
| 1514 |
|
| 1515 |
// Is it already setup ? |
| 1516 |
if(jEle.hasClass('pagelayer-pen')){ |
| 1517 |
//console.log('HERE'); |
| 1518 |
return true; |
| 1519 |
} |
| 1520 |
|
| 1521 |
var prop = jEle.attr('pagelayer-editable'); |
| 1522 |
|
| 1523 |
// Destroy the existing pen |
| 1524 |
if(!pagelayer_empty(pagelayer_editor[prop])){ |
| 1525 |
pagelayer_editor[prop].pen.destroy(); |
| 1526 |
pagelayer_editor[prop].$.removeClass('pagelayer-pen'); |
| 1527 |
} |
| 1528 |
|
| 1529 |
// The parent element |
| 1530 |
var pEle = jEle.closest('.pagelayer-ele'); |
| 1531 |
|
| 1532 |
var options = { |
| 1533 |
class: 'pagelayer-pen', |
| 1534 |
editor: jEle[0], |
| 1535 |
list: ['bold', 'italic', 'underline', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'strike'], |
| 1536 |
stay: false |
| 1537 |
} |
| 1538 |
|
| 1539 |
// Setup the editor |
| 1540 |
pagelayer_editor[prop] = {}; |
| 1541 |
pagelayer_editor[prop].pen = new Pen(options); |
| 1542 |
pagelayer_editor[prop].$ = jEle; |
| 1543 |
|
| 1544 |
// Are we the clicked object, then set the focus |
| 1545 |
if(e){ |
| 1546 |
var target = jQuery(e.target); |
| 1547 |
if(target.is(jEle).length || jEle.find(target).length){ |
| 1548 |
jEle.focus(); |
| 1549 |
} |
| 1550 |
} |
| 1551 |
|
| 1552 |
// Reverse setup the event |
| 1553 |
jEle.on('blur', function(){ |
| 1554 |
//pagelayer_editor[prop].pen.destroy(); |
| 1555 |
}); |
| 1556 |
|
| 1557 |
// Reverse setup the event |
| 1558 |
jEle.on('focus', function(){ |
| 1559 |
jQuery('.pagelayer-pen-menu').hide(); |
| 1560 |
pagelayer_editor[prop].pen.rebuild(); |
| 1561 |
}); |
| 1562 |
|
| 1563 |
// Reverse setup the event |
| 1564 |
jEle.on('input', function(){ |
| 1565 |
|
| 1566 |
var val = pagelayer_trim(jEle.html()); |
| 1567 |
|
| 1568 |
// Set the property as well |
| 1569 |
pagelayer_set_atts(pEle, prop, val); |
| 1570 |
|
| 1571 |
// Update the property |
| 1572 |
var input = pagelayer.$$('[pagelayer-elp-name='+prop+']').find('input,textarea,.trumbowyg-editor'); |
| 1573 |
//console.log(input); |
| 1574 |
|
| 1575 |
if(input.length > 0){ |
| 1576 |
if(input.hasClass('trumbowyg-editor')){ |
| 1577 |
input.html(val); |
| 1578 |
}else{ |
| 1579 |
input.val(val); |
| 1580 |
} |
| 1581 |
} |
| 1582 |
|
| 1583 |
}); |
| 1584 |
|
| 1585 |
} |
| 1586 |
|
| 1587 |
// The Icon Property |
| 1588 |
function pagelayer_elp_icon(row, prop){ |
| 1589 |
|
| 1590 |
var $ = jQuery; |
| 1591 |
|
| 1592 |
// Find the available icons |
| 1593 |
if(pagelayer_empty(pagelayer_icons)){ |
| 1594 |
|
| 1595 |
pagelayer_icons = $.map($.map(document.styleSheets, function(s){ |
| 1596 |
|
| 1597 |
if(s.href && s.href.endsWith('font-awesome.min.css?ver='+pagelayer_ver)){ |
| 1598 |
return s; |
| 1599 |
} |
| 1600 |
return null; |
| 1601 |
|
| 1602 |
})[0].cssRules, function(r) { |
| 1603 |
|
| 1604 |
if(r.cssText.indexOf('::before { content: ') > 0){ |
| 1605 |
return r.cssText.substring(4,r.cssText.indexOf('::')); |
| 1606 |
} |
| 1607 |
return null; |
| 1608 |
|
| 1609 |
}); |
| 1610 |
|
| 1611 |
} |
| 1612 |
|
| 1613 |
var icons = pagelayer_icons; |
| 1614 |
//console.log(icons); |
| 1615 |
|
| 1616 |
if('list' in prop && prop.list.length > 0){ |
| 1617 |
icons = prop.list; |
| 1618 |
} |
| 1619 |
|
| 1620 |
// Icon function |
| 1621 |
var icon_html = function(name){ |
| 1622 |
return '<span class="pagelayer-elp-icon-span">'+ |
| 1623 |
'<i class="fa fa-'+name+'" icon="fa fa-'+name+'" /> '+name+ |
| 1624 |
'</span>'; |
| 1625 |
} |
| 1626 |
|
| 1627 |
var div = '<div class="pagelayer-elp-icon-div">'+ |
| 1628 |
'<div class="pagelayer-elp-icon-preview">'+ |
| 1629 |
'<i class="fa fa-'+prop.c['val']+'"></i>'+ |
| 1630 |
'<span class="pagelayer-elp-icon-name">'+ |
| 1631 |
(pagelayer_empty(prop.c['val'])?'Choose icon':prop.c['val'])+ |
| 1632 |
'</span>'+ |
| 1633 |
'</div>'+ |
| 1634 |
'<span class="pagelayer-elp-icon-open">▼</span>'+ |
| 1635 |
'</div>'; |
| 1636 |
|
| 1637 |
row.append(div); |
| 1638 |
|
| 1639 |
// Make all icons list |
| 1640 |
var html = '<div class="pagelayer-elp-icon-selector">'+ |
| 1641 |
'<input type="text" class="pagelayer-elp-search-icon" name="search-icon" placeholder="'+pagelayer_l('search')+'">'+ |
| 1642 |
'<div class="pagelayer-elp-icon-list">'; |
| 1643 |
|
| 1644 |
for(var x in icons){ |
| 1645 |
html += icon_html(icons[x]); |
| 1646 |
} |
| 1647 |
|
| 1648 |
html += '</div>'+ |
| 1649 |
'</div>'; |
| 1650 |
|
| 1651 |
row.append(html); |
| 1652 |
|
| 1653 |
// Open the selector |
| 1654 |
row.find('.pagelayer-elp-icon-div').on('click', function(){ |
| 1655 |
row.find('.pagelayer-elp-icon-selector').slideToggle(); |
| 1656 |
}); |
| 1657 |
|
| 1658 |
// Handle search of icon |
| 1659 |
row.find('.pagelayer-elp-search-icon').on('keyup', function(){ |
| 1660 |
|
| 1661 |
var v = this.value; |
| 1662 |
var span =''; |
| 1663 |
v = v.toLowerCase(); |
| 1664 |
v = v.replace(/\s+/g, '-'); |
| 1665 |
|
| 1666 |
for(var x in icons){ |
| 1667 |
if(icons[x].substring(0, v.length) === v){ |
| 1668 |
span += icon_html(icons[x]); |
| 1669 |
} |
| 1670 |
} |
| 1671 |
|
| 1672 |
row.find('.pagelayer-elp-icon-list').empty().html(span); |
| 1673 |
|
| 1674 |
}); |
| 1675 |
|
| 1676 |
// Handle click within the icon selector |
| 1677 |
row.find('.pagelayer-elp-icon-selector').on('click', function(e){ |
| 1678 |
|
| 1679 |
var jEle = jQuery(e.target); |
| 1680 |
var i = jEle.children().attr('icon'); |
| 1681 |
if(pagelayer_empty(i)){ |
| 1682 |
return false; |
| 1683 |
} |
| 1684 |
|
| 1685 |
i = i.replace('fa fa-', ''); |
| 1686 |
|
| 1687 |
// Set the icon in this list |
| 1688 |
row.find('.pagelayer-elp-icon-preview').html('<i class="fa fa-'+i+'"></i><span class="pagelayer-elp-icon-name">'+i+'</span>'); |
| 1689 |
row.find('.pagelayer-elp-icon-selector').slideUp(); |
| 1690 |
|
| 1691 |
_pagelayer_set_atts(row, i);// Save and Render |
| 1692 |
|
| 1693 |
return false; |
| 1694 |
|
| 1695 |
}); |
| 1696 |
|
| 1697 |
} |
| 1698 |
|
| 1699 |
// The Color Property |
| 1700 |
function pagelayer_elp_color(row, prop){ |
| 1701 |
|
| 1702 |
var div = '<div class="pagelayer-elp-color-div">'+ |
| 1703 |
'<div class="pagelayer-elp-color-preview"></div>'+ |
| 1704 |
'</div>'; |
| 1705 |
|
| 1706 |
row.append(div); |
| 1707 |
|
| 1708 |
row.find('.pagelayer-elp-color-preview').css('background', prop.c['val']); |
| 1709 |
|
| 1710 |
var picker = new Picker({ |
| 1711 |
parent : row.find('.pagelayer-elp-color-div')[0], |
| 1712 |
popup : 'left', |
| 1713 |
color : prop.c['val'], |
| 1714 |
doc: window.parent.document |
| 1715 |
}); |
| 1716 |
|
| 1717 |
// Handle selected color |
| 1718 |
picker.onChange = function(color) { |
| 1719 |
row.find('.pagelayer-elp-color-preview').css('background', color.rgbaString); |
| 1720 |
_pagelayer_set_atts(row, color.hex);// Save and Render |
| 1721 |
}; |
| 1722 |
|
| 1723 |
} |
| 1724 |
|
| 1725 |
// The Spinner property |
| 1726 |
function pagelayer_elp_spinner(row, prop){ |
| 1727 |
|
| 1728 |
var div = '<div class="pagelayer-elp-spinner-div">'+ |
| 1729 |
'<input type="number" class="pagelayer-elp-spinner" name="'+prop.c['name']+'"'+ |
| 1730 |
' min="'+prop['min']+'" max="'+prop['max']+'" step="'+prop['step']+'" value="'+prop.c['val']+'"/>'+ |
| 1731 |
'</div>'; |
| 1732 |
|
| 1733 |
row.append(div); |
| 1734 |
|
| 1735 |
row.find('input').on('input', function(){ |
| 1736 |
_pagelayer_set_atts(row, jQuery(this).val());// Save and Render |
| 1737 |
}); |
| 1738 |
|
| 1739 |
} |
| 1740 |
|
| 1741 |
// The Group Property |
| 1742 |
function pagelayer_elp_group(row, prop){ |
| 1743 |
|
| 1744 |
// Remove the pagelayer-show-tab |
| 1745 |
row.removeAttr('pagelayer-show-tab'); |
| 1746 |
|
| 1747 |
var div = '<div class="pagelayer-elp-group-div"></div>'+ |
| 1748 |
'<center><button class="pagelayer-elp-button">'+prop['text']+'</button></center>'; |
| 1749 |
|
| 1750 |
row.append(div); |
| 1751 |
|
| 1752 |
// Add button |
| 1753 |
var add_item = function(row){ |
| 1754 |
|
| 1755 |
// First add the element inside the group element |
| 1756 |
var id = pagelayer_element_add_child(prop.el.$, prop['sc']); |
| 1757 |
pagelayer_element_setup('[pagelayer-id='+id+']', true); |
| 1758 |
|
| 1759 |
show_item(id); |
| 1760 |
|
| 1761 |
}; |
| 1762 |
|
| 1763 |
// Show the properties of the existing things |
| 1764 |
var show_item = function(id){ |
| 1765 |
|
| 1766 |
// Since the element is added very fast, we reselect via jQuery for it to re-access the dom |
| 1767 |
jEle = jQuery('[pagelayer-id='+id+']'); |
| 1768 |
|
| 1769 |
var label_param = prop['item_label']['param'] || ''; |
| 1770 |
var title = pagelayer_get_att(jEle, label_param) || prop['item_label']['default']; |
| 1771 |
|
| 1772 |
// Create the HTML |
| 1773 |
var holder = jQuery('<div class="pagelayer-elp-group-item" pagelayer-group-item-id="'+id+'">'+ |
| 1774 |
'<div class="pagelayer-elp-group-item-head">'+ |
| 1775 |
'<span class="pagelayer-elp-group-item-drag"><i class="fa fa-bars" /></span>'+ |
| 1776 |
'<span class="pagelayer-elp-group-item-title">'+title+'</span>'+ |
| 1777 |
'<span class="pagelayer-elp-group-item-del"><i class="fa fa-trash" /></span>'+ |
| 1778 |
'</div>'+ |
| 1779 |
'<div class="pagelayer-elp-group-item-body"></div>'+ |
| 1780 |
'</div>'); |
| 1781 |
|
| 1782 |
// Append to the row |
| 1783 |
row.find('.pagelayer-elp-group-div').append(holder); |
| 1784 |
|
| 1785 |
pagelayer_elpd_generate(jEle, holder.find('.pagelayer-elp-group-item-body')); |
| 1786 |
|
| 1787 |
// Change the group item title |
| 1788 |
var tmp_title = holder.find('[pagelayer-elp-name='+label_param+'] [name='+label_param+']') |
| 1789 |
if(tmp_title.length > 0){ |
| 1790 |
jQuery(tmp_title).on('input', function(){ |
| 1791 |
holder.find('.pagelayer-elp-group-item-title').html(tmp_title.val()); |
| 1792 |
}); |
| 1793 |
} |
| 1794 |
|
| 1795 |
// Setup the toggle |
| 1796 |
holder.find('.pagelayer-elp-group-item-title').on('click', function(){ |
| 1797 |
holder.find('.pagelayer-elp-group-item-body').toggle('slow'); |
| 1798 |
}); |
| 1799 |
|
| 1800 |
// Delete the item |
| 1801 |
holder.find('.pagelayer-elp-group-item-head .fa-trash').on('click', function(){ |
| 1802 |
holder.remove(); |
| 1803 |
pagelayer_delete_element('[pagelayer-id='+id+']'); |
| 1804 |
}); |
| 1805 |
|
| 1806 |
}; |
| 1807 |
|
| 1808 |
// Handle click of the group |
| 1809 |
row.find('.pagelayer-elp-button').on('click', function(){ |
| 1810 |
add_item(row); |
| 1811 |
}); |
| 1812 |
|
| 1813 |
// Find the existing items |
| 1814 |
prop.el.$.find('[pagelayer-tag='+prop['sc']+']').each(function(){ |
| 1815 |
var jEle = jQuery(this); |
| 1816 |
var id = pagelayer_assign_id(jEle); |
| 1817 |
show_item(id); |
| 1818 |
}); |
| 1819 |
}; |
| 1820 |
|
| 1821 |
// The Datetime Property |
| 1822 |
function pagelayer_elp_datetime(row, prop){ |
| 1823 |
|
| 1824 |
var div = '<div class="pagelayer-elp-datetime-div pagelayer-elp-input-icon">'+ |
| 1825 |
'<input type="date" class="pagelayer-elp-datetime" name="'+prop.c['name']+'"/>'+ |
| 1826 |
'</div>'; |
| 1827 |
|
| 1828 |
row.append(div); |
| 1829 |
|
| 1830 |
row.find('.pagelayer-elp-datetime').on('change', function(){ |
| 1831 |
_pagelayer_set_atts(row, jQuery(this).val());// Save and Render |
| 1832 |
}); |
| 1833 |
|
| 1834 |
}; |
| 1835 |
|
| 1836 |
// The padding property |
| 1837 |
function pagelayer_elp_padding(row, prop){ |
| 1838 |
var val = ['', '', '', '']; |
| 1839 |
|
| 1840 |
if(prop.c['val'].length > 0){ |
| 1841 |
val = prop.c['val'].split(','); |
| 1842 |
//console.log(val) |
| 1843 |
} |
| 1844 |
|
| 1845 |
var div = '<div class="pagelayer-elp-padding-div">'+ |
| 1846 |
'<input type="number" class="pagelayer-elp-padding" value="'+parseInt(val[0])+'"></input>'+ |
| 1847 |
'<input type="number" class="pagelayer-elp-padding" value="'+parseInt(val[1])+'"></input>'+ |
| 1848 |
'<input type="number" class="pagelayer-elp-padding" value="'+parseInt(val[2])+'"></input>'+ |
| 1849 |
'<input type="number" class="pagelayer-elp-padding" value="'+parseInt(val[3])+'"></input>'+ |
| 1850 |
'<i class="fa fa-link" />'+ |
| 1851 |
'</div>'; |
| 1852 |
|
| 1853 |
row.append(div); |
| 1854 |
|
| 1855 |
// Is the value linked ? |
| 1856 |
var link = row.find('.pagelayer-elp-padding-div .fa'); |
| 1857 |
var isLinked = 1; |
| 1858 |
//isLinked = isLinked == 2 ? false : true; |
| 1859 |
//console.log(isLinked); |
| 1860 |
var tmp_val = val[0]; |
| 1861 |
|
| 1862 |
for(var p_val in val){ |
| 1863 |
|
| 1864 |
// Check if unlinked |
| 1865 |
if(tmp_val != val[p_val] ){ |
| 1866 |
isLinked = 0; |
| 1867 |
} |
| 1868 |
tmp_val = val[p_val]; |
| 1869 |
} |
| 1870 |
|
| 1871 |
if(isLinked){ |
| 1872 |
link.addClass('pagelayer-elp-padding-linked'); |
| 1873 |
}else{ |
| 1874 |
link.removeClass('pagelayer-elp-padding-linked'); |
| 1875 |
} |
| 1876 |
|
| 1877 |
// Handle link on click |
| 1878 |
link.on('click', function(){ |
| 1879 |
|
| 1880 |
var linked = link.hasClass('pagelayer-elp-padding-linked'); |
| 1881 |
|
| 1882 |
if(linked){ |
| 1883 |
link.removeClass('pagelayer-elp-padding-linked'); |
| 1884 |
}else{ |
| 1885 |
link.addClass('pagelayer-elp-padding-linked'); |
| 1886 |
} |
| 1887 |
|
| 1888 |
}); |
| 1889 |
|
| 1890 |
row.find('input').on('input', function(){ |
| 1891 |
|
| 1892 |
// Are the values linked |
| 1893 |
var linked = row.find('.pagelayer-elp-padding-div .fa').hasClass('pagelayer-elp-padding-linked'); |
| 1894 |
|
| 1895 |
if(linked){ |
| 1896 |
var val = jQuery(this).val(); |
| 1897 |
row.find('input').each(function(){ |
| 1898 |
jQuery(this).val(val); |
| 1899 |
}); |
| 1900 |
} |
| 1901 |
|
| 1902 |
var vals = []; |
| 1903 |
|
| 1904 |
// Get all values |
| 1905 |
row.find('input').each(function(){ |
| 1906 |
var val = jQuery(this).val(); |
| 1907 |
vals.push(val ? val : 0); |
| 1908 |
}); |
| 1909 |
|
| 1910 |
_pagelayer_set_atts(row, vals);// Save and Render |
| 1911 |
}); |
| 1912 |
|
| 1913 |
}; |
| 1914 |
|
| 1915 |
// The shadow property |
| 1916 |
function pagelayer_elp_shadow(row, prop){ |
| 1917 |
|
| 1918 |
var val =['','','','']; |
| 1919 |
|
| 1920 |
// Do we have a val ? |
| 1921 |
if(!pagelayer_empty(prop.c['val'])){ |
| 1922 |
val = prop.c['val'].split(','); |
| 1923 |
} |
| 1924 |
|
| 1925 |
//var val = {color: '', blur: '', horizontal: '', vertical: ''}; |
| 1926 |
|
| 1927 |
var div = '<span class="pagelayer-prop-edit"><i class="fa fa-pencil"></i></span>'+ |
| 1928 |
'<div class="pagelayer-elp-shadow-div">'+ |
| 1929 |
'<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-horizontal">'+ |
| 1930 |
'<label class="pagelayer-elp-label">Horizontal</label>'+ |
| 1931 |
'<input class="pagelayer-elp-shadow-input" type="number" max="100" min="-100" step="1" class="pagelayer-elp-shadow-blur" value="'+val[0]+'"></input>'+ |
| 1932 |
'</div>'+ |
| 1933 |
'<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-vertical">'+ |
| 1934 |
'<label class="pagelayer-elp-label">Vertical</label>'+ |
| 1935 |
'<input class="pagelayer-elp-shadow-input" type="number" max="100" min="-100" step="1" class="pagelayer-elp-shadow-blur" value="'+val[1]+'"></input>'+ |
| 1936 |
'</div>'+ |
| 1937 |
'<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-blur">'+ |
| 1938 |
'<label class="pagelayer-elp-label">Blur</label>'+ |
| 1939 |
'<input class="pagelayer-elp-shadow-input" type="number" max="100" min="0" step="1" class="pagelayer-elp-shadow-blur" value="'+val[2]+'"></input>'+ |
| 1940 |
'</div>'+ |
| 1941 |
'<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-color">'+ |
| 1942 |
'<label class="pagelayer-elp-label">color</label>'+ |
| 1943 |
'<div class="pagelayer-elp-color-div">'+ |
| 1944 |
'<div class="pagelayer-elp-color-preview"></div>'+ |
| 1945 |
'</div>'+ |
| 1946 |
'</div>'+ |
| 1947 |
'</div>'; |
| 1948 |
|
| 1949 |
row.append(div); |
| 1950 |
|
| 1951 |
row.find('.pagelayer-prop-edit').on('click', function(){ |
| 1952 |
row.find('.pagelayer-elp-shadow-div').toggleClass('pagelayer-prop-show'); |
| 1953 |
}); |
| 1954 |
|
| 1955 |
row.find('.pagelayer-elp-color-preview').css('background', val[3]); |
| 1956 |
|
| 1957 |
var picker = new Picker({ |
| 1958 |
parent : row.find('.pagelayer-elp-color-div')[0], |
| 1959 |
popup : 'left', |
| 1960 |
doc: window.parent.document |
| 1961 |
}); |
| 1962 |
|
| 1963 |
// Handle selected color |
| 1964 |
picker.onChange = function(color) { |
| 1965 |
row.find('.pagelayer-elp-color-preview').css('background', color.rgbaString); |
| 1966 |
val[3] = (color.hex ? color.hex : ''); |
| 1967 |
_pagelayer_set_atts(row, val); |
| 1968 |
}; |
| 1969 |
|
| 1970 |
row.find('input').on('input', function(){ |
| 1971 |
var i = 0; |
| 1972 |
row.find('.pagelayer-elp-shadow-input').each(function(){ |
| 1973 |
var value = jQuery(this).val(); |
| 1974 |
val[i] = (value ? value : ''); |
| 1975 |
i++; |
| 1976 |
}); |
| 1977 |
_pagelayer_set_atts(row, val); |
| 1978 |
}); |
| 1979 |
|
| 1980 |
} |
| 1981 |
|
| 1982 |
// The filter property |
| 1983 |
function pagelayer_elp_filter(row, prop){ |
| 1984 |
|
| 1985 |
var val =['','','','','','','']; |
| 1986 |
|
| 1987 |
// Do we have a val ? |
| 1988 |
if(!pagelayer_empty(prop.c['val'])){ |
| 1989 |
val = prop.c['val'].split(','); |
| 1990 |
} |
| 1991 |
|
| 1992 |
var filters = [['blur','10','0.1'],['brightness','200','1'],['contrast','200','1'],['grayscale','200','1'],['hue','360','1'],['opacity','100','1'],['saturate','200','1']]; |
| 1993 |
|
| 1994 |
var div = '<span class="pagelayer-prop-edit"><i class="fa fa-pencil"></i></span>'+ |
| 1995 |
'<div class="pagelayer-elp-filter-div">'; |
| 1996 |
|
| 1997 |
jQuery.each(val,function(key, value){ |
| 1998 |
div += '<div class="pagelayer-elp-prop-grp pagelayer-elp-filter-'+filters[key][0]+'">'+ |
| 1999 |
'<label class="pagelayer-elp-label">'+filters[key][0]+'</label>'+ |
| 2000 |
'<input class="pagelayer-elp-slider pagelayer-elp-filter-input" type="range" max="'+filters[key][1]+'" min="0" step="'+filters[key][2]+'" class="pagelayer-elp-filter-'+filters[key][0]+'" value="'+value+'"></input>'+ |
| 2001 |
'<span class="pagelayer-elp-filter-val">'+value+'</span>'+ |
| 2002 |
'</div>'; |
| 2003 |
}); |
| 2004 |
|
| 2005 |
div += '</div>'; |
| 2006 |
|
| 2007 |
row.append(div); |
| 2008 |
|
| 2009 |
row.find('.pagelayer-prop-edit').on('click', function(){ |
| 2010 |
row.find('.pagelayer-elp-filter-div').toggleClass('pagelayer-prop-show'); |
| 2011 |
}); |
| 2012 |
|
| 2013 |
row.find('input').on('input', function(){ |
| 2014 |
var val = []; |
| 2015 |
jQuery(this).parent().find('span').html(this.value); |
| 2016 |
row.find('.pagelayer-elp-filter-input').each(function(){ |
| 2017 |
var value = jQuery(this).val(); |
| 2018 |
val.push(value ? value : 'none'); |
| 2019 |
}); |
| 2020 |
_pagelayer_set_atts(row, val); |
| 2021 |
}); |
| 2022 |
|
| 2023 |
} |
| 2024 |
|
| 2025 |
// The gradient property |
| 2026 |
function pagelayer_elp_gradient(row, prop){ |
| 2027 |
|
| 2028 |
var val =['','','','','','','']; |
| 2029 |
|
| 2030 |
// Do we have a val ? |
| 2031 |
if(!pagelayer_empty(prop.c['val'])){ |
| 2032 |
val = prop.c['val'].split(','); |
| 2033 |
} |
| 2034 |
|
| 2035 |
//var val = {color: '', blur: '', horizontal: '', vertical: ''}; |
| 2036 |
|
| 2037 |
var div = '<div class="pagelayer-elp-gradient-div">'+ |
| 2038 |
'<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-angle">'+ |
| 2039 |
'<label class="pagelayer-elp-label">Angle</label>'+ |
| 2040 |
'<input class="pagelayer-elp-gradient-input" type="number" max="360" min="0" step="1" class="pagelayer-elp-gradient-angle" value="'+val[0]+'"></input>'+ |
| 2041 |
'</div>'+ |
| 2042 |
'<div class="pagelayer-elp-prop-grp">'+ |
| 2043 |
'<label class="pagelayer-elp-label">color 1</label>'+ |
| 2044 |
'<div class="pagelayer-elp-color-div">'+ |
| 2045 |
'<div class="pagelayer-elp-gradient-color1 pagelayer-elp-color-preview"></div>'+ |
| 2046 |
'</div>'+ |
| 2047 |
'</div>'+ |
| 2048 |
'<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-per1">'+ |
| 2049 |
'<label class="pagelayer-elp-label">Percentage 1</label>'+ |
| 2050 |
'<input class="pagelayer-elp-gradient-input" type="number" max="100" min="-100" step="1" class="pagelayer-elp-gradient-per1" value="'+val[2]+'"></input>'+ |
| 2051 |
'</div>'+ |
| 2052 |
'<div class="pagelayer-elp-prop-grp">'+ |
| 2053 |
'<label class="pagelayer-elp-label">color 2</label>'+ |
| 2054 |
'<div class="pagelayer-elp-color-div">'+ |
| 2055 |
'<div class="pagelayer-elp-gradient-color2 pagelayer-elp-color-preview"></div>'+ |
| 2056 |
'</div>'+ |
| 2057 |
'</div>'+ |
| 2058 |
'<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-per2">'+ |
| 2059 |
'<label class="pagelayer-elp-label">Percentage 2</label>'+ |
| 2060 |
'<input class="pagelayer-elp-gradient-input" type="number" max="100" min="0" step="1" class="pagelayer-elp-gradient-per2" value="'+val[4]+'"></input>'+ |
| 2061 |
'</div>'+ |
| 2062 |
'<div class="pagelayer-elp-prop-grp">'+ |
| 2063 |
'<label class="pagelayer-elp-label">color 3</label>'+ |
| 2064 |
'<div class="pagelayer-elp-color-div">'+ |
| 2065 |
'<div class="pagelayer-elp-gradient-color3 pagelayer-elp-color-preview"></div>'+ |
| 2066 |
'</div>'+ |
| 2067 |
'</div>'+ |
| 2068 |
'<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-per3">'+ |
| 2069 |
'<label class="pagelayer-elp-label">Percentage 3</label>'+ |
| 2070 |
'<input class="pagelayer-elp-gradient-input" type="number" max="100" min="0" step="1" class="pagelayer-elp-gradient-per3" value="'+val[6]+'"></input>'+ |
| 2071 |
'</div>'+ |
| 2072 |
'</div>'; |
| 2073 |
|
| 2074 |
row.append(div); |
| 2075 |
var i = 1; |
| 2076 |
row.find('.pagelayer-elp-color-preview').each(function(){ |
| 2077 |
jQuery(this).css('background', val[i]); |
| 2078 |
i = i+2; |
| 2079 |
}); |
| 2080 |
|
| 2081 |
var picker1 = new Picker({ |
| 2082 |
parent : row.find('.pagelayer-elp-gradient-color1')[0], |
| 2083 |
popup : 'left', |
| 2084 |
doc: window.parent.document |
| 2085 |
}); |
| 2086 |
|
| 2087 |
// Handle selected color |
| 2088 |
picker1.onChange = function(color) { |
| 2089 |
row.find('.pagelayer-elp-gradient-color1').css('background', color.rgbaString); |
| 2090 |
val[1] = (color.hex ? color.hex : ''); |
| 2091 |
_pagelayer_set_atts(row, val); |
| 2092 |
}; |
| 2093 |
|
| 2094 |
var picker2 = new Picker({ |
| 2095 |
parent : row.find('.pagelayer-elp-gradient-color2')[0], |
| 2096 |
popup : 'left', |
| 2097 |
doc: window.parent.document |
| 2098 |
}); |
| 2099 |
|
| 2100 |
// Handle selected color |
| 2101 |
picker2.onChange = function(color) { |
| 2102 |
row.find('.pagelayer-elp-gradient-color2').css('background', color.rgbaString); |
| 2103 |
val[3] = (color.hex ? color.hex : ''); |
| 2104 |
_pagelayer_set_atts(row, val); |
| 2105 |
}; |
| 2106 |
|
| 2107 |
var picker3 = new Picker({ |
| 2108 |
parent : row.find('.pagelayer-elp-gradient-color3')[0], |
| 2109 |
popup : 'left', |
| 2110 |
doc: window.parent.document |
| 2111 |
}); |
| 2112 |
|
| 2113 |
// Handle selected color |
| 2114 |
picker3.onChange = function(color) { |
| 2115 |
row.find('.pagelayer-elp-gradient-color3').css('background', color.rgbaString); |
| 2116 |
val[5] = (color.hex ? color.hex : ''); |
| 2117 |
_pagelayer_set_atts(row, val); |
| 2118 |
}; |
| 2119 |
|
| 2120 |
row.find('input').on('input', function(){ |
| 2121 |
var i = 0; |
| 2122 |
row.find('.pagelayer-elp-gradient-input').each(function(){ |
| 2123 |
var value = jQuery(this).val(); |
| 2124 |
val[i] = (value ? value : ''); |
| 2125 |
i = i+2; |
| 2126 |
}); |
| 2127 |
_pagelayer_set_atts(row, val); |
| 2128 |
}); |
| 2129 |
|
| 2130 |
} |
| 2131 |
|
| 2132 |
// The typography property |
| 2133 |
function pagelayer_elp_typography(row, prop){ |
| 2134 |
|
| 2135 |
var val =['','','','','','','','','','']; |
| 2136 |
|
| 2137 |
// Do we have a val ? |
| 2138 |
if(!pagelayer_empty(prop.c['val'])){ |
| 2139 |
val = prop.c['val'].split(','); |
| 2140 |
} |
| 2141 |
|
| 2142 |
var select = { 'style' : ['', 'normal', 'italic', 'oblique'], |
| 2143 |
'weight' : ['', '100', '200', '300', '400', '500', '600', '700', '800', '900'], |
| 2144 |
'variant' : ['', 'normal', 'small-caps'], |
| 2145 |
'deco-line' : ['', 'none', 'overline', 'line-through', 'underline', 'underline overline'], |
| 2146 |
'deco-style' : ['solid', 'double', 'dotted', 'dashed', 'wavy'], |
| 2147 |
'transform' : ['', 'capitalize', 'uppercase', 'lowercase'], |
| 2148 |
'fonts' : ['', 'ABeeZee', 'Abel', 'Abhaya Libre', 'Abril Fatface', 'Aclonica', 'Acme', 'Actor', 'Adamina', 'Advent Pro', 'Aguafina Script', 'Akronim', 'Aladin', 'Aldrich', 'Alef', 'Alegreya', 'Alegreya SC', 'Alegreya Sans', 'Alegreya Sans SC', 'Aleo', 'Alex Brush', 'Alfa Slab One', 'Alice', 'Alike', 'Alike Angular', 'Allan', 'Allerta', 'Allerta Stencil', 'Allura', 'Almendra', 'Almendra Display', 'Almendra SC', 'Amarante', 'Amaranth', 'Amatic SC', 'Amethysta', 'Amiko', 'Amiri', 'Amita', 'Anaheim', 'Andada', 'Andika', 'Angkor', 'Annie Use Your Telescope', 'Anonymous Pro', 'Antic', 'Antic Didone', 'Antic Slab', 'Anton', 'Arapey', 'Arbutus', 'Arbutus Slab', 'Architects Daughter', 'Archivo', 'Archivo Black', 'Archivo Narrow', 'Aref Ruqaa', 'Arima Madurai', 'Arimo', 'Arizonia', 'Armata', 'Arsenal', 'Artifika', 'Arvo', 'Arya', 'Asap', 'Asap Condensed', 'Asar', 'Asset', 'Assistant', 'Astloch', 'Asul', 'Athiti', 'Atma', 'Atomic Age', 'Aubrey', 'Audiowide', 'Autour One', 'Average', 'Average Sans', 'Averia Gruesa Libre', 'Averia Libre', 'Averia Sans Libre', 'Averia Serif Libre', 'B612', 'B612 Mono', 'Bad Script', 'Bahiana', 'Bai Jamjuree', 'Baloo', 'Baloo Bhai', 'Baloo Bhaijaan', 'Baloo Bhaina', 'Baloo Chettan', 'Baloo Da', 'Baloo Paaji', 'Baloo Tamma', 'Baloo Tammudu', 'Baloo Thambi', 'Balthazar', 'Bangers', 'Barlow', 'Barlow Condensed', 'Barlow Semi Condensed', 'Barrio', 'Basic', 'Battambang', 'Baumans', 'Bayon', 'Belgrano', 'Bellefair', 'Belleza', 'BenchNine', 'Bentham', 'Berkshire Swash', 'Bevan', 'Bigelow Rules', 'Bigshot One', 'Bilbo', 'Bilbo Swash Caps', 'BioRhyme', 'BioRhyme Expanded', 'Biryani', 'Bitter', 'Black And White Picture', 'Black Han Sans', 'Black Ops One', 'Bokor', 'Bonbon', 'Boogaloo', 'Bowlby One', 'Bowlby One SC', 'Brawler', 'Bree Serif', 'Bubblegum Sans', 'Bubbler One', 'Buda', 'Buenard', 'Bungee', 'Bungee Hairline', 'Bungee Inline', 'Bungee Outline', 'Bungee Shade', 'Butcherman', 'Butterfly Kids', 'Cabin', 'Cabin Condensed', 'Cabin Sketch', 'Caesar Dressing', 'Cagliostro', 'Cairo', 'Calligraffitti', 'Cambay', 'Cambo', 'Candal', 'Cantarell', 'Cantata One', 'Cantora One', 'Capriola', 'Cardo', 'Carme', 'Carrois Gothic', 'Carrois Gothic SC', 'Carter One', 'Catamaran', 'Caudex', 'Caveat', 'Caveat Brush', 'Cedarville Cursive', 'Ceviche One', 'Chakra Petch', 'Changa', 'Changa One', 'Chango', 'Charm', 'Charmonman', 'Chathura', 'Chau Philomene One', 'Chela One', 'Chelsea Market', 'Chenla', 'Cherry Cream Soda', 'Cherry Swash', 'Chewy', 'Chicle', 'Chivo', 'Chonburi', 'Cinzel', 'Cinzel Decorative', 'Clicker Script', 'Coda', 'Coda Caption', 'Codystar', 'Coiny', 'Combo', 'Comfortaa', 'Coming Soon', 'Concert One', 'Condiment', 'Content', 'Contrail One', 'Convergence', 'Cookie', 'Copse', 'Corben', 'Cormorant', 'Cormorant Garamond', 'Cormorant Infant', 'Cormorant SC', 'Cormorant Unicase', 'Cormorant Upright', 'Courgette', 'Cousine', 'Coustard', 'Covered By Your Grace', 'Crafty Girls', 'Creepster', 'Crete Round', 'Crimson Text', 'Croissant One', 'Crushed', 'Cuprum', 'Cute Font', 'Cutive', 'Cutive Mono', 'Damion', 'Dancing Script', 'Dangrek', 'David Libre', 'Dawning of a New Day', 'Days One', 'Dekko', 'Delius', 'Delius Swash Caps', 'Delius Unicase', 'Della Respira', 'Denk One', 'Devonshire', 'Dhurjati', 'Didact Gothic', 'Diplomata', 'Diplomata SC', 'Do Hyeon', 'Dokdo', 'Domine', 'Donegal One', 'Doppio One', 'Dorsa', 'Dosis', 'Dr Sugiyama', 'Duru Sans', 'Dynalight', 'EB Garamond', 'Eagle Lake', 'East Sea Dokdo', 'Eater', 'Economica', 'Eczar', 'El Messiri', 'Electrolize', 'Elsie', 'Elsie Swash Caps', 'Emblema One', 'Emilys Candy', 'Encode Sans', 'Encode Sans Condensed', 'Encode Sans Expanded', 'Encode Sans Semi Condensed', 'Encode Sans Semi Expanded', 'Engagement', 'Englebert', 'Enriqueta', 'Erica One', 'Esteban', 'Euphoria Script', 'Ewert', 'Exo', 'Exo 2', 'Expletus Sans', 'Fahkwang', 'Fanwood Text', 'Farsan', 'Fascinate', 'Fascinate Inline', 'Faster One', 'Fasthand', 'Fauna One', 'Faustina', 'Federant', 'Federo', 'Felipa', 'Fenix', 'Finger Paint', 'Fira Mono', 'Fira Sans', 'Fira Sans Condensed', 'Fira Sans Extra Condensed', 'Fjalla One', 'Fjord One', 'Flamenco', 'Flavors', 'Fondamento', 'Fontdiner Swanky', 'Forum', 'Francois One', 'Frank Ruhl Libre', 'Freckle Face', 'Fredericka the Great', 'Fredoka One', 'Freehand', 'Fresca', 'Frijole', 'Fruktur', 'Fugaz One', 'GFS Didot', 'GFS Neohellenic', 'Gabriela', 'Gaegu', 'Gafata', 'Galada', 'Galdeano', 'Galindo', 'Gamja Flower', 'Gentium Basic', 'Gentium Book Basic', 'Geo', 'Geostar', 'Geostar Fill', 'Germania One', 'Gidugu', 'Gilda Display', 'Give You Glory', 'Glass Antiqua', 'Glegoo', 'Gloria Hallelujah', 'Goblin One', 'Gochi Hand', 'Gorditas', 'Gothic A1', 'Goudy Bookletter 1911', 'Graduate', 'Grand Hotel', 'Gravitas One', 'Great Vibes', 'Griffy', 'Gruppo', 'Gudea', 'Gugi', 'Gurajada', 'Habibi', 'Halant', 'Hammersmith One', 'Hanalei', 'Hanalei Fill', 'Handlee', 'Hanuman', 'Happy Monkey', 'Harmattan', 'Headland One', 'Heebo', 'Henny Penny', 'Herr Von Muellerhoff', 'Hi Melody', 'Hind', 'Hind Guntur', 'Hind Madurai', 'Hind Siliguri', 'Hind Vadodara', 'Holtwood One SC', 'Homemade Apple', 'Homenaje', 'IBM Plex Mono', 'IBM Plex Sans', 'IBM Plex Sans Condensed', 'IBM Plex Serif', 'IM Fell DW Pica', 'IM Fell DW Pica SC', 'IM Fell Double Pica', 'IM Fell Double Pica SC', 'IM Fell English', 'IM Fell English SC', 'IM Fell French Canon', 'IM Fell French Canon SC', 'IM Fell Great Primer', 'IM Fell Great Primer SC', 'Iceberg', 'Iceland', 'Imprima', 'Inconsolata', 'Inder', 'Indie Flower', 'Inika', 'Inknut Antiqua', 'Irish Grover', 'Istok Web', 'Italiana', 'Italianno', 'Itim', 'Jacques Francois', 'Jacques Francois Shadow', 'Jaldi', 'Jim Nightshade', 'Jockey One', 'Jolly Lodger', 'Jomhuria', 'Josefin Sans', 'Josefin Slab', 'Joti One', 'Jua', 'Judson', 'Julee', 'Julius Sans One', 'Junge', 'Jura', 'Just Another Hand', 'Just Me Again Down Here', 'K2D', 'Kadwa', 'Kalam', 'Kameron', 'Kanit', 'Kantumruy', 'Karla', 'Karma', 'Katibeh', 'Kaushan Script', 'Kavivanar', 'Kavoon', 'Kdam Thmor', 'Keania One', 'Kelly Slab', 'Kenia', 'Khand', 'Khmer', 'Khula', 'Kirang Haerang', 'Kite One', 'Knewave', 'KoHo', 'Kodchasan', 'Kosugi', 'Kosugi Maru', 'Kotta One', 'Koulen', 'Kranky', 'Kreon', 'Kristi', 'Krona One', 'Krub', 'Kumar One', 'Kumar One Outline', 'Kurale', 'La Belle Aurore', 'Laila', 'Lakki Reddy', 'Lalezar', 'Lancelot', 'Lateef', 'Lato', 'League Script', 'Leckerli One', 'Ledger', 'Lekton', 'Lemon', 'Lemonada', 'Libre Barcode 128', 'Libre Barcode 128 Text', 'Libre Barcode 39', 'Libre Barcode 39 Extended', 'Libre Barcode 39 Extended Text', 'Libre Barcode 39 Text', 'Libre Baskerville', 'Libre Franklin', 'Life Savers', 'Lilita One', 'Lily Script One', 'Limelight', 'Linden Hill', 'Lobster', 'Lobster Two', 'Londrina Outline', 'Londrina Shadow', 'Londrina Sketch', 'Londrina Solid', 'Lora', 'Love Ya Like A Sister', 'Loved by the King', 'Lovers Quarrel', 'Luckiest Guy', 'Lusitana', 'Lustria', 'M PLUS 1p', 'M PLUS Rounded 1c', 'Macondo', 'Macondo Swash Caps', 'Mada', 'Magra', 'Maiden Orange', 'Maitree', 'Major Mono Display', 'Mako', 'Mali', 'Mallanna', 'Mandali', 'Manuale', 'Marcellus', 'Marcellus SC', 'Marck Script', 'Margarine', 'Markazi Text', 'Marko One', 'Marmelad', 'Martel', 'Martel Sans', 'Marvel', 'Mate', 'Mate SC', 'Maven Pro', 'McLaren', 'Meddon', 'MedievalSharp', 'Medula One', 'Meera Inimai', 'Megrim', 'Meie Script', 'Merienda', 'Merienda One', 'Merriweather', 'Merriweather Sans', 'Metal', 'Metal Mania', 'Metamorphous', 'Metrophobic', 'Michroma', 'Milonga', 'Miltonian', 'Miltonian Tattoo', 'Mina', 'Miniver', 'Miriam Libre', 'Mirza', 'Miss Fajardose', 'Mitr', 'Modak', 'Modern Antiqua', 'Mogra', 'Molengo', 'Molle', 'Monda', 'Monofett', 'Monoton', 'Monsieur La Doulaise', 'Montaga', 'Montez', 'Montserrat', 'Montserrat Alternates', 'Montserrat Subrayada', 'Moul', 'Moulpali', 'Mountains of Christmas', 'Mouse Memoirs', 'Mr Bedfort', 'Mr Dafoe', 'Mr De Haviland', 'Mrs Saint Delafield', 'Mrs Sheppards', 'Mukta', 'Mukta Mahee', 'Mukta Malar', 'Mukta Vaani', 'Muli', 'Mystery Quest', 'NTR', 'Nanum Brush Script', 'Nanum Gothic', 'Nanum Gothic Coding', 'Nanum Myeongjo', 'Nanum Pen Script', 'Neucha', 'Neuton', 'New Rocker', 'News Cycle', 'Niconne', 'Niramit', 'Nixie One', 'Nobile', 'Nokora', 'Norican', 'Nosifer', 'Notable', 'Nothing You Could Do', 'Noticia Text', 'Noto Sans', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans TC', 'Noto Serif', 'Noto Serif JP', 'Noto Serif KR', 'Noto Serif SC', 'Noto Serif TC', 'Nova Cut', 'Nova Flat', 'Nova Mono', 'Nova Oval', 'Nova Round', 'Nova Script', 'Nova Slim', 'Nova Square', 'Numans', 'Nunito', 'Nunito Sans', 'Odor Mean Chey', 'Offside', 'Old Standard TT', 'Oldenburg', 'Oleo Script', 'Oleo Script Swash Caps', 'Open Sans', 'Open Sans Condensed', 'Oranienbaum', 'Orbitron', 'Oregano', 'Orienta', 'Original Surfer', 'Oswald', 'Over the Rainbow', 'Overlock', 'Overlock SC', 'Overpass', 'Overpass Mono', 'Ovo', 'Oxygen', 'Oxygen Mono', 'PT Mono', 'PT Sans', 'PT Sans Caption', 'PT Sans Narrow', 'PT Serif', 'PT Serif Caption', 'Pacifico', 'Padauk', 'Palanquin', 'Palanquin Dark', 'Pangolin', 'Paprika', 'Parisienne', 'Passero One', 'Passion One', 'Pathway Gothic One', 'Patrick Hand', 'Patrick Hand SC', 'Pattaya', 'Patua One', 'Pavanam', 'Paytone One', 'Peddana', 'Peralta', 'Permanent Marker', 'Petit Formal Script', 'Petrona', 'Philosopher', 'Piedra', 'Pinyon Script', 'Pirata One', 'Plaster', 'Play', 'Playball', 'Playfair Display', 'Playfair Display SC', 'Podkova', 'Poiret One', 'Poller One', 'Poly', 'Pompiere', 'Pontano Sans', 'Poor Story', 'Poppins', 'Port Lligat Sans', 'Port Lligat Slab', 'Pragati Narrow', 'Prata', 'Preahvihear', 'Press Start 2P', 'Pridi', 'Princess Sofia', 'Prociono', 'Prompt', 'Prosto One', 'Proza Libre', 'Puritan', 'Purple Purse', 'Quando', 'Quantico', 'Quattrocento', 'Quattrocento Sans', 'Questrial', 'Quicksand', 'Quintessential', 'Qwigley', 'Racing Sans One', 'Radley', 'Rajdhani', 'Rakkas', 'Raleway', 'Raleway Dots', 'Ramabhadra', 'Ramaraja', 'Rambla', 'Rammetto One', 'Ranchers', 'Rancho', 'Ranga', 'Rasa', 'Rationale', 'Ravi Prakash', 'Redressed', 'Reem Kufi', 'Reenie Beanie', 'Revalia', 'Rhodium Libre', 'Ribeye', 'Ribeye Marrow', 'Righteous', 'Risque', 'Roboto', 'Roboto Condensed', 'Roboto Mono', 'Roboto Slab', 'Rochester', 'Rock Salt', 'Rokkitt', 'Romanesco', 'Ropa Sans', 'Rosario', 'Rosarivo', 'Rouge Script', 'Rozha One', 'Rubik', 'Rubik Mono One', 'Ruda', 'Rufina', 'Ruge Boogie', 'Ruluko', 'Rum Raisin', 'Ruslan Display', 'Russo One', 'Ruthie', 'Rye', 'Sacramento', 'Sahitya', 'Sail', 'Saira', 'Saira Condensed', 'Saira Extra Condensed', 'Saira Semi Condensed', 'Salsa', 'Sanchez', 'Sancreek', 'Sansita', 'Sarabun', 'Sarala', 'Sarina', 'Sarpanch', 'Satisfy', 'Sawarabi Gothic', 'Sawarabi Mincho', 'Scada', 'Scheherazade', 'Schoolbell', 'Scope One', 'Seaweed Script', 'Secular One', 'Sedgwick Ave', 'Sedgwick Ave Display', 'Sevillana', 'Seymour One', 'Shadows Into Light', 'Shadows Into Light Two', 'Shanti', 'Share', 'Share Tech', 'Share Tech Mono', 'Shojumaru', 'Short Stack', 'Shrikhand', 'Siemreap', 'Sigmar One', 'Signika', 'Signika Negative', 'Simonetta', 'Sintony', 'Sirin Stencil', 'Six Caps', 'Skranji', 'Slabo 13px', 'Slabo 27px', 'Slackey', 'Smokum', 'Smythe', 'Sniglet', 'Snippet', 'Snowburst One', 'Sofadi One', 'Sofia', 'Song Myung', 'Sonsie One', 'Sorts Mill Goudy', 'Source Code Pro', 'Source Sans Pro', 'Source Serif Pro', 'Space Mono', 'Special Elite', 'Spectral', 'Spectral SC', 'Spicy Rice', 'Spinnaker', 'Spirax', 'Squada One', 'Sree Krushnadevaraya', 'Sriracha', 'Srisakdi', 'Staatliches', 'Stalemate', 'Stalinist One', 'Stardos Stencil', 'Stint Ultra Condensed', 'Stint Ultra Expanded', 'Stoke', 'Strait', 'Stylish', 'Sue Ellen Francisco', 'Suez One', 'Sumana', 'Sunflower', 'Sunshiney', 'Supermercado One', 'Sura', 'Suranna', 'Suravaram', 'Suwannaphum', 'Swanky and Moo Moo', 'Syncopate', 'Tajawal', 'Tangerine', 'Taprom', 'Tauri', 'Taviraj', 'Teko', 'Telex', 'Tenali Ramakrishna', 'Tenor Sans', 'Text Me One', 'Thasadith', 'The Girl Next Door', 'Tienne', 'Tillana', 'Timmana', 'Tinos', 'Titan One', 'Titillium Web', 'Trade Winds', 'Trirong', 'Trocchi', 'Trochut', 'Trykker', 'Tulpen One', 'Ubuntu', 'Ubuntu Condensed', 'Ubuntu Mono', 'Ultra', 'Uncial Antiqua', 'Underdog', 'Unica One', 'UnifrakturCook', 'UnifrakturMaguntia', 'Unkempt', 'Unlock', 'Unna', 'VT323', 'Vampiro One', 'Varela', 'Varela Round', 'Vast Shadow', 'Vesper Libre', 'Vibur', 'Vidaloka', 'Viga', 'Voces', 'Volkhov', 'Vollkorn', 'Vollkorn SC', 'Voltaire', 'Waiting for the Sunrise', 'Wallpoet', 'Walter Turncoat', 'Warnes', 'Wellfleet', 'Wendy One', 'Wire One', 'Work Sans', 'Yanone Kaffeesatz', 'Yantramanav', 'Yatra One', 'Yellowtail', 'Yeon Sung', 'Yeseva One', 'Yesteryear', 'Yrsa', 'ZCOOL KuaiLe', 'ZCOOL QingKe HuangYou', 'ZCOOL XiaoWei', 'Zeyada', 'Zilla Slab', 'Zilla Slab Highlight'] |
| 2149 |
} |
| 2150 |
|
| 2151 |
var option = function(val, setVal){ |
| 2152 |
var selected = (val != setVal) ? '' : 'selected="selected"'; |
| 2153 |
var lang = pagelayer_empty(val) ? 'Default' : val; |
| 2154 |
return '<option value="'+val+'" '+selected+'>'+ lang +'</option>'; |
| 2155 |
} |
| 2156 |
|
| 2157 |
var font_option = function(val, setVal){ |
| 2158 |
var selected = (val != setVal) ? '' : 'selected="selected"'; |
| 2159 |
var lang = pagelayer_empty(val) ? 'Default' : val; |
| 2160 |
return '<option style="font-family:'+lang+'" value="'+val+'" '+selected+'>'+ lang +'</option>'; |
| 2161 |
} |
| 2162 |
|
| 2163 |
var div = '<span class="pagelayer-prop-edit"><i class="fa fa-pencil"></i></span>'+ |
| 2164 |
'<div class="pagelayer-elp-typo-div">'+ |
| 2165 |
'<div class="pagelayer-elp-typo pagelayer-elp-typo-fonts">'+ |
| 2166 |
'<label class="pagelayer-elp-label">Font-Family</label>'+ |
| 2167 |
'<select class="pagelayer-elp-typo-input">'; |
| 2168 |
|
| 2169 |
jQuery.each(select['fonts'],function(key, value){ |
| 2170 |
div += font_option(value, val[0]); |
| 2171 |
}); |
| 2172 |
div +='</select>'+ |
| 2173 |
'</div>'+ |
| 2174 |
'<div class="pagelayer-elp-typo pagelayer-elp-typo-size">'+ |
| 2175 |
'<label class="pagelayer-elp-label">Font-Size</label>'+ |
| 2176 |
'<input class="pagelayer-elp-typo-input" type="number" max="200" min="0" step="1" value="'+val[1]+'"></input>'+ |
| 2177 |
'</div>'+ |
| 2178 |
'<div class="pagelayer-elp-typo pagelayer-elp-typo-style">'+ |
| 2179 |
'<label class="pagelayer-elp-label">Font-Style</label>'+ |
| 2180 |
'<select class="pagelayer-elp-typo-input">'; |
| 2181 |
|
| 2182 |
jQuery.each(select['style'],function(key, value){ |
| 2183 |
div += option(value, val[2]); |
| 2184 |
}); |
| 2185 |
div +='</select>'+ |
| 2186 |
'</div>'+ |
| 2187 |
'<div class="pagelayer-elp-typo pagelayer-elp-typo-weight">'+ |
| 2188 |
'<label class="pagelayer-elp-label">Font-Weight</label>'+ |
| 2189 |
'<select class="pagelayer-elp-typo-input">'; |
| 2190 |
jQuery.each(select['weight'],function(key, value){ |
| 2191 |
div += option(value, val[3]); |
| 2192 |
}); |
| 2193 |
|
| 2194 |
div += '</select>'+ |
| 2195 |
'</div>'+ |
| 2196 |
'<div class="pagelayer-elp-typo pagelayer-elp-typo-variant">'+ |
| 2197 |
'<label class="pagelayer-elp-label">Font-variant</label>'+ |
| 2198 |
'<select class="pagelayer-elp-typo-input">'; |
| 2199 |
jQuery.each(select['variant'],function(key, value){ |
| 2200 |
div += option(value, val[4]); |
| 2201 |
}); |
| 2202 |
|
| 2203 |
div += '</select>'+ |
| 2204 |
'</div>'+ |
| 2205 |
'<div class="pagelayer-elp-typo pagelayer-elp-typo-deco-line">'+ |
| 2206 |
'<label class="pagelayer-elp-label">Decoration Line</label>'+ |
| 2207 |
'<select class="pagelayer-elp-typo-input">'; |
| 2208 |
jQuery.each(select['deco-line'],function(key, value){ |
| 2209 |
div += option(value, val[5]); |
| 2210 |
}); |
| 2211 |
|
| 2212 |
div += '</select>'+ |
| 2213 |
'</div>'+ |
| 2214 |
'<div class="pagelayer-elp-typo pagelayer-elp-typo-deco-style">'+ |
| 2215 |
'<label class="pagelayer-elp-label">Decoration Style</label>'+ |
| 2216 |
'<select class="pagelayer-elp-typo-input">'; |
| 2217 |
jQuery.each(select['deco-style'],function(key, value){ |
| 2218 |
div += option(value, val[6]); |
| 2219 |
}); |
| 2220 |
|
| 2221 |
div += '</select>'+ |
| 2222 |
'</div>'+ |
| 2223 |
'<div class="pagelayer-elp-typo pagelayer-elp-typo-height">'+ |
| 2224 |
'<label class="pagelayer-elp-label">Line Height</label>'+ |
| 2225 |
'<input class="pagelayer-elp-typo-input" type="number" max="15" min="0" step="0.1" value="'+val[7]+'"></input>'+ |
| 2226 |
'</div>'+ |
| 2227 |
'<div class="pagelayer-elp-typo pagelayer-elp-typo-transform">'+ |
| 2228 |
'<label class="pagelayer-elp-label">Text Transform</label>'+ |
| 2229 |
'<select class="pagelayer-elp-typo-input">'; |
| 2230 |
jQuery.each(select['transform'],function(key, value){ |
| 2231 |
div += option(value, val[8]); |
| 2232 |
}); |
| 2233 |
|
| 2234 |
div += '</select>'+ |
| 2235 |
'</div>'+ |
| 2236 |
'<div class="pagelayer-elp-typo pagelayer-elp-typo-lspacing">'+ |
| 2237 |
'<label class="pagelayer-elp-label">Letter Spacing</label>'+ |
| 2238 |
'<input class="pagelayer-elp-typo-input" type="number" max="10" min="-10" step="0.1" value="'+val[9]+'"></input>'+ |
| 2239 |
'</div>'+ |
| 2240 |
'<div class="pagelayer-elp-typo pagelayer-elp-typo-wspacing">'+ |
| 2241 |
'<label class="pagelayer-elp-label">Word Spacing</label>'+ |
| 2242 |
'<input class="pagelayer-elp-typo-input" type="number" max="50" min="0" step="1" value="'+val[10]+'"></input>'+ |
| 2243 |
'</div>'+ |
| 2244 |
'</div>'; |
| 2245 |
|
| 2246 |
row.append(div); |
| 2247 |
|
| 2248 |
if(pagelayer_empty(val[5]) || val[5]=='none'){ |
| 2249 |
row.find('.pagelayer-elp-typo-deco-style').hide(); |
| 2250 |
} |
| 2251 |
|
| 2252 |
row.find('.pagelayer-prop-edit').on('click', function(){ |
| 2253 |
row.find('.pagelayer-elp-typo-div').toggleClass('pagelayer-prop-show'); |
| 2254 |
}); |
| 2255 |
|
| 2256 |
|
| 2257 |
row.find('.pagelayer-elp-typo-input').on('change', function(){ |
| 2258 |
val = []; |
| 2259 |
row.find('.pagelayer-elp-typo-input').each(function(){ |
| 2260 |
var value = jQuery(this).val(); |
| 2261 |
val.push(value ? value : ''); |
| 2262 |
}); |
| 2263 |
_pagelayer_set_atts(row, val); |
| 2264 |
}); |
| 2265 |
|
| 2266 |
row.find('.pagelayer-elp-typo-fonts select').on('change', function(){ |
| 2267 |
|
| 2268 |
var value = jQuery(this).val(); |
| 2269 |
value = value.replace(' ', '+'); |
| 2270 |
|
| 2271 |
if(jQuery('#pagelayer-google-fonts').length == 0){ |
| 2272 |
|
| 2273 |
jQuery('head').append('<link id="pagelayer-google-fonts" href="https://fonts.googleapis.com/css?family='+value+':100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">'); |
| 2274 |
|
| 2275 |
}else{ |
| 2276 |
|
| 2277 |
var url = jQuery('#pagelayer-google-fonts').attr('href'); |
| 2278 |
if(url.indexOf(value) == -1){ |
| 2279 |
url = url+'|'+value+':100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i'; |
| 2280 |
jQuery('#pagelayer-google-fonts').attr('href', url); |
| 2281 |
} |
| 2282 |
|
| 2283 |
} |
| 2284 |
|
| 2285 |
}); |
| 2286 |
|
| 2287 |
row.find('.pagelayer-elp-typo-deco-line select').on('change', function(){ |
| 2288 |
var value = jQuery(this).val(); |
| 2289 |
if(pagelayer_empty(value) || value=='none'){ |
| 2290 |
row.find('.pagelayer-elp-typo-deco-style').hide(); |
| 2291 |
}else{ |
| 2292 |
row.find('.pagelayer-elp-typo-deco-style').show(); |
| 2293 |
} |
| 2294 |
}); |
| 2295 |
|
| 2296 |
} |
| 2297 |
|
| 2298 |
// The dimension property |
| 2299 |
function pagelayer_elp_dimension(row, prop){ |
| 2300 |
|
| 2301 |
var val = ['', '']; |
| 2302 |
|
| 2303 |
if(prop.c['val'].length > 0){ |
| 2304 |
val = prop.c['val'].split(','); |
| 2305 |
//console.log(val) |
| 2306 |
} |
| 2307 |
|
| 2308 |
var div = '<div class="pagelayer-elp-dimension-div">'+ |
| 2309 |
'<input type="number" class="pagelayer-elp-dimension" value="'+parseInt(val[0])+'"></input>'+ |
| 2310 |
'<input type="number" class="pagelayer-elp-dimension" value="'+parseInt(val[1])+'"></input>'+ |
| 2311 |
'<i class="fa fa-link" />'+ |
| 2312 |
'</div>'; |
| 2313 |
|
| 2314 |
row.append(div); |
| 2315 |
|
| 2316 |
// Is the value linked ? |
| 2317 |
var link = row.find('.pagelayer-elp-dimension-div .fa'); |
| 2318 |
var isLinked = _pagelayer_get_tmp_att(row, 'linked'); |
| 2319 |
isLinked = isLinked == 2 ? false : true; |
| 2320 |
//console.log(isLinked); |
| 2321 |
|
| 2322 |
if(isLinked){ |
| 2323 |
link.addClass('pagelayer-elp-dimension-linked'); |
| 2324 |
}else{ |
| 2325 |
link.removeClass('pagelayer-elp-dimension-linked'); |
| 2326 |
} |
| 2327 |
|
| 2328 |
// Handle link on click |
| 2329 |
link.on('click', function(){ |
| 2330 |
|
| 2331 |
var linked = link.hasClass('pagelayer-elp-dimension-linked'); |
| 2332 |
|
| 2333 |
if(linked){ |
| 2334 |
link.removeClass('pagelayer-elp-dimension-linked'); |
| 2335 |
}else{ |
| 2336 |
link.addClass('pagelayer-elp-dimension-linked'); |
| 2337 |
} |
| 2338 |
|
| 2339 |
_pagelayer_set_tmp_atts(row, 'linked', (linked ? 2 : 1)); |
| 2340 |
|
| 2341 |
}); |
| 2342 |
|
| 2343 |
row.find('input').on('input', function(){ |
| 2344 |
|
| 2345 |
// Are the values linked |
| 2346 |
var linked = row.find('.pagelayer-elp-dimension-div .fa').hasClass('pagelayer-elp-dimension-linked'); |
| 2347 |
|
| 2348 |
if(linked){ |
| 2349 |
var val = jQuery(this).val(); |
| 2350 |
row.find('input').each(function(){ |
| 2351 |
jQuery(this).val(val); |
| 2352 |
}); |
| 2353 |
} |
| 2354 |
|
| 2355 |
var vals = []; |
| 2356 |
|
| 2357 |
// Get all values |
| 2358 |
row.find('input').each(function(){ |
| 2359 |
var val = jQuery(this).val(); |
| 2360 |
vals.push(val ? val : 0); |
| 2361 |
}); |
| 2362 |
|
| 2363 |
_pagelayer_set_atts(row, vals);// Save and Render |
| 2364 |
}); |
| 2365 |
|
| 2366 |
}; |
| 2367 |
|
| 2368 |
// Select frame to upload media |
| 2369 |
function pagelayer_select_frame(tag, state){ |
| 2370 |
|
| 2371 |
var state = state || ''; |
| 2372 |
//console.log(state); |
| 2373 |
|
| 2374 |
var frame; |
| 2375 |
|
| 2376 |
switch(tag){ |
| 2377 |
|
| 2378 |
// Multi image selection frame |
| 2379 |
case 'multi_image': |
| 2380 |
|
| 2381 |
frame = wp.media({ |
| 2382 |
|
| 2383 |
id: 'pagelayer-wp-multi-image-library', |
| 2384 |
frame: 'post', |
| 2385 |
state: state, |
| 2386 |
title: pagelayer_l('frame_'+tag), |
| 2387 |
multiple: true, |
| 2388 |
library: wp.media.query({type: 'image'}), |
| 2389 |
button: { |
| 2390 |
text: pagelayer_l('insert') |
| 2391 |
}, |
| 2392 |
|
| 2393 |
}); |
| 2394 |
|
| 2395 |
break; |
| 2396 |
|
| 2397 |
// Media selection frame |
| 2398 |
case 'media': |
| 2399 |
|
| 2400 |
frame = wp.media({ |
| 2401 |
|
| 2402 |
id: 'pagelayer-wp-media-library', |
| 2403 |
frame: 'post', |
| 2404 |
state: 'pagelayer-media', |
| 2405 |
title: pagelayer_l('frame_'+tag), |
| 2406 |
multiple: false, |
| 2407 |
states: [ |
| 2408 |
new wp.media.controller.Library({ |
| 2409 |
id: 'pagelayer-media', |
| 2410 |
title: pagelayer_l('frame_'+tag), |
| 2411 |
multiple: false, |
| 2412 |
date: true |
| 2413 |
}) |
| 2414 |
], |
| 2415 |
button: { |
| 2416 |
text: pagelayer_l('insert') |
| 2417 |
}, |
| 2418 |
|
| 2419 |
}); |
| 2420 |
|
| 2421 |
break; |
| 2422 |
|
| 2423 |
//Default frame(for image, video, audio) |
| 2424 |
default: |
| 2425 |
|
| 2426 |
frame = wp.media({ |
| 2427 |
|
| 2428 |
id: 'pagelayer-wp-'+tag+'-library', |
| 2429 |
frame: 'post', |
| 2430 |
state: 'pagelayer-'+tag, |
| 2431 |
title: pagelayer_l('frame_'+tag), |
| 2432 |
multiple: false, |
| 2433 |
library: wp.media.query({type: tag}), |
| 2434 |
states: [ |
| 2435 |
new wp.media.controller.Library({ |
| 2436 |
id: 'pagelayer-'+tag, |
| 2437 |
title: pagelayer_l('frame_'+tag), |
| 2438 |
library: wp.media.query( { type: tag } ), |
| 2439 |
multiple: false, |
| 2440 |
date: true |
| 2441 |
}) |
| 2442 |
], |
| 2443 |
button: { |
| 2444 |
text: pagelayer_l('insert') |
| 2445 |
}, |
| 2446 |
|
| 2447 |
}); |
| 2448 |
|
| 2449 |
break; |
| 2450 |
} |
| 2451 |
|
| 2452 |
frame.on({ |
| 2453 |
'menu:render:default': function(view){ |
| 2454 |
view.unset('insert'); |
| 2455 |
view.unset('gallery'); |
| 2456 |
view.unset('featured-image'); |
| 2457 |
view.unset('playlist'); |
| 2458 |
view.unset('video-playlist'); |
| 2459 |
}, |
| 2460 |
}, this); |
| 2461 |
|
| 2462 |
return frame; |
| 2463 |
|
| 2464 |
} |
| 2465 |
|
