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

Version Description

(May 25, 2022) = * [Feature] Added Customizer settings to set global styles for elements. Also you can set different global styles for each post type. * [Feature] Added Global Color and Typography palette in customizer. Now you can set Global Color and Typography for each element. * [Feature] The Global color and typography properties have been added to the Pagelayer Editor as well. Now you can set global color and typography from the dropdown list. * [Bug-Fix] Textarea typography was not applied properly in the Contact Form widget. This is fixed. * [Bug-Fix] In certain cases, the add section was not working properly. This is fixed. * [Bug-Fix] In certain cases, the google fonts was not working properly. This is fixed.

Download this release

Release Info

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

Code changes from version 1.6.7 to 1.6.8

Files changed (21) hide show
  1. css/customizer.css +506 -0
  2. css/pagelayer-editor.css +150 -6
  3. fonts/pagelayer.eot +0 -0
  4. fonts/pagelayer.svg +1 -0
  5. fonts/pagelayer.ttf +0 -0
  6. fonts/pagelayer.woff +0 -0
  7. images/color-picker-transparency-grid.png +0 -0
  8. init.php +133 -53
  9. js/customizer.js +914 -0
  10. js/pagelayer-editor.js +82 -18
  11. js/properties.js +156 -12
  12. main/ajax.php +47 -10
  13. main/class.php +24 -0
  14. main/customizer-controls.php +589 -0
  15. main/customizer.php +404 -0
  16. main/functions.php +104 -1
  17. main/live.php +3 -0
  18. main/shortcode_functions.php +42 -8
  19. main/website.php +3 -0
  20. pagelayer.php +1 -1
  21. readme.txt +10 -2
css/customizer.css ADDED
@@ -0,0 +1,506 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ .pagelayer-customize-control{
2
+ position: relative;
3
+ margin-top: 10px;
4
+ }
5
+
6
+ .pagelayer-customize-heading{
7
+ background-color: #fff;
8
+ padding: 10px;
9
+ margin: 5px -12px 0;
10
+ font-weight: 600;
11
+ font-style: normal;
12
+ }
13
+
14
+ .pagelayer-customize-heading:after{
15
+ content: "\f345";
16
+ color: #a7aaad;
17
+ font-family: 'dashicons';
18
+ font-size: 16px;
19
+ position: absolute;
20
+ right: 5px;
21
+ top: 50%;
22
+ transform: translateY(-50%);
23
+ }
24
+
25
+ .pagelayer-active-accordion-tab .pagelayer-customize-heading:after{
26
+ content: "\f347";
27
+ }
28
+
29
+ .pagelayer-customize-control .customize-control-title{
30
+ font-weight: 400;
31
+ }
32
+
33
+ /* pagelayer padding controls*/
34
+ .pagelayer-control-padding{
35
+ display: flex;
36
+ align-items: center;
37
+ border: 1px solid #4444;
38
+ border-radius: 5px;
39
+ overflow: hidden;
40
+ }
41
+
42
+ .pagelayer-control-padding input.pagelayer-padding-input{
43
+ border-radius: 0;
44
+ border: 0;
45
+ flex: 1;
46
+ border-right: 1px solid #4444;
47
+ text-align: center;
48
+ }
49
+
50
+ .pagelayer-control-padding i.dashicons{
51
+ padding:5px;
52
+ font-size: 16px;
53
+ display: flex;
54
+ align-items: center;
55
+ cursor:pointer;
56
+ }
57
+
58
+ .pagelayer-padding-linked{
59
+ background-color: #137dc5;
60
+ color: #fff;
61
+ }
62
+ /* pagelayer padding controls end*/
63
+ /* pagelayer Typography controls*/
64
+ .pagelayer-control-typo-holder{
65
+ text-align: right;
66
+ }
67
+
68
+ .pagelayer-control-typo-holder .pagelayer-control-global-typo-icon,
69
+ .pagelayer-control-typo-holder .pagelayer-control-typo-icon{
70
+ background: #fff;
71
+ align-items: center;
72
+ margin-left: auto;
73
+ padding: 3px 6px;
74
+ border-radius: 4px;
75
+ border: 1px solid #999;
76
+ cursor:pointer;
77
+ font-size: 18px;
78
+ display: inline-flex;
79
+ justify-content: center;
80
+ }
81
+
82
+ .pagelayer-control-typo{
83
+ padding: 5px;
84
+ margin: 10px 0;
85
+ display:none;
86
+ background: #fff;
87
+ border-radius: 4px;
88
+ width: 250px;
89
+ position: relative;
90
+ text-align: left;
91
+ }
92
+
93
+ .pagelayer-control-typo .pagelayer-control-typo-fields{
94
+ padding: 10px 5px;
95
+ display: flex;
96
+ align-items: center;
97
+ }
98
+
99
+ .pagelayer-control-typo .pagelayer-control-typo-fields:not(:last-child){
100
+ border-bottom: 1px dashed #d1d1d1;
101
+ }
102
+
103
+ .pagelayer-control-typo .pagelayer-control-typo-fields > *{
104
+ flex: 1;
105
+ }
106
+ /* pagelayer Typography controls end*/
107
+ /* pagelayer device Start*/
108
+ .pagelayer-devices button{
109
+ border:none;
110
+ display:none;
111
+ cursor:pointer;
112
+ }
113
+
114
+ .pagelayer-devices button.active-device{
115
+ display:inline-block;
116
+ color:#50575e;
117
+ }
118
+
119
+ [data-device-detector="desktop"] [data-show-device]:not([data-show-device="_desktop"]),
120
+ [data-device-detector="tablet"] [data-show-device]:not([data-show-device="_tablet"]),
121
+ [data-device-detector="mobile"] [data-show-device]:not([data-show-device="_mobile"]){
122
+ display:none;
123
+ }
124
+ /* pagelayer device end*/
125
+ /* pagelayer units*/
126
+ .pagelayer-units{
127
+ flex:1;
128
+ text-align: right;
129
+ cursor:pointer;
130
+ }
131
+ .pagelayer-units [data-unit]:hover,
132
+ .pagelayer-units [data-unit].active{
133
+ color:#137dc5;
134
+ }
135
+ /* pagelayer units end*/
136
+ /* Alpha Color Picker CSS */
137
+ .customize-control-pagelayer-alpha-color .wp-picker-container,
138
+ .pagelayer-control-typo-icons-holder{
139
+ position: absolute;
140
+ right:0;
141
+ top:0;
142
+ }
143
+
144
+ .customize-control-pagelayer-alpha-color .wp-picker-container .iris-picker {
145
+ border-bottom:none;
146
+ border:none;
147
+ }
148
+
149
+ .customize-control-pagelayer-alpha-color .wp-color-result{
150
+ background-clip: content-box !important;
151
+ padding: 1px !important;
152
+ border: 1px solid #999;
153
+ width: 35px;
154
+ height: 30px;
155
+ position:relative;
156
+ background: none;
157
+ border-radius: 5px;
158
+ }
159
+
160
+ .customize-control-pagelayer-alpha-color .pagelayer-control-global-color-icon{
161
+ position: absolute;
162
+ right: 38px;
163
+ top: 0;
164
+ background: #fff;
165
+ padding: 3px 6px;
166
+ border-radius: 4px;
167
+ border: 1px solid #999;
168
+ cursor: pointer;
169
+ height: 22px;
170
+ display: inline-flex;
171
+ justify-content: center;
172
+ align-items: center;
173
+ font-size: 18px;
174
+ }
175
+
176
+ .customize-control-pagelayer-alpha-color .wp-color-result:hover,
177
+ .customize-control-pagelayer-alpha-color .wp-color-result:focus{
178
+ background: none;
179
+ }
180
+
181
+ .customize-control-pagelayer-alpha-color .wp-color-result:before{
182
+ content: '';
183
+ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgBAMAAAB54XoeAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAC1QTFRFAAAAAQEBBQUFDAwM9PT0+vr6/////v7+BAQE+/v7AgIC/f39AwMDDQ0N8/Pzb6ggJQAAAZ5JREFUeJztlr1twzAQhU+tK7ELDDdBNsgO2SAznAr3JAJXWSJp49YLuPAW2cJbhEdSQZBCEMRHgMVj5U80HnkSfz4Ra06eXjSoTvr6HKGGU94o8vBpqPr2LjLUcAr8ikNEnLx6jT93VZxneBn1Zg9uOlxsxO0suTkXfJywTsG5Ok5x9hK0NKM6bhEosh+nq+HJD+c6TmvG2r8RtrMb9g4aOKY3CA0ElyyHcbAHIXNw5Q9bWeLG2aUH80ItU97K8ihlhmmIUFb+dpZvOceNE7fOnz/UsNztHAMEzSwf6idEqTOLHv0R8THc7/o72Qzrl8vMwAVdmreDFhloLxQcCC65QSC45AYfBV0yfGGjtx78cLjrVaHHF/yAhV8B8EsKfo3CL/pRHFZFnIBlCa5z9EP6If1wBdMPe5QleMkNAumHuZ9+SD9cYPphjzpHP6Qf0g9XMP2wR1mCl9wgkH6Y++mH9MMFph/2qHP0Q/oh/XAF0w97lCV4yQ0C6Ye5n35IP1xg+mGPOkc/pB/SD1cw/bBHWYKX3CCQfpj76Yfr+QfwnsxmcLvdhQAAAABJRU5ErkJggg==) !important;
184
+ background-size: 140% !important;
185
+ opacity: 33%;
186
+ width: 29px;
187
+ height: 24px;
188
+ position: absolute;
189
+ left: 2px;
190
+ top: 2px;
191
+ z-index: -1;
192
+ border-radius: 5px;
193
+ }
194
+
195
+ .customize-control-pagelayer-alpha-color .wp-color-result-text{
196
+ display:none;
197
+ }
198
+
199
+ .customize-control-pagelayer-alpha-color .wp-picker-container{
200
+ width: 35px;
201
+ }
202
+
203
+ .customize-control-pagelayer-alpha-color .wp-picker-input-wrap {
204
+ display: flex;
205
+ align-items: center;
206
+ justify-content: center;
207
+ padding: 0 10px
208
+ }
209
+
210
+ .customize-control-pagelayer-alpha-color .wp-picker-open + .wp-picker-input-wrap {
211
+ width: 100%;
212
+ }
213
+
214
+ .customize-control-pagelayer-alpha-color .wp-picker-input-wrap input[type="text"].wp-color-picker.pagelayer-alpha-color-control{
215
+ width:100%;
216
+ }
217
+
218
+ .customize-control-pagelayer-alpha-color .wp-picker-input-wrap input[type="button"].wp-picker-default{
219
+ flex:auto;
220
+ }
221
+
222
+ .customize-control-pagelayer-alpha-color .wp-picker-holder{
223
+ background: #fff;
224
+ padding-top:10px;
225
+ display: none;
226
+ border-radius: 5px;
227
+ z-index: 999;
228
+ -webkit-box-sizing: border-box;
229
+ box-sizing: border-box;
230
+ -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
231
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
232
+ position: relative;
233
+ right: 220px;
234
+ width: 100%;
235
+ }
236
+
237
+ .customize-control-pagelayer-alpha-color .wp-picker-container .wp-picker-open ~ .wp-picker-holder{
238
+ display: table;
239
+ }
240
+
241
+ .customize-control-pagelayer-alpha-color .alpha-color-picker-container {
242
+ padding: 0 11px 10px;
243
+ position: relative;
244
+ }
245
+
246
+ .customize-control-pagelayer-alpha-color .alpha-color-picker-container .ui-widget-content,
247
+ .customize-control-pagelayer-alpha-color .alpha-color-picker-container .ui-widget-header,
248
+ .customize-control-pagelayer-alpha-color .alpha-color-picker-wrap .ui-state-focus {
249
+ background: transparent;
250
+ border: none;
251
+ }
252
+
253
+ .customize-control-pagelayer-alpha-color .alpha-color-picker-wrap a.iris-square-value:focus {
254
+ -webkit-box-shadow: none;
255
+ box-shadow: none;
256
+ }
257
+
258
+ .customize-control-pagelayer-alpha-color .alpha-color-picker-container .ui-slider {
259
+ position: relative;
260
+ z-index: 1;
261
+ height: 24px;
262
+ text-align: center;
263
+ margin: 0 auto;
264
+ width: 88%;
265
+ width: calc( 100% - 28px );
266
+ }
267
+
268
+ .customize-control-pagelayer-alpha-color .alpha-color-picker-container .ui-slider-handle,
269
+ .customize-control-pagelayer-alpha-color .alpha-color-picker-container .ui-widget-content .ui-state-default {
270
+ color: #777;
271
+ background-color: #FFF;
272
+ text-shadow: 0 1px 0 #FFF;
273
+ text-decoration: none;
274
+ position: absolute;
275
+ z-index: 2;
276
+ box-shadow: 0 1px 2px rgba(0,0,0,0.2);
277
+ border: 1px solid #aaa;
278
+ -webkit-border-radius: 4px;
279
+ -moz-border-radius: 4px;
280
+ border-radius: 4px;
281
+ margin-top: -2px;
282
+ top: 0;
283
+ height: 26px;
284
+ width: 26px;
285
+ cursor: ew-resize;
286
+ font-size: 0;
287
+ padding: 0;
288
+ line-height: 27px;
289
+ margin-left: -14px;
290
+ }
291
+
292
+ .customize-control-pagelayer-alpha-color .alpha-color-picker-container .ui-slider-handle.show-opacity {
293
+ font-size: 12px;
294
+ }
295
+
296
+ .customize-control-pagelayer-alpha-color .alpha-color-picker-container .click-zone {
297
+ width: 14px;
298
+ height: 24px;
299
+ display: block;
300
+ position: absolute;
301
+ left: 10px;
302
+ }
303
+
304
+ .customize-control-pagelayer-alpha-color .alpha-color-picker-container .max-click-zone {
305
+ right: 10px;
306
+ left: auto;
307
+ }
308
+
309
+ .customize-control-pagelayer-alpha-color .alpha-color-picker-container .transparency {
310
+ height: 24px;
311
+ width: 100%;
312
+ background-color: #FFF;
313
+ background-image: url(../images/color-picker-transparency-grid.png);
314
+ box-shadow: 0 0 5px rgba(0,0,0,0.4) inset;
315
+ -webkit-border-radius: 3px;
316
+ -moz-border-radius: 3px;
317
+ border-radius: 3px;
318
+ padding: 0;
319
+ margin-top: -24px;
320
+ }
321
+
322
+ /* Alpha Color Picker CSS End */
323
+ /* Color Repeater CSS Start */
324
+ .pagelayer-font-holder{
325
+ list-style-type: none;
326
+ margin: 0;
327
+ padding: 0;
328
+ padding-bottom: 15px;
329
+ position: relative;
330
+ min-height: 30px;
331
+ }
332
+
333
+ .pagelayer-color-holder{
334
+ list-style-type: none;
335
+ margin: 0;
336
+ padding: 0;
337
+ padding-bottom: 15px;
338
+ position: relative;
339
+ min-height: 30px;
340
+ display: flex;
341
+ align-items: center;
342
+ }
343
+
344
+ .pagelayer-color-holder .pagelayer-color-controls,
345
+ .pagelayer-font-holder .pagelayer-font-controls,
346
+ .customize-control-font-repeater-delete,
347
+ .customize-control-color-repeater-delete{
348
+ margin-right: 45px;
349
+ font-size: 0.7rem;
350
+ flex: 1;
351
+ text-align: right;
352
+ color: #8f8f8f;
353
+ }
354
+
355
+ .customize-control-font-repeater-delete{
356
+ position: absolute;
357
+ right: 0;
358
+ top: 4px;
359
+ }
360
+
361
+ .pagelayer-color-holder:not(:hover) .customize-control-color-repeater-delete,
362
+ .pagelayer-color-holder:hover .pagelayer-color-controls:not(.pagelayer-prevent-delete){
363
+ display: none;
364
+ }
365
+
366
+ .customize-control-font-repeater-delete .dashicons:hover,
367
+ .customize-control-color-repeater-delete .dashicons:hover{
368
+ color: #f00;
369
+ }
370
+
371
+ .customize-control-font-repeater-delete,
372
+ .customize-control-color-repeater-delete{
373
+ text-decoration: none;
374
+ font-weight: 600;
375
+ cursor: pointer;
376
+ font-size: 1rem;
377
+ }
378
+
379
+ .customize-control-font-repeater-delete .dashicons:active,
380
+ .customize-control-font-repeater-delete .dashicons:focus,
381
+ .customize-control-color-repeater-delete .dashicons:active,
382
+ .customize-control-color-repeater-delete .dashicons:focus {
383
+ outline: none;
384
+ -webkit-box-shadow: none;
385
+ box-shadow: none;
386
+ }
387
+
388
+ .customize-control-font-repeater-add,
389
+ .customize-control-color-repeater-add{
390
+ display: block !important;
391
+ margin: auto !important;
392
+ }
393
+
394
+ .pagelayer-global-font-list{
395
+ text-align: left;
396
+ }
397
+
398
+ .pagelayer-font-title,
399
+ .pagelayer-color-title{
400
+ padding: 5px;
401
+ }
402
+
403
+ .pagelayer-font-title{
404
+ float: left;
405
+ }
406
+
407
+ .pagelayer-global-selected,
408
+ .pagelayer-global-font-list-item:hover,
409
+ .pagelayer-global-color-list-item:hover{
410
+ background: #f9f9f9;
411
+ }
412
+
413
+ .pagelayer-global-selected:after{
414
+ content: "\f15e";
415
+ font-family: dashicons;
416
+ font-size: 20px;
417
+ color: #137dc5;
418
+ }
419
+
420
+ .pagelayer-global-font-list,
421
+ .pagelayer-global-color-list{
422
+ position: absolute;
423
+ background: #fff;
424
+ padding: 10px 0;
425
+ z-index: 9999;
426
+ border-radius: 4px;
427
+ right: 0;
428
+ top: 35px;
429
+ width: 250px;
430
+ display: none;
431
+ max-height: 350px;
432
+ overflow-y: auto;
433
+ }
434
+
435
+ .pagelayer-global-font-list-item,
436
+ .pagelayer-global-color-list-item{
437
+ display: flex;
438
+ padding: 10px 20px;
439
+ cursor: pointer;
440
+ }
441
+
442
+ .pagelayer-global-font-list-item .pagelayer-global-font-title,
443
+ .pagelayer-global-color-list-item .pagelayer-global-color-title{
444
+ flex: 1;
445
+ }
446
+
447
+ .pagelayer-global-color-list-item .pagelayer-global-color-pre{
448
+ position: relative;
449
+ border: 1px solid #f1f1f1;
450
+ margin-right: 7px;
451
+ padding: 1px;
452
+ background-clip: content-box;
453
+ }
454
+
455
+ .pagelayer-global-color-list-item .pagelayer-global-color-pre:before{
456
+ content: '';
457
+ padding: 0px 10px;
458
+ background-color: #ff000000;
459
+ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=);
460
+ -webkit-background-size: 12px 12px;
461
+ background-size: 6px 6px;
462
+ position: relative;
463
+ z-index: -1;
464
+ }
465
+
466
+ .pagelayer-active-global{
467
+ color: #137dc5;
468
+ }
469
+
470
+ .pagelayer-hidden{
471
+ display: none;
472
+ }
473
+
474
+ .pagelayer-global-setting-font,
475
+ .pagelayer-global-setting-color{
476
+ position: relative;
477
+ box-shadow: 0 1px 2px #d2cfcf;
478
+ padding: 4px 4px 10px 4px;
479
+ margin-bottom: 5px;
480
+ }
481
+
482
+ .pagelayer-global-setting-font b,
483
+ .pagelayer-global-setting-color b{
484
+ margin-left: 11px;
485
+ }
486
+
487
+ .pagelayer-global-setting-font .dashicons,
488
+ .pagelayer-global-setting-color .dashicons{
489
+ right: 15px;
490
+ position: absolute;
491
+ cursor: pointer;
492
+ font-size: 14px;
493
+ }
494
+
495
+ .pagelayer-global-setting-font .dashicons:hover,
496
+ .pagelayer-global-setting-color .dashicons:hover{
497
+ color: #2525ff;
498
+ }
499
+
500
+ #sub-accordion-section-pagelayer_global_colors_sec{
501
+ height: 100% !important;
502
+ }
503
+
504
+ .pagelayer-accordion-tab{
505
+ cursor: pointer;
506
+ }
css/pagelayer-editor.css CHANGED
@@ -1162,31 +1162,174 @@ background-color: #1A9CDB !important;
1162
  color:#ffffff !important;
1163
  }
1164
 
1165
- .pagelayer-elp-color-div{
 
1166
  cursor: pointer;
1167
- padding: 4px;
1168
- width: 50px;
1169
- height: 25px;
1170
- display: block;
1171
- border-radius: 2px;
1172
  margin: 0 auto;
1173
  position: absolute;
1174
  top: 5px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1175
  right: 7px;
1176
  border: solid 1px #999;
1177
  color: #333;
1178
  vertical-align: middle;
1179
  }
1180
 
 
 
 
 
 
 
 
 
1181
  .pagelayer-elp-color-preview{
1182
  height: 100%;
1183
  background-size: cover !important;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1184
  }
1185
 
1186
  .pagelayer-white-border{
1187
  outline: 1px solid #dfdfdf;
1188
  }
1189
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1190
  .pagelayer-blank-preview{
1191
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgBAMAAAB54XoeAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAC1QTFRFAAAAAQEBBQUFDAwM9PT0+vr6/////v7+BAQE+/v7AgIC/f39AwMDDQ0N8/Pzb6ggJQAAAZ5JREFUeJztlr1twzAQhU+tK7ELDDdBNsgO2SAznAr3JAJXWSJp49YLuPAW2cJbhEdSQZBCEMRHgMVj5U80HnkSfz4Ra06eXjSoTvr6HKGGU94o8vBpqPr2LjLUcAr8ikNEnLx6jT93VZxneBn1Zg9uOlxsxO0suTkXfJywTsG5Ok5x9hK0NKM6bhEosh+nq+HJD+c6TmvG2r8RtrMb9g4aOKY3CA0ElyyHcbAHIXNw5Q9bWeLG2aUH80ItU97K8ihlhmmIUFb+dpZvOceNE7fOnz/UsNztHAMEzSwf6idEqTOLHv0R8THc7/o72Qzrl8vMwAVdmreDFhloLxQcCC65QSC45AYfBV0yfGGjtx78cLjrVaHHF/yAhV8B8EsKfo3CL/pRHFZFnIBlCa5z9EP6If1wBdMPe5QleMkNAumHuZ9+SD9cYPphjzpHP6Qf0g9XMP2wR1mCl9wgkH6Y++mH9MMFph/2qHP0Q/oh/XAF0w97lCV4yQ0C6Ye5n35IP1xg+mGPOkc/pB/SD1cw/bBHWYKX3CCQfpj76Yfr+QfwnsxmcLvdhQAAAABJRU5ErkJggg==') !important;
1192
  background-size: cover !important;
@@ -1265,6 +1408,7 @@ right: 0;
1265
  z-index:1;
1266
  box-shadow: 0 0 3px #333;
1267
  padding: 3px;
 
1268
  }
