https://alliancabeneficios.com.br/assets/gallery/script.js

1(function($) {
2    'use strict';
3
4    function getVideoId(url) {
5        if ('false' === url) return false;
6        var result = /(?:\?v=|\/embed\/|\.be\/)([-a-z0-9_]+)/i.exec(url) || /^([-a-z0-9_]+)$/i.exec(url);
7
8        return result ? result[1] : false;
9    }
10
11    function onPlayerReady(event) {
12        if ($(event.target).closest('.mbr-slider').hasClass('in')) {
13            event.target.playVideo();
14        }
15    }
16
17    var isBuilder = $('html').hasClass('is-builder');
18
19    /* get youtube id */
20    if (!isBuilder) {
21        /* google iframe */
22        var tag = document.createElement('script');
23        tag.src = "https://www.youtube.com/iframe_api";
24        var firstScriptTag = document.getElementsByTagName('script')[0];
25        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
26        var players = [];
27
28        $('.carousel-item.video-container img').css('display','none');
29
30        /* google iframe api init function */
31        window.onYouTubeIframeAPIReady = function() {
32            var ytp = ytp || {};
33            ytp.YTAPIReady || (ytp.YTAPIReady = !0,
34                jQuery(document).trigger("YTAPIReady"));
35
36            $('.video-slide').each(function(i) {
37                $('.video-container').eq(i).append('<div id ="mbr-video-' + i + '" class="mbr-background-video" data-video-num="' + i + '"></div>')
38                    .append('<div class="item-overlay"></div>');
39                $(this).attr('data-video-num', i);
40
41                if ($(this).attr('data-video-url').indexOf('vimeo.com') !== -1) {
42                    var options = {
43                        id: $(this).attr('data-video-url'),
44                        width: '100%',
45                        height: '100%',
46                        loop: true
47                    };
48
49                    var player = new Vimeo.Player('mbr-video-' + i, options);
50
51                    player.playVideo = Vimeo.play;
52                } else {
53                    var player = new YT.Player('mbr-video-' + i, {
54                        height: '100%',
55                        width: '100%',
56                        videoId: getVideoId($(this).attr('data-video-url')),
57                        events: {
58                            'onReady': onPlayerReady
59                        },
60                        playerVars: {
61                            rel: 0
62                        }
63                    });
64                }
65
66                players.push(player);
67            });
68        };
69    }
70
71    function updateMasonry(event) {
72        var $section = $(event.target);
73        if (typeof $.fn.masonry !== 'undefined') {
74            $section.outerFind('.mbr-gallery').each(function() {
75                var $msnr = $(this).find('.mbr-gallery-row');
76                $msnr.imagesLoaded().progress(function() {
77                    $msnr.masonry({
78                        itemSelector: '.mbr-gallery-item:not(.mbr-gallery-item__hided)',
79                        percentPosition: true,
80                        horizontalOrder: true
81                    });
82
83                    // reload masonry (need for adding new or re-sort items)
84                    $msnr.masonry('reloadItems');
85                
86                    $msnr.on('filter', function() {
87                        $msnr.masonry('reloadItems');
88                        $msnr.masonry('layout');
89                        // update parallax backgrounds
90                        $(window).trigger('update.parallax');
91                    }.bind(this, $msnr));
92                    $msnr.imagesLoaded().progress(function() {
93                        $msnr.masonry('layout');
94                    });
95                })
96            });
97        }
98    };
99
100    /* Masonry Grid */
101    $(document).on('add.cards', function(event) {
102        var $section = $(event.target);
103        $section.on('click', '.mbr-gallery-filter li', function(e) {
104            e.preventDefault();
105            var $li = $(this).closest('li');
106
107            $li.parent().find('li').removeClass('active');
108            $li.addClass('active');
109
110            var $mas = $li.closest('section').find('.mbr-gallery-row');
111            var filter = $(this)[0].textContent.trim();
112
113            $section.find('.mbr-gallery-item').each(function(i, el) {
114                var $elem = $(this);
115                var tagsAttr = $elem.attr('data-tags');
116                var tags = tagsAttr.split(',');
117
118                var tagsTrimmed = tags.map(function(el) {
119                    return el.trim();
120                });
121
122                if ($.inArray(filter, tagsTrimmed) === -1 && !$li.hasClass('mbr-gallery-filter-all')) {
123                    $elem.addClass('mbr-gallery-item__hided');
124
125                    $elem.css('left', '300px');
126                } else {
127                    $elem.removeClass('mbr-gallery-item__hided');
128                }
129            });
130
131            $mas.closest('.mbr-gallery-row').trigger('filter');
132        });
133    });
134
135    if (isBuilder) {
136        $(document).on('changeButtonColor.cards', function(event) {
137            var $section = $(event.target);
138
139            if ($section.find('.mbr-gallery-filter').length > 0 && $(event.target).find('.mbr-gallery-filter').hasClass('gallery-filter-active')) {
140                var classAttr = ($section.find('.mbr-gallery-filter .mbr-gallery-filter-all').find('a').attr('class') || '').replace(/(^|\s)active(\s|$)/, ' ').trim();
141
142                $section.find('.mbr-gallery-filter ul li:not(.mbr-gallery-filter-all) a').attr('class', classAttr);
143            }
144
145            updateMasonry(event);
146        });
147    }
148
149    $(document).on('add.cards changeParameter.cards', function(event) {
150        var $section = $(event.target);
151        var filterList = [];
152
153        $section.find('.mbr-gallery-item').each(function(el) {
154            var tagsList = ($(this).attr('data-tags') || "").trim().split(',');
155
156            tagsList.map(function(el) {
157                el = el.trim();
158                if ($.inArray(el, filterList) === -1) filterList.push(el);
159            });
160        });
161
162        if ($section.find('.mbr-gallery-filter').length > 0 && $(event.target).find('.mbr-gallery-filter').hasClass('gallery-filter-active')) {
163            var filterHtml = '';
164
165            $section.find('.mbr-gallery-filter ul li:not(.mbr-gallery-filter-all)').remove();
166
167            var allItem = $section.find('.mbr-gallery-filter .mbr-gallery-filter-all'),
168                childItem = allItem.clone();
169                childItem.find('a').removeClass('active');
170 
171            filterList.map(function(el) {
172                if(childItem.find('a').length) childItem.find('a').text(el);
173                else childItem.text(el);
174                filterHtml += '<li>' + childItem.html() + '</li>';
175            });
176            childItem.remove();
177
178            $section.find('.mbr-gallery-filter ul').append(filterHtml);
179
180        }
181
182        updateMasonry(event);
183    });
184
185    $(document).on('change.cards', function(event) {
186        updateMasonry(event);
187    });
188
189    $(document).on('lazyload', function(event) {
190        updateMasonry(event);
191        $(window).scrollEnd(function(){
192            updateMasonry(event);
193        }, 250)
194    });
195
196    $('.mbr-gallery-item').on('click', 'a', function(e) {
197        e.stopPropagation();
198    });
199
200    var timeout2, timeout, objectLightBox;
201
202    /* Lightbox Fit */
203    function styleVideo($carouselItem, wndH, windowPadding, bottomPadding){
204        $carouselItem.css({
205            'top': windowPadding,
206            'height': wndH - 2 * windowPadding - 2 * bottomPadding
207        })
208    }
209
210    function styleImg($carouselItem, wndH, wndW, windowPadding, bottomPadding){
211        var $currentImg = $carouselItem.find('img');

212        if ($currentImg[0].complete && $currentImg[0].naturalWidth>50 && $currentImg[0].naturalHeight>50) {
213            setCSStoImage($currentImg,$carouselItem, wndH, wndW, windowPadding, bottomPadding)
214        } else {
215            $currentImg.one('load', function() {
216                setCSStoImage($currentImg,$carouselItem, wndH, wndW, windowPadding, bottomPadding)
217            })
218        }
219    }
220
221    function setCSStoImage(image,item, wndH, wndW, windowPadding, bottomPadding) {
222        var setWidth, setTop;
223
224        var lbW = image[0].naturalWidth;
225        var lbH = image[0].naturalHeight;
226
227        // height change
228        if (wndW / wndH > lbW / lbH) {
229            var needH = wndH - bottomPadding * 2;
230            setWidth = needH * lbW / lbH;
231        } else { // width change
232            setWidth = wndW - bottomPadding * 2;
233        }
234        // check for maw width
235        setWidth = setWidth >= lbW ? lbW : setWidth;
236
237        // set top to vertical center
238        setTop = (wndH - setWidth * lbH / lbW) / 2;
239
240        image.css({
241            width: parseInt(setWidth),
242            height: setWidth * lbH / lbW
243        });
244        item.css('top', setTop + windowPadding);
245    }
246
247    function timeOutCarousel($lightBox, wndW, wndH, windowPadding, bottomPadding, flagResize){
248        var $carouselItems = $lightBox.find('.modal-dialog .carousel-item');
249
250        $carouselItems.each(function() {
251            if ((!flagResize && !$(this)[0].classList.contains('carousel-item-next') && !$(this)[0].classList.contains('carousel-item-prev')) || (flagResize && !$(this)[0].classList.contains('active'))){
252                if ($(this)[0].classList.contains('video-container')){
253                    styleVideo($(this), wndH, windowPadding, bottomPadding);
254                }
255                else{
256                    styleImg($(this), wndH, wndW, windowPadding, bottomPadding);
257                }
258            }
259        });
260    }
261
262    function fitLightbox() {
263        var windowPadding = 0;
264        var bottomPadding = 10;
265        var wndW = $(window).width() - windowPadding * 2;
266        var wndH = $(window).height() - windowPadding * 2;
267
268        if (!objectLightBox) {
269            return;
270        }
271
272        var $carouselItemActive, flagResize = false;
273        if (objectLightBox.find('.modal-dialog .carousel-item.carousel-item-next, .modal-dialog .carousel-item.carousel-item-prev').length){
274            $carouselItemActive = objectLightBox.find('.modal-dialog .carousel-item.carousel-item-next, .modal-dialog .carousel-item.carousel-item-prev');
275        }
276        else{
277            $carouselItemActive = objectLightBox.find('.modal-dialog .carousel-item.active');
278            flagResize = true;
279        }
280
281        if($carouselItemActive[0].classList.contains('video-container')){
282            styleVideo($carouselItemActive, wndH, windowPadding, bottomPadding);
283        }
284        else{
285            styleImg($carouselItemActive, wndH, wndW, windowPadding, bottomPadding);
286        }
287
288        clearTimeout(timeout);
289
290        timeout = setTimeout( timeOutCarousel, 200, objectLightBox, wndW, wndH, windowPadding, bottomPadding, flagResize);
291
292    }
293
294    /* pause/start video on different events and fit lightbox */
295    var $window = $(document).find('.mbr-gallery');
296
297    $window.on('show.bs.modal', function(e) {
298        clearTimeout(timeout2);
299
300        timeout2 = setTimeout(function() {
301            var index = $(e.relatedTarget).parent().attr('data-video-num');
302            var slide = $(e.target).find('.carousel-item .mbr-background-video[data-video-num=' + index + ']');
303            $(e.target).find('.carousel-item .mbr-background-video');
304            if (slide.length > 0 && slide.closest('.carousel-item').hasClass('active')) {
305                var player = players[+slide.attr('data-video-num')];
306                player.playVideo ? player.playVideo() : player.play();
307            }
308        }, 500);
309
310        objectLightBox = $(e.target);
311
312        fitLightbox();
313
314    });
315
316    $window.on('slide.bs.carousel', function(e) {
317        var ytv = $(e.target).find('.carousel-item.active .mbr-background-video');
318        if (ytv.length > 0) {
319            var player = players[+ytv.attr('data-video-num')];
320            player.pauseVideo ? player.pauseVideo() : player.pause();
321        }
322    });
323
324    $(window).on('resize load', fitLightbox);
325
326    $window.on('slid.bs.carousel', function(e) {
327        var ytv = $(e.target).find('.carousel-item.active .mbr-background-video');
328
329        if (ytv.length > 0) {
330            var player = players[+ytv.attr('data-video-num')];
331            player.playVideo ? player.playVideo() : player.play();
332        }
333        
334    });
335
336    $window.on('hide.bs.modal', function(e) {
337        players.map(function(player, i) {
338            player.pauseVideo ? player.pauseVideo() : player.pause();
339        });
340
341        objectLightBox = null;
342    });
343}(jQuery));