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

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        this.$el.find('[data-control="masonry"]').masonryFunction();
56
57        this.$gridContainer.trigger('html_restructured');
58    }
59
60    DevicePreview.prototype.doGrid = function(){
61        var device = this.getDevice();
62
63        if(this.prevDevice == device){
64            // We want images to be scaled when window is resized
65            if(this.options.ratio != 'none'){
66                this.$el.imgScale();
67            }
68
69            return; 
70        } else {
71            this.prevDevice = device;
72        }
73
74        var columns = this.options[device + 'Columns'];
75
76        this.resetGridHTML();
77            
78        this.$items.each(function(){
79            $(this).removeClass(function (index, className) {
80                return (className.match (/\bgallery-grid--columns\S+/g) || []).join(' ');
81            });
82        });
83
84        this.$items.each(function(){
85            $(this).addClass('gallery-grid--columns-' + columns);
86        });
87
88        var rows = Math.ceil(this.$items.length/columns);
89
90        for(var row = 1; row <= rows; row++){
91            var $row = $('<div class="gallery-row"></div>');
92
93            this.$gridContainer.append($row);
94
95            for(var j = (row - 1) * columns; j < row * columns; j++){
96                if(typeof this.$items[j] == "undefined")
97                    continue;
98
99                var $itm = $(this.$items[j]);
100
101                if($itm.find('.highslide-caption').length == 0){
102                    var $a = $itm.find('a.highslide');
103
104                    if($a.data('hasCaption')){
105                        var html = $('#caption-' + $a.attr('id').split('-')[1]).html();
106                        
107                        if(html != undefined){
108                            html = html.replace("display: none", "");
109                            html = html.replace('highslide-caption-helper', 'highslide-caption');
110                            $a.after(html);
111                        }
112                    }
113                }
114
115                $row.append($(this.$items[j]).clone());
116            }
117        }
118
119        // After the html restruction make scale
120        if(this.options.ratio != 'none'){
121            this.$el.imgScale();
122        }
123
124        this.$gridContainer.trigger('html_restructured');
125    }
126
127    DevicePreview.prototype.doSlideshow = function(){
128        var device = this.getDevice();
129
130        if(this.prevDevice == device){
131            // We want images to be scaled when window is resized
132            if(this.options.ratio != 'none'){
133                this.$el.imgScale();
134            }
135
136            return; 
137        } else {
138            this.prevDevice = device;
139        }
140
141        var columns = this.options[device + 'Columns'];
142
143        if(this.Slider != undefined){

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