https://missioncollege.edu/_resources/lib/slick-lightbox/slick-lightbox.js

1'use strict';
2
3/*
4 * SlickLightbox documentation #
5
6Documentation generated by [CoffeeDoc](http://github.com/omarkhan/coffeedoc)
7 */
8(function($) {
9  var SlickLightbox, defaults;
10  SlickLightbox = (function() {
11
12    /*
13    		The one and only class used.
14     */
15    function SlickLightbox(element, options) {
16      var that;
17      this.options = options;
18
19      /* Binds the plugin. */
20      this.element = $(element);
21      this.didInit = false;
22      that = this;
23      this.element.on('click.slickLightbox', this.options.itemSelector, function(e) {
24        e.preventDefault();
25        return that.init(that.element.find(that.options.itemSelector).index($(this)));
26      });
27    }
28
29    SlickLightbox.prototype.init = function(index) {
30
31      /* 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). */
32      this.didInit = true;
33      this.detectIE();
34      this.createModal(index);
35      this.bindEvents();
36      this.initSlick();
37      return this.open();
38    };
39
40    SlickLightbox.prototype.createModalItems = function(index) {
41
42      /* 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`. */
43      var a, createItem, links;
44      if (this.options.images) {
45        links = $.map(this.options.images, function(img) {
46          return "<div class=\"slick-lightbox-slick-item\"><div class=\"slick-lightbox-slick-item-inner\"><img class=\"slick-lightbox-slick-img\" src=\"" + img + "\" /></div></div>";
47        });
48      } else {
49        createItem = (function(_this) {
50          return function(el) {
51            var caption, src;
52            caption = _this.getElementCaption(el);
53            src = _this.getElementSrc(el);
54            if (_this.detectImage(src)) {
55              return "<div class=\"slick-lightbox-slick-item\"><div class=\"slick-lightbox-slick-item-inner\"><img class=\"slick-lightbox-slick-img\" src=\"" + src + "\" />" + caption + "</div></div>";
56            } else {
57              return "<div class=\"slick-lightbox-slick-item\"><div class=\"slick-lightbox-slick-item-inner iframe\"><div class=\"slick-lightbox-slick-iframe-wrap\"><iframe class=\"slick-lightbox-slick-iframe\" src=\"" + src + "\" frameborder=\"0\" allowfullscreen></iframe>" + caption + "</div></div></div>";
58            }
59          };
60        })(this);
61        a = this.element.find(this.options.itemSelector);
62        if (index === 0 || index === -1) {
63          links = $.map(a, createItem);
64        } else {
65          links = $.map(a.slice(index), createItem);
66          $.each(a.slice(0, index), function(i, el) {
67            return links.push(createItem(el));
68          });
69        }
70      }
71      return links;
72    };
73
74    SlickLightbox.prototype.createModal = function(index) {
75
76      /* Creates a `slick`-friendly modal. Rearranges the items so that the `index`-th item is placed first. */
77      var html, links;
78      links = this.createModalItems(index);
79      html = "<div class=\"slick-lightbox slick-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		<button type=\"button\" class=\"slick-lightbox-close\"></button>\n	<div>\n<div>";
80      this.modalElement = $(html);
81      return $('body').append(this.modalElement);
82    };
83
84    SlickLightbox.prototype.initSlick = function(index) {
85
86      /* Runs slick by default, using `options.slick` if provided. If `options.slick` is a function, it gets fired instead of us initializing slick. */
87      if (this.options.slick != null) {
88        if (typeof this.options.slick === 'function') {
89
90          /* Function expected to return slick instance. */
91          this.slick = this.options.slick(this.modalElement);
92        } else {
93          this.slick = this.modalElement.find('.slick-lightbox-slick').slick(this.options.slick);
94        }
95      } else {
96        this.slick = this.modalElement.find('.slick-lightbox-slick').slick();
97      }
98      return this.modalElement.trigger('init.slickLightbox');
99    };
100
101    SlickLightbox.prototype.open = function() {
102
103      /* Opens the lightbox. */
104      this.element.trigger('show.slickLightbox');
105      setTimeout(((function(_this) {
106        return function() {
107          return _this.element.trigger('shown.slickLightbox');
108        };
109      })(this)), this.getTransitionDuration());
110      return this.modalElement.removeClass('slick-hide-init');
111    };
112
113    SlickLightbox.prototype.close = function() {
114
115      /* Closes the lightbox and destroys it, maintaining the original element bindings. */
116      this.element.trigger('hide.slickLightbox');
117      setTimeout(((function(_this) {
118        return function() {
119          return _this.element.trigger('hidden.slickLightbox');
120        };
121      })(this)), this.getTransitionDuration());
122      this.modalElement.addClass('slick-hide');
123      return this.destroy();
124    };
125
126    SlickLightbox.prototype.bindEvents = function() {
127
128      /* Binds global events. */
129      var resizeSlides;
130      resizeSlides = (function(_this) {
131        return function() {
132          var h;
133          h = _this.modalElement.find('.slick-lightbox-inner').height();
134          _this.modalElement.find('.slick-lightbox-slick-item').height(h);
135          return _this.modalElement.find('.slick-lightbox-slick-img').css('max-height', Math.round(0.9 * h));
136        };
137      })(this);
138      $(window).on('orientationchange.slickLightbox resize.slickLightbox', resizeSlides);
139      this.modalElement.on('init.slickLightbox', resizeSlides);
140      this.modalElement.on('destroy.slickLightbox', (function(_this) {
141        return function() {
142          return _this.destroy();
143        };
144      })(this));
145      this.element.on('destroy.slickLightbox', (function(_this) {
146        return function() {
147          return _this.destroy(true);
148        };
149      })(this));
150      this.modalElement.on('click.slickLightbox touchstart.slickLightbox', '.slick-lightbox-close', (function(_this) {
151        return function(e) {
152          e.preventDefault();
153          return _this.close();
154        };
155      })(this));
156      if (this.options.closeOnEscape || this.options.navigateByKeyboard) {
157        $(document).on('keydown.slickLightbox', (function(_this) {
158          return function(e) {
159            var code;
160            code = e.keyCode ? e.keyCode : e.which;
161            if (_this.options.navigateByKeyboard) {
162              if (code === 37) {
163                _this.slideSlick('left');
164              } else if (code === 39) {
165                _this.slideSlick('right');
166              }
167            }
168            if (_this.options.closeOnEscape) {
169              if (code === 27) {
170                return _this.close();
171              }
172            }
173          };
174        })(this));
175      }
176      if (this.options.closeOnBackdropClick) {
177        this.modalElement.on('click.slickLightbox touchstart.slickLightbox', '.slick-lightbox-slick-img', (function(_this) {
178          return function(e) {
179            return e.stopPropagation();
180          };
181        })(this));
182        this.modalElement.on('click.slickLightbox touchstart.slickLightbox', '.slick-lightbox-slick-iframe-wrap', (function(_this) {
183          return function(e) {
184            return e.stopPropagation();
185          };
186        })(this));
187        return this.modalElement.on('click.slickLightbox touchstart.slickLightbox', '.slick-lightbox-slick-item', (function(_this) {
188          return function(e) {
189            e.preventDefault();
190            return _this.close();
191          };
192        })(this));
193      }
194    };
195
196    SlickLightbox.prototype.slideSlick = function(direction) {
197
198      /* Moves the slick prev or next. */
199      if (direction === 'left') {
200        return this.slick.slick('slickPrev');
201      } else {
202        return this.slick.slick('slickNext');
203      }
204    };
205
206    SlickLightbox.prototype.detectIE = function() {
207
208      /* Detects usage of IE8 and lower. */
209      var ieversion;
210      this.isIE = false;

211      if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) {
212        ieversion = new Number(RegExp.$1);
213        if (ieversion < 9) {
214          return this.isIE = true;
215        }
216      }
217    };
218
219    SlickLightbox.prototype.getElementCaption = function(el) {
220
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);
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
237    SlickLightbox.prototype.getElementSrc = function(el) {
238
239      /* Returns src for each slide image based on the type of `options.src`. */
240      switch (typeof this.options.src) {
241        case 'function':
242          return this.options.src(el);
243        case 'string':
244          return $(el).attr(this.options.src);
245        default:
246          return el.href;
247      }
248    };
249
250    SlickLightbox.prototype.detectImage = function(url) {
251
252      /* Returns true if finds image file extension */
253      return url.match(/\.(jpeg|jpg|gif|png)$/) !== null;
254    };
255
256    SlickLightbox.prototype.unbindEvents = function() {
257
258      /* Unbinds global events. */
259      $(window).off('.slickLightbox');
260      $(document).off('.slickLightbox');
261      return this.modalElement.off('.slickLightbox');
262    };
263
264    SlickLightbox.prototype.destroy = function(unbindAnchors) {
265      if (unbindAnchors == null) {
266        unbindAnchors = false;
267      }
268
269      /* Destroys the lightbox and unbinds global events. If `true` is passed as an argument, unbinds the original element as well. */
270      if (this.didInit) {
271        this.unbindEvents();
272        setTimeout(((function(_this) {
273          return function() {
274            return _this.modalElement.remove();
275          };
276        })(this)), this.options.destroyTimeout);
277      }
278      if (unbindAnchors) {
279        this.element.off('.slickLightbox');
280        return this.element.off('.slickLightbox', this.options.itemSelector);
281      }
282    };
283
284    SlickLightbox.prototype.destroyPrevious = function() {
285
286      /* Destroys lightboxes currently in DOM. */
287      return $('body').children('.slick-lightbox').trigger('destroy.slickLightbox');
288    };
289
290    SlickLightbox.prototype.getTransitionDuration = function() {
291
292      /* Detects the transition duration to know when to remove stuff from DOM etc. */
293      var duration;
294      if (this.transitionDuration) {
295        return this.transitionDuration;
296      }
297      duration = this.modalElement.css('transition-duration');
298      if (typeof duration === 'undefined') {
299        return this.transitionDuration = 500;
300      } else {
301        return this.transitionDuration = duration.indexOf('ms') > -1 ? parseFloat(duration) : parseFloat(duration) * 1000;
302      }
303    };
304
305    return SlickLightbox;
306
307  })();
308  defaults = {
309    background: 'rgba(0,0,0,.8)',
310    closeOnEscape: true,
311    closeOnBackdropClick: true,
312    destroyTimeout: 500,
313    itemSelector: 'a',
314    navigateByKeyboard: true,
315    src: false,
316    caption: false,
317    captionPosition: 'dynamic',
318    images: false,
319    slick: {}
320  };
321  $.fn.slickLightbox = function(options) {
322
323    /* Fires the plugin. */
324    options = $.extend({}, defaults, options);
325    new SlickLightbox(this, options);
326    return this;
327  };
328  return $.fn.unslickLightbox = function() {
329
330    /* Removes everything. */
331    return $(this).trigger('destroy.slickLightbox');
332  };
333})(jQuery);