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