1269
 
1270
  .pagelayer-elp-remove-color .pli:before{
1162
  color:#ffffff !important;
1163
  }
1164
 
1165
+ .pagelayer-elp-typo-edit-div,
1166
+ .pagelayer-elp-color-div-holder{
1167
  cursor: pointer;
1168
+ width: 70px;
1169
+ height: 30px;
1170
+ border-radius: 3px;
 
 
1171
  margin: 0 auto;
1172
  position: absolute;
1173
  top: 5px;
1174
+ right: 11px;
1175
+ border: solid 1px #999;
1176
+ color: #333;
1177
+ display: flex;
1178
+ }
1179
+
1180
+ .pagelayer-elp-color-div{
1181
+ cursor: pointer;
1182
+ padding: 3px;
1183
+ width: 28px;
1184
+ height: 23px;
1185
+ display: block;
1186
+ border-radius: 2px;
1187
+ margin: 0 auto;
1188
+ position: absolute;
1189
+ top: 5px;
1190
  right: 7px;
1191
  border: solid 1px #999;
1192
  color: #333;
1193
  vertical-align: middle;
1194
  }
1195
 
1196
+ .pagelayer-elp-color-div-holder .pagelayer-elp-color-div{
1197
+ position: relative;
1198
+ border: 0px;
1199
+ height: calc(100% - 6px);
1200
+ top: 0;
1201
+ left: 0;
1202
+ }
1203
+
1204
  .pagelayer-elp-color-preview{
1205
  height: 100%;
1206
  background-size: cover !important;
1207
+ border-radius: 2px;
1208
+ flex: 1;
1209
+ }
1210
+
1211
+ .pagelayer-elp-typo-global,
1212
+ .pagelayer-elp-color-global{
1213
+ width: 50%;
1214
+ border-right: 1px solid #999;
1215
+ display: flex;
1216
+ align-items: center;
1217
+ justify-content: center;
1218
+ }
1219
+
1220
+ .pagelayer-elp-typo-global:hover,
1221
+ .pagelayer-elp-color-global:hover{
1222
+ color: #137dc5;
1223
+ }
1224
+
1225
+ .pagelayer-elp-typo-edit-div .pli-pencil{
1226
+ display: flex;
1227
+ align-items: center;
1228
+ justify-content: center;
1229
+ flex: 1;
1230
+ }
1231
+
1232
+ .pagelayer-elp-typo-global:before,
1233
+ .pagelayer-elp-color-global:before{
1234
+ content: "\e9c9";
1235
+ font-family: 'pagelayer', "Font Awesome 5 Free" !important;
1236
  }
1237
 
1238
  .pagelayer-white-border{
1239
  outline: 1px solid #dfdfdf;
1240
  }
1241
 
1242
+ .pagelayer-global-selected,
1243
+ .pagelayer-global-font-list-item:hover,
1244
+ .pagelayer-global-color-list-item:hover{
1245
+ background: #f9f9f9;
1246
+ }
1247
+
1248
+ .pagelayer-global-selected:after{
1249
+ content: "\ea10";
1250
+ font-family: 'pagelayer', "Font Awesome 5 Free" !important;
1251
+ color: #137dc5;
1252
+ }
1253
+
1254
+ .pagelayer-global-font-list,
1255
+ .pagelayer-global-color-list{
1256
+ position: absolute;
1257
+ background: #fff;
1258
+ padding: 10px 0;
1259
+ z-index: 9999;
1260
+ border-radius: 4px;
1261
+ right: 0;
1262
+ top: 35px;
1263
+ width: 250px;
1264
+ display: none;
1265
+ max-height: 350px;
1266
+ overflow-y: auto;
1267
+ font-size: 12px;
1268
+ box-shadow: 0px 0px 13px rgb(0 0 0 / 30%);
1269
+ }
1270
+
1271
+ .pagelayer-global-font-list-item,
1272
+ .pagelayer-global-color-list-item{
1273
+ display: flex;
1274
+ padding: 10px 20px;
1275
+ cursor: pointer;
1276
+ }
1277
+
1278
+ .pagelayer-global-font-list-item .pagelayer-global-font-title,
1279
+ .pagelayer-global-color-list-item .pagelayer-global-color-title{
1280
+ flex: 1;
1281
+ }
1282
+
1283
+ .pagelayer-global-color-list-item .pagelayer-global-color-pre{
1284
+ position: relative;
1285
+ border: 1px solid #f1f1f1;
1286
+ margin-right: 7px;
1287
+ padding: 1px;
1288
+ background-clip: content-box;
1289
+ }
1290
+
1291
+ .pagelayer-global-color-list-item .pagelayer-global-color-pre:before{
1292
+ content: '';
1293
+ padding: 0px 10px;
1294
+ background-color: #ff000000;
1295
+ background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=);
1296
+ -webkit-background-size: 12px 12px;
1297
+ background-size: 6px 6px;
1298
+ position: relative;
1299
+ z-index: -1;
1300
+ }
1301
+
1302
+ .pagelayer-global-setting-font,
1303
+ .pagelayer-global-setting-color{
1304
+ position: relative;
1305
+ box-shadow: 0 1px 2px #d2cfcf;
1306
+ padding: 10px 4px;
1307
+ margin-bottom: 5px;
1308
+ margin-top: -10px;
1309
+ cursor: default;
1310
+ }
1311
+
1312
+ .pagelayer-global-setting-font b,
1313
+ .pagelayer-global-setting-color b{
1314
+ margin-left: 11px;
1315
+ }
1316
+
1317
+ .pagelayer-global-setting-font .pli,
1318
+ .pagelayer-global-setting-color .pli{
1319
+ right: 15px;
1320
+ position: absolute;
1321
+ cursor: pointer;
1322
+ }
1323
+
1324
+ .pagelayer-global-setting-font .pli:hover,
1325
+ .pagelayer-global-setting-color .pli:hover{
1326
+ color: #2525ff;
1327
+ }
1328
+
1329
+ .pagelayer-active-global{
1330
+ color: #137dc5;
1331
+ }
1332
+
1333
  .pagelayer-blank-preview{
1334
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgBAMAAAB54XoeAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAC1QTFRFAAAAAQEBBQUFDAwM9PT0+vr6/////v7+BAQE+/v7AgIC/f39AwMDDQ0N8/Pzb6ggJQAAAZ5JREFUeJztlr1twzAQhU+tK7ELDDdBNsgO2SAznAr3JAJXWSJp49YLuPAW2cJbhEdSQZBCEMRHgMVj5U80HnkSfz4Ra06eXjSoTvr6HKGGU94o8vBpqPr2LjLUcAr8ikNEnLx6jT93VZxneBn1Zg9uOlxsxO0suTkXfJywTsG5Ok5x9hK0NKM6bhEosh+nq+HJD+c6TmvG2r8RtrMb9g4aOKY3CA0ElyyHcbAHIXNw5Q9bWeLG2aUH80ItU97K8ihlhmmIUFb+dpZvOceNE7fOnz/UsNztHAMEzSwf6idEqTOLHv0R8THc7/o72Qzrl8vMwAVdmreDFhloLxQcCC65QSC45AYfBV0yfGGjtx78cLjrVaHHF/yAhV8B8EsKfo3CL/pRHFZFnIBlCa5z9EP6If1wBdMPe5QleMkNAumHuZ9+SD9cYPphjzpHP6Qf0g9XMP2wR1mCl9wgkH6Y++mH9MMFph/2qHP0Q/oh/XAF0w97lCV4yQ0C6Ye5n35IP1xg+mGPOkc/pB/SD1cw/bBHWYKX3CCQfpj76Yfr+QfwnsxmcLvdhQAAAABJRU5ErkJggg==') !important;
1335
  background-size: cover !important;
1408
  z-index:1;
1409
  box-shadow: 0 0 3px #333;
1410
  padding: 3px;
1411
+ border-top-right-radius: 2px;
1412
  }
1413
 
1414
  .pagelayer-elp-remove-color .pli:before{
fonts/pagelayer.eot CHANGED
Binary file
fonts/pagelayer.svg CHANGED
@@ -92,6 +92,7 @@
92
  <glyph unicode="&#xe9b9;" glyph-name="list-numbered" d="M384 128h640v-128h-640zM384 512h640v-128h-640zM384 896h640v-128h-640zM192 960v-256h-64v192h-64v64zM128 434v-50h128v-64h-192v146l128 60v50h-128v64h192v-146zM256 256v-320h-192v64h128v64h-128v64h128v64h-128v64z" />
93
  <glyph unicode="&#xe9ba;" glyph-name="list" d="M0 960h256v-256h-256zM384 896h640v-128h-640zM0 576h256v-256h-256zM384 512h640v-128h-640zM0 192h256v-256h-256zM384 128h640v-128h-640z" />
94
  <glyph unicode="&#xe9bc;" glyph-name="tree" d="M976 192h-16v208c0 61.756-50.242 112-112 112h-272v128h16c26.4 0 48 21.6 48 48v160c0 26.4-21.6 48-48 48h-160c-26.4 0-48-21.6-48-48v-160c0-26.4 21.6-48 48-48h16v-128h-272c-61.756 0-112-50.244-112-112v-208h-16c-26.4 0-48-21.6-48-48v-160c0-26.4 21.6-48 48-48h160c26.4 0 48 21.6 48 48v160c0 26.4-21.6 48-48 48h-16v192h256v-192h-16c-26.4 0-48-21.6-48-48v-160c0-26.4 21.6-48 48-48h160c26.4 0 48 21.6 48 48v160c0 26.4-21.6 48-48 48h-16v192h256v-192h-16c-26.4 0-48-21.6-48-48v-160c0-26.4 21.6-48 48-48h160c26.4 0 48 21.6 48 48v160c0 26.4-21.6 48-48 48zM192 0h-128v128h128v-128zM576 0h-128v128h128v-128zM448 704v128h128v-128h-128zM960 0h-128v128h128v-128z" />
 
95
  <glyph unicode="&#xe9cb;" glyph-name="link" d="M440.236 324.234c-13.31 0-26.616 5.076-36.77 15.23-95.134 95.136-95.134 249.934 0 345.070l192 192c46.088 46.086 107.36 71.466 172.534 71.466s126.448-25.38 172.536-71.464c95.132-95.136 95.132-249.934 0-345.070l-87.766-87.766c-20.308-20.308-53.23-20.308-73.54 0-20.306 20.306-20.306 53.232 0 73.54l87.766 87.766c54.584 54.586 54.584 143.404 0 197.99-26.442 26.442-61.6 41.004-98.996 41.004s-72.552-14.562-98.996-41.006l-192-191.998c-54.586-54.586-54.586-143.406 0-197.992 20.308-20.306 20.306-53.232 0-73.54-10.15-10.152-23.462-15.23-36.768-15.23zM256-52c-65.176 0-126.45 25.38-172.534 71.464-95.134 95.136-95.134 249.934 0 345.070l87.764 87.764c20.308 20.306 53.234 20.306 73.54 0 20.308-20.306 20.308-53.232 0-73.54l-87.764-87.764c-54.586-54.586-54.586-143.406 0-197.992 26.44-26.44 61.598-41.002 98.994-41.002s72.552 14.562 98.998 41.006l192 191.998c54.584 54.586 54.584 143.406 0 197.992-20.308 20.308-20.306 53.232 0 73.54 20.306 20.306 53.232 20.306 73.54-0.002 95.132-95.134 95.132-249.932 0.002-345.068l-192.002-192c-46.090-46.088-107.364-71.466-172.538-71.466z" />
96
  <glyph unicode="&#xe9cd;" glyph-name="attachment" d="M665.832 632.952l-64.952 64.922-324.81-324.742c-53.814-53.792-53.814-141.048 0-194.844 53.804-53.792 141.060-53.792 194.874 0l389.772 389.708c89.714 89.662 89.714 235.062 0 324.726-89.666 89.704-235.112 89.704-324.782 0l-409.23-409.178c-0.29-0.304-0.612-0.576-0.876-0.846-125.102-125.096-125.102-327.856 0-452.906 125.054-125.056 327.868-125.056 452.988 0 0.274 0.274 0.516 0.568 0.82 0.876l0.032-0.034 279.332 279.292-64.986 64.92-279.33-279.262c-0.296-0.268-0.564-0.57-0.846-0.844-89.074-89.058-233.98-89.058-323.076 0-89.062 89.042-89.062 233.922 0 322.978 0.304 0.304 0.604 0.582 0.888 0.846l-0.046 0.060 409.28 409.166c53.712 53.738 141.144 53.738 194.886 0 53.712-53.734 53.712-141.148 0-194.84l-389.772-389.7c-17.936-17.922-47.054-17.922-64.972 0-17.894 17.886-17.894 47.032 0 64.92l324.806 324.782z" />
97
  <glyph unicode="&#xe9ce;" glyph-name="eye" d="M512 768c-223.318 0-416.882-130.042-512-320 95.118-189.958 288.682-320 512-320 223.312 0 416.876 130.042 512 320-95.116 189.958-288.688 320-512 320zM764.45 598.296c60.162-38.374 111.142-89.774 149.434-150.296-38.292-60.522-89.274-111.922-149.436-150.296-75.594-48.218-162.89-73.704-252.448-73.704-89.56 0-176.858 25.486-252.452 73.704-60.158 38.372-111.138 89.772-149.432 150.296 38.292 60.524 89.274 111.924 149.434 150.296 3.918 2.5 7.876 4.922 11.86 7.3-9.96-27.328-15.41-56.822-15.41-87.596 0-141.382 114.616-256 256-256 141.382 0 256 114.618 256 256 0 30.774-5.452 60.268-15.408 87.598 3.978-2.378 7.938-4.802 11.858-7.302v0zM512 544c0-53.020-42.98-96-96-96s-96 42.98-96 96 42.98 96 96 96 96-42.982 96-96z" />
92
  <glyph unicode="&#xe9b9;" glyph-name="list-numbered" d="M384 128h640v-128h-640zM384 512h640v-128h-640zM384 896h640v-128h-640zM192 960v-256h-64v192h-64v64zM128 434v-50h128v-64h-192v146l128 60v50h-128v64h192v-146zM256 256v-320h-192v64h128v64h-128v64h128v64h-128v64z" />
93
  <glyph unicode="&#xe9ba;" glyph-name="list" d="M0 960h256v-256h-256zM384 896h640v-128h-640zM0 576h256v-256h-256zM384 512h640v-128h-640zM0 192h256v-256h-256zM384 128h640v-128h-640z" />
94
  <glyph unicode="&#xe9bc;" glyph-name="tree" d="M976 192h-16v208c0 61.756-50.242 112-112 112h-272v128h16c26.4 0 48 21.6 48 48v160c0 26.4-21.6 48-48 48h-160c-26.4 0-48-21.6-48-48v-160c0-26.4 21.6-48 48-48h16v-128h-272c-61.756 0-112-50.244-112-112v-208h-16c-26.4 0-48-21.6-48-48v-160c0-26.4 21.6-48 48-48h160c26.4 0 48 21.6 48 48v160c0 26.4-21.6 48-48 48h-16v192h256v-192h-16c-26.4 0-48-21.6-48-48v-160c0-26.4 21.6-48 48-48h160c26.4 0 48 21.6 48 48v160c0 26.4-21.6 48-48 48h-16v192h256v-192h-16c-26.4 0-48-21.6-48-48v-160c0-26.4 21.6-48 48-48h160c26.4 0 48 21.6 48 48v160c0 26.4-21.6 48-48 48zM192 0h-128v128h128v-128zM576 0h-128v128h128v-128zM448 704v128h128v-128h-128zM960 0h-128v128h128v-128z" />
95
+ <glyph unicode="&#xe9c9;" glyph-name="sphere" d="M480 896c-265.096 0-480-214.904-480-480 0-265.098 214.904-480 480-480 265.098 0 480 214.902 480 480 0 265.096-214.902 480-480 480zM751.59 256c8.58 40.454 13.996 83.392 15.758 128h127.446c-3.336-44.196-13.624-87.114-30.68-128h-112.524zM208.41 576c-8.58-40.454-13.996-83.392-15.758-128h-127.444c3.336 44.194 13.622 87.114 30.678 128h112.524zM686.036 576c9.614-40.962 15.398-83.854 17.28-128h-191.316v128h174.036zM512 640v187.338c14.59-4.246 29.044-11.37 43.228-21.37 26.582-18.74 52.012-47.608 73.54-83.486 14.882-24.802 27.752-52.416 38.496-82.484h-155.264zM331.232 722.484c21.528 35.878 46.956 64.748 73.54 83.486 14.182 10 28.638 17.124 43.228 21.37v-187.34h-155.264c10.746 30.066 23.616 57.68 38.496 82.484zM448 576v-128h-191.314c1.88 44.146 7.666 87.038 17.278 128h174.036zM95.888 256c-17.056 40.886-27.342 83.804-30.678 128h127.444c1.762-44.608 7.178-87.546 15.758-128h-112.524zM256.686 384h191.314v-128h-174.036c-9.612 40.96-15.398 83.854-17.278 128zM448 192v-187.34c-14.588 4.246-29.044 11.372-43.228 21.37-26.584 18.74-52.014 47.61-73.54 83.486-14.882 24.804-27.75 52.418-38.498 82.484h155.266zM628.768 109.516c-21.528-35.876-46.958-64.746-73.54-83.486-14.184-9.998-28.638-17.124-43.228-21.37v187.34h155.266c-10.746-30.066-23.616-57.68-38.498-82.484zM512 256v128h191.314c-1.88-44.146-7.666-87.040-17.28-128h-174.034zM767.348 448c-1.762 44.608-7.178 87.546-15.758 128h112.524c17.056-40.886 27.344-83.806 30.68-128h-127.446zM830.658 640h-95.9c-18.638 58.762-44.376 110.294-75.316 151.428 42.536-20.34 81.058-47.616 114.714-81.272 21.48-21.478 40.362-44.938 56.502-70.156zM185.844 710.156c33.658 33.658 72.18 60.932 114.714 81.272-30.942-41.134-56.676-92.666-75.316-151.428h-95.898c16.138 25.218 35.022 48.678 56.5 70.156zM129.344 192h95.898c18.64-58.762 44.376-110.294 75.318-151.43-42.536 20.34-81.058 47.616-114.714 81.274-21.48 21.478-40.364 44.938-56.502 70.156zM774.156 121.844c-33.656-33.658-72.18-60.934-114.714-81.274 30.942 41.134 56.678 92.668 75.316 151.43h95.9c-16.14-25.218-35.022-48.678-56.502-70.156z" />
96
  <glyph unicode="&#xe9cb;" glyph-name="link" d="M440.236 324.234c-13.31 0-26.616 5.076-36.77 15.23-95.134 95.136-95.134 249.934 0 345.070l192 192c46.088 46.086 107.36 71.466 172.534 71.466s126.448-25.38 172.536-71.464c95.132-95.136 95.132-249.934 0-345.070l-87.766-87.766c-20.308-20.308-53.23-20.308-73.54 0-20.306 20.306-20.306 53.232 0 73.54l87.766 87.766c54.584 54.586 54.584 143.404 0 197.99-26.442 26.442-61.6 41.004-98.996 41.004s-72.552-14.562-98.996-41.006l-192-191.998c-54.586-54.586-54.586-143.406 0-197.992 20.308-20.306 20.306-53.232 0-73.54-10.15-10.152-23.462-15.23-36.768-15.23zM256-52c-65.176 0-126.45 25.38-172.534 71.464-95.134 95.136-95.134 249.934 0 345.070l87.764 87.764c20.308 20.306 53.234 20.306 73.54 0 20.308-20.306 20.308-53.232 0-73.54l-87.764-87.764c-54.586-54.586-54.586-143.406 0-197.992 26.44-26.44 61.598-41.002 98.994-41.002s72.552 14.562 98.998 41.006l192 191.998c54.584 54.586 54.584 143.406 0 197.992-20.308 20.308-20.306 53.232 0 73.54 20.306 20.306 53.232 20.306 73.54-0.002 95.132-95.134 95.132-249.932 0.002-345.068l-192.002-192c-46.090-46.088-107.364-71.466-172.538-71.466z" />
97
  <glyph unicode="&#xe9cd;" glyph-name="attachment" d="M665.832 632.952l-64.952 64.922-324.81-324.742c-53.814-53.792-53.814-141.048 0-194.844 53.804-53.792 141.060-53.792 194.874 0l389.772 389.708c89.714 89.662 89.714 235.062 0 324.726-89.666 89.704-235.112 89.704-324.782 0l-409.23-409.178c-0.29-0.304-0.612-0.576-0.876-0.846-125.102-125.096-125.102-327.856 0-452.906 125.054-125.056 327.868-125.056 452.988 0 0.274 0.274 0.516 0.568 0.82 0.876l0.032-0.034 279.332 279.292-64.986 64.92-279.33-279.262c-0.296-0.268-0.564-0.57-0.846-0.844-89.074-89.058-233.98-89.058-323.076 0-89.062 89.042-89.062 233.922 0 322.978 0.304 0.304 0.604 0.582 0.888 0.846l-0.046 0.060 409.28 409.166c53.712 53.738 141.144 53.738 194.886 0 53.712-53.734 53.712-141.148 0-194.84l-389.772-389.7c-17.936-17.922-47.054-17.922-64.972 0-17.894 17.886-17.894 47.032 0 64.92l324.806 324.782z" />
98
  <glyph unicode="&#xe9ce;" glyph-name="eye" d="M512 768c-223.318 0-416.882-130.042-512-320 95.118-189.958 288.682-320 512-320 223.312 0 416.876 130.042 512 320-95.116 189.958-288.688 320-512 320zM764.45 598.296c60.162-38.374 111.142-89.774 149.434-150.296-38.292-60.522-89.274-111.922-149.436-150.296-75.594-48.218-162.89-73.704-252.448-73.704-89.56 0-176.858 25.486-252.452 73.704-60.158 38.372-111.138 89.772-149.432 150.296 38.292 60.524 89.274 111.924 149.434 150.296 3.918 2.5 7.876 4.922 11.86 7.3-9.96-27.328-15.41-56.822-15.41-87.596 0-141.382 114.616-256 256-256 141.382 0 256 114.618 256 256 0 30.774-5.452 60.268-15.408 87.598 3.978-2.378 7.938-4.802 11.858-7.302v0zM512 544c0-53.020-42.98-96-96-96s-96 42.98-96 96 42.98 96 96 96 96-42.982 96-96z" />
fonts/pagelayer.ttf CHANGED
Binary file
fonts/pagelayer.woff CHANGED
Binary file
images/color-picker-transparency-grid.png ADDED
Binary file
init.php CHANGED
@@ -5,7 +5,7 @@ if (!defined('ABSPATH')) exit;
5
 
6
  define('PAGELAYER_BASE', plugin_basename(PAGELAYER_FILE));
7
  define('PAGELAYER_PRO_BASE', 'pagelayer-pro/pagelayer-pro.php');
8
- define('PAGELAYER_VERSION', '1.6.7');
9
  define('PAGELAYER_DIR', dirname(PAGELAYER_FILE));
10
  define('PAGELAYER_SLUG', 'pagelayer');
11
  define('PAGELAYER_URL', plugins_url('', PAGELAYER_FILE));
@@ -122,52 +122,6 @@ function pagelayer_load_plugin(){
122
 
123
  // Any custom types
124
  $pagelayer->settings['post_types'] = apply_filters('pagelayer_supported_post_type', $pagelayer->settings['post_types']);
125
-
126
- // Load CSS settings
127
- foreach($pagelayer->css_settings as $k => $params){
128
- foreach($pagelayer->screens as $sk => $sv){
129
- $suffix = (!empty($sv) ? '_'.$sv : '');
130
- $setting = empty($params['key']) ? 'pagelayer_'.$k.'_css' : $params['key'];
131
- $tmp = get_option($setting.$suffix);
132
- if(!empty($tmp)){
133
- $pagelayer->css[$k.$suffix] = $tmp;
134
- }
135
- }
136
- }
137
-
138
- // Backward compat for colors
139
- if(!empty($pagelayer->settings['color']['background']) && empty($pagelayer->css['body']['background-color'])){
140
- $pagelayer->css['body']['background-color'] = $pagelayer->settings['color']['background'];
141
- }
142
-
143
- if(!empty($pagelayer->settings['color']['text']) && empty($pagelayer->css['body']['color'])){
144
- $pagelayer->css['body']['color'] = $pagelayer->settings['color']['text'];
145
- }
146
-
147
- // Link Color
148
- if(!empty($pagelayer->settings['color']['link']) && empty($pagelayer->css['a']['color'])){
149
- $pagelayer->css['a']['color'] = $pagelayer->settings['color']['link'];
150
- }
151
-
152
- // Link Hover Color
153
- if(!empty($pagelayer->settings['color']['link-hover']) && empty($pagelayer->css['a-hover']['color'])){
154
- $pagelayer->css['a-hover']['color'] = $pagelayer->settings['color']['link-hover'];
155
- }
156
-
157
- // Headings Color
158
- if(!empty($pagelayer->settings['color']['heading'])){
159
- $htmp = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
160
- foreach($htmp as $k => $v){
161
- if(empty($pagelayer->css[$v]['color'])){
162
- $pagelayer->css[$v]['color'] = $pagelayer->settings['color']['heading'];
163
- }
164
- }
165
- }
166
-
167
- // Backward compat for body font
168
- if(!empty($pagelayer->settings['body_font'])){
169
- $pagelayer->settings['body']['font-family'] = $pagelayer->settings['body_font'];
170
- }
171
 
172
  // Load the language
173
  load_plugin_textdomain('pagelayer', false, PAGELAYER_SLUG.'/languages/');
@@ -228,6 +182,8 @@ function pagelayer_load_plugin(){
228
  add_action('admin_notices', 'pagelayer_getting_started_notice');
229
  }
230
 
 
 
231
  if(class_exists('WooCommerce')){
232
  //include_once(PAGELAYER_DIR.'/main/woocommerce.php');
233
  }
@@ -653,12 +609,16 @@ function pagelayer_enqueue_fonts($suffix = '-header'){
653
  // Fetch body font if given
654
  if(!empty($set['font-family'])){
655
 
656
- $val = $set['font-family'];
657
- $font_weight = empty($set['font-weight']) ? 400 : $set['font-weight'];
658
  $font_style = empty($set['font-style']) ? 'normal' : $set['font-style'];
659
  $font_style = in_array($font_style, ['italic', 'oblique']) ? 'i' : '';
660
 
661
- $pagelayer->runtime_fonts[$val][$font_weight.$font_style] = $font_weight.$font_style;
 
 
 
 
662
 
663
  }
664
 
@@ -741,14 +701,85 @@ var pagelayer_recaptch_lang = "'.(!empty($pagelayer_recaptch_lang) ? $pagelayer_
741
 
742
  }
743
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
744
  // We need to handle global styles
745
  function pagelayer_global_styles(){
746
 
747
  global $pagelayer, $post;
748
 
 
 
 
 
 
 
749
  $styles = '<style id="pagelayer-wow-animation-style" type="text/css">.pagelayer-wow{visibility: hidden;}</style>
750
  <style id="pagelayer-global-styles" type="text/css">'.PHP_EOL;
751
 
 
 
 
 
 
 
 
 
 
752
  // Style for only child row holder
753
  $styles .= '.pagelayer-row-stretch-auto > .pagelayer-row-holder, .pagelayer-row-stretch-full > .pagelayer-row-holder.pagelayer-width-auto{ max-width: '.$pagelayer->settings['max_width'].'px; margin-left: auto; margin-right: auto;}'.PHP_EOL;
754
 
@@ -799,6 +830,43 @@ function pagelayer_global_styles(){
799
  continue;
800
  }
801
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
802
  $pagelayer->css[$k.$suffix] = $tmp;
803
  }
804
  }
@@ -880,10 +948,22 @@ function pagelayer_global_styles(){
880
  continue;
881
  }
882
 
883
- if(in_array($kk, $arrays)){
 
 
 
 
 
 
 
 
 
 
 
 
884
  $skel = [0, 0, 0, 0];
885
  $vv = array_replace($skel, $vv);
886
- $vv = implode('px ', $vv).'px';
887
  }
888
 
889
  $r[] = $kk.':'.$vv.(in_array($kk, $pxs) ? 'px' : '');
@@ -1206,7 +1286,7 @@ function pagelayer_plugin_action_links($links){
1206
  }
1207
 
1208
  // Add custom header
1209
- add_action('wp_head', 'pagelayer_add_custom_head');
1210
  function pagelayer_add_custom_head(){
1211
  global $post;
1212
 
5
 
6
  define('PAGELAYER_BASE', plugin_basename(PAGELAYER_FILE));
7
  define('PAGELAYER_PRO_BASE', 'pagelayer-pro/pagelayer-pro.php');
8
+ define('PAGELAYER_VERSION', '1.6.8');
9
  define('PAGELAYER_DIR', dirname(PAGELAYER_FILE));
10
  define('PAGELAYER_SLUG', 'pagelayer');
11
  define('PAGELAYER_URL', plugins_url('', PAGELAYER_FILE));
122
 
123
  // Any custom types
124
  $pagelayer->settings['post_types'] = apply_filters('pagelayer_supported_post_type', $pagelayer->settings['post_types']);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
125
 
126
  // Load the language
127
  load_plugin_textdomain('pagelayer', false, PAGELAYER_SLUG.'/languages/');
182
  add_action('admin_notices', 'pagelayer_getting_started_notice');
183
  }
184
 
185
+ include_once(PAGELAYER_DIR.'/main/customizer.php');
186
+
187
  if(class_exists('WooCommerce')){
188
  //include_once(PAGELAYER_DIR.'/main/woocommerce.php');
189
  }
609
  // Fetch body font if given
610
  if(!empty($set['font-family'])){
611
 
612
+ $val = $set['font-family'];
613
+ $font_weights = array('400' =>'400');
614
  $font_style = empty($set['font-style']) ? 'normal' : $set['font-style'];
615
  $font_style = in_array($font_style, ['italic', 'oblique']) ? 'i' : '';
616
 
617
+ if(!empty($set['font-weight'])){
618
+ $font_weights[$set['font-weight'].$font_style] = $set['font-weight'].$font_style;
619
+ }
620
+
621
+ $pagelayer->runtime_fonts[$val] = $font_weights;
622
 
623
  }
624
 
701
 
702
  }
