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

Files changed (16) hide show
  1. css/pagelayer-editor-frontend.css +1 -0
  2. css/pagelayer-editor.css +7 -1
  3. css/pagelayer-frontend.css +43 -2
  4. init.php +2 -1
  5. js/givejs.php +1 -0
  6. js/pagelayer-editor.js +34 -7
  7. js/pagelayer-frontend.js +5 -5
  8. js/properties.js +2623 -2618
  9. js/trumbowyg.fontsize.min.js +1 -0
  10. languages/en.json +24 -2
  11. main/ajax.php +4 -4
  12. main/functions.php +2 -2
  13. main/live.php +3 -2
  14. main/shortcodes.php +3 -2
  15. pagelayer.php +1 -1
  16. readme.txt +13 -2
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
- })
2568
- ],
2569
- button: {
2570
- text: pagelayer_l('insert')
2571
- },
2572
-
2573
- });
2574
-
2575
- break;
2576
-
2577
- //Default frame(for image, video, audio)
2578
- default:
2579
-
2580
- frame = wp.media({
2581
-
2582
- id: 'pagelayer-wp-'+tag+'-library',
2583
- frame: 'post',
2584
- state: 'pagelayer-'+tag,
2585
- title: pagelayer_l('frame_'+tag),
2586
- multiple: false,
2587
- library: wp.media.query({type: tag}),
2588
- states: [
2589
- new wp.media.controller.Library({
2590
- id: 'pagelayer-'+tag,
2591
- title: pagelayer_l('frame_'+tag),
2592
- library: wp.media.query( { type: tag } ),
2593
- multiple: false,
2594
- date: true
2595
- })
2596
- ],
2597
- button: {
2598
- text: pagelayer_l('insert')
2599
- },
2600
-
2601
- });
2602
-
2603
- break;
2604
- }
2605
-
2606
- frame.on({
2607
- 'menu:render:default': function(view){
2608
- view.unset('insert');
2609
- view.unset('gallery');
2610
- view.unset('featured-image');
2611
- view.unset('playlist');
2612
- view.unset('video-playlist');
2613
- },
2614
- }, this);
2615
-
2616
- return frame;
2617
-
2618
- }
 
 
 
 
 
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
+ //console.trace();console.log('Setting Attr');
680
+
681
+ // Render
682
+ pagelayer_sc_render(jEle);
683
+ };
684
+
685
+ // Will set the attribute but not render
686
+ function _pagelayer_set_tmp_atts(row, suffix, val){
687
+ var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id');
688
+ var jEle = jQuery('[pagelayer-id='+id+']');
689
+ pagelayer_set_tmp_atts(jEle, row.attr('pagelayer-elp-name')+'-'+suffix, val);
690
+ };
691
+
692
+ // Get the tmp att
693
+ function _pagelayer_get_tmp_att(row, suffix){
694
+ var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id');
695
+ var jEle = jQuery('[pagelayer-id='+id+']');
696
+ return pagelayer_get_tmp_att(jEle, row.attr('pagelayer-elp-name')+'-'+suffix);
697
+ };
698
+
699
+ // Create the Label
700
+ function pagelayer_elp_label(row, prop){
701
+ row.append('<div class="pagelayer-elp-label-div"><label class="pagelayer-elp-label">'+prop['label']+'</label></div>');
702
+
703
+ var label = row.children('.pagelayer-elp-label-div');
704
+
705
+ // Do we have screen ?
706
+ if('screen' in prop){
707
+ var mode = pagelayer_get_screen_mode();
708
+ var screen = '<div class="pagelayer-elp-screen">'+
709
+ '<i class="fa fa-desktop" />'+
710
+ '<i class="fa fa-tablet" />'+
711
+ '<i class="fa fa-mobile" />'+
712
+ '<i class="pagelayer-prop-screen fa fa-'+mode+'" />'+
713
+ '</div>';
714
+ label.append(screen);
715
+
716
+ // Set screen mode on change
717
+ label.find('.fa:not(.pagelayer-prop-screen)').on('click', function(){
718
+ var mode = 'desktop';
719
+ var jEle = jQuery(this);
720
+
721
+ // Tablet ?
722
+ if(jEle.hasClass('fa-tablet')){
723
+ mode = 'tablet';
724
+ }
725
+
726
+ // Mobile ?
727
+ if(jEle.hasClass('fa-mobile')){
728
+ mode = 'mobile';
729
+ }
730
+
731
+ pagelayer_set_screen_mode(mode);
732
+ label.find('.pagelayer-elp-screen .fa').removeClass('open');
733
+
734
+ });
735
+
736
+ // On change of screen handle the values
737
+ label.find('.pagelayer-elp-screen').on('pagelayer-screen-changed', function(e){
738
+
739
+ label.find('.pagelayer-elp-screen .fa').removeClass('open');
740
+ var mode = pagelayer_get_screen_mode();
741
+ var modes = {desktop: '', tablet: '_tablet', mobile: '_mobile'};
742
+
743
+ // Get the current current new val
744
+ prop.c['val'] = pagelayer_get_att(prop.el.$, prop.c['name']+modes[mode]);
745
+
746
+ // Handle the amount
747
+ if(pagelayer_empty(prop.c['val'])){
748
+ prop.c['val'] = '';
749
+ }
750
+
751
+ // Remove the siblings
752
+ label.siblings().each(function(){
753
+ var j = jQuery(this);
754
+
755
+ if(j.hasClass('pagelayer-elp-desc')){
756
+ return;
757
+ }
758
+
759
+ j.remove();
760
+ });
761
+
762
+ // Create the vals again
763
+ var fn = window['pagelayer_elp_'+prop['type']];
764
+
765
+ // The main property
766
+ fn(row, prop);
767
+
768
+ });
769
+
770
+ label.find('.pagelayer-elp-screen .pagelayer-prop-screen').on('click', function(e){
771
+ jQuery(this).siblings().toggleClass('open');
772
+ })
773
+
774
+ }
775
+
776
+ // Do we have units ?
777
+ if('units' in prop){
778
+
779
+ var units = '';
780
+ var tmp_val = prop.c['val'];
781
+ var default_unit = 0;
782
+
783
+ // Get unit from value
784
+ if(!(pagelayer_empty(tmp_val))){
785
+
786
+ for(var i in prop['units']){
787
+ if(tmp_val.search(prop['units'][i]) != -1){
788
+ default_unit = i;
789
+ }
790
+ }
791
+ }
792
+
793
+ for(var i in prop['units']){
794
+ units += '<span '+(i == default_unit ? 'selected' : '')+'>'+prop['units'][i]+'</span>';
795
+ }
796
+
797
+ label.append('<div class="pagelayer-elp-units">'+units+'</div>');
798
+
799
+ // Set unit on change
800
+ label.find('.pagelayer-elp-units span').on('click', function(){
801
+
802
+ label.find('.pagelayer-elp-units span').each(function(){
803
+ jQuery(this).removeAttr('selected');
804
+ });
805
+
806
+ jQuery(this).attr('selected', 1);
807
+
808
+ });
809
+
810
+ }
811
+
812
+ };
813
+
814
+ // Create the Label
815
+ function pagelayer_elp_heading(row, prop){
816
+ //row.append('<div class="pagelayer-elp-heading">'+prop['label']+'</div>');
817
+ }
818
+
819
+ // Create the Label
820
+ function pagelayer_elp_heading_ui(row, prop){
821
+ row.append('<div class="pagelayer-elp-heading">'+prop['label']+'</div>');
822
+ }
823
+
824
+ // Create the Description
825
+ function pagelayer_elp_desc(row, label){
826
+ //row.append('<div class="pagelayer-elp-desc">'+label+'</div>');
827
+ };
828
+
829
+ // The Text property
830
+ function pagelayer_elp_text(row, prop){
831
+
832
+ var div = '<div class="pagelayer-elp-text-div">'+
833
+ '<input type="text" class="pagelayer-elp-text" name="'+prop.c['name']+'" value="'+prop.c['val']+'"></input>'+
834
+ '</div>';
835
+
836
+ row.append(div);
837
+
838
+ row.find('input').on('input', function(){
839
+ _pagelayer_set_atts(row, jQuery(this).val());// Save and Render
840
+ });
841
+
842
+ };
843
+
844
+ // The Select property
845
+ function pagelayer_elp_select(row, prop){
846
+
847
+ var options = '';
848
+ var option = function(val, lang){
849
+ var selected = (val != prop.c['val']) ? '' : 'selected="selected"';
850
+ return '<option class="pagelayer-elp-select-option" value="'+val+'" '+selected+'>'+lang+'</option>';
851
+ }
852
+
853
+ for (x in prop['list']){
854
+
855
+ // Single item
856
+ if(typeof prop['list'][x] == 'string'){
857
+ options += option(x, prop['list'][x]);
858
+
859
+ // Groups
860
+ }else{
861
+ options += '<optgroup label="'+x+'">';
862
+
863
+ for(var y in prop['list'][x]){
864
+ options += option(y, prop['list'][x][y]);
865
+ }
866
+
867
+ options += '</optgroup>';
868
+ }
869
+ }
870
+
871
+ var div = '<div class="pagelayer-elp-select-div pagelayer-elp-pos-rel">'+
872
+ '<select class="pagelayer-elp-select pagelayer-select" name="'+prop.c['name']+'">'+options+'</select>'+
873
+ '</div>';
874
+
875
+ row.append(div);
876
+
877
+ row.find('select').on('change', function(){
878
+
879
+ var sEle = jQuery(this);
880
+
881
+ if(sEle.attr('name') == "animation"){
882
+ _pagelayer_trigger_anim(row, sEle.val());
883
+ }
884
+
885
+ _pagelayer_set_atts(row, sEle.val());// Save and Render
886
+
887
+ });
888
+
889
+ }
890
+
891
+ // The MultiSelect property
892
+ function pagelayer_elp_multiselect(row, prop){
893
+
894
+ var selection = [];
895
+ if(!pagelayer_empty(prop.c['val'])){
896
+ //selection = JSON.parse(prop.c['val']);
897
+ selection = prop.c['val'].split(',');
898
+ }
899
+
900
+ var options = '';
901
+ var option = function(val, lang){
902
+ var selected = (jQuery.inArray(val,selection) == -1 ? '' : 'selected="selected"');
903
+ return '<li class="pagelayer-elp-multiselect-option" data-val="'+val+'" '+selected+'>'+lang+'</li>';
904
+ }
905
+
906
+ var show_sel = function(val){
907
+ var sel_html = '';
908
+ jQuery.each(val, function(index, value){
909
+ sel_html += '<span class="pagelayer-elp-multiselect-selected">'+prop['list'][value]+'</span>';
910
+ });
911
+ return sel_html;
912
+ }
913
+
914
+ for (x in prop['list']){
915
+ options += option(x, prop['list'][x]);
916
+ }
917
+
918
+ var div = '<div class="pagelayer-elp-multiselect-div pagelayer-elp-pos-rel">'+
919
+ '<div class="pagelayer-elp-multiselect">'+show_sel(selection)+'</div>'+
920
+ '<ul class="pagelayer-elp-multiselect-ul" name="'+prop.c['name']+'">'+options+'</ul>'+
921
+ '</div>';
922
+
923
+ row.append(div);
924
+
925
+ row.find('.pagelayer-elp-multiselect-option').on('click', function(){
926
+
927
+ var sVal = jQuery(this).attr('data-val');
928
+
929
+ if(jQuery.inArray(sVal,selection) == -1){
930
+ selection.push(sVal);
931
+ row.find('[data-val="'+sVal+'"]').attr('selected','selected');
932
+ }else{
933
+ selection.splice(jQuery.inArray(sVal,selection),1);
934
+ row.find('[data-val="'+sVal+'"]').removeAttr('selected');
935
+ }
936
+
937
+ //_pagelayer_set_atts(row,JSON.stringify(selection));// Save and Render
938
+ _pagelayer_set_atts(row, selection.join(','));// Save and Render
939
+
940
+ row.find('.pagelayer-elp-multiselect').html(show_sel(selection));
941
+
942
+ });
943
+
944
+ // Open the selector
945
+ row.find('.pagelayer-elp-multiselect').on('click', function(){
946
+ row.find('.pagelayer-elp-multiselect-ul').slideToggle();
947
+ });
948
+
949
+ }
950
+
951
+ function _pagelayer_trigger_anim(row, anim){
952
+ var id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id');
953
+ var classList = $('[pagelayer-id='+id+']').attr('class');
954
+ classList = classList.split(/\s+/);
955
+ //console.log(classList);
956
+ var options = [];
957
+ row.find('option').each(function(){
958
+ var found = $.inArray( $(this).val(), classList );
959
+ if( found != -1){
960
+ //var found = $(this).val();
961
+ $('[pagelayer-id='+id+']').removeClass($(this).val());
962
+ //break;
963
+ }
964
+ //options.push($(this).val());
965
+ });
966
+ $('[pagelayer-id='+id+']').removeClass('pagelayer-wow').addClass(anim + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
967
+ $(this).removeClass(anim+ ' animated');
968
+ });
969
+ }
970
+
971
+ // The Checkbox property
972
+ function pagelayer_elp_checkbox(row, prop){
973
+
974
+ var div = '<div class="pagelayer-elp-checkbox-div">'+
975
+ '<input type="checkbox" name="'+prop.c['name']+'" class="pagelayer-elp-checkbox" />'+
976
+ '</div>';
977
+
978
+ row.append(div);
979
+
980
+ if(prop.c['val'].length > 0){
981
+ row.find('input').attr('checked', 'checked');
982
+ }else{
983
+ row.find('input').removeAttr('checked');
984
+ }
985
+
986
+ // When the change is called
987
+ row.find('input').on('change', function(){
988
+
989
+ // We set to string true or false
990
+ var val = jQuery(this).is(':checked') ? 'true' : '';
991
+
992
+ _pagelayer_set_atts(row, val);// Save and Render
993
+ });
994
+
995
+ }
996
+
997
+ // The Radio property
998
+ function pagelayer_elp_radio(row, prop){
999
+
1000
+ var active = 'pagelayer-elp-radio-active';
1001
+ var div = '<div class="pagelayer-elp-radio-div">';
1002
+
1003
+ for(var x in prop.list){
1004
+ var addclass = (prop.c['val'] == x) ? active : '';
1005
+ div += '<a class="pagelayer-elp-radio '+addclass+'" val="'+x+'">'+prop.list[x]+'</a>';
1006
+ }
1007
+
1008
+ div += '<div>';
1009
+
1010
+ row.append(div);
1011
+
1012
+ row.find('.pagelayer-elp-radio').each(function(){
1013
+
1014
+ jQuery(this).on('click', function (){
1015
+
1016
+ // Remove existing active class
1017
+ jQuery(this).parent().find('.'+active).removeClass(active);
1018
+
1019
+ // Set active
1020
+ jQuery(this).addClass(active);
1021
+
1022
+ _pagelayer_set_atts(row, jQuery(this).attr('val'));// Save and Render
1023
+
1024
+ });
1025
+
1026
+ });
1027
+
1028
+ }
1029
+
1030
+ // The Image Property
1031
+ function pagelayer_elp_image(row, prop){
1032
+
1033
+ var style = '';
1034
+ var tmp = prop.c['name']+'-url';
1035
+ var def = pagelayer.blank_img;
1036
+ var src = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : def;
1037
+
1038
+ // Do we have a URL set ?
1039
+ style = 'style="background-image:url(\''+src+'\')"';
1040
+
1041
+ var div = '<div class="pagelayer-elp-image-div">'+
1042
+ '<div class="pagelayer-elp-image" '+style+'></div>'+
1043
+ '<div class="pagelayer-elp-image-delete"><i class="fa fa-trash" /></div>'+
1044
+ '</div>';
1045
+
1046
+ row.append(div);
1047
+
1048
+ // Set an Image
1049
+ row.find('.pagelayer-elp-image').on('click', function(){
1050
+
1051
+ var button = jQuery(this);
1052
+
1053
+ // Load the frame
1054
+ var frame = pagelayer_select_frame('image');
1055
+
1056
+ // On select update the stuff
1057
+ frame.on({
1058
+ 'select': function(){
1059
+
1060
+ var state = frame.state();
1061
+ var id = url = '';
1062
+
1063
+ // External URL
1064
+ if('props' in state){
1065
+
1066
+ id = url = state.props.attributes.url;
1067
+
1068
+ // Internal from gallery
1069
+ }else{
1070
+
1071
+ var attachment = frame.state().get('selection').first().toJSON();
1072
+ //console.log(attachment);
1073
+
1074
+ // Set the new ID and URL
1075
+ id = attachment.id;
1076
+ url = attachment.url;
1077
+
1078
+ // Keep a list of all sizes
1079
+ for(var x in attachment.sizes){
1080
+ _pagelayer_set_tmp_atts(row, x+'-url', attachment.sizes[x].url);
1081
+ }
1082
+
1083
+ }
1084
+
1085
+ // Update thumbnail
1086
+ button.css('background-image', 'url(\''+url+'\')');
1087
+
1088
+ // Save and render
1089
+ _pagelayer_set_tmp_atts(row, 'url', url);
1090
+ _pagelayer_set_atts(row, id);
1091
+
1092
+ },
1093
+ // On open select the appropriate images in the media manager
1094
+ 'open': function() {
1095
+ var selection = frame.state().get('selection');
1096
+ var wp_id = prop.el.$.attr('pagelayer-a-id');
1097
+ selection.reset( wp_id ? [ wp.media.attachment( wp_id ) ] : [] );
1098
+ }
1099
+ });
1100
+
1101
+ frame.open(button);
1102
+
1103
+ return false;
1104
+
1105
+ });
1106
+
1107
+ // Delete this
1108
+ row.find('.pagelayer-elp-image-delete').on('click', function(){
1109
+
1110
+ // Update thumbnail
1111
+ row.find('.pagelayer-elp-image').css('background-image', 'url(\''+def+'\')');
1112
+
1113
+ // Set to blank and render
1114
+ _pagelayer_set_atts(row, '', true);
1115
+
1116
+ _pagelayer_set_tmp_atts(row, 'url', def);
1117
+ _pagelayer_set_atts(row, def);
1118
+
1119
+ });
1120
+
1121
+ }
1122
+
1123
+ // The Multi Image Property
1124
+ function pagelayer_elp_multi_image(row, prop){
1125
+
1126
+ var div = '<div class="pagelayer-elp-multi_image-div">'+
1127
+ '<center><button class="pagelayer-elp-button">'+pagelayer_l('Add Images')+'</button></center>'+
1128
+ '<div class="pagelayer-elp-multi_image-thumbs"></div>'+
1129
+ '</div>';
1130
+
1131
+ row.append(div);
1132
+
1133
+ var tmp = prop.c['name']+'-urls';
1134
+ var ids = new Array();
1135
+
1136
+ // Any IDs ?
1137
+ if(!pagelayer_empty(prop.c['val'])){
1138
+ ids = prop.c['val'].split(',');
1139
+ //console.log(ids);
1140
+ }
1141
+
1142
+ // Do we have a URL set ?
1143
+ if(ids.length > 0 && tmp in prop.el.tmp){
1144
+ var images = JSON.parse(prop.el.tmp[tmp]);
1145
+ //console.log(images);
1146
+
1147
+ for(var x in ids){
1148
+ row.find('.pagelayer-elp-multi_image-thumbs').append('<div class="pagelayer-elp-multi_image-thumb" style="background-image: url(\''+images['i'+ids[x]]+'\');"></div>');
1149
+ }
1150
+ }
1151
+
1152
+ var pagelayer_init_frame = function(state){
1153
+
1154
+ var button = row.find('.pagelayer-elp-multi_image-thumbs');
1155
+ //console.log(ids);
1156
+
1157
+ // Load the frame
1158
+ var frame = pagelayer_select_frame('multi_image', 'gallery'+state);
1159
+
1160
+ frame.on({
1161
+
1162
+ // Set the current selection if any
1163
+ 'open': function(){
1164
+
1165
+ // Do we have anything
1166
+ if(ids.length > 0){
1167
+
1168
+ var selection = '';
1169
+
1170
+ if(state == '-edit'){
1171
+ selection = frame.state().get('library');
1172
+ }else{
1173
+ selection = frame.state().get('selection');
1174
+ }
1175
+
1176
+ // Add to current selection
1177
+ for(var x in ids){
1178
+ attachment = wp.media.attachment(ids[x]);
1179
+ attachment.fetch();
1180
+ selection.add(attachment ? [ attachment ] : [] );
1181
+ }
1182
+ }
1183
+ },
1184
+
1185
+ // When images are selected
1186
+ 'update': function(selection){
1187
+
1188
+ //console.log(selection);
1189
+
1190
+ // Remove thumbnails
1191
+ row.find('.pagelayer-elp-multi_image-thumb').remove();
1192
+
1193
+ //Fetch selected images
1194
+ var attachments = selection.map(function(attachment){
1195
+ attachment.toJSON();
1196
+ return attachment;
1197
+ });
1198
+
1199
+ //console.log(attachments);
1200
+
1201
+ var img_ids = [];
1202
+ var urls = {};
1203
+ var img_urls = {};
1204
+ var titles = {};
1205
+ var links = {};
1206
+ var captions = {};
1207
+
1208
+ for(var i = 0; i < attachments.length; ++i){
1209
+
1210
+ // Add Id and urls to array
1211
+ var id = attachments[i].id;
1212
+ var _id = 'i'+id;
1213
+ img_ids.push(id);
1214
+ urls[_id] = attachments[i].attributes.url;
1215
+
1216
+ // Create thumbnails
1217
+ button.append('<div class="pagelayer-elp-multi_image-thumb" style="background-image: url(\''+attachments[i].attributes.url+'\');"></div>');
1218
+
1219
+ //get title
1220
+ titles[_id] = attachments[i].attributes.title;
1221
+ links[_id] = attachments[i].attributes.link;
1222
+ captions[_id] = attachments[i].attributes.caption;
1223
+
1224
+ // Create a URL
1225
+ img_urls[_id] = {}
1226
+
1227
+ for(var x in attachments[i].attributes.sizes){
1228
+ img_urls[_id][x] = attachments[i].attributes.sizes[x].url;
1229
+ }
1230
+
1231
+ }
1232
+
1233
+ //console.log(img_urls);
1234
+
1235
+ // Save and render
1236
+ _pagelayer_set_tmp_atts(row, 'urls', JSON.stringify(urls));
1237
+ _pagelayer_set_tmp_atts(row, 'all-urls', JSON.stringify(img_urls));
1238
+ _pagelayer_set_tmp_atts(row, 'all-titles', JSON.stringify(titles));
1239
+ _pagelayer_set_tmp_atts(row, 'all-links', JSON.stringify(links));
1240
+ _pagelayer_set_tmp_atts(row, 'all-captions', JSON.stringify(captions));
1241
+ _pagelayer_set_atts(row, img_ids);
1242
+
1243
+ // Update the IDs incase the user clicks on it again
1244
+ ids = img_ids;
1245
+
1246
+ }
1247
+
1248
+ });
1249
+
1250
+ frame.open(button);
1251
+
1252
+ return false;
1253
+
1254
+ };
1255
+
1256
+ row.find('.pagelayer-elp-multi_image-thumbs').on('click', function(){
1257
+ pagelayer_init_frame('-edit');
1258
+ });
1259
+
1260
+ row.find('.pagelayer-elp-button').on('click', function(){
1261
+ pagelayer_init_frame(ids.length > 0 ? '-library' : '');
1262
+ });
1263
+
1264
+ }
1265
+
1266
+ // The Video Property
1267
+ function pagelayer_elp_video(row, prop){
1268
+
1269
+ var tmp = prop.c['name']+'-url';
1270
+ var src = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : prop.c['val'];
1271
+
1272
+ var div = '<div class="pagelayer-elp-video-div pagelayer-elp-input-icon">'+
1273
+ '<input class="pagelayer-elp-video" name="'+prop.c['name']+'" type="text" value="'+src+'">'+
1274
+ '<i class="fa fa-folder-open" />'+
1275
+ '</input></div>';
1276
+
1277
+ row.append(div);
1278
+
1279
+ row.find('.pagelayer-elp-video-div .fa').on('click', function(){
1280
+
1281
+ var button = jQuery(this);
1282
+
1283
+ // Load the frame
1284
+ var frame = pagelayer_select_frame('video');
1285
+
1286
+ // On select update the stuff
1287
+ frame.on({
1288
+
1289
+ 'select': function(){
1290
+
1291
+ var state = frame.state();
1292
+ var id = url = '';
1293
+
1294
+ // External URL
1295
+ if('props' in state){
1296
+
1297
+ id = url = state.props.attributes.url;
1298
+
1299
+ // Internal from gallery
1300
+ }else{
1301
+
1302
+ var attachment = frame.state().get('selection').first().toJSON();
1303
+ //console.log(attachment);
1304
+
1305
+ id = attachment.id;
1306
+ url = attachment.url;
1307
+
1308
+ }
1309
+
1310
+ // Update URL
1311
+ button.prev().val(url);
1312
+
1313
+ // Save and render
1314
+ _pagelayer_set_tmp_atts(row, 'url', url);
1315
+ _pagelayer_set_atts(row, id);
1316
+
1317
+ }
1318
+
1319
+ });
1320
+
1321
+ frame.open(button);
1322
+
1323
+ return false;
1324
+
1325
+ });
1326
+
1327
+ // Edited the video URL directly
1328
+ row.find('.pagelayer-elp-video').on('change', function(){
1329
+
1330
+ var input = jQuery(this);
1331
+
1332
+ // Set the new URL
1333
+ _pagelayer_set_tmp_atts(row, 'url', input.val());
1334
+ _pagelayer_set_atts(row, input.val());
1335
+
1336
+ });
1337
+
1338
+ }
1339
+
1340
+
1341
+ // The Audio Property
1342
+ function pagelayer_elp_audio(row, prop){
1343
+
1344
+ var tmp = prop.c['name']+'-url';
1345
+ var src = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : prop.c['val'];
1346
+
1347
+ var div = '<div class="pagelayer-elp-audio-div pagelayer-elp-input-icon">'+
1348
+ '<input class="pagelayer-elp-audio" name="'+prop.c['name']+'" type="text" value="'+src+'" />'+
1349
+ '<i class="fa fa-bars" />'+
1350
+ '</div>';
1351
+
1352
+ row.append(div);
1353
+
1354
+ // Choose from media
1355
+ row.find('.pagelayer-elp-audio-div .fa').on('click', function(){
1356
+
1357
+ var button = jQuery(this);
1358
+
1359
+ // Load the frame
1360
+ var frame = pagelayer_select_frame('audio');
1361
+
1362
+ frame.on({
1363
+
1364
+ 'select': function(){
1365
+
1366
+ var state = frame.state();
1367
+ var id = url = '';
1368
+
1369
+ // External URL
1370
+ if('props' in state){
1371
+
1372
+ id = url = state.props.attributes.url;
1373
+
1374
+ // Internal from gallery
1375
+ }else{
1376
+
1377
+ var attachment = frame.state().get('selection').first().toJSON();
1378
+ //console.log(attachment);
1379
+
1380
+ id = attachment.id;
1381
+ url = attachment.url;
1382
+
1383
+ }
1384
+
1385
+ // Update URL
1386
+ button.prev().val(url);
1387
+
1388
+ // Save and render
1389
+ _pagelayer_set_tmp_atts(row, 'url', url);
1390
+ _pagelayer_set_atts(row, id);
1391
+
1392
+ }
1393
+
1394
+ });
1395
+
1396
+ frame.open(button);
1397
+
1398
+ return false;
1399
+
1400
+ });
1401
+
1402
+ // Edited the media URL directly
1403
+ row.find('.pagelayer-elp-audio').on('change', function(){
1404
+
1405
+ var input = jQuery(this);
1406
+
1407
+ // Set the new URL
1408
+ _pagelayer_set_tmp_atts(row, 'url', input.val());
1409
+ _pagelayer_set_atts(row, input.val());
1410
+
1411
+ });
1412
+
1413
+ }
1414
+
1415
+ // The Media Property
1416
+ function pagelayer_elp_media(row, prop){
1417
+
1418
+ var tmp = prop.c['name']+'-url';
1419
+ var src = (tmp in prop.el.tmp) ? prop.el.tmp[tmp] : prop.c['val'];
1420
+
1421
+ var div = '<div class="pagelayer-elp-media-div pagelayer-elp-input-icon">'+
1422
+ '<input class="pagelayer-elp-media" value="'+src+'" type="text" />'+
1423
+ '<i class="fa fa-bars" />'+
1424
+ '</div>';
1425
+
1426
+ row.append(div);
1427
+
1428
+ row.find('.pagelayer-elp-media-div .fa-bars').on('click', function(){
1429
+
1430
+ var button = jQuery(this);
1431
+
1432
+ // Load the frame
1433
+ var frame = pagelayer_select_frame('media');
1434
+
1435
+ frame.on({
1436
+
1437
+ 'select': function(){
1438
+
1439
+ var state = frame.state();
1440
+ var id = url = '';
1441
+
1442
+ // External URL
1443
+ if('props' in state){
1444
+
1445
+ id = url = state.props.attributes.url;
1446
+
1447
+ // Internal from gallery
1448
+ }else{
1449
+
1450
+ var attachment = frame.state().get('selection').first().toJSON();
1451
+ //console.log(attachment);
1452
+
1453
+ id = attachment.id;
1454
+ url = attachment.url;
1455
+
1456
+ }
1457
+
1458
+ // Update URL
1459
+ button.prev().val(url);
1460
+
1461
+ // Save and render
1462
+ _pagelayer_set_tmp_atts(row, 'url', url);
1463
+ _pagelayer_set_atts(row, id);
1464
+
1465
+ }
1466
+
1467
+ });
1468
+
1469
+ frame.open(button);
1470
+
1471
+ return false;
1472
+
1473
+ });
1474
+
1475
+ // Edited the media URL directly
1476
+ row.find('.pagelayer-elp-media').on('change', function(){
1477
+
1478
+ var input = jQuery(this);
1479
+
1480
+ // Set the new URL
1481
+ _pagelayer_set_tmp_atts(row, 'url', input.val());
1482
+ _pagelayer_set_atts(row, input.val());
1483
+
1484
+ });
1485
+
1486
+ }
1487
+
1488
+ // The Slider Property
1489
+ function pagelayer_elp_slider(row, prop){
1490
+
1491
+ var div = '<div class="pagelayer-elp-slider-div">'+
1492
+ '<input type="range" class="pagelayer-elp-slider" value="'+prop.c['val']+'" min="'+prop['min']+'" max="'+prop['max']+'" step="'+prop['step']+'"/>'+
1493
+ '<input type="number" class="pagelayer-elp-slider-value" value="'+prop.c['val']+'" min="'+prop['min']+'" max="'+prop['max']+'" step="'+prop['step']+'"/>'+
1494
+ '</div>'+
1495
+ '</div>';
1496
+
1497
+ row.append(div);
1498
+
1499
+ // Set an value in span
1500
+ row.find('.pagelayer-elp-slider-div input').on('input', function(){
1501
+
1502
+ row.find('.pagelayer-elp-slider-div input').val(this.value);
1503
+
1504
+ _pagelayer_set_atts(row, this.value);// Save and Render
1505
+
1506
+ });
1507
+
1508
+ }
1509
+
1510
+ // The Editor proprety
1511
+ function pagelayer_elp_editor(row, prop){
1512
+
1513
+ var div = '<div class="pagelayer-elp-editor-div">'+
1514
+ '<textarea class="pagelayer-elp-editor">'+prop.c['val']+'</textarea>'+
1515
+ '</div>';
1516
+
1517
+ row.append(div);
1518
+
1519
+ var editor = row.find('.pagelayer-elp-editor');
1520
+
1521
+ // No SVG Icons for now
1522
+ //jQuery.trumbowyg.svgPath = false;
1523
+
1524
+ // Initiate the editor
1525
+ editor.trumbowyg({
1526
+ autogrow: false,
1527
+ btns:[
1528
+ ['viewHTML'],
1529
+ ['fontfamily'],
1530
+ ['formatting'],
1531
+ ['undo', 'redo'], // Only supported in Blink browsers
1532
+ ['fontsize'],
1533
+ ['foreColor', 'backColor',],
1534
+ ['strong', 'em', 'del'],
1535
+ ['superscript', 'subscript'],
1536
+ ['link'],
1537
+ ['wpmedia'],
1538
+ ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
1539
+ ['unorderedList', 'orderedList'],
1540
+ ['horizontalRule'],
1541
+ ['removeformat'],
1542
+ ['fullscreen']
1543
+ ],
1544
+ plugins: {
1545
+ fontsize: {
1546
+ sizeList: ['12px','13px','14px','15px','16px','17px','18px','19px','20px','21px','22px','23px','24px','25px',]
1547
+ }
1548
+ },
1549
+ imageWidthModalEdit: true,
1550
+
1551
+ // Handle the changes made in the editor
1552
+ }).on('tbwchange', function(){
1553
+ _pagelayer_set_atts(row, editor.trumbowyg('html'));// Save and Render
1554
+ });
1555
+
1556
+ }
1557
+
1558
+ // The Link proprety
1559
+ function pagelayer_elp_link(row, prop){
1560
+
1561
+ // TODO : Implement pagelayer-elp-link-icon
1562
+ var div = '<div class="pagelayer-elp-link-div pagelayer-elp-input-icon">'+
1563
+ '<input class="pagelayer-elp-link" type="text" value="'+prop.c['val']+'" />'+
1564
+ '<i class="fa fa-link pagelayer-elp-link-icon" />'+
1565
+ '</div>';
1566
+
1567
+ row.append(div);
1568
+
1569
+ // Set a Link
1570
+ row.find('.pagelayer-elp-link').on('change', function(){
1571
+ _pagelayer_set_atts(row, jQuery(this).val());// Save and Render
1572
+ });
1573
+
1574
+ }
1575
+
1576
+ // The Textarea property
1577
+ function pagelayer_elp_textarea(row, prop){
1578
+
1579
+ var div = '<div class="pagelayer-elp-textarea-div">'+
1580
+ '<textarea class="pagelayer-elp-textarea">'+prop.c['val']+'</textarea>'+
1581
+ '</div>';
1582
+
1583
+ row.append(div);
1584
+
1585
+ // Handle on change
1586
+ row.find('.pagelayer-elp-textarea').on('input', function(){
1587
+ _pagelayer_set_atts(row, pagelayer_trim(jQuery(this).val()));// Save and Render
1588
+ });
1589
+ };
1590
+
1591
+ // Clear all editable
1592
+ function pagelayer_clear_editable(){
1593
+
1594
+ // Destroy all
1595
+ for(var x in pagelayer_editor){
1596
+ pagelayer_editor[x].pen.destroy();
1597
+ pagelayer_editor[x].$.removeClass('pagelayer-pen');
1598
+ }
1599
+
1600
+ };
1601
+
1602
+ // Makes a field editable in the DOM
1603
+ function pagelayer_make_editable(jEle, e){
1604
+
1605
+ // Is it already setup ?
1606
+ if(jEle.hasClass('pagelayer-pen')){
1607
+ //console.log('Already Penned');
1608
+ return true;
1609
+ }
1610
+
1611
+ var prop = jEle.attr('pagelayer-editable');
1612
+
1613
+ // Destroy the existing pen
1614
+ if(!pagelayer_empty(pagelayer_editor[prop])){
1615
+ pagelayer_editor[prop].pen.destroy();
1616
+ pagelayer_editor[prop].$.removeClass('pagelayer-pen');
1617
+ }
1618
+
1619
+ // The parent element
1620
+ var pEle = jEle.closest('.pagelayer-ele');
1621
+
1622
+ var options = {
1623
+ class: 'pagelayer-pen',
1624
+ editor: jEle[0],
1625
+ list: ['bold', 'italic', 'underline', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'strike'],
1626
+ stay: false
1627
+ }
1628
+
1629
+ // Setup the editor
1630
+ pagelayer_editor[prop] = {};
1631
+ pagelayer_editor[prop].pen = new Pen(options);
1632
+ pagelayer_editor[prop].$ = jEle;
1633
+
1634
+ // Are we the clicked object, then set the focus
1635
+ if(e){
1636
+ var target = jQuery(e.target);
1637
+ if(target.is(jEle).length || jEle.find(target).length){
1638
+ jEle.focus();
1639
+ }
1640
+ }
1641
+
1642
+ // Reverse setup the event
1643
+ jEle.on('blur', function(){
1644
+ //pagelayer_editor[prop].pen.destroy();
1645
+ });
1646
+
1647
+ // Reverse setup the event
1648
+ jEle.on('focus', function(){
1649
+ jQuery('.pagelayer-pen-menu').hide();
1650
+ pagelayer_editor[prop].pen.rebuild();
1651
+ });
1652
+
1653
+ // Reverse setup the event
1654
+ jEle.on('input', function(){
1655
+
1656
+ var val = pagelayer_trim(jEle.html());
1657
+
1658
+ // Set the property as well
1659
+ pagelayer_set_atts(pEle, prop, val);
1660
+
1661
+ // Update the property
1662
+ var input = pagelayer.$$('[pagelayer-elp-name='+prop+']').find('input,textarea,.trumbowyg-editor');
1663
+ //console.log(input);
1664
+
1665
+ if(input.length > 0){
1666
+ if(input.hasClass('trumbowyg-editor')){
1667
+ input.html(val);
1668
+ }else{
1669
+ input.val(val);
1670
+ }
1671
+ }
1672
+
1673
+ });
1674
+
1675
+ }
1676
+
1677
+ // The Icon Property
1678
+ function pagelayer_elp_icon(row, prop){
1679
+
1680
+ var $ = jQuery;
1681
+
1682
+ // Find the available icons
1683
+ if(pagelayer_empty(pagelayer_icons)){
1684
+
1685
+ pagelayer_icons = $.map($.map(document.styleSheets, function(s){
1686
+
1687
+ if(s.href && s.href.match(/font\-awesome\.min\.css/)){
1688
+ return s;
1689
+ }
1690
+ return null;
1691
+
1692
+ })[0].cssRules, function(r) {
1693
+
1694
+ if(r.cssText.indexOf('::before { content: ') > 0){
1695
+ return r.cssText.substring(4,r.cssText.indexOf('::'));
1696
+ }
1697
+ return null;
1698
+
1699
+ });
1700
+
1701
+ }
1702
+
1703
+ var icons = pagelayer_icons;
1704
+ //console.log(icons);
1705
+
1706
+ if('list' in prop && prop.list.length > 0){
1707
+ icons = prop.list;
1708
+ }
1709
+
1710
+ // Icon function
1711
+ var icon_html = function(name){
1712
+ return '<span class="pagelayer-elp-icon-span">'+
1713
+ '<i class="fa fa-'+name+'" icon="fa fa-'+name+'" /> '+name+
1714
+ '</span>';
1715
+ }
1716
+
1717
+ var div = '<div class="pagelayer-elp-icon-div">'+
1718
+ '<div class="pagelayer-elp-icon-preview">'+
1719
+ '<i class="fa fa-'+prop.c['val']+'"></i>'+
1720
+ '<span class="pagelayer-elp-icon-name">'+
1721
+ (pagelayer_empty(prop.c['val'])?'Choose icon':prop.c['val'])+
1722
+ '</span>'+
1723
+ '</div>'+
1724
+ '<span class="pagelayer-elp-icon-open">▼</span>'+
1725
+ '</div>';
1726
+
1727
+ row.append(div);
1728
+
1729
+ // Make all icons list
1730
+ var html = '<div class="pagelayer-elp-icon-selector">'+
1731
+ '<input type="text" class="pagelayer-elp-search-icon" name="search-icon" placeholder="'+pagelayer_l('search')+'">'+
1732
+ '<div class="pagelayer-elp-icon-list">';
1733
+
1734
+ for(var x in icons){
1735
+ html += icon_html(icons[x]);
1736
+ }
1737
+
1738
+ html += '</div>'+
1739
+ '</div>';
1740
+
1741
+ row.append(html);
1742
+
1743
+ // Open the selector
1744
+ row.find('.pagelayer-elp-icon-div').on('click', function(){
1745
+ row.find('.pagelayer-elp-icon-selector').slideToggle();
1746
+ });
1747
+
1748
+ // Handle search of icon
1749
+ row.find('.pagelayer-elp-search-icon').on('keyup', function(){
1750
+
1751
+ var v = this.value;
1752
+ var span ='';
1753
+ v = v.toLowerCase();
1754
+ v = v.replace(/\s+/g, '-');
1755
+
1756
+ for(var x in icons){
1757
+ if(icons[x].substring(0, v.length) === v){
1758
+ span += icon_html(icons[x]);
1759
+ }
1760
+ }
1761
+
1762
+ row.find('.pagelayer-elp-icon-list').empty().html(span);
1763
+
1764
+ });
1765
+
1766
+ // Handle click within the icon selector
1767
+ row.find('.pagelayer-elp-icon-selector').on('click', function(e){
1768
+
1769
+ var jEle = jQuery(e.target);
1770
+ var i = jEle.children().attr('icon');
1771
+ if(pagelayer_empty(i)){
1772
+ return false;
1773
+ }
1774
+
1775
+ i = i.replace('fa fa-', '');
1776
+
1777
+ // Set the icon in this list
1778
+ row.find('.pagelayer-elp-icon-preview').html('<i class="fa fa-'+i+'"></i><span class="pagelayer-elp-icon-name">'+i+'</span>');
1779
+ row.find('.pagelayer-elp-icon-selector').slideUp();
1780
+
1781
+ _pagelayer_set_atts(row, i);// Save and Render
1782
+
1783
+ return false;
1784
+
1785
+ });
1786
+
1787
+ }
1788
+
1789
+ // The Color Property
1790
+ function pagelayer_elp_color(row, prop){
1791
+
1792
+ var div = '<div class="pagelayer-elp-color-div">'+
1793
+ '<div class="pagelayer-elp-color-preview"></div>'+
1794
+ '</div>';
1795
+
1796
+ row.append(div);
1797
+
1798
+ row.find('.pagelayer-elp-color-preview').css('background', prop.c['val']);
1799
+
1800
+ var picker = new Picker({
1801
+ parent : row.find('.pagelayer-elp-color-div')[0],
1802
+ popup : 'left',
1803
+ color : prop.c['val'],
1804
+ doc: window.parent.document
1805
+ });
1806
+
1807
+ // Handle selected color
1808
+ picker.onChange = function(color) {
1809
+ row.find('.pagelayer-elp-color-preview').css('background', color.rgbaString);
1810
+ _pagelayer_set_atts(row, color.hex);// Save and Render
1811
+ };
1812
+
1813
+ }
1814
+
1815
+ // The Spinner property
1816
+ function pagelayer_elp_spinner(row, prop){
1817
+
1818
+ var div = '<div class="pagelayer-elp-spinner-div">'+
1819
+ '<input type="number" class="pagelayer-elp-spinner" name="'+prop.c['name']+'"'+
1820
+ ' min="'+prop['min']+'" max="'+prop['max']+'" step="'+prop['step']+'" value="'+prop.c['val']+'"/>'+
1821
+ '</div>';
1822
+
1823
+ row.append(div);
1824
+
1825
+ row.find('input').on('input', function(){
1826
+ _pagelayer_set_atts(row, jQuery(this).val());// Save and Render
1827
+ });
1828
+
1829
+ }
1830
+
1831
+ // The Group Property
1832
+ function pagelayer_elp_group(row, prop){
1833
+
1834
+ // Remove the pagelayer-show-tab
1835
+ row.removeAttr('pagelayer-show-tab');
1836
+
1837
+ var div = '<div class="pagelayer-elp-group-div"></div>'+
1838
+ '<center><button class="pagelayer-elp-button">'+prop['text']+'</button></center>';
1839
+
1840
+ row.append(div);
1841
+
1842
+ // Add button
1843
+ var add_item = function(row){
1844
+
1845
+ var ele_id = row.closest('[pagelayer-element-id]').attr('pagelayer-element-id') || '';
1846
+ var pEle = jQuery('[pagelayer-id="'+ele_id+'"]');
1847
+
1848
+ // First add the element inside the group element
1849
+ var id = pagelayer_element_add_child(pEle, prop['sc']);
1850
+ //pagelayer_element_setup('[pagelayer-id='+id+']', true);
1851
+
1852
+ show_item(id);
1853
+
1854
+ };
1855
+
1856
+ // Show the properties of the existing things
1857
+ var show_item = function(id, sel){
1858
+
1859
+ // To append after an existing item
1860
+ sel = sel || false;
1861
+
1862
+ // If pagelayer id empty then return
1863
+ if(pagelayer_empty(id)){
1864
+ return false;
1865
+ }
1866
+
1867
+ // Since the element is added very fast, we reselect via jQuery for it to re-access the dom
1868
+ jEle = jQuery('[pagelayer-id="'+id+'"]');
1869
+
1870
+ var label_param = prop['item_label']['param'] || '';
1871
+ var title = pagelayer_get_att(jEle, label_param) || prop['item_label']['default'];
1872
+
1873
+ // We need to get the correct value for select based params which are the label
1874
+ var child_props = pagelayer_shortcodes[prop.sc];
1875
+ for(var section in child_props){
1876
+ for(var _param in child_props[section]){
1877
+ if(child_props[section][_param]['type'] == 'select'){
1878
+ if(title in child_props[section][_param]['list']){
1879
+ title = child_props[section][_param]['list'][title];
1880
+ }
1881
+ }
1882
+ }
1883
+ }
1884
+
1885
+ // Create the HTML
1886
+ var holder = jQuery('<div class="pagelayer-elp-group-item" pagelayer-group-item-id="'+id+'">'+
1887
+ '<div class="pagelayer-elp-group-item-head">'+
1888
+ '<span class="pagelayer-elp-group-item-drag"><i class="fa fa-bars" /></span>'+
1889
+ '<span class="pagelayer-elp-group-item-title">'+title+'</span>'+
1890
+ '<span class="pagelayer-elp-group-item-clone"><i class="fa fa-clone" /></span>'+
1891
+ '<span class="pagelayer-elp-group-item-del"><i class="fa fa-trash" /></span>'+
1892
+ '</div>'+
1893
+ '<div class="pagelayer-elp-group-item-body"></div>'+
1894
+ '</div>');
1895
+
1896
+ // Append to the row
1897
+ if(sel){
1898
+ row.find(sel).after(holder);
1899
+ }else{
1900
+ row.find('.pagelayer-elp-group-div').first().append(holder);
1901
+ }
1902
+
1903
+ // Setup the toggle
1904
+ holder.find('.pagelayer-elp-group-item-title').first().on('click', function(){
1905
+ var rEle = holder.find('.pagelayer-elp-group-item-body').first();
1906
+ var r_id = holder.attr('pagelayer-group-item-id');
1907
+
1908
+ // If the props are not already setup
1909
+ if(rEle.html().length < 1){
1910
+
1911
+ pagelayer_elpd_generate(jQuery('[pagelayer-id="'+r_id+'"]'), rEle);
1912
+
1913
+ // Change the group item title
1914
+ var tmp_title = holder.find('[pagelayer-elp-name="'+label_param+'"] [name="'+label_param+'"]');
1915
+
1916
+ if(tmp_title.length > 0){
1917
+ jQuery(tmp_title).on('input', function(){
1918
+ holder.find('.pagelayer-elp-group-item-title').html(tmp_title.val());
1919
+ });
1920
+ }
1921
+
1922
+ }
1923
+
1924
+ rEle.toggle('slow');
1925
+ });
1926
+
1927
+ // Clone the item
1928
+ holder.find('.pagelayer-elp-group-item-head .fa-clone').on('click', function(){
1929
+
1930
+ // If the element have any parent
1931
+ var jEle = jQuery('[pagelayer-id="'+id+'"]');
1932
+ var par = pagelayer_get_parent(jEle);
1933
+ var clone_ele = pagelayer_copy_element(jEle);
1934
+ //console.log(clone_ele);console.log('[pagelayer-group-item-id="'+id+'"]');
1935
+ show_item(clone_ele, '[pagelayer-group-item-id="'+id+'"]');
1936
+
1937
+ if(par){
1938
+ pagelayer_sc_render(pagelayer_ele_by_id(par));
1939
+ }
1940
+ });
1941
+
1942
+ // Delete the item
1943
+ holder.find('.pagelayer-elp-group-item-head .fa-trash').on('click', function(){
1944
+
1945
+ // If the element have any parent
1946
+ var jEle = jQuery('[pagelayer-id="'+id+'"]');
1947
+ var par = pagelayer_get_parent(jEle);
1948
+ holder.remove();
1949
+ pagelayer_delete_element(jEle);
1950
+
1951
+ if(par){
1952
+ pagelayer_sc_render(pagelayer_ele_by_id(par));
1953
+ }
1954
+ });
1955
+
1956
+ };
1957
+
1958
+ // Handle click of the group
1959
+ row.find('.pagelayer-elp-button').on('click', function(){
1960
+ add_item(row);
1961
+ });
1962
+
1963
+ // Find the existing items
1964
+ prop.el.$.find('[pagelayer-tag='+prop['sc']+']').each(function(){
1965
+ var jEle = jQuery(this);
1966
+ var id = pagelayer_assign_id(jEle);
1967
+ show_item(id);
1968
+ });
1969
+ };
1970
+
1971
+ // The Datetime Property
1972
+ function pagelayer_elp_datetime(row, prop){
1973
+
1974
+ var div = '<div class="pagelayer-elp-datetime-div pagelayer-elp-input-icon">'+
1975
+ '<input type="date" class="pagelayer-elp-datetime" name="'+prop.c['name']+'" value="'+prop.c['val']+'" />'+
1976
+ '</div>';
1977
+
1978
+ row.append(div);
1979
+
1980
+ row.find('.pagelayer-elp-datetime').on('change', function(){
1981
+ _pagelayer_set_atts(row, jQuery(this).val());// Save and Render
1982
+ });
1983
+
1984
+ };
1985
+
1986
+ // The padding property
1987
+ function pagelayer_elp_padding(row, prop){
1988
+ var val = ['', '', '', ''];
1989
+
1990
+ if(prop.c['val'].length > 0){
1991
+ val = prop.c['val'].split(',');
1992
+ //console.log(val)
1993
+ }
1994
+
1995
+ var div = '<div class="pagelayer-elp-padding-div">'+
1996
+ '<input type="number" class="pagelayer-elp-padding" value="'+parseInt(val[0])+'"></input>'+
1997
+ '<input type="number" class="pagelayer-elp-padding" value="'+parseInt(val[1])+'"></input>'+
1998
+ '<input type="number" class="pagelayer-elp-padding" value="'+parseInt(val[2])+'"></input>'+
1999
+ '<input type="number" class="pagelayer-elp-padding" value="'+parseInt(val[3])+'"></input>'+
2000
+ '<i class="fa fa-link" />'+
2001
+ '</div>';
2002
+
2003
+ row.append(div);
2004
+
2005
+ // Is the value linked ?
2006
+ var link = row.find('.pagelayer-elp-padding-div .fa');
2007
+ var isLinked = 1;
2008
+ //isLinked = isLinked == 2 ? false : true;
2009
+ //console.log(isLinked);
2010
+ var tmp_val = val[0];
2011
+
2012
+ for(var p_val in val){
2013
+
2014
+ // Check if unlinked
2015
+ if(tmp_val != val[p_val] ){
2016
+ isLinked = 0;
2017
+ }
2018
+ tmp_val = val[p_val];
2019
+ }
2020
+
2021
+ if(isLinked){
2022
+ link.addClass('pagelayer-elp-padding-linked');
2023
+ }else{
2024
+ link.removeClass('pagelayer-elp-padding-linked');
2025
+ }
2026
+
2027
+ // Handle link on click
2028
+ link.on('click', function(){
2029
+
2030
+ var linked = link.hasClass('pagelayer-elp-padding-linked');
2031
+
2032
+ if(linked){
2033
+ link.removeClass('pagelayer-elp-padding-linked');
2034
+ }else{
2035
+ link.addClass('pagelayer-elp-padding-linked');
2036
+ }
2037
+
2038
+ });
2039
+
2040
+ row.find('input').on('input', function(){
2041
+
2042
+ // Are the values linked
2043
+ var linked = row.find('.pagelayer-elp-padding-div .fa').hasClass('pagelayer-elp-padding-linked');
2044
+
2045
+ if(linked){
2046
+ var val = jQuery(this).val();
2047
+ row.find('input').each(function(){
2048
+ jQuery(this).val(val);
2049
+ });
2050
+ }
2051
+
2052
+ var vals = [];
2053
+
2054
+ // Get all values
2055
+ row.find('input').each(function(){
2056
+ var val = jQuery(this).val();
2057
+ vals.push(val ? val : 0);
2058
+ });
2059
+
2060
+ _pagelayer_set_atts(row, vals);// Save and Render
2061
+ });
2062
+
2063
+ };
2064
+
2065
+ // The shadow property
2066
+ function pagelayer_elp_shadow(row, prop){
2067
+
2068
+ var val =['','','',''];
2069
+
2070
+ // Do we have a val ?
2071
+ if(!pagelayer_empty(prop.c['val'])){
2072
+ val = prop.c['val'].split(',');
2073
+ }
2074
+
2075
+ //var val = {color: '', blur: '', horizontal: '', vertical: ''};
2076
+
2077
+ var div = '<span class="pagelayer-prop-edit"><i class="fa fa-pencil"></i></span>'+
2078
+ '<div class="pagelayer-elp-shadow-div">'+
2079
+ '<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-horizontal">'+
2080
+ '<label class="pagelayer-elp-label">Horizontal</label>'+
2081
+ '<input class="pagelayer-elp-shadow-input" type="number" max="100" min="-100" step="1" class="pagelayer-elp-shadow-blur" value="'+val[0]+'"></input>'+
2082
+ '</div>'+
2083
+ '<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-vertical">'+
2084
+ '<label class="pagelayer-elp-label">Vertical</label>'+
2085
+ '<input class="pagelayer-elp-shadow-input" type="number" max="100" min="-100" step="1" class="pagelayer-elp-shadow-blur" value="'+val[1]+'"></input>'+
2086
+ '</div>'+
2087
+ '<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-blur">'+
2088
+ '<label class="pagelayer-elp-label">Blur</label>'+
2089
+ '<input class="pagelayer-elp-shadow-input" type="number" max="100" min="0" step="1" class="pagelayer-elp-shadow-blur" value="'+val[2]+'"></input>'+
2090
+ '</div>'+
2091
+ '<div class="pagelayer-elp-prop-grp pagelayer-elp-shadow-color">'+
2092
+ '<label class="pagelayer-elp-label">color</label>'+
2093
+ '<div class="pagelayer-elp-color-div">'+
2094
+ '<div class="pagelayer-elp-color-preview"></div>'+
2095
+ '</div>'+
2096
+ '</div>'+
2097
+ '</div>';
2098
+
2099
+ row.append(div);
2100
+
2101
+ row.find('.pagelayer-prop-edit').on('click', function(){
2102
+ row.find('.pagelayer-elp-shadow-div').toggleClass('pagelayer-prop-show');
2103
+ });
2104
+
2105
+ row.find('.pagelayer-elp-color-preview').css('background', val[3]);
2106
+
2107
+ var picker = new Picker({
2108
+ parent : row.find('.pagelayer-elp-color-div')[0],
2109
+ popup : 'left',
2110
+ doc: window.parent.document
2111
+ });
2112
+
2113
+ // Handle selected color
2114
+ picker.onChange = function(color) {
2115
+ row.find('.pagelayer-elp-color-preview').css('background', color.rgbaString);
2116
+ val[3] = (color.hex ? color.hex : '');
2117
+ _pagelayer_set_atts(row, val);
2118
+ };
2119
+
2120
+ row.find('input').on('input', function(){
2121
+ var i = 0;
2122
+ row.find('.pagelayer-elp-shadow-input').each(function(){
2123
+ var value = jQuery(this).val();
2124
+ val[i] = (value ? value : '');
2125
+ i++;
2126
+ });
2127
+ _pagelayer_set_atts(row, val);
2128
+ });
2129
+
2130
+ }
2131
+
2132
+ // The filter property
2133
+ function pagelayer_elp_filter(row, prop){
2134
+
2135
+ var val =['','','','','','',''];
2136
+
2137
+ // Do we have a val ?
2138
+ if(!pagelayer_empty(prop.c['val'])){
2139
+ val = prop.c['val'].split(',');
2140
+ }
2141
+
2142
+ var filters = [['blur','10','0.1'],['brightness','200','1'],['contrast','200','1'],['grayscale','200','1'],['hue','360','1'],['opacity','100','1'],['saturate','200','1']];
2143
+
2144
+ var div = '<span class="pagelayer-prop-edit"><i class="fa fa-pencil"></i></span>'+
2145
+ '<div class="pagelayer-elp-filter-div">';
2146
+
2147
+ jQuery.each(val,function(key, value){
2148
+ div += '<div class="pagelayer-elp-prop-grp pagelayer-elp-filter-'+filters[key][0]+'">'+
2149
+ '<label class="pagelayer-elp-label">'+filters[key][0]+'</label>'+
2150
+ '<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>'+
2151
+ '<span class="pagelayer-elp-filter-val">'+value+'</span>'+
2152
+ '</div>';
2153
+ });
2154
+
2155
+ div += '</div>';
2156
+
2157
+ row.append(div);
2158
+
2159
+ row.find('.pagelayer-prop-edit').on('click', function(){
2160
+ row.find('.pagelayer-elp-filter-div').toggleClass('pagelayer-prop-show');
2161
+ });
2162
+
2163
+ row.find('input').on('input', function(){
2164
+ var val = [];
2165
+ jQuery(this).parent().find('span').html(this.value);
2166
+ row.find('.pagelayer-elp-filter-input').each(function(){
2167
+ var value = jQuery(this).val();
2168
+ val.push(value ? value : 'none');
2169
+ });
2170
+ _pagelayer_set_atts(row, val);
2171
+ });
2172
+
2173
+ }
2174
+
2175
+ // The gradient property
2176
+ function pagelayer_elp_gradient(row, prop){
2177
+
2178
+ var val =['','','','','','',''];
2179
+
2180
+ // Do we have a val ?
2181
+ if(!pagelayer_empty(prop.c['val'])){
2182
+ val = prop.c['val'].split(',');
2183
+ }
2184
+
2185
+ //var val = {color: '', blur: '', horizontal: '', vertical: ''};
2186
+
2187
+ var div = '<div class="pagelayer-elp-gradient-div">'+
2188
+ '<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-angle">'+
2189
+ '<label class="pagelayer-elp-label">Angle</label>'+
2190
+ '<input class="pagelayer-elp-gradient-input" type="number" max="360" min="0" step="1" class="pagelayer-elp-gradient-angle" value="'+val[0]+'"></input>'+
2191
+ '</div>'+
2192
+ '<div class="pagelayer-elp-prop-grp">'+
2193
+ '<label class="pagelayer-elp-label">color 1</label>'+
2194
+ '<div class="pagelayer-elp-color-div">'+
2195
+ '<div class="pagelayer-elp-gradient-color1 pagelayer-elp-color-preview"></div>'+
2196
+ '</div>'+
2197
+ '</div>'+
2198
+ '<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-per1">'+
2199
+ '<label class="pagelayer-elp-label">Percentage 1</label>'+
2200
+ '<input class="pagelayer-elp-gradient-input" type="number" max="100" min="-100" step="1" class="pagelayer-elp-gradient-per1" value="'+val[2]+'"></input>'+
2201
+ '</div>'+
2202
+ '<div class="pagelayer-elp-prop-grp">'+
2203
+ '<label class="pagelayer-elp-label">color 2</label>'+
2204
+ '<div class="pagelayer-elp-color-div">'+
2205
+ '<div class="pagelayer-elp-gradient-color2 pagelayer-elp-color-preview"></div>'+
2206
+ '</div>'+
2207
+ '</div>'+
2208
+ '<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-per2">'+
2209
+ '<label class="pagelayer-elp-label">Percentage 2</label>'+
2210
+ '<input class="pagelayer-elp-gradient-input" type="number" max="100" min="0" step="1" class="pagelayer-elp-gradient-per2" value="'+val[4]+'"></input>'+
2211
+ '</div>'+
2212
+ '<div class="pagelayer-elp-prop-grp">'+
2213
+ '<label class="pagelayer-elp-label">color 3</label>'+
2214
+ '<div class="pagelayer-elp-color-div">'+
2215
+ '<div class="pagelayer-elp-gradient-color3 pagelayer-elp-color-preview"></div>'+
2216
+ '</div>'+
2217
+ '</div>'+
2218
+ '<div class="pagelayer-elp-prop-grp pagelayer-elp-gradient-per3">'+
2219
+ '<label class="pagelayer-elp-label">Percentage 3</label>'+
2220
+ '<input class="pagelayer-elp-gradient-input" type="number" max="100" min="0" step="1" class="pagelayer-elp-gradient-per3" value="'+val[6]+'"></input>'+
2221
+ '</div>'+
2222
+ '</div>';
2223
+
2224
+ row.append(div);
2225
+ var i = 1;
2226
+ row.find('.pagelayer-elp-color-preview').each(function(){
2227
+ jQuery(this).css('background', val[i]);
2228
+ i = i+2;
2229
+ });
2230
+
2231
+ var picker1 = new Picker({
2232
+ parent : row.find('.pagelayer-elp-gradient-color1')[0],
2233
+ popup : 'left',
2234
+ color : val[1],
2235
+ doc: window.parent.document
2236
+ });
2237
+
2238
+ // Handle selected color
2239
+ picker1.onChange = function(color) {
2240
+ row.find('.pagelayer-elp-gradient-color1').css('background', color.rgbaString);
2241
+ val[1] = (color.hex ? color.hex : '');
2242
+ _pagelayer_set_atts(row, val);
2243
+ };
2244
+
2245
+ var picker2 = new Picker({
2246
+ parent : row.find('.pagelayer-elp-gradient-color2')[0],
2247
+ popup : 'left',
2248
+ color : val[3],
2249
+ doc: window.parent.document
2250
+ });
2251
+
2252
+ // Handle selected color
2253
+ picker2.onChange = function(color) {
2254
+ row.find('.pagelayer-elp-gradient-color2').css('background', color.rgbaString);
2255
+ val[3] = (color.hex ? color.hex : '');
2256
+ _pagelayer_set_atts(row, val);
2257
+ };
2258
+
2259
+ var picker3 = new Picker({
2260
+ parent : row.find('.pagelayer-elp-gradient-color3')[0],
2261
+ popup : 'left',
2262
+ color : val[5],
2263
+ doc: window.parent.document
2264
+ });
2265
+
2266
+ // Handle selected color
2267
+ picker3.onChange = function(color) {
2268
+ row.find('.pagelayer-elp-gradient-color3').css('background', color.rgbaString);
2269
+ val[5] = (color.hex ? color.hex : '');
2270
+ _pagelayer_set_atts(row, val);
2271
+ };
2272
+
2273
+ row.find('input').on('input', function(){
2274
+ var i = 0;
2275
+ row.find('.pagelayer-elp-gradient-input').each(function(){
2276
+ var value = jQuery(this).val();
2277
+ val[i] = (value ? value : '');
2278
+ i = i+2;
2279
+ });
2280
+ _pagelayer_set_atts(row, val);
2281
+ });
2282
+
2283
+ }
2284
+
2285
+ // The typography property
2286
+ function pagelayer_elp_typography(row, prop){
2287
+
2288
+ var val =['','','','','','','','','',''];
2289
+
2290
+ // Do we have a val ?
2291
+ if(!pagelayer_empty(prop.c['val'])){
2292
+ val = prop.c['val'].split(',');
2293
+ }
2294
+
2295
+ var select = { 'style' : ['', 'Normal', 'Italic', 'Oblique'],
2296
+ 'weight' : ['', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
2297
+ 'variant' : ['', 'Normal', 'Small-caps'],
2298
+ 'deco-line' : ['', 'None', 'Overline', 'Line-through', 'Underline', 'Underline Overline'],
2299
+ 'deco-style' : ['Solid', 'Double', 'Dotted', 'Dashed', 'Wavy'],
2300
+ 'transform' : ['', 'Capitalize', 'Uppercase', 'Lowercase'],
2301
+ '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']
2302
+ }
2303
+
2304
+ var option = function(val, setVal){
2305
+ var selected = (val != setVal) ? '' : 'selected="selected"';
2306
+ var lang = pagelayer_empty(val) ? 'Default' : val;
2307
+ return '<option value="'+val+'" '+selected+'>'+ lang +'</option>';
2308
+ }
2309
+
2310
+ var font_option = function(val, setVal){
2311
+ var selected = (val != setVal) ? '' : 'selected="selected"';
2312
+ var lang = pagelayer_empty(val) ? 'Default' : val;
2313
+ return '<option style="font-family:'+lang+'" value="'+val+'" '+selected+'>'+ lang +'</option>';
2314
+ }
2315
+
2316
+ var div = '<span class="pagelayer-prop-edit"><i class="fa fa-pencil"></i></span>'+
2317
+ '<div class="pagelayer-elp-typo-div">'+
2318
+ '<div class="pagelayer-elp-typo pagelayer-elp-typo-fonts">'+
2319
+ '<label class="pagelayer-elp-label">Font-Family</label>'+
2320
+ '<select class="pagelayer-elp-typo-input">';
2321
+
2322
+ jQuery.each(select['fonts'],function(key, value){
2323
+ div += font_option(value, val[0]);
2324
+ });
2325
+ div +='</select>'+
2326
+ '</div>'+
2327
+ '<div class="pagelayer-elp-typo pagelayer-elp-typo-size">'+
2328
+ '<label class="pagelayer-elp-label">Font-Size</label>'+
2329
+ '<input class="pagelayer-elp-typo-input" type="number" max="200" min="0" step="1" value="'+val[1]+'"></input>'+
2330
+ '</div>'+
2331
+ '<div class="pagelayer-elp-typo pagelayer-elp-typo-style">'+
2332
+ '<label class="pagelayer-elp-label">Font-Style</label>'+
2333
+ '<select class="pagelayer-elp-typo-input">';
2334
+
2335
+ jQuery.each(select['style'],function(key, value){
2336
+ div += option(value, val[2]);
2337
+ });
2338
+ div +='</select>'+
2339
+ '</div>'+
2340
+ '<div class="pagelayer-elp-typo pagelayer-elp-typo-weight">'+
2341
+ '<label class="pagelayer-elp-label">Font-Weight</label>'+
2342
+ '<select class="pagelayer-elp-typo-input">';
2343
+ jQuery.each(select['weight'],function(key, value){
2344
+ div += option(value, val[3]);
2345
+ });
2346
+
2347
+ div += '</select>'+
2348
+ '</div>'+
2349
+ '<div class="pagelayer-elp-typo pagelayer-elp-typo-variant">'+
2350
+ '<label class="pagelayer-elp-label">Font-variant</label>'+
2351
+ '<select class="pagelayer-elp-typo-input">';
2352
+ jQuery.each(select['variant'],function(key, value){
2353
+ div += option(value, val[4]);
2354
+ });
2355
+
2356
+ div += '</select>'+
2357
+ '</div>'+
2358
+ '<div class="pagelayer-elp-typo pagelayer-elp-typo-deco-line">'+
2359
+ '<label class="pagelayer-elp-label">Decoration Line</label>'+
2360
+ '<select class="pagelayer-elp-typo-input">';
2361
+ jQuery.each(select['deco-line'],function(key, value){
2362
+ div += option(value, val[5]);
2363
+ });
2364
+
2365
+ div += '</select>'+
2366
+ '</div>'+
2367
+ '<div class="pagelayer-elp-typo pagelayer-elp-typo-deco-style">'+
2368
+ '<label class="pagelayer-elp-label">Decoration Style</label>'+
2369
+ '<select class="pagelayer-elp-typo-input">';
2370
+ jQuery.each(select['deco-style'],function(key, value){
2371
+ div += option(value, val[6]);
2372
+ });
2373
+
2374
+ div += '</select>'+
2375
+ '</div>'+
2376
+ '<div class="pagelayer-elp-typo pagelayer-elp-typo-height">'+
2377
+ '<label class="pagelayer-elp-label">Line Height</label>'+
2378
+ '<input class="pagelayer-elp-typo-input" type="number" max="15" min="0" step="0.1" value="'+val[7]+'"></input>'+
2379
+ '</div>'+
2380
+ '<div class="pagelayer-elp-typo pagelayer-elp-typo-transform">'+
2381
+ '<label class="pagelayer-elp-label">Text Transform</label>'+
2382
+ '<select class="pagelayer-elp-typo-input">';
2383
+ jQuery.each(select['transform'],function(key, value){
2384
+ div += option(value, val[8]);
2385
+ });
2386
+
2387
+ div += '</select>'+
2388
+ '</div>'+
2389
+ '<div class="pagelayer-elp-typo pagelayer-elp-typo-lspacing">'+
2390
+ '<label class="pagelayer-elp-label">Letter Spacing</label>'+
2391
+ '<input class="pagelayer-elp-typo-input" type="number" max="10" min="-10" step="0.1" value="'+val[9]+'"></input>'+
2392
+ '</div>'+
2393
+ '<div class="pagelayer-elp-typo pagelayer-elp-typo-wspacing">'+
2394
+ '<label class="pagelayer-elp-label">Word Spacing</label>'+
2395
+ '<input class="pagelayer-elp-typo-input" type="number" max="50" min="0" step="1" value="'+val[10]+'"></input>'+
2396
+ '</div>'+
2397
+ '</div>';
2398
+
2399
+ row.append(div);
2400
+
2401
+ if(pagelayer_empty(val[5]) || val[5]=='none'){
2402
+ row.find('.pagelayer-elp-typo-deco-style').hide();
2403
+ }
2404
+
2405
+ row.find('.pagelayer-prop-edit').on('click', function(){
2406
+ row.find('.pagelayer-elp-typo-div').toggleClass('pagelayer-prop-show');
2407
+ });
2408
+
2409
+
2410
+ row.find('.pagelayer-elp-typo-input').on('change', function(){
2411
+ val = [];
2412
+ row.find('.pagelayer-elp-typo-input').each(function(){
2413
+ var value = jQuery(this).val();
2414
+ val.push(value ? value : '');
2415
+ });
2416
+ _pagelayer_set_atts(row, val);
2417
+ });
2418
+
2419
+ row.find('.pagelayer-elp-typo-fonts select').on('change', function(){
2420
+
2421
+ var value = jQuery(this).val();
2422
+ value = value.replace(' ', '+');
2423
+
2424
+ if(jQuery('#pagelayer-google-fonts').length == 0){
2425
+
2426
+ 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">');
2427
+
2428
+ }else{
2429
+
2430
+ var url = jQuery('#pagelayer-google-fonts').attr('href');
2431
+ if(url.indexOf(value) == -1){
2432
+ url = url+'|'+value+':100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i';
2433
+ jQuery('#pagelayer-google-fonts').attr('href', url);
2434
+ }
2435
+
2436
+ }
2437
+
2438
+ });
2439
+
2440
+ row.find('.pagelayer-elp-typo-deco-line select').on('change', function(){
2441
+ var value = jQuery(this).val();
2442
+ if(pagelayer_empty(value) || value=='none'){
2443
+ row.find('.pagelayer-elp-typo-deco-style').hide();
2444
+ }else{
2445
+ row.find('.pagelayer-elp-typo-deco-style').show();
2446
+ }
2447
+ });
2448
+
2449
+ }
2450
+
2451
+ // The dimension property
2452
+ function pagelayer_elp_dimension(row, prop){
2453
+
2454
+ var val = ['', ''];
2455
+
2456
+ if(prop.c['val'].length > 0){
2457
+ val = prop.c['val'].split(',');
2458
+ //console.log(val)
2459
+ }
2460
+
2461
+ var div = '<div class="pagelayer-elp-dimension-div">'+
2462
+ '<input type="number" class="pagelayer-elp-dimension" value="'+parseInt(val[0])+'"></input>'+
2463
+ '<input type="number" class="pagelayer-elp-dimension" value="'+parseInt(val[1])+'"></input>'+
2464
+ '<i class="fa fa-link" />'+
2465
+ '</div>';
2466
+
2467
+ row.append(div);
2468
+
2469
+ // Is the value linked ?
2470
+ var link = row.find('.pagelayer-elp-dimension-div .fa');
2471
+ var isLinked = 1;
2472
+ var tmp_val = val[0];
2473
+
2474
+ for(var p_val in val){
2475
+
2476
+ // Check if unlinked
2477
+ if(tmp_val != val[p_val] ){
2478
+ isLinked = 0;
2479
+ }
2480
+ tmp_val = val[p_val];
2481
+ }
2482
+
2483
+ if(isLinked){
2484
+ link.addClass('pagelayer-elp-dimension-linked');
2485
+ }else{
2486
+ link.removeClass('pagelayer-elp-dimension-linked');
2487
+ }
2488
+
2489
+ // Handle link on click
2490
+ link.on('click', function(){
2491
+
2492
+ var linked = link.hasClass('pagelayer-elp-dimension-linked');
2493
+
2494
+ if(linked){
2495
+ link.removeClass('pagelayer-elp-dimension-linked');
2496
+ }else{
2497
+ link.addClass('pagelayer-elp-dimension-linked');
2498
+ }
2499
+
2500
+ });
2501
+
2502
+ row.find('input').on('input', function(){
2503
+
2504
+ // Are the values linked
2505
+ var linked = row.find('.pagelayer-elp-dimension-div .fa').hasClass('pagelayer-elp-dimension-linked');
2506
+
2507
+ if(linked){
2508
+ var val = jQuery(this).val();
2509
+ row.find('input').each(function(){
2510
+ jQuery(this).val(val);
2511
+ });
2512
+ }
2513
+
2514
+ var vals = [];
2515
+
2516
+ // Get all values
2517
+ row.find('input').each(function(){
2518
+ var val = jQuery(this).val();
2519
+ vals.push(val ? val : 0);
2520
+ });
2521
+
2522
+ _pagelayer_set_atts(row, vals);// Save and Render
2523
+ });
2524
+
2525
+ };
2526
+
2527
+ // Select frame to upload media
2528
+ function pagelayer_select_frame(tag, state){
2529
+
2530
+ var state = state || '';
2531
+ //console.log(state);
2532
+
2533
+ var frame;
2534
+
2535
+ switch(tag){
2536
+
2537
+ // Multi image selection frame
2538
+ case 'multi_image':
2539
+
2540
+ frame = wp.media({
2541
+
2542
+ id: 'pagelayer-wp-multi-image-library',
2543
+ frame: 'post',
2544
+ state: state,
2545
+ title: pagelayer_l('frame_'+tag),
2546
+ multiple: true,
2547
+ library: wp.media.query({type: 'image'}),
2548
+ button: {
2549
+ text: pagelayer_l('insert')
2550
+ },
2551
+
2552
+ });
2553
+
2554
+ break;
2555
+
2556
+ // Media selection frame
2557
+ case 'media':
2558
+
2559
+ frame = wp.media({
2560
+
2561
+ id: 'pagelayer-wp-media-library',
2562
+ frame: 'post',
2563
+ state: 'pagelayer-media',
2564
+ title: pagelayer_l('frame_'+tag),
2565
+ multiple: false,
2566
+ states: [
2567
+ new wp.media.controller.Library({
2568
+ id: 'pagelayer-media',
2569
+ title: pagelayer_l('frame_'+tag),
2570
+ multiple: false,
2571
+ date: true
2572
+ })
2573
+ ],
2574
+ button: {
2575
+ text: pagelayer_l('insert')
2576
+ },
2577
+
2578
+ });
2579
+
2580
+ break;
2581
+
2582
+ //Default frame(for image, video, audio)
2583
+ default:
2584
+
2585
+ frame = wp.media({
2586
+
2587
+ id: 'pagelayer-wp-'+tag+'-library',
2588
+ frame: 'post',
2589
+ state: 'pagelayer-'+tag,
2590
+ title: pagelayer_l('frame_'+tag),
2591
+ multiple: false,
2592
+ library: wp.media.query({type: tag}),
2593
+ states: [
2594
+ new wp.media.controller.Library({
2595
+ id: 'pagelayer-'+tag,
2596
+ title: pagelayer_l('frame_'+tag),
2597
+ library: wp.media.query( { type: tag } ),
2598
+ multiple: false,
2599
+ date: true
2600
+ })
2601
+ ],
2602
+ button: {
2603
+ text: pagelayer_l('insert')
2604
+ },
2605
+
2606
+ });
2607
+
2608
+ break;
2609
+ }
2610
+
2611
+ frame.on({
2612
+ 'menu:render:default': function(view){
2613
+ view.unset('insert');
2614
+ view.unset('gallery');
2615
+ view.unset('featured-image');
2616
+ view.unset('playlist');
2617
+ view.unset('video-playlist');
2618
+ },
2619
+ }, this);
2620
+
2621
+ return frame;
2622
+
2623
+ }
js/trumbowyg.fontsize.min.js ADDED
@@ -0,0 +1 @@
 
