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

Version Description

(Apr 16, 2019) = * [Feature] The drag engine is now much faster * [Feature] Added stretch to the row handler * [Feature] You can now drag on the Add Widget utility * [Feature] Image filter properties have been added * [Task] Progress Bars and Counters will be loaded when the widget becomes visible and not on pageload * [Bug-Fix] If a property was clicked which showed new widget properties in the left panel, then the active tab used to lose focus. This is fixed. * [Bug-Fix] The unit which was saved was not being shown in the properties. This is fixed. * [Bug-Fix] For Tabs widget the tab name was not updated in the properties when changed. This is fixed. * [Bug-Fix] For padding and linked values in the widget properties was not shown. This is fixed.

Download this release

Release Info

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

Code changes from version 0.9.1 to 0.9.2

css/pagelayer-admin.css CHANGED
@@ -22,4 +22,76 @@ padding:10px;
22
.pagelayer-acc-wrapper .pagelayer-acc-panel{
23
padding:0px 20px;
24
display:none;
25
}
22
.pagelayer-acc-wrapper .pagelayer-acc-panel{
23
padding:0px 20px;
24
display:none;
25
+ }
26
+
27
+ .pagelayer_promo_button {
28
+ background-color: #4CAF50; /* Green */
29
+ border: none;
30
+ color: white;
31
+ padding: 6px 10px;
32
+ text-align: center;
33
+ text-decoration: none;
34
+ display: inline-block;
35
+ font-size: 13px;
36
+ margin: 4px 2px;
37
+ -webkit-transition-duration: 0.4s; /* Safari */
38
+ transition-duration: 0.4s;
39
+ cursor: pointer;
40
+ }
41
+
42
+ .pagelayer_promo_button:focus{
43
+ border: none;
44
+ color: white;
45
+ }
46
+
47
+ .pagelayer_promo_button1 {
48
+ color: white;
49
+ background-color: #4CAF50;
50
+ border:3px solid #4CAF50;
51
+ }
52
+
53
+ .pagelayer_promo_button1:hover {
54
+ box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 9px 25px 0 rgba(0,0,0,0.19);
55
+ color: white;
56
+ border:3px solid #4CAF50;
57
+ }
58
+
59
+ .pagelayer_promo_button2 {
60
+ color: white;
61
+ background-color: #0085ba;
62
+ }
63
+
64
+ .pagelayer_promo_button2:hover {
65
+ box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 9px 25px 0 rgba(0,0,0,0.19);
66
+ color: white;
67
+ }
68
+
69
+ .pagelayer_promo_button3 {
70
+ color: white;
71
+ background-color: #365899;
72
+ }
73
+
74
+ .pagelayer_promo_button3:hover {
75
+ box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 9px 25px 0 rgba(0,0,0,0.19);
76
+ color: white;
77
+ }
78
+
79
+ .pagelayer_promo_button4 {
80
+ color: white;
81
+ background-color: rgb(66, 184, 221);
82
+ }
83
+
84
+ .pagelayer_promo_button4:hover {
85
+ box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 9px 25px 0 rgba(0,0,0,0.19);
86
+ color: white;
87
+ }
88
+
89
+ .pagelayer_promo-close{
90
+ float:right;
91
+ text-decoration:none;
92
+ margin: 5px 10px 0px 0px;
93
+ }
94
+
95
+ .pagelayer_promo-close:hover{
96
+ color: red;
97
}
css/pagelayer-editor-frontend.css CHANGED
@@ -39,7 +39,7 @@ z-index: 10;
39
pointer-events:none;
40
}
41
42
- .pagelayer-ele-hover{
43
outline:1px solid blue;
44
}
45
@@ -74,13 +74,13 @@ pointer-events:auto;
74
display:inline-block !important;
75
font-size:13px !important;
76
padding:4px !important;
77
- background: #3e8ef7 !important;
78
- color:#fff !important;
79
}
80
81
.pagelayer-eoi:hover{
82
- background: #268ab7 !important;
83
- cursor: pointer !important;
84
}
85
86
.pagelayer-row-option{
@@ -198,3 +198,38 @@ color: #3e8ef7;
198
.pagelayer-add-widget-area p{
199
margin: 0px !important;
200
}
39
pointer-events:none;
40
}
41
42
+ .pagelayer-ele-hover, .pagelayer-drag-ele-hover{/* Both classes are same. but its just that during drag, we use the later */
43
outline:1px solid blue;
44
}
45
74
display:inline-block !important;
75
font-size:13px !important;
76
padding:4px !important;
77
+ background: #3e8ef7;
78
+ color:#fff ;
79
}
80
81
.pagelayer-eoi:hover{
82
+ background: #268ab7;
83
+ cursor: pointer;
84
}
85
86
.pagelayer-row-option{
198
.pagelayer-add-widget-area p{
199
margin: 0px !important;
200
}
201
+
202
+ .pagelayer-add-widget-drag{
203
+ border-color: #111111;
204
+ background: #c4d2de;
205
+ }
206
+
207
+ /* Pagelayer Drag stuff */
208
+
209
+ .pagelayer-is-dragging{
210
+ opacity: 0.33;
211
+ transition:0.1s;
212
+ }
213
+
214
+ .pagelayer-drag-show{
215
+ position:absolute;
216
+ top:0px;
217
+ left:0px;
218
+ display:none;
219
+ background: blue;
220
+ z-index:1000;
221
+ }
222
+
223
+ .pagelayer-drag-prospect{
224
+ height:1px;
225
+ background: blue;
226
+ z-index: 1000;
227
+ }
228
+
229
+ .pagelayer-drag-prospect-col{
230
+ position: absolute;
231
+ top: 0px;
232
+ width: 1px;
233
+ height: 100% !important;
234
+ }
235
+
css/pagelayer-editor.css CHANGED
@@ -1065,7 +1065,8 @@ line-height: 40px;
1065
}
1066
1067
.pagelayer-elp-shadow-div,
1068
- .pagelayer-elp-typo-div{
1069
padding: 10px 10px 0px;
1070
box-shadow: 0px 0px 2px rgba(0,0,0,.2);
1071
position: relative;
@@ -1134,6 +1135,18 @@ right: 0;
1134
width: 50%;
1135
}
1136
1137
.pagelayer-elp-typo .pagelayer-elp-label{
1138
font-weight: 600;
1139
font-size: 11px;
1065
}
1066
1067
.pagelayer-elp-shadow-div,
1068
+ .pagelayer-elp-typo-div,
1069
+ .pagelayer-elp-filter-div{
1070
padding: 10px 10px 0px;
1071
box-shadow: 0px 0px 2px rgba(0,0,0,.2);
1072
position: relative;
1135
width: 50%;
1136
}
1137
1138
+ .pagelayer-elp-filter-div .pagelayer-elp-label{
1139
+ width:40%;
1140
+ text-transform: capitalize;
1141
+ }
1142
+
1143
+ .pagelayer-elp-filter-div .pagelayer-elp-filter-val{
1144
+ float:right;
1145
+ width:10%;
1146
+ font-size:13px;
1147
+ text-align: right;
1148
+ }
1149
+
1150
.pagelayer-elp-typo .pagelayer-elp-label{
1151
font-weight: 600;
1152
font-size: 11px;
images/drag-ghost.png ADDED
Binary file
init.php CHANGED
@@ -5,7 +5,7 @@ if (!defined('ABSPATH')) exit;
5
6
define('PAGELAYER_BASE', plugin_basename(__FILE__));
7
define('PAGELAYER_FILE', __FILE__);
8
- define('PAGELAYER_VERSION', '0.9.1');
9
define('PAGELAYER_DIR', WP_PLUGIN_DIR.'/'.basename(dirname(PAGELAYER_FILE)));
10
define('PAGELAYER_SLUG', 'pagelayer');
11
define('PAGELAYER_URL', plugins_url('', PAGELAYER_FILE));
@@ -97,6 +97,18 @@ function pagelayer_load_plugin(){
97
98
// Load the language
99
load_plugin_textdomain('pagelayer', false, PAGELAYER_SLUG.'/languages/');
100
101
}
102
@@ -221,6 +233,9 @@ function pagelayer_enqueue_frontend($force = false){
221
222
// Load the global styles
223
add_action('wp_head', 'pagelayer_global_styles', 5);
224
225
}
226
@@ -254,12 +269,11 @@ function pagelayer_enqueue_fonts(){
254
function pagelayer_global_styles(){
255
256
$styles = '<style id="pagelayer-global-styles" type="text/css">';
257
- if(get_option('pagelayer_content_width')){
258
- $styles .= '.pagelayer-row-holder{ max-width: '.get_option('pagelayer_content_width').'px;}';
259
- }else{
260
- $styles .= '.pagelayer-row-holder{ max-width: 1170px;}';
261
- }
262
- $styles .= '.pagelayer-row-holder{ margin-left: auto; margin-right: auto;}';
263
$styles .= '</style>';
264
265
echo $styles;
5
6
define('PAGELAYER_BASE', plugin_basename(__FILE__));
7
define('PAGELAYER_FILE', __FILE__);
8
+ define('PAGELAYER_VERSION', '0.9.2');
9
define('PAGELAYER_DIR', WP_PLUGIN_DIR.'/'.basename(dirname(PAGELAYER_FILE)));
10
define('PAGELAYER_SLUG', 'pagelayer');
11
define('PAGELAYER_URL', plugins_url('', PAGELAYER_FILE));
97
98
// Load the language
99
load_plugin_textdomain('pagelayer', false, PAGELAYER_SLUG.'/languages/');
100
+
101
+ // Show the promo
102
+ pagelayer_maybe_promo([
103
+ 'after' => 1,// In days
104
+ 'interval' => 30,// In days
105
+ //'pro_url' => 'https://pagelayer.com/themes/wordpress/corporate/Bizworx_Pro',
106
+ 'rating' => 'https://wordpress.org/plugins/pagelayer/#reviews',
107
+ 'twitter' => 'https://twitter.com/pagelayer?status='.rawurlencode('I love #PageLayer Site Builder by @pagelayer team for my #WordPress site - '.home_url()),
108
+ 'facebook' => 'https://www.facebook.com/pagelayer',
109
+ 'website' => '//pagelayer.com',
110
+ 'image' => PAGELAYER_URL.'/images/pagelayer-logo-256.png'
111
+ ]);
112
113
}
114
233
234
// Load the global styles
235
add_action('wp_head', 'pagelayer_global_styles', 5);
236
+
237
+ // Load custom widgets
238
+ do_action('pagelayer_custom_frontend_enqueue');
239
240
}
241
269
function pagelayer_global_styles(){
270
271
$styles = '<style id="pagelayer-global-styles" type="text/css">';
272
+
273
+ $width = get_option('pagelayer_content_width', '1170');
274
+
275
+ $styles .= '.pagelayer-row-stretch-auto .pagelayer-row-holder{ max-width: '.$width.'px; margin-left: auto; margin-right: auto;}';
276
+
277
$styles .= '</style>';
278
279
echo $styles;
js/givejs.php CHANGED
@@ -28,7 +28,6 @@ $files = array(
28
'widgets.js',
29
'premium.js',
30
'properties.js',
31
- 'drag.js',
32
'base64.js',
33
'slimscroll.js',
34
'vanilla-picker.min.js',
28
'widgets.js',
29
'premium.js',
30
'properties.js',
31
'base64.js',
32
'slimscroll.js',
33
'vanilla-picker.min.js',
js/pagelayer-admin.js CHANGED
@@ -16,7 +16,7 @@ jQuery(document).ready(function(){
16
});
17
18
// Make setting nav-tab-active optional.
19
- jQuery('.nav-tab-wrapper').each(function(){
20
21
var jEle = jQuery(this);
22
var hash = location.hash.slice(1);
@@ -66,7 +66,24 @@ jQuery(document).ready(function(){
66
});
67
}
68
69
pl_admin_tabs();
70
pl_admin_accourdion();
71
72
});
16
});
17
18
// Make setting nav-tab-active optional.
19
+ jQuery('.nav-tab-wrapper.pagelayer-wrapper').each(function(){
20
21
var jEle = jQuery(this);
22
var hash = location.hash.slice(1);
66
});
67
}
68
69
+ // Close promo notice
70
+ var pagelayer_promo = function(){
71
+ jQuery("#pagelayer_promo .pagelayer_promo-close").click(function(){
72
+
73
+ var data;
74
+
75
+ // Hide it
76
+ jQuery("#pagelayer_promo").hide();
77
+
78
+ // Save this preference
79
+ jQuery.post("'.admin_url('?pagelayer_promo=0').'", data, function(response) {
80
+ //alert(response);
81
+ });
82
+ });
83
+ }
84
+
85
pl_admin_tabs();
86
pl_admin_accourdion();
87
+ pagelayer_promo();
88
89
});
js/pagelayer-editor.js CHANGED
@@ -10,7 +10,8 @@ pagelayer = {
10
return jQuery(select, window.parent.document);
11
},
12
p : this,
13
- copy_selected: ''
14
}
15
16
// Lets start
@@ -20,46 +21,7 @@ jQuery(document).ready(function(){
20
pagelayer_bottombar();
21
22
// Make the Leftbar
23
- pagelayer_leftbar();
24
-
25
- // The left bar drag
26
- pagelayer.$('.pagelayer-leftbar-group').each(function(){
27
-
28
- var group = jQuery(this);
29
- Sortable.create(group[0], {
30
- animation: 150,
31
- sort: false,
32
- group: {
33
- name: 'pagelayer-shortcodes',
34
- pull: function(evt) {
35
- var tmp = jQuery(evt.el).parents('.pagelayer-leftbar');
36
- //console.log(tmp);
37
- if(tmp.length > 0){
38
- return false;
39
- }
40
- return 'clone';
41
- }
42
- },
43
- draggable: '.pagelayer-shortcode-drag',
44
- onEnd : function(evt) {
45
-
46
- // Only if the parent is not the leftbar itself
47
- var tmp = pagelayer.$(evt.to).parents('.pagelayer-leftbar');
48
- //console.log(tmp);
49
- if(tmp.length > 0){
50
- return;
51
- }
52
-
53
- // The parent must be entry-content
54
- //if(!(jQuery(evt.to).hasClass('pagelayer-add-widget-area'))){
55
- // Trigger clone
56
- pagelayer_onadd(evt);
57
- //}
58
-
59
- }
60
- });
61
- });
62
-
63
64
// Add widget section
65
pagelayer_add_widget();
@@ -70,8 +32,11 @@ jQuery(document).ready(function(){
70
// Setup the properties of the elements
71
pagelayer_element_setup();
72
73
// Setup the grid drag
74
- pagelayer_setup_grid_drag();
75
76
// Set to desktop
77
pagelayer_set_screen_mode('desktop');
@@ -79,128 +44,463 @@ jQuery(document).ready(function(){
79
// Set up right click
80
pagelayer_left_click();
81
pagelayer_right_click();
82
-
83
});
84
85
// The jQuery Object of the ELPD
86
var pagelayer_elpd;
87
88
// Make rows and cols draggable
89
- function pagelayer_setup_grid_drag(){
90
-
91
- // Make all rows draggable
92
- Sortable.create(jQuery('.entry-content')[0], {
93
- animation: 150,
94
- scroll: true,
95
- scrollSensitivity: 100,
96
- scrollSpeed: 20,
97
- //swapThreshold: 0.5,
98
- //invertSwap: true,
99
- //invertedSwapThreshold: 0.3,
100
- group: {
101
- name: 'pagelayer-rows',
102
- put: function(to, from, dragEl, evt){
103
- return pagelayer_onput(to, from, dragEl, evt);
104
- }
105
- },
106
- handle: '.pagelayer-row-option',
107
- draggable: '.pagelayer-wrap-row',
108
- onAdd: function(evt){
109
- //pagelayer_onadd(evt);
110
- },
111
- });
112
113
- // Columns draggable
114
- jQuery('.pagelayer-row-holder').each(function(){
115
- Sortable.create(jQuery(this)[0], {
116
- animation: 150,
117
- scroll: true,
118
- scrollSensitivity: 100,
119
- scrollSpeed: 20,
120
- //swapThreshold: 0.5,
121
- //invertSwap: true,
122
- //invertedSwapThreshold: 0.3,
123
- //ghostClass: 'pagelayer-drag-ghost',
124
- group : {
125
- name: 'pagelayer-cols',
126
- put: function(to, from, dragEl, evt){
127
- return pagelayer_onput(to, from, dragEl, evt);
128
}
129
- },
130
- handle: '.pagelayer-col-option',
131
- draggable: '.pagelayer-wrap-col',
132
- onAdd: function(evt){
133
134
- // When adding a new column, from the left bar we need to re-order after creation
135
- if(jQuery(evt.from).hasClass('pagelayer-leftbar-group')){
136
- return;
137
}
138
139
- // Reorder the columns
140
- pagelayer_renumber_col(evt.to);
141
142
- },
143
- onRemove: function(evt){
144
- // Reorder the columns
145
- pagelayer_renumber_col(evt.from);
146
- },
147
- });
148
- });
149
-
150
- // Elements draggable
151
- jQuery('.pagelayer-col-holder').each(function(){
152
- Sortable.create(jQuery(this)[0], {
153
- animation: 150,
154
- scroll: true,
155
- scrollSensitivity: 100,
156
- scrollSpeed: 20,
157
- //swapThreshold: 0.5,
158
- //invertSwap: true,
159
- //invertedSwapThreshold: 0.3,
160
- //ghostClass: 'pagelayer-drag-ghost',
161
- group : {
162
- name: 'pagelayer-eles',
163
- put: function(to, from, dragEl, evt){
164
- return pagelayer_onput(to, from, dragEl, evt);
165
}
166
- },
167
- draggable: '.pagelayer-ele-wrap',
168
- onAdd: function(evt){
169
- pagelayer_empty_col(evt.to);
170
- pagelayer_empty_col(evt.from);
171
- },
172
- });
173
- });
174
175
- /*// Elements draggable
176
- Sortable.create(jQuery('.pagelayer-add-widget-area')[0], {
177
- animation: 150,
178
- scroll: true,
179
- scrollSensitivity: 100,
180
- scrollSpeed: 20,
181
- //swapThreshold: 0.5,
182
- //invertSwap: true,
183
- //invertedSwapThreshold: 0.3,
184
- //ghostClass: 'pagelayer-drag-ghost',
185
- group : {
186
- name: 'pagelayer-add-eles',
187
- put: function(to, from, dragEl, evt){
188
- return pagelayer_onput(to, from, dragEl, evt);
189
}
190
- },
191
- draggable: 'null',
192
- onAdd: function(evt){
193
- var sc = jQuery(evt.item);
194
- //var sc = pagelayer_tag(item);
195
- var jEle = jQuery(evt.to);
196
197
- pagelayer_add_sc(jEle, sc);
198
- },
199
- });*/
200
201
};
202
203
// Handle empty col
204
function pagelayer_empty_col(selector){
205
206
// Loop through
@@ -219,7 +519,6 @@ function pagelayer_empty_col(selector){
219
jEle.append('<div class="pagelayer-add-ele pagelayer-ele-wrap"><i class="fa fa-plus"><br>Empty column please add something</div>');
220
var h = jEle.parent().parent().children('.pagelayer-ele-overlay').height();
221
jEle.children('.pagelayer-add-ele').height(h);
222
- pagelayer_setup_grid_drag();
223
224
// Any add ele sign with non-empty columns here ?
225
}else if(jEle.children('.pagelayer-add-ele').length > 0){
@@ -231,6 +530,7 @@ function pagelayer_empty_col(selector){
231
};
232
233
// Reset the column widths
234
function pagelayer_renumber_col(selector){
235
236
var pEle = jQuery(selector);
@@ -262,96 +562,37 @@ function pagelayer_renumber_col(selector){
262
});
263
}
264
265
- // When an item is being dragged and finally being put
266
- // This is called throughout the drag when the drag engine thinks it has found a target
267
- // If this returns false, then the drag is cancelled
268
- function pagelayer_onput(to, from, dragEl, evt){
269
-
270
- var sc = pagelayer_tag(jQuery(dragEl));
271
- var parent_tag = pagelayer_tag(jQuery(to.el));
272
- //console.log(sc+' '+parent_tag);
273
- //if(!parent_tag) console.log(jQuery(to.el));
274
- // Verify the element being dragged
275
- // Item is a col
276
- if(sc == 'pl_col'){
277
-
278
- // You can be within a row only
279
- if(parent_tag != 'pl_row'){
280
- return false;
281
- }
282
-
283
- // Item is a row
284
- }else if(sc == 'pl_row'){
285
-
286
- // Row cannot be within row
287
- //if(parent_tag == 'pl_row' || parent_tag == 'pl_col' || jQuery(to.el).hasClass('pagelayer-add-widget-area')){
288
- if(parent_tag == 'pl_row' || parent_tag == 'pl_col'){
289
- return false;
290
- }
291
-
292
- // The parent must be entry-content
293
- if(jQuery(to.el).hasClass('entry-content')){
294
- return true;
295
- }
296
-
297
- // Regular elements
298
- }else{
299
-
300
- // The parent must be pagelayer-add-widget-area
301
- //if(jQuery(to.el).hasClass('pagelayer-add-widget-area')){
302
- // return true;
303
- //}
304
-
305
- // Row cannot be within row
306
- if(parent_tag != 'pl_col'){
307
- return false;
308
- }
309
-
310
- }
311
-
312
- return true;
313
- };
314
-
315
// Handle addition of elements from the left
316
// NOTE : At this point the addition is FINALIZED
317
// The add element cannot be prevented !
318
- function pagelayer_onadd(evt){
319
320
- var cloneEl = jQuery(evt.item);
321
- var to = jQuery(evt.to);
322
323
- var id = pagelayer_element_added(cloneEl, to);
324
var jEle = jQuery("[pagelayer-id="+id+"]");
325
- jEle.click();
326
327
};
328
329
// Add an element into the POST
330
- function pagelayer_element_added(jEle, to){
331
332
var sc = jEle.attr('pagelayer-tag');
333
- var parent_tag = to.attr('pagelayer-tag');
334
- var create_parent = '';
335
var id, par_id;
336
337
- /*// Is the target a row ?
338
- if(parent_tag == 'pl_row' && sc != 'pl_col'){
339
- create_parent = 'pl_col';
340
- }*/
341
-
342
// Generate the HTML
343
- html = pagelayer_create_sc(sc, to);
344
id = pagelayer_assign_id(html);
345
par_id = id;
346
347
- /*// We need to create a parent
348
- if(create_parent.length > 0){
349
- var pEle = pagelayer_create_sc(create_parent, to);
350
- par_id = pagelayer_assign_id(pEle);
351
- pEle.append(html);
352
- html = pEle;
353
- }*/
354
-
355
// Insert the HTML
356
jEle[0].outerHTML = html[0].outerHTML;
357
@@ -377,20 +618,13 @@ function pagelayer_element_added(jEle, to){
377
378
}
379
380
- // Setup grid drag again
381
- pagelayer_setup_grid_drag();
382
-
383
- if(sc == 'pl_col'){
384
- pagelayer_renumber_col(to);
385
- }
386
-
387
return id;
388
389
};
390
391
// Add an element
392
function pagelayer_element_add_child(pEle, sc){
393
- var child = pagelayer_create_sc(sc, pEle);
394
var cid = pagelayer_assign_id(child);
395
pagelayer_set_parent(child, pagelayer_assign_id(pEle));
396
@@ -410,11 +644,30 @@ function pagelayer_element_add_child(pEle, sc){
410
return cid;
411
};
412
413
- // Return an element by parent ID
414
function pagelayer_ele_by_id(id){
415
return jQuery('[pagelayer-id='+id+']');
416
};
417
418
// Assign the jQuery object an ID
419
function pagelayer_assign_id(jEle){
420
@@ -549,8 +802,10 @@ function pagelayer_element_setup(selector, render){
549
550
}else if(tag == 'pl_row'){
551
wrap.addClass('pagelayer-wrap-row');
552
}
553
-
554
// Create the overlay
555
wrap.prepend('<div class="pagelayer-ele-overlay"></div>');
556
@@ -601,6 +856,9 @@ function pagelayer_element_setup(selector, render){
601
return;
602
}
603
604
wrap.hover(function(){
605
606
// Is there an element option shower ?
@@ -761,53 +1019,6 @@ function pagelayer_get_screen_mode(){
761
}
762
}
763
764
- // Makes any element draggable
765
- function pagelayer_drag(prop){
766
-
767
- var $ = jQuery;
768
- var jEle = $(prop.ele);
769
- var elmnt = jEle[0];
770
-
771
- var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
772
- // If present, the header is where you move the DIV from:*/
773
- if ('handle' in prop) {
774
- $(prop.handle)[0].onmousedown = dragMouseDown;
775
- // otherwise, move the DIV from anywhere inside the DIV:*/
776
- } else {
777
- elmnt.onmousedown = dragMouseDown;
778
- }
779
-
780
- function dragMouseDown(e) {
781
- e = e || window.event;
782
- e.preventDefault();
783
- // get the mouse cursor position at startup:
784
- pos3 = e.clientX;
785
- pos4 = e.clientY;
786
- document.onmouseup = closeDragElement;
787
- // call a function whenever the cursor moves:
788
- document.onmousemove = elementDrag;
789
- }
790
-
791
- function elementDrag(e) {
792
- e = e || window.event;
793
- e.preventDefault();
794
- // calculate the new cursor position:
795
- pos1 = pos3 - e.clientX;
796
- pos2 = pos4 - e.clientY;
797
- pos3 = e.clientX;
798
- pos4 = e.clientY;
799
- // set the element's new position:
800
- elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
801
- elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
802
- }
803
-
804
- function closeDragElement() {
805
- /* stop moving when mouse button is released:*/
806
- document.onmouseup = null;
807
- document.onmousemove = null;
808
- }
809
- };
810
-
811
// Handle key press events
812
jQuery(document).keydown(function(event){
813
//alert(String.fromCharCode(event.which));
@@ -833,7 +1044,7 @@ function pagelayer_delete_element(selector){
833
834
var par = wrap.parent();
835
836
- wrap.remove();
837
838
pagelayer_empty_col(par);
839
@@ -856,7 +1067,7 @@ function pagelayer_can_copy_to(to){
856
857
var eTag = pagelayer_tag(jEle);
858
var tTag = pagelayer_tag(tEle);
859
- console.log(eTag+' - '+tTag);
860
// Final to
861
var fTo;
862
@@ -926,9 +1137,6 @@ function pagelayer_copy_element(selector, insertAfter){
926
927
pagelayer_element_setup('[pagelayer-id='+id+'], [pagelayer-id='+id+'] .pagelayer-ele', true);
928
929
- // Setup grid drag
930
- pagelayer_setup_grid_drag();
931
-
932
//If column then renumber columns
933
if(tag == 'pl_col'){
934
var row = src.parent().closest('.pagelayer-row');
@@ -967,7 +1175,7 @@ function pagelayer_sc(sc){
967
968
// Create a HTML dom element of the Short code
969
// Return the jEle
970
- function pagelayer_create_sc(sc, pEle){
971
972
var html;
973
var _sc = pagelayer_sc(sc);
@@ -975,7 +1183,7 @@ function pagelayer_create_sc(sc, pEle){
975
976
// Generate the HTML
977
if(typeof func == 'function'){
978
- html = window['pagelayer_sc_'+sc](pEle);
979
}else{
980
html = '<div '+pagelayer_sc_atts('pagelayer-'+_sc)+'></div>';
981
}
@@ -1904,7 +2112,7 @@ function pagelayer_leftbar(){
1904
continue;
1905
}
1906
1907
- html += '<div class="pagelayer-shortcode-drag" pagelayer-tag="'+sc+'">'+
1908
'<div class="pagelayer-sc">'+
1909
'<center class="pagelayer-shortcode-inner">'+
1910
'<div class="pagelayer-shortcode pagelayer-'+sc+'"></div>'+
@@ -2159,31 +2367,81 @@ function pagelayer_add_widget(){
2159
2160
jQuery('.entry-content').append(html);
2161
2162
- jQuery('.pagelayer-add-widget-area').on('click', function(){
2163
- pagelayer_add_sc(jQuery(this));
2164
- });
2165
- }
2166
-
2167
- // Add row and column
2168
- function pagelayer_add_sc(jEle, sc){
2169
-
2170
- // Add new row
2171
- var new_row = pagelayer_create_sc('pl_row');
2172
- jEle.closest('.pagelayer-add-widget-area').before(new_row);
2173
- pagelayer_element_setup(new_row, true);
2174
-
2175
- // Add column inside row
2176
- var new_col = pagelayer_create_sc('pl_col');
2177
- jQuery(new_row.find('.pagelayer-row-holder')).html(new_col);
2178
- pagelayer_element_setup(new_col, true);
2179
2180
- if(sc){
2181
- // Add column inside row
2182
- var add_widget = pagelayer_element_added(sc, new_col);
2183
- var widget_ele = jQuery('[pagelayer-id='+add_widget+']');
2184
- jQuery(new_col.find('.pagelayer-col-holder')).html(widget_ele);
2185
- pagelayer_element_setup(widget_ele, true);
2186
- jEle.find(widget_ele).closest('.pagelayer-ele-wrap').remove();
2187
-
2188
}
2189
- }
10
return jQuery(select, window.parent.document);
11
},
12
p : this,
13
+ copy_selected: '',
14
+ mouse: {x: -1, y: -1}
15
}
16
17
// Lets start
21
pagelayer_bottombar();
22
23
// Make the Leftbar
24
+ pagelayer_leftbar();
25
26
// Add widget section
27
pagelayer_add_widget();
32
// Setup the properties of the elements
33
pagelayer_element_setup();
34
35
+ // An image to show for drag
36
+ jQuery('body').append('<img src="'+pagelayer_url+'/images/drag-ghost.png" class="pagelayer-drag-show" />');
37
+
38
// Setup the grid drag
39
+ pagelayer_setup_drag();
40
41
// Set to desktop
42
pagelayer_set_screen_mode('desktop');
44
// Set up right click
45
pagelayer_left_click();
46
pagelayer_right_click();
47
+
48
});
49
50
// The jQuery Object of the ELPD
51
var pagelayer_elpd;
52
53
+ function pagelayer_closest_corner(jEle){
54
+ var corners = [];
55
+ var w = jEle.outerWidth();
56
+ var h = jEle.outerHeight();
57
+ var topleft = jEle.offset();
58
+
59
+ // 0 - Top Left
60
+ corners.push(topleft);
61
+
62
+ // 1 - Top Right
63
+ corners.push({top: topleft.top, left: topleft.left+w});
64
+
65
+ // 2 - Bottom Right
66
+ corners.push({top: topleft.top+h, left: topleft.left+w});
67
+
68
+ // 3 - Bottom Left
69
+ corners.push({top: topleft.top+h, left: topleft.left});
70
+
71
+ //console.log(corners);
72
+
73
+ // Calculate the closest to the mouse
74
+ var distances = {};
75
+ for(var c in corners){
76
+ var dist = Math.hypot(pagelayer.mouse.x - corners[c].left, pagelayer.mouse.y - corners[c].top);
77
+ distances[c] = dist;
78
+ }
79
+ //console.log(distances);
80
+
81
+ var corner = Object.keys(distances).sort(function(a,b){return distances[a]-distances[b]})[0];
82
+ //console.log(corner);
83
+
84
+ return corner;
85
+
86
+ };
87
+
88
// Make rows and cols draggable
89
+ function pagelayer_setup_drag(){
90
+
91
+ // The object to show as drag
92
+ var shower = jQuery('.pagelayer-drag-show');
93
+
94
+ // Delete any prospect
95
+ var clear_prospect = function(){
96
+ jQuery('.pagelayer-drag-prospect').remove();
97
+
98
+ // Shows the wrap as active
99
+ jQuery('.pagelayer-drag-ele-hover').removeClass('pagelayer-drag-ele-hover');
100
+ }
101
+
102
+ // Reset the complete drag stuff
103
+ var reset_dragging = function(){
104
+ pagelayer.dragging = false;
105
+ pagelayer.drag_is_new = false;
106
+ pagelayer.drag_mouse = {x: 0, y: 0};
107
+ reset_on_drag();
108
+ }
109
110
+ // Reset the element on you were last
111
+ var reset_on_drag = function(){
112
+ pagelayer.drag_closest = false;
113
+ pagelayer.drag_closest_corner = null;
114
+ }
115
+
116
+ // Scroll by
117
+ var scrollPx = 7;
118
+ var scrollDist = 30;
119
+
120
+ // If we are too close too the window edge, then scroll
121
+ var handle_scroll = function(e){
122
+
123
+ var windowHeight = jQuery(window).height();
124
+ var windowWidth = jQuery(window).width();
125
+
126
+ // Are we to close to the top or bottom
127
+ if(e.clientY < scrollDist){
128
+ window.scrollBy(0, -scrollPx);
129
+ }else if((windowHeight - e.clientY) < scrollDist){
130
+ window.scrollBy(0, scrollPx);
131
+ }
132
+
133
+ // Are we to close to the top or bottom
134
+ if(e.clientX < scrollDist){
135
+ window.scrollBy(-scrollPx, 0);
136
+ }else if((windowWidth - e.clientX) < scrollDist){
137
+ window.scrollBy(scrollPx, 0);
138
+ }
139
+
140
+ }
141
+
142
+ // SET the values
143
+ reset_dragging();
144
+
145
+ var ondragover = function(e) {
146
+ //console.log(e);
147
+
148
+ pagelayer.mouse.x = parseInt(e.pageX);
149
+ pagelayer.mouse.y = parseInt(e.pageY);
150
+ //console.log(pagelayer.mouse);
151
+
152
+ // Are we dragging ?
153
+ if(pagelayer.dragging){
154
+
155
+ //console.log(e);
156
+
157
+ e.preventDefault();
158
+ //e.stopPropagation();
159
+
160
+ // The wrap of the element being dragged
161
+ var wrap = pagelayer.dragging;
162
+
163
+ // New addition
164
+ var is_new = pagelayer.drag_is_new;
165
+ var ele;
166
+ var tag = pagelayer_tag(wrap);
167
+ var id = pagelayer_id(wrap);
168
+
169
+ // If existing element then add we are dragging
170
+ if(!is_new){
171
+
172
+ // Start Dragging
173
+ if(!wrap.hasClass('pagelayer-is-dragging')){
174
+ wrap.addClass('pagelayer-is-dragging');
175
}
176
177
+ //shower.hide();
178
+
179
+ ele = document.elementFromPoint(e.clientX, e.clientY);
180
+ //console.log(ele);
181
+
182
+ // Drag the show object
183
+ //shower.show();
184
+ //var offset = {top: (e.pageY-10)+'px', left: (e.pageX-10)+'px'}
185
+ //shower.css(offset);
186
+
187
+ }else{
188
+ ele = document.elementFromPoint(e.clientX, e.clientY);
189
+ }
190
+ //console.log(e);
191
+
192
+ // Have we moved more than 5px;
193
+ var dist = Math.hypot(pagelayer.mouse.x - pagelayer.drag_mouse.x, pagelayer.mouse.y - pagelayer.drag_mouse.y);
194
+ //console.log(dist);
195
+ /*if(dist && dist < 5){
196
+ return false;
197
+ }*/
198
+
199
+ // Handle the scroll
200
+ handle_scroll(e);
201
+
202
+ // Find the closest wrap
203
+ var onWrap;
204
+
205
+ // If we are a column, we can be over another column or row
206
+ if(tag == 'pl_col'){
207
+ onWrap = jQuery(ele).closest('.pagelayer-wrap-col,.pagelayer-wrap-row');
208
+ //console.log(pagelayer_id(onWrap));
209
+
210
+ // If we are a row, we can be over another row or a column
211
+ }else if(tag == 'pl_row'){
212
+ onWrap = jQuery(ele).closest('.pagelayer-wrap-row');
213
+ //console.log(pagelayer_id(onWrap));
214
+
215
+ // For every other element, we can be over a col or ele
216
+ }else{
217
+ onWrap = jQuery(ele).closest('.pagelayer-wrap-ele,.pagelayer-wrap-col');
218
+ }
219
+ //console.log(onWrap);
220
+
221
+ // If we find nothing
222
+ if(onWrap.length < 1){
223
+ clear_prospect();// Clear existing prospects
224
+ reset_on_drag();// Also reset the last on item
225
+ return false;
226
+ }
227
+
228
+ // Get the ID
229
+ var onId = onWrap.attr('pagelayer-wrap-id');
230
+ var onEle = onWrap.children('.pagelayer-ele');
231
+
232
+ // Do we have a parent ?
233
+ var pOnId = pagelayer_get_parent(onEle);
234
+
235
+ if(pOnId){
236
+ onId = pOnId;
237
+ onEle = pagelayer_ele_by_id(onId);
238
+ onWrap = pagelayer_wrap_by_id(onId);
239
+ }
240
+
241
+ var changed = false;
242
+
243
+ // Was it the same ID like the one we were on before
244
+ if(pagelayer.drag_closest != onId){
245
+ pagelayer.drag_closest = onId;
246
+ changed = true;
247
+ }
248
+ //console.log(onId+' '+pagelayer.drag_closest)
249
+
250
+ var req_corners = {0: 'top', 1: 'top', 2: 'bottom', 3: 'bottom'};
251
+
252
+ // For columns we redefine the top and bottom
253
+ if(tag == 'pl_col'){
254
+ req_corners[1] = 'bottom';
255
+ req_corners[3] = 'top';
256
+ }
257
+
258
+ // Determine the previous and next
259
+ var next = wrap.next('.pagelayer-ele-wrap');
260
+ var prev = wrap.prev('.pagelayer-ele-wrap');
261
+
262
+ if(next.length == 1 && pagelayer_id(next) == onId){
263
+ req_corners = {0: 'bottom', 1: 'bottom', 2: 'bottom', 3: 'bottom'};
264
+ }
265
+
266
+ if(prev.length == 1 && pagelayer_id(prev) == onId){
267
+ req_corners = {0: 'top', 1: 'top', 2: 'top', 3: 'top'};
268
+ }
269
+
270
+ // Which corner are we closest to ?
271
+ var corner_num = pagelayer_closest_corner(onWrap);
272
+ var corner = req_corners[corner_num];
273
+
274
+ //console.log(corner+' != '+pagelayer.drag_closest_corner)
275
+ if(corner != pagelayer.drag_closest_corner){
276
+ pagelayer.drag_closest_corner = corner;
277
+ changed = true;
278
+ }
279
+
280
+ //console.log(changed);
281
+
282
+ // If we are on our self then clear return false
283
+ if(onId == id){
284
+ clear_prospect();// Clear existing prospects
285
+ reset_on_drag();// Also reset the last on item
286
+ return false;
287
+ }
288
+
289
+ // Then lets start showing
290
+ if(changed){
291
+
292
+ // Record the mouse points
293
+ pagelayer.drag_mouse.x = parseInt(e.pageX);
294
+ pagelayer.drag_mouse.y = parseInt(e.pageY);
295
+
296
+ // Clear any existing prospect
297
+ clear_prospect();
298
+
299
+ // Add new prospect
300
+ var prospect = '<div class="pagelayer-drag-prospect" pagelayer-corner="'+corner+'"></div>';
301
+
302
+ if(corner == 'bottom'){
303
+ onWrap.append(prospect);
304
+ }else if(corner == 'top'){
305
+ onWrap.prepend(prospect);
306
}
307
308
+ prospect = jQuery('.pagelayer-drag-prospect')
309
+ var animate_props = {height: '5px'};
310
311
+ // For column add a special class
312
+ if(tag == 'pl_col'){
313
+ prospect.addClass('pagelayer-drag-prospect-col');
314
+ animate_props['width'] = '5px';
315
+
316
+ // Adjust the left and right
317
+ var css = {};
318
+ css[(corner == 'bottom' ? 'right' : 'left')] = '0px';
319
+ prospect.css(css);
320
}
321
+
322
+ // Animate the prospect
323
+ prospect.animate(animate_props, 200);
324
+
325
+ // Highlight the wrap via overlay
326
+ onWrap.children('.pagelayer-ele-overlay').addClass('pagelayer-drag-ele-hover');
327
+
328
+ }
329
+
330
+ }
331
+ }
332
333
+ // When mouse is pressed down
334
+ var ondragstart = function(e){
335
+
336
+ //console.log(e);
337
+
338
+ // Target
339
+ var tEle = jQuery(e.target);
340
+ var wrap = tEle.closest('.pagelayer-ele-wrap');
341
+ //console.log(jEle[0]);
342
+
343
+ // Is it an existing element ?
344
+ if(wrap.length < 1){
345
+ return false;
346
+ }
347
+
348
+ // Do we have a parent ?
349
+ var id = pagelayer_id(wrap);
350
+ var jEle = pagelayer_ele_by_id(id);
351
+ var pId = pagelayer_get_parent(jEle);
352
+
353
+ if(pId){
354
+ wrap = pagelayer_wrap_by_id(pId);
355
+ }
356
+
357
+ //e.preventDefault();
358
+
359
+ var tag = pagelayer_tag(wrap);
360
+
361
+ e.originalEvent.dataTransfer.setData('Text', 1);
362
+ var img = document.createElement('img');
363
+ img.src = shower.attr('src');
364
+ e.originalEvent.dataTransfer.setDragImage(img, 32, 32);
365
+
366
+ pagelayer.dragging = wrap;
367
+
368
+ }
369
+
370
+ // When mouse is pressed down
371
+ var ondrop = function(e){
372
+
373
+ //console.log(e);
374
+
375
+ // Stop dragging ?
376
+ if(pagelayer.dragging){
377
+
378
+ e.preventDefault();
379
+
380
+ var wrap = pagelayer.dragging;
381
+ var tag = pagelayer_tag(wrap);
382
+ var fromEl = wrap.parent();
383
+ var id;
384
+ wrap.removeClass('pagelayer-is-dragging');
385
+
386
+ // Find any prospect
387
+ var prospect = jQuery('.pagelayer-drag-prospect');
388
+ //console.log(prospect[0]);
389
+
390
+ // It should be exactly 1
391
+ if(prospect.length == 1){
392
+
393
+ var onWrap = prospect.parent();
394
+ var onId = pagelayer_id(onWrap);
395
+ var onTag = pagelayer_tag(onWrap);
396
+ var dropped;
397
+ var corner = prospect.attr('pagelayer-corner');
398
+ var method = (corner == 'top') ? 'before' : 'after';
399
+
400
+ // Create the element if it needs to be created
401
+ if(pagelayer.drag_is_new){
402
+ dropped = jQuery('<div pagelayer-tag="'+tag+'"></div>');
403
+
404
+ // Move the object
405
+ }else{
406
+ dropped = wrap;
407
+ dropped.detach();
408
+ }
409
+
410
+ // If I am a column or row, then I go only before or after my same type !
411
+ if((onTag == 'pl_col' || onTag == 'pl_row') && onTag == tag){
412
+
413
+ // If I am a column and I am on a row
414
+ // OR I am a normal element and I am on column
415
+ }else if((tag == 'pl_col' && onTag == 'pl_row') || onTag == 'pl_col'){
416
+ // We need to find the holder and add the prospect there
417
+ var holder = pagelayer_shortcodes[onTag]['holder'];
418
+ onWrap = onWrap.children('.pagelayer-ele').children(holder);
419
+ method = (corner == 'top') ? 'prepend' : 'append';
420
+ }
421
+
422
+ // Attach or shift the element
423
+ onWrap[method](dropped);
424
+ //console.log(dropped);
425
+
426
+ // Trigger the onadd
427
+ if(pagelayer.drag_is_new){
428
+ id = pagelayer_onadd(dropped);
429
+
430
+ // Existing elements
431
+ }else{
432
+ id = pagelayer_id(wrap);
433
+ }
434
+
435
+ // Defining the variables as needed
436
+ var jEle = pagelayer_ele_by_id(id);
437
+ wrap = pagelayer_wrap_by_id(id);
438
+ var toEl = wrap.parent();
439
+
440
+ // Column number handle
441
+ if(tag == 'pl_col'){
442
+
443
+ var row_holder = jEle.parent().closest('.pagelayer-row-holder');
444
+
445
+ // Renumber the col where you are going
446
+ pagelayer_renumber_col(row_holder);
447
+
448
+ // Renumber the old columns as well
449
+ if(!pagelayer.drag_is_new){
450
+ var from_row = fromEl.closest('.pagelayer-row-holder');
451
+ pagelayer_renumber_col(from_row);
452
+ }
453
+ }
454
+
455
+ // Handle the empty col
456
+ if(tag != 'pl_col'){
457
+
458
+ pagelayer_empty_col(toEl.closest('.pagelayer-col-holder'));
459
+
460
+ if(!pagelayer.drag_is_new){
461
+ pagelayer_empty_col(fromEl.closest('.pagelayer-col-holder'));
462
+ }
463
+
464
+ }
465
+
466
}
467
468
+ // Clear prospect
469
+ clear_prospect();
470
+ }
471
+
472
+ reset_dragging();
473
+
474
+ }
475
+
476
+ // Add the events for inner content - as we are using the drag API
477
+ jQuery(document).on('dragstart', ondragstart);
478
+ jQuery(document).on('dragover', ondragover);
479
+ jQuery(document).on('drop', ondrop);
480
+
481
+ // For addition of new elements
482
+ pagelayer.$('[pagelayer-tag]').on('dragstart', function(e){
483
+ //console.log(e);
484
+
485
+ var tEle = jQuery(e.target);
486
+ var jEle = tEle.closest('.pagelayer-shortcode-drag');
487
+
488
+ // Is it an existing element ?
489
+ if(jEle.length < 1){
490
+ return false;
491
+ }
492
+
493
+ e.originalEvent.dataTransfer.setData('tag', pagelayer_tag(jEle));
494
+
495
+ pagelayer.dragging = jEle;
496
+ pagelayer.drag_is_new = true;
497
+
498
+ });
499
500
};
501
502
// Handle empty col
503
+ // selector should be col holder
504
function pagelayer_empty_col(selector){
505
506
// Loop through
519
jEle.append('<div class="pagelayer-add-ele pagelayer-ele-wrap"><i class="fa fa-plus"><br>Empty column please add something</div>');
520
var h = jEle.parent().parent().children('.pagelayer-ele-overlay').height();
521
jEle.children('.pagelayer-add-ele').height(h);
522
523
// Any add ele sign with non-empty columns here ?
524
}else if(jEle.children('.pagelayer-add-ele').length > 0){
530
};
531
532
// Reset the column widths
533
+ // The selector should be a ROW HOLDER
534
function pagelayer_renumber_col(selector){
535
536
var pEle = jQuery(selector);
562
});
563
}
564
565
// Handle addition of elements from the left
566
// NOTE : At this point the addition is FINALIZED
567
// The add element cannot be prevented !
568
+ function pagelayer_onadd(jEle, toClick){
569
570
+ toClick = arguments.length == 2 ? toClick : true;
571
572
+ //console.log(jEle);
573
+ var id = pagelayer_element_added(jEle);
574
var jEle = jQuery("[pagelayer-id="+id+"]");
575
+
576
+ if(toClick){
577
+ //console.log('here');
578
+ jEle.click();
579
+ }
580
+
581
+ return id;
582
583
};
584
585
// Add an element into the POST
586
+ function pagelayer_element_added(jEle){
587
588
var sc = jEle.attr('pagelayer-tag');
589
var id, par_id;
590
591
// Generate the HTML
592
+ html = pagelayer_create_sc(sc);
593
id = pagelayer_assign_id(html);
594
par_id = id;
595
596
// Insert the HTML
597
jEle[0].outerHTML = html[0].outerHTML;
598
618
619
}
620
621
return id;
622
623
};
624
625
// Add an element
626
function pagelayer_element_add_child(pEle, sc){
627
+ var child = pagelayer_create_sc(sc);
628
var cid = pagelayer_assign_id(child);
629
pagelayer_set_parent(child, pagelayer_assign_id(pEle));
630
644
return cid;
645
};
646
647
+ // Return an element by ID
648
function pagelayer_ele_by_id(id){
649
return jQuery('[pagelayer-id='+id+']');
650
};
651
652
+ // Return the wrap by ID
653
+ function pagelayer_wrap_by_id(id){
654
+ return jQuery('[pagelayer-wrap-id='+id+']');
655
+ };
656
+
657
+ // Give the Pagelayer ID
658
+ function pagelayer_id(jEle){
659
+
660
+ var id = jEle.attr('pagelayer-wrap-id');
661
+ if(id){
662
+ return id;
663
+ }
664
+
665
+ id = jEle.attr('pagelayer-id');
666
+
667
+ return id;
668
+
669
+ }
670
+
671
// Assign the jQuery object an ID
672
function pagelayer_assign_id(jEle){
673
802
803
}else if(tag == 'pl_row'){
804
wrap.addClass('pagelayer-wrap-row');
805
+ }else{
806
+ wrap.addClass('pagelayer-wrap-ele');
807
}
808
+
809
// Create the overlay
810
wrap.prepend('<div class="pagelayer-ele-overlay"></div>');
811
856
return;
857
}
858
859
+ // Make the wrap draggable, but only of independent or parent elements
860
+ wrap.attr('draggable', 'true');
861
+
862
wrap.hover(function(){
863
864
// Is there an element option shower ?
1019
}
1020
}
1021
1022
// Handle key press events
1023
jQuery(document).keydown(function(event){
1024
//alert(String.fromCharCode(event.which));
1044
1045
var par = wrap.parent();
1046
1047
+ wrap.remove();
1048
1049
pagelayer_empty_col(par);
1050
1067
1068
var eTag = pagelayer_tag(jEle);
1069
var tTag = pagelayer_tag(tEle);
1070
+ //console.log(eTag+' - '+tTag);
1071
// Final to
1072
var fTo;
1073
1137
1138
pagelayer_element_setup('[pagelayer-id='+id+'], [pagelayer-id='+id+'] .pagelayer-ele', true);
1139
1140
//If column then renumber columns
1141
if(tag == 'pl_col'){
1142
var row = src.parent().closest('.pagelayer-row');
1175
1176
// Create a HTML dom element of the Short code
1177
// Return the jEle
1178
+ function pagelayer_create_sc(sc){
1179
1180
var html;
1181
var _sc = pagelayer_sc(sc);
1183
1184
// Generate the HTML
1185
if(typeof func == 'function'){
1186
+ html = window['pagelayer_sc_'+sc]();
1187
}else{
1188
html = '<div '+pagelayer_sc_atts('pagelayer-'+_sc)+'></div>';
1189
}
2112
continue;
2113
}
2114
2115
+ html += '<div class="pagelayer-shortcode-drag" draggable="true" pagelayer-tag="'+sc+'">'+
2116
'<div class="pagelayer-sc">'+
2117
'<center class="pagelayer-shortcode-inner">'+
2118
'<div class="pagelayer-shortcode pagelayer-'+sc+'"></div>'+
2367
2368
jQuery('.entry-content').append(html);
2369
2370
+ var add_area = jQuery('.pagelayer-add-widget-area');
2371
2372
+ // Add a code before this
2373
+ var add_sc = function(tag){
2374
+
2375
+ // Create Row
2376
+ var row = jQuery('<div pagelayer-tag="pl_row"></div>');
2377
+ add_area.before(row);
2378
+ var row_id = pagelayer_onadd(row, false);
2379
+ var rEle = pagelayer_ele_by_id(row_id);
2380
+
2381
+ if(tag == 'pl_row'){
2382
+ rEle.click();
2383
+ return row_id;
2384
+ }
2385
+
2386
+ // Create Column
2387
+ var col = jQuery('<div pagelayer-tag="pl_col"></div>');
2388
+ rEle.find('.pagelayer-row-holder').append(col);
2389
+ var col_id = pagelayer_onadd(col, false);
2390
+ var cEle = pagelayer_ele_by_id(col_id);
2391
+
2392
+ if(tag == 'pl_col'){
2393
+ cEle.click();
2394
+ return col_id;
2395
+ }
2396
+
2397
+ // Create element
2398
+ var ele = jQuery('<div pagelayer-tag="'+tag+'"></div>');
2399
+ cEle.find('.pagelayer-col-holder').append(ele);
2400
+ var id = pagelayer_onadd(ele);
2401
+
2402
+ // Ensure the column is not empty
2403
+ pagelayer_empty_col(cEle.find('.pagelayer-col-holder'));
2404
+
2405
+ return id;
2406
+
2407
}
2408
+
2409
+ // Handle Click
2410
+ add_area.on('click', function(){
2411
+ add_sc('pl_col');
2412
+ });
2413
+
2414
+ // Handle Drag over
2415
+ add_area.on('dragover', function(e){
2416
+ //console.log(e)
2417
+ add_area.addClass('pagelayer-add-widget-drag');
2418
+ });
2419
+
2420
+ // Handle Drag Leave
2421
+ add_area.on('dragleave', function(e){
2422
+ //console.log(e)
2423
+ add_area.removeClass('pagelayer-add-widget-drag');
2424
+ });
2425
+
2426
+ // Handle On Drop
2427
+ add_area.on('drop', function(e){
2428
+
2429
+ //console.log(e);
2430
+ //console.log(e.originalEvent.dataTransfer.getData('tag'));
2431
+ add_area.removeClass('pagelayer-add-widget-drag');
2432
+ jQuery('.pagelayer-is-dragging').removeClass('pagelayer-is-dragging');
2433
+
2434
+ var tag = e.originalEvent.dataTransfer.getData('tag');
2435
+
2436
+ // Is it an existing element ?
2437
+ if(tag.length < 1){
2438
+ return false;
2439
+ }
2440
+
2441
+ e.preventDefault();
2442
+
2443
+ //console.log(tag);
2444
+
2445
+ add_sc(tag);
2446
+ });
2447
+ }
js/pagelayer-frontend.js CHANGED
@@ -50,11 +50,21 @@ jQuery(document).ready(function(){
50
51
jQuery('.pagelayer-parallax-window img').each(function(){
52
pagelayer_pl_row_parallax(jQuery(this));
53
- })
54
-
55
- pagelayer_counter();
56
- pagelayer_progress();
57
pagelayer_stars();
58
59
new WOW({boxClass:'pagelayer-wow'}).init();
60
});
@@ -84,6 +94,22 @@ jQuery(window).resize(function() {
84
85
});
86
87
// Row background video and parallax
88
function pagelayer_pl_row_video(jEle){
89
@@ -127,7 +153,7 @@ function pagelayer_pl_row_parallax(jEle){
127
function pagelayer_pl_row_full(jEle){
128
129
// Get current width
130
- var vw = jQuery(document).width();
131
132
// Now give the row the width
133
jEle.css({'width': vw, 'max-width': '100vw'});
@@ -231,7 +257,7 @@ function pagelayer_pl_tabs(jEle) {
231
children.each(function(){
232
var tEle = jQuery(this);
233
var pl_id = tEle.attr('pagelayer-id');
234
- var title = tEle.attr('pagelayer-tab-title');
235
var func = "pagelayer_tab_show(this, '"+pl_id+"')";
236
237
var icon = '';
@@ -395,53 +421,60 @@ function pagelayer_counter(){
395
396
var jEle = jQuery(this);
397
398
- var setup = jEle.attr('pagelayer-setup');
399
-
400
- // Already setup ?
401
- if(setup && setup.length > 0){
402
- return true;
403
}
404
-
405
- var options = {};
406
- options['duration'] = jEle.children('.pagelayer-counter-display').attr('pagelayer-counter-animation-duration');
407
- options['delimiter'] = jEle.children('.pagelayer-counter-display').attr('pagelayer-counter-seperator-type');
408
- options['toValue'] = jEle.children('.pagelayer-counter-display').attr('pagelayer-counter-last-value');
409
- jEle.children('.pagelayer-counter-display').numerator( options );
410
-
411
- // Set that we have setup everything
412
- jEle.attr('pagelayer-setup', 1);
413
-
414
});
415
}
416
417
function pagelayer_progress(){
418
jQuery('.pagelayer-progress-container').each(function(){
419
var jEle = jQuery(this);
420
-
421
- var setup = jEle.attr('pagelayer-setup');
422
- if(setup && setup.length > 0){
423
- return true;
424
- }
425
426
- var progress_width = jEle.children('.pagelayer-progress-bar').attr('pagelayer-progress-width');
427
- if(progress_width == undefined){
428
- progress_width = "1";
429
- }
430
-
431
- var width = 0;
432
- var interval;
433
-
434
- var progress = function(){
435
- if (width >= progress_width) {
436
- clearInterval(interval);
437
- } else {
438
- width++;
439
- jEle.children('.pagelayer-progress-bar').css('width', width + '%');
440
- jEle.find('.pagelayer-progress-percent').text(width * 1 + '%');
441
}
442
}
443
- interval = setInterval(progress, 30);
444
- jEle.attr('pagelayer-setup', 1);
445
});
446
}
447
50
51
jQuery('.pagelayer-parallax-window img').each(function(){
52
pagelayer_pl_row_parallax(jQuery(this));
53
+ });
54
pagelayer_stars();
55
+
56
+ // We need to call the is visible thing to show the widgets loading effect
57
+ if(jQuery('.pagelayer-counter-content,.pagelayer-progress-container').length > 0){
58
+
59
+ // First Call
60
+ pagelayer_counter();
61
+ pagelayer_progress();
62
+
63
+ jQuery(window).scroll(function() {
64
+ pagelayer_progress();
65
+ pagelayer_counter();
66
+ });
67
+ }
68
69
new WOW({boxClass:'pagelayer-wow'}).init();
70
});
94
95
});
96
97
+ // Check if element is visible
98
+ function pagelayer_isVisible(ele) {
99
+
100
+ var offset = jQuery(window).height();
101
+ var viewTop = window.pageYOffset;
102
+ var viewBottom = viewTop + offset - Math.min(ele.height(), ele.innerHeight());
103
+ var top = ele.offset().top;
104
+ var bottom = top + ele.innerHeight();
105
+
106
+ if(top <= viewBottom && bottom >= viewTop){
107
+ return true;
108
+ }
109
+
110
+ return false;
111
+ }
112
+
113
// Row background video and parallax
114
function pagelayer_pl_row_video(jEle){
115
153
function pagelayer_pl_row_full(jEle){
154
155
// Get current width
156
+ var vw = jQuery('html').width();
157
158
// Now give the row the width
159
jEle.css({'width': vw, 'max-width': '100vw'});
257
children.each(function(){
258
var tEle = jQuery(this);
259
var pl_id = tEle.attr('pagelayer-id');
260
+ var title = tEle.attr('pagelayer-tab-title') || 'Tab';
261
var func = "pagelayer_tab_show(this, '"+pl_id+"')";
262
263
var icon = '';
421
422
var jEle = jQuery(this);
423
424
+ if(pagelayer_isVisible(jEle)){
425
+
426
+ var setup = jEle.attr('pagelayer-setup');
427
+
428
+ // Already setup ?
429
+ if(setup && setup.length > 0){
430
+ return true;
431
+ }
432
+
433
+ var options = {};
434
+ options['duration'] = jEle.children('.pagelayer-counter-display').attr('pagelayer-counter-animation-duration');
435
+ options['delimiter'] = jEle.children('.pagelayer-counter-display').attr('pagelayer-counter-seperator-type');
436
+ options['toValue'] = jEle.children('.pagelayer-counter-display').attr('pagelayer-counter-last-value');
437
+ jEle.children('.pagelayer-counter-display').numerator( options );
438
+
439
+ // Set that we have setup everything
440
+ jEle.attr('pagelayer-setup', 1);
441
+
442
}
443
});
444
}
445
446
function pagelayer_progress(){
447
jQuery('.pagelayer-progress-container').each(function(){
448
var jEle = jQuery(this);
449
450
+ if(pagelayer_isVisible(jEle)){
451
+
452
+ var setup = jEle.attr('pagelayer-setup');
453
+ if(setup && setup.length > 0){
454
+ return true;
455
+ }
456
+
457
+ var progress_width = jEle.children('.pagelayer-progress-bar').attr('pagelayer-progress-width');
458
+ if(progress_width == undefined){
459
+ progress_width = "1";
460
}
461
+
462
+ var width = 0;
463
+ var interval;
464
+
465
+ var progress = function(){
466
+ if (width >= progress_width) {
467
+ clearInterval(interval);
468
+ } else {
469
+ width++;
470
+ jEle.children('.pagelayer-progress-bar').css('width', width + '%');
471
+ jEle.find('.pagelayer-progress-percent').text(width * 1 + '%');
472
+ }
473
+ }
474
+ interval = setInterval(progress, 30);
475
+ jEle.attr('pagelayer-setup', 1);
476
+
477
}
478
});
479
}
480
js/properties.js CHANGED
@@ -8,6 +8,9 @@ var pagelayer_icons = {};
8
// The inline editor
9
var pagelayer_editor = {};
10
11
// Loads the Data
12
function pagelayer_data(jEle, clean){
13
@@ -303,6 +306,9 @@ function pagelayer_elpd_generate(jEle, holder){
303
var _sec = jQuery(this);
304
var par = _sec.parent();
305
306
// Get the active tab
307
var active_tab = pagelayer_elpd.find('[pagelayer-elpd-active-tab]').attr('pagelayer-elpd-tab');
308
@@ -325,6 +331,10 @@ function pagelayer_elpd_generate(jEle, holder){
325
326
});
327
328
// Handle the showing of rows
329
pagelayer_elpd_show_rows();
330
@@ -753,10 +763,22 @@ function pagelayer_elp_label(row, prop){
753
// Do we have units ?
754
if('units' in prop){
755
756
- var units = '';
757
758
for(var i in prop['units']){
759
- units += '<span '+(i == 0 ? 'selected' : '')+'>'+prop['units'][i]+'</span>';
760
}
761
762
label.append('<div class="pagelayer-elp-units">'+units+'</div>');
@@ -830,12 +852,15 @@ function pagelayer_elp_select(row, prop){
830
row.append(div);
831
832
row.find('select').on('change', function(){
833
- _pagelayer_set_atts(row, jQuery(this).val());// Save and Render
834
- });
835
836
- row.find('.pagelayer-elp-select[name="animation"]').change(function(){
837
- var anim = jQuery(this).val();
838
- _pagelayer_trigger_anim(row, anim);
839
});
840
841
}
@@ -1759,6 +1784,14 @@ function pagelayer_elp_group(row, prop){
1759
1760
pagelayer_elpd_generate(jEle, holder.find('.pagelayer-elp-group-item-body'));
1761
1762
// Setup the toggle
1763
holder.find('.pagelayer-elp-group-item-title').on('click', function(){
1764
holder.find('.pagelayer-elp-group-item-body').toggle('slow');
@@ -1821,9 +1854,19 @@ function pagelayer_elp_padding(row, prop){
1821
1822
// Is the value linked ?
1823
var link = row.find('.pagelayer-elp-padding-div .fa');
1824
- var isLinked = _pagelayer_get_tmp_att(row, 'linked');
1825
- isLinked = isLinked == 2 ? false : true;
1826
//console.log(isLinked);
1827
1828
if(isLinked){
1829
link.addClass('pagelayer-elp-padding-linked');
@@ -1842,8 +1885,6 @@ function pagelayer_elp_padding(row, prop){
1842
link.addClass('pagelayer-elp-padding-linked');
1843
}
1844
1845
- _pagelayer_set_tmp_atts(row, 'linked', (linked ? 2 : 1));
1846
-
1847
});
1848
1849
row.find('input').on('input', function(){
@@ -1938,6 +1979,49 @@ function pagelayer_elp_shadow(row, prop){
1938
1939
}
1940
1941
// The gradient property
1942
function pagelayer_elp_gradient(row, prop){
1943
8
// The inline editor
9
var pagelayer_editor = {};
10
11
+ // The active pagelayer element
12
+ var pagelayer_active_tab = {};
13
+
14
// Loads the Data
15
function pagelayer_data(jEle, clean){
16
306
var _sec = jQuery(this);
307
var par = _sec.parent();
308
309
+ pagelayer_active_tab.id = el.id;
310
+ pagelayer_active_tab.section = par.attr('section');
311
+
312
// Get the active tab
313
var active_tab = pagelayer_elpd.find('[pagelayer-elpd-active-tab]').attr('pagelayer-elpd-tab');
314
331
332
});
333
334
+ if(!pagelayer_empty(pagelayer_active_tab) && pagelayer_active_tab.id == el.id){
335
+ holder.find('>[section='+pagelayer_active_tab.section+']>.pagelayer-elpd-section-name').click();
336
+ }
337
+
338
// Handle the showing of rows
339
pagelayer_elpd_show_rows();
340
763
// Do we have units ?
764
if('units' in prop){
765
766
+ var units = '';
767
+ var tmp_val = prop.c['val'];
768
+ var default_unit = 0;
769
+
770
+ // Get unit from value
771
+ if(!(pagelayer_empty(tmp_val))){
772
+
773
+ for(var i in prop['units']){
774
+ if(tmp_val.search(prop['units'][i]) != -1){
775
+ default_unit = i;
776
+ }
777
+ }
778
+ }
779
780
for(var i in prop['units']){
781
+ units += '<span '+(i == default_unit ? 'selected' : '')+'>'+prop['units'][i]+'</span>';
782
}
783
784
label.append('<div class="pagelayer-elp-units">'+units+'</div>');
852
row.append(div);
853
854
row.find('select').on('change', function(){
855
+
856
+ var sEle = jQuery(this);
857
+
858
+ if(sEle.attr('name') == "animation"){
859
+ _pagelayer_trigger_anim(row, sEle.val());
860
+ }
861
+
862
+ _pagelayer_set_atts(row, sEle.val());// Save and Render
863
864
});
865
866
}
1784
1785
pagelayer_elpd_generate(jEle, holder.find('.pagelayer-elp-group-item-body'));
1786
1787
+ // Change the group item title
1788
+ var tmp_title = holder.find('[pagelayer-elp-name='+label_param+'] [name='+label_param+']')
1789
+ if(tmp_title.length > 0){
1790
+ jQuery(tmp_title).on('input', function(){
1791
+ holder.find('.pagelayer-elp-group-item-title').html(tmp_title.val());
1792
+ });
1793
+ }
1794
+
1795
// Setup the toggle
1796
holder.find('.pagelayer-elp-group-item-title').on('click', function(){
1797
holder.find('.pagelayer-elp-group-item-body').toggle('slow');
1854
1855
// Is the value linked ?
1856
var link = row.find('.pagelayer-elp-padding-div .fa');
1857
+ var isLinked = 1;
1858
+ //isLinked = isLinked == 2 ? false : true;
1859
//console.log(isLinked);
1860
+ var tmp_val = val[0];
1861
+
1862
+ for(var p_val in val){
1863
+
1864
+ // Check if unlinked
1865
+ if(tmp_val != val[p_val] ){
1866
+ isLinked = 0;
1867
+ }
1868
+ tmp_val = val[p_val];
1869
+ }
1870
1871
if(isLinked){
1872
link.addClass('pagelayer-elp-padding-linked');
1885
link.addClass('pagelayer-elp-padding-linked');
1886
}
1887
1888
});
1889
1890
row.find('input').on('input', function(){
1979
1980
}
1981
1982
+ // The filter property
1983
+ function pagelayer_elp_filter(row, prop){
1984
+
1985
+ var val =['','','','','','',''];
1986
+
1987
+ // Do we have a val ?
1988
+ if(!pagelayer_empty(prop.c['val'])){
1989
+ val = prop.c['val'].split(',');
1990
+ }
1991
+
1992
+ var filters = [['blur','10','0.1'],['brightness','200','1'],['contrast','200','1'],['grayscale','200','1'],['hue','360','1'],['opacity','100','1'],['saturate','200','1']];
1993
+
1994
+ var div = '<span class="pagelayer-prop-edit"><i class="fa fa-pencil"></i></span>'+
1995
+ '<div class="pagelayer-elp-filter-div">';
1996
+
1997
+ jQuery.each(val,function(key, value){
1998
+ div += '<div class="pagelayer-elp-prop-grp pagelayer-elp-filter-'+filters[key][0]+'">'+
1999
+ '<label class="pagelayer-elp-label">'+filters[key][0]+'</label>'+
2000
+ '<input class="pagelayer-elp-slider pagelayer-elp-filter-input" type="range" max="'+filters[key][1]+'" min="0" step="'+filters[key][2]+'" class="pagelayer-elp-filter-'+filters[key][0]+'" value="'+value+'"></input>'+
2001
+ '<span class="pagelayer-elp-filter-val">'+value+'</span>'+
2002
+ '</div>';
2003
+ });
2004
+
2005
+ div += '</div>';
2006
+
2007
+ row.append(div);
2008
+
2009
+ row.find('.pagelayer-prop-edit').on('click', function(){
2010
+ row.find('.pagelayer-elp-filter-div').toggleClass('pagelayer-prop-show');
2011
+ });
2012
+
2013
+ row.find('input').on('input', function(){
2014
+ var val = [];
2015
+ jQuery(this).parent().find('span').html(this.value);
2016
+ row.find('.pagelayer-elp-filter-input').each(function(){
2017
+ var value = jQuery(this).val();
2018
+ val.push(value ? value : 'none');
2019
+ });
2020
+ _pagelayer_set_atts(row, val);
2021
+ });
2022
+
2023
+ }
2024
+
2025
// The gradient property
2026
function pagelayer_elp_gradient(row, prop){
2027
js/widgets.js CHANGED
@@ -150,10 +150,10 @@ function pagelayer_render_end_pl_row(el){
150
151
// Set Row parent width
152
function pagelayer_pl_row_parent_full(par){
153
- var vw = jQuery(document).width();
154
- par.css({'width': vw,'max-width': '100vw'});
155
- par.offset({left: 0});
156
- par.children('.pagelayer-row').css({left: 0});
157
}
158
159
// Row shape render
150
151
// Set Row parent width
152
function pagelayer_pl_row_parent_full(par){
153
+ var vw = jQuery('html').width();
154
+ par.css({'width': vw,'max-width': '100vw'});
155
+ par.offset({left: 0});
156
+ par.children('.pagelayer-row').css({left: 0});
157
}
158
159
// Row shape render
languages/en.json CHANGED
@@ -579,6 +579,7 @@
579
"typography": "Typography",
580
"heading_styles": "Heading Styles",
581
"text_shadow": "Text Shadow",
582
"quote": "Quote",
583
"quotes_content_label": "Content",
584
"quotation": "Quotation",
579
"typography": "Typography",
580
"heading_styles": "Heading Styles",
581
"text_shadow": "Text Shadow",
582
+ "filter": "CSS Filters",
583
"quote": "Quote",
584
"quotes_content_label": "Content",
585
"quotation": "Quotation",
main/functions.php CHANGED
@@ -487,6 +487,9 @@ function pagelayer_load_shortcodes(){
487
include_once(PAGELAYER_DIR.'/lib/pquery/gan_selector_html.php');
488
include_once(PAGELAYER_DIR.'/lib/pquery/gan_xml2array.php');
489
include_once(PAGELAYER_DIR.'/lib/pquery/pQuery.php');
490
491
}
492
@@ -745,4 +748,66 @@ function pagelayer_unescapeHTML($str){
745
$str = str_replace('&'.$k.';', $v, $str);
746
}
747
return $str;
748
- }
487
include_once(PAGELAYER_DIR.'/lib/pquery/gan_selector_html.php');
488
include_once(PAGELAYER_DIR.'/lib/pquery/gan_xml2array.php');
489
include_once(PAGELAYER_DIR.'/lib/pquery/pQuery.php');
490
+
491
+ // Apply filter to load custom widgets
492
+ do_action('pagelayer_load_custom_widgets');
493
494
}
495
748
$str = str_replace('&'.$k.';', $v, $str);
749
}
750
return $str;
751
+ }
752
+
753
+ // Show promo notice on dashboard
754
+ function pagelayer_show_promo(){
755
+
756
+ global $pagelayer_promo_opts;
757
+ $opts = $pagelayer_promo_opts;
758
+
759
+ echo '
760
+ <div class="notice notice-success" id="pagelayer_promo" style="min-height:90px">
761
+ <a class="pagelayer_promo-close" href="javascript:" aria-label="Dismiss this Notice">
762
+ <span class="dashicons dashicons-dismiss"></span> Dismiss
763
+ </a>';
764
+
765
+ if(!empty($opts['image'])){
766
+ echo '<a href="'.$opts['website'].'"><img src="'.$opts['image'].'" style="float:left; margin:10px 20px 10px 10px" width="67" /></a>';
767
+ }
768
+
769
+ echo '
770
+ <p style="font-size:13px">We are glad you like <a href="'.$opts['website'].'"><b>PageLayer</b></a> and have been using it since the past few days. It is time to take the next step !</p>
771
+ <p>
772
+ '.(empty($opts['rating']) ? '' : '<a class="pagelayer_promo_button pagelayer_promo_button2" target="_blank" href="'.$opts['rating'].'">Rate it 5★\'s</a>').'
773
+ '.(empty($opts['facebook']) ? '' : '<a class="pagelayer_promo_button pagelayer_promo_button3" target="_blank" href="'.$opts['facebook'].'"><span class="dashicons dashicons-thumbs-up"></span> Facebook</a>').'
774
+ '.(empty($opts['twitter']) ? '' : '<a class="pagelayer_promo_button pagelayer_promo_button4" target="_blank" href="'.$opts['twitter'].'"><span class="dashicons dashicons-twitter"></span> Tweet</a>').'
775
+ '.(empty($opts['website']) ? '' : '<a class="pagelayer_promo_button pagelayer_promo_button4" target="_blank" href="'.$opts['website'].'">Visit our website</a>').'
776
+ </p>
777
+ </div>';
778
+
779
+ }
780
+
781
+ // Are we to show a promo ?
782
+ function pagelayer_maybe_promo($opts){
783
+
784
+ global $pagelayer_promo_opts;
785
+
786
+ // There must be an interval
787
+ if(empty($opts['interval'])){
788
+ return false;
789
+ }
790
+
791
+ // Are we to show a promo
792
+ $opt_name = 'pagelayer_promo_time';
793
+ $promo_time = get_option($opt_name);
794
+
795
+ // First time access
796
+ if(empty($promo_time)){
797
+ update_option($opt_name, time() + (!empty($opts['after']) ? $opts['after'] * 86400 : 0));
798
+ $promo_time = get_option($opt_name);
799
+ }
800
+
801
+ // Is there interval elapsed
802
+ if(time() > $promo_time){
803
+ $pagelayer_promo_opts = $opts;
804
+ add_action('admin_notices', 'pagelayer_show_promo');
805
+ }
806
+
807
+ // Are we to disable the promo
808
+ if(isset($_GET['pagelayer_promo']) && (int)$_GET['pagelayer_promo'] == 0){
809
+ update_option($opt_name, time() + ($opts['interval'] * 86400));
810
+ die('DONE');
811
+ }
812
+
813
+ }
main/live.php CHANGED
@@ -48,7 +48,7 @@ class PageLayer_LiveEditor{
48
add_filter('the_content', array($this, 'the_content'));
49
50
// Enqueue our Editor's JS
51
- wp_register_script('pagelayer-editor', PAGELAYER_JS.'/givejs.php?give=pagelayer-editor.js,widgets.js,'.(defined('PAGELAYER_PREMIUM') ? 'premium.js,' : '').'properties.js,drag.js,base64.js,slimscroll.js,vanilla-picker.min.js,trumbowyg.js,trumbowyg-pagelayer.js,pen.js', array('jquery'), PAGELAYER_VERSION);
52
wp_enqueue_script('pagelayer-editor');
53
54
// Enqueue the Editor's CSS
@@ -69,6 +69,9 @@ class PageLayer_LiveEditor{
69
70
// Hide Admin Bar
71
show_admin_bar(false);
72
73
// Add the footer scripts
74
add_action('wp_footer', array($this, 'wp_footer'), 1);
48
add_filter('the_content', array($this, 'the_content'));
49
50
// Enqueue our Editor's JS
51
+ wp_register_script('pagelayer-editor', PAGELAYER_JS.'/givejs.php?give=pagelayer-editor.js,widgets.js,'.(defined('PAGELAYER_PREMIUM') ? 'premium.js,' : '').'properties.js,base64.js,slimscroll.js,vanilla-picker.min.js,trumbowyg.js,trumbowyg-pagelayer.js,pen.js', array('jquery'), PAGELAYER_VERSION);
52
wp_enqueue_script('pagelayer-editor');
53
54
// Enqueue the Editor's CSS
69
70
// Hide Admin Bar
71
show_admin_bar(false);
72
+
73
+ // Load custom widgets
74
+ do_action('pagelayer_custom_editor_enqueue');
75
76
// Add the footer scripts
77
add_action('wp_footer', array($this, 'wp_footer'), 1);
main/settings.php CHANGED
@@ -82,6 +82,24 @@ if(!defined('PAGELAYER_VERSION')) {
82
}
83
}
84
85
$post_type = array('post', 'page', 'product');
86
87
$support_ept = get_option( 'pl_support_ept', ['post', 'page']);
@@ -93,7 +111,7 @@ if(!defined('PAGELAYER_VERSION')) {
93
<h1>PageLayer Editor</h1>
94
<p>Welcome To PageLayer</p>
95
<div class="tabs-wrapper">
96
- <h2 class="nav-tab-wrapper">
97
<a href="#general" class="nav-tab">General</a>
98
<a href="#settings" class="nav-tab ">Settings</a>
99
<a href="#support" class="nav-tab ">Support</a>
@@ -127,6 +145,15 @@ if(!defined('PAGELAYER_VERSION')) {
127
<p>Set the custom width of the content area. The default width set is 1170px</p>
128
</td>
129
<tr>
130
</table>
131
</div>
132
<div class="pagelayer-tab-panel" id="support">
82
}
83
}
84
85
+ if(isset($_REQUEST['pagelayer_between_widgets'])){
86
+
87
+ $space_widgets = $_REQUEST['pagelayer_between_widgets'];
88
+
89
+ if ( get_option( 'pagelayer_between_widgets' ) !== false ) {
90
+
91
+ // The option already exists, so we just update it.
92
+ update_option( 'pagelayer_between_widgets', $space_widgets );
93
+
94
+ } else {
95
+
96
+ // The option hasn't been added yet. We'll add it with $autoload set to 'no'.
97
+ $deprecated = null;
98
+ $autoload = 'no';
99
+ add_option( 'pagelayer_between_widgets', $space_widgets, $deprecated, $autoload );
100
+ }
101
+ }
102
+
103
$post_type = array('post', 'page', 'product');
104
105
$support_ept = get_option( 'pl_support_ept', ['post', 'page']);
111
<h1>PageLayer Editor</h1>
112
<p>Welcome To PageLayer</p>
113
<div class="tabs-wrapper">
114
+ <h2 class="nav-tab-wrapper pagelayer-wrapper">
115
<a href="#general" class="nav-tab">General</a>
116
<a href="#settings" class="nav-tab ">Settings</a>
117
<a href="#support" class="nav-tab ">Support</a>
145
<p>Set the custom width of the content area. The default width set is 1170px</p>
146
</td>
147
<tr>
148
+ <tr>
149
+ <th>Space Between Widgets</th>
150
+ <td>
151
+ <input name="pagelayer_between_widgets" type="number" step="1" min="0" max="500" placeholder="15" <?php if(get_option('pagelayer_between_widgets')){
152
+ echo 'value="'.get_option('pagelayer_between_widgets').'"';
153
+ }?>>
154
+ <p>Set the Space Between Widgets. The default Space set is 15px</p>
155
+ </td>
156
+ <tr>
157
</table>
158
</div>
159
<div class="pagelayer-tab-panel" id="support">
main/shortcodes.php CHANGED
@@ -352,6 +352,11 @@ $pagelayer->styles['ele_styles'] = [
352
'label' => __pl('z-index'),
353
'css' => 'z-index: {{val}}',
354
],
355
];
356
357
$pagelayer->styles['border_styles'] = [
@@ -411,6 +416,12 @@ $pagelayer->styles['border_styles'] = [
411
'show' => ['border_hover' => ''],
412
'css' => 'border-radius: {{val[0]}} {{val[1]}} {{val[2]}} {{val[3]}}; -webkit-border-radius: {{val[0]}} {{val[1]}} {{val[2]}} {{val[3]}};-moz-border-radius: {{val[0]}} {{val[1]}} {{val[2]}} {{val[3]}};',
413
],
414
'border_type_hover' => [
415
'type' => 'select',
416
'label' => __pl('border_type'),
@@ -455,6 +466,12 @@ $pagelayer->styles['border_styles'] = [
455
'show' => ['border_hover' => 'hover'],
456
'css' => ['{{element}}:hover' => 'border-radius: {{val[0]}} {{val[1]}} {{val[2]}} {{val[3]}}; -webkit-border-radius: {{val[0]}} {{val[1]}} {{val[2]}} {{val[3]}};-moz-border-radius: {{val[0]}} {{val[1]}} {{val[2]}} {{val[3]}};'],
457
],
458
];
459
460
$pagelayer->styles['animation_styles'] = [
@@ -570,11 +587,13 @@ $pagelayer->styles['custom_styles'] = [
570
'type' => 'text',
571
'label' => __pl('ele_id'),
572
'desc' => __pl('ele_id_desc'),
573
],
574
'ele_classes' => [
575
'type' => 'text',
576
'label' => __pl('ele_classes'),
577
'desc' => __pl('ele_classes_desc'),
578
],
579
];
580
@@ -605,8 +624,9 @@ pagelayer_add_shortcode(PAGELAYER_SC_PREFIX.'_row', array(
605
'stretch' => array(
606
'type' => 'select',
607
'label' => __pl('con_width'),
608
'list' => array(
609
- '' => __pl('auto'),
610
'full' => __pl('full_width'),
611
'fixed' => __pl('fixed_width')
612
),
@@ -681,12 +701,13 @@ pagelayer_add_shortcode(PAGELAYER_SC_PREFIX.'_row', array(
681
'type' => 'select',
682
'label' => __pl('column_pos'),
683
'default' => 'default',
684
- 'css' => '-webkit-box-align: {{val}}; -webkit-align-items: {{val}}; -ms-flex-align: {{val}}; align-items: {{val}};',
685
'list' => array(
686
'' => __pl('default'),
687
- 'baseline' => __pl('top'),
688
'center' => __pl('center'),
689
- 'end' => __pl('bottom')
690
),
691
),
692
'content_pos' => array(
@@ -698,7 +719,8 @@ pagelayer_add_shortcode(PAGELAYER_SC_PREFIX.'_row', array(
698
'' => __pl('default'),
699
'baseline' => __pl('top'),
700
'center' => __pl('center'),
701
- 'end' => __pl('bottom')
702
),
703
),
704
),
@@ -956,7 +978,6 @@ pagelayer_add_shortcode(PAGELAYER_SC_PREFIX.'_row', array(
956
'overlay_transperancy_hover' => array(
957
'type' => 'slider',
958
'label' => __pl('overlay_transperancy_hover'),
959
- 'default' => 0.5,
960
'min' => 0,
961
'max' => 1,
962
'step' => 0.1,
@@ -1109,7 +1130,7 @@ pagelayer_add_shortcode(PAGELAYER_SC_PREFIX.'_col', array(
1109
<img src="{{{parallax_img-url}}}">
1110
</div>
1111
<div if="{{overlay_type}}" class="pagelayer-background-overlay"></div>
1112
- <div class="pagelayer-col-holder"></div>',
1113
'holder' => '.pagelayer-col-holder',
1114
'params' => array(
1115
'content_pos' => array(
@@ -1120,15 +1141,15 @@ pagelayer_add_shortcode(PAGELAYER_SC_PREFIX.'_col', array(
1120
'{{element}} .pagelayer-col-holder' => 'width:100%'],
1121
'list' => array(
1122
'' => __pl('default'),
1123
- 'baseline' => __pl('top'),
1124
'center' => __pl('center'),
1125
- 'end' => __pl('bottom')
1126
)
1127
),
1128
'widget_space' => array(
1129
'type' => 'spinner',
1130
'label' => __pl('widget_space'),
1131
- 'default' => 15,
1132
'min' => -1000,
1133
'step' => 1,
1134
'max' => 1000,
@@ -2732,6 +2753,12 @@ pagelayer_add_shortcode(PAGELAYER_SC_PREFIX.'_image', array(
2732
'min' => 0,
2733
'max' => 100,
2734
),
2735
'img_shadow' => array(
2736
'type' => 'shadow',
2737
'label' => __pl('shadow'),
@@ -5338,6 +5365,7 @@ pagelayer_add_shortcode(PAGELAYER_SC_PREFIX.'_shortcodes', array(
5338
'group' => 'other',
5339
'func' => 'pagelayer_sc_shortcodes',
5340
'innerHTML' => 'data',
5341
'html' => '<div class="pagelayer-shortcodes-container">{{{shortcode}}}</div>',
5342
'params' => array(
5343
'data' => array(
@@ -5395,7 +5423,7 @@ pagelayer_add_shortcode(PAGELAYER_SC_PREFIX.'_testimonial', array(
5395
'name' => __pl('testimonial'),
5396
'group' => 'other',
5397
'func' => 'pagelayer_sc_testimonial',
5398
- 'innerHTML' => 'testimonial_content',
5399
'html' => '<div if="{{quote_content}}" class="pagelayer-testimonial-content">{{quote_content}}</div>
5400
<div class="pagelayer-testimonial-author-details">
5401
<div class="pagelayer-{{image_position}}">
352
'label' => __pl('z-index'),
353
'css' => 'z-index: {{val}}',
354
],
355
+ 'ele_shadow' => [
356
+ 'type' => 'shadow',
357
+ 'label' => __pl('shadow'),
358
+ 'css' => 'box-shadow: {{val[0]}}px {{val[1]}}px {{val[2]}}px {{val[3]}} !important;',
359
+ ]
360
];
361
362
$pagelayer->styles['border_styles'] = [
416
'show' => ['border_hover' => ''],
417
'css' => 'border-radius: {{val[0]}} {{val[1]}} {{val[2]}} {{val[3]}}; -webkit-border-radius: {{val[0]}} {{val[1]}} {{val[2]}} {{val[3]}};-moz-border-radius: {{val[0]}} {{val[1]}} {{val[2]}} {{val[3]}};',
418
],
419
+ 'border_shadow' => [
420
+ 'type' => 'shadow',
421
+ 'label' => __pl('text_shadow'),
422
+ 'css' => ['{{element}}' => 'box-shadow: {{val[0]}}px {{val[1]}}px {{val[2]}}px {{val[3]}} !important;'],
423
+ 'show' => ['border_hover' => ''],
424
+ ],
425
'border_type_hover' => [
426
'type' => 'select',
427
'label' => __pl('border_type'),
466
'show' => ['border_hover' => 'hover'],
467
'css' => ['{{element}}:hover' => 'border-radius: {{val[0]}} {{val[1]}} {{val[2]}} {{val[3]}}; -webkit-border-radius: {{val[0]}} {{val[1]}} {{val[2]}} {{val[3]}};-moz-border-radius: {{val[0]}} {{val[1]}} {{val[2]}} {{val[3]}};'],
468
],
469
+ 'border_shadow_hover' => [
470
+ 'type' => 'shadow',
471
+ 'label' => __pl('text_shadow'),
472
+ 'css' => ['{{element}}:hover' => 'box-shadow: {{val[0]}}px {{val[1]}}px {{val[2]}}px {{val[3]}} !important;'],
473
+ 'show' => ['border_hover' => 'hover'],
474
+ ],
475
];
476
477
$pagelayer->styles['animation_styles'] = [
587
'type' => 'text',
588
'label' => __pl('ele_id'),
589
'desc' => __pl('ele_id_desc'),
590
+ 'addAttr' => 'id="{{ele_id}}"',
591
],
592
'ele_classes' => [
593
'type' => 'text',
594
'label' => __pl('ele_classes'),
595
'desc' => __pl('ele_classes_desc'),
596
+ 'addClass' => '{{val}}',
597
],
598
];
599
624
'stretch' => array(
625
'type' => 'select',
626
'label' => __pl('con_width'),
627
+ 'default' => 'auto',
628
'list' => array(
629
+ 'auto' => __pl('auto'),
630
'full' => __pl('full_width'),
631
'fixed' => __pl('fixed_width')
632
),
701
'type' => 'select',
702
'label' => __pl('column_pos'),
703
'default' => 'default',
704
+ 'css' => ['{{element}}' => '-webkit-box-align: {{val}}; -webkit-align-items: {{val}}; -ms-flex-align: {{val}}; align-items: {{val}};'],
705
'list' => array(
706
'' => __pl('default'),
707
+ 'flex-start' => __pl('top'),
708
'center' => __pl('center'),
709
+ 'flex-end' => __pl('bottom'),
710
+ 'stretch' => __pl('Stretch')
711
),