| 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 |
// The menu items refrence |
| 15 |
var pagelayer_menus_items_ref = {}; |
| 16 |
|
| 17 |
// Loads the Data |
| 18 |
function pagelayer_data(jEle, clean){ |
| 19 |
|
| 20 |
var ret = new Object(); |
| 21 |
|
| 22 |
// Get the data |
| 23 |
ret.tag = pagelayer_tag(jEle); |
| 24 |
ret.id = pagelayer_id(jEle); |
| 25 |
ret.$ = jEle; |
| 26 |
|
| 27 |
var ref_data = pagelayer_el_data_ref(jEle); |
| 28 |
|
| 29 |
// Parse the attributes |
| 30 |
ret.atts = JSON.parse(JSON.stringify(ref_data['attr'])); |
| 31 |
ret.tmp = JSON.parse(JSON.stringify(ref_data['tmp'])); |
| 32 |
|
| 33 |
//console.log(ret.atts); |
| 34 |
//console.log(ret.tmp); |
| 35 |
|
| 36 |
clean = clean || false; |
| 37 |
|
| 38 |
// Remove values which have 'req'. NOTE : 'show' ones will be allowed |
| 39 |
if(clean){ |
| 40 |
|
| 41 |
var tag = ret.tag; |
| 42 |
|
| 43 |
// Anything to set ? |
| 44 |
ret.set = {}; |
| 45 |
|
| 46 |
// Function to clear any att data |
| 47 |
var pagelayer_delete_atts = function(x){ |
| 48 |
delete ret.atts[x]; |
| 49 |
delete ret.atts[x+'_tablet'];// Any tablet and mobile values as well |
| 50 |
delete ret.atts[x+'_mobile']; |
| 51 |
delete ret.set[x]; |
| 52 |
} |
| 53 |
|
| 54 |
// All props |
| 55 |
var all_props = pagelayer_shortcodes[tag]; |
| 56 |
|
| 57 |
// Loop through all props |
| 58 |
for(var i in pagelayer_tabs){ |
| 59 |
|
| 60 |
var tab = pagelayer_tabs[i]; |
| 61 |
|
| 62 |
section_loop1: |
| 63 |
for(var section in all_props[tab]){ |
| 64 |
|
| 65 |
// Any section to skip by post type ? |
| 66 |
if(!pagelayer_empty(all_props['post_type_cats'])){ |
| 67 |
for(var post_type in all_props['post_type_cats']){ |
| 68 |
if(pagelayer_post.post_type != post_type && jQuery.inArray(section, all_props['post_type_cats'][post_type]) > -1){ |
| 69 |
continue section_loop1; |
| 70 |
} |
| 71 |
} |
| 72 |
} |
| 73 |
|
| 74 |
var props = section in pagelayer_shortcodes[tag] ? pagelayer_shortcodes[tag][section] : pagelayer_styles[section]; |
| 75 |
|
| 76 |
// In case of widgets its possible ! |
| 77 |
if(pagelayer_empty(props)){ |
| 78 |
continue; |
| 79 |
} |
| 80 |
|
| 81 |
for(var x in props){ |
| 82 |
|
| 83 |
var prop = props[x]; |
| 84 |
|
| 85 |
// Any prop to skip ? |
| 86 |
if(!pagelayer_empty(all_props['skip_props']) && jQuery.inArray(x, all_props['skip_props']) > -1){ |
| 87 |
pagelayer_delete_atts(x); |
| 88 |
continue; |
| 89 |
} |
| 90 |
|
| 91 |
// Are we to set this value ? |
| 92 |
if(!(x in ret.atts) && 'default' in prop && !pagelayer_empty(prop['default'])){ |
| 93 |
|
| 94 |
// We need to make sure its not a PRO value |
| 95 |
if(!('pro' in prop && pagelayer_empty(pagelayer_pro))){ |
| 96 |
|
| 97 |
var tmp_val = prop['default']; |
| 98 |
|
| 99 |
// If there is a unit and there is no unit suffix in atts value |
| 100 |
if('units' in prop){ |
| 101 |
if(jQuery.isNumeric(tmp_val)){ |
| 102 |
tmp_val = tmp_val+prop['units'][0]; |
| 103 |
}else{ |
| 104 |
var sep = 'sep' in prop ? prop['sep'] : ','; |
| 105 |
var tmp2 = tmp_val.split(sep); |
| 106 |
for(var k in tmp2){ |
| 107 |
if(jQuery.isNumeric(tmp2[k])){ |
| 108 |
tmp2[k] = tmp2[k]+prop['units'][0]; |
| 109 |
} |
| 110 |
} |
| 111 |
tmp_val = tmp2.join(sep); |
| 112 |
} |
| 113 |
} |
| 114 |
|
| 115 |
//console.log(x+' - '+tmp_val); |
| 116 |
ret.set[x] = tmp_val; |
| 117 |
|
| 118 |
} |
| 119 |
} |
| 120 |
|
| 121 |
if(!('req' in prop)){ |
| 122 |
continue; |
| 123 |
} |
| 124 |
|
| 125 |
//console.log('[pagelayer_data] Cleaning :'+x); |
| 126 |
|
| 127 |
// List of considerations |
| 128 |
var show = prop['req']; |
| 129 |
|
| 130 |
// We will hide by default |
| 131 |
var toShow = true; |
| 132 |
|
| 133 |
for(var showParam in show){ |
| 134 |
var reqval = show[showParam]; |
| 135 |
var except = showParam.substr(0, 1) == '!' ? true : false; |
| 136 |
showParam = except ? showParam.substr(1) : showParam; |
| 137 |
var val = ret.atts[showParam] || ''; |
| 138 |
|
| 139 |
//console.log('Show '+x+' '+showParam+' '+reqval+' '+val); |
| 140 |
|
| 141 |
// Is the value not the same, then we can show |
| 142 |
if(except){ |
| 143 |
|
| 144 |
if(typeof reqval == 'string' && reqval == val){ |
| 145 |
toShow = false; |
| 146 |
break; |
| 147 |
} |
| 148 |
|
| 149 |
// Its an array and a value is found, then dont show |
| 150 |
if(typeof reqval != 'string' && reqval.indexOf(val) > -1){ |
| 151 |
toShow = false; |
| 152 |
break; |
| 153 |
} |
| 154 |
|
| 155 |
// The value must be equal |
| 156 |
}else{ |
| 157 |
|
| 158 |
if(typeof reqval == 'string' && reqval != val){ |
| 159 |
toShow = false; |
| 160 |
break; |
| 161 |
} |
| 162 |
|
| 163 |
// Its an array and no value is found, then dont show |
| 164 |
if(typeof reqval != 'string' && reqval.indexOf(val) === -1){ |
| 165 |
toShow = false; |
| 166 |
break; |
| 167 |
} |
| 168 |
} |
| 169 |
|
| 170 |
} |
| 171 |
|
| 172 |
// Are we to show ? |
| 173 |
if(!toShow){ |
| 174 |
//console.log('Delete : '+x); |
| 175 |
pagelayer_delete_atts(x); |
| 176 |
} |
| 177 |
} |
| 178 |
} |
| 179 |
} |
| 180 |
|
| 181 |
} |
| 182 |
|
| 183 |
return ret; |
| 184 |
|
| 185 |
}; |
| 186 |
|
| 187 |
// Setup the properties |
| 188 |
function pagelayer_elpd_setup(){ |
| 189 |
|
| 190 |
// The Dialag box of the element properties |
| 191 |
// pagelayer-ELPD - Element Properties Dialog |
| 192 |
pagelayer_elpd_html = '<div class="pagelayer-elpd-tabs">'+ |
| 193 |
'<div class="pagelayer-elpd-tab" pagelayer-elpd-tab="settings" pagelayer-elpd-active-tab=1>Settings</div>'+ |
| 194 |
//'<div class="pagelayer-elpd-tab" pagelayer-elpd-tab="styles">Style</div>'+ |
| 195 |
'<div class="pagelayer-elpd-tab" pagelayer-elpd-tab="options">Style</div>'+ |
| 196 |
'<div class="pagelayer-advanced-props pagelayer-elpd-tab pagelayer-hidden" pagelayer-elpd-tab="advanced">Advanced</div>'+ |
| 197 |
'<div class="pagelayer-elpd-options">'+ |
| 198 |
'<i class="pli pli-clone" ></i>'+ |
| 199 |
'<i class="pli pli-trashcan" ></i>'+ |
| 200 |
'</div>'+ |
| 201 |
'</div>'+ |
| 202 |
'<div class="pagelayer-elpd-body"></div>'+ |
| 203 |
'<div class="pagelayer-elpd-holder"></div>'; |
| 204 |
|
| 205 |
// Create the dialog box |
| 206 |
pagelayer.$$('#pagelayer-elpd').append(pagelayer_elpd_html); |
| 207 |
pagelayer_elpd = pagelayer.$$('#pagelayer-elpd'); |
| 208 |
|
| 209 |
pagelayer.$$('.pagelayer-elpd-close').on('click', function(){ |
| 210 |
pagelayer_leftbar_tab('pagelayer-shortcodes'); |
| 211 |
pagelayer.$$('[pagelayer-widget-tab="widgets"]').click(); |
| 212 |
pagelayer.$$('.pagelayer-elpd-header').hide(); |
| 213 |
pagelayer.$$('.pagelayer-logo').show(); |
| 214 |
pagelayer.$$('.pagelayer-elpd-body').removeAttr('pagelayer-element-id').empty(); |
| 215 |
pagelayer_active = {}; |
| 216 |
}); |
| 217 |
|
| 218 |
// Copy |
| 219 |
pagelayer.$$('.pagelayer-elpd-options>.pli-clone').on('click', function(){ |
| 220 |
pagelayer_copy_element(pagelayer_active.el.$); |
| 221 |
}); |
| 222 |
|
| 223 |
// Delete |
| 224 |
pagelayer.$$('.pagelayer-elpd-options>.pli-trashcan').on('click', function(){ |
| 225 |
pagelayer_delete_element(pagelayer_active.el.$); |
| 226 |
//pagelayer.$$('.pagelayer-elpd-close').click(); |
| 227 |
}); |
| 228 |
|
| 229 |
// The advanced props |
| 230 |
pagelayer_elpd.find('.pagelayer-advanced-props').on('click', function(e){ |
| 231 |
e.preventDefault(); |
| 232 |
e.stopPropagation(); |
| 233 |
var propsModal = pagelayer.$$('.pagelayer-props-modal'); |
| 234 |
if(propsModal.find('.pagelayer-meta-iframe').length < 1){ |
| 235 |
propsModal.find('.pagelayer-props-wrap').append('<iframe class="pagelayer-meta-iframe" src="'+ pagelayer_post_props +'" style="display:none"></iframe>'); |
| 236 |
propsModal.find('.pagelayer-meta-iframe').load(function(){ |
| 237 |
propsModal.find('.pagelayer-props-loading-screen').hide(); |
| 238 |
propsModal.find('.pagelayer-props-modal-close').css('visibility','visible'); |
| 239 |
jQuery(this).show(); |
| 240 |
}); |
| 241 |
} |
| 242 |
|
| 243 |
propsModal.show(); |
| 244 |
pagelayer.$$('.pagelayer-meta-iframe').contents().find('.pagelayer-tab-items[data-tab="post_props"]').click(); |
| 245 |
}); |
| 246 |
|
| 247 |
// The tabs |
| 248 |
pagelayer_elpd.find('.pagelayer-elpd-tab').on('click', function(){ |
| 249 |
|
| 250 |
var jEle = jQuery(this); |
| 251 |
var attr = 'pagelayer-elpd-active-tab'; |
| 252 |
var tab = jEle.attr('pagelayer-elpd-tab'); |
| 253 |
|
| 254 |
if(tab == 'advanced'){ |
| 255 |
return; |
| 256 |
} |
| 257 |
|
| 258 |
pagelayer_elpd.find('.pagelayer-elpd-tab').each(function(){ |
| 259 |
jQuery(this).removeAttr(attr); |
| 260 |
}); |
| 261 |
|
| 262 |
jEle.attr(attr, 1); |
| 263 |
|
| 264 |
// Trigger the showing of rows |
| 265 |
pagelayer_elpd_show_rows(); |
| 266 |
}); |
| 267 |
|
| 268 |
}; |
| 269 |
|
| 270 |
// Open the properties |
| 271 |
function pagelayer_elpd_open(jEle){ |
| 272 |
|
| 273 |
var el_data = pagelayer_data(jEle); |
| 274 |
var is_same = (!pagelayer_empty(pagelayer_active.el) && pagelayer_active.el.id === el_data.id); |
| 275 |
var active_tab = pagelayer_elpd.find('[pagelayer-elpd-active-tab]').attr('pagelayer-elpd-tab'); |
| 276 |
|
| 277 |
// Set pagelayer history FALSE |
| 278 |
pagelayer.history_action = false; |
| 279 |
|
| 280 |
// Set the position of the element and show |
| 281 |
//pagelayer_elpd.css('left', pagelayer_elpd_pos[0]); |
| 282 |
//pagelayer_elpd.css('top', pagelayer_elpd_pos[1]); |
| 283 |
pagelayer_leftbar_tab('pagelayer-elpd'); |
| 284 |
pagelayer.$$('[pagelayer-elpd-tab=settings]').show(); |
| 285 |
pagelayer.$$('.pagelayer-elpd-header').show(); |
| 286 |
pagelayer.$$('.pagelayer-logo').hide(); |
| 287 |
|
| 288 |
// Activate settings tab by default or keep active tab if it's the same element |
| 289 |
pagelayer_elpd.find('.pagelayer-elpd-tab').removeAttr('pagelayer-elpd-active-tab'); |
| 290 |
if (is_same && active_tab) { |
| 291 |
pagelayer_elpd.find('[pagelayer-elpd-tab="' + active_tab + '"]').attr('pagelayer-elpd-active-tab', 1); |
| 292 |
} else { |
| 293 |
pagelayer_elpd.find('[pagelayer-elpd-tab="settings"]').attr('pagelayer-elpd-active-tab', 1); |
| 294 |
} |
| 295 |
|
| 296 |
// The property holder |
| 297 |
var holder = pagelayer.$$('.pagelayer-elpd-body'); |
| 298 |
holder.html(' '); |
| 299 |
|
| 300 |
var el = pagelayer_elpd_generate(jEle, holder); |
| 301 |
|
| 302 |
// Set the active element |
| 303 |
pagelayer_active.el = el; |
| 304 |
|
| 305 |
// Set the header |
| 306 |
pagelayer.$$('.pagelayer-elpd-title').html('Edit '+pagelayer_shortcodes[el.tag]['name']); |
| 307 |
|
| 308 |
// Set pagelayer history TRUE |
| 309 |
pagelayer.history_action = true; |
| 310 |
|
| 311 |
// Render tooltips for the ELPD |
| 312 |
pagelayer_tooltip_setup(); |
| 313 |
|
| 314 |
// Setup instant properties search |
| 315 |
if (typeof pagelayer_setup_properties_search === 'function') { |
| 316 |
pagelayer_setup_properties_search(); |
| 317 |
} |
| 318 |
}; |
| 319 |
|
| 320 |
// Show the properties window |
| 321 |
function pagelayer_elpd_generate(jEle, holder){ |
| 322 |
|
| 323 |
// Get the id, tag, atts, data, etc |
| 324 |
var el = pagelayer_data(jEle); |
| 325 |
//console.log(el); |
| 326 |
|
| 327 |
// Is it a valid type ? |
| 328 |
if(pagelayer_empty(pagelayer_shortcodes[el.tag])){ |
| 329 |
pagelayer_error('Could not find this shortcode : '+el.tag); |
| 330 |
return; |
| 331 |
} |
| 332 |
|
| 333 |
// Set the holder |
| 334 |
holder.attr('pagelayer-element-id', el.id); |
| 335 |
//console.log(el.id); |
| 336 |
|
| 337 |
var all_props = pagelayer_shortcodes[el.tag]; |
| 338 |
|
| 339 |
var sec_open_class = 'pagelayer-elpd-section-open'; |
| 340 |
|
| 341 |
for(var i in pagelayer_tabs){ |
| 342 |
var tab = pagelayer_tabs[i]; |
| 343 |
var section_close = false;// First section always open |
| 344 |
|
| 345 |
section_loop2: |
| 346 |
for(var section in all_props[tab]){ |
| 347 |
//console.log(tab+' '+section); |
| 348 |
|
| 349 |
// Any section to skip by post type ? |
| 350 |
if(!pagelayer_empty(all_props['post_type_cats'])){ |
| 351 |
for(var post_type in all_props['post_type_cats']){ |
| 352 |
if(pagelayer_post.post_type != post_type && jQuery.inArray(section, all_props['post_type_cats'][post_type]) > -1){ |
| 353 |
continue section_loop2; |
| 354 |
} |
| 355 |
} |
| 356 |
} |
| 357 |
|
| 358 |
var props = section in pagelayer_shortcodes[el.tag] ? pagelayer_shortcodes[el.tag][section] : pagelayer_styles[section]; |
| 359 |
//console.log(props); |
| 360 |
|
| 361 |
var sec = jQuery('<div class="pagelayer-elpd-section" section="'+section+'" pagelayer-show-tab="'+tab+'">'+ |
| 362 |
'<div class="pagelayer-elpd-section-name '+sec_open_class+'"><i class="pli"></i>'+all_props[tab][section]+'</div>'+ |
| 363 |
'<div class="pagelayer-elpd-section-rows"></div>'+ |
| 364 |
'</div>'); |
| 365 |
holder.append(sec); |
| 366 |
|
| 367 |
// The row holder |
| 368 |
sec = sec.find('.pagelayer-elpd-section-rows'); |
| 369 |
|
| 370 |
// Close all except the first section |
| 371 |
if(section_close){ |
| 372 |
sec.hide().prev().removeClass(sec_open_class); |
| 373 |
} |
| 374 |
section_close = true; |
| 375 |
|
| 376 |
if('widget' in all_props && section == 'params'){ |
| 377 |
pagelayer_elpd_widget_settings(el, sec, true); |
| 378 |
continue; |
| 379 |
} |
| 380 |
|
| 381 |
var mode = pagelayer_get_screen_mode(); |
| 382 |
|
| 383 |
// Reset / Create the cache |
| 384 |
for(var x in props){ |
| 385 |
|
| 386 |
props[x]['c'] = new Object(); |
| 387 |
props[x]['c']['val'] = '';// Blank Val |
| 388 |
props[x]['c']['name'] = x;// Add the Name of the row i.e. attribute of the element |
| 389 |
var prop_name = x; |
| 390 |
|
| 391 |
// Do we have screen ? |
| 392 |
if('screen' in props[x] && mode != 'desktop'){ |
| 393 |
prop_name = x +'_'+mode; |
| 394 |
} |
| 395 |
|
| 396 |
// Set default to value of attribute if any |
| 397 |
if(prop_name in el.atts){ |
| 398 |
props[x]['c']['val'] = el.atts[prop_name]; |
| 399 |
} |
| 400 |
|
| 401 |
// Set element |
| 402 |
props[x]['el'] = el; |
| 403 |
|
| 404 |
// Any prop to skip ? |
| 405 |
if(!pagelayer_empty(all_props['skip_props']) && jQuery.inArray(x, all_props['skip_props']) > -1){ |
| 406 |
continue; |
| 407 |
} |
| 408 |
|
| 409 |
// Add the row |
| 410 |
pagelayer_elpd_row(sec, tab, section, props, x); |
| 411 |
|
| 412 |
} |
| 413 |
|
| 414 |
// Hide empty sections |
| 415 |
if(sec.html().length < 1){ |
| 416 |
//console.log(section+' - '+sec.html().length); |
| 417 |
sec.parent().remove(); |
| 418 |
} |
| 419 |
} |
| 420 |
} |
| 421 |
|
| 422 |
/*// Set the default values in the PROPERTIES |
| 423 |
var fn_load = window['pagelayer_load_elp_'+el.tag]; |
| 424 |
|
| 425 |
if(typeof fn_load == 'function'){ |
| 426 |
fn_load(el, props); |
| 427 |
}*/ |
| 428 |
|
| 429 |
// Hide clone and delete options |
| 430 |
if(!pagelayer_empty(all_props['hide_active']) && (pagelayer_empty(pagelayer_active.el) || pagelayer_active.el.id == el.id)){ |
| 431 |
pagelayer.$$('.pagelayer-elpd-options').addClass('pagelayer-hidden'); |
| 432 |
}else{ |
| 433 |
pagelayer.$$('.pagelayer-elpd-options').removeClass('pagelayer-hidden'); |
| 434 |
} |
| 435 |
|
| 436 |
// Add Advanced settings options for the props |
| 437 |
if(el.tag == 'pl_post_props'){ |
| 438 |
pagelayer.$$('.pagelayer-elpd-tab[pagelayer-elpd-tab="advanced"]').removeClass('pagelayer-hidden'); |
| 439 |
}else{ |
| 440 |
pagelayer.$$('.pagelayer-elpd-tab[pagelayer-elpd-tab="advanced"]').addClass('pagelayer-hidden'); |
| 441 |
} |
| 442 |
|
| 443 |
// Section open close |
| 444 |
holder.find('>.pagelayer-elpd-section>.pagelayer-elpd-section-name').on('click', function(){ |
| 445 |
var _sec = jQuery(this); |
| 446 |
var par = _sec.parent(); |
| 447 |
|
| 448 |
pagelayer_active_tab.id = el.id; |
| 449 |
pagelayer_active_tab.section = par.attr('section'); |
| 450 |
|
| 451 |
// Get the active tab |
| 452 |
var active_tab = pagelayer_elpd.find('[pagelayer-elpd-active-tab]').attr('pagelayer-elpd-tab'); |
| 453 |
|
| 454 |
// Close all but dont touch yourself |
| 455 |
holder.children().each(function (){ |
| 456 |
var curSec = jQuery(this); |
| 457 |
if(par.is(curSec)) return;// Skip the current option |
| 458 |
if(curSec.attr('pagelayer-show-tab') != active_tab) return;// Skip the non active tabs as is |
| 459 |
curSec.find('.pagelayer-elpd-section-rows').hide().prev().removeClass(sec_open_class); |
| 460 |
}); |
| 461 |
|
| 462 |
// Now toggle your self |
| 463 |
par.find('.pagelayer-elpd-section-rows').toggle(); |
| 464 |
|
| 465 |
if(_sec.next().is(':visible')){ |
| 466 |
_sec.addClass(sec_open_class); |
| 467 |
}else{ |
| 468 |
_sec.removeClass(sec_open_class); |
| 469 |
} |
| 470 |
|
| 471 |
}); |
| 472 |
|
| 473 |
if(!pagelayer_empty(pagelayer_active_tab) && pagelayer_active_tab.id == el.id){ |
| 474 |
var target_sec = holder.find('>[section='+pagelayer_active_tab.section+']'); |
| 475 |
if(target_sec.length > 0 && !target_sec.find('.pagelayer-elpd-section-rows').is(':visible')){ |
| 476 |
target_sec.find('.pagelayer-elpd-section-name').click(); |
| 477 |
} |
| 478 |
} |
| 479 |
|
| 480 |
// Handle the showing of rows |
| 481 |
pagelayer_elpd_show_rows(); |
| 482 |
|
| 483 |
return el; |
| 484 |
|
| 485 |
}; |
| 486 |
|
| 487 |
// Show a row |
| 488 |
function pagelayer_elpd_row(holder, tab, section, props, name){ |
| 489 |
|
| 490 |
// The Prop |
| 491 |
var prop = props[name]; |
| 492 |
//console.log(tab+' '+name+' '+prop.el.tag); |
| 493 |
|
| 494 |
var fn = window['pagelayer_elp_'+prop['type']]; |
| 495 |
|
| 496 |
if(typeof fn == 'function'){ |
| 497 |
|
| 498 |
var row = jQuery('<div class="pagelayer-form-item" pagelayer-elp-name="'+name+'" />'); |
| 499 |
|
| 500 |
// Append the row |
| 501 |
holder.append(row); |
| 502 |
|
| 503 |
return pagelayer_elpd_render_row(row, prop); |
| 504 |
|
| 505 |
} |
| 506 |
|
| 507 |
}; |
| 508 |
|
| 509 |
// Render a row |
| 510 |
function pagelayer_elpd_render_row(row, prop){ |
| 511 |
|
| 512 |
var fn = window['pagelayer_elp_'+prop['type']]; |
| 513 |
|
| 514 |
if('group' in prop){ |
| 515 |
row.attr('pagelayer-access-item', prop.group); |
| 516 |
} |
| 517 |
|
| 518 |
var fn_ui = window['pagelayer_elp_'+prop['type']+'_ui']; |
| 519 |
|
| 520 |
// Is there a UI Handler ? |
| 521 |
if(typeof fn_ui == 'function'){ |
| 522 |
|
| 523 |
fn_ui(row, prop); |
| 524 |
|
| 525 |
// Use the default mechanism |
| 526 |
}else{ |
| 527 |
|
| 528 |
// The label |
| 529 |
pagelayer_elp_label(row, prop); |
| 530 |
|
| 531 |
// The main property |
| 532 |
fn(row, prop); |
| 533 |
|
| 534 |
// Showing default button or not |
| 535 |
if(pagelayer_properties_filter(prop['type']) && pagelayer_empty(row.find('.pagelayer-pro-req').length)){ |
| 536 |
pagelayer_show_default_button(row, prop, prop.c['val']); |
| 537 |
} |
| 538 |
|
| 539 |
// Is there a description ? |
| 540 |
if(!pagelayer_empty(prop['desc'])){ |
| 541 |
pagelayer_elp_desc(row, prop['desc']); |
| 542 |
} |
| 543 |
|
| 544 |
} |
| 545 |
|
| 546 |
if('script' in prop){ |
| 547 |
row.append('<script>'+prop.script+'</script>'); |
| 548 |
} |
| 549 |
|
| 550 |
return row; |
| 551 |
} |
| 552 |
|
| 553 |
// Show the rows as per the active tab and also handle the rows that are supposed to be shown or not |
| 554 |
function pagelayer_elpd_show_rows(){ |
| 555 |
|
| 556 |
//console.log('Called'); |
| 557 |
|
| 558 |
// Get the active tab |
| 559 |
var active_tab = pagelayer_elpd.find('[pagelayer-elpd-active-tab]').attr('pagelayer-elpd-tab'); |
| 560 |
|
| 561 |
pagelayer_elpd.find('[pagelayer-show-tab]').each(function(){ |
| 562 |
var sec = jQuery(this); |
| 563 |
|
| 564 |
// Is it the active tab ? |
| 565 |
if(sec.attr('pagelayer-show-tab') != active_tab){ |
| 566 |
sec.hide(); |
| 567 |
}else{ |
| 568 |
sec.show(); |
| 569 |
} |
| 570 |
}); |
| 571 |
|
| 572 |
// Find all Elements in the Property dialog and loop |
| 573 |
pagelayer_elpd.find('[pagelayer-element-id]').each(function(){ |
| 574 |
|
| 575 |
var holder = jQuery(this); |
| 576 |
var id = holder.attr('pagelayer-element-id'); |
| 577 |
var jEle = pagelayer_ele_by_id(id); |
| 578 |
var tag = pagelayer_tag(jEle); |
| 579 |
//console.log('Main : '+id+' - '+tag); |
| 580 |
//console.log(pagelayer_active); |
| 581 |
|
| 582 |
// All props |
| 583 |
var all_props = pagelayer_shortcodes[tag]; |
| 584 |
|
| 585 |
// Loop through all props |
| 586 |
for(var i in pagelayer_tabs){ |
| 587 |
|
| 588 |
var tab = pagelayer_tabs[i]; |
| 589 |
|
| 590 |
for(var section in all_props[tab]){ |
| 591 |
|
| 592 |
var props = section in pagelayer_shortcodes[tag] ? pagelayer_shortcodes[tag][section] : pagelayer_styles[section]; |
| 593 |
|
| 594 |
for(var x in props){ |
| 595 |
|
| 596 |
var prop = props[x]; |
| 597 |
|
| 598 |
// If the prop is a group, we continue |
| 599 |
if(prop['type'] == 'group'){ |
| 600 |
continue; |
| 601 |
} |
| 602 |
|
| 603 |
// Find the row |
| 604 |
var row = false; |
| 605 |
|
| 606 |
holder.find('[pagelayer-elp-name="'+x+'"]').each(function(){ |
| 607 |
var j = jQuery(this); |
| 608 |
var _id = j.closest('[pagelayer-element-id]').attr('pagelayer-element-id'); |
| 609 |
//console.log(_id+' = '+id); |
| 610 |
|
| 611 |
// Is the parent the same ? |
| 612 |
if(_id == id){ |
| 613 |
row = j; |
| 614 |
} |
| 615 |
}); |
| 616 |
|
| 617 |
// Do you have a show or hide ? |
| 618 |
if(!row){ |
| 619 |
//console.log('Not Found : '+x+' - '+id); |
| 620 |
continue; |
| 621 |
} |
| 622 |
|
| 623 |
// Is the row visible ? |
| 624 |
if(row.closest('[pagelayer-show-tab]').attr('pagelayer-show-tab') != active_tab){ |
| 625 |
row.hide(); |
| 626 |
continue; |
| 627 |
} |
| 628 |
|
| 629 |
// Now lets show or hide the element |
| 630 |
if(!('req' in prop || 'show' in prop)){ |
| 631 |
row.show(); |
| 632 |
continue; |
| 633 |
} |
| 634 |
|
| 635 |
// List of considerations |
| 636 |
var show = {}; |
| 637 |
|
| 638 |
// We have both req and show, so lets just combine the values and then show |
| 639 |
// NOTE : We need to make an array and not just merge the 2 as they are references |
| 640 |
if('req' in prop && 'show' in prop){ |
| 641 |
|
| 642 |
// Add the req values |
| 643 |
show = JSON.parse(JSON.stringify(prop['req'])); |
| 644 |
|
| 645 |
// Now the show values need to be looped |
| 646 |
for(var t in prop['show']){ |
| 647 |
show[t] = prop['show'][t]; |
| 648 |
} |
| 649 |
|
| 650 |
}else{ |
| 651 |
show = 'req' in prop ? prop['req'] : prop['show']; |
| 652 |
} |
| 653 |
|
| 654 |
// We will hide by default |
| 655 |
var toShow = true; |
| 656 |
|
| 657 |
for(var showParam in show){ |
| 658 |
var reqval = show[showParam]; |
| 659 |
var except = showParam.substr(0, 1) == '!' ? true : false; |
| 660 |
showParam = except ? showParam.substr(1) : showParam; |
| 661 |
var val = pagelayer_get_att(jEle, showParam) || ''; |
| 662 |
|
| 663 |
//console.log('Show '+x+' '+showParam+' '+reqval+' '+val); |
| 664 |
|
| 665 |
// Is the value not the same, then we can show |
| 666 |
if(except){ |
| 667 |
|
| 668 |
if(typeof reqval == 'string' && reqval == val){ |
| 669 |
toShow = false; |
| 670 |
break; |
| 671 |
} |
| 672 |
|
| 673 |
// Its an array and a value is found, then dont show |
| 674 |
if(typeof reqval != 'string' && reqval.indexOf(val) > -1){ |
| 675 |
toShow = false; |
| 676 |
break; |
| 677 |
} |
| 678 |
|
| 679 |
// The value must be equal |
| 680 |
}else{ |
| 681 |
|
| 682 |
if(typeof reqval == 'string' && reqval != val){ |
| 683 |
toShow = false; |
| 684 |
break; |
| 685 |
} |
| 686 |
|
| 687 |
// Its an array and no value is found, then dont show |
| 688 |
if(typeof reqval != 'string' && reqval.indexOf(val) === -1){ |
| 689 |
toShow = false; |
| 690 |
break; |
| 691 |
} |
| 692 |
} |
| 693 |
} |
| 694 |
|
| 695 |
// Are we to show ? |
| 696 |
if(toShow){ |
| 697 |
row.show(); |
| 698 |
}else{ |
| 699 |
row.hide(); |
| 700 |
} |
| 701 |
|
| 702 |
} |
| 703 |
|
| 704 |
} |
| 705 |
} |
| 706 |
|
| 707 |
}); |
| 708 |
|
| 709 |
}; |
| 710 |
|
| 711 |
var pagelayer_widget_timer; |
| 712 |
var pagelayer_widget_cache = {}; |
| 713 |
|
| 714 |
// Load the widget settings |
| 715 |
function pagelayer_elpd_widget_settings(el, sec, onfocus){ |
| 716 |
|
| 717 |
var show_form = function(html){ |
| 718 |
|
| 719 |
sec.html('<form class="pagelayer-widgets-form">'+html+'</form>'); |
| 720 |
|
| 721 |
// Handle on form data change |
| 722 |
sec.find('form :input').on('change', function(){ |
| 723 |
//console.log('Changed !'); |
| 724 |
|
| 725 |
// Clear any previous timeout |
| 726 |
clearTimeout(pagelayer_widget_timer); |
| 727 |
|
| 728 |
// Set a timer for constant change |
| 729 |
pagelayer_widget_timer = setTimeout(function(){ |
| 730 |
pagelayer_elpd_widget_settings(el, sec); |
| 731 |
//console.log('Calling'); |
| 732 |
}, 500); |
| 733 |
|
| 734 |
}); |
| 735 |
} |
| 736 |
|
| 737 |
// Is it onfocus ? |
| 738 |
onfocus = onfocus || false; |
| 739 |
|
| 740 |
// Its an onfocus |
| 741 |
if(onfocus && el.id in pagelayer_widget_cache){ |
| 742 |
show_form(pagelayer_widget_cache[el.id]); |
| 743 |
return true; |
| 744 |
} |
| 745 |
|
| 746 |
var post = {}; |
| 747 |
post['action'] = 'pagelayer_wp_widget'; |
| 748 |
post['pagelayer_nonce'] = pagelayer_ajax_nonce; |
| 749 |
post['tag'] = el.tag; |
| 750 |
post['pagelayer-id'] = el.id; |
| 751 |
|
| 752 |
// Any atts ? |
| 753 |
if('widget_data' in el.atts){ |
| 754 |
post['widget_data'] = el.atts['widget_data']; |
| 755 |
} |
| 756 |
|
| 757 |
// Post any existing data |
| 758 |
var form = sec.find('form'); |
| 759 |
// Archive widget checkbox fix |
| 760 |
var inputCheckbox = form.find('input[type=checkbox]'); |
| 761 |
for(var i=0; i<inputCheckbox.length; i++){ |
| 762 |
if(inputCheckbox[i].value == 'on'){ |
| 763 |
form.find('input[type=checkbox]')[i].value = 1; |
| 764 |
} |
| 765 |
} |
| 766 |
|
| 767 |
if(form.length > 0){ |
| 768 |
//console.log(form.serialize()); |
| 769 |
post['values'] = form.serialize(); |
| 770 |
} |
| 771 |
|
| 772 |
jQuery.ajax({ |
| 773 |
url: pagelayer_ajax_url, |
| 774 |
type: 'post', |
| 775 |
data: post, |
| 776 |
success: function(data) { |
| 777 |
//console.log('Widget Data');console.log(data); |
| 778 |
|
| 779 |
// Show the form |
| 780 |
if('form' in data){ |
| 781 |
show_form(data['form']); |
| 782 |
|
| 783 |
// Store in cache |
| 784 |
pagelayer_widget_cache[el.id] = data['form']; |
| 785 |
} |
| 786 |
|
| 787 |
// Show the content |
| 788 |
if('html' in data){ |
| 789 |
el.$.html(data['html']); |
| 790 |
pagelayer_sc_render(el.$);// Re-Render the CSS |
| 791 |
} |
| 792 |
|
| 793 |
// Any set attributes ? |
| 794 |
if('widget_data' in data){ |
| 795 |
pagelayer_set_atts(el.$, 'widget_data', JSON.stringify(data['widget_data'])); |
| 796 |
} |
| 797 |
|
| 798 |
}, |
| 799 |
fail: function(data) { |
| 800 |
pagelayer_show_msg('Some error occured in getting the widget data', 'error'); |
| 801 |
} |
| 802 |
}); |
| 803 |
|
| 804 |
} |
| 805 |
|
| 806 |
// Will set the attribute and also render |
| 807 |
function _pagelayer_set_atts(row, val, no_default){ |
| 808 |
var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id'); |
| 809 |
var jEle = jQuery('[pagelayer-id='+id+']'); |
| 810 |
var tag = pagelayer_tag(jEle); |
| 811 |
var prop_name = row.attr('pagelayer-elp-name'); |
| 812 |
var prop = pagelayer.props_ref[tag][prop_name]; |
| 813 |
|
| 814 |
// Is there a unit ? |
| 815 |
var uEle = row.find('.pagelayer-elp-units'); |
| 816 |
if(uEle.length > 0 && !pagelayer_empty(val)){ |
| 817 |
var unit = uEle.find('[selected]').html(); |
| 818 |
if(Array.isArray(val)){ |
| 819 |
for(var i in val){ |
| 820 |
if(val[i].length < 1){ |
| 821 |
continue; |
| 822 |
} |
| 823 |
val[i] = val[i]+unit; |
| 824 |
} |
| 825 |
}else{ |
| 826 |
val = val+unit; |
| 827 |
} |
| 828 |
} |
| 829 |
|
| 830 |
// Are we in another mode ? |
| 831 |
var mode = ('screen' in prop && pagelayer_get_screen_mode() != 'desktop') ? '_'+pagelayer_get_screen_mode() : ''; |
| 832 |
|
| 833 |
pagelayer_set_atts(jEle, prop_name+mode, val); |
| 834 |
|
| 835 |
// Are we to skip setting defaults ? |
| 836 |
no_default = no_default || false; |
| 837 |
if(!no_default){ |
| 838 |
|
| 839 |
// We need to set defaults for dependents |
| 840 |
var hasSet = pagelayer_set_default_atts(jEle, 5); |
| 841 |
|
| 842 |
// We need to reopen the left panel |
| 843 |
// Note : If two simultaneous calls are made, then this will cause problems |
| 844 |
// 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 |
| 845 |
if(hasSet){ |
| 846 |
pagelayer_elpd_open(jEle); |
| 847 |
} |
| 848 |
} |
| 849 |
//console.trace();console.log('Setting Attr'); |
| 850 |
|
| 851 |
// Render |
| 852 |
pagelayer_sc_render(jEle); |
| 853 |
|
| 854 |
// Show default button or not |
| 855 |
if(pagelayer_properties_filter(prop) && pagelayer_empty(row.find('.pagelayer-pro-req').length)){ |
| 856 |
pagelayer_show_default_button(row, prop, val); |
| 857 |
} |
| 858 |
|
| 859 |
if('onchange' in prop){ |
| 860 |
var fn = window[prop['onchange']]; |
| 861 |
if(typeof fn === 'function'){ |
| 862 |
fn(jEle, row, val); |
| 863 |
} |
| 864 |
} |
| 865 |
}; |
| 866 |
|
| 867 |
// Will set the attribute but not render |
| 868 |
function _pagelayer_set_tmp_atts(row, suffix, val){ |
| 869 |
var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id'); |
| 870 |
var jEle = jQuery('[pagelayer-id='+id+']'); |
| 871 |
pagelayer_set_tmp_atts(jEle, row.attr('pagelayer-elp-name')+(suffix.length > 0 ? '-'+suffix : ''), val); |
| 872 |
}; |
| 873 |
|
| 874 |
// Will clear the attribute but not render |
| 875 |
function _pagelayer_clear_tmp_atts(row){ |
| 876 |
var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id'); |
| 877 |
var jEle = jQuery('[pagelayer-id='+id+']'); |
| 878 |
pagelayer_clear_tmp_atts(jEle, row.attr('pagelayer-elp-name')); |
| 879 |
}; |
| 880 |
|
| 881 |
// Get the attribute of images only |
| 882 |
function _pagelayer_img_tmp_atts(row){ |
| 883 |
var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id'); |
| 884 |
var jEle = jQuery('[pagelayer-id='+id+']'); |
| 885 |
return pagelayer_img_tmp_atts(jEle, row.attr('pagelayer-elp-name')); |
| 886 |
}; |
| 887 |
|
| 888 |
// Get the tmp att |
| 889 |
function _pagelayer_get_tmp_att(row, suffix){ |
| 890 |
var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id'); |
| 891 |
var jEle = jQuery('[pagelayer-id='+id+']'); |
| 892 |
return pagelayer_get_tmp_att(jEle, row.attr('pagelayer-elp-name')+'-'+suffix); |
| 893 |
}; |
| 894 |
|
| 895 |
// Create the Label |
| 896 |
function pagelayer_elp_label(row, prop){ |
| 897 |
row.append('<div class="pagelayer-elp-label-div" type="'+prop['type']+'"><label class="pagelayer-elp-label">'+prop['label']+'</label></div>'); |
| 898 |
|
| 899 |
var label = row.children('.pagelayer-elp-label-div'); |
| 900 |
|
| 901 |
// Do we have screen ? |
| 902 |
if('screen' in prop){ |
| 903 |
var mode = pagelayer_get_screen_mode(); |
| 904 |
var screen = '<div class="pagelayer-elp-screen">'+ |
| 905 |
'<i class="pli pli-desktop" ></i>'+ |
| 906 |
'<i class="pli pli-tablet" ></i>'+ |
| 907 |
'<i class="pli pli-mobile" ></i>'+ |
| 908 |
'<i class="pagelayer-prop-screen pli pli-'+mode+'" ></i>'+ |
| 909 |
'</div>'; |
| 910 |
label.append(screen); |
| 911 |
|
| 912 |
// Set screen mode on change |
| 913 |
label.find('.pli:not(.pagelayer-prop-screen)').on('click', function(){ |
| 914 |
var mode = 'desktop'; |
| 915 |
var jEle = jQuery(this); |
| 916 |
|
| 917 |
// Tablet ? |
| 918 |
if(jEle.hasClass('pli-tablet')){ |
| 919 |
mode = 'tablet'; |
| 920 |
} |
| 921 |
|
| 922 |
// Mobile ? |
| 923 |
if(jEle.hasClass('pli-mobile')){ |
| 924 |
mode = 'mobile'; |
| 925 |
} |
| 926 |
|
| 927 |
pagelayer_set_screen_mode(mode); |
| 928 |
label.find('.pagelayer-elp-screen .pli').removeClass('open'); |
| 929 |
|
| 930 |
}); |
| 931 |
|
| 932 |
// On change of screen handle the values |
| 933 |
label.find('.pagelayer-elp-screen').on('pagelayer-screen-changed', function(e){ |
| 934 |
|
| 935 |
label.find('.pagelayer-elp-screen .pli').removeClass('open'); |
| 936 |
var mode = pagelayer_get_screen_mode(); |
| 937 |
var modes = {desktop: '', tablet: '_tablet', mobile: '_mobile'}; |
| 938 |
|
| 939 |
// Get the current current new val |
| 940 |
prop.c['val'] = pagelayer_get_att(prop.el.$, prop.c['name']+modes[mode]); |
| 941 |
|
| 942 |
// Handle the amount |
| 943 |
if(pagelayer_empty(prop.c['val'])){ |
| 944 |
prop.c['val'] = ''; |
| 945 |
} |
| 946 |
|
| 947 |
// Remove the siblings |
| 948 |
label.siblings().each(function(){ |
| 949 |
var j = jQuery(this); |
| 950 |
|
| 951 |
if(j.hasClass('pagelayer-elp-desc')){ |
| 952 |
return; |
| 953 |
} |
| 954 |
|
| 955 |
j.remove(); |
| 956 |
}); |
| 957 |
|
| 958 |
// Create the vals again |
| 959 |
var fn = window['pagelayer_elp_'+prop['type']]; |
| 960 |
|
| 961 |
// The main property |
| 962 |
fn(row, prop); |
| 963 |
|
| 964 |
}); |
| 965 |
|
| 966 |
label.find('.pagelayer-elp-screen .pagelayer-prop-screen').on('click', function(e){ |
| 967 |
jQuery(this).siblings().toggleClass('open'); |
| 968 |
}) |
| 969 |
|
| 970 |
} |
| 971 |
|
| 972 |
// Do we have pro version requirement ? |
| 973 |
if('pro' in prop && pagelayer_empty(pagelayer_pro)){ |
| 974 |
var txt = prop['pro'].length > 1 ? prop['pro'] : pagelayer.pro_txt; |
| 975 |
var pro = jQuery('<div class="pagelayer-pro-req">Pro</div>'); |
| 976 |
pro.attr('data-tlite', txt); |
| 977 |
label.append(pro); |
| 978 |
} |
| 979 |
|
| 980 |
// Do we have units ? |
| 981 |
if('units' in prop){ |
| 982 |
|
| 983 |
var units = ''; |
| 984 |
var tmp_val = prop.c['val']; |
| 985 |
var default_unit = 0; |
| 986 |
|
| 987 |
// Get unit from value |
| 988 |
if(!(pagelayer_empty(tmp_val))){ |
| 989 |
|
| 990 |
for(var i in prop['units']){ |
| 991 |
if(pagelayer_is_string(tmp_val) && tmp_val.search(prop['units'][i]) != -1){ |
| 992 |
default_unit = i; |
| 993 |
}else if(tmp_val[0].search(prop['units'][i]) != -1 ){ |
| 994 |
default_unit = i; |
| 995 |
} |
| 996 |
} |
| 997 |
} |
| 998 |
|
| 999 |
for(var i in prop['units']){ |
| 1000 |
units += '<span '+(i == default_unit ? 'selected' : '')+'>'+prop['units'][i]+'</span>'; |
| 1001 |
} |
| 1002 |
|
| 1003 |
label.append('<div class="pagelayer-elp-units">'+units+'</div>'); |
| 1004 |
|
| 1005 |
// Set unit on change |
| 1006 |
label.find('.pagelayer-elp-units span').on('click', function(){ |
| 1007 |
|
| 1008 |
label.find('.pagelayer-elp-units span').each(function(){ |
| 1009 |
jQuery(this).removeAttr('selected'); |
| 1010 |
}); |
| 1011 |
|
| 1012 |
jQuery(this).attr('selected', 1); |
| 1013 |
|
| 1014 |
}); |
| 1015 |
|
| 1016 |
} |
| 1017 |
|
| 1018 |
// Include default button |
| 1019 |
if(pagelayer_properties_filter(prop['type']) && pagelayer_empty(row.find('.pagelayer-pro-req').length)){ |
| 1020 |
|
| 1021 |
var defaultButton = '<span class="pagelayer-elp-default" title="'+pagelayer_l('back_to_default')+'" ><i class="fas fa-undo"></i></span>'; |
| 1022 |
label.append(defaultButton); |
| 1023 |
|
| 1024 |
label.find('.pagelayer-elp-default').on('click', function(){ |
| 1025 |
|
| 1026 |
prop.c['val'] = ('default' in prop) ? prop.default : ''; |
| 1027 |
_pagelayer_set_atts(row, prop.c['val']); |
| 1028 |
|
| 1029 |
jQuery(this).attr('data_show',false); |
| 1030 |
|
| 1031 |
// Empty the row |
| 1032 |
row.html(''); |
| 1033 |
|
| 1034 |
// Re-render the row |
| 1035 |
pagelayer_elpd_render_row(row, prop); |
| 1036 |
|
| 1037 |
}); |
| 1038 |
} |
| 1039 |
}; |
| 1040 |
|
| 1041 |
// Create the Description |
| 1042 |
function pagelayer_elp_desc(row, label){ |
| 1043 |
row.append('<div class="pagelayer-elp-desc">'+label+'</div>'); |
| 1044 |
}; |
| 1045 |
|
| 1046 |
// The Text property |
| 1047 |
function pagelayer_elp_text(row, prop){ |
| 1048 |
|
| 1049 |
var div = '<div class="pagelayer-elp-text-div">'+ |
| 1050 |
'<input type="text" class="pagelayer-elp-text" name="'+prop.c['name']+'" value="'+pagelayer_htmlEntities(prop.c['val'])+'"></input>'+ |
| 1051 |
'</div>'; |
| 1052 |
|
| 1053 |
row.append(div); |
| 1054 |
|
| 1055 |
row.find('input').on('input', function(){ |
| 1056 |
_pagelayer_set_atts(row, jQuery(this).val());// Save and Render |
| 1057 |
}); |
| 1058 |
|
| 1059 |
}; |
| 1060 |
|
| 1061 |
// The Select property |
| 1062 |
function pagelayer_elp_select(row, prop){ |
| 1063 |
|
| 1064 |
var options = ''; |
| 1065 |
var option = function(val, lang){ |
| 1066 |
var selected = (val != prop.c['val']) ? '' : 'selected="selected"'; |
| 1067 |
return '<option class="pagelayer-elp-select-option" value="'+val+'" '+selected+'>'+lang+'</option>'; |
| 1068 |
} |
| 1069 |
|
| 1070 |
for (x in prop['list']){ |
| 1071 |
|
| 1072 |
// Single item |
| 1073 |
if(typeof prop['list'][x] == 'string'){ |
| 1074 |
options += option(x, prop['list'][x]); |
| 1075 |
|
| 1076 |
// Groups |
| 1077 |
}else{ |
| 1078 |
options += '<optgroup label="'+x+'">'; |
| 1079 |
|
| 1080 |
for(var y in prop['list'][x]){ |
| 1081 |
options += option(y, prop['list'][x][y]); |
| 1082 |
} |
| 1083 |
|
| 1084 |
options += '</optgroup>'; |
| 1085 |
} |
| 1086 |
} |
| 1087 |
|
| 1088 |
var div = '<div class="pagelayer-elp-select-div pagelayer-elp-pos-rel">'+ |
| 1089 |
'<select class="pagelayer-elp-select pagelayer-select" name="'+prop.c['name']+'">'+options+'</select>'+ |
| 1090 |
'</div>'; |
| 1091 |
|
| 1092 |
row.append(div); |
| 1093 |
|
| 1094 |
row.find('select').on('change', function(){ |
| 1095 |
|
| 1096 |
var sEle = jQuery(this); |
| 1097 |
|
| 1098 |
if(sEle.attr('name') == "animation"){ |
| 1099 |
_pagelayer_trigger_anim(row, sEle.val()); |
| 1100 |
} |
| 1101 |
|
| 1102 |
_pagelayer_set_atts(row, sEle.val());// Save and Render |
| 1103 |
|
| 1104 |
}); |
| 1105 |
|
| 1106 |
} |
| 1107 |
|
| 1108 |
// The MultiSelect property |
| 1109 |
function pagelayer_elp_multiselect(row, prop){ |
| 1110 |
|
| 1111 |
var selection = []; |
| 1112 |
if(!pagelayer_empty(prop.c['val'])){ |
| 1113 |
//selection = JSON.parse(prop.c['val']); |
| 1114 |
selection = prop.c['val'].split(','); |
| 1115 |
} |
| 1116 |
|
| 1117 |
var options = ''; |
| 1118 |
var option = function(val, lang){ |
| 1119 |
var selected = (jQuery.inArray(val,selection) == -1 ? '' : 'selected="selected"'); |
| 1120 |
return '<li class="pagelayer-elp-multiselect-option" data-val="'+val+'" '+selected+'>'+lang+'</li>'; |
| 1121 |
} |
| 1122 |
|
| 1123 |
var show_sel = function(val){ |
| 1124 |
var sel_html = ''; |
| 1125 |
jQuery.each(val, function(index, value){ |
| 1126 |
sel_html += '<span class="pagelayer-elp-multiselect-selected" data-val="'+value+'">'+prop['list'][value]+' <span class="pagelayer-elp-multiselect-remove">x</span></span>'; |
| 1127 |
}); |
| 1128 |
return sel_html; |
| 1129 |
} |
| 1130 |
|
| 1131 |
var setup_remove = function(){ |
| 1132 |
row.find('.pagelayer-elp-multiselect-remove').on('click', function(){ |
| 1133 |
var sVal = jQuery(this).parent().attr('data-val'); |
| 1134 |
row.find('.pagelayer-elp-multiselect-option[data-val='+sVal+']').click(); |
| 1135 |
}); |
| 1136 |
} |
| 1137 |
|
| 1138 |
for (x in prop['list']){ |
| 1139 |
options += option(x, prop['list'][x]); |
| 1140 |
} |
| 1141 |
|
| 1142 |
var div = '<div class="pagelayer-elp-multiselect-div pagelayer-elp-pos-rel">'+ |
| 1143 |
'<div class="pagelayer-elp-multiselect">'+show_sel(selection)+'</div>'+ |
| 1144 |
'<ul class="pagelayer-elp-multiselect-ul" name="'+prop.c['name']+'">'+options+'</ul>'+ |
| 1145 |
'</div>'; |
| 1146 |
|
| 1147 |
row.append(div); |
| 1148 |
setup_remove(); |
| 1149 |
|
| 1150 |
row.find('.pagelayer-elp-multiselect-option').on('click', function(){ |
| 1151 |
|
| 1152 |
var sVal = jQuery(this).attr('data-val'); |
| 1153 |
|
| 1154 |
if(jQuery.inArray(sVal,selection) == -1){ |
| 1155 |
selection.push(sVal); |
| 1156 |
row.find('[data-val="'+sVal+'"]').attr('selected','selected'); |
| 1157 |
}else{ |
| 1158 |
selection.splice(jQuery.inArray(sVal,selection),1); |
| 1159 |
row.find('[data-val="'+sVal+'"]').removeAttr('selected'); |
| 1160 |
} |
| 1161 |
|
| 1162 |
//_pagelayer_set_atts(row,JSON.stringify(selection));// Save and Render |
| 1163 |
_pagelayer_set_atts(row, selection.join(','));// Save and Render |
| 1164 |
|
| 1165 |
row.find('.pagelayer-elp-multiselect').html(show_sel(selection)); |
| 1166 |
setup_remove(); |
| 1167 |
|
| 1168 |
}); |
| 1169 |
|
| 1170 |
// Open the selector |
| 1171 |
row.find('.pagelayer-elp-multiselect').on('click', function(){ |
| 1172 |
row.find('.pagelayer-elp-multiselect-ul').slideToggle(100); |
| 1173 |
}); |
| 1174 |
|
| 1175 |
} |
| 1176 |
|
| 1177 |
function _pagelayer_trigger_anim(row, anim){ |
| 1178 |
var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id'); |
| 1179 |
var classList = jQuery('[pagelayer-id='+id+']').attr('class'); |
| 1180 |
classList = classList.split(/\s+/); |
| 1181 |
//console.log(classList); |
| 1182 |
var options = []; |
| 1183 |
row.find('option').each(function(){ |
| 1184 |
var found = jQuery.inArray( jQuery(this).val(), classList ); |
| 1185 |
if( found != -1){ |
| 1186 |
//var found = jQuery(this).val(); |
| 1187 |
jQuery('[pagelayer-id='+id+']').removeClass(jQuery(this).val()); |
| 1188 |
//break; |
| 1189 |
} |
| 1190 |
//options.push(jQuery(this).val()); |
| 1191 |
}); |
| 1192 |
jQuery('[pagelayer-id='+id+']').removeClass('pagelayer-wow').addClass(anim + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ |
| 1193 |
jQuery(this).removeClass(anim+ ' animated'); |
| 1194 |
}); |
| 1195 |
} |
| 1196 |
|
| 1197 |
// The Checkbox property |
| 1198 |
function pagelayer_elp_checkbox(row, prop){ |
| 1199 |
|
| 1200 |
var div = '<div class="pagelayer-elp-checkbox-div">'+ |
| 1201 |
'<input type="checkbox" name="'+prop.c['name']+'" class="pagelayer-elp-checkbox" />'+ |
| 1202 |
'</div>'; |
| 1203 |
|
| 1204 |
row.append(div); |
| 1205 |
|
| 1206 |
if(prop.c['val'].length > 0){ |
| 1207 |
row.find('input').attr('checked', 'checked'); |
| 1208 |
}else{ |
| 1209 |
row.find('input').removeAttr('checked'); |
| 1210 |
} |
| 1211 |
|
| 1212 |
// When the change is called |
| 1213 |
row.find('input').on('change', function(){ |
| 1214 |
|
| 1215 |
// We set to string true or false |
| 1216 |
var val = jQuery(this).is(':checked') ? 'true' : ''; |
| 1217 |
|
| 1218 |
_pagelayer_set_atts(row, val);// Save and Render |
| 1219 |
}); |
| 1220 |
|
| 1221 |
} |
| 1222 |
|
| 1223 |
// The Radio property |
| 1224 |
function pagelayer_elp_radio(row, prop){ |
| 1225 |
|
| 1226 |
var active = 'pagelayer-elp-radio-active'; |
| 1227 |
var div = '<div class="pagelayer-elp-radio-div">'; |
| 1228 |
|
| 1229 |
for(var x in prop.list){ |
| 1230 |
var addclass = (prop.c['val'] == x) ? active : ''; |
| 1231 |
div += '<a class="pagelayer-elp-radio '+addclass+'" val="'+x+'">'+prop.list[x]+'</a>'; |
| 1232 |
} |
| 1233 |
|
| 1234 |
div += '</div>'; |
| 1235 |
|
| 1236 |
row.append(div); |
| 1237 |
|
| 1238 |
row.find('.pagelayer-elp-radio').each(function(){ |
| 1239 |
|
| 1240 |
jQuery(this).on('click', function (){ |
| 1241 |
|
| 1242 |
// Remove existing active class |
| 1243 |
jQuery(this).parent().find('.'+active).removeClass(active); |
| 1244 |
|
| 1245 |
// Set active |
| 1246 |
jQuery(this).addClass(active); |
| 1247 |
|
| 1248 |
_pagelayer_set_atts(row, jQuery(this).attr('val'));// Save and Render |
| 1249 |
|
| 1250 |
}); |
| 1251 |
|
| 1252 |
}); |
| 1253 |
|
| 1254 |
} |
| 1255 |
|
| 1256 |
// The Image Property |
| 1257 |
function pagelayer_elp_image(row, prop){ |
| 1258 |
|
| 1259 |
var imgObj = {}; |
| 1260 |
var isRetina = false; |
| 1261 |
|
| 1262 |
// Previously saved values |
| 1263 |
if(typeof prop.c['val'] === 'object'){ |
| 1264 |
imgObj = prop.c['val']; |
| 1265 |
}else{ |
| 1266 |
imgObj['img'] = prop.c['val']; |
| 1267 |
} |
| 1268 |
|
| 1269 |
var tmp = prop.c['name']+'-url'; |
| 1270 |
var def = pagelayer.blank_img; |
| 1271 |
|
| 1272 |
// Background image URls |
| 1273 |
var src = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : ((!pagelayer_empty(imgObj['img']) && String(imgObj['img']).search(/http(|s):\/\//i) == 0) ? imgObj['img'] : def ); |
| 1274 |
|
| 1275 |
// Do we have a URL set ? |
| 1276 |
var style = 'style="background-image:url(\''+src+'\')"'; |
| 1277 |
|
| 1278 |
var div = '<div class="pagelayer-elp-image-div">'+ |
| 1279 |
'<div class="pagelayer-elp-drop-zone">'+ |
| 1280 |
'<div>'+ |
| 1281 |
'<i class="fas fa-upload"></i>'+ |
| 1282 |
'<h4>'+pagelayer_l('drop_file')+'</h4>'+ |
| 1283 |
'<div class="pagelayer-elp-img-up-progress">'+ |
| 1284 |
'<div class="pagelayer-elp-img-up-bar"></div>'+ |
| 1285 |
'</div>'+ |
| 1286 |
'</div>'+ |
| 1287 |
'</div>'+ |
| 1288 |
'<div class="pagelayer-elp-image" '+style+'></div>'+ |
| 1289 |
'<div class="pagelayer-elp-image-delete"><i class="pli pli-trashcan" ></i></div>'; |
| 1290 |
|
| 1291 |
// Retina image icon |
| 1292 |
if(isRetina){ |
| 1293 |
div += '<div class="pagelayer-elp-image-retina"><i class="pli pli-eye" ></i></div>'; |
| 1294 |
} |
| 1295 |
|
| 1296 |
if(!pagelayer_empty(pagelayer.cmode) && ! ('ai' in prop && prop['ai'] == false)){ |
| 1297 |
var tmp_ai = pagelayer_get_att(prop.el.$, prop.c['name']+'_ai'); |
| 1298 |
var checked = tmp_ai == false ? 'checked' : ''; |
| 1299 |
|
| 1300 |
div += '<div class="pagelayer-elp-image-ai" data-tlite="If checked, replace by AI will be ignored"><input type="checkbox" '+checked+'/></div>'; |
| 1301 |
} |
| 1302 |
|
| 1303 |
|
| 1304 |
div +='</div>'; |
| 1305 |
|
| 1306 |
// Add retina images option |
| 1307 |
if(isRetina){ |
| 1308 |
|
| 1309 |
var tmp_retina = prop.c['name']+'-retina-url'; |
| 1310 |
var tmp_retina_mobile = prop.c['name']+'-retina-mobile-url'; |
| 1311 |
|
| 1312 |
var srcRetina = (tmp_retina in prop.el.tmp) ? prop.el.tmp[tmp_retina] : (('retina' in imgObj && !pagelayer_empty(imgObj['retina']) && String(imgObj['retina']).search(/http(|s):\/\//i) == 0) ? imgObj['retina'] : def ); |
| 1313 |
|
| 1314 |
var srcRetinaMobile = (tmp_retina_mobile in prop.el.tmp) ? prop.el.tmp[tmp_retina_mobile] : (('retina_mobile' in imgObj && !pagelayer_empty(imgObj['retina_mobile']) && String(imgObj['retina_mobile']).search(/http(|s):\/\//i) == 0) ? imgObj['retina_mobile'] : def ); |
| 1315 |
|
| 1316 |
var style_retina = 'style="background-image:url(\''+srcRetina+'\')"'; |
| 1317 |
var style_retina_mobile = 'style="background-image:url(\''+srcRetinaMobile+'\')"'; |
| 1318 |
|
| 1319 |
div +='<div class="pagelayer-elp-label-div pagelayer-retina-label" type="image" style="display:none;">'+ |
| 1320 |
'<label class="pagelayer-elp-label">Select Retina Image</label>'+ |
| 1321 |
'</div>'+ |
| 1322 |
'<div class="pagelayer-elp-retina-image-div" style="display:none;">'+ |
| 1323 |
'<div class="pagelayer-elp-drop-zone">'+ |
| 1324 |
'<div>'+ |
| 1325 |
'<i class="fas fa-upload"></i>'+ |
| 1326 |
'<h4>'+pagelayer_l('drop_file')+'</h4>'+ |
| 1327 |
'<div class="pagelayer-elp-img-up-progress">'+ |
| 1328 |
'<div class="pagelayer-elp-img-up-bar"></div>'+ |
| 1329 |
'</div>'+ |
| 1330 |
'</div>'+ |
| 1331 |
'</div>'+ |
| 1332 |
'<div class="pagelayer-elp-image pagelayer-retina" '+style_retina+'></div>'+ |
| 1333 |
'<div class="pagelayer-elp-retina-delete"><i class="pli pli-trashcan" ></i></div>'+ |
| 1334 |
'</div>'+ |
| 1335 |
'<div class="pagelayer-form-item">'+ |
| 1336 |
'<div class="pagelayer-elp-label-div pagelayer-retina-label" type="image" style="display:none;">'+ |
| 1337 |
'<label class="pagelayer-elp-label">Select Retina Image For Mobile</label>'+ |
| 1338 |
'</div>'+ |
| 1339 |
'<div class="pagelayer-elp-checkbox-div pagelayer-retina-label" style="display:none;">'+ |
| 1340 |
'<input type="checkbox" name="overlay" class="pagelayer-elp-checkbox pagelayer-retina-checkbox">'+ |
| 1341 |
'</div>'+ |
| 1342 |
'</div>'+ |
| 1343 |
|
| 1344 |
'<div class="pagelayer-elp-retina-mobile-image-div" style="display:none;">'+ |
| 1345 |
'<div class="pagelayer-elp-drop-zone">'+ |
| 1346 |
'<div>'+ |
| 1347 |
'<i class="fas fa-upload"></i>'+ |
| 1348 |
'<h4>'+pagelayer_l('drop_file')+'</h4>'+ |
| 1349 |
'<div class="pagelayer-elp-img-up-progress">'+ |
| 1350 |
'<div class="pagelayer-elp-img-up-bar"></div>'+ |
| 1351 |
'</div>'+ |
| 1352 |
'</div>'+ |
| 1353 |
'</div>'+ |
| 1354 |
'<div class="pagelayer-elp-image pagelayer-retina-mobile" '+style_retina_mobile+'></div>'+ |
| 1355 |
'<div class="pagelayer-elp-retina-mobile-delete"><i class="pli pli-trashcan" ></i></div>'+ |
| 1356 |
'</div>'; |
| 1357 |
} |
| 1358 |
|
| 1359 |
row.append(div); |
| 1360 |
|
| 1361 |
if(def == src && jQuery.isNumeric(imgObj['img'])){ |
| 1362 |
wp.media.attachment(imgObj['img']).fetch().then(function (data){ |
| 1363 |
var fetch_url = wp.media.attachment(imgObj['img']).get('url') |
| 1364 |
row.find('.pagelayer-elp-image-div .pagelayer-elp-image').css('background-image', 'url(\''+fetch_url+'\')'); |
| 1365 |
_pagelayer_set_tmp_atts(row, 'url', fetch_url); |
| 1366 |
}).fail(function(){ |
| 1367 |
row.find('.pagelayer-elp-image-div .pagelayer-elp-image').css('background-image', 'url(\''+src+'\')') |
| 1368 |
}); |
| 1369 |
} |
| 1370 |
|
| 1371 |
if(isRetina){ |
| 1372 |
if(def == srcRetina && 'retina' in imgObj && jQuery.isNumeric(imgObj['retina'])){ |
| 1373 |
wp.media.attachment(imgObj['retina']).fetch().then(function (data){ |
| 1374 |
var fetch_url = wp.media.attachment(imgObj['retina']).get('url') |
| 1375 |
row.find('.pagelayer-retina').css('background-image', 'url(\''+fetch_url+'\')'); |
| 1376 |
_pagelayer_set_tmp_atts(row, 'retina-url', fetch_url); |
| 1377 |
}).fail(function(){ |
| 1378 |
row.find('.pagelayer-retina').css('background-image', 'url(\''+srcRetina+'\')') |
| 1379 |
}); |
| 1380 |
} |
| 1381 |
|
| 1382 |
if(def == srcRetinaMobile && 'retina_mobile' in imgObj && jQuery.isNumeric(imgObj['retina_mobile'])){ |
| 1383 |
wp.media.attachment(imgObj['retina_mobile']).fetch().then(function (data){ |
| 1384 |
var fetch_url = wp.media.attachment(imgObj['retina_mobile']).get('url') |
| 1385 |
row.find('.pagelayer-retina-mobile').css('background-image', 'url(\''+fetch_url+'\')'); |
| 1386 |
_pagelayer_set_tmp_atts(row, 'retina-mobile-url', fetch_url); |
| 1387 |
}).fail(function(){ |
| 1388 |
row.find('.pagelayer-retina-mobile').css('background-image', 'url(\''+srcRetinaMobile+'\')') |
| 1389 |
}); |
| 1390 |
} |
| 1391 |
} |
| 1392 |
|
| 1393 |
var getImgVal = function(val){ |
| 1394 |
|
| 1395 |
if(typeof val === 'object' && pagelayer_length(val) == 1 && 'img' in val){ |
| 1396 |
return val['img']; |
| 1397 |
} |
| 1398 |
|
| 1399 |
return val; |
| 1400 |
} |
| 1401 |
|
| 1402 |
// Set an Image |
| 1403 |
row.find('.pagelayer-elp-image').on('click', function(){ |
| 1404 |
|
| 1405 |
var button = jQuery(this); |
| 1406 |
var inRetina = button.hasClass('pagelayer-retina'); |
| 1407 |
var inRetinaM = button.hasClass('pagelayer-retina-mobile'); |
| 1408 |
|
| 1409 |
// Load the frame |
| 1410 |
var frame = pagelayer_select_frame('image'); |
| 1411 |
|
| 1412 |
// On select update the stuff |
| 1413 |
frame.on({ |
| 1414 |
'select': function(){ |
| 1415 |
|
| 1416 |
var state = frame.state(); |
| 1417 |
var id = url = ''; |
| 1418 |
|
| 1419 |
// External URL |
| 1420 |
if('props' in state){ |
| 1421 |
|
| 1422 |
id = url = pagelayer_parse_theme_vars(state.props.attributes.url); |
| 1423 |
|
| 1424 |
// Internal from gallery |
| 1425 |
}else{ |
| 1426 |
|
| 1427 |
var attachment = frame.state().get('selection').first().toJSON(); |
| 1428 |
|
| 1429 |
// Set the new ID and URL |
| 1430 |
id = attachment.id; |
| 1431 |
url = attachment.url; |
| 1432 |
var old = _pagelayer_img_tmp_atts(row); |
| 1433 |
|
| 1434 |
//console.log(attachment); |
| 1435 |
if(inRetina){ |
| 1436 |
// To remove past temp attr so that they are not involve in future temp values |
| 1437 |
delete old[prop.c['name']+'-retina-url']; |
| 1438 |
|
| 1439 |
// Keep a list of all sizes |
| 1440 |
for(var x in attachment.sizes){ |
| 1441 |
_pagelayer_set_tmp_atts(row, 'retina-'+x+'-url', attachment.sizes[x].url); |
| 1442 |
delete old[prop.c['name']+'-retina-'+x+'-url']; |
| 1443 |
} |
| 1444 |
|
| 1445 |
for(var x in old){ |
| 1446 |
|
| 1447 |
// Skip for retina and with url atts |
| 1448 |
if(! x.endsWith('-url') || !x.startsWith(prop.c['name']+'-retina') || x.startsWith(prop.c['name']+'-retina-mobile')){ |
| 1449 |
continue; |
| 1450 |
} |
| 1451 |
|
| 1452 |
_pagelayer_set_tmp_atts(row, x, ''); |
| 1453 |
} |
| 1454 |
|
| 1455 |
}else if(inRetinaM){ |
| 1456 |
|
| 1457 |
// To remove past temp attr so that they are not involve in future temp values |
| 1458 |
delete old[prop.c['name']+'-retina-mobile-url']; |
| 1459 |
|
| 1460 |
// Keep a list of all sizes |
| 1461 |
for(var x in attachment.sizes){ |
| 1462 |
_pagelayer_set_tmp_atts(row, 'retina-mobile-'+x+'-url', attachment.sizes[x].url); |
| 1463 |
delete old[prop.c['name']+'-retina-mobile-'+x+'-url']; |
| 1464 |
} |
| 1465 |
|
| 1466 |
for(var x in old){ |
| 1467 |
|
| 1468 |
// Skip for retina and with url atts |
| 1469 |
if(! x.endsWith('-url') || ! x.startsWith(prop.c['name']+'-retina-mobile')){ |
| 1470 |
continue; |
| 1471 |
} |
| 1472 |
|
| 1473 |
_pagelayer_set_tmp_atts(row, x, ''); |
| 1474 |
} |
| 1475 |
|
| 1476 |
}else{ |
| 1477 |
|
| 1478 |
// To remove past temp attr so that they are not involve in future temp values |
| 1479 |
delete old[prop.c['name']+'-url']; |
| 1480 |
|
| 1481 |
// Keep a list of all sizes |
| 1482 |
for(var x in attachment.sizes){ |
| 1483 |
_pagelayer_set_tmp_atts(row, x+'-url', attachment.sizes[x].url); |
| 1484 |
delete old[prop.c['name']+'-'+x+'-url']; |
| 1485 |
} |
| 1486 |
|
| 1487 |
for(var x in old){ |
| 1488 |
|
| 1489 |
// Skip for retina and with url atts |
| 1490 |
if(! x.endsWith('-url') || x.startsWith(prop.c['name']+'-retina')){ |
| 1491 |
continue; |
| 1492 |
} |
| 1493 |
|
| 1494 |
_pagelayer_set_tmp_atts(row, x, ''); |
| 1495 |
} |
| 1496 |
} |
| 1497 |
} |
| 1498 |
|
| 1499 |
// Update thumbnail |
| 1500 |
button.css('background-image', 'url(\''+url+'\')'); |
| 1501 |
|
| 1502 |
// Save and render |
| 1503 |
_pagelayer_set_tmp_atts(row, 'no-image-set', ''); |
| 1504 |
|
| 1505 |
if(inRetina){ |
| 1506 |
_pagelayer_set_tmp_atts(row, 'retina-url', url); |
| 1507 |
imgObj['retina'] = id; |
| 1508 |
}else if(inRetinaM){ |
| 1509 |
_pagelayer_set_tmp_atts(row, 'retina-mobile-url', url); |
| 1510 |
imgObj['retina_mobile'] = id; |
| 1511 |
}else{ |
| 1512 |
_pagelayer_set_tmp_atts(row, 'url', url); |
| 1513 |
imgObj['img'] = id; |
| 1514 |
} |
| 1515 |
|
| 1516 |
_pagelayer_set_atts(row, getImgVal(imgObj)); |
| 1517 |
|
| 1518 |
}, |
| 1519 |
// On open select the appropriate images in the media manager |
| 1520 |
'open': function() { |
| 1521 |
var selection = frame.state().get('selection'); |
| 1522 |
var wp_id = pagelayer_get_att(prop.el.$, prop.c['name']); |
| 1523 |
|
| 1524 |
if(typeof wp_id === 'object'){ |
| 1525 |
if(inRetina){ |
| 1526 |
wp_id = ('retina' in wp_id && !pagelayer_empty(wp_id['retina']) ? wp_id['retina'] : 0 ); |
| 1527 |
}else if(inRetinaM){ |
| 1528 |
wp_id = ('retina_mobile' in wp_id && !pagelayer_empty(wp_id['retina_mobile']) ? wp_id['retina_mobile'] : 0 ); |
| 1529 |
}else{ |
| 1530 |
wp_id = (!pagelayer_empty(wp_id['img']) ? wp_id['img'] : 0 ); |
| 1531 |
} |
| 1532 |
} |
| 1533 |
|
| 1534 |
selection.reset( wp_id ? [ wp.media.attachment( wp_id ) ] : [] ); |
| 1535 |
} |
| 1536 |
}); |
| 1537 |
|
| 1538 |
frame.open(button); |
| 1539 |
|
| 1540 |
return false; |
| 1541 |
|
| 1542 |
}); |
| 1543 |
|
| 1544 |
// Finding and assigning values in the variables |
| 1545 |
var dropzoneParent = row.find('.pagelayer-elp-image-div'); |
| 1546 |
var dropZone = row.find('.pagelayer-elp-drop-zone'); |
| 1547 |
|
| 1548 |
// Inserting values in image drag and drop function |
| 1549 |
pagelayer_img_dragAndDrop(dropzoneParent, dropZone, '', row); |
| 1550 |
|
| 1551 |
row.find('.pagelayer-elp-image-retina').click(function(){ |
| 1552 |
row.find('.pagelayer-retina-label').toggle(); |
| 1553 |
row.find('.pagelayer-elp-retina-image-div').toggle(); |
| 1554 |
var checkval = row.find('.pagelayer-retina-checkbox').is(":checked"); |
| 1555 |
|
| 1556 |
if(checkval == true){ |
| 1557 |
row.find('.pagelayer-retina-checkbox').trigger("click"); |
| 1558 |
} |
| 1559 |
}); |
| 1560 |
|
| 1561 |
// Save temporarily |
| 1562 |
row.find('.pagelayer-elp-image-ai input').on('change', function(){ |
| 1563 |
var aiEle = jQuery(this); |
| 1564 |
|
| 1565 |
var checkval = aiEle.is(":checked"); |
| 1566 |
var ref_data = pagelayer_el_data_ref(prop.el.$); |
| 1567 |
|
| 1568 |
// Save temporarily in atts for comment feature, it is not saved in original content |
| 1569 |
if(checkval == true){ |
| 1570 |
ref_data['attr'][prop.c['name']+'_ai'] = false; |
| 1571 |
}else{ |
| 1572 |
delete ref_data['attr'][prop.c['name']+'_ai']; |
| 1573 |
} |
| 1574 |
pagelayer_el_dump_data(prop.el.$); |
| 1575 |
|
| 1576 |
}); |
| 1577 |
|
| 1578 |
row.find('.pagelayer-retina-checkbox').click(function(){ |
| 1579 |
row.find('.pagelayer-elp-retina-mobile-image-div').toggle(); |
| 1580 |
}); |
| 1581 |
|
| 1582 |
// Delete this |
| 1583 |
row.find('.pagelayer-elp-image-delete').on('click', function(){ |
| 1584 |
|
| 1585 |
// Update thumbnail |
| 1586 |
jQuery(this).parent().find('.pagelayer-elp-image').css('background-image', 'url(\''+def+'\')'); |
| 1587 |
|
| 1588 |
// Set to blank and render |
| 1589 |
_pagelayer_set_atts(row, '', true); |
| 1590 |
|
| 1591 |
imgObj['img'] = def; |
| 1592 |
|
| 1593 |
_pagelayer_set_tmp_atts(row, 'no-image-set', 1); |
| 1594 |
_pagelayer_set_tmp_atts(row, 'url', def); |
| 1595 |
_pagelayer_set_atts(row, getImgVal(imgObj)); |
| 1596 |
}); |
| 1597 |
|
| 1598 |
row.find('.pagelayer-elp-retina-delete').on('click', function(){ |
| 1599 |
// Update thumbnail |
| 1600 |
jQuery(this).parent().find('.pagelayer-elp-image').css('background-image', 'url(\''+def+'\')'); |
| 1601 |
delete imgObj['retina']; |
| 1602 |
|
| 1603 |
_pagelayer_set_tmp_atts(row, 'retina-url', def); |
| 1604 |
_pagelayer_set_atts(row, getImgVal(imgObj)); |
| 1605 |
|
| 1606 |
}); |
| 1607 |
|
| 1608 |
row.find('.pagelayer-elp-retina-mobile-delete').on('click', function(){ |
| 1609 |
|
| 1610 |
// Update thumbnail |
| 1611 |
jQuery(this).parent().find('.pagelayer-elp-image').css('background-image', 'url(\''+def+'\')'); |
| 1612 |
delete imgObj['retina_mobile']; |
| 1613 |
|
| 1614 |
// Set to blank and render |
| 1615 |
_pagelayer_set_tmp_atts(row, 'retina-mobile-url', def); |
| 1616 |
_pagelayer_set_atts(row, getImgVal(imgObj)); |
| 1617 |
|
| 1618 |
}); |
| 1619 |
} |
| 1620 |
|
| 1621 |
// Main image drag and drop function |
| 1622 |
function pagelayer_img_dragAndDrop(dropzoneParent, dropZone, jEle, row){ |
| 1623 |
|
| 1624 |
var reset_dragging = false; |
| 1625 |
|
| 1626 |
dropzoneParent.on('dragover', function(e){ |
| 1627 |
e.preventDefault(); |
| 1628 |
// Checking that the dragged element is a file or not |
| 1629 |
var dt = e.originalEvent.dataTransfer; |
| 1630 |
if(dt.types && (dt.types.indexOf ? dt.types.indexOf('Files') != -1 : dt.types.contains('Files'))){ |
| 1631 |
if(e.originalEvent.dataTransfer.items[0].type.search('image/')!=-1){ |
| 1632 |
dropZone.show(); |
| 1633 |
reset_dragging = true; |
| 1634 |
} |
| 1635 |
} |
| 1636 |
}); |
| 1637 |
|
| 1638 |
dropzoneParent.on('dragleave', function(e){ |
| 1639 |
var rect = this.getBoundingClientRect(); |
| 1640 |
// Checking that the cursor is in the drag area or not |
| 1641 |
if (e.clientX >= (rect.left + rect.width) || e.clientX <= rect.left || e.clientY >= (rect.top + rect.height) || e.clientY <= rect.top) { |
| 1642 |
dropZone.hide(); |
| 1643 |
reset_dragging = false; |
| 1644 |
} |
| 1645 |
}); |
| 1646 |
|
| 1647 |
dropzoneParent.on('drop', function(e){ |
| 1648 |
|
| 1649 |
// Is not dropable? |
| 1650 |
if(!reset_dragging){ |
| 1651 |
return; |
| 1652 |
} |
| 1653 |
|
| 1654 |
e.preventDefault(); |
| 1655 |
var pagelayer_ajax_func = {}; |
| 1656 |
|
| 1657 |
// This function for ajax success call back |
| 1658 |
pagelayer_ajax_func['success'] = function(obj){ |
| 1659 |
|
| 1660 |
if(obj['success']){ |
| 1661 |
|
| 1662 |
// Set the new ID and URL |
| 1663 |
id = obj['data']['id']; |
| 1664 |
url = obj['data']['url']; |
| 1665 |
|
| 1666 |
if(row == ''){ |
| 1667 |
// Getting Id of jEle |
| 1668 |
var widgetid = jEle.closest('[pagelayer-id]').attr('pagelayer-id'); |
| 1669 |
|
| 1670 |
// Finding widget image setting using id of jEle. Finding image editor setting from all of the other settings. |
| 1671 |
row = pagelayer.$$('[pagelayer-element-id='+widgetid+']').find('.pagelayer-elp-image').eq(0).parent().parent(); |
| 1672 |
} |
| 1673 |
|
| 1674 |
row.find('.pagelayer-elp-image').css('background-image', 'url(\''+url+'\')'); |
| 1675 |
|
| 1676 |
// To remove past temp attr so that they are not involve in future temp values |
| 1677 |
var cname = row.attr('pagelayer-elp-name'); |
| 1678 |
var old = _pagelayer_img_tmp_atts(row); |
| 1679 |
delete old[cname+'-url']; |
| 1680 |
|
| 1681 |
for(var x in obj['data']['sizes']){ |
| 1682 |
_pagelayer_set_tmp_atts(row, x+'-url', obj['data']['sizes'][x]['url']); |
| 1683 |
delete old[cname+'-'+x+'-url']; |
| 1684 |
} |
| 1685 |
|
| 1686 |
for(var x in old){ |
| 1687 |
_pagelayer_set_tmp_atts(row, x+'-url', ''); |
| 1688 |
} |
| 1689 |
|
| 1690 |
dropZone.find('.pagelayer-elp-img-up-bar').css('width', '3%'); |
| 1691 |
dropZone.hide(); |
| 1692 |
|
| 1693 |
// Save and render |
| 1694 |
_pagelayer_set_tmp_atts(row, 'url', url); |
| 1695 |
_pagelayer_set_atts(row, id); |
| 1696 |
|
| 1697 |
}else{ |
| 1698 |
alert(obj['data']['message']); |
| 1699 |
} |
| 1700 |
} |
| 1701 |
|
| 1702 |
// This function for ajax before send call back |
| 1703 |
pagelayer_ajax_func['beforeSend'] = function(xhr){ |
| 1704 |
// It activate the image widget |
| 1705 |
if(row == ''){ |
| 1706 |
jEle.click(); |
| 1707 |
} |
| 1708 |
} |
| 1709 |
|
| 1710 |
// This function for how much file is uploaded or for progress bar |
| 1711 |
pagelayer_ajax_func['uploadProgress'] = function(xhr){ |
| 1712 |
xhr.upload.addEventListener("progress", function(evt) { |
| 1713 |
if (evt.lengthComputable) { |
| 1714 |
var percentComplete = evt.loaded / evt.total; |
| 1715 |
percentComplete = parseInt(percentComplete * 100); |
| 1716 |
|
| 1717 |
if(row == ''){ |
| 1718 |
dropZone.find('.pagelayer-img-up-bar').css('width', percentComplete+'%'); |
| 1719 |
}else{ |
| 1720 |
dropZone.find('.pagelayer-elp-img-up-bar').css('width', percentComplete+'%'); |
| 1721 |
} |
| 1722 |
} |
| 1723 |
}, false); |
| 1724 |
return xhr; |
| 1725 |
} |
| 1726 |
|
| 1727 |
// Uploading image to the media library |
| 1728 |
pagelayer_editable_paste_handler(e.originalEvent.dataTransfer.files[0], pagelayer_ajax_func); |
| 1729 |
|
| 1730 |
reset_dragging = false; |
| 1731 |
|
| 1732 |
}); |
| 1733 |
} |
| 1734 |
|
| 1735 |
// The Multi Image Property |
| 1736 |
function pagelayer_elp_multi_image(row, prop){ |
| 1737 |
|
| 1738 |
var div = '<div class="pagelayer-elp-multi_image-div">'+ |
| 1739 |
'<center><button class="pagelayer-elp-button">'+pagelayer_l('Add Images')+'</button></center>'+ |
| 1740 |
'<div class="pagelayer-elp-multi_image-thumbs"></div>'+ |
| 1741 |
'</div>'; |
| 1742 |
|
| 1743 |
row.append(div); |
| 1744 |
|
| 1745 |
var tmp = prop.c['name']+'-urls'; |
| 1746 |
var ids = new Array(); |
| 1747 |
|
| 1748 |
// Any IDs ? |
| 1749 |
if(!pagelayer_empty(prop.c['val'])){ |
| 1750 |
ids = prop.c['val'] |
| 1751 |
if(pagelayer_is_string(ids)){ |
| 1752 |
ids = prop.c['val'].split(','); |
| 1753 |
} |
| 1754 |
//console.log(ids); |
| 1755 |
} |
| 1756 |
|
| 1757 |
// Do we have a URL set ? |
| 1758 |
if(!pagelayer_empty(ids)){ |
| 1759 |
if(tmp in prop.el.tmp){ |
| 1760 |
var images = JSON.parse(prop.el.tmp[tmp]); |
| 1761 |
//console.log(images); |
| 1762 |
|
| 1763 |
for(var x in ids){ |
| 1764 |
row.find('.pagelayer-elp-multi_image-thumbs').append('<div class="pagelayer-elp-multi_image-thumb" style="background-image: url(\''+images['i'+ids[x]]+'\');"></div>'); |
| 1765 |
} |
| 1766 |
}else{ |
| 1767 |
wp.media.query({ post__in: ids }).more().then(function(){ |
| 1768 |
// You attachments here normally |
| 1769 |
// You can safely use any of them here |
| 1770 |
// TODO: Set tmp here |
| 1771 |
for(var x in ids){ |
| 1772 |
var fetch_url = wp.media.attachment(ids[x]).get('url'); |
| 1773 |
if(!pagelayer_empty(fetch_url)){ |
| 1774 |
row.find('.pagelayer-elp-multi_image-thumbs').append('<div class="pagelayer-elp-multi_image-thumb" style="background-image: url(\''+fetch_url+'\');"></div>'); |
| 1775 |
} |
| 1776 |
} |
| 1777 |
}); |
| 1778 |
} |
| 1779 |
} |
| 1780 |
|
| 1781 |
var pagelayer_init_frame = function(state){ |
| 1782 |
|
| 1783 |
var button = row.find('.pagelayer-elp-multi_image-thumbs'); |
| 1784 |
//console.log(ids); |
| 1785 |
|
| 1786 |
// Load the frame |
| 1787 |
var frame = pagelayer_select_frame('multi_image', state); |
| 1788 |
|
| 1789 |
frame.on({ |
| 1790 |
|
| 1791 |
'select': function(){ |
| 1792 |
|
| 1793 |
var state = frame.state(); |
| 1794 |
var id = url = ''; |
| 1795 |
var urls = {}; |
| 1796 |
|
| 1797 |
// External URL |
| 1798 |
if('props' in state){ |
| 1799 |
//console.log(state); |
| 1800 |
var urls_str = state.props.attributes.url; |
| 1801 |
|
| 1802 |
var urls_arr = urls_str.split(','); |
| 1803 |
//console.log(urls_arr); |
| 1804 |
|
| 1805 |
button.empty(); |
| 1806 |
|
| 1807 |
// Add to current selection |
| 1808 |
for(var i = 0; i < urls_arr.length; i++){ |
| 1809 |
var single_url = pagelayer_parse_theme_vars(urls_arr[i]); |
| 1810 |
urls['i'+i] = single_url; |
| 1811 |
|
| 1812 |
// Create thumbnails |
| 1813 |
button.append('<div class="pagelayer-elp-multi_image-thumb" style="background-image: url(\''+single_url+'\');"></div>'); |
| 1814 |
} |
| 1815 |
urls_arr = Object.values(urls); |
| 1816 |
|
| 1817 |
_pagelayer_set_tmp_atts(row, 'urls', JSON.stringify(urls)); |
| 1818 |
_pagelayer_set_atts(row, urls_arr.join()); |
| 1819 |
|
| 1820 |
} |
| 1821 |
}, |
| 1822 |
|
| 1823 |
// Set the current selection if any |
| 1824 |
'open': function(){ |
| 1825 |
|
| 1826 |
// Do we have anything |
| 1827 |
if(!pagelayer_empty(ids)){ |
| 1828 |
|
| 1829 |
var selection = ''; |
| 1830 |
|
| 1831 |
if(state == 'gallery-edit'){ |
| 1832 |
selection = frame.state().get('library'); |
| 1833 |
}else if(state == 'gallery-library'){ |
| 1834 |
selection = frame.state().get('selection'); |
| 1835 |
} |
| 1836 |
|
| 1837 |
// Add to current selection |
| 1838 |
if(!pagelayer_empty(selection)){ |
| 1839 |
for(var x in ids){ |
| 1840 |
attachment = wp.media.attachment(ids[x]); |
| 1841 |
attachment.fetch(); |
| 1842 |
selection.add(attachment ? [ attachment ] : [] ); |
| 1843 |
} |
| 1844 |
} |
| 1845 |
} |
| 1846 |
}, |
| 1847 |
|
| 1848 |
// When images are selected |
| 1849 |
'update': function(selection){ |
| 1850 |
|
| 1851 |
//console.log(selection); |
| 1852 |
|
| 1853 |
// Remove thumbnails |
| 1854 |
row.find('.pagelayer-elp-multi_image-thumb').remove(); |
| 1855 |
|
| 1856 |
//Fetch selected images |
| 1857 |
var attachments = selection.map(function(attachment){ |
| 1858 |
attachment.toJSON(); |
| 1859 |
return attachment; |
| 1860 |
}); |
| 1861 |
|
| 1862 |
//console.log(attachments); |
| 1863 |
|
| 1864 |
var img_ids = []; |
| 1865 |
var urls = {}; |
| 1866 |
var img_urls = {}; |
| 1867 |
var titles = {}; |
| 1868 |
var links = {}; |
| 1869 |
var captions = {}; |
| 1870 |
|
| 1871 |
for(var i = 0; i < attachments.length; ++i){ |
| 1872 |
|
| 1873 |
// Add Id and urls to array |
| 1874 |
var id = attachments[i].id; |
| 1875 |
var _id = 'i'+id; |
| 1876 |
img_ids.push(id); |
| 1877 |
urls[_id] = attachments[i].attributes.url; |
| 1878 |
|
| 1879 |
// Create thumbnails |
| 1880 |
button.append('<div class="pagelayer-elp-multi_image-thumb" style="background-image: url(\''+attachments[i].attributes.url+'\');"></div>'); |
| 1881 |
|
| 1882 |
//get title |
| 1883 |
titles[_id] = attachments[i].attributes.title; |
| 1884 |
links[_id] = attachments[i].attributes.link; |
| 1885 |
captions[_id] = attachments[i].attributes.caption; |
| 1886 |
|
| 1887 |
// Create a URL |
| 1888 |
img_urls[_id] = {} |
| 1889 |
|
| 1890 |
for(var x in attachments[i].attributes.sizes){ |
| 1891 |
img_urls[_id][x] = attachments[i].attributes.sizes[x].url; |
| 1892 |
} |
| 1893 |
|
| 1894 |
} |
| 1895 |
|
| 1896 |
//console.log(img_urls); |
| 1897 |
|
| 1898 |
// Save and render |
| 1899 |
_pagelayer_set_tmp_atts(row, 'urls', JSON.stringify(urls)); |
| 1900 |
_pagelayer_set_tmp_atts(row, 'all-urls', JSON.stringify(img_urls)); |
| 1901 |
_pagelayer_set_tmp_atts(row, 'all-titles', JSON.stringify(titles)); |
| 1902 |
_pagelayer_set_tmp_atts(row, 'all-links', JSON.stringify(links)); |
| 1903 |
_pagelayer_set_tmp_atts(row, 'all-captions', JSON.stringify(captions)); |
| 1904 |
_pagelayer_set_atts(row, img_ids); |
| 1905 |
|
| 1906 |
// Update the IDs incase the user clicks on it again |
| 1907 |
ids = img_ids; |
| 1908 |
|
| 1909 |
} |
| 1910 |
|
| 1911 |
}); |
| 1912 |
|
| 1913 |
frame.open(button); |
| 1914 |
|
| 1915 |
return false; |
| 1916 |
|
| 1917 |
}; |
| 1918 |
|
| 1919 |
row.find('.pagelayer-elp-multi_image-thumbs').on('click', function(){ |
| 1920 |
pagelayer_init_frame('gallery-edit'); |
| 1921 |
}); |
| 1922 |
|
| 1923 |
row.find('.pagelayer-elp-button').on('click', function(){ |
| 1924 |
|
| 1925 |
if(!pagelayer_empty(ids)){ |
| 1926 |
if(isNaN(ids[0])){ |
| 1927 |
pagelayer_init_frame('embed'); |
| 1928 |
}else{ |
| 1929 |
pagelayer_init_frame('gallery-library'); |
| 1930 |
} |
| 1931 |
}else{ |
| 1932 |
pagelayer_init_frame('gallery'); |
| 1933 |
} |
| 1934 |
}); |
| 1935 |
|
| 1936 |
} |
| 1937 |
|
| 1938 |
// The Video Property |
| 1939 |
function pagelayer_elp_video(row, prop){ |
| 1940 |
|
| 1941 |
var tmp = prop.c['name']+'-url'; |
| 1942 |
var src = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : prop.c['val']; |
| 1943 |
|
| 1944 |
var div = '<div class="pagelayer-elp-video-div pagelayer-elp-input-icon">'+ |
| 1945 |
'<input class="pagelayer-elp-video" name="'+prop.c['name']+'" type="text" value="'+src+'">'+ |
| 1946 |
'<i class="pli pli-folder-open" ></i>'+ |
| 1947 |
'</input></div>'; |
| 1948 |
|
| 1949 |
row.append(div); |
| 1950 |
|
| 1951 |
row.find('.pagelayer-elp-video-div .pli').on('click', function(){ |
| 1952 |
|
| 1953 |
var button = jQuery(this); |
| 1954 |
|
| 1955 |
// Load the frame |
| 1956 |
var frame = pagelayer_select_frame('video'); |
| 1957 |
|
| 1958 |
// On select update the stuff |
| 1959 |
frame.on({ |
| 1960 |
|
| 1961 |
'select': function(){ |
| 1962 |
|
| 1963 |
var state = frame.state(); |
| 1964 |
var id = url = ''; |
| 1965 |
|
| 1966 |
// External URL |
| 1967 |
if('props' in state){ |
| 1968 |
|
| 1969 |
id = url = pagelayer_parse_theme_vars(state.props.attributes.url); |
| 1970 |
|
| 1971 |
// Internal from gallery |
| 1972 |
}else{ |
| 1973 |
|
| 1974 |
var attachment = frame.state().get('selection').first().toJSON(); |
| 1975 |
//console.log(attachment); |
| 1976 |
|
| 1977 |
id = attachment.id; |
| 1978 |
url = attachment.url; |
| 1979 |
|
| 1980 |
} |
| 1981 |
|
| 1982 |
// Update URL |
| 1983 |
button.prev().val(url); |
| 1984 |
|
| 1985 |
// Save and render |
| 1986 |
_pagelayer_set_tmp_atts(row, 'url', url); |
| 1987 |
_pagelayer_set_atts(row, id); |
| 1988 |
|
| 1989 |
} |
| 1990 |
|
| 1991 |
}); |
| 1992 |
|
| 1993 |
frame.open(button); |
| 1994 |
|
| 1995 |
return false; |
| 1996 |
|
| 1997 |
}); |
| 1998 |
|
| 1999 |
// Edited the video URL directly |
| 2000 |
row.find('.pagelayer-elp-video').on('change', function(){ |
| 2001 |
|
| 2002 |
var input = jQuery(this); |
| 2003 |
|
| 2004 |
// Set the new URL |
| 2005 |
_pagelayer_set_tmp_atts(row, 'url', input.val()); |
| 2006 |
_pagelayer_set_atts(row, input.val()); |
| 2007 |
|
| 2008 |
}); |
| 2009 |
|
| 2010 |
} |
| 2011 |
|
| 2012 |
|
| 2013 |
// The Audio Property |
| 2014 |
function pagelayer_elp_audio(row, prop){ |
| 2015 |
|
| 2016 |
var tmp = prop.c['name']+'-url'; |
| 2017 |
var src = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : prop.c['val']; |
| 2018 |
|
| 2019 |
var div = '<div class="pagelayer-elp-audio-div pagelayer-elp-input-icon">'+ |
| 2020 |
'<input class="pagelayer-elp-audio" name="'+prop.c['name']+'" type="text" value="'+src+'" />'+ |
| 2021 |
'<i class="pli pli-menu" ></i>'+ |
| 2022 |
'</div>'; |
| 2023 |
|
| 2024 |
row.append(div); |
| 2025 |
|
| 2026 |
// Choose from media |
| 2027 |
row.find('.pagelayer-elp-audio-div .pli').on('click', function(){ |
| 2028 |
|
| 2029 |
var button = jQuery(this); |
| 2030 |
|
| 2031 |
// Load the frame |
| 2032 |
var frame = pagelayer_select_frame('audio'); |
| 2033 |
|
| 2034 |
frame.on({ |
| 2035 |
|
| 2036 |
'select': function(){ |
| 2037 |
|
| 2038 |
var state = frame.state(); |
| 2039 |
var id = url = ''; |
| 2040 |
|
| 2041 |
// External URL |
| 2042 |
if('props' in state){ |
| 2043 |
|
| 2044 |
id = url = pagelayer_parse_theme_vars(state.props.attributes.url); |
| 2045 |
|
| 2046 |
// Internal from gallery |
| 2047 |
}else{ |
| 2048 |
|
| 2049 |
var attachment = frame.state().get('selection').first().toJSON(); |
| 2050 |
//console.log(attachment); |
| 2051 |
|
| 2052 |
id = attachment.id; |
| 2053 |
url = attachment.url; |
| 2054 |
|
| 2055 |
} |
| 2056 |
|
| 2057 |
// Update URL |
| 2058 |
button.prev().val(url); |
| 2059 |
|
| 2060 |
// Save and render |
| 2061 |
_pagelayer_set_tmp_atts(row, 'url', url); |
| 2062 |
_pagelayer_set_atts(row, id); |
| 2063 |
|
| 2064 |
} |
| 2065 |
|
| 2066 |
}); |
| 2067 |
|
| 2068 |
frame.open(button); |
| 2069 |
|
| 2070 |
return false; |
| 2071 |
|
| 2072 |
}); |
| 2073 |
|
| 2074 |
// Edited the media URL directly |
| 2075 |
row.find('.pagelayer-elp-audio').on('change', function(){ |
| 2076 |
|
| 2077 |
var input = jQuery(this); |
| 2078 |
|
| 2079 |
// Set the new URL |
| 2080 |
_pagelayer_set_tmp_atts(row, 'url', input.val()); |
| 2081 |
_pagelayer_set_atts(row, input.val()); |
| 2082 |
|
| 2083 |
}); |
| 2084 |
|
| 2085 |
} |
| 2086 |
|
| 2087 |
// The Media Property |
| 2088 |
function pagelayer_elp_media(row, prop){ |
| 2089 |
|
| 2090 |
var tmp = prop.c['name']+'-url'; |
| 2091 |
var src = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : prop.c['val']; |
| 2092 |
|
| 2093 |
var div = '<div class="pagelayer-elp-media-div pagelayer-elp-input-icon">'+ |
| 2094 |
'<input class="pagelayer-elp-media" value="'+src+'" type="text" />'+ |
| 2095 |
'<i class="pli pli-menu" ></i>'+ |
| 2096 |
'</div>'; |
| 2097 |
|
| 2098 |
row.append(div); |
| 2099 |
|
| 2100 |
row.find('.pagelayer-elp-media-div .pli-menu').on('click', function(){ |
| 2101 |
|
| 2102 |
var button = jQuery(this); |
| 2103 |
|
| 2104 |
// Load the frame |
| 2105 |
var frame = pagelayer_select_frame('media'); |
| 2106 |
|
| 2107 |
frame.on({ |
| 2108 |
|
| 2109 |
'select': function(){ |
| 2110 |
|
| 2111 |
var state = frame.state(); |
| 2112 |
var id = url = ''; |
| 2113 |
|
| 2114 |
// External URL |
| 2115 |
if('props' in state){ |
| 2116 |
|
| 2117 |
id = url = pagelayer_parse_theme_vars(state.props.attributes.url); |
| 2118 |
|
| 2119 |
// Internal from gallery |
| 2120 |
}else{ |
| 2121 |
|
| 2122 |
var attachment = frame.state().get('selection').first().toJSON(); |
| 2123 |
//console.log(attachment); |
| 2124 |
|
| 2125 |
id = attachment.id; |
| 2126 |
url = attachment.url; |
| 2127 |
|
| 2128 |
} |
| 2129 |
|
| 2130 |
// Update URL |
| 2131 |
button.prev().val(url); |
| 2132 |
|
| 2133 |
// Save and render |
| 2134 |
_pagelayer_set_tmp_atts(row, 'url', url); |
| 2135 |
_pagelayer_set_atts(row, id); |
| 2136 |
|
| 2137 |
} |
| 2138 |
|
| 2139 |
}); |
| 2140 |
|
| 2141 |
frame.open(button); |
| 2142 |
|
| 2143 |
return false; |
| 2144 |
|
| 2145 |
}); |
| 2146 |
|
| 2147 |
// Edited the media URL directly |
| 2148 |
row.find('.pagelayer-elp-media').on('change', function(){ |
| 2149 |
|
| 2150 |
var input = jQuery(this); |
| 2151 |
|
| 2152 |
// Set the new URL |
| 2153 |
_pagelayer_set_tmp_atts(row, 'url', input.val()); |
| 2154 |
_pagelayer_set_atts(row, input.val()); |
| 2155 |
|
| 2156 |
}); |
| 2157 |
|
| 2158 |
} |
| 2159 |
|
| 2160 |
// The Slider Property |
| 2161 |
function pagelayer_elp_slider(row, prop){ |
| 2162 |
|
| 2163 |
var div = '<div class="pagelayer-elp-slider-div">'+ |
| 2164 |
'<input type="range" class="pagelayer-elp-slider" value="'+parseFloat(prop.c['val'])+'" min="'+prop['min']+'" max="'+prop['max']+'" step="'+prop['step']+'"/>'+ |
| 2165 |
'<input type="number" class="pagelayer-elp-slider-value" value="'+parseFloat(prop.c['val'])+'" min="'+prop['min']+'" max="'+prop['max']+'" step="'+prop['step']+'"/>'+ |
| 2166 |
'</div>'+ |
| 2167 |
'</div>'; |
| 2168 |
|
| 2169 |
row.append(div); |
| 2170 |
|
| 2171 |
// Set an value in span |
| 2172 |
row.find('.pagelayer-elp-slider-div input').on('input', function(){ |
| 2173 |
var value = parseFloat(this.value); |
| 2174 |
var max = parseFloat(this.max); |
| 2175 |
|
| 2176 |
if(!pagelayer_empty(max) && value > max){ |
| 2177 |
value = max; |
| 2178 |
} |
| 2179 |
row.find('.pagelayer-elp-slider-div input').val(value); |
| 2180 |
|
| 2181 |
_pagelayer_set_atts(row, value);// Save and Render |
| 2182 |
|
| 2183 |
}); |
| 2184 |
|
| 2185 |
} |
| 2186 |
|
| 2187 |
// The Editor proprety |
| 2188 |
function pagelayer_elp_editor(row, prop){ |
| 2189 |
|
| 2190 |
var rows = prop.rows ? prop.rows : '8'; |
| 2191 |
|
| 2192 |
var div = '<div class="pagelayer-elp-editor-div">'+ |
| 2193 |
'<textarea rows="'+rows+'" class="pagelayer-elp-editor" ></textarea>'+ |
| 2194 |
'</div>'; |
| 2195 |
|
| 2196 |
row.append(div); |
| 2197 |
|
| 2198 |
var editor = row.find('.pagelayer-elp-editor'); |
| 2199 |
editor.val(pagelayer_trim(prop.c['val'])); |
| 2200 |
|
| 2201 |
// Handle on change |
| 2202 |
editor.on('input', function(){ |
| 2203 |
_pagelayer_set_atts(row, pagelayer_trim(jQuery(this).val()));// Save and Render |
| 2204 |
}); |
| 2205 |
|
| 2206 |
return; |
| 2207 |
// No SVG Icons for now |
| 2208 |
jQuery.trumbowyg.svgPath = false; |
| 2209 |
|
| 2210 |
// Initiate the editor |
| 2211 |
editor.trumbowyg({ |
| 2212 |
autogrow: false, |
| 2213 |
hideButtonTexts: true, |
| 2214 |
btns:[ |
| 2215 |
['viewHTML'], |
| 2216 |
['wpmedia'], |
| 2217 |
['fontfamily'], |
| 2218 |
['formatting'], |
| 2219 |
['undo', 'redo'], // Only supported in Blink browsers |
| 2220 |
['fontsize'], |
| 2221 |
['lineheight'], |
| 2222 |
['foreColor', 'backColor',], |
| 2223 |
['strong', 'em', 'del'], |
| 2224 |
['horizontalRule'], |
| 2225 |
['superscript', 'subscript'], |
| 2226 |
['link'], |
| 2227 |
['unorderedList', 'orderedList'], |
| 2228 |
['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'], |
| 2229 |
['removeformat'], |
| 2230 |
['fullscreen'] |
| 2231 |
], |
| 2232 |
plugins: { |
| 2233 |
fontsize: { |
| 2234 |
sizeList: ['12px','13px','14px','15px','16px','17px','18px','19px','20px','21px','22px','23px','24px','25px'] |
| 2235 |
} |
| 2236 |
}, |
| 2237 |
imageWidthModalEdit: true, |
| 2238 |
|
| 2239 |
// Handle the changes made in the editor |
| 2240 |
}).on('tbwchange', function(){ |
| 2241 |
_pagelayer_set_atts(row, editor.trumbowyg('html'));// Save and Render |
| 2242 |
}); |
| 2243 |
|
| 2244 |
} |
| 2245 |
|
| 2246 |
// The Link proprety |
| 2247 |
function pagelayer_elp_link(row, prop){ |
| 2248 |
|
| 2249 |
var values = {}; |
| 2250 |
var settingOpt = false; |
| 2251 |
|
| 2252 |
// Show link options? |
| 2253 |
if('selector' in prop){ |
| 2254 |
settingOpt = true; |
| 2255 |
} |
| 2256 |
|
| 2257 |
// Previously saved values |
| 2258 |
if(typeof prop.c['val'] === 'object'){ |
| 2259 |
values = prop.c['val']; |
| 2260 |
}else{ |
| 2261 |
values['link'] = prop.c['val']; |
| 2262 |
} |
| 2263 |
|
| 2264 |
var tmp = prop.c['name']; |
| 2265 |
var link = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : values['link']; |
| 2266 |
var jEle = jQuery('[pagelayer-id='+prop.el.id+']'); |
| 2267 |
|
| 2268 |
var div = '<div class="pagelayer-elp-link-div pagelayer-elp-input-icon '+(settingOpt ? '' : 'pagelayer-elp-link-no-addons')+'">'+ |
| 2269 |
'<input class="pagelayer-elp-link" type="text" value="'+link+'" />'+ |
| 2270 |
'<i class="pli pli-service pagelayer-elp-link-icon" title="'+pagelayer_l('link_options')+'" ></i>'+ |
| 2271 |
'<div class="pagelayer-elp-link-list">'+ |
| 2272 |
'</div>'; |
| 2273 |
|
| 2274 |
if(settingOpt){ |
| 2275 |
div += '<div class="pagelayer-elp-link-addons">'+ |
| 2276 |
'<div class="pagelayer-elp-link-cb-div">'+ |
| 2277 |
'<div class="pagelayer-elp-link-label-div" type="'+prop['type']+'">'+ |
| 2278 |
'<label class="pagelayer-elp-link-label">'+pagelayer_l('open_link_in_new_window')+'</label>'+ |
| 2279 |
'</div>'+ |
| 2280 |
'<div>'+ |
| 2281 |
'<input type="checkbox" name="link_new_tab" class="pagelayer-elp-checkbox" '+(!pagelayer_empty(values['target']) ? 'checked="checked"' : '')+' />'+ |
| 2282 |
'</div>'+ |
| 2283 |
'</div>'+ |
| 2284 |
'<div class="pagelayer-elp-link-cb-div" >'+ |
| 2285 |
'<div class="pagelayer-elp-link-label-div" type="'+prop['type']+'">'+ |
| 2286 |
'<label class="pagelayer-elp-link-label">'+pagelayer_l('add_nofollow')+'</label>'+ |
| 2287 |
'</div>'+ |
| 2288 |
'<div>'+ |
| 2289 |
'<input type="checkbox" name="link_no_follow" class="pagelayer-elp-checkbox" '+(!pagelayer_empty(values['rel']) ? 'checked="checked"' : '')+'/>'+ |
| 2290 |
'</div>'+ |
| 2291 |
'</div>'+ |
| 2292 |
'<div class="pagelayer-elp-link-ca" >'+ |
| 2293 |
'<div class="pagelayer-elp-link-label-div" type="'+prop['type']+'">'+ |
| 2294 |
'<label class="pagelayer-elp-link-label">'+pagelayer_l('custom_attributes')+'</label>'+ |
| 2295 |
'</div>'+ |
| 2296 |
'<div>'+ |
| 2297 |
'<input type="text" class="pagelayer-elp-text" placeholder="key = value" name="'+prop.c['name']+'" value="'+(pagelayer_empty(values['attrs']) ? '' : values['attrs'])+'"/>'+ |
| 2298 |
'<p class="pagelayer-elp-link-desc">'+pagelayer_l('link_custom_attr_desc')+'</p>'+ |
| 2299 |
'</div>'+ |
| 2300 |
'</div>'+ |
| 2301 |
'</div>'; |
| 2302 |
} |
| 2303 |
|
| 2304 |
div += '</div>'; |
| 2305 |
|
| 2306 |
row.append(div); |
| 2307 |
|
| 2308 |
var listWrap = row.find('.pagelayer-elp-link-list'); |
| 2309 |
var time = null; |
| 2310 |
|
| 2311 |
//Add ID |
| 2312 |
var addID = function(permaID){ |
| 2313 |
permaID = permaID || false; |
| 2314 |
|
| 2315 |
var lDiv = row.closest('[pagelayer-elp-name]').find('.pagelayer-elp-label-div'); |
| 2316 |
if(permaID){ |
| 2317 |
lDiv = lDiv.find('.pagelayer-elp-label'); |
| 2318 |
lDiv.after('<span class="pagelayer-elp-link-id">ID : '+permaID+'</span>'); |
| 2319 |
}else{ |
| 2320 |
lDiv.find('.pagelayer-elp-link-id').remove(); |
| 2321 |
} |
| 2322 |
}; |
| 2323 |
|
| 2324 |
if(!isNaN(values['link'])){ |
| 2325 |
addID(values['link']); |
| 2326 |
} |
| 2327 |
|
| 2328 |
var getLinkVal = function(val){ |
| 2329 |
|
| 2330 |
if(typeof val === 'object' && pagelayer_length(val) == 1 && 'link' in val){ |
| 2331 |
return val['link']; |
| 2332 |
} |
| 2333 |
|
| 2334 |
return val; |
| 2335 |
} |
| 2336 |
|
| 2337 |
var setTmpEmpty = function(){ |
| 2338 |
|
| 2339 |
if( 'link' in values && !pagelayer_empty(values['link']) ){ |
| 2340 |
return; |
| 2341 |
} |
| 2342 |
|
| 2343 |
_pagelayer_set_tmp_atts(row, '', ''); |
| 2344 |
} |
| 2345 |
|
| 2346 |
// Set a Link |
| 2347 |
row.find('.pagelayer-elp-link').on('change', function(){ |
| 2348 |
|
| 2349 |
var linkVal = jQuery(this).val(); |
| 2350 |
values['link'] = linkVal; |
| 2351 |
|
| 2352 |
// Save and Render |
| 2353 |
_pagelayer_set_tmp_atts(row, '', linkVal); |
| 2354 |
_pagelayer_set_atts(row, getLinkVal(values)); |
| 2355 |
|
| 2356 |
// Remove ID Holder |
| 2357 |
addID(); |
| 2358 |
|
| 2359 |
}); |
| 2360 |
|
| 2361 |
// Set a Link |
| 2362 |
row.find('.pagelayer-elp-link').on('input click', function(e){ |
| 2363 |
e.stopPropagation(); |
| 2364 |
|
| 2365 |
if(!listWrap.is(':visible')){ |
| 2366 |
listWrap.show(); |
| 2367 |
} |
| 2368 |
|
| 2369 |
var val = jQuery(this).val(); |
| 2370 |
|
| 2371 |
clearTimeout(time); |
| 2372 |
time = setTimeout(function(){ |
| 2373 |
|
| 2374 |
jQuery.ajax({ |
| 2375 |
url: pagelayer_ajax_url, |
| 2376 |
type: 'post', |
| 2377 |
data:{ |
| 2378 |
'action' : 'wp-link-ajax', |
| 2379 |
'_ajax_linking_nonce' : pagelayer_internal_linking_nonce, |
| 2380 |
'search' : val, |
| 2381 |
}, |
| 2382 |
success: function(response) { |
| 2383 |
|
| 2384 |
var data = jQuery.parseJSON(response); |
| 2385 |
var html = ''; |
| 2386 |
//console.log('Link Data');console.log(response); |
| 2387 |
|
| 2388 |
if(pagelayer_empty(data)){ |
| 2389 |
html = pagelayer_l('custom_url'); |
| 2390 |
// Remove ID Holder |
| 2391 |
addID(); |
| 2392 |
}else if(typeof data === 'object'){ |
| 2393 |
|
| 2394 |
for(var key in data){ |
| 2395 |
var vals = data[key]; |
| 2396 |
html += '<div class="pagelayer-elp-link-item" data-id="'+vals['ID']+'" data-permalink="'+vals['permalink']+'">'+ |
| 2397 |
'<div class="pagelayer-elp-link-title">'+ |
| 2398 |
'<span class="pagelayer-elp-link-item-title" title="'+vals['title']+'">'+vals['title']+'</span>'+ |
| 2399 |
'<span class="pagelayer-elp-link-item-perma" title="'+vals['permalink']+'">'+vals['permalink']+'</span>'+ |
| 2400 |
'</div>'+ |
| 2401 |
'<div class="pagelayer-elp-link-info">'+ |
| 2402 |
'<span title="'+vals['info']+'">'+vals['info']+'</span>'+ |
| 2403 |
'</div>'+ |
| 2404 |
'</div>'; |
| 2405 |
} |
| 2406 |
} |
| 2407 |
|
| 2408 |
listWrap.html(html); |
| 2409 |
}, |
| 2410 |
fail: function(data) { |
| 2411 |
listWrap.html('Some error occured in getting the link data'); |
| 2412 |
} |
| 2413 |
}); |
| 2414 |
|
| 2415 |
}, 200); |
| 2416 |
|
| 2417 |
}); |
| 2418 |
|
| 2419 |
listWrap.on('click', function(e){ |
| 2420 |
e.stopPropagation(); |
| 2421 |
|
| 2422 |
var lEle = jQuery(e.target).closest('.pagelayer-elp-link-item'); |
| 2423 |
|
| 2424 |
// IF item not found |
| 2425 |
if(lEle.length < 1){ |
| 2426 |
return; |
| 2427 |
} |
| 2428 |
|
| 2429 |
var perma = lEle.attr('data-permalink'); |
| 2430 |
var ID = lEle.attr('data-id'); |
| 2431 |
values['link'] = ID; |
| 2432 |
|
| 2433 |
// Save and Render |
| 2434 |
row.find('.pagelayer-elp-link').val(perma); |
| 2435 |
_pagelayer_set_tmp_atts(row, '', perma); |
| 2436 |
_pagelayer_set_atts(row, getLinkVal(values)); |
| 2437 |
|
| 2438 |
listWrap.hide(); |
| 2439 |
|
| 2440 |
// Show ID |
| 2441 |
addID(ID); |
| 2442 |
}); |
| 2443 |
|
| 2444 |
pagelayer.gDocument.on('click', function(e){ |
| 2445 |
listWrap.hide(); |
| 2446 |
}); |
| 2447 |
|
| 2448 |
row.find('.pagelayer-elp-checkbox').on('change', function(event){ |
| 2449 |
|
| 2450 |
var cEle = jQuery(this); |
| 2451 |
|
| 2452 |
// Save or delete the value |
| 2453 |
var saveVal = function(key){ |
| 2454 |
if(cEle.is(':checked')){ |
| 2455 |
values[key] = true; |
| 2456 |
return; |
| 2457 |
} |
| 2458 |
|
| 2459 |
delete values[key]; |
| 2460 |
} |
| 2461 |
|
| 2462 |
switch(cEle.attr('name')){ |
| 2463 |
case 'link_new_tab': |
| 2464 |
saveVal('target'); |
| 2465 |
break; |
| 2466 |
case 'link_no_follow': |
| 2467 |
saveVal('rel'); |
| 2468 |
break; |
| 2469 |
} |
| 2470 |
|
| 2471 |
setTmpEmpty(); |
| 2472 |
_pagelayer_set_atts(row, getLinkVal(values)); |
| 2473 |
|
| 2474 |
}); |
| 2475 |
|
| 2476 |
var linkTime = ''; |
| 2477 |
row.find('.pagelayer-elp-text').on('input', function(event){ |
| 2478 |
var cEle = jQuery(this); |
| 2479 |
|
| 2480 |
clearTimeout(linkTime); |
| 2481 |
linkTime = setTimeout(function(){ |
| 2482 |
values['attrs'] = cEle.val(); |
| 2483 |
|
| 2484 |
if(pagelayer_empty(values['attrs'])){ |
| 2485 |
delete values['attrs']; |
| 2486 |
} |
| 2487 |
|
| 2488 |
setTmpEmpty(); |
| 2489 |
_pagelayer_set_atts(row, getLinkVal(values)); |
| 2490 |
|
| 2491 |
}, 500); |
| 2492 |
}); |
| 2493 |
|
| 2494 |
row.find('.pagelayer-elp-link-icon').on('click', function(){ |
| 2495 |
row.find('.pagelayer-elp-link-addons').slideToggle('slow'); |
| 2496 |
}); |
| 2497 |
|
| 2498 |
} |
| 2499 |
|
| 2500 |
// The Textarea property |
| 2501 |
function pagelayer_elp_textarea(row, prop){ |
| 2502 |
|
| 2503 |
var rows = prop.rows ? 'rows="'+prop.rows+' "' : ''; |
| 2504 |
|
| 2505 |
var div = '<div class="pagelayer-elp-textarea-div">'+ |
| 2506 |
'<textarea '+rows+'class="pagelayer-elp-textarea"></textarea>'+ |
| 2507 |
'</div>'; |
| 2508 |
|
| 2509 |
row.append(div); |
| 2510 |
row.find('.pagelayer-elp-textarea').val(pagelayer_trim(prop.c['val'])); |
| 2511 |
|
| 2512 |
// Handle on change |
| 2513 |
row.find('.pagelayer-elp-textarea').on('input', function(){ |
| 2514 |
_pagelayer_set_atts(row, pagelayer_trim(jQuery(this).val()));// Save and Render |
| 2515 |
}); |
| 2516 |
}; |
| 2517 |
|
| 2518 |
// Clear all editable |
| 2519 |
function pagelayer_clear_editable(dontDestroy){ |
| 2520 |
|
| 2521 |
// Destroy all |
| 2522 |
for(var x in pagelayer_editor){ |
| 2523 |
if(dontDestroy == x){ |
| 2524 |
console.log('Skipping '+dontDestroy); |
| 2525 |
continue; |
| 2526 |
} |
| 2527 |
pagelayer_editor[x].pen.destroy(); |
| 2528 |
} |
| 2529 |
|
| 2530 |
}; |
| 2531 |
|
| 2532 |
// Makes a field editable in the DOM |
| 2533 |
function pagelayer_make_editable(jEle, e){ |
| 2534 |
|
| 2535 |
// The parent element |
| 2536 |
var pEle = jEle.closest('.pagelayer-ele, [pagelayer-ref-id]'); |
| 2537 |
|
| 2538 |
// Mainly for editing table cells as pagelayer-ref-id is used by them |
| 2539 |
if(!pEle.hasClass('pagelayer-ele')){ |
| 2540 |
var refID = pEle.attr('pagelayer-ref-id'); |
| 2541 |
pEle = jQuery('[pagelayer-id="'+refID+'"]'); |
| 2542 |
} |
| 2543 |
|
| 2544 |
var prop = jEle.attr('pagelayer-editable'); |
| 2545 |
var eId = pagelayer_id(pEle)+'|'+jEle.attr('pagelayer-editable');// Editing ID |
| 2546 |
|
| 2547 |
// Is it already setup ? |
| 2548 |
if(jEle.hasClass('pagelayer-pen')){ |
| 2549 |
//console.log('Already Penned'); |
| 2550 |
//pagelayer_focus_editable(jEle, e, eId); |
| 2551 |
return true; |
| 2552 |
} |
| 2553 |
|
| 2554 |
var tag = pagelayer_tag(pEle); |
| 2555 |
var all_props = pagelayer_shortcodes[tag]; |
| 2556 |
var edit_opts; |
| 2557 |
var fullEdit = false; |
| 2558 |
|
| 2559 |
for(var i in pagelayer_tabs){ |
| 2560 |
var tab = pagelayer_tabs[i]; |
| 2561 |
for(var section in all_props[tab]){ //console.log(tab+' '+section); |
| 2562 |
|
| 2563 |
var props = section in pagelayer_shortcodes[tag] ? pagelayer_shortcodes[tag][section] : pagelayer_styles[section];//console.log(props); |
| 2564 |
|
| 2565 |
// Any editor options? |
| 2566 |
if(prop in props){ |
| 2567 |
|
| 2568 |
if('e' in props[prop]){ |
| 2569 |
edit_opts = props[prop].e; |
| 2570 |
} |
| 2571 |
|
| 2572 |
if(props[prop]['type'] == 'editor'){ |
| 2573 |
fullEdit = true; |
| 2574 |
} |
| 2575 |
} |
| 2576 |
} |
| 2577 |
} |
| 2578 |
|
| 2579 |
var pen_tools = { |
| 2580 |
'inline': [ 'viewHTML', |
| 2581 |
{'formating' : ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p']}, |
| 2582 |
'bold', 'italic', 'underline', 'strike', |
| 2583 |
{ 'color': [] }, { 'background': [] }, |
| 2584 |
'removeformat' |
| 2585 |
], |
| 2586 |
'h': ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'], |
| 2587 |
'headers': [{'formating' : ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']}], |
| 2588 |
'c': [{ 'color': [] }, { 'background': [] }], |
| 2589 |
'f': ['bold', 'italic', 'underline', 'strike'], |
| 2590 |
'a': [{ 'align': ['left', 'center', 'right', 'justify'] }], |
| 2591 |
'r': ['removeformat'], |
| 2592 |
'v': ['viewHTML'], |
| 2593 |
}; |
| 2594 |
|
| 2595 |
// Create Toolbar Groups |
| 2596 |
if(!('pen_tools' in pagelayer_editor)){ |
| 2597 |
pagelayer_editor['pen_tools'] = {}; |
| 2598 |
} |
| 2599 |
|
| 2600 |
pagelayer_editor['pen_tools'] = Object.assign(pagelayer_editor['pen_tools'], pen_tools); |
| 2601 |
|
| 2602 |
var toolbar_options = []; |
| 2603 |
|
| 2604 |
if( pagelayer_empty(edit_opts) ){ |
| 2605 |
|
| 2606 |
if(fullEdit){ |
| 2607 |
toolbar_options = [ |
| 2608 |
[ 'viewHTML' ], |
| 2609 |
[ 'bold', 'italic', 'underline', 'strike' ], |
| 2610 |
[ 'sub', 'super' ], |
| 2611 |
//[ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'blockquote'], |
| 2612 |
[ {'formating' : ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'blockquote']}], |
| 2613 |
[ {'align': ['left', 'center', 'right', 'justify']} ], |
| 2614 |
[ 'image', 'link'], |
| 2615 |
[ 'unorderedlist', 'orderedlist'], |
| 2616 |
[ {'size': []}, {'lineheight': []}, {'font': []}], |
| 2617 |
[ {'color': [] }, {'background': []}], |
| 2618 |
[ 'removeformat' ] |
| 2619 |
]; |
| 2620 |
}else{ |
| 2621 |
toolbar_options = pagelayer_editor.pen_tools['inline']; |
| 2622 |
} |
| 2623 |
}else{ |
| 2624 |
var options = []; |
| 2625 |
|
| 2626 |
if(! Array.isArray(edit_opts) ){ |
| 2627 |
edit_opts = [edit_opts]; |
| 2628 |
} |
| 2629 |
|
| 2630 |
for( var tt in edit_opts){ |
| 2631 |
|
| 2632 |
var tool = edit_opts[tt]; |
| 2633 |
|
| 2634 |
if(pagelayer_is_string(tool)){ |
| 2635 |
if(tool in pagelayer_editor['pen_tools']){ |
| 2636 |
tool = pagelayer_editor['pen_tools'][tool] |
| 2637 |
}else{ |
| 2638 |
tool = [tool]; |
| 2639 |
} |
| 2640 |
} |
| 2641 |
|
| 2642 |
options.push(tool); |
| 2643 |
} |
| 2644 |
|
| 2645 |
toolbar_options = options; |
| 2646 |
} |
| 2647 |
|
| 2648 |
var options = { |
| 2649 |
class: 'pagelayer-pen', |
| 2650 |
editor: jEle, |
| 2651 |
toolbar: toolbar_options |
| 2652 |
} |
| 2653 |
|
| 2654 |
// Setup the editor |
| 2655 |
pagelayer_editor[eId] = {}; |
| 2656 |
pagelayer_editor[eId].pen = new PagelayerPen(jEle, options); |
| 2657 |
pagelayer_editor[eId].$ = jEle; |
| 2658 |
|
| 2659 |
// Are we the clicked object, then set the focus |
| 2660 |
if(e){ |
| 2661 |
var target = jQuery(e.target); |
| 2662 |
if(target.is(jEle) || jEle.find(target).length > 0){ |
| 2663 |
jEle.focus(); |
| 2664 |
} |
| 2665 |
} |
| 2666 |
|
| 2667 |
// Reverse setup the event |
| 2668 |
jEle.on('blur', function(){ |
| 2669 |
|
| 2670 |
//pagelayer_editor[eId].pen.destroy(); |
| 2671 |
if(jEle.hasClass('pagelayer-pen-focused')){ |
| 2672 |
return; |
| 2673 |
} |
| 2674 |
|
| 2675 |
var cEle = pEle; |
| 2676 |
|
| 2677 |
// Do we have a parent ? |
| 2678 |
var have_parent = function(Ele){ |
| 2679 |
var pId = pagelayer_get_parent(Ele); |
| 2680 |
|
| 2681 |
if(pagelayer_empty(pId)){ |
| 2682 |
return; |
| 2683 |
} |
| 2684 |
|
| 2685 |
cEle = pagelayer_ele_by_id(pId); |
| 2686 |
have_parent(cEle); |
| 2687 |
} |
| 2688 |
|
| 2689 |
have_parent(cEle); |
| 2690 |
|
| 2691 |
var is_global = pagelayer_get_global_id(cEle); |
| 2692 |
|
| 2693 |
if(pagelayer_empty(is_global)){ |
| 2694 |
return; |
| 2695 |
} |
| 2696 |
|
| 2697 |
pagelayer_sc_render(pEle); |
| 2698 |
|
| 2699 |
}); |
| 2700 |
|
| 2701 |
/*// Reverse setup the event |
| 2702 |
jEle.on('focus', function(){ |
| 2703 |
//pagelayer_clear_editable(eId); |
| 2704 |
});*/ |
| 2705 |
|
| 2706 |
// Reverse setup the event |
| 2707 |
jEle.on('input', function(){ |
| 2708 |
|
| 2709 |
var val = pagelayer_trim(jEle.html()); |
| 2710 |
|
| 2711 |
// Set the property as well |
| 2712 |
pagelayer_set_atts(pEle, prop, val); |
| 2713 |
|
| 2714 |
// Update the property |
| 2715 |
var input = pagelayer.$$('[pagelayer-element-id='+pagelayer_id(pEle)+']').find('[pagelayer-elp-name='+prop+']').find('input,textarea,.trumbowyg-editor'); |
| 2716 |
//console.log(input); |
| 2717 |
|
| 2718 |
if(input.length > 0){ |
| 2719 |
if(input.hasClass('trumbowyg-editor')){ |
| 2720 |
input.html(val); |
| 2721 |
}else{ |
| 2722 |
input.val(val); |
| 2723 |
} |
| 2724 |
} |
| 2725 |
|
| 2726 |
}); |
| 2727 |
|
| 2728 |
} |
| 2729 |
|
| 2730 |
// The Icon Property |
| 2731 |
function pagelayer_elp_icon(row, prop){ |
| 2732 |
|
| 2733 |
var $ = jQuery; |
| 2734 |
var sets_html = ''; |
| 2735 |
|
| 2736 |
pagelayer_loaded_icons.forEach(function(item){ |
| 2737 |
sets_html += '<option name="'+item+'" value="'+item+'">'+item+'</option>'; |
| 2738 |
}); |
| 2739 |
|
| 2740 |
var icons = {}; |
| 2741 |
var cur_icon_set = pagelayer_loaded_icons[0]; |
| 2742 |
var sel_icon = prop.c['val']; |
| 2743 |
var sel_name = prop.c['val']; |
| 2744 |
var icon_type = ''; |
| 2745 |
var sorted_icons = {}; |
| 2746 |
|
| 2747 |
// Handle the icon name |
| 2748 |
var icon_name = sel_icon.split(' fa-'); |
| 2749 |
sel_name = icon_name[1]; |
| 2750 |
|
| 2751 |
// Is there a specific list |
| 2752 |
if('list' in prop && prop.list.length > 0){ |
| 2753 |
|
| 2754 |
for(var i in pagelayer_icons){ |
| 2755 |
|
| 2756 |
icons[i] = {}; |
| 2757 |
|
| 2758 |
for(var j in pagelayer_icons[i]){ |
| 2759 |
|
| 2760 |
icons[i][j] = {}; |
| 2761 |
var list_icons = []; |
| 2762 |
prop.list.forEach(function(item){ |
| 2763 |
if(pagelayer_icons[i][j]['icons'].includes(item)){ |
| 2764 |
list_icons.push(item); |
| 2765 |
} |
| 2766 |
|
| 2767 |
}); |
| 2768 |
icons[i][j]['icons'] = list_icons; |
| 2769 |
icons[i][j]['pre'] = j; |
| 2770 |
} |
| 2771 |
|
| 2772 |
} |
| 2773 |
|
| 2774 |
}else{ |
| 2775 |
icons = pagelayer_icons; |
| 2776 |
} |
| 2777 |
|
| 2778 |
// Icon function |
| 2779 |
var icon_html = function(name, cat){ |
| 2780 |
return '<span class="pagelayer-elp-icon-span">'+ |
| 2781 |
'<i class="'+cat+' fa-'+name+'" icon="'+name+'" ></i> '+name+ |
| 2782 |
'</span>'; |
| 2783 |
} |
| 2784 |
|
| 2785 |
var div = '<div class="pagelayer-elp-icon-div">'+ |
| 2786 |
'<div class="pagelayer-elp-icon-preview">'+ |
| 2787 |
'<i class="'+sel_icon+'"></i>'+ |
| 2788 |
'<span class="pagelayer-elp-icon-name">'+ |
| 2789 |
(pagelayer_empty(sel_name)?'Choose icon':sel_name)+ |
| 2790 |
'</span>'+ |
| 2791 |
'</div>'+ |
| 2792 |
'<span class="pagelayer-elp-icon-open">▼</span>'+ |
| 2793 |
'<span class="pagelayer-elp-icon-close" '+(pagelayer_empty(sel_name)? 'style="display:none"': '')+'><b>× </b></span>'+ |
| 2794 |
'</div>'; |
| 2795 |
|
| 2796 |
row.append(div); |
| 2797 |
|
| 2798 |
// Make all icons list |
| 2799 |
var html = '<div class="pagelayer-elp-icon-selector">'; |
| 2800 |
|
| 2801 |
if(pagelayer_loaded_icons.length > 1){ |
| 2802 |
html += '<select class="pagelayer-elp-icon-sets">'+sets_html+'</select>'; |
| 2803 |
} |
| 2804 |
|
| 2805 |
html += '<span class="pagelayer-elp-icon-type">'+ |
| 2806 |
'<p data-tab="fas" class="active">'+pagelayer_l('Solid')+'</p>'+ |
| 2807 |
'<p data-tab="far">'+pagelayer_l('Regular')+'</p>'+ |
| 2808 |
'<p data-tab="fab">'+pagelayer_l('Brand')+'</p>'+ |
| 2809 |
'</span>'+ |
| 2810 |
'<input type="text" class="pagelayer-elp-search-icon" name="search-icon" placeholder="'+pagelayer_l('search')+'">'+ |
| 2811 |
'<div class="pagelayer-elp-icon-list">'; |
| 2812 |
|
| 2813 |
for(var y in icons[cur_icon_set]){ |
| 2814 |
//console.log(icons[x][y]) |
| 2815 |
for(var z in icons[cur_icon_set][y]['icons']){ |
| 2816 |
html += icon_html(icons[cur_icon_set][y]['icons'][z], y); |
| 2817 |
} |
| 2818 |
} |
| 2819 |
|
| 2820 |
html += '</div>'+ |
| 2821 |
'</div>'; |
| 2822 |
|
| 2823 |
row.append(html); |
| 2824 |
|
| 2825 |
// Open the selector |
| 2826 |
row.find('.pagelayer-elp-icon-div').on('click', function(){ |
| 2827 |
row.find('.pagelayer-elp-icon-selector').slideToggle(); |
| 2828 |
}); |
| 2829 |
|
| 2830 |
/*// When the set changes |
| 2831 |
row.find('.pagelayer-elp-icon-sets').on('change', function(){ |
| 2832 |
var v = cur_icon_set = jQuery(this).val(); |
| 2833 |
var span = ''; |
| 2834 |
|
| 2835 |
for(var x in icons[v]){ |
| 2836 |
|
| 2837 |
for(var z in icons[v][x]['icons']){ |
| 2838 |
span += icon_html(icons[v][x]['icons'][z], x); |
| 2839 |
} |
| 2840 |
|
| 2841 |
} |
| 2842 |
|
| 2843 |
if(cur_icon_set == 'font-awesome5'){ |
| 2844 |
row.find('.pagelayer-elp-icon-type').show(); |
| 2845 |
sorted_icons = icons[cur_icon_set]['fas']; |
| 2846 |
row.find('.pagelayer-elp-icon-type [data-tab="fas"]').click(); |
| 2847 |
}else{ |
| 2848 |
row.find('.pagelayer-elp-icon-type').hide(); |
| 2849 |
} |
| 2850 |
|
| 2851 |
row.find('.pagelayer-elp-icon-list').empty().html(span); |
| 2852 |
|
| 2853 |
if(row.find('.pagelayer-elp-search-icon').val() != ''){ |
| 2854 |
row.find('.pagelayer-elp-search-icon').keyup(); |
| 2855 |
} |
| 2856 |
|
| 2857 |
});*/ |
| 2858 |
|
| 2859 |
// Handle type of icon |
| 2860 |
row.find('.pagelayer-elp-icon-type p').on('click', function(){ |
| 2861 |
jQuery(this).toggleClass('active'); |
| 2862 |
row.find('.pagelayer-elp-search-icon').keyup(); |
| 2863 |
}); |
| 2864 |
|
| 2865 |
// Handle search of icon |
| 2866 |
row.find('.pagelayer-elp-search-icon').on('keyup', function(){ |
| 2867 |
|
| 2868 |
var v = this.value; |
| 2869 |
var span = ''; |
| 2870 |
v = v.toLowerCase(); |
| 2871 |
v = v.replace(/\s+/g, '-'); |
| 2872 |
//console.log(sorted_icons); |
| 2873 |
|
| 2874 |
row.find('.pagelayer-elp-icon-type p.active').each(function(){ |
| 2875 |
var tab = jQuery(this).data('tab'); |
| 2876 |
tab = tab.toLowerCase(); |
| 2877 |
|
| 2878 |
var cat = icons['font-awesome5'][tab]['icons']; |
| 2879 |
|
| 2880 |
for(var x in cat){ |
| 2881 |
if(cat[x].includes(v) || v.length < 1){ |
| 2882 |
span += icon_html(cat[x], tab); |
| 2883 |
} |
| 2884 |
} |
| 2885 |
}); |
| 2886 |
|
| 2887 |
row.find('.pagelayer-elp-icon-list').empty().html(span); |
| 2888 |
|
| 2889 |
}); |
| 2890 |
|
| 2891 |
// Handle click within the icon selector |
| 2892 |
row.find('.pagelayer-elp-icon-list').on('click', function(e){ |
| 2893 |
|
| 2894 |
var jEle = jQuery(e.target); |
| 2895 |
var i = jEle.children().attr('class'); |
| 2896 |
var name = jEle.children().attr('icon'); |
| 2897 |
|
| 2898 |
if(pagelayer_empty(name)){ |
| 2899 |
return false; |
| 2900 |
} |
| 2901 |
|
| 2902 |
// Set the icon in this list |
| 2903 |
row.find('.pagelayer-elp-icon-preview').html('<i class="'+i+'"></i><span class="pagelayer-elp-icon-name">'+name+'</span>'); |
| 2904 |
row.find('.pagelayer-elp-icon-selector').slideUp(); |
| 2905 |
|
| 2906 |
_pagelayer_set_atts(row, i);// Save and Render |
| 2907 |
|
| 2908 |
row.find('.pagelayer-elp-icon-close').show(); |
| 2909 |
return false; |
| 2910 |
|
| 2911 |
}); |
| 2912 |
|
| 2913 |
// Delete the icon |
| 2914 |
row.find('.pagelayer-elp-icon-close').on('click', function(){ |
| 2915 |
|
| 2916 |
// Set the icon in this list |
| 2917 |
row.find('.pagelayer-elp-icon-preview').html('<i class=""></i><span class="pagelayer-elp-icon-name">'+pagelayer_l('choose_icon')+'</span>'); |
| 2918 |
|
| 2919 |
// Save and Render |
| 2920 |
_pagelayer_set_atts(row, ''); |
| 2921 |
jQuery(this).hide(); |
| 2922 |
return false; |
| 2923 |
}); |
| 2924 |
|
| 2925 |
} |
| 2926 |
|
| 2927 |
// The Access Property |
| 2928 |
function pagelayer_elp_access(row, prop){ |
| 2929 |
|
| 2930 |
var div = '<div class="pagelayer-elp-access-div">'+ |
| 2931 |
'<span class="pagelayer-elp-access"><i class="pli pli-caret-right" ></i></span>'+ |
| 2932 |
'<div class="pagelayer-elp-access-holder"></div>'+ |
| 2933 |
'</div>'; |
| 2934 |
|
| 2935 |
row.append(div); |
| 2936 |
|
| 2937 |
var holder = row.find('.pagelayer-elp-access-holder'); |
| 2938 |
|
| 2939 |
row.find('.pagelayer-elp-access').on('click', function(){ |
| 2940 |
|
| 2941 |
// Setup first |
| 2942 |
if(holder.children().length < 1){ |
| 2943 |
var p = row.parent().find('[pagelayer-access-item='+prop.show_group+']').detach(); |
| 2944 |
p.appendTo(holder); |
| 2945 |
p.addClass('pagelayer-access-item-visible'); |
| 2946 |
} |
| 2947 |
|
| 2948 |
// Show and hide |
| 2949 |
if(holder.is(':visible')){ |
| 2950 |
holder.hide(); |
| 2951 |
row.find('.pli-caret-right').removeClass('pli-caret-open'); |
| 2952 |
}else{ |
| 2953 |
holder.show(); |
| 2954 |
row.find('.pli-caret-right').addClass('pli-caret-open'); |
| 2955 |
} |
| 2956 |
}); |
| 2957 |
|
| 2958 |
}; |
| 2959 |
|
| 2960 |
// The Modal Property |
| 2961 |
function pagelayer_elp_modal(row, prop){ |
| 2962 |
|
| 2963 |
var style = pagelayer_empty(prop.width) ? '' : 'style="width:'+prop.width+'"'; |
| 2964 |
|
| 2965 |
var div = '<div class="pagelayer-elp-modal-div">'+ |
| 2966 |
'<span class="pagelayer-elp-modal"><i class="pli pli-window" ></i></span>'+ |
| 2967 |
'<div class="pagelayer-elp-modal-wrapper">'+ |
| 2968 |
'<div class="pagelayer-elp-modal-wrap" '+style+'>'+ |
| 2969 |
'<div class="pagelayer-elp-modal-header">'+ |
| 2970 |
prop.label +'<i class="pagelayer-elp-modal-close pli pli-cross" aria-hidden="true"></i>'+ |
| 2971 |
'</div><hr>'+ |
| 2972 |
'<div class="pagelayer-elp-modal-holder"></div>'+ |
| 2973 |
'</div>'+ |
| 2974 |
'</div>'+ |
| 2975 |
'</div>'; |
| 2976 |
|
| 2977 |
row.append(div); |
| 2978 |
|
| 2979 |
var wrapper = row.find('.pagelayer-elp-modal-wrapper'); |
| 2980 |
var holder = row.find('.pagelayer-elp-modal-holder'); |
| 2981 |
|
| 2982 |
row.find('.pagelayer-elp-modal').on('click', function(){ |
| 2983 |
|
| 2984 |
// Setup first |
| 2985 |
if(holder.children().length < 1){ |
| 2986 |
|
| 2987 |
var p = row.parent().find('[pagelayer-access-item='+prop.show_group+']').detach(); |
| 2988 |
p.appendTo(holder); |
| 2989 |
p.addClass('pagelayer-access-item-visible'); |
| 2990 |
} |
| 2991 |
|
| 2992 |
// Show and hide |
| 2993 |
wrapper.show(); |
| 2994 |
|
| 2995 |
}); |
| 2996 |
|
| 2997 |
// Close Modal Property |
| 2998 |
row.find('.pagelayer-elp-modal-close').on('click', function(){ |
| 2999 |
wrapper.hide(); |
| 3000 |
}); |
| 3001 |
|
| 3002 |
// On click Pagelayer setting icon |
| 3003 |
wrapper.on('click', function(event){ |
| 3004 |
var target = jQuery(event.target); |
| 3005 |
|
| 3006 |
if(target.closest('.pagelayer-elp-modal-wrap').length > 0){ |
| 3007 |
return; |
| 3008 |
} |
| 3009 |
|
| 3010 |
wrapper.hide(); |
| 3011 |
}); |
| 3012 |
|
| 3013 |
}; |
| 3014 |
|
| 3015 |
// The Color Property |
| 3016 |
function pagelayer_elp_color(row, prop){ |
| 3017 |
|
| 3018 |
var val = prop.c['val']; |
| 3019 |
var is_global = pagelayer_is_global_color(val); |
| 3020 |
var global_active = ''; |
| 3021 |
|
| 3022 |
// If global color not exist |
| 3023 |
if(!pagelayer_empty(is_global)){ |
| 3024 |
val = pagelayer_global_colors[is_global]['value']; |
| 3025 |
global_active = 'pagelayer-active-global'; |
| 3026 |
} |
| 3027 |
|
| 3028 |
var div = '<div class="pagelayer-elp-color-div-holder">'+ |
| 3029 |
'<div class="pagelayer-elp-color-global '+global_active+'"></div>'+ |
| 3030 |
'<div class="pagelayer-elp-color-div">'+ |
| 3031 |
'<div class="pagelayer-elp-color-preview"></div>'+ |
| 3032 |
'<span class="pagelayer-elp-remove-color"><i class="pli pli-cross" ></i></span>'+ |
| 3033 |
'</div>'+ |
| 3034 |
'<div class="pagelayer-global-color-list">'+ |
| 3035 |
'<div class="pagelayer-global-setting-color">'+ |
| 3036 |
'<b>Global Colors</b><span class="pli pli-service"></span>'+ |
| 3037 |
'</div>'; |
| 3038 |
|
| 3039 |
for( cid in pagelayer_global_colors ){ |
| 3040 |
|
| 3041 |
var color = pagelayer_global_colors[cid]; |
| 3042 |
var active_class = ''; |
| 3043 |
|
| 3044 |
if(cid == is_global){ |
| 3045 |
active_class = 'pagelayer-global-selected'; |
| 3046 |
} |
| 3047 |
|
| 3048 |
div += '<div class="pagelayer-global-color-list-item '+ active_class +'" data-global-id="'+ cid +'">'+ |
| 3049 |
'<span class="pagelayer-global-color-pre" style="background:'+ color['value'] +'"></span>'+ |
| 3050 |
'<span class="pagelayer-global-color-title">'+ color['title'] +'</span>'+ |
| 3051 |
'<span class="pagelayer-global-color-code">'+ color['value'] +'</span>'+ |
| 3052 |
'</div>'; |
| 3053 |
} |
| 3054 |
div += '</div></div>'; |
| 3055 |
|
| 3056 |
row.append(div); |
| 3057 |
|
| 3058 |
row.find('.pagelayer-elp-color-preview').css('background', val); |
| 3059 |
|
| 3060 |
var picker = new pagelayer_Picker({ |
| 3061 |
parent : row.find('.pagelayer-elp-color-div')[0], |
| 3062 |
popup : 'left', |
| 3063 |
color : val, |
| 3064 |
doc: window.parent.document |
| 3065 |
}); |
| 3066 |
|
| 3067 |
var preview = row.find('.pagelayer-elp-color-preview'); |
| 3068 |
|
| 3069 |
// If no val, then set blank |
| 3070 |
if(pagelayer_empty(val)){ |
| 3071 |
preview.addClass('pagelayer-blank-preview'); |
| 3072 |
} |
| 3073 |
|
| 3074 |
var handle_white = function(col){ |
| 3075 |
if(col.charAt(1) == 'f'){ |
| 3076 |
preview.addClass('pagelayer-white-border'); |
| 3077 |
}else{ |
| 3078 |
preview.removeClass('pagelayer-white-border'); |
| 3079 |
} |
| 3080 |
} |
| 3081 |
|
| 3082 |
handle_white(val); |
| 3083 |
|
| 3084 |
// Handle selected color |
| 3085 |
picker.onChange = function(color) { |
| 3086 |
preview.removeClass('pagelayer-blank-preview').css('background', color.rgbaString); |
| 3087 |
handle_white(color.hex); |
| 3088 |
_pagelayer_set_atts(row, color.hex);// Save and Render |
| 3089 |
|
| 3090 |
// Remove global |
| 3091 |
row.find('.pagelayer-elp-color-global').removeClass('pagelayer-active-global'); |
| 3092 |
row.find('.pagelayer-global-selected').removeClass('pagelayer-global-selected'); |
| 3093 |
row.find('.pagelayer-global-color-list').hide(); |
| 3094 |
}; |
| 3095 |
|
| 3096 |
picker.onOpen = picker.onChange; |
| 3097 |
|
| 3098 |
row.find('.pagelayer-elp-remove-color').on('click', function(event){ |
| 3099 |
event.stopPropagation(); |
| 3100 |
picker.setColor(prop.default, true); |
| 3101 |
preview.addClass('pagelayer-blank-preview'); |
| 3102 |
handle_white(''); |
| 3103 |
_pagelayer_set_atts(row, ' ');// Save and Render |
| 3104 |
}); |
| 3105 |
|
| 3106 |
// Handle for global color |
| 3107 |
row.find('.pagelayer-elp-color-global').on('click', function(e){ |
| 3108 |
row.find('.pagelayer-global-color-list').slideToggle(); |
| 3109 |
}); |
| 3110 |
|
| 3111 |
row.find('.pagelayer-global-setting-color').on('click', function(e){ |
| 3112 |
e.stopPropagation(); |
| 3113 |
|
| 3114 |
if(jQuery(e.target).closest('.pli-service').length < 1){ |
| 3115 |
return; |
| 3116 |
} |
| 3117 |
window.open(pagelayer_customizer_url+'&autofocus%5Bsection%5D=pagelayer_global_colors_sec', '_blank'); |
| 3118 |
}); |
| 3119 |
|
| 3120 |
// Handle for global color |
| 3121 |
row.find('.pagelayer-global-color-list-item ').on('click', function(e){ |
| 3122 |
e.stopPropagation(); |
| 3123 |
|
| 3124 |
var listItem = jQuery(this); |
| 3125 |
var globalID = listItem.data('global-id'); |
| 3126 |
var listHolder = row.find('.pagelayer-global-color-list'); |
| 3127 |
|
| 3128 |
// Remove previous selecttion |
| 3129 |
listHolder.find('.pagelayer-global-selected').removeClass('pagelayer-global-selected'); |
| 3130 |
listItem.addClass('pagelayer-global-selected'); |
| 3131 |
row.find('.pagelayer-elp-color-global').addClass('pagelayer-active-global'); |
| 3132 |
listHolder.slideUp(); |
| 3133 |
|
| 3134 |
var color = pagelayer_global_colors[globalID]['value']; |
| 3135 |
preview.removeClass('pagelayer-blank-preview').css('background', color); |
| 3136 |
handle_white(color); |
| 3137 |
_pagelayer_set_atts(row, '$'+globalID);// Save and Render |
| 3138 |
|
| 3139 |
}); |
| 3140 |
} |
| 3141 |
|
| 3142 |
// The Spinner property |
| 3143 |
function pagelayer_elp_spinner(row, prop){ |
| 3144 |
|
| 3145 |
var div = '<div class="pagelayer-elp-spinner-div">'+ |
| 3146 |
'<input type="number" class="pagelayer-elp-spinner" name="'+prop.c['name']+'"'+ |
| 3147 |
' min="'+prop['min']+'" max="'+prop['max']+'" step="'+prop['step']+'" value="'+parseFloat(prop.c['val'])+'"/>'+ |
| 3148 |
'</div>'; |
| 3149 |
|
| 3150 |
row.append(div); |
| 3151 |
|
| 3152 |
row.find('input').on('input', function(){ |
| 3153 |
var value = parseFloat(this.value); |
| 3154 |
var max = parseFloat(this.max); |
| 3155 |
|
| 3156 |
if(!pagelayer_empty(max) && value > max){ |
| 3157 |
value = max; |
| 3158 |
} |
| 3159 |
_pagelayer_set_atts(row, value);// Save and Render |
| 3160 |
}); |
| 3161 |
|
| 3162 |
} |
| 3163 |
|
| 3164 |
// The Group Property |
| 3165 |
function pagelayer_elp_group(row, prop){ |
| 3166 |
|
| 3167 |
var btnHidden = ''; |
| 3168 |
|
| 3169 |
// Hide button, clone and delete |
| 3170 |
if(!pagelayer_empty(prop['hide'])){ |
| 3171 |
btnHidden = 'pagelayer-hidden'; |
| 3172 |
} |
| 3173 |
|
| 3174 |
// Remove the pagelayer-show-tab |
| 3175 |
row.removeAttr('pagelayer-show-tab'); |
| 3176 |
|
| 3177 |
var div = '<div class="pagelayer-elp-group-div"></div>'+ |
| 3178 |
'<center><button class="pagelayer-elp-button '+btnHidden+'">'+prop['text']+'</button></center>'; |
| 3179 |
|
| 3180 |
row.append(div); |
| 3181 |
|
| 3182 |
// Add button |
| 3183 |
var add_item = function(row){ |
| 3184 |
|
| 3185 |
var ele_id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id') || ''; |
| 3186 |
var pEle = jQuery('[pagelayer-id="'+ele_id+'"]'); |
| 3187 |
|
| 3188 |
// First add the element inside the group element |
| 3189 |
var id = pagelayer_element_add_child(pEle, prop['sc'], prop); |
| 3190 |
//pagelayer_element_setup('[pagelayer-id='+id+']', true); |
| 3191 |
|
| 3192 |
show_item(id); |
| 3193 |
|
| 3194 |
}; |
| 3195 |
|
| 3196 |
// Show the properties of the existing things |
| 3197 |
var show_item = function(id, sel){ |
| 3198 |
|
| 3199 |
// To append after an existing item |
| 3200 |
sel = sel || false; |
| 3201 |
|
| 3202 |
// If pagelayer id empty then return |
| 3203 |
if(pagelayer_empty(id)){ |
| 3204 |
return false; |
| 3205 |
} |
| 3206 |
|
| 3207 |
// Since the element is added very fast, we reselect via jQuery for it to re-access the dom |
| 3208 |
jEle = jQuery('[pagelayer-id="'+id+'"]'); |
| 3209 |
|
| 3210 |
var label_param = prop['item_label']['param'] || ''; |
| 3211 |
var title = pagelayer_get_att(jEle, label_param) || prop['item_label']['default']; |
| 3212 |
|
| 3213 |
// We need to get the correct value for select based params which are the label |
| 3214 |
var child_props = pagelayer_shortcodes[prop.sc]; |
| 3215 |
for(var section in child_props){ |
| 3216 |
for(var _param in child_props[section]){ |
| 3217 |
if(child_props[section][_param]['type'] == 'select'){ |
| 3218 |
if(title in child_props[section][_param]['list']){ |
| 3219 |
title = child_props[section][_param]['list'][title]; |
| 3220 |
} |
| 3221 |
} |
| 3222 |
} |
| 3223 |
} |
| 3224 |
|
| 3225 |
// Create the HTML |
| 3226 |
var holder = jQuery('<div class="pagelayer-elp-group-item" pagelayer-group-item-id="'+id+'">'+ |
| 3227 |
'<div class="pagelayer-elp-group-item-head">'+ |
| 3228 |
'<span class="pagelayer-elp-group-item-drag"><i class="pli pli-menu" ></i></span>'+ |
| 3229 |
'<span class="pagelayer-elp-group-item-title">'+title+'</span>'+ |
| 3230 |
'<span class="pagelayer-elp-group-item-clone '+btnHidden+'"><i class="pli pli-clone" ></i></span>'+ |
| 3231 |
'<span class="pagelayer-elp-group-item-del '+btnHidden+'"><i class="pli pli-trashcan" ></i></span>'+ |
| 3232 |
'</div>'+ |
| 3233 |
'<div class="pagelayer-elp-group-item-body"></div>'+ |
| 3234 |
'</div>'); |
| 3235 |
|
| 3236 |
// Append to the row |
| 3237 |
if(sel){ |
| 3238 |
row.find(sel).after(holder); |
| 3239 |
}else{ |
| 3240 |
row.find('.pagelayer-elp-group-div').first().append(holder); |
| 3241 |
} |
| 3242 |
|
| 3243 |
// Setup the toggle |
| 3244 |
holder.find('.pagelayer-elp-group-item-head').first().on('click', function(e){ |
| 3245 |
if(jQuery(e.target).closest('.pagelayer-elp-group-item-clone, .pagelayer-elp-group-item-del, .pagelayer-elp-group-item-drag').length > 0){ |
| 3246 |
return; |
| 3247 |
} |
| 3248 |
var rEle = holder.find('.pagelayer-elp-group-item-body').first(); |
| 3249 |
var r_id = holder.attr('pagelayer-group-item-id'); |
| 3250 |
|
| 3251 |
// If the props are not already setup |
| 3252 |
if(rEle.html().length < 1){ |
| 3253 |
|
| 3254 |
pagelayer_elpd_generate(jQuery('[pagelayer-id="'+r_id+'"]'), rEle); |
| 3255 |
|
| 3256 |
// Change the group item title |
| 3257 |
var tmp_title = holder.find('[pagelayer-elp-name="'+label_param+'"] [name="'+label_param+'"]'); |
| 3258 |
|
| 3259 |
if(tmp_title.length > 0){ |
| 3260 |
jQuery(tmp_title).on('input', function(){ |
| 3261 |
holder.find('.pagelayer-elp-group-item-title').html(tmp_title.val()); |
| 3262 |
}); |
| 3263 |
} |
| 3264 |
|
| 3265 |
} |
| 3266 |
|
| 3267 |
rEle.toggle(); |
| 3268 |
}); |
| 3269 |
|
| 3270 |
// Clone the item |
| 3271 |
holder.find('.pagelayer-elp-group-item-head .pli-clone').on('click', function(){ |
| 3272 |
|
| 3273 |
// If the element have any parent |
| 3274 |
var jEle = jQuery('[pagelayer-id="'+id+'"]'); |
| 3275 |
var par = pagelayer_get_parent(jEle); |
| 3276 |
var clone_ele = pagelayer_copy_element(jEle); |
| 3277 |
//console.log(clone_ele);console.log('[pagelayer-group-item-id="'+id+'"]'); |
| 3278 |
show_item(clone_ele, '[pagelayer-group-item-id="'+id+'"]'); |
| 3279 |
|
| 3280 |
if(par){ |
| 3281 |
pagelayer_sc_render(pagelayer_ele_by_id(par)); |
| 3282 |
} |
| 3283 |
}); |
| 3284 |
|
| 3285 |
// Delete the item |
| 3286 |
holder.find('.pagelayer-elp-group-item-head .pli-trashcan').on('click', function(){ |
| 3287 |
|
| 3288 |
// If the element have any parent |
| 3289 |
var jEle = jQuery('[pagelayer-id="'+id+'"]'); |
| 3290 |
var par = pagelayer_get_parent(jEle); |
| 3291 |
holder.remove(); |
| 3292 |
pagelayer_delete_element(jEle); |
| 3293 |
|
| 3294 |
if(par){ |
| 3295 |
pagelayer_sc_render(pagelayer_ele_by_id(par)); |
| 3296 |
} |
| 3297 |
}); |
| 3298 |
|
| 3299 |
}; |
| 3300 |
|
| 3301 |
// Setup the drag |
| 3302 |
pagelayer.$$(".pagelayer-elp-group-div").sortable({ |
| 3303 |
axis: 'y', |
| 3304 |
nested : false, |
| 3305 |
vertical : true, |
| 3306 |
handle : ".pagelayer-elp-group-item-drag", |
| 3307 |
placeholder: "pagelayer-drag-highlight", |
| 3308 |
start : function(event, ui) { |
| 3309 |
var start_pos = ui.item.index(); |
| 3310 |
ui.item.data('start_pos', start_pos); |
| 3311 |
}, |
| 3312 |
stop : function(event, ui){ |
| 3313 |
var end_pos = ui.item.index(); |
| 3314 |
var id = jQuery(ui.item).closest('[pagelayer-group-item-id]').attr('pagelayer-group-item-id'); |
| 3315 |
var jEle = jQuery('[pagelayer-id="'+id+'"]'); |
| 3316 |
pagelayer_moving_element(jEle, ui.item.data('start_pos'), end_pos); |
| 3317 |
var par = pagelayer_get_parent(jEle); |
| 3318 |
if(par){ |
| 3319 |
pagelayer_sc_render(pagelayer_ele_by_id(par)); |
| 3320 |
} |
| 3321 |
} |
| 3322 |
}); |
| 3323 |
|
| 3324 |
// Handle click of the group |
| 3325 |
row.find('.pagelayer-elp-button').on('click', function(){ |
| 3326 |
if('pro' in prop && pagelayer_empty(pagelayer_pro)){ |
| 3327 |
pagelayer_pro_notice(); |
| 3328 |
return; |
| 3329 |
} |
| 3330 |
add_item(row); |
| 3331 |
}); |
| 3332 |
|
| 3333 |
// Find the existing items |
| 3334 |
prop.el.$.find('[pagelayer-parent="'+prop.el['id']+'"]').each(function(){ |
| 3335 |
var jEle = jQuery(this); |
| 3336 |
var id = pagelayer_assign_id(jEle); |
| 3337 |
show_item(id); |
| 3338 |
}); |
| 3339 |
}; |
| 3340 |
|
| 3341 |
function pagelayer_pro_notice(){ |
| 3342 |
var div = pagelayer.$$('.pagelayer-pro-notice'); |
| 3343 |
|
| 3344 |
div.find('.pagelayer-pro-x').click(function(){ |
| 3345 |
div.hide(); |
| 3346 |
}); |
| 3347 |
|
| 3348 |
div.show(); |
| 3349 |
} |
| 3350 |
|
| 3351 |
// Moving an element |
| 3352 |
function pagelayer_moving_element(jEle, start_pos, end_pos){ |
| 3353 |
if(start_pos==end_pos){ |
| 3354 |
return; |
| 3355 |
} |
| 3356 |
|
| 3357 |
var id = pagelayer_assign_id(jEle); |
| 3358 |
|
| 3359 |
// Is there a wrap |
| 3360 |
var wrap = pagelayer_wrap_by_id(id); |
| 3361 |
|
| 3362 |
var par = wrap.parent(); |
| 3363 |
var children = par.children("div"); |
| 3364 |
|
| 3365 |
// This is required for Owl Carousel |
| 3366 |
if(children.length==1){ |
| 3367 |
par = par.parent(); |
| 3368 |
children = par.children("div"); |
| 3369 |
} |
| 3370 |
|
| 3371 |
var element = children.eq(start_pos).detach(); |
| 3372 |
if(end_pos < start_pos){ |
| 3373 |
children.eq(end_pos).before(element); |
| 3374 |
}else{ |
| 3375 |
children.eq(end_pos).after(element); |
| 3376 |
} |
| 3377 |
} |
| 3378 |
|
| 3379 |
// The Datetime Property |
| 3380 |
function pagelayer_elp_datetime(row, prop){ |
| 3381 |
|
| 3382 |
var div = '<div class="pagelayer-elp-datetime-div">'+ |
| 3383 |
'<input type="date" class="pagelayer-elp-datetime" name="'+prop.c['name']+'" value="'+prop.c['val']+'" />'+ |
| 3384 |
'</div>'; |
| 3385 |
|
| 3386 |
row.append(div); |
| 3387 |
|
| 3388 |
row.find('.pagelayer-elp-datetime').on('change', function(){ |
| 3389 |
_pagelayer_set_atts(row, jQuery(this).val());// Save and Render |
| 3390 |
}); |
| 3391 |
|
| 3392 |
}; |
| 3393 |
|
| 3394 |
// The padding property |
| 3395 |
function pagelayer_elp_padding(row, prop){ |
| 3396 |
var val = ['', '', '', '']; |
| 3397 |
|
| 3398 |
if(!pagelayer_empty(prop.c['val'])){ |
| 3399 |
val = prop.c['val']; |
| 3400 |
if(pagelayer_is_string(val)){ |
| 3401 |
val = val.split(','); |
| 3402 |
} |
| 3403 |
} |
| 3404 |
|
| 3405 |
var div = '<div class="pagelayer-elp-padding-div">'+ |
| 3406 |
'<div class="pagelayer-elp-padding-inner"><input type="number" class="pagelayer-elp-padding" value="'+parseFloat(val[0])+'"></input><span class="pagelayer-elp-padding-lbl">Top</span></div>'+ |
| 3407 |
'<div class="pagelayer-elp-padding-inner"><input type="number" class="pagelayer-elp-padding" value="'+parseFloat(val[1])+'"></input><span class="pagelayer-elp-padding-lbl">Right</span></div>'+ |
| 3408 |
'<div class="pagelayer-elp-padding-inner"><input type="number" class="pagelayer-elp-padding" value="'+parseFloat(val[2])+'"></input><span class="pagelayer-elp-padding-lbl">Bottom</span></div>'+ |
| 3409 |
'<div class="pagelayer-elp-padding-inner"><input type="number" class="pagelayer-elp-padding" value="'+parseFloat(val[3])+'"></input><span class="pagelayer-elp-padding-lbl">Left</span></div>'+ |
| 3410 |
'<i class="pli pli-link" ></i>'+ |
| 3411 |
'</div>'; |
| 3412 |
|
| 3413 |
row.append(div); |
| 3414 |
|
| 3415 |
// Is the value linked ? |
| 3416 |
var link = row.find('.pagelayer-elp-padding-div i'); |
| 3417 |
var isLinked = 1; |
| 3418 |
//isLinked = isLinked == 2 ? false : true; |
| 3419 |
//console.log(isLinked); |
| 3420 |
var tmp_val = val[0]; |
| 3421 |
|
| 3422 |
for(var p_val in val){ |
| 3423 |
|
| 3424 |
// Check if unlinked |
| 3425 |
if(tmp_val != val[p_val] ){ |
| 3426 |
isLinked = 0; |
| 3427 |
} |
| 3428 |
tmp_val = val[p_val]; |
| 3429 |
} |
| 3430 |
|
| 3431 |
if(isLinked){ |
| 3432 |
link.addClass('pagelayer-elp-padding-linked'); |
| 3433 |
}else{ |
| 3434 |
link.removeClass('pagelayer-elp-padding-linked'); |
| 3435 |
} |
| 3436 |
|
| 3437 |
// Handle link on click |
| 3438 |
link.on('click', function(){ |
| 3439 |
|
| 3440 |
var linked = link.hasClass('pagelayer-elp-padding-linked'); |
| 3441 |
|
| 3442 |
if(linked){ |
| 3443 |
link.removeClass('pagelayer-elp-padding-linked'); |
| 3444 |
}else{ |
| 3445 |
link.addClass('pagelayer-elp-padding-linked'); |
| 3446 |
} |
| 3447 |
|
| 3448 |
}); |
| 3449 |
|
| 3450 |
row.find('input').on('input', function(){ |
| 3451 |
|
| 3452 |
// Are the values linked |
| 3453 |
var linked = row.find('.pagelayer-elp-padding-div .pli').hasClass('pagelayer-elp-padding-linked'); |
| 3454 |
|
| 3455 |
if(linked){ |
| 3456 |
var val = jQuery(this).val(); |
| 3457 |
row.find('input').each(function(){ |
| 3458 |
jQuery(this).val(val); |
| 3459 |
}); |
| 3460 |
} |
| 3461 |
|
| 3462 |
var vals = []; |
| 3463 |
|
| 3464 |
// Get all values |
| 3465 |
row.find('input').each(function(){ |
| 3466 |
var val = jQuery(this).val(); |
| 3467 |
vals.push(val ? val : 0); |
| 3468 |
}); |
| 3469 |
|
| 3470 |
_pagelayer_set_atts(row, vals);// Save and Render |
| 3471 |
}); |
| 3472 |
|
| 3473 |
}; |
| 3474 |
|
| 3475 |
// The shadow property |
| 3476 |
function pagelayer_elp_shadow(row, prop){ |
| 3477 |
|
| 3478 |
var val =['','','','']; |
| 3479 |
|
| 3480 |
// Do we have a val ? |
| 3481 |
if(!pagelayer_empty(prop.c['val'])){ |
| 3482 |
val = prop.c['val']; |
| 3483 |
if(pagelayer_is_string(val)){ |
| 3484 |
val = val.split(','); |
| 3485 |
} |
| 3486 |
} |
| 3487 |
|
| 3488 |
//var val = {color: '', blur: '', horizontal: '', vertical: ''}; |
| 3489 |
|
| 3490 |
var div = '<span class="pagelayer-prop-edit"><i class="pli pli-pencil"></i></span>'+ |
| 3491 |
'<div class="pagelayer-elp-shadow-div">'+ |
| 3492 |
'<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-horizontal">'+ |
| 3493 |
'<label class="pagelayer-elp-label">Horizontal</label>'+ |
| 3494 |
'<input class="pagelayer-elp-shadow-input" type="number" max="100" min="-100" step="1" class="pagelayer-elp-shadow-blur" value="'+val[0]+'"></input>'+ |
| 3495 |
'</div>'+ |
| 3496 |
'<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-vertical">'+ |
| 3497 |
'<label class="pagelayer-elp-label">Vertical</label>'+ |
| 3498 |
'<input class="pagelayer-elp-shadow-input" type="number" max="100" min="-100" step="1" class="pagelayer-elp-shadow-blur" value="'+val[1]+'"></input>'+ |
| 3499 |
'</div>'+ |
| 3500 |
'<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-blur">'+ |
| 3501 |
'<label class="pagelayer-elp-label">Blur</label>'+ |
| 3502 |
'<input class="pagelayer-elp-shadow-input" type="number" max="100" min="0" step="1" class="pagelayer-elp-shadow-blur" value="'+val[2]+'"></input>'+ |
| 3503 |
'</div>'+ |
| 3504 |
'<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-color">'+ |
| 3505 |
'<label class="pagelayer-elp-label">Color</label>'+ |
| 3506 |
'<div class="pagelayer-elp-color-div">'+ |
| 3507 |
'<div class="pagelayer-elp-color-preview"></div>'+ |
| 3508 |
'<span class="pagelayer-elp-remove-color"><i class="pli pli-cross" ></i></span>'+ |
| 3509 |
'</div>'+ |
| 3510 |
'</div>'+ |
| 3511 |
'</div>'; |
| 3512 |
|
| 3513 |
row.append(div); |
| 3514 |
|
| 3515 |
row.find('.pagelayer-prop-edit').on('click', function(){ |
| 3516 |
row.find('.pagelayer-elp-shadow-div').toggleClass('pagelayer-prop-show'); |
| 3517 |
}); |
| 3518 |
|
| 3519 |
var preview = row.find('.pagelayer-elp-color-preview'); |
| 3520 |
preview.css('background', val[3]); |
| 3521 |
|
| 3522 |
var picker = new pagelayer_Picker({ |
| 3523 |
parent : row.find('.pagelayer-elp-color-div')[0], |
| 3524 |
popup : 'left', |
| 3525 |
color : val[3], |
| 3526 |
doc: window.parent.document |
| 3527 |
}); |
| 3528 |
|
| 3529 |
// If no val, then set blank |
| 3530 |
if(pagelayer_empty(val[3])){ |
| 3531 |
preview.addClass('pagelayer-blank-preview'); |
| 3532 |
} |
| 3533 |
|
| 3534 |
var handle_white = function(col){ |
| 3535 |
if(col.charAt(1) == 'f'){ |
| 3536 |
preview.addClass('pagelayer-white-border'); |
| 3537 |
}else{ |
| 3538 |
preview.removeClass('pagelayer-white-border'); |
| 3539 |
} |
| 3540 |
} |
| 3541 |
|
| 3542 |
handle_white(val[3]); |
| 3543 |
|
| 3544 |
// Handle selected color |
| 3545 |
picker.onChange = function(color) { |
| 3546 |
preview.removeClass('pagelayer-blank-preview').css('background', color.rgbaString); |
| 3547 |
handle_white(color.hex); |
| 3548 |
val[3] = (color.hex ? color.hex : ''); |
| 3549 |
_pagelayer_set_atts(row, val); |
| 3550 |
}; |
| 3551 |
|
| 3552 |
// Remove Color |
| 3553 |
row.find('.pagelayer-elp-remove-color').on('click', function(event){ |
| 3554 |
event.stopPropagation(); |
| 3555 |
picker.setColor(prop.default, true); |
| 3556 |
preview.addClass('pagelayer-blank-preview'); |
| 3557 |
handle_white(''); |
| 3558 |
val[3] = ''; |
| 3559 |
_pagelayer_set_atts(row, val); |
| 3560 |
}); |
| 3561 |
|
| 3562 |
row.find('input').on('input', function(){ |
| 3563 |
var i = 0; |
| 3564 |
row.find('.pagelayer-elp-shadow-input').each(function(){ |
| 3565 |
var value = jQuery(this).val(); |
| 3566 |
val[i] = (value ? value : ''); |
| 3567 |
i++; |
| 3568 |
}); |
| 3569 |
_pagelayer_set_atts(row, val); |
| 3570 |
}); |
| 3571 |
|
| 3572 |
} |
| 3573 |
|
| 3574 |
// The box shadow property |
| 3575 |
function pagelayer_elp_box_shadow(row, prop){ |
| 3576 |
|
| 3577 |
var val = ['','','','','','']; |
| 3578 |
|
| 3579 |
// Do we have a val ? |
| 3580 |
if(!pagelayer_empty(prop.c['val'])){ |
| 3581 |
val = prop.c['val']; |
| 3582 |
if(pagelayer_is_string(val)){ |
| 3583 |
val = val.split(','); |
| 3584 |
} |
| 3585 |
} |
| 3586 |
|
| 3587 |
var val_pos = ['horizontal','vertical','blur','color','spread','inset']; |
| 3588 |
|
| 3589 |
var div = '<span class="pagelayer-prop-edit"><i class="pli pli-pencil"></i></span>'+ |
| 3590 |
'<div class="pagelayer-elp-shadow-div">'+ |
| 3591 |
'<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-horizontal">'+ |
| 3592 |
'<label class="pagelayer-elp-label">Horizontal</label>'+ |
| 3593 |
'<input class="pagelayer-elp-shadow-input" type="number" max="100" min="-100" step="1" class="pagelayer-elp-shadow-blur" name="horizontal" value="'+val[0]+'"></input>'+ |
| 3594 |
'</div>'+ |
| 3595 |
'<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-vertical">'+ |
| 3596 |
'<label class="pagelayer-elp-label">Vertical</label>'+ |
| 3597 |
'<input class="pagelayer-elp-shadow-input" type="number" max="100" min="-100" step="1" class="pagelayer-elp-shadow-blur" name="vertical" value="'+val[1]+'"></input>'+ |
| 3598 |
'</div>'+ |
| 3599 |
'<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-blur">'+ |
| 3600 |
'<label class="pagelayer-elp-label">Blur</label>'+ |
| 3601 |
'<input class="pagelayer-elp-shadow-input" type="number" max="100" min="0" step="1" class="pagelayer-elp-shadow-blur" name="blur" value="'+val[2]+'"></input>'+ |
| 3602 |
'</div>'+ |
| 3603 |
'<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-spread">'+ |
| 3604 |
'<label class="pagelayer-elp-label">Spread</label>'+ |
| 3605 |
'<input class="pagelayer-elp-shadow-input" type="number" max="100" min="0" step="1" class="pagelayer-elp-shadow-spread" name="spread" value="'+(val[4] ? val[4] : 0 )+'"></input>'+ |
| 3606 |
'</div>'+ |
| 3607 |
'<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-color">'+ |
| 3608 |
'<label class="pagelayer-elp-label">Color</label>'+ |
| 3609 |
'<div class="pagelayer-elp-color-div">'+ |
| 3610 |
'<div class="pagelayer-elp-color-preview"></div>'+ |
| 3611 |
'<span class="pagelayer-elp-remove-color"><i class="pli pli-cross" ></i></span>'+ |
| 3612 |
'</div>'+ |
| 3613 |
'</div>'+ |
| 3614 |
'<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-inset">'+ |
| 3615 |
'<label class="pagelayer-elp-label">Shadow</label>'+ |
| 3616 |
'<select class="pagelayer-elp-shadow-input pagelayer-elp-select" name="inset" type="checkbox" class="pagelayer-elp-shadow-inset">'+ |
| 3617 |
'<option value="">Outset</option>'+ |
| 3618 |
'<option value="inset"'+(pagelayer_empty(val[5]) ? '' : ' selected' )+'>Inset</option>'+ |
| 3619 |
'</select>'+ |
| 3620 |
'</div>'+ |
| 3621 |
'</div>'; |
| 3622 |
|
| 3623 |
row.append(div); |
| 3624 |
|
| 3625 |
row.find('.pagelayer-prop-edit').on('click', function(){ |
| 3626 |
row.find('.pagelayer-elp-shadow-div').toggleClass('pagelayer-prop-show'); |
| 3627 |
}); |
| 3628 |
|
| 3629 |
var preview = row.find('.pagelayer-elp-color-preview'); |
| 3630 |
preview.css('background', val[3]); |
| 3631 |
|
| 3632 |
var picker = new pagelayer_Picker({ |
| 3633 |
parent : row.find('.pagelayer-elp-color-div')[0], |
| 3634 |
popup : 'left', |
| 3635 |
color : val[3], |
| 3636 |
doc: window.parent.document |
| 3637 |
}); |
| 3638 |
|
| 3639 |
// If no val, then set blank |
| 3640 |
if(pagelayer_empty(val[3])){ |
| 3641 |
preview.addClass('pagelayer-blank-preview'); |
| 3642 |
} |
| 3643 |
|
| 3644 |
var handle_white = function(col){ |
| 3645 |
if(col.charAt(1) == 'f'){ |
| 3646 |
preview.addClass('pagelayer-white-border'); |
| 3647 |
}else{ |
| 3648 |
preview.removeClass('pagelayer-white-border'); |
| 3649 |
} |
| 3650 |
} |
| 3651 |
|
| 3652 |
handle_white(val[3]); |
| 3653 |
|
| 3654 |
// Handle selected color |
| 3655 |
picker.onChange = function(color) { |
| 3656 |
row.find('.pagelayer-elp-color-preview').removeClass('pagelayer-blank-preview').css('background', color.rgbaString); |
| 3657 |
handle_white(color.hex); |
| 3658 |
val[3] = (color.hex ? color.hex : ''); |
| 3659 |
_pagelayer_set_atts(row, val); |
| 3660 |
}; |
| 3661 |
|
| 3662 |
// Remove Color |
| 3663 |
row.find('.pagelayer-elp-remove-color').on('click', function(event){ |
| 3664 |
event.stopPropagation(); |
| 3665 |
picker.setColor(prop.default, true); |
| 3666 |
preview.addClass('pagelayer-blank-preview'); |
| 3667 |
handle_white(''); |
| 3668 |
val[3] = ''; |
| 3669 |
_pagelayer_set_atts(row, val); |
| 3670 |
}); |
| 3671 |
|
| 3672 |
// Onchange set props |
| 3673 |
row.find('.pagelayer-elp-shadow-input').on('input change', function(){ |
| 3674 |
//var i = 0; |
| 3675 |
row.find('.pagelayer-elp-shadow-input').each(function(){ |
| 3676 |
var value = jQuery(this).val(); |
| 3677 |
var name = jQuery(this).attr('name'); |
| 3678 |
val[val_pos.indexOf(name)] = (value ? value : ''); |
| 3679 |
//i++; |
| 3680 |
}); |
| 3681 |
_pagelayer_set_atts(row, val); |
| 3682 |
}); |
| 3683 |
|
| 3684 |
} |
| 3685 |
|
| 3686 |
// The filter property |
| 3687 |
function pagelayer_elp_filter(row, prop){ |
| 3688 |
|
| 3689 |
var val = [0,100,100,0,0,100,100]; |
| 3690 |
|
| 3691 |
// Do we have a val ? |
| 3692 |
if(!pagelayer_empty(prop.c['val'])){ |
| 3693 |
val = prop.c['val']; |
| 3694 |
if(pagelayer_is_string(val)){ |
| 3695 |
val = val.split(','); |
| 3696 |
} |
| 3697 |
} |
| 3698 |
|
| 3699 |
var filters = [['blur','10','0.1'],['brightness','200','1'],['contrast','200','1'],['grayscale','200','1'],['hue','360','1'],['opacity','100','1'],['saturate','200','1']]; |
| 3700 |
|
| 3701 |
var div = '<span class="pagelayer-prop-edit"><i class="pli pli-pencil"></i></span>'+ |
| 3702 |
'<div class="pagelayer-elp-filter-div">'; |
| 3703 |
|
| 3704 |
jQuery.each(val,function(key, value){ |
| 3705 |
div += '<div class="pagelayer-elp-prop-grp pagelayer-elp-filter-'+filters[key][0]+'">'+ |
| 3706 |
'<label class="pagelayer-elp-label">'+filters[key][0]+'</label>'+ |
| 3707 |
'<input class="pagelayer-elp-slider pagelayer-elp-filter-input pagelayer-elp-filter-'+filters[key][0]+'" type="range" max="'+filters[key][1]+'" min="0" step="'+filters[key][2]+'" value="'+value+'"></input>'+ |
| 3708 |
'<span class="pagelayer-elp-filter-val">'+value+'</span>'+ |
| 3709 |
'</div>'; |
| 3710 |
}); |
| 3711 |
|
| 3712 |
div += '</div>'; |
| 3713 |
|
| 3714 |
row.append(div); |
| 3715 |
|
| 3716 |
row.find('.pagelayer-prop-edit').on('click', function(){ |
| 3717 |
row.find('.pagelayer-elp-filter-div').toggleClass('pagelayer-prop-show'); |
| 3718 |
}); |
| 3719 |
|
| 3720 |
row.find('input').on('input', function(){ |
| 3721 |
var val = []; |
| 3722 |
jQuery(this).parent().find('span').html(this.value); |
| 3723 |
row.find('.pagelayer-elp-filter-input').each(function(){ |
| 3724 |
var value = jQuery(this).val(); |
| 3725 |
val.push(value ? value : 'none'); |
| 3726 |
}); |
| 3727 |
_pagelayer_set_atts(row, val); |
| 3728 |
}); |
| 3729 |
|
| 3730 |
} |
| 3731 |
|
| 3732 |
// The gradient property |
| 3733 |
function pagelayer_elp_gradient(row, prop){ |
| 3734 |
|
| 3735 |
var val = ['','','','','','','']; |
| 3736 |
|
| 3737 |
// Do we have a val ? |
| 3738 |
if(!pagelayer_empty(prop.c['val'])){ |
| 3739 |
val = prop.c['val']; |
| 3740 |
if(pagelayer_is_string(val)){ |
| 3741 |
val = val.split(','); |
| 3742 |
} |
| 3743 |
} |
| 3744 |
|
| 3745 |
var setColor = [val[1], val[3], val[5]]; |
| 3746 |
|
| 3747 |
//var val = {color: '', blur: '', horizontal: '', vertical: ''}; |
| 3748 |
var getColorList = function(num){ |
| 3749 |
|
| 3750 |
var is_global = pagelayer_is_global_color(setColor[num]); |
| 3751 |
var global_list = '<div class="pagelayer-global-color-list">'+ |
| 3752 |
'<div class="pagelayer-global-setting-color">'+ |
| 3753 |
'<b>Global Colors</b><span class="pli pli-service"></span>'+ |
| 3754 |
'</div>'; |
| 3755 |
|
| 3756 |
for( cid in pagelayer_global_colors ){ |
| 3757 |
|
| 3758 |
var color = pagelayer_global_colors[cid]; |
| 3759 |
var active_class = ''; |
| 3760 |
|
| 3761 |
if(cid == is_global){ |
| 3762 |
active_class = 'pagelayer-global-selected'; |
| 3763 |
} |
| 3764 |
|
| 3765 |
// If global color not exist |
| 3766 |
if(!pagelayer_empty(is_global)){ |
| 3767 |
setColor[num] = pagelayer_global_colors[is_global]['value']; |
| 3768 |
} |
| 3769 |
|
| 3770 |
global_list += '<div class="pagelayer-global-color-list-item '+ active_class +'" data-global-id="'+ cid +'">'+ |
| 3771 |
'<span class="pagelayer-global-color-pre" style="background:'+ color['value'] +'"></span>'+ |
| 3772 |
'<span class="pagelayer-global-color-title">'+ color['title'] +'</span>'+ |
| 3773 |
'<span class="pagelayer-global-color-code">'+ color['value'] +'</span>'+ |
| 3774 |
'</div>'; |
| 3775 |
} |
| 3776 |
global_list += '</div>'; |
| 3777 |
|
| 3778 |
return global_list; |
| 3779 |
} |
| 3780 |
|
| 3781 |
var div = '<div class="pagelayer-elp-gradient-div">'+ |
| 3782 |
'<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-angle">'+ |
| 3783 |
'<label class="pagelayer-elp-label">Angle</label>'+ |
| 3784 |
'<input class="pagelayer-elp-gradient-input" type="number" max="360" min="0" step="1" class="pagelayer-elp-gradient-angle" value="'+val[0]+'"></input>'+ |
| 3785 |
'</div>'+ |
| 3786 |
'<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-color">'+ |
| 3787 |
'<label class="pagelayer-elp-label">Color 1</label>'+ |
| 3788 |
'<div class="pagelayer-elp-color-div-holder">'+ |
| 3789 |
'<div class="pagelayer-elp-color-global"></div>'+ |
| 3790 |
'<div class="pagelayer-elp-color-div">'+ |
| 3791 |
'<div class="pagelayer-elp-gradient-color1 pagelayer-elp-color-preview"></div>'+ |
| 3792 |
'</div>'+ |
| 3793 |
getColorList(0)+ |
| 3794 |
'</div>'+ |
| 3795 |
'</div>'+ |
| 3796 |
'<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-per1">'+ |
| 3797 |
'<label class="pagelayer-elp-label">Percentage 1</label>'+ |
| 3798 |
'<input class="pagelayer-elp-gradient-input" type="number" max="100" min="-100" step="1" class="pagelayer-elp-gradient-per1" value="'+val[2]+'"></input>'+ |
| 3799 |
'</div>'+ |
| 3800 |
'<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-color">'+ |
| 3801 |
'<label class="pagelayer-elp-label">Color 2</label>'+ |
| 3802 |
'<div class="pagelayer-elp-color-div-holder">'+ |
| 3803 |
'<div class="pagelayer-elp-color-global"></div>'+ |
| 3804 |
'<div class="pagelayer-elp-color-div">'+ |
| 3805 |
'<div class="pagelayer-elp-gradient-color2 pagelayer-elp-color-preview"></div>'+ |
| 3806 |
'</div>'+ |
| 3807 |
getColorList(1)+ |
| 3808 |
'</div>'+ |
| 3809 |
'</div>'+ |
| 3810 |
'<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-per2">'+ |
| 3811 |
'<label class="pagelayer-elp-label">Percentage 2</label>'+ |
| 3812 |
'<input class="pagelayer-elp-gradient-input" type="number" max="100" min="0" step="1" class="pagelayer-elp-gradient-per2" value="'+val[4]+'"></input>'+ |
| 3813 |
'</div>'+ |
| 3814 |
'<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-color">'+ |
| 3815 |
'<label class="pagelayer-elp-label">Color 3</label>'+ |
| 3816 |
'<div class="pagelayer-elp-color-div-holder">'+ |
| 3817 |
'<div class="pagelayer-elp-color-global"></div>'+ |
| 3818 |
'<div class="pagelayer-elp-color-div">'+ |
| 3819 |
'<div class="pagelayer-elp-gradient-color3 pagelayer-elp-color-preview"></div>'+ |
| 3820 |
'</div>'+ |
| 3821 |
getColorList(2)+ |
| 3822 |
'</div>'+ |
| 3823 |
'</div>'+ |
| 3824 |
'<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-per3">'+ |
| 3825 |
'<label class="pagelayer-elp-label">Percentage 3</label>'+ |
| 3826 |
'<input class="pagelayer-elp-gradient-input" type="number" max="100" min="0" step="1" class="pagelayer-elp-gradient-per3" value="'+val[6]+'"></input>'+ |
| 3827 |
'</div>'+ |
| 3828 |
'</div>'; |
| 3829 |
|
| 3830 |
row.append(div); |
| 3831 |
var i = 0; |
| 3832 |
row.find('.pagelayer-elp-color-preview').each(function(){ |
| 3833 |
jQuery(this).css('background', setColor[i]); |
| 3834 |
i++; |
| 3835 |
}); |
| 3836 |
|
| 3837 |
// Remove global |
| 3838 |
var removeGlobal = function(holder){ |
| 3839 |
holder.find('.pagelayer-elp-color-global').removeClass('pagelayer-active-global'); |
| 3840 |
holder.find('.pagelayer-global-selected').removeClass('pagelayer-global-selected'); |
| 3841 |
holder.find('.pagelayer-global-color-list').hide(); |
| 3842 |
} |
| 3843 |
|
| 3844 |
var picker1 = new pagelayer_Picker({ |
| 3845 |
parent : row.find('.pagelayer-elp-gradient-color1')[0], |
| 3846 |
popup : 'left', |
| 3847 |
color : setColor[0], |
| 3848 |
doc: window.parent.document |
| 3849 |
}); |
| 3850 |
|
| 3851 |
// Handle selected color |
| 3852 |
picker1.onChange = function(color) { |
| 3853 |
var cPreview = row.find('.pagelayer-elp-gradient-color1') |
| 3854 |
cPreview.css('background', color.rgbaString); |
| 3855 |
val[1] = (color.hex ? color.hex : ''); |
| 3856 |
_pagelayer_set_atts(row, val); |
| 3857 |
|
| 3858 |
removeGlobal(cPreview.closest('.pagelayer-elp-color-div-holder')); |
| 3859 |
}; |
| 3860 |
|
| 3861 |
var picker2 = new pagelayer_Picker({ |
| 3862 |
parent : row.find('.pagelayer-elp-gradient-color2')[0], |
| 3863 |
popup : 'left', |
| 3864 |
color : setColor[1], |
| 3865 |
doc: window.parent.document |
| 3866 |
}); |
| 3867 |
|
| 3868 |
// Handle selected color |
| 3869 |
picker2.onChange = function(color) { |
| 3870 |
var cPreview = row.find('.pagelayer-elp-gradient-color2'); |
| 3871 |
cPreview.css('background', color.rgbaString); |
| 3872 |
val[3] = (color.hex ? color.hex : ''); |
| 3873 |
_pagelayer_set_atts(row, val); |
| 3874 |
|
| 3875 |
removeGlobal(cPreview.closest('.pagelayer-elp-color-div-holder')); |
| 3876 |
}; |
| 3877 |
|
| 3878 |
var picker3 = new pagelayer_Picker({ |
| 3879 |
parent : row.find('.pagelayer-elp-gradient-color3')[0], |
| 3880 |
popup : 'left', |
| 3881 |
color : setColor[2], |
| 3882 |
doc: window.parent.document |
| 3883 |
}); |
| 3884 |
|
| 3885 |
// Handle selected color |
| 3886 |
picker3.onChange = function(color) { |
| 3887 |
var cPreview = row.find('.pagelayer-elp-gradient-color3'); |
| 3888 |
cPreview.css('background', color.rgbaString); |
| 3889 |
val[5] = (color.hex ? color.hex : ''); |
| 3890 |
_pagelayer_set_atts(row, val); |
| 3891 |
|
| 3892 |
removeGlobal(cPreview.closest('.pagelayer-elp-color-div-holder')); |
| 3893 |
}; |
| 3894 |
|
| 3895 |
row.find('input').on('input', function(){ |
| 3896 |
var i = 0; |
| 3897 |
row.find('.pagelayer-elp-gradient-input').each(function(){ |
| 3898 |
var value = jQuery(this).val(); |
| 3899 |
val[i] = (value ? value : ''); |
| 3900 |
i = i+2; |
| 3901 |
}); |
| 3902 |
_pagelayer_set_atts(row, val); |
| 3903 |
}); |
| 3904 |
|
| 3905 |
row.find('.pagelayer-global-selected').each(function(){ |
| 3906 |
jQuery(this).closest('.pagelayer-elp-color-div-holder').find('.pagelayer-elp-color-global').addClass('pagelayer-active-global'); |
| 3907 |
}); |
| 3908 |
|
| 3909 |
// Handle for global color |
| 3910 |
row.find('.pagelayer-elp-color-global').on('click', function(e){ |
| 3911 |
jQuery(this).closest('.pagelayer-elp-color-div-holder').find('.pagelayer-global-color-list').slideToggle(); |
| 3912 |
}); |
| 3913 |
|
| 3914 |
row.find('.pagelayer-global-setting-color').on('click', function(e){ |
| 3915 |
e.stopPropagation(); |
| 3916 |
|
| 3917 |
if(jQuery(e.target).closest('.pli-service').length < 1){ |
| 3918 |
return; |
| 3919 |
} |
| 3920 |
|
| 3921 |
window.open( pagelayer_customizer_url + '&autofocus%5Bsection%5D=pagelayer_global_colors_sec', '_blank' ); |
| 3922 |
}); |
| 3923 |
|
| 3924 |
// Handle for global color |
| 3925 |
row.find('.pagelayer-global-color-list-item ').on('click', function(e){ |
| 3926 |
e.stopPropagation(); |
| 3927 |
|
| 3928 |
var listItem = jQuery(this); |
| 3929 |
var globalID = listItem.data('global-id'); |
| 3930 |
var listHolder = listItem.closest('.pagelayer-global-color-list'); |
| 3931 |
var colorHolder = listItem.closest('.pagelayer-elp-color-div-holder'); |
| 3932 |
var colorPreview = colorHolder.find('.pagelayer-elp-color-preview'); |
| 3933 |
|
| 3934 |
// Remove previous selecttion |
| 3935 |
listHolder.find('.pagelayer-global-selected').removeClass('pagelayer-global-selected'); |
| 3936 |
listItem.addClass('pagelayer-global-selected'); |
| 3937 |
colorHolder.find('.pagelayer-elp-color-global').addClass('pagelayer-active-global'); |
| 3938 |
listHolder.slideUp(); |
| 3939 |
|
| 3940 |
var color = pagelayer_global_colors[globalID]['value']; |
| 3941 |
colorPreview.removeClass('pagelayer-blank-preview').css('background', color); |
| 3942 |
|
| 3943 |
var i = 1; |
| 3944 |
|
| 3945 |
if(colorPreview.hasClass('pagelayer-elp-gradient-color2')){ |
| 3946 |
i = 3; |
| 3947 |
} |
| 3948 |
|
| 3949 |
if(colorPreview.hasClass('pagelayer-elp-gradient-color3')){ |
| 3950 |
i = 5; |
| 3951 |
} |
| 3952 |
|
| 3953 |
val[i] = '$'+globalID; |
| 3954 |
_pagelayer_set_atts(row, val);// Save and Render |
| 3955 |
|
| 3956 |
}); |
| 3957 |
|
| 3958 |
} |
| 3959 |
|
| 3960 |
function pagelayer_elp_font_family(row, prop){ |
| 3961 |
|
| 3962 |
var options = ''; |
| 3963 |
var option = function(val, lang, type){ |
| 3964 |
var selected = (val != prop.c['val']) ? '' : 'selected="selected"'; |
| 3965 |
var lang = pagelayer_empty(lang) ? 'Default' : lang; |
| 3966 |
return '<option class="pagelayer-elp-select-option" value="'+val+'" type="'+type+'" '+selected+'>'+lang+'</option>'; |
| 3967 |
} |
| 3968 |
|
| 3969 |
for(y in pagelayer_fonts){ |
| 3970 |
if(y != 'default'){ |
| 3971 |
options += '<optgroup label="'+pagelayer_ucwords(y)+'">'; |
| 3972 |
} |
| 3973 |
for (x in pagelayer_fonts[y]){ |
| 3974 |
options += option((jQuery.isNumeric(x) ? pagelayer_fonts[y][x] : x), pagelayer_fonts[y][x], y); |
| 3975 |
} |
| 3976 |
} |
| 3977 |
|
| 3978 |
var div = '<div class="pagelayer-elp-select-div pagelayer-elp-pos-rel">'+ |
| 3979 |
'<select class="pagelayer-elp-select pagelayer-select" name="'+prop.c['name']+'">'+options+'</select>'+ |
| 3980 |
'</div>'; |
| 3981 |
|
| 3982 |
row.append(div); |
| 3983 |
|
| 3984 |
row.find('select').on('change', function(){ |
| 3985 |
|
| 3986 |
var sEle = jQuery(this); |
| 3987 |
|
| 3988 |
pagelayer_link_font_family(sEle); |
| 3989 |
_pagelayer_set_atts(row, sEle.val());// Save and Render |
| 3990 |
|
| 3991 |
}); |
| 3992 |
|
| 3993 |
} |
| 3994 |
|
| 3995 |
// The typography property |
| 3996 |
function pagelayer_elp_typography(row, prop){ |
| 3997 |
|
| 3998 |
var val = pagelayer_parse_typo(prop.c['val'], true); |
| 3999 |
var is_typo = pagelayer_is_global_typo(prop.c['val']); |
| 4000 |
var global_active = ''; |
| 4001 |
var save_timer = {}; |
| 4002 |
|
| 4003 |
// Load value of tablet and mobile |
| 4004 |
var val_tablet = pagelayer_get_att(prop.el.$, prop.c['name']+'_tablet'); |
| 4005 |
var val_mobile = pagelayer_get_att(prop.el.$, prop.c['name']+'_mobile'); |
| 4006 |
|
| 4007 |
val_tablet = pagelayer_parse_typo(val_tablet); |
| 4008 |
val_mobile = pagelayer_parse_typo(val_mobile); |
| 4009 |
|
| 4010 |
|
| 4011 |
// If global color not exist |
| 4012 |
if(!pagelayer_empty(is_typo)){ |
| 4013 |
global_active = 'pagelayer-active-global'; |
| 4014 |
} |
| 4015 |
|
| 4016 |
var select = { |
| 4017 |
'style' : {'' : 'Default', 'normal' : 'Normal', 'italic' : 'Italic', 'oblique' : 'Oblique'}, |
| 4018 |
'weight' : {'' : 'Default', '100' : '100', '200' : '200', '300' : '300', '400' : '400', '500' : '500', '600' : '600', '700' : '700', '800' : '800', '900' : '900', 'normal' : 'Normal', 'lighter' : 'Lighter', 'bold' : 'Bold', 'bolder' :'Bolder', 'unset' : 'Unset'}, |
| 4019 |
'variant' : {'' : 'Default', 'normal' : 'Normal', 'small-caps' : 'Small Caps'}, |
| 4020 |
'deco-line' : {'' : 'Default', 'none' : 'None', 'overline' : 'Overline', 'line-through' : 'Line Through', 'underline' : 'Underline', 'underline overline' : 'Underline Overline'}, |
| 4021 |
'deco-style' : {'' : 'Default', 'solid' : 'Solid', 'double' : 'Double', 'dotted' : 'Dotted', 'dashed' : 'Dashed', 'wavy' : 'Wavy'}, |
| 4022 |
'transform' : {'' : 'Default', 'capitalize' : 'Capitalize', 'uppercase' : 'Uppercase', 'lowercase' : 'Lowercase'}, |
| 4023 |
'fonts' : pagelayer_fonts, |
| 4024 |
} |
| 4025 |
|
| 4026 |
var option = function(val, lang, setVal){ |
| 4027 |
var selected = (val.toLowerCase() != setVal.toLowerCase()) ? '' : 'selected="selected"'; |
| 4028 |
|
| 4029 |
var lang = pagelayer_empty(lang) ? 'Default' : lang; |
| 4030 |
return '<option value="'+val+'" '+selected+'>'+ lang +'</option>'; |
| 4031 |
} |
| 4032 |
|
| 4033 |
var font_options = ''; |
| 4034 |
var font_option = function(val, lang, type, setVal){ |
| 4035 |
var selected = (val != setVal) ? '' : 'selected="selected"'; |
| 4036 |
var lang = pagelayer_empty(lang) ? 'Default' : lang; |
| 4037 |
return '<option class="pagelayer-elp-typo-sele-op" value="'+val+'" type="'+type+'" '+selected+'>'+lang+'</option>'; |
| 4038 |
} |
| 4039 |
|
| 4040 |
for(y in select['fonts']){ |
| 4041 |
if(y != 'default'){ |
| 4042 |
font_options += '<optgroup label="'+pagelayer_ucwords(y)+'">'; |
| 4043 |
} |
| 4044 |
for (x in select['fonts'][y]){ |
| 4045 |
font_options += font_option((jQuery.isNumeric(x) ? select['fonts'][y][x] : x), select['fonts'][y][x], y, val[0]); |
| 4046 |
} |
| 4047 |
} |
| 4048 |
|
| 4049 |
var modes = {desktop: '', tablet: '_tablet', mobile: '_mobile'}; |
| 4050 |
var mode = pagelayer_get_screen_mode(); |
| 4051 |
var screen = '<div class="pagelayer-elp-screen">'+ |
| 4052 |
'<i class="pli pli-desktop" ></i>'+ |
| 4053 |
'<i class="pli pli-tablet" ></i>'+ |
| 4054 |
'<i class="pli pli-mobile" ></i>'+ |
| 4055 |
'<i class="pagelayer-prop-screen pli pli-'+mode+'" ></i>'+ |
| 4056 |
'</div>'; |
| 4057 |
|
| 4058 |
var div = '<span class="pagelayer-elp-typo-edit-div">'+ |
| 4059 |
'<i class="pli pli-pencil"></i>'+ |
| 4060 |
'</span>'+ |
| 4061 |
'<div class="pagelayer-elp-typo-div" pagelayer-screen-mode="'+mode+'">'+ |
| 4062 |
'<div class="pagelayer-elp-typo-fonts">'+ |
| 4063 |
'<div class="pagelayer-elp-global-typo">'+ |
| 4064 |
'<label class="pagelayer-elp-label">'+pagelayer_l('global_fonts')+'</label>'+ |
| 4065 |
'<span class="pagelayer-elp-typo-icons">'+ |
| 4066 |
'<span class="pagelayer-elp-global-icon '+global_active+'"></span>'+ |
| 4067 |
'<span class="pli pli-service"></span>'+ |
| 4068 |
'</span>'+ |
| 4069 |
'<div class="pagelayer-global-font-list">'; |
| 4070 |
|
| 4071 |
for( cid in pagelayer_global_fonts ){ |
| 4072 |
|
| 4073 |
var font = pagelayer_global_fonts[cid]; |
| 4074 |
|
| 4075 |
div += '<div class="pagelayer-global-font-list-item" data-global-id="'+ cid +'">'+ |
| 4076 |
'<span class="pagelayer-global-font-title">'+font['title']+'</span>'+ |
| 4077 |
'</div>'; |
| 4078 |
} |
| 4079 |
div += '</div>'+ |
| 4080 |
'</div>'+ |
| 4081 |
'<div class="pagelayer-elp-typo pagelayer-elp-typo-family">'+ |
| 4082 |
'<label class="pagelayer-elp-label">'+pagelayer_l('font_family')+'</label>'+ |
| 4083 |
'<select class="pagelayer-elp-typo-input pagelayer-elp-select" name="font-family">'+font_options+'</select>'+ |
| 4084 |
'</div>'; |
| 4085 |
|
| 4086 |
div += '<div class="pagelayer-elp-typo pagelayer-elp-typo-size">'+ |
| 4087 |
'<label class="pagelayer-elp-label">'+pagelayer_l('font_size')+' '+screen+'</label>'+ |
| 4088 |
'<input name="font-size" pagelayer-show-device="desktop" class="pagelayer-elp-typo-input" type="number" max="200" min="0" step="1" value="'+val[1]+'"></input>'+ |
| 4089 |
'<input name="font-size_tablet" pagelayer-show-device="tablet" class="pagelayer-elp-typo-input" type="number" max="200" min="0" step="1" value="'+val_tablet[1]+'"></input>'+ |
| 4090 |
'<input name="font-size_mobile" pagelayer-show-device="mobile" class="pagelayer-elp-typo-input" type="number" max="200" min="0" step="1" value="'+val_mobile[1]+'"></input>'+ |
| 4091 |
'</div>'+ |
| 4092 |
'<div class="pagelayer-elp-typo pagelayer-elp-typo-style">'+ |
| 4093 |
'<label class="pagelayer-elp-label">'+pagelayer_l('font_style')+'</label>'+ |
| 4094 |
'<select name="font-style" class="pagelayer-elp-typo-input pagelayer-elp-select">'; |
| 4095 |
|
| 4096 |
jQuery.each(select['style'],function(key, value){ |
| 4097 |
div += option(key, value, val[2]); |
| 4098 |
}); |
| 4099 |
div +='</select>'+ |
| 4100 |
'</div>'+ |
| 4101 |
'<div class="pagelayer-elp-typo pagelayer-elp-typo-weight">'+ |
| 4102 |
'<label class="pagelayer-elp-label">'+pagelayer_l('font_weight')+' '+screen+'</label>'+ |
| 4103 |
'<select name="font-weight" pagelayer-show-device="desktop" class="pagelayer-elp-typo-input pagelayer-elp-select">'; |
| 4104 |
jQuery.each(select['weight'],function(key, value){ |
| 4105 |
div += option(key, value, val[3]); |
| 4106 |
}); |
| 4107 |
|
| 4108 |
div += '</select>'+ |
| 4109 |
'<select name="font-weight_tablet" pagelayer-show-device="tablet" class="pagelayer-elp-typo-input pagelayer-elp-select">'; |
| 4110 |
jQuery.each(select['weight'],function(key, value){ |
| 4111 |
div += option(key, value, val_tablet[3]); |
| 4112 |
}); |
| 4113 |
|
| 4114 |
div += '</select>'+ |
| 4115 |
'<select name="font-weight_mobile" pagelayer-show-device="mobile" class="pagelayer-elp-typo-input pagelayer-elp-select">'; |
| 4116 |
jQuery.each(select['weight'],function(key, value){ |
| 4117 |
div += option(key, value, val_mobile[3]); |
| 4118 |
}); |
| 4119 |
|
| 4120 |
div += '</select>'+ |
| 4121 |
'</div>'+ |
| 4122 |
'<div class="pagelayer-elp-typo pagelayer-elp-typo-variant">'+ |
| 4123 |
'<label class="pagelayer-elp-label">'+pagelayer_l('font_variant')+'</label>'+ |
| 4124 |
'<select name="font-variant" class="pagelayer-elp-typo-input pagelayer-elp-select">'; |
| 4125 |
jQuery.each(select['variant'],function(key, value){ |
| 4126 |
div += option(key, value, val[4]); |
| 4127 |
}); |
| 4128 |
|
| 4129 |
div += '</select>'+ |
| 4130 |
'</div>'+ |
| 4131 |
'<div class="pagelayer-elp-typo pagelayer-elp-typo-deco-line">'+ |
| 4132 |
'<label class="pagelayer-elp-label">'+pagelayer_l('decoration_line')+'</label>'+ |
| 4133 |
'<select name="text-decoration-line" class="pagelayer-elp-typo-input pagelayer-elp-select">'; |
| 4134 |
jQuery.each(select['deco-line'],function(key, value){ |
| 4135 |
div += option(key, value, val[5]); |
| 4136 |
}); |
| 4137 |
|
| 4138 |
div += '</select>'+ |
| 4139 |
'</div>'+ |
| 4140 |
'<div class="pagelayer-elp-typo pagelayer-elp-typo-deco-style">'+ |
| 4141 |
'<label class="pagelayer-elp-label">'+pagelayer_l('decoration_style')+'</label>'+ |
| 4142 |
'<select name="text-decoration-style" class="pagelayer-elp-typo-input pagelayer-elp-select">'; |
| 4143 |
jQuery.each(select['deco-style'],function(key, value){ |
| 4144 |
div += option(key, value, val[6]); |
| 4145 |
}); |
| 4146 |
|
| 4147 |
div += '</select>'+ |
| 4148 |
'</div>'+ |
| 4149 |
'<div class="pagelayer-elp-typo pagelayer-elp-typo-height">'+ |
| 4150 |
'<label class="pagelayer-elp-label">'+pagelayer_l('line_height')+' '+screen+'</label>'+ |
| 4151 |
'<input name="line-height" class="pagelayer-elp-typo-input" pagelayer-show-device="desktop" type="number" max="15" min="0" step="0.1" value="'+val[7]+'"></input>'+ |
| 4152 |
'<input name="line-height_tablet" pagelayer-show-device="tablet" class="pagelayer-elp-typo-input" type="number" max="15" min="0" step="0.1" value="'+val_tablet[7]+'"</input>'+ |
| 4153 |
'<input name="line-height_mobile" class="pagelayer-elp-typo-input" pagelayer-show-device="mobile" type="number" max="15" min="0" step="0.1" value="'+val_mobile[7]+'"></input>'+ |
| 4154 |
'</div>'+ |
| 4155 |
'<div class="pagelayer-elp-typo pagelayer-elp-typo-transform">'+ |
| 4156 |
'<label class="pagelayer-elp-label">'+pagelayer_l('text_transform')+'</label>'+ |
| 4157 |
'<select name="text-transform" class="pagelayer-elp-typo-input pagelayer-elp-select">'; |
| 4158 |
jQuery.each(select['transform'],function(key, value){ |
| 4159 |
div += option(key, value, val[8]); |
| 4160 |
}); |
| 4161 |
|
| 4162 |
div += '</select>'+ |
| 4163 |
'</div>'+ |
| 4164 |
'<div class="pagelayer-elp-typo pagelayer-elp-typo-lspacing">'+ |
| 4165 |
'<label class="pagelayer-elp-label">'+pagelayer_l('text_spacing')+' '+screen+'</label>'+ |
| 4166 |
'<input name="letter-spacing" pagelayer-show-device="desktop" class="pagelayer-elp-typo-input" type="number" max="10" min="-10" step="0.1" value="'+val[9]+'"></input>'+ |
| 4167 |
'<input name="letter-spacing_tablet" pagelayer-show-device="tablet" class="pagelayer-elp-typo-input" type="number" max="10" min="-10" step="0.1" value="'+val_tablet[9]+'"></input>'+ |
| 4168 |
'<input name="letter-spacing_mobile" pagelayer-show-device="mobile" class="pagelayer-elp-typo-input" type="number" max="10" min="-10" step="0.1" value="'+val_mobile[9]+'"></input>'+ |
| 4169 |
'</div>'+ |
| 4170 |
'<div class="pagelayer-elp-typo pagelayer-elp-typo-wspacing">'+ |
| 4171 |
'<label class="pagelayer-elp-label">'+pagelayer_l('word_spacing')+' '+screen+'</label>'+ |
| 4172 |
'<input name="word-spacing" pagelayer-show-device="desktop" class="pagelayer-elp-typo-input" type="number" max="50" min="0" step="1" value="'+val[10]+'"></input>'+ |
| 4173 |
'<input name="word-spacing_tablet" pagelayer-show-device="tablet" class="pagelayer-elp-typo-input" type="number" max="50" min="0" step="1" value="'+val_tablet[10]+'"></input>'+ |
| 4174 |
'<input name="word-spacing_mobile" pagelayer-show-device="mobile" class="pagelayer-elp-typo-input" type="number" max="50" min="0" step="1" value="'+val_mobile[10]+'"></input>'+ |
| 4175 |
'</div>'+ |
| 4176 |
'</div>'+ |
| 4177 |
'</div>'; |
| 4178 |
|
| 4179 |
row.append(div); |
| 4180 |
|
| 4181 |
if(pagelayer_empty(val[5]) || val[5]=='none'){ |
| 4182 |
row.find('.pagelayer-elp-typo-deco-style').hide(); |
| 4183 |
} |
| 4184 |
|
| 4185 |
row.find('.pagelayer-elp-typo-edit-div .pli-pencil').on('click', function(){ |
| 4186 |
row.find('.pagelayer-elp-typo-div').toggleClass('pagelayer-prop-show'); |
| 4187 |
}); |
| 4188 |
|
| 4189 |
var save_typography = function(){ |
| 4190 |
var globalEle = row.find('.pagelayer-global-selected'); |
| 4191 |
var atts = {}; |
| 4192 |
|
| 4193 |
atts[prop.c['name']] = {}; |
| 4194 |
atts[prop.c['name']+'_tablet'] = {}; |
| 4195 |
atts[prop.c['name']+'_mobile'] = {}; |
| 4196 |
|
| 4197 |
if(globalEle.length > 0){ |
| 4198 |
atts[prop.c['name']]['global-font'] = globalEle.attr('data-global-id'); |
| 4199 |
} |
| 4200 |
|
| 4201 |
row.find('.pagelayer-elp-typo-input').each(function(){ |
| 4202 |
|
| 4203 |
var iEle = jQuery(this); |
| 4204 |
var name = iEle.attr('name'); |
| 4205 |
var value = iEle.val(); |
| 4206 |
var isGlobal = iEle.closest('[pagelayer-set-global]'); |
| 4207 |
|
| 4208 |
if((value == '' && isGlobal.length < 1 && globalEle.length < 1) || isGlobal.length > 0){ |
| 4209 |
return; |
| 4210 |
} |
| 4211 |
|
| 4212 |
if(name.indexOf('_tablet') > -1){ |
| 4213 |
name = name.replace('_tablet', ''); |
| 4214 |
atts[prop.c['name']+'_tablet'][name] = value; |
| 4215 |
return; |
| 4216 |
} |
| 4217 |
|
| 4218 |
if(name.indexOf('_mobile') > -1){ |
| 4219 |
name = name.replace('_mobile', ''); |
| 4220 |
atts[prop.c['name']+'_mobile'][name] = value; |
| 4221 |
return; |
| 4222 |
} |
| 4223 |
|
| 4224 |
atts[prop.c['name']][name] = value; |
| 4225 |
}); |
| 4226 |
|
| 4227 |
pagelayer_set_atts(prop.el.$, atts); |
| 4228 |
pagelayer_sc_render(prop.el.$); // Render |
| 4229 |
} |
| 4230 |
|
| 4231 |
row.find('.pagelayer-elp-typo-input').on('change', function(e){ |
| 4232 |
|
| 4233 |
var jEle = jQuery(e.target); |
| 4234 |
|
| 4235 |
pagelayer_link_font_family(jEle); |
| 4236 |
jEle.closest('[pagelayer-set-global]').removeAttr('pagelayer-set-global'); |
| 4237 |
|
| 4238 |
// Save value |
| 4239 |
save_typography(); |
| 4240 |
}); |
| 4241 |
|
| 4242 |
row.find('.pagelayer-elp-typo-deco-line select').on('change', function(){ |
| 4243 |
var value = jQuery(this).val(); |
| 4244 |
if(pagelayer_empty(value) || value=='none'){ |
| 4245 |
row.find('.pagelayer-elp-typo-deco-style').hide(); |
| 4246 |
}else{ |
| 4247 |
row.find('.pagelayer-elp-typo-deco-style').show(); |
| 4248 |
} |
| 4249 |
}); |
| 4250 |
|
| 4251 |
// Handle for global font |
| 4252 |
row.find('.pagelayer-elp-global-typo .pagelayer-elp-global-icon').on('click', function(e){ |
| 4253 |
e.stopPropagation(); |
| 4254 |
row.find('.pagelayer-global-font-list').slideToggle(); |
| 4255 |
|
| 4256 |
}); |
| 4257 |
|
| 4258 |
row.find('.pagelayer-elp-global-typo .pli-service').on('click', function(e){ |
| 4259 |
e.stopPropagation(); |
| 4260 |
window.open(pagelayer_customizer_url+'&autofocus%5Bsection%5D=pagelayer_global_fonts_sec', '_blank'); |
| 4261 |
}); |
| 4262 |
|
| 4263 |
// Added restore global val |
| 4264 |
row.find('.pagelayer-elp-typo > .pagelayer-elp-label').each(function(){ |
| 4265 |
var label = jQuery(this); |
| 4266 |
var defaultButton = '<span class="pagelayer-typo-default" title="'+pagelayer_l('restore_global')+'" ><i class="fas fa-undo"></i></span>'; |
| 4267 |
label.append(defaultButton); |
| 4268 |
|
| 4269 |
label.find('.pagelayer-typo-default').on('click', function(e, skip_save){ |
| 4270 |
|
| 4271 |
skip_save = skip_save || false; |
| 4272 |
|
| 4273 |
var globalID = row.find('.pagelayer-global-selected').data('global-id'); |
| 4274 |
|
| 4275 |
if(pagelayer_empty(globalID) || pagelayer_empty(pagelayer_global_fonts[globalID])){ |
| 4276 |
return; |
| 4277 |
} |
| 4278 |
|
| 4279 |
var setFonts = pagelayer_global_fonts[globalID]['value']; |
| 4280 |
var holder = label.closest('.pagelayer-elp-typo'); |
| 4281 |
var inputs = holder.find('.pagelayer-elp-typo-input'); |
| 4282 |
var name = inputs.first().attr('name'); |
| 4283 |
var val = ''; |
| 4284 |
|
| 4285 |
holder.attr('pagelayer-set-global', 1); |
| 4286 |
|
| 4287 |
if(name in setFonts){ |
| 4288 |
val = setFonts[name]; |
| 4289 |
} |
| 4290 |
|
| 4291 |
if(typeof val == 'object'){ |
| 4292 |
for(var mode in modes){ |
| 4293 |
var _val = ''; |
| 4294 |
if(mode in val){ |
| 4295 |
_val = val[mode]; |
| 4296 |
} |
| 4297 |
|
| 4298 |
holder.find('.pagelayer-elp-typo-input[name="'+name+modes[mode]+'"]').val(_val); |
| 4299 |
} |
| 4300 |
}else{ |
| 4301 |
|
| 4302 |
if(inputs.length > 1){ |
| 4303 |
inputs.val(''); |
| 4304 |
} |
| 4305 |
|
| 4306 |
inputs.first().val(val); |
| 4307 |
} |
| 4308 |
|
| 4309 |
if(skip_save){ |
| 4310 |
return; |
| 4311 |
} |
| 4312 |
|
| 4313 |
// save value |
| 4314 |
clearTimeout(save_timer); |
| 4315 |
save_timer = setTimeout(save_typography, 200); |
| 4316 |
|
| 4317 |
}); |
| 4318 |
}); |
| 4319 |
|
| 4320 |
// Handle for global font |
| 4321 |
row.find('.pagelayer-global-font-list-item').on('click', function(e){ |
| 4322 |
e.stopPropagation(); |
| 4323 |
|
| 4324 |
var listItem = jQuery(this); |
| 4325 |
var fontSelect = row.find('.pagelayer-elp-typo-family .pagelayer-elp-typo-input'); |
| 4326 |
|
| 4327 |
// Remove global typo |
| 4328 |
if(listItem.hasClass('pagelayer-global-selected')){ |
| 4329 |
row.find('.pagelayer-global-selected').removeClass('pagelayer-global-selected'); |
| 4330 |
row.find('.pagelayer-elp-global-icon').removeClass('pagelayer-active-global'); |
| 4331 |
row.find('[pagelayer-set-global]').removeAttr('pagelayer-set-global'); |
| 4332 |
row.find('.pagelayer-global-on').removeClass('pagelayer-global-on'); |
| 4333 |
|
| 4334 |
// To save and render the typo |
| 4335 |
fontSelect.trigger('change'); |
| 4336 |
return; |
| 4337 |
} |
| 4338 |
|
| 4339 |
var globalID = listItem.data('global-id'); |
| 4340 |
var listHolder = row.find('.pagelayer-global-font-list'); |
| 4341 |
|
| 4342 |
// Remove previous selecttion |
| 4343 |
listHolder.find('.pagelayer-global-selected').removeClass('pagelayer-global-selected'); |
| 4344 |
listItem.addClass('pagelayer-global-selected'); |
| 4345 |
row.find('.pagelayer-elp-global-icon').addClass('pagelayer-active-global'); |
| 4346 |
row.find('.pagelayer-elp-typo-fonts').addClass('pagelayer-global-on'); |
| 4347 |
listHolder.slideUp(); |
| 4348 |
|
| 4349 |
pagelayer_link_font_family(fontSelect); // Apply google fonts |
| 4350 |
|
| 4351 |
// Set global value to all fields and save |
| 4352 |
row.find('.pagelayer-elp-label .pagelayer-typo-default').click(); |
| 4353 |
}); |
| 4354 |
|
| 4355 |
// Active global typography |
| 4356 |
if(!pagelayer_empty(is_typo)){ |
| 4357 |
row.find('[data-global-id="'+is_typo+'"]').addClass('pagelayer-global-selected'); |
| 4358 |
row.find('.pagelayer-elp-global-icon').addClass('pagelayer-active-global'); |
| 4359 |
row.find('.pagelayer-elp-typo-fonts').addClass('pagelayer-global-on'); |
| 4360 |
|
| 4361 |
// Show the global values if is not customize |
| 4362 |
row.find('.pagelayer-elp-typo').attr('pagelayer-set-global', 1); |
| 4363 |
row.find('.pagelayer-elp-typo').find('select, input').each(function(){ |
| 4364 |
var sEle = jQuery(this); |
| 4365 |
var val = sEle.val(); |
| 4366 |
|
| 4367 |
if(pagelayer_empty(val)){ |
| 4368 |
return true; |
| 4369 |
} |
| 4370 |
|
| 4371 |
sEle.closest('.pagelayer-elp-typo').removeAttr('pagelayer-set-global'); |
| 4372 |
}); |
| 4373 |
|
| 4374 |
row.find('[pagelayer-set-global="1"] .pagelayer-typo-default').trigger('click', [true]); |
| 4375 |
} |
| 4376 |
|
| 4377 |
// Set screen mode on change |
| 4378 |
row.find('.pagelayer-elp-screen .pli:not(.pagelayer-prop-screen)').on('click', function(){ |
| 4379 |
var mode = 'desktop'; |
| 4380 |
var jEle = jQuery(this); |
| 4381 |
|
| 4382 |
// Tablet ? |
| 4383 |
if(jEle.hasClass('pli-tablet')){ |
| 4384 |
mode = 'tablet'; |
| 4385 |
} |
| 4386 |
|
| 4387 |
// Mobile ? |
| 4388 |
if(jEle.hasClass('pli-mobile')){ |
| 4389 |
mode = 'mobile'; |
| 4390 |
} |
| 4391 |
|
| 4392 |
pagelayer_set_screen_mode(mode); |
| 4393 |
row.find('.pagelayer-elp-screen .pli').removeClass('open'); |
| 4394 |
}); |
| 4395 |
|
| 4396 |
row.find('.pagelayer-elp-screen').on('pagelayer-screen-changed', function(e){ |
| 4397 |
var mode = pagelayer_get_screen_mode(); |
| 4398 |
row.find('[pagelayer-screen-mode]').attr('pagelayer-screen-mode', mode); |
| 4399 |
}); |
| 4400 |
|
| 4401 |
row.find('.pagelayer-elp-screen .pagelayer-prop-screen').on('click', function(e){ |
| 4402 |
jQuery(this).siblings().toggleClass('open'); |
| 4403 |
}); |
| 4404 |
|
| 4405 |
} |
| 4406 |
|
| 4407 |
// The dimension property |
| 4408 |
function pagelayer_elp_dimension(row, prop){ |
| 4409 |
|
| 4410 |
var val = ['', '']; |
| 4411 |
|
| 4412 |
if(!pagelayer_empty(prop.c['val'])){ |
| 4413 |
|
| 4414 |
val = prop.c['val']; |
| 4415 |
if(pagelayer_is_string(val)){ |
| 4416 |
val = val.split(','); |
| 4417 |
//console.log(val); |
| 4418 |
} |
| 4419 |
|
| 4420 |
} |
| 4421 |
|
| 4422 |
var div = '<div class="pagelayer-elp-dimension-div">'+ |
| 4423 |
'<input type="number" class="pagelayer-elp-dimension" value="'+parseFloat(val[0])+'"></input>'+ |
| 4424 |
'<input type="number" class="pagelayer-elp-dimension" value="'+parseFloat(val[1])+'"></input>'+ |
| 4425 |
'<i class="pli pli-link" ></i>'+ |
| 4426 |
'</div>'; |
| 4427 |
|
| 4428 |
row.append(div); |
| 4429 |
|
| 4430 |
// Is the value linked ? |
| 4431 |
var link = row.find('.pagelayer-elp-dimension-div .pli'); |
| 4432 |
var isLinked = 1; |
| 4433 |
var tmp_val = val[0]; |
| 4434 |
|
| 4435 |
for(var p_val in val){ |
| 4436 |
|
| 4437 |
// Check if unlinked |
| 4438 |
if(tmp_val != val[p_val] ){ |
| 4439 |
isLinked = 0; |
| 4440 |
} |
| 4441 |
tmp_val = val[p_val]; |
| 4442 |
} |
| 4443 |
|
| 4444 |
if(isLinked){ |
| 4445 |
link.addClass('pagelayer-elp-dimension-linked'); |
| 4446 |
}else{ |
| 4447 |
link.removeClass('pagelayer-elp-dimension-linked'); |
| 4448 |
} |
| 4449 |
|
| 4450 |
// Handle link on click |
| 4451 |
link.on('click', function(){ |
| 4452 |
|
| 4453 |
var linked = link.hasClass('pagelayer-elp-dimension-linked'); |
| 4454 |
|
| 4455 |
if(linked){ |
| 4456 |
link.removeClass('pagelayer-elp-dimension-linked'); |
| 4457 |
}else{ |
| 4458 |
link.addClass('pagelayer-elp-dimension-linked'); |
| 4459 |
} |
| 4460 |
|
| 4461 |
}); |
| 4462 |
|
| 4463 |
row.find('input').on('input', function(){ |
| 4464 |
|
| 4465 |
// Are the values linked |
| 4466 |
var linked = row.find('.pagelayer-elp-dimension-div .pli').hasClass('pagelayer-elp-dimension-linked'); |
| 4467 |
|
| 4468 |
if(linked){ |
| 4469 |
var val = jQuery(this).val(); |
| 4470 |
row.find('input').each(function(){ |
| 4471 |
jQuery(this).val(val); |
| 4472 |
}); |
| 4473 |
} |
| 4474 |
|
| 4475 |
var vals = []; |
| 4476 |
|
| 4477 |
// Get all values |
| 4478 |
row.find('input').each(function(){ |
| 4479 |
var val = jQuery(this).val(); |
| 4480 |
vals.push(val ? val : 0); |
| 4481 |
}); |
| 4482 |
|
| 4483 |
_pagelayer_set_atts(row, vals);// Save and Render |
| 4484 |
}); |
| 4485 |
|
| 4486 |
}; |
| 4487 |
|
| 4488 |
var first_time_cat = true; |
| 4489 |
// Post Category property |
| 4490 |
function pagelayer_elp_postCategory(row, prop){ |
| 4491 |
|
| 4492 |
if(pagelayer_empty(pagelayer_post_categories)){ |
| 4493 |
return; |
| 4494 |
} |
| 4495 |
|
| 4496 |
// Placing the checked categories on the top. |
| 4497 |
var checked_on_top = function(with_checkbox){ |
| 4498 |
var checked_list = ''; |
| 4499 |
var unchecked_list = ''; |
| 4500 |
|
| 4501 |
jQuery(with_checkbox).children().each(function(){ |
| 4502 |
var list = this; |
| 4503 |
var temp = jQuery(list).find('input[checked=checked]'); |
| 4504 |
|
| 4505 |
if(!pagelayer_empty(temp.length)){ |
| 4506 |
checked_list += list.outerHTML; |
| 4507 |
}else{ |
| 4508 |
unchecked_list += list.outerHTML; |
| 4509 |
} |
| 4510 |
|
| 4511 |
}); |
| 4512 |
|
| 4513 |
return ('<div class="pagelayer-post-cat-div" ><ul class="pagelayer-post-category" >'+checked_list+unchecked_list+'</ul></div>'); |
| 4514 |
} |
| 4515 |
|
| 4516 |
// Getting checked and unchecked categories on opening of page props settings. |
| 4517 |
if(first_time_cat == false){ |
| 4518 |
|
| 4519 |
var $div = jQuery('<div>').html(pagelayer_post_categories.with_checkbox); |
| 4520 |
$div.find('input[type=checkbox]').attr('checked', false); |
| 4521 |
|
| 4522 |
if(!pagelayer_empty(prop.c['val'])){ |
| 4523 |
|
| 4524 |
var check_val = prop.c['val']; |
| 4525 |
if(pagelayer_is_string(check_val)){ |
| 4526 |
check_val = check_val.split(','); |
| 4527 |
} |
| 4528 |
|
| 4529 |
for(var no in check_val){ |
| 4530 |
$div.find('input[type=checkbox][value='+check_val[no]+']').attr('checked', true); |
| 4531 |
} |
| 4532 |
} |
| 4533 |
|
| 4534 |
pagelayer_post_categories.with_checkbox = $div.html(); |
| 4535 |
|
| 4536 |
} |
| 4537 |
|
| 4538 |
first_time_cat = false; |
| 4539 |
|
| 4540 |
// For making insert new categories functionality. |
| 4541 |
row.append(checked_on_top(pagelayer_post_categories.with_checkbox)); |
| 4542 |
|
| 4543 |
var div = '<div class="pagelayer-elp-postCategory">'+ |
| 4544 |
'<span class="pagelayer-add-cat-btn">Add New Category</span>'+ |
| 4545 |
'<form style="display:none;">'+ |
| 4546 |
'<div>'+ |
| 4547 |
'<label>New Category Name</label>'+ |
| 4548 |
'<input type="text" name="category_name" required>'+ |
| 4549 |
'</div>'+ |
| 4550 |
'<div>'+ |
| 4551 |
'<label>Parent Category</label>'+ |
| 4552 |
'<div class="pagelayer-parent-category"></div>'+ |
| 4553 |
'</div>'+ |
| 4554 |
'<button type="submit" class="pagelayer-cat-submit" >Add New Category</button>'+ |
| 4555 |
'</form>'+ |
| 4556 |
'</div>'; |
| 4557 |
|
| 4558 |
row.append(div); |
| 4559 |
|
| 4560 |
// For making categories drop down options and adding an empty option. |
| 4561 |
if(!pagelayer_empty(pagelayer_post_categories.without_checkbox)){ |
| 4562 |
var options = pagelayer_post_categories.without_checkbox.replace('>', '><option class="level-0" value="0">--No Parent--</option>'); |
| 4563 |
var options = jQuery(options); |
| 4564 |
row.find('.pagelayer-parent-category').append(options); |
| 4565 |
} |
| 4566 |
|
| 4567 |
// For initiating ajax call when user create new category |
| 4568 |
row.find('form').on('submit', function(e){ |
| 4569 |
e.preventDefault(); |
| 4570 |
jQuery.ajax({ |
| 4571 |
type: 'post', |
| 4572 |
url: pagelayer_ajax_url+'&action=pagelayer_get_cat_checkboxes', |
| 4573 |
dataType: 'json', |
| 4574 |
data: { |
| 4575 |
pagelayer_nonce: pagelayer_ajax_nonce, |
| 4576 |
'postid': pagelayer_postID, |
| 4577 |
'new_cat': row.find('form').serialize() |
| 4578 |
}, |
| 4579 |
success: function(obj){ |
| 4580 |
|
| 4581 |
if(pagelayer_empty(obj)){ |
| 4582 |
return; |
| 4583 |
} |
| 4584 |
|
| 4585 |
if('error' in obj){ |
| 4586 |
alert(obj.error); |
| 4587 |
} |
| 4588 |
|
| 4589 |
if(!pagelayer_empty(obj.new_cat_id)){ |
| 4590 |
obj.with_checkbox = obj.with_checkbox.replace('value="'+obj.new_cat_id+'"', 'value="'+obj.new_cat_id+'" checked="checked"'); |
| 4591 |
} |
| 4592 |
|
| 4593 |
var new_cat_elem = jQuery(obj.with_checkbox).find('input[value='+obj.new_cat_id+']').closest('li'); |
| 4594 |
var post_cat = row.find('.pagelayer-post-category'); |
| 4595 |
|
| 4596 |
// Does the new element have no parents ? Then prepend the <LI> to the existing list shown |
| 4597 |
if(!pagelayer_empty(new_cat_elem.parent('.pagelayer-post-category').length)){ |
| 4598 |
post_cat.prepend(new_cat_elem); |
| 4599 |
}else{ |
| 4600 |
|
| 4601 |
// Siblings are already there ? |
| 4602 |
if(!pagelayer_empty(new_cat_elem.siblings().length)){ |
| 4603 |
post_cat.find('#'+new_cat_elem.parent().parent('li').attr('id')).children('ul').append(new_cat_elem); |
| 4604 |
// No siblings, hence append |
| 4605 |
}else{ |
| 4606 |
new_cat_elem = new_cat_elem.parent(); |
| 4607 |
post_cat.find('#'+new_cat_elem.closest('li').attr('id')).append(new_cat_elem); |
| 4608 |
} |
| 4609 |
|
| 4610 |
post_cat.prepend(new_cat_elem.parentsUntil('.pagelayer-post-category').last()); |
| 4611 |
} |
| 4612 |
|
| 4613 |
row.find('#pagelayer_cat_parent').replaceWith(obj.without_checkbox.replace('>', '><option class="level-0" value="0">--No Parent--</option>')); |
| 4614 |
|
| 4615 |
row.find('input[name="category_name"]').val(''); |
| 4616 |
row.find('#pagelayer_cat_parent option[value="0"]').attr('selected', true); |
| 4617 |
checked_cat(row.find('.pagelayer-post-cat-div')); |
| 4618 |
event_function(); |
| 4619 |
pagelayer_post_categories = obj; |
| 4620 |
} |
| 4621 |
}); |
| 4622 |
}); |
| 4623 |
|
| 4624 |
// Show and hide 'Add new Category' button. |
| 4625 |
row.find('.pagelayer-add-cat-btn').on('click', function(){ |
| 4626 |
row.find('form').toggle('fast'); |
| 4627 |
}); |
| 4628 |
|
| 4629 |
var checked_cat = function(elem){ |
| 4630 |
var jEle = elem.find('input:checked'); |
| 4631 |
var cat_array = []; |
| 4632 |
for(var checked_input of jEle){ |
| 4633 |
cat_array.push(jQuery(checked_input).attr('value')); |
| 4634 |
} |
| 4635 |
_pagelayer_set_atts(row, cat_array); |
| 4636 |
}; |
| 4637 |
|
| 4638 |
var event_function = function(){row.find('.pagelayer-post-cat-div').on('change', function(){ |
| 4639 |
checked_cat(jQuery(this)); |
| 4640 |
}); |
| 4641 |
}; |
| 4642 |
event_function(); |
| 4643 |
} |
| 4644 |
|
| 4645 |
var first_time_tag = true; |
| 4646 |
// Post tags property |
| 4647 |
function pagelayer_elp_postTags(row, prop){ |
| 4648 |
|
| 4649 |
if(pagelayer_empty(pagelayer_post_tags)){ |
| 4650 |
return; |
| 4651 |
} |
| 4652 |
|
| 4653 |
var div = '<div class="pagelayer-elp-postTags" >'+ |
| 4654 |
'<div class="pagelayer-post-tags" >'+ |
| 4655 |
'<input type="text" autocomplete="off" class="pagelayer-elp-postTags-inp" autofocus="autofocus"/>'+ |
| 4656 |
'<ul class="pagelayer-postTags-list" >'+ |
| 4657 |
'</ul>'+ |
| 4658 |
'</div>'+ |
| 4659 |
'</div>'; |
| 4660 |
|
| 4661 |
row.append(div); |
| 4662 |
|
| 4663 |
// Single tag html |
| 4664 |
var singleTag = function(tags){ |
| 4665 |
var html = ''; |
| 4666 |
jQuery.each(tags, function(index, value){ |
| 4667 |
if(pagelayer_empty(value['term_id'])){ |
| 4668 |
return; |
| 4669 |
} |
| 4670 |
html += '<span class="pagelayer-elp-tags-ele" data-val="'+value['term_id']+'"><span class="pagelayer-tags-label" >'+value['name']+'</span><span class="pagelayer-elp-tags-remove"><i class="fas fa-times"></i></span></span>'; |
| 4671 |
}); |
| 4672 |
return html; |
| 4673 |
} |
| 4674 |
|
| 4675 |
// Single list item html |
| 4676 |
var singleLi= function(tags){ |
| 4677 |
var html = ''; |
| 4678 |
jQuery.each(tags, function(index, value){ |
| 4679 |
html += '<li data-val="'+value['term_id']+'">'+value['name']+'</li>'; |
| 4680 |
}); |
| 4681 |
return html; |
| 4682 |
} |
| 4683 |
|
| 4684 |
// For making new tags as well as removing using keyboard inputs. |
| 4685 |
var keypresses = function(obj){ |
| 4686 |
row.find('.pagelayer-elp-postTags-inp').on('keydown', function(e){ |
| 4687 |
var val = e.target.value.trim(); |
| 4688 |
var keycode = (event.keyCode ? event.keyCode : event.which); |
| 4689 |
|
| 4690 |
if(keycode == '13' || keycode == '188'){ |
| 4691 |
|
| 4692 |
for(var tag of obj.allTags){ |
| 4693 |
if(tag['name']==val){ |
| 4694 |
insertTags(val, tag['term_id']); |
| 4695 |
return false; |
| 4696 |
} |
| 4697 |
} |
| 4698 |
|
| 4699 |
jQuery.ajax({ |
| 4700 |
url: pagelayer_ajax_url+'&action=pagelayer_get_post_tags', |
| 4701 |
type: 'post', |
| 4702 |
dataType: 'json', |
| 4703 |
data: { |
| 4704 |
pagelayer_nonce: pagelayer_ajax_nonce, |
| 4705 |
'postid': pagelayer_postID, |
| 4706 |
'new_tag': val |
| 4707 |
}, |
| 4708 |
success: function(resp){ |
| 4709 |
if(pagelayer_empty(resp)){ |
| 4710 |
return; |
| 4711 |
} |
| 4712 |
if('error' in resp){ |
| 4713 |
alert(resp.error); |
| 4714 |
} |
| 4715 |
if(!pagelayer_empty(resp.tag_id)){ |
| 4716 |
insertTags(val, resp.tag_id); |
| 4717 |
tagSearching(resp); |
| 4718 |
pagelayer_post_tags = resp; |
| 4719 |
} |
| 4720 |
} |
| 4721 |
}); |
| 4722 |
|
| 4723 |
return false; |
| 4724 |
}else if(keycode == '8'){ |
| 4725 |
if(!pagelayer_empty(val)){ |
| 4726 |
return true; |
| 4727 |
} |
| 4728 |
row.find('.pagelayer-post-tags').children('span').last().remove(); |
| 4729 |
selected_tags(); |
| 4730 |
} |
| 4731 |
return true; |
| 4732 |
}); |
| 4733 |
} |
| 4734 |
|
| 4735 |
// Inserting tags in the Metabox. |
| 4736 |
var insertTags = function(name, tag_id){ |
| 4737 |
var newItem = []; |
| 4738 |
newItem[0] = { |
| 4739 |
name:name, |
| 4740 |
term_id:tag_id |
| 4741 |
}; |
| 4742 |
row.find('.pagelayer-post-tags').children('input').before(singleTag(newItem)); |
| 4743 |
row.find('.pagelayer-elp-postTags .pagelayer-elp-postTags-inp').val('').focus(); |
| 4744 |
tag_remove(); |
| 4745 |
selected_tags(); |
| 4746 |
} |
| 4747 |
|
| 4748 |
// Removing tags by clicking on the x button. |
| 4749 |
var tag_remove = function(){ |
| 4750 |
row.find('.pagelayer-elp-tags-remove').each(function(){ |
| 4751 |
jQuery(this).on('click',function(){ |
| 4752 |
jQuery(this).parent().remove(); |
| 4753 |
selected_tags(); |
| 4754 |
}); |
| 4755 |
}); |
| 4756 |
} |
| 4757 |
|
| 4758 |
// For searching tag name in the list of the fetched tags |
| 4759 |
var tagSearching = function(obj){ |
| 4760 |
row.find('.pagelayer-elp-postTags-inp').off('keyup'); |
| 4761 |
row.find('.pagelayer-elp-postTags-inp').on("keyup", function() { |
| 4762 |
var value = jQuery(this).val().toLowerCase(); |
| 4763 |
|
| 4764 |
var listUl = row.find('.pagelayer-postTags-list'); |
| 4765 |
listUl.empty(); |
| 4766 |
|
| 4767 |
if(value.length<2){ |
| 4768 |
return; |
| 4769 |
} |
| 4770 |
|
| 4771 |
var listValues = obj.allTags.filter(function(currentValue){ |
| 4772 |
if(currentValue.name.indexOf(this)>-1){ |
| 4773 |
var temp = false; |
| 4774 |
var tags = row.find('.pagelayer-post-tags').children('span'); |
| 4775 |
for(var indi of tags){ |
| 4776 |
if(jQuery(indi).attr('data-val')==currentValue.term_id){ |
| 4777 |
temp = true; |
| 4778 |
} |
| 4779 |
} |
| 4780 |
if(temp==false){ |
| 4781 |
return currentValue; |
| 4782 |
} |
| 4783 |
} |
| 4784 |
}, value); |
| 4785 |
|
| 4786 |
if(!pagelayer_empty(listValues.length)){ |
| 4787 |
listUl.append(singleLi(listValues)); |
| 4788 |
listUl.children().each(function(index, value){ |
| 4789 |
var ele = jQuery(this); |
| 4790 |
ele.off('click'); |
| 4791 |
ele.on('click', function(){ |
| 4792 |
insertTags(ele.text(), ele.attr('data-val')); |
| 4793 |
listUl.empty(); |
| 4794 |
}); |
| 4795 |
}); |
| 4796 |
} |
| 4797 |
|
| 4798 |
|
| 4799 |
}); |
| 4800 |
} |
| 4801 |
|
| 4802 |
var tagsArray = pagelayer_post_tags.postTags; |
| 4803 |
|
| 4804 |
// Getting tags on opening of page props settings. |
| 4805 |
if( first_time_tag == false ){ |
| 4806 |
|
| 4807 |
var i=0; |
| 4808 |
var tags_array = []; |
| 4809 |
|
| 4810 |
// Create array for needed term_id with corresponding to the name. |
| 4811 |
if(!pagelayer_empty(prop.c['val'])){ |
| 4812 |
|
| 4813 |
var tags_val = prop.c['val']; |
| 4814 |
if(pagelayer_is_string(tags_val)){ |
| 4815 |
tags_val = tags_val.split(','); |
| 4816 |
} |
| 4817 |
|
| 4818 |
for(var name in tags_val){ |
| 4819 |
tags_array[i] = pagelayer_post_tags.allTags.find(function(val){return val['name'] == tags_val[name]}); |
| 4820 |
i++; |
| 4821 |
} |
| 4822 |
} |
| 4823 |
|
| 4824 |
tagsArray = tags_array; |
| 4825 |
} |
| 4826 |
|
| 4827 |
row.find('.pagelayer-post-tags').prepend(singleTag(tagsArray)); |
| 4828 |
|
| 4829 |
first_time_tag = false; |
| 4830 |
|
| 4831 |
tagSearching(pagelayer_post_tags); |
| 4832 |
|
| 4833 |
keypresses(pagelayer_post_tags); |
| 4834 |
|
| 4835 |
tag_remove(); |
| 4836 |
|
| 4837 |
var selected_tags = function(){ |
| 4838 |
var jEle = row.find('.pagelayer-elp-postTags .pagelayer-elp-tags-ele'); |
| 4839 |
var tag_array = []; |
| 4840 |
for(var selec_tag of jEle){ |
| 4841 |
tag_array.push(jQuery(selec_tag).text()); |
| 4842 |
} |
| 4843 |
_pagelayer_set_atts(row, tag_array); |
| 4844 |
}; |
| 4845 |
} |
| 4846 |
|
| 4847 |
function pagelayer_elp_permalink(row, prop){ |
| 4848 |
|
| 4849 |
var tmp = ''; |
| 4850 |
var link = ''; |
| 4851 |
|
| 4852 |
if(!pagelayer_empty(pagelayer_permalink_structure)){ |
| 4853 |
tmp = pagelayer_post_permalink.replace(/\/$/,''); |
| 4854 |
link = tmp.substring(0, tmp.lastIndexOf('/')); |
| 4855 |
|
| 4856 |
var new_link = link+'/'+prop.c['val']; |
| 4857 |
prop.default = pagelayer_post.post_name; |
| 4858 |
|
| 4859 |
var div = '<div class="pagelayer-elp-text-div">'+ |
| 4860 |
'<input type="text" class="pagelayer-elp-text" name="'+prop.c['name']+'" value="'+pagelayer_htmlEntities(prop.c['val'])+'"></input>'+ |
| 4861 |
'<a href="'+pagelayer_post_permalink+'" class="pagelayer-elp-permalink-a" target="_blank" >'+new_link+'</a></p>'+ |
| 4862 |
'</div>'; |
| 4863 |
}else{ |
| 4864 |
var div = '<div class="pagelayer-elp-text-div">'+ |
| 4865 |
'<a href="'+pagelayer_post.guid+'" class="pagelayer-elp-permalink-a" target="_blank" >'+pagelayer_post.guid+'</a></p>'+ |
| 4866 |
'</div>'; |
| 4867 |
} |
| 4868 |
|
| 4869 |
row.append(div); |
| 4870 |
|
| 4871 |
setTimeout(function(){ |
| 4872 |
row.find(".pagelayer-post-type").html(pagelayer_post.post_type); |
| 4873 |
}, 1000); |
| 4874 |
|
| 4875 |
var string_to_slug = function (str){ |
| 4876 |
str = str.replace(/^\s+|\s+$/g, ''); // trim |
| 4877 |
str = str.toLowerCase(); |
| 4878 |
|
| 4879 |
// remove accents, swap ñ for n, etc |
| 4880 |
var char_map = { |
| 4881 |
// Latin |
| 4882 |
'À': 'A', 'Á': 'A', 'Â': 'A', 'Ã': 'A', 'Ä': 'A', '� |
| 4883 |
': 'A', 'Æ': 'AE', 'Ç': 'C', |
| 4884 |
'È': 'E', 'É': 'E', 'Ê': 'E', 'Ë': 'E', 'Ì': 'I', 'Í': 'I', 'Î': 'I', 'Ï': 'I', |
| 4885 |
'Ð': 'D', 'Ñ': 'N', 'Ò': 'O', 'Ó': 'O', 'Ô': 'O', 'Õ': 'O', 'Ö': 'O', 'Ő': 'O', |
| 4886 |
'Ø': 'O', 'Ù': 'U', 'Ú': 'U', 'Û': 'U', 'Ü': 'U', 'Ű': 'U', 'Ý': 'Y', 'Þ': 'TH', |
| 4887 |
'ß': 'ss', |
| 4888 |
'à': 'a', 'á': 'a', 'â': 'a', 'ã': 'a', 'ä': 'a', 'å': 'a', 'æ': 'ae', 'ç': 'c', |
| 4889 |
'è': 'e', 'é': 'e', 'ê': 'e', 'ë': 'e', 'ì': 'i', 'í': 'i', 'î': 'i', 'ï': 'i', |
| 4890 |
'ð': 'd', 'ñ': 'n', 'ò': 'o', 'ó': 'o', 'ô': 'o', 'õ': 'o', 'ö': 'o', 'ő': 'o', |
| 4891 |
'ø': 'o', 'ù': 'u', 'ú': 'u', 'û': 'u', 'ü': 'u', 'ű': 'u', 'ý': 'y', 'þ': 'th', |
| 4892 |
'ÿ': 'y', |
| 4893 |
|
| 4894 |
// Latin symbols |
| 4895 |
'©': '(c)', |
| 4896 |
|
| 4897 |
// Greek |
| 4898 |
'Α': 'A', 'Β': 'B', 'Γ': 'G', 'Δ': 'D', 'Ε': 'E', 'Ζ': 'Z', 'Η': 'H', 'Θ': '8', |
| 4899 |
'Ι': 'I', 'Κ': 'K', 'Λ': 'L', 'Μ': 'M', 'Ν': 'N', 'Ξ': '3', 'Ο': 'O', 'Π': 'P', |
| 4900 |
'Ρ': 'R', 'Σ': 'S', 'Τ': 'T', 'Υ': 'Y', 'Φ': 'F', 'Χ': 'X', 'Ψ': 'PS', 'Ω': 'W', |
| 4901 |
'Ά': 'A', 'Έ': 'E', 'Ί': 'I', 'Ό': 'O', 'Ύ': 'Y', 'Ή': 'H', 'Ώ': 'W', 'Ϊ': 'I', |
| 4902 |
'Ϋ': 'Y', |
| 4903 |
'α': 'a', 'β': 'b', 'γ': 'g', 'δ': 'd', 'ε': 'e', 'ζ': 'z', 'η': 'h', 'θ': '8', |
| 4904 |
'ι': 'i', 'κ': 'k', 'λ': 'l', 'μ': 'm', 'ν': 'n', 'ξ': '3', 'ο': 'o', 'π': 'p', |
| 4905 |
'ρ': 'r', 'σ': 's', 'τ': 't', '� |
| 4906 |
': 'y', 'φ': 'f', 'χ': 'x', 'ψ': 'ps', 'ω': 'w', |
| 4907 |
'ά': 'a', 'έ': 'e', 'ί': 'i', 'ό': 'o', 'ύ': 'y', 'ή': 'h', 'ώ': 'w', 'ς': 's', |
| 4908 |
'ϊ': 'i', 'ΰ': 'y', 'ϋ': 'y', 'ΐ': 'i', |
| 4909 |
|
| 4910 |
// Turkish |
| 4911 |
'Ş': 'S', 'İ': 'I', 'Ç': 'C', 'Ü': 'U', 'Ö': 'O', 'Ğ': 'G', |
| 4912 |
'ş': 's', 'ı': 'i', 'ç': 'c', 'ü': 'u', 'ö': 'o', 'ğ': 'g', |
| 4913 |
|
| 4914 |
// Russian |
| 4915 |
'А': 'A', 'Б': 'B', 'В': 'V', 'Г': 'G', 'Д': 'D', 'Е': 'E', 'Ё': 'Yo', 'Ж': 'Zh', |
| 4916 |
'З': 'Z', 'И': 'I', 'Й': 'J', 'К': 'K', 'Л': 'L', 'М': 'M', 'Н': 'N', 'О': 'O', |
| 4917 |
'П': 'P', 'Р': 'R', 'С': 'S', 'Т': 'T', 'У': 'U', 'Ф': 'F', 'Х': 'H', 'Ц': 'C', |
| 4918 |
'Ч': 'Ch', 'Ш': 'Sh', 'Щ': 'Sh', 'Ъ': '', 'Ы': 'Y', 'Ь': '', 'Э': 'E', 'Ю': 'Yu', |
| 4919 |
'Я': 'Ya', |
| 4920 |
'а': 'a', 'б': 'b', 'в': 'v', 'г': 'g', 'д': 'd', 'е': 'e', 'ё': 'yo', 'ж': 'zh', |
| 4921 |
'з': 'z', 'и': 'i', 'й': 'j', 'к': 'k', 'л': 'l', 'м': 'm', 'н': 'n', 'о': 'o', |
| 4922 |
'п': 'p', 'р': 'r', 'с': 's', 'т': 't', 'у': 'u', 'ф': 'f', '� |
| 4923 |
': 'h', 'ц': 'c', |
| 4924 |
'ч': 'ch', 'ш': 'sh', 'щ': 'sh', 'ъ': '', 'ы': 'y', 'ь': '', 'э': 'e', 'ю': 'yu', |
| 4925 |
'я': 'ya', |
| 4926 |
|
| 4927 |
// Ukrainian |
| 4928 |
'Є': 'Ye', 'І': 'I', 'Ї': 'Yi', 'Ґ': 'G', |
| 4929 |
'є': 'ye', 'і': 'i', 'ї': 'yi', 'ґ': 'g', |
| 4930 |
|
| 4931 |
// Czech |
| 4932 |
'Č': 'C', 'Ď': 'D', 'Ě': 'E', 'Ň': 'N', 'Ř': 'R', 'Š': 'S', 'Ť': 'T', 'Ů': 'U', |
| 4933 |
'Ž': 'Z', |
| 4934 |
'č': 'c', 'ď': 'd', 'ě': 'e', 'ň': 'n', 'ř': 'r', 'š': 's', 'ť': 't', 'ů': 'u', |
| 4935 |
'ž': 'z', |
| 4936 |
|
| 4937 |
// Polish |
| 4938 |
'Ą': 'A', 'Ć': 'C', 'Ę': 'e', 'Ł': 'L', 'Ń': 'N', 'Ó': 'o', 'Ś': 'S', 'Ź': 'Z', |
| 4939 |
'Ż': 'Z', |
| 4940 |
'� |
| 4941 |
': 'a', 'ć': 'c', 'ę': 'e', 'ł': 'l', 'ń': 'n', 'ó': 'o', 'ś': 's', 'ź': 'z', |
| 4942 |
'ż': 'z', |
| 4943 |
|
| 4944 |
// Latvian |
| 4945 |
'Ā': 'A', 'Č': 'C', 'Ē': 'E', 'Ģ': 'G', 'Ī': 'i', 'Ķ': 'k', 'Ļ': 'L', '� |
| 4946 |
': 'N', |
| 4947 |
'Š': 'S', 'Ū': 'u', 'Ž': 'Z', |
| 4948 |
'ā': 'a', 'č': 'c', 'ē': 'e', 'ģ': 'g', 'ī': 'i', 'ķ': 'k', 'ļ': 'l', 'ņ': 'n', |
| 4949 |
'š': 's', 'ū': 'u', 'ž': 'z' |
| 4950 |
}; |
| 4951 |
|
| 4952 |
for(var k in char_map) { |
| 4953 |
str = str.replace(new RegExp(k, 'g'), char_map[k]); |
| 4954 |
} |
| 4955 |
|
| 4956 |
str = str.replace('.', '-')// replace a dot by a dash |
| 4957 |
.replace(/[^a-z0-9 -]/g, '') // remove invalid chars |
| 4958 |
.replace(/\s+/g, '-') // collapse whitespace and replace by a dash |
| 4959 |
.replace(/-+/g, '-') // collapse dashes |
| 4960 |
.replace( /\//g, '' ); // collapse all forward-slashes |
| 4961 |
|
| 4962 |
return str; |
| 4963 |
} |
| 4964 |
|
| 4965 |
var editSlug = function(jEle, val){ |
| 4966 |
|
| 4967 |
// Convert to slug |
| 4968 |
val = string_to_slug(val); |
| 4969 |
|
| 4970 |
var new_link = link+'/'+val; |
| 4971 |
var a = row.find('a'); |
| 4972 |
a.html(new_link); |
| 4973 |
jEle.val(val); |
| 4974 |
|
| 4975 |
return val; |
| 4976 |
} |
| 4977 |
|
| 4978 |
var input = row.find('input'); |
| 4979 |
|
| 4980 |
if(pagelayer_empty(prop.c['val'])){ |
| 4981 |
editSlug(input, pagelayer_post.post_title); |
| 4982 |
|
| 4983 |
input.on('focusin', function(){ |
| 4984 |
if(!pagelayer_empty(pagelayer_get_att(prop.el.$, prop.c['name']))){ |
| 4985 |
return; |
| 4986 |
} |
| 4987 |
|
| 4988 |
editSlug(input, pagelayer_get_att(prop.el.$, 'post_title')); |
| 4989 |
}); |
| 4990 |
} |
| 4991 |
|
| 4992 |
input.on('focusout', function(){ |
| 4993 |
var val = jQuery(this).val(); |
| 4994 |
val = editSlug(jQuery(this), val); |
| 4995 |
|
| 4996 |
if(pagelayer_empty(pagelayer_get_att(prop.el.$, prop.c['name']))){ |
| 4997 |
return; |
| 4998 |
} |
| 4999 |
_pagelayer_set_atts(row, val);// Save and Render |
| 5000 |
}); |
| 5001 |
|
| 5002 |
input.on('input', function(){ |
| 5003 |
var new_link = link+'/'+jQuery(this).val(); |
| 5004 |
var a = row.find('a'); |
| 5005 |
a.html(new_link); |
| 5006 |
_pagelayer_set_atts(row, jQuery(this).val());// Save and Render |
| 5007 |
}); |
| 5008 |
} |
| 5009 |
|
| 5010 |
// The Datetime Property |
| 5011 |
function pagelayer_elp_postDate(row, prop){ |
| 5012 |
|
| 5013 |
var date_array = prop.c['val'].split(" "); |
| 5014 |
|
| 5015 |
var div = '<div class="pagelayer-elp-postdate-div">'+ |
| 5016 |
'<input type="date" class="pagelayer-elp-postdate" name="'+prop.c['name']+'" value="'+date_array[0]+'" />'+ |
| 5017 |
'<input type="time" class="pagelayer-elp-postdate" name="'+prop.c['name']+'" value="'+date_array[1]+'" />'+ |
| 5018 |
'</div>'; |
| 5019 |
|
| 5020 |
row.append(div); |
| 5021 |
|
| 5022 |
row.find('.pagelayer-elp-postdate-div').on('change', function(){ |
| 5023 |
var date_string = jQuery(this).children().eq(0).val() +' '+ jQuery(this).children().eq(1).val(); |
| 5024 |
_pagelayer_set_atts(row, date_string);// Save and Render |
| 5025 |
}); |
| 5026 |
|
| 5027 |
}; |
| 5028 |
|
| 5029 |
// The button Property |
| 5030 |
function pagelayer_elp_trashButton(row, prop){ |
| 5031 |
|
| 5032 |
var div = '<div class="pagelayer-elp-trash-button-div">'+ |
| 5033 |
'<button class="pagelayer-elp-trash-button">Move to trash</button>'+ |
| 5034 |
'</div>'; |
| 5035 |
|
| 5036 |
row.append(div); |
| 5037 |
|
| 5038 |
row.find('.pagelayer-elp-trash-button').on('click', function(event){ |
| 5039 |
event.preventDefault(); |
| 5040 |
if(!confirm(pagelayer_l('delete_post_conf'))){ |
| 5041 |
return; |
| 5042 |
} |
| 5043 |
//console.log(pagelayer_postID); |
| 5044 |
jQuery.ajax({ |
| 5045 |
url: pagelayer_ajax_url+'&action=pagelayer_trash_post', |
| 5046 |
type: 'post', |
| 5047 |
dataType: 'json', |
| 5048 |
data: { |
| 5049 |
pagelayer_nonce: pagelayer_ajax_nonce, |
| 5050 |
'postid': pagelayer_postID |
| 5051 |
}, |
| 5052 |
success: function(resp){ |
| 5053 |
|
| 5054 |
if('error' in resp){ |
| 5055 |
alert(resp.error); |
| 5056 |
} |
| 5057 |
|
| 5058 |
if('url' in resp){ |
| 5059 |
window.top.location.href = resp.url; |
| 5060 |
} |
| 5061 |
} |
| 5062 |
}); |
| 5063 |
}); |
| 5064 |
|
| 5065 |
}; |
| 5066 |
|
| 5067 |
// The Menus list property |
| 5068 |
function pagelayer_elp_menus(row, prop){ |
| 5069 |
|
| 5070 |
var jEle = prop.el.$; |
| 5071 |
var options = ''; |
| 5072 |
var option = function(val, lang){ |
| 5073 |
var selected = (val != prop.c['val']) ? '' : 'selected="selected"'; |
| 5074 |
return '<option class="pagelayer-elp-select-option" value="'+val+'" '+selected+'>'+lang+'</option>'; |
| 5075 |
} |
| 5076 |
|
| 5077 |
for(x in prop['list']){ |
| 5078 |
|
| 5079 |
// Single item |
| 5080 |
if(typeof prop['list'][x] == 'string'){ |
| 5081 |
options += option(x, prop['list'][x]); |
| 5082 |
|
| 5083 |
// Groups |
| 5084 |
}else{ |
| 5085 |
options += '<optgroup label="'+x+'">'; |
| 5086 |
|
| 5087 |
for(var y in prop['list'][x]){ |
| 5088 |
options += option(y, prop['list'][x][y]); |
| 5089 |
} |
| 5090 |
|
| 5091 |
options += '</optgroup>'; |
| 5092 |
} |
| 5093 |
} |
| 5094 |
|
| 5095 |
var div = '<div class="pagelayer-elp-select-div pagelayer-elp-pos-rel">'+ |
| 5096 |
'<select class="pagelayer-elp-select pagelayer-elp-select-menus" name="'+prop.c['name']+'">'+options+'</select>'+ |
| 5097 |
'</div>'+ |
| 5098 |
'<div class="pagelayer-elp-menu-items-holder pagelayer-elp-pos-rel"></div>'; |
| 5099 |
|
| 5100 |
row.append(div); |
| 5101 |
|
| 5102 |
// Show the properties of the existing things |
| 5103 |
var show_item = function(item, child_elements, depth){ |
| 5104 |
|
| 5105 |
depth = depth || 0; |
| 5106 |
|
| 5107 |
var title = item['title'] || ''; |
| 5108 |
|
| 5109 |
// Create the HTML |
| 5110 |
var holder = jQuery('<div class="pagelayer-elp-group-item pagelayer-menu-depth-'+depth+'" pagelayer-menu-item="'+item['ID']+'">'+ |
| 5111 |
'<div class="pagelayer-elp-group-item-head">'+ |
| 5112 |
'<span class="pagelayer-elp-group-item-drag"><i class="pli pli-menu" ></i></span>'+ |
| 5113 |
'<span class="pagelayer-elp-group-item-title">'+title+'</span>'+ |
| 5114 |
'</div>'+ |
| 5115 |
'<div class="pagelayer-elp-group-item-body"></div>'+ |
| 5116 |
'<div class="menu-item-transport"></div>'+ |
| 5117 |
'</div>'); |
| 5118 |
|
| 5119 |
// Append to the row |
| 5120 |
row.find('.pagelayer-elp-menu-items-holder').append(holder); |
| 5121 |
|
| 5122 |
// Setup the toggle |
| 5123 |
holder.find('.pagelayer-elp-group-item-head').first().on('click', function(e){ |
| 5124 |
if(jQuery(e.target).closest('.pagelayer-elp-group-item-clone, .pagelayer-elp-group-item-del, .pagelayer-elp-group-item-drag').length > 0){ |
| 5125 |
return; |
| 5126 |
} |
| 5127 |
|
| 5128 |
var editArea = jEle.find('.pagelayer-mega-editor-'+item['ID']); |
| 5129 |
var child = editArea.find('[pagelayer-tag="pl_nav_menu_item"]'); |
| 5130 |
var cid; |
| 5131 |
|
| 5132 |
if(child.length < 1){ |
| 5133 |
|
| 5134 |
// First add the element inside the group element |
| 5135 |
var _child = jQuery('<div pagelayer-tag="pl_nav_menu_item"></div>'); |
| 5136 |
|
| 5137 |
editArea.append(_child); |
| 5138 |
|
| 5139 |
cid = pagelayer_onadd(_child, false); |
| 5140 |
|
| 5141 |
child = jQuery('[pagelayer-id='+cid+']'); |
| 5142 |
|
| 5143 |
// Set Attributes |
| 5144 |
pagelayer_set_atts(child, item); |
| 5145 |
}else{ |
| 5146 |
cid = pagelayer_id(child); |
| 5147 |
} |
| 5148 |
|
| 5149 |
var rEle = holder.find('.pagelayer-elp-group-item-body').first(); |
| 5150 |
|
| 5151 |
holder.attr('pagelayer-group-item-id', cid); |
| 5152 |
|
| 5153 |
// If the props are not already setup |
| 5154 |
if(rEle.html().length < 1){ |
| 5155 |
pagelayer_elpd_generate(jQuery('[pagelayer-id="'+cid+'"]'), rEle); |
| 5156 |
|
| 5157 |
// Change the group item title |
| 5158 |
var tmp_title = holder.find('[pagelayer-elp-name="'+item['title']+'"] [name="'+item['title']+'"]'); |
| 5159 |
|
| 5160 |
if(tmp_title.length > 0){ |
| 5161 |
jQuery(tmp_title).on('input', function(){ |
| 5162 |
holder.find('.pagelayer-elp-group-item-title').html(tmp_title.val()); |
| 5163 |
}); |
| 5164 |
} |
| 5165 |
} |
| 5166 |
|
| 5167 |
if(!rEle.is(':visible')){ |
| 5168 |
jQuery('.pagelayer-active-mega-menu').removeClass('pagelayer-active-mega-menu'); |
| 5169 |
jEle.find('.pagelayer-mega-menu-item.menu-item-'+item['ID']).addClass('pagelayer-active-mega-menu'); |
| 5170 |
} |
| 5171 |
|
| 5172 |
rEle.slideToggle(); |
| 5173 |
}); |
| 5174 |
|
| 5175 |
// Add child elements |
| 5176 |
if(!pagelayer_empty(child_elements[item['ID']])){ |
| 5177 |
|
| 5178 |
depth++; |
| 5179 |
|
| 5180 |
for(var i in child_elements[item['ID']]){ |
| 5181 |
show_item(child_elements[item['ID']][i], child_elements, depth); |
| 5182 |
} |
| 5183 |
} |
| 5184 |
|
| 5185 |
holder.on('change', 'select[name="menu_type"]', function(){ |
| 5186 |
var mType = jQuery(this).val(); |
| 5187 |
var rowGroup = holder.find('[pagelayer-elp-name="element"]'); |
| 5188 |
|
| 5189 |
if(mType != 'mega' || rowGroup.find('.pagelayer-elp-group-div .pagelayer-elp-group-item').length > 0){ |
| 5190 |
return; |
| 5191 |
} |
| 5192 |
|
| 5193 |
rowGroup.find('.pagelayer-elp-button').click(); |
| 5194 |
|
| 5195 |
}); |
| 5196 |
}; |
| 5197 |
|
| 5198 |
var createItemsList = function(menuID){ |
| 5199 |
|
| 5200 |
// Remove previous items |
| 5201 |
row.find('.pagelayer-elp-menu-items-holder').empty(); |
| 5202 |
|
| 5203 |
if(!(menuID in pagelayer_menus_items_list)){ |
| 5204 |
return; |
| 5205 |
} |
| 5206 |
|
| 5207 |
var $elements = pagelayer_menus_items_list[menuID]; |
| 5208 |
var top_level_elements = []; |
| 5209 |
var children_elements = []; |
| 5210 |
|
| 5211 |
for($e in $elements){ |
| 5212 |
|
| 5213 |
// Make a referrer of each menu |
| 5214 |
pagelayer_menus_items_ref[$elements[$e]['ID']] = $elements[$e]; |
| 5215 |
|
| 5216 |
if ( pagelayer_empty( $elements[$e]['menu_item_parent'] ) ) { |
| 5217 |
top_level_elements.push($elements[$e]); |
| 5218 |
} else { |
| 5219 |
if(pagelayer_empty(children_elements[ $elements[$e]['menu_item_parent'] ])){ |
| 5220 |
children_elements[ $elements[$e]['menu_item_parent'] ] = []; |
| 5221 |
} |
| 5222 |
children_elements[ $elements[$e]['menu_item_parent'] ].push($elements[$e]); |
| 5223 |
} |
| 5224 |
} |
| 5225 |
|
| 5226 |
for(var i in top_level_elements){ |
| 5227 |
show_item(top_level_elements[i], children_elements, 0); |
| 5228 |
} |
| 5229 |
|
| 5230 |
} |
| 5231 |
|
| 5232 |
createItemsList(prop.c['val']); |
| 5233 |
|
| 5234 |
row.find('select.pagelayer-elp-select-menus').on('change', function(){ |
| 5235 |
|
| 5236 |
var ID = jQuery(this).val(); |
| 5237 |
|
| 5238 |
// Load Menu list |
| 5239 |
createItemsList(ID); |
| 5240 |
|
| 5241 |
_pagelayer_set_atts(row, ID);// Save and Render |
| 5242 |
|
| 5243 |
}); |
| 5244 |
|
| 5245 |
} |
| 5246 |
|
| 5247 |
// Select frame to upload media |
| 5248 |
function pagelayer_select_frame(tag, state){ |
| 5249 |
|
| 5250 |
var state = state || ''; |
| 5251 |
//console.log(state); |
| 5252 |
|
| 5253 |
var frame; |
| 5254 |
|
| 5255 |
switch(tag){ |
| 5256 |
|
| 5257 |
// Multi image selection frame |
| 5258 |
case 'multi_image': |
| 5259 |
|
| 5260 |
frame = wp.media({ |
| 5261 |
|
| 5262 |
id: 'pagelayer-wp-multi-image-library', |
| 5263 |
frame: 'post', |
| 5264 |
state: state, |
| 5265 |
title: pagelayer_l('frame_multi_image'), |
| 5266 |
multiple: true, |
| 5267 |
library: wp.media.query({type: 'image'}), |
| 5268 |
button: { |
| 5269 |
text: pagelayer_l('insert') |
| 5270 |
}, |
| 5271 |
|
| 5272 |
}); |
| 5273 |
|
| 5274 |
break; |
| 5275 |
|
| 5276 |
// Media selection frame |
| 5277 |
case 'media': |
| 5278 |
|
| 5279 |
frame = wp.media({ |
| 5280 |
|
| 5281 |
id: 'pagelayer-wp-media-library', |
| 5282 |
frame: 'post', |
| 5283 |
state: 'pagelayer-media', |
| 5284 |
title: pagelayer_l('frame_media'), |
| 5285 |
multiple: false, |
| 5286 |
states: [ |
| 5287 |
new wp.media.controller.Library({ |
| 5288 |
id: 'pagelayer-media', |
| 5289 |
title: pagelayer_l('frame_media'), |
| 5290 |
multiple: false, |
| 5291 |
date: true |
| 5292 |
}) |
| 5293 |
], |
| 5294 |
button: { |
| 5295 |
text: pagelayer_l('insert') |
| 5296 |
}, |
| 5297 |
|
| 5298 |
}); |
| 5299 |
|
| 5300 |
break; |
| 5301 |
|
| 5302 |
//Default frame(for image, video, audio) |
| 5303 |
default: |
| 5304 |
|
| 5305 |
frame = wp.media({ |
| 5306 |
|
| 5307 |
id: 'pagelayer-wp-'+tag+'-library', |
| 5308 |
frame: 'post', |
| 5309 |
state: 'pagelayer-'+tag, |
| 5310 |
title: pagelayer_l('frame_media'), |
| 5311 |
multiple: false, |
| 5312 |
library: wp.media.query({type: tag}), |
| 5313 |
states: [ |
| 5314 |
new wp.media.controller.Library({ |
| 5315 |
id: 'pagelayer-'+tag, |
| 5316 |
title: pagelayer_l('frame_media'), |
| 5317 |
library: wp.media.query( { type: tag } ), |
| 5318 |
multiple: false, |
| 5319 |
date: true |
| 5320 |
}) |
| 5321 |
], |
| 5322 |
button: { |
| 5323 |
text: pagelayer_l('insert') |
| 5324 |
}, |
| 5325 |
|
| 5326 |
}); |
| 5327 |
|
| 5328 |
break; |
| 5329 |
} |
| 5330 |
|
| 5331 |
frame.on({ |
| 5332 |
'menu:render:default': function(view){ |
| 5333 |
view.unset('insert'); |
| 5334 |
view.unset('gallery'); |
| 5335 |
view.unset('featured-image'); |
| 5336 |
view.unset('playlist'); |
| 5337 |
view.unset('video-playlist'); |
| 5338 |
}, |
| 5339 |
}, this); |
| 5340 |
|
| 5341 |
return frame; |
| 5342 |
|
| 5343 |
} |
| 5344 |
|
| 5345 |
// function to show default button |
| 5346 |
function pagelayer_show_default_button(row, prop, value){ |
| 5347 |
|
| 5348 |
// Default button is visible or not |
| 5349 |
if(row.find('.pagelayer-elp-default').attr('data_show')){ |
| 5350 |
return; |
| 5351 |
} |
| 5352 |
|
| 5353 |
// value is an object or not |
| 5354 |
if(typeof value == 'object'){ |
| 5355 |
// Checking value for NaN, empty and default. |
| 5356 |
|
| 5357 |
for(var i = 0; i < pagelayer_length(value); i++){ |
| 5358 |
if(value[i]!= prop.default && value[i] == value[i] && value[i] != ''){ |
| 5359 |
row.find('.pagelayer-elp-default').attr('data_show',true); |
| 5360 |
break; |
| 5361 |
} |
| 5362 |
} |
| 5363 |
}else{ |
| 5364 |
if('default' in prop && value!=prop.default){ |
| 5365 |
row.find('.pagelayer-elp-default').attr('data_show',true); |
| 5366 |
}else if(value!=prop.default && value==value && value!=''){ |
| 5367 |
row.find('.pagelayer-elp-default').attr('data_show',true); |
| 5368 |
} |
| 5369 |
} |
| 5370 |
} |
| 5371 |
|
| 5372 |
// Function which checks the properties to not to show default button |
| 5373 |
function pagelayer_properties_filter(property){ |
| 5374 |
var propTypeDefault = ['image', 'text', 'editor', 'textarea', 'checkbox', 'access', 'modal', 'group', 'radio', 'postCategory', 'postTags', 'postDate', 'gradient']; |
| 5375 |
|
| 5376 |
return (jQuery.inArray(property, propTypeDefault) == -1) |
| 5377 |
} |
| 5378 |
|
| 5379 |
// Link font family |
| 5380 |
function pagelayer_link_font_family(sEle){ |
| 5381 |
|
| 5382 |
var value = sEle.val(); |
| 5383 |
|
| 5384 |
if(sEle.val() == 'Default'){ |
| 5385 |
return; |
| 5386 |
} |
| 5387 |
|
| 5388 |
value = value.replace(' ', '+'); |
| 5389 |
var t = sEle.find("option:selected").attr('type'); |
| 5390 |
switch(t){ |
| 5391 |
case 'google': |
| 5392 |
if(jQuery('#pagelayer-google-fonts').length == 0){ |
| 5393 |
if(value==''){ |
| 5394 |
return; |
| 5395 |
} |
| 5396 |
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">'); |
| 5397 |
|
| 5398 |
}else{ |
| 5399 |
var url = jQuery('#pagelayer-google-fonts').attr('href'); |
| 5400 |
if(url.indexOf(value) == -1){ |
| 5401 |
url = url+'|'+value+':100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i'; |
| 5402 |
jQuery('#pagelayer-google-fonts').attr('href', url); |
| 5403 |
} |
| 5404 |
} |
| 5405 |
break; |
| 5406 |
|
| 5407 |
case 'custom': |
| 5408 |
if(!pagelayer_empty(jQuery('style[id='+value+'_plf]').length)){ |
| 5409 |
break; |
| 5410 |
} |
| 5411 |
jQuery.ajax({ |
| 5412 |
url: pagelayer_ajax_url+'&action=pagelayer_custom_font', |
| 5413 |
type: 'POST', |
| 5414 |
dataType: 'json', |
| 5415 |
data: { |
| 5416 |
'pagelayer_nonce': pagelayer_ajax_nonce, |
| 5417 |
'font_name': value |
| 5418 |
}, |
| 5419 |
success: function(data) { |
| 5420 |
if('style' in data){ |
| 5421 |
jQuery('body').append(data['style']); |
| 5422 |
} |
| 5423 |
} |
| 5424 |
}); |
| 5425 |
break; |
| 5426 |
} |
| 5427 |
} |