703
 
704
+ // We need to handle global styles
705
+ function pagelayer_load_global_css(){
706
+ global $pagelayer;
707
+
708
+ // Load CSS settings
709
+ foreach($pagelayer->css_settings as $k => $params){
710
+ foreach($pagelayer->screens as $sk => $sv){
711
+ $suffix = (!empty($sv) ? '_'.$sv : '');
712
+ $setting = empty($params['key']) ? 'pagelayer_'.$k.'_css' : $params['key'];
713
+ $tmp = get_option($setting.$suffix);
714
+
715
+ if(empty($tmp)){
716
+ continue;
717
+ }
718
+
719
+ $tmp = pagelayer_sanitize_global_style($tmp);
720
+
721
+ $pagelayer->css[$k.$suffix] = $tmp;
722
+ }
723
+ }
724
+
725
+ // Backward compat for colors
726
+ if(!empty($pagelayer->settings['color']['background']) && empty($pagelayer->css['body']['background-color'])){
727
+ $pagelayer->css['body']['background-color'] = $pagelayer->settings['color']['background'];
728
+ }
729
+
730
+ if(!empty($pagelayer->settings['color']['text']) && empty($pagelayer->css['body']['color'])){
731
+ $pagelayer->css['body']['color'] = $pagelayer->settings['color']['text'];
732
+ }
733
+
734
+ // Link Color
735
+ if(!empty($pagelayer->settings['color']['link']) && empty($pagelayer->css['a']['color'])){
736
+ $pagelayer->css['a']['color'] = $pagelayer->settings['color']['link'];
737
+ }
738
+
739
+ // Link Hover Color
740
+ if(!empty($pagelayer->settings['color']['link-hover']) && empty($pagelayer->css['a-hover']['color'])){
741
+ $pagelayer->css['a-hover']['color'] = $pagelayer->settings['color']['link-hover'];
742
+ }
743
+
744
+ // Headings Color
745
+ if(!empty($pagelayer->settings['color']['heading'])){
746
+ $htmp = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
747
+ foreach($htmp as $k => $v){
748
+ if(empty($pagelayer->css[$v]['color'])){
749
+ $pagelayer->css[$v]['color'] = $pagelayer->settings['color']['heading'];
750
+ }
751
+ }
752
+ }
753
+
754
+ // Backward compat for body font
755
+ if(!empty($pagelayer->settings['body_font'])){
756
+ $pagelayer->settings['body']['font-family'] = $pagelayer->settings['body_font'];
757
+ }
758
+ }
759
+
760
  // We need to handle global styles
761
  function pagelayer_global_styles(){
762
 
763
  global $pagelayer, $post;
764
 
765
+ // Load global colors and fonts
766
+ pagelayer_load_global_palette();
767
+
768
+ // Load css from settings
769
+ pagelayer_load_global_css();
770
+
771
  $styles = '<style id="pagelayer-wow-animation-style" type="text/css">.pagelayer-wow{visibility: hidden;}</style>
772
  <style id="pagelayer-global-styles" type="text/css">'.PHP_EOL;
773
 
774
+ $styles .= ':root{';
775
+
776
+ // Set global colors
777
+ foreach($pagelayer->global_colors as $gk => $gv){
778
+ $styles .= '--pagelayer-color-'.$gk.':'.$gv['value'].';';
779
+ }
780
+
781
+ $styles .= '}'.PHP_EOL;
782
+
783
  // Style for only child row holder
784
  $styles .= '.pagelayer-row-stretch-auto > .pagelayer-row-holder, .pagelayer-row-stretch-full > .pagelayer-row-holder.pagelayer-width-auto{ max-width: '.$pagelayer->settings['max_width'].'px; margin-left: auto; margin-right: auto;}'.PHP_EOL;
785
 
830
  continue;
831
  }
832
 
833
+ $tmp = pagelayer_sanitize_global_style($tmp);
834
+
835
+ if(!empty($pagelayer->css[$k.$suffix])){
836
+
837
+ $typo_on = false;
838
+ $_typo = array();
839
+ $typo = array('font-family', 'font-size', 'font-style', 'font-weight', 'font-variant', 'text-decoration-line', 'text-decoration-style', 'line-height', 'text-transform', 'letter-spacing', 'word-spacing');
840
+
841
+ // Check if all font properties are empty then we do not overright the global typo styles
842
+ foreach($typo as $prop){
843
+
844
+ if(!empty($tmp[$prop])){
845
+ $typo_on = true;
846
+ }
847
+
848
+ $_typo[$prop] = empty($tmp[$prop]) ? '' : $tmp[$prop];
849
+ }
850
+
851
+ foreach($tmp as $tkk => $tvv){
852
+
853
+ $tvv_is_empty = is_array($tvv) ? pagelayer_is_empty_array($tvv) : empty($tvv);
854
+
855
+ // Skip update for empty value and if type is empty
856
+ if($tvv_is_empty || in_array($tkk, $typo)){
857
+ continue;
858
+ }
859
+
860
+ $pagelayer->css[$k.$suffix][$tkk] = $tvv;
861
+ }
862
+
863
+ if($typo_on){
864
+ $pagelayer->css[$k.$suffix] = array_merge($pagelayer->css[$k.$suffix], $_typo);
865
+ }
866
+
867
+ continue;
868
+ }
869
+
870
  $pagelayer->css[$k.$suffix] = $tmp;
871
  }
872
  }
948
  continue;
949
  }
950
 
951
+ if(in_array($kk, $arrays)){
952
+ $unit = 'px';
953
+
954
+ if(!empty($vv['unit'])){
955
+ $unit = $vv['unit'];
956
+ unset($vv['unit']);
957
+ }
958
+
959
+ $vv = array_filter($vv, function($value){ return !empty($value);});
960
+ if(empty($vv)){
961
+ continue;
962
+ }
963
+
964
  $skel = [0, 0, 0, 0];
965
  $vv = array_replace($skel, $vv);
966
+ $vv = implode($unit.' ', $vv).$unit;
967
  }
968
 
969
  $r[] = $kk.':'.$vv.(in_array($kk, $pxs) ? 'px' : '');
1286
  }
1287
 
1288
  // Add custom header