1
+ !function(e){"use strict";function t(t){var l=[];if(e.each(t.o.plugins.fontsize.sizeList,function(e,a){t.addBtnDef("fontsize_"+a,{text:'<span style="font-size: '+a+';">'+(t.lang.fontsizes[a]||a)+"</span>",hasIcon:!1,fn:function(){t.execCmd("fontSize",e+1,!0)}}),l.push("fontsize_"+a)}),t.o.plugins.fontsize.allowCustomSize){var a="fontsize_custom",s={fn:function(){t.openModalInsert(t.lang.fontCustomSize.title,{size:{label:t.lang.fontCustomSize.label,value:t.lang.fontCustomSize.value}},function(l){var a=t.range.startContainer.parentElement,s=t.getRangeText();if(e(a).html()===s)e(a).css("font-size",l.size);else{t.range.deleteContents();var o='<span style="font-size: '+l.size+';">'+s+"</span>",n=e(o)[0];t.range.insertNode(n)}return t.saveRange(),!0})},text:'<span style="font-size: medium;">'+t.lang.fontsizes.custom+"</span>",hasIcon:!1};t.addBtnDef(a,s),l.push(a)}return l}e.extend(!0,e.trumbowyg,{langs:{en:{fontsize:"Font size",fontsizes:{"x-small":"Extra small",small:"Small",medium:"Regular",large:"Large","x-large":"Extra large",custom:"Custom"},fontCustomSize:{title:"Custom Font Size",label:"Font Size",value:"48px"}},es:{fontsize:"Tamaño de Fuente",fontsizes:{"x-small":"Extra pequeña",small:"Pegueña",medium:"Regular",large:"Grande","x-large":"Extra Grande",custom:"Customizada"},fontCustomSize:{title:"Tamaño de Fuente Customizada",label:"Tamaño de Fuente",value:"48px"}},da:{fontsize:"Skriftstørrelse",fontsizes:{"x-small":"Ekstra lille",small:"Lille",medium:"Normal",large:"Stor","x-large":"Ekstra stor",custom:"Brugerdefineret"}},fr:{fontsize:"Taille de la police",fontsizes:{"x-small":"Très petit",small:"Petit",medium:"Normal",large:"Grand","x-large":"Très grand",custom:"Taille personnalisée"},fontCustomSize:{title:"Taille de police personnalisée",label:"Taille de la police",value:"48px"}},de:{fontsize:"Font size",fontsizes:{"x-small":"Sehr klein",small:"Klein",medium:"Normal",large:"Groß","x-large":"Sehr groß",custom:"Benutzerdefiniert"},fontCustomSize:{title:"Benutzerdefinierte Schriftgröße",label:"Schriftgröße",value:"48px"}},nl:{fontsize:"Lettergrootte",fontsizes:{"x-small":"Extra klein",small:"Klein",medium:"Normaal",large:"Groot","x-large":"Extra groot",custom:"Tilpasset"}},tr:{fontsize:"Yazı Boyutu",fontsizes:{"x-small":"Çok Küçük",small:"Küçük",medium:"Normal",large:"Büyük","x-large":"Çok Büyük",custom:"Görenek"}},zh_tw:{fontsize:"字體大小",fontsizes:{"x-small":"最小",small:"小",medium:"中",large:"大","x-large":"最大",custom:"自訂大小"},fontCustomSize:{title:"自訂義字體大小",label:"字體大小",value:"48px"}},pt_br:{fontsize:"Tamanho da fonte",fontsizes:{"x-small":"Extra pequeno",small:"Pequeno",regular:"Médio",large:"Grande","x-large":"Extra grande",custom:"Personalizado"},fontCustomSize:{title:"Tamanho de Fonte Personalizado",label:"Tamanho de Fonte",value:"48px"}},it:{fontsize:"Dimensioni del testo",fontsizes:{"x-small":"Molto piccolo",small:"piccolo",regular:"normale",large:"grande","x-large":"Molto grande",custom:"Personalizzato"},fontCustomSize:{title:"Dimensioni del testo personalizzato",label:"Dimensioni del testo",value:"48px"}},ko:{fontsize:"글꼴 크기",fontsizes:{"x-small":"아주 작게",small:"작게",medium:"보통",large:"크게","x-large":"아주 크게",custom:"사용자 지정"},fontCustomSize:{title:"사용자 지정 글꼴 크기",label:"글꼴 크기",value:"48px"}}}});var l={sizeList:["x-small","small","medium","large","x-large"],allowCustomSize:!0};e.extend(!0,e.trumbowyg,{plugins:{fontsize:{init:function(a){a.o.plugins.fontsize=e.extend({},l,a.o.plugins.fontsize||{}),a.addBtnDef("fontsize",{dropdown:t(a)})}}}})}(jQuery);
languages/en.json CHANGED
@@ -902,7 +902,7 @@
902
  "shortcodes_paste_code": "Shortcode",
