| @@ -10,8 +10,11 @@ | ||
| 10 | 10 | |
| 11 | 11 | // The active pagelayer element |
| 12 | 12 | var pagelayer_active_tab = {}; |
| 13 | 13 | |
| 14 | +// The menu items refrence | |
| 15 | +var pagelayer_menus_items_ref = {}; | |
| 16 | + | |
| 14 | 17 | // Loads the Data |
| 15 | 18 | function pagelayer_data(jEle, clean){ |
| 16 | 19 | |
| 17 | 20 | var ret = new Object(); |
| @@ -17,25 +20,17 @@ | ||
| 17 | 20 | var ret = new Object(); |
| 18 | 21 | |
| 19 | 22 | // Get the data |
| 20 | 23 | ret.tag = pagelayer_tag(jEle); |
| 21 | - ret.id = jEle.attr('pagelayer-id'); | |
| 24 | + ret.id = pagelayer_id(jEle); | |
| 22 | 25 | ret.$ = jEle; |
| 23 | 26 | |
| 27 | + var ref_data = pagelayer_el_data_ref(jEle); | |
| 28 | + | |
| 24 | 29 | // Parse the attributes |
| 25 | - ret.atts = new Object(); | |
| 26 | - ret.tmp = new Object(); | |
| 30 | + ret.atts = JSON.parse(JSON.stringify(ref_data['attr'])); | |
| 31 | + ret.tmp = JSON.parse(JSON.stringify(ref_data['tmp'])); | |
| 27 | 32 | |
| 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 | 33 | //console.log(ret.atts); |
| 39 | 34 | //console.log(ret.tmp); |
| 40 | 35 | |
| 41 | 36 | clean = clean || false; |
| @@ -47,8 +42,16 @@ | ||
| 47 | 42 | |
| 48 | 43 | // Anything to set ? |
| 49 | 44 | ret.set = {}; |
| 50 | 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 | + | |
| 51 | 54 | // All props |
| 52 | 55 | var all_props = pagelayer_shortcodes[tag]; |
| 53 | 56 | |
| 54 | 57 | // Loop through all props |
| @@ -54,11 +57,21 @@ | ||
| 54 | 57 | // Loop through all props |
| 55 | 58 | for(var i in pagelayer_tabs){ |
| 56 | 59 | |
| 57 | 60 | var tab = pagelayer_tabs[i]; |
| 58 | - | |
| 61 | + | |
| 62 | + section_loop1: | |
| 59 | 63 | for(var section in all_props[tab]){ |
| 60 | 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 | + | |
| 61 | 74 | var props = section in pagelayer_shortcodes[tag] ? pagelayer_shortcodes[tag][section] : pagelayer_styles[section]; |
| 62 | 75 | |
| 63 | 76 | // In case of widgets its possible ! |
| 64 | 77 | if(pagelayer_empty(props)){ |
| @@ -67,12 +80,43 @@ | ||
| 67 | 80 | |
| 68 | 81 | for(var x in props){ |
| 69 | 82 | |
| 70 | 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 | + } | |
| 71 | 90 | |
| 72 | 91 | // Are we to set this value ? |
| 73 | 92 | if(!(x in ret.atts) && 'default' in prop && !pagelayer_empty(prop['default'])){ |
| 74 | - ret.set[x] = 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 | + } | |
| 75 | 119 | } |
| 76 | 120 | |
| 77 | 121 | if(!('req' in prop)){ |
| 78 | 122 | continue; |
| @@ -127,12 +171,9 @@ | ||
| 127 | 171 | |
| 128 | 172 | // Are we to show ? |
| 129 | 173 | if(!toShow){ |
| 130 | 174 | //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]; | |
| 175 | + pagelayer_delete_atts(x); | |
| 135 | 176 | } |
| 136 | 177 | } |
| 137 | 178 | } |
| 138 | 179 | } |
| @@ -150,12 +191,13 @@ | ||
| 150 | 191 | // pagelayer-ELPD - Element Properties Dialog |
| 151 | 192 | pagelayer_elpd_html = '<div class="pagelayer-elpd-tabs">'+ |
| 152 | 193 | '<div class="pagelayer-elpd-tab" pagelayer-elpd-tab="settings" pagelayer-elpd-active-tab=1>Settings</div>'+ |
| 153 | 194 | //'<div class="pagelayer-elpd-tab" pagelayer-elpd-tab="styles">Style</div>'+ |
| 154 | - '<div class="pagelayer-elpd-tab" pagelayer-elpd-tab="options">Options</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>'+ | |
| 155 | 197 | '<div class="pagelayer-elpd-options">'+ |
| 156 | - '<i class="fa fa-clone" />'+ | |
| 157 | - '<i class="fa fa-trash" />'+ | |
| 198 | + '<i class="pli pli-clone" ></i>'+ | |
| 199 | + '<i class="pli pli-trashcan" ></i>'+ | |
| 158 | 200 | '</div>'+ |
| 159 | 201 | '</div>'+ |
| 160 | 202 | '<div class="pagelayer-elpd-body"></div>'+ |
| 161 | 203 | '<div class="pagelayer-elpd-holder"></div>'; |
| @@ -165,8 +207,9 @@ | ||
| 165 | 207 | pagelayer_elpd = pagelayer.$$('#pagelayer-elpd'); |
| 166 | 208 | |
| 167 | 209 | pagelayer.$$('.pagelayer-elpd-close').on('click', function(){ |
| 168 | 210 | pagelayer_leftbar_tab('pagelayer-shortcodes'); |
| 211 | + pagelayer.$$('[pagelayer-widget-tab="widgets"]').click(); | |
| 169 | 212 | pagelayer.$$('.pagelayer-elpd-header').hide(); |
| 170 | 213 | pagelayer.$$('.pagelayer-logo').show(); |
| 171 | 214 | pagelayer.$$('.pagelayer-elpd-body').removeAttr('pagelayer-element-id').empty(); |
| 172 | 215 | pagelayer_active = {}; |
| @@ -172,26 +215,53 @@ | ||
| 172 | 215 | pagelayer_active = {}; |
| 173 | 216 | }); |
| 174 | 217 | |
| 175 | 218 | // Copy |
| 176 | - pagelayer.$$('.pagelayer-elpd-options>.fa-clone').on('click', function(){ | |
| 219 | + pagelayer.$$('.pagelayer-elpd-options>.pli-clone').on('click', function(){ | |
| 177 | 220 | pagelayer_copy_element(pagelayer_active.el.$); |
| 178 | 221 | }); |
| 179 | 222 | |
| 180 | 223 | // Delete |
| 181 | - pagelayer.$$('.pagelayer-elpd-options>.fa-trash').on('click', function(){ | |
| 224 | + pagelayer.$$('.pagelayer-elpd-options>.pli-trashcan').on('click', function(){ | |
| 182 | 225 | pagelayer_delete_element(pagelayer_active.el.$); |
| 183 | 226 | //pagelayer.$$('.pagelayer-elpd-close').click(); |
| 184 | 227 | }); |
| 185 | 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 | + | |
| 186 | 247 | // The tabs |
| 187 | - pagelayer_elpd.find('.pagelayer-elpd-tab').on('click', function(){ | |
| 248 | + pagelayer_elpd.find('.pagelayer-elpd-tab').on('click', function(){ | |
| 249 | + | |
| 250 | + var jEle = jQuery(this); | |
| 188 | 251 | var attr = 'pagelayer-elpd-active-tab'; |
| 252 | + var tab = jEle.attr('pagelayer-elpd-tab'); | |
| 253 | + | |
| 254 | + if(tab == 'advanced'){ | |
| 255 | + return; | |
| 256 | + } | |
| 257 | + | |
| 189 | 258 | pagelayer_elpd.find('.pagelayer-elpd-tab').each(function(){ |
| 190 | 259 | jQuery(this).removeAttr(attr); |
| 191 | 260 | }); |
| 192 | - jQuery(this).attr(attr, 1); | |
| 193 | 261 | |
| 262 | + jEle.attr(attr, 1); | |
| 263 | + | |
| 194 | 264 | // Trigger the showing of rows |
| 195 | 265 | pagelayer_elpd_show_rows(); |
| 196 | 266 | }); |
| 197 | 267 | |
| @@ -199,8 +269,12 @@ | ||
| 199 | 269 | |
| 200 | 270 | // Open the properties |
| 201 | 271 | function pagelayer_elpd_open(jEle){ |
| 202 | 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 | + | |
| 203 | 277 | // Set pagelayer history FALSE |
| 204 | 278 | pagelayer.history_action = false; |
| 205 | 279 | |
| 206 | 280 | // Set the position of the element and show |
| @@ -206,11 +280,20 @@ | ||
| 206 | 280 | // Set the position of the element and show |
| 207 | 281 | //pagelayer_elpd.css('left', pagelayer_elpd_pos[0]); |
| 208 | 282 | //pagelayer_elpd.css('top', pagelayer_elpd_pos[1]); |
| 209 | 283 | pagelayer_leftbar_tab('pagelayer-elpd'); |
| 284 | + pagelayer.$$('[pagelayer-elpd-tab=settings]').show(); | |
| 210 | 285 | pagelayer.$$('.pagelayer-elpd-header').show(); |
| 211 | 286 | pagelayer.$$('.pagelayer-logo').hide(); |
| 212 | 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 | + | |
| 213 | 296 | // The property holder |
| 214 | 297 | var holder = pagelayer.$$('.pagelayer-elpd-body'); |
| 215 | 298 | holder.html(' '); |
| 216 | 299 | |
| @@ -224,8 +307,15 @@ | ||
| 224 | 307 | |
| 225 | 308 | // Set pagelayer history TRUE |
| 226 | 309 | pagelayer.history_action = true; |
| 227 | 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 | + } | |
| 228 | 318 | }; |
| 229 | 319 | |
| 230 | 320 | // Show the properties window |
| 231 | 321 | function pagelayer_elpd_generate(jEle, holder){ |
| @@ -236,8 +326,9 @@ | ||
| 236 | 326 | |
| 237 | 327 | // Is it a valid type ? |
| 238 | 328 | if(pagelayer_empty(pagelayer_shortcodes[el.tag])){ |
| 239 | 329 | pagelayer_error('Could not find this shortcode : '+el.tag); |
| 330 | + return; | |
| 240 | 331 | } |
| 241 | 332 | |
| 242 | 333 | // Set the holder |
| 243 | 334 | holder.attr('pagelayer-element-id', el.id); |
| @@ -249,16 +340,27 @@ | ||
| 249 | 340 | |
| 250 | 341 | for(var i in pagelayer_tabs){ |
| 251 | 342 | var tab = pagelayer_tabs[i]; |
| 252 | 343 | var section_close = false;// First section always open |
| 344 | + | |
| 345 | + section_loop2: | |
| 253 | 346 | for(var section in all_props[tab]){ |
| 254 | 347 | //console.log(tab+' '+section); |
| 255 | - | |
| 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 | + | |
| 256 | 358 | var props = section in pagelayer_shortcodes[el.tag] ? pagelayer_shortcodes[el.tag][section] : pagelayer_styles[section]; |
| 257 | 359 | //console.log(props); |
| 258 | 360 | |
| 259 | 361 | var sec = jQuery('<div class="pagelayer-elpd-section" section="'+section+'" pagelayer-show-tab="'+tab+'">'+ |
| 260 | - '<div class="pagelayer-elpd-section-name '+sec_open_class+'"><i class="fa"></i>'+all_props[tab][section]+'</div>'+ | |
| 362 | + '<div class="pagelayer-elpd-section-name '+sec_open_class+'"><i class="pli"></i>'+all_props[tab][section]+'</div>'+ | |
| 261 | 363 | '<div class="pagelayer-elpd-section-rows"></div>'+ |
| 262 | 364 | '</div>'); |
| 263 | 365 | holder.append(sec); |
| 264 | 366 | |
| @@ -274,8 +376,10 @@ | ||
| 274 | 376 | if('widget' in all_props && section == 'params'){ |
| 275 | 377 | pagelayer_elpd_widget_settings(el, sec, true); |
| 276 | 378 | continue; |
| 277 | 379 | } |
| 380 | + | |
| 381 | + var mode = pagelayer_get_screen_mode(); | |
| 278 | 382 | |
| 279 | 383 | // Reset / Create the cache |
| 280 | 384 | for(var x in props){ |
| 281 | 385 | |
| @@ -281,21 +385,38 @@ | ||
| 281 | 385 | |
| 282 | 386 | props[x]['c'] = new Object(); |
| 283 | 387 | props[x]['c']['val'] = '';// Blank Val |
| 284 | 388 | props[x]['c']['name'] = x;// Add the Name of the row i.e. attribute of the element |
| 389 | + var prop_name = x; | |
| 285 | 390 | |
| 391 | + // Do we have screen ? | |
| 392 | + if('screen' in props[x] && mode != 'desktop'){ | |
| 393 | + prop_name = x +'_'+mode; | |
| 394 | + } | |
| 395 | + | |
| 286 | 396 | // Set default to value of attribute if any |
| 287 | - if(x in el.atts){ | |
| 288 | - props[x]['c']['val'] = el.atts[x]; | |
| 397 | + if(prop_name in el.atts){ | |
| 398 | + props[x]['c']['val'] = el.atts[prop_name]; | |
| 289 | 399 | } |
| 290 | - | |
| 400 | + | |
| 291 | 401 | // Set element |
| 292 | 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 | + } | |
| 293 | 408 | |
| 294 | 409 | // Add the row |
| 295 | 410 | pagelayer_elpd_row(sec, tab, section, props, x); |
| 296 | 411 | |
| 297 | 412 | } |
| 413 | + | |
| 414 | + // Hide empty sections | |
| 415 | + if(sec.html().length < 1){ | |
| 416 | + //console.log(section+' - '+sec.html().length); | |
| 417 | + sec.parent().remove(); | |
| 418 | + } | |
| 298 | 419 | } |
| 299 | 420 | } |
| 300 | 421 | |
| 301 | 422 | /*// Set the default values in the PROPERTIES |
| @@ -304,8 +425,22 @@ | ||
| 304 | 425 | if(typeof fn_load == 'function'){ |
| 305 | 426 | fn_load(el, props); |
| 306 | 427 | }*/ |
| 307 | 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 | + | |
| 308 | 443 | // Section open close |
| 309 | 444 | holder.find('>.pagelayer-elpd-section>.pagelayer-elpd-section-name').on('click', function(){ |
| 310 | 445 | var _sec = jQuery(this); |
| 311 | 446 | var par = _sec.parent(); |
| @@ -335,9 +470,12 @@ | ||
| 335 | 470 | |
| 336 | 471 | }); |
| 337 | 472 | |
| 338 | 473 | if(!pagelayer_empty(pagelayer_active_tab) && pagelayer_active_tab.id == el.id){ |
| 339 | - holder.find('>[section='+pagelayer_active_tab.section+']>.pagelayer-elpd-section-name').click(); | |
| 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 | + } | |
| 340 | 478 | } |
| 341 | 479 | |
| 342 | 480 | // Handle the showing of rows |
| 343 | 481 | pagelayer_elpd_show_rows(); |
| @@ -361,36 +499,57 @@ | ||
| 361 | 499 | |
| 362 | 500 | // Append the row |
| 363 | 501 | holder.append(row); |
| 364 | 502 | |
| 365 | - var fn_ui = window['pagelayer_elp_'+prop['type']+'_ui']; | |
| 503 | + return pagelayer_elpd_render_row(row, prop); | |
| 366 | 504 | |
| 367 | - // Is there a UI Handler ? | |
| 368 | - if(typeof fn_ui == 'function'){ | |
| 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{ | |
| 369 | 527 | |
| 370 | - fn_ui(row, prop); | |
| 371 | - | |
| 372 | - // Use the default mechanism | |
| 373 | - }else{ | |
| 374 | - | |
| 375 | - // The label | |
| 376 | - pagelayer_elp_label(row, prop); | |
| 377 | - | |
| 378 | - // The main property | |
| 379 | - fn(row, prop); | |
| 380 | - | |
| 381 | - // Is there a description ? | |
| 382 | - if(!pagelayer_empty(prop['desc'])){ | |
| 383 | - pagelayer_elp_desc(row, prop['desc']); | |
| 384 | - } | |
| 385 | - | |
| 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']); | |
| 386 | 537 | } |
| 387 | 538 | |
| 388 | - return row; | |
| 539 | + // Is there a description ? | |
| 540 | + if(!pagelayer_empty(prop['desc'])){ | |
| 541 | + pagelayer_elp_desc(row, prop['desc']); | |
| 542 | + } | |
| 389 | 543 | |
| 390 | 544 | } |
| 391 | 545 | |
| 392 | -}; | |
| 546 | + if('script' in prop){ | |
| 547 | + row.append('<script>'+prop.script+'</script>'); | |
| 548 | + } | |
| 549 | + | |
| 550 | + return row; | |
| 551 | +} | |
| 393 | 552 | |
| 394 | 553 | // Show the rows as per the active tab and also handle the rows that are supposed to be shown or not |
| 395 | 554 | function pagelayer_elpd_show_rows(){ |
| 396 | 555 | |
| @@ -443,9 +602,9 @@ | ||
| 443 | 602 | |
| 444 | 603 | // Find the row |
| 445 | 604 | var row = false; |
| 446 | 605 | |
| 447 | - holder.find('[pagelayer-elp-name='+x+']').each(function(){ | |
| 606 | + holder.find('[pagelayer-elp-name="'+x+'"]').each(function(){ | |
| 448 | 607 | var j = jQuery(this); |
| 449 | 608 | var _id = j.closest('[pagelayer-element-id]').attr('pagelayer-element-id'); |
| 450 | 609 | //console.log(_id+' = '+id); |
| 451 | 610 | |
| @@ -540,8 +699,9 @@ | ||
| 540 | 699 | row.hide(); |
| 541 | 700 | } |
| 542 | 701 | |
| 543 | 702 | } |
| 703 | + | |
| 544 | 704 | } |
| 545 | 705 | } |
| 546 | 706 | |
| 547 | 707 | }); |
| @@ -595,8 +755,16 @@ | ||
| 595 | 755 | } |
| 596 | 756 | |
| 597 | 757 | // Post any existing data |
| 598 | 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 | + | |
| 599 | 767 | if(form.length > 0){ |
| 600 | 768 | //console.log(form.serialize()); |
| 601 | 769 | post['values'] = form.serialize(); |
| 602 | 770 | } |
| @@ -628,9 +796,9 @@ | ||
| 628 | 796 | } |
| 629 | 797 | |
| 630 | 798 | }, |
| 631 | 799 | fail: function(data) { |
| 632 | - alert('Some error occured in getting the widget data'); | |
| 800 | + pagelayer_show_msg('Some error occured in getting the widget data', 'error'); | |
| 633 | 801 | } |
| 634 | 802 | }); |
| 635 | 803 | |
| 636 | 804 | } |
| @@ -638,12 +806,15 @@ | ||
| 638 | 806 | // Will set the attribute and also render |
| 639 | 807 | function _pagelayer_set_atts(row, val, no_default){ |
| 640 | 808 | var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id'); |
| 641 | 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]; | |
| 642 | 813 | |
| 643 | 814 | // Is there a unit ? |
| 644 | 815 | var uEle = row.find('.pagelayer-elp-units'); |
| 645 | - if(uEle.length > 0){ | |
| 816 | + if(uEle.length > 0 && !pagelayer_empty(val)){ | |
| 646 | 817 | var unit = uEle.find('[selected]').html(); |
| 647 | 818 | if(Array.isArray(val)){ |
| 648 | 819 | for(var i in val){ |
| 649 | 820 | if(val[i].length < 1){ |
| @@ -656,12 +827,11 @@ | ||
| 656 | 827 | } |
| 657 | 828 | } |
| 658 | 829 | |
| 659 | 830 | // Are we in another mode ? |
| 660 | - var mEle = row.find('.pagelayer-elp-screen'); | |
| 661 | - var mode = mEle.length > 0 && pagelayer_get_screen_mode() != 'desktop' ? '_'+pagelayer_get_screen_mode() : ''; | |
| 831 | + var mode = ('screen' in prop && pagelayer_get_screen_mode() != 'desktop') ? '_'+pagelayer_get_screen_mode() : ''; | |
| 662 | 832 | |
| 663 | - pagelayer_set_atts(jEle, row.attr('pagelayer-elp-name')+mode, val); | |
| 833 | + pagelayer_set_atts(jEle, prop_name+mode, val); | |
| 664 | 834 | |
| 665 | 835 | // Are we to skip setting defaults ? |
| 666 | 836 | no_default = no_default || false; |
| 667 | 837 | if(!no_default){ |
| @@ -679,8 +849,20 @@ | ||
| 679 | 849 | //console.trace();console.log('Setting Attr'); |
| 680 | 850 | |
| 681 | 851 | // Render |
| 682 | 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 | + } | |
| 683 | 865 | }; |
| 684 | 866 | |
| 685 | 867 | // Will set the attribute but not render |
| 686 | 868 | function _pagelayer_set_tmp_atts(row, suffix, val){ |
| @@ -685,11 +867,25 @@ | ||
| 685 | 867 | // Will set the attribute but not render |
| 686 | 868 | function _pagelayer_set_tmp_atts(row, suffix, val){ |
| 687 | 869 | var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id'); |
| 688 | 870 | var jEle = jQuery('[pagelayer-id='+id+']'); |
| 689 | - pagelayer_set_tmp_atts(jEle, row.attr('pagelayer-elp-name')+'-'+suffix, val); | |
| 871 | + pagelayer_set_tmp_atts(jEle, row.attr('pagelayer-elp-name')+(suffix.length > 0 ? '-'+suffix : ''), val); | |
| 690 | 872 | }; |
| 691 | 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 | + | |
| 692 | 888 | // Get the tmp att |
| 693 | 889 | function _pagelayer_get_tmp_att(row, suffix){ |
| 694 | 890 | var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id'); |
| 695 | 891 | var jEle = jQuery('[pagelayer-id='+id+']'); |
| @@ -697,9 +893,9 @@ | ||
| 697 | 893 | }; |
| 698 | 894 | |
| 699 | 895 | // Create the Label |
| 700 | 896 | function pagelayer_elp_label(row, prop){ |
| 701 | - row.append('<div class="pagelayer-elp-label-div"><label class="pagelayer-elp-label">'+prop['label']+'</label></div>'); | |
| 897 | + row.append('<div class="pagelayer-elp-label-div" type="'+prop['type']+'"><label class="pagelayer-elp-label">'+prop['label']+'</label></div>'); | |
| 702 | 898 | |
| 703 | 899 | var label = row.children('.pagelayer-elp-label-div'); |
| 704 | 900 | |
| 705 | 901 | // Do we have screen ? |
| @@ -705,32 +901,32 @@ | ||
| 705 | 901 | // Do we have screen ? |
| 706 | 902 | if('screen' in prop){ |
| 707 | 903 | var mode = pagelayer_get_screen_mode(); |
| 708 | 904 | var screen = '<div class="pagelayer-elp-screen">'+ |
| 709 | - '<i class="fa fa-desktop" />'+ | |
| 710 | - '<i class="fa fa-tablet" />'+ | |
| 711 | - '<i class="fa fa-mobile" />'+ | |
| 712 | - '<i class="pagelayer-prop-screen fa fa-'+mode+'" />'+ | |
| 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>'+ | |
| 713 | 909 | '</div>'; |
| 714 | 910 | label.append(screen); |
| 715 | 911 | |
| 716 | 912 | // Set screen mode on change |
| 717 | - label.find('.fa:not(.pagelayer-prop-screen)').on('click', function(){ | |
| 913 | + label.find('.pli:not(.pagelayer-prop-screen)').on('click', function(){ | |
| 718 | 914 | var mode = 'desktop'; |
| 719 | 915 | var jEle = jQuery(this); |
| 720 | 916 | |
| 721 | 917 | // Tablet ? |
| 722 | - if(jEle.hasClass('fa-tablet')){ | |
| 918 | + if(jEle.hasClass('pli-tablet')){ | |
| 723 | 919 | mode = 'tablet'; |
| 724 | 920 | } |
| 725 | 921 | |
| 726 | 922 | // Mobile ? |
| 727 | - if(jEle.hasClass('fa-mobile')){ | |
| 923 | + if(jEle.hasClass('pli-mobile')){ | |
| 728 | 924 | mode = 'mobile'; |
| 729 | 925 | } |
| 730 | 926 | |
| 731 | 927 | pagelayer_set_screen_mode(mode); |
| 732 | - label.find('.pagelayer-elp-screen .fa').removeClass('open'); | |
| 928 | + label.find('.pagelayer-elp-screen .pli').removeClass('open'); | |
| 733 | 929 | |
| 734 | 930 | }); |
| 735 | 931 | |
| 736 | 932 | // On change of screen handle the values |
| @@ -735,9 +931,9 @@ | ||
| 735 | 931 | |
| 736 | 932 | // On change of screen handle the values |
| 737 | 933 | label.find('.pagelayer-elp-screen').on('pagelayer-screen-changed', function(e){ |
| 738 | 934 | |
| 739 | - label.find('.pagelayer-elp-screen .fa').removeClass('open'); | |
| 935 | + label.find('.pagelayer-elp-screen .pli').removeClass('open'); | |
| 740 | 936 | var mode = pagelayer_get_screen_mode(); |
| 741 | 937 | var modes = {desktop: '', tablet: '_tablet', mobile: '_mobile'}; |
| 742 | 938 | |
| 743 | 939 | // Get the current current new val |
| @@ -772,8 +968,16 @@ | ||
| 772 | 968 | }) |
| 773 | 969 | |
| 774 | 970 | } |
| 775 | 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 | + | |
| 776 | 980 | // Do we have units ? |
| 777 | 981 | if('units' in prop){ |
| 778 | 982 | |
| 779 | 983 | var units = ''; |
| @@ -783,10 +987,12 @@ | ||
| 783 | 987 | // Get unit from value |
| 784 | 988 | if(!(pagelayer_empty(tmp_val))){ |
| 785 | 989 | |
| 786 | 990 | for(var i in prop['units']){ |
| 787 | - if(tmp_val.search(prop['units'][i]) != -1){ | |
| 991 | + if(pagelayer_is_string(tmp_val) && tmp_val.search(prop['units'][i]) != -1){ | |
| 788 | 992 | default_unit = i; |
| 993 | + }else if(tmp_val[0].search(prop['units'][i]) != -1 ){ | |
| 994 | + default_unit = i; | |
| 789 | 995 | } |
| 790 | 996 | } |
| 791 | 997 | } |
| 792 | 998 | |
| @@ -808,23 +1014,34 @@ | ||
| 808 | 1014 | }); |
| 809 | 1015 | |
| 810 | 1016 | } |
| 811 | 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 | + } | |
| 812 | 1039 | }; |
| 813 | 1040 | |
| 814 | -// Create the Label | |
| 815 | -function pagelayer_elp_heading(row, prop){ | |
| 816 | - //row.append('<div class="pagelayer-elp-heading">'+prop['label']+'</div>'); | |
| 817 | -} | |
| 818 | - | |
| 819 | -// Create the Label | |
| 820 | -function pagelayer_elp_heading_ui(row, prop){ | |
| 821 | - row.append('<div class="pagelayer-elp-heading">'+prop['label']+'</div>'); | |
| 822 | -} | |
| 823 | - | |
| 824 | 1041 | // Create the Description |
| 825 | 1042 | function pagelayer_elp_desc(row, label){ |
| 826 | - //row.append('<div class="pagelayer-elp-desc">'+label+'</div>'); | |
| 1043 | + row.append('<div class="pagelayer-elp-desc">'+label+'</div>'); | |
| 827 | 1044 | }; |
| 828 | 1045 | |
| 829 | 1046 | // The Text property |
| 830 | 1047 | function pagelayer_elp_text(row, prop){ |
| @@ -829,9 +1046,9 @@ | ||
| 829 | 1046 | // The Text property |
| 830 | 1047 | function pagelayer_elp_text(row, prop){ |
| 831 | 1048 | |
| 832 | 1049 | var div = '<div class="pagelayer-elp-text-div">'+ |
| 833 | - '<input type="text" class="pagelayer-elp-text" name="'+prop.c['name']+'" value="'+prop.c['val']+'"></input>'+ | |
| 1050 | + '<input type="text" class="pagelayer-elp-text" name="'+prop.c['name']+'" value="'+pagelayer_htmlEntities(prop.c['val'])+'"></input>'+ | |
| 834 | 1051 | '</div>'; |
| 835 | 1052 | |
| 836 | 1053 | row.append(div); |
| 837 | 1054 | |
| @@ -905,13 +1122,20 @@ | ||
| 905 | 1122 | |
| 906 | 1123 | var show_sel = function(val){ |
| 907 | 1124 | var sel_html = ''; |
| 908 | 1125 | jQuery.each(val, function(index, value){ |
| 909 | - sel_html += '<span class="pagelayer-elp-multiselect-selected">'+prop['list'][value]+'</span>'; | |
| 1126 | + sel_html += '<span class="pagelayer-elp-multiselect-selected" data-val="'+value+'">'+prop['list'][value]+' <span class="pagelayer-elp-multiselect-remove">x</span></span>'; | |
| 910 | 1127 | }); |
| 911 | 1128 | return sel_html; |
| 912 | 1129 | } |
| 913 | 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 | + | |
| 914 | 1138 | for (x in prop['list']){ |
| 915 | 1139 | options += option(x, prop['list'][x]); |
| 916 | 1140 | } |
| 917 | 1141 | |
| @@ -920,8 +1144,9 @@ | ||
| 920 | 1144 | '<ul class="pagelayer-elp-multiselect-ul" name="'+prop.c['name']+'">'+options+'</ul>'+ |
| 921 | 1145 | '</div>'; |
| 922 | 1146 | |
| 923 | 1147 | row.append(div); |
| 1148 | + setup_remove(); | |
| 924 | 1149 | |
| 925 | 1150 | row.find('.pagelayer-elp-multiselect-option').on('click', function(){ |
| 926 | 1151 | |
| 927 | 1152 | var sVal = jQuery(this).attr('data-val'); |
| @@ -936,15 +1161,16 @@ | ||
| 936 | 1161 | |
| 937 | 1162 | //_pagelayer_set_atts(row,JSON.stringify(selection));// Save and Render |
| 938 | 1163 | _pagelayer_set_atts(row, selection.join(','));// Save and Render |
| 939 | 1164 | |
| 940 | - row.find('.pagelayer-elp-multiselect').html(show_sel(selection)); | |
| 1165 | + row.find('.pagelayer-elp-multiselect').html(show_sel(selection)); | |
| 1166 | + setup_remove(); | |
| 941 | 1167 | |
| 942 | 1168 | }); |
| 943 | 1169 | |
| 944 | 1170 | // Open the selector |
| 945 | 1171 | row.find('.pagelayer-elp-multiselect').on('click', function(){ |
| 946 | - row.find('.pagelayer-elp-multiselect-ul').slideToggle(); | |
| 1172 | + row.find('.pagelayer-elp-multiselect-ul').slideToggle(100); | |
| 947 | 1173 | }); |
| 948 | 1174 | |
| 949 | 1175 | } |
| 950 | 1176 | |
| @@ -949,24 +1175,24 @@ | ||
| 949 | 1175 | } |
| 950 | 1176 | |
| 951 | 1177 | function _pagelayer_trigger_anim(row, anim){ |
| 952 | 1178 | var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id'); |
| 953 | - var classList = $('[pagelayer-id='+id+']').attr('class'); | |
| 1179 | + var classList = jQuery('[pagelayer-id='+id+']').attr('class'); | |
| 954 | 1180 | classList = classList.split(/\s+/); |
| 955 | 1181 | //console.log(classList); |
| 956 | 1182 | var options = []; |
| 957 | 1183 | row.find('option').each(function(){ |
| 958 | - var found = $.inArray( $(this).val(), classList ); | |
| 1184 | + var found = jQuery.inArray( jQuery(this).val(), classList ); | |
| 959 | 1185 | if( found != -1){ |
| 960 | - //var found = $(this).val(); | |
| 961 | - $('[pagelayer-id='+id+']').removeClass($(this).val()); | |
| 1186 | + //var found = jQuery(this).val(); | |
| 1187 | + jQuery('[pagelayer-id='+id+']').removeClass(jQuery(this).val()); | |
| 962 | 1188 | //break; |
| 963 | 1189 | } |
| 964 | - //options.push($(this).val()); | |
| 1190 | + //options.push(jQuery(this).val()); | |
| 965 | 1191 | }); |
| 966 | - $('[pagelayer-id='+id+']').removeClass('pagelayer-wow').addClass(anim + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){ | |
| 967 | - $(this).removeClass(anim+ ' animated'); | |
| 968 | - }); | |
| 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 | + }); | |
| 969 | 1195 | } |
| 970 | 1196 | |
| 971 | 1197 | // The Checkbox property |
| 972 | 1198 | function pagelayer_elp_checkbox(row, prop){ |
| @@ -1004,9 +1230,9 @@ | ||
| 1004 | 1230 | var addclass = (prop.c['val'] == x) ? active : ''; |
| 1005 | 1231 | div += '<a class="pagelayer-elp-radio '+addclass+'" val="'+x+'">'+prop.list[x]+'</a>'; |
| 1006 | 1232 | } |
| 1007 | 1233 | |
| 1008 | - div += '<div>'; | |
| 1234 | + div += '</div>'; | |
| 1009 | 1235 | |
| 1010 | 1236 | row.append(div); |
| 1011 | 1237 | |
| 1012 | 1238 | row.find('.pagelayer-elp-radio').each(function(){ |
| @@ -1029,27 +1255,157 @@ | ||
| 1029 | 1255 | |
| 1030 | 1256 | // The Image Property |
| 1031 | 1257 | function pagelayer_elp_image(row, prop){ |
| 1032 | 1258 | |
| 1033 | - var style = ''; | |
| 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 | + | |
| 1034 | 1269 | var tmp = prop.c['name']+'-url'; |
| 1035 | 1270 | var def = pagelayer.blank_img; |
| 1036 | - var src = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : def; | |
| 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 ); | |
| 1037 | 1274 | |
| 1038 | 1275 | // Do we have a URL set ? |
| 1039 | - style = 'style="background-image:url(\''+src+'\')"'; | |
| 1276 | + var style = 'style="background-image:url(\''+src+'\')"'; | |
| 1040 | 1277 | |
| 1041 | 1278 | var div = '<div class="pagelayer-elp-image-div">'+ |
| 1042 | - '<div class="pagelayer-elp-image" '+style+'></div>'+ | |
| 1043 | - '<div class="pagelayer-elp-image-delete"><i class="fa fa-trash" /></div>'+ | |
| 1044 | - '</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 ); | |
| 1045 | 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 | + | |
| 1046 | 1359 | row.append(div); |
| 1047 | 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 | + | |
| 1048 | 1402 | // Set an Image |
| 1049 | 1403 | row.find('.pagelayer-elp-image').on('click', function(){ |
| 1050 | 1404 | |
| 1051 | 1405 | var button = jQuery(this); |
| 1406 | + var inRetina = button.hasClass('pagelayer-retina'); | |
| 1407 | + var inRetinaM = button.hasClass('pagelayer-retina-mobile'); | |
| 1052 | 1408 | |
| 1053 | 1409 | // Load the frame |
| 1054 | 1410 | var frame = pagelayer_select_frame('image'); |
| 1055 | 1411 | |
| @@ -1068,19 +1424,77 @@ | ||
| 1068 | 1424 | // Internal from gallery |
| 1069 | 1425 | }else{ |
| 1070 | 1426 | |
| 1071 | 1427 | var attachment = frame.state().get('selection').first().toJSON(); |
| 1072 | - //console.log(attachment); | |
| 1073 | 1428 | |
| 1074 | 1429 | // Set the new ID and URL |
| 1075 | 1430 | id = attachment.id; |
| 1076 | - url = attachment.url; | |
| 1431 | + url = attachment.url; | |
| 1432 | + var old = _pagelayer_img_tmp_atts(row); | |
| 1077 | 1433 | |
| 1078 | - // Keep a list of all sizes | |
| 1079 | - for(var x in attachment.sizes){ | |
| 1080 | - _pagelayer_set_tmp_atts(row, x+'-url', attachment.sizes[x].url); | |
| 1081 | - } | |
| 1082 | - | |
| 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 | + } | |
| 1083 | 1497 | } |
| 1084 | 1498 | |
| 1085 | 1499 | // Update thumbnail |
| 1086 | 1500 | button.css('background-image', 'url(\''+url+'\')'); |
| @@ -1085,16 +1499,39 @@ | ||
| 1085 | 1499 | // Update thumbnail |
| 1086 | 1500 | button.css('background-image', 'url(\''+url+'\')'); |
| 1087 | 1501 | |
| 1088 | 1502 | // Save and render |
| 1089 | - _pagelayer_set_tmp_atts(row, 'url', url); | |
| 1090 | - _pagelayer_set_atts(row, id); | |
| 1503 | + _pagelayer_set_tmp_atts(row, 'no-image-set', ''); | |
| 1091 | 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 | + | |
| 1092 | 1518 | }, |
| 1093 | 1519 | // On open select the appropriate images in the media manager |
| 1094 | 1520 | 'open': function() { |
| 1095 | 1521 | var selection = frame.state().get('selection'); |
| 1096 | - var wp_id = prop.el.$.attr('pagelayer-a-id'); | |
| 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 | + | |
| 1097 | 1534 | selection.reset( wp_id ? [ wp.media.attachment( wp_id ) ] : [] ); |
| 1098 | 1535 | } |
| 1099 | 1536 | }); |
| 1100 | 1537 | |
| @@ -1103,24 +1540,199 @@ | ||
| 1103 | 1540 | return false; |
| 1104 | 1541 | |
| 1105 | 1542 | }); |
| 1106 | 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 | + | |
| 1107 | 1582 | // Delete this |
| 1108 | 1583 | row.find('.pagelayer-elp-image-delete').on('click', function(){ |
| 1109 | 1584 | |
| 1110 | 1585 | // Update thumbnail |
| 1111 | - row.find('.pagelayer-elp-image').css('background-image', 'url(\''+def+'\')'); | |
| 1586 | + jQuery(this).parent().find('.pagelayer-elp-image').css('background-image', 'url(\''+def+'\')'); | |
| 1112 | 1587 | |
| 1113 | 1588 | // Set to blank and render |
| 1114 | 1589 | _pagelayer_set_atts(row, '', true); |
| 1590 | + | |
| 1591 | + imgObj['img'] = def; | |
| 1115 | 1592 | |
| 1593 | + _pagelayer_set_tmp_atts(row, 'no-image-set', 1); | |
| 1116 | 1594 | _pagelayer_set_tmp_atts(row, 'url', def); |
| 1117 | - _pagelayer_set_atts(row, 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)); | |
| 1118 | 1605 | |
| 1119 | 1606 | }); |
| 1120 | 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 | + }); | |
| 1121 | 1619 | } |
| 1122 | 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 | + | |
| 1123 | 1735 | // The Multi Image Property |
| 1124 | 1736 | function pagelayer_elp_multi_image(row, prop){ |
| 1125 | 1737 | |
| 1126 | 1738 | var div = '<div class="pagelayer-elp-multi_image-div">'+ |
| @@ -1134,19 +1746,36 @@ | ||
| 1134 | 1746 | var ids = new Array(); |
| 1135 | 1747 | |
| 1136 | 1748 | // Any IDs ? |
| 1137 | 1749 | if(!pagelayer_empty(prop.c['val'])){ |
| 1138 | - ids = prop.c['val'].split(','); | |
| 1750 | + ids = prop.c['val'] | |
| 1751 | + if(pagelayer_is_string(ids)){ | |
| 1752 | + ids = prop.c['val'].split(','); | |
| 1753 | + } | |
| 1139 | 1754 | //console.log(ids); |
| 1140 | 1755 | } |
| 1141 | 1756 | |
| 1142 | 1757 | // Do we have a URL set ? |
| 1143 | - if(ids.length > 0 && tmp in prop.el.tmp){ | |
| 1144 | - var images = JSON.parse(prop.el.tmp[tmp]); | |
| 1145 | - //console.log(images); | |
| 1146 | - | |
| 1147 | - for(var x in ids){ | |
| 1148 | - row.find('.pagelayer-elp-multi_image-thumbs').append('<div class="pagelayer-elp-multi_image-thumb" style="background-image: url(\''+images['i'+ids[x]]+'\');"></div>'); | |
| 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 | + }); | |
| 1149 | 1778 | } |
| 1150 | 1779 | } |
| 1151 | 1780 | |
| 1152 | 1781 | var pagelayer_init_frame = function(state){ |
| @@ -1154,31 +1783,65 @@ | ||
| 1154 | 1783 | var button = row.find('.pagelayer-elp-multi_image-thumbs'); |
| 1155 | 1784 | //console.log(ids); |
| 1156 | 1785 | |
| 1157 | 1786 | // Load the frame |
| 1158 | - var frame = pagelayer_select_frame('multi_image', 'gallery'+state); | |
| 1787 | + var frame = pagelayer_select_frame('multi_image', state); | |
| 1159 | 1788 | |
| 1160 | 1789 | frame.on({ |
| 1161 | 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 | + | |
| 1162 | 1823 | // Set the current selection if any |
| 1163 | 1824 | 'open': function(){ |
| 1164 | 1825 | |
| 1165 | 1826 | // Do we have anything |
| 1166 | - if(ids.length > 0){ | |
| 1827 | + if(!pagelayer_empty(ids)){ | |
| 1167 | 1828 | |
| 1168 | 1829 | var selection = ''; |
| 1169 | 1830 | |
| 1170 | - if(state == '-edit'){ | |
| 1831 | + if(state == 'gallery-edit'){ | |
| 1171 | 1832 | selection = frame.state().get('library'); |
| 1172 | - }else{ | |
| 1833 | + }else if(state == 'gallery-library'){ | |
| 1173 | 1834 | selection = frame.state().get('selection'); |
| 1174 | 1835 | } |
| 1175 | 1836 | |
| 1176 | 1837 | // Add to current selection |
| 1177 | - for(var x in ids){ | |
| 1178 | - attachment = wp.media.attachment(ids[x]); | |
| 1179 | - attachment.fetch(); | |
| 1180 | - selection.add(attachment ? [ attachment ] : [] ); | |
| 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 | + } | |
| 1181 | 1844 | } |
| 1182 | 1845 | } |
| 1183 | 1846 | }, |
| 1184 | 1847 | |
| @@ -1253,13 +1916,22 @@ | ||
| 1253 | 1916 | |
| 1254 | 1917 | }; |
| 1255 | 1918 | |
| 1256 | 1919 | row.find('.pagelayer-elp-multi_image-thumbs').on('click', function(){ |
| 1257 | - pagelayer_init_frame('-edit'); | |
| 1920 | + pagelayer_init_frame('gallery-edit'); | |
| 1258 | 1921 | }); |
| 1259 | 1922 | |
| 1260 | 1923 | row.find('.pagelayer-elp-button').on('click', function(){ |
| 1261 | - pagelayer_init_frame(ids.length > 0 ? '-library' : ''); | |
| 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 | + } | |
| 1262 | 1934 | }); |
| 1263 | 1935 | |
| 1264 | 1936 | } |
| 1265 | 1937 | |
| @@ -1270,14 +1942,14 @@ | ||
| 1270 | 1942 | var src = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : prop.c['val']; |
| 1271 | 1943 | |
| 1272 | 1944 | var div = '<div class="pagelayer-elp-video-div pagelayer-elp-input-icon">'+ |
| 1273 | 1945 | '<input class="pagelayer-elp-video" name="'+prop.c['name']+'" type="text" value="'+src+'">'+ |
| 1274 | - '<i class="fa fa-folder-open" />'+ | |
| 1946 | + '<i class="pli pli-folder-open" ></i>'+ | |
| 1275 | 1947 | '</input></div>'; |
| 1276 | 1948 | |
| 1277 | 1949 | row.append(div); |
| 1278 | 1950 | |
| 1279 | - row.find('.pagelayer-elp-video-div .fa').on('click', function(){ | |
| 1951 | + row.find('.pagelayer-elp-video-div .pli').on('click', function(){ | |
| 1280 | 1952 | |
| 1281 | 1953 | var button = jQuery(this); |
| 1282 | 1954 | |
| 1283 | 1955 | // Load the frame |
| @@ -1345,15 +2017,15 @@ | ||
| 1345 | 2017 | var src = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : prop.c['val']; |
| 1346 | 2018 | |
| 1347 | 2019 | var div = '<div class="pagelayer-elp-audio-div pagelayer-elp-input-icon">'+ |
| 1348 | 2020 | '<input class="pagelayer-elp-audio" name="'+prop.c['name']+'" type="text" value="'+src+'" />'+ |
| 1349 | - '<i class="fa fa-bars" />'+ | |
| 2021 | + '<i class="pli pli-menu" ></i>'+ | |
| 1350 | 2022 | '</div>'; |
| 1351 | 2023 | |
| 1352 | 2024 | row.append(div); |
| 1353 | 2025 | |
| 1354 | 2026 | // Choose from media |
| 1355 | - row.find('.pagelayer-elp-audio-div .fa').on('click', function(){ | |
| 2027 | + row.find('.pagelayer-elp-audio-div .pli').on('click', function(){ | |
| 1356 | 2028 | |
| 1357 | 2029 | var button = jQuery(this); |
| 1358 | 2030 | |
| 1359 | 2031 | // Load the frame |
| @@ -1419,14 +2091,14 @@ | ||
| 1419 | 2091 | var src = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : prop.c['val']; |
| 1420 | 2092 | |
| 1421 | 2093 | var div = '<div class="pagelayer-elp-media-div pagelayer-elp-input-icon">'+ |
| 1422 | 2094 | '<input class="pagelayer-elp-media" value="'+src+'" type="text" />'+ |
| 1423 | - '<i class="fa fa-bars" />'+ | |
| 2095 | + '<i class="pli pli-menu" ></i>'+ | |
| 1424 | 2096 | '</div>'; |
| 1425 | 2097 | |
| 1426 | 2098 | row.append(div); |
| 1427 | 2099 | |
| 1428 | - row.find('.pagelayer-elp-media-div .fa-bars').on('click', function(){ | |
| 2100 | + row.find('.pagelayer-elp-media-div .pli-menu').on('click', function(){ | |
| 1429 | 2101 | |
| 1430 | 2102 | var button = jQuery(this); |
| 1431 | 2103 | |
| 1432 | 2104 | // Load the frame |
| @@ -1488,10 +2160,10 @@ | ||
| 1488 | 2160 | // The Slider Property |
| 1489 | 2161 | function pagelayer_elp_slider(row, prop){ |
| 1490 | 2162 | |
| 1491 | 2163 | var div = '<div class="pagelayer-elp-slider-div">'+ |
| 1492 | - '<input type="range" class="pagelayer-elp-slider" value="'+prop.c['val']+'" min="'+prop['min']+'" max="'+prop['max']+'" step="'+prop['step']+'"/>'+ | |
| 1493 | - '<input type="number" class="pagelayer-elp-slider-value" value="'+prop.c['val']+'" min="'+prop['min']+'" max="'+prop['max']+'" step="'+prop['step']+'"/>'+ | |
| 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']+'"/>'+ | |
| 1494 | 2166 | '</div>'+ |
| 1495 | 2167 | '</div>'; |
| 1496 | 2168 | |
| 1497 | 2169 | row.append(div); |
| @@ -1497,12 +2169,17 @@ | ||
| 1497 | 2169 | row.append(div); |
| 1498 | 2170 | |
| 1499 | 2171 | // Set an value in span |
| 1500 | 2172 | row.find('.pagelayer-elp-slider-div input').on('input', function(){ |
| 2173 | + var value = parseFloat(this.value); | |
| 2174 | + var max = parseFloat(this.max); | |
| 1501 | 2175 | |
| 1502 | - row.find('.pagelayer-elp-slider-div input').val(this.value); | |
| 2176 | + if(!pagelayer_empty(max) && value > max){ | |
| 2177 | + value = max; | |
| 2178 | + } | |
| 2179 | + row.find('.pagelayer-elp-slider-div input').val(value); | |
| 1503 | 2180 | |
| 1504 | - _pagelayer_set_atts(row, this.value);// Save and Render | |
| 2181 | + _pagelayer_set_atts(row, value);// Save and Render | |
| 1505 | 2182 | |
| 1506 | 2183 | }); |
| 1507 | 2184 | |
| 1508 | 2185 | } |
| @@ -1509,42 +2186,53 @@ | ||
| 1509 | 2186 | |
| 1510 | 2187 | // The Editor proprety |
| 1511 | 2188 | function pagelayer_elp_editor(row, prop){ |
| 1512 | 2189 | |
| 2190 | + var rows = prop.rows ? prop.rows : '8'; | |
| 2191 | + | |
| 1513 | 2192 | var div = '<div class="pagelayer-elp-editor-div">'+ |
| 1514 | - '<textarea class="pagelayer-elp-editor">'+prop.c['val']+'</textarea>'+ | |
| 2193 | + '<textarea rows="'+rows+'" class="pagelayer-elp-editor" ></textarea>'+ | |
| 1515 | 2194 | '</div>'; |
| 1516 | 2195 | |
| 1517 | 2196 | row.append(div); |
| 1518 | 2197 | |
| 1519 | 2198 | var editor = row.find('.pagelayer-elp-editor'); |
| 2199 | + editor.val(pagelayer_trim(prop.c['val'])); | |
| 1520 | 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; | |
| 1521 | 2207 | // No SVG Icons for now |
| 1522 | - //jQuery.trumbowyg.svgPath = false; | |
| 2208 | + jQuery.trumbowyg.svgPath = false; | |
| 1523 | 2209 | |
| 1524 | 2210 | // Initiate the editor |
| 1525 | 2211 | editor.trumbowyg({ |
| 1526 | 2212 | autogrow: false, |
| 2213 | + hideButtonTexts: true, | |
| 1527 | 2214 | btns:[ |
| 1528 | 2215 | ['viewHTML'], |
| 2216 | + ['wpmedia'], | |
| 1529 | 2217 | ['fontfamily'], |
| 1530 | 2218 | ['formatting'], |
| 1531 | 2219 | ['undo', 'redo'], // Only supported in Blink browsers |
| 1532 | 2220 | ['fontsize'], |
| 2221 | + ['lineheight'], | |
| 1533 | 2222 | ['foreColor', 'backColor',], |
| 1534 | 2223 | ['strong', 'em', 'del'], |
| 2224 | + ['horizontalRule'], | |
| 1535 | 2225 | ['superscript', 'subscript'], |
| 1536 | 2226 | ['link'], |
| 1537 | - ['wpmedia'], | |
| 2227 | + ['unorderedList', 'orderedList'], | |
| 1538 | 2228 | ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'], |
| 1539 | - ['unorderedList', 'orderedList'], | |
| 1540 | - ['horizontalRule'], | |
| 1541 | 2229 | ['removeformat'], |
| 1542 | 2230 | ['fullscreen'] |
| 1543 | 2231 | ], |
| 1544 | 2232 | plugins: { |
| 1545 | 2233 | fontsize: { |
| 1546 | - sizeList: ['12px','13px','14px','15px','16px','17px','18px','19px','20px','21px','22px','23px','24px','25px',] | |
| 2234 | + sizeList: ['12px','13px','14px','15px','16px','17px','18px','19px','20px','21px','22px','23px','24px','25px'] | |
| 1547 | 2235 | } |
| 1548 | 2236 | }, |
| 1549 | 2237 | imageWidthModalEdit: true, |
| 1550 | 2238 | |
| @@ -1556,33 +2244,272 @@ | ||
| 1556 | 2244 | } |
| 1557 | 2245 | |
| 1558 | 2246 | // The Link proprety |
| 1559 | 2247 | function pagelayer_elp_link(row, prop){ |
| 2248 | + | |
| 2249 | + var values = {}; | |
| 2250 | + var settingOpt = false; | |
| 1560 | 2251 | |
| 1561 | - // TODO : Implement pagelayer-elp-link-icon | |
| 1562 | - var div = '<div class="pagelayer-elp-link-div pagelayer-elp-input-icon">'+ | |
| 1563 | - '<input class="pagelayer-elp-link" type="text" value="'+prop.c['val']+'" />'+ | |
| 1564 | - '<i class="fa fa-link pagelayer-elp-link-icon" />'+ | |
| 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>'+ | |
| 1565 | 2301 | '</div>'; |
| 2302 | + } | |
| 2303 | + | |
| 2304 | + div += '</div>'; | |
| 1566 | 2305 | |
| 1567 | 2306 | row.append(div); |
| 1568 | 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 | + | |
| 1569 | 2346 | // Set a Link |
| 1570 | 2347 | row.find('.pagelayer-elp-link').on('change', function(){ |
| 1571 | - _pagelayer_set_atts(row, jQuery(this).val());// Save and Render | |
| 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 | + | |
| 1572 | 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(){ | |
| 1573 | 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 | + | |
| 1574 | 2498 | } |
| 1575 | 2499 | |
| 1576 | 2500 | // The Textarea property |
| 1577 | 2501 | function pagelayer_elp_textarea(row, prop){ |
| 1578 | 2502 | |
| 2503 | + var rows = prop.rows ? 'rows="'+prop.rows+' "' : ''; | |
| 2504 | + | |
| 1579 | 2505 | var div = '<div class="pagelayer-elp-textarea-div">'+ |
| 1580 | - '<textarea class="pagelayer-elp-textarea">'+prop.c['val']+'</textarea>'+ | |
| 2506 | + '<textarea '+rows+'class="pagelayer-elp-textarea"></textarea>'+ | |
| 1581 | 2507 | '</div>'; |
| 1582 | 2508 | |
| 1583 | 2509 | row.append(div); |
| 1584 | - | |
| 2510 | + row.find('.pagelayer-elp-textarea').val(pagelayer_trim(prop.c['val'])); | |
| 2511 | + | |
| 1585 | 2512 | // Handle on change |
| 1586 | 2513 | row.find('.pagelayer-elp-textarea').on('input', function(){ |
| 1587 | 2514 | _pagelayer_set_atts(row, pagelayer_trim(jQuery(this).val()));// Save and Render |
| 1588 | 2515 | }); |
| @@ -1588,14 +2515,17 @@ | ||
| 1588 | 2515 | }); |
| 1589 | 2516 | }; |
| 1590 | 2517 | |
| 1591 | 2518 | // Clear all editable |
| 1592 | -function pagelayer_clear_editable(){ | |
| 2519 | +function pagelayer_clear_editable(dontDestroy){ | |
| 1593 | 2520 | |
| 1594 | 2521 | // Destroy all |
| 1595 | 2522 | for(var x in pagelayer_editor){ |
| 2523 | + if(dontDestroy == x){ | |
| 2524 | + console.log('Skipping '+dontDestroy); | |
| 2525 | + continue; | |
| 2526 | + } | |
| 1596 | 2527 | pagelayer_editor[x].pen.destroy(); |
| 1597 | - pagelayer_editor[x].$.removeClass('pagelayer-pen'); | |
| 1598 | 2528 | } |
| 1599 | 2529 | |
| 1600 | 2530 | }; |
| 1601 | 2531 | |
| @@ -1601,41 +2531,136 @@ | ||
| 1601 | 2531 | |
| 1602 | 2532 | // Makes a field editable in the DOM |
| 1603 | 2533 | function pagelayer_make_editable(jEle, e){ |
| 1604 | 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 | + | |
| 1605 | 2547 | // Is it already setup ? |
| 1606 | 2548 | if(jEle.hasClass('pagelayer-pen')){ |
| 1607 | 2549 | //console.log('Already Penned'); |
| 2550 | + //pagelayer_focus_editable(jEle, e, eId); | |
| 1608 | 2551 | return true; |
| 1609 | 2552 | } |
| 1610 | 2553 | |
| 1611 | - var prop = jEle.attr('pagelayer-editable'); | |
| 2554 | + var tag = pagelayer_tag(pEle); | |
| 2555 | + var all_props = pagelayer_shortcodes[tag]; | |
| 2556 | + var edit_opts; | |
| 2557 | + var fullEdit = false; | |
| 1612 | 2558 | |
| 1613 | - // Destroy the existing pen | |
| 1614 | - if(!pagelayer_empty(pagelayer_editor[prop])){ | |
| 1615 | - pagelayer_editor[prop].pen.destroy(); | |
| 1616 | - pagelayer_editor[prop].$.removeClass('pagelayer-pen'); | |
| 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 | + } | |
| 1617 | 2577 | } |
| 1618 | 2578 | |
| 1619 | - // The parent element | |
| 1620 | - var pEle = jEle.closest('.pagelayer-ele'); | |
| 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 | + }; | |
| 1621 | 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 | + | |
| 1622 | 2648 | var options = { |
| 1623 | 2649 | class: 'pagelayer-pen', |
| 1624 | - editor: jEle[0], | |
| 1625 | - list: ['bold', 'italic', 'underline', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'strike'], | |
| 1626 | - stay: false | |
| 2650 | + editor: jEle, | |
| 2651 | + toolbar: toolbar_options | |
| 1627 | 2652 | } |
| 1628 | 2653 | |
| 1629 | 2654 | // Setup the editor |
| 1630 | - pagelayer_editor[prop] = {}; | |
| 1631 | - pagelayer_editor[prop].pen = new Pen(options); | |
| 1632 | - pagelayer_editor[prop].$ = jEle; | |
| 2655 | + pagelayer_editor[eId] = {}; | |
| 2656 | + pagelayer_editor[eId].pen = new PagelayerPen(jEle, options); | |
| 2657 | + pagelayer_editor[eId].$ = jEle; | |
| 1633 | 2658 | |
| 1634 | 2659 | // Are we the clicked object, then set the focus |
| 1635 | 2660 | if(e){ |
| 1636 | 2661 | var target = jQuery(e.target); |
| 1637 | - if(target.is(jEle).length || jEle.find(target).length){ | |
| 2662 | + if(target.is(jEle) || jEle.find(target).length > 0){ | |
| 1638 | 2663 | jEle.focus(); |
| 1639 | 2664 | } |
| 1640 | 2665 | } |
| 1641 | 2666 | |
| @@ -1640,16 +2665,44 @@ | ||
| 1640 | 2665 | } |
| 1641 | 2666 | |
| 1642 | 2667 | // Reverse setup the event |
| 1643 | 2668 | jEle.on('blur', function(){ |
| 1644 | - //pagelayer_editor[prop].pen.destroy(); | |
| 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 | + | |
| 1645 | 2699 | }); |
| 1646 | 2700 | |
| 1647 | - // Reverse setup the event | |
| 2701 | + /*// Reverse setup the event | |
| 1648 | 2702 | jEle.on('focus', function(){ |
| 1649 | - jQuery('.pagelayer-pen-menu').hide(); | |
| 1650 | - pagelayer_editor[prop].pen.rebuild(); | |
| 1651 | - }); | |
| 2703 | + //pagelayer_clear_editable(eId); | |
| 2704 | + });*/ | |
| 1652 | 2705 | |
| 1653 | 2706 | // Reverse setup the event |
| 1654 | 2707 | jEle.on('input', function(){ |
| 1655 | 2708 | |
| @@ -1658,9 +2711,9 @@ | ||
| 1658 | 2711 | // Set the property as well |
| 1659 | 2712 | pagelayer_set_atts(pEle, prop, val); |
| 1660 | 2713 | |
| 1661 | 2714 | // Update the property |
| 1662 | - var input = pagelayer.$$('[pagelayer-elp-name='+prop+']').find('input,textarea,.trumbowyg-editor'); | |
| 2715 | + var input = pagelayer.$$('[pagelayer-element-id='+pagelayer_id(pEle)+']').find('[pagelayer-elp-name='+prop+']').find('input,textarea,.trumbowyg-editor'); | |
| 1663 | 2716 | //console.log(input); |
| 1664 | 2717 | |
| 1665 | 2718 | if(input.length > 0){ |
| 1666 | 2719 | if(input.hasClass('trumbowyg-editor')){ |
| @@ -1677,68 +2730,97 @@ | ||
| 1677 | 2730 | // The Icon Property |
| 1678 | 2731 | function pagelayer_elp_icon(row, prop){ |
| 1679 | 2732 | |
| 1680 | 2733 | var $ = jQuery; |
| 2734 | + var sets_html = ''; | |
| 1681 | 2735 | |
| 1682 | - // Find the available icons | |
| 1683 | - if(pagelayer_empty(pagelayer_icons)){ | |
| 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){ | |
| 1684 | 2753 | |
| 1685 | - pagelayer_icons = $.map($.map(document.styleSheets, function(s){ | |
| 1686 | - | |
| 1687 | - if(s.href && s.href.match(/font\-awesome\.min\.css/)){ | |
| 1688 | - return s; | |
| 1689 | - } | |
| 1690 | - return null; | |
| 2754 | + for(var i in pagelayer_icons){ | |
| 1691 | 2755 | |
| 1692 | - })[0].cssRules, function(r) { | |
| 2756 | + icons[i] = {}; | |
| 1693 | 2757 | |
| 1694 | - if(r.cssText.indexOf('::before { content: ') > 0){ | |
| 1695 | - return r.cssText.substring(4,r.cssText.indexOf('::')); | |
| 1696 | - } | |
| 1697 | - return null; | |
| 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 | + } | |
| 1698 | 2771 | |
| 1699 | - }); | |
| 1700 | - | |
| 1701 | - } | |
| 2772 | + } | |
| 1702 | 2773 | |
| 1703 | - var icons = pagelayer_icons; | |
| 1704 | - //console.log(icons); | |
| 1705 | - | |
| 1706 | - if('list' in prop && prop.list.length > 0){ | |
| 1707 | - icons = prop.list; | |
| 2774 | + }else{ | |
| 2775 | + icons = pagelayer_icons; | |
| 1708 | 2776 | } |
| 1709 | 2777 | |
| 1710 | 2778 | // Icon function |
| 1711 | - var icon_html = function(name){ | |
| 2779 | + var icon_html = function(name, cat){ | |
| 1712 | 2780 | return '<span class="pagelayer-elp-icon-span">'+ |
| 1713 | - '<i class="fa fa-'+name+'" icon="fa fa-'+name+'" /> '+name+ | |
| 2781 | + '<i class="'+cat+' fa-'+name+'" icon="'+name+'" ></i> '+name+ | |
| 1714 | 2782 | '</span>'; |
| 1715 | 2783 | } |
| 1716 | 2784 | |
| 1717 | 2785 | var div = '<div class="pagelayer-elp-icon-div">'+ |
| 1718 | - '<div class="pagelayer-elp-icon-preview">'+ | |
| 1719 | - '<i class="fa fa-'+prop.c['val']+'"></i>'+ | |
| 1720 | - '<span class="pagelayer-elp-icon-name">'+ | |
| 1721 | - (pagelayer_empty(prop.c['val'])?'Choose icon':prop.c['val'])+ | |
| 1722 | - '</span>'+ | |
| 1723 | - '</div>'+ | |
| 1724 | - '<span class="pagelayer-elp-icon-open">▼</span>'+ | |
| 1725 | - '</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>'; | |
| 1726 | 2795 | |
| 1727 | 2796 | row.append(div); |
| 1728 | 2797 | |
| 1729 | 2798 | // Make all icons list |
| 1730 | - var html = '<div class="pagelayer-elp-icon-selector">'+ | |
| 1731 | - '<input type="text" class="pagelayer-elp-search-icon" name="search-icon" placeholder="'+pagelayer_l('search')+'">'+ | |
| 1732 | - '<div class="pagelayer-elp-icon-list">'; | |
| 1733 | - | |
| 1734 | - for(var x in icons){ | |
| 1735 | - html += icon_html(icons[x]); | |
| 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>'; | |
| 1736 | 2803 | } |
| 1737 | 2804 | |
| 1738 | - html += '</div>'+ | |
| 1739 | - '</div>'; | |
| 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 | + } | |
| 1740 | 2819 | |
| 2820 | + html += '</div>'+ | |
| 2821 | + '</div>'; | |
| 2822 | + | |
| 1741 | 2823 | row.append(html); |
| 1742 | 2824 | |
| 1743 | 2825 | // Open the selector |
| 1744 | 2826 | row.find('.pagelayer-elp-icon-div').on('click', function(){ |
| @@ -1744,21 +2826,64 @@ | ||
| 1744 | 2826 | row.find('.pagelayer-elp-icon-div').on('click', function(){ |
| 1745 | 2827 | row.find('.pagelayer-elp-icon-selector').slideToggle(); |
| 1746 | 2828 | }); |
| 1747 | 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 | + | |
| 1748 | 2865 | // Handle search of icon |
| 1749 | - row.find('.pagelayer-elp-search-icon').on('keyup', function(){ | |
| 2866 | + row.find('.pagelayer-elp-search-icon').on('keyup', function(){ | |
| 1750 | 2867 | |
| 1751 | 2868 | var v = this.value; |
| 1752 | - var span =''; | |
| 2869 | + var span = ''; | |
| 1753 | 2870 | v = v.toLowerCase(); |
| 1754 | 2871 | v = v.replace(/\s+/g, '-'); |
| 2872 | + //console.log(sorted_icons); | |
| 1755 | 2873 | |
| 1756 | - for(var x in icons){ | |
| 1757 | - if(icons[x].substring(0, v.length) === v){ | |
| 1758 | - span += icon_html(icons[x]); | |
| 1759 | - } | |
| 1760 | - } | |
| 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 | + }); | |
| 1761 | 2886 | |
| 1762 | 2887 | row.find('.pagelayer-elp-icon-list').empty().html(span); |
| 1763 | 2888 | |
| 1764 | 2889 | }); |
| @@ -1763,54 +2888,210 @@ | ||
| 1763 | 2888 | |
| 1764 | 2889 | }); |
| 1765 | 2890 | |
| 1766 | 2891 | // Handle click within the icon selector |
| 1767 | - row.find('.pagelayer-elp-icon-selector').on('click', function(e){ | |
| 2892 | + row.find('.pagelayer-elp-icon-list').on('click', function(e){ | |
| 1768 | 2893 | |
| 1769 | 2894 | var jEle = jQuery(e.target); |
| 1770 | - var i = jEle.children().attr('icon'); | |
| 1771 | - if(pagelayer_empty(i)){ | |
| 2895 | + var i = jEle.children().attr('class'); | |
| 2896 | + var name = jEle.children().attr('icon'); | |
| 2897 | + | |
| 2898 | + if(pagelayer_empty(name)){ | |
| 1772 | 2899 | return false; |
| 1773 | 2900 | } |
| 1774 | 2901 | |
| 1775 | - i = i.replace('fa fa-', ''); | |
| 1776 | - | |
| 1777 | 2902 | // Set the icon in this list |
| 1778 | - row.find('.pagelayer-elp-icon-preview').html('<i class="fa fa-'+i+'"></i><span class="pagelayer-elp-icon-name">'+i+'</span>'); | |
| 2903 | + row.find('.pagelayer-elp-icon-preview').html('<i class="'+i+'"></i><span class="pagelayer-elp-icon-name">'+name+'</span>'); | |
| 1779 | 2904 | row.find('.pagelayer-elp-icon-selector').slideUp(); |
| 1780 | 2905 | |
| 1781 | 2906 | _pagelayer_set_atts(row, i);// Save and Render |
| 1782 | 2907 | |
| 2908 | + row.find('.pagelayer-elp-icon-close').show(); | |
| 1783 | 2909 | return false; |
| 1784 | 2910 | |
| 1785 | 2911 | }); |
| 1786 | 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 | + | |
| 1787 | 2925 | } |
| 1788 | 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 | + | |
| 1789 | 3015 | // The Color Property |
| 1790 | 3016 | function pagelayer_elp_color(row, prop){ |
| 1791 | 3017 | |
| 1792 | - var div = '<div class="pagelayer-elp-color-div">'+ | |
| 1793 | - '<div class="pagelayer-elp-color-preview"></div>'+ | |
| 1794 | - '<span class="pagelayer-elp-remove-color pagelayer-prop-action"><i class="fa fa-times" /></span>'+ | |
| 1795 | - '</div>'; | |
| 3018 | + var val = prop.c['val']; | |
| 3019 | + var is_global = pagelayer_is_global_color(val); | |
| 3020 | + var global_active = ''; | |
| 1796 | 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 | + | |
| 1797 | 3056 | row.append(div); |
| 1798 | 3057 | |
| 1799 | - row.find('.pagelayer-elp-color-preview').css('background', prop.c['val']); | |
| 3058 | + row.find('.pagelayer-elp-color-preview').css('background', val); | |
| 1800 | 3059 | |
| 1801 | - var picker = new Picker({ | |
| 3060 | + var picker = new pagelayer_Picker({ | |
| 1802 | 3061 | parent : row.find('.pagelayer-elp-color-div')[0], |
| 1803 | 3062 | popup : 'left', |
| 1804 | - color : prop.c['val'], | |
| 3063 | + color : val, | |
| 1805 | 3064 | doc: window.parent.document |
| 1806 | 3065 | }); |
| 1807 | 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 | + | |
| 1808 | 3084 | // Handle selected color |
| 1809 | - picker.onChange = function(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 | |
| 1810 | 3089 | |
| 1811 | - row.find('.pagelayer-elp-color-preview').removeClass('pagelayer-blank-preview').css('background', color.rgbaString); | |
| 1812 | - _pagelayer_set_atts(row, color.hex);// Save and Render | |
| 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(); | |
| 1813 | 3094 | }; |
| 1814 | 3095 | |
| 1815 | 3096 | picker.onOpen = picker.onChange; |
| 1816 | 3097 | |
| @@ -1816,12 +3097,47 @@ | ||
| 1816 | 3097 | |
| 1817 | 3098 | row.find('.pagelayer-elp-remove-color').on('click', function(event){ |
| 1818 | 3099 | event.stopPropagation(); |
| 1819 | 3100 | picker.setColor(prop.default, true); |
| 1820 | - row.find('.pagelayer-elp-color-preview').addClass('pagelayer-blank-preview'); | |
| 3101 | + preview.addClass('pagelayer-blank-preview'); | |
| 3102 | + handle_white(''); | |
| 1821 | 3103 | _pagelayer_set_atts(row, ' ');// Save and Render |
| 1822 | - }) | |
| 3104 | + }); | |
| 1823 | 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 | + }); | |
| 1824 | 3140 | } |
| 1825 | 3141 | |
| 1826 | 3142 | // The Spinner property |
| 1827 | 3143 | function pagelayer_elp_spinner(row, prop){ |
| @@ -1827,15 +3143,21 @@ | ||
| 1827 | 3143 | function pagelayer_elp_spinner(row, prop){ |
| 1828 | 3144 | |
| 1829 | 3145 | var div = '<div class="pagelayer-elp-spinner-div">'+ |
| 1830 | 3146 | '<input type="number" class="pagelayer-elp-spinner" name="'+prop.c['name']+'"'+ |
| 1831 | - ' min="'+prop['min']+'" max="'+prop['max']+'" step="'+prop['step']+'" value="'+prop.c['val']+'"/>'+ | |
| 3147 | + ' min="'+prop['min']+'" max="'+prop['max']+'" step="'+prop['step']+'" value="'+parseFloat(prop.c['val'])+'"/>'+ | |
| 1832 | 3148 | '</div>'; |
| 1833 | 3149 | |
| 1834 | 3150 | row.append(div); |
| 1835 | 3151 | |
| 1836 | 3152 | row.find('input').on('input', function(){ |
| 1837 | - _pagelayer_set_atts(row, jQuery(this).val());// Save and Render | |
| 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 | |
| 1838 | 3160 | }); |
| 1839 | 3161 | |
| 1840 | 3162 | } |
| 1841 | 3163 | |
| @@ -1841,13 +3163,20 @@ | ||
| 1841 | 3163 | |
| 1842 | 3164 | // The Group Property |
| 1843 | 3165 | function pagelayer_elp_group(row, prop){ |
| 1844 | 3166 | |
| 3167 | + var btnHidden = ''; | |
| 3168 | + | |
| 3169 | + // Hide button, clone and delete | |
| 3170 | + if(!pagelayer_empty(prop['hide'])){ | |
| 3171 | + btnHidden = 'pagelayer-hidden'; | |
| 3172 | + } | |
| 3173 | + | |
| 1845 | 3174 | // Remove the pagelayer-show-tab |
| 1846 | 3175 | row.removeAttr('pagelayer-show-tab'); |
| 1847 | 3176 | |
| 1848 | 3177 | var div = '<div class="pagelayer-elp-group-div"></div>'+ |
| 1849 | - '<center><button class="pagelayer-elp-button">'+prop['text']+'</button></center>'; | |
| 3178 | + '<center><button class="pagelayer-elp-button '+btnHidden+'">'+prop['text']+'</button></center>'; | |
| 1850 | 3179 | |
| 1851 | 3180 | row.append(div); |
| 1852 | 3181 | |
| 1853 | 3182 | // Add button |
| @@ -1856,9 +3185,9 @@ | ||
| 1856 | 3185 | var ele_id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id') || ''; |
| 1857 | 3186 | var pEle = jQuery('[pagelayer-id="'+ele_id+'"]'); |
| 1858 | 3187 | |
| 1859 | 3188 | // First add the element inside the group element |
| 1860 | - var id = pagelayer_element_add_child(pEle, prop['sc']); | |
| 3189 | + var id = pagelayer_element_add_child(pEle, prop['sc'], prop); | |
| 1861 | 3190 | //pagelayer_element_setup('[pagelayer-id='+id+']', true); |
| 1862 | 3191 | |
| 1863 | 3192 | show_item(id); |
| 1864 | 3193 | |
| @@ -1895,12 +3224,12 @@ | ||
| 1895 | 3224 | |
| 1896 | 3225 | // Create the HTML |
| 1897 | 3226 | var holder = jQuery('<div class="pagelayer-elp-group-item" pagelayer-group-item-id="'+id+'">'+ |
| 1898 | 3227 | '<div class="pagelayer-elp-group-item-head">'+ |
| 1899 | - '<span class="pagelayer-elp-group-item-drag"><i class="fa fa-bars" /></span>'+ | |
| 3228 | + '<span class="pagelayer-elp-group-item-drag"><i class="pli pli-menu" ></i></span>'+ | |
| 1900 | 3229 | '<span class="pagelayer-elp-group-item-title">'+title+'</span>'+ |
| 1901 | - '<span class="pagelayer-elp-group-item-clone"><i class="fa fa-clone" /></span>'+ | |
| 1902 | - '<span class="pagelayer-elp-group-item-del"><i class="fa fa-trash" /></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>'+ | |
| 1903 | 3232 | '</div>'+ |
| 1904 | 3233 | '<div class="pagelayer-elp-group-item-body"></div>'+ |
| 1905 | 3234 | '</div>'); |
| 1906 | 3235 | |
| @@ -1911,9 +3240,12 @@ | ||
| 1911 | 3240 | row.find('.pagelayer-elp-group-div').first().append(holder); |
| 1912 | 3241 | } |
| 1913 | 3242 | |
| 1914 | 3243 | // Setup the toggle |
| 1915 | - holder.find('.pagelayer-elp-group-item-title').first().on('click', function(){ | |
| 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 | + } | |
| 1916 | 3248 | var rEle = holder.find('.pagelayer-elp-group-item-body').first(); |
| 1917 | 3249 | var r_id = holder.attr('pagelayer-group-item-id'); |
| 1918 | 3250 | |
| 1919 | 3251 | // If the props are not already setup |
| @@ -1931,13 +3263,13 @@ | ||
| 1931 | 3263 | } |
| 1932 | 3264 | |
| 1933 | 3265 | } |
| 1934 | 3266 | |
| 1935 | - rEle.toggle('slow'); | |
| 3267 | + rEle.toggle(); | |
| 1936 | 3268 | }); |
| 1937 | 3269 | |
| 1938 | 3270 | // Clone the item |
| 1939 | - holder.find('.pagelayer-elp-group-item-head .fa-clone').on('click', function(){ | |
| 3271 | + holder.find('.pagelayer-elp-group-item-head .pli-clone').on('click', function(){ | |
| 1940 | 3272 | |
| 1941 | 3273 | // If the element have any parent |
| 1942 | 3274 | var jEle = jQuery('[pagelayer-id="'+id+'"]'); |
| 1943 | 3275 | var par = pagelayer_get_parent(jEle); |
| @@ -1950,9 +3282,9 @@ | ||
| 1950 | 3282 | } |
| 1951 | 3283 | }); |
| 1952 | 3284 | |
| 1953 | 3285 | // Delete the item |
| 1954 | - holder.find('.pagelayer-elp-group-item-head .fa-trash').on('click', function(){ | |
| 3286 | + holder.find('.pagelayer-elp-group-item-head .pli-trashcan').on('click', function(){ | |
| 1955 | 3287 | |
| 1956 | 3288 | // If the element have any parent |
| 1957 | 3289 | var jEle = jQuery('[pagelayer-id="'+id+'"]'); |
| 1958 | 3290 | var par = pagelayer_get_parent(jEle); |
| @@ -1964,16 +3296,43 @@ | ||
| 1964 | 3296 | } |
| 1965 | 3297 | }); |
| 1966 | 3298 | |
| 1967 | 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 | + }); | |
| 1968 | 3323 | |
| 1969 | 3324 | // Handle click of the group |
| 1970 | 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 | + } | |
| 1971 | 3330 | add_item(row); |
| 1972 | 3331 | }); |
| 1973 | 3332 | |
| 1974 | 3333 | // Find the existing items |
| 1975 | - prop.el.$.find('[pagelayer-tag='+prop['sc']+']').each(function(){ | |
| 3334 | + prop.el.$.find('[pagelayer-parent="'+prop.el['id']+'"]').each(function(){ | |
| 1976 | 3335 | var jEle = jQuery(this); |
| 1977 | 3336 | var id = pagelayer_assign_id(jEle); |
| 1978 | 3337 | show_item(id); |
| 1979 | 3338 | }); |
| @@ -1978,12 +3337,50 @@ | ||
| 1978 | 3337 | show_item(id); |
| 1979 | 3338 | }); |
| 1980 | 3339 | }; |
| 1981 | 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 | + | |
| 1982 | 3379 | // The Datetime Property |
| 1983 | 3380 | function pagelayer_elp_datetime(row, prop){ |
| 1984 | 3381 | |
| 1985 | - var div = '<div class="pagelayer-elp-datetime-div pagelayer-elp-input-icon">'+ | |
| 3382 | + var div = '<div class="pagelayer-elp-datetime-div">'+ | |
| 1986 | 3383 | '<input type="date" class="pagelayer-elp-datetime" name="'+prop.c['name']+'" value="'+prop.c['val']+'" />'+ |
| 1987 | 3384 | '</div>'; |
| 1988 | 3385 | |
| 1989 | 3386 | row.append(div); |
| @@ -1997,25 +3394,27 @@ | ||
| 1997 | 3394 | // The padding property |
| 1998 | 3395 | function pagelayer_elp_padding(row, prop){ |
| 1999 | 3396 | var val = ['', '', '', '']; |
| 2000 | 3397 | |
| 2001 | - if(prop.c['val'].length > 0){ | |
| 2002 | - val = prop.c['val'].split(','); | |
| 2003 | - //console.log(val) | |
| 3398 | + if(!pagelayer_empty(prop.c['val'])){ | |
| 3399 | + val = prop.c['val']; | |
| 3400 | + if(pagelayer_is_string(val)){ | |
| 3401 | + val = val.split(','); | |
| 3402 | + } | |
| 2004 | 3403 | } |
| 2005 | 3404 | |
| 2006 | 3405 | var div = '<div class="pagelayer-elp-padding-div">'+ |
| 2007 | - '<input type="number" class="pagelayer-elp-padding" value="'+parseInt(val[0])+'"></input>'+ | |
| 2008 | - '<input type="number" class="pagelayer-elp-padding" value="'+parseInt(val[1])+'"></input>'+ | |
| 2009 | - '<input type="number" class="pagelayer-elp-padding" value="'+parseInt(val[2])+'"></input>'+ | |
| 2010 | - '<input type="number" class="pagelayer-elp-padding" value="'+parseInt(val[3])+'"></input>'+ | |
| 2011 | - '<i class="fa fa-link" />'+ | |
| 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>'+ | |
| 2012 | 3411 | '</div>'; |
| 2013 | 3412 | |
| 2014 | 3413 | row.append(div); |
| 2015 | 3414 | |
| 2016 | 3415 | // Is the value linked ? |
| 2017 | - var link = row.find('.pagelayer-elp-padding-div .fa'); | |
| 3416 | + var link = row.find('.pagelayer-elp-padding-div i'); | |
| 2018 | 3417 | var isLinked = 1; |
| 2019 | 3418 | //isLinked = isLinked == 2 ? false : true; |
| 2020 | 3419 | //console.log(isLinked); |
| 2021 | 3420 | var tmp_val = val[0]; |
| @@ -2050,9 +3449,9 @@ | ||
| 2050 | 3449 | |
| 2051 | 3450 | row.find('input').on('input', function(){ |
| 2052 | 3451 | |
| 2053 | 3452 | // Are the values linked |
| 2054 | - var linked = row.find('.pagelayer-elp-padding-div .fa').hasClass('pagelayer-elp-padding-linked'); | |
| 3453 | + var linked = row.find('.pagelayer-elp-padding-div .pli').hasClass('pagelayer-elp-padding-linked'); | |
| 2055 | 3454 | |
| 2056 | 3455 | if(linked){ |
| 2057 | 3456 | var val = jQuery(this).val(); |
| 2058 | 3457 | row.find('input').each(function(){ |
| @@ -2079,14 +3478,17 @@ | ||
| 2079 | 3478 | var val =['','','','']; |
| 2080 | 3479 | |
| 2081 | 3480 | // Do we have a val ? |
| 2082 | 3481 | if(!pagelayer_empty(prop.c['val'])){ |
| 2083 | - val = prop.c['val'].split(','); | |
| 3482 | + val = prop.c['val']; | |
| 3483 | + if(pagelayer_is_string(val)){ | |
| 3484 | + val = val.split(','); | |
| 3485 | + } | |
| 2084 | 3486 | } |
| 2085 | 3487 | |
| 2086 | 3488 | //var val = {color: '', blur: '', horizontal: '', vertical: ''}; |
| 2087 | 3489 | |
| 2088 | - var div = '<span class="pagelayer-prop-edit"><i class="fa fa-pencil"></i></span>'+ | |
| 3490 | + var div = '<span class="pagelayer-prop-edit"><i class="pli pli-pencil"></i></span>'+ | |
| 2089 | 3491 | '<div class="pagelayer-elp-shadow-div">'+ |
| 2090 | 3492 | '<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-horizontal">'+ |
| 2091 | 3493 | '<label class="pagelayer-elp-label">Horizontal</label>'+ |
| 2092 | 3494 | '<input class="pagelayer-elp-shadow-input" type="number" max="100" min="-100" step="1" class="pagelayer-elp-shadow-blur" value="'+val[0]+'"></input>'+ |
| @@ -2099,11 +3501,12 @@ | ||
| 2099 | 3501 | '<label class="pagelayer-elp-label">Blur</label>'+ |
| 2100 | 3502 | '<input class="pagelayer-elp-shadow-input" type="number" max="100" min="0" step="1" class="pagelayer-elp-shadow-blur" value="'+val[2]+'"></input>'+ |
| 2101 | 3503 | '</div>'+ |
| 2102 | 3504 | '<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-color">'+ |
| 2103 | - '<label class="pagelayer-elp-label">color</label>'+ | |
| 3505 | + '<label class="pagelayer-elp-label">Color</label>'+ | |
| 2104 | 3506 | '<div class="pagelayer-elp-color-div">'+ |
| 2105 | 3507 | '<div class="pagelayer-elp-color-preview"></div>'+ |
| 3508 | + '<span class="pagelayer-elp-remove-color"><i class="pli pli-cross" ></i></span>'+ | |
| 2106 | 3509 | '</div>'+ |
| 2107 | 3510 | '</div>'+ |
| 2108 | 3511 | '</div>'; |
| 2109 | 3512 | |
| @@ -2112,23 +3515,51 @@ | ||
| 2112 | 3515 | row.find('.pagelayer-prop-edit').on('click', function(){ |
| 2113 | 3516 | row.find('.pagelayer-elp-shadow-div').toggleClass('pagelayer-prop-show'); |
| 2114 | 3517 | }); |
| 2115 | 3518 | |
| 2116 | - row.find('.pagelayer-elp-color-preview').css('background', val[3]); | |
| 3519 | + var preview = row.find('.pagelayer-elp-color-preview'); | |
| 3520 | + preview.css('background', val[3]); | |
| 2117 | 3521 | |
| 2118 | - var picker = new Picker({ | |
| 3522 | + var picker = new pagelayer_Picker({ | |
| 2119 | 3523 | parent : row.find('.pagelayer-elp-color-div')[0], |
| 2120 | 3524 | popup : 'left', |
| 3525 | + color : val[3], | |
| 2121 | 3526 | doc: window.parent.document |
| 2122 | 3527 | }); |
| 2123 | 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 | + | |
| 2124 | 3544 | // Handle selected color |
| 2125 | 3545 | picker.onChange = function(color) { |
| 2126 | - row.find('.pagelayer-elp-color-preview').css('background', color.rgbaString); | |
| 3546 | + preview.removeClass('pagelayer-blank-preview').css('background', color.rgbaString); | |
| 3547 | + handle_white(color.hex); | |
| 2127 | 3548 | val[3] = (color.hex ? color.hex : ''); |
| 2128 | 3549 | _pagelayer_set_atts(row, val); |
| 2129 | 3550 | }; |
| 2130 | 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 | + | |
| 2131 | 3562 | row.find('input').on('input', function(){ |
| 2132 | 3563 | var i = 0; |
| 2133 | 3564 | row.find('.pagelayer-elp-shadow-input').each(function(){ |
| 2134 | 3565 | var value = jQuery(this).val(); |
| @@ -2139,27 +3570,142 @@ | ||
| 2139 | 3570 | }); |
| 2140 | 3571 | |
| 2141 | 3572 | } |
| 2142 | 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 | + | |
| 2143 | 3686 | // The filter property |
| 2144 | 3687 | function pagelayer_elp_filter(row, prop){ |
| 2145 | 3688 | |
| 2146 | - var val =['','','','','','','']; | |
| 3689 | + var val = [0,100,100,0,0,100,100]; | |
| 2147 | 3690 | |
| 2148 | 3691 | // Do we have a val ? |
| 2149 | 3692 | if(!pagelayer_empty(prop.c['val'])){ |
| 2150 | - val = prop.c['val'].split(','); | |
| 3693 | + val = prop.c['val']; | |
| 3694 | + if(pagelayer_is_string(val)){ | |
| 3695 | + val = val.split(','); | |
| 3696 | + } | |
| 2151 | 3697 | } |
| 2152 | 3698 | |
| 2153 | 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']]; |
| 2154 | 3700 | |
| 2155 | - var div = '<span class="pagelayer-prop-edit"><i class="fa fa-pencil"></i></span>'+ | |
| 3701 | + var div = '<span class="pagelayer-prop-edit"><i class="pli pli-pencil"></i></span>'+ | |
| 2156 | 3702 | '<div class="pagelayer-elp-filter-div">'; |
| 2157 | 3703 | |
| 2158 | 3704 | jQuery.each(val,function(key, value){ |
| 2159 | 3705 | div += '<div class="pagelayer-elp-prop-grp pagelayer-elp-filter-'+filters[key][0]+'">'+ |
| 2160 | 3706 | '<label class="pagelayer-elp-label">'+filters[key][0]+'</label>'+ |
| 2161 | - '<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>'+ | |
| 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>'+ | |
| 2162 | 3708 | '<span class="pagelayer-elp-filter-val">'+value+'</span>'+ |
| 2163 | 3709 | '</div>'; |
| 2164 | 3710 | }); |
| 2165 | 3711 | |
| @@ -2185,16 +3731,53 @@ | ||
| 2185 | 3731 | |
| 2186 | 3732 | // The gradient property |
| 2187 | 3733 | function pagelayer_elp_gradient(row, prop){ |
| 2188 | 3734 | |
| 2189 | - var val =['','','','','','','']; | |
| 3735 | + var val = ['','','','','','','']; | |
| 2190 | 3736 | |
| 2191 | 3737 | // Do we have a val ? |
| 2192 | 3738 | if(!pagelayer_empty(prop.c['val'])){ |
| 2193 | - val = prop.c['val'].split(','); | |
| 3739 | + val = prop.c['val']; | |
| 3740 | + if(pagelayer_is_string(val)){ | |
| 3741 | + val = val.split(','); | |
| 3742 | + } | |
| 2194 | 3743 | } |
| 2195 | 3744 | |
| 3745 | + var setColor = [val[1], val[3], val[5]]; | |
| 3746 | + | |
| 2196 | 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 | + } | |
| 2197 | 3780 | |
| 2198 | 3781 | var div = '<div class="pagelayer-elp-gradient-div">'+ |
| 2199 | 3782 | '<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-angle">'+ |
| 2200 | 3783 | '<label class="pagelayer-elp-label">Angle</label>'+ |
| @@ -2199,12 +3782,16 @@ | ||
| 2199 | 3782 | '<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-angle">'+ |
| 2200 | 3783 | '<label class="pagelayer-elp-label">Angle</label>'+ |
| 2201 | 3784 | '<input class="pagelayer-elp-gradient-input" type="number" max="360" min="0" step="1" class="pagelayer-elp-gradient-angle" value="'+val[0]+'"></input>'+ |
| 2202 | 3785 | '</div>'+ |
| 2203 | - '<div class="pagelayer-elp-prop-grp">'+ | |
| 2204 | - '<label class="pagelayer-elp-label">color 1</label>'+ | |
| 2205 | - '<div class="pagelayer-elp-color-div">'+ | |
| 2206 | - '<div class="pagelayer-elp-gradient-color1 pagelayer-elp-color-preview"></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)+ | |
| 2207 | 3794 | '</div>'+ |
| 2208 | 3795 | '</div>'+ |
| 2209 | 3796 | '<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-per1">'+ |
| 2210 | 3797 | '<label class="pagelayer-elp-label">Percentage 1</label>'+ |
| @@ -2209,12 +3796,16 @@ | ||
| 2209 | 3796 | '<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-per1">'+ |
| 2210 | 3797 | '<label class="pagelayer-elp-label">Percentage 1</label>'+ |
| 2211 | 3798 | '<input class="pagelayer-elp-gradient-input" type="number" max="100" min="-100" step="1" class="pagelayer-elp-gradient-per1" value="'+val[2]+'"></input>'+ |
| 2212 | 3799 | '</div>'+ |
| 2213 | - '<div class="pagelayer-elp-prop-grp">'+ | |
| 2214 | - '<label class="pagelayer-elp-label">color 2</label>'+ | |
| 2215 | - '<div class="pagelayer-elp-color-div">'+ | |
| 2216 | - '<div class="pagelayer-elp-gradient-color2 pagelayer-elp-color-preview"></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)+ | |
| 2217 | 3808 | '</div>'+ |
| 2218 | 3809 | '</div>'+ |
| 2219 | 3810 | '<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-per2">'+ |
| 2220 | 3811 | '<label class="pagelayer-elp-label">Percentage 2</label>'+ |
| @@ -2219,12 +3810,16 @@ | ||
| 2219 | 3810 | '<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-per2">'+ |
| 2220 | 3811 | '<label class="pagelayer-elp-label">Percentage 2</label>'+ |
| 2221 | 3812 | '<input class="pagelayer-elp-gradient-input" type="number" max="100" min="0" step="1" class="pagelayer-elp-gradient-per2" value="'+val[4]+'"></input>'+ |
| 2222 | 3813 | '</div>'+ |
| 2223 | - '<div class="pagelayer-elp-prop-grp">'+ | |
| 2224 | - '<label class="pagelayer-elp-label">color 3</label>'+ | |
| 2225 | - '<div class="pagelayer-elp-color-div">'+ | |
| 2226 | - '<div class="pagelayer-elp-gradient-color3 pagelayer-elp-color-preview"></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)+ | |
| 2227 | 3822 | '</div>'+ |
| 2228 | 3823 | '</div>'+ |
| 2229 | 3824 | '<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-per3">'+ |
| 2230 | 3825 | '<label class="pagelayer-elp-label">Percentage 3</label>'+ |
| @@ -2232,54 +3827,70 @@ | ||
| 2232 | 3827 | '</div>'+ |
| 2233 | 3828 | '</div>'; |
| 2234 | 3829 | |
| 2235 | 3830 | row.append(div); |
| 2236 | - var i = 1; | |
| 3831 | + var i = 0; | |
| 2237 | 3832 | row.find('.pagelayer-elp-color-preview').each(function(){ |
| 2238 | - jQuery(this).css('background', val[i]); | |
| 2239 | - i = i+2; | |
| 3833 | + jQuery(this).css('background', setColor[i]); | |
| 3834 | + i++; | |
| 2240 | 3835 | }); |
| 2241 | 3836 | |
| 2242 | - var picker1 = new Picker({ | |
| 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({ | |
| 2243 | 3845 | parent : row.find('.pagelayer-elp-gradient-color1')[0], |
| 2244 | 3846 | popup : 'left', |
| 2245 | - color : val[1], | |
| 3847 | + color : setColor[0], | |
| 2246 | 3848 | doc: window.parent.document |
| 2247 | 3849 | }); |
| 2248 | 3850 | |
| 2249 | 3851 | // Handle selected color |
| 2250 | 3852 | picker1.onChange = function(color) { |
| 2251 | - row.find('.pagelayer-elp-gradient-color1').css('background', color.rgbaString); | |
| 3853 | + var cPreview = row.find('.pagelayer-elp-gradient-color1') | |
| 3854 | + cPreview.css('background', color.rgbaString); | |
| 2252 | 3855 | val[1] = (color.hex ? color.hex : ''); |
| 2253 | 3856 | _pagelayer_set_atts(row, val); |
| 3857 | + | |
| 3858 | + removeGlobal(cPreview.closest('.pagelayer-elp-color-div-holder')); | |
| 2254 | 3859 | }; |
| 2255 | 3860 | |
| 2256 | - var picker2 = new Picker({ | |
| 3861 | + var picker2 = new pagelayer_Picker({ | |
| 2257 | 3862 | parent : row.find('.pagelayer-elp-gradient-color2')[0], |
| 2258 | 3863 | popup : 'left', |
| 2259 | - color : val[3], | |
| 3864 | + color : setColor[1], | |
| 2260 | 3865 | doc: window.parent.document |
| 2261 | 3866 | }); |
| 2262 | 3867 | |
| 2263 | 3868 | // Handle selected color |
| 2264 | 3869 | picker2.onChange = function(color) { |
| 2265 | - row.find('.pagelayer-elp-gradient-color2').css('background', color.rgbaString); | |
| 3870 | + var cPreview = row.find('.pagelayer-elp-gradient-color2'); | |
| 3871 | + cPreview.css('background', color.rgbaString); | |
| 2266 | 3872 | val[3] = (color.hex ? color.hex : ''); |
| 2267 | 3873 | _pagelayer_set_atts(row, val); |
| 3874 | + | |
| 3875 | + removeGlobal(cPreview.closest('.pagelayer-elp-color-div-holder')); | |
| 2268 | 3876 | }; |
| 2269 | 3877 | |
| 2270 | - var picker3 = new Picker({ | |
| 3878 | + var picker3 = new pagelayer_Picker({ | |
| 2271 | 3879 | parent : row.find('.pagelayer-elp-gradient-color3')[0], |
| 2272 | 3880 | popup : 'left', |
| 2273 | - color : val[5], | |
| 3881 | + color : setColor[2], | |
| 2274 | 3882 | doc: window.parent.document |
| 2275 | 3883 | }); |
| 2276 | 3884 | |
| 2277 | 3885 | // Handle selected color |
| 2278 | 3886 | picker3.onChange = function(color) { |
| 2279 | - row.find('.pagelayer-elp-gradient-color3').css('background', color.rgbaString); | |
| 3887 | + var cPreview = row.find('.pagelayer-elp-gradient-color3'); | |
| 3888 | + cPreview.css('background', color.rgbaString); | |
| 2280 | 3889 | val[5] = (color.hex ? color.hex : ''); |
| 2281 | 3890 | _pagelayer_set_atts(row, val); |
| 3891 | + | |
| 3892 | + removeGlobal(cPreview.closest('.pagelayer-elp-color-div-holder')); | |
| 2282 | 3893 | }; |
| 2283 | 3894 | |
| 2284 | 3895 | row.find('input').on('input', function(){ |
| 2285 | 3896 | var i = 0; |
| @@ -2290,122 +3901,280 @@ | ||
| 2290 | 3901 | }); |
| 2291 | 3902 | _pagelayer_set_atts(row, val); |
| 2292 | 3903 | }); |
| 2293 | 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 | + | |
| 2294 | 3958 | } |
| 2295 | 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 | + | |
| 2296 | 3995 | // The typography property |
| 2297 | 3996 | function pagelayer_elp_typography(row, prop){ |
| 2298 | 3997 | |
| 2299 | - var val =['','','','','','','','','','']; | |
| 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 = {}; | |
| 2300 | 4002 | |
| 2301 | - // Do we have a val ? | |
| 2302 | - if(!pagelayer_empty(prop.c['val'])){ | |
| 2303 | - val = prop.c['val'].split(','); | |
| 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'; | |
| 2304 | 4014 | } |
| 2305 | 4015 | |
| 2306 | - var select = { 'style' : ['', 'Normal', 'Italic', 'Oblique'], | |
| 2307 | - 'weight' : ['', '100', '200', '300', '400', '500', '600', '700', '800', '900'], | |
| 2308 | - 'variant' : ['', 'Normal', 'Small-caps'], | |
| 2309 | - 'deco-line' : ['', 'None', 'Overline', 'Line-through', 'Underline', 'Underline Overline'], | |
| 2310 | - 'deco-style' : ['Solid', 'Double', 'Dotted', 'Dashed', 'Wavy'], | |
| 2311 | - 'transform' : ['', 'Capitalize', 'Uppercase', 'Lowercase'], | |
| 2312 | - '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'] | |
| 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, | |
| 2313 | 4024 | } |
| 2314 | 4025 | |
| 2315 | - var option = function(val, setVal){ | |
| 2316 | - var selected = (val != setVal) ? '' : 'selected="selected"'; | |
| 2317 | - var lang = pagelayer_empty(val) ? 'Default' : val; | |
| 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; | |
| 2318 | 4030 | return '<option value="'+val+'" '+selected+'>'+ lang +'</option>'; |
| 2319 | 4031 | } |
| 2320 | 4032 | |
| 2321 | - var font_option = function(val, setVal){ | |
| 4033 | + var font_options = ''; | |
| 4034 | + var font_option = function(val, lang, type, setVal){ | |
| 2322 | 4035 | var selected = (val != setVal) ? '' : 'selected="selected"'; |
| 2323 | - var lang = pagelayer_empty(val) ? 'Default' : val; | |
| 2324 | - return '<option style="font-family:'+lang+'" value="'+val+'" '+selected+'>'+ lang +'</option>'; | |
| 4036 | + var lang = pagelayer_empty(lang) ? 'Default' : lang; | |
| 4037 | + return '<option class="pagelayer-elp-typo-sele-op" value="'+val+'" type="'+type+'" '+selected+'>'+lang+'</option>'; | |
| 2325 | 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 | + } | |
| 2326 | 4048 | |
| 2327 | - var div = '<span class="pagelayer-prop-edit"><i class="fa fa-pencil"></i></span>'+ | |
| 2328 | - '<div class="pagelayer-elp-typo-div">'+ | |
| 2329 | - '<div class="pagelayer-elp-typo pagelayer-elp-typo-fonts">'+ | |
| 2330 | - '<label class="pagelayer-elp-label">Font-Family</label>'+ | |
| 2331 | - '<select class="pagelayer-elp-typo-input">'; | |
| 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>'; | |
| 2332 | 4057 | |
| 2333 | - jQuery.each(select['fonts'],function(key, value){ | |
| 2334 | - div += font_option(value, val[0]); | |
| 2335 | - }); | |
| 2336 | - div +='</select>'+ | |
| 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>'+ | |
| 2337 | 4091 | '</div>'+ |
| 2338 | - '<div class="pagelayer-elp-typo pagelayer-elp-typo-size">'+ | |
| 2339 | - '<label class="pagelayer-elp-label">Font-Size</label>'+ | |
| 2340 | - '<input class="pagelayer-elp-typo-input" type="number" max="200" min="0" step="1" value="'+val[1]+'"></input>'+ | |
| 2341 | - '</div>'+ | |
| 2342 | 4092 | '<div class="pagelayer-elp-typo pagelayer-elp-typo-style">'+ |
| 2343 | - '<label class="pagelayer-elp-label">Font-Style</label>'+ | |
| 2344 | - '<select class="pagelayer-elp-typo-input">'; | |
| 4093 | + '<label class="pagelayer-elp-label">'+pagelayer_l('font_style')+'</label>'+ | |
| 4094 | + '<select name="font-style" class="pagelayer-elp-typo-input pagelayer-elp-select">'; | |
| 2345 | 4095 | |
| 2346 | 4096 | jQuery.each(select['style'],function(key, value){ |
| 2347 | - div += option(value, val[2]); | |
| 4097 | + div += option(key, value, val[2]); | |
| 2348 | 4098 | }); |
| 2349 | 4099 | div +='</select>'+ |
| 2350 | 4100 | '</div>'+ |
| 2351 | 4101 | '<div class="pagelayer-elp-typo pagelayer-elp-typo-weight">'+ |
| 2352 | - '<label class="pagelayer-elp-label">Font-Weight</label>'+ | |
| 2353 | - '<select class="pagelayer-elp-typo-input">'; | |
| 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">'; | |
| 2354 | 4104 | jQuery.each(select['weight'],function(key, value){ |
| 2355 | - div += option(value, val[3]); | |
| 4105 | + div += option(key, value, val[3]); | |
| 2356 | 4106 | }); |
| 2357 | 4107 | |
| 2358 | 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>'+ | |
| 2359 | 4121 | '</div>'+ |
| 2360 | 4122 | '<div class="pagelayer-elp-typo pagelayer-elp-typo-variant">'+ |
| 2361 | - '<label class="pagelayer-elp-label">Font-variant</label>'+ | |
| 2362 | - '<select class="pagelayer-elp-typo-input">'; | |
| 4123 | + '<label class="pagelayer-elp-label">'+pagelayer_l('font_variant')+'</label>'+ | |
| 4124 | + '<select name="font-variant" class="pagelayer-elp-typo-input pagelayer-elp-select">'; | |
| 2363 | 4125 | jQuery.each(select['variant'],function(key, value){ |
| 2364 | - div += option(value, val[4]); | |
| 4126 | + div += option(key, value, val[4]); | |
| 2365 | 4127 | }); |
| 2366 | 4128 | |
| 2367 | 4129 | div += '</select>'+ |
| 2368 | 4130 | '</div>'+ |
| 2369 | 4131 | '<div class="pagelayer-elp-typo pagelayer-elp-typo-deco-line">'+ |
| 2370 | - '<label class="pagelayer-elp-label">Decoration Line</label>'+ | |
| 2371 | - '<select class="pagelayer-elp-typo-input">'; | |
| 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">'; | |
| 2372 | 4134 | jQuery.each(select['deco-line'],function(key, value){ |
| 2373 | - div += option(value, val[5]); | |
| 4135 | + div += option(key, value, val[5]); | |
| 2374 | 4136 | }); |
| 2375 | 4137 | |
| 2376 | 4138 | div += '</select>'+ |
| 2377 | 4139 | '</div>'+ |
| 2378 | 4140 | '<div class="pagelayer-elp-typo pagelayer-elp-typo-deco-style">'+ |
| 2379 | - '<label class="pagelayer-elp-label">Decoration Style</label>'+ | |
| 2380 | - '<select class="pagelayer-elp-typo-input">'; | |
| 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">'; | |
| 2381 | 4143 | jQuery.each(select['deco-style'],function(key, value){ |
| 2382 | - div += option(value, val[6]); | |
| 4144 | + div += option(key, value, val[6]); | |
| 2383 | 4145 | }); |
| 2384 | 4146 | |
| 2385 | 4147 | div += '</select>'+ |
| 2386 | 4148 | '</div>'+ |
| 2387 | 4149 | '<div class="pagelayer-elp-typo pagelayer-elp-typo-height">'+ |
| 2388 | - '<label class="pagelayer-elp-label">Line Height</label>'+ | |
| 2389 | - '<input class="pagelayer-elp-typo-input" type="number" max="15" min="0" step="0.1" value="'+val[7]+'"></input>'+ | |
| 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>'+ | |
| 2390 | 4154 | '</div>'+ |
| 2391 | 4155 | '<div class="pagelayer-elp-typo pagelayer-elp-typo-transform">'+ |
| 2392 | - '<label class="pagelayer-elp-label">Text Transform</label>'+ | |
| 2393 | - '<select class="pagelayer-elp-typo-input">'; | |
| 4156 | + '<label class="pagelayer-elp-label">'+pagelayer_l('text_transform')+'</label>'+ | |
| 4157 | + '<select name="text-transform" class="pagelayer-elp-typo-input pagelayer-elp-select">'; | |
| 2394 | 4158 | jQuery.each(select['transform'],function(key, value){ |
| 2395 | - div += option(value, val[8]); | |
| 4159 | + div += option(key, value, val[8]); | |
| 2396 | 4160 | }); |
| 2397 | 4161 | |
| 2398 | 4162 | div += '</select>'+ |
| 2399 | 4163 | '</div>'+ |
| 2400 | 4164 | '<div class="pagelayer-elp-typo pagelayer-elp-typo-lspacing">'+ |
| 2401 | - '<label class="pagelayer-elp-label">Letter Spacing</label>'+ | |
| 2402 | - '<input class="pagelayer-elp-typo-input" type="number" max="10" min="-10" step="0.1" value="'+val[9]+'"></input>'+ | |
| 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>'+ | |
| 2403 | 4169 | '</div>'+ |
| 2404 | 4170 | '<div class="pagelayer-elp-typo pagelayer-elp-typo-wspacing">'+ |
| 2405 | - '<label class="pagelayer-elp-label">Word Spacing</label>'+ | |
| 2406 | - '<input class="pagelayer-elp-typo-input" type="number" max="50" min="0" step="1" value="'+val[10]+'"></input>'+ | |
| 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>'+ | |
| 2407 | 4175 | '</div>'+ |
| 4176 | + '</div>'+ | |
| 2408 | 4177 | '</div>'; |
| 2409 | 4178 | |
| 2410 | 4179 | row.append(div); |
| 2411 | 4180 | |
| @@ -2412,41 +4181,63 @@ | ||
| 2412 | 4181 | if(pagelayer_empty(val[5]) || val[5]=='none'){ |
| 2413 | 4182 | row.find('.pagelayer-elp-typo-deco-style').hide(); |
| 2414 | 4183 | } |
| 2415 | 4184 | |
| 2416 | - row.find('.pagelayer-prop-edit').on('click', function(){ | |
| 2417 | - row.find('.pagelayer-elp-typo-div').toggleClass('pagelayer-prop-show'); | |
| 4185 | + row.find('.pagelayer-elp-typo-edit-div .pli-pencil').on('click', function(){ | |
| 4186 | + row.find('.pagelayer-elp-typo-div').toggleClass('pagelayer-prop-show'); | |
| 2418 | 4187 | }); |
| 2419 | 4188 | |
| 2420 | - | |
| 2421 | - row.find('.pagelayer-elp-typo-input').on('change', function(){ | |
| 2422 | - val = []; | |
| 2423 | - row.find('.pagelayer-elp-typo-input').each(function(){ | |
| 2424 | - var value = jQuery(this).val(); | |
| 2425 | - val.push(value ? value : ''); | |
| 2426 | - }); | |
| 2427 | - _pagelayer_set_atts(row, val); | |
| 2428 | - }); | |
| 2429 | - | |
| 2430 | - row.find('.pagelayer-elp-typo-fonts select').on('change', function(){ | |
| 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'] = {}; | |
| 2431 | 4196 | |
| 2432 | - var value = jQuery(this).val(); | |
| 2433 | - value = value.replace(' ', '+'); | |
| 4197 | + if(globalEle.length > 0){ | |
| 4198 | + atts[prop.c['name']]['global-font'] = globalEle.attr('data-global-id'); | |
| 4199 | + } | |
| 2434 | 4200 | |
| 2435 | - if(jQuery('#pagelayer-google-fonts').length == 0){ | |
| 4201 | + row.find('.pagelayer-elp-typo-input').each(function(){ | |
| 2436 | 4202 | |
| 2437 | - 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">'); | |
| 4203 | + var iEle = jQuery(this); | |
| 4204 | + var name = iEle.attr('name'); | |
| 4205 | + var value = iEle.val(); | |
| 4206 | + var isGlobal = iEle.closest('[pagelayer-set-global]'); | |
| 2438 | 4207 | |
| 2439 | - }else{ | |
| 4208 | + if((value == '' && isGlobal.length < 1 && globalEle.length < 1) || isGlobal.length > 0){ | |
| 4209 | + return; | |
| 4210 | + } | |
| 2440 | 4211 | |
| 2441 | - var url = jQuery('#pagelayer-google-fonts').attr('href'); | |
| 2442 | - if(url.indexOf(value) == -1){ | |
| 2443 | - url = url+'|'+value+':100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i'; | |
| 2444 | - jQuery('#pagelayer-google-fonts').attr('href', url); | |
| 4212 | + if(name.indexOf('_tablet') > -1){ | |
| 4213 | + name = name.replace('_tablet', ''); | |
| 4214 | + atts[prop.c['name']+'_tablet'][name] = value; | |
| 4215 | + return; | |
| 2445 | 4216 | } |
| 2446 | 4217 | |
| 2447 | - } | |
| 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 | + } | |
| 2448 | 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(); | |
| 2449 | 4240 | }); |
| 2450 | 4241 | |
| 2451 | 4242 | row.find('.pagelayer-elp-typo-deco-line select').on('change', function(){ |
| 2452 | 4243 | var value = jQuery(this).val(); |
| @@ -2455,9 +4246,163 @@ | ||
| 2455 | 4246 | }else{ |
| 2456 | 4247 | row.find('.pagelayer-elp-typo-deco-style').show(); |
| 2457 | 4248 | } |
| 2458 | 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 | + }); | |
| 2459 | 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 | + | |
| 2460 | 4405 | } |
| 2461 | 4406 | |
| 2462 | 4407 | // The dimension property |
| 2463 | 4408 | function pagelayer_elp_dimension(row, prop){ |
| @@ -2463,23 +4408,28 @@ | ||
| 2463 | 4408 | function pagelayer_elp_dimension(row, prop){ |
| 2464 | 4409 | |
| 2465 | 4410 | var val = ['', '']; |
| 2466 | 4411 | |
| 2467 | - if(prop.c['val'].length > 0){ | |
| 2468 | - val = prop.c['val'].split(','); | |
| 2469 | - //console.log(val) | |
| 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 | + | |
| 2470 | 4420 | } |
| 2471 | 4421 | |
| 2472 | 4422 | var div = '<div class="pagelayer-elp-dimension-div">'+ |
| 2473 | - '<input type="number" class="pagelayer-elp-dimension" value="'+parseInt(val[0])+'"></input>'+ | |
| 2474 | - '<input type="number" class="pagelayer-elp-dimension" value="'+parseInt(val[1])+'"></input>'+ | |
| 2475 | - '<i class="fa fa-link" />'+ | |
| 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>'+ | |
| 2476 | 4426 | '</div>'; |
| 2477 | 4427 | |
| 2478 | 4428 | row.append(div); |
| 2479 | 4429 | |
| 2480 | 4430 | // Is the value linked ? |
| 2481 | - var link = row.find('.pagelayer-elp-dimension-div .fa'); | |
| 4431 | + var link = row.find('.pagelayer-elp-dimension-div .pli'); | |
| 2482 | 4432 | var isLinked = 1; |
| 2483 | 4433 | var tmp_val = val[0]; |
| 2484 | 4434 | |
| 2485 | 4435 | for(var p_val in val){ |
| @@ -2512,9 +4462,9 @@ | ||
| 2512 | 4462 | |
| 2513 | 4463 | row.find('input').on('input', function(){ |
| 2514 | 4464 | |
| 2515 | 4465 | // Are the values linked |
| 2516 | - var linked = row.find('.pagelayer-elp-dimension-div .fa').hasClass('pagelayer-elp-dimension-linked'); | |
| 4466 | + var linked = row.find('.pagelayer-elp-dimension-div .pli').hasClass('pagelayer-elp-dimension-linked'); | |
| 2517 | 4467 | |
| 2518 | 4468 | if(linked){ |
| 2519 | 4469 | var val = jQuery(this).val(); |
| 2520 | 4470 | row.find('input').each(function(){ |
| @@ -2534,8 +4484,762 @@ | ||
| 2534 | 4484 | }); |
| 2535 | 4485 | |
| 2536 | 4486 | }; |
| 2537 | 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 | + | |
| 2538 | 5242 | // Select frame to upload media |
| 2539 | 5243 | function pagelayer_select_frame(tag, state){ |
| 2540 | 5244 | |
| 2541 | 5245 | var state = state || ''; |
| @@ -2552,9 +5256,9 @@ | ||
| 2552 | 5256 | |
| 2553 | 5257 | id: 'pagelayer-wp-multi-image-library', |
| 2554 | 5258 | frame: 'post', |
| 2555 | 5259 | state: state, |
| 2556 | - title: pagelayer_l('frame_'+tag), | |
| 5260 | + title: pagelayer_l('frame_multi_image'), | |
| 2557 | 5261 | multiple: true, |
| 2558 | 5262 | library: wp.media.query({type: 'image'}), |
| 2559 | 5263 | button: { |
| 2560 | 5264 | text: pagelayer_l('insert') |
| @@ -2571,14 +5275,14 @@ | ||
| 2571 | 5275 | |
| 2572 | 5276 | id: 'pagelayer-wp-media-library', |
| 2573 | 5277 | frame: 'post', |
| 2574 | 5278 | state: 'pagelayer-media', |
| 2575 | - title: pagelayer_l('frame_'+tag), | |
| 5279 | + title: pagelayer_l('frame_media'), | |
| 2576 | 5280 | multiple: false, |
| 2577 | 5281 | states: [ |
| 2578 | 5282 | new wp.media.controller.Library({ |
| 2579 | 5283 | id: 'pagelayer-media', |
| 2580 | - title: pagelayer_l('frame_'+tag), | |
| 5284 | + title: pagelayer_l('frame_media'), | |
| 2581 | 5285 | multiple: false, |
| 2582 | 5286 | date: true |
| 2583 | 5287 | }) |
| 2584 | 5288 | ], |
| @@ -2597,15 +5301,15 @@ | ||
| 2597 | 5301 | |
| 2598 | 5302 | id: 'pagelayer-wp-'+tag+'-library', |
| 2599 | 5303 | frame: 'post', |
| 2600 | 5304 | state: 'pagelayer-'+tag, |
| 2601 | - title: pagelayer_l('frame_'+tag), | |
| 5305 | + title: pagelayer_l('frame_media'), | |
| 2602 | 5306 | multiple: false, |
| 2603 | 5307 | library: wp.media.query({type: tag}), |
| 2604 | 5308 | states: [ |
| 2605 | 5309 | new wp.media.controller.Library({ |
| 2606 | 5310 | id: 'pagelayer-'+tag, |
| 2607 | - title: pagelayer_l('frame_'+tag), | |
| 5311 | + title: pagelayer_l('frame_media'), | |
| 2608 | 5312 | library: wp.media.query( { type: tag } ), |
| 2609 | 5313 | multiple: false, |
| 2610 | 5314 | date: true |
| 2611 | 5315 | }) |
| @@ -2631,4 +5335,88 @@ | ||
| 2631 | 5335 | |
| 2632 | 5336 | return frame; |
| 2633 | 5337 | |
| 2634 | 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 | +} | |