1289
+ add_action('wp_head', 'pagelayer_add_custom_head', 102);
1290
  function pagelayer_add_custom_head(){
1291
  global $post;
1292
 
js/customizer.js ADDED
@@ -0,0 +1,914 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ var pagelayer_fontHtmlArray = {};
2
+
3
+ (function($) {
4
+ var api = wp.customize;
5
+
6
+ api.bind( 'ready', function() {
7
+
8
+ var controls = api.settings.controls;
9
+
10
+ for(var control in controls){
11
+ if( !('show_filter' in controls[control]) ){
12
+ continue;
13
+ }
14
+
15
+ var filter = controls[control]['show_filter'];
16
+ for(var showParam in filter){
17
+ var except = showParam.substr(0, 1) == '!' ? true : false;
18
+ showParam = except ? showParam.substr(1) : showParam;
19
+
20
+ // Show and Hide Controls
21
+ api( showParam, function( setting ){
22
+ api.control( control, function( _control ) {
23
+ var visibility = function() {
24
+ var _filter = _control.params['show_filter'];
25
+ for(var _showParam in _filter){
26
+ var reqval = _filter[_showParam];
27
+ var val = setting.get();
28
+
29
+ var toShow = false;
30
+
31
+ if(typeof reqval == 'string' && reqval == val){
32
+ toShow = true;
33
+ }
34
+
35
+ // Its an array and a value is found, then dont show
36
+ if(typeof reqval != 'string' && reqval.indexOf(val) > -1){
37
+ toShow = true;
38
+ }
39
+
40
+ if(except && !toShow || !except && toShow ){
41
+ _control.container.show();
42
+ return
43
+ }
44
+
45
+ _control.container.hide();
46
+ }
47
+
48
+ };
49
+
50
+ visibility();
51
+ setting.bind( visibility );
52
+ });
53
+ });
54
+ }
55
+ }
56
+
57
+ // Expand pagelayer setting handler
58
+ api.panel('pagelayer_settings', function( panel ){
59
+ panel.expanded.bind(function( isExpanding ){
60
+ pagelayer_alpha_color_control_init(); // Init Alpha color
61
+ });
62
+ });
63
+
64
+ // Expand pagelayer setting handler
65
+ api.section('pagelayer_global_fonts_sec', function( section ){
66
+ section.expanded.bind(function( isExpanding ){
67
+
68
+ // Set default value
69
+ section.container.find('select[data-font-key]').each(function(){
70
+ var ref = jQuery(this),
71
+ name = ref.attr('data-font-key'),
72
+ value = ref.attr('data-default-value');
73
+
74
+ ref.html(pagelayer_fontHtmlArray[name]).val(value);
75
+ ref.removeAttr('data-font-key');
76
+ });
77
+ });
78
+ });
79
+
80
+
81
+ });
82
+
83
+ })(jQuery);
84
+
85
+ /**
86
+ * Initialization trigger.
87
+ */
88
+ jQuery(document).ready( function(){
89
+
90
+ var option = function(val, lang){
91
+ var lang = lang || 'Default';
92
+ return '<option value="'+val+'">'+lang+'</option>';
93
+ }
94
+
95
+ // Create font setting list
96
+ for(var sk in pagelayer_global_font_settings){
97
+ var sval = pagelayer_global_font_settings[sk];
98
+ if('choices' in sval){
99
+ var fontHtml = '';
100
+ for( var value in sval['choices'] ) {
101
+
102
+ if(typeof sval['choices'][value] !== 'object'){
103
+ fontHtml += option(value, sval['choices'][value]);
104
+ continue;
105
+ }
106
+
107
+ if(value != 'default'){
108
+ fontHtml += '<optgroup label="'+value+'">';
109
+ }
110
+
111
+ for (x in sval['choices'][value]){
112
+ fontHtml += option((jQuery.isNumeric(x) ? sval['choices'][value][x] : x), sval['choices'][value][x]);
113
+ }
114
+ }
115
+
116
+ pagelayer_fontHtmlArray[sk] = fontHtml;
117
+ }
118
+ }
119
+
120
+ // Show hide typography
121
+ jQuery(document).on('click.pagelayer-typo-icon', function (e){
122
+ var target = jQuery(e.target);
123
+ var isTypo = target.closest('.pagelayer-control-typo');
124
+ var isIcon = target.closest('.pagelayer-control-typo-icon');
125
+ var typoHolder = isIcon.closest('.pagelayer-control-typo-holder');
126
+
127
+ if(isTypo.length > 0){
128
+ return;
129
+ }
130
+
131
+ if(isIcon.length > 0){
132
+
133
+ // Set default value
134
+ typoHolder.find('select[data-font-key]').each(function(){
135
+ var ref = jQuery(this),
136
+ name = ref.attr('data-font-key'),
137
+ value = ref.attr('data-default-value');
138
+
139
+ ref.html(pagelayer_fontHtmlArray[name]).val(value);
140
+ ref.removeAttr('data-font-key');
141
+ });
142
+
143
+ typoHolder.find('.pagelayer-control-typo').slideToggle(100);
144
+
145
+ // Remove global font
146
+ typoHolder.find('.pagelayer-control-global-typo-icon').removeClass('pagelayer-active-global');
147
+ typoHolder.find('.pagelayer-global-selected').removeClass('pagelayer-global-selected');
148
+ typoHolder.find('.pagelayer-global-font-input').val('').trigger('input');
149
+ return;
150
+ }
151
+
152
+ jQuery('.pagelayer-control-typo').slideUp(100);
153
+ });
154
+
155
+ // Show hide global color option
156
+ jQuery(document).on('click.pagelayer-global-color-icon', function (e){
157
+ var target = jQuery(e.target);
158
+ var isGcolor = target.closest('.pagelayer-global-color-list');
159
+ var isGIcon = target.closest('.pagelayer-control-global-color-icon');
160
+
161
+ if(isGcolor.length > 0){
162
+ return;
163
+ }
164
+
165
+ if(isGIcon.length > 0){
166
+ var listEle = isGIcon.closest('li').find('.pagelayer-global-color-list');
167
+ jQuery('.pagelayer-global-color-list').not(listEle).slideUp(100);
168
+ listEle.slideToggle(100);
169
+ return;
170
+ }
171
+
172
+ jQuery('.pagelayer-global-color-list').slideUp(100);
173
+ });
174
+
175
+ // Hide global color option
176
+ jQuery(document).on('focus', '.wp-color-result', function(e){
177
+ jQuery('.pagelayer-global-color-list').slideUp(100);
178
+ });
179
+
180
+ // Show hide global fonts option
181
+ jQuery(document).on('click.pagelayer-global-typo-icon', function (e){
182
+ var target = jQuery(e.target);
183
+ var isGcolor = target.closest('.pagelayer-global-font-list');
184
+ var isGIcon = target.closest('.pagelayer-control-global-typo-icon');
185
+ var typoHolder = isGIcon.closest('.pagelayer-control-typo-holder');
186
+
187
+ if(isGcolor.length > 0){
188
+ return;
189
+ }
190
+
191
+ if(isGIcon.length > 0){
192
+ typoHolder.find('.pagelayer-global-font-list').slideToggle(100);
193
+ return;
194
+ }
195
+
196
+ jQuery('.pagelayer-global-font-list').slideUp(100);
197
+ });
198
+
199
+ // Device handler
200
+ jQuery('.pagelayer-devices button').on('click', function(){
201
+ var device = jQuery(this).data('device');
202
+ var devices = {'desktop' : 'tablet', 'tablet' : 'mobile', 'mobile' : 'desktop'};
203
+ jQuery('.devices-wrapper .devices [data-device="'+devices[device]+'"]').click();
204
+ });
205
+
206
+ // Device handler
207
+ jQuery('.devices-wrapper .devices button[data-device]').on('click', function(){
208
+ var device = jQuery(this).data('device');
209
+
210
+ jQuery('.pagelayer-devices .active-device').removeClass('active-device');
211
+ jQuery('.pagelayer-devices [data-device="'+device+'"]').addClass('active-device');
212
+
213
+ jQuery('[data-device-detector]').each(function(){
214
+ if(jQuery(this).find('[data-show-device="_'+device+'"]').length < 1){
215
+ return;
216
+ }
217
+
218
+ jQuery(this).attr('data-device-detector', device);
219
+ });
220
+ });
221
+
222
+ // Units handler
223
+ jQuery('.pagelayer-units').each(function(){
224
+ var units = jQuery(this);
225
+ var uList = units.find('[data-unit]');
226
+ var input = units.find('.pagelayer-unit-input');
227
+ var uActive = units.find('[data-unit="'+input.val()+'"]');
228
+
229
+ units.find('[data-unit]').on('click', function(){
230
+ var uEle = jQuery(this);
231
+ uList.removeClass('active');
232
+ uEle.addClass('active');
233
+ input.val(uEle.data('unit')).trigger('input');
234
+ });
235
+
236
+ if(uActive.length > 0){
237
+ uActive.click();
238
+ return;
239
+ }
240
+
241
+ //uList.first().click();
242
+
243
+ });
244
+
245
+ // Accordion Tab handlers
246
+ jQuery('.pagelayer-accordion-tab').on('click', function(){
247
+ var toggle = jQuery(this);
248
+ var allToggle = toggle.closest('ul').find('.pagelayer-accordion-tab').not(toggle);
249
+
250
+ allToggle.nextUntil('.pagelayer-accordion-tab').slideUp();
251
+ allToggle.removeClass('pagelayer-active-accordion-tab')
252
+ toggle.nextUntil('.pagelayer-accordion-tab').slideToggle();
253
+
254
+ toggle.toggleClass('pagelayer-active-accordion-tab');
255
+ });
256
+
257
+ // Close all accordion tabs
258
+ jQuery('.pagelayer-accordion-tab').nextUntil('.pagelayer-accordion-tab').hide();
259
+
260
+ // Link padding control field handler
261
+ jQuery('.pagelayer-control-padding').each(function(){
262
+ pagelayer_control_padding_handler(jQuery(this));
263
+ });
264
+
265
+ // Link Global Color Palette
266
+ jQuery('.pagelayer-global-setting-color .dashicons').click(function(){
267
+ jQuery('#accordion-section-pagelayer_global_colors_sec .accordion-section-title').click();
268
+ });
269
+
270
+ // Link Global Font Palette
271
+ jQuery('.pagelayer-global-setting-font .dashicons').click(function(){
272
+ jQuery('#accordion-section-pagelayer_global_fonts_sec .accordion-section-title').click();
273
+ });
274
+
275
+ // Color Palette Custom Control
276
+ pagelayer_color_palette_control_handler();
277
+
278
+ // Color Palette Custom Control
279
+ pagelayer_font_palette_control_handler();
280
+
281
+ // Global color list handler
282
+ pagelayer_global_color_list_handler();
283
+
284
+ // Global font list handler
285
+ pagelayer_global_font_list_handler();
286
+
287
+ });
288
+
289
+ // Global font list handler
290
+ function pagelayer_global_font_list_handler(){
291
+
292
+ var font_list = '';
293
+
294
+ // Create global font list
295
+ for(var font in pagelayer_global_fonts){
296
+ font_list += '<div class="pagelayer-global-font-list-item" data-global-id="'+font+'">'+
297
+ '<span class="pagelayer-global-font-title">'+ pagelayer_global_fonts[font]['title'] +'</span>'+
298
+ '</div>';
299
+ }
300
+
301
+ jQuery('.customize-control-pagelayer-typo-control .pagelayer-control-typo-holder').each(function(){
302
+ var fHolder = jQuery(this);
303
+ var fList = fHolder.find('.pagelayer-global-font-list');
304
+
305
+ if(fList.length < 1){
306
+ return;
307
+ }
308
+
309
+ // Add list of font list
310
+ fList.append(font_list);
311
+
312
+ var selectfont = fList.find('.pagelayer-global-font-input').data('key');
313
+ fList.find('[data-global-id="'+selectfont+'"]').addClass('pagelayer-global-selected');
314
+ });
315
+
316
+ // Set active
317
+ jQuery('.pagelayer-global-font-list-item.pagelayer-global-selected').closest('.pagelayer-control-typo-holder').find('.pagelayer-control-global-typo-icon').addClass('pagelayer-active-global');
318
+
319
+ jQuery(document).on('click', '.pagelayer-global-font-list-item', function(){
320
+ var listItem = jQuery(this);
321
+ var globalID = listItem.data('global-id');
322
+ var listHolder = listItem.closest('.pagelayer-global-font-list');
323
+
324
+ // Remove previous selecttion
325
+ listHolder.find('.pagelayer-global-selected').removeClass('pagelayer-global-selected')
326
+ listItem.addClass('pagelayer-global-selected');
327
+ listHolder.hide();
328
+
329
+ var key = listHolder.find( '.pagelayer-global-font-input' ).attr( 'data-customize-setting-link' );
330
+
331
+ // Set the actual option value to empty string.
332
+ wp.customize( key, function( obj ) {
333
+ obj.set(globalID);
334
+ });
335
+
336
+ listItem.closest('.pagelayer-control-typo-holder').find('.pagelayer-control-global-typo-icon').addClass('pagelayer-active-global');
337
+ });
338
+ }
339
+
340
+ // Global color list handler
341
+ function pagelayer_global_color_list_handler(){
342
+
343
+ jQuery(document).on('click', '.pagelayer-global-color-list-item', function(e, skip_update){
344
+
345
+ skip_update = skip_update || false;
346
+
347
+ var listItem = jQuery(this);
348
+ var globalID = listItem.data('global-id');
349
+ var listHolder = listItem.closest('.pagelayer-global-color-list');
350
+
351
+ // Remove previous selecttion
352
+ listHolder.find('.pagelayer-global-selected').removeClass('pagelayer-global-selected');
353
+ listItem.addClass('pagelayer-global-selected');
354
+ listHolder.hide();
355
+
356
+ var input = listItem.closest('li').find( '.pagelayer-alpha-color-control' )
357
+ var code = '$'+globalID;
358
+ var color = pagelayer_global_colors[globalID]['value'];
359
+
360
+ input.unbind('change.pagelayer_global input.pagelayer_global color_change.pagelayer_global');
361
+
362
+ if(!skip_update){
363
+ var key = input.attr( 'data-customize-setting-link' );
364
+
365
+ // Set the actual option value to empty string.
366
+ wp.customize( key, function( obj ) {
367
+ obj.set(code);
368
+ });
369
+ }
370
+
371
+ // Set the actual option value to empty string.
372
+ input.val( color );
373
+ input.closest('.wp-picker-container').find('.wp-color-result').css({'background-color': color});
374
+
375
+ input.on('change.pagelayer_global input.pagelayer_global color_change.pagelayer_global', function(){
376
+ var colorCode = jQuery(this).val();
377
+ if(jQuery.trim(colorCode) == color){
378
+ return;
379
+ }
380
+ listItem.closest('li').find('.pagelayer-control-global-color-icon').removeClass('pagelayer-active-global');
381
+ listHolder.find('.pagelayer-global-selected').removeClass('pagelayer-global-selected');
382
+ });
383
+
384
+ listItem.closest('li').find('.pagelayer-control-global-color-icon').addClass('pagelayer-active-global');
385
+ });
386
+
387
+ jQuery('.pagelayer-global-color-list-item.pagelayer-global-selected').trigger('click', [true]);
388
+ }
389
+
390
+ var pagelayer_global_colors_timmer = {};
391
+ // Color palette Custom Control
392
+ function pagelayer_color_palette_control_handler(){
393
+
394
+ var global_palette = jQuery('#customize-control-pagelayer_global_colors');
395
+
396
+ // Get the values from the repeater input fields and add to our hidden field
397
+ var pagelayerGetAllInputs = function() {
398
+
399
+ var pagelayer_colors_palette = {};
400
+
401
+ global_palette.find('.pagelayer-alpha-color-control').each(function(){
402
+ var cEle = jQuery(this);
403
+ var id = cEle.data('id');
404
+
405
+ pagelayer_colors_palette[id] = {
406
+ 'title' : cEle.closest('.pagelayer-color-holder').find('.pagelayer-color-title').text(),
407
+ 'value' : cEle.val(),
408
+ }
409
+ });
410
+
411
+ var inputValues = JSON.stringify(pagelayer_colors_palette);
412
+
413
+ // Add all the values from our repeater fields to the hidden field (which is the one that actually gets saved)
414
+ global_palette.find('.pagelayer-color-palette-data').val(inputValues).trigger('change');
415
+ }
416
+
417
+ // Append a new row to our list of elements
418
+ var pagelayer_add_row = function(ele, val = ''){
419
+
420
+ var id = pagelayer_generate_randstr(6);
421
+ var name = ele.find('.pagelayer-color-holder').length - 3;
422
+
423
+ var newRow = jQuery('<div class="pagelayer-color-holder"><span class="pagelayer-color-title" contenteditable="true">Color #'+name+'</span><span class="pagelayer-color-controls">'+val+'</span><span class="customize-control-color-repeater-delete"><span class="dashicons dashicons-no-alt"></span></span><input class="pagelayer-alpha-color-control" type="text" data-show-opacity="true" data-palette="true" data-default-color="'+val+'" data-id="'+id+'" data-title="New Color"/></div>');
424
+
425
+ ele.find('.pagelayer-color-holder:last').after(newRow);
426
+ pagelayer_alpha_color_control_init();
427
+
428
+ // Update global variable
429
+ ele.find('.pagelayer-alpha-color-control').trigger('color_change');
430
+ }
431
+
432
+ jQuery(document).on('color_change change', '#customize-control-pagelayer_global_colors .pagelayer-alpha-color-control, #customize-control-pagelayer_global_colors .pagelayer-color-title', function(){
433
+
434
+ var cEle = jQuery(this);
435
+
436
+ clearTimeout(pagelayer_global_colors_timmer);
437
+ pagelayer_global_colors_timmer = setTimeout(function(){
438
+ cEle.closest('.pagelayer-color-holder').find('.pagelayer-color-controls').html(cEle.val());
439
+ pagelayerGetAllInputs();
440
+ }, 300);
441
+
442
+ });
443
+
444
+ jQuery(document).on('input', '#customize-control-pagelayer_global_colors .pagelayer-color-title', function(){
445
+ clearTimeout(pagelayer_global_colors_timmer);
446
+ pagelayer_global_colors_timmer = setTimeout(function(){
447
+ pagelayerGetAllInputs();
448
+ }, 500);
449
+ });
450
+
451
+ // Add new item
452
+ jQuery('.customize-control-color-repeater-add').click(function(event) {
453
+ event.preventDefault();
454
+ pagelayer_add_row(jQuery(this).parent());
455
+ });
456
+
457
+ // Remove item starting from it's parent element
458
+ jQuery(document).on('click', '.pagelayer-color-holder .customize-control-color-repeater-delete .dashicons', function(event) {
459
+ event.preventDefault();
460
+ var numItems = jQuery(this).closest('.pagelayer-color-holder').remove();
461
+ pagelayerGetAllInputs();
462
+ });
463
+ }
464
+
465
+ // Font palette Custom Control
466
+ function pagelayer_font_palette_control_handler(){
467
+
468
+ var global_palette = jQuery('#customize-control-pagelayer_global_fonts');
469
+
470
+ // Get the values from the repeater input fields and add to our hidden field
471
+ var pagelayerGetAllInputs = function() {
472
+
473
+ var pagelayer_colors_palette = {};
474
+ global_palette.find('.pagelayer-font-holder').each(function(){
475
+ var cEle = jQuery(this);
476
+ var id = cEle.data('id');
477
+ var data = {};
478
+
479
+ var array = cEle.find('input, textarea, select').serializeArray();
480
+ jQuery.each(array, function () {
481
+ data[this.name] = this.value || "";
482
+ });
483
+
484
+ pagelayer_colors_palette[id] = {
485
+ 'title' : cEle.children('.pagelayer-font-title').text(),
486
+ 'value' : data,
487
+ }
488
+ });
489
+
490
+ var inputValues = JSON.stringify(pagelayer_colors_palette);
491
+
492
+ // Add all the values from our repeater fields to the hidden field (which is the one that actually gets saved)
493
+ global_palette.find('.pagelayer-font-palette-data').val(inputValues).trigger('change');
494
+ }
495
+
496
+ // Append a new row to our list of elements
497
+ var pagelayer_add_row = function(ele, val = ''){
498
+
499
+ var id = pagelayer_generate_randstr(6);
500
+ var name = ele.find('.pagelayer-font-holder').length - 3;
501
+ var fontHtml = '';
502
+
503
+ var option = function(val, lang){
504
+ var selected = '';//(val != prop.c['val']) ? '' : 'selected="selected"';
505
+ var lang = lang || 'Default';
506
+ return '<option value="'+val+'" '+selected+'>'+lang+'</option>';
507
+ }
508
+
509
+ fontHtml += '<div class="pagelayer-font-holder" data-id="'+id+'"><span class="pagelayer-font-title" contenteditable="true">New Font #'+ name +'</span><span class="customize-control-font-repeater-delete"><span class="dashicons dashicons-no-alt"></span></span><div class="pagelayer-control-typo-holder"><span class="pagelayer-control-typo-icon dashicons dashicons-edit"></span><div class="pagelayer-control-typo">';
510
+
511
+ for(var sk in pagelayer_global_font_settings){
512
+ var sval = pagelayer_global_font_settings[sk];
513
+
514
+ fontHtml += '<div class="pagelayer-control-typo-fields">'+
515
+ '<label class="pagelayer-control-typo-fields-label">'+sval['label'] +'</label>';
516
+
517
+ if('choices' in sval){
518
+ fontHtml += '<select name="'+ sk +'">';
519
+ for( var value in sval['choices'] ) {
520
+ if(typeof sval['choices'][value] !== 'object'){
521
+ fontHtml += option(value, sval['choices'][value]);
522
+ continue;
523
+ }
524
+
525
+ if(value != 'default'){
526
+ fontHtml += '<optgroup label="'+value+'">';
527
+ }
528
+
529
+ for (x in sval['choices'][value]){
530
+ fontHtml += option((jQuery.isNumeric(x) ? sval['choices'][value][x] : x), sval['choices'][value][x]);
531
+ }
532
+
533
+ }
534
+ fontHtml += '</select>';
535
+ }else{
536
+ fontHtml += '<input type="number" name="'+ sk +'">';
537
+ }
538
+ fontHtml += '</div>';
539
+ }
540
+
541
+ fontHtml += '</div></div></div>';
542
+
543
+ ele.find('.customize-control-font-repeater-add').before(fontHtml);
544
+ }
545
+
546
+ jQuery(document).on('change input', '#customize-control-pagelayer_global_fonts input, #customize-control-pagelayer_global_fonts textarea, #customize-control-pagelayer_global_fonts select', function(){
547
+
548
+ clearTimeout(pagelayer_global_colors_timmer);
549
+ pagelayer_global_colors_timmer = setTimeout(function(){
550
+ pagelayerGetAllInputs();
551
+ }, 300);
552
+ });
553
+
554
+ jQuery(document).on('input', '#customize-control-pagelayer_global_fonts .pagelayer-font-title', function(){
555
+ clearTimeout(pagelayer_global_colors_timmer);
556
+ pagelayer_global_colors_timmer = setTimeout(function(){
557
+ pagelayerGetAllInputs();
558
+ }, 500);
559
+ });
560
+
561
+ // Add new item
562
+ jQuery('.customize-control-font-repeater-add').click(function(event) {
563
+ event.preventDefault();
564
+ pagelayer_add_row(jQuery(this).parent());
565
+ pagelayerGetAllInputs();
566
+ });
567
+
568
+ // Remove item starting from it's parent element
569
+ jQuery(document).on('click', '.pagelayer-font-holder .customize-control-font-repeater-delete .dashicons', function(event) {
570
+ event.preventDefault();
571
+ var numItems = jQuery(this).closest('.pagelayer-font-holder').remove();
572
+ pagelayerGetAllInputs();
573
+ });
574
+ }
575
+
576
+ // Padding handler
577
+ function pagelayer_control_padding_handler(jEle){
578
+
579
+ var linked = jEle.find('.dashicons-admin-links');
580
+ var inputs = jEle.find('.pagelayer-padding-input');
581
+ var is_same = true;
582
+ var first_val = jEle.find('.pagelayer-padding-input').first().val();
583
+
584
+ jEle.find('.pagelayer-padding-input').each(function(){
585
+ if(jQuery(this).val() == first_val){
586
+ return;
587
+ }
588
+ is_same = false;
589
+ return false;
590
+ });
591
+
592
+
593
+ if(is_same){
594
+ linked.addClass('pagelayer-padding-linked');
595
+ }
596
+
597
+ linked.on('click', function (e){
598
+ jQuery(this).toggleClass('pagelayer-padding-linked');
599
+ });
600
+
601
+ inputs.on('change', function(){
602
+
603
+ // Are the values linked
604
+ if(! linked.hasClass('pagelayer-padding-linked')){
605
+ return;
606
+ }
607
+
608
+ var val = jQuery(this).val();
609
+ inputs.each(function(){
610
+ jQuery(this).val(val);
611
+ jQuery(this).trigger('input');
612
+ });
613
+ });
614
+
615
+ }
616
+
617
+ /**
618
+ * Alpha Color Picker JS
619
+ *
620
+ * This file includes several helper functions and the core control JS.
621
+ */
622
+ function pagelayer_alpha_color_control_init(){
623
+
624
+ var timeOut = 0;
625
+ // Loop over each control and transform it into our color picker.
626
+ jQuery( '.pagelayer-alpha-color-control' ).each( function() {
627
+ // Scope the vars.
628
+ var $control, startingColor, paletteInput, showOpacity, defaultColor, palette,
629
+ colorPickerOptions, $container, $alphaSlider, alphaVal, sliderOptions;
630
+
631
+ // Store the control instance.
632
+ $control = jQuery( this );
633
+
634
+ if($control.closest('.wp-picker-holder').length > 0){
635
+ return;
636
+ }
637
+
638
+ setTimeout(function(){
639
+ // Get a clean starting value for the option.
640
+ startingColor = $control.val().replace( /\s+/g, '' );
641
+
642
+ // Get some data off the control.
643
+ paletteInput = $control.attr( 'data-palette' );
644
+ showOpacity = $control.attr( 'data-show-opacity' );
645
+ defaultColor = $control.attr( 'data-default-color' );
646
+
647
+ // Process the palette.
648
+ if ( paletteInput.indexOf( '|' ) !== -1 ) {
649
+ palette = paletteInput.split( '|' );
650
+ } else if ( 'false' == paletteInput ) {
651
+ palette = false;
652
+ } else {
653
+ palette = true;
654
+ }
655
+
656
+ // Set up the options that we'll pass to wpColorPicker().
657
+ colorPickerOptions = {
658
+ change: function( event, ui ) {
659
+ var key, value, alpha, $transparency;
660
+
661
+ key = $control.attr( 'data-customize-setting-link' );
662
+ value = $control.wpColorPicker( 'color' );
663
+
664
+ // Set the opacity value on the slider handle when the default color button is clicked.
665
+ if ( defaultColor == value ) {
666
+ alpha = pagelayer_get_alpha_value_from_color( value );
667
+ $alphaSlider.find( '.ui-slider-handle' ).text( alpha );
668
+ }
669
+
670
+ // Send ajax request to wp.customize to trigger the Save action.
671
+ wp.customize( key, function( obj ) {
672
+ obj.set( value );
673
+ });
674
+
675
+ $transparency = $container.find( '.transparency' );
676
+
677
+ // Always show the background color of the opacity slider at 100% opacity.
678
+ $transparency.css( 'background-color', ui.color.toString( 'no-alpha' ) );
679
+ $control.trigger('color_change');
680
+ },
681
+ palettes: palette // Use the passed in palette.
682
+ };
683
+
684
+ // Create the colorpicker.
685
+ $control.wpColorPicker( colorPickerOptions );
686
+
687
+ $container = $control.parents( '.wp-picker-container:first' );
688
+
689
+ // Insert our opacity slider.
690
+ jQuery( '<div class="alpha-color-picker-container">' +
691
+ '<div class="min-click-zone click-zone"></div>' +
692
+ '<div class="max-click-zone click-zone"></div>' +
693
+ '<div class="alpha-slider"></div>' +
694
+ '<div class="transparency"></div>' +
695
+ '</div>' ).appendTo( $container.find( '.wp-picker-holder' ) );
696
+
697
+ $alphaSlider = $container.find( '.alpha-slider' );
698
+
699
+ // If starting value is in format RGBa, grab the alpha channel.
700
+ alphaVal = pagelayer_get_alpha_value_from_color( startingColor );
701
+
702
+ // Set up jQuery UI slider() options.
703
+ sliderOptions = {
704
+ create: function( event, ui ) {
705
+ var value = jQuery( this ).slider( 'value' );
706
+
707
+ // Set up initial values.
708
+ jQuery( this ).find( '.ui-slider-handle' ).text( value );
709
+ jQuery( this ).siblings( '.transparency ').css( 'background-color', startingColor );
710
+ },
711
+ value: alphaVal,
712
+ range: 'max',
713
+ step: 1,
714
+ min: 0,
715
+ max: 100,
716
+ animate: 300
717
+ };
718
+
719
+ // Initialize jQuery UI slider with our options.
720
+ $alphaSlider.slider( sliderOptions );
721
+
722
+ // Maybe show the opacity on the handle.
723
+ if( 'true' == showOpacity ){
724
+ $alphaSlider.find( '.ui-slider-handle' ).addClass( 'show-opacity' );
725
+ }
726
+
727
+ // Move input box inside the picker holder
728
+ $control.closest('.wp-picker-input-wrap').each(function () {
729
+ jQuery(this).next('.wp-picker-holder').prepend(jQuery(this));
730
+ });
731
+
732
+ // Bind event handlers for the click zones.
733
+ $container.find( '.min-click-zone' ).on( 'click', function() {
734
+ pagelayer_update_alpha_value_on_color_control( 0, $control, $alphaSlider, true );
735
+ });
736
+
737
+ $container.find( '.max-click-zone' ).on( 'click', function() {
738
+ pagelayer_update_alpha_value_on_color_control( 100, $control, $alphaSlider, true );
739
+ });
740
+
741
+ // Bind event handler for clicking on a palette color.
742
+ $container.find( '.iris-palette' ).on( 'click', function() {
743
+ var color, alpha;
744
+
745
+ color = jQuery( this ).css( 'background-color' );
746
+ alpha = pagelayer_get_alpha_value_from_color( color );
747
+
748
+ pagelayer_update_alpha_value_on_alpha_slider( alpha, $alphaSlider );
749
+
750
+ // Sometimes Iris doesn't set a perfect background-color on the palette,
751
+ // for example rgba(20, 80, 100, 0.3) becomes rgba(20, 80, 100, 0.298039).
752
+ // To compensante for this we round the opacity value on RGBa colors here
753
+ // and save it a second time to the color picker object.
754
+ if ( alpha != 100 ) {
755
+ color = color.replace( /[^,]+(?=\))/, ( alpha / 100 ).toFixed( 2 ) );
756
+ }
757
+
758
+ $control.wpColorPicker( 'color', color );
759
+ });
760
+
761
+ // Bind event handler for clicking on the 'Clear' button.
762
+ $container.find( '.button.wp-picker-clear' ).on( 'click', function() {
763
+ var key = $control.attr( 'data-customize-setting-link' );
764
+
765
+ // The #fff color is delibrate here. This sets the color picker to white instead of the
766
+ // defult black, which puts the color picker in a better place to visually represent empty.
767
+ $control.wpColorPicker( 'color', '' );
768
+
769
+ // Set the actual option value to empty string.
770
+ wp.customize( key, function( obj ) {
771
+ obj.set( '' );
772
+ });
773
+
774
+ pagelayer_update_alpha_value_on_alpha_slider( 100, $alphaSlider );
775
+ });
776
+
777
+ // Bind event handler for clicking on the 'Default' button.
778
+ $container.find( '.button.wp-picker-default' ).on( 'click', function() {
779
+ var alpha = pagelayer_get_alpha_value_from_color( defaultColor );
780
+
781
+ pagelayer_update_alpha_value_on_alpha_slider( alpha, $alphaSlider );
782
+ });
783
+
784
+ // Bind event handler for typing or pasting into the input.
785
+ $control.on( 'input', function() {
786
+ var value = jQuery( this ).val();
787
+ var alpha = pagelayer_get_alpha_value_from_color( value );
788
+
789
+ pagelayer_update_alpha_value_on_alpha_slider( alpha, $alphaSlider );
790
+ });
791
+
792
+ // Update all the things when the slider is interacted with.
793
+ $alphaSlider.slider().on( 'slide', function( event, ui ) {
794
+ var alpha = parseFloat( ui.value ) / 100.0;
795
+
796
+ pagelayer_update_alpha_value_on_color_control( alpha, $control, $alphaSlider, false );
797
+
798
+ // Change value shown on slider handle.
799
+ jQuery( this ).find( '.ui-slider-handle' ).text( ui.value );
800
+ });
801
+ }, timeOut);
802
+
803
+ timeOut += 50;
804
+ });
805
+ }
806
+
807
+ /**
808
+ * Override the stock color.js toString() method to add support for
809
+ * outputting RGBa or Hex.
810
+ */
811
+ Color.prototype.toString = function( flag ) {
812
+
813
+ // If our no-alpha flag has been passed in, output RGBa value with 100% opacity.
814
+ // This is used to set the background color on the opacity slider during color changes.
815
+ if ( 'no-alpha' == flag ) {
816
+ return this.toCSS( 'rgba', '1' ).replace( /\s+/g, '' );
817
+ }
818
+
819
+ // If we have a proper opacity value, output RGBa.
820
+ if ( 1 > this._alpha ) {
821
+ return this.toCSS( 'rgba', this._alpha ).replace( /\s+/g, '' );
822
+ }
823
+
824
+ // Proceed with stock color.js hex output.
825
+ var hex = parseInt( this._color, 10 ).toString( 16 );
826
+ if ( this.error ) { return ''; }
827
+ if ( hex.length < 6 ) {
828
+ for ( var i = 6 - hex.length - 1; i >= 0; i-- ) {
829
+ hex = '0' + hex;
830
+ }
831
+ }
832
+
833
+ return '#' + hex;
834
+ };
835
+
836
+ /**
837
+ * Given an RGBa, RGB, or hex color value, return the alpha channel value.
838
+ */
839
+ function pagelayer_get_alpha_value_from_color( value ) {
840
+ var alphaVal;
841
+
842
+ // Remove all spaces from the passed in value to help our RGBa regex.
843
+ value = value.replace( / /g, '' );
844
+
845
+ if ( value.match( /rgba\(\d+\,\d+\,\d+\,([^\)]+)\)/ ) ) {
846
+ alphaVal = parseFloat( value.match( /rgba\(\d+\,\d+\,\d+\,([^\)]+)\)/ )[1] ).toFixed(2) * 100;
847
+ alphaVal = parseInt( alphaVal );
848
+ } else {
849
+ alphaVal = 100;
850
+ }
851
+
852
+ return alphaVal;
853
+ }
854
+
855
+ /**
856
+ * Force update the alpha value of the color picker object and maybe the alpha slider.
857
+ */
858
+ function pagelayer_update_alpha_value_on_color_control( alpha, $control, $alphaSlider, update_slider ) {
859
+ var iris, colorPicker, color;
860
+
861
+ iris = $control.data( 'a8cIris' );
862
+ colorPicker = $control.data( 'wpWpColorPicker' );
863
+
864
+ // Set the alpha value on the Iris object.
865
+ iris._color._alpha = alpha;
866
+
867
+ // Store the new color value.
868
+ color = iris._color.toString();
869
+
870
+ // Set the value of the input.
871
+ $control.val( color ).trigger('color_change');
872
+
873
+ // Update the background color of the color picker.
874
+ colorPicker.toggler.css({
875
+ 'background-color': color
876
+ });
877
+
878
+ // Maybe update the alpha slider itself.
879
+ if ( update_slider ) {
880
+ pagelayer_update_alpha_value_on_alpha_slider( alpha, $alphaSlider );
881
+ }
882
+
883
+ // Update the color value of the color picker object.
884
+ $control.wpColorPicker( 'color', color );
885
+ }
886
+
887
+ /**
888
+ * Update the slider handle position and label.
889
+ */
890
+ function pagelayer_update_alpha_value_on_alpha_slider( alpha, $alphaSlider ){
891
+ $alphaSlider.slider( 'value', alpha );
892
+ $alphaSlider.find( '.ui-slider-handle' ).text( alpha.toString() );
893
+ }
894
+
895
+ /**
896
+ * Generates random string.
897
+ */
898
+
899
+ // Generates a random string of "n" characters
900
+ function pagelayer_generate_randstr(n, special){
901
+ var text = '';
902
+ var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
903
+
904
+ special = special || 0;
905
+ if(special){
906
+ possible = possible + '&#$%@';
907
+ }
908
+
909
+ for(var i=0; i < n; i++){
910
+ text += possible.charAt(Math.floor(Math.random() * possible.length));
911
+ }
912
+
913
+ return text;
914
+ };
js/pagelayer-editor.js CHANGED
@@ -4111,14 +4111,35 @@ function pagelayer_sc_render(jEle){
4111
  if(!(xm in el.atts)){
4112
  continue;
4113
  }
4114
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4115
  for(var c in css){
4116
 
4117
  // The selector
4118
  var tSel = jQuery.isNumeric(c) ? '{{element}}' : c;
4119
  var tmp = {
4120
  sel: tSel,
4121
- val: pagelayer_css_render(css[c], el.atts[xm], (props[x].sep || ',')),
4122
  };
4123
 
4124
  // Is this a tablet
@@ -4398,6 +4419,48 @@ function pagelayer_sc_render(jEle){
4398
 
4399
  };
4400
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4401
  // Is the given tag a group
4402
  function pagelayer_is_group(tag){
4403
 
@@ -5112,6 +5175,21 @@ function pagelayer_leftbar(){
5112
  pagelayer_leftbar_tab('pagelayer-general-options');
5113
  pagelayer_active = {};
5114
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5115
  };
5116
 
5117
  // Post setting holder
@@ -5825,7 +5903,7 @@ function pagelayer_setup_general_options(){
5825
  }
5826
 
5827
  // TODO: To create this HTML get Array form php
5828
- var html = '<div class="pagelayer-options-sections pagelayer-hidden">'+
5829
  '<h5>'+ pagelayer_l('general_options') +'</h5>'+
5830
  '<div class="pagelayer-option-holder pagelayer-open-customizer">'+
5831
  '<i class="fas fa-paint-brush"></i>'+
@@ -5863,21 +5941,7 @@ function pagelayer_setup_general_options(){
5863
 
5864
  // Open customizer settings
5865
  holder.find('.pagelayer-open-customizer').click(function(){
5866
-
5867
- // Is there a customizer settings ?
5868
- var jEle = jQuery(pagelayer_editable+' [pagelayer-tag="pl_customizer"]');
5869
-
5870
- // Could not find
5871
- if(jEle.length < 1){
5872
- jEle = pagelayer_create_sc('pl_customizer');
5873
- var id = pagelayer_id(jEle);
5874
- jQuery(pagelayer_editable).prepend(jEle);
5875
- pagelayer_element_setup('[pagelayer-id='+id+']', true);
5876
- pagelayer_set_atts(jEle, pagelayer_customizer_values);
5877
- }
5878
-
5879
- jEle.click();
5880
-
5881
  });
5882
 
5883
  // Open help / support link
4111
  if(!(xm in el.atts)){
4112
  continue;
4113
  }
4114
+
4115
+ var xm_val = el.atts[xm];
4116
+
4117
+ // If is global color
4118
+ if(props[x]['type'] == 'color'){
4119
+ var is_global = pagelayer_is_global_color(el.atts[xm]);
4120
+ if(!pagelayer_empty(is_global)){
4121
+ xm_val = 'var(--pagelayer-color-'+is_global+')';
4122
+ }
4123
+ }
4124
+
4125
+ // If is global font
4126
+ if(props[x]['type'] == 'typography'){
4127
+ var is_typo = pagelayer_is_global_typo(el.atts[xm]);
4128
+ if(!pagelayer_empty(is_typo)){
4129
+ xm_val = [];
4130
+ for(var fk in pagelayer_global_fonts[is_typo]['value']){
4131
+ xm_val.push(pagelayer_global_fonts[is_typo]['value'][fk]);
4132
+ }
4133
+ }
4134
+ }
4135
+
4136
  for(var c in css){
4137
 
4138
  // The selector
4139
  var tSel = jQuery.isNumeric(c) ? '{{element}}' : c;
4140
  var tmp = {
4141
  sel: tSel,
4142
+ val: pagelayer_css_render(css[c], xm_val, (props[x].sep || ',')),
4143
  };
4144
 
4145
  // Is this a tablet
4419
 
4420
  };
4421
 
4422
+ // Is the given global color
4423
+ function pagelayer_is_global_color(color){
4424
+
4425
+ var color_key = color.substr(0, 1) == '$' ? color.substr(1) : '';
4426
+
4427
+ // If global color not exist
4428
+ if(!pagelayer_empty(color_key)){
4429
+
4430
+ if(!(color_key in pagelayer_global_colors)){
4431
+ color_key = 'primary';
4432
+ }
4433
+
4434
+ return color_key;
4435
+ }
4436
+
4437
+ return false;
4438
+
4439
+ }
4440
+
4441
+ // Is the given global color
4442
+ function pagelayer_is_global_typo(typo){
4443
+
4444
+ if(!pagelayer_is_string(typo)){
4445
+ return false;
4446
+ }
4447
+
4448
+ var typo_key = typo.substr(0, 1) == '$' ? typo.substr(1) : '';
4449
+
4450
+ // If global color not exist
4451
+ if(!pagelayer_empty(typo_key)){
4452
+
4453
+ if(!(typo_key in pagelayer_global_fonts)){
4454
+ typo_key = 'primary';
4455
+ }
4456
+
4457
+ return typo_key;
4458
+ }
4459
+
4460
+ return false;
4461
+
4462
+ }
4463
+
4464
  // Is the given tag a group
4465
  function pagelayer_is_group(tag){
4466
 
5175
  pagelayer_leftbar_tab('pagelayer-general-options');
5176
  pagelayer_active = {};
5177
  });
5178
+
5179
+ // Hide color and typography global list
5180
+ pagelayer.$$('.pagelayer-leftbar-table').on('click', function(e){
5181
+
5182
+ var closest = jQuery(e.target).closest('.pagelayer-elp-color-global, .pagelayer-elp-typo-global, .pagelayer-global-color-list, .pagelayer-global-font-list');
5183
+ var list = pagelayer.$$('.pagelayer-global-color-list, .pagelayer-global-font-list');
5184
+
5185
+ if(closest.length > 0 ){
5186
+ var lEle = closest.closest('.pagelayer-form-item').find('.pagelayer-global-color-list, .pagelayer-global-font-list');
5187
+ list = list.not(lEle);
5188
+ }
5189
+
5190
+ list.not(closest).slideUp();
5191
+
5192
+ });
5193
  };
5194
 
5195
  // Post setting holder
5903
  }
5904
 
5905
  // TODO: To create this HTML get Array form php
5906
+ var html = '<div class="pagelayer-options-sections">'+
5907
  '<h5>'+ pagelayer_l('general_options') +'</h5>'+
5908
  '<div class="pagelayer-option-holder pagelayer-open-customizer">'+
5909
  '<i class="fas fa-paint-brush"></i>'+
5941
 
5942
  // Open customizer settings
5943
  holder.find('.pagelayer-open-customizer').click(function(){
5944
+ window.open(pagelayer_customizer_url+'&autofocus%5Bpanel%5D=pagelayer_settings', '_blank');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5945
  });
5946
 
5947
  // Open help / support link
js/properties.js CHANGED
@@ -2978,26 +2978,59 @@ function pagelayer_elp_modal(row, prop){
2978
  // The Color Property
2979
  function pagelayer_elp_color(row, prop){
2980
 
2981
- var div = '<div class="pagelayer-elp-color-div">'+
2982
- '<div class="pagelayer-elp-color-preview"></div>'+
2983
- '<span class="pagelayer-elp-remove-color"><i class="pli pli-cross" ></i></span>'+
2984
- '</div>';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2985
 
2986
  row.append(div);
2987
 
2988
- row.find('.pagelayer-elp-color-preview').css('background', prop.c['val']);
2989
 
2990
  var picker = new pagelayer_Picker({
2991
  parent : row.find('.pagelayer-elp-color-div')[0],
2992
  popup : 'left',
2993
- color : prop.c['val'],
2994
  doc: window.parent.document
2995
  });
2996
 
2997
  var preview = row.find('.pagelayer-elp-color-preview');
2998
 
2999
  // If no val, then set blank
3000
- if(pagelayer_empty(prop.c['val'])){
3001
  preview.addClass('pagelayer-blank-preview');
3002
  }
3003
 
@@ -3009,13 +3042,18 @@ function pagelayer_elp_color(row, prop){
3009
  }
3010
  }
3011
 
3012
- handle_white(prop.c['val']);
3013
 
3014
  // Handle selected color
3015
  picker.onChange = function(color) {
3016
  preview.removeClass('pagelayer-blank-preview').css('background', color.rgbaString);
3017
  handle_white(color.hex);
3018
  _pagelayer_set_atts(row, color.hex);// Save and Render
 
 
 
 
 
3019
  };
3020
 
3021
  picker.onOpen = picker.onChange;
@@ -3028,6 +3066,40 @@ function pagelayer_elp_color(row, prop){
3028
  _pagelayer_set_atts(row, ' ');// Save and Render
3029
  });
3030
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3031
  }
