| @@ -1,2544 +1,5422 @@ | ||
| 1 | - | |
| 2 | -// The active pagelayer element | |
| 3 | -var pagelayer_active = {}; | |
| 4 | - | |
| 5 | -// List of pagelayer icons | |
| 6 | -var pagelayer_icons = {}; | |
| 7 | - | |
| 8 | -// The inline editor | |
| 9 | -var pagelayer_editor = {}; | |
| 10 | - | |
| 11 | -// The active pagelayer element | |
| 12 | -var pagelayer_active_tab = {}; | |
| 13 | - | |
| 14 | -// Loads the Data | |
| 15 | -function pagelayer_data(jEle, clean){ | |
| 16 | - | |
| 17 | - var ret = new Object(); | |
| 18 | - | |
| 19 | - // Get the data | |
| 20 | - ret.tag = pagelayer_tag(jEle); | |
| 21 | - ret.id = jEle.attr('pagelayer-id'); | |
| 22 | - ret.$ = jEle; | |
| 23 | - | |
| 24 | - // Parse the attributes | |
| 25 | - ret.atts = new Object(); | |
| 26 | - ret.tmp = new Object(); | |
| 27 | - | |
| 28 | - jQuery.each(jEle[0].attributes, function(index, att){ | |
| 29 | - if(att.name.match(/pagelayer\-a\-/i)){ | |
| 30 | - ret.atts[att.name.substr(12)] = att.value; | |
| 31 | - } | |
| 32 | - | |
| 33 | - if(att.name.match(/pagelayer\-tmp\-/i)){ | |
| 34 | - ret.tmp[att.name.substr(14)] = att.value; | |
| 35 | - } | |
| 36 | - }); | |
| 37 | - | |
| 38 | - //console.log(ret.atts); | |
| 39 | - //console.log(ret.tmp); | |
| 40 | - | |
| 41 | - clean = clean || false; | |
| 42 | - | |
| 43 | - // Remove values which have 'req'. NOTE : 'show' ones will be allowed | |
| 44 | - if(clean){ | |
| 45 | - | |
| 46 | - var tag = ret.tag; | |
| 47 | - | |
| 48 | - // Anything to set ? | |
| 49 | - ret.set = {}; | |
| 50 | - | |
| 51 | - // All props | |
| 52 | - var all_props = pagelayer_shortcodes[tag]; | |
| 53 | - | |
| 54 | - // Loop through all props | |
| 55 | - for(var i in pagelayer_tabs){ | |
| 56 | - | |
| 57 | - var tab = pagelayer_tabs[i]; | |
| 58 | - | |
| 59 | - for(var section in all_props[tab]){ | |
| 60 | - | |
| 61 | - var props = section in pagelayer_shortcodes[tag] ? pagelayer_shortcodes[tag][section] : pagelayer_styles[section]; | |
| 62 | - | |
| 63 | - // In case of widgets its possible ! | |
| 64 | - if(pagelayer_empty(props)){ | |
| 65 | - continue; | |
| 66 | - } | |
| 67 | - | |
| 68 | - for(var x in props){ | |
| 69 | - | |
| 70 | - var prop = props[x]; | |
| 71 | - | |
| 72 | - // Are we to set this value ? | |
| 73 | - if(!(x in ret.atts) && 'default' in prop && !pagelayer_empty(prop['default'])){ | |
| 74 | - ret.set[x] = prop['default']; | |
| 75 | - } | |
| 76 | - | |
| 77 | - if(!('req' in prop)){ | |
| 78 | - continue; | |
| 79 | - } | |
| 80 | - | |
| 81 | - //console.log('[pagelayer_data] Cleaning :'+x); | |
| 82 | - | |
| 83 | - // List of considerations | |
| 84 | - var show = prop['req']; | |
| 85 | - | |
| 86 | - // We will hide by default | |
| 87 | - var toShow = true; | |
| 88 | - | |
| 89 | - for(var showParam in show){ | |
| 90 | - var reqval = show[showParam]; | |
| 91 | - var except = showParam.substr(0, 1) == '!' ? true : false; | |
| 92 | - showParam = except ? showParam.substr(1) : showParam; | |
| 93 | - var val = ret.atts[showParam] || ''; | |
| 94 | - | |
| 95 | - //console.log('Show '+x+' '+showParam+' '+reqval+' '+val); | |
| 96 | - | |
| 97 | - // Is the value not the same, then we can show | |
| 98 | - if(except){ | |
| 99 | - | |
| 100 | - if(typeof reqval == 'string' && reqval == val){ | |
| 101 | - toShow = false; | |
| 102 | - break; | |
| 103 | - } | |
| 104 | - | |
| 105 | - // Its an array and a value is found, then dont show | |
| 106 | - if(typeof reqval != 'string' && reqval.indexOf(val) > -1){ | |
| 107 | - toShow = false; | |
| 108 | - break; | |
| 109 | - } | |
| 110 | - | |
| 111 | - // The value must be equal | |
| 112 | - }else{ | |
| 113 | - | |
| 114 | - if(typeof reqval == 'string' && reqval != val){ | |
| 115 | - toShow = false; | |
| 116 | - break; | |
| 117 | - } | |
| 118 | - | |
| 119 | - // Its an array and no value is found, then dont show | |
| 120 | - if(typeof reqval != 'string' && reqval.indexOf(val) === -1){ | |
| 121 | - toShow = false; | |
| 122 | - break; | |
| 123 | - } | |
| 124 | - } | |
| 125 | - | |
| 126 | - } | |
| 127 | - | |
| 128 | - // Are we to show ? | |
| 129 | - if(!toShow){ | |
| 130 | - //console.log('Delete : '+x); | |
| 131 | - delete ret.atts[x]; | |
| 132 | - delete ret.atts[x+'_tablet'];// Any tablet and mobile values as well | |
| 133 | - delete ret.atts[x+'_mobile']; | |
| 134 | - delete ret.set[x]; | |
| 135 | - } | |
| 136 | - } | |
| 137 | - } | |
| 138 | - } | |
| 139 | - | |
| 140 | - } | |
| 141 | - | |
| 142 | - return ret; | |
| 143 | - | |
| 144 | -}; | |
| 145 | - | |
| 146 | -// Setup the properties | |
| 147 | -function pagelayer_elpd_setup(){ | |
| 148 | - | |
| 149 | - // The Dialag box of the element properties | |
| 150 | - // pagelayer-ELPD - Element Properties Dialog | |
| 151 | - pagelayer_elpd_html = '<div class="pagelayer-elpd-tabs">'+ | |
| 152 | - '<div class="pagelayer-elpd-tab" pagelayer-elpd-tab="settings" pagelayer-elpd-active-tab=1>Settings</div>'+ | |
| 153 | - //'<div class="pagelayer-elpd-tab" pagelayer-elpd-tab="styles">Style</div>'+ | |
| 154 | - '<div class="pagelayer-elpd-tab" pagelayer-elpd-tab="options">Options</div>'+ | |
| 155 | - '<div class="pagelayer-elpd-options">'+ | |
| 156 | - '<i class="fa fa-clone" />'+ | |
| 157 | - '<i class="fa fa-trash" />'+ | |
| 158 | - '</div>'+ | |
| 159 | - '</div>'+ | |
| 160 | - '<div class="pagelayer-elpd-body"></div>'+ | |
| 161 | - '<div class="pagelayer-elpd-holder"></div>'; | |
| 162 | - | |
| 163 | - // Create the dialog box | |
| 164 | - pagelayer.$$('#pagelayer-elpd').append(pagelayer_elpd_html); | |
| 165 | - pagelayer_elpd = pagelayer.$$('#pagelayer-elpd'); | |
| 166 | - | |
| 167 | - pagelayer.$$('.pagelayer-elpd-close').on('click', function(){ | |
| 168 | - pagelayer_elpd.hide(); | |
| 169 | - pagelayer.$$('.pagelayer-elpd-header').hide(); | |
| 170 | - pagelayer.$$('.pagelayer-shortcodes').show(); | |
| 171 | - pagelayer.$$('.pagelayer-logo').show(); | |
| 172 | - pagelayer.$$('.pagelayer-history').hide(); | |
| 173 | - pagelayer.$$('.pagelayer-elpd-body').removeAttr('pagelayer-element-id').empty(); | |
| 174 | - pagelayer_active = {}; | |
| 175 | - }); | |
| 176 | - | |
| 177 | - // Copy | |
| 178 | - pagelayer.$$('.pagelayer-elpd-options>.fa-clone').on('click', function(){ | |
| 179 | - pagelayer_copy_element(pagelayer_active.el.$); | |
| 180 | - }); | |
| 181 | - | |
| 182 | - // Delete | |
| 183 | - pagelayer.$$('.pagelayer-elpd-options>.fa-trash').on('click', function(){ | |
| 184 | - pagelayer_delete_element(pagelayer_active.el.$); | |
| 185 | - //pagelayer.$$('.pagelayer-elpd-close').click(); | |
| 186 | - }); | |
| 187 | - | |
| 188 | - // The tabs | |
| 189 | - pagelayer_elpd.find('.pagelayer-elpd-tab').on('click', function(){ | |
| 190 | - var attr = 'pagelayer-elpd-active-tab'; | |
| 191 | - pagelayer_elpd.find('.pagelayer-elpd-tab').each(function(){ | |
| 192 | - jQuery(this).removeAttr(attr); | |
| 193 | - }); | |
| 194 | - jQuery(this).attr(attr, 1); | |
| 195 | - | |
| 196 | - // Trigger the showing of rows | |
| 197 | - pagelayer_elpd_show_rows(); | |
| 198 | - }); | |
| 199 | - | |
| 200 | -}; | |
| 201 | - | |
| 202 | -// Open the properties | |
| 203 | -function pagelayer_elpd_open(jEle){ | |
| 204 | - | |
| 205 | - // Set pagelayer history FALSE | |
| 206 | - pagelayer.history_action = false; | |
| 207 | - | |
| 208 | - // Set the position of the element and show | |
| 209 | - //pagelayer_elpd.css('left', pagelayer_elpd_pos[0]); | |
| 210 | - //pagelayer_elpd.css('top', pagelayer_elpd_pos[1]); | |
| 211 | - pagelayer_elpd.show(); | |
| 212 | - pagelayer.$$('.pagelayer-elpd-header').show(); | |
| 213 | - pagelayer.$$('.pagelayer-logo').hide(); | |
| 214 | - pagelayer.$$('.pagelayer-shortcodes').hide(); | |
| 215 | - pagelayer.$$('.pagelayer-history').hide(); | |
| 216 | - | |
| 217 | - // The property holder | |
| 218 | - var holder = pagelayer.$$('.pagelayer-elpd-body'); | |
| 219 | - holder.html(' '); | |
| 220 | - | |
| 221 | - var el = pagelayer_elpd_generate(jEle, holder); | |
| 222 | - | |
| 223 | - // Set the active element | |
| 224 | - pagelayer_active.el = el; | |
| 225 | - | |
| 226 | - // Set the header | |
| 227 | - pagelayer.$$('.pagelayer-elpd-title').html('Edit '+pagelayer_shortcodes[el.tag]['name']); | |
| 228 | - | |
| 229 | - // Set pagelayer history TRUE | |
| 230 | - pagelayer.history_action = true; | |
| 231 | - | |
| 232 | -}; | |
| 233 | - | |
| 234 | -// Show the properties window | |
| 235 | -function pagelayer_elpd_generate(jEle, holder){ | |
| 236 | - | |
| 237 | - // Get the id, tag, atts, data, etc | |
| 238 | - var el = pagelayer_data(jEle); | |
| 239 | - //console.log(el); | |
| 240 | - | |
| 241 | - // Is it a valid type ? | |
| 242 | - if(pagelayer_empty(pagelayer_shortcodes[el.tag])){ | |
| 243 | - pagelayer_error('Could not find this shortcode : '+el.tag); | |
| 244 | - } | |
| 245 | - | |
| 246 | - // Set the holder | |
| 247 | - holder.attr('pagelayer-element-id', el.id); | |
| 248 | - //console.log(el.id); | |
| 249 | - | |
| 250 | - var all_props = pagelayer_shortcodes[el.tag]; | |
| 251 | - | |
| 252 | - var sec_open_class = 'pagelayer-elpd-section-open'; | |
| 253 | - | |
| 254 | - for(var i in pagelayer_tabs){ | |
| 255 | - var tab = pagelayer_tabs[i]; | |
| 256 | - var section_close = false;// First section always open | |
| 257 | - for(var section in all_props[tab]){ | |
| 258 | - //console.log(tab+' '+section); | |
| 259 | - | |
| 260 | - var props = section in pagelayer_shortcodes[el.tag] ? pagelayer_shortcodes[el.tag][section] : pagelayer_styles[section]; | |
| 261 | - //console.log(props); | |
| 262 | - | |
| 263 | - var sec = jQuery('<div class="pagelayer-elpd-section" section="'+section+'" pagelayer-show-tab="'+tab+'">'+ | |
| 264 | - '<div class="pagelayer-elpd-section-name '+sec_open_class+'"><i class="fa"></i>'+all_props[tab][section]+'</div>'+ | |
| 265 | - '<div class="pagelayer-elpd-section-rows"></div>'+ | |
| 266 | - '</div>'); | |
| 267 | - holder.append(sec); | |
| 268 | - | |
| 269 | - // The row holder | |
| 270 | - sec = sec.find('.pagelayer-elpd-section-rows'); | |
| 271 | - | |
| 272 | - // Close all except the first section | |
| 273 | - if(section_close){ | |
| 274 | - sec.hide().prev().removeClass(sec_open_class); | |
| 275 | - } | |
| 276 | - section_close = true; | |
| 277 | - | |
| 278 | - if('widget' in all_props && section == 'params'){ | |
| 279 | - pagelayer_elpd_widget_settings(el, sec, true); | |
| 280 | - continue; | |
| 281 | - } | |
| 282 | - | |
| 283 | - // Reset / Create the cache | |
| 284 | - for(var x in props){ | |
| 285 | - | |
| 286 | - props[x]['c'] = new Object(); | |
| 287 | - props[x]['c']['val'] = '';// Blank Val | |
| 288 | - props[x]['c']['name'] = x;// Add the Name of the row i.e. attribute of the element | |
| 289 | - | |
| 290 | - // Set default to value of attribute if any | |
| 291 | - if(x in el.atts){ | |
| 292 | - props[x]['c']['val'] = el.atts[x]; | |
| 293 | - } | |
| 294 | - | |
| 295 | - // Set element | |
| 296 | - props[x]['el'] = el; | |
| 297 | - | |
| 298 | - // Add the row | |
| 299 | - pagelayer_elpd_row(sec, tab, section, props, x); | |
| 300 | - | |
| 301 | - } | |
| 302 | - } | |
| 303 | - } | |
| 304 | - | |
| 305 | - /*// Set the default values in the PROPERTIES | |
| 306 | - var fn_load = window['pagelayer_load_elp_'+el.tag]; | |
| 307 | - | |
| 308 | - if(typeof fn_load == 'function'){ | |
| 309 | - fn_load(el, props); | |
| 310 | - }*/ | |
| 311 | - | |
| 312 | - // Section open close | |
| 313 | - holder.find('>.pagelayer-elpd-section>.pagelayer-elpd-section-name').on('click', function(){ | |
| 314 | - var _sec = jQuery(this); | |
| 315 | - var par = _sec.parent(); | |
| 316 | - | |
| 317 | - pagelayer_active_tab.id = el.id; | |
| 318 | - pagelayer_active_tab.section = par.attr('section'); | |
| 319 | - | |
| 320 | - // Get the active tab | |
| 321 | - var active_tab = pagelayer_elpd.find('[pagelayer-elpd-active-tab]').attr('pagelayer-elpd-tab'); | |
| 322 | - | |
| 323 | - // Close all but dont touch yourself | |
| 324 | - holder.children().each(function (){ | |
| 325 | - var curSec = jQuery(this); | |
| 326 | - if(par.is(curSec)) return;// Skip the current option | |
| 327 | - if(curSec.attr('pagelayer-show-tab') != active_tab) return;// Skip the non active tabs as is | |
| 328 | - curSec.find('.pagelayer-elpd-section-rows').hide().prev().removeClass(sec_open_class); | |
| 329 | - }); | |
| 330 | - | |
| 331 | - // Now toggle your self | |
| 332 | - par.find('.pagelayer-elpd-section-rows').toggle(); | |
| 333 | - | |
| 334 | - if(_sec.next().is(':visible')){ | |
| 335 | - _sec.addClass(sec_open_class); | |
| 336 | - }else{ | |
| 337 | - _sec.removeClass(sec_open_class); | |
| 338 | - } | |
| 339 | - | |
| 340 | - }); | |
| 341 | - | |
| 342 | - if(!pagelayer_empty(pagelayer_active_tab) && pagelayer_active_tab.id == el.id){ | |
| 343 | - holder.find('>[section='+pagelayer_active_tab.section+']>.pagelayer-elpd-section-name').click(); | |
| 344 | - } | |
| 345 | - | |
| 346 | - // Handle the showing of rows | |
| 347 | - pagelayer_elpd_show_rows(); | |
| 348 | - | |
| 349 | - return el; | |
| 350 | - | |
| 351 | -}; | |
| 352 | - | |
| 353 | -// Show a row | |
| 354 | -function pagelayer_elpd_row(holder, tab, section, props, name){ | |
| 355 | - | |
| 356 | - // The Prop | |
| 357 | - var prop = props[name]; | |
| 358 | - //console.log(tab+' '+name+' '+prop.el.tag); | |
| 359 | - | |
| 360 | - var fn = window['pagelayer_elp_'+prop['type']]; | |
| 361 | - | |
| 362 | - if(typeof fn == 'function'){ | |
| 363 | - | |
| 364 | - var row = jQuery('<div class="pagelayer-form-item" pagelayer-elp-name="'+name+'" />'); | |
| 365 | - | |
| 366 | - // Append the row | |
| 367 | - holder.append(row); | |
| 368 | - | |
| 369 | - var fn_ui = window['pagelayer_elp_'+prop['type']+'_ui']; | |
| 370 | - | |
| 371 | - // Is there a UI Handler ? | |
| 372 | - if(typeof fn_ui == 'function'){ | |
| 373 | - | |
| 374 | - fn_ui(row, prop); | |
| 375 | - | |
| 376 | - // Use the default mechanism | |
| 377 | - }else{ | |
| 378 | - | |
| 379 | - // The label | |
| 380 | - pagelayer_elp_label(row, prop); | |
| 381 | - | |
| 382 | - // The main property | |
| 383 | - fn(row, prop); | |
| 384 | - | |
| 385 | - // Is there a description ? | |
| 386 | - if(!pagelayer_empty(prop['desc'])){ | |
| 387 | - pagelayer_elp_desc(row, prop['desc']); | |
| 388 | - } | |
| 389 | - | |
| 390 | - } | |
| 391 | - | |
| 392 | - return row; | |
| 393 | - | |
| 394 | - } | |
| 395 | - | |
| 396 | -}; | |
| 397 | - | |
| 398 | -// Show the rows as per the active tab and also handle the rows that are supposed to be shown or not | |
| 399 | -function pagelayer_elpd_show_rows(){ | |
| 400 | - | |
| 401 | - //console.log('Called'); | |
| 402 | - | |
| 403 | - // Get the active tab | |
| 404 | - var active_tab = pagelayer_elpd.find('[pagelayer-elpd-active-tab]').attr('pagelayer-elpd-tab'); | |
| 405 | - | |
| 406 | - pagelayer_elpd.find('[pagelayer-show-tab]').each(function(){ | |
| 407 | - var sec = jQuery(this); | |
| 408 | - | |
| 409 | - // Is it the active tab ? | |
| 410 | - if(sec.attr('pagelayer-show-tab') != active_tab){ | |
| 411 | - sec.hide(); | |
| 412 | - }else{ | |
| 413 | - sec.show(); | |
| 414 | - } | |
| 415 | - }); | |
| 416 | - | |
| 417 | - // Find all Elements in the Property dialog and loop | |
| 418 | - pagelayer_elpd.find('[pagelayer-element-id]').each(function(){ | |
| 419 | - | |
| 420 | - var holder = jQuery(this); | |
| 421 | - var id = holder.attr('pagelayer-element-id'); | |
| 422 | - var jEle = pagelayer_ele_by_id(id); | |
| 423 | - var tag = pagelayer_tag(jEle); | |
| 424 | - //console.log('Main : '+id+' - '+tag); | |
| 425 | - //console.log(pagelayer_active); | |
| 426 | - | |
| 427 | - // All props | |
| 428 | - var all_props = pagelayer_shortcodes[tag]; | |
| 429 | - | |
| 430 | - // Loop through all props | |
| 431 | - for(var i in pagelayer_tabs){ | |
| 432 | - | |
| 433 | - var tab = pagelayer_tabs[i]; | |
| 434 | - | |
| 435 | - for(var section in all_props[tab]){ | |
| 436 | - | |
| 437 | - var props = section in pagelayer_shortcodes[tag] ? pagelayer_shortcodes[tag][section] : pagelayer_styles[section]; | |
| 438 | - | |
| 439 | - for(var x in props){ | |
| 440 | - | |
| 441 | - var prop = props[x]; | |
| 442 | - | |
| 443 | - // If the prop is a group, we continue | |
| 444 | - if(prop['type'] == 'group'){ | |
| 445 | - continue; | |
| 446 | - } | |
| 447 | - | |
| 448 | - // Find the row | |
| 449 | - var row = false; | |
| 450 | - | |
| 451 | - holder.find('[pagelayer-elp-name='+x+']').each(function(){ | |
| 452 | - var j = jQuery(this); | |
| 453 | - var _id = j.closest('[pagelayer-element-id]').attr('pagelayer-element-id'); | |
| 454 | - //console.log(_id+' = '+id); | |
| 455 | - | |
| 456 | - // Is the parent the same ? | |
| 457 | - if(_id == id){ | |
| 458 | - row = j; | |
| 459 | - } | |
| 460 | - }); | |
| 461 | - | |
| 462 | - // Do you have a show or hide ? | |
| 463 | - if(!row){ | |
| 464 | - //console.log('Not Found : '+x+' - '+id); | |
| 465 | - continue; | |
| 466 | - } | |
| 467 | - | |
| 468 | - // Is the row visible ? | |
| 469 | - if(row.closest('[pagelayer-show-tab]').attr('pagelayer-show-tab') != active_tab){ | |
| 470 | - row.hide(); | |
| 471 | - continue; | |
| 472 | - } | |
| 473 | - | |
| 474 | - // Now lets show or hide the element | |
| 475 | - if(!('req' in prop || 'show' in prop)){ | |
| 476 | - row.show(); | |
| 477 | - continue; | |
| 478 | - } | |
| 479 | - | |
| 480 | - // List of considerations | |
| 481 | - var show = {}; | |
| 482 | - | |
| 483 | - // We have both req and show, so lets just combine the values and then show | |
| 484 | - // NOTE : We need to make an array and not just merge the 2 as they are references | |
| 485 | - if('req' in prop && 'show' in prop){ | |
| 486 | - | |
| 487 | - // Add the req values | |
| 488 | - show = JSON.parse(JSON.stringify(prop['req'])); | |
| 489 | - | |
| 490 | - // Now the show values need to be looped | |
| 491 | - for(var t in prop['show']){ | |
| 492 | - show[t] = prop['show'][t]; | |
| 493 | - } | |
| 494 | - | |
| 495 | - }else{ | |
| 496 | - show = 'req' in prop ? prop['req'] : prop['show']; | |
| 497 | - } | |
| 498 | - | |
| 499 | - // We will hide by default | |
| 500 | - var toShow = true; | |
| 501 | - | |
| 502 | - for(var showParam in show){ | |
| 503 | - var reqval = show[showParam]; | |
| 504 | - var except = showParam.substr(0, 1) == '!' ? true : false; | |
| 505 | - showParam = except ? showParam.substr(1) : showParam; | |
| 506 | - var val = pagelayer_get_att(jEle, showParam) || ''; | |
| 507 | - | |
| 508 | - //console.log('Show '+x+' '+showParam+' '+reqval+' '+val); | |
| 509 | - | |
| 510 | - // Is the value not the same, then we can show | |
| 511 | - if(except){ | |
| 512 | - | |
| 513 | - if(typeof reqval == 'string' && reqval == val){ | |
| 514 | - toShow = false; | |
| 515 | - break; | |
| 516 | - } | |
| 517 | - | |
| 518 | - // Its an array and a value is found, then dont show | |
| 519 | - if(typeof reqval != 'string' && reqval.indexOf(val) > -1){ | |
| 520 | - toShow = false; | |
| 521 | - break; | |
| 522 | - } | |
| 523 | - | |
| 524 | - // The value must be equal | |
| 525 | - }else{ | |
| 526 | - | |
| 527 | - if(typeof reqval == 'string' && reqval != val){ | |
| 528 | - toShow = false; | |
| 529 | - break; | |
| 530 | - } | |
| 531 | - | |
| 532 | - // Its an array and no value is found, then dont show | |
| 533 | - if(typeof reqval != 'string' && reqval.indexOf(val) === -1){ | |
| 534 | - toShow = false; | |
| 535 | - break; | |
| 536 | - } | |
| 537 | - } | |
| 538 | - } | |
| 539 | - | |
| 540 | - // Are we to show ? | |
| 541 | - if(toShow){ | |
| 542 | - row.show(); | |
| 543 | - }else{ | |
| 544 | - row.hide(); | |
| 545 | - } | |
| 546 | - | |
| 547 | - } | |
| 548 | - } | |
| 549 | - } | |
| 550 | - | |
| 551 | - }); | |
| 552 | - | |
| 553 | -}; | |
| 554 | - | |
| 555 | -var pagelayer_widget_timer; | |
| 556 | -var pagelayer_widget_cache = {}; | |
| 557 | - | |
| 558 | -// Load the widget settings | |
| 559 | -function pagelayer_elpd_widget_settings(el, sec, onfocus){ | |
| 560 | - | |
| 561 | - var show_form = function(html){ | |
| 562 | - | |
| 563 | - sec.html('<form class="pagelayer-widgets-form">'+html+'</form>'); | |
| 564 | - | |
| 565 | - // Handle on form data change | |
| 566 | - sec.find('form :input').on('change', function(){ | |
| 567 | - //console.log('Changed !'); | |
| 568 | - | |
| 569 | - // Clear any previous timeout | |
| 570 | - clearTimeout(pagelayer_widget_timer); | |
| 571 | - | |
| 572 | - // Set a timer for constant change | |
| 573 | - pagelayer_widget_timer = setTimeout(function(){ | |
| 574 | - pagelayer_elpd_widget_settings(el, sec); | |
| 575 | - //console.log('Calling'); | |
| 576 | - }, 500); | |
| 577 | - | |
| 578 | - }); | |
| 579 | - } | |
| 580 | - | |
| 581 | - // Is it onfocus ? | |
| 582 | - onfocus = onfocus || false; | |
| 583 | - | |
| 584 | - // Its an onfocus | |
| 585 | - if(onfocus && el.id in pagelayer_widget_cache){ | |
| 586 | - show_form(pagelayer_widget_cache[el.id]); | |
| 587 | - return true; | |
| 588 | - } | |
| 589 | - | |
| 590 | - var post = {}; | |
| 591 | - post['action'] = 'pagelayer_wp_widget'; | |
| 592 | - post['nonce'] = pagelayer_ajax_nonce; | |
| 593 | - post['tag'] = el.tag; | |
| 594 | - post['pagelayer-id'] = el.id; | |
| 595 | - | |
| 596 | - // Any atts ? | |
| 597 | - if('widget_data' in el.atts){ | |
| 598 | - post['widget_data'] = el.atts['widget_data']; | |
| 599 | - } | |
| 600 | - | |
| 601 | - // Post any existing data | |
| 602 | - var form = sec.find('form'); | |
| 603 | - if(form.length > 0){ | |
| 604 | - //console.log(form.serialize()); | |
| 605 | - post['values'] = form.serialize(); | |
| 606 | - } | |
| 607 | - | |
| 608 | - jQuery.ajax({ | |
| 609 | - url: pagelayer_ajax_url, | |
| 610 | - type: 'post', | |
| 611 | - data: post, | |
| 612 | - success: function(data) { | |
| 613 | - //console.log('Widget Data');console.log(data); | |
| 614 | - | |
| 615 | - // Show the form | |
| 616 | - if('form' in data){ | |
| 617 | - show_form(data['form']); | |
| 618 | - | |
| 619 | - // Store in cache | |
| 620 | - pagelayer_widget_cache[el.id] = data['form']; | |
| 621 | - } | |
| 622 | - | |
| 623 | - // Show the content | |
| 624 | - if('html' in data){ | |
| 625 | - el.$.html(data['html']); | |
| 626 | - pagelayer_sc_render(el.$);// Re-Render the CSS | |
| 627 | - } | |
| 628 | - | |
| 629 | - // Any set attributes ? | |
| 630 | - if('widget_data' in data){ | |
| 631 | - pagelayer_set_atts(el.$, 'widget_data', JSON.stringify(data['widget_data'])); | |
| 632 | - } | |
| 633 | - | |
| 634 | - }, | |
| 635 | - fail: function(data) { | |
| 636 | - alert('Some error occured in getting the widget data'); | |
| 637 | - } | |
| 638 | - }); | |
| 639 | - | |
| 640 | -} | |
| 641 | - | |
| 642 | -// Will set the attribute and also render | |
| 643 | -function _pagelayer_set_atts(row, val, no_default){ | |
| 644 | - var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id'); | |
| 645 | - var jEle = jQuery('[pagelayer-id='+id+']'); | |
| 646 | - | |
| 647 | - // Is there a unit ? | |
| 648 | - var uEle = row.find('.pagelayer-elp-units'); | |
| 649 | - if(uEle.length > 0){ | |
| 650 | - var unit = uEle.find('[selected]').html(); | |
| 651 | - if(Array.isArray(val)){ | |
| 652 | - for(var i in val){ | |
| 653 | - if(val[i].length < 1){ | |
| 654 | - continue; | |
| 655 | - } | |
| 656 | - val[i] = val[i]+unit; | |
| 657 | - } | |
| 658 | - }else{ | |
| 659 | - val = val+unit; | |
| 660 | - } | |
| 661 | - } | |
| 662 | - | |
| 663 | - // Are we in another mode ? | |
| 664 | - var mEle = row.find('.pagelayer-elp-screen'); | |
| 665 | - var mode = mEle.length > 0 && pagelayer_get_screen_mode() != 'desktop' ? '_'+pagelayer_get_screen_mode() : ''; | |
| 666 | - | |
| 667 | - pagelayer_set_atts(jEle, row.attr('pagelayer-elp-name')+mode, val); | |
| 668 | - | |
| 669 | - // Are we to skip setting defaults ? | |
| 670 | - no_default = no_default || false; | |
| 671 | - if(!no_default){ | |
| 672 | - | |
| 673 | - // We need to set defaults for dependents | |
| 674 | - var hasSet = pagelayer_set_default_atts(jEle, 5); | |
| 675 | - | |
| 676 | - // We need to reopen the left panel | |
| 677 | - // Note : If two simultaneous calls are made, then this will cause problems | |
| 678 | - // 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 | |
| 679 | - if(hasSet){ | |
| 680 | - pagelayer_elpd_open(jEle); | |
| 681 | - } | |
| 682 | - } | |
| 683 | - | |
| 684 | - // Render | |
| 685 | - pagelayer_sc_render(jEle); | |
| 686 | -}; | |
| 687 | - | |
| 688 | -// Will set the attribute but not render | |
| 689 | -function _pagelayer_set_tmp_atts(row, suffix, val){ | |
| 690 | - var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id'); | |
| 691 | - var jEle = jQuery('[pagelayer-id='+id+']'); | |
| 692 | - pagelayer_set_tmp_atts(jEle, row.attr('pagelayer-elp-name')+'-'+suffix, val); | |
| 693 | -}; | |
| 694 | - | |
| 695 | -// Get the tmp att | |
| 696 | -function _pagelayer_get_tmp_att(row, suffix){ | |
| 697 | - var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id'); | |
| 698 | - var jEle = jQuery('[pagelayer-id='+id+']'); | |
| 699 | - return pagelayer_get_tmp_att(jEle, row.attr('pagelayer-elp-name')+'-'+suffix); | |
| 700 | -}; | |
| 701 | - | |
| 702 | -// Create the Label | |
| 703 | -function pagelayer_elp_label(row, prop){ | |
| 704 | - row.append('<div class="pagelayer-elp-label-div"><label class="pagelayer-elp-label">'+prop['label']+'</label></div>'); | |
| 705 | - | |
| 706 | - var label = row.children('.pagelayer-elp-label-div'); | |
| 707 | - | |
| 708 | - // Do we have screen ? | |
| 709 | - if('screen' in prop){ | |
| 710 | - var screen = '<div class="pagelayer-elp-screen">'+ | |
| 711 | - '<i class="fa fa-desktop" />'+ | |
| 712 | - '<i class="fa fa-tablet" />'+ | |
| 713 | - '<i class="fa fa-mobile" />'+ | |
| 714 | - '</div>'; | |
| 715 | - label.append(screen); | |
| 716 | - | |
| 717 | - // Set screen mode on change | |
| 718 | - label.find('.fa').on('click', function(){ | |
| 719 | - var mode = 'desktop'; | |
| 720 | - var jEle = jQuery(this); | |
| 721 | - | |
| 722 | - // Tablet ? | |
| 723 | - if(jEle.hasClass('fa-tablet')){ | |
| 724 | - mode = 'tablet'; | |
| 725 | - } | |
| 726 | - | |
| 727 | - // Mobile ? | |
| 728 | - if(jEle.hasClass('fa-mobile')){ | |
| 729 | - mode = 'mobile'; | |
| 730 | - } | |
| 731 | - | |
| 732 | - pagelayer_set_screen_mode(mode); | |
| 733 | - | |
| 734 | - }); | |
| 735 | - | |
| 736 | - // On change of screen handle the values | |
| 737 | - label.find('.pagelayer-elp-screen').on('pagelayer-screen-changed', function(e){ | |
| 738 | - | |
| 739 | - var mode = pagelayer_get_screen_mode(); | |
| 740 | - var modes = {desktop: '', tablet: '_tablet', mobile: '_mobile'}; | |
| 741 | - | |
| 742 | - // Get the current current new val | |
| 743 | - prop.c['val'] = pagelayer_get_att(prop.el.$, prop.c['name']+modes[mode]); | |
| 744 | - | |
| 745 | - // Handle the amount | |
| 746 | - if(pagelayer_empty(prop.c['val'])){ | |
| 747 | - prop.c['val'] = ''; | |
| 748 | - } | |
| 749 | - | |
| 750 | - // Remove the siblings | |
| 751 | - label.siblings().each(function(){ | |
| 752 | - var j = jQuery(this); | |
| 753 | - | |
| 754 | - if(j.hasClass('pagelayer-elp-desc')){ | |
| 755 | - return; | |
| 756 | - } | |
| 757 | - | |
| 758 | - j.remove(); | |
| 759 | - }); | |
| 760 | - | |
| 761 | - // Create the vals again | |
| 762 | - var fn = window['pagelayer_elp_'+prop['type']]; | |
| 763 | - | |
| 764 | - // The main property | |
| 765 | - fn(row, prop); | |
| 766 | - | |
| 767 | - }) | |
| 768 | - | |
| 769 | - } | |
| 770 | - | |
| 771 | - // Do we have units ? | |
| 772 | - if('units' in prop){ | |
| 773 | - | |
| 774 | - var units = ''; | |
| 775 | - var tmp_val = prop.c['val']; | |
| 776 | - var default_unit = 0; | |
| 777 | - | |
| 778 | - // Get unit from value | |
| 779 | - if(!(pagelayer_empty(tmp_val))){ | |
| 780 | - | |
| 781 | - for(var i in prop['units']){ | |
| 782 | - if(tmp_val.search(prop['units'][i]) != -1){ | |
| 783 | - default_unit = i; | |
| 784 | - } | |
| 785 | - } | |
| 786 | - } | |
| 787 | - | |
| 788 | - for(var i in prop['units']){ | |
| 789 | - units += '<span '+(i == default_unit ? 'selected' : '')+'>'+prop['units'][i]+'</span>'; | |
| 790 | - } | |
| 791 | - | |
| 792 | - label.append('<div class="pagelayer-elp-units">'+units+'</div>'); | |
| 793 | - | |
| 794 | - // Set unit on change | |
| 795 | - label.find('.pagelayer-elp-units span').on('click', function(){ | |
| 796 | - | |
| 797 | - label.find('.pagelayer-elp-units span').each(function(){ | |
| 798 | - jQuery(this).removeAttr('selected'); | |
| 799 | - }); | |
| 800 | - | |
| 801 | - jQuery(this).attr('selected', 1); | |
| 802 | - | |
| 803 | - }); | |
| 804 | - | |
| 805 | - } | |
| 806 | - | |
| 807 | -}; | |
| 808 | - | |
| 809 | -// Create the Description | |
| 810 | -function pagelayer_elp_desc(row, label){ | |
| 811 | - //row.append('<div class="pagelayer-elp-desc">'+label+'</div>'); | |
| 812 | -}; | |
| 813 | - | |
| 814 | -// The Text property | |
| 815 | -function pagelayer_elp_text(row, prop){ | |
| 816 | - | |
| 817 | - var div = '<div class="pagelayer-elp-text-div">'+ | |
| 818 | - '<input type="text" class="pagelayer-elp-text" name="'+prop.c['name']+'" value="'+prop.c['val']+'"></input>'+ | |
| 819 | - '</div>'; | |
| 820 | - | |
| 821 | - row.append(div); | |
| 822 | - | |
| 823 | - row.find('input').on('input', function(){ | |
| 824 | - _pagelayer_set_atts(row, pagelayer_trim(jQuery(this).val()));// Save and Render | |
| 825 | - }); | |
| 826 | - | |
| 827 | -}; | |
| 828 | - | |
| 829 | -// The Select property | |
| 830 | -function pagelayer_elp_select(row, prop){ | |
| 831 | - | |
| 832 | - var options = ''; | |
| 833 | - var option = function(val, lang){ | |
| 834 | - var selected = (val != prop.c['val']) ? '' : 'selected="selected"'; | |
| 835 | - return '<option class="pagelayer-elp-select-option" value="'+val+'" '+selected+'>'+lang+'</option>'; | |
| 836 | - } | |
| 837 | - | |
| 838 | - for (x in prop['list']){ | |
| 839 | - | |
| 840 | - // Single item | |
| 841 | - if(typeof prop['list'][x] == 'string'){ | |
| 842 | - options += option(x, prop['list'][x]); | |
| 843 | - | |
| 844 | - // Groups | |
| 845 | - }else{ | |
| 846 | - options += '<optgroup label="'+x+'">'; | |
| 847 | - | |
| 848 | - for(var y in prop['list'][x]){ | |
| 849 | - options += option(y, prop['list'][x][y]); | |
| 850 | - } | |
| 851 | - | |
| 852 | - options += '</optgroup>'; | |
| 853 | - } | |
| 854 | - } | |
| 855 | - | |
| 856 | - var div = '<div class="pagelayer-elp-select-div pagelayer-elp-pos-rel">'+ | |
| 857 | - '<select class="pagelayer-elp-select pagelayer-select" name="'+prop.c['name']+'">'+options+'</select>'+ | |
| 858 | - '</div>'; | |
| 859 | - | |
| 860 | - row.append(div); | |
| 861 | - | |
| 862 | - row.find('select').on('change', function(){ | |
| 863 | - | |
| 864 | - var sEle = jQuery(this); | |
| 865 | - | |
| 866 | - if(sEle.attr('name') == "animation"){ | |
| 867 | - _pagelayer_trigger_anim(row, sEle.val()); | |
| 868 | - } | |
| 869 | - | |
| 870 | - _pagelayer_set_atts(row, sEle.val());// Save and Render | |
| 871 | - | |
| 872 | - }); | |
| 873 | - | |
| 874 | -} | |
| 875 | - | |
| 876 | -function _pagelayer_trigger_anim(row, anim){ | |
| 877 | - var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id'); | |
| 878 | - var classList = $('[pagelayer-id='+id+']').attr('class'); | |
| 879 | - classList = classList.split(/\s+/); | |
| 880 | - //console.log(classList); | |
| 881 | - var options = []; | |
| 882 | - row.find('option').each(function(){ | |
| 883 | - var found = $.inArray( $(this).val(), classList ); | |
| 884 | - if( found != -1){ | |
| 885 | - //var found = $(this).val(); | |
| 886 | - $('[pagelayer-id='+id+']').removeClass($(this).val()); | |
| 887 | - //break; | |
| 888 | - } | |
| 889 | - //options.push($(this).val()); | |
| 890 | - }); | |
| 891 | - $('[pagelayer-id='+id+']').removeClass('pagelayer-wow').addClass(anim + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ | |
| 892 | - $(this).removeClass(anim+ ' animated'); | |
| 893 | - }); | |
| 894 | -} | |
| 895 | - | |
| 896 | -// The Checkbox property | |
| 897 | -function pagelayer_elp_checkbox(row, prop){ | |
| 898 | - | |
| 899 | - var div = '<div class="pagelayer-elp-checkbox-div">'+ | |
| 900 | - '<input type="checkbox" name="'+prop.c['name']+'" class="pagelayer-elp-checkbox" />'+ | |
| 901 | - '</div>'; | |
| 902 | - | |
| 903 | - row.append(div); | |
| 904 | - | |
| 905 | - if(prop.c['val'].length > 0){ | |
| 906 | - row.find('input').attr('checked', 'checked'); | |
| 907 | - }else{ | |
| 908 | - row.find('input').removeAttr('checked'); | |
| 909 | - } | |
| 910 | - | |
| 911 | - // When the change is called | |
| 912 | - row.find('input').on('change', function(){ | |
| 913 | - | |
| 914 | - // We set to string true or false | |
| 915 | - var val = jQuery(this).is(':checked') ? 'true' : ''; | |
| 916 | - | |
| 917 | - _pagelayer_set_atts(row, val);// Save and Render | |
| 918 | - }); | |
| 919 | - | |
| 920 | -} | |
| 921 | - | |
| 922 | -// The Radio property | |
| 923 | -function pagelayer_elp_radio(row, prop){ | |
| 924 | - | |
| 925 | - var active = 'pagelayer-elp-radio-active'; | |
| 926 | - var div = '<div class="pagelayer-elp-radio-div">'; | |
| 927 | - | |
| 928 | - for(var x in prop.list){ | |
| 929 | - var addclass = (prop.c['val'] == x) ? active : ''; | |
| 930 | - div += '<a class="pagelayer-elp-radio '+addclass+'" val="'+x+'">'+prop.list[x]+'</a>'; | |
| 931 | - } | |
| 932 | - | |
| 933 | - div += '<div>'; | |
| 934 | - | |
| 935 | - row.append(div); | |
| 936 | - | |
| 937 | - row.find('.pagelayer-elp-radio').each(function(){ | |
| 938 | - | |
| 939 | - jQuery(this).on('click', function (){ | |
| 940 | - | |
| 941 | - // Remove existing active class | |
| 942 | - jQuery(this).parent().find('.'+active).removeClass(active); | |
| 943 | - | |
| 944 | - // Set active | |
| 945 | - jQuery(this).addClass(active); | |
| 946 | - | |
| 947 | - _pagelayer_set_atts(row, jQuery(this).attr('val'));// Save and Render | |
| 948 | - | |
| 949 | - }); | |
| 950 | - | |
| 951 | - }); | |
| 952 | - | |
| 953 | -} | |
| 954 | - | |
| 955 | -// The Image Property | |
| 956 | -function pagelayer_elp_image(row, prop){ | |
| 957 | - | |
| 958 | - var style = ''; | |
| 959 | - var tmp = prop.c['name']+'-url'; | |
| 960 | - var def = pagelayer_url+'/images/default-image.png'; | |
| 961 | - var src = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : def; | |
| 962 | - | |
| 963 | - // Set temp image | |
| 964 | - if(!(tmp in prop.el.tmp)){ | |
| 965 | - _pagelayer_set_tmp_atts(row, 'url', def); | |
| 966 | - _pagelayer_set_atts(row, def); | |
| 967 | - } | |
| 968 | - | |
| 969 | - // Do we have a URL set ? | |
| 970 | - style = 'style="background-image:url(\''+src+'\')"'; | |
| 971 | - | |
| 972 | - var div = '<div class="pagelayer-elp-image-div">'+ | |
| 973 | - '<div class="pagelayer-elp-image" '+style+'></div>'+ | |
| 974 | - '<div class="pagelayer-elp-image-delete"><i class="fa fa-trash" /></div>'+ | |
| 975 | - '</div>'; | |
| 976 | - | |
| 977 | - row.append(div); | |
| 978 | - | |
| 979 | - // Set an Image | |
| 980 | - row.find('.pagelayer-elp-image').on('click', function(){ | |
| 981 | - | |
| 982 | - var button = jQuery(this); | |
| 983 | - | |
| 984 | - // Load the frame | |
| 985 | - var frame = pagelayer_select_frame('image'); | |
| 986 | - | |
| 987 | - // On select update the stuff | |
| 988 | - frame.on({ | |
| 989 | - 'select': function(){ | |
| 990 | - | |
| 991 | - var state = frame.state(); | |
| 992 | - var id = url = ''; | |
| 993 | - | |
| 994 | - // External URL | |
| 995 | - if('props' in state){ | |
| 996 | - | |
| 997 | - id = url = state.props.attributes.url; | |
| 998 | - | |
| 999 | - // Internal from gallery | |
| 1000 | - }else{ | |
| 1001 | - | |
| 1002 | - var attachment = frame.state().get('selection').first().toJSON(); | |
| 1003 | - //console.log(attachment); | |
| 1004 | - | |
| 1005 | - // Set the new ID and URL | |
| 1006 | - id = attachment.id; | |
| 1007 | - url = attachment.url; | |
| 1008 | - | |
| 1009 | - // Keep a list of all sizes | |
| 1010 | - for(var x in attachment.sizes){ | |
| 1011 | - _pagelayer_set_tmp_atts(row, x+'-url', attachment.sizes[x].url); | |
| 1012 | - } | |
| 1013 | - | |
| 1014 | - } | |
| 1015 | - | |
| 1016 | - // Update thumbnail | |
| 1017 | - button.css('background-image', 'url(\''+url+'\')'); | |
| 1018 | - | |
| 1019 | - // Save and render | |
| 1020 | - _pagelayer_set_tmp_atts(row, 'url', url); | |
| 1021 | - _pagelayer_set_atts(row, id); | |
| 1022 | - | |
| 1023 | - }, | |
| 1024 | - // On open select the appropriate images in the media manager | |
| 1025 | - 'open': function() { | |
| 1026 | - var selection = frame.state().get('selection'); | |
| 1027 | - var wp_id = prop.el.$.attr('pagelayer-a-id'); | |
| 1028 | - selection.reset( wp_id ? [ wp.media.attachment( wp_id ) ] : [] ); | |
| 1029 | - } | |
| 1030 | - }); | |
| 1031 | - | |
| 1032 | - frame.open(button); | |
| 1033 | - | |
| 1034 | - return false; | |
| 1035 | - | |
| 1036 | - }); | |
| 1037 | - | |
| 1038 | - // Delete this | |
| 1039 | - row.find('.pagelayer-elp-image-delete').on('click', function(){ | |
| 1040 | - | |
| 1041 | - // Update thumbnail | |
| 1042 | - row.find('.pagelayer-elp-image').css('background-image', 'url(\''+def+'\')'); | |
| 1043 | - | |
| 1044 | - // Set to blank and render | |
| 1045 | - _pagelayer_set_atts(row, '', true); | |
| 1046 | - | |
| 1047 | - _pagelayer_set_tmp_atts(row, 'url', def); | |
| 1048 | - _pagelayer_set_atts(row, def); | |
| 1049 | - | |
| 1050 | - }); | |
| 1051 | - | |
| 1052 | -} | |
| 1053 | - | |
| 1054 | -// The Multi Image Property | |
| 1055 | -function pagelayer_elp_multi_image(row, prop){ | |
| 1056 | - | |
| 1057 | - var div = '<div class="pagelayer-elp-multi_image-div">'+ | |
| 1058 | - '<center><button class="pagelayer-elp-button">'+pagelayer_l('Add Images')+'</button></center>'+ | |
| 1059 | - '<div class="pagelayer-elp-multi_image-thumbs"></div>'+ | |
| 1060 | - '</div>'; | |
| 1061 | - | |
| 1062 | - row.append(div); | |
| 1063 | - | |
| 1064 | - var tmp = prop.c['name']+'-urls'; | |
| 1065 | - var ids = new Array(); | |
| 1066 | - | |
| 1067 | - // Any IDs ? | |
| 1068 | - if(!pagelayer_empty(prop.c['val'])){ | |
| 1069 | - ids = prop.c['val'].split(','); | |
| 1070 | - //console.log(ids); | |
| 1071 | - } | |
| 1072 | - | |
| 1073 | - // Do we have a URL set ? | |
| 1074 | - if(ids.length > 0 && tmp in prop.el.tmp){ | |
| 1075 | - var images = JSON.parse(prop.el.tmp[tmp]); | |
| 1076 | - //console.log(images); | |
| 1077 | - | |
| 1078 | - for(var x in ids){ | |
| 1079 | - row.find('.pagelayer-elp-multi_image-thumbs').append('<div class="pagelayer-elp-multi_image-thumb" style="background-image: url(\''+images['i'+ids[x]]+'\');"></div>'); | |
| 1080 | - } | |
| 1081 | - } | |
| 1082 | - | |
| 1083 | - var pagelayer_init_frame = function(state){ | |
| 1084 | - | |
| 1085 | - var button = row.find('.pagelayer-elp-multi_image-thumbs'); | |
| 1086 | - //console.log(ids); | |
| 1087 | - | |
| 1088 | - // Load the frame | |
| 1089 | - var frame = pagelayer_select_frame('multi_image', 'gallery'+state); | |
| 1090 | - | |
| 1091 | - frame.on({ | |
| 1092 | - | |
| 1093 | - // Set the current selection if any | |
| 1094 | - 'open': function(){ | |
| 1095 | - | |
| 1096 | - // Do we have anything | |
| 1097 | - if(ids.length > 0){ | |
| 1098 | - | |
| 1099 | - var selection = ''; | |
| 1100 | - | |
| 1101 | - if(state == '-edit'){ | |
| 1102 | - selection = frame.state().get('library'); | |
| 1103 | - }else{ | |
| 1104 | - selection = frame.state().get('selection'); | |
| 1105 | - } | |
| 1106 | - | |
| 1107 | - // Add to current selection | |
| 1108 | - for(var x in ids){ | |
| 1109 | - attachment = wp.media.attachment(ids[x]); | |
| 1110 | - attachment.fetch(); | |
| 1111 | - selection.add(attachment ? [ attachment ] : [] ); | |
| 1112 | - } | |
| 1113 | - } | |
| 1114 | - }, | |
| 1115 | - | |
| 1116 | - // When images are selected | |
| 1117 | - 'update': function(selection){ | |
| 1118 | - | |
| 1119 | - //console.log(selection); | |
| 1120 | - | |
| 1121 | - // Remove thumbnails | |
| 1122 | - row.find('.pagelayer-elp-multi_image-thumb').remove(); | |
| 1123 | - | |
| 1124 | - //Fetch selected images | |
| 1125 | - var attachments = selection.map(function(attachment){ | |
| 1126 | - attachment.toJSON(); | |
| 1127 | - return attachment; | |
| 1128 | - }); | |
| 1129 | - | |
| 1130 | - //console.log(attachments); | |
| 1131 | - | |
| 1132 | - var img_ids = []; | |
| 1133 | - var urls = {}; | |
| 1134 | - var img_urls = {}; | |
| 1135 | - var titles = {}; | |
| 1136 | - var links = {}; | |
| 1137 | - var captions = {}; | |
| 1138 | - | |
| 1139 | - for(var i = 0; i < attachments.length; ++i){ | |
| 1140 | - | |
| 1141 | - // Add Id and urls to array | |
| 1142 | - var id = attachments[i].id; | |
| 1143 | - var _id = 'i'+id; | |
| 1144 | - img_ids.push(id); | |
| 1145 | - urls[_id] = attachments[i].attributes.url; | |
| 1146 | - | |
| 1147 | - // Create thumbnails | |
| 1148 | - button.append('<div class="pagelayer-elp-multi_image-thumb" style="background-image: url(\''+attachments[i].attributes.url+'\');"></div>'); | |
| 1149 | - | |
| 1150 | - //get title | |
| 1151 | - titles[_id] = attachments[i].attributes.title; | |
| 1152 | - links[_id] = attachments[i].attributes.link; | |
| 1153 | - captions[_id] = attachments[i].attributes.caption; | |
| 1154 | - | |
| 1155 | - // Create a URL | |
| 1156 | - img_urls[_id] = {} | |
| 1157 | - | |
| 1158 | - for(var x in attachments[i].attributes.sizes){ | |
| 1159 | - img_urls[_id][x] = attachments[i].attributes.sizes[x].url; | |
| 1160 | - } | |
| 1161 | - | |
| 1162 | - } | |
| 1163 | - | |
| 1164 | - //console.log(img_urls); | |
| 1165 | - | |
| 1166 | - // Save and render | |
| 1167 | - _pagelayer_set_tmp_atts(row, 'urls', JSON.stringify(urls)); | |
| 1168 | - _pagelayer_set_tmp_atts(row, 'all-urls', JSON.stringify(img_urls)); | |
| 1169 | - _pagelayer_set_tmp_atts(row, 'all-titles', JSON.stringify(titles)); | |
| 1170 | - _pagelayer_set_tmp_atts(row, 'all-links', JSON.stringify(links)); | |
| 1171 | - _pagelayer_set_tmp_atts(row, 'all-captions', JSON.stringify(captions)); | |
| 1172 | - _pagelayer_set_atts(row, img_ids); | |
| 1173 | - | |
| 1174 | - // Update the IDs incase the user clicks on it again | |
| 1175 | - ids = img_ids; | |
| 1176 | - | |
| 1177 | - } | |
| 1178 | - | |
| 1179 | - }); | |
| 1180 | - | |
| 1181 | - frame.open(button); | |
| 1182 | - | |
| 1183 | - return false; | |
| 1184 | - | |
| 1185 | - }; | |
| 1186 | - | |
| 1187 | - row.find('.pagelayer-elp-multi_image-thumbs').on('click', function(){ | |
| 1188 | - pagelayer_init_frame('-edit'); | |
| 1189 | - }); | |
| 1190 | - | |
| 1191 | - row.find('.pagelayer-elp-button').on('click', function(){ | |
| 1192 | - pagelayer_init_frame(ids.length > 0 ? '-library' : ''); | |
| 1193 | - }); | |
| 1194 | - | |
| 1195 | -} | |
| 1196 | - | |
| 1197 | -// The Video Property | |
| 1198 | -function pagelayer_elp_video(row, prop){ | |
| 1199 | - | |
| 1200 | - var tmp = prop.c['name']+'-url'; | |
| 1201 | - var src = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : prop.c['val']; | |
| 1202 | - | |
| 1203 | - var div = '<div class="pagelayer-elp-video-div pagelayer-elp-input-icon">'+ | |
| 1204 | - '<input class="pagelayer-elp-video" name="'+prop.c['name']+'" type="text" value="'+src+'">'+ | |
| 1205 | - '<i class="fa fa-folder-open" />'+ | |
| 1206 | - '</input></div>'; | |
| 1207 | - | |
| 1208 | - row.append(div); | |
| 1209 | - | |
| 1210 | - row.find('.pagelayer-elp-video-div .fa').on('click', function(){ | |
| 1211 | - | |
| 1212 | - var button = jQuery(this); | |
| 1213 | - | |
| 1214 | - // Load the frame | |
| 1215 | - var frame = pagelayer_select_frame('video'); | |
| 1216 | - | |
| 1217 | - // On select update the stuff | |
| 1218 | - frame.on({ | |
| 1219 | - | |
| 1220 | - 'select': function(){ | |
| 1221 | - | |
| 1222 | - var state = frame.state(); | |
| 1223 | - var id = url = ''; | |
| 1224 | - | |
| 1225 | - // External URL | |
| 1226 | - if('props' in state){ | |
| 1227 | - | |
| 1228 | - id = url = state.props.attributes.url; | |
| 1229 | - | |
| 1230 | - // Internal from gallery | |
| 1231 | - }else{ | |
| 1232 | - | |
| 1233 | - var attachment = frame.state().get('selection').first().toJSON(); | |
| 1234 | - //console.log(attachment); | |
| 1235 | - | |
| 1236 | - id = attachment.id; | |
| 1237 | - url = attachment.url; | |
| 1238 | - | |
| 1239 | - } | |
| 1240 | - | |
| 1241 | - // Update URL | |
| 1242 | - button.prev().val(url); | |
| 1243 | - | |
| 1244 | - // Save and render | |
| 1245 | - _pagelayer_set_tmp_atts(row, 'url', url); | |
| 1246 | - _pagelayer_set_atts(row, id); | |
| 1247 | - | |
| 1248 | - } | |
| 1249 | - | |
| 1250 | - }); | |
| 1251 | - | |
| 1252 | - frame.open(button); | |
| 1253 | - | |
| 1254 | - return false; | |
| 1255 | - | |
| 1256 | - }); | |
| 1257 | - | |
| 1258 | - // Edited the video URL directly | |
| 1259 | - row.find('.pagelayer-elp-video').on('change', function(){ | |
| 1260 | - | |
| 1261 | - var input = jQuery(this); | |
| 1262 | - | |
| 1263 | - // Set the new URL | |
| 1264 | - _pagelayer_set_tmp_atts(row, 'url', input.val()); | |
| 1265 | - _pagelayer_set_atts(row, input.val()); | |
| 1266 | - | |
| 1267 | - }); | |
| 1268 | - | |
| 1269 | -} | |
| 1270 | - | |
| 1271 | - | |
| 1272 | -// The Audio Property | |
| 1273 | -function pagelayer_elp_audio(row, prop){ | |
| 1274 | - | |
| 1275 | - var tmp = prop.c['name']+'-url'; | |
| 1276 | - var src = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : prop.c['val']; | |
| 1277 | - | |
| 1278 | - var div = '<div class="pagelayer-elp-audio-div pagelayer-elp-input-icon">'+ | |
| 1279 | - '<input class="pagelayer-elp-audio" name="'+prop.c['name']+'" type="text" value="'+src+'" />'+ | |
| 1280 | - '<i class="fa fa-bars" />'+ | |
| 1281 | - '</div>'; | |
| 1282 | - | |
| 1283 | - row.append(div); | |
| 1284 | - | |
| 1285 | - // Choose from media | |
| 1286 | - row.find('.pagelayer-elp-audio-div .fa').on('click', function(){ | |
| 1287 | - | |
| 1288 | - var button = jQuery(this); | |
| 1289 | - | |
| 1290 | - // Load the frame | |
| 1291 | - var frame = pagelayer_select_frame('audio'); | |
| 1292 | - | |
| 1293 | - frame.on({ | |
| 1294 | - | |
| 1295 | - 'select': function(){ | |
| 1296 | - | |
| 1297 | - var state = frame.state(); | |
| 1298 | - var id = url = ''; | |
| 1299 | - | |
| 1300 | - // External URL | |
| 1301 | - if('props' in state){ | |
| 1302 | - | |
| 1303 | - id = url = state.props.attributes.url; | |
| 1304 | - | |
| 1305 | - // Internal from gallery | |
| 1306 | - }else{ | |
| 1307 | - | |
| 1308 | - var attachment = frame.state().get('selection').first().toJSON(); | |
| 1309 | - //console.log(attachment); | |
| 1310 | - | |
| 1311 | - id = attachment.id; | |
| 1312 | - url = attachment.url; | |
| 1313 | - | |
| 1314 | - } | |
| 1315 | - | |
| 1316 | - // Update URL | |
| 1317 | - button.prev().val(url); | |
| 1318 | - | |
| 1319 | - // Save and render | |
| 1320 | - _pagelayer_set_tmp_atts(row, 'url', url); | |
| 1321 | - _pagelayer_set_atts(row, id); | |
| 1322 | - | |
| 1323 | - } | |
| 1324 | - | |
| 1325 | - }); | |
| 1326 | - | |
| 1327 | - frame.open(button); | |
| 1328 | - | |
| 1329 | - return false; | |
| 1330 | - | |
| 1331 | - }); | |
| 1332 | - | |
| 1333 | - // Edited the media URL directly | |
| 1334 | - row.find('.pagelayer-elp-audio').on('change', function(){ | |
| 1335 | - | |
| 1336 | - var input = jQuery(this); | |
| 1337 | - | |
| 1338 | - // Set the new URL | |
| 1339 | - _pagelayer_set_tmp_atts(row, 'url', input.val()); | |
| 1340 | - _pagelayer_set_atts(row, input.val()); | |
| 1341 | - | |
| 1342 | - }); | |
| 1343 | - | |
| 1344 | -} | |
| 1345 | - | |
| 1346 | -// The Media Property | |
| 1347 | -function pagelayer_elp_media(row, prop){ | |
| 1348 | - | |
| 1349 | - var tmp = prop.c['name']+'-url'; | |
| 1350 | - var src = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : prop.c['val']; | |
| 1351 | - | |
| 1352 | - var div = '<div class="pagelayer-elp-media-div pagelayer-elp-input-icon">'+ | |
| 1353 | - '<input class="pagelayer-elp-media" value="'+src+'" type="text" />'+ | |
| 1354 | - '<i class="fa fa-bars" />'+ | |
| 1355 | - '</div>'; | |
| 1356 | - | |
| 1357 | - row.append(div); | |
| 1358 | - | |
| 1359 | - row.find('.pagelayer-elp-media-div .fa-bars').on('click', function(){ | |
| 1360 | - | |
| 1361 | - var button = jQuery(this); | |
| 1362 | - | |
| 1363 | - // Load the frame | |
| 1364 | - var frame = pagelayer_select_frame('media'); | |
| 1365 | - | |
| 1366 | - frame.on({ | |
| 1367 | - | |
| 1368 | - 'select': function(){ | |
| 1369 | - | |
| 1370 | - var state = frame.state(); | |
| 1371 | - var id = url = ''; | |
| 1372 | - | |
| 1373 | - // External URL | |
| 1374 | - if('props' in state){ | |
| 1375 | - | |
| 1376 | - id = url = state.props.attributes.url; | |
| 1377 | - | |
| 1378 | - // Internal from gallery | |
| 1379 | - }else{ | |
| 1380 | - | |
| 1381 | - var attachment = frame.state().get('selection').first().toJSON(); | |
| 1382 | - //console.log(attachment); | |
| 1383 | - | |
| 1384 | - id = attachment.id; | |
| 1385 | - url = attachment.url; | |
| 1386 | - | |
| 1387 | - } | |
| 1388 | - | |
| 1389 | - // Update URL | |
| 1390 | - button.prev().val(url); | |
| 1391 | - | |
| 1392 | - // Save and render | |
| 1393 | - _pagelayer_set_tmp_atts(row, 'url', url); | |
| 1394 | - _pagelayer_set_atts(row, id); | |
| 1395 | - | |
| 1396 | - } | |
| 1397 | - | |
| 1398 | - }); | |
| 1399 | - | |
| 1400 | - frame.open(button); | |
| 1401 | - | |
| 1402 | - return false; | |
| 1403 | - | |
| 1404 | - }); | |
| 1405 | - | |
| 1406 | - // Edited the media URL directly | |
| 1407 | - row.find('.pagelayer-elp-media').on('change', function(){ | |
| 1408 | - | |
| 1409 | - var input = jQuery(this); | |
| 1410 | - | |
| 1411 | - // Set the new URL | |
| 1412 | - _pagelayer_set_tmp_atts(row, 'url', input.val()); | |
| 1413 | - _pagelayer_set_atts(row, input.val()); | |
| 1414 | - | |
| 1415 | - }); | |
| 1416 | - | |
| 1417 | -} | |
| 1418 | - | |
| 1419 | -// The Slider Property | |
| 1420 | -function pagelayer_elp_slider(row, prop){ | |
| 1421 | - | |
| 1422 | - var div = '<div class="pagelayer-elp-slider-div">'+ | |
| 1423 | - '<input type="range" class="pagelayer-elp-slider" value="'+prop.c['val']+'" min="'+prop['min']+'" max="'+prop['max']+'" step="'+prop['step']+'"/>'+ | |
| 1424 | - '<input type="number" class="pagelayer-elp-slider-value" value="'+prop.c['val']+'" min="'+prop['min']+'" max="'+prop['max']+'" step="'+prop['step']+'"/>'+ | |
| 1425 | - '</div>'+ | |
| 1426 | - '</div>'; | |
| 1427 | - | |
| 1428 | - row.append(div); | |
| 1429 | - | |
| 1430 | - // Set an value in span | |
| 1431 | - row.find('.pagelayer-elp-slider-div input').on('input', function(){ | |
| 1432 | - | |
| 1433 | - row.find('.pagelayer-elp-slider-div input').val(this.value); | |
| 1434 | - | |
| 1435 | - _pagelayer_set_atts(row, this.value);// Save and Render | |
| 1436 | - | |
| 1437 | - }); | |
| 1438 | - | |
| 1439 | -} | |
| 1440 | - | |
| 1441 | -// The Editor proprety | |
| 1442 | -function pagelayer_elp_editor(row, prop){ | |
| 1443 | - | |
| 1444 | - var div = '<div class="pagelayer-elp-editor-div">'+ | |
| 1445 | - '<textarea class="pagelayer-elp-editor">'+prop.c['val']+'</textarea>'+ | |
| 1446 | - '</div>'; | |
| 1447 | - | |
| 1448 | - row.append(div); | |
| 1449 | - | |
| 1450 | - var editor = row.find('.pagelayer-elp-editor'); | |
| 1451 | - | |
| 1452 | - // No SVG Icons for now | |
| 1453 | - //jQuery.trumbowyg.svgPath = false; | |
| 1454 | - | |
| 1455 | - // Initiate the editor | |
| 1456 | - editor.trumbowyg({ | |
| 1457 | - autogrow: false, | |
| 1458 | - btns:[ | |
| 1459 | - ['viewHTML'], | |
| 1460 | - ['undo', 'redo'], // Only supported in Blink browsers | |
| 1461 | - ['formatting'], | |
| 1462 | - ['foreColor', 'backColor'], | |
| 1463 | - ['strong', 'em', 'del'], | |
| 1464 | - ['superscript', 'subscript'], | |
| 1465 | - ['link'], | |
| 1466 | - ['wpmedia'], | |
| 1467 | - ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'], | |
| 1468 | - ['unorderedList', 'orderedList'], | |
| 1469 | - ['horizontalRule'], | |
| 1470 | - ['removeformat'], | |
| 1471 | - ['fullscreen'] | |
| 1472 | - ], | |
| 1473 | - imageWidthModalEdit: true, | |
| 1474 | - | |
| 1475 | - // Handle the changes made in the editor | |
| 1476 | - }).on('tbwchange', function(){ | |
| 1477 | - _pagelayer_set_atts(row, editor.trumbowyg('html'));// Save and Render | |
| 1478 | - }); | |
| 1479 | - | |
| 1480 | -} | |
| 1481 | - | |
| 1482 | -// The Link proprety | |
| 1483 | -function pagelayer_elp_link(row, prop){ | |
| 1484 | - | |
| 1485 | - // TODO : Implement pagelayer-elp-link-icon | |
| 1486 | - var div = '<div class="pagelayer-elp-link-div pagelayer-elp-input-icon">'+ | |
| 1487 | - '<input class="pagelayer-elp-link" type="text" value="'+prop.c['val']+'" />'+ | |
| 1488 | - '<i class="fa fa-link pagelayer-elp-link-icon" />'+ | |
| 1489 | - '</div>'; | |
| 1490 | - | |
| 1491 | - row.append(div); | |
| 1492 | - | |
| 1493 | - // Set a Link | |
| 1494 | - row.find('.pagelayer-elp-link').on('change', function(){ | |
| 1495 | - _pagelayer_set_atts(row, jQuery(this).val());// Save and Render | |
| 1496 | - }); | |
| 1497 | - | |
| 1498 | -} | |
| 1499 | - | |
| 1500 | -// The Textarea property | |
| 1501 | -function pagelayer_elp_textarea(row, prop){ | |
| 1502 | - | |
| 1503 | - var div = '<div class="pagelayer-elp-textarea-div">'+ | |
| 1504 | - '<textarea class="pagelayer-elp-textarea">'+prop.c['val']+'</textarea>'+ | |
| 1505 | - '</div>'; | |
| 1506 | - | |
| 1507 | - row.append(div); | |
| 1508 | - | |
| 1509 | - // Handle on change | |
| 1510 | - row.find('.pagelayer-elp-textarea').on('input', function(){ | |
| 1511 | - _pagelayer_set_atts(row, pagelayer_trim(jQuery(this).val()));// Save and Render | |
| 1512 | - }); | |
| 1513 | -}; | |
| 1514 | - | |
| 1515 | -// Clear all editable | |
| 1516 | -function pagelayer_clear_editable(){ | |
| 1517 | - | |
| 1518 | - // Destroy all | |
| 1519 | - for(var x in pagelayer_editor){ | |
| 1520 | - pagelayer_editor[x].pen.destroy(); | |
| 1521 | - pagelayer_editor[x].$.removeClass('pagelayer-pen'); | |
| 1522 | - } | |
| 1523 | - | |
| 1524 | -}; | |
| 1525 | - | |
| 1526 | -// Makes a field editable in the DOM | |
| 1527 | -function pagelayer_make_editable(jEle, e){ | |
| 1528 | - | |
| 1529 | - // Is it already setup ? | |
| 1530 | - if(jEle.hasClass('pagelayer-pen')){ | |
| 1531 | - //console.log('HERE'); | |
| 1532 | - return true; | |
| 1533 | - } | |
| 1534 | - | |
| 1535 | - var prop = jEle.attr('pagelayer-editable'); | |
| 1536 | - | |
| 1537 | - // Destroy the existing pen | |
| 1538 | - if(!pagelayer_empty(pagelayer_editor[prop])){ | |
| 1539 | - pagelayer_editor[prop].pen.destroy(); | |
| 1540 | - pagelayer_editor[prop].$.removeClass('pagelayer-pen'); | |
| 1541 | - } | |
| 1542 | - | |
| 1543 | - // The parent element | |
| 1544 | - var pEle = jEle.closest('.pagelayer-ele'); | |
| 1545 | - | |
| 1546 | - var options = { | |
| 1547 | - class: 'pagelayer-pen', | |
| 1548 | - editor: jEle[0], | |
| 1549 | - list: ['bold', 'italic', 'underline', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'strike'], | |
| 1550 | - stay: false | |
| 1551 | - } | |
| 1552 | - | |
| 1553 | - // Setup the editor | |
| 1554 | - pagelayer_editor[prop] = {}; | |
| 1555 | - pagelayer_editor[prop].pen = new Pen(options); | |
| 1556 | - pagelayer_editor[prop].$ = jEle; | |
| 1557 | - | |
| 1558 | - // Are we the clicked object, then set the focus | |
| 1559 | - if(e){ | |
| 1560 | - var target = jQuery(e.target); | |
| 1561 | - if(target.is(jEle).length || jEle.find(target).length){ | |
| 1562 | - jEle.focus(); | |
| 1563 | - } | |
| 1564 | - } | |
| 1565 | - | |
| 1566 | - // Reverse setup the event | |
| 1567 | - jEle.on('blur', function(){ | |
| 1568 | - //pagelayer_editor[prop].pen.destroy(); | |
| 1569 | - }); | |
| 1570 | - | |
| 1571 | - // Reverse setup the event | |
| 1572 | - jEle.on('focus', function(){ | |
| 1573 | - jQuery('.pagelayer-pen-menu').hide(); | |
| 1574 | - pagelayer_editor[prop].pen.rebuild(); | |
| 1575 | - }); | |
| 1576 | - | |
| 1577 | - // Reverse setup the event | |
| 1578 | - jEle.on('input', function(){ | |
| 1579 | - | |
| 1580 | - var val = pagelayer_trim(jEle.html()); | |
| 1581 | - | |
| 1582 | - // Set the property as well | |
| 1583 | - pagelayer_set_atts(pEle, prop, val); | |
| 1584 | - | |
| 1585 | - // Update the property | |
| 1586 | - var input = pagelayer.$$('[pagelayer-elp-name='+prop+']').find('input,textarea,.trumbowyg-editor'); | |
| 1587 | - //console.log(input); | |
| 1588 | - | |
| 1589 | - if(input.length > 0){ | |
| 1590 | - if(input.hasClass('trumbowyg-editor')){ | |
| 1591 | - input.html(val); | |
| 1592 | - }else{ | |
| 1593 | - input.val(val); | |
| 1594 | - } | |
| 1595 | - } | |
| 1596 | - | |
| 1597 | - }); | |
| 1598 | - | |
| 1599 | -} | |
| 1600 | - | |
| 1601 | -// The Icon Property | |
| 1602 | -function pagelayer_elp_icon(row, prop){ | |
| 1603 | - | |
| 1604 | - var $ = jQuery; | |
| 1605 | - | |
| 1606 | - // Find the available icons | |
| 1607 | - if(pagelayer_empty(pagelayer_icons)){ | |
| 1608 | - | |
| 1609 | - pagelayer_icons = $.map($.map(document.styleSheets, function(s){ | |
| 1610 | - | |
| 1611 | - if(s.href && s.href.match(/font\-awesome\.min\.css/)){ | |
| 1612 | - return s; | |
| 1613 | - } | |
| 1614 | - return null; | |
| 1615 | - | |
| 1616 | - })[0].cssRules, function(r) { | |
| 1617 | - | |
| 1618 | - if(r.cssText.indexOf('::before { content: ') > 0){ | |
| 1619 | - return r.cssText.substring(4,r.cssText.indexOf('::')); | |
| 1620 | - } | |
| 1621 | - return null; | |
| 1622 | - | |
| 1623 | - }); | |
| 1624 | - | |
| 1625 | - } | |
| 1626 | - | |
| 1627 | - var icons = pagelayer_icons; | |
| 1628 | - //console.log(icons); | |
| 1629 | - | |
| 1630 | - if('list' in prop && prop.list.length > 0){ | |
| 1631 | - icons = prop.list; | |
| 1632 | - } | |
| 1633 | - | |
| 1634 | - // Icon function | |
| 1635 | - var icon_html = function(name){ | |
| 1636 | - return '<span class="pagelayer-elp-icon-span">'+ | |
| 1637 | - '<i class="fa fa-'+name+'" icon="fa fa-'+name+'" /> '+name+ | |
| 1638 | - '</span>'; | |
| 1639 | - } | |
| 1640 | - | |
| 1641 | - var div = '<div class="pagelayer-elp-icon-div">'+ | |
| 1642 | - '<div class="pagelayer-elp-icon-preview">'+ | |
| 1643 | - '<i class="fa fa-'+prop.c['val']+'"></i>'+ | |
| 1644 | - '<span class="pagelayer-elp-icon-name">'+ | |
| 1645 | - (pagelayer_empty(prop.c['val'])?'Choose icon':prop.c['val'])+ | |
| 1646 | - '</span>'+ | |
| 1647 | - '</div>'+ | |
| 1648 | - '<span class="pagelayer-elp-icon-open">▼</span>'+ | |
| 1649 | - '</div>'; | |
| 1650 | - | |
| 1651 | - row.append(div); | |
| 1652 | - | |
| 1653 | - // Make all icons list | |
| 1654 | - var html = '<div class="pagelayer-elp-icon-selector">'+ | |
| 1655 | - '<input type="text" class="pagelayer-elp-search-icon" name="search-icon" placeholder="'+pagelayer_l('search')+'">'+ | |
| 1656 | - '<div class="pagelayer-elp-icon-list">'; | |
| 1657 | - | |
| 1658 | - for(var x in icons){ | |
| 1659 | - html += icon_html(icons[x]); | |
| 1660 | - } | |
| 1661 | - | |
| 1662 | - html += '</div>'+ | |
| 1663 | - '</div>'; | |
| 1664 | - | |
| 1665 | - row.append(html); | |
| 1666 | - | |
| 1667 | - // Open the selector | |
| 1668 | - row.find('.pagelayer-elp-icon-div').on('click', function(){ | |
| 1669 | - row.find('.pagelayer-elp-icon-selector').slideToggle(); | |
| 1670 | - }); | |
| 1671 | - | |
| 1672 | - // Handle search of icon | |
| 1673 | - row.find('.pagelayer-elp-search-icon').on('keyup', function(){ | |
| 1674 | - | |
| 1675 | - var v = this.value; | |
| 1676 | - var span =''; | |
| 1677 | - v = v.toLowerCase(); | |
| 1678 | - v = v.replace(/\s+/g, '-'); | |
| 1679 | - | |
| 1680 | - for(var x in icons){ | |
| 1681 | - if(icons[x].substring(0, v.length) === v){ | |
| 1682 | - span += icon_html(icons[x]); | |
| 1683 | - } | |
| 1684 | - } | |
| 1685 | - | |
| 1686 | - row.find('.pagelayer-elp-icon-list').empty().html(span); | |
| 1687 | - | |
| 1688 | - }); | |
| 1689 | - | |
| 1690 | - // Handle click within the icon selector | |
| 1691 | - row.find('.pagelayer-elp-icon-selector').on('click', function(e){ | |
| 1692 | - | |
| 1693 | - var jEle = jQuery(e.target); | |
| 1694 | - var i = jEle.children().attr('icon'); | |
| 1695 | - if(pagelayer_empty(i)){ | |
| 1696 | - return false; | |
| 1697 | - } | |
| 1698 | - | |
| 1699 | - i = i.replace('fa fa-', ''); | |
| 1700 | - | |
| 1701 | - // Set the icon in this list | |
| 1702 | - row.find('.pagelayer-elp-icon-preview').html('<i class="fa fa-'+i+'"></i><span class="pagelayer-elp-icon-name">'+i+'</span>'); | |
| 1703 | - row.find('.pagelayer-elp-icon-selector').slideUp(); | |
| 1704 | - | |
| 1705 | - _pagelayer_set_atts(row, i);// Save and Render | |
| 1706 | - | |
| 1707 | - return false; | |
| 1708 | - | |
| 1709 | - }); | |
| 1710 | - | |
| 1711 | -} | |
| 1712 | - | |
| 1713 | -// The Color Property | |
| 1714 | -function pagelayer_elp_color(row, prop){ | |
| 1715 | - | |
| 1716 | - var div = '<div class="pagelayer-elp-color-div">'+ | |
| 1717 | - '<div class="pagelayer-elp-color-preview"></div>'+ | |
| 1718 | - '</div>'; | |
| 1719 | - | |
| 1720 | - row.append(div); | |
| 1721 | - | |
| 1722 | - row.find('.pagelayer-elp-color-preview').css('background', prop.c['val']); | |
| 1723 | - | |
| 1724 | - var picker = new Picker({ | |
| 1725 | - parent : row.find('.pagelayer-elp-color-div')[0], | |
| 1726 | - popup : 'left', | |
| 1727 | - color : prop.c['val'], | |
| 1728 | - doc: window.parent.document | |
| 1729 | - }); | |
| 1730 | - | |
| 1731 | - // Handle selected color | |
| 1732 | - picker.onChange = function(color) { | |
| 1733 | - row.find('.pagelayer-elp-color-preview').css('background', color.rgbaString); | |
| 1734 | - _pagelayer_set_atts(row, color.hex);// Save and Render | |
| 1735 | - }; | |
| 1736 | - | |
| 1737 | -} | |
| 1738 | - | |
| 1739 | -// The Spinner property | |
| 1740 | -function pagelayer_elp_spinner(row, prop){ | |
| 1741 | - | |
| 1742 | - var div = '<div class="pagelayer-elp-spinner-div">'+ | |
| 1743 | - '<input type="number" class="pagelayer-elp-spinner" name="'+prop.c['name']+'"'+ | |
| 1744 | - ' min="'+prop['min']+'" max="'+prop['max']+'" step="'+prop['step']+'" value="'+prop.c['val']+'"/>'+ | |
| 1745 | - '</div>'; | |
| 1746 | - | |
| 1747 | - row.append(div); | |
| 1748 | - | |
| 1749 | - row.find('input').on('input', function(){ | |
| 1750 | - _pagelayer_set_atts(row, jQuery(this).val());// Save and Render | |
| 1751 | - }); | |
| 1752 | - | |
| 1753 | -} | |
| 1754 | - | |
| 1755 | -// The Group Property | |
| 1756 | -function pagelayer_elp_group(row, prop){ | |
| 1757 | - | |
| 1758 | - // Remove the pagelayer-show-tab | |
| 1759 | - row.removeAttr('pagelayer-show-tab'); | |
| 1760 | - | |
| 1761 | - var div = '<div class="pagelayer-elp-group-div"></div>'+ | |
| 1762 | - '<center><button class="pagelayer-elp-button">'+prop['text']+'</button></center>'; | |
| 1763 | - | |
| 1764 | - row.append(div); | |
| 1765 | - | |
| 1766 | - // Add button | |
| 1767 | - var add_item = function(row){ | |
| 1768 | - | |
| 1769 | - var ele_id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id') || ''; | |
| 1770 | - var pEle = jQuery('[pagelayer-id="'+ele_id+'"]'); | |
| 1771 | - | |
| 1772 | - // First add the element inside the group element | |
| 1773 | - var id = pagelayer_element_add_child(pEle, prop['sc']); | |
| 1774 | - //pagelayer_element_setup('[pagelayer-id='+id+']', true); | |
| 1775 | - | |
| 1776 | - show_item(id); | |
| 1777 | - | |
| 1778 | - }; | |
| 1779 | - | |
| 1780 | - // Show the properties of the existing things | |
| 1781 | - var show_item = function(id, sel){ | |
| 1782 | - | |
| 1783 | - // To append after an existing item | |
| 1784 | - sel = sel || false; | |
| 1785 | - | |
| 1786 | - // If pagelayer id empty then return | |
| 1787 | - if(pagelayer_empty(id)){ | |
| 1788 | - return false; | |
| 1789 | - } | |
| 1790 | - | |
| 1791 | - // Since the element is added very fast, we reselect via jQuery for it to re-access the dom | |
| 1792 | - jEle = jQuery('[pagelayer-id="'+id+'"]'); | |
| 1793 | - | |
| 1794 | - var label_param = prop['item_label']['param'] || ''; | |
| 1795 | - var title = pagelayer_get_att(jEle, label_param) || prop['item_label']['default']; | |
| 1796 | - | |
| 1797 | - // We need to get the correct value for select based params which are the label | |
| 1798 | - var child_props = pagelayer_shortcodes[prop.sc]; | |
| 1799 | - for(var section in child_props){ | |
| 1800 | - for(var _param in child_props[section]){ | |
| 1801 | - if(child_props[section][_param]['type'] == 'select'){ | |
| 1802 | - if(title in child_props[section][_param]['list']){ | |
| 1803 | - title = child_props[section][_param]['list'][title]; | |
| 1804 | - } | |
| 1805 | - } | |
| 1806 | - } | |
| 1807 | - } | |
| 1808 | - | |
| 1809 | - // Create the HTML | |
| 1810 | - var holder = jQuery('<div class="pagelayer-elp-group-item" pagelayer-group-item-id="'+id+'">'+ | |
| 1811 | - '<div class="pagelayer-elp-group-item-head">'+ | |
| 1812 | - '<span class="pagelayer-elp-group-item-drag"><i class="fa fa-bars" /></span>'+ | |
| 1813 | - '<span class="pagelayer-elp-group-item-title">'+title+'</span>'+ | |
| 1814 | - '<span class="pagelayer-elp-group-item-clone"><i class="fa fa-clone" /></span>'+ | |
| 1815 | - '<span class="pagelayer-elp-group-item-del"><i class="fa fa-trash" /></span>'+ | |
| 1816 | - '</div>'+ | |
| 1817 | - '<div class="pagelayer-elp-group-item-body"></div>'+ | |
| 1818 | - '</div>'); | |
| 1819 | - | |
| 1820 | - // Append to the row | |
| 1821 | - if(sel){ | |
| 1822 | - row.find(sel).after(holder); | |
| 1823 | - }else{ | |
| 1824 | - row.find('.pagelayer-elp-group-div').first().append(holder); | |
| 1825 | - } | |
| 1826 | - | |
| 1827 | - // Setup the toggle | |
| 1828 | - holder.find('.pagelayer-elp-group-item-title').first().on('click', function(){ | |
| 1829 | - var rEle = holder.find('.pagelayer-elp-group-item-body').first(); | |
| 1830 | - var r_id = holder.attr('pagelayer-group-item-id'); | |
| 1831 | - | |
| 1832 | - // If the props are not already setup | |
| 1833 | - if(rEle.html().length < 1){ | |
| 1834 | - | |
| 1835 | - pagelayer_elpd_generate(jQuery('[pagelayer-id="'+r_id+'"]'), rEle); | |
| 1836 | - | |
| 1837 | - // Change the group item title | |
| 1838 | - var tmp_title = holder.find('[pagelayer-elp-name="'+label_param+'"] [name="'+label_param+'"]'); | |
| 1839 | - | |
| 1840 | - if(tmp_title.length > 0){ | |
| 1841 | - jQuery(tmp_title).on('input', function(){ | |
| 1842 | - holder.find('.pagelayer-elp-group-item-title').html(tmp_title.val()); | |
| 1843 | - }); | |
| 1844 | - } | |
| 1845 | - | |
| 1846 | - } | |
| 1847 | - | |
| 1848 | - rEle.toggle('slow'); | |
| 1849 | - }); | |
| 1850 | - | |
| 1851 | - // Clone the item | |
| 1852 | - holder.find('.pagelayer-elp-group-item-head .fa-clone').on('click', function(){ | |
| 1853 | - | |
| 1854 | - // If the element have any parent | |
| 1855 | - var jEle = jQuery('[pagelayer-id="'+id+'"]'); | |
| 1856 | - var par = pagelayer_get_parent(jEle); | |
| 1857 | - var clone_ele = pagelayer_copy_element(jEle); | |
| 1858 | - //console.log(clone_ele);console.log('[pagelayer-group-item-id="'+id+'"]'); | |
| 1859 | - show_item(clone_ele, '[pagelayer-group-item-id="'+id+'"]'); | |
| 1860 | - | |
| 1861 | - if(par){ | |
| 1862 | - pagelayer_sc_render(pagelayer_ele_by_id(par)); | |
| 1863 | - } | |
| 1864 | - }); | |
| 1865 | - | |
| 1866 | - // Delete the item | |
| 1867 | - holder.find('.pagelayer-elp-group-item-head .fa-trash').on('click', function(){ | |
| 1868 | - | |
| 1869 | - // If the element have any parent | |
| 1870 | - var jEle = jQuery('[pagelayer-id="'+id+'"]'); | |
| 1871 | - var par = pagelayer_get_parent(jEle); | |
| 1872 | - holder.remove(); | |
| 1873 | - pagelayer_delete_element(jEle); | |
| 1874 | - | |
| 1875 | - if(par){ | |
| 1876 | - pagelayer_sc_render(pagelayer_ele_by_id(par)); | |
| 1877 | - } | |
| 1878 | - }); | |
| 1879 | - | |
| 1880 | - }; | |
| 1881 | - | |
| 1882 | - // Handle click of the group | |
| 1883 | - row.find('.pagelayer-elp-button').on('click', function(){ | |
| 1884 | - add_item(row); | |
| 1885 | - }); | |
| 1886 | - | |
| 1887 | - // Find the existing items | |
| 1888 | - prop.el.$.find('[pagelayer-tag='+prop['sc']+']').each(function(){ | |
| 1889 | - var jEle = jQuery(this); | |
| 1890 | - var id = pagelayer_assign_id(jEle); | |
| 1891 | - show_item(id); | |
| 1892 | - }); | |
| 1893 | -}; | |
| 1894 | - | |
| 1895 | -// The Datetime Property | |
| 1896 | -function pagelayer_elp_datetime(row, prop){ | |
| 1897 | - | |
| 1898 | - var div = '<div class="pagelayer-elp-datetime-div pagelayer-elp-input-icon">'+ | |
| 1899 | - '<input type="date" class="pagelayer-elp-datetime" name="'+prop.c['name']+'" value="'+prop.c['val']+'" />'+ | |
| 1900 | - '</div>'; | |
| 1901 | - | |
| 1902 | - row.append(div); | |
| 1903 | - | |
| 1904 | - row.find('.pagelayer-elp-datetime').on('change', function(){ | |
| 1905 | - _pagelayer_set_atts(row, jQuery(this).val());// Save and Render | |
| 1906 | - }); | |
| 1907 | - | |
| 1908 | -}; | |
| 1909 | - | |
| 1910 | -// The padding property | |
| 1911 | -function pagelayer_elp_padding(row, prop){ | |
| 1912 | - var val = ['', '', '', '']; | |
| 1913 | - | |
| 1914 | - if(prop.c['val'].length > 0){ | |
| 1915 | - val = prop.c['val'].split(','); | |
| 1916 | - //console.log(val) | |
| 1917 | - } | |
| 1918 | - | |
| 1919 | - var div = '<div class="pagelayer-elp-padding-div">'+ | |
| 1920 | - '<input type="number" class="pagelayer-elp-padding" value="'+parseInt(val[0])+'"></input>'+ | |
| 1921 | - '<input type="number" class="pagelayer-elp-padding" value="'+parseInt(val[1])+'"></input>'+ | |
| 1922 | - '<input type="number" class="pagelayer-elp-padding" value="'+parseInt(val[2])+'"></input>'+ | |
| 1923 | - '<input type="number" class="pagelayer-elp-padding" value="'+parseInt(val[3])+'"></input>'+ | |
| 1924 | - '<i class="fa fa-link" />'+ | |
| 1925 | - '</div>'; | |
| 1926 | - | |
| 1927 | - row.append(div); | |
| 1928 | - | |
| 1929 | - // Is the value linked ? | |
| 1930 | - var link = row.find('.pagelayer-elp-padding-div .fa'); | |
| 1931 | - var isLinked = 1; | |
| 1932 | - //isLinked = isLinked == 2 ? false : true; | |
| 1933 | - //console.log(isLinked); | |
| 1934 | - var tmp_val = val[0]; | |
| 1935 | - | |
| 1936 | - for(var p_val in val){ | |
| 1937 | - | |
| 1938 | - // Check if unlinked | |
| 1939 | - if(tmp_val != val[p_val] ){ | |
| 1940 | - isLinked = 0; | |
| 1941 | - } | |
| 1942 | - tmp_val = val[p_val]; | |
| 1943 | - } | |
| 1944 | - | |
| 1945 | - if(isLinked){ | |
| 1946 | - link.addClass('pagelayer-elp-padding-linked'); | |
| 1947 | - }else{ | |
| 1948 | - link.removeClass('pagelayer-elp-padding-linked'); | |
| 1949 | - } | |
| 1950 | - | |
| 1951 | - // Handle link on click | |
| 1952 | - link.on('click', function(){ | |
| 1953 | - | |
| 1954 | - var linked = link.hasClass('pagelayer-elp-padding-linked'); | |
| 1955 | - | |
| 1956 | - if(linked){ | |
| 1957 | - link.removeClass('pagelayer-elp-padding-linked'); | |
| 1958 | - }else{ | |
| 1959 | - link.addClass('pagelayer-elp-padding-linked'); | |
| 1960 | - } | |
| 1961 | - | |
| 1962 | - }); | |
| 1963 | - | |
| 1964 | - row.find('input').on('input', function(){ | |
| 1965 | - | |
| 1966 | - // Are the values linked | |
| 1967 | - var linked = row.find('.pagelayer-elp-padding-div .fa').hasClass('pagelayer-elp-padding-linked'); | |
| 1968 | - | |
| 1969 | - if(linked){ | |
| 1970 | - var val = jQuery(this).val(); | |
| 1971 | - row.find('input').each(function(){ | |
| 1972 | - jQuery(this).val(val); | |
| 1973 | - }); | |
| 1974 | - } | |
| 1975 | - | |
| 1976 | - var vals = []; | |
| 1977 | - | |
| 1978 | - // Get all values | |
| 1979 | - row.find('input').each(function(){ | |
| 1980 | - var val = jQuery(this).val(); | |
| 1981 | - vals.push(val ? val : 0); | |
| 1982 | - }); | |
| 1983 | - | |
| 1984 | - _pagelayer_set_atts(row, vals);// Save and Render | |
| 1985 | - }); | |
| 1986 | - | |
| 1987 | -}; | |
| 1988 | - | |
| 1989 | -// The shadow property | |
| 1990 | -function pagelayer_elp_shadow(row, prop){ | |
| 1991 | - | |
| 1992 | - var val =['','','','']; | |
| 1993 | - | |
| 1994 | - // Do we have a val ? | |
| 1995 | - if(!pagelayer_empty(prop.c['val'])){ | |
| 1996 | - val = prop.c['val'].split(','); | |
| 1997 | - } | |
| 1998 | - | |
| 1999 | - //var val = {color: '', blur: '', horizontal: '', vertical: ''}; | |
| 2000 | - | |
| 2001 | - var div = '<span class="pagelayer-prop-edit"><i class="fa fa-pencil"></i></span>'+ | |
| 2002 | - '<div class="pagelayer-elp-shadow-div">'+ | |
| 2003 | - '<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-horizontal">'+ | |
| 2004 | - '<label class="pagelayer-elp-label">Horizontal</label>'+ | |
| 2005 | - '<input class="pagelayer-elp-shadow-input" type="number" max="100" min="-100" step="1" class="pagelayer-elp-shadow-blur" value="'+val[0]+'"></input>'+ | |
| 2006 | - '</div>'+ | |
| 2007 | - '<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-vertical">'+ | |
| 2008 | - '<label class="pagelayer-elp-label">Vertical</label>'+ | |
| 2009 | - '<input class="pagelayer-elp-shadow-input" type="number" max="100" min="-100" step="1" class="pagelayer-elp-shadow-blur" value="'+val[1]+'"></input>'+ | |
| 2010 | - '</div>'+ | |
| 2011 | - '<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-blur">'+ | |
| 2012 | - '<label class="pagelayer-elp-label">Blur</label>'+ | |
| 2013 | - '<input class="pagelayer-elp-shadow-input" type="number" max="100" min="0" step="1" class="pagelayer-elp-shadow-blur" value="'+val[2]+'"></input>'+ | |
| 2014 | - '</div>'+ | |
| 2015 | - '<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-color">'+ | |
| 2016 | - '<label class="pagelayer-elp-label">color</label>'+ | |
| 2017 | - '<div class="pagelayer-elp-color-div">'+ | |
| 2018 | - '<div class="pagelayer-elp-color-preview"></div>'+ | |
| 2019 | - '</div>'+ | |
| 2020 | - '</div>'+ | |
| 2021 | - '</div>'; | |
| 2022 | - | |
| 2023 | - row.append(div); | |
| 2024 | - | |
| 2025 | - row.find('.pagelayer-prop-edit').on('click', function(){ | |
| 2026 | - row.find('.pagelayer-elp-shadow-div').toggleClass('pagelayer-prop-show'); | |
| 2027 | - }); | |
| 2028 | - | |
| 2029 | - row.find('.pagelayer-elp-color-preview').css('background', val[3]); | |
| 2030 | - | |
| 2031 | - var picker = new Picker({ | |
| 2032 | - parent : row.find('.pagelayer-elp-color-div')[0], | |
| 2033 | - popup : 'left', | |
| 2034 | - doc: window.parent.document | |
| 2035 | - }); | |
| 2036 | - | |
| 2037 | - // Handle selected color | |
| 2038 | - picker.onChange = function(color) { | |
| 2039 | - row.find('.pagelayer-elp-color-preview').css('background', color.rgbaString); | |
| 2040 | - val[3] = (color.hex ? color.hex : ''); | |
| 2041 | - _pagelayer_set_atts(row, val); | |
| 2042 | - }; | |
| 2043 | - | |
| 2044 | - row.find('input').on('input', function(){ | |
| 2045 | - var i = 0; | |
| 2046 | - row.find('.pagelayer-elp-shadow-input').each(function(){ | |
| 2047 | - var value = jQuery(this).val(); | |
| 2048 | - val[i] = (value ? value : ''); | |
| 2049 | - i++; | |
| 2050 | - }); | |
| 2051 | - _pagelayer_set_atts(row, val); | |
| 2052 | - }); | |
| 2053 | - | |
| 2054 | -} | |
| 2055 | - | |
| 2056 | -// The filter property | |
| 2057 | -function pagelayer_elp_filter(row, prop){ | |
| 2058 | - | |
| 2059 | - var val =['','','','','','','']; | |
| 2060 | - | |
| 2061 | - // Do we have a val ? | |
| 2062 | - if(!pagelayer_empty(prop.c['val'])){ | |
| 2063 | - val = prop.c['val'].split(','); | |
| 2064 | - } | |
| 2065 | - | |
| 2066 | - var filters = [['blur','10','0.1'],['brightness','200','1'],['contrast','200','1'],['grayscale','200','1'],['hue','360','1'],['opacity','100','1'],['saturate','200','1']]; | |
| 2067 | - | |
| 2068 | - var div = '<span class="pagelayer-prop-edit"><i class="fa fa-pencil"></i></span>'+ | |
| 2069 | - '<div class="pagelayer-elp-filter-div">'; | |
| 2070 | - | |
| 2071 | - jQuery.each(val,function(key, value){ | |
| 2072 | - div += '<div class="pagelayer-elp-prop-grp pagelayer-elp-filter-'+filters[key][0]+'">'+ | |
| 2073 | - '<label class="pagelayer-elp-label">'+filters[key][0]+'</label>'+ | |
| 2074 | - '<input class="pagelayer-elp-slider pagelayer-elp-filter-input" type="range" max="'+filters[key][1]+'" min="0" step="'+filters[key][2]+'" class="pagelayer-elp-filter-'+filters[key][0]+'" value="'+value+'"></input>'+ | |
| 2075 | - '<span class="pagelayer-elp-filter-val">'+value+'</span>'+ | |
| 2076 | - '</div>'; | |
| 2077 | - }); | |
| 2078 | - | |
| 2079 | - div += '</div>'; | |
| 2080 | - | |
| 2081 | - row.append(div); | |
| 2082 | - | |
| 2083 | - row.find('.pagelayer-prop-edit').on('click', function(){ | |
| 2084 | - row.find('.pagelayer-elp-filter-div').toggleClass('pagelayer-prop-show'); | |
| 2085 | - }); | |
| 2086 | - | |
| 2087 | - row.find('input').on('input', function(){ | |
| 2088 | - var val = []; | |
| 2089 | - jQuery(this).parent().find('span').html(this.value); | |
| 2090 | - row.find('.pagelayer-elp-filter-input').each(function(){ | |
| 2091 | - var value = jQuery(this).val(); | |
| 2092 | - val.push(value ? value : 'none'); | |
| 2093 | - }); | |
| 2094 | - _pagelayer_set_atts(row, val); | |
| 2095 | - }); | |
| 2096 | - | |
| 2097 | -} | |
| 2098 | - | |
| 2099 | -// The gradient property | |
| 2100 | -function pagelayer_elp_gradient(row, prop){ | |
| 2101 | - | |
| 2102 | - var val =['','','','','','','']; | |
| 2103 | - | |
| 2104 | - // Do we have a val ? | |
| 2105 | - if(!pagelayer_empty(prop.c['val'])){ | |
| 2106 | - val = prop.c['val'].split(','); | |
| 2107 | - } | |
| 2108 | - | |
| 2109 | - //var val = {color: '', blur: '', horizontal: '', vertical: ''}; | |
| 2110 | - | |
| 2111 | - var div = '<div class="pagelayer-elp-gradient-div">'+ | |
| 2112 | - '<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-angle">'+ | |
| 2113 | - '<label class="pagelayer-elp-label">Angle</label>'+ | |
| 2114 | - '<input class="pagelayer-elp-gradient-input" type="number" max="360" min="0" step="1" class="pagelayer-elp-gradient-angle" value="'+val[0]+'"></input>'+ | |
| 2115 | - '</div>'+ | |
| 2116 | - '<div class="pagelayer-elp-prop-grp">'+ | |
| 2117 | - '<label class="pagelayer-elp-label">color 1</label>'+ | |
| 2118 | - '<div class="pagelayer-elp-color-div">'+ | |
| 2119 | - '<div class="pagelayer-elp-gradient-color1 pagelayer-elp-color-preview"></div>'+ | |
| 2120 | - '</div>'+ | |
| 2121 | - '</div>'+ | |
| 2122 | - '<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-per1">'+ | |
| 2123 | - '<label class="pagelayer-elp-label">Percentage 1</label>'+ | |
| 2124 | - '<input class="pagelayer-elp-gradient-input" type="number" max="100" min="-100" step="1" class="pagelayer-elp-gradient-per1" value="'+val[2]+'"></input>'+ | |
| 2125 | - '</div>'+ | |
| 2126 | - '<div class="pagelayer-elp-prop-grp">'+ | |
| 2127 | - '<label class="pagelayer-elp-label">color 2</label>'+ | |
| 2128 | - '<div class="pagelayer-elp-color-div">'+ | |
| 2129 | - '<div class="pagelayer-elp-gradient-color2 pagelayer-elp-color-preview"></div>'+ | |
| 2130 | - '</div>'+ | |
| 2131 | - '</div>'+ | |
| 2132 | - '<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-per2">'+ | |
| 2133 | - '<label class="pagelayer-elp-label">Percentage 2</label>'+ | |
| 2134 | - '<input class="pagelayer-elp-gradient-input" type="number" max="100" min="0" step="1" class="pagelayer-elp-gradient-per2" value="'+val[4]+'"></input>'+ | |
| 2135 | - '</div>'+ | |
| 2136 | - '<div class="pagelayer-elp-prop-grp">'+ | |
| 2137 | - '<label class="pagelayer-elp-label">color 3</label>'+ | |
| 2138 | - '<div class="pagelayer-elp-color-div">'+ | |
| 2139 | - '<div class="pagelayer-elp-gradient-color3 pagelayer-elp-color-preview"></div>'+ | |
| 2140 | - '</div>'+ | |
| 2141 | - '</div>'+ | |
| 2142 | - '<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-per3">'+ | |
| 2143 | - '<label class="pagelayer-elp-label">Percentage 3</label>'+ | |
| 2144 | - '<input class="pagelayer-elp-gradient-input" type="number" max="100" min="0" step="1" class="pagelayer-elp-gradient-per3" value="'+val[6]+'"></input>'+ | |
| 2145 | - '</div>'+ | |
| 2146 | - '</div>'; | |
| 2147 | - | |
| 2148 | - row.append(div); | |
| 2149 | - var i = 1; | |
| 2150 | - row.find('.pagelayer-elp-color-preview').each(function(){ | |
| 2151 | - jQuery(this).css('background', val[i]); | |
| 2152 | - i = i+2; | |
| 2153 | - }); | |
| 2154 | - | |
| 2155 | - var picker1 = new Picker({ | |
| 2156 | - parent : row.find('.pagelayer-elp-gradient-color1')[0], | |
| 2157 | - popup : 'left', | |
| 2158 | - doc: window.parent.document | |
| 2159 | - }); | |
| 2160 | - | |
| 2161 | - // Handle selected color | |
| 2162 | - picker1.onChange = function(color) { | |
| 2163 | - row.find('.pagelayer-elp-gradient-color1').css('background', color.rgbaString); | |
| 2164 | - val[1] = (color.hex ? color.hex : ''); | |
| 2165 | - _pagelayer_set_atts(row, val); | |
| 2166 | - }; | |
| 2167 | - | |
| 2168 | - var picker2 = new Picker({ | |
| 2169 | - parent : row.find('.pagelayer-elp-gradient-color2')[0], | |
| 2170 | - popup : 'left', | |
| 2171 | - doc: window.parent.document | |
| 2172 | - }); | |
| 2173 | - | |
| 2174 | - // Handle selected color | |
| 2175 | - picker2.onChange = function(color) { | |
| 2176 | - row.find('.pagelayer-elp-gradient-color2').css('background', color.rgbaString); | |
| 2177 | - val[3] = (color.hex ? color.hex : ''); | |
| 2178 | - _pagelayer_set_atts(row, val); | |
| 2179 | - }; | |
| 2180 | - | |
| 2181 | - var picker3 = new Picker({ | |
| 2182 | - parent : row.find('.pagelayer-elp-gradient-color3')[0], | |
| 2183 | - popup : 'left', | |
| 2184 | - doc: window.parent.document | |
| 2185 | - }); | |
| 2186 | - | |
| 2187 | - // Handle selected color | |
| 2188 | - picker3.onChange = function(color) { | |
| 2189 | - row.find('.pagelayer-elp-gradient-color3').css('background', color.rgbaString); | |
| 2190 | - val[5] = (color.hex ? color.hex : ''); | |
| 2191 | - _pagelayer_set_atts(row, val); | |
| 2192 | - }; | |
| 2193 | - | |
| 2194 | - row.find('input').on('input', function(){ | |
| 2195 | - var i = 0; | |
| 2196 | - row.find('.pagelayer-elp-gradient-input').each(function(){ | |
| 2197 | - var value = jQuery(this).val(); | |
| 2198 | - val[i] = (value ? value : ''); | |
| 2199 | - i = i+2; | |
| 2200 | - }); | |
| 2201 | - _pagelayer_set_atts(row, val); | |
| 2202 | - }); | |
| 2203 | - | |
| 2204 | -} | |
| 2205 | - | |
| 2206 | -// The typography property | |
| 2207 | -function pagelayer_elp_typography(row, prop){ | |
| 2208 | - | |
| 2209 | - var val =['','','','','','','','','','']; | |
| 2210 | - | |
| 2211 | - // Do we have a val ? | |
| 2212 | - if(!pagelayer_empty(prop.c['val'])){ | |
| 2213 | - val = prop.c['val'].split(','); | |
| 2214 | - } | |
| 2215 | - | |
| 2216 | - var select = { 'style' : ['', 'Normal', 'Italic', 'Oblique'], | |
| 2217 | - 'weight' : ['', '100', '200', '300', '400', '500', '600', '700', '800', '900'], | |
| 2218 | - 'variant' : ['', 'Normal', 'Small-caps'], | |
| 2219 | - 'deco-line' : ['', 'None', 'Overline', 'Line-through', 'Underline', 'Underline Overline'], | |
| 2220 | - 'deco-style' : ['Solid', 'Double', 'Dotted', 'Dashed', 'Wavy'], | |
| 2221 | - 'transform' : ['', 'Capitalize', 'Uppercase', 'Lowercase'], | |
| 2222 | - 'fonts' : ['', 'ABeeZee', 'Abel', 'Abhaya Libre', 'Abril Fatface', 'Aclonica', 'Acme', 'Actor', 'Adamina', 'Advent Pro', 'Aguafina Script', 'Akronim', 'Aladin', 'Aldrich', 'Alef', 'Alegreya', 'Alegreya SC', 'Alegreya Sans', 'Alegreya Sans SC', 'Aleo', 'Alex Brush', 'Alfa Slab One', 'Alice', 'Alike', 'Alike Angular', 'Allan', 'Allerta', 'Allerta Stencil', 'Allura', 'Almendra', 'Almendra Display', 'Almendra SC', 'Amarante', 'Amaranth', 'Amatic SC', 'Amethysta', 'Amiko', 'Amiri', 'Amita', 'Anaheim', 'Andada', 'Andika', 'Angkor', 'Annie Use Your Telescope', 'Anonymous Pro', 'Antic', 'Antic Didone', 'Antic Slab', 'Anton', 'Arapey', 'Arbutus', 'Arbutus Slab', 'Architects Daughter', 'Archivo', 'Archivo Black', 'Archivo Narrow', 'Aref Ruqaa', 'Arima Madurai', 'Arimo', 'Arizonia', 'Armata', 'Arsenal', 'Artifika', 'Arvo', 'Arya', 'Asap', 'Asap Condensed', 'Asar', 'Asset', 'Assistant', 'Astloch', 'Asul', 'Athiti', 'Atma', 'Atomic Age', 'Aubrey', 'Audiowide', 'Autour One', 'Average', 'Average Sans', 'Averia Gruesa Libre', 'Averia Libre', 'Averia Sans Libre', 'Averia Serif Libre', 'B612', 'B612 Mono', 'Bad Script', 'Bahiana', 'Bai Jamjuree', 'Baloo', 'Baloo Bhai', 'Baloo Bhaijaan', 'Baloo Bhaina', 'Baloo Chettan', 'Baloo Da', 'Baloo Paaji', 'Baloo Tamma', 'Baloo Tammudu', 'Baloo Thambi', 'Balthazar', 'Bangers', 'Barlow', 'Barlow Condensed', 'Barlow Semi Condensed', 'Barrio', 'Basic', 'Battambang', 'Baumans', 'Bayon', 'Belgrano', 'Bellefair', 'Belleza', 'BenchNine', 'Bentham', 'Berkshire Swash', 'Bevan', 'Bigelow Rules', 'Bigshot One', 'Bilbo', 'Bilbo Swash Caps', 'BioRhyme', 'BioRhyme Expanded', 'Biryani', 'Bitter', 'Black And White Picture', 'Black Han Sans', 'Black Ops One', 'Bokor', 'Bonbon', 'Boogaloo', 'Bowlby One', 'Bowlby One SC', 'Brawler', 'Bree Serif', 'Bubblegum Sans', 'Bubbler One', 'Buda', 'Buenard', 'Bungee', 'Bungee Hairline', 'Bungee Inline', 'Bungee Outline', 'Bungee Shade', 'Butcherman', 'Butterfly Kids', 'Cabin', 'Cabin Condensed', 'Cabin Sketch', 'Caesar Dressing', 'Cagliostro', 'Cairo', 'Calligraffitti', 'Cambay', 'Cambo', 'Candal', 'Cantarell', 'Cantata One', 'Cantora One', 'Capriola', 'Cardo', 'Carme', 'Carrois Gothic', 'Carrois Gothic SC', 'Carter One', 'Catamaran', 'Caudex', 'Caveat', 'Caveat Brush', 'Cedarville Cursive', 'Ceviche One', 'Chakra Petch', 'Changa', 'Changa One', 'Chango', 'Charm', 'Charmonman', 'Chathura', 'Chau Philomene One', 'Chela One', 'Chelsea Market', 'Chenla', 'Cherry Cream Soda', 'Cherry Swash', 'Chewy', 'Chicle', 'Chivo', 'Chonburi', 'Cinzel', 'Cinzel Decorative', 'Clicker Script', 'Coda', 'Coda Caption', 'Codystar', 'Coiny', 'Combo', 'Comfortaa', 'Coming Soon', 'Concert One', 'Condiment', 'Content', 'Contrail One', 'Convergence', 'Cookie', 'Copse', 'Corben', 'Cormorant', 'Cormorant Garamond', 'Cormorant Infant', 'Cormorant SC', 'Cormorant Unicase', 'Cormorant Upright', 'Courgette', 'Cousine', 'Coustard', 'Covered By Your Grace', 'Crafty Girls', 'Creepster', 'Crete Round', 'Crimson Text', 'Croissant One', 'Crushed', 'Cuprum', 'Cute Font', 'Cutive', 'Cutive Mono', 'Damion', 'Dancing Script', 'Dangrek', 'David Libre', 'Dawning of a New Day', 'Days One', 'Dekko', 'Delius', 'Delius Swash Caps', 'Delius Unicase', 'Della Respira', 'Denk One', 'Devonshire', 'Dhurjati', 'Didact Gothic', 'Diplomata', 'Diplomata SC', 'Do Hyeon', 'Dokdo', 'Domine', 'Donegal One', 'Doppio One', 'Dorsa', 'Dosis', 'Dr Sugiyama', 'Duru Sans', 'Dynalight', 'EB Garamond', 'Eagle Lake', 'East Sea Dokdo', 'Eater', 'Economica', 'Eczar', 'El Messiri', 'Electrolize', 'Elsie', 'Elsie Swash Caps', 'Emblema One', 'Emilys Candy', 'Encode Sans', 'Encode Sans Condensed', 'Encode Sans Expanded', 'Encode Sans Semi Condensed', 'Encode Sans Semi Expanded', 'Engagement', 'Englebert', 'Enriqueta', 'Erica One', 'Esteban', 'Euphoria Script', 'Ewert', 'Exo', 'Exo 2', 'Expletus Sans', 'Fahkwang', 'Fanwood Text', 'Farsan', 'Fascinate', 'Fascinate Inline', 'Faster One', 'Fasthand', 'Fauna One', 'Faustina', 'Federant', 'Federo', 'Felipa', 'Fenix', 'Finger Paint', 'Fira Mono', 'Fira Sans', 'Fira Sans Condensed', 'Fira Sans Extra Condensed', 'Fjalla One', 'Fjord One', 'Flamenco', 'Flavors', 'Fondamento', 'Fontdiner Swanky', 'Forum', 'Francois One', 'Frank Ruhl Libre', 'Freckle Face', 'Fredericka the Great', 'Fredoka One', 'Freehand', 'Fresca', 'Frijole', 'Fruktur', 'Fugaz One', 'GFS Didot', 'GFS Neohellenic', 'Gabriela', 'Gaegu', 'Gafata', 'Galada', 'Galdeano', 'Galindo', 'Gamja Flower', 'Gentium Basic', 'Gentium Book Basic', 'Geo', 'Geostar', 'Geostar Fill', 'Germania One', 'Gidugu', 'Gilda Display', 'Give You Glory', 'Glass Antiqua', 'Glegoo', 'Gloria Hallelujah', 'Goblin One', 'Gochi Hand', 'Gorditas', 'Gothic A1', 'Goudy Bookletter 1911', 'Graduate', 'Grand Hotel', 'Gravitas One', 'Great Vibes', 'Griffy', 'Gruppo', 'Gudea', 'Gugi', 'Gurajada', 'Habibi', 'Halant', 'Hammersmith One', 'Hanalei', 'Hanalei Fill', 'Handlee', 'Hanuman', 'Happy Monkey', 'Harmattan', 'Headland One', 'Heebo', 'Henny Penny', 'Herr Von Muellerhoff', 'Hi Melody', 'Hind', 'Hind Guntur', 'Hind Madurai', 'Hind Siliguri', 'Hind Vadodara', 'Holtwood One SC', 'Homemade Apple', 'Homenaje', 'IBM Plex Mono', 'IBM Plex Sans', 'IBM Plex Sans Condensed', 'IBM Plex Serif', 'IM Fell DW Pica', 'IM Fell DW Pica SC', 'IM Fell Double Pica', 'IM Fell Double Pica SC', 'IM Fell English', 'IM Fell English SC', 'IM Fell French Canon', 'IM Fell French Canon SC', 'IM Fell Great Primer', 'IM Fell Great Primer SC', 'Iceberg', 'Iceland', 'Imprima', 'Inconsolata', 'Inder', 'Indie Flower', 'Inika', 'Inknut Antiqua', 'Irish Grover', 'Istok Web', 'Italiana', 'Italianno', 'Itim', 'Jacques Francois', 'Jacques Francois Shadow', 'Jaldi', 'Jim Nightshade', 'Jockey One', 'Jolly Lodger', 'Jomhuria', 'Josefin Sans', 'Josefin Slab', 'Joti One', 'Jua', 'Judson', 'Julee', 'Julius Sans One', 'Junge', 'Jura', 'Just Another Hand', 'Just Me Again Down Here', 'K2D', 'Kadwa', 'Kalam', 'Kameron', 'Kanit', 'Kantumruy', 'Karla', 'Karma', 'Katibeh', 'Kaushan Script', 'Kavivanar', 'Kavoon', 'Kdam Thmor', 'Keania One', 'Kelly Slab', 'Kenia', 'Khand', 'Khmer', 'Khula', 'Kirang Haerang', 'Kite One', 'Knewave', 'KoHo', 'Kodchasan', 'Kosugi', 'Kosugi Maru', 'Kotta One', 'Koulen', 'Kranky', 'Kreon', 'Kristi', 'Krona One', 'Krub', 'Kumar One', 'Kumar One Outline', 'Kurale', 'La Belle Aurore', 'Laila', 'Lakki Reddy', 'Lalezar', 'Lancelot', 'Lateef', 'Lato', 'League Script', 'Leckerli One', 'Ledger', 'Lekton', 'Lemon', 'Lemonada', 'Libre Barcode 128', 'Libre Barcode 128 Text', 'Libre Barcode 39', 'Libre Barcode 39 Extended', 'Libre Barcode 39 Extended Text', 'Libre Barcode 39 Text', 'Libre Baskerville', 'Libre Franklin', 'Life Savers', 'Lilita One', 'Lily Script One', 'Limelight', 'Linden Hill', 'Lobster', 'Lobster Two', 'Londrina Outline', 'Londrina Shadow', 'Londrina Sketch', 'Londrina Solid', 'Lora', 'Love Ya Like A Sister', 'Loved by the King', 'Lovers Quarrel', 'Luckiest Guy', 'Lusitana', 'Lustria', 'M PLUS 1p', 'M PLUS Rounded 1c', 'Macondo', 'Macondo Swash Caps', 'Mada', 'Magra', 'Maiden Orange', 'Maitree', 'Major Mono Display', 'Mako', 'Mali', 'Mallanna', 'Mandali', 'Manuale', 'Marcellus', 'Marcellus SC', 'Marck Script', 'Margarine', 'Markazi Text', 'Marko One', 'Marmelad', 'Martel', 'Martel Sans', 'Marvel', 'Mate', 'Mate SC', 'Maven Pro', 'McLaren', 'Meddon', 'MedievalSharp', 'Medula One', 'Meera Inimai', 'Megrim', 'Meie Script', 'Merienda', 'Merienda One', 'Merriweather', 'Merriweather Sans', 'Metal', 'Metal Mania', 'Metamorphous', 'Metrophobic', 'Michroma', 'Milonga', 'Miltonian', 'Miltonian Tattoo', 'Mina', 'Miniver', 'Miriam Libre', 'Mirza', 'Miss Fajardose', 'Mitr', 'Modak', 'Modern Antiqua', 'Mogra', 'Molengo', 'Molle', 'Monda', 'Monofett', 'Monoton', 'Monsieur La Doulaise', 'Montaga', 'Montez', 'Montserrat', 'Montserrat Alternates', 'Montserrat Subrayada', 'Moul', 'Moulpali', 'Mountains of Christmas', 'Mouse Memoirs', 'Mr Bedfort', 'Mr Dafoe', 'Mr De Haviland', 'Mrs Saint Delafield', 'Mrs Sheppards', 'Mukta', 'Mukta Mahee', 'Mukta Malar', 'Mukta Vaani', 'Muli', 'Mystery Quest', 'NTR', 'Nanum Brush Script', 'Nanum Gothic', 'Nanum Gothic Coding', 'Nanum Myeongjo', 'Nanum Pen Script', 'Neucha', 'Neuton', 'New Rocker', 'News Cycle', 'Niconne', 'Niramit', 'Nixie One', 'Nobile', 'Nokora', 'Norican', 'Nosifer', 'Notable', 'Nothing You Could Do', 'Noticia Text', 'Noto Sans', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans TC', 'Noto Serif', 'Noto Serif JP', 'Noto Serif KR', 'Noto Serif SC', 'Noto Serif TC', 'Nova Cut', 'Nova Flat', 'Nova Mono', 'Nova Oval', 'Nova Round', 'Nova Script', 'Nova Slim', 'Nova Square', 'Numans', 'Nunito', 'Nunito Sans', 'Odor Mean Chey', 'Offside', 'Old Standard TT', 'Oldenburg', 'Oleo Script', 'Oleo Script Swash Caps', 'Open Sans', 'Open Sans Condensed', 'Oranienbaum', 'Orbitron', 'Oregano', 'Orienta', 'Original Surfer', 'Oswald', 'Over the Rainbow', 'Overlock', 'Overlock SC', 'Overpass', 'Overpass Mono', 'Ovo', 'Oxygen', 'Oxygen Mono', 'PT Mono', 'PT Sans', 'PT Sans Caption', 'PT Sans Narrow', 'PT Serif', 'PT Serif Caption', 'Pacifico', 'Padauk', 'Palanquin', 'Palanquin Dark', 'Pangolin', 'Paprika', 'Parisienne', 'Passero One', 'Passion One', 'Pathway Gothic One', 'Patrick Hand', 'Patrick Hand SC', 'Pattaya', 'Patua One', 'Pavanam', 'Paytone One', 'Peddana', 'Peralta', 'Permanent Marker', 'Petit Formal Script', 'Petrona', 'Philosopher', 'Piedra', 'Pinyon Script', 'Pirata One', 'Plaster', 'Play', 'Playball', 'Playfair Display', 'Playfair Display SC', 'Podkova', 'Poiret One', 'Poller One', 'Poly', 'Pompiere', 'Pontano Sans', 'Poor Story', 'Poppins', 'Port Lligat Sans', 'Port Lligat Slab', 'Pragati Narrow', 'Prata', 'Preahvihear', 'Press Start 2P', 'Pridi', 'Princess Sofia', 'Prociono', 'Prompt', 'Prosto One', 'Proza Libre', 'Puritan', 'Purple Purse', 'Quando', 'Quantico', 'Quattrocento', 'Quattrocento Sans', 'Questrial', 'Quicksand', 'Quintessential', 'Qwigley', 'Racing Sans One', 'Radley', 'Rajdhani', 'Rakkas', 'Raleway', 'Raleway Dots', 'Ramabhadra', 'Ramaraja', 'Rambla', 'Rammetto One', 'Ranchers', 'Rancho', 'Ranga', 'Rasa', 'Rationale', 'Ravi Prakash', 'Redressed', 'Reem Kufi', 'Reenie Beanie', 'Revalia', 'Rhodium Libre', 'Ribeye', 'Ribeye Marrow', 'Righteous', 'Risque', 'Roboto', 'Roboto Condensed', 'Roboto Mono', 'Roboto Slab', 'Rochester', 'Rock Salt', 'Rokkitt', 'Romanesco', 'Ropa Sans', 'Rosario', 'Rosarivo', 'Rouge Script', 'Rozha One', 'Rubik', 'Rubik Mono One', 'Ruda', 'Rufina', 'Ruge Boogie', 'Ruluko', 'Rum Raisin', 'Ruslan Display', 'Russo One', 'Ruthie', 'Rye', 'Sacramento', 'Sahitya', 'Sail', 'Saira', 'Saira Condensed', 'Saira Extra Condensed', 'Saira Semi Condensed', 'Salsa', 'Sanchez', 'Sancreek', 'Sansita', 'Sarabun', 'Sarala', 'Sarina', 'Sarpanch', 'Satisfy', 'Sawarabi Gothic', 'Sawarabi Mincho', 'Scada', 'Scheherazade', 'Schoolbell', 'Scope One', 'Seaweed Script', 'Secular One', 'Sedgwick Ave', 'Sedgwick Ave Display', 'Sevillana', 'Seymour One', 'Shadows Into Light', 'Shadows Into Light Two', 'Shanti', 'Share', 'Share Tech', 'Share Tech Mono', 'Shojumaru', 'Short Stack', 'Shrikhand', 'Siemreap', 'Sigmar One', 'Signika', 'Signika Negative', 'Simonetta', 'Sintony', 'Sirin Stencil', 'Six Caps', 'Skranji', 'Slabo 13px', 'Slabo 27px', 'Slackey', 'Smokum', 'Smythe', 'Sniglet', 'Snippet', 'Snowburst One', 'Sofadi One', 'Sofia', 'Song Myung', 'Sonsie One', 'Sorts Mill Goudy', 'Source Code Pro', 'Source Sans Pro', 'Source Serif Pro', 'Space Mono', 'Special Elite', 'Spectral', 'Spectral SC', 'Spicy Rice', 'Spinnaker', 'Spirax', 'Squada One', 'Sree Krushnadevaraya', 'Sriracha', 'Srisakdi', 'Staatliches', 'Stalemate', 'Stalinist One', 'Stardos Stencil', 'Stint Ultra Condensed', 'Stint Ultra Expanded', 'Stoke', 'Strait', 'Stylish', 'Sue Ellen Francisco', 'Suez One', 'Sumana', 'Sunflower', 'Sunshiney', 'Supermercado One', 'Sura', 'Suranna', 'Suravaram', 'Suwannaphum', 'Swanky and Moo Moo', 'Syncopate', 'Tajawal', 'Tangerine', 'Taprom', 'Tauri', 'Taviraj', 'Teko', 'Telex', 'Tenali Ramakrishna', 'Tenor Sans', 'Text Me One', 'Thasadith', 'The Girl Next Door', 'Tienne', 'Tillana', 'Timmana', 'Tinos', 'Titan One', 'Titillium Web', 'Trade Winds', 'Trirong', 'Trocchi', 'Trochut', 'Trykker', 'Tulpen One', 'Ubuntu', 'Ubuntu Condensed', 'Ubuntu Mono', 'Ultra', 'Uncial Antiqua', 'Underdog', 'Unica One', 'UnifrakturCook', 'UnifrakturMaguntia', 'Unkempt', 'Unlock', 'Unna', 'VT323', 'Vampiro One', 'Varela', 'Varela Round', 'Vast Shadow', 'Vesper Libre', 'Vibur', 'Vidaloka', 'Viga', 'Voces', 'Volkhov', 'Vollkorn', 'Vollkorn SC', 'Voltaire', 'Waiting for the Sunrise', 'Wallpoet', 'Walter Turncoat', 'Warnes', 'Wellfleet', 'Wendy One', 'Wire One', 'Work Sans', 'Yanone Kaffeesatz', 'Yantramanav', 'Yatra One', 'Yellowtail', 'Yeon Sung', 'Yeseva One', 'Yesteryear', 'Yrsa', 'ZCOOL KuaiLe', 'ZCOOL QingKe HuangYou', 'ZCOOL XiaoWei', 'Zeyada', 'Zilla Slab', 'Zilla Slab Highlight'] | |
| 2223 | - } | |
| 2224 | - | |
| 2225 | - var option = function(val, setVal){ | |
| 2226 | - var selected = (val != setVal) ? '' : 'selected="selected"'; | |
| 2227 | - var lang = pagelayer_empty(val) ? 'Default' : val; | |
| 2228 | - return '<option value="'+val+'" '+selected+'>'+ lang +'</option>'; | |
| 2229 | - } | |
| 2230 | - | |
| 2231 | - var font_option = function(val, setVal){ | |
| 2232 | - var selected = (val != setVal) ? '' : 'selected="selected"'; | |
| 2233 | - var lang = pagelayer_empty(val) ? 'Default' : val; | |
| 2234 | - return '<option style="font-family:'+lang+'" value="'+val+'" '+selected+'>'+ lang +'</option>'; | |
| 2235 | - } | |
| 2236 | - | |
| 2237 | - var div = '<span class="pagelayer-prop-edit"><i class="fa fa-pencil"></i></span>'+ | |
| 2238 | - '<div class="pagelayer-elp-typo-div">'+ | |
| 2239 | - '<div class="pagelayer-elp-typo pagelayer-elp-typo-fonts">'+ | |
| 2240 | - '<label class="pagelayer-elp-label">Font-Family</label>'+ | |
| 2241 | - '<select class="pagelayer-elp-typo-input">'; | |
| 2242 | - | |
| 2243 | - jQuery.each(select['fonts'],function(key, value){ | |
| 2244 | - div += font_option(value, val[0]); | |
| 2245 | - }); | |
| 2246 | - div +='</select>'+ | |
| 2247 | - '</div>'+ | |
| 2248 | - '<div class="pagelayer-elp-typo pagelayer-elp-typo-size">'+ | |
| 2249 | - '<label class="pagelayer-elp-label">Font-Size</label>'+ | |
| 2250 | - '<input class="pagelayer-elp-typo-input" type="number" max="200" min="0" step="1" value="'+val[1]+'"></input>'+ | |
| 2251 | - '</div>'+ | |
| 2252 | - '<div class="pagelayer-elp-typo pagelayer-elp-typo-style">'+ | |
| 2253 | - '<label class="pagelayer-elp-label">Font-Style</label>'+ | |
| 2254 | - '<select class="pagelayer-elp-typo-input">'; | |
| 2255 | - | |
| 2256 | - jQuery.each(select['style'],function(key, value){ | |
| 2257 | - div += option(value, val[2]); | |
| 2258 | - }); | |
| 2259 | - div +='</select>'+ | |
| 2260 | - '</div>'+ | |
| 2261 | - '<div class="pagelayer-elp-typo pagelayer-elp-typo-weight">'+ | |
| 2262 | - '<label class="pagelayer-elp-label">Font-Weight</label>'+ | |
| 2263 | - '<select class="pagelayer-elp-typo-input">'; | |
| 2264 | - jQuery.each(select['weight'],function(key, value){ | |
| 2265 | - div += option(value, val[3]); | |
| 2266 | - }); | |
| 2267 | - | |
| 2268 | - div += '</select>'+ | |
| 2269 | - '</div>'+ | |
| 2270 | - '<div class="pagelayer-elp-typo pagelayer-elp-typo-variant">'+ | |
| 2271 | - '<label class="pagelayer-elp-label">Font-variant</label>'+ | |
| 2272 | - '<select class="pagelayer-elp-typo-input">'; | |
| 2273 | - jQuery.each(select['variant'],function(key, value){ | |
| 2274 | - div += option(value, val[4]); | |
| 2275 | - }); | |
| 2276 | - | |
| 2277 | - div += '</select>'+ | |
| 2278 | - '</div>'+ | |
| 2279 | - '<div class="pagelayer-elp-typo pagelayer-elp-typo-deco-line">'+ | |
| 2280 | - '<label class="pagelayer-elp-label">Decoration Line</label>'+ | |
| 2281 | - '<select class="pagelayer-elp-typo-input">'; | |
| 2282 | - jQuery.each(select['deco-line'],function(key, value){ | |
| 2283 | - div += option(value, val[5]); | |
| 2284 | - }); | |
| 2285 | - | |
| 2286 | - div += '</select>'+ | |
| 2287 | - '</div>'+ | |
| 2288 | - '<div class="pagelayer-elp-typo pagelayer-elp-typo-deco-style">'+ | |
| 2289 | - '<label class="pagelayer-elp-label">Decoration Style</label>'+ | |
| 2290 | - '<select class="pagelayer-elp-typo-input">'; | |
| 2291 | - jQuery.each(select['deco-style'],function(key, value){ | |
| 2292 | - div += option(value, val[6]); | |
| 2293 | - }); | |
| 2294 | - | |
| 2295 | - div += '</select>'+ | |
| 2296 | - '</div>'+ | |
| 2297 | - '<div class="pagelayer-elp-typo pagelayer-elp-typo-height">'+ | |
| 2298 | - '<label class="pagelayer-elp-label">Line Height</label>'+ | |
| 2299 | - '<input class="pagelayer-elp-typo-input" type="number" max="15" min="0" step="0.1" value="'+val[7]+'"></input>'+ | |
| 2300 | - '</div>'+ | |
| 2301 | - '<div class="pagelayer-elp-typo pagelayer-elp-typo-transform">'+ | |
| 2302 | - '<label class="pagelayer-elp-label">Text Transform</label>'+ | |
| 2303 | - '<select class="pagelayer-elp-typo-input">'; | |
| 2304 | - jQuery.each(select['transform'],function(key, value){ | |
| 2305 | - div += option(value, val[8]); | |
| 2306 | - }); | |
| 2307 | - | |
| 2308 | - div += '</select>'+ | |
| 2309 | - '</div>'+ | |
| 2310 | - '<div class="pagelayer-elp-typo pagelayer-elp-typo-lspacing">'+ | |
| 2311 | - '<label class="pagelayer-elp-label">Letter Spacing</label>'+ | |
| 2312 | - '<input class="pagelayer-elp-typo-input" type="number" max="10" min="-10" step="0.1" value="'+val[9]+'"></input>'+ | |
| 2313 | - '</div>'+ | |
| 2314 | - '<div class="pagelayer-elp-typo pagelayer-elp-typo-wspacing">'+ | |
| 2315 | - '<label class="pagelayer-elp-label">Word Spacing</label>'+ | |
| 2316 | - '<input class="pagelayer-elp-typo-input" type="number" max="50" min="0" step="1" value="'+val[10]+'"></input>'+ | |
| 2317 | - '</div>'+ | |
| 2318 | - '</div>'; | |
| 2319 | - | |
| 2320 | - row.append(div); | |
| 2321 | - | |
| 2322 | - if(pagelayer_empty(val[5]) || val[5]=='none'){ | |
| 2323 | - row.find('.pagelayer-elp-typo-deco-style').hide(); | |
| 2324 | - } | |
| 2325 | - | |
| 2326 | - row.find('.pagelayer-prop-edit').on('click', function(){ | |
| 2327 | - row.find('.pagelayer-elp-typo-div').toggleClass('pagelayer-prop-show'); | |
| 2328 | - }); | |
| 2329 | - | |
| 2330 | - | |
| 2331 | - row.find('.pagelayer-elp-typo-input').on('change', function(){ | |
| 2332 | - val = []; | |
| 2333 | - row.find('.pagelayer-elp-typo-input').each(function(){ | |
| 2334 | - var value = jQuery(this).val(); | |
| 2335 | - val.push(value ? value : ''); | |
| 2336 | - }); | |
| 2337 | - _pagelayer_set_atts(row, val); | |
| 2338 | - }); | |
| 2339 | - | |
| 2340 | - row.find('.pagelayer-elp-typo-fonts select').on('change', function(){ | |
| 2341 | - | |
| 2342 | - var value = jQuery(this).val(); | |
| 2343 | - value = value.replace(' ', '+'); | |
| 2344 | - | |
| 2345 | - if(jQuery('#pagelayer-google-fonts').length == 0){ | |
| 2346 | - | |
| 2347 | - 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">'); | |
| 2348 | - | |
| 2349 | - }else{ | |
| 2350 | - | |
| 2351 | - var url = jQuery('#pagelayer-google-fonts').attr('href'); | |
| 2352 | - if(url.indexOf(value) == -1){ | |
| 2353 | - url = url+'|'+value+':100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i'; | |
| 2354 | - jQuery('#pagelayer-google-fonts').attr('href', url); | |
| 2355 | - } | |
| 2356 | - | |
| 2357 | - } | |
| 2358 | - | |
| 2359 | - }); | |
| 2360 | - | |
| 2361 | - row.find('.pagelayer-elp-typo-deco-line select').on('change', function(){ | |
| 2362 | - var value = jQuery(this).val(); | |
| 2363 | - if(pagelayer_empty(value) || value=='none'){ | |
| 2364 | - row.find('.pagelayer-elp-typo-deco-style').hide(); | |
| 2365 | - }else{ | |
| 2366 | - row.find('.pagelayer-elp-typo-deco-style').show(); | |
| 2367 | - } | |
| 2368 | - }); | |
| 2369 | - | |
| 2370 | -} | |
| 2371 | - | |
| 2372 | -// The dimension property | |
| 2373 | -function pagelayer_elp_dimension(row, prop){ | |
| 2374 | - | |
| 2375 | - var val = ['', '']; | |
| 2376 | - | |
| 2377 | - if(prop.c['val'].length > 0){ | |
| 2378 | - val = prop.c['val'].split(','); | |
| 2379 | - //console.log(val) | |
| 2380 | - } | |
| 2381 | - | |
| 2382 | - var div = '<div class="pagelayer-elp-dimension-div">'+ | |
| 2383 | - '<input type="number" class="pagelayer-elp-dimension" value="'+parseInt(val[0])+'"></input>'+ | |
| 2384 | - '<input type="number" class="pagelayer-elp-dimension" value="'+parseInt(val[1])+'"></input>'+ | |
| 2385 | - '<i class="fa fa-link" />'+ | |
| 2386 | - '</div>'; | |
| 2387 | - | |
| 2388 | - row.append(div); | |
| 2389 | - | |
| 2390 | - // Is the value linked ? | |
| 2391 | - var link = row.find('.pagelayer-elp-dimension-div .fa'); | |
| 2392 | - var isLinked = 1; | |
| 2393 | - var tmp_val = val[0]; | |
| 2394 | - | |
| 2395 | - for(var p_val in val){ | |
| 2396 | - | |
| 2397 | - // Check if unlinked | |
| 2398 | - if(tmp_val != val[p_val] ){ | |
| 2399 | - isLinked = 0; | |
| 2400 | - } | |
| 2401 | - tmp_val = val[p_val]; | |
| 2402 | - } | |
| 2403 | - | |
| 2404 | - if(isLinked){ | |
| 2405 | - link.addClass('pagelayer-elp-dimension-linked'); | |
| 2406 | - }else{ | |
| 2407 | - link.removeClass('pagelayer-elp-dimension-linked'); | |
| 2408 | - } | |
| 2409 | - | |
| 2410 | - // Handle link on click | |
| 2411 | - link.on('click', function(){ | |
| 2412 | - | |
| 2413 | - var linked = link.hasClass('pagelayer-elp-dimension-linked'); | |
| 2414 | - | |
| 2415 | - if(linked){ | |
| 2416 | - link.removeClass('pagelayer-elp-dimension-linked'); | |
| 2417 | - }else{ | |
| 2418 | - link.addClass('pagelayer-elp-dimension-linked'); | |
| 2419 | - } | |
| 2420 | - | |
| 2421 | - }); | |
| 2422 | - | |
| 2423 | - row.find('input').on('input', function(){ | |
| 2424 | - | |
| 2425 | - // Are the values linked | |
| 2426 | - var linked = row.find('.pagelayer-elp-dimension-div .fa').hasClass('pagelayer-elp-dimension-linked'); | |
| 2427 | - | |
| 2428 | - if(linked){ | |
| 2429 | - var val = jQuery(this).val(); | |
| 2430 | - row.find('input').each(function(){ | |
| 2431 | - jQuery(this).val(val); | |
| 2432 | - }); | |
| 2433 | - } | |
| 2434 | - | |
| 2435 | - var vals = []; | |
| 2436 | - | |
| 2437 | - // Get all values | |
| 2438 | - row.find('input').each(function(){ | |
| 2439 | - var val = jQuery(this).val(); | |
| 2440 | - vals.push(val ? val : 0); | |
| 2441 | - }); | |
| 2442 | - | |
| 2443 | - _pagelayer_set_atts(row, vals);// Save and Render | |
| 2444 | - }); | |
| 2445 | - | |
| 2446 | -}; | |
| 2447 | - | |
| 2448 | -// Select frame to upload media | |
| 2449 | -function pagelayer_select_frame(tag, state){ | |
| 2450 | - | |
| 2451 | - var state = state || ''; | |
| 2452 | - //console.log(state); | |
| 2453 | - | |
| 2454 | - var frame; | |
| 2455 | - | |
| 2456 | - switch(tag){ | |
| 2457 | - | |
| 2458 | - // Multi image selection frame | |
| 2459 | - case 'multi_image': | |
| 2460 | - | |
| 2461 | - frame = wp.media({ | |
| 2462 | - | |
| 2463 | - id: 'pagelayer-wp-multi-image-library', | |
| 2464 | - frame: 'post', | |
| 2465 | - state: state, | |
| 2466 | - title: pagelayer_l('frame_'+tag), | |
| 2467 | - multiple: true, | |
| 2468 | - library: wp.media.query({type: 'image'}), | |
| 2469 | - button: { | |
| 2470 | - text: pagelayer_l('insert') | |
| 2471 | - }, | |
| 2472 | - | |
| 2473 | - }); | |
| 2474 | - | |
| 2475 | - break; | |
| 2476 | - | |
| 2477 | - // Media selection frame | |
| 2478 | - case 'media': | |
| 2479 | - | |
| 2480 | - frame = wp.media({ | |
| 2481 | - | |
| 2482 | - id: 'pagelayer-wp-media-library', | |
| 2483 | - frame: 'post', | |
| 2484 | - state: 'pagelayer-media', | |
| 2485 | - title: pagelayer_l('frame_'+tag), | |
| 2486 | - multiple: false, | |
| 2487 | - states: [ | |
| 2488 | - new wp.media.controller.Library({ | |
| 2489 | - id: 'pagelayer-media', | |
| 2490 | - title: pagelayer_l('frame_'+tag), | |
| 2491 | - multiple: false, | |
| 2492 | - date: true | |
| 2493 | - }) | |
| 2494 | - ], | |
| 2495 | - button: { | |
| 2496 | - text: pagelayer_l('insert') | |
| 2497 | - }, | |
| 2498 | - | |
| 2499 | - }); | |
| 2500 | - | |
| 2501 | - break; | |
| 2502 | - | |
| 2503 | - //Default frame(for image, video, audio) | |
| 2504 | - default: | |
| 2505 | - | |
| 2506 | - frame = wp.media({ | |
| 2507 | - | |
| 2508 | - id: 'pagelayer-wp-'+tag+'-library', | |
| 2509 | - frame: 'post', | |
| 2510 | - state: 'pagelayer-'+tag, | |
| 2511 | - title: pagelayer_l('frame_'+tag), | |
| 2512 | - multiple: false, | |
| 2513 | - library: wp.media.query({type: tag}), | |
| 2514 | - states: [ | |
| 2515 | - new wp.media.controller.Library({ | |
| 2516 | - id: 'pagelayer-'+tag, | |
| 2517 | - title: pagelayer_l('frame_'+tag), | |
| 2518 | - library: wp.media.query( { type: tag } ), | |
| 2519 | - multiple: false, | |
| 2520 | - date: true | |
| 2521 | - }) | |
| 2522 | - ], | |
| 2523 | - button: { | |
| 2524 | - text: pagelayer_l('insert') | |
| 2525 | - }, | |
| 2526 | - | |
| 2527 | - }); | |
| 2528 | - | |
| 2529 | - break; | |
| 2530 | - } | |
| 2531 | - | |
| 2532 | - frame.on({ | |
| 2533 | - 'menu:render:default': function(view){ | |
| 2534 | - view.unset('insert'); | |
| 2535 | - view.unset('gallery'); | |
| 2536 | - view.unset('featured-image'); | |
| 2537 | - view.unset('playlist'); | |
| 2538 | - view.unset('video-playlist'); | |
| 2539 | - }, | |
| 2540 | - }, this); | |
| 2541 | - | |
| 2542 | - return frame; | |
| 2543 | - | |
| 2544 | -} | |
| 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', 'Å': 'A', 'Æ': 'AE', 'Ç': 'C', | |
| 4883 | + 'È': 'E', 'É': 'E', 'Ê': 'E', 'Ë': 'E', 'Ì': 'I', 'Í': 'I', 'Î': 'I', 'Ï': 'I', | |
| 4884 | + 'Ð': 'D', 'Ñ': 'N', 'Ò': 'O', 'Ó': 'O', 'Ô': 'O', 'Õ': 'O', 'Ö': 'O', 'Ő': 'O', | |
| 4885 | + 'Ø': 'O', 'Ù': 'U', 'Ú': 'U', 'Û': 'U', 'Ü': 'U', 'Ű': 'U', 'Ý': 'Y', 'Þ': 'TH', | |
| 4886 | + 'ß': 'ss', | |
| 4887 | + 'à': 'a', 'á': 'a', 'â': 'a', 'ã': 'a', 'ä': 'a', 'å': 'a', 'æ': 'ae', 'ç': 'c', | |
| 4888 | + 'è': 'e', 'é': 'e', 'ê': 'e', 'ë': 'e', 'ì': 'i', 'í': 'i', 'î': 'i', 'ï': 'i', | |
| 4889 | + 'ð': 'd', 'ñ': 'n', 'ò': 'o', 'ó': 'o', 'ô': 'o', 'õ': 'o', 'ö': 'o', 'ő': 'o', | |
| 4890 | + 'ø': 'o', 'ù': 'u', 'ú': 'u', 'û': 'u', 'ü': 'u', 'ű': 'u', 'ý': 'y', 'þ': 'th', | |
| 4891 | + 'ÿ': 'y', | |
| 4892 | + | |
| 4893 | + // Latin symbols | |
| 4894 | + '©': '(c)', | |
| 4895 | + | |
| 4896 | + // Greek | |
| 4897 | + 'Α': 'A', 'Β': 'B', 'Γ': 'G', 'Δ': 'D', 'Ε': 'E', 'Ζ': 'Z', 'Η': 'H', 'Θ': '8', | |
| 4898 | + 'Ι': 'I', 'Κ': 'K', 'Λ': 'L', 'Μ': 'M', 'Ν': 'N', 'Ξ': '3', 'Ο': 'O', 'Π': 'P', | |
| 4899 | + 'Ρ': 'R', 'Σ': 'S', 'Τ': 'T', 'Υ': 'Y', 'Φ': 'F', 'Χ': 'X', 'Ψ': 'PS', 'Ω': 'W', | |
| 4900 | + 'Ά': 'A', 'Έ': 'E', 'Ί': 'I', 'Ό': 'O', 'Ύ': 'Y', 'Ή': 'H', 'Ώ': 'W', 'Ϊ': 'I', | |
| 4901 | + 'Ϋ': 'Y', | |
| 4902 | + 'α': 'a', 'β': 'b', 'γ': 'g', 'δ': 'd', 'ε': 'e', 'ζ': 'z', 'η': 'h', 'θ': '8', | |
| 4903 | + 'ι': 'i', 'κ': 'k', 'λ': 'l', 'μ': 'm', 'ν': 'n', 'ξ': '3', 'ο': 'o', 'π': 'p', | |
| 4904 | + 'ρ': 'r', 'σ': 's', 'τ': 't', 'υ': 'y', 'φ': 'f', 'χ': 'x', 'ψ': 'ps', 'ω': 'w', | |
| 4905 | + 'ά': 'a', 'έ': 'e', 'ί': 'i', 'ό': 'o', 'ύ': 'y', 'ή': 'h', 'ώ': 'w', 'ς': 's', | |
| 4906 | + 'ϊ': 'i', 'ΰ': 'y', 'ϋ': 'y', 'ΐ': 'i', | |
| 4907 | + | |
| 4908 | + // Turkish | |
| 4909 | + 'Ş': 'S', 'İ': 'I', 'Ç': 'C', 'Ü': 'U', 'Ö': 'O', 'Ğ': 'G', | |
| 4910 | + 'ş': 's', 'ı': 'i', 'ç': 'c', 'ü': 'u', 'ö': 'o', 'ğ': 'g', | |
| 4911 | + | |
| 4912 | + // Russian | |
| 4913 | + 'А': 'A', 'Б': 'B', 'В': 'V', 'Г': 'G', 'Д': 'D', 'Е': 'E', 'Ё': 'Yo', 'Ж': 'Zh', | |
| 4914 | + 'З': 'Z', 'И': 'I', 'Й': 'J', 'К': 'K', 'Л': 'L', 'М': 'M', 'Н': 'N', 'О': 'O', | |
| 4915 | + 'П': 'P', 'Р': 'R', 'С': 'S', 'Т': 'T', 'У': 'U', 'Ф': 'F', 'Х': 'H', 'Ц': 'C', | |
| 4916 | + 'Ч': 'Ch', 'Ш': 'Sh', 'Щ': 'Sh', 'Ъ': '', 'Ы': 'Y', 'Ь': '', 'Э': 'E', 'Ю': 'Yu', | |
| 4917 | + 'Я': 'Ya', | |
| 4918 | + 'а': 'a', 'б': 'b', 'в': 'v', 'г': 'g', 'д': 'd', 'е': 'e', 'ё': 'yo', 'ж': 'zh', | |
| 4919 | + 'з': 'z', 'и': 'i', 'й': 'j', 'к': 'k', 'л': 'l', 'м': 'm', 'н': 'n', 'о': 'o', | |
| 4920 | + 'п': 'p', 'р': 'r', 'с': 's', 'т': 't', 'у': 'u', 'ф': 'f', 'х': 'h', 'ц': 'c', | |
| 4921 | + 'ч': 'ch', 'ш': 'sh', 'щ': 'sh', 'ъ': '', 'ы': 'y', 'ь': '', 'э': 'e', 'ю': 'yu', | |
| 4922 | + 'я': 'ya', | |
| 4923 | + | |
| 4924 | + // Ukrainian | |
| 4925 | + 'Є': 'Ye', 'І': 'I', 'Ї': 'Yi', 'Ґ': 'G', | |
| 4926 | + 'є': 'ye', 'і': 'i', 'ї': 'yi', 'ґ': 'g', | |
| 4927 | + | |
| 4928 | + // Czech | |
| 4929 | + 'Č': 'C', 'Ď': 'D', 'Ě': 'E', 'Ň': 'N', 'Ř': 'R', 'Š': 'S', 'Ť': 'T', 'Ů': 'U', | |
| 4930 | + 'Ž': 'Z', | |
| 4931 | + 'č': 'c', 'ď': 'd', 'ě': 'e', 'ň': 'n', 'ř': 'r', 'š': 's', 'ť': 't', 'ů': 'u', | |
| 4932 | + 'ž': 'z', | |
| 4933 | + | |
| 4934 | + // Polish | |
| 4935 | + 'Ą': 'A', 'Ć': 'C', 'Ę': 'e', 'Ł': 'L', 'Ń': 'N', 'Ó': 'o', 'Ś': 'S', 'Ź': 'Z', | |
| 4936 | + 'Ż': 'Z', | |
| 4937 | + 'ą': 'a', 'ć': 'c', 'ę': 'e', 'ł': 'l', 'ń': 'n', 'ó': 'o', 'ś': 's', 'ź': 'z', | |
| 4938 | + 'ż': 'z', | |
| 4939 | + | |
| 4940 | + // Latvian | |
| 4941 | + 'Ā': 'A', 'Č': 'C', 'Ē': 'E', 'Ģ': 'G', 'Ī': 'i', 'Ķ': 'k', 'Ļ': 'L', 'Ņ': 'N', | |
| 4942 | + 'Š': 'S', 'Ū': 'u', 'Ž': 'Z', | |
| 4943 | + 'ā': 'a', 'č': 'c', 'ē': 'e', 'ģ': 'g', 'ī': 'i', 'ķ': 'k', 'ļ': 'l', 'ņ': 'n', | |
| 4944 | + 'š': 's', 'ū': 'u', 'ž': 'z' | |
| 4945 | + }; | |
| 4946 | + | |
| 4947 | + for(var k in char_map) { | |
| 4948 | + str = str.replace(new RegExp(k, 'g'), char_map[k]); | |
| 4949 | + } | |
| 4950 | + | |
| 4951 | + str = str.replace('.', '-')// replace a dot by a dash | |
| 4952 | + .replace(/[^a-z0-9 -]/g, '') // remove invalid chars | |
| 4953 | + .replace(/\s+/g, '-') // collapse whitespace and replace by a dash | |
| 4954 | + .replace(/-+/g, '-') // collapse dashes | |
| 4955 | + .replace( /\//g, '' ); // collapse all forward-slashes | |
| 4956 | + | |
| 4957 | + return str; | |
| 4958 | + } | |
| 4959 | + | |
| 4960 | + var editSlug = function(jEle, val){ | |
| 4961 | + | |
| 4962 | + // Convert to slug | |
| 4963 | + val = string_to_slug(val); | |
| 4964 | + | |
| 4965 | + var new_link = link+'/'+val; | |
| 4966 | + var a = row.find('a'); | |
| 4967 | + a.html(new_link); | |
| 4968 | + jEle.val(val); | |
| 4969 | + | |
| 4970 | + return val; | |
| 4971 | + } | |
| 4972 | + | |
| 4973 | + var input = row.find('input'); | |
| 4974 | + | |
| 4975 | + if(pagelayer_empty(prop.c['val'])){ | |
| 4976 | + editSlug(input, pagelayer_post.post_title); | |
| 4977 | + | |
| 4978 | + input.on('focusin', function(){ | |
| 4979 | + if(!pagelayer_empty(pagelayer_get_att(prop.el.$, prop.c['name']))){ | |
| 4980 | + return; | |
| 4981 | + } | |
| 4982 | + | |
| 4983 | + editSlug(input, pagelayer_get_att(prop.el.$, 'post_title')); | |
| 4984 | + }); | |
| 4985 | + } | |
| 4986 | + | |
| 4987 | + input.on('focusout', function(){ | |
| 4988 | + var val = jQuery(this).val(); | |
| 4989 | + val = editSlug(jQuery(this), val); | |
| 4990 | + | |
| 4991 | + if(pagelayer_empty(pagelayer_get_att(prop.el.$, prop.c['name']))){ | |
| 4992 | + return; | |
| 4993 | + } | |
| 4994 | + _pagelayer_set_atts(row, val);// Save and Render | |
| 4995 | + }); | |
| 4996 | + | |
| 4997 | + input.on('input', function(){ | |
| 4998 | + var new_link = link+'/'+jQuery(this).val(); | |
| 4999 | + var a = row.find('a'); | |
| 5000 | + a.html(new_link); | |
| 5001 | + _pagelayer_set_atts(row, jQuery(this).val());// Save and Render | |
| 5002 | + }); | |
| 5003 | +} | |
| 5004 | + | |
| 5005 | +// The Datetime Property | |
| 5006 | +function pagelayer_elp_postDate(row, prop){ | |
| 5007 | + | |
| 5008 | + var date_array = prop.c['val'].split(" "); | |
| 5009 | + | |
| 5010 | + var div = '<div class="pagelayer-elp-postdate-div">'+ | |
| 5011 | + '<input type="date" class="pagelayer-elp-postdate" name="'+prop.c['name']+'" value="'+date_array[0]+'" />'+ | |
| 5012 | + '<input type="time" class="pagelayer-elp-postdate" name="'+prop.c['name']+'" value="'+date_array[1]+'" />'+ | |
| 5013 | + '</div>'; | |
| 5014 | + | |
| 5015 | + row.append(div); | |
| 5016 | + | |
| 5017 | + row.find('.pagelayer-elp-postdate-div').on('change', function(){ | |
| 5018 | + var date_string = jQuery(this).children().eq(0).val() +' '+ jQuery(this).children().eq(1).val(); | |
| 5019 | + _pagelayer_set_atts(row, date_string);// Save and Render | |
| 5020 | + }); | |
| 5021 | + | |
| 5022 | +}; | |
| 5023 | + | |
| 5024 | +// The button Property | |
| 5025 | +function pagelayer_elp_trashButton(row, prop){ | |
| 5026 | + | |
| 5027 | + var div = '<div class="pagelayer-elp-trash-button-div">'+ | |
| 5028 | + '<button class="pagelayer-elp-trash-button">Move to trash</button>'+ | |
| 5029 | + '</div>'; | |
| 5030 | + | |
| 5031 | + row.append(div); | |
| 5032 | + | |
| 5033 | + row.find('.pagelayer-elp-trash-button').on('click', function(event){ | |
| 5034 | + event.preventDefault(); | |
| 5035 | + if(!confirm(pagelayer_l('delete_post_conf'))){ | |
| 5036 | + return; | |
| 5037 | + } | |
| 5038 | + //console.log(pagelayer_postID); | |
| 5039 | + jQuery.ajax({ | |
| 5040 | + url: pagelayer_ajax_url+'&action=pagelayer_trash_post', | |
| 5041 | + type: 'post', | |
| 5042 | + dataType: 'json', | |
| 5043 | + data: { | |
| 5044 | + pagelayer_nonce: pagelayer_ajax_nonce, | |
| 5045 | + 'postid': pagelayer_postID | |
| 5046 | + }, | |
| 5047 | + success: function(resp){ | |
| 5048 | + | |
| 5049 | + if('error' in resp){ | |
| 5050 | + alert(resp.error); | |
| 5051 | + } | |
| 5052 | + | |
| 5053 | + if('url' in resp){ | |
| 5054 | + window.top.location.href = resp.url; | |
| 5055 | + } | |
| 5056 | + } | |
| 5057 | + }); | |
| 5058 | + }); | |
| 5059 | + | |
| 5060 | +}; | |
| 5061 | + | |
| 5062 | +// The Menus list property | |
| 5063 | +function pagelayer_elp_menus(row, prop){ | |
| 5064 | + | |
| 5065 | + var jEle = prop.el.$; | |
| 5066 | + var options = ''; | |
| 5067 | + var option = function(val, lang){ | |
| 5068 | + var selected = (val != prop.c['val']) ? '' : 'selected="selected"'; | |
| 5069 | + return '<option class="pagelayer-elp-select-option" value="'+val+'" '+selected+'>'+lang+'</option>'; | |
| 5070 | + } | |
| 5071 | + | |
| 5072 | + for(x in prop['list']){ | |
| 5073 | + | |
| 5074 | + // Single item | |
| 5075 | + if(typeof prop['list'][x] == 'string'){ | |
| 5076 | + options += option(x, prop['list'][x]); | |
| 5077 | + | |
| 5078 | + // Groups | |
| 5079 | + }else{ | |
| 5080 | + options += '<optgroup label="'+x+'">'; | |
| 5081 | + | |
| 5082 | + for(var y in prop['list'][x]){ | |
| 5083 | + options += option(y, prop['list'][x][y]); | |
| 5084 | + } | |
| 5085 | + | |
| 5086 | + options += '</optgroup>'; | |
| 5087 | + } | |
| 5088 | + } | |
| 5089 | + | |
| 5090 | + var div = '<div class="pagelayer-elp-select-div pagelayer-elp-pos-rel">'+ | |
| 5091 | + '<select class="pagelayer-elp-select pagelayer-elp-select-menus" name="'+prop.c['name']+'">'+options+'</select>'+ | |
| 5092 | + '</div>'+ | |
| 5093 | + '<div class="pagelayer-elp-menu-items-holder pagelayer-elp-pos-rel"></div>'; | |
| 5094 | + | |
| 5095 | + row.append(div); | |
| 5096 | + | |
| 5097 | + // Show the properties of the existing things | |
| 5098 | + var show_item = function(item, child_elements, depth){ | |
| 5099 | + | |
| 5100 | + depth = depth || 0; | |
| 5101 | + | |
| 5102 | + var title = item['title'] || ''; | |
| 5103 | + | |
| 5104 | + // Create the HTML | |
| 5105 | + var holder = jQuery('<div class="pagelayer-elp-group-item pagelayer-menu-depth-'+depth+'" pagelayer-menu-item="'+item['ID']+'">'+ | |
| 5106 | + '<div class="pagelayer-elp-group-item-head">'+ | |
| 5107 | + '<span class="pagelayer-elp-group-item-drag"><i class="pli pli-menu" ></i></span>'+ | |
| 5108 | + '<span class="pagelayer-elp-group-item-title">'+title+'</span>'+ | |
| 5109 | + '</div>'+ | |
| 5110 | + '<div class="pagelayer-elp-group-item-body"></div>'+ | |
| 5111 | + '<div class="menu-item-transport"></div>'+ | |
| 5112 | + '</div>'); | |
| 5113 | + | |
| 5114 | + // Append to the row | |
| 5115 | + row.find('.pagelayer-elp-menu-items-holder').append(holder); | |
| 5116 | + | |
| 5117 | + // Setup the toggle | |
| 5118 | + holder.find('.pagelayer-elp-group-item-head').first().on('click', function(e){ | |
| 5119 | + if(jQuery(e.target).closest('.pagelayer-elp-group-item-clone, .pagelayer-elp-group-item-del, .pagelayer-elp-group-item-drag').length > 0){ | |
| 5120 | + return; | |
| 5121 | + } | |
| 5122 | + | |
| 5123 | + var editArea = jEle.find('.pagelayer-mega-editor-'+item['ID']); | |
| 5124 | + var child = editArea.find('[pagelayer-tag="pl_nav_menu_item"]'); | |
| 5125 | + var cid; | |
| 5126 | + | |
| 5127 | + if(child.length < 1){ | |
| 5128 | + | |
| 5129 | + // First add the element inside the group element | |
| 5130 | + var _child = jQuery('<div pagelayer-tag="pl_nav_menu_item"></div>'); | |
| 5131 | + | |
| 5132 | + editArea.append(_child); | |
| 5133 | + | |
| 5134 | + cid = pagelayer_onadd(_child, false); | |
| 5135 | + | |
| 5136 | + child = jQuery('[pagelayer-id='+cid+']'); | |
| 5137 | + | |
| 5138 | + // Set Attributes | |
| 5139 | + pagelayer_set_atts(child, item); | |
| 5140 | + }else{ | |
| 5141 | + cid = pagelayer_id(child); | |
| 5142 | + } | |
| 5143 | + | |
| 5144 | + var rEle = holder.find('.pagelayer-elp-group-item-body').first(); | |
| 5145 | + | |
| 5146 | + holder.attr('pagelayer-group-item-id', cid); | |
| 5147 | + | |
| 5148 | + // If the props are not already setup | |
| 5149 | + if(rEle.html().length < 1){ | |
| 5150 | + pagelayer_elpd_generate(jQuery('[pagelayer-id="'+cid+'"]'), rEle); | |
| 5151 | + | |
| 5152 | + // Change the group item title | |
| 5153 | + var tmp_title = holder.find('[pagelayer-elp-name="'+item['title']+'"] [name="'+item['title']+'"]'); | |
| 5154 | + | |
| 5155 | + if(tmp_title.length > 0){ | |
| 5156 | + jQuery(tmp_title).on('input', function(){ | |
| 5157 | + holder.find('.pagelayer-elp-group-item-title').html(tmp_title.val()); | |
| 5158 | + }); | |
| 5159 | + } | |
| 5160 | + } | |
| 5161 | + | |
| 5162 | + if(!rEle.is(':visible')){ | |
| 5163 | + jQuery('.pagelayer-active-mega-menu').removeClass('pagelayer-active-mega-menu'); | |
| 5164 | + jEle.find('.pagelayer-mega-menu-item.menu-item-'+item['ID']).addClass('pagelayer-active-mega-menu'); | |
| 5165 | + } | |
| 5166 | + | |
| 5167 | + rEle.slideToggle(); | |
| 5168 | + }); | |
| 5169 | + | |
| 5170 | + // Add child elements | |
| 5171 | + if(!pagelayer_empty(child_elements[item['ID']])){ | |
| 5172 | + | |
| 5173 | + depth++; | |
| 5174 | + | |
| 5175 | + for(var i in child_elements[item['ID']]){ | |
| 5176 | + show_item(child_elements[item['ID']][i], child_elements, depth); | |
| 5177 | + } | |
| 5178 | + } | |
| 5179 | + | |
| 5180 | + holder.on('change', 'select[name="menu_type"]', function(){ | |
| 5181 | + var mType = jQuery(this).val(); | |
| 5182 | + var rowGroup = holder.find('[pagelayer-elp-name="element"]'); | |
| 5183 | + | |
| 5184 | + if(mType != 'mega' || rowGroup.find('.pagelayer-elp-group-div .pagelayer-elp-group-item').length > 0){ | |
| 5185 | + return; | |
| 5186 | + } | |
| 5187 | + | |
| 5188 | + rowGroup.find('.pagelayer-elp-button').click(); | |
| 5189 | + | |
| 5190 | + }); | |
| 5191 | + }; | |
| 5192 | + | |
| 5193 | + var createItemsList = function(menuID){ | |
| 5194 | + | |
| 5195 | + // Remove previous items | |
| 5196 | + row.find('.pagelayer-elp-menu-items-holder').empty(); | |
| 5197 | + | |
| 5198 | + if(!(menuID in pagelayer_menus_items_list)){ | |
| 5199 | + return; | |
| 5200 | + } | |
| 5201 | + | |
| 5202 | + var $elements = pagelayer_menus_items_list[menuID]; | |
| 5203 | + var top_level_elements = []; | |
| 5204 | + var children_elements = []; | |
| 5205 | + | |
| 5206 | + for($e in $elements){ | |
| 5207 | + | |
| 5208 | + // Make a referrer of each menu | |
| 5209 | + pagelayer_menus_items_ref[$elements[$e]['ID']] = $elements[$e]; | |
| 5210 | + | |
| 5211 | + if ( pagelayer_empty( $elements[$e]['menu_item_parent'] ) ) { | |
| 5212 | + top_level_elements.push($elements[$e]); | |
| 5213 | + } else { | |
| 5214 | + if(pagelayer_empty(children_elements[ $elements[$e]['menu_item_parent'] ])){ | |
| 5215 | + children_elements[ $elements[$e]['menu_item_parent'] ] = []; | |
| 5216 | + } | |
| 5217 | + children_elements[ $elements[$e]['menu_item_parent'] ].push($elements[$e]); | |
| 5218 | + } | |
| 5219 | + } | |
| 5220 | + | |
| 5221 | + for(var i in top_level_elements){ | |
| 5222 | + show_item(top_level_elements[i], children_elements, 0); | |
| 5223 | + } | |
| 5224 | + | |
| 5225 | + } | |
| 5226 | + | |
| 5227 | + createItemsList(prop.c['val']); | |
| 5228 | + | |
| 5229 | + row.find('select.pagelayer-elp-select-menus').on('change', function(){ | |
| 5230 | + | |
| 5231 | + var ID = jQuery(this).val(); | |
| 5232 | + | |
| 5233 | + // Load Menu list | |
| 5234 | + createItemsList(ID); | |
| 5235 | + | |
| 5236 | + _pagelayer_set_atts(row, ID);// Save and Render | |
| 5237 | + | |
| 5238 | + }); | |
| 5239 | + | |
| 5240 | +} | |
| 5241 | + | |
| 5242 | +// Select frame to upload media | |
| 5243 | +function pagelayer_select_frame(tag, state){ | |
| 5244 | + | |
| 5245 | + var state = state || ''; | |
| 5246 | + //console.log(state); | |
| 5247 | + | |
| 5248 | + var frame; | |
| 5249 | + | |
| 5250 | + switch(tag){ | |
| 5251 | + | |
| 5252 | + // Multi image selection frame | |
| 5253 | + case 'multi_image': | |
| 5254 | + | |
| 5255 | + frame = wp.media({ | |
| 5256 | + | |
| 5257 | + id: 'pagelayer-wp-multi-image-library', | |
| 5258 | + frame: 'post', | |
| 5259 | + state: state, | |
| 5260 | + title: pagelayer_l('frame_multi_image'), | |
| 5261 | + multiple: true, | |
| 5262 | + library: wp.media.query({type: 'image'}), | |
| 5263 | + button: { | |
| 5264 | + text: pagelayer_l('insert') | |
| 5265 | + }, | |
| 5266 | + | |
| 5267 | + }); | |
| 5268 | + | |
| 5269 | + break; | |
| 5270 | + | |
| 5271 | + // Media selection frame | |
| 5272 | + case 'media': | |
| 5273 | + | |
| 5274 | + frame = wp.media({ | |
| 5275 | + | |
| 5276 | + id: 'pagelayer-wp-media-library', | |
| 5277 | + frame: 'post', | |
| 5278 | + state: 'pagelayer-media', | |
| 5279 | + title: pagelayer_l('frame_media'), | |
| 5280 | + multiple: false, | |
| 5281 | + states: [ | |
| 5282 | + new wp.media.controller.Library({ | |
| 5283 | + id: 'pagelayer-media', | |
| 5284 | + title: pagelayer_l('frame_media'), | |
| 5285 | + multiple: false, | |
| 5286 | + date: true | |
| 5287 | + }) | |
| 5288 | + ], | |
| 5289 | + button: { | |
| 5290 | + text: pagelayer_l('insert') | |
| 5291 | + }, | |
| 5292 | + | |
| 5293 | + }); | |
| 5294 | + | |
| 5295 | + break; | |
| 5296 | + | |
| 5297 | + //Default frame(for image, video, audio) | |
| 5298 | + default: | |
| 5299 | + | |
| 5300 | + frame = wp.media({ | |
| 5301 | + | |
| 5302 | + id: 'pagelayer-wp-'+tag+'-library', | |
| 5303 | + frame: 'post', | |
| 5304 | + state: 'pagelayer-'+tag, | |
| 5305 | + title: pagelayer_l('frame_media'), | |
| 5306 | + multiple: false, | |
| 5307 | + library: wp.media.query({type: tag}), | |
| 5308 | + states: [ | |
| 5309 | + new wp.media.controller.Library({ | |
| 5310 | + id: 'pagelayer-'+tag, | |
| 5311 | + title: pagelayer_l('frame_media'), | |
| 5312 | + library: wp.media.query( { type: tag } ), | |
| 5313 | + multiple: false, | |
| 5314 | + date: true | |
| 5315 | + }) | |
| 5316 | + ], | |
| 5317 | + button: { | |
| 5318 | + text: pagelayer_l('insert') | |
| 5319 | + }, | |
| 5320 | + | |
| 5321 | + }); | |
| 5322 | + | |
| 5323 | + break; | |
| 5324 | + } | |
| 5325 | + | |
| 5326 | + frame.on({ | |
| 5327 | + 'menu:render:default': function(view){ | |
| 5328 | + view.unset('insert'); | |
| 5329 | + view.unset('gallery'); | |
| 5330 | + view.unset('featured-image'); | |
| 5331 | + view.unset('playlist'); | |
| 5332 | + view.unset('video-playlist'); | |
| 5333 | + }, | |
| 5334 | + }, this); | |
| 5335 | + | |
| 5336 | + return frame; | |
| 5337 | + | |
| 5338 | +} | |
| 5339 | + | |
| 5340 | +// function to show default button | |
| 5341 | +function pagelayer_show_default_button(row, prop, value){ | |
| 5342 | + | |
| 5343 | + // Default button is visible or not | |
| 5344 | + if(row.find('.pagelayer-elp-default').attr('data_show')){ | |
| 5345 | + return; | |
| 5346 | + } | |
| 5347 | + | |
| 5348 | + // value is an object or not | |
| 5349 | + if(typeof value == 'object'){ | |
| 5350 | + // Checking value for NaN, empty and default. | |
| 5351 | + | |
| 5352 | + for(var i = 0; i < pagelayer_length(value); i++){ | |
| 5353 | + if(value[i]!= prop.default && value[i] == value[i] && value[i] != ''){ | |
| 5354 | + row.find('.pagelayer-elp-default').attr('data_show',true); | |
| 5355 | + break; | |
| 5356 | + } | |
| 5357 | + } | |
| 5358 | + }else{ | |
| 5359 | + if('default' in prop && value!=prop.default){ | |
| 5360 | + row.find('.pagelayer-elp-default').attr('data_show',true); | |
| 5361 | + }else if(value!=prop.default && value==value && value!=''){ | |
| 5362 | + row.find('.pagelayer-elp-default').attr('data_show',true); | |
| 5363 | + } | |
| 5364 | + } | |
| 5365 | +} | |
| 5366 | + | |
| 5367 | +// Function which checks the properties to not to show default button | |
| 5368 | +function pagelayer_properties_filter(property){ | |
| 5369 | + var propTypeDefault = ['image', 'text', 'editor', 'textarea', 'checkbox', 'access', 'modal', 'group', 'radio', 'postCategory', 'postTags', 'postDate', 'gradient']; | |
| 5370 | + | |
| 5371 | + return (jQuery.inArray(property, propTypeDefault) == -1) | |
| 5372 | +} | |
| 5373 | + | |
| 5374 | +// Link font family | |
| 5375 | +function pagelayer_link_font_family(sEle){ | |
| 5376 | + | |
| 5377 | + var value = sEle.val(); | |
| 5378 | + | |
| 5379 | + if(sEle.val() == 'Default'){ | |
| 5380 | + return; | |
| 5381 | + } | |
| 5382 | + | |
| 5383 | + value = value.replace(' ', '+'); | |
| 5384 | + var t = sEle.find("option:selected").attr('type'); | |
| 5385 | + switch(t){ | |
| 5386 | + case 'google': | |
| 5387 | + if(jQuery('#pagelayer-google-fonts').length == 0){ | |
| 5388 | + if(value==''){ | |
| 5389 | + return; | |
| 5390 | + } | |
| 5391 | + 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">'); | |
| 5392 | + | |
| 5393 | + }else{ | |
| 5394 | + var url = jQuery('#pagelayer-google-fonts').attr('href'); | |
| 5395 | + if(url.indexOf(value) == -1){ | |
| 5396 | + url = url+'|'+value+':100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i'; | |
| 5397 | + jQuery('#pagelayer-google-fonts').attr('href', url); | |
| 5398 | + } | |
| 5399 | + } | |
| 5400 | + break; | |
| 5401 | + | |
| 5402 | + case 'custom': | |
| 5403 | + if(!pagelayer_empty(jQuery('style[id='+value+'_plf]').length)){ | |
| 5404 | + break; | |
| 5405 | + } | |
| 5406 | + jQuery.ajax({ | |
| 5407 | + url: pagelayer_ajax_url+'&action=pagelayer_custom_font', | |
| 5408 | + type: 'POST', | |
| 5409 | + dataType: 'json', | |
| 5410 | + data: { | |
| 5411 | + 'pagelayer_nonce': pagelayer_ajax_nonce, | |
| 5412 | + 'font_name': value | |
| 5413 | + }, | |
| 5414 | + success: function(data) { | |
| 5415 | + if('style' in data){ | |
| 5416 | + jQuery('body').append(data['style']); | |
| 5417 | + } | |
| 5418 | + } | |
| 5419 | + }); | |
| 5420 | + break; | |
| 5421 | + } | |
| 5422 | +} | |
