simple-lightbox.js 78 KB

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