3032
 
3033
  // The Spinner property
@@ -3768,10 +3840,17 @@ function pagelayer_elp_font_family(row, prop){
3768
  // The typography property
3769
  function pagelayer_elp_typography(row, prop){
3770
 
3771
- var val =['','','','','','','','','',''];
 
 
 
 
 
 
 
3772
 
3773
  // Do we have a val ?
3774
- if(!pagelayer_empty(prop.c['val'])){
3775
  val = prop.c['val'];
3776
  if(pagelayer_is_string(val)){
3777
  val = val.split(',');
@@ -3809,7 +3888,10 @@ function pagelayer_elp_typography(row, prop){
3809
  }
3810
  }
3811
 
3812
- var div = '<span class="pagelayer-prop-edit"><i class="pli pli-pencil"></i></span>'+
 
 
 
3813
  '<div class="pagelayer-elp-typo-div">'+
3814
  '<div class="pagelayer-elp-typo pagelayer-elp-typo-fonts">'+
3815
  '<div class="pagelayer-elp-typo pagelayer-elp-typo-family">'+
@@ -3887,7 +3969,27 @@ function pagelayer_elp_typography(row, prop){
3887
  '<label class="pagelayer-elp-label">'+pagelayer_l('word_spacing')+'</label>'+
3888
  '<input class="pagelayer-elp-typo-input" type="number" max="50" min="0" step="1" value="'+val[10]+'"></input>'+
3889
  '</div>'+
 
 
 
 
 
3890
  '</div>';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3891
 
3892
  row.append(div);
3893
 
@@ -3895,8 +3997,14 @@ function pagelayer_elp_typography(row, prop){
3895
  row.find('.pagelayer-elp-typo-deco-style').hide();
3896
  }
3897
 
3898
- row.find('.pagelayer-prop-edit').on('click', function(){
3899
  row.find('.pagelayer-elp-typo-div').toggleClass('pagelayer-prop-show');
 
 
 
 
 
 
3900
  });
3901
 
3902
  row.find('.pagelayer-elp-typo-input').on('change', function(e){
@@ -3921,6 +4029,42 @@ function pagelayer_elp_typography(row, prop){
3921
  row.find('.pagelayer-elp-typo-deco-style').show();
3922
  }
3923
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3924
 
3925
  }
3926
 
2978
  // The Color Property
2979
  function pagelayer_elp_color(row, prop){
2980
 
2981
+ var val = prop.c['val'];
2982
+ var is_global = pagelayer_is_global_color(val);
2983
+ var global_active = '';
2984
+
2985
+ // If global color not exist
2986
+ if(!pagelayer_empty(is_global)){
2987
+ val = pagelayer_global_colors[is_global]['value'];
2988
+ global_active = 'pagelayer-active-global';
2989
+ }
2990
+
2991
+ var div = '<div class="pagelayer-elp-color-div-holder">'+
2992
+ '<div class="pagelayer-elp-color-global '+global_active+'"></div>'+
2993
+ '<div class="pagelayer-elp-color-div">'+
2994
+ '<div class="pagelayer-elp-color-preview"></div>'+
2995
+ '<span class="pagelayer-elp-remove-color"><i class="pli pli-cross" ></i></span>'+
2996
+ '</div>'+
2997
+ '<div class="pagelayer-global-color-list">'+
2998
+ '<div class="pagelayer-global-setting-color">'+
2999
+ '<b>Global Colors</b><span class="pli pli-service"></span>'+
3000
+ '</div>';
3001
+
3002
+ for( cid in pagelayer_global_colors ){
3003
+
3004
+ var color = pagelayer_global_colors[cid];
3005
+ var active_class = '';
3006
+
3007
+ if(cid == is_global){
3008
+ active_class = 'pagelayer-global-selected';
3009
+ }
3010
+
3011
+ div += '<div class="pagelayer-global-color-list-item '+ active_class +'" data-global-id="'+ cid +'">'+
3012
+ '<span class="pagelayer-global-color-pre" style="background:'+ color['value'] +'"></span>'+
3013
+ '<span class="pagelayer-global-color-title">'+ color['title'] +'</span>'+
3014
+ '<span class="pagelayer-global-color-code">'+ color['value'] +'</span>'+
3015
+ '</div>';
3016
+ }
3017
+ div += '</div></div>';
3018
 
3019
  row.append(div);
3020
 
3021
+ row.find('.pagelayer-elp-color-preview').css('background', val);
3022
 
3023
  var picker = new pagelayer_Picker({
3024
  parent : row.find('.pagelayer-elp-color-div')[0],
3025
  popup : 'left',
3026
+ color : val,
3027
  doc: window.parent.document
3028
  });
3029
 
3030
  var preview = row.find('.pagelayer-elp-color-preview');
3031
 
3032
  // If no val, then set blank
3033
+ if(pagelayer_empty(val)){
3034
  preview.addClass('pagelayer-blank-preview');
3035
  }
3036
 
3042
  }
3043
  }
3044
 
3045
+ handle_white(val);
3046
 
3047
  // Handle selected color
3048
  picker.onChange = function(color) {
3049
  preview.removeClass('pagelayer-blank-preview').css('background', color.rgbaString);
3050
  handle_white(color.hex);
3051
  _pagelayer_set_atts(row, color.hex);// Save and Render
3052
+
3053
+ // Remove global
3054
+ row.find('.pagelayer-elp-color-global').removeClass('pagelayer-active-global');
3055
+ row.find('.pagelayer-global-selected').removeClass('pagelayer-global-selected');
3056
+ row.find('.pagelayer-global-color-list').hide();
3057
  };
3058
 
3059
  picker.onOpen = picker.onChange;
3066
  _pagelayer_set_atts(row, ' ');// Save and Render
3067
  });
3068
 
3069
+ // Handle for global color
3070
+ row.find('.pagelayer-elp-color-global').on('click', function(e){
3071
+ row.find('.pagelayer-global-color-list').slideToggle();
3072
+ });
3073
+
3074
+ row.find('.pagelayer-global-setting-color').on('click', function(e){
3075
+ e.stopPropagation();
3076
+
3077
+ if(jQuery(e.target).closest('.pli-service').length < 1){
3078
+ return;
3079
+ }
3080
+ window.open(pagelayer_customizer_url+'&autofocus%5Bsection%5D=pagelayer_global_colors_sec', '_blank');
3081
+ });
3082
+
3083
+ // Handle for global color
3084
+ row.find('.pagelayer-global-color-list-item ').on('click', function(e){
3085
+ e.stopPropagation();
3086
+
3087
+ var listItem = jQuery(this);
3088
+ var globalID = listItem.data('global-id');
3089
+ var listHolder = row.find('.pagelayer-global-color-list');
3090
+
3091
+ // Remove previous selecttion
3092
+ listHolder.find('.pagelayer-global-selected').removeClass('pagelayer-global-selected');
3093
+ listItem.addClass('pagelayer-global-selected');
3094
+ row.find('.pagelayer-elp-color-global').addClass('pagelayer-active-global');
3095
+ listHolder.slideUp();
3096
+
3097
+ var color = pagelayer_global_colors[globalID]['value'];
3098
+ preview.removeClass('pagelayer-blank-preview').css('background', color);
3099
+ handle_white(color);
3100
+ _pagelayer_set_atts(row, '$'+globalID);// Save and Render
3101
+
3102
+ });
3103
  }
3104
 
3105
  // The Spinner property
3840
  // The typography property
3841
  function pagelayer_elp_typography(row, prop){
3842
 
3843
+ var val = ['','','','','','','','','','',''];
3844
+ var is_typo = pagelayer_is_global_typo(prop.c['val']);
3845
+ var global_active = '';
3846
+
3847
+ // If global color not exist
3848
+ if(!pagelayer_empty(is_typo)){
3849
+ val = pagelayer_global_fonts[is_typo]['value'];
3850
+ global_active = 'pagelayer-active-global';
3851
 
3852
  // Do we have a val ?
3853
+ }else if(!pagelayer_empty(prop.c['val'])){
3854
  val = prop.c['val'];
3855
  if(pagelayer_is_string(val)){
3856
  val = val.split(',');
3888
  }
3889
  }
3890
 
3891
+ var div = '<span class="pagelayer-elp-typo-edit-div">'+
3892
+ '<span class="pagelayer-elp-typo-global '+global_active+'"></span>'+
3893
+ '<i class="pli pli-pencil"></i>'+
3894
+ '</span>'+
3895
  '<div class="pagelayer-elp-typo-div">'+
3896
  '<div class="pagelayer-elp-typo pagelayer-elp-typo-fonts">'+
3897
  '<div class="pagelayer-elp-typo pagelayer-elp-typo-family">'+
3969
  '<label class="pagelayer-elp-label">'+pagelayer_l('word_spacing')+'</label>'+
3970
  '<input class="pagelayer-elp-typo-input" type="number" max="50" min="0" step="1" value="'+val[10]+'"></input>'+
3971
  '</div>'+
3972
+ '</div>'+
3973
+ '</div>'+
3974
+ '<div class="pagelayer-global-font-list">'+
3975
+ '<div class="pagelayer-global-setting-font">'+
3976
+ '<b>Global Fonts</b><span class="pli pli-service"></span>'+
3977
  '</div>';
3978
+
3979
+ for( cid in pagelayer_global_fonts ){
3980
+
3981
+ var font = pagelayer_global_fonts[cid];
3982
+ var active_class = '';
3983
+
3984
+ if(cid == is_typo){
3985
+ active_class = 'pagelayer-global-selected';
3986
+ }
3987
+
3988
+ div += '<div class="pagelayer-global-font-list-item '+active_class+'" data-global-id="'+ cid +'">'+
3989
+ '<span class="pagelayer-global-font-title">'+font['title']+'</span>'+
3990
+ '</div>';
3991
+ }
3992
+ div += '</div>';
3993
 
3994
  row.append(div);
3995
 
3997
  row.find('.pagelayer-elp-typo-deco-style').hide();
3998
  }
3999
 
4000
+ row.find('.pagelayer-elp-typo-edit-div .pli-pencil').on('click', function(){
4001
  row.find('.pagelayer-elp-typo-div').toggleClass('pagelayer-prop-show');
4002
+
4003
+ // Remove global
4004
+ row.find('.pagelayer-global-font-list').slideUp();
4005
+ row.find('.pagelayer-global-selected').removeClass('pagelayer-global-selected');
4006
+ row.find('.pagelayer-elp-typo-global').removeClass('pagelayer-active-global');
4007
+
4008
  });
4009
 
4010
  row.find('.pagelayer-elp-typo-input').on('change', function(e){
4029
  row.find('.pagelayer-elp-typo-deco-style').show();
4030
  }
4031
  });
