https://www.saporidelpiemonte.net/blog/wp-content/plugins/nextgen-…/simple-lightbox.js?ver=3.59.12

1/*!
2	By André Rinas, www.andrerinas.de
3	Documentation, www.simplelightbox.de
4	Available for use under the MIT License
5	Version 2.1.5
6*/
7"use strict";
8
9function _createForOfIteratorHelper(o) { if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (o = _unsupportedIterableToArray(o))) { var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var it, normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
10
11function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
12
13function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
14
15function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
16
17function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
18
19function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
20
21function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
22
23var SimpleLightbox = /*#__PURE__*/function () {
24  function SimpleLightbox(elements, options) {
25    var _this = this;
26
27    _classCallCheck(this, SimpleLightbox);
28
29    _defineProperty(this, "defaultOptions", {
30      sourceAttr: 'href',
31      overlay: true,
32      spinner: true,
33      nav: true,
34      navText: ['&lsaquo;', '&rsaquo;'],
35      captions: true,
36      captionDelay: 0,
37      captionSelector: 'img',
38      captionType: 'attr',
39      captionsData: 'title',
40      captionPosition: 'bottom',
41      captionClass: '',
42      close: true,
43      closeText: '&times;',
44      swipeClose: true,
45      showCounter: true,
46      fileExt: 'png|jpg|jpeg|gif|webp',
47      animationSlide: true,
48      animationSpeed: 250,
49      preloading: true,
50      enableKeyboard: true,
51      loop: true,
52      rel: false,
53      docClose: true,
54      swipeTolerance: 50,
55      className: 'simple-lightbox',
56      widthRatio: 0.8,
57      heightRatio: 0.9,
58      scaleImageToRatio: false,
59      disableRightClick: false,
60      disableScroll: true,
61      alertError: true,
62      alertErrorMessage: 'Image not found, next image will be loaded',
63      additionalHtml: false,
64      history: true,
65      throttleInterval: 0,
66      doubleTapZoom: 2,
67      maxZoom: 10,
68      htmlClass: 'has-lightbox',
69      rtl: false
70    });
71
72    _defineProperty(this, "transitionPrefix", void 0);
73
74    _defineProperty(this, "transitionCapable", false);
75
76    _defineProperty(this, "isTouchDevice", 'ontouchstart' in window);
77
78    _defineProperty(this, "initialLocationHash", void 0);
79
80    _defineProperty(this, "pushStateSupport", 'pushState' in history);
81
82    _defineProperty(this, "isOpen", false);
83
84    _defineProperty(this, "isAnimating", false);
85
86    _defineProperty(this, "isClosing", false);
87
88    _defineProperty(this, "urlChangedOnce", false);
89
90    _defineProperty(this, "hashReseted", false);
91
92    _defineProperty(this, "historyHasChanges", false);
93
94    _defineProperty(this, "historyUpdateTimeout", null);
95
96    _defineProperty(this, "currentImage", void 0);
97
98    _defineProperty(this, "eventNamespace", 'simplelightbox');
99
100    _defineProperty(this, "domNodes", {});
101
102    _defineProperty(this, "loadedImages", []);
103
104    _defineProperty(this, "initialImageIndex", 0);
105
106    _defineProperty(this, "currentImageIndex", 0);
107
108    _defineProperty(this, "initialSelector", null);
109
110    _defineProperty(this, "globalScrollbarWidth", 0);
111
112    _defineProperty(this, "controlCoordinates", {
113      swipeDiff: 0,
114      swipeYDiff: 0,
115      swipeStart: 0,
116      swipeEnd: 0,
117      swipeYStart: 0,
118      swipeYEnd: 0,
119      mousedown: false,
120      imageLeft: 0,
121      zoomed: false,
122      containerHeight: 0,
123      containerWidth: 0,
124      containerOffsetX: 0,
125      containerOffsetY: 0,
126      imgHeight: 0,
127      imgWidth: 0,
128      capture: false,
129      initialOffsetX: 0,
130      initialOffsetY: 0,
131      initialPointerOffsetX: 0,
132      initialPointerOffsetY: 0,
133      initialPointerOffsetX2: 0,
134      initialPointerOffsetY2: 0,
135      initialScale: 1,
136      initialPinchDistance: 0,
137      pointerOffsetX: 0,
138      pointerOffsetY: 0,
139      pointerOffsetX2: 0,
140      pointerOffsetY2: 0,
141      targetOffsetX: 0,
142      targetOffsetY: 0,
143      targetScale: 0,
144      pinchOffsetX: 0,
145      pinchOffsetY: 0,
146      limitOffsetX: 0,
147      limitOffsetY: 0,
148      scaleDifference: 0,
149      targetPinchDistance: 0,
150      touchCount: 0,
151      doubleTapped: false,
152      touchmoveCount: 0
153    });
154
155    this.options = Object.assign(this.defaultOptions, options);
156
157    if (typeof elements === 'string') {
158      this.initialSelector = elements;
159      this.elements = Array.from(document.querySelectorAll(elements));
160    } else {
161      this.elements = typeof elements.length !== 'undefined' && elements.length > 0 ? Array.from(elements) : [elements];
162    }
163
164    this.relatedElements = [];
165    this.transitionPrefix = this.calculateTransitionPrefix();
166    this.transitionCapable = this.transitionPrefix !== false;
167    this.initialLocationHash = this.hash; // this should be handled by attribute selector IMHO! => 'a[rel=bla]'...
168
169    if (this.options.rel) {
170      this.elements = this.getRelated(this.options.rel);
171    }
172
173    this.createDomNodes();
174
175    if (this.options.close) {
176      this.domNodes.wrapper.appendChild(this.domNodes.closeButton);
177    }
178
179    if (this.options.nav) {
180      this.domNodes.wrapper.appendChild(this.domNodes.navigation);
181    }
182
183    if (this.options.spinner) {
184      this.domNodes.wrapper.appendChild(this.domNodes.spinner);
185    }
186
187    this.addEventListener(this.elements, 'click.' + this.eventNamespace, function (event) {
188      if (_this.isValidLink(event.currentTarget)) {
189        event.preventDefault();
190
191        if (_this.isAnimating) {
192          return false;
193        }
194
195        _this.initialImageIndex = _this.elements.indexOf(event.currentTarget);
196
197        _this.openImage(event.currentTarget);
198      }
199    }); // close addEventListener click addEventListener doc
200
201    if (this.options.docClose) {
202      this.addEventListener(this.domNodes.overlay, ['click.' + this.eventNamespace, 'touchstart.' + this.eventNamespace], function (event) {
203        if (_this.isOpen) {
204          _this.close();
205        }
206      });
207    } // disable rightclick
208
209
210    if (this.options.disableRightClick) {
211      this.addEventListener(document.body, 'contextmenu.' + this.eventNamespace, function (event) {
212        if (event.target.classList.contains('sl-overlay')) {
213          event.preventDefault();
214        }
215      });
216    } // keyboard-control
217
218
219    if (this.options.enableKeyboard) {
220      this.addEventListener(document.body, 'keyup.' + this.eventNamespace, this.throttle(function (event) {
221        _this.controlCoordinates.swipeDiff = 0; // keyboard control only if lightbox is open
222
223        if (_this.isAnimating && event.key === 'Escape') {
224          _this.currentImage.setAttribute('src', '');
225
226          _this.isAnimating = false;
227          return _this.close();
228        }
229
230        if (_this.isOpen) {
231          event.preventDefault();
232
233          if (event.key === 'Escape') {
234            _this.close();
235          }
236
237          if (!_this.isAnimating && ['ArrowLeft', 'ArrowRight'].indexOf(event.key) > -1) {
238            _this.loadImage(event.key === 'ArrowRight' ? 1 : -1);
239          }
240        }
241      }, this.options.throttleInterval));
242    }
243
244    this.addEvents();
245  }
246
247  _createClass(SimpleLightbox, [{
248    key: "createDomNodes",
249    value: function createDomNodes() {
250      this.domNodes.overlay = document.createElement('div');
251      this.domNodes.overlay.classList.add('sl-overlay');
252      this.domNodes.overlay.dataset.opacityTarget = ".7";
253      this.domNodes.closeButton = document.createElement('button');
254      this.domNodes.closeButton.classList.add('sl-close');
255      this.domNodes.closeButton.innerHTML = this.options.closeText;
256      this.domNodes.spinner = document.createElement('div');
257      this.domNodes.spinner.classList.add('sl-spinner');
258      this.domNodes.spinner.innerHTML = '<div></div>';
259      this.domNodes.navigation = document.createElement('div');
260      this.domNodes.navigation.classList.add('sl-navigation');
261      this.domNodes.navigation.innerHTML = "<button class=\"sl-prev\">".concat(this.options.navText[0], "</button><button class=\"sl-next\">").concat(this.options.navText[1], "</button>");
262      this.domNodes.counter = document.createElement('div');
263      this.domNodes.counter.classList.add('sl-counter');
264      this.domNodes.counter.innerHTML = '<span class="sl-current"></span>/<span class="sl-total"></span>';
265      this.domNodes.caption = document.createElement('div');
266      this.domNodes.caption.classList.add('sl-caption', 'pos-' + this.options.captionPosition);
267
268      if (this.options.captionClass) {
269        this.domNodes.caption.classList.add(this.options.captionClass);
270      }
271
272      this.domNodes.image = document.createElement('div');
273      this.domNodes.image.classList.add('sl-image');
274      this.domNodes.wrapper = document.createElement('div');
275      this.domNodes.wrapper.classList.add('sl-wrapper');
276
277      if (this.options.className) {
278        this.domNodes.wrapper.classList.add(this.options.className);
279      }
280
281      if (this.options.rtl) {
282        this.domNodes.wrapper.classList.add('sl-dir-rtl');
283      }
284    }
285  }, {
286    key: "throttle",
287    value: function throttle(func, limit) {
288      var inThrottle;
289      return function () {
290        if (!inThrottle) {
291          func.apply(this, arguments);
292          inThrottle = true;
293          setTimeout(function () {
294            return inThrottle = false;
295          }, limit);
296        }
297      };
298    }
299  }, {
300    key: "isValidLink",
301    value: function isValidLink(element) {
302      return !this.options.fileExt || 'pathname' in element && new RegExp('(' + this.options.fileExt + ')$', 'i').test(element.pathname);
303    }
304  }, {
305    key: "calculateTransitionPrefix",
306    value: function calculateTransitionPrefix() {
307      var s = (document.body || document.documentElement).style;
308      return 'transition' in s ? '' : 'WebkitTransition' in s ? '-webkit-' : 'MozTransition' in s ? '-moz-' : 'OTransition' in s ? '-o' : false;
309    }
310  }, {
311    key: "toggleScrollbar",
312    value: function toggleScrollbar(type) {
313      var scrollbarWidth = 0;
314
315      if (type === 'hide') {
316        var fullWindowWidth = window.innerWidth;
317
318        if (!fullWindowWidth) {
319          var documentElementRect = document.documentElement.getBoundingClientRect();
320          fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left);
321        }
322
323        if (document.body.clientWidth < fullWindowWidth) {
324          var scrollDiv = document.createElement('div'),
325              paddingRight = parseInt(document.body.style.paddingRight || 0, 10);
326          scrollDiv.classList.add('sl-scrollbar-measure');
327          document.body.appendChild(scrollDiv);
328          scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
329          document.body.removeChild(scrollDiv);
330          document.body.dataset.originalPaddingRight = paddingRight;
331
332          if (scrollbarWidth > 0) {
333            document.body.classList.add('hidden-scroll');
334            document.body.style.paddingRight = paddingRight + scrollbarWidth + 'px';
335          }
336        }
337      } else {
338        document.body.classList.remove('hidden-scroll');
339        document.body.style.paddingRight = document.body.dataset.originalPaddingRight;
340      }
341
342      return scrollbarWidth;
343    }
344  }, {
345    key: "close",
346    value: function close() {
347      var _this2 = this;
348
349      if (!this.isOpen || this.isAnimating || this.isClosing) {
350        return false;
351      }
352
353      this.isClosing = true;
354      var element = this.relatedElements[this.currentImageIndex];
355      element.dispatchEvent(new Event('close.simplelightbox'));
356
357      if (this.options.history) {
358        this.historyHasChanges = false;
359
360        if (!this.hashReseted) {
361          this.resetHash();
362        }
363      }
364
365      this.fadeOut(document.querySelectorAll('.sl-image img, .sl-overlay, .sl-close, .sl-navigation, .sl-image .sl-caption, .sl-counter'), 300, function () {
366        if (_this2.options.disableScroll) {
367          _this2.toggleScrollbar('show');
368        }
369
370        if (_this2.options.htmlClass && _this2.options.htmlClass !== '') {
371          document.querySelector('html').classList.remove(_this2.options.htmlClass);
372        }
373
374        document.body.removeChild(_this2.domNodes.wrapper);
375        document.body.removeChild(_this2.domNodes.overlay);
376        _this2.domNodes.additionalHtml = null;
377        element.dispatchEvent(new Event('closed.simplelightbox'));
378        _this2.isClosing = false;
379      });
380      this.currentImage = null;
381      this.isOpen = false;
382      this.isAnimating = false; // reset touchcontrol coordinates
383
384      for (var key in this.controlCoordinates) {
385        this.controlCoordinates[key] = 0;
386      }
387
388      this.controlCoordinates.mousedown = false;
389      this.controlCoordinates.zoomed = false;
390      this.controlCoordinates.capture = false;
391      this.controlCoordinates.initialScale = this.minMax(1, 1, this.options.maxZoom);
392      this.controlCoordinates.doubleTapped = false;
393    }
394  }, {
395    key: "preload",
396    value: function preload() {
397      var _this3 = this;
398
399      var index = this.currentImageIndex,
400          length = this.relatedElements.length,
401          next = index + 1 < 0 ? length - 1 : index + 1 >= length - 1 ? 0 : index + 1,
402          prev = index - 1 < 0 ? length - 1 : index - 1 >= length - 1 ? 0 : index - 1,
403          nextImage = new Image(),
404          prevImage = new Image();
405      nextImage.addEventListener('load', function (event) {
406        var src = event.target.getAttribute('src');
407
408        if (_this3.loadedImages.indexOf(src) === -1) {
409          //is this condition even required... setting multiple times will not change usage...
410          _this3.loadedImages.push(src);
411        }
412
413        _this3.relatedElements[index].dispatchEvent(new Event('nextImageLoaded.' + _this3.eventNamespace));
414      });
415      nextImage.setAttribute('src', this.relatedElements[next].getAttribute(this.options.sourceAttr));
416      prevImage.addEventListener('load', function (event) {
417        var src = event.target.getAttribute('src');
418
419        if (_this3.loadedImages.indexOf(src) === -1) {
420          _this3.loadedImages.push(src);
421        }
422
423        _this3.relatedElements[index].dispatchEvent(new Event('prevImageLoaded.' + _this3.eventNamespace));
424      });
425      prevImage.setAttribute('src', this.relatedElements[prev].getAttribute(this.options.sourceAttr));
426    }
427  }, {
428    key: "loadImage",
429    value: function loadImage(direction) {
430      var _this4 = this;
431
432      var slideDirection = direction;
433
434      if (this.options.rtl) {
435        direction = -direction;
436      }
437
438      this.relatedElements[this.currentImageIndex].dispatchEvent(new Event('change.' + this.eventNamespace));
439      this.relatedElements[this.currentImageIndex].dispatchEvent(new Event((direction === 1 ? 'next' : 'prev') + '.' + this.eventNamespace));
440      var newIndex = this.currentImageIndex + direction;
441
442      if (this.isAnimating || (newIndex < 0 || newIndex >= this.relatedElements.length) && this.options.loop === false) {
443        return false;
444      }
445
446      this.currentImageIndex = newIndex < 0 ? this.relatedElements.length - 1 : newIndex > this.relatedElements.length - 1 ? 0 : newIndex;
447      this.domNodes.counter.querySelector('.sl-current').innerHTML = this.currentImageIndex + 1;
448
449      if (this.options.animationSlide) {
450        this.slide(this.options.animationSpeed / 1000, -100 * slideDirection - this.controlCoordinates.swipeDiff + 'px');
451      }
452
453      this.fadeOut(this.domNodes.image, 300, function () {
454        _this4.isAnimating = true;
455        setTimeout(function () {
456          var element = _this4.relatedElements[_this4.currentImageIndex];
457
458          _this4.currentImage.setAttribute('src', element.getAttribute(_this4.options.sourceAttr));
459
460          if (_this4.loadedImages.indexOf(element.getAttribute(_this4.options.sourceAttr)) === -1) {
461            _this4.show(_this4.domNodes.spinner);
462          }
463
464          if (_this4.domNodes.image.contains(_this4.domNodes.caption)) {
465            _this4.domNodes.image.removeChild(_this4.domNodes.caption);
466          }
467
468          _this4.adjustImage(slideDirection);
469
470          if (_this4.options.preloading) _this4.preload();
471        }, 100);
472      });
473    }
474  }, {
475    key: "adjustImage",
476    value: function adjustImage(direction) {
477      var _this5 = this;
478
479      if (!this.currentImage) {
480        return false;
481      }
482
483      var tmpImage = new Image(),
484          windowWidth = window.innerWidth * this.options.widthRatio,
485          windowHeight = window.innerHeight * this.options.heightRatio;
486      tmpImage.setAttribute('src', this.currentImage.getAttribute('src'));
487      this.currentImage.dataset.scale = 1;
488      this.currentImage.dataset.translateX = 0;
489      this.currentImage.dataset.translateY = 0;
490      this.zoomPanElement(0, 0, 1);
491      tmpImage.addEventListener('error', function (event) {
492        _this5.relatedElements[_this5.currentImageIndex].dispatchEvent(new Event('error.' + _this5.eventNamespace));
493
494        _this5.isAnimating = false;
495        _this5.isOpen = false;
496        _this5.domNodes.spinner.style.display = 'none';
497        var dirIsDefined = direction === 1 || direction === -1;
498
499        if (_this5.initialImageIndex === _this5.currentImageIndex && dirIsDefined) {
500          return _this5.close();
501        }
502
503        if (_this5.options.alertError) {
504          alert(_this5.options.alertErrorMessage);
505        }
506
507        _this5.loadImage(dirIsDefined ? direction : 1);
508      });
509      tmpImage.addEventListener('load', function (event) {
510        if (typeof direction !== 'undefined') {
511          _this5.relatedElements[_this5.currentImageIndex].dispatchEvent(new Event('changed.' + _this5.eventNamespace));
512
513          _this5.relatedElements[_this5.currentImageIndex].dispatchEvent(new Event((direction === 1 ? 'nextDone' : 'prevDone') + '.' + _this5.eventNamespace));
514        } // history
515
516
517        if (_this5.options.history) {
518          _this5.updateURL();
519        }
520
521        if (_this5.loadedImages.indexOf(_this5.currentImage.getAttribute('src')) === -1) {
522          _this5.loadedImages.push(_this5.currentImage.getAttribute('src'));
523        }
524
525        var imageWidth = event.target.width,
526            imageHeight = event.target.height;
527
528        if (_this5.options.scaleImageToRatio || imageWidth > windowWidth || imageHeight > windowHeight) {
529          var ratio = imageWidth / imageHeight > windowWidth / windowHeight ? imageWidth / windowWidth : imageHeight / windowHeight;
530          imageWidth /= ratio;
531          imageHeight /= ratio;
532        }
533
534        _this5.domNodes.image.style.top = (window.innerHeight - imageHeight) / 2 + 'px';
535        _this5.domNodes.image.style.left = (window.innerWidth - imageWidth - _this5.globalScrollbarWidth) / 2 + 'px';
536        _this5.domNodes.image.style.width = imageWidth + 'px';
537        _this5.domNodes.image.style.height = imageHeight + 'px';
538        _this5.domNodes.spinner.style.display = 'none';
539
540        _this5.fadeIn(_this5.currentImage, 300);
541
542        _this5.isOpen = true;
543        var captionContainer = _this5.options.captionSelector === 'self' ? _this5.relatedElements[_this5.currentImageIndex] : _this5.relatedElements[_this5.currentImageIndex].querySelector(_this5.options.captionSelector),
544            captionText;
545
546        if (_this5.options.captions && captionContainer) {
547          if (_this5.options.captionType === 'data') {
548            captionText = captionContainer.dataset[_this5.options.captionsData];
549          } else if (_this5.options.captionType === 'text') {
550            captionText = captionContainer.innerHTML;
551          } else {
552            captionText = captionContainer.getAttribute(_this5.options.captionsData);
553          }
554        }
555
556        if (!_this5.options.loop) {
557          if (_this5.currentImageIndex === 0) {
558            _this5.hide(_this5.domNodes.navigation.querySelector('.sl-prev'));
559          }
560
561          if (_this5.currentImageIndex >= _this5.relatedElements.length - 1) {
562            _this5.hide(_this5.domNodes.navigation.querySelector('.sl-next'));
563          }
564
565          if (_this5.currentImageIndex > 0) {
566            _this5.show(_this5.domNodes.navigation.querySelector('.sl-prev'));
567          }
568
569          if (_this5.currentImageIndex < _this5.relatedElements.length - 1) {
570            _this5.show(_this5.domNodes.navigation.querySelector('.sl-next'));
571          }
572        }
573
574        if (_this5.relatedElements.length === 1) {
575          _this5.hide(_this5.domNodes.navigation.querySelectorAll('.sl-prev, .sl-next'));
576        } else {
577          _this5.show(_this5.domNodes.navigation.querySelectorAll('.sl-prev, .sl-next'));
578        }
579
580        if (direction === 1 || direction === -1) {
581          if (_this5.options.animationSlide) {
582            _this5.slide(0, 100 * direction + 'px');
583
584            setTimeout(function () {
585              _this5.slide(_this5.options.animationSpeed / 1000, 0 + 'px');
586            }, 50);
587          }
588
589          _this5.fadeIn(_this5.domNodes.image, 300, function () {
590            _this5.isAnimating = false;
591
592            _this5.setCaption(captionText, imageWidth);
593          });
594        } else {
595          _this5.isAnimating = false;
596
597          _this5.setCaption(captionText, imageWidth);
598        }
599
600        if (_this5.options.additionalHtml && !_this5.domNodes.additionalHtml) {
601          _this5.domNodes.additionalHtml = document.createElement('div');
602
603          _this5.domNodes.additionalHtml.classList.add('sl-additional-html');
604
605          _this5.domNodes.additionalHtml.innerHTML = _this5.options.additionalHtml;
606
607          _this5.domNodes.image.appendChild(_this5.domNodes.additionalHtml);
608        }
609      });
610    }
611  }, {
612    key: "zoomPanElement",
613    value: function zoomPanElement(targetOffsetX, targetOffsetY, targetScale) {
614      this.currentImage.style[this.transitionPrefix + 'transform'] = 'translate(' + targetOffsetX + ',' + targetOffsetY + ') scale(' + targetScale + ')';
615    }
616  }, {
617    key: "minMax",
618    value: function minMax(value, min, max) {
619      return value < min ? min : value > max ? max : value;
620    }
621  }, {
622    key: "setZoomData",
623    value: function setZoomData(initialScale, targetOffsetX, targetOffsetY) {
624      this.currentImage.dataset.scale = initialScale;
625      this.currentImage.dataset.translateX = targetOffsetX;
626      this.currentImage.dataset.translateY = targetOffsetY;
627    }
628  }, {
629    key: "hashchangeHandler",
630    value: function hashchangeHandler() {
631      if (this.isOpen && this.hash === this.initialLocationHash) {
632        this.hashReseted = true;
633        this.close();
634      }
635    }
636  }, {
637    key: "addEvents",
638    value: function addEvents() {
639      var _this6 = this;
640
641      // resize/responsive
642      this.addEventListener(window, 'resize.' + this.eventNamespace, function (event) {
643        //this.adjustImage.bind(this)
644        if (_this6.isOpen) {
645          _this6.adjustImage();
646        }
647      });
648      this.addEventListener(this.domNodes.closeButton, ['click.' + this.eventNamespace, 'touchstart.' + this.eventNamespace], this.close.bind(this));
649
650      if (this.options.history) {
651        setTimeout(function () {
652          _this6.addEventListener(window, 'hashchange.' + _this6.eventNamespace, function (event) {
653            if (_this6.isOpen) {
654              _this6.hashchangeHandler();
655            }
656          });
657        }, 40);
658      }
659
660      this.addEventListener(this.domNodes.navigation.getElementsByTagName('button'), 'click.' + this.eventNamespace, function (event) {
661        if (!event.currentTarget.tagName.match(/button/i)) {
662          return true;
663        }
664
665        event.preventDefault();
666        _this6.controlCoordinates.swipeDiff = 0;
667
668        _this6.loadImage(event.currentTarget.classList.contains('sl-next') ? 1 : -1);
669      });
670      this.addEventListener(this.domNodes.image, ['touchstart.' + this.eventNamespace, 'mousedown.' + this.eventNamespace], function (event) {
671        if (event.target.tagName === 'A' && event.type === 'touchstart') {
672          return true;
673        }
674
675        if (event.type === 'mousedown') {
676          _this6.controlCoordinates.initialPointerOffsetX = event.clientX;
677          _this6.controlCoordinates.initialPointerOffsetY = event.clientY;
678          _this6.controlCoordinates.containerHeight = _this6.getDimensions(_this6.domNodes.image).height;
679          _this6.controlCoordinates.containerWidth = _this6.getDimensions(_this6.domNodes.image).width;
680          _this6.controlCoordinates.imgHeight = _this6.getDimensions(_this6.currentImage).height;
681          _this6.controlCoordinates.imgWidth = _this6.getDimensions(_this6.currentImage).width;
682          _this6.controlCoordinates.containerOffsetX = _this6.domNodes.image.offsetLeft;
683          _this6.controlCoordinates.containerOffsetY = _this6.domNodes.image.offsetTop;
684          _this6.controlCoordinates.initialOffsetX = parseFloat(_this6.currentImage.dataset.translateX);
685          _this6.controlCoordinates.initialOffsetY = parseFloat(_this6.currentImage.dataset.translateY);
686          _this6.controlCoordinates.capture = true;
687        } else {
688          _this6.controlCoordinates.touchCount = event.touches.length;
689          _this6.controlCoordinates.initialPointerOffsetX = event.touches[0].clientX;
690          _this6.controlCoordinates.initialPointerOffsetY = event.touches[0].clientY;
691          _this6.controlCoordinates.containerHeight = _this6.getDimensions(_this6.domNodes.image).height;
692          _this6.controlCoordinates.containerWidth = _this6.getDimensions(_this6.domNodes.image).width;
693          _this6.controlCoordinates.imgHeight = _this6.getDimensions(_this6.currentImage).height;
694          _this6.controlCoordinates.imgWidth = _this6.getDimensions(_this6.currentImage).width;
695          _this6.controlCoordinates.containerOffsetX = _this6.domNodes.image.offsetLeft;
696          _this6.controlCoordinates.containerOffsetY = _this6.domNodes.image.offsetTop;
697
698          if (_this6.controlCoordinates.touchCount === 1)
699            /* Single touch */
700            {
701              if (!_this6.controlCoordinates.doubleTapped) {
702                _this6.controlCoordinates.doubleTapped = true;
703                setTimeout(function () {
704                  _this6.controlCoordinates.doubleTapped = false;
705                }, 300);
706              } else {
707                _this6.currentImage.classList.add('sl-transition');
708
709                if (!_this6.controlCoordinates.zoomed) {
710                  _this6.controlCoordinates.initialScale = _this6.options.doubleTapZoom;
711
712                  _this6.setZoomData(_this6.controlCoordinates.initialScale, 0, 0);
713
714                  _this6.zoomPanElement(0 + "px", 0 + "px", _this6.controlCoordinates.initialScale);
715
716                  if (!_this6.domNodes.caption.style.opacity && _this6.domNodes.caption.style.display !== 'none') {
717                    _this6.fadeOut(_this6.domNodes.caption, 200);
718                  }
719
720                  _this6.controlCoordinates.zoomed = true;
721                } else {
722                  _this6.controlCoordinates.initialScale = 1;
723
724                  _this6.setZoomData(_this6.controlCoordinates.initialScale, 0, 0);
725
726                  _this6.zoomPanElement(0 + "px", 0 + "px", _this6.controlCoordinates.initialScale);
727
728                  _this6.controlCoordinates.zoomed = false;
729                }
730
731                setTimeout(function () {
732                  if (_this6.currentImage) {
733                    _this6.currentImage.classList.remove('sl-transition');
734                  }
735                }, 200);
736                return false;
737              }
738
739              _this6.controlCoordinates.initialOffsetX = parseFloat(_this6.currentImage.dataset.translateX);
740              _this6.controlCoordinates.initialOffsetY = parseFloat(_this6.currentImage.dataset.translateY);
741            } else if (_this6.controlCoordinates.touchCount === 2)
742            /* Pinch */
743            {
744              _this6.controlCoordinates.initialPointerOffsetX2 = event.touches[1].clientX;
745              _this6.controlCoordinates.initialPointerOffsetY2 = event.touches[1].clientY;
746              _this6.controlCoordinates.initialOffsetX = parseFloat(_this6.currentImage.dataset.translateX);
747              _this6.controlCoordinates.initialOffsetY = parseFloat(_this6.currentImage.dataset.translateY);
748              _this6.controlCoordinates.pinchOffsetX = (_this6.controlCoordinates.initialPointerOffsetX + _this6.controlCoordinates.initialPointerOffsetX2) / 2;
749              _this6.controlCoordinates.pinchOffsetY = (_this6.controlCoordinates.initialPointerOffsetY + _this6.controlCoordinates.initialPointerOffsetY2) / 2;
750              _this6.controlCoordinates.initialPinchDistance = Math.sqrt((_this6.controlCoordinates.initialPointerOffsetX - _this6.controlCoordinates.initialPointerOffsetX2) * (_this6.controlCoordinates.initialPointerOffsetX - _this6.controlCoordinates.initialPointerOffsetX2) + (_this6.controlCoordinates.initialPointerOffsetY - _this6.controlCoordinates.initialPointerOffsetY2) * (_this6.controlCoordinates.initialPointerOffsetY - _this6.controlCoordinates.initialPointerOffsetY2));
751            }
752
753          _this6.controlCoordinates.capture = true;
754        }
755
756        if (_this6.controlCoordinates.mousedown) return true;
757
758        if (_this6.transitionCapable) {
759          _this6.controlCoordinates.imageLeft = parseInt(_this6.domNodes.image.style.left, 10);
760        }
761
762        _this6.controlCoordinates.mousedown = true;
763        _this6.controlCoordinates.swipeDiff = 0;
764        _this6.controlCoordinates.swipeYDiff = 0;
765        _this6.controlCoordinates.swipeStart = event.pageX || event.touches[0].pageX;
766        _this6.controlCoordinates.swipeYStart = event.pageY || event.touches[0].pageY;
767        return false;
768      });
769      this.addEventListener(this.domNodes.image, ['touchmove.' + this.eventNamespace, 'mousemove.' + this.eventNamespace, 'MSPointerMove'], function (event) {
770        if (!_this6.controlCoordinates.mousedown) {
771          return true;
772        }
773
774        event.preventDefault();
775
776        if (event.type === 'touchmove') {
777          if (_this6.controlCoordinates.capture === false) {
778            return false;
779          }
780
781          _this6.controlCoordinates.pointerOffsetX = event.touches[0].clientX;
782          _this6.controlCoordinates.pointerOffsetY = event.touches[0].clientY;
783          _this6.controlCoordinates.touchCount = event.touches.length;
784          _this6.controlCoordinates.touchmoveCount++;
785
786          if (_this6.controlCoordinates.touchCount > 1)
787            /* Pinch */
788            {
789              _this6.controlCoordinates.pointerOffsetX2 = event.touches[1].clientX;
790              _this6.controlCoordinates.pointerOffsetY2 = event.touches[1].clientY;
791              _this6.controlCoordinates.targetPinchDistance = Math.sqrt((_this6.controlCoordinates.pointerOffsetX - _this6.controlCoordinates.pointerOffsetX2) * (_this6.controlCoordinates.pointerOffsetX - _this6.controlCoordinates.pointerOffsetX2) + (_this6.controlCoordinates.pointerOffsetY - _this6.controlCoordinates.pointerOffsetY2) * (_this6.controlCoordinates.pointerOffsetY - _this6.controlCoordinates.pointerOffsetY2));
792
793              if (_this6.controlCoordinates.initialPinchDistance === null) {
794                _this6.controlCoordinates.initialPinchDistance = _this6.controlCoordinates.targetPinchDistance;
795              }
796
797              if (Math.abs(_this6.controlCoordinates.initialPinchDistance - _this6.controlCoordinates.targetPinchDistance) >= 1) {
798                /* Initialize helpers */
799                _this6.controlCoordinates.targetScale = _this6.minMax(_this6.controlCoordinates.targetPinchDistance / _this6.controlCoordinates.initialPinchDistance * _this6.controlCoordinates.initialScale, 1, _this6.options.maxZoom);
800                _this6.controlCoordinates.limitOffsetX = (_this6.controlCoordinates.imgWidth * _this6.controlCoordinates.targetScale - _this6.controlCoordinates.containerWidth) / 2;
801                _this6.controlCoordinates.limitOffsetY = (_this6.controlCoordinates.imgHeight * _this6.controlCoordinates.targetScale - _this6.controlCoordinates.containerHeight) / 2;
802                _this6.controlCoordinates.scaleDifference = _this6.controlCoordinates.targetScale - _this6.controlCoordinates.initialScale;
803                _this6.controlCoordinates.targetOffsetX = _this6.controlCoordinates.imgWidth * _this6.controlCoordinates.targetScale <= _this6.controlCoordinates.containerWidth ? 0 : _this6.minMax(_this6.controlCoordinates.initialOffsetX - (_this6.controlCoordinates.pinchOffsetX - _this6.controlCoordinates.containerOffsetX - _this6.controlCoordinates.containerWidth / 2 - _this6.controlCoordinates.initialOffsetX) / (_this6.controlCoordinates.targetScale - _this6.controlCoordinates.scaleDifference) * _this6.controlCoordinates.scaleDifference, _this6.controlCoordinates.limitOffsetX * -1, _this6.controlCoordinates.limitOffsetX);
804                _this6.controlCoordinates.targetOffsetY = _this6.controlCoordinates.imgHeight * _this6.controlCoordinates.targetScale <= _this6.controlCoordinates.containerHeight ? 0 : _this6.minMax(_this6.controlCoordinates.initialOffsetY - (_this6.controlCoordinates.pinchOffsetY - _this6.controlCoordinates.containerOffsetY - _this6.controlCoordinates.containerHeight / 2 - _this6.controlCoordinates.initialOffsetY) / (_this6.controlCoordinates.targetScale - _this6.controlCoordinates.scaleDifference) * _this6.controlCoordinates.scaleDifference, _this6.controlCoordinates.limitOffsetY * -1, _this6.controlCoordinates.limitOffsetY);
805
806                _this6.zoomPanElement(_this6.controlCoordinates.targetOffsetX + "px", _this6.controlCoordinates.targetOffsetY + "px", _this6.controlCoordinates.targetScale);
807
808                if (_this6.controlCoordinates.targetScale > 1) {
809                  _this6.controlCoordinates.zoomed = true;
810
811                  if (!_this6.domNodes.caption.style.opacity && _this6.domNodes.caption.style.display !== 'none') {
812                    _this6.fadeOut(_this6.domNodes.caption, 200);
813                  }
814                }
815
816                _this6.controlCoordinates.initialPinchDistance = _this6.controlCoordinates.targetPinchDistance;
817                _this6.controlCoordinates.initialScale = _this6.controlCoordinates.targetScale;
818                _this6.controlCoordinates.initialOffsetX = _this6.controlCoordinates.targetOffsetX;
819                _this6.controlCoordinates.initialOffsetY = _this6.controlCoordinates.targetOffsetY;
820              }
821            } else {
822            _this6.controlCoordinates.targetScale = _this6.controlCoordinates.initialScale;
823            _this6.controlCoordinates.limitOffsetX = (_this6.controlCoordinates.imgWidth * _this6.controlCoordinates.targetScale - _this6.controlCoordinates.containerWidth) / 2;
824            _this6.controlCoordinates.limitOffsetY = (_this6.controlCoordinates.imgHeight * _this6.controlCoordinates.targetScale - _this6.controlCoordinates.containerHeight) / 2;
825            _this6.controlCoordinates.targetOffsetX = _this6.controlCoordinates.imgWidth * _this6.controlCoordinates.targetScale <= _this6.controlCoordinates.containerWidth ? 0 : _this6.minMax(_this6.controlCoordinates.pointerOffsetX - (_this6.controlCoordinates.initialPointerOffsetX - _this6.controlCoordinates.initialOffsetX), _this6.controlCoordinates.limitOffsetX * -1, _this6.controlCoordinates.limitOffsetX);
826            _this6.controlCoordinates.targetOffsetY = _this6.controlCoordinates.imgHeight * _this6.controlCoordinates.targetScale <= _this6.controlCoordinates.containerHeight ? 0 : _this6.minMax(_this6.controlCoordinates.pointerOffsetY - (_this6.controlCoordinates.initialPointerOffsetY - _this6.controlCoordinates.initialOffsetY), _this6.controlCoordinates.limitOffsetY * -1, _this6.controlCoordinates.limitOffsetY);
827
828            if (Math.abs(_this6.controlCoordinates.targetOffsetX) === Math.abs(_this6.controlCoordinates.limitOffsetX)) {
829              _this6.controlCoordinates.initialOffsetX = _this6.controlCoordinates.targetOffsetX;
830              _this6.controlCoordinates.initialPointerOffsetX = _this6.controlCoordinates.pointerOffsetX;
831            }
832
833            if (Math.abs(_this6.controlCoordinates.targetOffsetY) === Math.abs(_this6.controlCoordinates.limitOffsetY)) {
834              _this6.controlCoordinates.initialOffsetY = _this6.controlCoordinates.targetOffsetY;
835              _this6.controlCoordinates.initialPointerOffsetY = _this6.controlCoordinates.pointerOffsetY;
836            }
837
838            _this6.setZoomData(_this6.controlCoordinates.initialScale, _this6.controlCoordinates.targetOffsetX, _this6.controlCoordinates.targetOffsetY);
839
840            _this6.zoomPanElement(_this6.controlCoordinates.targetOffsetX + "px", _this6.controlCoordinates.targetOffsetY + "px", _this6.controlCoordinates.targetScale);
841          }
842        }
843        /* Mouse Move implementation */
844
845
846        if (event.type === 'mousemove' && _this6.controlCoordinates.mousedown) {
847          if (event.type == 'touchmove') return true;
848          if (_this6.controlCoordinates.capture === false) return false;
849          _this6.controlCoordinates.pointerOffsetX = event.clientX;
850          _this6.controlCoordinates.pointerOffsetY = event.clientY;
851          _this6.controlCoordinates.targetScale = _this6.controlCoordinates.initialScale;
852          _this6.controlCoordinates.limitOffsetX = (_this6.controlCoordinates.imgWidth * _this6.controlCoordinates.targetScale - _this6.controlCoordinates.containerWidth) / 2;
853          _this6.controlCoordinates.limitOffsetY = (_this6.controlCoordinates.imgHeight * _this6.controlCoordinates.targetScale - _this6.controlCoordinates.containerHeight) / 2;
854          _this6.controlCoordinates.targetOffsetX = _this6.controlCoordinates.imgWidth * _this6.controlCoordinates.targetScale <= _this6.controlCoordinates.containerWidth ? 0 : _this6.minMax(_this6.controlCoordinates.pointerOffsetX - (_this6.controlCoordinates.initialPointerOffsetX - _this6.controlCoordinates.initialOffsetX), _this6.controlCoordinates.limitOffsetX * -1, _this6.controlCoordinates.limitOffsetX);
855          _this6.controlCoordinates.targetOffsetY = _this6.controlCoordinates.imgHeight * _this6.controlCoordinates.targetScale <= _this6.controlCoordinates.containerHeight ? 0 : _this6.minMax(_this6.controlCoordinates.pointerOffsetY - (_this6.controlCoordinates.initialPointerOffsetY - _this6.controlCoordinates.initialOffsetY), _this6.controlCoordinates.limitOffsetY * -1, _this6.controlCoordinates.limitOffsetY);
856
857          if (Math.abs(_this6.controlCoordinates.targetOffsetX) === Math.abs(_this6.controlCoordinates.limitOffsetX)) {
858            _this6.controlCoordinates.initialOffsetX = _this6.controlCoordinates.targetOffsetX;
859            _this6.controlCoordinates.initialPointerOffsetX = _this6.controlCoordinates.pointerOffsetX;
860          }
861
862          if (Math.abs(_this6.controlCoordinates.targetOffsetY) === Math.abs(_this6.controlCoordinates.limitOffsetY)) {
863            _this6.controlCoordinates.initialOffsetY = _this6.controlCoordinates.targetOffsetY;
864            _this6.controlCoordinates.initialPointerOffsetY = _this6.controlCoordinates.pointerOffsetY;
865          }
866
867          _this6.setZoomData(_this6.controlCoordinates.initialScale, _this6.controlCoordinates.targetOffsetX, _this6.controlCoordinates.targetOffsetY);
868
869          _this6.zoomPanElement(_this6.controlCoordinates.targetOffsetX + "px", _this6.controlCoordinates.targetOffsetY + "px", _this6.controlCoordinates.targetScale);
870        }
871
872        if (!_this6.controlCoordinates.zoomed) {
873          _this6.controlCoordinates.swipeEnd = event.pageX || event.touches[0].pageX;
874          _this6.controlCoordinates.swipeYEnd = event.pageY || event.touches[0].pageY;
875          _this6.controlCoordinates.swipeDiff = _this6.controlCoordinates.swipeStart - _this6.controlCoordinates.swipeEnd;
876          _this6.controlCoordinates.swipeYDiff = _this6.controlCoordinates.swipeYStart - _this6.controlCoordinates.swipeYEnd;
877
878          if (_this6.options.animationSlide) {
879            _this6.slide(0, -_this6.controlCoordinates.swipeDiff + 'px');
880          }
881        }
882      });
883      this.addEventListener(this.domNodes.image, ['touchend.' + this.eventNamespace, 'mouseup.' + this.eventNamespace, 'touchcancel.' + this.eventNamespace, 'mouseleave.' + this.eventNamespace, 'pointerup', 'pointercancel', 'MSPointerUp', 'MSPointerCancel'], function (event) {
884        if (_this6.isTouchDevice && event.type === 'touchend') {
885          _this6.controlCoordinates.touchCount = event.touches.length;
886
887          if (_this6.controlCoordinates.touchCount === 0)
888            /* No touch */
889            {
890              /* Set attributes */
891              _this6.setZoomData(_this6.controlCoordinates.initialScale, _this6.controlCoordinates.targetOffsetX, _this6.controlCoordinates.targetOffsetY);
892
893              if (_this6.controlCoordinates.initialScale === 1) {
894                _this6.controlCoordinates.zoomed = false;
895
896                if (_this6.domNodes.caption.style.display === 'none') {
897                  _this6.fadeIn(_this6.domNodes.caption, 200);
898                }
899              }
900
901              _this6.controlCoordinates.initialPinchDistance = null;
902              _this6.controlCoordinates.capture = false;
903            } else if (_this6.controlCoordinates.touchCount === 1)
904            /* Single touch */
905            {
906              _this6.controlCoordinates.initialPointerOffsetX = event.touches[0].clientX;
907              _this6.controlCoordinates.initialPointerOffsetY = event.touches[0].clientY;
908            } else if (_this6.controlCoordinates.touchCount > 1)
909            /* Pinch */
910            {
911              _this6.controlCoordinates.initialPinchDistance = null;
912            }
913        }
914
915        if (_this6.controlCoordinates.mousedown) {
916          _this6.controlCoordinates.mousedown = false;
917          var possibleDir = true;
918
919          if (!_this6.options.loop) {
920            if (_this6.currentImageIndex === 0 && _this6.controlCoordinates.swipeDiff < 0) {
921              possibleDir = false;
922            }
923
924            if (_this6.currentImageIndex >= _this6.relatedElements.length - 1 && _this6.controlCoordinates.swipeDiff > 0) {
925              possibleDir = false;
926            }
927          }
928
929          if (Math.abs(_this6.controlCoordinates.swipeDiff) > _this6.options.swipeTolerance && possibleDir) {
930            _this6.loadImage(_this6.controlCoordinates.swipeDiff > 0 ? 1 : -1);
931          } else if (_this6.options.animationSlide) {
932            _this6.slide(_this6.options.animationSpeed / 1000, 0 + 'px');
933          }
934
935          if (_this6.options.swipeClose && Math.abs(_this6.controlCoordinates.swipeYDiff) > 50 && Math.abs(_this6.controlCoordinates.swipeDiff) < _this6.options.swipeTolerance) {
936            _this6.close();
937          }
938        }
939      });
940      this.addEventListener(this.domNodes.image, ['dblclick'], function (event) {
941        if (_this6.isTouchDevice) return;
942        _this6.controlCoordinates.initialPointerOffsetX = event.clientX;
943        _this6.controlCoordinates.initialPointerOffsetY = event.clientY;
944        _this6.controlCoordinates.containerHeight = _this6.getDimensions(_this6.domNodes.image).height;
945        _this6.controlCoordinates.containerWidth = _this6.getDimensions(_this6.domNodes.image).width;
946        _this6.controlCoordinates.imgHeight = _this6.getDimensions(_this6.currentImage).height;
947        _this6.controlCoordinates.imgWidth = _this6.getDimensions(_this6.currentImage).width;
948        _this6.controlCoordinates.containerOffsetX = _this6.domNodes.image.offsetLeft;
949        _this6.controlCoordinates.containerOffsetY = _this6.domNodes.image.offsetTop;
950
951        _this6.currentImage.classList.add('sl-transition');
952
953        if (!_this6.controlCoordinates.zoomed) {
954          _this6.controlCoordinates.initialScale = _this6.options.doubleTapZoom;
955
956          _this6.setZoomData(_this6.controlCoordinates.initialScale, 0, 0);
957
958          _this6.zoomPanElement(0 + "px", 0 + "px", _this6.controlCoordinates.initialScale);
959
960          if (!_this6.domNodes.caption.style.opacity && _this6.domNodes.caption.style.display !== 'none') {
961            _this6.fadeOut(_this6.domNodes.caption, 200);
962          }
963
964          _this6.controlCoordinates.zoomed = true;
965        } else {
966          _this6.controlCoordinates.initialScale = 1;
967
968          _this6.setZoomData(_this6.controlCoordinates.initialScale, 0, 0);
969
970          _this6.zoomPanElement(0 + "px", 0 + "px", _this6.controlCoordinates.initialScale);
971
972          _this6.controlCoordinates.zoomed = false;
973
974          if (_this6.domNodes.caption.style.display === 'none') {
975            _this6.fadeIn(_this6.domNodes.caption, 200);
976          }
977        }
978
979        setTimeout(function () {
980          if (_this6.currentImage) {
981            _this6.currentImage.classList.remove('sl-transition');
982          }
983        }, 200);
984        _this6.controlCoordinates.capture = true;
985        return false;
986      });
987    }
988  }, {
989    key: "getDimensions",
990    value: function getDimensions(element) {
991      var styles = window.getComputedStyle(element),
992          height = element.offsetHeight,
993          width = element.offsetWidth,
994          borderTopWidth = parseFloat(styles.borderTopWidth),
995          borderBottomWidth = parseFloat(styles.borderBottomWidth),
996          paddingTop = parseFloat(styles.paddingTop),
997          paddingBottom = parseFloat(styles.paddingBottom),
998          borderLeftWidth = parseFloat(styles.borderLeftWidth),
999          borderRightWidth = parseFloat(styles.borderRightWidth),
1000          paddingLeft = parseFloat(styles.paddingLeft),
1001          paddingRight = parseFloat(styles.paddingRight);
1002      return {
1003        height: height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom,
1004        width: width - borderLeftWidth - borderRightWidth - paddingLeft - paddingRight
1005      };
1006    }
1007  }, {
1008    key: "updateHash",
1009    value: function updateHash() {
1010      var newHash = 'pid=' + (this.currentImageIndex + 1),
1011          newURL = window.location.href.split('#')[0] + '#' + newHash;
1012      this.hashReseted = false;
1013
1014      if (this.pushStateSupport) {
1015        window.history[this.historyHasChanges ? 'replaceState' : 'pushState']('', document.title, newURL);
1016      } else {
1017        // what is the browser target of this?
1018        if (this.historyHasChanges) {
1019          window.location.replace(newURL);
1020        } else {
1021          window.location.hash = newHash;
1022        }
1023      }
1024
1025      if (!this.historyHasChanges) {
1026        this.urlChangedOnce = true;
1027      }
1028
1029      this.historyHasChanges = true;
1030    }
1031  }, {
1032    key: "resetHash",
1033    value: function resetHash() {
1034      this.hashReseted = true;
1035
1036      if (this.urlChangedOnce) {
1037        history.back();
1038      } else {
1039        if (this.pushStateSupport) {
1040          history.pushState('', document.title, window.location.pathname + window.location.search);
1041        } else {
1042          window.location.hash = '';
1043        }
1044      } //
1045      //in case an history operation is still pending
1046
1047
1048      clearTimeout(this.historyUpdateTimeout);
1049    }
1050  }, {
1051    key: "updateURL",
1052    value: function updateURL() {
1053      clearTimeout(this.historyUpdateTimeout);
1054
1055      if (!this.historyHasChanges) {
1056        this.updateHash(); // first time
1057      } else {
1058        this.historyUpdateTimeout = setTimeout(this.updateHash.bind(this), 800);
1059      }
1060    }
1061  }, {
1062    key: "setCaption",
1063    value: function setCaption(captionText, imageWidth) {
1064      var _this7 = this;
1065
1066      if (this.options.captions && captionText && captionText !== '' && typeof captionText !== "undefined") {
1067        this.hide(this.domNodes.caption);
1068        this.domNodes.caption.style.width = imageWidth + 'px';
1069        this.domNodes.caption.innerHTML = captionText;
1070        this.domNodes.image.appendChild(this.domNodes.caption);
1071        setTimeout(function () {
1072          _this7.fadeIn(_this7.domNodes.caption, 300);
1073        }, this.options.captionDelay);
1074      }
1075    }
1076  }, {
1077    key: "slide",
1078    value: function slide(speed, pos) {
1079      if (!this.transitionCapable) {
1080        return this.domNodes.image.style.left = pos;
1081      }
1082
1083      this.domNodes.image.style[this.transitionPrefix + 'transform'] = 'translateX(' + pos + ')';
1084      this.domNodes.image.style[this.transitionPrefix + 'transition'] = this.transitionPrefix + 'transform ' + speed + 's linear';
1085    }
1086  }, {
1087    key: "getRelated",
1088    value: function getRelated(rel) {
1089      var elems;
1090
1091      if (rel && rel !== false && rel !== 'nofollow') {
1092        elems = Array.from(this.elements).filter(function (element) {
1093          return element.getAttribute('rel') === rel;
1094        });
1095      } else {
1096        elems = this.elements;
1097      }
1098
1099      return elems;
1100    }
1101  }, {
1102    key: "openImage",
1103    value: function openImage(element) {
1104      var _this8 = this;
1105
1106      element.dispatchEvent(new Event('show.' + this.eventNamespace));
1107
1108      if (this.options.disableScroll) {
1109        this.globalScrollbarWidth = this.toggleScrollbar('hide');
1110      }
1111
1112      if (this.options.htmlClass && this.options.htmlClass !== '') {
1113        document.querySelector('html').classList.add(this.options.htmlClass);
1114      }
1115
1116      document.body.appendChild(this.domNodes.wrapper);
1117      this.domNodes.wrapper.appendChild(this.domNodes.image);
1118
1119      if (this.options.overlay) {
1120        document.body.appendChild(this.domNodes.overlay);
1121      }
1122
1123      this.relatedElements = this.getRelated(element.rel);
1124
1125      if (this.options.showCounter) {
1126        if (this.relatedElements.length == 1 && this.domNodes.wrapper.contains(this.domNodes.counter)) {
1127          this.domNodes.wrapper.removeChild(this.domNodes.counter);
1128        } else if (this.relatedElements.length > 1 && !this.domNodes.wrapper.contains(this.domNodes.counter)) {
1129          this.domNodes.wrapper.appendChild(this.domNodes.counter);
1130        }
1131      }
1132
1133      this.isAnimating = true;
1134      this.currentImageIndex = this.relatedElements.indexOf(element);
1135      var targetURL = element.getAttribute(this.options.sourceAttr);
1136      this.currentImage = document.createElement('img');
1137      this.currentImage.style.display = 'none';
1138      this.currentImage.setAttribute('src', targetURL);
1139      this.currentImage.dataset.scale = 1;
1140      this.currentImage.dataset.translateX = 0;
1141      this.currentImage.dataset.translateY = 0;
1142
1143      if (this.loadedImages.indexOf(targetURL) === -1) {
1144        this.loadedImages.push(targetURL);
1145      }
1146
1147      this.domNodes.image.innerHTML = '';
1148      this.domNodes.image.setAttribute('style', '');
1149      this.domNodes.image.appendChild(this.currentImage);
1150      this.fadeIn(this.domNodes.overlay, 300);
1151      this.fadeIn([this.domNodes.counter, this.domNodes.navigation, this.domNodes.closeButton], 300);
1152      this.show(this.domNodes.spinner);
1153      this.domNodes.counter.querySelector('.sl-current').innerHTML = this.currentImageIndex + 1;
1154      this.domNodes.counter.querySelector('.sl-total').innerHTML = this.relatedElements.length;
1155      this.adjustImage();
1156
1157      if (this.options.preloading) {
1158        this.preload();
1159      }
1160
1161      setTimeout(function () {
1162        element.dispatchEvent(new Event('shown.' + _this8.eventNamespace));
1163      }, this.options.animationSpeed);
1164    } // utility
1165
1166  }, {
1167    key: "addEventListener",
1168    value: function addEventListener(elements, events, callback, opts) {
1169      elements = this.wrap(elements);
1170      events = this.wrap(events);
1171
1172      var _iterator = _createForOfIteratorHelper(elements),
1173          _step;
1174
1175      try {
1176        for (_iterator.s(); !(_step = _iterator.n()).done;) {
1177          var element = _step.value;
1178
1179          if (!element.namespaces) {
1180            element.namespaces = {};
1181          } // save the namespaces addEventListener the DOM element itself
1182
1183
1184          var _iterator2 = _createForOfIteratorHelper(events),
1185              _step2;
1186
1187          try {
1188            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
1189              var event = _step2.value;
1190              var options = opts || false;
1191              element.namespaces[event] = callback;
1192              element.addEventListener(event.split('.')[0], callback, options);
1193            }
1194          } catch (err) {
1195            _iterator2.e(err);
1196          } finally {
1197            _iterator2.f();
1198          }
1199        }
1200      } catch (err) {
1201        _iterator.e(err);
1202      } finally {
1203        _iterator.f();
1204      }
1205    }
1206  }, {
1207    key: "removeEventListener",
1208    value: function removeEventListener(elements, events) {
1209      elements = this.wrap(elements);
1210      events = this.wrap(events);
1211
1212      var _iterator3 = _createForOfIteratorHelper(elements),
1213          _step3;
1214
1215      try {
1216        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
1217          var element = _step3.value;
1218
1219          var _iterator4 = _createForOfIteratorHelper(events),
1220              _step4;
1221
1222          try {
1223            for (_iterator4.s();

1375      try {
1376        for (_iterator11.s(); !(_step11 = _iterator11.n()).done;) {
1377          var element = _step11.value;
1378          element.dataset.initialDisplay = element.style.display;
1379          element.style.display = 'none';
1380        }
1381      } catch (err) {
1382        _iterator11.e(err);
1383      } finally {
1384        _iterator11.f();
1385      }
1386    }
1387  }, {
1388    key: "show",
1389    value: function show(elements, display) {
1390      elements = this.wrap(elements);
1391
1392      var _iterator12 = _createForOfIteratorHelper(elements),
1393          _step12;
1394
1395      try {
1396        for (_iterator12.s(); !(_step12 = _iterator12.n()).done;) {
1397          var element = _step12.value;
1398          element.style.display = element.dataset.initialDisplay || display || 'block';
1399        }
1400      } catch (err) {
1401        _iterator12.e(err);
1402      } finally {
1403        _iterator12.f();
1404      }
1405    }
1406  }, {
1407    key: "wrap",
1408    value: function wrap(input) {
1409      return typeof input[Symbol.iterator] === 'function' && typeof input !== 'string' ? input : [input];
1410    }
1411  }, {
1412    key: "on",
1413    value: function on(events, callback) {
1414      events = this.wrap(events);
1415
1416      var _iterator13 = _createForOfIteratorHelper(this.elements),
1417          _step13;
1418
1419      try {
1420        for (_iterator13.s(); !(_step13 = _iterator13.n()).done;) {
1421          var element = _step13.value;
1422
1423          if (!element.fullyNamespacedEvents) {
1424            element.fullyNamespacedEvents = {};
1425          }
1426
1427          var _iterator14 = _createForOfIteratorHelper(events),
1428              _step14;
1429
1430          try {
1431            for (_iterator14.s(); !(_step14 = _iterator14.n()).done;) {
1432              var event = _step14.value;
1433              element.fullyNamespacedEvents[event] = callback;
1434              element.addEventListener(event, callback);
1435            }
1436          } catch (err) {
1437            _iterator14.e(err);
1438          } finally {
1439            _iterator14.f();
1440          }
1441        }
1442      } catch (err) {
1443        _iterator13.e(err);
1444      } finally {
1445        _iterator13.f();
1446      }
1447
1448      return this;
1449    }
1450  }, {
1451    key: "off",
1452    value: function off(events) {
1453      events = this.wrap(events);
1454
1455      var _iterator15 = _createForOfIteratorHelper(this.elements),
1456          _step15;
1457
1458      try {
1459        for (_iterator15.s(); !(_step15 = _iterator15.n()).done;) {
1460          var element = _step15.value;
1461
1462          var _iterator16 = _createForOfIteratorHelper(events),
1463              _step16;
1464
1465          try {
1466            for (_iterator16.s(); !(_step16 = _iterator16.n()).done;) {
1467              var event = _step16.value;
1468
1469              if (typeof element.fullyNamespacedEvents !== 'undefined' && event in element.fullyNamespacedEvents) {
1470                element.removeEventListener(event, element.fullyNamespacedEvents[event]);
1471              }
1472            }
1473          } catch (err) {
1474            _iterator16.e(err);
1475          } finally {
1476            _iterator16.f();
1477          }
1478        }
1479      } catch (err) {
1480        _iterator15.e(err);
1481      } finally {
1482        _iterator15.f();
1483      }
1484
1485      return this;
1486    } // api
1487
1488  }, {
1489    key: "open",
1490    value: function open(elem) {
1491      elem = elem || this.elements[0];
1492
1493      if (typeof jQuery !== "undefined" && elem instanceof jQuery) {
1494        elem = elem.get(0);
1495      }
1496
1497      this.initialImageIndex = this.elements.indexOf(elem);
1498
1499      if (this.initialImageIndex > -1) {
1500        this.openImage(elem);
1501      }
1502    }
1503  }, {
1504    key: "next",
1505    value: function next() {
1506      this.loadImage(1);
1507    }
1508  }, {
1509    key: "prev",
1510    value: function prev() {
1511      this.loadImage(-1);
1512    } //close is exposed anyways..
1513
1514  }, {
1515    key: "destroy",
1516    value: function destroy() {
1517      //remove all custom event listeners from elements
1518      this.off(['close.' + this.eventNamespace, 'closed.' + this.eventNamespace, 'nextImageLoaded.' + this.eventNamespace, 'prevImageLoaded.' + this.eventNamespace, 'change.' + this.eventNamespace, 'nextDone.' + this.eventNamespace, 'prevDone.' + this.eventNamespace, 'error.' + this.eventNamespace, 'changed.' + this.eventNamespace, 'next.' + this.eventNamespace, 'prev.' + this.eventNamespace, 'show.' + this.eventNamespace, 'shown.' + this.eventNamespace]);
1519      this.removeEventListener(this.elements, 'click.' + this.eventNamespace);
1520      this.removeEventListener(document.body, 'contextmenu.' + this.eventNamespace);
1521      this.removeEventListener(document.body, 'keyup.' + this.eventNamespace);
1522      this.removeEventListener(this.domNodes.navigation.getElementsByTagName('button'), 'click.' + this.eventNamespace);
1523      this.removeEventListener(this.domNodes.closeButton, 'click.' + this.eventNamespace);
1524      this.removeEventListener(window, 'resize.' + this.eventNamespace);
1525      this.removeEventListener(window, 'hashchange.' + this.eventNamespace);
1526      this.close();
1527
1528      if (this.isOpen) {
1529        document.body.removeChild(this.domNodes.wrapper);
1530        document.body.removeChild(this.domNodes.overlay);
1531      }
1532
1533      this.elements = null;
1534    }
1535  }, {
1536    key: "refresh",
1537    value: function refresh() {
1538      if (!this.initialSelector) {
1539        throw 'refreshing only works when you initialize using a selector!';
1540      }
1541
1542      var options = this.options,
1543          selector = this.initialSelector;
1544      this.destroy();
1545      this.constructor(selector, options);
1546      return this;
1547    }
1548  }, {
1549    key: "hash",
1550    get: function get() {
1551      return window.location.hash.substring(1);
1552    }
1553  }]);
1554
1555  return SimpleLightbox;
1556}();
1557
1558(function ($, window, document, undefined) {
1559  'use strict';
1560
1561  $.fn.simpleLightbox = function (options) {
1562    return new SimpleLightbox(this.get(), options);
1563  };
1564})(jQuery, window, document);