Page Builder: PageLayer – Drag and Drop website builder - Version 0.9.9

Version Description

(September 10, 2019) = * [Feature] Added inline editing so you can now edit text / headers in the editor itself. * [Task] Editor Font Size has been introduced. * [Task] The cursor for add widget area has been set to pointer. * [Bug Fix] In the Pagelayer Editor the title of the page was not set. This is fixed. * [Bug Fix] The overflow given to a column was extending beyond the column. This is fixed. * [Bug Fix] The active accordion tab was not shown by default. This is fixed. * [Bug Fix] The correct screen mode was not set correctly in the beginning. This is fixed. * [Bug Fix] The gradient color in the properties tab was not shown correctly the second time of editing. This is fixed. * [Bug Fix] In image box, the spacing caused the image to go outside its holder. This is fixed.

Download this release

Release Info

Developer pagelayer
Plugin Icon 128x128 Page Builder: PageLayer – Drag and Drop website builder
Version 0.9.9
Comparing to
See all releases

Code changes from version 0.9.8 to 0.9.9

css/pagelayer-editor-frontend.css CHANGED
@@ -217,6 +217,7 @@ text-align: center;
217
border: 2px #3e8ef7;
218
border-style: dashed;
219
position:relative;
220
}
221
222
.pagelayer-add-widget-area .fa.fa-plus-circle{
217
border: 2px #3e8ef7;
218
border-style: dashed;
219
position:relative;
220
+ cursor: pointer;
221
}
222
223
.pagelayer-add-widget-area .fa.fa-plus-circle{
css/pagelayer-editor.css CHANGED
@@ -206,7 +206,7 @@ border:0px;
206
207
/* Pagelayer Top Bar */
208
.pagelayer-bottombar-holder{
209
- background: #212121;
210
position:relative;
211
}
212
@@ -1732,6 +1732,12 @@ box-shadow: #000 0 0 2px;
1732
z-index: 10;
1733
}
1734
1735
/* Trumbowyg color widget style end */
1736
1737
/* Pagelayer history style*/
206
207
/* Pagelayer Top Bar */
208
.pagelayer-bottombar-holder{
209
+ background: #4f4f4f;
210
position:relative;
211
}
212
1732
z-index: 10;
1733
}
1734
1735
+ .trumbowyg-dropdown-fontsize,
1736
+ .trumbowyg-dropdown-fontfamily{
1737
+ height: 200px;
1738
+ overflow: auto;
1739
+ }
1740
+
1741
/* Trumbowyg color widget style end */
1742
1743
/* Pagelayer history style*/
css/pagelayer-frontend.css CHANGED
@@ -47,7 +47,7 @@ pointer-events:none;
47
}
48
49
.pagelayer-col-holder,
50
- .pagelayer-col>.pagelayer-col{
51
position:relative;
52
}
53
@@ -3142,4 +3142,45 @@ margin-left: auto;
3142
margin-right: auto;
3143
}
3144
3145
- /*******************/
47
}
48
49
.pagelayer-col-holder,
50
+ .pagelayer-col{
51
position:relative;
52
}
53
3142
margin-right: auto;
3143
}
3144
3145
+ /*******************/
3146
+
3147
+ /* PageLayer Owl */
3148
+
3149
+ .pagelayer-owl-stage-outer [class^="pagelayer-owl-"],
3150
+ .pagelayer-owl-carousel .pagelayer-ele-wrap,
3151
+ .pagelayer-slides-holder,
3152
+ .pagelayer-owl-stage-outer{
3153
+ height: 100%;
3154
+ }
3155
+
3156
+ .pagelayer-owl-prev,
3157
+ .pagelayer-owl-next{
3158
+ position: absolute;
3159
+ top: 50%;
3160
+ transform: translateY(-50%);
3161
+ }
3162
+
3163
+ .pagelayer-owl-prev{
3164
+ left: 0;
3165
+ }
3166
+
3167
+ .pagelayer-owl-next{
3168
+ right: 0;
3169
+ }
3170
+
3171
+ .pagelayer-owl-theme .pagelayer-owl-nav{
3172
+ margin-top: 0 !important;
3173
+ }
3174
+
3175
+ .pagelayer-owl-nav span{
3176
+ position:absolute;
3177
+ transform:translate(-50%, -53%);
3178
+ }
3179
+
3180
+ /* PageLayer Owl End */
3181
+
3182
+ /* Space Widget */
3183
+ .pagelayer-space-holder{
3184
+ height: 10px;
3185
+ }
3186
+ /* Space Widget End */
init.php CHANGED
@@ -5,7 +5,7 @@ if (!defined('ABSPATH')) exit;
5
6
define('PAGELAYER_BASE', plugin_basename(__FILE__));
7
define('PAGELAYER_FILE', __FILE__);
8
- define('PAGELAYER_VERSION', '0.9.8');
9
define('PAGELAYER_DIR', WP_PLUGIN_DIR.'/'.basename(dirname(PAGELAYER_FILE)));
10
define('PAGELAYER_SLUG', 'pagelayer');
11
define('PAGELAYER_URL', plugins_url('', PAGELAYER_FILE));
@@ -235,6 +235,7 @@ function pagelayer_enqueue_frontend($force = false){
235
add_action('wp_head', 'pagelayer_global_js', 2);
236
237
$premium_js = '';
238
if(defined('PAGELAYER_PREMIUM')){
239
$premium_js = ',chart.min.js,slick.min.js,premium-frontend.js';
240
$premium_css = ',slick.css,slick-theme.css,premium-frontend.css';
5
6
define('PAGELAYER_BASE', plugin_basename(__FILE__));
7
define('PAGELAYER_FILE', __FILE__);
8
+ define('PAGELAYER_VERSION', '0.9.9');
9
define('PAGELAYER_DIR', WP_PLUGIN_DIR.'/'.basename(dirname(PAGELAYER_FILE)));
10
define('PAGELAYER_SLUG', 'pagelayer');
11
define('PAGELAYER_URL', plugins_url('', PAGELAYER_FILE));
235
add_action('wp_head', 'pagelayer_global_js', 2);
236
237
$premium_js = '';
238
+ $premium_css = '';
239
if(defined('PAGELAYER_PREMIUM')){
240
$premium_js = ',chart.min.js,slick.min.js,premium-frontend.js';
241
$premium_css = ',slick.css,slick-theme.css,premium-frontend.css';
js/givejs.php CHANGED
@@ -35,6 +35,7 @@ $files = array(
35
'trumbowyg.min.js',
36
'trumbowyg.js',
37
'trumbowyg.fontfamily.js',
38
'trumbowyg-pagelayer.js',
39
'pen.js',
40
// Enduser JS
35
'trumbowyg.min.js',
36
'trumbowyg.js',
37
'trumbowyg.fontfamily.js',
38
+ 'trumbowyg.fontsize.min.js',
39
'trumbowyg-pagelayer.js',
40
'pen.js',
41
// Enduser JS
js/pagelayer-editor.js CHANGED
@@ -20,6 +20,9 @@ var pagelayer_history_obj = {}, pagelayer_revision_obj = {};
20
// Lets start
21
jQuery(document).ready(function(){
22
23
pagelayer.blank_img = pagelayer_url+'/images/default-image.png';
24
25
pagelayer_shortcodes['pl_inner_row'] = JSON.parse(JSON.stringify(pagelayer_shortcodes['pl_row']));
@@ -517,6 +520,27 @@ function pagelayer_setup_drag(){
517
pagelayer.drag_is_new = true;
518
519
});
520
521
};
522
@@ -741,6 +765,7 @@ function pagelayer_element_clicked(selector, e){
741
742
var jEle = jQuery(selector);
743
e = e || false;
744
745
// You must be a element atleast
746
if(!jEle.hasClass('pagelayer-ele')){
@@ -755,17 +780,17 @@ function pagelayer_element_clicked(selector, e){
755
jEle = pagelayer_ele_by_id(pId);
756
}
757
758
- // Lets not rebuild everything to make it faster
759
- if(pagelayer_is_active(jEle)){
760
- return false;
761
- }
762
-
763
// Make the editable fields active
764
- pagelayer_clear_editable();// First clear
765
jEle.find('[pagelayer-editable]').each(function (){
766
pagelayer_make_editable(jQuery(this), e);
767
});
768
769
// Set this as the active element
770
pagelayer_set_active(jEle);
771
@@ -1671,7 +1696,9 @@ function pagelayer_sc_render(jEle){
1671
//return false;
1672
}
1673
1674
- // Handle the CSS part
1675
// Get the id, tag, atts, data, etc
1676
var el = pagelayer_data(jEle, true);
1677
var all_props = pagelayer_shortcodes[el.tag];
20
// Lets start
21
jQuery(document).ready(function(){
22
23
+ // Set the title of the parent window
24
+ pagelayer.$('head').append(pagelayer.$('title')[0].outerHTML);
25
+
26
pagelayer.blank_img = pagelayer_url+'/images/default-image.png';
27
28
pagelayer_shortcodes['pl_inner_row'] = JSON.parse(JSON.stringify(pagelayer_shortcodes['pl_row']));
520
pagelayer.drag_is_new = true;
521
522
});
523
+
524
+ // Handle editable content by removing drag
525
+ var onmousedown = function(e){
526
+
527
+ var tEle = jQuery(e.originalEvent.explicitOriginalTarget);
528
+
529
+ if(tEle.closest('[pagelayer-editable]').length > 0){
530
+ //console.log('Is Editable MouseDown');
531
+ tEle.parents('[draggable]').attr('draggable', 'false');
532
+ }
533
+
534
+ }
535
+
536
+ // Handle editable content by adding drag that was removed
537
+ var onmouseup = function(e){
538
+ jQuery(document).find('[draggable=false]').attr('draggable', 'true');
539
+ }
540
+
541
+ // Handle editable contents by temprarily removing drag
542
+ jQuery(document).on('mousedown', onmousedown);
543
+ jQuery(document).on('mouseup', onmouseup);
544
545
};
546
765
766
var jEle = jQuery(selector);
767
e = e || false;
768
+ //console.log(e);
769
770
// You must be a element atleast
771
if(!jEle.hasClass('pagelayer-ele')){
780
jEle = pagelayer_ele_by_id(pId);
781
}
782
783
// Make the editable fields active
784
+ //pagelayer_clear_editable();// First clear
785
jEle.find('[pagelayer-editable]').each(function (){
786
pagelayer_make_editable(jQuery(this), e);
787
});
788
789
+ // Lets not rebuild everything to make it faster
790
+ if(pagelayer_is_active(jEle)){
791
+ return false;
792
+ }
793
+
794
// Set this as the active element
795
pagelayer_set_active(jEle);
796
1696
//return false;
1697
}
1698
1699
+ //console.log('Rendering');
1700
+
1701
+ // Handle the CSS part
1702
// Get the id, tag, atts, data, etc
1703
var el = pagelayer_data(jEle, true);
1704
var all_props = pagelayer_shortcodes[el.tag];
js/pagelayer-frontend.js CHANGED
@@ -328,7 +328,7 @@ function pagelayer_pl_accordion(jEle){
328
function pagelayer_pl_collapse(jEle){
329
330
var holder = jEle.find('.pagelayer-collapse-holder');
331
- var tabs = jEle.find('.pagelayer-accordion-tabs');
332
333
if(tabs.length < 1){
334
return false;
@@ -337,10 +337,10 @@ function pagelayer_pl_collapse(jEle){
337
var setup = tabs.attr('pagelayer-setup');
338
var icon = 'fa fa-'+holder.attr('data-icon');
339
var active_icon = 'fa fa-'+holder.attr('data-active_icon');
340
- var activeTabs = jEle.find('.pagelayer-accordion-tabs.active');
341
342
tabs.find('span i').attr('class', icon);
343
- jQuery(activeTabs).addClass('active').next().show('slow');
344
jQuery(activeTabs).find('span i').attr('class', active_icon);
345
346
// Already setup ?
@@ -353,12 +353,12 @@ function pagelayer_pl_collapse(jEle){
353
var currentTab = jQuery(this);
354
355
if(currentTab.hasClass('active')){
356
- currentTab.removeClass('active').next().hide('slow');;
357
currentTab.find('span i').attr('class', icon);
358
return true;
359
}
360
361
- currentTab.addClass('active').next().show('slow');
362
currentTab.find('span i').attr('class', active_icon);
363
364
});
328
function pagelayer_pl_collapse(jEle){
329
330
var holder = jEle.find('.pagelayer-collapse-holder');
331
+ var tabs = jEle.find('.pagelayer-accordion_item');
332
333
if(tabs.length < 1){
334
return false;
337
var setup = tabs.attr('pagelayer-setup');
338
var icon = 'fa fa-'+holder.attr('data-icon');
339
var active_icon = 'fa fa-'+holder.attr('data-active_icon');
340
+ var activeTabs = jEle.find('.pagelayer-accordion_item.active');
341
342
tabs.find('span i').attr('class', icon);
343
+ jQuery(activeTabs).addClass('active').children('.pagelayer-accordion-panel').show('slow');
344
jQuery(activeTabs).find('span i').attr('class', active_icon);
345
346
// Already setup ?
353
var currentTab = jQuery(this);
354
355
if(currentTab.hasClass('active')){
356
+ currentTab.removeClass('active').children('.pagelayer-accordion-panel').hide('slow');;
357
currentTab.find('span i').attr('class', icon);
358
return true;
359
}
360
361
+ currentTab.addClass('active').children('.pagelayer-accordion-panel').show('slow');
362
currentTab.find('span i').attr('class', active_icon);
363
364
});
js/properties.js CHANGED
@@ -1,2618 +1,2623 @@
1
-
2
- // The active pagelayer element
3
- var pagelayer_active = {};
4
-
5
- // List of pagelayer icons
6
- var pagelayer_icons = {};
7
-
8
- // The inline editor
9
- var pagelayer_editor = {};
10
-
11
- // The active pagelayer element
12
- var pagelayer_active_tab = {};
13
-
14
- // Loads the Data
15
- function pagelayer_data(jEle, clean){
16
-
17
- var ret = new Object();
18
-
19
- // Get the data
20
- ret.tag = pagelayer_tag(jEle);
21
- ret.id = jEle.attr('pagelayer-id');
22
- ret.$ = jEle;
23
-
24
- // Parse the attributes
25
- ret.atts = new Object();
26
- ret.tmp = new Object();
27
-
28
- jQuery.each(jEle[0].attributes, function(index, att){
29
- if(att.name.match(/pagelayer\-a\-/i)){
30
- ret.atts[att.name.substr(12)] = att.value;
31
- }
32
-
33
- if(att.name.match(/pagelayer\-tmp\-/i)){
34
- ret.tmp[att.name.substr(14)] = att.value;
35
- }
36
- });
37
-
38
- //console.log(ret.atts);
39
- //console.log(ret.tmp);
40
-
41
- clean = clean || false;
42
-
43
- // Remove values which have 'req'. NOTE : 'show' ones will be allowed
44
- if(clean){
45
-
46
- var tag = ret.tag;
47
-
48
- // Anything to set ?
49
- ret.set = {};
50
-
51
- // All props
52
- var all_props = pagelayer_shortcodes[tag];
53
-
54
- // Loop through all props
55
- for(var i in pagelayer_tabs){
56
-
57
- var tab = pagelayer_tabs[i];
58
-
59
- for(var section in all_props[tab]){
60
-
61
- var props = section in pagelayer_shortcodes[tag] ? pagelayer_shortcodes[tag][section] : pagelayer_styles[section];
62
-
63
- // In case of widgets its possible !
64
- if(pagelayer_empty(props)){
65
- continue;
66
- }
67
-
68
- for(var x in props){
69
-
70
- var prop = props[x];
71
-
72
- // Are we to set this value ?
73
- if(!(x in ret.atts) && 'default' in prop && !pagelayer_empty(prop['default'])){
74
- ret.set[x] = prop['default'];
75
- }
76
-
77
- if(!('req' in prop)){
78
- continue;
79
- }
80
-
81
- //console.log('[pagelayer_data] Cleaning :'+x);
82
-
83
- // List of considerations
84
- var show = prop['req'];
85
-
86
- // We will hide by default
87
- var toShow = true;
88
-
89
- for(var showParam in show){
90
- var reqval = show[showParam];
91
- var except = showParam.substr(0, 1) == '!' ? true : false;
92
- showParam = except ? showParam.substr(1) : showParam;
93
- var val = ret.atts[showParam] || '';
94
-
95
- //console.log('Show '+x+' '+showParam+' '+reqval+' '+val);
96
-
97
- // Is the value not the same, then we can show
98
- if(except){
99
-
100
- if(typeof reqval == 'string' && reqval == val){
101
- toShow = false;
102
- break;
103
- }
104
-
105
- // Its an array and a value is found, then dont show
106
- if(typeof reqval != 'string' && reqval.indexOf(val) > -1){
107
- toShow = false;
108
- break;
109
- }
110
-
111
- // The value must be equal
112
- }else{
113
-
114
- if(typeof reqval == 'string' && reqval != val){
115
- toShow = false;
116
- break;
117
- }
118
-
119
- // Its an array and no value is found, then dont show
120
- if(typeof reqval != 'string' && reqval.indexOf(val) === -1){
121
- toShow = false;
122
- break;
123
- }
124
- }
125
-
126
- }
127
-
128
- // Are we to show ?
129
- if(!toShow){
130
- //console.log('Delete : '+x);
131
- delete ret.atts[x];
132
- delete ret.atts[x+'_tablet'];// Any tablet and mobile values as well
133
- delete ret.atts[x+'_mobile'];
134
- delete ret.set[x];
135
- }
136
- }
137
- }
138
- }
139
-
140
- }
141
-
142
- return ret;
143
-
144
- };
145
-
146
- // Setup the properties
147
- function pagelayer_elpd_setup(){
148
-
149
- // The Dialag box of the element properties
150
- // pagelayer-ELPD - Element Properties Dialog
151
- pagelayer_elpd_html = '<div class="pagelayer-elpd-tabs">'+
152
- '<div class="pagelayer-elpd-tab" pagelayer-elpd-tab="settings" pagelayer-elpd-active-tab=1>Settings</div>'+
153
- //'<div class="pagelayer-elpd-tab" pagelayer-elpd-tab="styles">Style</div>'+
154
- '<div class="pagelayer-elpd-tab" pagelayer-elpd-tab="options">Options</div>'+
155
- '<div class="pagelayer-elpd-options">'+
156
- '<i class="fa fa-clone" />'+
157
- '<i class="fa fa-trash" />'+
158
- '</div>'+
159
- '</div>'+
160
- '<div class="pagelayer-elpd-body"></div>'+
161
- '<div class="pagelayer-elpd-holder"></div>';
162
-
163
- // Create the dialog box
164
- pagelayer.$('#pagelayer-elpd').append(pagelayer_elpd_html);
165
- pagelayer_elpd = pagelayer.$('#pagelayer-elpd');
166
-
167
- pagelayer.$('.pagelayer-elpd-close').on('click', function(){
168
- pagelayer_leftbar_tab('pagelayer-shortcodes');
169
- pagelayer.$('.pagelayer-elpd-header').hide();
170
- pagelayer.$('.pagelayer-logo').show();
171
- pagelayer.$('.pagelayer-elpd-body').removeAttr('pagelayer-element-id').empty();
172
- pagelayer_active = {};
173
- });
174
-
175
- // Copy
176
- pagelayer.$('.pagelayer-elpd-options>.fa-clone').on('click', function(){
177
- pagelayer_copy_element(pagelayer_active.el.$);
178
- });
179
-
180
- // Delete
181
- pagelayer.$('.pagelayer-elpd-options>.fa-trash').on('click', function(){
182
- pagelayer_delete_element(pagelayer_active.el.$);
183
- //pagelayer.$('.pagelayer-elpd-close').click();
184
- });
185
-
186
- // The tabs
187
- pagelayer_elpd.find('.pagelayer-elpd-tab').on('click', function(){
188
- var attr = 'pagelayer-elpd-active-tab';
189
- pagelayer_elpd.find('.pagelayer-elpd-tab').each(function(){
190
- jQuery(this).removeAttr(attr);
191
- });
192
- jQuery(this).attr(attr, 1);
193
-
194
- // Trigger the showing of rows
195
- pagelayer_elpd_show_rows();
196
- });
197
-
198
- };
199
-
200
- // Open the properties
201
- function pagelayer_elpd_open(jEle){
202
-
203
- // Set pagelayer history FALSE
204
- pagelayer.history_action = false;
205
-
206
- // Set the position of the element and show
207
- //pagelayer_elpd.css('left', pagelayer_elpd_pos[0]);
208
- //pagelayer_elpd.css('top', pagelayer_elpd_pos[1]);
209
- pagelayer_leftbar_tab('pagelayer-elpd');
210
- pagelayer.$('.pagelayer-elpd-header').show();
211
- pagelayer.$('.pagelayer-logo').hide();
212
-
213
- // The property holder
214
- var holder = pagelayer.$('.pagelayer-elpd-body');
215
- holder.html(' ');
216
-
217
- var el = pagelayer_elpd_generate(jEle, holder);
218
-
219
- // Set the active element
220
- pagelayer_active.el = el;
221
-
222
- // Set the header
223
- pagelayer.$('.pagelayer-elpd-title').html('Edit '+pagelayer_shortcodes[el.tag]['name']);
224
-
225
- // Set pagelayer history TRUE
226
- pagelayer.history_action = true;
227
-
228
- };
229
-
230
- // Show the properties window
231
- function pagelayer_elpd_generate(jEle, holder){
232
-
233
- // Get the id, tag, atts, data, etc
234
- var el = pagelayer_data(jEle);
235
- //console.log(el);
236
-
237
- // Is it a valid type ?
238
- if(pagelayer_empty(pagelayer_shortcodes[el.tag])){
239
- pagelayer_error('Could not find this shortcode : '+el.tag);
240
- }
241
-
242
- // Set the holder
243
- holder.attr('pagelayer-element-id', el.id);
244
- //console.log(el.id);
245
-
246
- var all_props = pagelayer_shortcodes[el.tag];
247
-
248
- var sec_open_class = 'pagelayer-elpd-section-open';
249
-
250
- for(var i in pagelayer_tabs){
251
- var tab = pagelayer_tabs[i];
252
- var section_close = false;// First section always open
253
- for(var section in all_props[tab]){
254
- //console.log(tab+' '+section);
255
-
256
- var props = section in pagelayer_shortcodes[el.tag] ? pagelayer_shortcodes[el.tag][section] : pagelayer_styles[section];
257
- //console.log(props);
258
-
259
- 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>'+
261
- '<div class="pagelayer-elpd-section-rows"></div>'+
262
- '</div>');
263
- holder.append(sec);
264
-
265
- // The row holder
266
- sec = sec.find('.pagelayer-elpd-section-rows');
267
-
268
- // Close all except the first section
269
- if(section_close){
270
- sec.hide().prev().removeClass(sec_open_class);
271
- }
272
- section_close = true;
273
-
274
- if('widget' in all_props && section == 'params'){
275
- pagelayer_elpd_widget_settings(el, sec, true);
276
- continue;
277
- }
278
-
279
- // Reset / Create the cache
280
- for(var x in props){
281
-
282
- props[x]['c'] = new Object();
283
- props[x]['c']['val'] = '';// Blank Val
284
- props[x]['c']['name'] = x;// Add the Name of the row i.e. attribute of the element
285
-
286
- // Set default to value of attribute if any
287
- if(x in el.atts){
288
- props[x]['c']['val'] = el.atts[x];
289
- }
290
-
291
- // Set element
292
- props[x]['el'] = el;
293
-
294
- // Add the row
295
- pagelayer_elpd_row(sec, tab, section, props, x);
296
-
297
- }
298
- }
299
- }
300
-
301
- /*// Set the default values in the PROPERTIES
302
- var fn_load = window['pagelayer_load_elp_'+el.tag];
303
-
304
- if(typeof fn_load == 'function'){
305
- fn_load(el, props);
306
- }*/
307
-
308
- // Section open close
309
- holder.find('>.pagelayer-elpd-section>.pagelayer-elpd-section-name').on('click', function(){
310
- var _sec = jQuery(this);
311
- var par = _sec.parent();
312
-
313
- pagelayer_active_tab.id = el.id;
314
- pagelayer_active_tab.section = par.attr('section');
315
-
316
- // Get the active tab
317
- var active_tab = pagelayer_elpd.find('[pagelayer-elpd-active-tab]').attr('pagelayer-elpd-tab');
318
-
319
- // Close all but dont touch yourself
320
- holder.children().each(function (){
321
- var curSec = jQuery(this);
322
- if(par.is(curSec)) return;// Skip the current option
323
- if(curSec.attr('pagelayer-show-tab') != active_tab) return;// Skip the non active tabs as is
324
- curSec.find('.pagelayer-elpd-section-rows').hide().prev().removeClass(sec_open_class);
325
- });
326
-
327
- // Now toggle your self
328
- par.find('.pagelayer-elpd-section-rows').toggle();
329
-
330
- if(_sec.next().is(':visible')){
331
- _sec.addClass(sec_open_class);
332
- }else{
333
- _sec.removeClass(sec_open_class);
334
- }
335
-
336
- });
337
-
338
- 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();
340
- }
341
-
342
- // Handle the showing of rows
343
- pagelayer_elpd_show_rows();
344
-
345
- return el;
346
-
347
- };
348
-
349
- // Show a row
350
- function pagelayer_elpd_row(holder, tab, section, props, name){
351
-
352
- // The Prop
353
- var prop = props[name];
354
- //console.log(tab+' '+name+' '+prop.el.tag);
355
-
356
- var fn = window['pagelayer_elp_'+prop['type']];
357
-
358
- if(typeof fn == 'function'){
359
-
360
- var row = jQuery('<div class="pagelayer-form-item" pagelayer-elp-name="'+name+'" />');
361
-
362
- // Append the row
363
- holder.append(row);
364
-
365
- var fn_ui = window['pagelayer_elp_'+prop['type']+'_ui'];
366
-
367
- // Is there a UI Handler ?
368
- if(typeof fn_ui == 'function'){
369
-
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
-
386
- }
387
-
388
- return row;
389
-
390
- }
391
-
392
- };
393
-
394
- // Show the rows as per the active tab and also handle the rows that are supposed to be shown or not
395
- function pagelayer_elpd_show_rows(){
396
-
397
- //console.log('Called');
398
-
399
- // Get the active tab
400
- var active_tab = pagelayer_elpd.find('[pagelayer-elpd-active-tab]').attr('pagelayer-elpd-tab');
401
-
402
- pagelayer_elpd.find('[pagelayer-show-tab]').each(function(){
403
- var sec = jQuery(this);
404
-
405
- // Is it the active tab ?
406
- if(sec.attr('pagelayer-show-tab') != active_tab){
407
- sec.hide();
408
- }else{
409
- sec.show();
410
- }
411
- });
412
-
413
- // Find all Elements in the Property dialog and loop
414
- pagelayer_elpd.find('[pagelayer-element-id]').each(function(){
415
-
416
- var holder = jQuery(this);
417
- var id = holder.attr('pagelayer-element-id');
418
- var jEle = pagelayer_ele_by_id(id);
419
- var tag = pagelayer_tag(jEle);
420
- //console.log('Main : '+id+' - '+tag);
421
- //console.log(pagelayer_active);
422
-
423
- // All props
424
- var all_props = pagelayer_shortcodes[tag];
425
-
426
- // Loop through all props
427
- for(var i in pagelayer_tabs){
428
-
429
- var tab = pagelayer_tabs[i];
430
-
431
- for(var section in all_props[tab]){
432
-
433
- var props = section in pagelayer_shortcodes[tag] ? pagelayer_shortcodes[tag][section] : pagelayer_styles[section];
434
-
435
- for(var x in props){
436
-
437
- var prop = props[x];
438
-
439
- // If the prop is a group, we continue
440
- if(prop['type'] == 'group'){
441
- continue;
442
- }
443
-
444
- // Find the row
445
- var row = false;
446
-
447
- holder.find('[pagelayer-elp-name='+x+']').each(function(){
448
- var j = jQuery(this);
449
- var _id = j.closest('[pagelayer-element-id]').attr('pagelayer-element-id');
450
- //console.log(_id+' = '+id);
451
-
452
- // Is the parent the same ?
453
- if(_id == id){
454
- row = j;
455
- }
456
- });
457
-
458
- // Do you have a show or hide ?
459
- if(!row){
460
- //console.log('Not Found : '+x+' - '+id);
461
- continue;
462
- }
463
-
464
- // Is the row visible ?
465
- if(row.closest('[pagelayer-show-tab]').attr('pagelayer-show-tab') != active_tab){
466
- row.hide();
467
- continue;
468
- }
469
-
470
- // Now lets show or hide the element
471
- if(!('req' in prop || 'show' in prop)){
472
- row.show();
473
- continue;
474
- }
475
-
476
- // List of considerations
477
- var show = {};
478
-
479
- // We have both req and show, so lets just combine the values and then show
480
- // NOTE : We need to make an array and not just merge the 2 as they are references
481
- if('req' in prop && 'show' in prop){
482
-
483
- // Add the req values
484
- show = JSON.parse(JSON.stringify(prop['req']));
485
-
486
- // Now the show values need to be looped
487
- for(var t in prop['show']){
488
- show[t] = prop['show'][t];
489
- }
490
-
491
- }else{
492
- show = 'req' in prop ? prop['req'] : prop['show'];
493
- }
494
-
495
- // We will hide by default
496
- var toShow = true;
497
-
498
- for(var showParam in show){
499
- var reqval = show[showParam];
500
- var except = showParam.substr(0, 1) == '!' ? true : false;
501
- showParam = except ? showParam.substr(1) : showParam;
502
- var val = pagelayer_get_att(jEle, showParam) || '';
503
-
504
- //console.log('Show '+x+' '+showParam+' '+reqval+' '+val);
505
-
506
- // Is the value not the same, then we can show
507
- if(except){
508
-
509
- if(typeof reqval == 'string' && reqval == val){
510
- toShow = false;
511
- break;
512
- }
513
-
514
- // Its an array and a value is found, then dont show
515
- if(typeof reqval != 'string' && reqval.indexOf(val) > -1){
516
- toShow = false;
517
- break;
518
- }
519
-
520
- // The value must be equal
521
- }else{
522
-
523
- if(typeof reqval == 'string' && reqval != val){
524
- toShow = false;
525
- break;
526
- }
527
-
528
- // Its an array and no value is found, then dont show
529
- if(typeof reqval != 'string' && reqval.indexOf(val) === -1){
530
- toShow = false;
531
- break;
532
- }
533
- }
534
- }
535
-
536
- // Are we to show ?
537
- if(toShow){
538
- row.show();
539
- }else{
540
- row.hide();
541
- }
542
-
543
- }
544
- }
545
- }
546
-
547
- });
548
-
549
- };
550
-
551
- var pagelayer_widget_timer;
552
- var pagelayer_widget_cache = {};
553
-
554
- // Load the widget settings
555
- function pagelayer_elpd_widget_settings(el, sec, onfocus){
556
-
557
- var show_form = function(html){
558
-
559
- sec.html('<form class="pagelayer-widgets-form">'+html+'</form>');
560
-
561
- // Handle on form data change
562
- sec.find('form :input').on('change', function(){
563
- //console.log('Changed !');
564
-
565
- // Clear any previous timeout
566
- clearTimeout(pagelayer_widget_timer);
567
-
568
- // Set a timer for constant change
569
- pagelayer_widget_timer = setTimeout(function(){
570
- pagelayer_elpd_widget_settings(el, sec);
571
- //console.log('Calling');
572
- }, 500);
573
-
574
- });
575
- }
576
-
577
- // Is it onfocus ?
578
- onfocus = onfocus || false;
579
-
580
- // Its an onfocus
581
- if(onfocus && el.id in pagelayer_widget_cache){
582
- show_form(pagelayer_widget_cache[el.id]);
583
- return true;
584
- }
585
-
586
- var post = {};
587
- post['action'] = 'pagelayer_wp_widget';
588
- post['pagelayer_nonce'] = pagelayer_ajax_nonce;
589
- post['tag'] = el.tag;
590
- post['pagelayer-id'] = el.id;
591
-
592
- // Any atts ?
593
- if('widget_data' in el.atts){
594
- post['widget_data'] = el.atts['widget_data'];
595
- }
596
-
597
- // Post any existing data
598
- var form = sec.find('form');
599
- if(form.length > 0){
600
- //console.log(form.serialize());
601
- post['values'] = form.serialize();
602
- }
603
-
604
- jQuery.ajax({
605
- url: pagelayer_ajax_url,
606
- type: 'post',
607
- data: post,
608
- success: function(data) {
609
- //console.log('Widget Data');console.log(data);
610
-
611
- // Show the form
612
- if('form' in data){
613
- show_form(data['form']);
614
-
615
- // Store in cache
616
- pagelayer_widget_cache[el.id] = data['form'];
617
- }
618
-
619
- // Show the content
620
- if('html' in data){
621
- el.$.html(data['html']);
622
- pagelayer_sc_render(el.$);// Re-Render the CSS
623
- }
624
-
625
- // Any set attributes ?
626
- if('widget_data' in data){
627
- pagelayer_set_atts(el.$, 'widget_data', JSON.stringify(data['widget_data']));
628
- }
629
-
630
- },
631
- fail: function(data) {
632
- alert('Some error occured in getting the widget data');
633
- }
634
- });
635
-
636
- }
637
-
638
- // Will set the attribute and also render
639
- function _pagelayer_set_atts(row, val, no_default){
640
- var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id');
641
- var jEle = jQuery('[pagelayer-id='+id+']');
642
-
643
- // Is there a unit ?
644
- var uEle = row.find('.pagelayer-elp-units');
645
- if(uEle.length > 0){
646
- var unit = uEle.find('[selected]').html();
647
- if(Array.isArray(val)){
648
- for(var i in val){
649
- if(val[i].length < 1){
650
- continue;
651
- }
652
- val[i] = val[i]+unit;
653
- }
654
- }else{
655
- val = val+unit;
656
- }
657
- }
658
-
659
- // 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() : '';
662
-
663
- pagelayer_set_atts(jEle, row.attr('pagelayer-elp-name')+mode, val);
664
-
665
- // Are we to skip setting defaults ?
666
- no_default = no_default || false;
667
- if(!no_default){
668
-
669
- // We need to set defaults for dependents
670
- var hasSet = pagelayer_set_default_atts(jEle, 5);
671
-
672
- // We need to reopen the left panel
673
- // Note : If two simultaneous calls are made, then this will cause problems
674
- // Also after this is called, ROW is destroyed and no other row related stuff will work i.e. set_atts in the same calls will fail
675
- if(hasSet){
676
- pagelayer_elpd_open(jEle);
677
- }
678
- }
679
-
680
- // Render
681
- pagelayer_sc_render(jEle);
682
- };
683
-
684
- // Will set the attribute but not render
685
- function _pagelayer_set_tmp_atts(row, suffix, val){
686
- var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id');
687
- var jEle = jQuery('[pagelayer-id='+id+']');
688
- pagelayer_set_tmp_atts(jEle, row.attr('pagelayer-elp-name')+'-'+suffix, val);
689
- };
690
-
691
- // Get the tmp att
692
- function _pagelayer_get_tmp_att(row, suffix){
693
- var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id');
694
- var jEle = jQuery('[pagelayer-id='+id+']');
695
- return pagelayer_get_tmp_att(jEle, row.attr('pagelayer-elp-name')+'-'+suffix);
696
- };
697
-
698
- // Create the Label
699
- function pagelayer_elp_label(row, prop){
700
- row.append('<div class="pagelayer-elp-label-div"><label class="pagelayer-elp-label">'+prop['label']+'</label></div>');
701
-
702
- var label = row.children('.pagelayer-elp-label-div');
703
-
704
- // Do we have screen ?
705
- if('screen' in prop){
706
- var screen = '<div class="pagelayer-elp-screen">'+
707
- '<i class="fa fa-desktop" />'+
708
- '<i class="fa fa-tablet" />'+
709
- '<i class="fa fa-mobile" />'+
710
- '<i class="pagelayer-prop-screen fa fa-desktop" />'+
711
- '</div>';
712
- label.append(screen);
713
-
714
- // Set screen mode on change
715
- label.find('.fa:not(.pagelayer-prop-screen)').on('click', function(){
716
- var mode = 'desktop';
717
- var jEle = jQuery(this);
718
-
719
- // Tablet ?
720
- if(jEle.hasClass('fa-tablet')){
721
- mode = 'tablet';
722
- }
723
-
724
- // Mobile ?
725
- if(jEle.hasClass('fa-mobile')){
726
- mode = 'mobile';
727
- }
728
-
729
- pagelayer_set_screen_mode(mode);
730
- label.find('.pagelayer-elp-screen .fa').removeClass('open');
731
-
732
- });
733
-
734
- // On change of screen handle the values
735
- label.find('.pagelayer-elp-screen').on('pagelayer-screen-changed', function(e){
736
-
737
- label.find('.pagelayer-elp-screen .fa').removeClass('open');
738
- var mode = pagelayer_get_screen_mode();
739
- var modes = {desktop: '', tablet: '_tablet', mobile: '_mobile'};
740
-
741
- // Get the current current new val
742
- prop.c['val'] = pagelayer_get_att(prop.el.$, prop.c['name']+modes[mode]);
743
-
744
- // Handle the amount
745
- if(pagelayer_empty(prop.c['val'])){
746
- prop.c['val'] = '';
747
- }
748
-
749
- // Remove the siblings
750
- label.siblings().each(function(){
751
- var j = jQuery(this);
752
-
753
- if(j.hasClass('pagelayer-elp-desc')){
754
- return;
755
- }
756
-
757
- j.remove();
758
- });
759
-
760
- // Create the vals again
761
- var fn = window['pagelayer_elp_'+prop['type']];
762
-
763
- // The main property
764
- fn(row, prop);
765
-
766
- });
767
-
768
- label.find('.pagelayer-elp-screen .pagelayer-prop-screen').on('click', function(e){
769
- jQuery(this).siblings().toggleClass('open');
770
- })
771
-
772
- }
773
-
774
- // Do we have units ?
775
- if('units' in prop){
776
-
777
- var units = '';
778
- var tmp_val = prop.c['val'];
779
- var default_unit = 0;
780
-
781
- // Get unit from value
782
- if(!(pagelayer_empty(tmp_val))){
783
-
784
- for(var i in prop['units']){
785
- if(tmp_val.search(prop['units'][i]) != -1){
786
- default_unit = i;
787
- }
788
- }
789
- }
790
-
791
- for(var i in prop['units']){
792
- units += '<span '+(i == default_unit ? 'selected' : '')+'>'+prop['units'][i]+'</span>';
793
- }
794
-
795
- label.append('<div class="pagelayer-elp-units">'+units+'</div>');
796
-
797
- // Set unit on change
798
- label.find('.pagelayer-elp-units span').on('click', function(){
799
-
800
- label.find('.pagelayer-elp-units span').each(function(){
801
- jQuery(this).removeAttr('selected');
802
- });
803
-
804
- jQuery(this).attr('selected', 1);
805
-
806
- });
807
-
808
- }
809
-
810
- };
811
-
812
- // Create the Label
813
- function pagelayer_elp_heading(row, prop){
814
- //row.append('<div class="pagelayer-elp-heading">'+prop['label']+'</div>');
815
- }
816
-
817
- // Create the Label
818
- function pagelayer_elp_heading_ui(row, prop){
819
- row.append('<div class="pagelayer-elp-heading">'+prop['label']+'</div>');
820
- }
821
-
822
- // Create the Description
823
- function pagelayer_elp_desc(row, label){
824
- //row.append('<div class="pagelayer-elp-desc">'+label+'</div>');
825
- };
826
-
827
- // The Text property
828
- function pagelayer_elp_text(row, prop){
829
-
830
- var div = '<div class="pagelayer-elp-text-div">'+
831
- '<input type="text" class="pagelayer-elp-text" name="'+prop.c['name']+'" value="'+prop.c['val']+'"></input>'+
832
- '</div>';
833
-
834
- row.append(div);
835
-
836
- row.find('input').on('input', function(){
837
- _pagelayer_set_atts(row, jQuery(this).val());// Save and Render
838
- });
839
-
840
- };
841
-
842
- // The Select property
843
- function pagelayer_elp_select(row, prop){
844
-
845
- var options = '';
846
- var option = function(val, lang){
847
- var selected = (val != prop.c['val']) ? '' : 'selected="selected"';
848
- return '<option class="pagelayer-elp-select-option" value="'+val+'" '+selected+'>'+lang+'</option>';
849
- }
850
-
851
- for (x in prop['list']){
852
-
853
- // Single item
854
- if(typeof prop['list'][x] == 'string'){
855
- options += option(x, prop['list'][x]);
856
-
857
- // Groups
858
- }else{
859
- options += '<optgroup label="'+x+'">';
860
-
861
- for(var y in prop['list'][x]){
862
- options += option(y, prop['list'][x][y]);
863
- }
864
-
865
- options += '</optgroup>';
866
- }
867
- }
868
-
869
- var div = '<div class="pagelayer-elp-select-div pagelayer-elp-pos-rel">'+
870
- '<select class="pagelayer-elp-select pagelayer-select" name="'+prop.c['name']+'">'+options+'</select>'+
871
- '</div>';
872
-
873
- row.append(div);
874
-
875
- row.find('select').on('change', function(){
876
-
877
- var sEle = jQuery(this);
878
-
879
- if(sEle.attr('name') == "animation"){
880
- _pagelayer_trigger_anim(row, sEle.val());
881
- }
882
-
883
- _pagelayer_set_atts(row, sEle.val());// Save and Render
884
-
885
- });
886
-
887
- }
888
-
889
- // The MultiSelect property
890
- function pagelayer_elp_multiselect(row, prop){
891
-
892
- var selection = [];
893
- if(!pagelayer_empty(prop.c['val'])){
894
- //selection = JSON.parse(prop.c['val']);
895
- selection = prop.c['val'].split(',');
896
- }
897
-
898
- var options = '';
899
- var option = function(val, lang){
900
- var selected = (jQuery.inArray(val,selection) == -1 ? '' : 'selected="selected"');
901
- return '<li class="pagelayer-elp-multiselect-option" data-val="'+val+'" '+selected+'>'+lang+'</li>';
902
- }
903
-
904
- var show_sel = function(val){
905
- var sel_html = '';
906
- jQuery.each(val, function(index, value){
907
- sel_html += '<span class="pagelayer-elp-multiselect-selected">'+prop['list'][value]+'</span>';
908
- });
909
- return sel_html;
910
- }
911
-
912
- for (x in prop['list']){
913
- options += option(x, prop['list'][x]);
914
- }
915
-
916
- var div = '<div class="pagelayer-elp-multiselect-div pagelayer-elp-pos-rel">'+
917
- '<div class="pagelayer-elp-multiselect">'+show_sel(selection)+'</div>'+
918
- '<ul class="pagelayer-elp-multiselect-ul" name="'+prop.c['name']+'">'+options+'</ul>'+
919
- '</div>';
920
-
921
- row.append(div);
922
-
923
- row.find('.pagelayer-elp-multiselect-option').on('click', function(){
924
-
925
- var sVal = jQuery(this).data('val');
926
-
927
- if(jQuery.inArray(sVal,selection) == -1){
928
- selection.push(sVal);
929
- row.find('[data-val="'+sVal+'"]').attr('selected','selected');
930
- }else{
931
- selection.splice(jQuery.inArray(sVal,selection),1);
932
- row.find('[data-val="'+sVal+'"]').removeAttr('selected');
933
- }
934
-
935
- //_pagelayer_set_atts(row,JSON.stringify(selection));// Save and Render
936
- _pagelayer_set_atts(row, selection.join(','));// Save and Render
937
-
938
- row.find('.pagelayer-elp-multiselect').html(show_sel(selection));
939
-
940
- });
941
-
942
- // Open the selector
943
- row.find('.pagelayer-elp-multiselect').on('click', function(){
944
- row.find('.pagelayer-elp-multiselect-ul').slideToggle();
945
- });
946
-
947
- }
948
-
949
- function _pagelayer_trigger_anim(row, anim){
950
- var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id');
951
- var classList = $('[pagelayer-id='+id+']').attr('class');
952
- classList = classList.split(/\s+/);
953
- //console.log(classList);
954
- var options = [];
955
- row.find('option').each(function(){
956
- var found = $.inArray( $(this).val(), classList );
957
- if( found != -1){
958
- //var found = $(this).val();
959
- $('[pagelayer-id='+id+']').removeClass($(this).val());
960
- //break;
961
- }
962
- //options.push($(this).val());
963
- });
964
- $('[pagelayer-id='+id+']').removeClass('pagelayer-wow').addClass(anim + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
965
- $(this).removeClass(anim+ ' animated');
966
- });
967
- }
968
-
969
- // The Checkbox property
970
- function pagelayer_elp_checkbox(row, prop){
971
-
972
- var div = '<div class="pagelayer-elp-checkbox-div">'+
973
- '<input type="checkbox" name="'+prop.c['name']+'" class="pagelayer-elp-checkbox" />'+
974
- '</div>';
975
-
976
- row.append(div);
977
-
978
- if(prop.c['val'].length > 0){
979
- row.find('input').attr('checked', 'checked');
980
- }else{
981
- row.find('input').removeAttr('checked');
982
- }
983
-
984
- // When the change is called
985
- row.find('input').on('change', function(){
986
-
987
- // We set to string true or false
988
- var val = jQuery(this).is(':checked') ? 'true' : '';
989
-
990
- _pagelayer_set_atts(row, val);// Save and Render
991
- });
992
-
993
- }
994
-
995
- // The Radio property
996
- function pagelayer_elp_radio(row, prop){
997
-
998
- var active = 'pagelayer-elp-radio-active';
999
- var div = '<div class="pagelayer-elp-radio-div">';
1000
-
1001
- for(var x in prop.list){
1002
- var addclass = (prop.c['val'] == x) ? active : '';
1003
- div += '<a class="pagelayer-elp-radio '+addclass+'" val="'+x+'">'+prop.list[x]+'</a>';
1004
- }
1005
-
1006
- div += '<div>';
1007
-
1008
- row.append(div);
1009
-
1010
- row.find('.pagelayer-elp-radio').each(function(){
1011
-
1012
- jQuery(this).on('click', function (){
1013
-
1014
- // Remove existing active class
1015
- jQuery(this).parent().find('.'+active).removeClass(active);
1016
-
1017
- // Set active
1018
- jQuery(this).addClass(active);
1019
-
1020
- _pagelayer_set_atts(row, jQuery(this).attr('val'));// Save and Render
1021
-
1022
- });
1023
-
1024
- });
1025
-
1026
- }
1027
-
1028
- // The Image Property
1029
- function pagelayer_elp_image(row, prop){
1030
-
1031
- var style = '';
1032
- var tmp = prop.c['name']+'-url';
1033
- var def = pagelayer.blank_img;
1034
- var src = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : def;
1035
-
1036
- // Set temp image
1037
- if(!(tmp in prop.el.tmp)){
1038
- _pagelayer_set_tmp_atts(row, 'url', def);
1039
- _pagelayer_set_atts(row, def);
1040
- }
1041
-
1042
- // Do we have a URL set ?
1043
- style = 'style="background-image:url(\''+src+'\')"';
1044
-
1045
- var div = '<div class="pagelayer-elp-image-div">'+
1046
- '<div class="pagelayer-elp-image" '+style+'></div>'+
1047
- '<div class="pagelayer-elp-image-delete"><i class="fa fa-trash" /></div>'+
1048
- '</div>';
1049
-
1050
- row.append(div);
1051
-
1052
- // Set an Image
1053
- row.find('.pagelayer-elp-image').on('click', function(){
1054
-
1055
- var button = jQuery(this);
1056
-
1057
- // Load the frame
1058
- var frame = pagelayer_select_frame('image');
1059
-
1060
- // On select update the stuff
1061
- frame.on({
1062
- 'select': function(){
1063
-
1064
- var state = frame.state();
1065
- var id = url = '';
1066
-
1067
- // External URL
1068
- if('props' in state){
1069
-
1070
- id = url = state.props.attributes.url;
1071
-
1072
- // Internal from gallery
1073
- }else{
1074
-
1075
- var attachment = frame.state().get('selection').first().toJSON();
1076
- //console.log(attachment);
1077
-
1078
- // Set the new ID and URL
1079
- id = attachment.id;
1080
- url = attachment.url;
1081
-
1082
- // Keep a list of all sizes
1083
- for(var x in attachment.sizes){
1084
- _pagelayer_set_tmp_atts(row, x+'-url', attachment.sizes[x].url);
1085
- }
1086
-
1087
- }
1088
-
1089
- // Update thumbnail
1090
- button.css('background-image', 'url(\''+url+'\')');
1091
-
1092
- // Save and render
1093
- _pagelayer_set_tmp_atts(row, 'url', url);
1094
- _pagelayer_set_atts(row, id);
1095
-
1096
- },
1097
- // On open select the appropriate images in the media manager
1098
- 'open': function() {
1099
- var selection = frame.state().get('selection');
1100
- var wp_id = prop.el.$.attr('pagelayer-a-id');
1101
- selection.reset( wp_id ? [ wp.media.attachment( wp_id ) ] : [] );
1102
- }
1103
- });
1104
-
1105
- frame.open(button);
1106
-
1107
- return false;
1108
-
1109
- });
1110
-
1111
- // Delete this
1112
- row.find('.pagelayer-elp-image-delete').on('click', function(){
1113
-
1114
- // Update thumbnail
1115
- row.find('.pagelayer-elp-image').css('background-image', 'url(\''+def+'\')');
1116
-
1117
- // Set to blank and render
1118
- _pagelayer_set_atts(row, '', true);
1119
-
1120
- _pagelayer_set_tmp_atts(row, 'url', def);
1121
- _pagelayer_set_atts(row, def);
1122
-
1123
- });
1124
-
1125
- }
1126
-
1127
- // The Multi Image Property
1128
- function pagelayer_elp_multi_image(row, prop){
1129
-
1130
- var div = '<div class="pagelayer-elp-multi_image-div">'+
1131
- '<center><button class="pagelayer-elp-button">'+pagelayer_l('Add Images')+'</button></center>'+
1132
- '<div class="pagelayer-elp-multi_image-thumbs"></div>'+
1133
- '</div>';
1134
-
1135
- row.append(div);
1136
-
1137
- var tmp = prop.c['name']+'-urls';
1138
- var ids = new Array();
1139
-
1140
- // Any IDs ?
1141
- if(!pagelayer_empty(prop.c['val'])){
1142
- ids = prop.c['val'].split(',');
1143
- //console.log(ids);
1144
- }
1145
-
1146
- // Do we have a URL set ?
1147
- if(ids.length > 0 && tmp in prop.el.tmp){
1148
- var images = JSON.parse(prop.el.tmp[tmp]);
1149
- //console.log(images);
1150
-
1151
- for(var x in ids){
1152
- row.find('.pagelayer-elp-multi_image-thumbs').append('<div class="pagelayer-elp-multi_image-thumb" style="background-image: url(\''+images['i'+ids[x]]+'\');"></div>');
1153
- }
1154
- }
1155
-
1156
- var pagelayer_init_frame = function(state){
1157
-
1158
- var button = row.find('.pagelayer-elp-multi_image-thumbs');
1159
- //console.log(ids);
1160
-
1161
- // Load the frame
1162
- var frame = pagelayer_select_frame('multi_image', 'gallery'+state);
1163
-
1164
- frame.on({
1165
-
1166
- // Set the current selection if any
1167
- 'open': function(){
1168
-
1169
- // Do we have anything
1170
- if(ids.length > 0){
1171
-
1172
- var selection = '';
1173
-
1174
- if(state == '-edit'){
1175
- selection = frame.state().get('library');
1176
- }else{
1177
- selection = frame.state().get('selection');
1178
- }
1179
-
1180
- // Add to current selection
1181
- for(var x in ids){
1182
- attachment = wp.media.attachment(ids[x]);
1183
- attachment.fetch();
1184
- selection.add(attachment ? [ attachment ] : [] );
1185
- }
1186
- }
1187
- },
1188
-
1189
- // When images are selected
1190
- 'update': function(selection){
1191
-
1192
- //console.log(selection);
1193
-
1194
- // Remove thumbnails
1195
- row.find('.pagelayer-elp-multi_image-thumb').remove();
1196
-
1197
- //Fetch selected images
1198
- var attachments = selection.map(function(attachment){
1199
- attachment.toJSON();
1200
- return attachment;
1201
- });
1202
-
1203
- //console.log(attachments);
1204
-
1205
- var img_ids = [];
1206
- var urls = {};
1207
- var img_urls = {};
1208
- var titles = {};
1209
- var links = {};
1210
- var captions = {};
1211
-
1212
- for(var i = 0; i < attachments.length; ++i){
1213
-
1214
- // Add Id and urls to array
1215
- var id = attachments[i].id;
1216
- var _id = 'i'+id;
1217
- img_ids.push(id);
1218
- urls[_id] = attachments[i].attributes.url;
1219
-
1220
- // Create thumbnails
1221
- button.append('<div class="pagelayer-elp-multi_image-thumb" style="background-image: url(\''+attachments[i].attributes.url+'\');"></div>');
1222
-
1223
- //get title
1224
- titles[_id] = attachments[i].attributes.title;
1225
- links[_id] = attachments[i].attributes.link;
1226
- captions[_id] = attachments[i].attributes.caption;
1227
-
1228
- // Create a URL
1229
- img_urls[_id] = {}
1230
-
1231
- for(var x in attachments[i].attributes.sizes){
1232
- img_urls[_id][x] = attachments[i].attributes.sizes[x].url;
1233
- }
1234
-
1235
- }
1236
-
1237
- //console.log(img_urls);
1238
-
1239
- // Save and render
1240
- _pagelayer_set_tmp_atts(row, 'urls', JSON.stringify(urls));
1241
- _pagelayer_set_tmp_atts(row, 'all-urls', JSON.stringify(img_urls));
1242
- _pagelayer_set_tmp_atts(row, 'all-titles', JSON.stringify(titles));
1243
- _pagelayer_set_tmp_atts(row, 'all-links', JSON.stringify(links));
1244
- _pagelayer_set_tmp_atts(row, 'all-captions', JSON.stringify(captions));
1245
- _pagelayer_set_atts(row, img_ids);
1246
-
1247
- // Update the IDs incase the user clicks on it again
1248
- ids = img_ids;
1249
-
1250
- }
1251
-
1252
- });
1253
-
1254
- frame.open(button);
1255
-
1256
- return false;
1257
-
1258
- };
1259
-
1260
- row.find('.pagelayer-elp-multi_image-thumbs').on('click', function(){
1261
- pagelayer_init_frame('-edit');
1262
- });
1263
-
1264
- row.find('.pagelayer-elp-button').on('click', function(){
1265
- pagelayer_init_frame(ids.length > 0 ? '-library' : '');
1266
- });
1267
-
1268
- }
1269
-
1270
- // The Video Property
1271
- function pagelayer_elp_video(row, prop){
1272
-
1273
- var tmp = prop.c['name']+'-url';
1274
- var src = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : prop.c['val'];
1275
-
1276
- var div = '<div class="pagelayer-elp-video-div pagelayer-elp-input-icon">'+
1277
- '<input class="pagelayer-elp-video" name="'+prop.c['name']+'" type="text" value="'+src+'">'+
1278
- '<i class="fa fa-folder-open" />'+
1279
- '</input></div>';
1280
-
1281
- row.append(div);
1282
-
1283
- row.find('.pagelayer-elp-video-div .fa').on('click', function(){
1284
-
1285
- var button = jQuery(this);
1286
-
1287
- // Load the frame
1288
- var frame = pagelayer_select_frame('video');
1289
-
1290
- // On select update the stuff
1291
- frame.on({
1292
-
1293
- 'select': function(){
1294
-
1295
- var state = frame.state();
1296
- var id = url = '';
1297
-
1298
- // External URL
1299
- if('props' in state){
1300
-
1301
- id = url = state.props.attributes.url;
1302
-
1303
- // Internal from gallery
1304
- }else{
1305
-
1306
- var attachment = frame.state().get('selection').first().toJSON();
1307
- //console.log(attachment);
1308
-
1309
- id = attachment.id;
1310
- url = attachment.url;
1311
-
1312
- }
1313
-
1314
- // Update URL
1315
- button.prev().val(url);
1316
-
1317
- // Save and render
1318
- _pagelayer_set_tmp_atts(row, 'url', url);
1319
- _pagelayer_set_atts(row, id);
1320
-
1321
- }
1322
-
1323
- });
1324
-
1325
- frame.open(button);
1326
-
1327
- return false;
1328
-
1329
- });
1330
-
1331
- // Edited the video URL directly
1332
- row.find('.pagelayer-elp-video').on('change', function(){
1333
-
1334
- var input = jQuery(this);
1335
-
1336
- // Set the new URL
1337
- _pagelayer_set_tmp_atts(row, 'url', input.val());
1338
- _pagelayer_set_atts(row, input.val());
1339
-
1340
- });
1341
-
1342
- }
1343
-
1344
-
1345
- // The Audio Property
1346
- function pagelayer_elp_audio(row, prop){
1347
-
1348
- var tmp = prop.c['name']+'-url';
1349
- var src = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : prop.c['val'];
1350
-
1351
- var div = '<div class="pagelayer-elp-audio-div pagelayer-elp-input-icon">'+
1352
- '<input class="pagelayer-elp-audio" name="'+prop.c['name']+'" type="text" value="'+src+'" />'+
1353
- '<i class="fa fa-bars" />'+
1354
- '</div>';
1355
-
1356
- row.append(div);
1357
-
1358
- // Choose from media
1359
- row.find('.pagelayer-elp-audio-div .fa').on('click', function(){
1360
-
1361
- var button = jQuery(this);
1362
-
1363
- // Load the frame
1364
- var frame = pagelayer_select_frame('audio');
1365
-
1366
- frame.on({
1367
-
1368
- 'select': function(){
1369
-
1370
- var state = frame.state();
1371
- var id = url = '';
1372
-
1373
- // External URL
1374
- if('props' in state){
1375
-
1376
- id = url = state.props.attributes.url;
1377
-
1378
- // Internal from gallery
1379
- }else{
1380
-
1381
- var attachment = frame.state().get('selection').first().toJSON();
1382
- //console.log(attachment);
1383
-
1384
- id = attachment.id;
1385
- url = attachment.url;
1386
-
1387
- }
1388
-
1389
- // Update URL
1390
- button.prev().val(url);
1391
-
1392
- // Save and render
1393
- _pagelayer_set_tmp_atts(row, 'url', url);
1394
- _pagelayer_set_atts(row, id);
1395
-
1396
- }
1397
-
1398
- });
1399
-
1400
- frame.open(button);
1401
-
1402
- return false;
1403
-
1404
- });
1405
-
1406
- // Edited the media URL directly
1407
- row.find('.pagelayer-elp-audio').on('change', function(){
1408
-
1409
- var input = jQuery(this);
1410
-
1411
- // Set the new URL
1412
- _pagelayer_set_tmp_atts(row, 'url', input.val());
1413
- _pagelayer_set_atts(row, input.val());
1414
-
1415
- });
1416
-
1417
- }
1418
-
1419
- // The Media Property
1420
- function pagelayer_elp_media(row, prop){
1421
-
1422
- var tmp = prop.c['name']+'-url';
1423
- var src = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : prop.c['val'];
1424
-
1425
- var div = '<div class="pagelayer-elp-media-div pagelayer-elp-input-icon">'+
1426
- '<input class="pagelayer-elp-media" value="'+src+'" type="text" />'+
1427
- '<i class="fa fa-bars" />'+
1428
- '</div>';
1429
-
1430
- row.append(div);
1431
-
1432
- row.find('.pagelayer-elp-media-div .fa-bars').on('click', function(){
1433
-
1434
- var button = jQuery(this);
1435
-
1436
- // Load the frame
1437
- var frame = pagelayer_select_frame('media');
1438
-
1439
- frame.on({
1440
-
1441
- 'select': function(){
1442
-
1443
- var state = frame.state();
1444
- var id = url = '';
1445
-
1446
- // External URL
1447
- if('props' in state){
1448
-
1449
- id = url = state.props.attributes.url;
1450
-
1451
- // Internal from gallery
1452
- }else{
1453
-
1454
- var attachment = frame.state().get('selection').first().toJSON();
1455
- //console.log(attachment);
1456
-
1457
- id = attachment.id;
1458
- url = attachment.url;
1459
-
1460
- }
1461
-
1462
- // Update URL
1463
- button.prev().val(url);
1464
-
1465
- // Save and render
1466
- _pagelayer_set_tmp_atts(row, 'url', url);
1467
- _pagelayer_set_atts(row, id);
1468
-
1469
- }
1470
-
1471
- });
1472
-
1473
- frame.open(button);
1474
-
1475
- return false;
1476
-
1477
- });
1478
-
1479
- // Edited the media URL directly
1480
- row.find('.pagelayer-elp-media').on('change', function(){
1481
-
1482
- var input = jQuery(this);
1483
-
1484
- // Set the new URL
1485
- _pagelayer_set_tmp_atts(row, 'url', input.val());
1486
- _pagelayer_set_atts(row, input.val());
1487
-
1488
- });
1489
-
1490
- }
1491
-
1492
- // The Slider Property
1493
- function pagelayer_elp_slider(row, prop){
1494
-
1495
- var div = '<div class="pagelayer-elp-slider-div">'+
1496
- '<input type="range" class="pagelayer-elp-slider" value="'+prop.c['val']+'" min="'+prop['min']+'" max="'+prop['max']+'" step="'+prop['step']+'"/>'+
1497
- '<input type="number" class="pagelayer-elp-slider-value" value="'+prop.c['val']+'" min="'+prop['min']+'" max="'+prop['max']+'" step="'+prop['step']+'"/>'+
1498
- '</div>'+
1499
- '</div>';
1500
-
1501
- row.append(div);
1502
-
1503
- // Set an value in span
1504
- row.find('.pagelayer-elp-slider-div input').on('input', function(){
1505
-
1506
- row.find('.pagelayer-elp-slider-div input').val(this.value);
1507
-
1508
- _pagelayer_set_atts(row, this.value);// Save and Render
1509
-
1510
- });
1511
-
1512
- }
1513
-
1514
- // The Editor proprety
1515
- function pagelayer_elp_editor(row, prop){
1516
-
1517
- var div = '<div class="pagelayer-elp-editor-div">'+
1518
- '<textarea class="pagelayer-elp-editor">'+prop.c['val']+'</textarea>'+
1519
- '</div>';
1520
-
1521
- row.append(div);
1522
-
1523
- var editor = row.find('.pagelayer-elp-editor');
1524
-
1525
- // No SVG Icons for now
1526
- //jQuery.trumbowyg.svgPath = false;
1527
-
1528
- // Initiate the editor
1529
- editor.trumbowyg({
1530
- autogrow: false,
1531
- btns:[
1532
- ['viewHTML'],
1533
- ['undo', 'redo'], // Only supported in Blink browsers
1534
- ['formatting'],
1535
- ['fontfamily'],
1536
- ['foreColor', 'backColor',],
1537
- ['strong', 'em', 'del'],
1538
- ['superscript', 'subscript'],
1539
- ['link'],
1540
- ['wpmedia'],
1541
- ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
1542
- ['unorderedList', 'orderedList'],
1543
- ['horizontalRule'],
1544
- ['removeformat'],
1545
- ['fullscreen']
1546
- ],
1547
- imageWidthModalEdit: true,
1548
-
1549
- // Handle the changes made in the editor
1550
- }).on('tbwchange', function(){
1551
- _pagelayer_set_atts(row, editor.trumbowyg('html'));// Save and Render
1552
- });
1553
-
1554
- }
1555
-
1556
- // The Link proprety
1557
- function pagelayer_elp_link(row, prop){
1558
-
1559
- // TODO : Implement pagelayer-elp-link-icon
1560
- var div = '<div class="pagelayer-elp-link-div pagelayer-elp-input-icon">'+
1561
- '<input class="pagelayer-elp-link" type="text" value="'+prop.c['val']+'" />'+
1562
- '<i class="fa fa-link pagelayer-elp-link-icon" />'+
1563
- '</div>';
1564
-
1565
- row.append(div);
1566
-
1567
- // Set a Link
1568
- row.find('.pagelayer-elp-link').on('change', function(){
1569
- _pagelayer_set_atts(row, jQuery(this).val());// Save and Render
1570
- });
1571
-
1572
- }
1573
-
1574
- // The Textarea property
1575
- function pagelayer_elp_textarea(row, prop){
1576
-
1577
- var div = '<div class="pagelayer-elp-textarea-div">'+
1578
- '<textarea class="pagelayer-elp-textarea">'+prop.c['val']+'</textarea>'+
1579
- '</div>';
1580
-
1581
- row.append(div);
1582
-
1583
- // Handle on change
1584
- row.find('.pagelayer-elp-textarea').on('input', function(){
1585
- _pagelayer_set_atts(row, pagelayer_trim(jQuery(this).val()));// Save and Render
1586
- });
1587
- };
1588
-
1589
- // Clear all editable
1590
- function pagelayer_clear_editable(){
1591
-
1592
- // Destroy all
1593
- for(var x in pagelayer_editor){
1594
- pagelayer_editor[x].pen.destroy();
1595
- pagelayer_editor[x].$.removeClass('pagelayer-pen');
1596
- }
1597
-
1598
- };
1599
-
1600
- // Makes a field editable in the DOM
1601
- function pagelayer_make_editable(jEle, e){
1602
-
1603
- // Is it already setup ?
1604
- if(jEle.hasClass('pagelayer-pen')){
1605
- //console.log('HERE');
1606
- return true;
1607
- }
1608
-
1609
- var prop = jEle.attr('pagelayer-editable');
1610
-
1611
- // Destroy the existing pen
1612
- if(!pagelayer_empty(pagelayer_editor[prop])){
1613
- pagelayer_editor[prop].pen.destroy();
1614
- pagelayer_editor[prop].$.removeClass('pagelayer-pen');
1615
- }
1616
-
1617
- // The parent element
1618
- var pEle = jEle.closest('.pagelayer-ele');
1619
-
1620
- var options = {
1621
- class: 'pagelayer-pen',
1622
- editor: jEle[0],
1623
- list: ['bold', 'italic', 'underline', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'strike'],
1624
- stay: false
1625
- }
1626
-
1627
- // Setup the editor
1628
- pagelayer_editor[prop] = {};
1629
- pagelayer_editor[prop].pen = new Pen(options);
1630
- pagelayer_editor[prop].$ = jEle;
1631
-
1632
- // Are we the clicked object, then set the focus
1633
- if(e){
1634
- var target = jQuery(e.target);
1635
- if(target.is(jEle).length || jEle.find(target).length){
1636
- jEle.focus();
1637
- }
1638
- }
1639
-
1640
- // Reverse setup the event
1641
- jEle.on('blur', function(){
1642
- //pagelayer_editor[prop].pen.destroy();
1643
- });
1644
-
1645
- // Reverse setup the event
1646
- jEle.on('focus', function(){
1647
- jQuery('.pagelayer-pen-menu').hide();
1648
- pagelayer_editor[prop].pen.rebuild();
1649
- });
1650
-
1651
- // Reverse setup the event
1652
- jEle.on('input', function(){
1653
-
1654
- var val = pagelayer_trim(jEle.html());
1655
-
1656
- // Set the property as well
1657
- pagelayer_set_atts(pEle, prop, val);
1658
-
1659
- // Update the property
1660
- var input = pagelayer.$('[pagelayer-elp-name='+prop+']').find('input,textarea,.trumbowyg-editor');
1661
- //console.log(input);
1662
-
1663
- if(input.length > 0){
1664
- if(input.hasClass('trumbowyg-editor')){
1665
- input.html(val);
1666
- }else{
1667
- input.val(val);
1668
- }
1669
- }
1670
-
1671
- });
1672
-
1673
- }
1674
-
1675
- // The Icon Property
1676
- function pagelayer_elp_icon(row, prop){
1677
-
1678
- var $ = jQuery;
1679
-
1680
- // Find the available icons
1681
- if(pagelayer_empty(pagelayer_icons)){
1682
-
1683
- pagelayer_icons = $.map($.map(document.styleSheets, function(s){
1684
-
1685
- if(s.href && s.href.match(/font\-awesome\.min\.css/)){
1686
- return s;
1687
- }
1688
- return null;
1689
-
1690
- })[0].cssRules, function(r) {
1691
-
1692
- if(r.cssText.indexOf('::before { content: ') > 0){
1693
- return r.cssText.substring(4,r.cssText.indexOf('::'));
1694
- }
1695
- return null;
1696
-
1697
- });
1698
-
1699
- }
1700
-
1701
- var icons = pagelayer_icons;
1702
- //console.log(icons);
1703
-
1704
- if('list' in prop && prop.list.length > 0){
1705
- icons = prop.list;
1706
- }
1707
-
1708
- // Icon function
1709
- var icon_html = function(name){
1710
- return '<span class="pagelayer-elp-icon-span">'+
1711
- '<i class="fa fa-'+name+'" icon="fa fa-'+name+'" /> '+name+
1712
- '</span>';
1713
- }
1714
-
1715
- var div = '<div class="pagelayer-elp-icon-div">'+
1716
- '<div class="pagelayer-elp-icon-preview">'+
1717
- '<i class="fa fa-'+prop.c['val']+'"></i>'+
1718
- '<span class="pagelayer-elp-icon-name">'+
1719
- (pagelayer_empty(prop.c['val'])?'Choose icon':prop.c['val'])+
1720
- '</span>'+
1721
- '</div>'+
1722
- '<span class="pagelayer-elp-icon-open">▼</span>'+
1723
- '</div>';
1724
-
1725
- row.append(div);
1726
-
1727
- // Make all icons list
1728
- var html = '<div class="pagelayer-elp-icon-selector">'+
1729
- '<input type="text" class="pagelayer-elp-search-icon" name="search-icon" placeholder="'+pagelayer_l('search')+'">'+
1730
- '<div class="pagelayer-elp-icon-list">';
1731
-
1732
- for(var x in icons){
1733
- html += icon_html(icons[x]);
1734
- }
1735
-
1736
- html += '</div>'+
1737
- '</div>';
1738
-
1739
- row.append(html);
1740
-
1741
- // Open the selector
1742
- row.find('.pagelayer-elp-icon-div').on('click', function(){
1743
- row.find('.pagelayer-elp-icon-selector').slideToggle();
1744
- });
1745
-
1746
- // Handle search of icon
1747
- row.find('.pagelayer-elp-search-icon').on('keyup', function(){
1748
-
1749
- var v = this.value;
1750
- var span ='';
1751
- v = v.toLowerCase();
1752
- v = v.replace(/\s+/g, '-');
1753
-
1754
- for(var x in icons){
1755
- if(icons[x].substring(0, v.length) === v){
1756
- span += icon_html(icons[x]);
1757
- }
1758
- }
1759
-
1760
- row.find('.pagelayer-elp-icon-list').empty().html(span);
1761
-
1762
- });
1763
-
1764
- // Handle click within the icon selector
1765
- row.find('.pagelayer-elp-icon-selector').on('click', function(e){
1766
-
1767
- var jEle = jQuery(e.target);
1768
- var i = jEle.children().attr('icon');
1769
- if(pagelayer_empty(i)){
1770
- return false;
1771
- }
1772
-
1773
- i = i.replace('fa fa-', '');
1774
-
1775
- // Set the icon in this list
1776
- row.find('.pagelayer-elp-icon-preview').html('<i class="fa fa-'+i+'"></i><span class="pagelayer-elp-icon-name">'+i+'</span>');
1777
- row.find('.pagelayer-elp-icon-selector').slideUp();
1778
-
1779
- _pagelayer_set_atts(row, i);// Save and Render
1780
-
1781
- return false;
1782
-
1783
- });
1784
-
1785
- }
1786
-
1787
- // The Color Property
1788
- function pagelayer_elp_color(row, prop){
1789
-
1790
- var div = '<div class="pagelayer-elp-color-div">'+
1791
- '<div class="pagelayer-elp-color-preview"></div>'+
1792
- '</div>';
1793
-
1794
- row.append(div);
1795
-
1796
- row.find('.pagelayer-elp-color-preview').css('background', prop.c['val']);
1797
-
1798
- var picker = new Picker({
1799
- parent : row.find('.pagelayer-elp-color-div')[0],
1800
- popup : 'left',
1801
- color : prop.c['val'],
1802
- doc: window.parent.document
1803
- });
1804
-
1805
- // Handle selected color
1806
- picker.onChange = function(color) {
1807
- row.find('.pagelayer-elp-color-preview').css('background', color.rgbaString);
1808
- _pagelayer_set_atts(row, color.hex);// Save and Render
1809
- };
1810
-
1811
- }
1812
-
1813
- // The Spinner property
1814
- function pagelayer_elp_spinner(row, prop){
1815
-
1816
- var div = '<div class="pagelayer-elp-spinner-div">'+
1817
- '<input type="number" class="pagelayer-elp-spinner" name="'+prop.c['name']+'"'+
1818
- ' min="'+prop['min']+'" max="'+prop['max']+'" step="'+prop['step']+'" value="'+prop.c['val']+'"/>'+
1819
- '</div>';
1820
-
1821
- row.append(div);
1822
-
1823
- row.find('input').on('input', function(){
1824
- _pagelayer_set_atts(row, jQuery(this).val());// Save and Render
1825
- });
1826
-
1827
- }
1828
-
1829
- // The Group Property
1830
- function pagelayer_elp_group(row, prop){
1831
-
1832
- // Remove the pagelayer-show-tab
1833
- row.removeAttr('pagelayer-show-tab');
1834
-
1835
- var div = '<div class="pagelayer-elp-group-div"></div>'+
1836
- '<center><button class="pagelayer-elp-button">'+prop['text']+'</button></center>';
1837
-
1838
- row.append(div);
1839
-
1840
- // Add button
1841
- var add_item = function(row){
1842
-
1843
- var ele_id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id') || '';
1844
- var pEle = jQuery('[pagelayer-id="'+ele_id+'"]');
1845
-
1846
- // First add the element inside the group element
1847
- var id = pagelayer_element_add_child(pEle, prop['sc']);
1848
- //pagelayer_element_setup('[pagelayer-id='+id+']', true);
1849
-
1850
- show_item(id);
1851
-
1852
- };
1853
-
1854
- // Show the properties of the existing things
1855
- var show_item = function(id, sel){
1856
-
1857
- // To append after an existing item
1858
- sel = sel || false;
1859
-
1860
- // If pagelayer id empty then return
1861
- if(pagelayer_empty(id)){
1862
- return false;
1863
- }
1864
-
1865
- // Since the element is added very fast, we reselect via jQuery for it to re-access the dom
1866
- jEle = jQuery('[pagelayer-id="'+id+'"]');
1867
-
1868
- var label_param = prop['item_label']['param'] || '';
1869
- var title = pagelayer_get_att(jEle, label_param) || prop['item_label']['default'];
1870
-
1871
- // We need to get the correct value for select based params which are the label
1872
- var child_props = pagelayer_shortcodes[prop.sc];
1873
- for(var section in child_props){
1874
- for(var _param in child_props[section]){
1875
- if(child_props[section][_param]['type'] == 'select'){
1876
- if(title in child_props[section][_param]['list']){
1877
- title = child_props[section][_param]['list'][title];
1878
- }
1879
- }
1880
- }
1881
- }
1882
-
1883
- // Create the HTML
1884
- var holder = jQuery('<div class="pagelayer-elp-group-item" pagelayer-group-item-id="'+id+'">'+
1885
- '<div class="pagelayer-elp-group-item-head">'+
1886
- '<span class="pagelayer-elp-group-item-drag"><i class="fa fa-bars" /></span>'+
1887
- '<span class="pagelayer-elp-group-item-title">'+title+'</span>'+
1888
- '<span class="pagelayer-elp-group-item-clone"><i class="fa fa-clone" /></span>'+
1889
- '<span class="pagelayer-elp-group-item-del"><i class="fa fa-trash" /></span>'+
1890
- '</div>'+
1891
- '<div class="pagelayer-elp-group-item-body"></div>'+
1892
- '</div>');
1893
-
1894
- // Append to the row
1895
- if(sel){
1896
- row.find(sel).after(holder);
1897
- }else{
1898
- row.find('.pagelayer-elp-group-div').first().append(holder);
1899
- }
1900
-
1901
- // Setup the toggle
1902
- holder.find('.pagelayer-elp-group-item-title').first().on('click', function(){
1903
- var rEle = holder.find('.pagelayer-elp-group-item-body').first();
1904
- var r_id = holder.attr('pagelayer-group-item-id');
1905
-
1906
- // If the props are not already setup
1907
- if(rEle.html().length < 1){
1908
-
1909
- pagelayer_elpd_generate(jQuery('[pagelayer-id="'+r_id+'"]'), rEle);
1910
-
1911
- // Change the group item title
1912
- var tmp_title = holder.find('[pagelayer-elp-name="'+label_param+'"] [name="'+label_param+'"]');
1913
-
1914
- if(tmp_title.length > 0){
1915
- jQuery(tmp_title).on('input', function(){
1916
- holder.find('.pagelayer-elp-group-item-title').html(tmp_title.val());
1917
- });
1918
- }
1919
-
1920
- }
1921
-
1922
- rEle.toggle('slow');
1923
- });
1924
-
1925
- // Clone the item
1926
- holder.find('.pagelayer-elp-group-item-head .fa-clone').on('click', function(){
1927
-
1928
- // If the element have any parent
1929
- var jEle = jQuery('[pagelayer-id="'+id+'"]');
1930
- var par = pagelayer_get_parent(jEle);
1931
- var clone_ele = pagelayer_copy_element(jEle);
1932
- //console.log(clone_ele);console.log('[pagelayer-group-item-id="'+id+'"]');
1933
- show_item(clone_ele, '[pagelayer-group-item-id="'+id+'"]');
1934
-
1935
- if(par){
1936
- pagelayer_sc_render(pagelayer_ele_by_id(par));
1937
- }
1938
- });
1939
-
1940
- // Delete the item
1941
- holder.find('.pagelayer-elp-group-item-head .fa-trash').on('click', function(){
1942
-
1943
- // If the element have any parent
1944
- var jEle = jQuery('[pagelayer-id="'+id+'"]');
1945
- var par = pagelayer_get_parent(jEle);
1946
- holder.remove();
1947
- pagelayer_delete_element(jEle);
1948
-
1949
- if(par){
1950
- pagelayer_sc_render(pagelayer_ele_by_id(par));
1951
- }
1952
- });
1953
-
1954
- };
1955
-
1956
- // Handle click of the group
1957
- row.find('.pagelayer-elp-button').on('click', function(){
1958
- add_item(row);
1959
- });
1960
-
1961
- // Find the existing items
1962
- prop.el.$.find('[pagelayer-tag='+prop['sc']+']').each(function(){
1963
- var jEle = jQuery(this);
1964
- var id = pagelayer_assign_id(jEle);
1965
- show_item(id);
1966
- });
1967
- };
1968
-
1969
- // The Datetime Property
1970
- function pagelayer_elp_datetime(row, prop){
1971
-
1972
- var div = '<div class="pagelayer-elp-datetime-div pagelayer-elp-input-icon">'+
1973
- '<input type="date" class="pagelayer-elp-datetime" name="'+prop.c['name']+'" value="'+prop.c['val']+'" />'+
1974
- '</div>';
1975
-
1976
- row.append(div);
1977
-
1978
- row.find('.pagelayer-elp-datetime').on('change', function(){
1979
- _pagelayer_set_atts(row, jQuery(this).val());// Save and Render
1980
- });
1981
-
1982
- };
1983
-
1984
- // The padding property
1985
- function pagelayer_elp_padding(row, prop){
1986
- var val = ['', '', '', ''];
1987
-
1988
- if(prop.c['val'].length > 0){
1989
- val = prop.c['val'].split(',');
1990
- //console.log(val)
1991
- }
1992
-
1993
- var div = '<div class="pagelayer-elp-padding-div">'+
1994
- '<input type="number" class="pagelayer-elp-padding" value="'+parseInt(val[0])+'"></input>'+
1995
- '<input type="number" class="pagelayer-elp-padding" value="'+parseInt(val[1])+'"></input>'+
1996
- '<input type="number" class="pagelayer-elp-padding" value="'+parseInt(val[2])+'"></input>'+
1997
- '<input type="number" class="pagelayer-elp-padding" value="'+parseInt(val[3])+'"></input>'+
1998
- '<i class="fa fa-link" />'+
1999
- '</div>';
2000
-
2001
- row.append(div);
2002
-
2003
- // Is the value linked ?
2004
- var link = row.find('.pagelayer-elp-padding-div .fa');
2005
- var isLinked = 1;
2006
- //isLinked = isLinked == 2 ? false : true;
2007
- //console.log(isLinked);
2008
- var tmp_val = val[0];
2009
-
2010
- for(var p_val in val){
2011
-
2012
- // Check if unlinked
2013
- if(tmp_val != val[p_val] ){
2014
- isLinked = 0;
2015
- }
2016
- tmp_val = val[p_val];
2017
- }
2018
-
2019
- if(isLinked){
2020
- link.addClass('pagelayer-elp-padding-linked');
2021
- }else{
2022
- link.removeClass('pagelayer-elp-padding-linked');
2023
- }
2024
-
2025
- // Handle link on click
2026
- link.on('click', function(){
2027
-
2028
- var linked = link.hasClass('pagelayer-elp-padding-linked');
2029
-
2030
- if(linked){
2031
- link.removeClass('pagelayer-elp-padding-linked');
2032
- }else{
2033
- link.addClass('pagelayer-elp-padding-linked');
2034
- }
2035
-
2036
- });
2037
-
2038
- row.find('input').on('input', function(){
2039
-
2040
- // Are the values linked
2041
- var linked = row.find('.pagelayer-elp-padding-div .fa').hasClass('pagelayer-elp-padding-linked');
2042
-
2043
- if(linked){
2044
- var val = jQuery(this).val();
2045
- row.find('input').each(function(){
2046
- jQuery(this).val(val);
2047
- });
2048
- }
2049
-
2050
- var vals = [];
2051
-
2052
- // Get all values
2053
- row.find('input').each(function(){
2054
- var val = jQuery(this).val();
2055
- vals.push(val ? val : 0);
2056
- });
2057
-
2058
- _pagelayer_set_atts(row, vals);// Save and Render
2059
- });
2060
-
2061
- };
2062
-
2063
- // The shadow property
2064
- function pagelayer_elp_shadow(row, prop){
2065
-
2066
- var val =['','','',''];
2067
-
2068
- // Do we have a val ?
2069
- if(!pagelayer_empty(prop.c['val'])){
2070
- val = prop.c['val'].split(',');
2071
- }
2072
-
2073
- //var val = {color: '', blur: '', horizontal: '', vertical: ''};
2074
-
2075
- var div = '<span class="pagelayer-prop-edit"><i class="fa fa-pencil"></i></span>'+
2076
- '<div class="pagelayer-elp-shadow-div">'+
2077
- '<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-horizontal">'+
2078
- '<label class="pagelayer-elp-label">Horizontal</label>'+
2079
- '<input class="pagelayer-elp-shadow-input" type="number" max="100" min="-100" step="1" class="pagelayer-elp-shadow-blur" value="'+val[0]+'"></input>'+
2080
- '</div>'+
2081
- '<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-vertical">'+
2082
- '<label class="pagelayer-elp-label">Vertical</label>'+
2083
- '<input class="pagelayer-elp-shadow-input" type="number" max="100" min="-100" step="1" class="pagelayer-elp-shadow-blur" value="'+val[1]+'"></input>'+
2084
- '</div>'+
2085
- '<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-blur">'+
2086
- '<label class="pagelayer-elp-label">Blur</label>'+
2087
- '<input class="pagelayer-elp-shadow-input" type="number" max="100" min="0" step="1" class="pagelayer-elp-shadow-blur" value="'+val[2]+'"></input>'+
2088
- '</div>'+
2089
- '<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-color">'+
2090
- '<label class="pagelayer-elp-label">color</label>'+
2091
- '<div class="pagelayer-elp-color-div">'+
2092
- '<div class="pagelayer-elp-color-preview"></div>'+
2093
- '</div>'+
2094
- '</div>'+
2095
- '</div>';
2096
-
2097
- row.append(div);
2098
-
2099
- row.find('.pagelayer-prop-edit').on('click', function(){
2100
- row.find('.pagelayer-elp-shadow-div').toggleClass('pagelayer-prop-show');
2101
- });
2102
-
2103
- row.find('.pagelayer-elp-color-preview').css('background', val[3]);
2104
-
2105
- var picker = new Picker({
2106
- parent : row.find('.pagelayer-elp-color-div')[0],
2107
- popup : 'left',
2108
- doc: window.parent.document
2109
- });
2110
-
2111
- // Handle selected color
2112
- picker.onChange = function(color) {
2113
- row.find('.pagelayer-elp-color-preview').css('background', color.rgbaString);
2114
- val[3] = (color.hex ? color.hex : '');
2115
- _pagelayer_set_atts(row, val);
2116
- };
2117
-
2118
- row.find('input').on('input', function(){
2119
- var i = 0;
2120
- row.find('.pagelayer-elp-shadow-input').each(function(){
2121
- var value = jQuery(this).val();
2122
- val[i] = (value ? value : '');
2123
- i++;
2124
- });
2125
- _pagelayer_set_atts(row, val);
2126
- });
2127
-
2128
- }
2129
-
2130
- // The filter property
2131
- function pagelayer_elp_filter(row, prop){
2132
-
2133
- var val =['','','','','','',''];
2134
-
2135
- // Do we have a val ?
2136
- if(!pagelayer_empty(prop.c['val'])){
2137
- val = prop.c['val'].split(',');
2138
- }
2139
-
2140
- var filters = [['blur','10','0.1'],['brightness','200','1'],['contrast','200','1'],['grayscale','200','1'],['hue','360','1'],['opacity','100','1'],['saturate','200','1']];
2141
-
2142
- var div = '<span class="pagelayer-prop-edit"><i class="fa fa-pencil"></i></span>'+
2143
- '<div class="pagelayer-elp-filter-div">';
2144
-
2145
- jQuery.each(val,function(key, value){
2146
- div += '<div class="pagelayer-elp-prop-grp pagelayer-elp-filter-'+filters[key][0]+'">'+
2147
- '<label class="pagelayer-elp-label">'+filters[key][0]+'</label>'+
2148
- '<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>'+
2149
- '<span class="pagelayer-elp-filter-val">'+value+'</span>'+
2150
- '</div>';
2151
- });
2152
-
2153
- div += '</div>';
2154
-
2155
- row.append(div);
2156
-
2157
- row.find('.pagelayer-prop-edit').on('click', function(){
2158
- row.find('.pagelayer-elp-filter-div').toggleClass('pagelayer-prop-show');
2159
- });
2160
-
2161
- row.find('input').on('input', function(){
2162
- var val = [];
2163
- jQuery(this).parent().find('span').html(this.value);
2164
- row.find('.pagelayer-elp-filter-input').each(function(){
2165
- var value = jQuery(this).val();
2166
- val.push(value ? value : 'none');
2167
- });
2168
- _pagelayer_set_atts(row, val);
2169
- });
2170
-
2171
- }
2172
-
2173
- // The gradient property
2174
- function pagelayer_elp_gradient(row, prop){
2175
-
2176
- var val =['','','','','','',''];
2177
-
2178
- // Do we have a val ?
2179
- if(!pagelayer_empty(prop.c['val'])){
2180
- val = prop.c['val'].split(',');
2181
- }
2182
-
2183
- //var val = {color: '', blur: '', horizontal: '', vertical: ''};
2184
-
2185
- var div = '<div class="pagelayer-elp-gradient-div">'+
2186
- '<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-angle">'+
2187
- '<label class="pagelayer-elp-label">Angle</label>'+
2188
- '<input class="pagelayer-elp-gradient-input" type="number" max="360" min="0" step="1" class="pagelayer-elp-gradient-angle" value="'+val[0]+'"></input>'+
2189
- '</div>'+
2190
- '<div class="pagelayer-elp-prop-grp">'+
2191
- '<label class="pagelayer-elp-label">color 1</label>'+
2192
- '<div class="pagelayer-elp-color-div">'+
2193
- '<div class="pagelayer-elp-gradient-color1 pagelayer-elp-color-preview"></div>'+
2194
- '</div>'+
2195
- '</div>'+
2196
- '<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-per1">'+
2197
- '<label class="pagelayer-elp-label">Percentage 1</label>'+
2198
- '<input class="pagelayer-elp-gradient-input" type="number" max="100" min="-100" step="1" class="pagelayer-elp-gradient-per1" value="'+val[2]+'"></input>'+
2199
- '</div>'+
2200
- '<div class="pagelayer-elp-prop-grp">'+
2201
- '<label class="pagelayer-elp-label">color 2</label>'+
2202
- '<div class="pagelayer-elp-color-div">'+
2203
- '<div class="pagelayer-elp-gradient-color2 pagelayer-elp-color-preview"></div>'+
2204
- '</div>'+
2205
- '</div>'+
2206
- '<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-per2">'+
2207
- '<label class="pagelayer-elp-label">Percentage 2</label>'+
2208
- '<input class="pagelayer-elp-gradient-input" type="number" max="100" min="0" step="1" class="pagelayer-elp-gradient-per2" value="'+val[4]+'"></input>'+
2209
- '</div>'+
2210
- '<div class="pagelayer-elp-prop-grp">'+
2211
- '<label class="pagelayer-elp-label">color 3</label>'+
2212
- '<div class="pagelayer-elp-color-div">'+
2213
- '<div class="pagelayer-elp-gradient-color3 pagelayer-elp-color-preview"></div>'+
2214
- '</div>'+
2215
- '</div>'+
2216
- '<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-per3">'+
2217
- '<label class="pagelayer-elp-label">Percentage 3</label>'+
2218
- '<input class="pagelayer-elp-gradient-input" type="number" max="100" min="0" step="1" class="pagelayer-elp-gradient-per3" value="'+val[6]+'"></input>'+
2219
- '</div>'+
2220
- '</div>';
2221
-
2222
- row.append(div);
2223
- var i = 1;
2224
- row.find('.pagelayer-elp-color-preview').each(function(){
2225
- jQuery(this).css('background', val[i]);
2226
- i = i+2;
2227
- });
2228
-
2229
- var picker1 = new Picker({
2230
- parent : row.find('.pagelayer-elp-gradient-color1')[0],
2231
- popup : 'left',
2232
- doc: window.parent.document
2233
- });
2234
-
2235
- // Handle selected color
2236
- picker1.onChange = function(color) {
2237
- row.find('.pagelayer-elp-gradient-color1').css('background', color.rgbaString);
2238
- val[1] = (color.hex ? color.hex : '');
2239
- _pagelayer_set_atts(row, val);
2240
- };
2241
-
2242
- var picker2 = new Picker({
2243
- parent : row.find('.pagelayer-elp-gradient-color2')[0],
2244
- popup : 'left',
2245
- doc: window.parent.document
2246
- });
2247
-
2248
- // Handle selected color
2249
- picker2.onChange = function(color) {
2250
- row.find('.pagelayer-elp-gradient-color2').css('background', color.rgbaString);
2251
- val[3] = (color.hex ? color.hex : '');
2252
- _pagelayer_set_atts(row, val);
2253
- };
2254
-
2255
- var picker3 = new Picker({
2256
- parent : row.find('.pagelayer-elp-gradient-color3')[0],
2257
- popup : 'left',
2258
- doc: window.parent.document
2259
- });
2260
-
2261
- // Handle selected color
2262
- picker3.onChange = function(color) {
2263
- row.find('.pagelayer-elp-gradient-color3').css('background', color.rgbaString);
2264
- val[5] = (color.hex ? color.hex : '');
2265
- _pagelayer_set_atts(row, val);
2266
- };
2267
-
2268
- row.find('input').on('input', function(){
2269
- var i = 0;
2270
- row.find('.pagelayer-elp-gradient-input').each(function(){
2271
- var value = jQuery(this).val();
2272
- val[i] = (value ? value : '');
2273
- i = i+2;
2274
- });
2275
- _pagelayer_set_atts(row, val);
2276
- });
2277
-
2278
- }
2279
-
2280
- // The typography property
2281
- function pagelayer_elp_typography(row, prop){
2282
-
2283
- var val =['','','','','','','','','',''];
2284
-
2285
- // Do we have a val ?
2286
- if(!pagelayer_empty(prop.c['val'])){
2287
- val = prop.c['val'].split(',');
2288
- }
2289
-
2290
- var select = { 'style' : ['', 'Normal', 'Italic', 'Oblique'],
2291
- 'weight' : ['', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
2292
- 'variant' : ['', 'Normal', 'Small-caps'],
2293
- 'deco-line' : ['', 'None', 'Overline', 'Line-through', 'Underline', 'Underline Overline'],
2294
- 'deco-style' : ['Solid', 'Double', 'Dotted', 'Dashed', 'Wavy'],
2295
- 'transform' : ['', 'Capitalize', 'Uppercase', 'Lowercase'],
2296
- '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']
2297
- }
2298
-
2299
- var option = function(val, setVal){
2300
- var selected = (val != setVal) ? '' : 'selected="selected"';
2301
- var lang = pagelayer_empty(val) ? 'Default' : val;
2302
- return '<option value="'+val+'" '+selected+'>'+ lang +'</option>';
2303
- }
2304
-
2305
- var font_option = function(val, setVal){
2306
- var selected = (val != setVal) ? '' : 'selected="selected"';
2307
- var lang = pagelayer_empty(val) ? 'Default' : val;
2308
- return '<option style="font-family:'+lang+'" value="'+val+'" '+selected+'>'+ lang +'</option>';
2309
- }
2310
-
2311
- var div = '<span class="pagelayer-prop-edit"><i class="fa fa-pencil"></i></span>'+
2312
- '<div class="pagelayer-elp-typo-div">'+
2313
- '<div class="pagelayer-elp-typo pagelayer-elp-typo-fonts">'+
2314
- '<label class="pagelayer-elp-label">Font-Family</label>'+
2315
- '<select class="pagelayer-elp-typo-input">';
2316
-
2317
- jQuery.each(select['fonts'],function(key, value){
2318
- div += font_option(value, val[0]);
2319
- });
2320
- div +='</select>'+
2321
- '</div>'+
2322
- '<div class="pagelayer-elp-typo pagelayer-elp-typo-size">'+
2323
- '<label class="pagelayer-elp-label">Font-Size</label>'+
2324
- '<input class="pagelayer-elp-typo-input" type="number" max="200" min="0" step="1" value="'+val[1]+'"></input>'+
2325
- '</div>'+
2326
- '<div class="pagelayer-elp-typo pagelayer-elp-typo-style">'+
2327
- '<label class="pagelayer-elp-label">Font-Style</label>'+
2328
- '<select class="pagelayer-elp-typo-input">';
2329
-
2330
- jQuery.each(select['style'],function(key, value){
2331
- div += option(value, val[2]);
2332
- });
2333
- div +='</select>'+
2334
- '</div>'+
2335
- '<div class="pagelayer-elp-typo pagelayer-elp-typo-weight">'+
2336
- '<label class="pagelayer-elp-label">Font-Weight</label>'+
2337
- '<select class="pagelayer-elp-typo-input">';
2338
- jQuery.each(select['weight'],function(key, value){
2339
- div += option(value, val[3]);
2340
- });
2341
-
2342
- div += '</select>'+
2343
- '</div>'+
2344
- '<div class="pagelayer-elp-typo pagelayer-elp-typo-variant">'+
2345
- '<label class="pagelayer-elp-label">Font-variant</label>'+
2346
- '<select class="pagelayer-elp-typo-input">';
2347
- jQuery.each(select['variant'],function(key, value){
2348
- div += option(value, val[4]);
2349
- });
2350
-
2351
- div += '</select>'+
2352
- '</div>'+
2353
- '<div class="pagelayer-elp-typo pagelayer-elp-typo-deco-line">'+
2354
- '<label class="pagelayer-elp-label">Decoration Line</label>'+
2355
- '<select class="pagelayer-elp-typo-input">';
2356
- jQuery.each(select['deco-line'],function(key, value){
2357
- div += option(value, val[5]);
2358
- });
2359
-
2360
- div += '</select>'+
2361
- '</div>'+
2362
- '<div class="pagelayer-elp-typo pagelayer-elp-typo-deco-style">'+
2363
- '<label class="pagelayer-elp-label">Decoration Style</label>'+
2364
- '<select class="pagelayer-elp-typo-input">';
2365
- jQuery.each(select['deco-style'],function(key, value){
2366
- div += option(value, val[6]);
2367
- });
2368
-
2369
- div += '</select>'+
2370
- '</div>'+
2371
- '<div class="pagelayer-elp-typo pagelayer-elp-typo-height">'+
2372
- '<label class="pagelayer-elp-label">Line Height</label>'+
2373
- '<input class="pagelayer-elp-typo-input" type="number" max="15" min="0" step="0.1" value="'+val[7]+'"></input>'+
2374
- '</div>'+
2375
- '<div class="pagelayer-elp-typo pagelayer-elp-typo-transform">'+
2376
- '<label class="pagelayer-elp-label">Text Transform</label>'+
2377
- '<select class="pagelayer-elp-typo-input">';
2378
- jQuery.each(select['transform'],function(key, value){
2379
- div += option(value, val[8]);
2380
- });
2381
-
2382
- div += '</select>'+
2383
- '</div>'+
2384
- '<div class="pagelayer-elp-typo pagelayer-elp-typo-lspacing">'+
2385
- '<label class="pagelayer-elp-label">Letter Spacing</label>'+
2386
- '<input class="pagelayer-elp-typo-input" type="number" max="10" min="-10" step="0.1" value="'+val[9]+'"></input>'+
2387
- '</div>'+
2388
- '<div class="pagelayer-elp-typo pagelayer-elp-typo-wspacing">'+
2389
- '<label class="pagelayer-elp-label">Word Spacing</label>'+
2390
- '<input class="pagelayer-elp-typo-input" type="number" max="50" min="0" step="1" value="'+val[10]+'"></input>'+
2391
- '</div>'+
2392
- '</div>';
2393
-
2394
- row.append(div);
2395
-
2396
- if(pagelayer_empty(val[5]) || val[5]=='none'){
2397
- row.find('.pagelayer-elp-typo-deco-style').hide();
2398
- }
2399
-
2400
- row.find('.pagelayer-prop-edit').on('click', function(){
2401
- row.find('.pagelayer-elp-typo-div').toggleClass('pagelayer-prop-show');
2402
- });
2403
-
2404
-
2405
- row.find('.pagelayer-elp-typo-input').on('change', function(){
2406
- val = [];
2407
- row.find('.pagelayer-elp-typo-input').each(function(){
2408
- var value = jQuery(this).val();
2409
- val.push(value ? value : '');
2410
- });
2411
- _pagelayer_set_atts(row, val);
2412
- });
2413
-
2414
- row.find('.pagelayer-elp-typo-fonts select').on('change', function(){
2415
-
2416
- var value = jQuery(this).val();
2417
- value = value.replace(' ', '+');
2418
-
2419
- if(jQuery('#pagelayer-google-fonts').length == 0){
2420
-
2421
- 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">');
2422
-
2423
- }else{
2424
-
2425
- var url = jQuery('#pagelayer-google-fonts').attr('href');
2426
- if(url.indexOf(value) == -1){
2427
- url = url+'|'+value+':100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i';
2428
- jQuery('#pagelayer-google-fonts').attr('href', url);
2429
- }
2430
-
2431
- }
2432
-
2433
- });
2434
-
2435
- row.find('.pagelayer-elp-typo-deco-line select').on('change', function(){
2436
- var value = jQuery(this).val();
2437
- if(pagelayer_empty(value) || value=='none'){
2438
- row.find('.pagelayer-elp-typo-deco-style').hide();
2439
- }else{
2440
- row.find('.pagelayer-elp-typo-deco-style').show();
2441
- }
2442
- });
2443
-
2444
- }
2445
-
2446
- // The dimension property
2447
- function pagelayer_elp_dimension(row, prop){
2448
-
2449
- var val = ['', ''];
2450
-
2451
- if(prop.c['val'].length > 0){
2452
- val = prop.c['val'].split(',');
2453
- //console.log(val)
2454
- }
2455
-
2456
- var div = '<div class="pagelayer-elp-dimension-div">'+
2457
- '<input type="number" class="pagelayer-elp-dimension" value="'+parseInt(val[0])+'"></input>'+
2458
- '<input type="number" class="pagelayer-elp-dimension" value="'+parseInt(val[1])+'"></input>'+
2459
- '<i class="fa fa-link" />'+
2460
- '</div>';
2461
-
2462
- row.append(div);
2463
-
2464
- // Is the value linked ?
2465
- var link = row.find('.pagelayer-elp-dimension-div .fa');
2466
- var isLinked = 1;
2467
- var tmp_val = val[0];
2468
-
2469
- for(var p_val in val){
2470
-
2471
- // Check if unlinked
2472
- if(tmp_val != val[p_val] ){
2473
- isLinked = 0;
2474
- }
2475
- tmp_val = val[p_val];
2476
- }
2477
-
2478
- if(isLinked){
2479
- link.addClass('pagelayer-elp-dimension-linked');
2480
- }else{
2481
- link.removeClass('pagelayer-elp-dimension-linked');
2482
- }
2483
-
2484
- // Handle link on click
2485
- link.on('click', function(){
2486
-
2487
- var linked = link.hasClass('pagelayer-elp-dimension-linked');
2488
-
2489
- if(linked){
2490
- link.removeClass('pagelayer-elp-dimension-linked');
2491
- }else{
2492
- link.addClass('pagelayer-elp-dimension-linked');
2493
- }
2494
-
2495
- });
2496
-
2497
- row.find('input').on('input', function(){
2498
-
2499
- // Are the values linked
2500
- var linked = row.find('.pagelayer-elp-dimension-div .fa').hasClass('pagelayer-elp-dimension-linked');
2501
-
2502
- if(linked){
2503
- var val = jQuery(this).val();
2504
- row.find('input').each(function(){
2505
- jQuery(this).val(val);
2506
- });
2507
- }
2508
-
2509
- var vals = [];
2510
-
2511
- // Get all values
2512
- row.find('input').each(function(){
2513
- var val = jQuery(this).val();
2514
- vals.push(val ? val : 0);
2515
- });
2516
-
2517
- _pagelayer_set_atts(row, vals);// Save and Render
2518
- });
2519
-
2520
- };
2521
-
2522
- // Select frame to upload media
2523
- function pagelayer_select_frame(tag, state){
2524
-
2525
- var state = state || '';
2526
- //console.log(state);
2527
-
2528
- var frame;
2529
-
2530
- switch(tag){
2531
-
2532
- // Multi image selection frame
2533
- case 'multi_image':
2534
-
2535
- frame = wp.media({
2536
-
2537
- id: 'pagelayer-wp-multi-image-library',
2538
- frame: 'post',
2539
- state: state,
2540
- title: pagelayer_l('frame_'+tag),
2541
- multiple: true,
2542
- library: wp.media.query({type: 'image'}),
2543
- button: {
2544
- text: pagelayer_l('insert')
2545
- },
2546
-
2547
- });
2548
-
2549
- break;
2550
-
2551
- // Media selection frame
2552
- case 'media':
2553
-
2554
- frame = wp.media({
2555
-
2556
- id: 'pagelayer-wp-media-library',
2557
- frame: 'post',
2558
- state: 'pagelayer-media',
2559
- title: pagelayer_l('frame_'+tag),
2560
- multiple: false,
2561
- states: [
2562
- new wp.media.controller.Library({
2563
- id: 'pagelayer-media',
2564
- title: pagelayer_l('frame_'+tag),
2565
- multiple: false,
2566
- date: true
2567