4032
+
4033
+ // Handle for global font
4034
+ row.find('.pagelayer-elp-typo-global').on('click', function(e){
4035
+
4036
+ row.find('.pagelayer-global-font-list').slideToggle();
4037
+ row.find('.pagelayer-elp-typo-div').removeClass('pagelayer-prop-show');
4038
+
4039
+ });
4040
+
4041
+ row.find('.pagelayer-global-setting-font .pli').on('click', function(e){
4042
+ e.stopPropagation();
4043
+ window.open(pagelayer_customizer_url+'&autofocus%5Bsection%5D=pagelayer_global_fonts_sec', '_blank');
4044
+ });
4045
+
4046
+ // Handle for global font
4047
+ row.find('.pagelayer-global-font-list-item').on('click', function(e){
4048
+ e.stopPropagation();
4049
+
4050
+ var listItem = jQuery(this);
4051
+ var globalID = listItem.data('global-id');
4052
+ var listHolder = row.find('.pagelayer-global-font-list');
4053
+
4054
+ // Remove previous selecttion
4055
+ listHolder.find('.pagelayer-global-selected').removeClass('pagelayer-global-selected');
4056
+ listItem.addClass('pagelayer-global-selected');
4057
+ row.find('.pagelayer-elp-typo-global').addClass('pagelayer-active-global');
4058
+ listHolder.slideUp();
4059
+
4060
+ var setFonts = pagelayer_global_fonts[globalID]['value'];
4061
+ var fontSelect = row.find('.pagelayer-elp-typo-family .pagelayer-elp-typo-input');
4062
+
4063
+ fontSelect.val(setFonts['font-family']);
4064
+ pagelayer_link_font_family(fontSelect); // Apply google fonts
4065
+
4066
+ _pagelayer_set_atts(row, '$'+globalID);
4067
+ });
4068
 
4069
  }
4070
 
main/ajax.php CHANGED
@@ -597,10 +597,13 @@ function pagelayer_get_section_shortcodes(){
597
  $post_id = (int) $_REQUEST['postID'];
598
 
599
  if(!empty($post_id)){
600
- $post = get_post( $post_id );
601
- // Need to make the reviews post global
602
- if ( !empty( $post ) ) {
603
- $GLOBALS['post'] = $post;
 
 
 
604
  }
605
  }
606
  }
