https://www.sheetspetclinic.com/plugins/smb/gallery/components/assets/js/device-preview.js?v.1.2.78

1+function ($) { "use strict";
2	var DevicePreview = function($el, options) {
3		this.$el = $el;
4		this.$gridContainer = this.$el.find('.grid-container');
5        this.$sliderContainer = this.$el.find('#gallery-bx-slider');
6        this.options = options;
7        this.prevDevice = null;
8        this.$items = this.$el.find('.gallery-grid--item').clone();
9
10		this.processDeviceColumns();
11		this.attachEvents();
12    }
13
14    DevicePreview.prototype.attachEvents = function(){
15    	var self = this;
16
17    	$(window).resize(function(){
18    		self.processDeviceColumns();
19    	});
20    }
21
22    DevicePreview.prototype.processDeviceColumns = function(){
23    	if(this.options.layoutType == 'grid_2'){
24            this.doGrid();
25        } else if(this.options.layoutType == 'grid_1'){
26            this.doMasonry()
27        } else if(this.options.layoutType == 'slider_1'){
28            this.doSlideshow();
29        }
30    }
31
32    DevicePreview.prototype.doMasonry = function(){
33        var device = this.getDevice();
34
35        if(this.prevDevice == device){
36            return;
37        } else {
38            this.prevDevice = device;
39        }
40
41        var columns = this.options[device + 'Columns'];
42
43        var $items = this.$el.find('.gallery-grid--item');
44
45        $items.each(function(){
46            $(this).removeClass(function (index, className) {
47                return (className.match (/\bgallery-grid--columns\S+/g) || []).join(' ');
48            });
49        });
50
51        $items.each(function(){
52            $(this).addClass('gallery-grid--columns-' + columns);
53        });
54
55        let videoEl = $items.find('[data-setup-run]');
56		videoEl.each(function () {
57			videojs(this, $(this).data('setupRun'), function () {
58				var player = this,
59					options = player.options();
60			});
61		});
62
63        this.$el.find('[data-control="masonry"]').masonryFunction();
64
65        if (this.$gridContainer.length) {
66            this.$gridContainer.trigger('html_restructured');
67        } else {
68            this.$el.trigger('html_restructured');
69        }
70    }
71
72    DevicePreview.prototype.doGrid = function(){
73        var device = this.getDevice();
74
75        if(this.prevDevice == device){
76            // We want images to be scaled when window is resized
77            if(this.options.ratio != 'none'){
78                this.$el.imgScale();
79            }
80
81            return;
82        } else {
83            this.prevDevice = device;
84        }
85
86        var columns = this.options[device + 'Columns'];
87
88        this.resetGridHTML();
89
90        this.$items.each(function(){
91            $(this).removeClass(function (index, className) {
92                return (className.match (/\bgallery-grid--columns\S+/g) || []).join(' ');
93            });
94        });
95
96        this.$items.each(function(){
97            $(this).addClass('gallery-grid--columns-' + columns);
98        });
99
100        var rows = Math.ceil(this.$items.length/columns);
101
102        for(var row = 1; row <= rows; row++){
103            var $row = $('<div class="gallery-row"></div>');
104
105            this.$gridContainer.append($row);
106
107            for(var j = (row - 1) * columns; j < row * columns; j++){
108                if(typeof this.$items[j] == "undefined")
109                    continue;
110
111                var $itm = $(this.$items[j]);
112
113                if($itm.find('.highslide-caption').length == 0){
114                    var $a = $itm.find('a.highslide');
115
116                    if($a.data('hasCaption')){
117                        var html = $('#caption-' + $a.attr('id').split('-')[1]).html();
118
119                        if(html != undefined){
120                            html = html.replace("display: none", "");
121                            html = html.replace('highslide-caption-helper', 'highslide-caption');
122                            $a.after(html);
123                        }
124                    }
125                }
126
127                $row.append($(this.$items[j]).clone());
128            }
129        }
130
131        // After the html restruction make scale
132        if(this.options.ratio != 'none'){
133            this.$el.imgScale();
134        }
135
136        this.$gridContainer.trigger('html_restructured');
137    }
138
139    DevicePreview.prototype.doSlideshow = function(){
140        var device = this.getDevice();
141
142        if(this.prevDevice == device){
143            // We want images to be scaled when window is resized
144            if(this.options.ratio != 'none'){
145                this.$el.imgScale();
146            }
147
148            return;
149        } else {
150            this.prevDevice = device;
151        }
152
153        var columns = this.options[device + 'Columns'];
154
155        if(this.Slider != undefined){

156            var $lis = $(this.$el.find('#gallery-bx-slider > li'));
157
158            $lis.each(function(){
159                if($(this).hasClass('bx-clone')){
160                    $(this).remove();
161                }
162            });
163
164            this.Slider.destSlider();
165        }
166
167        this.resetSlideshowHTML();
168
169        this.$items.each(function(){
170            $(this).removeClass(function (index, className) {
171                return (className.match (/\bgallery-grid--columns\S+/g) || []).join(' ');
172            });
173        });
174
175        this.$items.each(function(){
176            $(this).addClass('gallery-grid--columns-' + columns);
177        });
178
179        var slides = Math.ceil(this.$items.length/columns);
180
181        for(var slide = 1; slide <= slides; slide++){
182            var $li = $('<li class="items-container"></li>');
183            var $itemsWrapper = $('<div class="gallery-items-wrap"></div>');
184
185            this.$sliderContainer.append($li);
186            $li.append($itemsWrapper);
187
188            for(var j = (slide - 1) * columns; j < slide * columns; j++){
189                if(typeof this.$items[j] == "undefined")
190                    continue;
191
192                var $itm = $(this.$items[j]);
193
194                if($itm.find('.highslide-caption').length == 0){
195                    var $a = $itm.find('a.highslide');
196
197                    if($a.data('hasCaption')){
198                        var html = $('#caption-' + $a.attr('id').split('-')[1]).html();
199
200                        if(html != undefined){
201                            html = html.replace("display: none", "");
202                            html = html.replace('highslide-caption-helper', 'highslide-caption');
203                            $a.after(html);
204                        }
205                    }
206                }
207
208                $itemsWrapper.append($(this.$items[j]).clone());
209            }
210        }
211
212        // After the html restruction make scale
213        if(this.options.ratio != 'none'){
214            this.$el.imgScale();
215        }
216
217        window.gallerySlider = this.Slider = this.$sliderContainer.slideshow();
218        window.gallerySliderArr.push(this.Slider.$bxSlider);
219
220        this.$sliderContainer.trigger('html_restructured');
221    }
222
223    DevicePreview.prototype.resetGridHTML = function(){
224        var self = this;
225
226        self.$gridContainer.html('');
227    }
228
229    DevicePreview.prototype.resetSlideshowHTML = function(){
230        var self = this;
231
232        self.$sliderContainer.html('');
233    }
234
235    DevicePreview.prototype.getDevice = function(){
236    	var width = $(window).width();
237
238    	if(width < 752)
239    		return 'mobile';
240
241    	if(width < 1025)
242    		return 'tablet';
243
244    	return 'desktop';
245    }
246
247    var old = $.fn.DevicePreview;
248
249    $.fn.devicePreview = function(option) {
250        var args = arguments,
251            result;
252
253        this.each(function() {
254            var $this = $(this);
255
256            var options = $.extend({}, $this.data(), typeof option == 'object' && option);
257            var data = '';
258
259            $this.data('DevicePreview', (data = new DevicePreview($this, options)));
260
261            if (typeof result != 'undefined') return false;
262        });
263
264        return result ? result : this;
265    };
266
267    $.fn.devicePreview.Constructor = DevicePreview
268
269    $.fn.devicePreview.noConflict = function () {
270        $.fn.devicePreview = old
271        return this
272    }
273
274    $(window).on('load', function(){
275        var $devicePreview = $('[data-ctrl="device-preview"]');
276        window.gallerySliderArr = [];
277        if ($devicePreview.length) {
278            $devicePreview.each(function () {
279                $(this).devicePreview();
280            });
281        }
282    });
283
284}(window.jQuery);