903
  "google_map_address_label": "Address",
904
  "google_map_address_desc": "To find a specific address or location, just enter what you're looking for and press Enter",
905
- "google_map_noscroll": "Scroll",
906
  "google_map_zoom_label": "Zoom",
907
  "google_map_height": "Height",
908
  "testimonial": "Testimonial",
@@ -1561,5 +1561,27 @@
1561
  "animation_in" : "Animation In",
1562
  "animation_out" : "Animation Out",
1563
  "autoheight" : "Auto Height",
1564
- "current_user_can_not" : "You do not have edit permissions"
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1565
  }
902
  "shortcodes_paste_code": "Shortcode",
903
  "google_map_address_label": "Address",
904
  "google_map_address_desc": "To find a specific address or location, just enter what you're looking for and press Enter",
905
+ "google_map_noscroll": "Deactivate Scroll",
906
  "google_map_zoom_label": "Zoom",
907
  "google_map_height": "Height",
908
  "testimonial": "Testimonial",
1561
  "animation_in" : "Animation In",
1562
  "animation_out" : "Animation Out",
1563
  "autoheight" : "Auto Height",
1564
+ "current_user_can_not" : "You do not have edit permissions",
1565
+ "post_setting_update_success" : "Post settings updated successfully",
1566
+ "post_setting_update_err" : "Unable to update the Post settings for some reason",
1567
+ "woo_menu_cart" : "WooCommerce Cart",
1568
+ "cart" : "Cart",
1569
+ "bag" : "Bag",
1570
+ "basket" : "Basket",
1571
+ "items_indicator" : "Items Indicator",
1572
+ "bubble" : "Bubble",
1573
+ "plain" : "Plain",
1574
+ "empty_indicator" : "Hide Empty Indicator",
1575
+ "sub_total" : "Sub Total",
1576
+ "hide_sub_total" : "Hide Sub Total",
1577
+ "product_title" : "Product Title",
1578
+ "remove_items" : "Remove Items",
1579
+ "mini_cart_style" : "Mini Cart Style",
1580
+ "buttons_style" : "Buttons Style",
1581
+ "cart_icon_color" : "Icon Color",
1582
+ "container_close_size" : "Container Close Size",
1583
+ "container_position" : "Container Position",
1584
+ "fixed_right" : "Fixed On Right",
1585
+ "fixed_left" : "Fixed On Left",
1586
+ "container_style" : "Container Style"
1587
  }