@@ -719,10 +722,16 @@ function pagelayer_fetch_primary_menu(){
719
  $postID = (int) $_REQUEST['postID'];
720
 
721
  // To on live mode
722
- $post = get_post($postID);
723
-
724
- // Need to make this post global
725
- $GLOBALS['post'] = $post;
 
 
 
 
 
 
726
 
727
  // Load short
728
  pagelayer_load_shortcodes();
@@ -838,7 +847,14 @@ function pagelayer_apply_revision(){
838
  }
839
 
840
  // Need to make the reviews post global
841
- $GLOBALS['post'] = $post;
 
 
 
 
 
 
 
842
 
843
  // Need to reload the shortcodes
844
  pagelayer_load_shortcodes();
@@ -1958,7 +1974,7 @@ function pagelayer_export_template(){
1958
  }
1959
 
1960
  // Export the settings
1961
- $settings = ['pagelayer_content_width', 'pagelayer_body_font', 'pagelayer_tablet_breakpoint', 'pagelayer_mobile_breakpoint', 'pagelayer_header_code', 'pagelayer_footer_code', 'pagelayer_sidebar', 'page_for_posts'];
1962
 
1963
  foreach($settings as $v){
1964
 
@@ -1985,6 +2001,27 @@ function pagelayer_export_template(){
1985
  // Export all the taxonomies
1986
  $post_types = pagelayer_get_public_post_types();
1987
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1988
  foreach ( $post_types as $post_type => $label ) {
1989
  $type_taxonomies = get_object_taxonomies( $post_type, 'objects' );
1990
  $taxonomies = wp_filter_object_list( $type_taxonomies, [
597
  $post_id = (int) $_REQUEST['postID'];
598
 
599
  if(!empty($post_id)){
600
+ $GLOBALS['wp_query'] = new WP_Query([
601
+ 'post_type' => 'any',
602
+ 'post__in' => array($post_id),
603
+ ]);
604
+
605
+ if ( ! empty( $GLOBALS['wp_query']->post ) ) {
606
+ $GLOBALS['post'] = $GLOBALS['wp_query']->post;
607
  }
608
  }
609
  }
722
  $postID = (int) $_REQUEST['postID'];
723
 
724
  // To on live mode
725
+ if(!empty($postID)){
726
+ $GLOBALS['wp_query'] = new WP_Query([
727
+ 'post_type' => 'any',
728
+ 'post__in' => array($postID),
729
+ ]);
730
+
731
+ if ( ! empty( $GLOBALS['wp_query']->post ) ) {
732
+ $GLOBALS['post'] = $GLOBALS['wp_query']->post;
733
+ }
734
+ }
735
 
736
  // Load short
737
  pagelayer_load_shortcodes();
847
  }
848
 
849
  // Need to make the reviews post global
850
+ $GLOBALS['wp_query'] = new WP_Query([
851
+ 'post_type' => 'any',
852
+ 'post__in' => array($parID),
853
+ ]);
854
+
855
+ if ( ! empty( $GLOBALS['wp_query']->post ) ) {
856
+ $GLOBALS['post'] = $GLOBALS['wp_query']->post;
857
+ }
858
 
859
  // Need to reload the shortcodes
860
  pagelayer_load_shortcodes();
1974
  }
1975
 
1976
  // Export the settings
1977
+ $settings = ['pagelayer_content_width', 'pagelayer_body_font', 'pagelayer_tablet_breakpoint', 'pagelayer_mobile_breakpoint', 'pagelayer_header_code', 'pagelayer_footer_code', 'pagelayer_sidebar', 'page_for_posts', 'pagelayer_global_fonts', 'pagelayer_global_colors'];
1978
 
1979
  foreach($settings as $v){
1980
 
2001
  // Export all the taxonomies
2002
  $post_types = pagelayer_get_public_post_types();
2003
 
2004
+ // Export all the Post Type CSS Settings
2005
+ foreach ( $post_types as $pt_slug => $type ) {
2006
+
2007
+ if ( $pt_slug == 'attachment' ) {
2008
+ continue;
2009
+ }
2010
+
2011
+ foreach($pagelayer->css_settings as $k => $params){
2012
+ foreach($pagelayer->screens as $sk => $sv){
2013
+ $suffix = (!empty($sv) ? '_'.$sv : '');
2014
+ $setting = empty($params['key']) ? 'pagelayer_'.$k.'_css_'.$pt_slug : $params['key'].'_'.$pt_slug;
2015
+ $tmp = get_option($setting.$suffix);
2016
+
2017
+ if(!empty($tmp)){
2018
+ $conf['conf'][$setting.$suffix] = $tmp;
2019
+ }
2020
+ }
2021
+ }
2022
+ }
2023
+
2024
+ // Export all the taxonomies
2025
  foreach ( $post_types as $post_type => $label ) {
2026
  $type_taxonomies = get_object_taxonomies( $post_type, 'objects' );
2027
  $taxonomies = wp_filter_object_list( $type_taxonomies, [
main/class.php CHANGED
@@ -94,6 +94,10 @@ class PageLayer{
94
  var $sc_audio_enqueued = 0;
95
 
96
  var $support = 'http://pagelayer.deskuss.com';
 
 
 
 
97
 
98
  function __construct() {
99
 
@@ -129,6 +133,26 @@ class PageLayer{
129
  $this->system_fonts = ['Arial', 'Arial Black', 'Courier', 'Georgia', 'Helvetica', 'impact', 'Tahoma', 'Times New Roman', 'Trebuchet MS', 'Verdana'];
130
  $this->customizer_mods = get_option('pagelayer_customizer_mods', []);
131
  $this->support = (defined('SITEPAD') ? 'http://sitepad.deskuss.com' : $this->support);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
132
  }
133
 
134
  function load_extra_languages(){
94
  var $sc_audio_enqueued = 0;
95
 
96
  var $support = 'http://pagelayer.deskuss.com';
97
+
98
+ // Global colors and typographies
99
+ var $global_colors = array();
100
+ var $global_fonts = array();
101
 
102
  function __construct() {
103
 
133
  $this->system_fonts = ['Arial', 'Arial Black', 'Courier', 'Georgia', 'Helvetica', 'impact', 'Tahoma', 'Times New Roman', 'Trebuchet MS', 'Verdana'];
134
  $this->customizer_mods = get_option('pagelayer_customizer_mods', []);
135
  $this->support = (defined('SITEPAD') ? 'http://sitepad.deskuss.com' : $this->support);
136
+
137
+ }
138
+
139
+ function default_font_styles( $args = array()){
140
+
141
+ $default_font_styles = [
142
+ 'font-family' => 'Open Sans',
143
+ 'font-size' => '',
144
+ 'font-style' => '',
145
+ 'font-variant' => '',
146
+ 'font-weight' => '',
147
+ 'letter-spacing' => '',
148
+ 'line-height' => '',
149
+ 'text-decoration-line' => '',
150
+ 'text-decoration-style' => '',
151
+ 'text-transform' => '',
152
+ 'word-spacing' => ''
153
+ ];
154
+
155
+ return array_merge($default_font_styles, $args);
156
  }
157
 
158
  function load_extra_languages(){
main/customizer-controls.php ADDED
@@ -0,0 +1,589 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+
3
+ //////////////////////////////////////////////////////////////
4
+ //===========================================================
5
+ // PAGELAYER
6
+ // Inspired by the DESIRE to be the BEST OF ALL
7
+ // ----------------------------------------------------------
8
+ // Started by: Pulkit Gupta
9
+ // Date: 23rd Jan 2017
10
+ // Time: 23:00 hrs
11
+ // Site: http://pagelayer.com/wordpress (PAGELAYER)
12
+ // ----------------------------------------------------------
13
+ // Please Read the Terms of use at http://pagelayer.com/tos
14
+ // ----------------------------------------------------------
15
+ //===========================================================
16
+ // (c)Pagelayer Team
17
+ //===========================================================
18
+ //////////////////////////////////////////////////////////////
19
+
20
+ // Are we being accessed directly ?
21
+ if(!defined('PAGELAYER_VERSION')) {
22
+ exit('Hacking Attempt !');
23
+ }
24
+
25
+ /**
26
+ * Override customize controls class
27
+ *
28
+ */
29
+ class Pagelayer_Customize_Control extends WP_Customize_Control{
30
+
31
+ public $show_filter = '';
32
+ public $li_class = '';
33
+
34
+ /**
35
+ * Refresh the parameters passed to the JavaScript via JSON.
36
+ *
37
+ * @see WP_Customize_Control::to_json()
38
+ */
39
+ public function to_json() {
40
+
41
+ parent::to_json();
42
+
43
+ if(!empty($this->show_filter)){
44
+ $this->json['show_filter'] = $this->show_filter;
45
+ }
46
+ }
47
+
48
+ protected function render() {
49
+ $id = 'customize-control-' . str_replace( array( '[', ']' ), array( '-', '' ), $this->id );
50
+ $class = 'pagelayer-customize-control customize-control customize-control-' . $this->type;
51
+
52
+ $class .= ' '.$this->li_class;
53
+
54
+ printf( '<li id="%s" class="%s">', esc_attr( $id ), esc_attr( $class ) );
55
+ $this->render_content();
56
+ echo '</li>';
57
+ }
58
+ }
59
+
60
+ /**
61
+ * Padding control to separate general and style controls
62
+ *
63
+ */
64
+ class Pagelayer_Padding_Control extends Pagelayer_Customize_Control {
65
+
66
+ /**
67
+ * The type of control being rendered
68
+ */
69
+ public $type = 'pagelayer-padding-control';
70
+ public $responsive;
71
+ public $units;
72
+
73
+ /**
74
+ * Constructor
75
+ */
76
+ public function __construct( $manager, $id, $args = array(), $options = array() ) {
77
+ parent::__construct( $manager, $id, $args );
78
+
79
+ }
80
+
81
+ /**
82
+ * Render the control in the customizer
83
+ */
84
+ public function render_content() {
85
+
86
+ $units = (array) $this->units;
87
+
88
+ // Output the label and description if they were passed in.
89
+ if ( isset( $this->label ) && '' !== $this->label ) {
90
+ echo '<span class="customize-control-title pagelayer-customize-control-title">' . sanitize_text_field( $this->label );
91
+
92
+ if(!empty($this->responsive )){
93
+ echo '<span class="pagelayer-devices">
94
+ <button type="button" class="active-device" aria-pressed="true" data-device="desktop">
95
+ <i class="dashicons dashicons-desktop"></i>
96
+ </button>
97
+ <button type="button"aria-pressed="false" data-device="tablet">
98
+ <i class="dashicons dashicons-tablet"></i>
99
+ </button>
100
+ <button type="button" aria-pressed="false" data-device="mobile">
101
+ <i class="dashicons dashicons-smartphone"></i>
102
+ </button>
103
+ </span>';
104
+ }
105
+
106
+ if(!empty($units)){
107
+ ?>
108
+ <span class="pagelayer-units">
109
+ <input type="hidden" class="pagelayer-unit-input" value="<?php echo esc_attr($this->value('unit')); ?>" <?php $this->link('unit'); ?>></input>
110
+ <?php
111
+ foreach($units as $unit){
112
+ echo '<span data-unit="'.$unit.'"> '.$unit.' </span>';
113
+ }
114
+ ?>
115
+ </span>
116
+ <?php
117
+ }
118
+
119
+ echo '</span>';
120
+ }
121
+
122
+ $settings = array();
123
+
124
+ foreach ( $this->settings as $key => $setting ){
125
+ $key = str_replace(['_mobile', '_tablet'], '', $key);
126
+
127
+ if(in_array($key, $settings)){
128
+ continue;
129
+ }
130
+
131
+ $settings[] = $key;
132
+ }
133
+
134
+ $screens = array('');
135
+
136
+ if(!empty($this->responsive)){
137
+ $screens = array('', '_tablet', '_mobile');
138
+ }
139
+
140
+ echo '<div class="pagelayer-paddings-holder" data-device-detector="desktop">';
141
+
142
+ foreach($screens as $screen){
143
+
144
+ $show_device = empty($screen)? '_desktop' : $screen;
145
+
146
+ echo '<div class="pagelayer-control-padding" data-show-device="'.$show_device.'">';
147
+ foreach($settings as $setting){
148
+
149
+ // Skip units for responsive
150
+ if($setting == 'unit'){
151
+ continue;
152
+ }
153
+
154
+ $setting_name = $setting.$screen;
155
+ ?>
156
+ <input type="number" class="pagelayer-padding-input" value="<?php echo esc_attr($this->value($setting_name)); ?>" <?php $this->link($setting_name); ?>></input>
157
+ <?php
158
+ }
159
+
160
+ echo '<i class="dashicons dashicons-admin-links"></i></div>';
161
+ }
162
+
163
+ echo '</div>';
164
+ }
165
+ }
166
+
167
+ /**
168
+ * Typography control controls
169
+ *
170
+ */
171
+ class Pagelayer_typo_Control extends Pagelayer_Customize_Control {
172
+
173
+ /**
174
+ * The type of control being rendered
175
+ */
176
+ public $type = 'pagelayer-typo-control';
177
+ public $responsive;
178
+ public $style;
179
+
180
+ /**
181
+ * Constructor
182
+ */
183
+ public function __construct( $manager, $id, $args = array(), $options = array() ) {
184
+ parent::__construct( $manager, $id, $args );
185
+ }
186
+
187
+ /**
188
+ * Render the control in the customizer
189
+ */
190
+ public function render_content() {
191
+ global $pagelayer;
192
+
193
+ // Output the label and description if they were passed in.
194
+ if ( isset( $this->label ) && '' !== $this->label ) {
195
+ echo '<span class="customize-control-title">' . sanitize_text_field( $this->label );
196
+ if(!empty($this->responsive )){
197
+ echo '<span class="pagelayer-devices">
198
+ <button type="button" class="active-device" aria-pressed="true" data-device="desktop">
199
+ <i class="dashicons dashicons-desktop"></i>
200
+ </button>
201
+ <button type="button"aria-pressed="false" data-device="tablet">
202
+ <i class="dashicons dashicons-tablet"></i>
203
+ </button>
204
+ <button type="button" aria-pressed="false" data-device="mobile">
205
+ <i class="dashicons dashicons-smartphone"></i>
206
+ </button>
207
+ </span>';
208
+ }
209
+ echo '</span>';
210
+ }
211
+
212
+ $screens = array('');
213
+ $settings = $pagelayer->font_settings;
214
+
215
+ if(!empty($this->responsive)){
216
+ $screens = array('', '_tablet', '_mobile');
217
+ }
218
+
219
+ echo '<div class="pagelayer-typography-holder" data-device-detector="desktop">';
220
+
221
+ foreach($screens as $screen){
222
+
223
+ $show_device = empty($screen)? '_desktop' : $screen;
224
+ $global_font = $this->value('global-font'.$screen);
225
+
226
+ if(!empty($global_font) && !isset($pagelayer->global_fonts[$global_font])){
227
+ $global_font = 'primary';
228
+ }
229
+
230
+ echo '<div class="pagelayer-control-typography" data-show-device="'.$show_device.'">';
231
+ ?>
232
+ <div class="pagelayer-control-typo-holder">
233
+ <div class="pagelayer-control-typo-icons-holder">
234
+ <span class="pagelayer-control-global-typo-icon dashicons dashicons-admin-site-alt3"></span>
235
+ <span class="pagelayer-control-typo-icon dashicons dashicons-edit"></span>
236
+ </div>
237
+ <div class="pagelayer-global-font-list">
238
+ <div class="pagelayer-global-setting-font">
239
+ <b>Global Fonts</b>
240
+ <span class="dashicons dashicons-admin-generic"></span></div>
241
+ <input class="pagelayer-global-font-input" type="hidden" <?php $this->link('global-font'.$screen); ?> value="<?php echo esc_attr($global_font); ?>" data-key="<?php echo esc_attr($global_font); ?>">
242
+ </div>
243
+ <div class="pagelayer-control-typo">
244
+ <?php foreach($settings as $sk => $sval){ ?>
245
+ <div class="pagelayer-control-typo-fields">
246
+ <label class="pagelayer-control-typo-fields-label"><?php echo $sval['label']?></label>
247
+ <?php if(isset($sval['choices'])){ ?>
248
+ <select <?php $this->link($sk.$screen); ?> data-font-key="<?php echo $sk;?>" data-default-value="<?php echo esc_attr($this->value($sk.$screen)); ?>">
249
+ <?php
250
+ // This add this js
251
+ //echo pagelayer_create_font_options($sval['choices'], $this->value($sk.$screen));
252
+ ?>
253
+ </select>
254
+ <?php } else { ?>
255
+ <input type="number" <?php $this->link($sk.$screen); ?> value="<?php echo esc_attr($this->value($sk.$screen)); ?>">
256
+ <?php } ?>
257
+ </div>
258
+ <?php }?>
259
+ </div>
260
+ </div>
261
+ <?php
262
+ echo '</div>';
263
+ }
264
+ echo '</div>';
265
+ }
266
+ }
267
+
268
+ /**
269
+ * Alpha Color Picker Custom Control
270
+ *
271
+ * @author Braad Martin <http://braadmartin.com>
272
+ * @license http://www.gnu.org/licenses/gpl-3.0.html
273
+ * @link https://github.com/BraadMartin/components/tree/master/customizer/alpha-color-picker
274
+ */
275
+ class Pagelayer_Customize_Alpha_Color_Control extends Pagelayer_Customize_Control {
276
+ /**
277
+ * The type of control being rendered
278
+ */
279
+ public $type = 'pagelayer-alpha-color';
280
+ /**
281
+ * Add support for palettes to be passed in.
282
+ *
283
+ * Supported palette values are true, false, or an array of RGBa and Hex colors.
284
+ */
285
+ public $palette;
286
+ /**
287
+ * Add support for showing the opacity value on the slider handle.
288
+ */
289
+ public $show_opacity;
290
+ /**
291
+ * Enqueue our scripts and styles
292
+ */
293
+ public function enqueue() {
294
+ wp_enqueue_script( 'wp-color-picker' );
295
+ wp_enqueue_style( 'wp-color-picker' );
296
+ }
297
+ /**
298
+ * Render the control in the customizer
299
+ */
300
+ public function render_content() {
301
+ global $pagelayer;
302
+
303
+ $setvalue = $this->value();
304
+
305
+ // Process the palette
306
+ if ( is_array( $this->palette ) ) {
307
+ $palette = implode( '|', $this->palette );
308
+ } else {
309
+ // Default to true.
310
+ $palette = ( false === $this->palette || 'false' === $this->palette ) ? 'false' : 'true';
311
+ }
312
+
313
+ // Support passing show_opacity as string or boolean. Default to true.
314
+ $show_opacity = ( false === $this->show_opacity || 'false' === $this->show_opacity ) ? 'false' : 'true';
315
+
316
+ // Output the label and description if they were passed in.
317
+ if ( isset( $this->label ) && '' !== $this->label ) {
318
+ echo '<span class="customize-control-title">' . sanitize_text_field( $this->label ) . '</span>';
319
+ }
320
+ if ( isset( $this->description ) && '' !== $this->description ) {
321
+ echo '<span class="description pagelayer-customize-description">' . sanitize_text_field( $this->description ) . '</span>';
322
+ } ?>
323
+
324
+ <span class="pagelayer-control-global-color-icon dashicons dashicons-admin-site-alt3"></span>
325
+ <div class="pagelayer-global-color-list">
326
+ <div class="pagelayer-global-setting-color">
327
+ <b>Global Colors</b>
328
+ <span class="dashicons dashicons-admin-generic"></span></div>
329
+ <?php
330
+ $gkey = '';
331
+ if( !empty($setvalue) && $setvalue[0] == '$'){
332
+ $gkey = substr($setvalue, 1);
333
+ $gkey = isset($pagelayer->global_colors[$gkey]) ? $gkey : 'primary';
334
+ }
335
+
336
+ foreach($pagelayer->global_colors as $cid => $color){
337
+
338
+ $active_class = '';
339
+ if($cid == $gkey){
340
+ $active_class = 'pagelayer-global-selected';
341
+ }
342
+ ?>
343
+ <div class="pagelayer-global-color-list-item <?php echo $active_class; ?>" data-global-id="<?php echo $cid; ?>">
344
+ <span class="pagelayer-global-color-pre" style="background:<?php echo $color['value']; ?>;"></span>
345
+ <span class="pagelayer-global-color-title"><?php echo $color['title'];?></span>
346
+ <span class="pagelayer-global-color-code"><?php echo $color['value']; ?></span>
347
+ </div>
348
+ <?php }?>
349
+ </div>
350
+ <input class="pagelayer-alpha-color-control" type="text" data-show-opacity="<?php echo $show_opacity; ?>" data-palette="<?php echo esc_attr( $palette ); ?>" data-default-color="<?php echo esc_attr( $this->settings['default']->default ); ?>" <?php $this->link(); ?> />
351
+ <?php
352
+
353
+ }
354
+ }
355
+
356
+ // Global color palette control
357
+ class Pagelayer_Color_Repeater_Control extends Pagelayer_Customize_Control {
358
+ /**
359
+ * The type of control being rendered
360
+ */
361
+ public $type = 'pagelayer-alpha-color';
362
+ /**
363
+ * Button labels
364
+ */
365
+ public $button_label = '';
366
+ /**
367
+ * Constructor
368
+ */
369
+ public function __construct( $manager, $id, $args = array(), $options = array() ) {
370
+ parent::__construct( $manager, $id, $args );
371
+
372
+ if(empty($this->button_label)){
373
+ $this->button_label = __( 'Add New Color', 'pagelayer' );
374
+ }
375
+ }
376
+
377
+ /**
378
+ * Render the control in the customizer
379
+ */
380
+ public function render_content() {
381
+
382
+ $values = $this->value();
383
+
384
+ $decode_values = json_decode($values, true);
385
+
386
+ $skip_keys = array('primary', 'secondary', 'text', 'accent');
387
+ ?>
388
+ <div class="pagelayer-color-palette-control">
389
+ <?php if( !empty( $this->label ) ) { ?>
390
+ <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
391
+ <?php } ?>
392
+ <?php if( !empty( $this->description ) ) { ?>
393
+ <span class="customize-control-description"><?php echo esc_html( $this->description ); ?></span>
394
+ <?php } ?>
395
+ <input type="hidden" class="pagelayer-color-palette-data" <?php $this->link(); ?>>
396
+ <?php
397
+ foreach( $decode_values as $kk => $val){ ?>
398
+
399
+ <div class="pagelayer-color-holder">
400
+ <span class="pagelayer-color-title" contenteditable="true"><?php _e($val['title']); ?></span>
401
+ <span class="pagelayer-color-controls <?php echo (in_array($kk, $skip_keys)? 'pagelayer-prevent-delete' : ''); ?>">
402
+ <?php echo esc_attr($val['value']) ?>
403
+ </span>
404
+ <?php if(!in_array($kk, $skip_keys)){ ?>
405
+ <span class="customize-control-color-repeater-delete"><span class="dashicons dashicons-no-alt"></span></span>
406
+ <?php }?>
407
+ <input class="pagelayer-alpha-color-control" type="text" data-show-opacity="true" data-palette="true" data-default-color="<?php echo esc_attr($val['value']); ?>" data-id="<?php echo esc_attr($kk); ?>" data-title="<?php echo esc_attr($val['title']); ?>" value="<?php echo esc_attr($val['value']); ?>" />
408
+ </div>
409
+
410
+ <?php }?>
411
+ <button class="button customize-control-color-repeater-add" type="button"><?php echo $this->button_label; ?></button>
412
+ </div>
413
+ <?php
414
+ }
415
+ }
416
+
417
+ // Global color palette control
418
+ class Pagelayer_Font_Repeater_Control extends Pagelayer_Customize_Control {
419
+ /**
420
+ * The type of control being rendered
421
+ */
422
+ public $type = 'pagelayer-global-font';
423
+ /**
424
+ * Button labels
425
+ */
426
+ public $button_label = '';
427
+
428
+ /**
429
+ * Constructor
430
+ */
431
+ public function __construct( $manager, $id, $args = array(), $options = array() ) {
432
+ parent::__construct( $manager, $id, $args );
433
+
434
+ if(empty($this->button_label)){
435
+ $this->button_label = __( 'Add New Font', 'pagelayer' );
436
+ }
437
+ }
438
+
439
+ /**
440
+ * Render the control in the customizer
441
+ */
442
+ public function render_content() {
443
+ global $pagelayer;
444
+
445
+ $values = $this->value();
446
+
447
+ $decode_values = (array) json_decode($values, true);
448
+
449
+ $settings = $pagelayer->font_settings;
450
+
451
+ $skip_keys = array('primary', 'secondary', 'text', 'accent');
452
+ ?>
453
+ <div class="pagelayer-font-palette-control">
454
+ <?php if( !empty( $this->label ) ) { ?>
455
+ <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
456
+ <?php } ?>
457
+ <?php if( !empty( $this->description ) ) { ?>
458
+ <span class="customize-control-description"><?php echo esc_html( $this->description ); ?></span>
459
+ <?php } ?>
460
+ <input type="hidden" class="pagelayer-font-palette-data" value="<?php echo $values; ?>" <?php $this->link(); ?>>
461
+ <?php
462
+ foreach( $decode_values as $kk => $val){ ?>
463
+
464
+ <div class="pagelayer-font-holder" data-id="<?php echo $kk; ?>">
465
+ <span class="pagelayer-font-title" contenteditable="true"><?php _e($val['title']); ?></span>
466
+ <?php if(!in_array($kk, $skip_keys)){ ?>
467
+ <span class="customize-control-font-repeater-delete"><span class="dashicons dashicons-no-alt"></span></span>
468
+ <?php }?>
469
+
470
+ <!-- Font Start -->
471
+ <div class="pagelayer-control-typo-holder">
472
+ <span class="pagelayer-control-typo-icon dashicons dashicons-edit"></span>
473
+ <div class="pagelayer-control-typo">
474
+
475
+ <?php foreach($settings as $sk => $sval){ ?>
476
+ <div class="pagelayer-control-typo-fields">
477
+ <label class="pagelayer-control-typo-fields-label"><?php echo $sval['label']?></label>
478
+
479
+ <?php if(isset($sval['choices'])){ ?>
480
+ <select name="<?php echo $sk; ?>" data-font-key="<?php echo $sk;?>" data-default-value="<?php echo (empty($val['value'][$sk]) ? '' : $val['value'][$sk]) ?>">
481
+ <?php
482
+ // This add this js
483
+ //echo pagelayer_create_font_options($sval['choices'], $val['value'][$sk]);
484
+ ?>
485
+ </select>
486
+ <?php } else { ?>
487
+ <input type="number" name="<?php echo $sk; ?>" value="<?php echo (empty($val['value'][$sk]) ? '' : $val['value'][$sk]) ?>">
488
+ <?php } ?>
489
+ </div>
490
+ <?php }?>
491
+
492
+ </div>
493
+ </div>
494
+ <!-- Font End -->
495
+ </div>
496
+
497
+ <?php }?>
498
+ <button class="button customize-control-font-repeater-add" type="button"><?php echo $this->button_label; ?></button>
499
+ </div>
500
+ <?php
501
+ }
502
+ }
503
+
504
+ /**
505
+ * Switch sanitization
506
+ *
507
+ * @param string Switch value
508
+ * @return integer Sanitized value
509
+ */
510
+ if ( ! function_exists( 'pagelayer_switch_sanitization' ) ) {
511
+ function pagelayer_switch_sanitization( $input ) {
512
+ if ( true === $input ) {
513
+ return 1;
514
+ } else {
515
+ return 0;
516
+ }
517
+ }
518
+ }
519
+
520
+ /**
521
+ * Alpha Color (Hex & RGBa) sanitization
522
+ *
523
+ * @param string Input to be sanitized
524
+ * @return string Sanitized input
525
+ */
526
+ if ( ! function_exists( 'pagelayer_hex_rgba_sanitization' ) ) {
527
+ function pagelayer_hex_rgba_sanitization( $input, $setting ) {
528
+ if ( empty( $input ) || is_array( $input ) ) {
529
+ return $setting->default;
530
+ }
531
+
532
+ if ( false === strpos( $input, 'rgba' ) ) {
533
+ // If string doesn't start with 'rgba' then santize as hex color
534
+ $input = sanitize_hex_color( $input );
535
+ } else {
536
+ // Sanitize as RGBa color
537
+ $input = str_replace( ' ', '', $input );
538
+ sscanf( $input, 'rgba(%d,%d,%d,%f)', $red, $green, $blue, $alpha );
539
+ $input = 'rgba(' . pagelayer_in_range( $red, 0, 255 ) . ',' . pagelayer_in_range( $green, 0, 255 ) . ',' . pagelayer_in_range( $blue, 0, 255 ) . ',' . pagelayer_in_range( $alpha, 0, 1 ) . ')';
540
+ }
541
+ return $input;
542
+ }
543
+ }
544
+
545
+ /**
546
+ * Only allow values between a certain minimum & maxmium range
547
+ *
548
+ * @param number Input to be sanitized
549
+ * @return number Sanitized input
550
+ */
551
+ if ( ! function_exists( 'pagelayer_in_range' ) ) {
552
+ function pagelayer_in_range( $input, $min, $max ){
553
+ if ( $input < $min ) {
554
+ $input = $min;
555
+ }
556
+ if ( $input > $max ) {
557
+ $input = $max;
558
+ }
559
+ return $input;
560
+ }
561
+ }
562
+
563
+ // Create font options
564
+ function pagelayer_create_font_options( $args, $set ){
565
+ $options = '';
566
+ foreach( $args as $value => $label ){
567
+ $_value = $value;
568
+
569
+ if(is_numeric($value)){
570
+ $_value = $label;
571
+ }
572
+
573
+ // Single item
574
+ if(is_string($label)){
575
+ $options .= pagelayer_sel_option( $_value, $label, $set);
576
+ continue;
577
+ }
578
+ if( $value == 'default'){
579
+ $options .= pagelayer_sel_option( '', $value, $set);
580
+ continue;
581
+ }
582
+
583
+ $options .= '<optgroup label="'. $value .'">';
584
+ $options .= pagelayer_create_font_options($label, $set);
585
+ $options .= '</optgroup>';
586
+ }
587
+
588
+ return $options;
589
+ }
main/customizer.php ADDED
@@ -0,0 +1,404 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+
3
+ //////////////////////////////////////////////////////////////
4
+ //===========================================================
5
+ // PAGELAYER
6
+ // Inspired by the DESIRE to be the BEST OF ALL
7
+ // ----------------------------------------------------------
8
+ // Started by: Pulkit Gupta
9
+ // Date: 23rd Jan 2017
10
+ // Time: 23:00 hrs
11
+ // Site: http://pagelayer.com/wordpress (PAGELAYER)
12
+ // ----------------------------------------------------------
13
+ // Please Read the Terms of use at http://pagelayer.com/tos
14
+ // ----------------------------------------------------------
15
+ //===========================================================
16
+ // (c)Pagelayer Team
17
+ //===========================================================
18
+ //////////////////////////////////////////////////////////////
19
+
20
+ // Are we being accessed directly ?
21
+ if(!defined('PAGELAYER_VERSION')) {
22
+ exit('Hacking Attempt !');
23
+ }
24
+
25
+ // Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
26
+ add_action( 'customize_preview_init', 'pagelayer_customize_preview_js' );
27
+ function pagelayer_customize_preview_js() {
28
+ //wp_enqueue_script( 'pagelayer-customizer-preview', get_template_directory_uri() . '/js/customizer-preview.js', array( 'jquery', 'customize-preview' ), PAGELAYER_VERSION, true );
29
+ }
30
+
31
+ // JS handlers for controls.
32
+ add_action( 'customize_controls_enqueue_scripts', 'pagelayer_customize_scripts' );
33
+ function pagelayer_customize_scripts(){
34
+ wp_enqueue_script( 'wp-color-picker' );
35
+ wp_enqueue_style( 'wp-color-picker' );
36
+ wp_enqueue_script( 'pagelayer-customizer', PAGELAYER_JS.'/customizer.js', array( 'customize-controls' ), PAGELAYER_VERSION, true );
37
+ }
38
+
39
+ // Print global Style.
40
+ add_action( 'customize_controls_print_styles', 'pagelayer_customize_controls_print_styles' );
41
+ function pagelayer_customize_controls_print_styles(){
42
+ global $pagelayer;
43
+
44
+ $font_family = (array) $pagelayer->fonts;
45
+ $style = array('' => 'Default', 'normal' => 'Normal', 'italic' => 'Italic', 'oblique' => 'Oblique');
46
+ $weight = array('' => 'Default', '100' => '100', '200' => '200', '300' => '300', '400' => '400', '500' => '500', '600' => '600', '700' => '700', '800' => '800', '900' => '900', 'normal' => 'Normal', 'lighter' => 'Lighter', 'bold' => 'Bold', 'bolder' => 'Bolder', 'unset' => 'Unset');
47
+ $variant = array('' => 'Default', 'normal' => 'Normal', 'small-caps' => 'Small Caps');
48
+ $decoration = array('' => 'Default', 'none' => 'None', 'overline' => 'Overline', 'line-through' => 'Line-through', 'underline' => 'Underline', 'underline overline' => 'Underline Overline');
49
+ $decoration_style = array('' => 'None', 'solid' => 'Solid', 'double' => 'Double', 'dotted' => 'Dotted', 'dashed' => 'Dashed', 'wavy' => 'Wavy');
50
+ $transform = array('' => 'Default', 'capitalize' => 'Capitalize', 'uppercase' => 'Uppercase', 'lowercase' => 'Lowercase');
51
+
52
+ $pagelayer->font_settings = array(
53
+ 'font-family' => array(
54
+ 'label' => __('Family', 'pagelayer'),
55
+ 'choices' => $font_family,
56
+ ),
57
+ 'font-size' => array(
58
+ 'label' => __('Size', 'pagelayer'),
59
+ ),
60
+ 'font-style' => array(
61
+ 'label' => __('Style', 'pagelayer'),
62
+ 'choices' => $style,
63
+ ),
64
+ 'font-weight' => array(
65
+ 'label' => __('Weight', 'pagelayer'),
66
+ 'choices' => $weight,
67
+ ),
68
+ 'font-variant' => array(
69
+ 'label' => __('Variant', 'pagelayer'),
70
+ 'choices' => $variant,
71
+ ),
72
+ 'text-decoration-line' => array(
73
+ 'label' => __('Decoration', 'pagelayer'),
74
+ 'choices' => $decoration,
75
+ ),
76
+ 'text-decoration-style' => array(
77
+ 'label' => __('Decoration Style', 'pagelayer'),
78
+ 'choices' => $decoration_style,
79
+ ),
80
+ 'line-height' => array(
81
+ 'label' => __('Line Height', 'pagelayer'),
82
+ ),
83
+ 'text-transform' => array(
84
+ 'label' => __('Transform', 'pagelayer'),
85
+ 'choices' => $transform,
86
+ ),
87
+ 'letter-spacing' => array(
88
+ 'label' => __('Text Spacing', 'pagelayer'),
89
+ ),
90
+ 'word-spacing' => array(
91
+ 'label' => __('Word Spacing', 'pagelayer'), ),
92
+ );
93
+
94
+ $styles = '<style id="pagelayer-customize-global-style">:root{';
95
+
96
+ // Set global colors styles
97
+ foreach($pagelayer->global_colors as $gk => $gv){
98
+ $styles .= '--pagelayer-color-'.$gk.':'.$gv['value'].';';
99
+ }
100
+
101
+ $styles .= '}
102
+ </style>'.PHP_EOL;
103
+
104
+ // Added global JavaSript variables
105
+ $styles .= '<script id="pagelayer-customize-global-js">
106
+ var pagelayer_global_colors = '.json_encode($pagelayer->global_colors).';
107
+ var pagelayer_global_fonts = '.json_encode($pagelayer->global_fonts).';
108
+ var pagelayer_global_font_settings = '.json_encode($pagelayer->font_settings).';
109
+ </script>'.PHP_EOL;
110
+
111
+ echo $styles;
112
+ }
113
+
114
+ add_action( 'customize_register', 'pagelayer_customize_register', 11 );
115
+ function pagelayer_customize_register( $wp_customize ) {
116
+ global $pagelayer;
117
+
118
+ // CSS for the custom controls
119
+ wp_register_style('pagelayer-customizer', PAGELAYER_CSS.'/customizer.css', PAGELAYER_VERSION);
120
+ wp_enqueue_style('pagelayer-customizer');
121
+
122
+ // Load fonts
123
+ pagelayer_load_font_options();
124
+
125
+ // Load global colors and fonts
126
+ pagelayer_load_global_palette();
127
+
128
+ // Add custom controls
129
+ include_once(PAGELAYER_DIR . '/main/customizer-controls.php');
130
+
131
+ $post_types = array('' => __('Global'));
132
+ $exclude = [ 'attachment', 'pagelayer-template' ];
133
+ $pt_objects = get_post_types(['public' => true,], 'objects');
134
+
135
+ foreach ( $pt_objects as $pt_slug => $type ) {
136
+
137
+ if ( in_array( $pt_slug, $exclude ) ) {
138
+ continue;
139
+ }
140
+
141
+ $post_types[$pt_slug] = $type->labels->name;
142
+ }
143
+
144
+ // Pagelayer Panel
145
+ $wp_customize->add_panel( 'pagelayer_settings', array(
146
+ 'priority' => 10,
147
+ 'title' => 'Pagelayer',
148
+ ));
149
+
150
+ // Global colors section
151
+ $wp_customize->add_section( 'pagelayer_global_colors_sec', array(
152
+ 'capability' => 'edit_theme_options',
153
+ 'priority' => 10,
154
+ 'title' => __('Colors'),
155
+ 'panel' => 'pagelayer_settings',
156
+ ));
157
+
158
+ $wp_customize->add_setting( 'pagelayer_global_colors', array(
159
+ 'type' => 'option',
160
+ 'capability' => 'edit_theme_options',
161
+ 'transport' => 'refresh',
162
+ 'default' => json_encode( $pagelayer->global_colors )
163
+ ));
164
+
165
+ $wp_customize->add_control( new Pagelayer_Color_Repeater_Control($wp_customize, 'pagelayer_global_colors', array(
166
+ 'priority' => 10,
167
+ 'section' => 'pagelayer_global_colors_sec',
168
+ )));
169
+
170
+ // Global fonts section
171
+ $wp_customize->add_section( 'pagelayer_global_fonts_sec', array(
172
+ 'capability' => 'edit_theme_options',
173
+ 'priority' => 10,
174
+ 'title' => __('Typography'),
175
+ 'panel' => 'pagelayer_settings',
176
+ ));
177
+
178
+ $wp_customize->add_setting( 'pagelayer_global_fonts', array(
179
+ 'type' => 'option',
180
+ 'capability' => 'edit_theme_options',
181
+ 'transport' => 'refresh',
182
+ 'default' => json_encode($pagelayer->global_fonts),
183
+ ));
184
+
185
+ $wp_customize->add_control( new Pagelayer_Font_Repeater_Control($wp_customize, 'pagelayer_global_fonts', array(
186
+ 'priority' => 10,
187
+ 'section' => 'pagelayer_global_fonts_sec',
188
+ )));
189
+
190
+ foreach($post_types as $sk => $sv){
191
+
192
+ $post_type = empty($sk) ? '' : '_'.$sk;
193
+ $global_section = 'pagelayer_global_sec'.$post_type;
194
+ $global_text = empty($sk) ? '' : __('Global');
195
+
196
+ // Global section
197
+ $wp_customize->add_section( $global_section, array(
198
+ 'capability' => 'edit_theme_options',
199
+ 'priority' => 10,
200
+ 'title' => sprintf( __('%s %s Styles', 'pagelayer'), $sv, $global_text),
201
+ 'panel' => 'pagelayer_settings',
202
+ ));
203
+
204
+ foreach($pagelayer->css_settings as $set => $setv){
205
+
206
+ $setting_name = $set.$sk;
207
+ $setting = empty($setv['key']) ? 'pagelayer_'.$set.'_css'.$post_type : $setv['key'].$post_type;
208
+
209
+ $wp_customize->add_setting( 'pagelayer_lable_'.$setting_name, array(
210
+ 'capability' => 'edit_theme_options',
211
+ ));
212
+
213
+ $wp_customize->add_control( new Pagelayer_Customize_Control(
214
+ $wp_customize, 'pagelayer_lable_'.$setting_name, array(
215
+ 'type' => 'hidden',
216
+ 'section' => $global_section,
217
+ 'description' => sprintf( __('<div class="pagelayer-customize-heading"><div>%s</div></div>', 'pagelayer'), $sv.' '.$setv['name']),
218
+ 'li_class' => 'pagelayer-accordion-tab',
219
+ )
220
+ ));
221
+
222
+ // Register the typography control for body
223
+ pagelayer_register_typo_customizer_control($wp_customize, array(
224
+ 'control' => $setting,
225
+ 'section' => $global_section,
226
+ 'label' => __( 'Typography', 'pagelayer' ),
227
+ 'capability' => 'edit_theme_options',
228
+ 'setting_type' => 'option',
229
+ 'transport' => 'refresh',
230
+ 'default' => '',
231
+ 'units' => ['px', 'em', '%'],
232
+ 'responsive' => 1,
233
+ ));
234
+
235
+ $wp_customize->add_setting( $setting.'[color]', array(
236
+ 'type' => 'option',
237
+ 'capability' => 'edit_theme_options',
238
+ 'transport' => 'refresh',
239
+ ));
240
+
241
+ $wp_customize->add_control( new Pagelayer_Customize_Alpha_Color_Control(
242
+ $wp_customize, $setting.'[color]', array(
243
+ 'section' => $global_section,
244
+ 'label' => __( 'Color', 'pagelayer' ),
245
+ )
246
+ ));
247
+
248
+ $wp_customize->add_setting( $setting.'[background-color]', array(
249
+ 'type' => 'option',
250
+ 'capability' => 'edit_theme_options',
251
+ 'transport' => 'refresh',
252
+ ));
253
+
254
+ $wp_customize->add_control( new Pagelayer_Customize_Alpha_Color_Control(
255
+ $wp_customize, $setting.'[background-color]', array(
256
+ 'section' => $global_section,
257
+ 'label' => __( 'Background Color', 'pagelayer' ),
258
+ )
259
+ ));
260
+
261
+ // Register the padding control for scroll to top
262
+ pagelayer_register_padding_customizer_control($wp_customize, array(
263
+ 'control' => $setting,
264
+ 'control_array_sufix' => 'padding',
265
+ 'section' => $global_section,
266
+ 'label' => __( 'Padding', 'pagelayer' ),
267
+ 'capability' => 'edit_theme_options',
268
+ 'setting_type' => 'option',
269
+ 'transport' => 'refresh',
270
+ 'default' => '',
271
+ 'units' => ['px', 'em', '%'],
272
+ 'setting_parts' => array('0', '1', '2', '3', 'unit'),
273
+ 'responsive' => 1,
274
+ ));
275
+
276
+ // Register the padding control for scroll to top
277
+ pagelayer_register_padding_customizer_control($wp_customize, array(
278
+ 'control' => $setting,
279
+ 'control_array_sufix' => 'margin',
280
+ 'section' => $global_section,
281
+ 'label' => __( 'Margin', 'pagelayer' ),
282
+ 'capability' => 'edit_theme_options',
283
+ 'setting_type' => 'option',
284
+ 'transport' => 'refresh',
285
+ 'default' => '',
286
+ 'units' => ['px', 'em', '%'],
287
+ 'setting_parts' => array('0', '1', '2', '3', 'unit'),
288
+ 'responsive' => 1,
289
+ ));
290
+
291
+ }
292
+ }
293
+ }
294
+
295
+ /**
296
+ * Register the Typography control.
297
+ *
298
+ * @return void
299
+ */
300
+ function pagelayer_register_typo_customizer_control($wp_customize, $args){
301
+
302
+ $settings_for_control = array();
303
+ $settings = array('font-family', 'font-size', 'font-style', 'font-weight', 'font-variant', 'text-decoration-line', 'text-decoration-style', 'line-height', 'text-transform', 'letter-spacing', 'word-spacing', 'global-font');
304
+ $screens = array('');
305
+
306
+ if(!empty($args['responsive'])){
307
+ $screens = array('', '_tablet', '_mobile');
308
+ }
309
+
310
+ // Register settings
311
+ foreach($screens as $screen){
312
+ foreach($settings as $setting){
313
+
314
+ // Skip units for responsive
315
+ if($setting == 'unit' && !empty($screen)){
316
+ continue;
317
+ }
318
+
319
+ $setting_name = $args['control'].$screen.'['.$setting.']';
320
+ $settings_for_control[$setting.$screen] = $setting_name;
321
+
322
+ $setting_args = array(
323
+ 'capability' => $args['capability'],
324
+ 'transport' => $args['transport'],
325
+ );
326
+
327
+ if(!empty($args['setting_type'])){
328
+ $setting_args['type'] = $args['setting_type'];
329
+ }
330
+
331
+ if(!empty($args['default'])){
332
+ $setting_args['default'] = $args['default'];
333
+ }
334
+
335
+ $wp_customize->add_setting( $setting_name, $setting_args);
336
+ }
337
+ }
338
+
339
+ $args['settings'] = $settings_for_control;
340
+
341
+ $wp_customize->add_control( new Pagelayer_typo_Control(
342
+ $wp_customize, $args['control'], $args
343
+ ));
344
+ }
345
+
346
+ /**
347
+ * Register the padding control.
348
+ *
349
+ * @return void
350
+ */
351
+ function pagelayer_register_padding_customizer_control($wp_customize, $args){
352
+
353
+ $settings_for_control = array();
354
+ $screens = array('');
355
+ $control_array_sufix = '';
356
+
357
+ if(empty($args['setting_parts'])){
358
+ $settings = array('top', 'right', 'bottom', 'left', 'unit');
359
+ }else{
360
+ $settings = $args['setting_parts'];
361
+ }
362
+
363
+ if(!empty($args['responsive'])){
364
+ $screens = array('', '_tablet', '_mobile');
365
+ }
366
+
367
+ if(!empty($args['control_array_sufix'])){
368
+ $control_array_sufix = '['.$args['control_array_sufix'].']';
369
+ }
370
+
371
+ // Register settings
372
+ foreach($screens as $screen){
373
+ foreach($settings as $setting){
374
+
375
+ // Skip units for responsive
376
+ if($setting == 'unit' && !empty($screen)){
377
+ continue;
378
+ }
379
+
380
+ $setting_name = $args['control'].$screen.$control_array_sufix.'['.$setting.']';
381
+ $settings_for_control[$setting.$screen] = $setting_name;
382
+
383
+ $setting_args = array(
384
+ 'capability' => $args['capability'],
385
+ 'transport' => $args['transport'],
386
+ );
387
+
388
+ if(!empty($args['default'])){
389
+ $setting_args['default'] = $args['default'];
390
+ }
391
+
392
+ if(!empty($args['setting_type'])){
393
+ $setting_args['type'] = $args['setting_type'];
394
+ }
395
+
396
+ $wp_customize->add_setting( $setting_name, $setting_args);
397
+ }
398
+ }
399
+
400
+ $args['settings'] = $settings_for_control;
401
+ $wp_customize->add_control( new Pagelayer_Padding_Control(
402
+ $wp_customize, $args['control']. @$args['control_array_sufix'], $args
403
+ ));
404
+ }
main/functions.php CHANGED
@@ -2928,7 +2928,7 @@ function pagelayer_serialize_attributes( $block_attributes ) {
2928
 
2929
  function pagelayer_enable_giver(){
2930
  global $pagelayer;
2931
- return (!empty($pagelayer->settings['enable_giver']) && $pagelayer->settings['enable_giver'] == 1) || defined('SITEPAD');
2932
  }
2933
 
2934
  function pagelayer_load_font_options(){
@@ -3429,3 +3429,106 @@ function pagelayer_get_customizer_options(){
3429
  return $options;
3430
  }
3431
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2928
 
2929
  function pagelayer_enable_giver(){
2930
  global $pagelayer;
2931
+ return !empty($pagelayer->settings['enable_giver']) && $pagelayer->settings['enable_giver'] == 1;
2932
  }
2933
 
2934
  function pagelayer_load_font_options(){
3429
  return $options;
3430
  }
3431
 
3432
+ // Sanitize style props for colors and fons
3433
+ function pagelayer_load_global_palette(){
3434
+ global $pagelayer;
3435
+
3436
+ // Default global colors
3437
+ $pagelayer->global_colors = array(
3438
+ 'primary' => array(
3439
+ 'title' => 'Primary',
3440
+ 'value' => '#007bff',
3441
+ ),
3442
+ 'secondary' => array(
3443
+ 'title' => 'Secondary',
3444
+ 'value' => '#6c757d',
3445
+ ),
3446
+ 'text' => array(
3447
+ 'title' => 'Text',
3448
+ 'value' => '#1d1d1d',
3449
+ ),
3450
+ 'accent' => array(
3451
+ 'title' => 'Accent',
3452
+ 'value' => '#61ce70',
3453
+ ),
3454
+ );
3455
+
3456
+ // Global color
3457
+ $global_color = get_option('pagelayer_global_colors');
3458
+
3459
+ if(!empty($global_color)){
3460
+ $pagelayer->global_colors = json_decode($global_color, true);
3461
+ }
3462
+
3463
+ // Default global fonts
3464
+ $pagelayer->global_fonts = array(
3465
+ 'primary' => array(
3466
+ 'title' => 'Primary',
3467
+ 'value' => $pagelayer->default_font_styles(),
3468
+ ),
3469
+ 'secondary' => array(
3470
+ 'title' => 'Secondary',
3471
+ 'value' => $pagelayer->default_font_styles(array('font-family' => 'Roboto')),
3472
+ ),
3473
+ 'text' => array(
3474
+ 'title' => 'Text',
3475
+ 'value' => $pagelayer->default_font_styles(array('font-family' => 'Montserrat')),
3476
+ ),
3477
+ 'accent' => array(
3478
+ 'title' => 'Accent',
3479
+ 'value' => $pagelayer->default_font_styles(array('font-family' => 'Poppins')),
3480
+ ),
3481
+ );
3482
+
3483
+ // Global font
3484
+ $global_font = get_option('pagelayer_global_fonts');
3485
+
3486
+ if(!empty($global_font)){
3487
+ $pagelayer->global_fonts = json_decode($global_font, true);
3488
+ }
3489
+ }
3490
+
3491
+ // Sanitize style props for colors and fons
3492
+ function pagelayer_sanitize_global_style($val){
3493
+ global $pagelayer;
3494
+
3495
+ // Sanitize Global background color
3496
+ if( !empty($val['background-color']) && $val['background-color'][0] == '$'){
3497
+ $gkey = substr($val['background-color'], 1);
3498
+ $gcolor = isset($pagelayer->global_colors[$gkey]) ? $gkey : 'primary';
3499
+ $val['background-color'] = 'var(--pagelayer-color-'.$gcolor.')';
3500
+ }
3501
+
3502
+ // Sanitize Global color
3503
+ if( !empty($val['color']) && $val['color'][0] == '$'){
3504
+ $gkey = substr($val['color'], 1);
3505
+ $gcolor = isset($pagelayer->global_colors[$gkey]) ? $gkey : 'primary';
3506
+ $val['color'] = 'var(--pagelayer-color-'.$gcolor.')';
3507
+ }
3508
+
3509
+ if(empty($val['global-font'])){
3510
+ return $val;
3511
+ }
3512
+
3513
+ $font_key = $val['global-font'];
3514
+
3515
+ if(!isset($pagelayer->global_fonts[$font_key])){
3516
+ $font_key = 'primary';
3517
+ }
3518
+
3519
+ // This array contains other values like margin padding so we merge the array
3520
+ $val = array_merge($val, $pagelayer->global_fonts[$font_key]['value']);
3521
+ unset($val['global-font']);
3522
+
3523
+ return $val;
3524
+ }
3525
+
3526
+ //Check an empty array
3527
+ function pagelayer_is_empty_array($arr){
3528
+
3529
+ foreach ($arr as $key => $value) {
3530
+ if (trim($value) !== '') return false;
3531
+ }
3532
+
3533
+ return true;
3534
+ }
main/live.php CHANGED
@@ -176,6 +176,9 @@ pagelayer_gmaps_key = "'.get_option('pagelayer-gmaps-api-key').'";
176
  pagelayer_ajax_post_data = {};
177
  pagelayer_menus_items_list = '.json_encode($pagelayer_menus_items_list).';
178
  pagelayer_customizer_values = '.json_encode(pagelayer_get_customizer_options()).';
 
 
 
179
  pagelayer_support_url = "'.$pagelayer->support .'";';
180
 
181
  if(defined('PAGELAYER_PREMIUM')){
176
  pagelayer_ajax_post_data = {};
177
  pagelayer_menus_items_list = '.json_encode($pagelayer_menus_items_list).';
178
  pagelayer_customizer_values = '.json_encode(pagelayer_get_customizer_options()).';
179
+ pagelayer_global_colors = '.json_encode($pagelayer->global_colors).';
180
+ pagelayer_global_fonts = '.json_encode($pagelayer->global_fonts).';
181
+ pagelayer_customizer_url = "'.admin_url("/customize.php?return=").urlencode($_SERVER['HTTP_REFERER']).'";
182
  pagelayer_support_url = "'.$pagelayer->support .'";';
183
 
184
  if(defined('PAGELAYER_PREMIUM')){
main/shortcode_functions.php CHANGED
@@ -396,6 +396,22 @@ function pagelayer_render_shortcode($atts, $content = '', $tag = '', $inner_bloc
396
  continue;
397
  }
398
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
399
  // Loop through
400
  foreach($param['css'] as $k => $v){
401
 
@@ -414,7 +430,7 @@ function pagelayer_render_shortcode($atts, $content = '', $tag = '', $inner_bloc
414
 
415
  // Make the CSS
416
  if(!empty($selector)){
417
- $el['css'][$selector][] = rtrim( trim( pagelayer_css_render($v, $el['atts'][$M_prop], @$param['sep']) ), ';' );
418
  }else{
419
  $el['css'][][] = pagelayer_parse_el_vars($el['atts'][$M_prop],$el);
420
  }
@@ -429,12 +445,27 @@ function pagelayer_render_shortcode($atts, $content = '', $tag = '', $inner_bloc
429
 
430
  $M_prop = $prop.$mv;
431
  if($param['type'] == 'typography' && !empty($el['atts'][$M_prop])){
432
- $val = pagelayer_maybe_explode(',', $el['atts'][$M_prop]);
 
 
 
 
 
 
 
 
 
 
433
 
434
  if(!empty($val[0])){
435
- $font_weight = empty($val[3]) ? 400 : $val[3];
436
  $font_style = !empty($val[2]) && in_array($val[2], ['italic', 'oblique']) ? 'i' : '';
437
- $pagelayer->runtime_fonts[$val[0]][$font_weight.$font_style] = $font_weight.$font_style;
 
 
 
 
 
438
  //pagelayer_print($pagelayer->runtime_fonts);
439
  }
440
  }
@@ -442,14 +473,17 @@ function pagelayer_render_shortcode($atts, $content = '', $tag = '', $inner_bloc
442
  if($prop == 'font_family' && !empty($el['atts'][$M_prop])){
443
  $val = $el['atts'][$M_prop];
444
  if(!empty($val)){
 
445
  $font_weight = empty($el['atts']['font_weight'.$mv]) ? @$el['atts']['font_weight'] : $el['atts']['font_weight'.$mv];
446
- $font_weight = empty($font_weight) ? 400 : $font_weight;
447
-
448
  $font_style = empty($el['atts']['font_style'.$mv]) ? @$el['atts']['font_style'] : $el['atts']['font_style'.$mv];
449
  $font_style = empty($font_style) ? 'normal' : $font_style;
450
  $font_style = in_array($font_style, ['italic', 'oblique']) ? 'i' : '';
451
 
452
- $pagelayer->runtime_fonts[$val][$font_weight.$font_style] = $font_weight.$font_style;
 
 
 
 
453
 
454
  }
455
  }
@@ -849,7 +883,7 @@ function pagelayer_parse_el_vars($str, &$el){
849
  function pagelayer_parse_vars($str, &$el){
850
 
851
  //pagelayer_print($el);
852
- if(is_array($el['tmp'])){
853
  foreach($el['tmp'] as $k => $v){
854
  $str = str_replace('{{{'.$k.'}}}', pagelayer_maybe_implode($el['tmp'][$k]), $str);
855
  }
396
  continue;
397
  }
398
 
399
+ $prop_val = $el['atts'][$M_prop];
400
+
401
+ // Global color handler
402
+ if($param['type'] == 'color' && $prop_val[0] == '$' ){
403
+ $gkey = substr($prop_val, 1);
404
+ $gkey = isset($pagelayer->global_colors[$gkey]) ? $gkey : 'primary';
405
+ $prop_val = 'var(--pagelayer-color-'.$gkey.')';
406
+ }
407
+
408
+ // If is global color
409
+ if($param['type'] == 'typography' && $prop_val[0] == '$' ){
410
+ $gkey = substr($prop_val, 1);
411
+ $gkey = isset($pagelayer->global_fonts[$gkey]) ? $gkey : 'primary';
412
+ $prop_val = array_values($pagelayer->global_fonts[$gkey]['value']);
413
+ }
414
+
415
  // Loop through
416
  foreach($param['css'] as $k => $v){
417
 
430
 
431
  // Make the CSS
432
  if(!empty($selector)){
433
+ $el['css'][$selector][] = rtrim( trim( pagelayer_css_render($v, $prop_val, @$param['sep']) ), ';' );
434
  }else{
435
  $el['css'][][] = pagelayer_parse_el_vars($el['atts'][$M_prop],$el);
436
  }
445
 
446
  $M_prop = $prop.$mv;
447
  if($param['type'] == 'typography' && !empty($el['atts'][$M_prop])){
448
+
449
+ $prop_val = $el['atts'][$M_prop];
450
+
451
+ // If is global typo
452
+ if($prop_val[0] == '$' ){
453
+ $gkey = substr($prop_val, 1);
454
+ $gkey = isset($pagelayer->global_fonts[$gkey]) ? $gkey : 'primary';
455
+ $prop_val = array_values($pagelayer->global_fonts[$gkey]['value']);
456
+ }
457
+
458
+ $val = pagelayer_maybe_explode(',', $prop_val);
459
 
460
  if(!empty($val[0])){
461
+ $font_weights = array('400' =>'400');
462
  $font_style = !empty($val[2]) && in_array($val[2], ['italic', 'oblique']) ? 'i' : '';
463
+
464
+ if(!empty($val[3])){
465
+ $font_weights[$val[3].$font_style] = $val[3].$font_style;
466
+ }
467
+
468
+ $pagelayer->runtime_fonts[$val[0]] = $font_weights;
469
  //pagelayer_print($pagelayer->runtime_fonts);
470
  }
471
  }
473
  if($prop == 'font_family' && !empty($el['atts'][$M_prop])){
474
  $val = $el['atts'][$M_prop];
475
  if(!empty($val)){
476
+ $font_weights = array('400' =>'400');
477
  $font_weight = empty($el['atts']['font_weight'.$mv]) ? @$el['atts']['font_weight'] : $el['atts']['font_weight'.$mv];
 
 
478
  $font_style = empty($el['atts']['font_style'.$mv]) ? @$el['atts']['font_style'] : $el['atts']['font_style'.$mv];
479
  $font_style = empty($font_style) ? 'normal' : $font_style;
480
  $font_style = in_array($font_style, ['italic', 'oblique']) ? 'i' : '';
481
 
482
+ if(!empty($font_weight)){
483
+ $font_weights[$font_weight.$font_style] = $font_weight.$font_style;
484
+ }
485
+
486
+ $pagelayer->runtime_fonts[$val] = $font_weights;
487
 
488
  }
489
  }
883
  function pagelayer_parse_vars($str, &$el){
884
 
885
  //pagelayer_print($el);
886
+ if(!empty($el['tmp']) && is_array($el['tmp'])){
887
  foreach($el['tmp'] as $k => $v){
888
  $str = str_replace('{{{'.$k.'}}}', pagelayer_maybe_implode($el['tmp'][$k]), $str);
889
  }
main/website.php CHANGED
@@ -479,6 +479,9 @@ function pagelayer_website_font_settings($prefix){
479
 
480
  global $pagelayer, $pl_error;
481
 
 
 
 
482
  if(!empty($_POST)){
483
  $vals = $_POST;
484
  }else{
479
 
480
  global $pagelayer, $pl_error;
481
 
482
+ // load css from settings
483
+ pagelayer_load_global_css();
484
+
485
  if(!empty($_POST)){
486
  $vals = $_POST;
487
  }else{
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: 1.6.7
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: 1.6.8
7
  Author: Pagelayer Team
8
  Author URI: https://pagelayer.com/
9
  License: LGPL v2.1
readme.txt CHANGED
@@ -2,9 +2,9 @@
2
  Contributors: pagelayer, softaculous
3
  Tags: page builder, editor, drag and drop, form builder, landing page, responsive, woocommerce, website builder, website design, visual editor, maintenance mode, wysiwyg, page editor, front end, parallax design, widgets, block, button, category, contact, contact form, e-commerce, facebook, form, gallery, image, import, coming soon, links, menu, mega menu, multisite, site builder, fast performance, plugin, popup, post, SEO, shortcode, sidebar, slider, social, tags, themes, Twitter, video, widget, youtube, header, footer, portfolio, custom, color, full site editing, sticky post, template, under construction, grid layout, popular, page, softaculous, design
4
  Requires at least: 4.7
5
- Tested up to: 5.9
6
  Requires PHP: 5.5
7
- Stable tag: 1.6.7
8
  License: LGPL v2.1
9
  License URI: http://www.gnu.org/licenses/lgpl-2.1.html
10
 
@@ -127,6 +127,14 @@ Do you have questions related to Pagelayer? Use the following links :
127
 
128
  == Changelog ==
129
 
 
 
 
 
 
 
 
 
130
  = 1.6.7 (April 07, 2022) =
131
  * [Bug-Fix] In some cases, the onload content animation was not working properly. This is fixed.
132
  * [Bug-Fix] In some cases, the CSS was not applied properly for the tablet and mobile devices. This is fixed.
2
  Contributors: pagelayer, softaculous
3
  Tags: page builder, editor, drag and drop, form builder, landing page, responsive, woocommerce, website builder, website design, visual editor, maintenance mode, wysiwyg, page editor, front end, parallax design, widgets, block, button, category, contact, contact form, e-commerce, facebook, form, gallery, image, import, coming soon, links, menu, mega menu, multisite, site builder, fast performance, plugin, popup, post, SEO, shortcode, sidebar, slider, social, tags, themes, Twitter, video, widget, youtube, header, footer, portfolio, custom, color, full site editing, sticky post, template, under construction, grid layout, popular, page, softaculous, design
4
  Requires at least: 4.7
5
+ Tested up to: 6.0
6
  Requires PHP: 5.5
7
+ Stable tag: 1.6.8
8
  License: LGPL v2.1
9
  License URI: http://www.gnu.org/licenses/lgpl-2.1.html
10
 
127
 
128
  == Changelog ==
129
 
130
+ = 1.6.8 (May 25, 2022) =
131
+ * [Feature] Added Customizer settings to set global styles for elements. Also you can set different global styles for each post type.
132
+ * [Feature] Added Global Color and Typography palette in customizer. Now you can set Global Color and Typography for each element.
133
+ * [Feature] The Global color and typography properties have been added to the Pagelayer Editor as well. Now you can set global color and typography from the dropdown list.
134
+ * [Bug-Fix] Textarea typography was not applied properly in the Contact Form widget. This is fixed.
135
+ * [Bug-Fix] In certain cases, the add section was not working properly. This is fixed.
136
+ * [Bug-Fix] In certain cases, the google fonts was not working properly. This is fixed.
137
+
138
  = 1.6.7 (April 07, 2022) =
139
  * [Bug-Fix] In some cases, the onload content animation was not working properly. This is fixed.
140
  * [Bug-Fix] In some cases, the CSS was not applied properly for the tablet and mobile devices. This is fixed.