|
|
@@ -0,0 +1,1570 @@
|
|
|
+/*!
|
|
|
+ By André Rinas, www.andrerinas.de
|
|
|
+ Documentation, www.simplelightbox.com
|
|
|
+ Available for use under the MIT License
|
|
|
+ Version 2.14.0
|
|
|
+*/
|
|
|
+(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){
|
|
|
+(function (global){(function (){
|
|
|
+"use strict";
|
|
|
+
|
|
|
+Object.defineProperty(exports, "__esModule", {
|
|
|
+ value: true
|
|
|
+});
|
|
|
+exports["default"] = void 0;
|
|
|
+function _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); }
|
|
|
+function _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; } } }; }
|
|
|
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
|
+function _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."); }
|
|
|
+function _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); }
|
|
|
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
|
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
|
+function _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; }
|
|
|
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
|
+function _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); } }
|
|
|
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
|
+function _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; }
|
|
|
+var SimpleLightbox = /*#__PURE__*/function () {
|
|
|
+ function SimpleLightbox(elements, options) {
|
|
|
+ var _this = this;
|
|
|
+ _classCallCheck(this, SimpleLightbox);
|
|
|
+ _defineProperty(this, "defaultOptions", {
|
|
|
+ sourceAttr: 'href',
|
|
|
+ overlay: true,
|
|
|
+ overlayOpacity: 0.7,
|
|
|
+ spinner: true,
|
|
|
+ nav: true,
|
|
|
+ navText: ['‹', '›'],
|
|
|
+ captions: true,
|
|
|
+ captionDelay: 0,
|
|
|
+ captionSelector: 'img',
|
|
|
+ captionType: 'attr',
|
|
|
+ captionsData: 'title',
|
|
|
+ captionPosition: 'bottom',
|
|
|
+ captionClass: '',
|
|
|
+ close: true,
|
|
|
+ closeText: '×',
|
|
|
+ swipeClose: true,
|
|
|
+ showCounter: true,
|
|
|
+ fileExt: 'png|jpg|jpeg|gif|webp',
|
|
|
+ animationSlide: true,
|
|
|
+ animationSpeed: 250,
|
|
|
+ preloading: true,
|
|
|
+ enableKeyboard: true,
|
|
|
+ loop: true,
|
|
|
+ rel: false,
|
|
|
+ docClose: true,
|
|
|
+ swipeTolerance: 50,
|
|
|
+ className: 'simple-lightbox',
|
|
|
+ widthRatio: 0.8,
|
|
|
+ heightRatio: 0.9,
|
|
|
+ scaleImageToRatio: false,
|
|
|
+ disableRightClick: false,
|
|
|
+ disableScroll: true,
|
|
|
+ alertError: true,
|
|
|
+ alertErrorMessage: 'Image not found, next image will be loaded',
|
|
|
+ additionalHtml: false,
|
|
|
+ history: true,
|
|
|
+ throttleInterval: 0,
|
|
|
+ doubleTapZoom: 2,
|
|
|
+ maxZoom: 10,
|
|
|
+ htmlClass: 'has-lightbox',
|
|
|
+ rtl: false,
|
|
|
+ fixedClass: 'sl-fixed',
|
|
|
+ fadeSpeed: 300,
|
|
|
+ uniqueImages: true,
|
|
|
+ focus: true,
|
|
|
+ scrollZoom: true,
|
|
|
+ scrollZoomFactor: 0.5,
|
|
|
+ download: false
|
|
|
+ });
|
|
|
+ _defineProperty(this, "transitionPrefix", void 0);
|
|
|
+ _defineProperty(this, "isPassiveEventsSupported", void 0);
|
|
|
+ _defineProperty(this, "transitionCapable", false);
|
|
|
+ _defineProperty(this, "isTouchDevice", 'ontouchstart' in window);
|
|
|
+ _defineProperty(this, "isAppleDevice", /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform));
|
|
|
+ _defineProperty(this, "initialLocationHash", void 0);
|
|
|
+ _defineProperty(this, "pushStateSupport", 'pushState' in history);
|
|
|
+ _defineProperty(this, "isOpen", false);
|
|
|
+ _defineProperty(this, "isAnimating", false);
|
|
|
+ _defineProperty(this, "isClosing", false);
|
|
|
+ _defineProperty(this, "isFadeIn", false);
|
|
|
+ _defineProperty(this, "urlChangedOnce", false);
|
|
|
+ _defineProperty(this, "hashReseted", false);
|
|
|
+ _defineProperty(this, "historyHasChanges", false);
|
|
|
+ _defineProperty(this, "historyUpdateTimeout", null);
|
|
|
+ _defineProperty(this, "currentImage", void 0);
|
|
|
+ _defineProperty(this, "eventNamespace", 'simplelightbox');
|
|
|
+ _defineProperty(this, "domNodes", {});
|
|
|
+ _defineProperty(this, "loadedImages", []);
|
|
|
+ _defineProperty(this, "initialImageIndex", 0);
|
|
|
+ _defineProperty(this, "currentImageIndex", 0);
|
|
|
+ _defineProperty(this, "initialSelector", null);
|
|
|
+ _defineProperty(this, "globalScrollbarWidth", 0);
|
|
|
+ _defineProperty(this, "controlCoordinates", {
|
|
|
+ swipeDiff: 0,
|
|
|
+ swipeYDiff: 0,
|
|
|
+ swipeStart: 0,
|
|
|
+ swipeEnd: 0,
|
|
|
+ swipeYStart: 0,
|
|
|
+ swipeYEnd: 0,
|
|
|
+ mousedown: false,
|
|
|
+ imageLeft: 0,
|
|
|
+ zoomed: false,
|
|
|
+ containerHeight: 0,
|
|
|
+ containerWidth: 0,
|
|
|
+ containerOffsetX: 0,
|
|
|
+ containerOffsetY: 0,
|
|
|
+ imgHeight: 0,
|
|
|
+ imgWidth: 0,
|
|
|
+ capture: false,
|
|
|
+ initialOffsetX: 0,
|
|
|
+ initialOffsetY: 0,
|
|
|
+ initialPointerOffsetX: 0,
|
|
|
+ initialPointerOffsetY: 0,
|
|
|
+ initialPointerOffsetX2: 0,
|
|
|
+ initialPointerOffsetY2: 0,
|
|
|
+ initialScale: 1,
|
|
|
+ initialPinchDistance: 0,
|
|
|
+ pointerOffsetX: 0,
|
|
|
+ pointerOffsetY: 0,
|
|
|
+ pointerOffsetX2: 0,
|
|
|
+ pointerOffsetY2: 0,
|
|
|
+ targetOffsetX: 0,
|
|
|
+ targetOffsetY: 0,
|
|
|
+ targetScale: 0,
|
|
|
+ pinchOffsetX: 0,
|
|
|
+ pinchOffsetY: 0,
|
|
|
+ limitOffsetX: 0,
|
|
|
+ limitOffsetY: 0,
|
|
|
+ scaleDifference: 0,
|
|
|
+ targetPinchDistance: 0,
|
|
|
+ touchCount: 0,
|
|
|
+ doubleTapped: false,
|
|
|
+ touchmoveCount: 0
|
|
|
+ });
|
|
|
+ this.options = Object.assign(this.defaultOptions, options);
|
|
|
+ this.isPassiveEventsSupported = this.checkPassiveEventsSupport();
|
|
|
+ if (typeof elements === 'string') {
|
|
|
+ this.initialSelector = elements;
|
|
|
+ this.elements = Array.from(document.querySelectorAll(elements));
|
|
|
+ } else {
|
|
|
+ this.elements = typeof elements.length !== 'undefined' && elements.length > 0 ? Array.from(elements) : [elements];
|
|
|
+ }
|
|
|
+ this.relatedElements = [];
|
|
|
+ this.transitionPrefix = this.calculateTransitionPrefix();
|
|
|
+ this.transitionCapable = this.transitionPrefix !== false;
|
|
|
+ this.initialLocationHash = this.hash;
|
|
|
+
|
|
|
+ // this should be handled by attribute selector IMHO! => 'a[rel=bla]'...
|
|
|
+ if (this.options.rel) {
|
|
|
+ this.elements = this.getRelated(this.options.rel);
|
|
|
+ }
|
|
|
+ if (this.options.uniqueImages) {
|
|
|
+ var imgArr = [];
|
|
|
+ this.elements = Array.from(this.elements).filter(function (element) {
|
|
|
+ var src = element.getAttribute(_this.options.sourceAttr);
|
|
|
+ if (imgArr.indexOf(src) === -1) {
|
|
|
+ imgArr.push(src);
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.createDomNodes();
|
|
|
+ if (this.options.close) {
|
|
|
+ this.domNodes.wrapper.appendChild(this.domNodes.closeButton);
|
|
|
+ }
|
|
|
+ if (this.options.nav) {
|
|
|
+ this.domNodes.wrapper.appendChild(this.domNodes.navigation);
|
|
|
+ }
|
|
|
+ if (this.options.spinner) {
|
|
|
+ this.domNodes.wrapper.appendChild(this.domNodes.spinner);
|
|
|
+ }
|
|
|
+ this.addEventListener(this.elements, 'click.' + this.eventNamespace, function (event) {
|
|
|
+ if (_this.isValidLink(event.currentTarget)) {
|
|
|
+ event.preventDefault();
|
|
|
+ if (_this.isAnimating) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ _this.initialImageIndex = _this.elements.indexOf(event.currentTarget);
|
|
|
+ _this.openImage(event.currentTarget);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // close addEventListener click addEventListener doc
|
|
|
+ if (this.options.docClose) {
|
|
|
+ this.addEventListener(this.domNodes.wrapper, ['click.' + this.eventNamespace, 'touchstart.' + this.eventNamespace], function (event) {
|
|
|
+ if (_this.isOpen && event.target === event.currentTarget) {
|
|
|
+ _this.close();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // disable rightclick
|
|
|
+ if (this.options.disableRightClick) {
|
|
|
+ this.addEventListener(document.body, 'contextmenu.' + this.eventNamespace, function (event) {
|
|
|
+ if (event.target.parentElement.classList.contains("sl-image")) {
|
|
|
+ event.preventDefault();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // keyboard-control
|
|
|
+ if (this.options.enableKeyboard) {
|
|
|
+ this.addEventListener(document.body, 'keyup.' + this.eventNamespace, this.throttle(function (event) {
|
|
|
+ _this.controlCoordinates.swipeDiff = 0;
|
|
|
+ // keyboard control only if lightbox is open
|
|
|
+
|
|
|
+ if (_this.isAnimating && event.key === 'Escape') {
|
|
|
+ _this.currentImage.setAttribute('src', '');
|
|
|
+ _this.isAnimating = false;
|
|
|
+ _this.close();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (_this.isOpen) {
|
|
|
+ event.preventDefault();
|
|
|
+ if (event.key === 'Escape') {
|
|
|
+ _this.close();
|
|
|
+ }
|
|
|
+ if (!_this.isAnimating && ['ArrowLeft', 'ArrowRight'].indexOf(event.key) > -1) {
|
|
|
+ _this.loadImage(event.key === 'ArrowRight' ? 1 : -1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, this.options.throttleInterval));
|
|
|
+ }
|
|
|
+ this.addEvents();
|
|
|
+ }
|
|
|
+ _createClass(SimpleLightbox, [{
|
|
|
+ key: "checkPassiveEventsSupport",
|
|
|
+ value: function checkPassiveEventsSupport() {
|
|
|
+ // https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection
|
|
|
+ // Test via a getter in the options object to see if the passive property is accessed
|
|
|
+ var supportsPassive = false;
|
|
|
+ try {
|
|
|
+ var opts = Object.defineProperty({}, 'passive', {
|
|
|
+ get: function get() {
|
|
|
+ supportsPassive = true;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ window.addEventListener("testPassive", null, opts);
|
|
|
+ window.removeEventListener("testPassive", null, opts);
|
|
|
+ } catch (e) {}
|
|
|
+ return supportsPassive;
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "generateQuerySelector",
|
|
|
+ value: function generateQuerySelector(elem) {
|
|
|
+ var tagName = elem.tagName,
|
|
|
+ id = elem.id,
|
|
|
+ className = elem.className,
|
|
|
+ parentNode = elem.parentNode;
|
|
|
+ if (tagName === 'HTML') return 'HTML';
|
|
|
+ var str = tagName;
|
|
|
+ str += id !== '' ? "#".concat(id) : '';
|
|
|
+ if (className) {
|
|
|
+ var classes = className.trim().split(/\s/);
|
|
|
+ for (var i = 0; i < classes.length; i++) {
|
|
|
+ str += ".".concat(classes[i]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var childIndex = 1;
|
|
|
+ for (var e = elem; e.previousElementSibling; e = e.previousElementSibling) {
|
|
|
+ childIndex += 1;
|
|
|
+ }
|
|
|
+ str += ":nth-child(".concat(childIndex, ")");
|
|
|
+ return "".concat(this.generateQuerySelector(parentNode), " > ").concat(str);
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "createDomNodes",
|
|
|
+ value: function createDomNodes() {
|
|
|
+ this.domNodes.overlay = document.createElement('div');
|
|
|
+ this.domNodes.overlay.classList.add('sl-overlay');
|
|
|
+ this.domNodes.overlay.dataset.opacityTarget = this.options.overlayOpacity;
|
|
|
+ this.domNodes.closeButton = document.createElement('button');
|
|
|
+ this.domNodes.closeButton.classList.add('sl-close');
|
|
|
+ this.domNodes.closeButton.innerHTML = this.options.closeText;
|
|
|
+ this.domNodes.spinner = document.createElement('div');
|
|
|
+ this.domNodes.spinner.classList.add('sl-spinner');
|
|
|
+ this.domNodes.spinner.innerHTML = '<div></div>';
|
|
|
+ this.domNodes.navigation = document.createElement('div');
|
|
|
+ this.domNodes.navigation.classList.add('sl-navigation');
|
|
|
+ this.domNodes.navigation.innerHTML = "<button class=\"sl-prev\">".concat(this.options.navText[0], "</button><button class=\"sl-next\">").concat(this.options.navText[1], "</button>");
|
|
|
+ this.domNodes.counter = document.createElement('div');
|
|
|
+ this.domNodes.counter.classList.add('sl-counter');
|
|
|
+ this.domNodes.counter.innerHTML = '<span class="sl-current"></span>/<span class="sl-total"></span>';
|
|
|
+ this.domNodes.download = document.createElement('div');
|
|
|
+ this.domNodes.download.classList.add('sl-download');
|
|
|
+ this.domNodes.downloadLink = document.createElement('a');
|
|
|
+ this.domNodes.downloadLink.setAttribute('download', '');
|
|
|
+ this.domNodes.downloadLink.textContent = this.options.download;
|
|
|
+ this.domNodes.download.appendChild(this.domNodes.downloadLink);
|
|
|
+ this.domNodes.caption = document.createElement('div');
|
|
|
+ this.domNodes.caption.classList.add('sl-caption', 'pos-' + this.options.captionPosition);
|
|
|
+ if (this.options.captionClass) {
|
|
|
+ var _this$domNodes$captio;
|
|
|
+ var captionClasses = this.options.captionClass.split(/[\s,]+/);
|
|
|
+ (_this$domNodes$captio = this.domNodes.caption.classList).add.apply(_this$domNodes$captio, _toConsumableArray(captionClasses));
|
|
|
+ }
|
|
|
+ this.domNodes.image = document.createElement('div');
|
|
|
+ this.domNodes.image.classList.add('sl-image');
|
|
|
+ this.domNodes.wrapper = document.createElement('div');
|
|
|
+ this.domNodes.wrapper.classList.add('sl-wrapper');
|
|
|
+ this.domNodes.wrapper.setAttribute('tabindex', -1);
|
|
|
+ this.domNodes.wrapper.setAttribute('role', 'dialog');
|
|
|
+ this.domNodes.wrapper.setAttribute('aria-hidden', false);
|
|
|
+ if (this.options.className) {
|
|
|
+ this.domNodes.wrapper.classList.add(this.options.className);
|
|
|
+ }
|
|
|
+ if (this.options.rtl) {
|
|
|
+ this.domNodes.wrapper.classList.add('sl-dir-rtl');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "throttle",
|
|
|
+ value: function throttle(func, limit) {
|
|
|
+ var inThrottle;
|
|
|
+ return function () {
|
|
|
+ if (!inThrottle) {
|
|
|
+ func.apply(this, arguments);
|
|
|
+ inThrottle = true;
|
|
|
+ setTimeout(function () {
|
|
|
+ return inThrottle = false;
|
|
|
+ }, limit);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "isValidLink",
|
|
|
+ value: function isValidLink(element) {
|
|
|
+ return !this.options.fileExt || element.getAttribute(this.options.sourceAttr) && new RegExp('(' + this.options.fileExt + ')($|\\?.*$)', 'i').test(element.getAttribute(this.options.sourceAttr));
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "calculateTransitionPrefix",
|
|
|
+ value: function calculateTransitionPrefix() {
|
|
|
+ var s = (document.body || document.documentElement).style;
|
|
|
+ return 'transition' in s ? '' : 'WebkitTransition' in s ? '-webkit-' : 'MozTransition' in s ? '-moz-' : 'OTransition' in s ? '-o' : false;
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "getScrollbarWidth",
|
|
|
+ value: function getScrollbarWidth() {
|
|
|
+ var scrollbarWidth = 0;
|
|
|
+ var scrollDiv = document.createElement('div');
|
|
|
+ scrollDiv.classList.add('sl-scrollbar-measure');
|
|
|
+ document.body.appendChild(scrollDiv);
|
|
|
+ scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
|
|
|
+ document.body.removeChild(scrollDiv);
|
|
|
+ return scrollbarWidth;
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "toggleScrollbar",
|
|
|
+ value: function toggleScrollbar(type) {
|
|
|
+ var scrollbarWidth = 0;
|
|
|
+ var fixedElements = [].slice.call(document.querySelectorAll('.' + this.options.fixedClass));
|
|
|
+ if (type === 'hide') {
|
|
|
+ var fullWindowWidth = window.innerWidth;
|
|
|
+ if (!fullWindowWidth) {
|
|
|
+ var documentElementRect = document.documentElement.getBoundingClientRect();
|
|
|
+ fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left);
|
|
|
+ }
|
|
|
+ if (document.body.clientWidth < fullWindowWidth || this.isAppleDevice) {
|
|
|
+ var paddingRight = parseInt(window.getComputedStyle(document.body).paddingRight || 0, 10);
|
|
|
+ scrollbarWidth = this.getScrollbarWidth();
|
|
|
+ document.body.dataset.originalPaddingRight = paddingRight;
|
|
|
+ if (scrollbarWidth > 0 || scrollbarWidth == 0 && this.isAppleDevice) {
|
|
|
+ document.body.classList.add('hidden-scroll');
|
|
|
+ document.body.style.paddingRight = paddingRight + scrollbarWidth + 'px';
|
|
|
+ fixedElements.forEach(function (element) {
|
|
|
+ var actualPadding = element.style.paddingRight;
|
|
|
+ var calculatedPadding = window.getComputedStyle(element)['padding-right'];
|
|
|
+ element.dataset.originalPaddingRight = actualPadding;
|
|
|
+ element.style.paddingRight = "".concat(parseFloat(calculatedPadding) + scrollbarWidth, "px");
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ document.body.classList.remove('hidden-scroll');
|
|
|
+ document.body.style.paddingRight = document.body.dataset.originalPaddingRight + 'px';
|
|
|
+ fixedElements.forEach(function (element) {
|
|
|
+ var padding = element.dataset.originalPaddingRight;
|
|
|
+ if (typeof padding !== 'undefined') {
|
|
|
+ element.style.paddingRight = padding;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ return scrollbarWidth;
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "close",
|
|
|
+ value: function close() {
|
|
|
+ var _this2 = this;
|
|
|
+ if (!this.isOpen || this.isAnimating || this.isClosing) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.isClosing = true;
|
|
|
+ var element = this.relatedElements[this.currentImageIndex];
|
|
|
+ element.dispatchEvent(new Event('close.simplelightbox'));
|
|
|
+ if (this.options.history) {
|
|
|
+ this.historyHasChanges = false;
|
|
|
+ if (!this.hashReseted) {
|
|
|
+ this.resetHash();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.removeEventListener(document, 'focusin.' + this.eventNamespace);
|
|
|
+ this.fadeOut(this.domNodes.overlay, this.options.fadeSpeed);
|
|
|
+ this.fadeOut(document.querySelectorAll('.sl-image img, .sl-close, .sl-navigation, .sl-image .sl-caption, .sl-counter'), this.options.fadeSpeed, function () {
|
|
|
+ if (_this2.options.disableScroll) {
|
|
|
+ _this2.toggleScrollbar('show');
|
|
|
+ }
|
|
|
+ if (_this2.options.htmlClass && _this2.options.htmlClass !== '') {
|
|
|
+ document.querySelector('html').classList.remove(_this2.options.htmlClass);
|
|
|
+ }
|
|
|
+ document.body.removeChild(_this2.domNodes.wrapper);
|
|
|
+ if (_this2.options.overlay) {
|
|
|
+ document.body.removeChild(_this2.domNodes.overlay);
|
|
|
+ }
|
|
|
+ _this2.domNodes.additionalHtml = null;
|
|
|
+ _this2.domNodes.download = null;
|
|
|
+ element.dispatchEvent(new Event('closed.simplelightbox'));
|
|
|
+ _this2.isClosing = false;
|
|
|
+ });
|
|
|
+ this.currentImage = null;
|
|
|
+ this.isOpen = false;
|
|
|
+ this.isAnimating = false;
|
|
|
+
|
|
|
+ // reset touchcontrol coordinates
|
|
|
+ for (var key in this.controlCoordinates) {
|
|
|
+ this.controlCoordinates[key] = 0;
|
|
|
+ }
|
|
|
+ this.controlCoordinates.mousedown = false;
|
|
|
+ this.controlCoordinates.zoomed = false;
|
|
|
+ this.controlCoordinates.capture = false;
|
|
|
+ this.controlCoordinates.initialScale = this.minMax(1, 1, this.options.maxZoom);
|
|
|
+ this.controlCoordinates.doubleTapped = false;
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "hash",
|
|
|
+ get: function get() {
|
|
|
+ return window.location.hash.substring(1);
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "preload",
|
|
|
+ value: function preload() {
|
|
|
+ var _this3 = this;
|
|
|
+ var index = this.currentImageIndex,
|
|
|
+ length = this.relatedElements.length,
|
|
|
+ next = index + 1 < 0 ? length - 1 : index + 1 >= length - 1 ? 0 : index + 1,
|
|
|
+ prev = index - 1 < 0 ? length - 1 : index - 1 >= length - 1 ? 0 : index - 1,
|
|
|
+ nextImage = new Image(),
|
|
|
+ prevImage = new Image();
|
|
|
+ nextImage.addEventListener('load', function (event) {
|
|
|
+ var src = event.target.getAttribute('src');
|
|
|
+ if (_this3.loadedImages.indexOf(src) === -1) {
|
|
|
+ //is this condition even required... setting multiple times will not change usage...
|
|
|
+ _this3.loadedImages.push(src);
|
|
|
+ }
|
|
|
+ _this3.relatedElements[index].dispatchEvent(new Event('nextImageLoaded.' + _this3.eventNamespace));
|
|
|
+ });
|
|
|
+ nextImage.setAttribute('src', this.relatedElements[next].getAttribute(this.options.sourceAttr));
|
|
|
+ prevImage.addEventListener('load', function (event) {
|
|
|
+ var src = event.target.getAttribute('src');
|
|
|
+ if (_this3.loadedImages.indexOf(src) === -1) {
|
|
|
+ _this3.loadedImages.push(src);
|
|
|
+ }
|
|
|
+ _this3.relatedElements[index].dispatchEvent(new Event('prevImageLoaded.' + _this3.eventNamespace));
|
|
|
+ });
|
|
|
+ prevImage.setAttribute('src', this.relatedElements[prev].getAttribute(this.options.sourceAttr));
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "loadImage",
|
|
|
+ value: function loadImage(direction) {
|
|
|
+ var _this4 = this;
|
|
|
+ var slideDirection = direction;
|
|
|
+ if (this.options.rtl) {
|
|
|
+ direction = -direction;
|
|
|
+ }
|
|
|
+ this.relatedElements[this.currentImageIndex].dispatchEvent(new Event('change.' + this.eventNamespace));
|
|
|
+ this.relatedElements[this.currentImageIndex].dispatchEvent(new Event((direction === 1 ? 'next' : 'prev') + '.' + this.eventNamespace));
|
|
|
+ var newIndex = this.currentImageIndex + direction;
|
|
|
+ if (this.isAnimating || (newIndex < 0 || newIndex >= this.relatedElements.length) && this.options.loop === false) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ this.currentImageIndex = newIndex < 0 ? this.relatedElements.length - 1 : newIndex > this.relatedElements.length - 1 ? 0 : newIndex;
|
|
|
+ this.domNodes.counter.querySelector('.sl-current').innerHTML = this.currentImageIndex + 1;
|
|
|
+ if (this.options.animationSlide) {
|
|
|
+ this.slide(this.options.animationSpeed / 1000, -100 * slideDirection - this.controlCoordinates.swipeDiff + 'px');
|
|
|
+ }
|
|
|
+ this.fadeOut(this.domNodes.image, this.options.fadeSpeed, function () {
|
|
|
+ _this4.isAnimating = true;
|
|
|
+ if (!_this4.isClosing) {
|
|
|
+ setTimeout(function () {
|
|
|
+ var element = _this4.relatedElements[_this4.currentImageIndex];
|
|
|
+ if (!_this4.currentImage) return;
|
|
|
+ _this4.currentImage.setAttribute('src', element.getAttribute(_this4.options.sourceAttr));
|
|
|
+ if (_this4.loadedImages.indexOf(element.getAttribute(_this4.options.sourceAttr)) === -1) {
|
|
|
+ _this4.show(_this4.domNodes.spinner);
|
|
|
+ }
|
|
|
+ if (_this4.domNodes.image.contains(_this4.domNodes.caption)) {
|
|
|
+ _this4.domNodes.image.removeChild(_this4.domNodes.caption);
|
|
|
+ }
|
|
|
+ _this4.adjustImage(slideDirection);
|
|
|
+ if (_this4.options.preloading) _this4.preload();
|
|
|
+ }, 100);
|
|
|
+ } else {
|
|
|
+ _this4.isAnimating = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "adjustImage",
|
|
|
+ value: function adjustImage(direction) {
|
|
|
+ var _this5 = this;
|
|
|
+ if (!this.currentImage) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ var tmpImage = new Image(),
|
|
|
+ windowWidth = window.innerWidth * this.options.widthRatio,
|
|
|
+ windowHeight = window.innerHeight * this.options.heightRatio;
|
|
|
+ tmpImage.setAttribute('src', this.currentImage.getAttribute('src'));
|
|
|
+ this.currentImage.dataset.scale = 1;
|
|
|
+ this.currentImage.dataset.translateX = 0;
|
|
|
+ this.currentImage.dataset.translateY = 0;
|
|
|
+ this.zoomPanElement(0, 0, 1);
|
|
|
+ tmpImage.addEventListener('error', function (event) {
|
|
|
+ _this5.relatedElements[_this5.currentImageIndex].dispatchEvent(new Event('error.' + _this5.eventNamespace));
|
|
|
+ _this5.isAnimating = false;
|
|
|
+ _this5.isOpen = true;
|
|
|
+ _this5.domNodes.spinner.style.display = 'none';
|
|
|
+ var dirIsDefined = direction === 1 || direction === -1;
|
|
|
+ if (_this5.initialImageIndex === _this5.currentImageIndex && dirIsDefined) {
|
|
|
+ return _this5.close();
|
|
|
+ }
|
|
|
+ if (_this5.options.alertError) {
|
|
|
+ alert(_this5.options.alertErrorMessage);
|
|
|
+ }
|
|
|
+ _this5.loadImage(dirIsDefined ? direction : 1);
|
|
|
+ });
|
|
|
+ tmpImage.addEventListener('load', function (event) {
|
|
|
+ if (typeof direction !== 'undefined') {
|
|
|
+ _this5.relatedElements[_this5.currentImageIndex].dispatchEvent(new Event('changed.' + _this5.eventNamespace));
|
|
|
+ _this5.relatedElements[_this5.currentImageIndex].dispatchEvent(new Event((direction === 1 ? 'nextDone' : 'prevDone') + '.' + _this5.eventNamespace));
|
|
|
+ }
|
|
|
+
|
|
|
+ // history
|
|
|
+ if (_this5.options.history) {
|
|
|
+ _this5.updateURL();
|
|
|
+ }
|
|
|
+ if (_this5.loadedImages.indexOf(_this5.currentImage.getAttribute('src')) === -1) {
|
|
|
+ _this5.loadedImages.push(_this5.currentImage.getAttribute('src'));
|
|
|
+ }
|
|
|
+ var imageWidth = event.target.width,
|
|
|
+ imageHeight = event.target.height;
|
|
|
+ if (_this5.options.scaleImageToRatio || imageWidth > windowWidth || imageHeight > windowHeight) {
|
|
|
+ var ratio = imageWidth / imageHeight > windowWidth / windowHeight ? imageWidth / windowWidth : imageHeight / windowHeight;
|
|
|
+ imageWidth /= ratio;
|
|
|
+ imageHeight /= ratio;
|
|
|
+ }
|
|
|
+ _this5.domNodes.image.style.top = (window.innerHeight - imageHeight) / 2 + 'px';
|
|
|
+ _this5.domNodes.image.style.left = (window.innerWidth - imageWidth - _this5.globalScrollbarWidth) / 2 + 'px';
|
|
|
+ _this5.domNodes.image.style.width = imageWidth + 'px';
|
|
|
+ _this5.domNodes.image.style.height = imageHeight + 'px';
|
|
|
+ _this5.domNodes.spinner.style.display = 'none';
|
|
|
+ if (_this5.options.focus) {
|
|
|
+ _this5.forceFocus();
|
|
|
+ }
|
|
|
+ _this5.fadeIn(_this5.currentImage, _this5.options.fadeSpeed, function () {
|
|
|
+ if (_this5.options.focus) {
|
|
|
+ _this5.domNodes.wrapper.focus();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ _this5.isOpen = true;
|
|
|
+ var captionContainer, captionText;
|
|
|
+ if (typeof _this5.options.captionSelector === 'string') {
|
|
|
+ captionContainer = _this5.options.captionSelector === 'self' ? _this5.relatedElements[_this5.currentImageIndex] : document.querySelector(_this5.generateQuerySelector(_this5.relatedElements[_this5.currentImageIndex]) + ' ' + _this5.options.captionSelector);
|
|
|
+ } else if (typeof _this5.options.captionSelector === 'function') {
|
|
|
+ captionContainer = _this5.options.captionSelector(_this5.relatedElements[_this5.currentImageIndex]);
|
|
|
+ }
|
|
|
+ if (_this5.options.captions && captionContainer) {
|
|
|
+ if (_this5.options.captionType === 'data') {
|
|
|
+ captionText = captionContainer.dataset[_this5.options.captionsData];
|
|
|
+ } else if (_this5.options.captionType === 'text') {
|
|
|
+ captionText = captionContainer.innerHTML;
|
|
|
+ } else {
|
|
|
+ captionText = captionContainer.getAttribute(_this5.options.captionsData);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (!_this5.options.loop) {
|
|
|
+ if (_this5.currentImageIndex === 0) {
|
|
|
+ _this5.hide(_this5.domNodes.navigation.querySelector('.sl-prev'));
|
|
|
+ }
|
|
|
+ if (_this5.currentImageIndex >= _this5.relatedElements.length - 1) {
|
|
|
+ _this5.hide(_this5.domNodes.navigation.querySelector('.sl-next'));
|
|
|
+ }
|
|
|
+ if (_this5.currentImageIndex > 0) {
|
|
|
+ _this5.show(_this5.domNodes.navigation.querySelector('.sl-prev'));
|
|
|
+ }
|
|
|
+ if (_this5.currentImageIndex < _this5.relatedElements.length - 1) {
|
|
|
+ _this5.show(_this5.domNodes.navigation.querySelector('.sl-next'));
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (_this5.relatedElements.length === 1) {
|
|
|
+ _this5.hide(_this5.domNodes.navigation.querySelectorAll('.sl-prev, .sl-next'));
|
|
|
+ } else {
|
|
|
+ _this5.show(_this5.domNodes.navigation.querySelectorAll('.sl-prev, .sl-next'));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (direction === 1 || direction === -1) {
|
|
|
+ if (_this5.options.animationSlide) {
|
|
|
+ _this5.slide(0, 100 * direction + 'px');
|
|
|
+ setTimeout(function () {
|
|
|
+ _this5.slide(_this5.options.animationSpeed / 1000, 0 + 'px');
|
|
|
+ }, 50);
|
|
|
+ }
|
|
|
+ _this5.fadeIn(_this5.domNodes.image, _this5.options.fadeSpeed, function () {
|
|
|
+ _this5.isAnimating = false;
|
|
|
+ _this5.setCaption(captionText, imageWidth);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ _this5.isAnimating = false;
|
|
|
+ _this5.setCaption(captionText, imageWidth);
|
|
|
+ }
|
|
|
+ if (_this5.options.additionalHtml && !_this5.domNodes.additionalHtml) {
|
|
|
+ _this5.domNodes.additionalHtml = document.createElement('div');
|
|
|
+ _this5.domNodes.additionalHtml.classList.add('sl-additional-html');
|
|
|
+ _this5.domNodes.additionalHtml.innerHTML = _this5.options.additionalHtml;
|
|
|
+ _this5.domNodes.image.appendChild(_this5.domNodes.additionalHtml);
|
|
|
+ }
|
|
|
+ if (_this5.options.download) {
|
|
|
+ _this5.domNodes.downloadLink.setAttribute('href', _this5.currentImage.getAttribute('src'));
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "zoomPanElement",
|
|
|
+ value: function zoomPanElement(targetOffsetX, targetOffsetY, targetScale) {
|
|
|
+ this.currentImage.style[this.transitionPrefix + 'transform'] = 'translate(' + targetOffsetX + ',' + targetOffsetY + ') scale(' + targetScale + ')';
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "minMax",
|
|
|
+ value: function minMax(value, min, max) {
|
|
|
+ return value < min ? min : value > max ? max : value;
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "setZoomData",
|
|
|
+ value: function setZoomData(initialScale, targetOffsetX, targetOffsetY) {
|
|
|
+ this.currentImage.dataset.scale = initialScale;
|
|
|
+ this.currentImage.dataset.translateX = targetOffsetX;
|
|
|
+ this.currentImage.dataset.translateY = targetOffsetY;
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "hashchangeHandler",
|
|
|
+ value: function hashchangeHandler() {
|
|
|
+ if (this.isOpen && this.hash === this.initialLocationHash) {
|
|
|
+ this.hashReseted = true;
|
|
|
+ this.close();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "addEvents",
|
|
|
+ value: function addEvents() {
|
|
|
+ var _this6 = this;
|
|
|
+ // resize/responsive
|
|
|
+ this.addEventListener(window, 'resize.' + this.eventNamespace, function (event) {
|
|
|
+ //this.adjustImage.bind(this)
|
|
|
+ if (_this6.isOpen) {
|
|
|
+ _this6.adjustImage();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.addEventListener(this.domNodes.closeButton, ['click.' + this.eventNamespace, 'touchstart.' + this.eventNamespace], this.close.bind(this));
|
|
|
+ if (this.options.history) {
|
|
|
+ setTimeout(function () {
|
|
|
+ _this6.addEventListener(window, 'hashchange.' + _this6.eventNamespace, function (event) {
|
|
|
+ if (_this6.isOpen) {
|
|
|
+ _this6.hashchangeHandler();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }, 40);
|
|
|
+ }
|
|
|
+ this.addEventListener(this.domNodes.navigation.getElementsByTagName('button'), 'click.' + this.eventNamespace, function (event) {
|
|
|
+ if (!event.currentTarget.tagName.match(/button/i)) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ event.preventDefault();
|
|
|
+ _this6.controlCoordinates.swipeDiff = 0;
|
|
|
+ _this6.loadImage(event.currentTarget.classList.contains('sl-next') ? 1 : -1);
|
|
|
+ });
|
|
|
+ if (this.options.scrollZoom) {
|
|
|
+ var scale = 1;
|
|
|
+ this.addEventListener(this.domNodes.image, ['mousewheel', 'DOMMouseScroll'], function (event) {
|
|
|
+ if (_this6.controlCoordinates.mousedown || _this6.isAnimating || _this6.isClosing || !_this6.isOpen) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ if (_this6.controlCoordinates.containerHeight == 0) {
|
|
|
+ _this6.controlCoordinates.containerHeight = _this6.getDimensions(_this6.domNodes.image).height;
|
|
|
+ _this6.controlCoordinates.containerWidth = _this6.getDimensions(_this6.domNodes.image).width;
|
|
|
+ _this6.controlCoordinates.imgHeight = _this6.getDimensions(_this6.currentImage).height;
|
|
|
+ _this6.controlCoordinates.imgWidth = _this6.getDimensions(_this6.currentImage).width;
|
|
|
+ _this6.controlCoordinates.containerOffsetX = _this6.domNodes.image.offsetLeft;
|
|
|
+ _this6.controlCoordinates.containerOffsetY = _this6.domNodes.image.offsetTop;
|
|
|
+ _this6.controlCoordinates.initialOffsetX = parseFloat(_this6.currentImage.dataset.translateX);
|
|
|
+ _this6.controlCoordinates.initialOffsetY = parseFloat(_this6.currentImage.dataset.translateY);
|
|
|
+ }
|
|
|
+ // event.preventDefault();
|
|
|
+
|
|
|
+ var delta = event.delta || event.wheelDelta;
|
|
|
+ if (delta === undefined) {
|
|
|
+ //we are on firefox
|
|
|
+ delta = event.detail;
|
|
|
+ }
|
|
|
+ delta = Math.max(-1, Math.min(1, delta)); // cap the delta to [-1,1] for cross browser consistency
|
|
|
+
|
|
|
+ // apply zoom
|
|
|
+ scale += delta * _this6.options.scrollZoomFactor * scale;
|
|
|
+ scale = Math.max(1, Math.min(_this6.options.maxZoom, scale));
|
|
|
+ _this6.controlCoordinates.targetScale = scale;
|
|
|
+ var scrollTopPos = document.documentElement.scrollTop || document.body.scrollTop;
|
|
|
+ _this6.controlCoordinates.pinchOffsetX = event.pageX;
|
|
|
+ _this6.controlCoordinates.pinchOffsetY = event.pageY - scrollTopPos || 0; // need to substract the scroll position
|
|
|
+
|
|
|
+ _this6.controlCoordinates.limitOffsetX = (_this6.controlCoordinates.imgWidth * _this6.controlCoordinates.targetScale - _this6.controlCoordinates.containerWidth) / 2;
|
|
|
+ _this6.controlCoordinates.limitOffsetY = (_this6.controlCoordinates.imgHeight * _this6.controlCoordinates.targetScale - _this6.controlCoordinates.containerHeight) / 2;
|
|
|
+ _this6.controlCoordinates.scaleDifference = _this6.controlCoordinates.targetScale - _this6.controlCoordinates.initialScale;
|
|
|
+ _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);
|
|
|
+ _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);
|
|
|
+ _this6.zoomPanElement(_this6.controlCoordinates.targetOffsetX + "px", _this6.controlCoordinates.targetOffsetY + "px", _this6.controlCoordinates.targetScale);
|
|
|
+ if (_this6.controlCoordinates.targetScale > 1) {
|
|
|
+ _this6.controlCoordinates.zoomed = true;
|
|
|
+ if ((!_this6.domNodes.caption.style.opacity || _this6.domNodes.caption.style.opacity > 0) && _this6.domNodes.caption.style.display !== 'none') {
|
|
|
+ _this6.fadeOut(_this6.domNodes.caption, _this6.options.fadeSpeed);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (_this6.controlCoordinates.initialScale === 1) {
|
|
|
+ _this6.controlCoordinates.zoomed = false;
|
|
|
+ if (_this6.domNodes.caption.style.display === 'none') {
|
|
|
+ _this6.fadeIn(_this6.domNodes.caption, _this6.options.fadeSpeed);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ _this6.controlCoordinates.initialPinchDistance = null;
|
|
|
+ _this6.controlCoordinates.capture = false;
|
|
|
+ }
|
|
|
+ _this6.controlCoordinates.initialPinchDistance = _this6.controlCoordinates.targetPinchDistance;
|
|
|
+ _this6.controlCoordinates.initialScale = _this6.controlCoordinates.targetScale;
|
|
|
+ _this6.controlCoordinates.initialOffsetX = _this6.controlCoordinates.targetOffsetX;
|
|
|
+ _this6.controlCoordinates.initialOffsetY = _this6.controlCoordinates.targetOffsetY;
|
|
|
+ _this6.setZoomData(_this6.controlCoordinates.targetScale, _this6.controlCoordinates.targetOffsetX, _this6.controlCoordinates.targetOffsetY);
|
|
|
+ _this6.zoomPanElement(_this6.controlCoordinates.targetOffsetX + "px", _this6.controlCoordinates.targetOffsetY + "px", _this6.controlCoordinates.targetScale);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ this.addEventListener(this.domNodes.image, ['touchstart.' + this.eventNamespace, 'mousedown.' + this.eventNamespace], function (event) {
|
|
|
+ if (event.target.tagName === 'A' && event.type === 'touchstart') {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ if (event.type === 'mousedown') {
|
|
|
+ event.preventDefault();
|
|
|
+ _this6.controlCoordinates.initialPointerOffsetX = event.clientX;
|
|
|
+ _this6.controlCoordinates.initialPointerOffsetY = event.clientY;
|
|
|
+ _this6.controlCoordinates.containerHeight = _this6.getDimensions(_this6.domNodes.image).height;
|
|
|
+ _this6.controlCoordinates.containerWidth = _this6.getDimensions(_this6.domNodes.image).width;
|
|
|
+ _this6.controlCoordinates.imgHeight = _this6.getDimensions(_this6.currentImage).height;
|
|
|
+ _this6.controlCoordinates.imgWidth = _this6.getDimensions(_this6.currentImage).width;
|
|
|
+ _this6.controlCoordinates.containerOffsetX = _this6.domNodes.image.offsetLeft;
|
|
|
+ _this6.controlCoordinates.containerOffsetY = _this6.domNodes.image.offsetTop;
|
|
|
+ _this6.controlCoordinates.initialOffsetX = parseFloat(_this6.currentImage.dataset.translateX);
|
|
|
+ _this6.controlCoordinates.initialOffsetY = parseFloat(_this6.currentImage.dataset.translateY);
|
|
|
+ _this6.controlCoordinates.capture = true;
|
|
|
+ } else {
|
|
|
+ _this6.controlCoordinates.touchCount = event.touches.length;
|
|
|
+ _this6.controlCoordinates.initialPointerOffsetX = event.touches[0].clientX;
|
|
|
+ _this6.controlCoordinates.initialPointerOffsetY = event.touches[0].clientY;
|
|
|
+ _this6.controlCoordinates.containerHeight = _this6.getDimensions(_this6.domNodes.image).height;
|
|
|
+ _this6.controlCoordinates.containerWidth = _this6.getDimensions(_this6.domNodes.image).width;
|
|
|
+ _this6.controlCoordinates.imgHeight = _this6.getDimensions(_this6.currentImage).height;
|
|
|
+ _this6.controlCoordinates.imgWidth = _this6.getDimensions(_this6.currentImage).width;
|
|
|
+ _this6.controlCoordinates.containerOffsetX = _this6.domNodes.image.offsetLeft;
|
|
|
+ _this6.controlCoordinates.containerOffsetY = _this6.domNodes.image.offsetTop;
|
|
|
+ if (_this6.controlCoordinates.touchCount === 1) /* Single touch */{
|
|
|
+ if (!_this6.controlCoordinates.doubleTapped) {
|
|
|
+ _this6.controlCoordinates.doubleTapped = true;
|
|
|
+ setTimeout(function () {
|
|
|
+ _this6.controlCoordinates.doubleTapped = false;
|
|
|
+ }, 300);
|
|
|
+ } else {
|
|
|
+ _this6.currentImage.classList.add('sl-transition');
|
|
|
+ if (!_this6.controlCoordinates.zoomed) {
|
|
|
+ _this6.controlCoordinates.initialScale = _this6.options.doubleTapZoom;
|
|
|
+ _this6.setZoomData(_this6.controlCoordinates.initialScale, 0, 0);
|
|
|
+ _this6.zoomPanElement(0 + "px", 0 + "px", _this6.controlCoordinates.initialScale);
|
|
|
+ if ((!_this6.domNodes.caption.style.opacity || _this6.domNodes.caption.style.opacity > 0) && _this6.domNodes.caption.style.display !== 'none') {
|
|
|
+ _this6.fadeOut(_this6.domNodes.caption, _this6.options.fadeSpeed);
|
|
|
+ }
|
|
|
+ _this6.controlCoordinates.zoomed = true;
|
|
|
+ } else {
|
|
|
+ _this6.controlCoordinates.initialScale = 1;
|
|
|
+ _this6.setZoomData(_this6.controlCoordinates.initialScale, 0, 0);
|
|
|
+ _this6.zoomPanElement(0 + "px", 0 + "px", _this6.controlCoordinates.initialScale);
|
|
|
+ _this6.controlCoordinates.zoomed = false;
|
|
|
+ }
|
|
|
+ setTimeout(function () {
|
|
|
+ if (_this6.currentImage) {
|
|
|
+ _this6.currentImage.classList.remove('sl-transition');
|
|
|
+ }
|
|
|
+ }, 200);
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ _this6.controlCoordinates.initialOffsetX = parseFloat(_this6.currentImage.dataset.translateX);
|
|
|
+ _this6.controlCoordinates.initialOffsetY = parseFloat(_this6.currentImage.dataset.translateY);
|
|
|
+ } else if (_this6.controlCoordinates.touchCount === 2) /* Pinch */{
|
|
|
+ _this6.controlCoordinates.initialPointerOffsetX2 = event.touches[1].clientX;
|
|
|
+ _this6.controlCoordinates.initialPointerOffsetY2 = event.touches[1].clientY;
|
|
|
+ _this6.controlCoordinates.initialOffsetX = parseFloat(_this6.currentImage.dataset.translateX);
|
|
|
+ _this6.controlCoordinates.initialOffsetY = parseFloat(_this6.currentImage.dataset.translateY);
|
|
|
+ _this6.controlCoordinates.pinchOffsetX = (_this6.controlCoordinates.initialPointerOffsetX + _this6.controlCoordinates.initialPointerOffsetX2) / 2;
|
|
|
+ _this6.controlCoordinates.pinchOffsetY = (_this6.controlCoordinates.initialPointerOffsetY + _this6.controlCoordinates.initialPointerOffsetY2) / 2;
|
|
|
+ _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));
|
|
|
+ }
|
|
|
+ _this6.controlCoordinates.capture = true;
|
|
|
+ }
|
|
|
+ if (_this6.controlCoordinates.mousedown) return true;
|
|
|
+ if (_this6.transitionCapable) {
|
|
|
+ _this6.controlCoordinates.imageLeft = parseInt(_this6.domNodes.image.style.left, 10);
|
|
|
+ }
|
|
|
+ _this6.controlCoordinates.mousedown = true;
|
|
|
+ _this6.controlCoordinates.swipeDiff = 0;
|
|
|
+ _this6.controlCoordinates.swipeYDiff = 0;
|
|
|
+ _this6.controlCoordinates.swipeStart = event.pageX || event.touches[0].pageX;
|
|
|
+ _this6.controlCoordinates.swipeYStart = event.pageY || event.touches[0].pageY;
|
|
|
+ return false;
|
|
|
+ });
|
|
|
+ this.addEventListener(this.domNodes.image, ['touchmove.' + this.eventNamespace, 'mousemove.' + this.eventNamespace, 'MSPointerMove'], function (event) {
|
|
|
+ if (!_this6.controlCoordinates.mousedown) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ if (event.type === 'touchmove') {
|
|
|
+ if (_this6.controlCoordinates.capture === false) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ _this6.controlCoordinates.pointerOffsetX = event.touches[0].clientX;
|
|
|
+ _this6.controlCoordinates.pointerOffsetY = event.touches[0].clientY;
|
|
|
+ _this6.controlCoordinates.touchCount = event.touches.length;
|
|
|
+ _this6.controlCoordinates.touchmoveCount++;
|
|
|
+ if (_this6.controlCoordinates.touchCount > 1) /* Pinch */{
|
|
|
+ _this6.controlCoordinates.pointerOffsetX2 = event.touches[1].clientX;
|
|
|
+ _this6.controlCoordinates.pointerOffsetY2 = event.touches[1].clientY;
|
|
|
+ _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));
|
|
|
+ if (_this6.controlCoordinates.initialPinchDistance === null) {
|
|
|
+ _this6.controlCoordinates.initialPinchDistance = _this6.controlCoordinates.targetPinchDistance;
|
|
|
+ }
|
|
|
+ if (Math.abs(_this6.controlCoordinates.initialPinchDistance - _this6.controlCoordinates.targetPinchDistance) >= 1) {
|
|
|
+ /* Initialize helpers */
|
|
|
+ _this6.controlCoordinates.targetScale = _this6.minMax(_this6.controlCoordinates.targetPinchDistance / _this6.controlCoordinates.initialPinchDistance * _this6.controlCoordinates.initialScale, 1, _this6.options.maxZoom);
|
|
|
+ _this6.controlCoordinates.limitOffsetX = (_this6.controlCoordinates.imgWidth * _this6.controlCoordinates.targetScale - _this6.controlCoordinates.containerWidth) / 2;
|
|
|
+ _this6.controlCoordinates.limitOffsetY = (_this6.controlCoordinates.imgHeight * _this6.controlCoordinates.targetScale - _this6.controlCoordinates.containerHeight) / 2;
|
|
|
+ _this6.controlCoordinates.scaleDifference = _this6.controlCoordinates.targetScale - _this6.controlCoordinates.initialScale;
|
|
|
+ _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);
|
|
|
+ _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);
|
|
|
+ _this6.zoomPanElement(_this6.controlCoordinates.targetOffsetX + "px", _this6.controlCoordinates.targetOffsetY + "px", _this6.controlCoordinates.targetScale);
|
|
|
+ if (_this6.controlCoordinates.targetScale > 1) {
|
|
|
+ _this6.controlCoordinates.zoomed = true;
|
|
|
+ if ((!_this6.domNodes.caption.style.opacity || _this6.domNodes.caption.style.opacity > 0) && _this6.domNodes.caption.style.display !== 'none') {
|
|
|
+ _this6.fadeOut(_this6.domNodes.caption, _this6.options.fadeSpeed);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ _this6.controlCoordinates.initialPinchDistance = _this6.controlCoordinates.targetPinchDistance;
|
|
|
+ _this6.controlCoordinates.initialScale = _this6.controlCoordinates.targetScale;
|
|
|
+ _this6.controlCoordinates.initialOffsetX = _this6.controlCoordinates.targetOffsetX;
|
|
|
+ _this6.controlCoordinates.initialOffsetY = _this6.controlCoordinates.targetOffsetY;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ _this6.controlCoordinates.targetScale = _this6.controlCoordinates.initialScale;
|
|
|
+ _this6.controlCoordinates.limitOffsetX = (_this6.controlCoordinates.imgWidth * _this6.controlCoordinates.targetScale - _this6.controlCoordinates.containerWidth) / 2;
|
|
|
+ _this6.controlCoordinates.limitOffsetY = (_this6.controlCoordinates.imgHeight * _this6.controlCoordinates.targetScale - _this6.controlCoordinates.containerHeight) / 2;
|
|
|
+ _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);
|
|
|
+ _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);
|
|
|
+ if (Math.abs(_this6.controlCoordinates.targetOffsetX) === Math.abs(_this6.controlCoordinates.limitOffsetX)) {
|
|
|
+ _this6.controlCoordinates.initialOffsetX = _this6.controlCoordinates.targetOffsetX;
|
|
|
+ _this6.controlCoordinates.initialPointerOffsetX = _this6.controlCoordinates.pointerOffsetX;
|
|
|
+ }
|
|
|
+ if (Math.abs(_this6.controlCoordinates.targetOffsetY) === Math.abs(_this6.controlCoordinates.limitOffsetY)) {
|
|
|
+ _this6.controlCoordinates.initialOffsetY = _this6.controlCoordinates.targetOffsetY;
|
|
|
+ _this6.controlCoordinates.initialPointerOffsetY = _this6.controlCoordinates.pointerOffsetY;
|
|
|
+ }
|
|
|
+ _this6.setZoomData(_this6.controlCoordinates.initialScale, _this6.controlCoordinates.targetOffsetX, _this6.controlCoordinates.targetOffsetY);
|
|
|
+ _this6.zoomPanElement(_this6.controlCoordinates.targetOffsetX + "px", _this6.controlCoordinates.targetOffsetY + "px", _this6.controlCoordinates.targetScale);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* Mouse Move implementation */
|
|
|
+ if (event.type === 'mousemove' && _this6.controlCoordinates.mousedown) {
|
|
|
+ if (event.type == 'touchmove') return true;
|
|
|
+ event.preventDefault();
|
|
|
+ if (_this6.controlCoordinates.capture === false) return false;
|
|
|
+ _this6.controlCoordinates.pointerOffsetX = event.clientX;
|
|
|
+ _this6.controlCoordinates.pointerOffsetY = event.clientY;
|
|
|
+ _this6.controlCoordinates.targetScale = _this6.controlCoordinates.initialScale;
|
|
|
+ _this6.controlCoordinates.limitOffsetX = (_this6.controlCoordinates.imgWidth * _this6.controlCoordinates.targetScale - _this6.controlCoordinates.containerWidth) / 2;
|
|
|
+ _this6.controlCoordinates.limitOffsetY = (_this6.controlCoordinates.imgHeight * _this6.controlCoordinates.targetScale - _this6.controlCoordinates.containerHeight) / 2;
|
|
|
+ _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);
|
|
|
+ _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);
|
|
|
+ if (Math.abs(_this6.controlCoordinates.targetOffsetX) === Math.abs(_this6.controlCoordinates.limitOffsetX)) {
|
|
|
+ _this6.controlCoordinates.initialOffsetX = _this6.controlCoordinates.targetOffsetX;
|
|
|
+ _this6.controlCoordinates.initialPointerOffsetX = _this6.controlCoordinates.pointerOffsetX;
|
|
|
+ }
|
|
|
+ if (Math.abs(_this6.controlCoordinates.targetOffsetY) === Math.abs(_this6.controlCoordinates.limitOffsetY)) {
|
|
|
+ _this6.controlCoordinates.initialOffsetY = _this6.controlCoordinates.targetOffsetY;
|
|
|
+ _this6.controlCoordinates.initialPointerOffsetY = _this6.controlCoordinates.pointerOffsetY;
|
|
|
+ }
|
|
|
+ _this6.setZoomData(_this6.controlCoordinates.initialScale, _this6.controlCoordinates.targetOffsetX, _this6.controlCoordinates.targetOffsetY);
|
|
|
+ _this6.zoomPanElement(_this6.controlCoordinates.targetOffsetX + "px", _this6.controlCoordinates.targetOffsetY + "px", _this6.controlCoordinates.targetScale);
|
|
|
+ }
|
|
|
+ if (!_this6.controlCoordinates.zoomed) {
|
|
|
+ _this6.controlCoordinates.swipeEnd = event.pageX || event.touches[0].pageX;
|
|
|
+ _this6.controlCoordinates.swipeYEnd = event.pageY || event.touches[0].pageY;
|
|
|
+ _this6.controlCoordinates.swipeDiff = _this6.controlCoordinates.swipeStart - _this6.controlCoordinates.swipeEnd;
|
|
|
+ _this6.controlCoordinates.swipeYDiff = _this6.controlCoordinates.swipeYStart - _this6.controlCoordinates.swipeYEnd;
|
|
|
+ if (_this6.options.animationSlide) {
|
|
|
+ _this6.slide(0, -_this6.controlCoordinates.swipeDiff + 'px');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.addEventListener(this.domNodes.image, ['touchend.' + this.eventNamespace, 'mouseup.' + this.eventNamespace, 'touchcancel.' + this.eventNamespace, 'mouseleave.' + this.eventNamespace, 'pointerup', 'pointercancel', 'MSPointerUp', 'MSPointerCancel'], function (event) {
|
|
|
+ if (_this6.isTouchDevice && event.type === 'touchend') {
|
|
|
+ _this6.controlCoordinates.touchCount = event.touches.length;
|
|
|
+ if (_this6.controlCoordinates.touchCount === 0) /* No touch */{
|
|
|
+ /* Set attributes */
|
|
|
+ if (_this6.currentImage) {
|
|
|
+ _this6.setZoomData(_this6.controlCoordinates.initialScale, _this6.controlCoordinates.targetOffsetX, _this6.controlCoordinates.targetOffsetY);
|
|
|
+ }
|
|
|
+ if (_this6.controlCoordinates.initialScale === 1) {
|
|
|
+ _this6.controlCoordinates.zoomed = false;
|
|
|
+ if (_this6.domNodes.caption.style.display === 'none') {
|
|
|
+ _this6.fadeIn(_this6.domNodes.caption, _this6.options.fadeSpeed);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ _this6.controlCoordinates.initialPinchDistance = null;
|
|
|
+ _this6.controlCoordinates.capture = false;
|
|
|
+ } else if (_this6.controlCoordinates.touchCount === 1) /* Single touch */{
|
|
|
+ _this6.controlCoordinates.initialPointerOffsetX = event.touches[0].clientX;
|
|
|
+ _this6.controlCoordinates.initialPointerOffsetY = event.touches[0].clientY;
|
|
|
+ } else if (_this6.controlCoordinates.touchCount > 1) /* Pinch */{
|
|
|
+ _this6.controlCoordinates.initialPinchDistance = null;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (_this6.controlCoordinates.mousedown) {
|
|
|
+ _this6.controlCoordinates.mousedown = false;
|
|
|
+ var possibleDir = true;
|
|
|
+ if (!_this6.options.loop) {
|
|
|
+ if (_this6.currentImageIndex === 0 && _this6.controlCoordinates.swipeDiff < 0) {
|
|
|
+ possibleDir = false;
|
|
|
+ }
|
|
|
+ if (_this6.currentImageIndex >= _this6.relatedElements.length - 1 && _this6.controlCoordinates.swipeDiff > 0) {
|
|
|
+ possibleDir = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (Math.abs(_this6.controlCoordinates.swipeDiff) > _this6.options.swipeTolerance && possibleDir) {
|
|
|
+ _this6.loadImage(_this6.controlCoordinates.swipeDiff > 0 ? 1 : -1);
|
|
|
+ } else if (_this6.options.animationSlide) {
|
|
|
+ _this6.slide(_this6.options.animationSpeed / 1000, 0 + 'px');
|
|
|
+ }
|
|
|
+ if (_this6.options.swipeClose && Math.abs(_this6.controlCoordinates.swipeYDiff) > 50 && Math.abs(_this6.controlCoordinates.swipeDiff) < _this6.options.swipeTolerance) {
|
|
|
+ _this6.close();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.addEventListener(this.domNodes.image, ['dblclick'], function (event) {
|
|
|
+ if (_this6.isTouchDevice) return;
|
|
|
+ _this6.controlCoordinates.initialPointerOffsetX = event.clientX;
|
|
|
+ _this6.controlCoordinates.initialPointerOffsetY = event.clientY;
|
|
|
+ _this6.controlCoordinates.containerHeight = _this6.getDimensions(_this6.domNodes.image).height;
|
|
|
+ _this6.controlCoordinates.containerWidth = _this6.getDimensions(_this6.domNodes.image).width;
|
|
|
+ _this6.controlCoordinates.imgHeight = _this6.getDimensions(_this6.currentImage).height;
|
|
|
+ _this6.controlCoordinates.imgWidth = _this6.getDimensions(_this6.currentImage).width;
|
|
|
+ _this6.controlCoordinates.containerOffsetX = _this6.domNodes.image.offsetLeft;
|
|
|
+ _this6.controlCoordinates.containerOffsetY = _this6.domNodes.image.offsetTop;
|
|
|
+ _this6.currentImage.classList.add('sl-transition');
|
|
|
+ if (!_this6.controlCoordinates.zoomed) {
|
|
|
+ _this6.controlCoordinates.initialScale = _this6.options.doubleTapZoom;
|
|
|
+ _this6.setZoomData(_this6.controlCoordinates.initialScale, 0, 0);
|
|
|
+ _this6.zoomPanElement(0 + "px", 0 + "px", _this6.controlCoordinates.initialScale);
|
|
|
+ if ((!_this6.domNodes.caption.style.opacity || _this6.domNodes.caption.style.opacity > 0) && _this6.domNodes.caption.style.display !== 'none') {
|
|
|
+ _this6.fadeOut(_this6.domNodes.caption, _this6.options.fadeSpeed);
|
|
|
+ }
|
|
|
+ _this6.controlCoordinates.zoomed = true;
|
|
|
+ } else {
|
|
|
+ _this6.controlCoordinates.initialScale = 1;
|
|
|
+ _this6.setZoomData(_this6.controlCoordinates.initialScale, 0, 0);
|
|
|
+ _this6.zoomPanElement(0 + "px", 0 + "px", _this6.controlCoordinates.initialScale);
|
|
|
+ _this6.controlCoordinates.zoomed = false;
|
|
|
+ if (_this6.domNodes.caption.style.display === 'none') {
|
|
|
+ _this6.fadeIn(_this6.domNodes.caption, _this6.options.fadeSpeed);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ setTimeout(function () {
|
|
|
+ if (_this6.currentImage) {
|
|
|
+ _this6.currentImage.classList.remove('sl-transition');
|
|
|
+ _this6.currentImage.style[_this6.transitionPrefix + 'transform-origin'] = null;
|
|
|
+ }
|
|
|
+ }, 200);
|
|
|
+ _this6.controlCoordinates.capture = true;
|
|
|
+ return false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "getDimensions",
|
|
|
+ value: function getDimensions(element) {
|
|
|
+ var styles = window.getComputedStyle(element),
|
|
|
+ height = element.offsetHeight,
|
|
|
+ width = element.offsetWidth,
|
|
|
+ borderTopWidth = parseFloat(styles.borderTopWidth),
|
|
|
+ borderBottomWidth = parseFloat(styles.borderBottomWidth),
|
|
|
+ paddingTop = parseFloat(styles.paddingTop),
|
|
|
+ paddingBottom = parseFloat(styles.paddingBottom),
|
|
|
+ borderLeftWidth = parseFloat(styles.borderLeftWidth),
|
|
|
+ borderRightWidth = parseFloat(styles.borderRightWidth),
|
|
|
+ paddingLeft = parseFloat(styles.paddingLeft),
|
|
|
+ paddingRight = parseFloat(styles.paddingRight);
|
|
|
+ return {
|
|
|
+ height: height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom,
|
|
|
+ width: width - borderLeftWidth - borderRightWidth - paddingLeft - paddingRight
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "updateHash",
|
|
|
+ value: function updateHash() {
|
|
|
+ var newHash = 'tm-img=' + (this.currentImageIndex + 1),
|
|
|
+ newURL = window.location.href.split('#')[0] + '#' + newHash;
|
|
|
+ this.hashReseted = false;
|
|
|
+ if (this.pushStateSupport) {
|
|
|
+ window.history[this.historyHasChanges ? 'replaceState' : 'pushState']('', document.title, newURL);
|
|
|
+ } else {
|
|
|
+ // what is the browser target of this?
|
|
|
+ if (this.historyHasChanges) {
|
|
|
+ window.location.replace(newURL);
|
|
|
+ } else {
|
|
|
+ window.location.hash = newHash;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (!this.historyHasChanges) {
|
|
|
+ this.urlChangedOnce = true;
|
|
|
+ }
|
|
|
+ this.historyHasChanges = true;
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "resetHash",
|
|
|
+ value: function resetHash() {
|
|
|
+ this.hashReseted = true;
|
|
|
+ if (this.urlChangedOnce) {
|
|
|
+ history.back();
|
|
|
+ } else {
|
|
|
+ if (this.pushStateSupport) {
|
|
|
+ history.pushState('', document.title, window.location.pathname + window.location.search);
|
|
|
+ } else {
|
|
|
+ window.location.hash = '';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ //
|
|
|
+ //in case an history operation is still pending
|
|
|
+ clearTimeout(this.historyUpdateTimeout);
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "updateURL",
|
|
|
+ value: function updateURL() {
|
|
|
+ clearTimeout(this.historyUpdateTimeout);
|
|
|
+ if (!this.historyHasChanges) {
|
|
|
+ this.updateHash(); // first time
|
|
|
+ } else {
|
|
|
+ this.historyUpdateTimeout = setTimeout(this.updateHash.bind(this), 800);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "setCaption",
|
|
|
+ value: function setCaption(captionText, imageWidth) {
|
|
|
+ var _this7 = this;
|
|
|
+ if (this.options.captions && captionText && captionText !== '' && typeof captionText !== "undefined") {
|
|
|
+ this.hide(this.domNodes.caption);
|
|
|
+ this.domNodes.caption.style.width = imageWidth + 'px';
|
|
|
+ this.domNodes.caption.innerHTML = captionText;
|
|
|
+ this.domNodes.image.appendChild(this.domNodes.caption);
|
|
|
+ setTimeout(function () {
|
|
|
+ _this7.fadeIn(_this7.domNodes.caption, _this7.options.fadeSpeed);
|
|
|
+ }, this.options.captionDelay);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "slide",
|
|
|
+ value: function slide(speed, pos) {
|
|
|
+ if (!this.transitionCapable) {
|
|
|
+ return this.domNodes.image.style.left = pos;
|
|
|
+ }
|
|
|
+ this.domNodes.image.style[this.transitionPrefix + 'transform'] = 'translateX(' + pos + ')';
|
|
|
+ this.domNodes.image.style[this.transitionPrefix + 'transition'] = this.transitionPrefix + 'transform ' + speed + 's linear';
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "getRelated",
|
|
|
+ value: function getRelated(rel) {
|
|
|
+ var elems;
|
|
|
+ if (rel && rel !== false && rel !== 'nofollow') {
|
|
|
+ elems = Array.from(this.elements).filter(function (element) {
|
|
|
+ return element.getAttribute('rel') === rel;
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ elems = this.elements;
|
|
|
+ }
|
|
|
+ return elems;
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "openImage",
|
|
|
+ value: function openImage(element) {
|
|
|
+ var _this8 = this;
|
|
|
+ element.dispatchEvent(new Event('show.' + this.eventNamespace));
|
|
|
+ this.globalScrollbarWidth = this.getScrollbarWidth();
|
|
|
+ if (this.options.disableScroll) {
|
|
|
+ this.toggleScrollbar('hide');
|
|
|
+ this.globalScrollbarWidth = 0;
|
|
|
+ }
|
|
|
+ if (this.options.htmlClass && this.options.htmlClass !== '') {
|
|
|
+ document.querySelector('html').classList.add(this.options.htmlClass);
|
|
|
+ }
|
|
|
+ document.body.appendChild(this.domNodes.wrapper);
|
|
|
+ this.domNodes.wrapper.appendChild(this.domNodes.image);
|
|
|
+ if (this.options.overlay) {
|
|
|
+ document.body.appendChild(this.domNodes.overlay);
|
|
|
+ }
|
|
|
+ this.relatedElements = this.getRelated(element.rel);
|
|
|
+ if (this.options.showCounter) {
|
|
|
+ if (this.relatedElements.length == 1 && this.domNodes.wrapper.contains(this.domNodes.counter)) {
|
|
|
+ this.domNodes.wrapper.removeChild(this.domNodes.counter);
|
|
|
+ } else if (this.relatedElements.length > 1 && !this.domNodes.wrapper.contains(this.domNodes.counter)) {
|
|
|
+ this.domNodes.wrapper.appendChild(this.domNodes.counter);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (this.options.download && this.domNodes.download) {
|
|
|
+ this.domNodes.wrapper.appendChild(this.domNodes.download);
|
|
|
+ }
|
|
|
+ this.isAnimating = true;
|
|
|
+ this.currentImageIndex = this.relatedElements.indexOf(element);
|
|
|
+ var targetURL = element.getAttribute(this.options.sourceAttr);
|
|
|
+ this.currentImage = document.createElement('img');
|
|
|
+ this.currentImage.style.display = 'none';
|
|
|
+ this.currentImage.setAttribute('src', targetURL);
|
|
|
+ this.currentImage.dataset.scale = 1;
|
|
|
+ this.currentImage.dataset.translateX = 0;
|
|
|
+ this.currentImage.dataset.translateY = 0;
|
|
|
+ if (this.loadedImages.indexOf(targetURL) === -1) {
|
|
|
+ this.loadedImages.push(targetURL);
|
|
|
+ }
|
|
|
+ this.domNodes.image.innerHTML = '';
|
|
|
+ this.domNodes.image.setAttribute('style', '');
|
|
|
+ this.domNodes.image.appendChild(this.currentImage);
|
|
|
+ this.fadeIn(this.domNodes.overlay, this.options.fadeSpeed);
|
|
|
+ this.fadeIn([this.domNodes.counter, this.domNodes.navigation, this.domNodes.closeButton, this.domNodes.download], this.options.fadeSpeed);
|
|
|
+ this.show(this.domNodes.spinner);
|
|
|
+ this.domNodes.counter.querySelector('.sl-current').innerHTML = this.currentImageIndex + 1;
|
|
|
+ this.domNodes.counter.querySelector('.sl-total').innerHTML = this.relatedElements.length;
|
|
|
+ this.adjustImage();
|
|
|
+ if (this.options.preloading) {
|
|
|
+ this.preload();
|
|
|
+ }
|
|
|
+ setTimeout(function () {
|
|
|
+ element.dispatchEvent(new Event('shown.' + _this8.eventNamespace));
|
|
|
+ }, this.options.animationSpeed);
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "forceFocus",
|
|
|
+ value: function forceFocus() {
|
|
|
+ var _this9 = this;
|
|
|
+ this.removeEventListener(document, 'focusin.' + this.eventNamespace);
|
|
|
+ this.addEventListener(document, 'focusin.' + this.eventNamespace, function (event) {
|
|
|
+ if (document !== event.target && _this9.domNodes.wrapper !== event.target && !_this9.domNodes.wrapper.contains(event.target)) {
|
|
|
+ _this9.domNodes.wrapper.focus();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // utility
|
|
|
+ }, {
|
|
|
+ key: "addEventListener",
|
|
|
+ value: function addEventListener(elements, events, callback, opts) {
|
|
|
+ elements = this.wrap(elements);
|
|
|
+ events = this.wrap(events);
|
|
|
+ var _iterator = _createForOfIteratorHelper(elements),
|
|
|
+ _step;
|
|
|
+ try {
|
|
|
+ for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
|
+ var element = _step.value;
|
|
|
+ if (!element.namespaces) {
|
|
|
+ element.namespaces = {};
|
|
|
+ } // save the namespaces addEventListener the DOM element itself
|
|
|
+ var _iterator2 = _createForOfIteratorHelper(events),
|
|
|
+ _step2;
|
|
|
+ try {
|
|
|
+ for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
|
|
|
+ var event = _step2.value;
|
|
|
+ var options = opts || false;
|
|
|
+ var needsPassiveFix = ['touchstart', 'touchmove', 'mousewheel', 'DOMMouseScroll'].indexOf(event.split('.')[0]) >= 0;
|
|
|
+ if (needsPassiveFix && this.isPassiveEventsSupported) {
|
|
|
+ if (_typeof(options) === 'object') {
|
|
|
+ options.passive = true;
|
|
|
+ } else {
|
|
|
+ options = {
|
|
|
+ passive: true
|
|
|
+ };
|
|
|
+ }
|
|
|
+ }
|
|
|
+ element.namespaces[event] = callback;
|
|
|
+ element.addEventListener(event.split('.')[0], callback, options);
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ _iterator2.e(err);
|
|
|
+ } finally {
|
|
|
+ _iterator2.f();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ _iterator.e(err);
|
|
|
+ } finally {
|
|
|
+ _iterator.f();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "removeEventListener",
|
|
|
+ value: function removeEventListener(elements, events) {
|
|
|
+ elements = this.wrap(elements);
|
|
|
+ events = this.wrap(events);
|
|
|
+ var _iterator3 = _createForOfIteratorHelper(elements),
|
|
|
+ _step3;
|
|
|
+ try {
|
|
|
+ for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
|
|
|
+ var element = _step3.value;
|
|
|
+ var _iterator4 = _createForOfIteratorHelper(events),
|
|
|
+ _step4;
|
|
|
+ try {
|
|
|
+ for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
|
|
|
+ var event = _step4.value;
|
|
|
+ if (element.namespaces && element.namespaces[event]) {
|
|
|
+ element.removeEventListener(event.split('.')[0], element.namespaces[event]);
|
|
|
+ delete element.namespaces[event];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ _iterator4.e(err);
|
|
|
+ } finally {
|
|
|
+ _iterator4.f();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ _iterator3.e(err);
|
|
|
+ } finally {
|
|
|
+ _iterator3.f();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "fadeOut",
|
|
|
+ value: function fadeOut(elements, duration, callback) {
|
|
|
+ var _this10 = this;
|
|
|
+ elements = this.wrap(elements);
|
|
|
+ var _iterator5 = _createForOfIteratorHelper(elements),
|
|
|
+ _step5;
|
|
|
+ try {
|
|
|
+ for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
|
|
|
+ var element = _step5.value;
|
|
|
+ element.style.opacity = parseFloat(element) || window.getComputedStyle(element).getPropertyValue("opacity");
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ _iterator5.e(err);
|
|
|
+ } finally {
|
|
|
+ _iterator5.f();
|
|
|
+ }
|
|
|
+ this.isFadeIn = false;
|
|
|
+ var step = 16.66666 / (duration || this.options.fadeSpeed),
|
|
|
+ fade = function fade() {
|
|
|
+ var currentOpacity = parseFloat(elements[0].style.opacity);
|
|
|
+ if ((currentOpacity -= step) < 0) {
|
|
|
+ var _iterator6 = _createForOfIteratorHelper(elements),
|
|
|
+ _step6;
|
|
|
+ try {
|
|
|
+ for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
|
|
|
+ var element = _step6.value;
|
|
|
+ element.style.display = "none";
|
|
|
+ // element.style.opacity = '';
|
|
|
+ element.style.opacity = 1;
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ _iterator6.e(err);
|
|
|
+ } finally {
|
|
|
+ _iterator6.f();
|
|
|
+ }
|
|
|
+ callback && callback.call(_this10, elements);
|
|
|
+ } else {
|
|
|
+ var _iterator7 = _createForOfIteratorHelper(elements),
|
|
|
+ _step7;
|
|
|
+ try {
|
|
|
+ for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
|
|
|
+ var _element = _step7.value;
|
|
|
+ _element.style.opacity = currentOpacity;
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ _iterator7.e(err);
|
|
|
+ } finally {
|
|
|
+ _iterator7.f();
|
|
|
+ }
|
|
|
+ requestAnimationFrame(fade);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ fade();
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "fadeIn",
|
|
|
+ value: function fadeIn(elements, duration, callback, display) {
|
|
|
+ var _this11 = this;
|
|
|
+ elements = this.wrap(elements);
|
|
|
+ var _iterator8 = _createForOfIteratorHelper(elements),
|
|
|
+ _step8;
|
|
|
+ try {
|
|
|
+ for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
|
|
|
+ var element = _step8.value;
|
|
|
+ if (element) {
|
|
|
+ element.style.opacity = 0;
|
|
|
+ element.style.display = display || "block";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ _iterator8.e(err);
|
|
|
+ } finally {
|
|
|
+ _iterator8.f();
|
|
|
+ }
|
|
|
+ this.isFadeIn = true;
|
|
|
+ var opacityTarget = parseFloat(elements[0].dataset.opacityTarget || 1),
|
|
|
+ step = 16.66666 * opacityTarget / (duration || this.options.fadeSpeed),
|
|
|
+ fade = function fade() {
|
|
|
+ var currentOpacity = parseFloat(elements[0].style.opacity);
|
|
|
+ if (!((currentOpacity += step) > opacityTarget)) {
|
|
|
+ var _iterator9 = _createForOfIteratorHelper(elements),
|
|
|
+ _step9;
|
|
|
+ try {
|
|
|
+ for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
|
|
|
+ var element = _step9.value;
|
|
|
+ if (element) {
|
|
|
+ element.style.opacity = currentOpacity;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ _iterator9.e(err);
|
|
|
+ } finally {
|
|
|
+ _iterator9.f();
|
|
|
+ }
|
|
|
+ if (!_this11.isFadeIn) return;
|
|
|
+ requestAnimationFrame(fade);
|
|
|
+ } else {
|
|
|
+ var _iterator10 = _createForOfIteratorHelper(elements),
|
|
|
+ _step10;
|
|
|
+ try {
|
|
|
+ for (_iterator10.s(); !(_step10 = _iterator10.n()).done;) {
|
|
|
+ var _element2 = _step10.value;
|
|
|
+ if (_element2) {
|
|
|
+ _element2.style.opacity = opacityTarget;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ _iterator10.e(err);
|
|
|
+ } finally {
|
|
|
+ _iterator10.f();
|
|
|
+ }
|
|
|
+ callback && callback.call(_this11, elements);
|
|
|
+ }
|
|
|
+ };
|
|
|
+ fade();
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "hide",
|
|
|
+ value: function hide(elements) {
|
|
|
+ elements = this.wrap(elements);
|
|
|
+ var _iterator11 = _createForOfIteratorHelper(elements),
|
|
|
+ _step11;
|
|
|
+ try {
|
|
|
+ for (_iterator11.s(); !(_step11 = _iterator11.n()).done;) {
|
|
|
+ var element = _step11.value;
|
|
|
+ if (element.style.display != 'none') {
|
|
|
+ element.dataset.initialDisplay = element.style.display;
|
|
|
+ }
|
|
|
+ element.style.display = 'none';
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ _iterator11.e(err);
|
|
|
+ } finally {
|
|
|
+ _iterator11.f();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "show",
|
|
|
+ value: function show(elements, display) {
|
|
|
+ elements = this.wrap(elements);
|
|
|
+ var _iterator12 = _createForOfIteratorHelper(elements),
|
|
|
+ _step12;
|
|
|
+ try {
|
|
|
+ for (_iterator12.s(); !(_step12 = _iterator12.n()).done;) {
|
|
|
+ var element = _step12.value;
|
|
|
+ element.style.display = element.dataset.initialDisplay || display || 'block';
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ _iterator12.e(err);
|
|
|
+ } finally {
|
|
|
+ _iterator12.f();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "wrap",
|
|
|
+ value: function wrap(input) {
|
|
|
+ return typeof input[Symbol.iterator] === 'function' && typeof input !== 'string' ? input : [input];
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "on",
|
|
|
+ value: function on(events, callback) {
|
|
|
+ events = this.wrap(events);
|
|
|
+ var _iterator13 = _createForOfIteratorHelper(this.elements),
|
|
|
+ _step13;
|
|
|
+ try {
|
|
|
+ for (_iterator13.s(); !(_step13 = _iterator13.n()).done;) {
|
|
|
+ var element = _step13.value;
|
|
|
+ if (!element.fullyNamespacedEvents) {
|
|
|
+ element.fullyNamespacedEvents = {};
|
|
|
+ }
|
|
|
+ var _iterator14 = _createForOfIteratorHelper(events),
|
|
|
+ _step14;
|
|
|
+ try {
|
|
|
+ for (_iterator14.s(); !(_step14 = _iterator14.n()).done;) {
|
|
|
+ var event = _step14.value;
|
|
|
+ element.fullyNamespacedEvents[event] = callback;
|
|
|
+ element.addEventListener(event, callback);
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ _iterator14.e(err);
|
|
|
+ } finally {
|
|
|
+ _iterator14.f();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ _iterator13.e(err);
|
|
|
+ } finally {
|
|
|
+ _iterator13.f();
|
|
|
+ }
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "off",
|
|
|
+ value: function off(events) {
|
|
|
+ events = this.wrap(events);
|
|
|
+ var _iterator15 = _createForOfIteratorHelper(this.elements),
|
|
|
+ _step15;
|
|
|
+ try {
|
|
|
+ for (_iterator15.s(); !(_step15 = _iterator15.n()).done;) {
|
|
|
+ var element = _step15.value;
|
|
|
+ var _iterator16 = _createForOfIteratorHelper(events),
|
|
|
+ _step16;
|
|
|
+ try {
|
|
|
+ for (_iterator16.s(); !(_step16 = _iterator16.n()).done;) {
|
|
|
+ var event = _step16.value;
|
|
|
+ if (typeof element.fullyNamespacedEvents !== 'undefined' && event in element.fullyNamespacedEvents) {
|
|
|
+ element.removeEventListener(event, element.fullyNamespacedEvents[event]);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ _iterator16.e(err);
|
|
|
+ } finally {
|
|
|
+ _iterator16.f();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } catch (err) {
|
|
|
+ _iterator15.e(err);
|
|
|
+ } finally {
|
|
|
+ _iterator15.f();
|
|
|
+ }
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+
|
|
|
+ // api
|
|
|
+ }, {
|
|
|
+ key: "open",
|
|
|
+ value: function open(elem) {
|
|
|
+ var position = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
|
+ elem = elem || this.elements[0];
|
|
|
+ if (typeof jQuery !== "undefined" && elem instanceof jQuery) {
|
|
|
+ elem = elem.get(0);
|
|
|
+ }
|
|
|
+ if (position > 0) {
|
|
|
+ elem = this.elements[position];
|
|
|
+ }
|
|
|
+ this.initialImageIndex = this.elements.indexOf(elem);
|
|
|
+ if (this.initialImageIndex > -1) {
|
|
|
+ this.openImage(elem);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "openPosition",
|
|
|
+ value: function openPosition(position) {
|
|
|
+ var elem = this.elements[position];
|
|
|
+ this.open(elem, position);
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "next",
|
|
|
+ value: function next() {
|
|
|
+ this.loadImage(1);
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "prev",
|
|
|
+ value: function prev() {
|
|
|
+ this.loadImage(-1);
|
|
|
+ }
|
|
|
+
|
|
|
+ // get some useful data
|
|
|
+ }, {
|
|
|
+ key: "getLighboxData",
|
|
|
+ value: function getLighboxData() {
|
|
|
+ return {
|
|
|
+ currentImageIndex: this.currentImageIndex,
|
|
|
+ currentImage: this.currentImage,
|
|
|
+ globalScrollbarWidth: this.globalScrollbarWidth
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ //close is exposed anyways..
|
|
|
+ }, {
|
|
|
+ key: "destroy",
|
|
|
+ value: function destroy() {
|
|
|
+ //remove all custom event listeners from elements
|
|
|
+ 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]);
|
|
|
+ this.removeEventListener(this.elements, 'click.' + this.eventNamespace);
|
|
|
+ this.removeEventListener(document, 'focusin.' + this.eventNamespace);
|
|
|
+ this.removeEventListener(document.body, 'contextmenu.' + this.eventNamespace);
|
|
|
+ this.removeEventListener(document.body, 'keyup.' + this.eventNamespace);
|
|
|
+ this.removeEventListener(this.domNodes.navigation.getElementsByTagName('button'), 'click.' + this.eventNamespace);
|
|
|
+ this.removeEventListener(this.domNodes.closeButton, 'click.' + this.eventNamespace);
|
|
|
+ this.removeEventListener(window, 'resize.' + this.eventNamespace);
|
|
|
+ this.removeEventListener(window, 'hashchange.' + this.eventNamespace);
|
|
|
+ this.close();
|
|
|
+ if (this.isOpen) {
|
|
|
+ document.body.removeChild(this.domNodes.wrapper);
|
|
|
+ document.body.removeChild(this.domNodes.overlay);
|
|
|
+ }
|
|
|
+ this.elements = null;
|
|
|
+ }
|
|
|
+ }, {
|
|
|
+ key: "refresh",
|
|
|
+ value: function refresh() {
|
|
|
+ if (!this.initialSelector) {
|
|
|
+ throw 'refreshing only works when you initialize using a selector!';
|
|
|
+ }
|
|
|
+ var options = this.options,
|
|
|
+ selector = this.initialSelector;
|
|
|
+ this.destroy();
|
|
|
+ this.constructor(selector, options);
|
|
|
+ return this;
|
|
|
+ }
|
|
|
+ }]);
|
|
|
+ return SimpleLightbox;
|
|
|
+}();
|
|
|
+var _default = SimpleLightbox;
|
|
|
+exports["default"] = _default;
|
|
|
+global.SimpleLightbox = SimpleLightbox;
|
|
|
+
|
|
|
+}).call(this)}).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {})
|
|
|
+},{}]},{},[1]);
|
@Mostafijur
2 tahun lalu
