https://www.padreefiglio.it/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').masonry({
76                    itemSelector: '.mbr-gallery-item:not(.mbr-gallery-item__hided)',
77                    percentPosition: true,
78                    horizontalOrder: true
79                });
80                // reload masonry (need for adding new or re-sort items)
81                $msnr.masonry('reloadItems');
82                $msnr.on('filter', function() {
83                    $msnr.masonry('reloadItems');
84                    $msnr.masonry('layout');
85                    // update parallax backgrounds
86                    $(window).trigger('update.parallax');
87                }.bind(this, $msnr));
88                // layout Masonry after each image loads
89                $msnr.imagesLoaded().progress(function() {
90                    $msnr.masonry('layout');
91                });
92            });
93        }
94    };
95
96    /* Masonry Grid */
97    $(document).on('add.cards', function(event) {
98        var $section = $(event.target);
99        $section.on('click', '.mbr-gallery-filter li', function(e) {
100            e.preventDefault();
101            var $li = $(this).closest('li');
102
103            $li.parent().find('li').removeClass('active');
104            $li.addClass('active');
105
106            var $mas = $li.closest('section').find('.mbr-gallery-row');
107            var filter = $(this)[0].textContent.trim();
108
109            $section.find('.mbr-gallery-item').each(function(i, el) {
110                var $elem = $(this);
111                var tagsAttr = $elem.attr('data-tags');
112                var tags = tagsAttr.split(',');
113
114                var tagsTrimmed = tags.map(function(el) {
115                    return el.trim();
116                });
117
118                if ($.inArray(filter, tagsTrimmed) === -1 && !$li.hasClass('mbr-gallery-filter-all')) {
119                    $elem.addClass('mbr-gallery-item__hided');
120
121                    $elem.css('left', '300px');
122                } else {
123                    $elem.removeClass('mbr-gallery-item__hided');
124                }
125            });
126
127            $mas.closest('.mbr-gallery-row').trigger('filter');
128        });
129    });
130
131    if (isBuilder) {
132        $(document).on('changeButtonColor.cards', function(event) {
133            var $section = $(event.target);
134
135            if ($section.find('.mbr-gallery-filter').length > 0 && $(event.target).find('.mbr-gallery-filter').hasClass('gallery-filter-active')) {
136                var classAttr = ($section.find('.mbr-gallery-filter .mbr-gallery-filter-all').find('a').attr('class') || '').replace(/(^|\s)active(\s|$)/, ' ').trim();
137
138                $section.find('.mbr-gallery-filter ul li:not(.mbr-gallery-filter-all) a').attr('class', classAttr);
139            }
140
141            updateMasonry(event);
142        });
143    }
144
145    $(document).on('add.cards changeParameter.cards', function(event) {
146        var $section = $(event.target);
147        var filterList = [];
148
149        $section.find('.mbr-gallery-item').each(function(el) {
150            var tagsList = ($(this).attr('data-tags') || "").trim().split(',');
151
152            tagsList.map(function(el) {
153                el = el.trim();
154                if ($.inArray(el, filterList) === -1) filterList.push(el);
155            });
156        });
157
158        if ($section.find('.mbr-gallery-filter').length > 0 && $(event.target).find('.mbr-gallery-filter').hasClass('gallery-filter-active')) {
159            var filterHtml = '';
160
161            $section.find('.mbr-gallery-filter ul li:not(.mbr-gallery-filter-all)').remove();
162
163            var allItem = $section.find('.mbr-gallery-filter .mbr-gallery-filter-all'),
164                classAttr = (allItem.find('a').attr('class') || '').replace(/(^|\s)active(\s|$)/, ' ').trim();
165 
166            filterList.map(function(el) {
167                filterHtml += '<li><a class="' + classAttr + '" href>' + el + '</a></li>';
168            });
169
170            $section.find('.mbr-gallery-filter ul').append(filterHtml);
171
172        }
173
174        updateMasonry(event);
175    });
176
177    $(document).on('change.cards', function(event) {
178        updateMasonry(event);
179    });
180
181    $(document).on('lazyload', function(event) {
182        updateMasonry(event);
183        $(window).scrollEnd(function(){
184            updateMasonry(event);
185        }, 250)
186    });
187
188    $('.mbr-gallery-item').on('click', 'a', function(e) {
189        e.stopPropagation();
190    });
191
192    var timeout2, timeout, objectLightBox;
193
194    /* Lightbox Fit */
195    function styleVideo($carouselItem, wndH, windowPadding, bottomPadding){
196        $carouselItem.css({
197            'top': windowPadding,
198            'height': wndH - 2 * windowPadding - 2 * bottomPadding
199        })
200    }
201
202    function styleImg($carouselItem, wndH, wndW, windowPadding, bottomPadding){
203        var $currentImg = $carouselItem.find('img');

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