main/ajax.php CHANGED
@@ -1019,7 +1019,7 @@ function pagelayer_product_archives(){
1019
  $type = 'pagelayer_current_query';
1020
 
1021
  // Set the current query
1022
- add_action( 'woocommerce_shortcode_products_query', 'pagelayer_shortcode_current_query_query', 10, 10);
1023
 
1024
  // If product not found
1025
  add_action( "woocommerce_shortcode_{$type}_loop_no_results", function ($attributes) use ($no_found){
@@ -1077,7 +1077,7 @@ function pagelayer_products_ajax(){
1077
  $type = 'pagelayer_current_query';
1078
 
1079
  // Set the current query
1080
- add_action( 'woocommerce_shortcode_products_query', 'pagelayer_shortcode_current_query_query', 10, 10);
1081
 
1082
  // If product not found
1083
  add_action( "woocommerce_shortcode_{$type}_loop_no_results", function ($attributes) use ($no_found){
@@ -1208,9 +1208,9 @@ function pagelayer_save_settings(){
1208
  $ret = wp_update_post($post);
1209
 
1210
  if (is_wp_error($ret)) {
1211
- $msg['error'] = __pl('post_update_err');
1212
  }else{
1213
- $msg['success'] = __pl('post_update_success');
1214
  }
1215
  }
1216
 
1019
  $type = 'pagelayer_current_query';
1020
 
1021
  // Set the current query
1022
+ add_action( 'woocommerce_shortcode_products_query', 'pagelayer_shortcode_current_query', 10, 10);
1023
 
1024
  // If product not found
1025
  add_action( "woocommerce_shortcode_{$type}_loop_no_results", function ($attributes) use ($no_found){
1077
  $type = 'pagelayer_current_query';
1078
 
1079
  // Set the current query
1080
+ add_action( 'woocommerce_shortcode_products_query', 'pagelayer_shortcode_current_query', 10, 10);
1081
 
1082
  // If product not found
1083
  add_action( "woocommerce_shortcode_{$type}_loop_no_results", function ($attributes) use ($no_found){
1208
  $ret = wp_update_post($post);
1209
 
1210
  if (is_wp_error($ret)) {
1211
+ $msg['error'] = __pl('post_setting_update_err');
1212
  }else{
1213
+ $msg['success'] = __pl('post_setting_update_success');
1214
  }
1215
  }
1216
 
main/functions.php CHANGED
@@ -1404,7 +1404,7 @@ function pagelayer_json_output(&$done){
1404
  }
1405
 
1406
  // Get the current query for render the product
1407
- function pagelayer_shortcode_current_query_query($query_args, $atts, $type){
1408
  global $wp_query;
1409
 
1410
  if($type == 'pagelayer_current_query'){
@@ -1431,4 +1431,4 @@ function pagelayer_shortcode_current_query_query($query_args, $atts, $type){
1431
  }
1432
 
1433
  return $query_args;
1434
- }
1404
  }
1405
 
1406
  // Get the current query for render the product
1407
+ function pagelayer_shortcode_current_query($query_args, $atts, $type){
1408
  global $wp_query;
1409
 
1410
  if($type == 'pagelayer_current_query'){
1431
  }
1432
 
1433
  return $query_args;
1434
+ }
main/live.php CHANGED
@@ -48,7 +48,7 @@ class PageLayer_LiveEditor{
48
  add_filter('the_content', array($this, 'the_content'));
49
 
50
  // Enqueue our Editor's JS
51
- wp_register_script('pagelayer-editor', PAGELAYER_JS.'/givejs.php?give=pagelayer-editor.js,widgets.js,'.(defined('PAGELAYER_PREMIUM') ? 'premium.js,' : '').'properties.js,base64.js,slimscroll.js,vanilla-picker.min.js,trumbowyg.js,trumbowyg.fontfamily.js,trumbowyg-pagelayer.js,pen.js', array('jquery'), PAGELAYER_VERSION);
52
  wp_enqueue_script('pagelayer-editor');
53
 
54
  // Enqueue the Editor's CSS
@@ -86,7 +86,7 @@ class PageLayer_LiveEditor{
86
  // Header function to add certain things
87
  function wp_head(){
88
 
89
- global $pagelayer, $post;
90
 
91
  $returnURL = (!is_page($post->ID) ? admin_url('edit.php') : admin_url('edit.php?post_type=page') );
92
 
@@ -110,6 +110,7 @@ pagelayer_site_logo = '.json_encode(pagelayer_site_logo()).';
110
  pagelayer_postTitle = "'. ( isset( $post->post_title ) ? $post->post_title : '' ) .'";
111
  pagelayer_support_FI = "'. ( current_theme_supports('post-thumbnails') ) .'";
112
  pagelayer_editable = ".'.(!empty($pagelayer->template_editor) ? $pagelayer->template_editor : 'entry-content').'";
 
113
  </script>';
114
  }
115
 
48
  add_filter('the_content', array($this, 'the_content'));
49
 
50
  // Enqueue our Editor's JS
51
+ wp_register_script('pagelayer-editor', PAGELAYER_JS.'/givejs.php?give=pagelayer-editor.js,widgets.js,'.(defined('PAGELAYER_PREMIUM') ? 'premium.js,' : '').'properties.js,base64.js,slimscroll.js,vanilla-picker.min.js,trumbowyg.js,trumbowyg.fontfamily.js,trumbowyg-pagelayer.js,trumbowyg.fontsize.min.js,pen.js', array('jquery'), PAGELAYER_VERSION);
52
  wp_enqueue_script('pagelayer-editor');
53
 
54
  // Enqueue the Editor's CSS
86
  // Header function to add certain things
87
  function wp_head(){
88
 
89
+ global $pagelayer, $post, $wp_query;
90
 
91
  $returnURL = (!is_page($post->ID) ? admin_url('edit.php') : admin_url('edit.php?post_type=page') );
92
 
110
  pagelayer_postTitle = "'. ( isset( $post->post_title ) ? $post->post_title : '' ) .'";
111
  pagelayer_support_FI = "'. ( current_theme_supports('post-thumbnails') ) .'";
112
  pagelayer_editable = ".'.(!empty($pagelayer->template_editor) ? $pagelayer->template_editor : 'entry-content').'";
113
+ pagelayer_wp_query = '. json_encode($wp_query->query_vars) .';
114
  </script>';
115
  }
116
 
main/shortcodes.php CHANGED
@@ -4353,7 +4353,7 @@ pagelayer_add_shortcode(PAGELAYER_SC_PREFIX.'_service', array(
4353
  'service_image_spacing' => array(
4354
  'type' => 'padding',
4355
  'label' => __pl('service_image_spacing'),
4356
- 'css' => ['{{element}} .pagelayer-service-image img' => 'margin-top:{{val[0]}}px; margin-right:{{val[1]}}px; margin-bottom:{{val[2]}}px; margin-left:{{val[3]}}px;'],
4357
  ),
4358
  'img_bor_state' => array(
4359
  'type' => 'radio',
@@ -5687,6 +5687,7 @@ pagelayer_add_shortcode(PAGELAYER_SC_PREFIX.'_accordion_item', array(
5687
  'default_active' => array(
5688
  'type' => 'checkbox',
5689
  'label' => __pl('Default active tab'),
 
5690
  ),
5691
  'title' => array(
5692
  'type' => 'text',
@@ -5877,7 +5878,7 @@ pagelayer_add_shortcode(PAGELAYER_SC_PREFIX.'_space', array(
5877
  'label' => __pl('Space Height'),
5878
  'screen' => 1,
5879
  'units' => ['px', '%'],
5880
- 'css' => ['{{element}} .pagelayer-space-holder' => 'height: {{val}}px;'],
5881
  'default' => '10',
5882
  'min' => 0,
5883
  'max' => 1000,
4353
  'service_image_spacing' => array(
4354
  'type' => 'padding',
4355
  'label' => __pl('service_image_spacing'),
4356
+ 'css' => ['{{element}} .pagelayer-service-image img' => 'padding-top:{{val[0]}}px; padding-right:{{val[1]}}px; padding-bottom:{{val[2]}}px; padding-left:{{val[3]}}px;'],
4357
  ),
4358
  'img_bor_state' => array(
4359
  'type' => 'radio',
5687
  'default_active' => array(
5688
  'type' => 'checkbox',
5689
  'label' => __pl('Default active tab'),
5690
+ 'addClass' => 'active'
5691
  ),
5692
  'title' => array(
5693
  'type' => 'text',
5878
  'label' => __pl('Space Height'),
5879
  'screen' => 1,
5880
  'units' => ['px', '%'],
5881
+ 'css' => ['{{element}} .pagelayer-space-holder' => 'height: {{val}};'],
5882
  'default' => '10',
5883
  'min' => 0,
5884
  'max' => 1000,
pagelayer.php CHANGED
@@ -3,7 +3,7 @@
3
  Plugin Name: PageLayer
4
  Plugin URI: http://wordpress.org/plugins/pagelayer/
5
  Description: PageLayer is a WordPress page builder plugin. Its very easy to use and very light on the browser.
6
- Version: 0.9.8
7
  Author: Pagelayer Team
8
  Author URI: https://pagelayer.com/
9
  License: LGPL v2.1
3
  Plugin Name: PageLayer
4
  Plugin URI: http://wordpress.org/plugins/pagelayer/
5
  Description: PageLayer is a WordPress page builder plugin. Its very easy to use and very light on the browser.
6
+ Version: 0.9.9
7
  Author: Pagelayer Team
8
  Author URI: https://pagelayer.com/
9
  License: LGPL v2.1
readme.txt CHANGED
@@ -4,7 +4,7 @@ Tags: page builder, editor, landing page, drag-and-drop, pagelayer, softaculous,
4
  Requires at least: 4.7
5
  Tested up to: 5.2
6
  Requires PHP: 5.2.4
7
- Stable tag: 0.9.8
8
  License: LGPL v2.1
9
  License URI: http://www.gnu.org/licenses/lgpl-2.1.html
10
 
@@ -113,7 +113,18 @@ Do you have questions related to PageLayer ? Use the following links :
113
 
114
  == Changelog ==
115
 
116
- = 0.9.8 (August 13, 2019) =
 
 
 
 
 
 
 
 
 
 
 
117
  * [Task] In the editor, improved the widget border colors for better user experience
118
  * [Task] Improved the right click options UI and added icons
119
  * [Task] The widget left bar has been improved
4
  Requires at least: 4.7
5
  Tested up to: 5.2
6
  Requires PHP: 5.2.4
7
+ Stable tag: 0.9.9
8
  License: LGPL v2.1
9
  License URI: http://www.gnu.org/licenses/lgpl-2.1.html
10
 
113
 
114
  == Changelog ==
115
 
116
+ = 0.9.9 (September 10, 2019) =
117
+ * [Feature] Added inline editing so you can now edit text / headers in the editor itself.
118
+ * [Task] Editor Font Size has been introduced.
119
+ * [Task] The cursor for add widget area has been set to pointer.
120
+ * [Bug Fix] In the Pagelayer Editor the title of the page was not set. This is fixed.
121
+ * [Bug Fix] The overflow given to a column was extending beyond the column. This is fixed.
122
+ * [Bug Fix] The active accordion tab was not shown by default. This is fixed.
123
+ * [Bug Fix] The correct screen mode was not set correctly in the beginning. This is fixed.
124
+ * [Bug Fix] The gradient color in the properties tab was not shown correctly the second time of editing. This is fixed.
125
+ * [Bug Fix] In image box, the spacing caused the image to go outside its holder. This is fixed.
126
+
127
+ = 0.9.8 (August 20, 2019) =
128
  * [Task] In the editor, improved the widget border colors for better user experience
129
  * [Task] Improved the right click options UI and added icons
130
  * [Task] The widget left bar has been improved