https://ccac.edu/_resources/js/slick-lightbox.js

1'use strict';
2(function ($) {
3    var SlickLightbox, defaults;
4    SlickLightbox = function () {
5        /*
6  The core class.
7   */
8        function SlickLightbox(element, options1) {
9            var slickLightbox;
10            this.options = options1;
11            /* Binds the plugin. */
12            this.$element = $(element);
13            this.didInit = false;
14            slickLightbox = this;
15            this.$element.on('click.slickLightbox', this.options.itemSelector, function (e) {
16                var $clickedItem, $items;
17                e.preventDefault();
18                $clickedItem = $(this);
19                $clickedItem.blur();
20                if (typeof slickLightbox.options.shouldOpen === 'function') {
21                    if (!slickLightbox.options.shouldOpen(slickLightbox, $clickedItem, e)) {
22                        return;
23                    }
24                }
25                $items = slickLightbox.$element.find(slickLightbox.options.itemSelector);
26                if (slickLightbox.elementIsSlick()) {
27                    $items = slickLightbox.filterOutSlickClones($items);
28                    $clickedItem = slickLightbox.handlePossibleCloneClick($clickedItem, $items);
29                }
30                return slickLightbox.init($items.index($clickedItem));
31            });
32        }
33        SlickLightbox.prototype.init = function (index) {
34            /* Creates the lightbox, opens it, binds events and calls `slick`. Accepts `index` of the element, that triggered it (so that we know, on which slide to start slick). */
35            this.didInit = true;
36            this.detectIE();
37            this.createModal();
38            this.bindEvents();
39            this.initSlick(index);
40            return this.open();
41        };
42        SlickLightbox.prototype.createModalItems = function () {
43            /* Creates individual slides to be used with slick. If `options.images` array is specified, it uses it's contents, otherwise loops through elements' `options.itemSelector`. */
44            var $items, createItem, itemTemplate, lazyPlaceholder, length, links;
45            lazyPlaceholder = this.options.lazyPlaceholder || 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
46            itemTemplate = function (source, caption, lazy) {
47                var imgSourceParams;
48                if (lazy === true) {
49                    imgSourceParams = ' data-lazy="' + source + '" src="' + lazyPlaceholder + '" ';
50                } else {
51                    imgSourceParams = ' src="' + source + '" ';
52                }
53                return '<div class="slick-lightbox-slick-item">\n  <div class="slick-lightbox-slick-item-inner">\n    <img class="slick-lightbox-slick-img" ' + imgSourceParams + ' />\n    ' + caption + '\n  </div>\n</div>';
54            };
55            if (this.options.images) {
56                links = $.map(this.options.images, function (_this) {
57                    return function (img) {
58                        return itemTemplate(img, _this.options.lazy);
59                    };
60                }(this));
61            } else {
62                $items = this.filterOutSlickClones(this.$element.find(this.options.itemSelector));
63                length = $items.length;
64                createItem = function (_this) {
65                    return function (el, index) {
66                        var caption, info, src;
67                        info = {
68                            index: index,
69                            length: length
70                        };
71                        caption = _this.getElementCaption(el, info);
72                        src = _this.getElementSrc(el);
73                        return itemTemplate(src, caption, _this.options.lazy);
74                    };
75                }(this);
76                links = $.map($items, createItem);
77            }
78            return links;
79        };
80        SlickLightbox.prototype.createModal = function () {
81            /* Creates a `slick`-friendly modal. */
82            var html, links;
83            links = this.createModalItems();
84            html = '<div class="slick-lightbox slick-lightbox-hide-init' + (this.isIE ? ' slick-lightbox-ie' : '') + '" style="background: ' + this.options.background + ';">\n  <div class="slick-lightbox-inner">\n    <div class="slick-lightbox-slick slick-caption-' + this.options.captionPosition + '">' + links.join('') + '</div>\n  <div>\n<div>';
85            this.$modalElement = $(html);
86            this.$parts = {};
87            this.$parts['closeButton'] = $(this.options.layouts.closeButton);
88            this.$modalElement.find('.slick-lightbox-inner').append(this.$parts['closeButton']);
89            return $('body').append(this.$modalElement);
90        };
91        SlickLightbox.prototype.initSlick = function (index) {
92            /* Runs slick by default, using `options.slick` if provided. If `options.slick` is a function, it gets fired instead of us initializing slick. Merges in initialSlide option. */
93            var additional;
94            additional = { initialSlide: index };
95            if (this.options.lazy) {
96                additional.lazyLoad = 'ondemand';
97            }
98            if (this.options.slick != null) {
99                if (typeof this.options.slick === 'function') {
100                    this.slick = this.options.slick(this.$modalElement);
101                } else {
102                    this.slick = this.$modalElement.find('.slick-lightbox-slick').slick($.extend({}, this.options.slick, additional));
103                }
104            } else {
105                this.slick = this.$modalElement.find('.slick-lightbox-slick').slick(additional);
106            }
107            return this.$modalElement.trigger('init.slickLightbox');
108        };
109        SlickLightbox.prototype.open = function () {
110            /* Opens the lightbox. */
111            if (this.options.useHistoryApi) {
112                this.writeHistory();
113            }
114            this.$element.trigger('show.slickLightbox');
115            setTimeout(function (_this) {
116                return function () {
117                    return _this.$element.trigger('shown.slickLightbox');
118                };
119            }(this), this.getTransitionDuration());
120            return this.$modalElement.removeClass('slick-lightbox-hide-init');
121        };
122        SlickLightbox.prototype.close = function () {
123            /* Closes the lightbox and destroys it, maintaining the original element bindings. */
124            this.$element.trigger('hide.slickLightbox');
125            setTimeout(function (_this) {
126                return function () {
127                    return _this.$element.trigger('hidden.slickLightbox');
128                };
129            }(this), this.getTransitionDuration());
130            this.$modalElement.addClass('slick-lightbox-hide');
131            return this.destroy();
132        };
133        SlickLightbox.prototype.bindEvents = function () {
134            /* Binds global events. */
135            var resizeSlides;
136            resizeSlides = function (_this) {
137                return function () {
138                    var h;
139                    h = _this.$modalElement.find('.slick-lightbox-inner').height();
140                    _this.$modalElement.find('.slick-lightbox-slick-item').height(h);
141                    return _this.$modalElement.find('.slick-lightbox-slick-img, .slick-lightbox-slick-item-inner').css('max-height', Math.round(_this.options.imageMaxHeight * h));
142                };
143            }(this);
144            $(window).on('orientationchange.slickLightbox resize.slickLightbox', resizeSlides);
145            if (this.options.useHistoryApi) {
146                $(window).on('popstate.slickLightbox', function (_this) {
147                    return function () {
148                        return _this.close();
149                    };
150                }(this));
151            }
152            this.$modalElement.on('init.slickLightbox', resizeSlides);
153            this.$modalElement.on('destroy.slickLightbox', function (_this) {
154                return function () {
155                    return _this.destroy();
156                };
157            }(this));
158            this.$element.on('destroy.slickLightbox', function (_this) {
159                return function () {
160                    return _this.destroy(true);
161                };
162            }(this));
163            this.$parts['closeButton'].on('click.slickLightbox touchstart.slickLightbox', function (_this) {
164                return function (e) {
165                    e.preventDefault();
166                    return _this.close();
167                };
168            }(this));
169            if (this.options.closeOnEscape || this.options.navigateByKeyboard) {
170                $(document).on('keydown.slickLightbox', function (_this) {
171                    return function (e) {
172                        var code;
173                        code = e.keyCode ? e.keyCode : e.which;
174                        if (_this.options.navigateByKeyboard) {
175                            if (code === 37) {
176                                _this.slideSlick('left');
177                            } else if (code === 39) {
178                                _this.slideSlick('right');
179                            }
180                        }
181                        if (_this.options.closeOnEscape) {
182                            if (code === 27) {
183                                return _this.close();
184                            }
185                        }
186                    };
187                }(this));
188            }
189            if (this.options.closeOnBackdropClick) {
190                this.$modalElement.on('click.slickLightbox touchstart.slickLightbox', '.slick-lightbox-slick-img', function (e) {
191                    return e.stopPropagation();
192                });
193                return this.$modalElement.on('click.slickLightbox', '.slick-lightbox-slick-item', function (_this) {
194                    return function (e) {
195                        e.preventDefault();
196                        return _this.close();
197                    };
198                }(this));
199            }
200        };
201        SlickLightbox.prototype.slideSlick = function (direction) {
202            /* Moves the slick prev or next. */
203            if (direction === 'left') {
204                return this.slick.slick('slickPrev');
205            } else {
206                return this.slick.slick('slickNext');
207            }
208        };
209        SlickLightbox.prototype.detectIE = function () {
210            /* Detects usage of IE8 and lower. */
211            var ieversion;
212            this.isIE = false;

213            if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
214                ieversion = new Number(RegExp.$1);
215                if (ieversion < 9) {
216                    return this.isIE = true;
217                }
218            }
219        };
220        SlickLightbox.prototype.getElementCaption = function (el, info) {
221            /* Returns caption for each slide based on the type of `options.caption`. */
222            var c;
223            if (!this.options.caption) {
224                return '';
225            }
226            c = function () {
227                switch (typeof this.options.caption) {
228                case 'function':
229                    return this.options.caption(el, info);
230                case 'string':
231                    return $(el).data(this.options.caption);
232                }
233            }.call(this);
234            return '<span class="slick-lightbox-slick-caption">' + c + '</span>';
235        };
236        SlickLightbox.prototype.getElementSrc = function (el) {
237            /* Returns src for each slide image based on the type of `options.src`. */
238            switch (typeof this.options.src) {
239            case 'function':
240                return this.options.src(el);
241            case 'string':
242                return $(el).attr(this.options.src);
243            default:
244                return el.href;
245            }
246        };
247        SlickLightbox.prototype.unbindEvents = function () {
248            /* Unbinds global events. */
249            $(window).off('.slickLightbox');
250            $(document).off('.slickLightbox');
251            return this.$modalElement.off('.slickLightbox');
252        };
253        SlickLightbox.prototype.destroy = function (unbindAnchors) {
254            if (unbindAnchors == null) {
255                unbindAnchors = false;
256            }
257            /* Destroys the lightbox and unbinds global events. If `true` is passed as an argument, unbinds the original element as well. */
258            if (this.didInit) {
259                this.unbindEvents();
260                setTimeout(function (_this) {
261                    return function () {
262                        return _this.$modalElement.remove();
263                    };
264                }(this), this.options.destroyTimeout);
265            }
266            if (unbindAnchors) {
267                this.$element.off('.slickLightbox');
268                return this.$element.off('.slickLightbox', this.options.itemSelector);
269            }
270        };
271        SlickLightbox.prototype.destroyPrevious = function () {
272            /* Destroys lightboxes currently in DOM. */
273            return $('body').children('.slick-lightbox').trigger('destroy.slickLightbox');
274        };
275        SlickLightbox.prototype.getTransitionDuration = function () {
276            /* Detects the transition duration to know when to remove stuff from DOM etc. */
277            var duration;
278            if (this.transitionDuration) {
279                return this.transitionDuration;
280            }
281            duration = this.$modalElement.css('transition-duration');
282            if (typeof duration === 'undefined') {
283                return this.transitionDuration = 500;
284            } else {
285                return this.transitionDuration = duration.indexOf('ms') > -1 ? parseFloat(duration) : parseFloat(duration) * 1000;
286            }
287        };
288        SlickLightbox.prototype.writeHistory = function () {
289            /* Writes an empty state to the history API if supported. */
290            return typeof history !== 'undefined' && history !== null ? typeof history.pushState === 'function' ? history.pushState(null, null, '') : void 0 : void 0;
291        };
292        SlickLightbox.prototype.filterOutSlickClones = function ($items) {
293            /* Removes all slick clones from the set of elements. Only does so, if the target element is a slick slider. */
294            if (!this.elementIsSlick()) {
295                return $items;
296            }
297            return $items = $items.filter(function () {
298                var $item;
299                $item = $(this);
300                return !$item.hasClass('slick-cloned') && $item.parents('.slick-cloned').length === 0;
301            });
302        };
303        SlickLightbox.prototype.handlePossibleCloneClick = function ($clickedItem, $items) {
304            var href;
305            if (!this.elementIsSlick()) {
306                return $clickedItem;
307            }
308            if (!$clickedItem.closest('.slick-slide').hasClass('slick-cloned')) {
309                return $clickedItem;
310            }
311            href = $clickedItem.attr('href');
312            return $items.filter(function () {
313                return $(this).attr('href') === href;
314            }).first();
315        };
316        SlickLightbox.prototype.elementIsSlick = function () {
317            return this.$element.hasClass('slick-slider');
318        };
319        return SlickLightbox;
320    }();
321    defaults = {
322        background: 'rgba(0,0,0,.8)',
323        closeOnEscape: true,
324        closeOnBackdropClick: true,
325        destroyTimeout: 500,
326        itemSelector: 'a',
327        navigateByKeyboard: true,
328        src: false,
329        caption: false,
330        captionPosition: 'dynamic',
331        images: false,
332        slick: {},
333        useHistoryApi: false,
334        layouts: { closeButton: '<button type="button" class="slick-lightbox-close"></button>' },
335        shouldOpen: null,
336        imageMaxHeight: 0.9,
337        lazy: false
338    };
339    $.fn.slickLightbox = function (options) {
340        /* Fires the plugin. */
341        options = $.extend({}, defaults, options);
342        $(this).each(function () {
343            return this.slickLightbox = new SlickLightbox(this, options);
344        });
345        return this;
346    };
347    $.fn.unslickLightbox = function () {
348        /* Removes everything. */
349        return $(this).trigger('destroy.slickLightbox').each(function () {
350            return this.slickLightbox = null;
351        });
352    };
353}(jQuery));