1/*! 2 By André Rinas, www.andrerinas.de 3 Documentation, www.simplelightbox.com 4 Available for use under the MIT License 5 Version 2.14.2 6*/ 7(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){ 8(function (global){(function (){ 9"use strict"; 10 11Object.defineProperty(exports, "__esModule", { 12 value: true 13}); 14exports["default"] = void 0; 15function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); } 16function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; 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 normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, 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; } } }; } 17function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); } 18function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } 19function _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(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } 20function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); } 21function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } 22function _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; } 23function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 24function _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); } } 25function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; } 26function _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; } 27var SimpleLightbox = /*#__PURE__*/function () { 28 function SimpleLightbox(elements, options) { 29 var _this = this; 30 _classCallCheck(this, SimpleLightbox); 31 _defineProperty(this, "defaultOptions", { 32 sourceAttr: 'href', 33 overlay: true, 34 overlayOpacity: 0.7, 35 spinner: true, 36 nav: true, 37 navText: ['‹', '›'], 38 captions: true, 39 captionDelay: 0, 40 captionSelector: 'img', 41 captionType: 'attr', 42 captionsData: 'title', 43 captionPosition: 'bottom', 44 captionClass: '', 45 captionHTML: true, 46 close: true, 47 closeText: '×', 48 swipeClose: true, 49 showCounter: true, 50 fileExt: 'png|jpg|jpeg|gif|webp', 51 animationSlide: true, 52 animationSpeed: 250, 53 preloading: true, 54 enableKeyboard: true, 55 loop: true, 56 rel: false, 57 docClose: true, 58 swipeTolerance: 50, 59 className: 'simple-lightbox', 60 widthRatio: 0.8, 61 heightRatio: 0.9, 62 scaleImageToRatio: false, 63 disableRightClick: false, 64 disableScroll: true, 65 alertError: true, 66 alertErrorMessage: 'Image not found, next image will be loaded', 67 additionalHtml: false, 68 history: true, 69 throttleInterval: 0, 70 doubleTapZoom: 2, 71 maxZoom: 10, 72 htmlClass: 'has-lightbox', 73 rtl: false, 74 fixedClass: 'sl-fixed', 75 fadeSpeed: 300, 76 uniqueImages: true, 77 focus: true, 78 scrollZoom: true, 79 scrollZoomFactor: 0.5, 80 download: false 81 }); 82 _defineProperty(this, "transitionPrefix", void 0); 83 _defineProperty(this, "isPassiveEventsSupported", void 0); 84 _defineProperty(this, "transitionCapable", false); 85 _defineProperty(this, "isTouchDevice", 'ontouchstart' in window); 86 _defineProperty(this, "isAppleDevice", /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)); 87 _defineProperty(this, "initialLocationHash", void 0); 88 _defineProperty(this, "pushStateSupport", 'pushState' in history); 89 _defineProperty(this, "isOpen", false); 90 _defineProperty(this, "isAnimating", false); 91 _defineProperty(this, "isClosing", false); 92 _defineProperty(this, "isFadeIn", false); 93 _defineProperty(this, "urlChangedOnce", false); 94 _defineProperty(this, "hashReseted", false); 95 _defineProperty(this, "historyHasChanges", false); 96 _defineProperty(this, "historyUpdateTimeout", null); 97 _defineProperty(this, "currentImage", void 0); 98 _defineProperty(this, "eventNamespace", 'simplelightbox'); 99 _defineProperty(this, "domNodes", {}); 100 _defineProperty(this, "loadedImages", []); 101 _defineProperty(this, "initialImageIndex", 0); 102 _defineProperty(this, "currentImageIndex", 0); 103 _defineProperty(this, "initialSelector", null); 104 _defineProperty(this, "globalScrollbarWidth", 0); 105 _defineProperty(this, "controlCoordinates", { 106 swipeDiff: 0, 107 swipeYDiff: 0, 108 swipeStart: 0, 109 swipeEnd: 0, 110 swipeYStart: 0, 111 swipeYEnd: 0, 112 mousedown: false, 113 imageLeft: 0, 114 zoomed: false, 115 containerHeight: 0, 116 containerWidth: 0, 117 containerOffsetX: 0, 118 containerOffsetY: 0, 119 imgHeight: 0, 120 imgWidth: 0, 121 capture: false, 122 initialOffsetX: 0, 123 initialOffsetY: 0, 124 initialPointerOffsetX: 0, 125 initialPointerOffsetY: 0, 126 initialPointerOffsetX2: 0, 127 initialPointerOffsetY2: 0, 128 initialScale: 1, 129 initialPinchDistance: 0, 130 pointerOffsetX: 0, 131 pointerOffsetY: 0, 132 pointerOffsetX2: 0, 133 pointerOffsetY2: 0, 134 targetOffsetX: 0, 135 targetOffsetY: 0, 136 targetScale: 0, 137 pinchOffsetX: 0, 138 pinchOffsetY: 0, 139 limitOffsetX: 0, 140 limitOffsetY: 0, 141 scaleDifference: 0, 142 targetPinchDistance: 0, 143 touchCount: 0, 144 doubleTapped: false, 145 touchmoveCount: 0 146 }); 147 this.options = Object.assign(this.defaultOptions, options); 148 this.isPassiveEventsSupported = this.checkPassiveEventsSupport(); 149 if (typeof elements === 'string') { 150 this.initialSelector = elements; 151 this.elements = Array.from(document.querySelectorAll(elements)); 152 } else { 153 this.elements = typeof elements.length !== 'undefined' && elements.length > 0 ? Array.from(elements) : [elements]; 154 } 155 this.relatedElements = []; 156 this.transitionPrefix = this.calculateTransitionPrefix(); 157 this.transitionCapable = this.transitionPrefix !== false; 158 this.initialLocationHash = this.hash; 159 160 // this should be handled by attribute selector IMHO! => 'a[rel=bla]'... 161 if (this.options.rel) { 162 this.elements = this.getRelated(this.options.rel); 163 } 164 if (this.options.uniqueImages) { 165 var imgArr = []; 166 this.elements = Array.from(this.elements).filter(function (element) { 167 var src = element.getAttribute(_this.options.sourceAttr); 168 if (imgArr.indexOf(src) === -1) { 169 imgArr.push(src); 170 return true; 171 } 172 return false; 173 }); 174 } 175 this.createDomNodes(); 176 if (this.options.close) { 177 this.domNodes.wrapper.appendChild(this.domNodes.closeButton); 178 } 179 if (this.options.nav) { 180 this.domNodes.wrapper.appendChild(this.domNodes.navigation); 181 } 182 if (this.options.spinner) { 183 this.domNodes.wrapper.appendChild(this.domNodes.spinner); 184 } 185 this.addEventListener(this.elements, 'click.' + this.eventNamespace, function (event) { 186 if (_this.isValidLink(event.currentTarget)) { 187 event.preventDefault(); 188 if (_this.isAnimating) { 189 return false; 190 } 191 _this.initialImageIndex = _this.elements.indexOf(event.currentTarget); 192 _this.openImage(event.currentTarget); 193 } 194 }); 195 196 // close addEventListener click addEventListener doc 197 if (this.options.docClose) { 198 this.addEventListener(this.domNodes.wrapper, ['click.' + this.eventNamespace, 'touchstart.' + this.eventNamespace], function (event) { 199 if (_this.isOpen && event.target === event.currentTarget) { 200 _this.close(); 201 } 202 }); 203 } 204 205 // disable rightclick 206 if (this.options.disableRightClick) { 207 this.addEventListener(document.body, 'contextmenu.' + this.eventNamespace, function (event) { 208 if (event.target.parentElement.classList.contains("sl-image")) { 209 event.preventDefault(); 210 } 211 }); 212 } 213 214 // keyboard-control 215 if (this.options.enableKeyboard) { 216 this.addEventListener(document.body, 'keyup.' + this.eventNamespace, this.throttle(function (event) { 217 _this.controlCoordinates.swipeDiff = 0; 218 // keyboard control only if lightbox is open 219 220 if (_this.isAnimating && event.key === 'Escape') { 221 _this.currentImage.setAttribute('src', ''); 222 _this.isAnimating = false; 223 _this.close(); 224 return; 225 } 226 if (_this.isOpen) { 227 event.preventDefault(); 228 if (event.key === 'Escape') { 229 _this.close(); 230 } 231 if (!_this.isAnimating && ['ArrowLeft', 'ArrowRight'].indexOf(event.key) > -1) { 232 _this.loadImage(event.key === 'ArrowRight' ? 1 : -1); 233 } 234 } 235 }, this.options.throttleInterval)); 236 } 237 this.addEvents(); 238 } 239 _createClass(SimpleLightbox, [{ 240 key: "checkPassiveEventsSupport", 241 value: function checkPassiveEventsSupport() { 242 // https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection 243 // Test via a getter in the options object to see if the passive property is accessed 244 var supportsPassive = false; 245 try { 246 var opts = Object.defineProperty({}, 'passive', { 247 get: function get() { 248 supportsPassive = true; 249 } 250 }); 251 window.addEventListener("testPassive", null, opts); 252 window.removeEventListener("testPassive", null, opts); 253 } catch (e) {} 254 return supportsPassive; 255 } 256 }, { 257 key: "getCaptionElement", 258 value: function getCaptionElement(elem) { 259 // look at sibling selector 260 if (this.options.captionSelector.startsWith('+')) { 261 var selector = this.options.captionSelector.replace(/^\+/, '').trimStart(); 262 var sibling = elem.nextElementSibling; 263 if (sibling && sibling.matches(selector)) { 264 return sibling; 265 } 266 return false; 267 } else if (this.options.captionSelector.startsWith('>')) { 268 var _selector = this.options.captionSelector.replace(/^>/, '').trimStart(); 269 return elem.querySelector(_selector); 270 } else { 271 return elem.querySelector(this.options.captionSelector); 272 } 273 } 274 }, { 275 key: "generateQuerySelector", 276 value: function generateQuerySelector(elem) { 277 var tagName = elem.tagName, 278 id = elem.id, 279 className = elem.className, 280 parentNode = elem.parentNode; 281 if (tagName === 'HTML') return 'HTML'; 282 var str = tagName; 283 str += id !== '' ? "#".concat(id) : ''; 284 if (className) { 285 var classes = className.trim().split(/\s/); 286 for (var i = 0; i < classes.length; i++) { 287 str += ".".concat(classes[i]); 288 } 289 } 290 var childIndex = 1; 291 for (var e = elem; e.previousElementSibling; e = e.previousElementSibling) { 292 childIndex += 1; 293 } 294 str += ":nth-child(".concat(childIndex, ")"); 295 return "".concat(this.generateQuerySelector(parentNode), " > ").concat(str); 296 } 297 }, { 298 key: "createDomNodes", 299 value: function createDomNodes() { 300 this.domNodes.overlay = document.createElement('div'); 301 this.domNodes.overlay.classList.add('sl-overlay'); 302 this.domNodes.overlay.dataset.opacityTarget = this.options.overlayOpacity; 303 this.domNodes.closeButton = document.createElement('button'); 304 this.domNodes.closeButton.classList.add('sl-close'); 305 this.domNodes.closeButton.innerHTML = this.options.closeText; 306 this.domNodes.spinner = document.createElement('div'); 307 this.domNodes.spinner.classList.add('sl-spinner'); 308 this.domNodes.spinner.innerHTML = '<div></div>'; 309 this.domNodes.navigation = document.createElement('div'); 310 this.domNodes.navigation.classList.add('sl-navigation'); 311 this.domNodes.navigation.innerHTML = "<button class=\"sl-prev\">".concat(this.options.navText[0], "</button><button class=\"sl-next\">").concat(this.options.navText[1], "</button>"); 312 this.domNodes.counter = document.createElement('div'); 313 this.domNodes.counter.classList.add('sl-counter'); 314 this.domNodes.counter.innerHTML = '<span class="sl-current"></span>/<span class="sl-total"></span>'; 315 this.domNodes.download = document.createElement('div'); 316 this.domNodes.download.classList.add('sl-download'); 317 this.domNodes.downloadLink = document.createElement('a'); 318 this.domNodes.downloadLink.setAttribute('download', ''); 319 this.domNodes.downloadLink.textContent = this.options.download; 320 this.domNodes.download.appendChild(this.domNodes.downloadLink); 321 this.domNodes.caption = document.createElement('div'); 322 this.domNodes.caption.classList.add('sl-caption', 'pos-' + this.options.captionPosition); 323 if (this.options.captionClass) { 324 var _this$domNodes$captio; 325 var captionClasses = this.options.captionClass.split(/[\s,]+/); 326 (_this$domNodes$captio = this.domNodes.caption.classList).add.apply(_this$domNodes$captio, _toConsumableArray(captionClasses)); 327 } 328 this.domNodes.image = document.createElement('div'); 329 this.domNodes.image.classList.add('sl-image'); 330 this.domNodes.wrapper = document.createElement('div'); 331 this.domNodes.wrapper.classList.add('sl-wrapper'); 332 this.domNodes.wrapper.setAttribute('tabindex', -1); 333 this.domNodes.wrapper.setAttribute('role', 'dialog'); 334 this.domNodes.wrapper.setAttribute('aria-hidden', false); 335 if (this.options.className) { 336 this.domNodes.wrapper.classList.add(this.options.className); 337 } 338 if (this.options.rtl) { 339 this.domNodes.wrapper.classList.add('sl-dir-rtl'); 340 } 341 } 342 }, { 343 key: "throttle", 344 value: function throttle(func, limit) { 345 var inThrottle; 346 return function () { 347 if (!inThrottle) { 348 func.apply(this, arguments); 349 inThrottle = true; 350 setTimeout(function () { 351 return inThrottle = false; 352 }, limit); 353 } 354 }; 355 } 356 }, { 357 key: "isValidLink", 358 value: function isValidLink(element) { 359 return !this.options.fileExt || element.getAttribute(this.options.sourceAttr) && new RegExp('(' + this.options.fileExt + ')($|\\?.*$)', 'i').test(element.getAttribute(this.options.sourceAttr)); 360 } 361 }, { 362 key: "calculateTransitionPrefix", 363 value: function calculateTransitionPrefix() { 364 var s = (document.body || document.documentElement).style; 365 return 'transition' in s ? '' : 'WebkitTransition' in s ? '-webkit-' : 'MozTransition' in s ? '-moz-' : 'OTransition' in s ? '-o' : false; 366 } 367 }, { 368 key: "getScrollbarWidth", 369 value: function getScrollbarWidth() { 370 var scrollbarWidth = 0; 371 var scrollDiv = document.createElement('div'); 372 scrollDiv.classList.add('sl-scrollbar-measure'); 373 document.body.appendChild(scrollDiv); 374 scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth; 375 document.body.removeChild(scrollDiv); 376 return scrollbarWidth; 377 } 378 }, { 379 key: "toggleScrollbar", 380 value: function toggleScrollbar(type) { 381 var scrollbarWidth = 0; 382 var fixedElements = [].slice.call(document.querySelectorAll('.' + this.options.fixedClass)); 383 if (type === 'hide') { 384 var fullWindowWidth = window.innerWidth; 385 if (!fullWindowWidth) { 386 var documentElementRect = document.documentElement.getBoundingClientRect(); 387 fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left); 388 } 389 if (document.body.clientWidth < fullWindowWidth || this.isAppleDevice) { 390 var paddingRight = parseInt(window.getComputedStyle(document.body).paddingRight || 0, 10); 391 scrollbarWidth = this.getScrollbarWidth(); 392 document.body.dataset.originalPaddingRight = paddingRight; 393 if (scrollbarWidth > 0 || scrollbarWidth == 0 && this.isAppleDevice) { 394 document.body.classList.add('hidden-scroll'); 395 document.body.style.paddingRight = paddingRight + scrollbarWidth + 'px'; 396 fixedElements.forEach(function (element) { 397 var actualPadding = element.style.paddingRight; 398 var calculatedPadding = window.getComputedStyle(element)['padding-right']; 399 element.dataset.originalPaddingRight = actualPadding; 400 element.style.paddingRight = "".concat(parseFloat(calculatedPadding) + scrollbarWidth, "px"); 401 }); 402 } 403 } 404 } else { 405 document.body.classList.remove('hidden-scroll'); 406 document.body.style.paddingRight = document.body.dataset.originalPaddingRight + 'px'; 407 fixedElements.forEach(function (element) { 408 var padding = element.dataset.originalPaddingRight; 409 if (typeof padding !== 'undefined') { 410 element.style.paddingRight = padding; 411 } 412 }); 413 } 414 return scrollbarWidth; 415 } 416 }, { 417 key: "close", 418 value: function close() { 419 var _this2 = this; 420 if (!this.isOpen || this.isAnimating || this.isClosing) { 421 return false; 422 } 423 this.isClosing = true; 424 var element = this.relatedElements[this.currentImageIndex]; 425 element.dispatchEvent(new Event('close.simplelightbox')); 426 if (this.options.history) { 427 this.historyHasChanges = false; 428 if (!this.hashReseted) { 429 this.resetHash(); 430 } 431 } 432 this.removeEventListener(document, 'focusin.' + this.eventNamespace); 433 this.fadeOut(this.domNodes.overlay, this.options.fadeSpeed); 434 this.fadeOut(document.querySelectorAll('.sl-image img, .sl-close, .sl-navigation, .sl-image .sl-caption, .sl-counter'), this.options.fadeSpeed, function () { 435 if (_this2.options.disableScroll) { 436 _this2.toggleScrollbar('show'); 437 } 438 if (_this2.options.htmlClass && _this2.options.htmlClass !== '') { 439 document.querySelector('html').classList.remove(_this2.options.htmlClass); 440 } 441 document.body.removeChild(_this2.domNodes.wrapper); 442 if (_this2.options.overlay) { 443 document.body.removeChild(_this2.domNodes.overlay); 444 } 445 _this2.domNodes.additionalHtml = null; 446 _this2.domNodes.download = null; 447 element.dispatchEvent(new Event('closed.simplelightbox')); 448 _this2.isClosing = false; 449 }); 450 this.currentImage = null; 451 this.isOpen = false; 452 this.isAnimating = false; 453 454 // reset touchcontrol coordinates 455 for (var key in this.controlCoordinates) { 456 this.controlCoordinates[key] = 0; 457 } 458 this.controlCoordinates.mousedown = false; 459 this.controlCoordinates.zoomed = false; 460 this.controlCoordinates.capture = false; 461 this.controlCoordinates.initialScale = this.minMax(1, 1, this.options.maxZoom); 462 this.controlCoordinates.doubleTapped = false; 463 } 464 }, { 465 key: "hash", 466 get: function get() { 467 return window.location.hash.substring(1); 468 } 469 }, { 470 key: "preload", 471 value: function preload() { 472 var _this3 = this; 473 var index = this.currentImageIndex, 474 length = this.relatedElements.length, 475 next = index + 1 < 0 ? length - 1 : index + 1 >= length - 1 ? 0 : index + 1, 476 prev = index - 1 < 0 ? length - 1 : index - 1 >= length - 1 ? 0 : index - 1, 477 nextImage = new Image(), 478 prevImage = new Image(); 479 nextImage.addEventListener('load', function (event) { 480 var src = event.target.getAttribute('src'); 481 if (_this3.loadedImages.indexOf(src) === -1) { 482 //is this condition even required... setting multiple times will not change usage... 483 _this3.loadedImages.push(src); 484 } 485 _this3.relatedElements[index].dispatchEvent(new Event('nextImageLoaded.' + _this3.eventNamespace)); 486 }); 487 nextImage.setAttribute('src', this.relatedElements[next].getAttribute(this.options.sourceAttr)); 488 prevImage.addEventListener('load', function (event) { 489 var src = event.target.getAttribute('src'); 490 if (_this3.loadedImages.indexOf(src) === -1) { 491 _this3.loadedImages.push(src); 492 } 493 _this3.relatedElements[index].dispatchEvent(new Event('prevImageLoaded.' + _this3.eventNamespace)); 494 }); 495 prevImage.setAttribute('src', this.relatedElements[prev].getAttribute(this.options.sourceAttr)); 496 } 497 }, { 498 key: "loadImage", 499 value: function loadImage(direction) { 500 var _this4 = this; 501 var slideDirection = direction; 502 if (this.options.rtl) { 503 direction = -direction; 504 } 505 this.relatedElements[this.currentImageIndex].dispatchEvent(new Event('change.' + this.eventNamespace)); 506 this.relatedElements[this.currentImageIndex].dispatchEvent(new Event((direction === 1 ? 'next' : 'prev') + '.' + this.eventNamespace)); 507 var newIndex = this.currentImageIndex + direction; 508 if (this.isAnimating || (newIndex < 0 || newIndex >= this.relatedElements.length) && this.options.loop === false) { 509 return false; 510 } 511 this.currentImageIndex = newIndex < 0 ? this.relatedElements.length - 1 : newIndex > this.relatedElements.length - 1 ? 0 : newIndex; 512 this.domNodes.counter.querySelector('.sl-current').innerHTML = this.currentImageIndex + 1; 513 if (this.options.animationSlide) { 514 this.slide(this.options.animationSpeed / 1000, -100 * slideDirection - this.controlCoordinates.swipeDiff + 'px'); 515 } 516 this.fadeOut(this.domNodes.image, this.options.fadeSpeed, function () { 517 _this4.isAnimating = true; 518 if (!_this4.isClosing) { 519 setTimeout(function () { 520 var element = _this4.relatedElements[_this4.currentImageIndex]; 521 if (!_this4.currentImage) return; 522 _this4.currentImage.setAttribute('src', element.getAttribute(_this4.options.sourceAttr)); 523 if (_this4.loadedImages.indexOf(element.getAttribute(_this4.options.sourceAttr)) === -1) { 524 _this4.show(_this4.domNodes.spinner); 525 } 526 if (_this4.domNodes.image.contains(_this4.domNodes.caption)) { 527 _this4.domNodes.image.removeChild(_this4.domNodes.caption); 528 } 529 _this4.adjustImage(slideDirection); 530 if (_this4.options.preloading) _this4.preload(); 531 }, 100); 532 } else { 533 _this4.isAnimating = false; 534 } 535 }); 536 } 537 }, { 538 key: "adjustImage", 539 value: function adjustImage(direction) { 540 var _this5 = this; 541 if (!this.currentImage) { 542 return false; 543 } 544 var tmpImage = new Image(), 545 windowWidth = window.innerWidth * this.options.widthRatio, 546 windowHeight = window.innerHeight * this.options.heightRatio; 547 tmpImage.setAttribute('src', this.currentImage.getAttribute('src')); 548 this.currentImage.dataset.scale = 1; 549 this.currentImage.dataset.translateX = 0; 550 this.currentImage.dataset.translateY = 0; 551 this.zoomPanElement(0, 0, 1); 552 tmpImage.addEventListener('error', function (event) { 553 _this5.relatedElements[_this5.currentImageIndex].dispatchEvent(new Event('error.' + _this5.eventNamespace)); 554 _this5.isAnimating = false; 555 _this5.isOpen = true; 556 _this5.domNodes.spinner.style.display = 'none'; 557 var dirIsDefined = direction === 1 || direction === -1; 558 if (_this5.initialImageIndex === _this5.currentImageIndex && dirIsDefined) { 559 return _this5.close(); 560 } 561 if (_this5.options.alertError) { 562 alert(_this5.options.alertErrorMessage); 563 } 564 _this5.loadImage(dirIsDefined ? direction : 1); 565 }); 566 tmpImage.addEventListener('load', function (event) { 567 if (typeof direction !== 'undefined') { 568 _this5.relatedElements[_this5.currentImageIndex].dispatchEvent(new Event('changed.' + _this5.eventNamespace)); 569 _this5.relatedElements[_this5.currentImageIndex].dispatchEvent(new Event((direction === 1 ? 'nextDone' : 'prevDone') + '.' + _this5.eventNamespace)); 570 } 571 572 // history 573 if (_this5.options.history) { 574 _this5.updateURL(); 575 } 576 if (_this5.loadedImages.indexOf(_this5.currentImage.getAttribute('src')) === -1) { 577 _this5.loadedImages.push(_this5.currentImage.getAttribute('src')); 578 } 579 var imageWidth = event.target.width, 580 imageHeight = event.target.height; 581 if (_this5.options.scaleImageToRatio || imageWidth > windowWidth || imageHeight > windowHeight) { 582 var ratio = imageWidth / imageHeight > windowWidth / windowHeight ? imageWidth / windowWidth : imageHeight / windowHeight; 583 imageWidth /= ratio; 584 imageHeight /= ratio; 585 } 586 _this5.domNodes.image.style.top = (window.innerHeight - imageHeight) / 2 + 'px'; 587 _this5.domNodes.image.style.left = (window.innerWidth - imageWidth - _this5.globalScrollbarWidth) / 2 + 'px'; 588 _this5.domNodes.image.style.width = imageWidth + 'px'; 589 _this5.domNodes.image.style.height = imageHeight + 'px'; 590 _this5.domNodes.spinner.style.display = 'none'; 591 if (_this5.options.focus) { 592 _this5.forceFocus(); 593 } 594 _this5.fadeIn(_this5.currentImage, _this5.options.fadeSpeed, function () { 595 if (_this5.options.focus) { 596 _this5.domNodes.wrapper.focus(); 597 } 598 }); 599 _this5.isOpen = true; 600 var captionContainer, captionText; 601 if (typeof _this5.options.captionSelector === 'string') { 602 captionContainer = _this5.options.captionSelector === 'self' ? _this5.relatedElements[_this5.currentImageIndex] : _this5.getCaptionElement(_this5.relatedElements[_this5.currentImageIndex]); 603 } else if (typeof _this5.options.captionSelector === 'function') { 604 captionContainer = _this5.options.captionSelector(_this5.relatedElements[_this5.currentImageIndex]); 605 } 606 if (_this5.options.captions && captionContainer) { 607 if (_this5.options.captionType === 'data') { 608 captionText = captionContainer.dataset[_this5.options.captionsData]; 609 } else if (_this5.options.captionType === 'text') { 610 captionText = captionContainer.innerHTML; 611 } else { 612 captionText = captionContainer.getAttribute(_this5.options.captionsData); 613 } 614 } 615 if (!_this5.options.loop) { 616 if (_this5.currentImageIndex === 0) { 617 _this5.hide(_this5.domNodes.navigation.querySelector('.sl-prev')); 618 } 619 if (_this5.currentImageIndex >= _this5.relatedElements.length - 1) { 620 _this5.hide(_this5.domNodes.navigation.querySelector('.sl-next')); 621 } 622 if (_this5.currentImageIndex > 0) { 623 _this5.show(_this5.domNodes.navigation.querySelector('.sl-prev')); 624 } 625 if (_this5.currentImageIndex < _this5.relatedElements.length - 1) { 626 _this5.show(_this5.domNodes.navigation.querySelector('.sl-next')); 627 } 628 } else { 629 if (_this5.relatedElements.length === 1) { 630 _this5.hide(_this5.domNodes.navigation.querySelectorAll('.sl-prev, .sl-next')); 631 } else { 632 _this5.show(_this5.domNodes.navigation.querySelectorAll('.sl-prev, .sl-next')); 633 } 634 } 635 if (direction === 1 || direction === -1) { 636 if (_this5.options.animationSlide) { 637 _this5.slide(0, 100 * direction + 'px'); 638 setTimeout(function () { 639 _this5.slide(_this5.options.animationSpeed / 1000, 0 + 'px'); 640 }, 50); 641 } 642 _this5.fadeIn(_this5.domNodes.image, _this5.options.fadeSpeed, function () { 643 _this5.isAnimating = false; 644 _this5.setCaption(captionText, imageWidth); 645 }); 646 } else { 647 _this5.isAnimating = false; 648 _this5.setCaption(captionText, imageWidth); 649 } 650 if (_this5.options.additionalHtml && !_this5.domNodes.additionalHtml) { 651 _this5.domNodes.additionalHtml = document.createElement('div'); 652 _this5.domNodes.additionalHtml.classList.add('sl-additional-html'); 653 _this5.domNodes.additionalHtml.innerHTML = _this5.options.additionalHtml; 654 _this5.domNodes.image.appendChild(_this5.domNodes.additionalHtml); 655 } 656 if (_this5.options.download) { 657 _this5.domNodes.downloadLink.setAttribute('href', _this5.currentImage.getAttribute('src')); 658 } 659 }); 660 } 661 }, { 662 key: "zoomPanElement", 663 value: function zoomPanElement(targetOffsetX, targetOffsetY, targetScale) { 664 this.currentImage.style[this.transitionPrefix + 'transform'] = 'translate(' + targetOffsetX + ',' + targetOffsetY + ') scale(' + targetScale + ')'; 665 } 666 }, { 667 key: "minMax", 668 value: function minMax(value, min, max) { 669 return value < min ? min : value > max ? max : value; 670 } 671 }, { 672 key: "setZoomData", 673 value: function setZoomData(initialScale, targetOffsetX, targetOffsetY) { 674 this.currentImage.dataset.scale = initialScale; 675 this.currentImage.dataset.translateX = targetOffsetX; 676 this.currentImage.dataset.translateY = targetOffsetY; 677 } 678 }, { 679 key: "hashchangeHandler", 680 value: function hashchangeHandler() { 681 if (this.isOpen && this.hash === this.initialLocationHash) { 682 this.hashReseted = true; 683 this.close(); 684 } 685 } 686 }, { 687 key: "addEvents", 688 value: function addEvents() { 689 var _this6 = this; 690 // resize/responsive 691 this.addEventListener(window, 'resize.' + this.eventNamespace, function (event) { 692 //this.adjustImage.bind(this) 693 if (_this6.isOpen) { 694 _this6.adjustImage(); 695 } 696 }); 697 this.addEventListener(this.domNodes.closeButton, ['click.' + this.eventNamespace, 'touchstart.' + this.eventNamespace], this.close.bind(this)); 698 if (this.options.history) { 699 setTimeout(function () { 700 _this6.addEventListener(window, 'hashchange.' + _this6.eventNamespace, function (event) { 701 if (_this6.isOpen) { 702 _this6.hashchangeHandler(); 703 } 704 }); 705 }, 40); 706 } 707 this.addEventListener(this.domNodes.navigation.getElementsByTagName('button'), 'click.' + this.eventNamespace, function (event) { 708 if (!event.currentTarget.tagName.match(/button/i)) { 709 return true; 710 } 711 event.preventDefault(); 712 _this6.controlCoordinates.swipeDiff = 0; 713 _this6.loadImage(event.currentTarget.classList.contains('sl-next') ? 1 : -1); 714 }); 715 if (this.options.scrollZoom) { 716 var scale = 1; 717 this.addEventListener(this.domNodes.image, ['mousewheel', 'DOMMouseScroll'], function (event) { 718 if (_this6.controlCoordinates.mousedown || _this6.isAnimating || _this6.isClosing || !_this6.isOpen) { 719 return true; 720 } 721 if (_this6.controlCoordinates.containerHeight == 0) { 722 _this6.controlCoordinates.containerHeight = _this6.getDimensions(_this6.domNodes.image).height; 723 _this6.controlCoordinates.containerWidth = _this6.getDimensions(_this6.domNodes.image).width; 724 _this6.controlCoordinates.imgHeight = _this6.getDimensions(_this6.currentImage).height; 725 _this6.controlCoordinates.imgWidth = _this6.getDimensions(_this6.currentImage).width; 726 _this6.controlCoordinates.containerOffsetX = _this6.domNodes.image.offsetLeft; 727 _this6.controlCoordinates.containerOffsetY = _this6.domNodes.image.offsetTop; 728 _this6.controlCoordinates.initialOffsetX = parseFloat(_this6.currentImage.dataset.translateX); 729 _this6.controlCoordinates.initialOffsetY = parseFloat(_this6.currentImage.dataset.translateY); 730 } 731 // event.preventDefault(); 732 733 var delta = event.delta || event.wheelDelta; 734 if (delta === undefined) { 735 //we are on firefox 736 delta = event.detail; 737 } 738 delta = Math.max(-1, Math.min(1, delta)); // cap the delta to [-1,1] for cross browser consistency 739 740 // apply zoom 741 scale += delta * _this6.options.scrollZoomFactor * scale; 742 scale = Math.max(1, Math.min(_this6.options.maxZoom, scale)); 743 _this6.controlCoordinates.targetScale = scale; 744 var scrollTopPos = document.documentElement.scrollTop || document.body.scrollTop; 745 _this6.controlCoordinates.pinchOffsetX = event.pageX; 746 _this6.controlCoordinates.pinchOffsetY = event.pageY - scrollTopPos || 0; // need to substract the scroll position 747 748 _this6.controlCoordinates.limitOffsetX = (_this6.controlCoordinates.imgWidth * _this6.controlCoordinates.targetScale - _this6.controlCoordinates.containerWidth) / 2; 749 _this6.controlCoordinates.limitOffsetY = (_this6.controlCoordinates.imgHeight * _this6.controlCoordinates.targetScale - _this6.controlCoordinates.containerHeight) / 2; 750 _this6.controlCoordinates.scaleDifference = _this6.controlCoordinates.targetScale - _this6.controlCoordinates.initialScale; 751 _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); 752 _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); 753 _this6.zoomPanElement(_this6.controlCoordinates.targetOffsetX + "px", _this6.controlCoordinates.targetOffsetY + "px", _this6.controlCoordinates.targetScale); 754 if (_this6.controlCoordinates.targetScale > 1) { 755 _this6.controlCoordinates.zoomed = true; 756 if ((!_this6.domNodes.caption.style.opacity || _this6.domNodes.caption.style.opacity > 0) && _this6.domNodes.caption.style.display !== 'none') { 757 _this6.fadeOut(_this6.domNodes.caption, _this6.options.fadeSpeed); 758 } 759 } else { 760 if (_this6.controlCoordinates.initialScale === 1) { 761 _this6.controlCoordinates.zoomed = false; 762 if (_this6.domNodes.caption.style.display === 'none') { 763 _this6.fadeIn(_this6.domNodes.caption, _this6.options.fadeSpeed); 764 } 765 } 766 _this6.controlCoordinates.initialPinchDistance = null; 767 _this6.controlCoordinates.capture = false; 768 } 769 _this6.controlCoordinates.initialPinchDistance = _this6.controlCoordinates.targetPinchDistance; 770 _this6.controlCoordinates.initialScale = _this6.controlCoordinates.targetScale; 771 _this6.controlCoordinates.initialOffsetX = _this6.controlCoordinates.targetOffsetX; 772 _this6.controlCoordinates.initialOffsetY = _this6.controlCoordinates.targetOffsetY; 773 _this6.setZoomData(_this6.controlCoordinates.targetScale, _this6.controlCoordinates.targetOffsetX, _this6.controlCoordinates.targetOffsetY); 774 _this6.zoomPanElement(_this6.controlCoordinates.targetOffsetX + "px", _this6.controlCoordinates.targetOffsetY + "px", _this6.controlCoordinates.targetScale); 775 }); 776 } 777 this.addEventListener(this.domNodes.image, ['touchstart.' + this.eventNamespace, 'mousedown.' + this.eventNamespace], function (event) { 778 if (event.target.tagName === 'A' && event.type === 'touchstart') { 779 return true; 780 } 781 if (event.type === 'mousedown') { 782 event.preventDefault(); 783 _this6.controlCoordinates.initialPointerOffsetX = event.clientX; 784 _this6.controlCoordinates.initialPointerOffsetY = event.clientY; 785 _this6.controlCoordinates.containerHeight = _this6.getDimensions(_this6.domNodes.image).height; 786 _this6.controlCoordinates.containerWidth = _this6.getDimensions(_this6.domNodes.image).width; 787 _this6.controlCoordinates.imgHeight = _this6.getDimensions(_this6.currentImage).height; 788 _this6.controlCoordinates.imgWidth = _this6.getDimensions(_this6.currentImage).width; 789 _this6.controlCoordinates.containerOffsetX = _this6.domNodes.image.offsetLeft; 790 _this6.controlCoordinates.containerOffsetY = _this6.domNodes.image.offsetTop; 791 _this6.controlCoordinates.initialOffsetX = parseFloat(_this6.currentImage.dataset.translateX); 792 _this6.controlCoordinates.initialOffsetY = parseFloat(_this6.currentImage.dataset.translateY); 793 _this6.controlCoordinates.capture = true; 794 } else { 795 _this6.controlCoordinates.touchCount = event.touches.length; 796 _this6.controlCoordinates.initialPointerOffsetX = event.touches[0].clientX; 797 _this6.controlCoordinates.initialPointerOffsetY = event.touches[0].clientY; 798 _this6.controlCoordinates.containerHeight = _this6.getDimensions(_this6.domNodes.image).height; 799 _this6.controlCoordinates.containerWidth = _this6.getDimensions(_this6.domNodes.image).width; 800 _this6.controlCoordinates.imgHeight = _this6.getDimensions(_this6.currentImage).height; 801 _this6.controlCoordinates.imgWidth = _this6.getDimensions(_this6.currentImage).width; 802 _this6.controlCoordinates.containerOffsetX = _this6.domNodes.image.offsetLeft; 803 _this6.controlCoordinates.containerOffsetY = _this6.domNodes.image.offsetTop; 804 if (_this6.controlCoordinates.touchCount === 1) /* Single touch */{ 805 if (!_this6.controlCoordinates.doubleTapped) { 806 _this6.controlCoordinates.doubleTapped = true; 807 setTimeout(function () { 808 _this6.controlCoordinates.doubleTapped = false; 809 }, 300); 810 } else { 811 _this6.currentImage.classList.add('sl-transition'); 812 if (!_this6.controlCoordinates.zoomed) { 813 _this6.controlCoordinates.initialScale = _this6.options.doubleTapZoom; 814 _this6.setZoomData(_this6.controlCoordinates.initialScale, 0, 0); 815 _this6.zoomPanElement(0 + "px", 0 + "px", _this6.controlCoordinates.initialScale); 816 if ((!_this6.domNodes.caption.style.opacity || _this6.domNodes.caption.style.opacity > 0) && _this6.domNodes.caption.style.display !== 'none') { 817 _this6.fadeOut(_this6.domNodes.caption, _this6.options.fadeSpeed); 818 } 819 _this6.controlCoordinates.zoomed = true; 820 } else { 821 _this6.controlCoordinates.initialScale = 1; 822 _this6.setZoomData(_this6.controlCoordinates.initialScale, 0, 0); 823 _this6.zoomPanElement(0 + "px", 0 + "px", _this6.controlCoordinates.initialScale); 824 _this6.controlCoordinates.zoomed = false; 825 } 826 setTimeout(function () { 827 if (_this6.currentImage) { 828 _this6.currentImage.classList.remove('sl-transition'); 829 } 830 }, 200); 831 return false; 832 } 833 _this6.controlCoordinates.initialOffsetX = parseFloat(_this6.currentImage.dataset.translateX); 834 _this6.controlCoordinates.initialOffsetY = parseFloat(_this6.currentImage.dataset.translateY); 835 } else if (_this6.controlCoordinates.touchCount === 2) /* Pinch */{ 836 _this6.controlCoordinates.initialPointerOffsetX2 = event.touches[1].clientX; 837 _this6.controlCoordinates.initialPointerOffsetY2 = event.touches[1].clientY; 838 _this6.controlCoordinates.initialOffsetX = parseFloat(_this6.currentImage.dataset.translateX); 839 _this6.controlCoordinates.initialOffsetY = parseFloat(_this6.currentImage.dataset.translateY); 840 _this6.controlCoordinates.pinchOffsetX = (_this6.controlCoordinates.initialPointerOffsetX + _this6.controlCoordinates.initialPointerOffsetX2) / 2; 841 _this6.controlCoordinates.pinchOffsetY = (_this6.controlCoordinates.initialPointerOffsetY + _this6.controlCoordinates.initialPointerOffsetY2) / 2; 842 _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)); 843 } 844 _this6.controlCoordinates.capture = true; 845 } 846 if (_this6.controlCoordinates.mousedown) return true; 847 if (_this6.transitionCapable) { 848 _this6.controlCoordinates.imageLeft = parseInt(_this6.domNodes.image.style.left, 10); 849 } 850 _this6.controlCoordinates.mousedown = true; 851 _this6.controlCoordinates.swipeDiff = 0; 852 _this6.controlCoordinates.swipeYDiff = 0; 853 _this6.controlCoordinates.swipeStart = event.pageX || event.touches[0].pageX; 854 _this6.controlCoordinates.swipeYStart = event.pageY || event.touches[0].pageY; 855 return false; 856 }); 857 this.addEventListener(this.domNodes.image, ['touchmove.' + this.eventNamespace, 'mousemove.' + this.eventNamespace, 'MSPointerMove'], function (event) { 858 if (!_this6.controlCoordinates.mousedown) { 859 return true; 860 } 861 if (event.type === 'touchmove') { 862 if (_this6.controlCoordinates.capture === false) { 863 return false; 864 } 865 _this6.controlCoordinates.pointerOffsetX = event.touches[0].clientX; 866 _this6.controlCoordinates.pointerOffsetY = event.touches[0].clientY; 867 _this6.controlCoordinates.touchCount = event.touches.length; 868 _this6.controlCoordinates.touchmoveCount++; 869 if (_this6.controlCoordinates.touchCount > 1) /* Pinch */{ 870 _this6.controlCoordinates.pointerOffsetX2 = event.touches[1].clientX; 871 _this6.controlCoordinates.pointerOffsetY2 = event.touches[1].clientY; 872 _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)); 873 if (_this6.controlCoordinates.initialPinchDistance === null) { 874 _this6.controlCoordinates.initialPinchDistance = _this6.controlCoordinates.targetPinchDistance; 875 } 876 if (Math.abs(_this6.controlCoordinates.initialPinchDistance - _this6.controlCoordinates.targetPinchDistance) >= 1) { 877 /* Initialize helpers */ 878 _this6.controlCoordinates.targetScale = _this6.minMax(_this6.controlCoordinates.targetPinchDistance / _this6.controlCoordinates.initialPinchDistance * _this6.controlCoordinates.initialScale, 1, _this6.options.maxZoom); 879 _this6.controlCoordinates.limitOffsetX = (_this6.controlCoordinates.imgWidth * _this6.controlCoordinates.targetScale - _this6.controlCoordinates.containerWidth) / 2; 880 _this6.controlCoordinates.limitOffsetY = (_this6.controlCoordinates.imgHeight * _this6.controlCoordinates.targetScale - _this6.controlCoordinates.containerHeight) / 2; 881 _this6.controlCoordinates.scaleDifference = _this6.controlCoordinates.targetScale - _this6.controlCoordinates.initialScale; 882 _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); 883 _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); 884 _this6.zoomPanElement(_this6.controlCoordinates.targetOffsetX + "px", _this6.controlCoordinates.targetOffsetY + "px", _this6.controlCoordinates.targetScale); 885 if (_this6.controlCoordinates.targetScale > 1) { 886 _this6.controlCoordinates.zoomed = true; 887 if ((!_this6.domNodes.caption.style.opacity || _this6.domNodes.caption.style.opacity > 0) && _this6.domNodes.caption.style.display !== 'none') { 888 _this6.fadeOut(_this6.domNodes.caption, _this6.options.fadeSpeed); 889 } 890 } 891 _this6.controlCoordinates.initialPinchDistance = _this6.controlCoordinates.targetPinchDistance; 892 _this6.controlCoordinates.initialScale = _this6.controlCoordinates.targetScale; 893 _this6.controlCoordinates.initialOffsetX = _this6.controlCoordinates.targetOffsetX; 894 _this6.controlCoordinates.initialOffsetY = _this6.controlCoordinates.targetOffsetY; 895 } 896 } else { 897 _this6.controlCoordinates.targetScale = _this6.controlCoordinates.initialScale; 898 _this6.controlCoordinates.limitOffsetX = (_this6.controlCoordinates.imgWidth * _this6.controlCoordinates.targetScale - _this6.controlCoordinates.containerWidth) / 2; 899 _this6.controlCoordinates.limitOffsetY = (_this6.controlCoordinates.imgHeight * _this6.controlCoordinates.targetScale - _this6.controlCoordinates.containerHeight) / 2; 900 _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); 901 _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); 902 if (Math.abs(_this6.controlCoordinates.targetOffsetX) === Math.abs(_this6.controlCoordinates.limitOffsetX)) { 903 _this6.controlCoordinates.initialOffsetX = _this6.controlCoordinates.targetOffsetX; 904 _this6.controlCoordinates.initialPointerOffsetX = _this6.controlCoordinates.pointerOffsetX; 905 } 906 if (Math.abs(_this6.controlCoordinates.targetOffsetY) === Math.abs(_this6.controlCoordinates.limitOffsetY)) { 907 _this6.controlCoordinates.initialOffsetY = _this6.controlCoordinates.targetOffsetY; 908 _this6.controlCoordinates.initialPointerOffsetY = _this6.controlCoordinates.pointerOffsetY; 909 } 910 _this6.setZoomData(_this6.controlCoordinates.initialScale, _this6.controlCoordinates.targetOffsetX, _this6.controlCoordinates.targetOffsetY); 911 _this6.zoomPanElement(_this6.controlCoordinates.targetOffsetX + "px", _this6.controlCoordinates.targetOffsetY + "px", _this6.controlCoordinates.targetScale); 912 } 913 } 914 915 /* Mouse Move implementation */ 916 if (event.type === 'mousemove' && _this6.controlCoordinates.mousedown) { 917 if (event.type == 'touchmove') return true; 918 event.preventDefault(); 919 if (_this6.controlCoordinates.capture === false) return false; 920 _this6.controlCoordinates.pointerOffsetX = event.clientX; 921 _this6.controlCoordinates.pointerOffsetY = event.clientY; 922 _this6.controlCoordinates.targetScale = _this6.controlCoordinates.initialScale; 923 _this6.controlCoordinates.limitOffsetX = (_this6.controlCoordinates.imgWidth * _this6.controlCoordinates.targetScale - _this6.controlCoordinates.containerWidth) / 2; 924 _this6.controlCoordinates.limitOffsetY = (_this6.controlCoordinates.imgHeight * _this6.controlCoordinates.targetScale - _this6.controlCoordinates.containerHeight) / 2; 925 _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); 926 _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); 927 if (Math.abs(_this6.controlCoordinates.targetOffsetX) === Math.abs(_this6.controlCoordinates.limitOffsetX)) { 928 _this6.controlCoordinates.initialOffsetX = _this6.controlCoordinates.targetOffsetX; 929 _this6.controlCoordinates.initialPointerOffsetX = _this6.controlCoordinates.pointerOffsetX; 930 } 931 if (Math.abs(_this6.controlCoordinates.targetOffsetY) === Math.abs(_this6.controlCoordinates.limitOffsetY)) { 932 _this6.controlCoordinates.initialOffsetY = _this6.controlCoordinates.targetOffsetY; 933 _this6.controlCoordinates.initialPointerOffsetY = _this6.controlCoordinates.pointerOffsetY; 934 } 935 _this6.setZoomData(_this6.controlCoordinates.initialScale, _this6.controlCoordinates.targetOffsetX, _this6.controlCoordinates.targetOffsetY); 936 _this6.zoomPanElement(_this6.controlCoordinates.targetOffsetX + "px", _this6.controlCoordinates.targetOffsetY + "px", _this6.controlCoordinates.targetScale); 937 } 938 if (!_this6.controlCoordinates.zoomed) { 939 _this6.controlCoordinates.swipeEnd = event.pageX || event.touches[0].pageX; 940 _this6.controlCoordinates.swipeYEnd = event.pageY || event.touches[0].pageY; 941 _this6.controlCoordinates.swipeDiff = _this6.controlCoordinates.swipeStart - _this6.controlCoordinates.swipeEnd; 942 _this6.controlCoordinates.swipeYDiff = _this6.controlCoordinates.swipeYStart - _this6.controlCoordinates.swipeYEnd; 943 if (_this6.options.animationSlide) { 944 _this6.slide(0, -_this6.controlCoordinates.swipeDiff + 'px'); 945 } 946 } 947 }); 948 this.addEventListener(this.domNodes.image, ['touchend.' + this.eventNamespace, 'mouseup.' + this.eventNamespace, 'touchcancel.' + this.eventNamespace, 'mouseleave.' + this.eventNamespace, 'pointerup', 'pointercancel', 'MSPointerUp', 'MSPointerCancel'], function (event) { 949 if (_this6.isTouchDevice && event.type === 'touchend') { 950 _this6.controlCoordinates.touchCount = event.touches.length; 951 if (_this6.controlCoordinates.touchCount === 0) /* No touch */{ 952 /* Set attributes */ 953 if (_this6.currentImage) { 954 _this6.setZoomData(_this6.controlCoordinates.initialScale, _this6.controlCoordinates.targetOffsetX, _this6.controlCoordinates.targetOffsetY); 955 } 956 if (_this6.controlCoordinates.initialScale === 1) { 957 _this6.controlCoordinates.zoomed = false; 958 if (_this6.domNodes.caption.style.display === 'none') { 959 _this6.fadeIn(_this6.domNodes.caption, _this6.options.fadeSpeed); 960 } 961 } 962 _this6.controlCoordinates.initialPinchDistance = null; 963 _this6.controlCoordinates.capture = false; 964 } else if (_this6.controlCoordinates.touchCount === 1) /* Single touch */{ 965 _this6.controlCoordinates.initialPointerOffsetX = event.touches[0].clientX; 966 _this6.controlCoordinates.initialPointerOffsetY = event.touches[0].clientY; 967 } else if (_this6.controlCoordinates.touchCount > 1) /* Pinch */{ 968 _this6.controlCoordinates.initialPinchDistance = null; 969 } 970 } 971 if (_this6.controlCoordinates.mousedown) { 972 _this6.controlCoordinates.mousedown = false; 973 var possibleDir = true; 974 if (!_this6.options.loop) { 975 if (_this6.currentImageIndex === 0 && _this6.controlCoordinates.swipeDiff < 0) { 976 possibleDir = false; 977 } 978 if (_this6.currentImageIndex >= _this6.relatedElements.length - 1 && _this6.controlCoordinates.swipeDiff > 0) { 979 possibleDir = false; 980 } 981 } 982 if (Math.abs(_this6.controlCoordinates.swipeDiff) > _this6.options.swipeTolerance && possibleDir) { 983 _this6.loadImage(_this6.controlCoordinates.swipeDiff > 0 ? 1 : -1); 984 } else if (_this6.options.animationSlide) { 985 _this6.slide(_this6.options.animationSpeed / 1000, 0 + 'px'); 986 } 987 if (_this6.options.swipeClose && Math.abs(_this6.controlCoordinates.swipeYDiff) > 50 && Math.abs(_this6.controlCoordinates.swipeDiff) < _this6.options.swipeTolerance) { 988 _this6.close(); 989 } 990 } 991 }); 992 this.addEventListener(this.domNodes.image, ['dblclick'], function (event) { 993 if (_this6.isTouchDevice) return; 994 _this6.controlCoordinates.initialPointerOffsetX = event.clientX; 995 _this6.controlCoordinates.initialPointerOffsetY = event.clientY; 996 _this6.controlCoordinates.containerHeight = _this6.getDimensions(_this6.domNodes.image).height; 997 _this6.controlCoordinates.containerWidth = _this6.getDimensions(_this6.domNodes.image).width; 998 _this6.controlCoordinates.imgHeight = _this6.getDimensions(_this6.currentImage).height; 999 _this6.controlCoordinates.imgWidth = _this6.getDimensions(_this6.currentImage).width; 1000 _this6.controlCoordinates.containerOffsetX = _this6.domNodes.image.offsetLeft; 1001 _this6.controlCoordinates.containerOffsetY = _this6.domNodes.image.offsetTop; 1002 _this6.currentImage.classList.add('sl-transition'); 1003 if (!_this6.controlCoordinates.zoomed) { 1004 _this6.controlCoordinates.initialScale = _this6.options.doubleTapZoom; 1005 _this6.setZoomData(_this6.controlCoordinates.initialScale, 0, 0); 1006 _this6.zoomPanElement(0 + "px", 0 + "px", _this6.controlCoordinates.initialScale); 1007 if ((!_this6.domNodes.caption.style.opacity || _this6.domNodes.caption.style.opacity > 0) && _this6.domNodes.caption.style.display !== 'none') { 1008 _this6.fadeOut(_this6.domNodes.caption, _this6.options.fadeSpeed); 1009 } 1010 _this6.controlCoordinates.zoomed = true; 1011 } else { 1012 _this6.controlCoordinates.initialScale = 1; 1013 _this6.setZoomData(_this6.controlCoordinates.initialScale, 0, 0); 1014 _this6.zoomPanElement(0 + "px", 0 + "px", _this6.controlCoordinates.initialScale); 1015 _this6.controlCoordinates.zoomed = false; 1016 if (_this6.domNodes.caption.style.display === 'none') { 1017 _this6.fadeIn(_this6.domNodes.caption, _this6.options.fadeSpeed); 1018 } 1019 } 1020 setTimeout(function () { 1021 if (_this6.currentImage) { 1022 _this6.currentImage.classList.remove('sl-transition'); 1023 _this6.currentImage.style[_this6.transitionPrefix + 'transform-origin'] = null; 1024 } 1025 }, 200); 1026 _this6.controlCoordinates.capture = true; 1027 return false; 1028 }); 1029 } 1030 }, { 1031 key: "getDimensions", 1032 value: function getDimensions(element) { 1033 var styles = window.getComputedStyle(element), 1034 height = element.offsetHeight, 1035 width = element.offsetWidth, 1036 borderTopWidth = parseFloat(styles.borderTopWidth), 1037 borderBottomWidth = parseFloat(styles.borderBottomWidth), 1038 paddingTop = parseFloat(styles.paddingTop), 1039 paddingBottom = parseFloat(styles.paddingBottom), 1040 borderLeftWidth = parseFloat(styles.borderLeftWidth), 1041 borderRightWidth = parseFloat(styles.borderRightWidth), 1042 paddingLeft = parseFloat(styles.paddingLeft), 1043 paddingRight = parseFloat(styles.paddingRight); 1044 return { 1045 height: height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom, 1046 width: width - borderLeftWidth - borderRightWidth - paddingLeft - paddingRight 1047 }; 1048 } 1049 }, { 1050 key: "updateHash", 1051 value: function updateHash() { 1052 var newHash = 'pid=' + (this.currentImageIndex + 1), 1053 newURL = window.location.href.split('#')[0] + '#' + newHash; 1054 this.hashReseted = false; 1055 if (this.pushStateSupport) { 1056 window.history[this.historyHasChanges ? 'replaceState' : 'pushState']('', document.title, newURL); 1057 } else { 1058 // what is the browser target of this? 1059 if (this.historyHasChanges) { 1060 window.location.replace(newURL); 1061 } else { 1062 window.location.hash = newHash; 1063 } 1064 } 1065 if (!this.historyHasChanges) { 1066 this.urlChangedOnce = true; 1067 } 1068 this.historyHasChanges = true; 1069 } 1070 }, { 1071 key: "resetHash", 1072 value: function resetHash() { 1073 this.hashReseted = true; 1074 if (this.urlChangedOnce) { 1075 history.back(); 1076 } else { 1077 if (this.pushStateSupport) { 1078 history.pushState('', document.title, window.location.pathname + window.location.search); 1079 } else { 1080 window.location.hash = ''; 1081 } 1082 } 1083 // 1084 //in case an history operation is still pending 1085 clearTimeout(this.historyUpdateTimeout); 1086 } 1087 }, { 1088 key: "updateURL", 1089 value: function updateURL() { 1090 clearTimeout(this.historyUpdateTimeout); 1091 if (!this.historyHasChanges) { 1092 this.updateHash(); // first time 1093 } else { 1094 this.historyUpdateTimeout = setTimeout(this.updateHash.bind(this), 800); 1095 } 1096 } 1097 }, { 1098 key: "setCaption", 1099 value: function setCaption(captionText, imageWidth, allowHTML) { 1100 var _this7 = this; 1101 if (this.options.captions && captionText && captionText !== '' && typeof captionText !== "undefined") { 1102 var _ref; 1103 var property = ((_ref = allowHTML !== null && allowHTML !== void 0 ? allowHTML : this.options.captionHTML) !== null && _ref !== void 0 ? _ref : true) ? 'innerHTML' : 'innerText'; 1104 this.hide(this.domNodes.caption); 1105 this.domNodes.caption.style.width = imageWidth + 'px'; 1106 this.domNodes.caption[property] = captionText; 1107 this.domNodes.image.appendChild(this.domNodes.caption); 1108 setTimeout(function () { 1109 _this7.fadeIn(_this7.domNodes.caption, _this7.options.fadeSpeed); 1110 }, this.options.captionDelay); 1111 } 1112 } 1113 }, { 1114 key: "slide", 1115 value: function slide(speed, pos) { 1116 if (!this.transitionCapable) { 1117 return this.domNodes.image.style.left = pos; 1118 } 1119 this.domNodes.image.style[this.transitionPrefix + 'transform'] = 'translateX(' + pos + ')'; 1120 this.domNodes.image.style[this.transitionPrefix + 'transition'] = this.transitionPrefix + 'transform ' + speed + 's linear'; 1121 } 1122 }, { 1123 key: "getRelated", 1124 value: function getRelated(rel) { 1125 var elems; 1126 if (rel && rel !== false && rel !== 'nofollow') { 1127 elems = Array.from(this.elements).filter(function (element) { 1128 return element.getAttribute('rel') === rel; 1129 }); 1130 } else { 1131 elems = this.elements; 1132 } 1133 return elems; 1134 } 1135 }, { 1136 key: "openImage", 1137 value: function openImage(element) { 1138 var _this8 = this; 1139 element.dispatchEvent(new Event('show.' + this.eventNamespace)); 1140 this.globalScrollbarWidth = this.getScrollbarWidth(); 1141 if (this.options.disableScroll) { 1142 this.toggleScrollbar('hide'); 1143 this.globalScrollbarWidth = 0; 1144 } 1145 if (this.options.htmlClass && this.options.htmlClass !== '') { 1146 document.querySelector('html').classList.add(this.options.htmlClass); 1147 } 1148 document.body.appendChild(this.domNodes.wrapper); 1149 this.domNodes.wrapper.appendChild(this.domNodes.image); 1150 if (this.options.overlay) { 1151 document.body.appendChild(this.domNodes.overlay); 1152 } 1153 this.relatedElements = this.getRelated(element.rel); 1154 if (this.options.showCounter) { 1155 if (this.relatedElements.length == 1 && this.domNodes.wrapper.contains(this.domNodes.counter)) { 1156 this.domNodes.wrapper.removeChild(this.domNodes.counter); 1157 } else if (this.relatedElements.length > 1 && !this.domNodes.wrapper.contains(this.domNodes.counter)) { 1158 this.domNodes.wrapper.appendChild(this.domNodes.counter); 1159 } 1160 } 1161 if (this.options.download && this.domNodes.download) { 1162 this.domNodes.wrapper.appendChild(this.domNodes.download); 1163 } 1164 this.isAnimating = true; 1165 this.currentImageIndex = this.relatedElements.indexOf(element); 1166 var targetURL = element.getAttribute(this.options.sourceAttr); 1167 this.currentImage = document.createElement('img'); 1168 this.currentImage.style.display = 'none'; 1169 this.currentImage.setAttribute('src', targetURL); 1170 this.currentImage.dataset.scale = 1; 1171 this.currentImage.dataset.translateX = 0; 1172 this.currentImage.dataset.translateY = 0; 1173 if (this.loadedImages.indexOf(targetURL) === -1) { 1174 this.loadedImages.push(targetURL); 1175 } 1176 this.domNodes.image.innerHTML = ''; 1177 this.domNodes.image.setAttribute('style', ''); 1178 this.domNodes.image.appendChild(this.currentImage); 1179 this.fadeIn(this.domNodes.overlay, this.options.fadeSpeed); 1180 this.fadeIn([this.domNodes.counter, this.domNodes.navigation, this.domNodes.closeButton, this.domNodes.download], this.options.fadeSpeed); 1181 this.show(this.domNodes.spinner); 1182 this.domNodes.counter.querySelector('.sl-current').innerHTML = this.currentImageIndex + 1; 1183 this.domNodes.counter.querySelector('.sl-total').innerHTML = this.relatedElements.length; 1184 this.adjustImage(); 1185 if (this.options.preloading) { 1186 this.preload(); 1187 } 1188 setTimeout(function () { 1189 element.dispatchEvent(new Event('shown.' + _this8.eventNamespace)); 1190 }, this.options.animationSpeed); 1191 } 1192 }, { 1193 key: "forceFocus", 1194 value: function forceFocus() { 1195 var _this9 = this; 1196 this.removeEventListener(document, 'focusin.' + this.eventNamespace); 1197 this.addEventListener(document, 'focusin.' + this.eventNamespace, function (event) { 1198 if (document !== event.target && _this9.domNodes.wrapper !== event.target && !_this9.domNodes.wrapper.contains(event.target)) { 1199 _this9.domNodes.wrapper.focus(); 1200 } 1201 }); 1202 } 1203 1204 // utility 1205 }, { 1206 key: "addEventListener", 1207 value: function addEventListener(elements, events, callback, opts) { 1208 elements = this.wrap(elements); 1209 events = this.wrap(events); 1210 var _iterator = _createForOfIteratorHelper(elements), 1211 _step; 1212 try { 1213 for (_iterator.s(); !(_step = _iterator.n()).done;) { 1214 var element = _step.value; 1215 if (!element.namespaces) { 1216 element.namespaces = {}; 1217 } // save the namespaces addEventListener the DOM element itself 1218 var _iterator2 = _createForOfIteratorHelper(events), 1219 _step2; 1220 try { 1221 for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) { 1222 var event = _step2.value; 1223 var options = opts || false; 1224 var needsPassiveFix = ['touchstart', 'touchmove', 'mousewheel', 'DOMMouseScroll'].indexOf(event.split('.')[0]) >= 0; 1225 if (needsPassiveFix && this.isPassiveEventsSupported) { 1226 if (_typeof(options) === 'object') { 1227 options.passive = true; 1228 } else { 1229 options = { 1230 passive: true 1231 }; 1232 } 1233 } 1234 element.namespaces[event] = callback; 1235 element.addEventListener(event.split('.')[0], callback, options); 1236 } 1237 } catch (err) { 1238 _iterator2.e(err); 1239 } finally { 1240 _iterator2.f(); 1241 } 1242 } 1243 } catch (err) { 1244 _iterator.e(err); 1245 } finally { 1246 _iterator.f(); 1247 } 1248 } 1249 }, { 1250 key: "removeEventListener", 1251 value: function removeEventListener(elements, events) { 1252 elements = this.wrap(elements); 1253 events = this.wrap(events); 1254 var _iterator3 = _createForOfIteratorHelper(elements), 1255 _step3; 1256 try { 1257 for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) { 1258 var element = _step3.value; 1259 var _iterator4 = _createForOfIteratorHelper(events), 1260 _step4; 1261 try { 1262 for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) { 1263 var event = _step4.value; 1264 if (element.namespaces && element.namespaces[event]) { 1265 element.removeEventListener(event.split('.')[0], element.namespaces[event]); 1266 delete element.namespaces[event]; 1267 } 1268 } 1269 } catch (err) { 1270 _iterator4.e(err); 1271 } finally { 1272 _iterator4.f(); 1273 } 1274 } 1275 } catch (err) { 1276 _iterator3.e(err); 1277 } finally { 1278 _iterator3.f(); 1279 } 1280 } 1281 }, { 1282 key: "fadeOut", 1283 value: function fadeOut(elements, duration, callback) { 1284 var _this10 = this; 1285 elements = this.wrap(elements); 1286 var _iterator5 = _createForOfIteratorHelper(elements), 1287 _step5; 1288 try { 1289 for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) { 1290 var element = _step5.value; 1291 element.style.opacity = parseFloat(element) || window.getComputedStyle(element).getPropertyValue("opacity"); 1292 } 1293 } catch (err) { 1294 _iterator5.e(err); 1295 } finally { 1296 _iterator5.f(); 1297 } 1298 this.isFadeIn = false; 1299 var step = 16.66666 / (duration || this.options.fadeSpeed), 1300 fade = function fade() { 1301 var currentOpacity = parseFloat(elements[0].style.opacity); 1302 if ((currentOpacity -= step) < 0) { 1303 var _iterator6 = _createForOfIteratorHelper(elements), 1304 _step6; 1305 try { 1306 for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) { 1307 var element = _step6.value; 1308 element.style.display = "none"; 1309 // element.style.opacity = ''; 1310 element.style.opacity = 1; 1311 } 1312 } catch (err) { 1313 _iterator6.e(err); 1314 } finally { 1315 _iterator6.f(); 1316 } 1317 callback && callback.call(_this10, elements); 1318 } else { 1319 var _iterator7 = _createForOfIteratorHelper(elements), 1320 _step7; 1321 try { 1322 for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) { 1323 var _element = _step7.value; 1324 _element.style.opacity = currentOpacity; 1325 } 1326 } catch (err) { 1327 _iterator7.e(err); 1328 } finally { 1329 _iterator7.f(); 1330 } 1331 requestAnimationFrame(fade); 1332 } 1333 }; 1334 fade(); 1335 } 1336 }, { 1337 key: "fadeIn", 1338 value: function fadeIn(elements, duration, callback, display) { 1339 var _this11 = this; 1340 elements = this.wrap(elements); 1341 var _iterator8 = _createForOfIteratorHelper(elements), 1342 _step8; 1343 try { 1344 for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) { 1345 var element = _step8.value; 1346 if (element) { 1347 element.style.opacity = 0; 1348 element.style.display = display || "block"; 1349 } 1350 } 1351 } catch (err) { 1352 _iterator8.e(err); 1353 } finally { 1354 _iterator8.f(); 1355 } 1356 this.isFadeIn = true; 1357 var opacityTarget = parseFloat(elements[0].dataset.opacityTarget || 1), 1358 step = 16.66666 * opacityTarget / (duration || this.options.fadeSpeed), 1359 fade = function fade() { 1360 var currentOpacity = parseFloat(elements[0].style.opacity); 1361 if (!((currentOpacity += step) > opacityTarget)) { 1362 var _iterator9 = _createForOfIteratorHelper(elements), 1363 _step9; 1364 try { 1365 for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) { 1366 var element = _step9.value; 1367 if (element) { 1368 element.style.opacity = currentOpacity; 1369 } 1370 } 1371 } catch (err) { 1372 _iterator9.e(err); 1373 } finally { 1374 _iterator9.f(); 1375 } 1376 if (!_this11.isFadeIn) return; 1377 requestAnimationFrame(fade); 1378 } else { 1379 var _iterator10 = _createForOfIteratorHelper(elements), 1380 _step10; 1381 try { 1382 for (_iterator10.s(); !(_step10 = _iterator10.n()).done;) { 1383 var _element2 = _step10.value; 1384 if (_element2) { 1385 _element2.style.opacity = opacityTarget; 1386 } 1387 } 1388 } catch (err) { 1389 _iterator10.e(err); 1390 } finally { 1391 _iterator10.f(); 1392 } 1393 callback && callback.call(_this11, elements); 1394 } 1395 }; 1396 fade(); 1397 } 1398 }, { 1399 key: "hide", 1400 value: function hide(elements) { 1401 elements = this.wrap(elements); 1402 var _iterator11 = _createForOfIteratorHelper(elements), 1403 _step11; 1404 try { 1405 for (_iterator11.s(); !(_step11 = _iterator11.n()).done;) { 1406 var element = _step11.value; 1407 if (element.style.display != 'none') { 1408 element.dataset.initialDisplay = element.style.display; 1409 } 1410 element.style.display = 'none'; 1411 } 1412 } catch (err) { 1413 _iterator11.e(err); 1414 } finally { 1415 _iterator11.f(); 1416 } 1417 } 1418 }, { 1419 key: "show", 1420 value: function show(elements, display) { 1421 elements = this.wrap(elements); 1422 var _iterator12 = _createForOfIteratorHelper(elements), 1423 _step12; 1424 try { 1425 for (_iterator12.s(); !(_step12 = _iterator12.n()).done;) { 1426 var element = _step12.value; 1427 element.style.display = element.dataset.initialDisplay || display || 'block'; 1428 } 1429 } catch (err) { 1430 _iterator12.e(err); 1431 } finally { 1432 _iterator12.f(); 1433 } 1434 } 1435 }, { 1436 key: "wrap", 1437 value: function wrap(input) { 1438 return typeof input[Symbol.iterator] === 'function' && typeof input !== 'string' ? input : [input]; 1439 } 1440 }, { 1441 key: "on", 1442 value: function on(events, callback) { 1443 events = this.wrap(events); 1444 var _iterator13 = _createForOfIteratorHelper(this.elements), 1445 _step13; 1446 try { 1447 for (_iterator13.s(); !(_step13 = _iterator13.n()).done;) { 1448 var element = _step13.value; 1449 if (!element.fullyNamespacedEvents) { 1450 element.fullyNamespacedEvents = {}; 1451 } 1452 var _iterator14 = _createForOfIteratorHelper(events), 1453 _step14; 1454 try { 1455 for (_iterator14.s(); !(_step14 = _iterator14.n()).done;) { 1456 var event = _step14.value; 1457 element.fullyNamespacedEvents[event] = callback; 1458 element.addEventListener(event, callback); 1459 } 1460 } catch (err) { 1461 _iterator14.e(err); 1462 } finally { 1463 _iterator14.f(); 1464 } 1465 } 1466 } catch (err) { 1467 _iterator13.e(err); 1468 } finally { 1469 _iterator13.f(); 1470 } 1471 return this; 1472 } 1473 }, { 1474 key: "off", 1475 value: function off(events) { 1476 events = this.wrap(events); 1477 var _iterator15 = _createForOfIteratorHelper(this.elements), 1478 _step15; 1479 try { 1480 for (_iterator15.s(); !(_step15 = _iterator15.n()).done;) { 1481 var element = _step15.value; 1482 var _iterator16 = _createForOfIteratorHelper(events), 1483 _step16; 1484 try { 1485 for (_iterator16.s(); !(_step16 = _iterator16.n()).done;) { 1486 var event = _step16.value; 1487 if (typeof element.fullyNamespacedEvents !== 'undefined' && event in element.fullyNamespacedEvents) { 1488 element.removeEventListener(event, element.fullyNamespacedEvents[event]); 1489 } 1490 } 1491 } catch (err) { 1492 _iterator16.e(err); 1493 } finally { 1494 _iterator16.f(); 1495 } 1496 } 1497 } catch (err) { 1498 _iterator15.e(err); 1499 } finally { 1500 _iterator15.f(); 1501 } 1502 return this; 1503 } 1504 1505 // api 1506 }, { 1507 key: "open", 1508 value: function open(elem) { 1509 var position = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; 1510 elem = elem || this.elements[0]; 1511 if (typeof jQuery !== "undefined" && elem instanceof jQuery) { 1512 elem = elem.get(0); 1513 } 1514 if (position > 0) { 1515 elem = this.elements[position]; 1516 } 1517 this.initialImageIndex = this.elements.indexOf(elem); 1518 if (this.initialImageIndex > -1) { 1519 this.openImage(elem); 1520 } 1521 } 1522 }, { 1523 key: "openPosition", 1524 value: function openPosition(position) { 1525 var elem = this.elements[position]; 1526 this.open(elem, position); 1527 } 1528 }, { 1529 key: "next", 1530 value: function next() { 1531 this.loadImage(1); 1532 } 1533 }, { 1534 key: "prev", 1535 value: function prev() { 1536 this.loadImage(-1); 1537 } 1538 1539 // get some useful data 1540 }, { 1541 key: "getLighboxData", 1542 value: function getLighboxData() { 1543 return { 1544 currentImageIndex: this.currentImageIndex, 1545 currentImage: this.currentImage, 1546 globalScrollbarWidth: this.globalScrollbarWidth 1547 }; 1548 } 1549 1550 //close is exposed anyways.. 1551 }, { 1552 key: "destroy", 1553 value: function destroy() { 1554 //remove all custom event listeners from elements 1555 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]); 1556 this.removeEventListener(this.elements, 'click.' + this.eventNamespace); 1557 this.removeEventListener(document, 'focusin.' + this.eventNamespace); 1558 this.removeEventListener(document.body, 'contextmenu.' + this.eventNamespace); 1559 this.removeEventListener(document.body, 'keyup.' + this.eventNamespace); 1560 this.removeEventListener(this.domNodes.navigation.getElementsByTagName('button'), 'click.' + this.eventNamespace); 1561 this.removeEventListener(this.domNodes.closeButton, 'click.' + this.eventNamespace); 1562 this.removeEventListener(window, 'resize.' + this.eventNamespace); 1563 this.removeEventListener(window, 'hashchange.' + this.eventNamespace); 1564 this.close(); 1565 if (this.isOpen) { 1566 document.body.removeChild(this.domNodes.wrapper); 1567 document.body.removeChild(this.domNodes.overlay); 1568 } 1569 this.elements = null; 1570 } 1571 }, { 1572 key: "refresh", 1573 value: function refresh() { 1574 if (!this.initialSelector) { 1575 throw 'refreshing only works when you initialize using a selector!'; 1576 } 1577 var options = this.options, 1578 selector = this.initialSelector; 1579 this.destroy(); 1580 this.constructor(selector, options); 1581 return this; 1582 } 1583 }]); 1584 return SimpleLightbox; 1585}(); 1586var _default = SimpleLightbox; 1587exports["default"] = _default; 1588global.SimpleLightbox = SimpleLightbox; 1589 1590}).call(this)}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) 1591},{}]},{},[1]); 1592