PluginProbe
Page Builder: Pagelayer – Drag and Drop website builder / 1.0.2
Page Builder: Pagelayer – Drag and Drop website builder v1.0.2
2.2.1 2.2.0 2.1.9 2.1.8 2.1.7 2.1.6 2.1.5 2.1.4 2.1.3 trunk 0.9.0 0.9.1 0.9.2 0.9.3 0.9.4 0.9.5 0.9.6 0.9.7 0.9.8 0.9.9 1.0.0 1.0.2 1.0.3 1.0.4 1.0.5 All 129 releases
pagelayer / js / widgets.js

widgets.js in Page Builder: Pagelayer – Drag and Drop website builder 1.0.2, at js/widgets.js

563 lines 14.8 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1
2 pagelayer_svg_cache = {};
3 var pagelayer_document_width;
4
5 // For automatic row parent change
6 jQuery(window).resize(function(){
7
8 var new_vw = jQuery(document).width();
9
10 if(new_vw == pagelayer_document_width){
11 return false;
12 }
13
14 pagelayer_document_width = new_vw;
15
16 // Set a timeout to prevent bubbling
17 setTimeout(function(){
18
19 jQuery('.pagelayer-row-stretch-full').each(function(){
20 var par = jQuery(this).parent();
21 pagelayer_pl_row_parent_full(par);
22 });
23
24 }, 200);
25
26 });
27
28 // Render for row
29 function pagelayer_render_pl_row(el){
30
31 var img_urls = !pagelayer_empty(el.tmp['bg_slider-urls']) ? JSON.parse(el.tmp['bg_slider-urls']) : [];
32 el.atts['slider'] = '';
33 if(!pagelayer_empty(img_urls)){
34 for(var x in img_urls){
35 el.atts['slider'] += '<div class="pagelayer-bgimg-slide" style="background-image:url('+img_urls[x]+')"></div>';
36 }
37 }
38
39 pagelayer_bg_video(el);
40 }
41
42 // Render for col
43 function pagelayer_render_pl_col(el){
44
45 var img_urls = !pagelayer_empty(el.tmp['bg_slider-urls']) ? JSON.parse(el.tmp['bg_slider-urls']) : [];
46 el.atts['slider'] = '';
47 if(!pagelayer_empty(img_urls)){
48 for(var x in img_urls){
49 el.atts['slider'] += '<div class="pagelayer-bgimg-slide" style="background-image:url('+img_urls[x]+')"></div>';
50 }
51 }
52
53 // We need the parent of type pagelayer-wrap-col
54 var par = el.$.parent('.pagelayer-wrap-col');
55
56 // Apply to wrapper
57 if(!pagelayer_empty(el.atts['col'])){
58
59 for(var x=1; x<=12; x++){
60 if(par.hasClass('pagelayer-col-'+x)){
61 par.removeClass('pagelayer-col-'+x);
62 break;
63 }
64 }
65
66 par.addClass('pagelayer-col-'+el.atts['col']);
67 par.css('width', '');
68 }
69
70 if(el.atts['col_width']){
71 par.css('width', el.atts['col_width']+'%');
72 }
73
74 pagelayer_bg_video(el);
75 }
76
77 function pagelayer_bg_video(el){
78
79 var youtubeRegExp = /youtube\.com|youtu\.be/;
80 var vimeoRegExp = /vimeo\.com/;
81
82 el.tmp['bg_video_src-url'] = el.tmp['bg_video_src-url'] || el.atts['bg_video_src'];
83
84 var src = el.tmp['bg_video_src-url'];
85
86 var iframe_src = pagelayer_video_url(el.tmp['bg_video_src-url']);
87
88 if (youtubeRegExp.exec(src)) {
89
90 var youtubeRegExp1 = /youtube\.com/;
91 var youtubewatch = /watch/;
92 var youtubeembed = /embed/;
93 var youtube = /youtu\.be/;
94 var videoId;
95
96 if (youtubeRegExp1.exec(src)) {
97
98 if (youtubewatch.exec(src)) {
99 videoId = src.split('?v=');
100
101 } else if (youtubewatch.exec(src)) {
102 videoId = src.split('embed/');
103 }
104
105 } else if (youtube.exec(src)) {
106 videoId = src.split('.be/');
107 }
108 //console.log(frame_height);
109 el.atts['vid_src'] = '<iframe src="'+iframe_src+'?autoplay=1&controls=0&showinfo=0&rel=0&loop=1&autohide=1&playlist='+videoId[1]+'" allowfullscreen="1" webkitallowfullscreen="1" mozallowfullscreen="1" frameborder="0"></iframe>';
110
111 } else if (vimeoRegExp.exec(src)) {
112
113 el.atts['vid_src'] = '<iframe src="'+iframe_src+'?background=1&autoplay=1&loop=1&byline=0&title=0" allowfullscreen="1" webkitallowfullscreen="1" mozallowfullscreen="1" frameborder="0"></iframe>';
114
115 }else{
116
117 el.atts['vid_src'] = '<video autoplay loop>'+
118 '<source src="'+iframe_src+'" type="video/mp4">'+
119 '</video>';
120
121 }
122
123 }
124
125 // Load the full width row
126 function pagelayer_render_end_pl_row(el){
127
128 // The parent
129 var par = el.$.parent();
130
131 // Any class with full width
132 if(el.$.hasClass('pagelayer-row-stretch-full')){
133
134 // Give it the full width
135 pagelayer_pl_row_full(el.$);
136
137 // Give full width to the parent
138 pagelayer_pl_row_parent_full(par);
139
140 // Also add that we had a full width
141 el.$.addClass('pagelayer-row-stretch-had-full');
142
143 // Did this row have full width ?
144 }else if(el.$.hasClass('pagelayer-row-stretch-had-full')){
145
146 // Remove style
147 el.$.removeAttr('style');
148 par.removeAttr('style');
149 par.children('.pagelayer-ele-overlay').removeAttr('style');
150
151 // Remove HAD class
152 el.$.removeClass('pagelayer-row-stretch-had-full');
153
154 }
155
156 pagelayer_pl_row_video(el.$);
157
158 el.$.find('.pagelayer-parallax-window img').each(function(){
159 pagelayer_pl_row_parallax(jQuery(this));
160 });
161
162 el.$.find('.pagelayer-bgimg-slider').each(function(){
163 pagelayer_pl_row_slider(jQuery(this));
164 });
165
166 // Row shape
167 if('row_shape_type_top' in el.atts){
168 pagelayer_render_row_shape(el, 'top')
169 }
170
171 if('row_shape_type_bottom' in el.atts){
172 pagelayer_render_row_shape(el, 'bottom')
173 }
174 }
175
176 // Set Row parent width
177 function pagelayer_pl_row_parent_full(par){
178 var vw = jQuery('html').width();
179 par.css({'width': vw,'max-width': '100vw'});
180 par.offset({left: 0});
181 par.children('.pagelayer-row').css({left: 0});
182 }
183
184 // Row shape render
185 function pagelayer_render_row_shape(el, shape_pos){
186
187 var name = el.atts['row_shape_type_'+shape_pos]+'-'+shape_pos+'.svg';
188
189 // DO we have in cache
190 if(!(name in pagelayer_svg_cache)){
191 // Make url and fetch
192 var url = pagelayer_url+'/images/shapes/'+name;
193 jQuery.get(url, function(data){
194 el.$.find('.pagelayer-svg-'+shape_pos).html(data);
195 pagelayer_svg_cache[name] = data;
196 }, 'html');
197
198 // Fill with cache
199 }else{
200 el.$.find('.pagelayer-svg-'+shape_pos).html(pagelayer_svg_cache[name]);
201 }
202
203 }
204
205 // Load the col
206 function pagelayer_render_end_pl_col(el){
207
208 pagelayer_pl_row_video(el.$);
209
210 el.$.find('.pagelayer-parallax-window img').each(function(){
211 pagelayer_pl_row_parallax(jQuery(this));
212 });
213
214 el.$.find('.pagelayer-bgimg-slider').each(function(){
215 pagelayer_pl_row_slider(jQuery(this));
216 });
217
218 }
219
220 // Render the image object
221 function pagelayer_render_pl_image(el){
222
223 // Decide the image URL
224 el.atts['func_id'] = el.tmp['id-'+el.atts['id-size']+'-url'] || el.tmp['id-url'];
225 el.atts['func_id'] = el.atts['func_id'] || el.atts['id'];
226
227 // What is the link ?
228 if('link_type' in el.atts){
229
230 // Custom url
231 if(el.atts['link_type'] == 'custom_url'){
232 el.atts['func_link'] = el.atts['link'];
233 }
234
235 // Link to the media file itself
236 if(el.atts['link_type'] == 'media_file'){
237 el.atts['func_link'] = el.tmp['id-url'] || el.atts['id'];
238 }
239
240 // Lightbox
241 if(el.atts['link_type'] == 'lightbox'){
242 el.atts['func_link'] = el.tmp['id-url'] || el.atts['id'];
243 }
244 }
245 }
246
247 // Incase if there is a lightbox
248 function pagelayer_render_end_pl_image(el){
249 pagelayer_pl_image(el.$);
250 }
251
252 // Render for video
253 function pagelayer_render_pl_video(el){
254 el.atts['video_overlay_image-url'] = el.tmp['video_overlay_image-'+el.atts['custom_size']+'-url'] || el.tmp['video_overlay_image-url'];
255 el.atts['video_overlay_image-url'] = el.atts['video_overlay_image-url'] || el.atts['video_overlay_image'];
256 el.tmp['src-url'] = el.tmp['src-url'] || el.atts['src'];
257 el.tmp['ele_id'] = el['id'];
258 el.atts['vid_src'] = pagelayer_video_url(el.tmp['src-url']);
259
260 if(el.atts['autoplay'] == "true"){
261 el.atts['vid_src'] +="?&autoplay=1";
262 }else{
263 el.atts['vid_src'] +="?&autoplay=0";
264 }
265
266 if(el.atts['mute'] == "true"){
267 el.atts['vid_src'] +="&mute=1";
268 }else{
269 el.atts['vid_src'] +="&mute=0";
270 }
271
272 if(el.atts['loop'] == "true"){
273 el.atts['vid_src'] +="&loop=1";
274 }else{
275 el.atts['vid_src'] +="&loop=0";
276 }
277 }
278
279 // Incase if there is a lightbox
280 function pagelayer_render_end_pl_video(el){
281 pagelayer_pl_video(el.$);
282 }
283
284 // Render the testimonial
285 function pagelayer_render_pl_testimonial(el){
286 //console.log(el);
287 // Decide the image URL
288 el.atts['func_image'] = el.tmp['avatar-'+el.atts['custom_size']+'-url'] || el.tmp['avatar-url'];
289 el.atts['func_image'] = el.atts['func_image'] || el.atts['avatar'];
290
291 }
292
293 // Render the stars
294 function pagelayer_render_end_pl_stars(el){
295 pagelayer_stars();
296 };
297
298
299 // Render the service box
300 function pagelayer_render_pl_service(el){
301
302 // Decide the image URL
303 el.atts['func_image'] = el.tmp['service_image-'+el.atts['service_image_size']+'-url'] || el.tmp['service_image-url'];
304 el.atts['func_image'] = el.atts['func_image'] || el.atts['service_image'];
305
306 }
307
308 function pagelayer_social(jEle,sel){
309 var holder = jEle.find(sel);
310 var icon = holder.data('icon');
311 //alert(icon);
312 var icon_splited = icon.split(' fa-');
313 //console.log(icon_splited);
314 holder.addClass('pagelayer-'+icon_splited[1]);
315
316 }
317
318 // Render the social icon
319 function pagelayer_render_end_pl_social(el){
320 pagelayer_social(el.$, '.pagelayer-icon-holder');
321 }
322
323 // Render the counter
324 function pagelayer_render_end_pl_counter(el){
325 pagelayer_counter();
326 };
327
328 // Render the progress
329 function pagelayer_render_end_pl_progress(el){
330 pagelayer_progress();
331 };
332
333 // Render the image slider
334 function pagelayer_render_pl_image_slider(el){
335
336 // The URLs
337 var img_urls = !pagelayer_empty(el.tmp['ids-urls']) ? JSON.parse(el.tmp['ids-urls']) : [];
338 var all_urls = !pagelayer_empty(el.tmp['ids-all-urls']) ? JSON.parse(el.tmp['ids-all-urls']) : [];
339 //console.log(img_urls);
340
341 var ul = '';
342 var is_link = 'link_type' in el.atts && !pagelayer_empty(el.atts['link_type']) ? true : false;
343
344 // Create figure HTML
345 for (var x in img_urls){
346
347 // Use the default URL first
348 var url = img_urls[x];
349
350 // But if we have a custom size, use that
351 if(el.atts['size'] != 'custom' && x in all_urls && el.atts['size'] in all_urls[x]){
352 url = all_urls[x][el.atts['size']];
353 }
354
355 ul += '<li class="pagelayer-slider-item">';
356
357 if(is_link){
358 var link = (el.atts['link_type'] == 'media_file' ? url : (el.atts['link'] || ''))
359 ul += '<a href="'+link+'">';
360 }
361
362 ul += '<img class="pagelayer-img" src="'+url+'">';
363
364 if(is_link){
365 ul += '</a>';
366 }
367
368 ul += '</li>';
369 }
370
371 if(pagelayer_empty(ul)){
372 ul = '<h4 style="text-align:center;">'+ pagelayer_l('Please select Images from left side Widget properties.')+'</h4>';
373 }
374
375 el.atts['ul'] = ul;
376
377 // Which arrows to show
378 if('controls' in el.atts && (el.atts['controls'] == 'arrows' || el.atts['controls'] == 'none')){
379 el.CSS.attr.push({'sel': '.pagelayer-image-slider-ul', 'val': 'data-pager="false"'});
380 }
381
382 if('controls' in el.atts && (el.atts['controls'] == 'pager' || el.atts['controls'] == 'none')){
383 el.CSS.attr.push({'sel': '.pagelayer-image-slider-ul', 'val': 'data-controls="false"'});
384 }
385
386 };
387
388 // Render the image slider
389 function pagelayer_render_end_pl_image_slider(el){
390 pagelayer_owl_destroy(el.$, '.pagelayer-image-slider-ul');
391 pagelayer_pl_image_slider(el.$);
392 };
393
394
395 // Render the grid gallery
396 function pagelayer_render_pl_grid_gallery(el){
397
398 // The URLs
399 var img_urls = !pagelayer_empty(el.tmp['ids-urls']) ? JSON.parse(el.tmp['ids-urls']) : [];
400 var all_urls = !pagelayer_empty(el.tmp['ids-all-urls']) ? JSON.parse(el.tmp['ids-all-urls']) : [];
401 var img_title = !pagelayer_empty(el.tmp['ids-all-titles']) ? JSON.parse(el.tmp['ids-all-titles']) : [];
402 var img_links = !pagelayer_empty(el.tmp['ids-all-links']) ? JSON.parse(el.tmp['ids-all-links']) : [];
403 var img_captions = !pagelayer_empty(el.tmp['ids-all-captions']) ? JSON.parse(el.tmp['ids-all-captions']) : [];
404 //console.log(img_urls);
405
406 var ul = '';
407 var is_link = 'link_to' in el.atts && !pagelayer_empty(el.atts['link_to']) ? true : false;
408 var col = el.atts['columns'];
409
410 var i = 0;
411
412 ul += '<ul class="pagelayer-grid-gallery-ul">';
413 var gallery_rand = 'gallery-id-'+Math.floor((Math.random() * 100) + 1);
414
415 // Create figure HTML
416 for (var x in img_urls){
417
418 /* if(i % col == 0 && i != 0){
419 ul += '</ul><ul class="pagelayer-grid-gallery-ul">';
420 } */
421
422 // Use the default URL first
423 var url = img_urls[x];
424
425 // But if we have a custom size, use that
426 if(el.atts['size'] != 'custom' && x in all_urls && el.atts['size'] in all_urls[x]){
427 url = all_urls[x][el.atts['size']];
428 }
429
430
431 ul += '<li class="pagelayer-gallery-item" >';
432
433 if(!is_link){
434 ul += '<div>';
435 }
436
437 if(is_link && el.atts['link_to'] == 'media_file'){
438 var link = (el.atts['link_to'] == 'media_file' ? url : (el.atts['link'] || ''))
439 ul += '<a href="'+link+'" class="pagelayer-ele-link">';
440 }
441
442 if(is_link && el.atts['link_to'] == 'attachment'){
443 var link = img_links[x];
444 ul += '<a href="'+link+'" class="pagelayer-ele-link">';
445 }
446
447 if(is_link && el.atts['link_to'] == 'lightbox'){
448 ul += '<a href="'+img_urls[x]+'" class="pagelayer-ele-link" data-lightbox-gallery="'+gallery_rand+'" alt="'+img_title[x]+'" pagelayer-grid-gallery-type="'+el.atts['link_to']+'">'
449 }
450
451 ul += '<img class="pagelayer-img" src="'+url+'" title="'+img_title[x]+'" alt="'+img_title[x]+'">';
452
453 if(el.atts['caption'] == 'true'){
454 ul += '<span class="pagelayer-grid-gallery-caption">'+img_captions[x]+'</span>';
455 }
456
457 if(is_link){
458 ul += '</a>';
459 }
460
461 if(!is_link){
462 ul += '</div>';
463 }
464
465 ul += '</li>';
466 i++;
467 }
468 ul += '</ul>';
469
470 el.tmp['gallery-random-id'] = gallery_rand;
471
472 el.atts['ul'] = ul;
473
474 };
475
476 // Render for tabs
477 function pagelayer_render_html_pl_tabs(el){
478 el.CSS.attr.push({'sel': '{{element}}', 'val': 'pagelayer-tabs-rotate="'+el.atts["rotate"]+'"'});
479 };
480
481 // Render the accordion item
482 function pagelayer_render_end_pl_tabs(el){
483 pagelayer_pl_tabs(el.$);
484 }
485
486 // Render the accordion item
487 function pagelayer_render_end_pl_accordion(el){
488 pagelayer_pl_accordion(el.$);
489 };
490
491 // Render the collapse item
492 function pagelayer_render_end_pl_collapse(el){
493 pagelayer_pl_collapse(el.$);
494 };
495
496 // Shortcode Handler
497 var pagelayer_shortcodes_timer;
498 function pagelayer_render_pl_shortcodes(el){
499
500 // Clear any previous timeout
501 clearTimeout(pagelayer_shortcodes_timer);
502
503 // Set a timer for constant change
504 pagelayer_shortcodes_timer = setTimeout(function(){
505
506 // Make the call
507 jQuery.ajax({
508 url: pagelayer_ajax_url+'&action=pagelayer_do_shortcodes',
509 type: 'POST',
510 data: {
511 pagelayer_nonce: pagelayer_ajax_nonce,
512 shortcode_data: el.atts['data']
513 },
514 success:function(data) {
515 el.$.find('.pagelayer-shortcodes-container').html(data);
516 }
517 });
518
519 }, 500);
520
521 };
522
523 // Render the widget area i.e. Sidebars
524 function pagelayer_render_pl_wp_widgets(el){
525
526 // Clear any previous timeout
527 clearTimeout(pagelayer_shortcodes_timer);
528
529 // Set a timer for constant change
530 pagelayer_shortcodes_timer = setTimeout(function(){
531
532 // Make the call
533 jQuery.ajax({
534 url: pagelayer_ajax_url+'&action=pagelayer_fetch_sidebar',
535 type: 'POST',
536 data: {
537 pagelayer_nonce: pagelayer_ajax_nonce,
538 sidebar: el.atts['sidebar']
539 },
540 success:function(data) {
541 el.$.find('.pagelayer-wp-sidebar-holder').html(data);
542 }
543 });
544
545 }, 500);
546
547 };
548
549 function pagelayer_owl_destroy(jEle, slides_class){
550
551 var ul = jEle.find(slides_class);
552 var setup = jEle.attr('pagelayer-setup');
553
554 // Already setup ?
555 if(setup && setup.length > 0){
556 if(ul.children('.pagelayer-ele-wrap')){
557 ul.pagelayerOwlCarousel('destroy');
558 ul.find('[class^="pagelayer-owl-"]').remove();
559 jEle.removeAttr('pagelayer-setup');
560 }
561 }
562 }
563