PluginProbe
Page Builder: Pagelayer – Drag and Drop website builder / 1.0.5
Page Builder: Pagelayer – Drag and Drop website builder v1.0.5
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.5, at js/widgets.js

582 lines 15.2 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_editable+' .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', '');
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 function pagelayer_social_icon_onchange(jEle, row, val){
319
320 var url = '';
321
322 // Lets get the value of the nearest social icon
323 for(var k in pagelayer_social_urls){
324 var patt = new RegExp(k, 'i');
325 if(patt.test(val)){
326 url = pagelayer_social_urls[k];
327 }
328 }
329
330 if(url.length > 0){
331 var social_url_row = row.parent().find('[pagelayer-elp-name="social_url"]');
332 //console.log(social_url_row);
333 social_url_row.find('.pagelayer-elp-link').val(url).trigger('change');
334 }
335 }
336
337 // Render the social icon
338 function pagelayer_render_end_pl_social(el){
339 pagelayer_social(el.$, '.pagelayer-icon-holder');
340 }
341
342 // Render the counter
343 function pagelayer_render_end_pl_counter(el){
344 pagelayer_counter();
345 };
346
347 // Render the progress
348 function pagelayer_render_end_pl_progress(el){
349 pagelayer_progress();
350 };
351
352 // Render the image slider
353 function pagelayer_render_pl_image_slider(el){
354
355 // The URLs
356 var img_urls = !pagelayer_empty(el.tmp['ids-urls']) ? JSON.parse(el.tmp['ids-urls']) : [];
357 var all_urls = !pagelayer_empty(el.tmp['ids-all-urls']) ? JSON.parse(el.tmp['ids-all-urls']) : [];
358 //console.log(img_urls);
359
360 var ul = '';
361 var is_link = 'link_type' in el.atts && !pagelayer_empty(el.atts['link_type']) ? true : false;
362
363 // Create figure HTML
364 for (var x in img_urls){
365
366 // Use the default URL first
367 var url = img_urls[x];
368
369 // But if we have a custom size, use that
370 if(el.atts['size'] != 'custom' && x in all_urls && el.atts['size'] in all_urls[x]){
371 url = all_urls[x][el.atts['size']];
372 }
373
374 ul += '<li class="pagelayer-slider-item">';
375
376 if(is_link){
377 var link = (el.atts['link_type'] == 'media_file' ? url : (el.atts['link'] || ''))
378 ul += '<a href="'+link+'">';
379 }
380
381 ul += '<img class="pagelayer-img" src="'+url+'">';
382
383 if(is_link){
384 ul += '</a>';
385 }
386
387 ul += '</li>';
388 }
389
390 if(pagelayer_empty(ul)){
391 ul = '<h4 style="text-align:center;">'+ pagelayer_l('Please select Images from left side Widget properties.')+'</h4>';
392 }
393
394 el.atts['ul'] = ul;
395
396 // Which arrows to show
397 if('controls' in el.atts && (el.atts['controls'] == 'arrows' || el.atts['controls'] == 'none')){
398 el.CSS.attr.push({'sel': '.pagelayer-image-slider-ul', 'val': 'data-pager="false"'});
399 }
400
401 if('controls' in el.atts && (el.atts['controls'] == 'pager' || el.atts['controls'] == 'none')){
402 el.CSS.attr.push({'sel': '.pagelayer-image-slider-ul', 'val': 'data-controls="false"'});
403 }
404
405 };
406
407 // Render the image slider
408 function pagelayer_render_end_pl_image_slider(el){
409 pagelayer_owl_destroy(el.$, '.pagelayer-image-slider-ul');
410 pagelayer_pl_image_slider(el.$);
411 };
412
413
414 // Render the grid gallery
415 function pagelayer_render_pl_grid_gallery(el){
416
417 // The URLs
418 var img_urls = !pagelayer_empty(el.tmp['ids-urls']) ? JSON.parse(el.tmp['ids-urls']) : [];
419 var all_urls = !pagelayer_empty(el.tmp['ids-all-urls']) ? JSON.parse(el.tmp['ids-all-urls']) : [];
420 var img_title = !pagelayer_empty(el.tmp['ids-all-titles']) ? JSON.parse(el.tmp['ids-all-titles']) : [];
421 var img_links = !pagelayer_empty(el.tmp['ids-all-links']) ? JSON.parse(el.tmp['ids-all-links']) : [];
422 var img_captions = !pagelayer_empty(el.tmp['ids-all-captions']) ? JSON.parse(el.tmp['ids-all-captions']) : [];
423 //console.log(img_urls);
424
425 var ul = '';
426 var is_link = 'link_to' in el.atts && !pagelayer_empty(el.atts['link_to']) ? true : false;
427 var col = el.atts['columns'];
428
429 var i = 0;
430
431 ul += '<ul class="pagelayer-grid-gallery-ul">';
432 var gallery_rand = 'gallery-id-'+Math.floor((Math.random() * 100) + 1);
433
434 // Create figure HTML
435 for (var x in img_urls){
436
437 /* if(i % col == 0 && i != 0){
438 ul += '</ul><ul class="pagelayer-grid-gallery-ul">';
439 } */
440
441 // Use the default URL first
442 var url = img_urls[x];
443
444 // But if we have a custom size, use that
445 if(el.atts['size'] != 'custom' && x in all_urls && el.atts['size'] in all_urls[x]){
446 url = all_urls[x][el.atts['size']];
447 }
448
449
450 ul += '<li class="pagelayer-gallery-item" >';
451
452 if(!is_link){
453 ul += '<div>';
454 }
455
456 if(is_link && el.atts['link_to'] == 'media_file'){
457 var link = (el.atts['link_to'] == 'media_file' ? url : (el.atts['link'] || ''))
458 ul += '<a href="'+link+'" class="pagelayer-ele-link">';
459 }
460
461 if(is_link && el.atts['link_to'] == 'attachment'){
462 var link = img_links[x];
463 ul += '<a href="'+link+'" class="pagelayer-ele-link">';
464 }
465
466 if(is_link && el.atts['link_to'] == 'lightbox'){
467 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']+'">'
468 }
469
470 ul += '<img class="pagelayer-img" src="'+url+'" title="'+img_title[x]+'" alt="'+img_title[x]+'">';
471
472 if(el.atts['caption'] == 'true'){
473 ul += '<span class="pagelayer-grid-gallery-caption">'+img_captions[x]+'</span>';
474 }
475
476 if(is_link){
477 ul += '</a>';
478 }
479
480 if(!is_link){
481 ul += '</div>';
482 }
483
484 ul += '</li>';
485 i++;
486 }
487 ul += '</ul>';
488
489 el.tmp['gallery-random-id'] = gallery_rand;
490
491 el.atts['ul'] = ul;
492
493 };
494
495 // Render for tabs
496 function pagelayer_render_html_pl_tabs(el){
497 el.CSS.attr.push({'sel': '{{element}}', 'val': 'pagelayer-tabs-rotate="'+el.atts["rotate"]+'"'});
498 };
499
500 // Render the accordion item
501 function pagelayer_render_end_pl_tabs(el){
502 pagelayer_pl_tabs(el.$);
503 }
504
505 // Render the accordion item
506 function pagelayer_render_end_pl_accordion(el){
507 pagelayer_pl_accordion(el.$);
508 };
509
510 // Render the collapse item
511 function pagelayer_render_end_pl_collapse(el){
512 pagelayer_pl_collapse(el.$);
513 };
514
515 // Shortcode Handler
516 var pagelayer_shortcodes_timer;
517 function pagelayer_render_pl_shortcodes(el){
518
519 // Clear any previous timeout
520 clearTimeout(pagelayer_shortcodes_timer);
521
522 // Set a timer for constant change
523 pagelayer_shortcodes_timer = setTimeout(function(){
524
525 // Make the call
526 jQuery.ajax({
527 url: pagelayer_ajax_url+'&action=pagelayer_do_shortcodes',
528 type: 'POST',
529 data: {
530 pagelayer_nonce: pagelayer_ajax_nonce,
531 shortcode_data: el.atts['data']
532 },
533 success:function(data) {
534 el.$.find('.pagelayer-shortcodes-container').html(data);
535 }
536 });
537
538 }, 500);
539
540 };
541
542 // Render the widget area i.e. Sidebars
543 function pagelayer_render_pl_wp_widgets(el){
544
545 // Clear any previous timeout
546 clearTimeout(pagelayer_shortcodes_timer);
547
548 // Set a timer for constant change
549 pagelayer_shortcodes_timer = setTimeout(function(){
550
551 // Make the call
552 jQuery.ajax({
553 url: pagelayer_ajax_url+'&action=pagelayer_fetch_sidebar',
554 type: 'POST',
555 data: {
556 pagelayer_nonce: pagelayer_ajax_nonce,
557 sidebar: el.atts['sidebar']
558 },
559 success:function(data) {
560 el.$.find('.pagelayer-wp-sidebar-holder').html(data);
561 }
562 });
563
564 }, 500);
565
566 };
567
568 function pagelayer_owl_destroy(jEle, slides_class){
569
570 var ul = jEle.find(slides_class);
571 var setup = jEle.attr('pagelayer-setup');
572
573 // Already setup ?
574 if(setup && setup.length > 0){
575 if(ul.children('.pagelayer-ele-wrap')){
576 ul.pagelayerOwlCarousel('destroy');
577 ul.find('[class^="pagelayer-owl-"]').remove();
578 jEle.removeAttr('pagelayer-setup');
579 }
580 }
581 }
582