1"use strict"; 2(self["webpackChunk"] = self["webpackChunk"] || []).push([["vendor--lightgallery"],{ 3
vendor: 98,647 bytes, lines 4-2555
4/***/ "./node_modules/lightgallery/lightgallery.es5.js": 5/*!*******************************************************!*\ 6 !*** ./node_modules/lightgallery/lightgallery.es5.js ***! 7 \*******************************************************/ 8/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 9 10__webpack_require__.r(__webpack_exports__); 11/* harmony export */ __webpack_require__.d(__webpack_exports__, { 12/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) 13/* harmony export */ }); 14/*! 15 * lightgallery | 2.8.3 | March 1st 2025 16 * http://www.lightgalleryjs.com/ 17 * Copyright (c) 2020 Sachin Neravath; 18 * @license GPLv3 19 */ 20 21/*! ***************************************************************************** 22Copyright (c) Microsoft Corporation. 23 24Permission to use, copy, modify, and/or distribute this software for any 25purpose with or without fee is hereby granted. 26 27THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 28REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY 29AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 30INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 31LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 32OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 33PERFORMANCE OF THIS SOFTWARE. 34***************************************************************************** */ 35 36var __assign = function () { 37 __assign = Object.assign || function __assign(t) { 38 for (var s, i = 1, n = arguments.length; i < n; i++) { 39 s = arguments[i]; 40 for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; 41 } 42 return t; 43 }; 44 return __assign.apply(this, arguments); 45}; 46function __spreadArrays() { 47 for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length; 48 for (var r = Array(s), k = 0, i = 0; i < il; i++) for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) r[k] = a[j]; 49 return r; 50} 51 52/** 53 * List of lightGallery events 54 * All events should be documented here 55 * Below interfaces are used to build the website documentations 56 * */ 57var lGEvents = { 58 afterAppendSlide: 'lgAfterAppendSlide', 59 init: 'lgInit', 60 hasVideo: 'lgHasVideo', 61 containerResize: 'lgContainerResize', 62 updateSlides: 'lgUpdateSlides', 63 afterAppendSubHtml: 'lgAfterAppendSubHtml', 64 beforeOpen: 'lgBeforeOpen', 65 afterOpen: 'lgAfterOpen', 66 slideItemLoad: 'lgSlideItemLoad', 67 beforeSlide: 'lgBeforeSlide', 68 afterSlide: 'lgAfterSlide', 69 posterClick: 'lgPosterClick', 70 dragStart: 'lgDragStart', 71 dragMove: 'lgDragMove', 72 dragEnd: 'lgDragEnd', 73 beforeNextSlide: 'lgBeforeNextSlide', 74 beforePrevSlide: 'lgBeforePrevSlide', 75 beforeClose: 'lgBeforeClose', 76 afterClose: 'lgAfterClose', 77 rotateLeft: 'lgRotateLeft', 78 rotateRight: 'lgRotateRight', 79 flipHorizontal: 'lgFlipHorizontal', 80 flipVertical: 'lgFlipVertical', 81 autoplay: 'lgAutoplay', 82 autoplayStart: 'lgAutoplayStart', 83 autoplayStop: 'lgAutoplayStop' 84}; 85var lightGalleryCoreSettings = { 86 mode: 'lg-slide', 87 easing: 'ease', 88 speed: 400, 89 licenseKey: '0000-0000-000-0000', 90 height: '100%', 91 width: '100%', 92 addClass: '', 93 startClass: 'lg-start-zoom', 94 backdropDuration: 300, 95 container: '', 96 startAnimationDuration: 400, 97 zoomFromOrigin: true, 98 hideBarsDelay: 0, 99 showBarsAfter: 10000, 100 slideDelay: 0, 101 supportLegacyBrowser: true, 102 allowMediaOverlap: false, 103 videoMaxSize: '1280-720', 104 loadYouTubePoster: true, 105 defaultCaptionHeight: 0, 106 ariaLabelledby: '', 107 ariaDescribedby: '', 108 resetScrollPosition: true, 109 hideScrollbar: false, 110 closable: true, 111 swipeToClose: true, 112 closeOnTap: true, 113 showCloseIcon: true, 114 showMaximizeIcon: false, 115 loop: true, 116 escKey: true, 117 keyPress: true, 118 trapFocus: true, 119 controls: true, 120 slideEndAnimation: true, 121 hideControlOnEnd: false, 122 mousewheel: false, 123 getCaptionFromTitleOrAlt: true, 124 appendSubHtmlTo: '.lg-sub-html', 125 subHtmlSelectorRelative: false, 126 preload: 2, 127 numberOfSlideItemsInDom: 10, 128 selector: '', 129 selectWithin: '', 130 nextHtml: '', 131 prevHtml: '', 132 index: 0, 133 iframeWidth: '100%', 134 iframeHeight: '100%', 135 iframeMaxWidth: '100%', 136 iframeMaxHeight: '100%', 137 download: true, 138 counter: true, 139 appendCounterTo: '.lg-toolbar', 140 swipeThreshold: 50, 141 enableSwipe: true, 142 enableDrag: true, 143 dynamic: false, 144 dynamicEl: [], 145 extraProps: [], 146 exThumbImage: '', 147 isMobile: undefined, 148 mobileSettings: { 149 controls: false, 150 showCloseIcon: false, 151 download: false 152 }, 153 plugins: [], 154 strings: { 155 closeGallery: 'Close gallery', 156 toggleMaximize: 'Toggle maximize', 157 previousSlide: 'Previous slide', 158 nextSlide: 'Next slide', 159 download: 'Download', 160 playVideo: 'Play video', 161 mediaLoadingFailed: 'Oops... Failed to load content...' 162 } 163}; 164function initLgPolyfills() { 165 (function () { 166 if (typeof window.CustomEvent === 'function') return false; 167 function CustomEvent(event, params) { 168 params = params || { 169 bubbles: false, 170 cancelable: false, 171 detail: null 172 }; 173 var evt = document.createEvent('CustomEvent'); 174 evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail); 175 return evt; 176 } 177 window.CustomEvent = CustomEvent; 178 })(); 179 (function () { 180 if (!Element.prototype.matches) { 181 Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector; 182 } 183 })(); 184} 185var lgQuery = /** @class */function () { 186 function lgQuery(selector) { 187 this.cssVenderPrefixes = ['TransitionDuration', 'TransitionTimingFunction', 'Transform', 'Transition']; 188 this.selector = this._getSelector(selector); 189 this.firstElement = this._getFirstEl(); 190 return this; 191 } 192 lgQuery.generateUUID = function () { 193 return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { 194 var r = Math.random() * 16 | 0, 195 v = c == 'x' ? r : r & 0x3 | 0x8; 196 return v.toString(16); 197 }); 198 }; 199 lgQuery.prototype._getSelector = function (selector, context) { 200 if (context === void 0) { 201 context = document; 202 } 203 if (typeof selector !== 'string') { 204 return selector; 205 } 206 context = context || document; 207 var fl = selector.substring(0, 1); 208 if (fl === '#') { 209 return context.querySelector(selector); 210 } else { 211 return context.querySelectorAll(selector); 212 } 213 }; 214 lgQuery.prototype._each = function (func) { 215 if (!this.selector) { 216 return this; 217 } 218 if (this.selector.length !== undefined) { 219 [].forEach.call(this.selector, func); 220 } else { 221 func(this.selector, 0); 222 } 223 return this; 224 }; 225 lgQuery.prototype._setCssVendorPrefix = function (el, cssProperty, value) { 226 // prettier-ignore 227 var property = cssProperty.replace(/-([a-z])/gi, function (s, group1) { 228 return group1.toUpperCase(); 229 }); 230 if (this.cssVenderPrefixes.indexOf(property) !== -1) { 231 el.style[property.charAt(0).toLowerCase() + property.slice(1)] = value; 232 el.style['webkit' + property] = value; 233 el.style['moz' + property] = value; 234 el.style['ms' + property] = value; 235 el.style['o' + property] = value; 236 } else { 237 el.style[property] = value; 238 } 239 }; 240 lgQuery.prototype._getFirstEl = function () { 241 if (this.selector && this.selector.length !== undefined) { 242 return this.selector[0]; 243 } else { 244 return this.selector; 245 } 246 }; 247 lgQuery.prototype.isEventMatched = function (event, eventName) { 248 var eventNamespace = eventName.split('.'); 249 return event.split('.').filter(function (e) { 250 return e; 251 }).every(function (e) { 252 return eventNamespace.indexOf(e) !== -1; 253 }); 254 }; 255 lgQuery.prototype.attr = function (attr, value) { 256 if (value === undefined) { 257 if (!this.firstElement) { 258 return ''; 259 } 260 return this.firstElement.getAttribute(attr); 261 } 262 this._each(function (el) { 263 el.setAttribute(attr, value); 264 }); 265 return this; 266 }; 267 lgQuery.prototype.find = function (selector) { 268 return $LG(this._getSelector(selector, this.selector)); 269 }; 270 lgQuery.prototype.first = function () { 271 if (this.selector && this.selector.length !== undefined) { 272 return $LG(this.selector[0]); 273 } else { 274 return $LG(this.selector); 275 } 276 }; 277 lgQuery.prototype.eq = function (index) { 278 return $LG(this.selector[index]); 279 }; 280 lgQuery.prototype.parent = function () { 281 return $LG(this.selector.parentElement); 282 }; 283 lgQuery.prototype.get = function () { 284 return this._getFirstEl(); 285 }; 286 lgQuery.prototype.removeAttr = function (attributes) { 287 var attrs = attributes.split(' '); 288 this._each(function (el) { 289 attrs.forEach(function (attr) { 290 return el.removeAttribute(attr); 291 }); 292 }); 293 return this; 294 }; 295 lgQuery.prototype.wrap = function (className) { 296 if (!this.firstElement) { 297 return this; 298 } 299 var wrapper = document.createElement('div'); 300 wrapper.className = className; 301 this.firstElement.parentNode.insertBefore(wrapper, this.firstElement); 302 this.firstElement.parentNode.removeChild(this.firstElement); 303 wrapper.appendChild(this.firstElement); 304 return this; 305 }; 306 lgQuery.prototype.addClass = function (classNames) { 307 if (classNames === void 0) { 308 classNames = ''; 309 } 310 this._each(function (el) { 311 // IE doesn't support multiple arguments 312 classNames.split(' ').forEach(function (className) { 313 if (className) { 314 el.classList.add(className); 315 } 316 }); 317 }); 318 return this; 319 }; 320 lgQuery.prototype.removeClass = function (classNames) { 321 this._each(function (el) { 322 // IE doesn't support multiple arguments 323 classNames.split(' ').forEach(function (className) { 324 if (className) { 325 el.classList.remove(className); 326 } 327 }); 328 }); 329 return this; 330 }; 331 lgQuery.prototype.hasClass = function (className) { 332 if (!this.firstElement) { 333 return false; 334 } 335 return this.firstElement.classList.contains(className); 336 }; 337 lgQuery.prototype.hasAttribute = function (attribute) { 338 if (!this.firstElement) { 339 return false; 340 } 341 return this.firstElement.hasAttribute(attribute); 342 }; 343 lgQuery.prototype.toggleClass = function (className) { 344 if (!this.firstElement) { 345 return this; 346 } 347 if (this.hasClass(className)) { 348 this.removeClass(className); 349 } else { 350 this.addClass(className); 351 } 352 return this; 353 }; 354 lgQuery.prototype.css = function (property, value) { 355 var _this = this; 356 this._each(function (el) { 357 _this._setCssVendorPrefix(el, property, value); 358 }); 359 return this; 360 }; 361 // Need to pass separate namespaces for separate elements 362 lgQuery.prototype.on = function (events, listener) { 363 var _this = this; 364 if (!this.selector) { 365 return this; 366 } 367 events.split(' ').forEach(function (event) { 368 if (!Array.isArray(lgQuery.eventListeners[event])) { 369 lgQuery.eventListeners[event] = []; 370 } 371 lgQuery.eventListeners[event].push(listener); 372 _this.selector.addEventListener(event.split('.')[0], listener); 373 }); 374 return this; 375 }; 376 // @todo - test this 377 lgQuery.prototype.once = function (event, listener) { 378 var _this = this; 379 this.on(event, function () { 380 _this.off(event); 381 listener(event); 382 }); 383 return this; 384 }; 385 lgQuery.prototype.off = function (event) { 386 var _this = this; 387 if (!this.selector) { 388 return this; 389 } 390 Object.keys(lgQuery.eventListeners).forEach(function (eventName) { 391 if (_this.isEventMatched(event, eventName)) { 392 lgQuery.eventListeners[eventName].forEach(function (listener) { 393 _this.selector.removeEventListener(eventName.split('.')[0], listener); 394 }); 395 lgQuery.eventListeners[eventName] = []; 396 } 397 }); 398 return this; 399 }; 400 lgQuery.prototype.trigger = function (event, detail) { 401 if (!this.firstElement) { 402 return this; 403 } 404 var customEvent = new CustomEvent(event.split('.')[0], { 405 detail: detail || null 406 }); 407 this.firstElement.dispatchEvent(customEvent); 408 return this; 409 }; 410 // Does not support IE 411 lgQuery.prototype.load = function (url) { 412 var _this = this; 413 fetch(url).then(function (res) { 414 return res.text(); 415 }).then(function (html) { 416 _this.selector.innerHTML = html; 417 }); 418 return this; 419 }; 420 lgQuery.prototype.html = function (html) { 421 if (html === undefined) { 422 if (!this.firstElement) { 423 return ''; 424 } 425 return this.firstElement.innerHTML; 426 } 427 this._each(function (el) { 428 el.innerHTML = html; 429 }); 430 return this; 431 }; 432 lgQuery.prototype.append = function (html) { 433 this._each(function (el) { 434 if (typeof html === 'string') { 435 el.insertAdjacentHTML('beforeend', html); 436 } else { 437 el.appendChild(html); 438 } 439 }); 440 return this; 441 }; 442 lgQuery.prototype.prepend = function (html) { 443 this._each(function (el) { 444 if (typeof html === 'string') { 445 el.insertAdjacentHTML('afterbegin', html); 446 } else if (html instanceof HTMLElement) { 447 el.insertBefore(html.cloneNode(true), el.firstChild); 448 } 449 }); 450 return this; 451 }; 452 lgQuery.prototype.remove = function () { 453 this._each(function (el) { 454 el.parentNode.removeChild(el); 455 }); 456 return this; 457 }; 458 lgQuery.prototype.empty = function () { 459 this._each(function (el) { 460 el.innerHTML = ''; 461 }); 462 return this; 463 }; 464 lgQuery.prototype.scrollTop = function (scrollTop) { 465 if (scrollTop !== undefined) { 466 document.body.scrollTop = scrollTop; 467 document.documentElement.scrollTop = scrollTop; 468 return this; 469 } else { 470 return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; 471 } 472 }; 473 lgQuery.prototype.scrollLeft = function (scrollLeft) { 474 if (scrollLeft !== undefined) { 475 document.body.scrollLeft = scrollLeft; 476 document.documentElement.scrollLeft = scrollLeft; 477 return this; 478 } else { 479 return window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0; 480 } 481 }; 482 lgQuery.prototype.offset = function () { 483 if (!this.firstElement) { 484 return { 485 left: 0, 486 top: 0 487 }; 488 } 489 var rect = this.firstElement.getBoundingClientRect(); 490 var bodyMarginLeft = $LG('body').style().marginLeft; 491 // Minus body margin - https://stackoverflow.com/questions/30711548/is-getboundingclientrect-left-returning-a-wrong-value 492 return { 493 left: rect.left - parseFloat(bodyMarginLeft) + this.scrollLeft(), 494 top: rect.top + this.scrollTop() 495 }; 496 }; 497 lgQuery.prototype.style = function () { 498 if (!this.firstElement) { 499 return {}; 500 } 501 return this.firstElement.currentStyle || window.getComputedStyle(this.firstElement); 502 }; 503 // Width without padding and border even if box-sizing is used. 504 lgQuery.prototype.width = function () { 505 var style = this.style(); 506 return this.firstElement.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight); 507 }; 508 // Height without padding and border even if box-sizing is used. 509 lgQuery.prototype.height = function () { 510 var style = this.style(); 511 return this.firstElement.clientHeight - parseFloat(style.paddingTop) - parseFloat(style.paddingBottom); 512 }; 513 lgQuery.eventListeners = {}; 514 return lgQuery; 515}(); 516function $LG(selector) { 517 initLgPolyfills(); 518 return new lgQuery(selector); 519} 520var defaultDynamicOptions = ['src', 'sources', 'subHtml', 'subHtmlUrl', 'html', 'video', 'poster', 'slideName', 'responsive', 'srcset', 'sizes', 'iframe', 'downloadUrl', 'download', 'width', 'facebookShareUrl', 'tweetText', 'iframeTitle', 'twitterShareUrl', 'pinterestShareUrl', 'pinterestText', 'fbHtml', 'disqusIdentifier', 'disqusUrl']; 521// Convert html data-attribute to camalcase 522function convertToData(attr) { 523 // FInd a way for lgsize 524 if (attr === 'href') { 525 return 'src'; 526 } 527 attr = attr.replace('data-', ''); 528 attr = attr.charAt(0).toLowerCase() + attr.slice(1); 529 attr = attr.replace(/-([a-z])/g, function (g) { 530 return g[1].toUpperCase(); 531 }); 532 return attr; 533} 534var utils = { 535 /** 536 * Fetches HTML content from a given URL and inserts it into a specified element. 537 * 538 * @param url - The URL to fetch the HTML content from. 539 * @param element - The DOM element (jQuery object) to insert the HTML content into. 540 * @param insertMethod - The method to insert the HTML ('append' or 'replace'). 541 */ 542 fetchCaptionFromUrl: function (url, element, insertMethod) { 543 // Fetch content from the URL 544 fetch(url).then(function (response) { 545 return response.text(); 546 }).then(function (htmlContent) { 547 if (insertMethod === 'append') { 548 var contentDiv = "<div class=\"lg-sub-html\">" + htmlContent + "</div>"; 549 element.append(contentDiv); 550 } else { 551 element.html(htmlContent); 552 } 553 }); 554 }, 555 /** 556 * get possible width and height from the lgSize attribute. Used for ZoomFromOrigin option 557 */ 558 getSize: function (el, container, spacing, defaultLgSize) { 559 if (spacing === void 0) { 560 spacing = 0; 561 } 562 var LGel = $LG(el); 563 var lgSize = LGel.attr('data-lg-size') || defaultLgSize; 564 if (!lgSize) { 565 return; 566 } 567 var isResponsiveSizes = lgSize.split(','); 568 // if at-least two viewport sizes are available 569 if (isResponsiveSizes[1]) { 570 var wWidth = window.innerWidth; 571 for (var i = 0; i < isResponsiveSizes.length; i++) { 572 var size_1 = isResponsiveSizes[i]; 573 var responsiveWidth = parseInt(size_1.split('-')[2], 10); 574 if (responsiveWidth > wWidth) { 575 lgSize = size_1; 576 break; 577 } 578 // take last item as last option 579 if (i === isResponsiveSizes.length - 1) { 580 lgSize = size_1; 581 } 582 } 583 } 584 var size = lgSize.split('-'); 585 var width = parseInt(size[0], 10); 586 var height = parseInt(size[1], 10); 587 var cWidth = container.width(); 588 var cHeight = container.height() - spacing; 589 var maxWidth = Math.min(cWidth, width); 590 var maxHeight = Math.min(cHeight, height); 591 var ratio = Math.min(maxWidth / width, maxHeight / height); 592 return { 593 width: width * ratio, 594 height: height * ratio 595 }; 596 }, 597 /** 598 * @desc Get transform value based on the imageSize. Used for ZoomFromOrigin option 599 * @param {jQuery Element} 600 * @returns {String} Transform CSS string 601 */ 602 getTransform: function (el, container, top, bottom, imageSize) { 603 if (!imageSize) { 604 return; 605 } 606 var LGel = $LG(el).find('img').first(); 607 if (!LGel.get()) { 608 return; 609 } 610 var containerRect = container.get().getBoundingClientRect(); 611 var wWidth = containerRect.width; 612 // using innerWidth to include mobile safari bottom bar 613 var wHeight = container.height() - (top + bottom); 614 var elWidth = LGel.width(); 615 var elHeight = LGel.height(); 616 var elStyle = LGel.style(); 617 var x = (wWidth - elWidth) / 2 - LGel.offset().left + (parseFloat(elStyle.paddingLeft) || 0) + (parseFloat(elStyle.borderLeft) || 0) + $LG(window).scrollLeft() + containerRect.left; 618 var y = (wHeight - elHeight) / 2 - LGel.offset().top + (parseFloat(elStyle.paddingTop) || 0) + (parseFloat(elStyle.borderTop) || 0) + $LG(window).scrollTop() + top; 619 var scX = elWidth / imageSize.width; 620 var scY = elHeight / imageSize.height; 621 var transform = 'translate3d(' + (x *= -1) + 'px, ' + (y *= -1) + 'px, 0) scale3d(' + scX + ', ' + scY + ', 1)'; 622 return transform; 623 }, 624 getIframeMarkup: function (iframeWidth, iframeHeight, iframeMaxWidth, iframeMaxHeight, src, iframeTitle) { 625 var title = iframeTitle ? 'title="' + iframeTitle + '"' : ''; 626 return "<div class=\"lg-media-cont lg-has-iframe\" style=\"width:" + iframeWidth + "; max-width:" + iframeMaxWidth + "; height: " + iframeHeight + "; max-height:" + iframeMaxHeight + "\">\n <iframe class=\"lg-object\" frameborder=\"0\" " + title + " src=\"" + src + "\" allowfullscreen=\"true\"></iframe>\n </div>"; 627 }, 628 getImgMarkup: function (index, src, altAttr, srcset, sizes, sources) { 629 var srcsetAttr = srcset ? "srcset=\"" + srcset + "\"" : ''; 630 var sizesAttr = sizes ? "sizes=\"" + sizes + "\"" : ''; 631 var imgMarkup = "<img " + altAttr + " " + srcsetAttr + " " + sizesAttr + " class=\"lg-object lg-image\" data-index=\"" + index + "\" src=\"" + src + "\" />"; 632 var sourceTag = ''; 633 if (sources) { 634 var sourceObj = typeof sources === 'string' ? JSON.parse(sources) : sources; 635 sourceTag = sourceObj.map(function (source) { 636 var attrs = ''; 637 Object.keys(source).forEach(function (key) { 638 // Do not remove the first space as it is required to separate the attributes 639 attrs += " " + key + "=\"" + source[key] + "\""; 640 }); 641 return "<source " + attrs + "></source>"; 642 }); 643 } 644 return "" + sourceTag + imgMarkup; 645 }, 646 // Get src from responsive src 647 getResponsiveSrc: function (srcItms) { 648 var rsWidth = []; 649 var rsSrc = []; 650 var src = ''; 651 for (var i = 0; i < srcItms.length; i++) { 652 var _src = srcItms[i].split(' '); 653 // Manage empty space 654 if (_src[0] === '') { 655 _src.splice(0, 1); 656 } 657 rsSrc.push(_src[0]); 658 rsWidth.push(_src[1]); 659 } 660 var wWidth = window.innerWidth; 661 for (var j = 0; j < rsWidth.length; j++) { 662 if (parseInt(rsWidth[j], 10) > wWidth) { 663 src = rsSrc[j]; 664 break; 665 } 666 } 667 return src; 668 }, 669 isImageLoaded: function (img) { 670 if (!img) return false; 671 // During the onload event, IE correctly identifies any images that 672 // weren’t downloaded as not complete. Others should too. Gecko-based 673 // browsers act like NS4 in that they report this incorrectly. 674 if (!img.complete) { 675 return false; 676 } 677 // However, they do have two very useful properties: naturalWidth and 678 // naturalHeight. These give the true size of the image. If it failed 679 // to load, either of these should be zero. 680 if (img.naturalWidth === 0) { 681 return false; 682 } 683 // No other way of checking: assume it’s ok. 684 return true; 685 }, 686 getVideoPosterMarkup: function (_poster, dummyImg, videoContStyle, playVideoString, _isVideo) { 687 var videoClass = ''; 688 if (_isVideo && _isVideo.youtube) { 689 videoClass = 'lg-has-youtube'; 690 } else if (_isVideo && _isVideo.vimeo) { 691 videoClass = 'lg-has-vimeo'; 692 } else { 693 videoClass = 'lg-has-html5'; 694 } 695 var _dummy = dummyImg; 696 if (typeof dummyImg !== 'string') { 697 _dummy = dummyImg.outerHTML; 698 } 699 return "<div class=\"lg-video-cont " + videoClass + "\" style=\"" + videoContStyle + "\">\n <div class=\"lg-video-play-button\">\n <svg\n viewBox=\"0 0 20 20\"\n preserveAspectRatio=\"xMidYMid\"\n focusable=\"false\"\n aria-labelledby=\"" + playVideoString + "\"\n role=\"img\"\n class=\"lg-video-play-icon\"\n >\n <title>" + playVideoString + "</title>\n <polygon class=\"lg-video-play-icon-inner\" points=\"1,0 20,10 1,20\"></polygon>\n </svg>\n <svg class=\"lg-video-play-icon-bg\" viewBox=\"0 0 50 50\" focusable=\"false\">\n <circle cx=\"50%\" cy=\"50%\" r=\"20\"></circle></svg>\n <svg class=\"lg-video-play-icon-circle\" viewBox=\"0 0 50 50\" focusable=\"false\">\n <circle cx=\"50%\" cy=\"50%\" r=\"20\"></circle>\n </svg>\n </div>\n " + _dummy + "\n <img class=\"lg-object lg-video-poster\" src=\"" + _poster + "\" />\n </div>"; 700 }, 701 getFocusableElements: function (container) { 702 var elements = container.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])'); 703 var visibleElements = [].filter.call(elements, function (element) { 704 var style = window.getComputedStyle(element); 705 return style.display !== 'none' && style.visibility !== 'hidden'; 706 }); 707 return visibleElements; 708 }, 709 /** 710 * @desc Create dynamic elements array from gallery items when dynamic option is false 711 * It helps to avoid frequent DOM interaction 712 * and avoid multiple checks for dynamic elments 713 * 714 * @returns {Array} dynamicEl 715 */ 716 getDynamicOptions: function (items, extraProps, getCaptionFromTitleOrAlt, exThumbImage) { 717 var dynamicElements = []; 718 var availableDynamicOptions = __spreadArrays(defaultDynamicOptions, extraProps); 719 [].forEach.call(items, function (item) { 720 var dynamicEl = {}; 721 for (var i = 0; i < item.attributes.length; i++) { 722 var attr = item.attributes[i]; 723 if (attr.specified) { 724 var dynamicAttr = convertToData(attr.name); 725 var label = ''; 726 if (availableDynamicOptions.indexOf(dynamicAttr) > -1) { 727 label = dynamicAttr; 728 } 729 if (label) { 730 dynamicEl[label] = attr.value; 731 } 732 } 733 } 734 var currentItem = $LG(item); 735 var alt = currentItem.find('img').first().attr('alt'); 736 var title = currentItem.attr('title'); 737 var thumb = exThumbImage ? currentItem.attr(exThumbImage) : currentItem.find('img').first().attr('src'); 738 dynamicEl.thumb = thumb; 739 if (getCaptionFromTitleOrAlt && !dynamicEl.subHtml) { 740 dynamicEl.subHtml = title || alt || ''; 741 } 742 dynamicEl.alt = alt || title || ''; 743 dynamicElements.push(dynamicEl); 744 }); 745 return dynamicElements; 746 }, 747 isMobile: function () { 748 return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); 749 }, 750 /** 751 * @desc Check the given src is video 752 * @param {String} src 753 * @return {Object} video type 754 * Ex:{ youtube : ["//www.youtube.com/watch?v=c0asJgSyxcY", "c0asJgSyxcY"] } 755 * 756 * @todo - this information can be moved to dynamicEl to avoid frequent calls 757 */ 758 isVideo: function (src, isHTML5VIdeo, index) { 759 if (!src) { 760 if (isHTML5VIdeo) { 761 return { 762 html5: true 763 }; 764 } else { 765 console.error('lightGallery :- data-src is not provided on slide item ' + (index + 1) + '. Please make sure the selector property is properly configured. More info - https://www.lightgalleryjs.com/demos/html-markup/'); 766 return; 767 } 768 } 769 var youtube = src.match(/\/\/(?:www\.)?youtu(?:\.be|be\.com|be-nocookie\.com)\/(?:watch\?v=|embed\/)?([a-z0-9\-\_\%]+)([\&|?][\S]*)*/i); 770 var vimeo = src.match(/\/\/(?:www\.)?(?:player\.)?vimeo.com\/(?:video\/)?([0-9a-z\-_]+)(.*)?/i); 771 var wistia = src.match(/https?:\/\/(.+)?(wistia\.com|wi\.st)\/(medias|embed)\/([0-9a-z\-_]+)(.*)/); 772 if (youtube) { 773 return { 774 youtube: youtube 775 }; 776 } else if (vimeo) { 777 return { 778 vimeo: vimeo 779 }; 780 } else if (wistia) { 781 return { 782 wistia: wistia 783 }; 784 } 785 } 786}; 787 788// @ref - https://stackoverflow.com/questions/3971841/how-to-resize-images-proportionally-keeping-the-aspect-ratio 789// @ref - https://2ality.com/2017/04/setting-up-multi-platform-packages.html 790// Unique id for each gallery 791var lgId = 0; 792var LightGallery = /** @class */function () { 793 function LightGallery(element, options) { 794 this.lgOpened = false; 795 this.index = 0; 796 // lightGallery modules 797 this.plugins = []; 798 // false when lightGallery load first slide content; 799 this.lGalleryOn = false; 800 // True when a slide animation is in progress 801 this.lgBusy = false; 802 this.currentItemsInDom = []; 803 // Scroll top value before lightGallery is opened 804 this.prevScrollTop = 0; 805 this.bodyPaddingRight = 0; 806 this.isDummyImageRemoved = false; 807 this.dragOrSwipeEnabled = false; 808 this.mediaContainerPosition = { 809 top: 0, 810 bottom: 0 811 }; 812 if (!element) { 813 return this; 814 } 815 lgId++; 816 this.lgId = lgId; 817 this.el = element; 818 this.LGel = $LG(element); 819 this.generateSettings(options); 820 this.buildModules(); 821 // When using dynamic mode, ensure dynamicEl is an array 822 if (this.settings.dynamic && this.settings.dynamicEl !== undefined && !Array.isArray(this.settings.dynamicEl)) { 823 throw 'When using dynamic mode, you must also define dynamicEl as an Array.'; 824 } 825 this.galleryItems = this.getItems(); 826 this.normalizeSettings(); 827 // Gallery items 828 this.init(); 829 this.validateLicense(); 830 return this; 831 } 832 LightGallery.prototype.generateSettings = function (options) { 833 // lightGallery settings 834 this.settings = __assign(__assign({}, lightGalleryCoreSettings), options); 835 if (this.settings.isMobile && typeof this.settings.isMobile === 'function' ? this.settings.isMobile() : utils.isMobile()) { 836 var mobileSettings = __assign(__assign({}, this.settings.mobileSettings), this.settings.mobileSettings); 837 this.settings = __assign(__assign({}, this.settings), mobileSettings); 838 } 839 }; 840 LightGallery.prototype.normalizeSettings = function () { 841 if (this.settings.slideEndAnimation) { 842 this.settings.hideControlOnEnd = false; 843 } 844 if (!this.settings.closable) { 845 this.settings.swipeToClose = false; 846 } 847 // And reset it on close to get the correct value next time 848 this.zoomFromOrigin = this.settings.zoomFromOrigin; 849 // At the moment, Zoom from image doesn't support dynamic options 850 // @todo add zoomFromOrigin support for dynamic images 851 if (this.settings.dynamic) { 852 this.zoomFromOrigin = false; 853 } 854 if (this.settings.container) { 855 var container = this.settings.container; 856 if (typeof container === 'function') { 857 this.settings.container = container(); 858 } else if (typeof container === 'string') { 859 var el = document.querySelector(container); 860 this.settings.container = el !== null && el !== void 0 ? el : document.body; 861 } 862 } else { 863 this.settings.container = document.body; 864 } 865 // settings.preload should not be grater than $item.length 866 this.settings.preload = Math.min(this.settings.preload, this.galleryItems.length); 867 }; 868 LightGallery.prototype.init = function () { 869 var _this = this; 870 this.addSlideVideoInfo(this.galleryItems); 871 this.buildStructure(); 872 this.LGel.trigger(lGEvents.init, { 873 instance: this 874 }); 875 if (this.settings.keyPress) { 876 this.keyPress(); 877 } 878 setTimeout(function () { 879 _this.enableDrag(); 880 _this.enableSwipe(); 881 _this.triggerPosterClick(); 882 }, 50); 883 this.arrow(); 884 if (this.settings.mousewheel) { 885 this.mousewheel(); 886 } 887 if (!this.settings.dynamic) { 888 this.openGalleryOnItemClick(); 889 } 890 }; 891 LightGallery.prototype.openGalleryOnItemClick = function () { 892 var _this = this; 893 var _loop_1 = function (index) { 894 var element = this_1.items[index]; 895 var $element = $LG(element); 896 // Using different namespace for click because click event should not unbind if selector is same object('this') 897 // @todo manage all event listners - should have namespace that represent element 898 var uuid = lgQuery.generateUUID(); 899 $element.attr('data-lg-id', uuid).on("click.lgcustom-item-" + uuid, function (e) { 900 e.preventDefault(); 901 var currentItemIndex = _this.settings.index || index; 902 _this.openGallery(currentItemIndex, element); 903 }); 904 }; 905 var this_1 = this; 906 // Using for loop instead of using bubbling as the items can be any html element. 907 for (var index = 0; index < this.items.length; index++) { 908 _loop_1(index); 909 } 910 }; 911 /** 912 * Module constructor 913 * Modules are build incrementally. 914 * Gallery should be opened only once all the modules are initialized. 915 * use moduleBuildTimeout to make sure this 916 */ 917 LightGallery.prototype.buildModules = function () { 918 var _this = this; 919 this.settings.plugins.forEach(function (plugin) { 920 _this.plugins.push(new plugin(_this, $LG)); 921 }); 922 }; 923 LightGallery.prototype.validateLicense = function () { 924 if (!this.settings.licenseKey) { 925 console.error('Please provide a valid license key'); 926 } else if (this.settings.licenseKey === '0000-0000-000-0000') { 927 console.warn("lightGallery: " + this.settings.licenseKey + " license key is not valid for production use"); 928 } 929 }; 930 LightGallery.prototype.getSlideItem = function (index) { 931 return $LG(this.getSlideItemId(index)); 932 }; 933 LightGallery.prototype.getSlideItemId = function (index) { 934 return "#lg-item-" + this.lgId + "-" + index; 935 }; 936 LightGallery.prototype.getIdName = function (id) { 937 return id + "-" + this.lgId; 938 }; 939 LightGallery.prototype.getElementById = function (id) { 940 return $LG("#" + this.getIdName(id)); 941 }; 942 LightGallery.prototype.manageSingleSlideClassName = function () { 943 if (this.galleryItems.length < 2) { 944 this.outer.addClass('lg-single-item'); 945 } else { 946 this.outer.removeClass('lg-single-item'); 947 } 948 }; 949 LightGallery.prototype.buildStructure = function () { 950 var _this = this; 951 var container = this.$container && this.$container.get(); 952 if (container) { 953 return; 954 } 955 var controls = ''; 956 var subHtmlCont = ''; 957 // Create controls 958 if (this.settings.controls) { 959 controls = "<button type=\"button\" id=\"" + this.getIdName('lg-prev') + "\" aria-label=\"" + this.settings.strings['previousSlide'] + "\" class=\"lg-prev lg-icon\"> " + this.settings.prevHtml + " </button>\n <button type=\"button\" id=\"" + this.getIdName('lg-next') + "\" aria-label=\"" + this.settings.strings['nextSlide'] + "\" class=\"lg-next lg-icon\"> " + this.settings.nextHtml + " </button>"; 960 } 961 if (this.settings.appendSubHtmlTo !== '.lg-item') { 962 subHtmlCont = '<div class="lg-sub-html" role="status" aria-live="polite"></div>'; 963 } 964 var addClasses = ''; 965 if (this.settings.allowMediaOverlap) { 966 // Do not remove space before last single quote 967 addClasses += 'lg-media-overlap '; 968 } 969 var ariaLabelledby = this.settings.ariaLabelledby ? 'aria-labelledby="' + this.settings.ariaLabelledby + '"' : ''; 970 var ariaDescribedby = this.settings.ariaDescribedby ? 'aria-describedby="' + this.settings.ariaDescribedby + '"' : ''; 971 var containerClassName = "lg-container " + this.settings.addClass + " " + (document.body !== this.settings.container ? 'lg-inline' : ''); 972 var closeIcon = this.settings.closable && this.settings.showCloseIcon ? "<button type=\"button\" aria-label=\"" + this.settings.strings['closeGallery'] + "\" id=\"" + this.getIdName('lg-close') + "\" class=\"lg-close lg-icon\"></button>" : ''; 973 var maximizeIcon = this.settings.showMaximizeIcon ? "<button type=\"button\" aria-label=\"" + this.settings.strings['toggleMaximize'] + "\" id=\"" + this.getIdName('lg-maximize') + "\" class=\"lg-maximize lg-icon\"></button>" : ''; 974 var template = "\n <div class=\"" + containerClassName + "\" id=\"" + this.getIdName('lg-container') + "\" tabindex=\"-1\" aria-modal=\"true\" " + ariaLabelledby + " " + ariaDescribedby + " role=\"dialog\"\n >\n <div id=\"" + this.getIdName('lg-backdrop') + "\" class=\"lg-backdrop\"></div>\n\n <div id=\"" + this.getIdName('lg-outer') + "\" class=\"lg-outer lg-use-css3 lg-css3 lg-hide-items " + addClasses + " \">\n\n <div id=\"" + this.getIdName('lg-content') + "\" class=\"lg-content\">\n <div id=\"" + this.getIdName('lg-inner') + "\" class=\"lg-inner\">\n </div>\n " + controls + "\n </div>\n <div id=\"" + this.getIdName('lg-toolbar') + "\" class=\"lg-toolbar lg-group\">\n " + maximizeIcon + "\n " + closeIcon + "\n </div>\n " + (this.settings.appendSubHtmlTo === '.lg-outer' ? subHtmlCont : '') + "\n <div id=\"" + this.getIdName('lg-components') + "\" class=\"lg-components\">\n " + (this.settings.appendSubHtmlTo === '.lg-sub-html' ? subHtmlCont : '') + "\n </div>\n </div>\n </div>\n "; 975 $LG(this.settings.container).append(template); 976 if (document.body !== this.settings.container) { 977 $LG(this.settings.container).css('position', 'relative'); 978 } 979 this.outer = this.getElementById('lg-outer'); 980 this.$lgComponents = this.getElementById('lg-components'); 981 this.$backdrop = this.getElementById('lg-backdrop'); 982 this.$container = this.getElementById('lg-container'); 983 this.$inner = this.getElementById('lg-inner'); 984 this.$content = this.getElementById('lg-content'); 985 this.$toolbar = this.getElementById('lg-toolbar'); 986 this.$backdrop.css('transition-duration', this.settings.backdropDuration + 'ms'); 987 var outerClassNames = this.settings.mode + " "; 988 this.manageSingleSlideClassName(); 989 if (this.settings.enableDrag) { 990 outerClassNames += 'lg-grab '; 991 } 992 this.outer.addClass(outerClassNames); 993 this.$inner.css('transition-timing-function', this.settings.easing); 994 this.$inner.css('transition-duration', this.settings.speed + 'ms'); 995 if (this.settings.download) { 996 this.$toolbar.append("<a id=\"" + this.getIdName('lg-download') + "\" target=\"_blank\" rel=\"noopener\" aria-label=\"" + this.settings.strings['download'] + "\" download class=\"lg-download lg-icon\"></a>"); 997 } 998 this.counter(); 999 $LG(window).on("resize.lg.global" + this.lgId + " orientationchange.lg.global" + this.lgId, function () { 1000 _this.refreshOnResize(); 1001 }); 1002 this.hideBars(); 1003 this.manageCloseGallery(); 1004 this.toggleMaximize(); 1005 this.initModules(); 1006 }; 1007 LightGallery.prototype.refreshOnResize = function () { 1008 if (this.lgOpened) { 1009 var currentGalleryItem = this.galleryItems[this.index]; 1010 var __slideVideoInfo = currentGalleryItem.__slideVideoInfo; 1011 this.mediaContainerPosition = this.getMediaContainerPosition(); 1012 var _a = this.mediaContainerPosition, 1013 top_1 = _a.top, 1014 bottom = _a.bottom; 1015 this.currentImageSize = utils.getSize(this.items[this.index], this.outer, top_1 + bottom, __slideVideoInfo && this.settings.videoMaxSize); 1016 if (__slideVideoInfo) { 1017 this.resizeVideoSlide(this.index, this.currentImageSize); 1018 } 1019 if (this.zoomFromOrigin && !this.isDummyImageRemoved) { 1020 var imgStyle = this.getDummyImgStyles(this.currentImageSize); 1021 this.outer.find('.lg-current .lg-dummy-img').first().attr('style', imgStyle); 1022 } 1023 this.LGel.trigger(lGEvents.containerResize); 1024 } 1025 }; 1026 LightGallery.prototype.resizeVideoSlide = function (index, imageSize) { 1027 var lgVideoStyle = this.getVideoContStyle(imageSize); 1028 var currentSlide = this.getSlideItem(index); 1029 currentSlide.find('.lg-video-cont').attr('style', lgVideoStyle); 1030 }; 1031 /** 1032 * Update slides dynamically. 1033 * Add, edit or delete slides dynamically when lightGallery is opened. 1034 * Modify the current gallery items and pass it via updateSlides method 1035 * @note 1036 * - Do not mutate existing lightGallery items directly. 1037 * - Always pass new list of gallery items 1038 * - You need to take care of thumbnails outside the gallery if any 1039 * - user this method only if you want to update slides when the gallery is opened. Otherwise, use `refresh()` method. 1040 * @param items Gallery items 1041 * @param index After the update operation, which slide gallery should navigate to 1042 * @category lGPublicMethods 1043 * @example 1044 * const plugin = lightGallery(); 1045 * 1046 * // Adding slides dynamically 1047 * let galleryItems = [ 1048 * // Access existing lightGallery items 1049 * // galleryItems are automatically generated internally from the gallery HTML markup 1050 * // or directly from galleryItems when dynamic gallery is used 1051 * ...plugin.galleryItems, 1052 * ...[ 1053 * { 1054 * src: 'img/img-1.png', 1055 * thumb: 'img/thumb1.png', 1056 * }, 1057 * ], 1058 * ]; 1059 * plugin.updateSlides( 1060 * galleryItems, 1061 * plugin.index, 1062 * ); 1063 * 1064 * 1065 * // Remove slides dynamically 1066 * galleryItems = JSON.parse( 1067 * JSON.stringify(updateSlideInstance.galleryItems), 1068 * ); 1069 * galleryItems.shift(); 1070 * updateSlideInstance.updateSlides(galleryItems, 1); 1071 * @see <a href="/demos/update-slides/">Demo</a> 1072 */ 1073 LightGallery.prototype.updateSlides = function (items, index) { 1074 if (this.index > items.length - 1) { 1075 this.index = items.length - 1; 1076 } 1077 if (items.length === 1) { 1078 this.index = 0; 1079 } 1080 if (!items.length) { 1081 this.closeGallery(); 1082 return; 1083 } 1084 var currentSrc = this.galleryItems[index].src; 1085 this.galleryItems = items; 1086 this.updateControls(); 1087 this.$inner.empty(); 1088 this.currentItemsInDom = []; 1089 var _index = 0; 1090 // Find the current index based on source value of the slide 1091 this.galleryItems.some(function (galleryItem, itemIndex) { 1092 if (galleryItem.src === currentSrc) { 1093 _index = itemIndex; 1094 return true; 1095 } 1096 return false; 1097 }); 1098 this.currentItemsInDom = this.organizeSlideItems(_index, -1); 1099 this.loadContent(_index, true); 1100 this.getSlideItem(_index).addClass('lg-current'); 1101 this.index = _index; 1102 this.updateCurrentCounter(_index); 1103 this.LGel.trigger(lGEvents.updateSlides); 1104 }; 1105 // Get gallery items based on multiple conditions 1106 LightGallery.prototype.getItems = function () { 1107 // Gallery items 1108 this.items = []; 1109 if (!this.settings.dynamic) { 1110 if (this.settings.selector === 'this') { 1111 this.items.push(this.el); 1112 } else if (this.settings.selector) { 1113 if (typeof this.settings.selector === 'string') { 1114 if (this.settings.selectWithin) { 1115 var selectWithin = $LG(this.settings.selectWithin); 1116 this.items = selectWithin.find(this.settings.selector).get(); 1117 } else { 1118 this.items = this.el.querySelectorAll(this.settings.selector); 1119 } 1120 } else { 1121 this.items = this.settings.selector; 1122 } 1123 } else { 1124 this.items = this.el.children; 1125 } 1126 return utils.getDynamicOptions(this.items, this.settings.extraProps, this.settings.getCaptionFromTitleOrAlt, this.settings.exThumbImage); 1127 } else { 1128 return this.settings.dynamicEl || []; 1129 } 1130 }; 1131 LightGallery.prototype.shouldHideScrollbar = function () { 1132 return this.settings.hideScrollbar && document.body === this.settings.container; 1133 }; 1134 LightGallery.prototype.hideScrollbar = function () { 1135 if (!this.shouldHideScrollbar()) { 1136 return; 1137 } 1138 this.bodyPaddingRight = parseFloat($LG('body').style().paddingRight); 1139 var bodyRect = document.documentElement.getBoundingClientRect(); 1140 var scrollbarWidth = window.innerWidth - bodyRect.width; 1141 $LG(document.body).css('padding-right', scrollbarWidth + this.bodyPaddingRight + 'px'); 1142 $LG(document.body).addClass('lg-overlay-open'); 1143 }; 1144 LightGallery.prototype.resetScrollBar = function () { 1145 if (!this.shouldHideScrollbar()) { 1146 return; 1147 } 1148 $LG(document.body).css('padding-right', this.bodyPaddingRight + 'px'); 1149 $LG(document.body).removeClass('lg-overlay-open'); 1150 }; 1151 /** 1152 * Open lightGallery. 1153 * Open gallery with specific slide by passing index of the slide as parameter. 1154 * @category lGPublicMethods 1155 * @param {Number} index - index of the slide 1156 * @param {HTMLElement} element - Which image lightGallery should zoom from 1157 * 1158 * @example 1159 * const $dynamicGallery = document.getElementById('dynamic-gallery-demo'); 1160 * const dynamicGallery = lightGallery($dynamicGallery, { 1161 * dynamic: true, 1162 * dynamicEl: [ 1163 * { 1164 * src: 'img/1.jpg', 1165 * thumb: 'img/thumb-1.jpg', 1166 * subHtml: '<h4>Image 1 title</h4><p>Image 1 descriptions.</p>', 1167 * }, 1168 * ... 1169 * ], 1170 * }); 1171 * $dynamicGallery.addEventListener('click', function () { 1172 * // Starts with third item.(Optional). 1173 * // This is useful if you want use dynamic mode with 1174 * // custom thumbnails (thumbnails outside gallery), 1175 * dynamicGallery.openGallery(2); 1176 * }); 1177 * 1178 */ 1179 LightGallery.prototype.openGallery = function (index, element) { 1180 var _this = this; 1181 if (index === void 0) { 1182 index = this.settings.index; 1183 } 1184 // prevent accidental double execution 1185 if (this.lgOpened) return; 1186 this.lgOpened = true; 1187 this.outer.removeClass('lg-hide-items'); 1188 this.hideScrollbar(); 1189 // Add display block, but still has opacity 0 1190 this.$container.addClass('lg-show'); 1191 var itemsToBeInsertedToDom = this.getItemsToBeInsertedToDom(index, index); 1192 this.currentItemsInDom = itemsToBeInsertedToDom; 1193 var items = ''; 1194 itemsToBeInsertedToDom.forEach(function (item) { 1195 items = items + ("<div id=\"" + item + "\" class=\"lg-item\"></div>"); 1196 }); 1197 this.$inner.append(items); 1198 this.addHtml(index); 1199 var transform = ''; 1200 this.mediaContainerPosition = this.getMediaContainerPosition(); 1201 var _a = this.mediaContainerPosition, 1202 top = _a.top, 1203 bottom = _a.bottom; 1204 if (!this.settings.allowMediaOverlap) { 1205 this.setMediaContainerPosition(top, bottom); 1206 } 1207 var __slideVideoInfo = this.galleryItems[index].__slideVideoInfo; 1208 if (this.zoomFromOrigin && element) { 1209 this.currentImageSize = utils.getSize(element, this.outer, top + bottom, __slideVideoInfo && this.settings.videoMaxSize); 1210 transform = utils.getTransform(element, this.outer, top, bottom, this.currentImageSize); 1211 } 1212 if (!this.zoomFromOrigin || !transform) { 1213 this.outer.addClass(this.settings.startClass); 1214 this.getSlideItem(index).removeClass('lg-complete'); 1215 } 1216 var timeout = this.settings.zoomFromOrigin ? 100 : this.settings.backdropDuration; 1217 setTimeout(function () { 1218 _this.outer.addClass('lg-components-open'); 1219 }, timeout); 1220 this.index = index; 1221 this.LGel.trigger(lGEvents.beforeOpen); 1222 // add class lg-current to remove initial transition 1223 this.getSlideItem(index).addClass('lg-current'); 1224 this.lGalleryOn = false; 1225 // Store the current scroll top value to scroll back after closing the gallery.. 1226 this.prevScrollTop = $LG(window).scrollTop(); 1227 setTimeout(function () { 1228 // Need to check both zoomFromOrigin and transform values as we need to set set the 1229 // default opening animation if user missed to add the lg-size attribute 1230 if (_this.zoomFromOrigin && transform) { 1231 var currentSlide_1 = _this.getSlideItem(index); 1232 currentSlide_1.css('transform', transform); 1233 setTimeout(function () { 1234 currentSlide_1.addClass('lg-start-progress lg-start-end-progress').css('transition-duration', _this.settings.startAnimationDuration + 'ms'); 1235 _this.outer.addClass('lg-zoom-from-image'); 1236 }); 1237 setTimeout(function () { 1238 currentSlide_1.css('transform', 'translate3d(0, 0, 0)'); 1239 }, 100); 1240 } 1241 setTimeout(function () { 1242 _this.$backdrop.addClass('in'); 1243 _this.$container.addClass('lg-show-in'); 1244 }, 10); 1245 setTimeout(function () { 1246 if (_this.settings.trapFocus && document.body === _this.settings.container) { 1247 _this.trapFocus(); 1248 } 1249 }, _this.settings.backdropDuration + 50); 1250 // lg-visible class resets gallery opacity to 1 1251 if (!_this.zoomFromOrigin || !transform) { 1252 setTimeout(function () { 1253 _this.outer.addClass('lg-visible'); 1254 }, _this.settings.backdropDuration); 1255 } 1256 // initiate slide function 1257 _this.slide(index, false, false, false); 1258 _this.LGel.trigger(lGEvents.afterOpen); 1259 }); 1260 if (document.body === this.settings.container) { 1261 $LG('html').addClass('lg-on'); 1262 } 1263 }; 1264 /** 1265 * Note - Changing the position of the media on every slide transition creates a flickering effect. 1266 * Therefore, The height of the caption is calculated dynamically, only once based on the first slide caption. 1267 * if you have dynamic captions for each media, 1268 * you can provide an appropriate height for the captions via allowMediaOverlap option 1269 */ 1270 LightGallery.prototype.getMediaContainerPosition = function () { 1271 if (this.settings.allowMediaOverlap) { 1272 return { 1273 top: 0, 1274 bottom: 0 1275 }; 1276 } 1277 var top = this.$toolbar.get().clientHeight || 0; 1278 var subHtml = this.outer.find('.lg-components .lg-sub-html').get(); 1279 var captionHeight = this.settings.defaultCaptionHeight || subHtml && subHtml.clientHeight || 0; 1280 var thumbContainer = this.outer.find('.lg-thumb-outer').get(); 1281 var thumbHeight = thumbContainer ? thumbContainer.clientHeight : 0; 1282 var bottom = thumbHeight + captionHeight; 1283 return { 1284 top: top, 1285 bottom: bottom 1286 }; 1287 }; 1288 LightGallery.prototype.setMediaContainerPosition = function (top, bottom) { 1289 if (top === void 0) { 1290 top = 0; 1291 } 1292 if (bottom === void 0) { 1293 bottom = 0; 1294 } 1295 this.$content.css('top', top + 'px').css('bottom', bottom + 'px'); 1296 }; 1297 LightGallery.prototype.hideBars = function () { 1298 var _this = this; 1299 // Hide controllers if mouse doesn't move for some period 1300 setTimeout(function () { 1301 _this.outer.removeClass('lg-hide-items'); 1302 if (_this.settings.hideBarsDelay > 0) { 1303 _this.outer.on('mousemove.lg click.lg touchstart.lg', function () { 1304 _this.outer.removeClass('lg-hide-items'); 1305 clearTimeout(_this.hideBarTimeout); 1306 // Timeout will be cleared on each slide movement also 1307 _this.hideBarTimeout = setTimeout(function () { 1308 _this.outer.addClass('lg-hide-items'); 1309 }, _this.settings.hideBarsDelay); 1310 }); 1311 _this.outer.trigger('mousemove.lg'); 1312 } 1313 }, this.settings.showBarsAfter); 1314 }; 1315 LightGallery.prototype.initPictureFill = function ($img) { 1316 if (this.settings.supportLegacyBrowser) { 1317 try { 1318 picturefill({ 1319 elements: [$img.get()] 1320 }); 1321 } catch (e) { 1322 console.warn('lightGallery :- If you want srcset or picture tag to be supported for older browser please include picturefil javascript library in your document.'); 1323 } 1324 } 1325 }; 1326 /** 1327 * @desc Create image counter 1328 * Ex: 1/10 1329 */ 1330 LightGallery.prototype.counter = function () { 1331 if (this.settings.counter) { 1332 var counterHtml = "<div class=\"lg-counter\" role=\"status\" aria-live=\"polite\">\n <span id=\"" + this.getIdName('lg-counter-current') + "\" class=\"lg-counter-current\">" + (this.index + 1) + " </span> /\n <span id=\"" + this.getIdName('lg-counter-all') + "\" class=\"lg-counter-all\">" + this.galleryItems.length + " </span></div>"; 1333 this.outer.find(this.settings.appendCounterTo).append(counterHtml); 1334 } 1335 }; 1336 /** 1337 * @desc add sub-html into the slide 1338 * @param {Number} index - index of the slide 1339 */ 1340 LightGallery.prototype.addHtml = function (index) { 1341 var subHtml; 1342 var subHtmlUrl; 1343 if (this.galleryItems[index].subHtmlUrl) { 1344 subHtmlUrl = this.galleryItems[index].subHtmlUrl; 1345 } else { 1346 subHtml = this.galleryItems[index].subHtml; 1347 } 1348 if (!subHtmlUrl) { 1349 if (subHtml) { 1350 // get first letter of sub-html 1351 // if first letter starts with . or # get the html form the jQuery object 1352 var fL = subHtml.substring(0, 1); 1353 if (fL === '.' || fL === '#') { 1354 if (this.settings.subHtmlSelectorRelative && !this.settings.dynamic) { 1355 subHtml = $LG(this.items).eq(index).find(subHtml).first().html(); 1356 } else { 1357 subHtml = $LG(subHtml).first().html(); 1358 } 1359 } 1360 } else { 1361 subHtml = ''; 1362 } 1363 } 1364 if (this.settings.appendSubHtmlTo !== '.lg-item') { 1365 if (subHtmlUrl) { 1366 utils.fetchCaptionFromUrl(subHtmlUrl, this.outer.find('.lg-sub-html'), 'replace'); 1367 } else { 1368 this.outer.find('.lg-sub-html').html(subHtml); 1369 } 1370 } else { 1371 var currentSlide = $LG(this.getSlideItemId(index)); 1372 if (subHtmlUrl) { 1373 utils.fetchCaptionFromUrl(subHtmlUrl, currentSlide, 'append'); 1374 } else { 1375 currentSlide.append("<div class=\"lg-sub-html\">" + subHtml + "</div>"); 1376 } 1377 } 1378 // Add lg-empty-html class if title doesn't exist 1379 if (typeof subHtml !== 'undefined' && subHtml !== null) { 1380 if (subHtml === '') { 1381 this.outer.find(this.settings.appendSubHtmlTo).addClass('lg-empty-html'); 1382 } else { 1383 this.outer.find(this.settings.appendSubHtmlTo).removeClass('lg-empty-html'); 1384 } 1385 } 1386 this.LGel.trigger(lGEvents.afterAppendSubHtml, { 1387 index: index 1388 }); 1389 }; 1390 /** 1391 * @desc Preload slides 1392 * @param {Number} index - index of the slide 1393 * @todo preload not working for the first slide, Also, should work for the first and last slide as well 1394 */ 1395 LightGallery.prototype.preload = function (index) { 1396 for (var i = 1; i <= this.settings.preload; i++) { 1397 if (i >= this.galleryItems.length - index) { 1398 break; 1399 } 1400 this.loadContent(index + i, false); 1401 } 1402 for (var j = 1; j <= this.settings.preload; j++) { 1403 if (index - j < 0) { 1404 break; 1405 } 1406 this.loadContent(index - j, false); 1407 } 1408 }; 1409 LightGallery.prototype.getDummyImgStyles = function (imageSize) { 1410 if (!imageSize) return ''; 1411 return "width:" + imageSize.width + "px;\n margin-left: -" + imageSize.width / 2 + "px;\n margin-top: -" + imageSize.height / 2 + "px;\n height:" + imageSize.height + "px"; 1412 }; 1413 LightGallery.prototype.getVideoContStyle = function (imageSize) { 1414 if (!imageSize) return ''; 1415 return "width:" + imageSize.width + "px;\n height:" + imageSize.height + "px"; 1416 }; 1417 LightGallery.prototype.getDummyImageContent = function ($currentSlide, index, alt) { 1418 var $currentItem; 1419 if (!this.settings.dynamic) { 1420 $currentItem = $LG(this.items).eq(index); 1421 } 1422 if ($currentItem) { 1423 var _dummyImgSrc = void 0; 1424 if (!this.settings.exThumbImage) { 1425 _dummyImgSrc = $currentItem.find('img').first().attr('src'); 1426 } else { 1427 _dummyImgSrc = $currentItem.attr(this.settings.exThumbImage); 1428 } 1429 if (!_dummyImgSrc) return ''; 1430 var imgStyle = this.getDummyImgStyles(this.currentImageSize); 1431 var dummyImgContentImg = document.createElement('img'); 1432 dummyImgContentImg.alt = alt || ''; 1433 dummyImgContentImg.src = _dummyImgSrc; 1434 dummyImgContentImg.className = "lg-dummy-img"; 1435 dummyImgContentImg.style.cssText = imgStyle; 1436 $currentSlide.addClass('lg-first-slide'); 1437 this.outer.addClass('lg-first-slide-loading'); 1438 return dummyImgContentImg; 1439 } 1440 return ''; 1441 }; 1442 LightGallery.prototype.setImgMarkup = function (src, $currentSlide, index) { 1443 var currentGalleryItem = this.galleryItems[index]; 1444 var alt = currentGalleryItem.alt, 1445 srcset = currentGalleryItem.srcset, 1446 sizes = currentGalleryItem.sizes, 1447 sources = currentGalleryItem.sources; 1448 // Use the thumbnail as dummy image which will be resized to actual image size and 1449 // displayed on top of actual image 1450 var imgContent = ''; 1451 var altAttr = alt ? 'alt="' + alt + '"' : ''; 1452 if (this.isFirstSlideWithZoomAnimation()) { 1453 imgContent = this.getDummyImageContent($currentSlide, index, altAttr); 1454 } else { 1455 imgContent = utils.getImgMarkup(index, src, altAttr, srcset, sizes, sources); 1456 } 1457 var picture = document.createElement('picture'); 1458 picture.className = 'lg-img-wrap'; 1459 $LG(picture).append(imgContent); 1460 $currentSlide.prepend(picture); 1461 }; 1462 LightGallery.prototype.onSlideObjectLoad = function ($slide, isHTML5VideoWithoutPoster, onLoad, onError) { 1463 var mediaObject = $slide.find('.lg-object').first(); 1464 if (utils.isImageLoaded(mediaObject.get()) || isHTML5VideoWithoutPoster) { 1465 onLoad(); 1466 } else { 1467 mediaObject.on('load.lg error.lg', function () { 1468 onLoad && onLoad(); 1469 }); 1470 mediaObject.on('error.lg', function () { 1471 onError && onError(); 1472 }); 1473 } 1474 }; 1475 /** 1476 * 1477 * @param $el Current slide item 1478 * @param index 1479 * @param delay Delay is 0 except first time 1480 * @param speed Speed is same as delay, except it is 0 if gallery is opened via hash plugin 1481 * @param isFirstSlide 1482 */ 1483 LightGallery.prototype.onLgObjectLoad = function (currentSlide, index, delay, speed, isFirstSlide, isHTML5VideoWithoutPoster) { 1484 var _this = this; 1485 this.onSlideObjectLoad(currentSlide, isHTML5VideoWithoutPoster, function () { 1486 _this.triggerSlideItemLoad(currentSlide, index, delay, speed, isFirstSlide); 1487 }, function () { 1488 currentSlide.addClass('lg-complete lg-complete_'); 1489 currentSlide.html('<span class="lg-error-msg">' + _this.settings.strings['mediaLoadingFailed'] + '</span>'); 1490 }); 1491 }; 1492 LightGallery.prototype.triggerSlideItemLoad = function ($currentSlide, index, delay, speed, isFirstSlide) { 1493 var _this = this; 1494 var currentGalleryItem = this.galleryItems[index]; 1495 // Adding delay for video slides without poster for better performance and user experience 1496 // Videos should start playing once once the gallery is completely loaded 1497 var _speed = isFirstSlide && this.getSlideType(currentGalleryItem) === 'video' && !currentGalleryItem.poster ? speed : 0; 1498 setTimeout(function () { 1499 $currentSlide.addClass('lg-complete lg-complete_'); 1500 _this.LGel.trigger(lGEvents.slideItemLoad, { 1501 index: index, 1502 delay: delay || 0, 1503 isFirstSlide: isFirstSlide 1504 }); 1505 }, _speed); 1506 }; 1507 LightGallery.prototype.isFirstSlideWithZoomAnimation = function () { 1508 return !!(!this.lGalleryOn && this.zoomFromOrigin && this.currentImageSize); 1509 }; 1510 // Add video slideInfo 1511 LightGallery.prototype.addSlideVideoInfo = function (items) { 1512 var _this = this; 1513 items.forEach(function (element, index) { 1514 element.__slideVideoInfo = utils.isVideo(element.src, !!element.video, index); 1515 if (element.__slideVideoInfo && _this.settings.loadYouTubePoster && !element.poster && element.__slideVideoInfo.youtube) { 1516 element.poster = "//img.youtube.com/vi/" + element.__slideVideoInfo.youtube[1] + "/maxresdefault.jpg"; 1517 } 1518 }); 1519 }; 1520 /** 1521 * Load slide content into slide. 1522 * This is used to load content into slides that is not visible too 1523 * @param {Number} index - index of the slide. 1524 * @param {Boolean} rec - if true call loadcontent() function again. 1525 */ 1526 LightGallery.prototype.loadContent = function (index, rec) { 1527 var _this = this; 1528 var currentGalleryItem = this.galleryItems[index]; 1529 var $currentSlide = $LG(this.getSlideItemId(index)); 1530 var poster = currentGalleryItem.poster, 1531 srcset = currentGalleryItem.srcset, 1532 sizes = currentGalleryItem.sizes, 1533 sources = currentGalleryItem.sources; 1534 var src = currentGalleryItem.src; 1535 var video = currentGalleryItem.video; 1536 var _html5Video = video && typeof video === 'string' ? JSON.parse(video) : video; 1537 if (currentGalleryItem.responsive) { 1538 var srcDyItms = currentGalleryItem.responsive.split(','); 1539 src = utils.getResponsiveSrc(srcDyItms) || src; 1540 } 1541 var videoInfo = currentGalleryItem.__slideVideoInfo; 1542 var lgVideoStyle = ''; 1543 var iframe = !!currentGalleryItem.iframe; 1544 var isFirstSlide = !this.lGalleryOn; 1545 // delay for adding complete class. it is 0 except first time. 1546 var delay = 0; 1547 if (isFirstSlide) { 1548 if (this.zoomFromOrigin && this.currentImageSize) { 1549 delay = this.settings.startAnimationDuration + 10; 1550 } else { 1551 delay = this.settings.backdropDuration + 10; 1552 } 1553 } 1554 if (!$currentSlide.hasClass('lg-loaded')) { 1555 if (videoInfo) { 1556 var _a = this.mediaContainerPosition, 1557 top_2 = _a.top, 1558 bottom = _a.bottom; 1559 var videoSize = utils.getSize(this.items[index], this.outer, top_2 + bottom, videoInfo && this.settings.videoMaxSize); 1560 lgVideoStyle = this.getVideoContStyle(videoSize); 1561 } 1562 if (iframe) { 1563 var markup = utils.getIframeMarkup(this.settings.iframeWidth, this.settings.iframeHeight, this.settings.iframeMaxWidth, this.settings.iframeMaxHeight, src, currentGalleryItem.iframeTitle); 1564 $currentSlide.prepend(markup); 1565 } else if (poster) { 1566 var dummyImg = ''; 1567 var hasStartAnimation = isFirstSlide && this.zoomFromOrigin && this.currentImageSize; 1568 if (hasStartAnimation) { 1569 dummyImg = this.getDummyImageContent($currentSlide, index, ''); 1570 } 1571 var markup = utils.getVideoPosterMarkup(poster, dummyImg || '', lgVideoStyle, this.settings.strings['playVideo'], videoInfo); 1572 $currentSlide.prepend(markup); 1573 } else if (videoInfo) { 1574 var markup = "<div class=\"lg-video-cont \" style=\"" + lgVideoStyle + "\"></div>"; 1575 $currentSlide.prepend(markup); 1576 } else { 1577 this.setImgMarkup(src, $currentSlide, index); 1578 if (srcset || sources) { 1579 var $img = $currentSlide.find('.lg-object'); 1580 this.initPictureFill($img); 1581 } 1582 } 1583 if (poster || videoInfo) { 1584 this.LGel.trigger(lGEvents.hasVideo, { 1585 index: index, 1586 src: src, 1587 html5Video: _html5Video, 1588 hasPoster: !!poster 1589 }); 1590 } 1591 this.LGel.trigger(lGEvents.afterAppendSlide, { 1592 index: index 1593 }); 1594 if (this.lGalleryOn && this.settings.appendSubHtmlTo === '.lg-item') { 1595 this.addHtml(index); 1596 } 1597 } 1598 // For first time add some delay for displaying the start animation. 1599 var _speed = 0; 1600 // Do not change the delay value because it is required for zoom plugin. 1601 // If gallery opened from direct url (hash) speed value should be 0 1602 if (delay && !$LG(document.body).hasClass('lg-from-hash')) { 1603 _speed = delay; 1604 } 1605 // Only for first slide and zoomFromOrigin is enabled 1606 if (this.isFirstSlideWithZoomAnimation()) { 1607 setTimeout(function () { 1608 $currentSlide.removeClass('lg-start-end-progress lg-start-progress').removeAttr('style'); 1609 }, this.settings.startAnimationDuration + 100); 1610 if (!$currentSlide.hasClass('lg-loaded')) { 1611 setTimeout(function () { 1612 if (_this.getSlideType(currentGalleryItem) === 'image') { 1613 var alt = currentGalleryItem.alt; 1614 var altAttr = alt ? 'alt="' + alt + '"' : ''; 1615 $currentSlide.find('.lg-img-wrap').append(utils.getImgMarkup(index, src, altAttr, srcset, sizes, currentGalleryItem.sources)); 1616 if (srcset || sources) { 1617 var $img = $currentSlide.find('.lg-object'); 1618 _this.initPictureFill($img); 1619 } 1620 } 1621 if (_this.getSlideType(currentGalleryItem) === 'image' || _this.getSlideType(currentGalleryItem) === 'video' && poster) { 1622 _this.onLgObjectLoad($currentSlide, index, delay, _speed, true, false); 1623 // load remaining slides once the slide is completely loaded 1624 _this.onSlideObjectLoad($currentSlide, !!(videoInfo && videoInfo.html5 && !poster), function () { 1625 _this.loadContentOnFirstSlideLoad(index, $currentSlide, _speed); 1626 }, function () { 1627 _this.loadContentOnFirstSlideLoad(index, $currentSlide, _speed); 1628 }); 1629 } 1630 }, this.settings.startAnimationDuration + 100); 1631 } 1632 } 1633 // SLide content has been added to dom 1634 $currentSlide.addClass('lg-loaded'); 1635 if (!this.isFirstSlideWithZoomAnimation() || this.getSlideType(currentGalleryItem) === 'video' && !poster) { 1636 this.onLgObjectLoad($currentSlide, index, delay, _speed, isFirstSlide, !!(videoInfo && videoInfo.html5 && !poster)); 1637 } 1638 // When gallery is opened once content is loaded (second time) need to add lg-complete class for css styling 1639 if ((!this.zoomFromOrigin || !this.currentImageSize) && $currentSlide.hasClass('lg-complete_') && !this.lGalleryOn) { 1640 setTimeout(function () { 1641 $currentSlide.addClass('lg-complete'); 1642 }, this.settings.backdropDuration); 1643 } 1644 // Content loaded 1645 // Need to set lGalleryOn before calling preload function 1646 this.lGalleryOn = true; 1647 if (rec === true) { 1648 if (!$currentSlide.hasClass('lg-complete_')) { 1649 $currentSlide.find('.lg-object').first().on('load.lg error.lg', function () { 1650 _this.preload(index); 1651 }); 1652 } else { 1653 this.preload(index); 1654 } 1655 } 1656 }; 1657 /** 1658 * @desc Remove dummy image content and load next slides 1659 * Called only for the first time if zoomFromOrigin animation is enabled 1660 * @param index 1661 * @param $currentSlide 1662 * @param speed 1663 */ 1664 LightGallery.prototype.loadContentOnFirstSlideLoad = function (index, $currentSlide, speed) { 1665 var _this = this; 1666 setTimeout(function () { 1667 $currentSlide.find('.lg-dummy-img').remove(); 1668 $currentSlide.removeClass('lg-first-slide'); 1669 _this.outer.removeClass('lg-first-slide-loading'); 1670 _this.isDummyImageRemoved = true; 1671 _this.preload(index); 1672 }, speed + 300); 1673 }; 1674 LightGallery.prototype.getItemsToBeInsertedToDom = function (index, prevIndex, numberOfItems) { 1675 var _this = this; 1676 if (numberOfItems === void 0) { 1677 numberOfItems = 0; 1678 } 1679 var itemsToBeInsertedToDom = []; 1680 // Minimum 2 items should be there 1681 var possibleNumberOfItems = Math.max(numberOfItems, 3); 1682 possibleNumberOfItems = Math.min(possibleNumberOfItems, this.galleryItems.length); 1683 var prevIndexItem = "lg-item-" + this.lgId + "-" + prevIndex; 1684 if (this.galleryItems.length <= 3) { 1685 this.galleryItems.forEach(function (_element, index) { 1686 itemsToBeInsertedToDom.push("lg-item-" + _this.lgId + "-" + index); 1687 }); 1688 return itemsToBeInsertedToDom; 1689 } 1690 if (index < (this.galleryItems.length - 1) / 2) { 1691 for (var idx = index; idx > index - possibleNumberOfItems / 2 && idx >= 0; idx--) { 1692 itemsToBeInsertedToDom.push("lg-item-" + this.lgId + "-" + idx); 1693 } 1694 var numberOfExistingItems = itemsToBeInsertedToDom.length; 1695 for (var idx = 0; idx < possibleNumberOfItems - numberOfExistingItems; idx++) { 1696 itemsToBeInsertedToDom.push("lg-item-" + this.lgId + "-" + (index + idx + 1)); 1697 } 1698 } else { 1699 for (var idx = index; idx <= this.galleryItems.length - 1 && idx < index + possibleNumberOfItems / 2; idx++) { 1700 itemsToBeInsertedToDom.push("lg-item-" + this.lgId + "-" + idx); 1701 } 1702 var numberOfExistingItems = itemsToBeInsertedToDom.length; 1703 for (var idx = 0; idx < possibleNumberOfItems - numberOfExistingItems; idx++) { 1704 itemsToBeInsertedToDom.push("lg-item-" + this.lgId + "-" + (index - idx - 1)); 1705 } 1706 } 1707 if (this.settings.loop) { 1708 if (index === this.galleryItems.length - 1) { 1709 itemsToBeInsertedToDom.push("lg-item-" + this.lgId + "-" + 0); 1710 } else if (index === 0) { 1711 itemsToBeInsertedToDom.push("lg-item-" + this.lgId + "-" + (this.galleryItems.length - 1)); 1712 } 1713 } 1714 if (itemsToBeInsertedToDom.indexOf(prevIndexItem) === -1) { 1715 itemsToBeInsertedToDom.push("lg-item-" + this.lgId + "-" + prevIndex); 1716 } 1717 return itemsToBeInsertedToDom; 1718 }; 1719 LightGallery.prototype.organizeSlideItems = function (index, prevIndex) { 1720 var _this = this; 1721 var itemsToBeInsertedToDom = this.getItemsToBeInsertedToDom(index, prevIndex, this.settings.numberOfSlideItemsInDom); 1722 itemsToBeInsertedToDom.forEach(function (item) { 1723 if (_this.currentItemsInDom.indexOf(item) === -1) { 1724 _this.$inner.append("<div id=\"" + item + "\" class=\"lg-item\"></div>"); 1725 } 1726 }); 1727 this.currentItemsInDom.forEach(function (item) { 1728 if (itemsToBeInsertedToDom.indexOf(item) === -1) { 1729 $LG("#" + item).remove(); 1730 } 1731 }); 1732 return itemsToBeInsertedToDom; 1733 }; 1734 /** 1735 * Get previous index of the slide 1736 */ 1737 LightGallery.prototype.getPreviousSlideIndex = function () { 1738 var prevIndex = 0; 1739 try { 1740 var currentItemId = this.outer.find('.lg-current').first().attr('id'); 1741 prevIndex = parseInt(currentItemId.split('-')[3]) || 0; 1742 } catch (error) { 1743 prevIndex = 0; 1744 } 1745 return prevIndex; 1746 }; 1747 LightGallery.prototype.setDownloadValue = function (index) { 1748 if (this.settings.download) { 1749 var currentGalleryItem = this.galleryItems[index]; 1750 var hideDownloadBtn = currentGalleryItem.downloadUrl === false || currentGalleryItem.downloadUrl === 'false'; 1751 if (hideDownloadBtn) { 1752 this.outer.addClass('lg-hide-download'); 1753 } else { 1754 var $download = this.getElementById('lg-download'); 1755 this.outer.removeClass('lg-hide-download'); 1756 $download.attr('href', currentGalleryItem.downloadUrl || currentGalleryItem.src); 1757 if (currentGalleryItem.download) { 1758 $download.attr('download', currentGalleryItem.download); 1759 } 1760 } 1761 } 1762 }; 1763 LightGallery.prototype.makeSlideAnimation = function (direction, currentSlideItem, previousSlideItem) { 1764 var _this = this; 1765 if (this.lGalleryOn) { 1766 previousSlideItem.addClass('lg-slide-progress'); 1767 } 1768 setTimeout(function () { 1769 // remove all transitions 1770 _this.outer.addClass('lg-no-trans'); 1771 _this.outer.find('.lg-item').removeClass('lg-prev-slide lg-next-slide'); 1772 if (direction === 'prev') { 1773 //prevslide 1774 currentSlideItem.addClass('lg-prev-slide'); 1775 previousSlideItem.addClass('lg-next-slide'); 1776 } else { 1777 // next slide 1778 currentSlideItem.addClass('lg-next-slide'); 1779 previousSlideItem.addClass('lg-prev-slide'); 1780 } 1781 // give 50 ms for browser to add/remove class 1782 setTimeout(function () { 1783 _this.outer.find('.lg-item').removeClass('lg-current'); 1784 currentSlideItem.addClass('lg-current'); 1785 // reset all transitions 1786 _this.outer.removeClass('lg-no-trans'); 1787 }, 50); 1788 }, this.lGalleryOn ? this.settings.slideDelay : 0); 1789 }; 1790 /** 1791 * Goto a specific slide. 1792 * @param {Number} index - index of the slide 1793 * @param {Boolean} fromTouch - true if slide function called via touch event or mouse drag 1794 * @param {Boolean} fromThumb - true if slide function called via thumbnail click 1795 * @param {String} direction - Direction of the slide(next/prev) 1796 * @category lGPublicMethods 1797 * @example 1798 * const plugin = lightGallery(); 1799 * // to go to 3rd slide 1800 * plugin.slide(2); 1801 * 1802 */ 1803 LightGallery.prototype.slide = function (index, fromTouch, fromThumb, direction) { 1804 var _this = this; 1805 var prevIndex = this.getPreviousSlideIndex(); 1806 this.currentItemsInDom = this.organizeSlideItems(index, prevIndex); 1807 // Prevent multiple call, Required for hsh plugin 1808 if (this.lGalleryOn && prevIndex === index) { 1809 return; 1810 } 1811 var numberOfGalleryItems = this.galleryItems.length; 1812 if (!this.lgBusy) { 1813 if (this.settings.counter) { 1814 this.updateCurrentCounter(index); 1815 } 1816 var currentSlideItem = this.getSlideItem(index); 1817 var previousSlideItem_1 = this.getSlideItem(prevIndex); 1818 var currentGalleryItem = this.galleryItems[index]; 1819 var videoInfo = currentGalleryItem.__slideVideoInfo; 1820 this.outer.attr('data-lg-slide-type', this.getSlideType(currentGalleryItem)); 1821 this.setDownloadValue(index); 1822 if (videoInfo) { 1823 var _a = this.mediaContainerPosition, 1824 top_3 = _a.top, 1825 bottom = _a.bottom; 1826 var videoSize = utils.getSize(this.items[index], this.outer, top_3 + bottom, videoInfo && this.settings.videoMaxSize); 1827 this.resizeVideoSlide(index, videoSize); 1828 } 1829 this.LGel.trigger(lGEvents.beforeSlide, { 1830 prevIndex: prevIndex, 1831 index: index, 1832 fromTouch: !!fromTouch, 1833 fromThumb: !!fromThumb 1834 }); 1835 this.lgBusy = true; 1836 clearTimeout(this.hideBarTimeout); 1837 this.arrowDisable(index); 1838 if (!direction) { 1839 if (index < prevIndex) { 1840 direction = 'prev'; 1841 } else if (index > prevIndex) { 1842 direction = 'next'; 1843 } 1844 } 1845 if (!fromTouch) { 1846 this.makeSlideAnimation(direction, currentSlideItem, previousSlideItem_1); 1847 } else { 1848 this.outer.find('.lg-item').removeClass('lg-prev-slide lg-current lg-next-slide'); 1849 var touchPrev = void 0; 1850 var touchNext = void 0; 1851 if (numberOfGalleryItems > 2) { 1852 touchPrev = index - 1; 1853 touchNext = index + 1; 1854 if (index === 0 && prevIndex === numberOfGalleryItems - 1) { 1855 // next slide 1856 touchNext = 0; 1857 touchPrev = numberOfGalleryItems - 1; 1858 } else if (index === numberOfGalleryItems - 1 && prevIndex === 0) { 1859 // prev slide 1860 touchNext = 0; 1861 touchPrev = numberOfGalleryItems - 1; 1862 } 1863 } else { 1864 touchPrev = 0; 1865 touchNext = 1; 1866 } 1867 if (direction === 'prev') { 1868 this.getSlideItem(touchNext).addClass('lg-next-slide'); 1869 } else { 1870 this.getSlideItem(touchPrev).addClass('lg-prev-slide'); 1871 } 1872 currentSlideItem.addClass('lg-current'); 1873 } 1874 // Do not put load content in set timeout as it needs to load immediately when the gallery is opened 1875 if (!this.lGalleryOn) { 1876 this.loadContent(index, true); 1877 } else { 1878 setTimeout(function () { 1879 _this.loadContent(index, true); 1880 // Add title if this.settings.appendSubHtmlTo === lg-sub-html 1881 if (_this.settings.appendSubHtmlTo !== '.lg-item') { 1882 _this.addHtml(index); 1883 } 1884 }, this.settings.speed + 50 + (fromTouch ? 0 : this.settings.slideDelay)); 1885 } 1886 setTimeout(function () { 1887 _this.lgBusy = false; 1888 previousSlideItem_1.removeClass('lg-slide-progress'); 1889 _this.LGel.trigger(lGEvents.afterSlide, { 1890 prevIndex: prevIndex, 1891 index: index, 1892 fromTouch: fromTouch, 1893 fromThumb: fromThumb 1894 }); 1895 }, (this.lGalleryOn ? this.settings.speed + 100 : 100) + (fromTouch ? 0 : this.settings.slideDelay)); 1896 } 1897 this.index = index; 1898 }; 1899 LightGallery.prototype.updateCurrentCounter = function (index) { 1900 this.getElementById('lg-counter-current').html(index + 1 + ''); 1901 }; 1902 LightGallery.prototype.updateCounterTotal = function () { 1903 this.getElementById('lg-counter-all').html(this.galleryItems.length + ''); 1904 }; 1905 LightGallery.prototype.getSlideType = function (item) { 1906 if (item.__slideVideoInfo) { 1907 return 'video'; 1908 } else if (item.iframe) { 1909 return 'iframe'; 1910 } else { 1911 return 'image'; 1912 } 1913 }; 1914 LightGallery.prototype.touchMove = function (startCoords, endCoords, e) { 1915 var distanceX = endCoords.pageX - startCoords.pageX; 1916 var distanceY = endCoords.pageY - startCoords.pageY; 1917 var allowSwipe = false; 1918 if (this.swipeDirection) { 1919 allowSwipe = true; 1920 } else { 1921 if (Math.abs(distanceX) > 15) { 1922 this.swipeDirection = 'horizontal'; 1923 allowSwipe = true; 1924 } else if (Math.abs(distanceY) > 15) { 1925 this.swipeDirection = 'vertical'; 1926 allowSwipe = true; 1927 } 1928 } 1929 if (!allowSwipe) { 1930 return; 1931 } 1932 var $currentSlide = this.getSlideItem(this.index); 1933 if (this.swipeDirection === 'horizontal') { 1934 e === null || e === void 0 ? void 0 : e.preventDefault(); 1935 // reset opacity and transition duration 1936 this.outer.addClass('lg-dragging'); 1937 // move current slide 1938 this.setTranslate($currentSlide, distanceX, 0); 1939 // move next and prev slide with current slide 1940 var width = $currentSlide.get().offsetWidth; 1941 var slideWidthAmount = width * 15 / 100; 1942 var gutter = slideWidthAmount - Math.abs(distanceX * 10 / 100); 1943 this.setTranslate(this.outer.find('.lg-prev-slide').first(), -width + distanceX - gutter, 0); 1944 this.setTranslate(this.outer.find('.lg-next-slide').first(), width + distanceX + gutter, 0); 1945 } else if (this.swipeDirection === 'vertical') { 1946 if (this.settings.swipeToClose) { 1947 e === null || e === void 0 ? void 0 : e.preventDefault(); 1948 this.$container.addClass('lg-dragging-vertical'); 1949 var opacity = 1 - Math.abs(distanceY) / window.innerHeight; 1950 this.$backdrop.css('opacity', opacity); 1951 var scale = 1 - Math.abs(distanceY) / (window.innerWidth * 2); 1952 this.setTranslate($currentSlide, 0, distanceY, scale, scale); 1953 if (Math.abs(distanceY) > 100) { 1954 this.outer.addClass('lg-hide-items').removeClass('lg-components-open'); 1955 } 1956 } 1957 } 1958 }; 1959 LightGallery.prototype.touchEnd = function (endCoords, startCoords, event) { 1960 var _this = this; 1961 var distance; 1962 // keep slide animation for any mode while dragg/swipe 1963 if (this.settings.mode !== 'lg-slide') { 1964 this.outer.addClass('lg-slide'); 1965 } 1966 // set transition duration 1967 setTimeout(function () { 1968 _this.$container.removeClass('lg-dragging-vertical'); 1969 _this.outer.removeClass('lg-dragging lg-hide-items').addClass('lg-components-open'); 1970 var triggerClick = true; 1971 if (_this.swipeDirection === 'horizontal') { 1972 distance = endCoords.pageX - startCoords.pageX; 1973 var distanceAbs = Math.abs(endCoords.pageX - startCoords.pageX); 1974 if (distance < 0 && distanceAbs > _this.settings.swipeThreshold) { 1975 _this.goToNextSlide(true); 1976 triggerClick = false; 1977 } else if (distance > 0 && distanceAbs > _this.settings.swipeThreshold) { 1978 _this.goToPrevSlide(true); 1979 triggerClick = false; 1980 } 1981 } else if (_this.swipeDirection === 'vertical') { 1982 distance = Math.abs(endCoords.pageY - startCoords.pageY); 1983 if (_this.settings.closable && _this.settings.swipeToClose && distance > 100) { 1984 _this.closeGallery(); 1985 return; 1986 } else { 1987 _this.$backdrop.css('opacity', 1); 1988 } 1989 } 1990 _this.outer.find('.lg-item').removeAttr('style'); 1991 if (triggerClick && Math.abs(endCoords.pageX - startCoords.pageX) < 5) { 1992 // Trigger click if distance is less than 5 pix 1993 var target = $LG(event.target); 1994 if (_this.isPosterElement(target)) { 1995 _this.LGel.trigger(lGEvents.posterClick); 1996 } 1997 } 1998 _this.swipeDirection = undefined; 1999 }); 2000 // remove slide class once drag/swipe is completed if mode is not slide 2001 setTimeout(function () { 2002 if (!_this.outer.hasClass('lg-dragging') && _this.settings.mode !== 'lg-slide') { 2003 _this.outer.removeClass('lg-slide'); 2004 } 2005 }, this.settings.speed + 100); 2006 }; 2007 LightGallery.prototype.enableSwipe = function () { 2008 var _this = this; 2009 var startCoords = {}; 2010 var endCoords = {}; 2011 var isMoved = false; 2012 var isSwiping = false; 2013 if (this.settings.enableSwipe) { 2014 this.$inner.on('touchstart.lg', function (e) { 2015 _this.dragOrSwipeEnabled = true; 2016 var $item = _this.getSlideItem(_this.index); 2017 if (($LG(e.target).hasClass('lg-item') || $item.get().contains(e.target)) && !_this.outer.hasClass('lg-zoomed') && !_this.lgBusy && e.touches.length === 1) { 2018 isSwiping = true; 2019 _this.touchAction = 'swipe'; 2020 _this.manageSwipeClass(); 2021 startCoords = { 2022 pageX: e.touches[0].pageX, 2023 pageY: e.touches[0].pageY 2024 }; 2025 } 2026 }); 2027 this.$inner.on('touchmove.lg', function (e) { 2028 if (isSwiping && _this.touchAction === 'swipe' && e.touches.length === 1) { 2029 endCoords = { 2030 pageX: e.touches[0].pageX, 2031 pageY: e.touches[0].pageY 2032 }; 2033 _this.touchMove(startCoords, endCoords, e); 2034 isMoved = true; 2035 } 2036 }); 2037 this.$inner.on('touchend.lg', function (event) { 2038 if (_this.touchAction === 'swipe') { 2039 if (isMoved) { 2040 isMoved = false; 2041 _this.touchEnd(endCoords, startCoords, event); 2042 } else if (isSwiping) { 2043 var target = $LG(event.target); 2044 if (_this.isPosterElement(target)) { 2045 _this.LGel.trigger(lGEvents.posterClick); 2046 } 2047 } 2048 _this.touchAction = undefined; 2049 isSwiping = false; 2050 } 2051 }); 2052 } 2053 }; 2054 LightGallery.prototype.enableDrag = function () { 2055 var _this = this; 2056 var startCoords = {}; 2057 var endCoords = {}; 2058 var isDraging = false; 2059 var isMoved = false; 2060 if (this.settings.enableDrag) { 2061 this.outer.on('mousedown.lg', function (e) { 2062 _this.dragOrSwipeEnabled = true; 2063 var $item = _this.getSlideItem(_this.index); 2064 if ($LG(e.target).hasClass('lg-item') || $item.get().contains(e.target)) { 2065 if (!_this.outer.hasClass('lg-zoomed') && !_this.lgBusy) { 2066 e.preventDefault(); 2067 if (!_this.lgBusy) { 2068 _this.manageSwipeClass(); 2069 startCoords = { 2070 pageX: e.pageX, 2071 pageY: e.pageY 2072 }; 2073 isDraging = true; 2074 // ** Fix for webkit cursor issue https://code.google.com/p/chromium/issues/detail?id=26723 2075 _this.outer.get().scrollLeft += 1; 2076 _this.outer.get().scrollLeft -= 1; 2077 // * 2078 _this.outer.removeClass('lg-grab').addClass('lg-grabbing'); 2079 _this.LGel.trigger(lGEvents.dragStart); 2080 } 2081 } 2082 } 2083 }); 2084 $LG(window).on("mousemove.lg.global" + this.lgId, function (e) { 2085 if (isDraging && _this.lgOpened) { 2086 isMoved = true; 2087 endCoords = { 2088 pageX: e.pageX, 2089 pageY: e.pageY 2090 }; 2091 _this.touchMove(startCoords, endCoords); 2092 _this.LGel.trigger(lGEvents.dragMove); 2093 } 2094 }); 2095 $LG(window).on("mouseup.lg.global" + this.lgId, function (event) { 2096 if (!_this.lgOpened) { 2097 return; 2098 } 2099 var target = $LG(event.target); 2100 if (isMoved) { 2101 isMoved = false; 2102 _this.touchEnd(endCoords, startCoords, event); 2103 _this.LGel.trigger(lGEvents.dragEnd); 2104 } else if (_this.isPosterElement(target)) { 2105 _this.LGel.trigger(lGEvents.posterClick); 2106 } 2107 // Prevent execution on click 2108 if (isDraging) { 2109 isDraging = false; 2110 _this.outer.removeClass('lg-grabbing').addClass('lg-grab'); 2111 } 2112 }); 2113 } 2114 }; 2115 LightGallery.prototype.triggerPosterClick = function () { 2116 var _this = this; 2117 this.$inner.on('click.lg', function (event) { 2118 if (!_this.dragOrSwipeEnabled && _this.isPosterElement($LG(event.target))) { 2119 _this.LGel.trigger(lGEvents.posterClick); 2120 } 2121 }); 2122 }; 2123 LightGallery.prototype.manageSwipeClass = function () { 2124 var _touchNext = this.index + 1; 2125 var _touchPrev = this.index - 1; 2126 if (this.settings.loop && this.galleryItems.length > 2) { 2127 if (this.index === 0) { 2128 _touchPrev = this.galleryItems.length - 1; 2129 } else if (this.index === this.galleryItems.length - 1) { 2130 _touchNext = 0; 2131 } 2132 } 2133 this.outer.find('.lg-item').removeClass('lg-next-slide lg-prev-slide'); 2134 if (_touchPrev > -1) { 2135 this.getSlideItem(_touchPrev).addClass('lg-prev-slide'); 2136 } 2137 this.getSlideItem(_touchNext).addClass('lg-next-slide'); 2138 }; 2139 /** 2140 * Go to next slide 2141 * @param {Boolean} fromTouch - true if slide function called via touch event 2142 * @category lGPublicMethods 2143 * @example 2144 * const plugin = lightGallery(); 2145 * plugin.goToNextSlide(); 2146 * @see <a href="/demos/methods/">Demo</a> 2147 */ 2148 LightGallery.prototype.goToNextSlide = function (fromTouch) { 2149 var _this = this; 2150 var _loop = this.settings.loop; 2151 if (fromTouch && this.galleryItems.length < 3) { 2152 _loop = false; 2153 } 2154 if (!this.lgBusy) { 2155 if (this.index + 1 < this.galleryItems.length) { 2156 this.index++; 2157 this.LGel.trigger(lGEvents.beforeNextSlide, { 2158 index: this.index 2159 }); 2160 this.slide(this.index, !!fromTouch, false, 'next'); 2161 } else { 2162 if (_loop) { 2163 this.index = 0; 2164 this.LGel.trigger(lGEvents.beforeNextSlide, { 2165 index: this.index 2166 }); 2167 this.slide(this.index, !!fromTouch, false, 'next'); 2168 } else if (this.settings.slideEndAnimation && !fromTouch) { 2169 this.outer.addClass('lg-right-end'); 2170 setTimeout(function () { 2171 _this.outer.removeClass('lg-right-end'); 2172 }, 400); 2173 } 2174 } 2175 } 2176 }; 2177 /** 2178 * Go to previous slides 2179 * @param {Boolean} fromTouch - true if slide function called via touch event 2180 * @category lGPublicMethods 2181 * @example 2182 * const plugin = lightGallery({}); 2183 * plugin.goToPrevSlide(); 2184 * @see <a href="/demos/methods/">Demo</a> 2185 * 2186 */ 2187 LightGallery.prototype.goToPrevSlide = function (fromTouch) { 2188 var _this = this; 2189 var _loop = this.settings.loop; 2190 if (fromTouch && this.galleryItems.length < 3) { 2191 _loop = false; 2192 } 2193 if (!this.lgBusy) { 2194 if (this.index > 0) { 2195 this.index--; 2196 this.LGel.trigger(lGEvents.beforePrevSlide, { 2197 index: this.index, 2198 fromTouch: fromTouch 2199 }); 2200 this.slide(this.index, !!fromTouch, false, 'prev'); 2201 } else { 2202 if (_loop) { 2203 this.index = this.galleryItems.length - 1; 2204 this.LGel.trigger(lGEvents.beforePrevSlide, { 2205 index: this.index, 2206 fromTouch: fromTouch 2207 }); 2208 this.slide(this.index, !!fromTouch, false, 'prev'); 2209 } else if (this.settings.slideEndAnimation && !fromTouch) { 2210 this.outer.addClass('lg-left-end'); 2211 setTimeout(function () { 2212 _this.outer.removeClass('lg-left-end'); 2213 }, 400); 2214 } 2215 } 2216 } 2217 }; 2218 LightGallery.prototype.keyPress = function () { 2219 var _this = this; 2220 $LG(window).on("keydown.lg.global" + this.lgId, function (e) { 2221 if (_this.lgOpened && _this.settings.escKey === true && e.keyCode === 27) { 2222 e.preventDefault(); 2223 if (_this.settings.allowMediaOverlap && _this.outer.hasClass('lg-can-toggle') && _this.outer.hasClass('lg-components-open')) { 2224 _this.outer.removeClass('lg-components-open'); 2225 } else { 2226 _this.closeGallery(); 2227 } 2228 } 2229 if (_this.lgOpened && _this.galleryItems.length > 1) { 2230 if (e.keyCode === 37) { 2231 e.preventDefault(); 2232 _this.goToPrevSlide(); 2233 } 2234 if (e.keyCode === 39) { 2235 e.preventDefault(); 2236 _this.goToNextSlide(); 2237 } 2238 } 2239 }); 2240 }; 2241 LightGallery.prototype.arrow = function () { 2242 var _this = this; 2243 this.getElementById('lg-prev').on('click.lg', function () { 2244 _this.goToPrevSlide(); 2245 }); 2246 this.getElementById('lg-next').on('click.lg', function () { 2247 _this.goToNextSlide(); 2248 }); 2249 }; 2250 LightGallery.prototype.arrowDisable = function (index) { 2251 // Disable arrows if settings.hideControlOnEnd is true 2252 if (!this.settings.loop && this.settings.hideControlOnEnd) { 2253 var $prev = this.getElementById('lg-prev'); 2254 var $next = this.getElementById('lg-next'); 2255 if (index + 1 === this.galleryItems.length) { 2256 $next.attr('disabled', 'disabled').addClass('disabled'); 2257 } else { 2258 $next.removeAttr('disabled').removeClass('disabled'); 2259 } 2260 if (index === 0) { 2261 $prev.attr('disabled', 'disabled').addClass('disabled'); 2262 } else { 2263 $prev.removeAttr('disabled').removeClass('disabled'); 2264 } 2265 } 2266 }; 2267 LightGallery.prototype.setTranslate = function ($el, xValue, yValue, scaleX, scaleY) { 2268 if (scaleX === void 0) { 2269 scaleX = 1; 2270 } 2271 if (scaleY === void 0) { 2272 scaleY = 1; 2273 } 2274 $el.css('transform', 'translate3d(' + xValue + 'px, ' + yValue + 'px, 0px) scale3d(' + scaleX + ', ' + scaleY + ', 1)'); 2275 }; 2276 LightGallery.prototype.mousewheel = function () { 2277 var _this = this; 2278 var lastCall = 0; 2279 this.outer.on('wheel.lg', function (e) { 2280 if (!e.deltaY || _this.galleryItems.length < 2) { 2281 return; 2282 } 2283 e.preventDefault(); 2284 var now = new Date().getTime(); 2285 if (now - lastCall < 1000) { 2286 return; 2287 } 2288 lastCall = now; 2289 if (e.deltaY > 0) { 2290 _this.goToNextSlide(); 2291 } else if (e.deltaY < 0) { 2292 _this.goToPrevSlide(); 2293 } 2294 }); 2295 }; 2296 LightGallery.prototype.isSlideElement = function (target) { 2297 return target.hasClass('lg-outer') || target.hasClass('lg-item') || target.hasClass('lg-img-wrap') || target.hasClass('lg-img-rotate'); 2298 }; 2299 LightGallery.prototype.isPosterElement = function (target) { 2300 var playButton = this.getSlideItem(this.index).find('.lg-video-play-button').get(); 2301 return target.hasClass('lg-video-poster') || target.hasClass('lg-video-play-button') || playButton && playButton.contains(target.get()); 2302 }; 2303 /** 2304 * Maximize minimize inline gallery. 2305 * @category lGPublicMethods 2306 */ 2307 LightGallery.prototype.toggleMaximize = function () { 2308 var _this = this; 2309 this.getElementById('lg-maximize').on('click.lg', function () { 2310 _this.$container.toggleClass('lg-inline'); 2311 _this.refreshOnResize(); 2312 }); 2313 }; 2314 LightGallery.prototype.invalidateItems = function () { 2315 for (var index = 0; index < this.items.length; index++) { 2316 var element = this.items[index]; 2317 var $element = $LG(element); 2318 $element.off("click.lgcustom-item-" + $element.attr('data-lg-id')); 2319 } 2320 }; 2321 LightGallery.prototype.trapFocus = function () { 2322 var _this = this; 2323 this.$container.get().focus({ 2324 preventScroll: true 2325 }); 2326 $LG(window).on("keydown.lg.global" + this.lgId, function (e) { 2327 if (!_this.lgOpened) { 2328 return; 2329 } 2330 var isTabPressed = e.key === 'Tab' || e.keyCode === 9; 2331 if (!isTabPressed) { 2332 return; 2333 } 2334 var focusableEls = utils.getFocusableElements(_this.$container.get()); 2335 var firstFocusableEl = focusableEls[0]; 2336 var lastFocusableEl = focusableEls[focusableEls.length - 1]; 2337 if (e.shiftKey) { 2338 if (document.activeElement === firstFocusableEl) { 2339 lastFocusableEl.focus(); 2340 e.preventDefault(); 2341 } 2342 } else { 2343 if (document.activeElement === lastFocusableEl) { 2344 firstFocusableEl.focus(); 2345 e.preventDefault(); 2346 } 2347 } 2348 }); 2349 }; 2350 LightGallery.prototype.manageCloseGallery = function () { 2351 var _this = this; 2352 if (!this.settings.closable) return; 2353 var mousedown = false; 2354 this.getElementById('lg-close').on('click.lg', function () { 2355 _this.closeGallery(); 2356 }); 2357 if (this.settings.closeOnTap) { 2358 // If you drag the slide and release outside gallery gets close on chrome 2359 // for preventing this check mousedown and mouseup happened on .lg-item or lg-outer 2360 this.outer.on('mousedown.lg', function (e) { 2361 var target = $LG(e.target); 2362 if (_this.isSlideElement(target)) { 2363 mousedown = true; 2364 } else { 2365 mousedown = false; 2366 } 2367 }); 2368 this.outer.on('mousemove.lg', function () { 2369 mousedown = false; 2370 }); 2371 this.outer.on('mouseup.lg', function (e) { 2372 var target = $LG(e.target); 2373 if (_this.isSlideElement(target) && mousedown) { 2374 if (!_this.outer.hasClass('lg-dragging')) { 2375 _this.closeGallery(); 2376 } 2377 } 2378 }); 2379 } 2380 }; 2381 /** 2382 * Close lightGallery if it is opened. 2383 * 2384 * @description If closable is false in the settings, you need to pass true via closeGallery method to force close gallery 2385 * @return returns the estimated time to close gallery completely including the close animation duration 2386 * @category lGPublicMethods 2387 * @example 2388 * const plugin = lightGallery(); 2389 * plugin.closeGallery(); 2390 * 2391 */ 2392 LightGallery.prototype.closeGallery = function (force) { 2393 var _this = this; 2394 if (!this.lgOpened || !this.settings.closable && !force) { 2395 return 0; 2396 } 2397 this.LGel.trigger(lGEvents.beforeClose); 2398 if (this.settings.resetScrollPosition && !this.settings.hideScrollbar) { 2399 $LG(window).scrollTop(this.prevScrollTop); 2400 } 2401 var currentItem = this.items[this.index]; 2402 var transform; 2403 if (this.zoomFromOrigin && currentItem) { 2404 var _a = this.mediaContainerPosition, 2405 top_4 = _a.top, 2406 bottom = _a.bottom; 2407 var _b = this.galleryItems[this.index], 2408 __slideVideoInfo = _b.__slideVideoInfo, 2409 poster = _b.poster; 2410 var imageSize = utils.getSize(currentItem, this.outer, top_4 + bottom, __slideVideoInfo && poster && this.settings.videoMaxSize); 2411 transform = utils.getTransform(currentItem, this.outer, top_4, bottom, imageSize); 2412 } 2413 if (this.zoomFromOrigin && transform) { 2414 this.outer.addClass('lg-closing lg-zoom-from-image'); 2415 this.getSlideItem(this.index).addClass('lg-start-end-progress').css('transition-duration', this.settings.startAnimationDuration + 'ms').css('transform', transform); 2416 } else { 2417 this.outer.addClass('lg-hide-items'); 2418 // lg-zoom-from-image is used for setting the opacity to 1 if zoomFromOrigin is true 2419 // If the closing item doesn't have the lg-size attribute, remove this class to avoid the closing css conflicts 2420 this.outer.removeClass('lg-zoom-from-image'); 2421 } 2422 // Unbind all events added by lightGallery 2423 // @todo 2424 //this.$el.off('.lg.tm'); 2425 this.destroyModules(); 2426 this.lGalleryOn = false; 2427 this.isDummyImageRemoved = false; 2428 this.zoomFromOrigin = this.settings.zoomFromOrigin; 2429 clearTimeout(this.hideBarTimeout); 2430 this.hideBarTimeout = false; 2431 $LG('html').removeClass('lg-on'); 2432 this.outer.removeClass('lg-visible lg-components-open'); 2433 // Resetting opacity to 0 isd required as vertical swipe to close function adds inline opacity. 2434 this.$backdrop.removeClass('in').css('opacity', 0); 2435 var removeTimeout = this.zoomFromOrigin && transform ? Math.max(this.settings.startAnimationDuration, this.settings.backdropDuration) : this.settings.backdropDuration; 2436 this.$container.removeClass('lg-show-in'); 2437 // Once the closign animation is completed and gallery is invisible 2438 setTimeout(function () { 2439 if (_this.zoomFromOrigin && transform) { 2440 _this.outer.removeClass('lg-zoom-from-image'); 2441 } 2442 _this.$container.removeClass('lg-show'); 2443 // Reset scrollbar 2444 _this.resetScrollBar(); 2445 // Need to remove inline opacity as it is used in the stylesheet as well 2446 _this.$backdrop.removeAttr('style').css('transition-duration', _this.settings.backdropDuration + 'ms'); 2447 _this.outer.removeClass("lg-closing " + _this.settings.startClass); 2448 _this.getSlideItem(_this.index).removeClass('lg-start-end-progress'); 2449 _this.$inner.empty(); 2450 if (_this.lgOpened) { 2451 _this.LGel.trigger(lGEvents.afterClose, { 2452 instance: _this 2453 }); 2454 } 2455 if (_this.$container.get()) { 2456 _this.$container.get().blur(); 2457 } 2458 _this.lgOpened = false; 2459 }, removeTimeout + 100); 2460 return removeTimeout + 100; 2461 }; 2462 LightGallery.prototype.initModules = function () { 2463 this.plugins.forEach(function (module) { 2464 try { 2465 module.init(); 2466 } catch (err) { 2467 console.warn("lightGallery:- make sure lightGallery module is properly initiated"); 2468 } 2469 }); 2470 }; 2471 LightGallery.prototype.destroyModules = function (destroy) { 2472 this.plugins.forEach(function (module) { 2473 try { 2474 if (destroy) { 2475 module.destroy(); 2476 } else { 2477 module.closeGallery && module.closeGallery(); 2478 } 2479 } catch (err) { 2480 console.warn("lightGallery:- make sure lightGallery module is properly destroyed"); 2481 } 2482 }); 2483 }; 2484 /** 2485 * Refresh lightGallery with new set of children. 2486 * 2487 * @description This is useful to update the gallery when the child elements are changed without calling destroy method. 2488 * 2489 * If you are using dynamic mode, you can pass the modified array of dynamicEl as the first parameter to refresh the dynamic gallery 2490 * @see <a href="/demos/dynamic-mode/">Demo</a> 2491 * @category lGPublicMethods 2492 * @example 2493 * const plugin = lightGallery(); 2494 * // Delete or add children, then call 2495 * plugin.refresh(); 2496 * 2497 */ 2498 LightGallery.prototype.refresh = function (galleryItems) { 2499 if (!this.settings.dynamic) { 2500 this.invalidateItems(); 2501 } 2502 if (galleryItems) { 2503 this.galleryItems = galleryItems; 2504 } else { 2505 this.galleryItems = this.getItems(); 2506 } 2507 this.updateControls(); 2508 this.openGalleryOnItemClick(); 2509 this.LGel.trigger(lGEvents.updateSlides); 2510 }; 2511 LightGallery.prototype.updateControls = function () { 2512 this.addSlideVideoInfo(this.galleryItems); 2513 this.updateCounterTotal(); 2514 this.manageSingleSlideClassName(); 2515 }; 2516 LightGallery.prototype.destroyGallery = function () { 2517 this.destroyModules(true); 2518 if (!this.settings.dynamic) { 2519 this.invalidateItems(); 2520 } 2521 $LG(window).off(".lg.global" + this.lgId); 2522 this.LGel.off('.lg'); 2523 this.$container.remove(); 2524 }; 2525 /** 2526 * Destroy lightGallery. 2527 * Destroy lightGallery and its plugin instances completely 2528 * 2529 * @description This method also calls CloseGallery function internally. Returns the time takes to completely close and destroy the instance. 2530 * In case if you want to re-initialize lightGallery right after destroying it, initialize it only once the destroy process is completed. 2531 * You can use refresh method most of the times. 2532 * @category lGPublicMethods 2533 * @example 2534 * const plugin = lightGallery(); 2535 * plugin.destroy(); 2536 * 2537 */ 2538 LightGallery.prototype.destroy = function () { 2539 var closeTimeout = this.closeGallery(true); 2540 if (closeTimeout) { 2541 setTimeout(this.destroyGallery.bind(this), closeTimeout); 2542 } else { 2543 this.destroyGallery(); 2544 } 2545 return closeTimeout; 2546 }; 2547 return LightGallery; 2548}(); 2549function lightGallery(el, options) { 2550 return new LightGallery(el, options); 2551} 2552/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (lightGallery); 2553 2554/***/ }), 2555
vendor: 16,942 bytes, lines 2556-3006
2556/***/ "./node_modules/lightgallery/plugins/thumbnail/lg-thumbnail.es5.js": 2557/*!*************************************************************************!*\ 2558 !*** ./node_modules/lightgallery/plugins/thumbnail/lg-thumbnail.es5.js ***! 2559 \*************************************************************************/ 2560/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 2561 2562__webpack_require__.r(__webpack_exports__); 2563/* harmony export */ __webpack_require__.d(__webpack_exports__, { 2564/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) 2565/* harmony export */ }); 2566/*! 2567 * lightgallery | 2.8.3 | March 1st 2025 2568 * http://www.lightgalleryjs.com/ 2569 * Copyright (c) 2020 Sachin Neravath; 2570 * @license GPLv3 2571 */ 2572 2573/*! ***************************************************************************** 2574Copyright (c) Microsoft Corporation. 2575 2576Permission to use, copy, modify, and/or distribute this software for any 2577purpose with or without fee is hereby granted. 2578 2579THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 2580REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY 2581AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 2582INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 2583LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 2584OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 2585PERFORMANCE OF THIS SOFTWARE. 2586***************************************************************************** */ 2587 2588var __assign = function () { 2589 __assign = Object.assign || function __assign(t) { 2590 for (var s, i = 1, n = arguments.length; i < n; i++) { 2591 s = arguments[i]; 2592 for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; 2593 } 2594 return t; 2595 }; 2596 return __assign.apply(this, arguments); 2597}; 2598var thumbnailsSettings = { 2599 thumbnail: true, 2600 animateThumb: true, 2601 currentPagerPosition: 'middle', 2602 alignThumbnails: 'middle', 2603 thumbWidth: 100, 2604 thumbHeight: '80px', 2605 thumbMargin: 5, 2606 appendThumbnailsTo: '.lg-components', 2607 toggleThumb: false, 2608 enableThumbDrag: true, 2609 enableThumbSwipe: true, 2610 thumbnailSwipeThreshold: 10, 2611 loadYouTubeThumbnail: true, 2612 youTubeThumbSize: 1, 2613 thumbnailPluginStrings: { 2614 toggleThumbnails: 'Toggle thumbnails' 2615 } 2616}; 2617 2618/** 2619 * List of lightGallery events 2620 * All events should be documented here 2621 * Below interfaces are used to build the website documentations 2622 * */ 2623var lGEvents = { 2624 afterAppendSlide: 'lgAfterAppendSlide', 2625 init: 'lgInit', 2626 hasVideo: 'lgHasVideo', 2627 containerResize: 'lgContainerResize', 2628 updateSlides: 'lgUpdateSlides', 2629 afterAppendSubHtml: 'lgAfterAppendSubHtml', 2630 beforeOpen: 'lgBeforeOpen', 2631 afterOpen: 'lgAfterOpen', 2632 slideItemLoad: 'lgSlideItemLoad', 2633 beforeSlide: 'lgBeforeSlide', 2634 afterSlide: 'lgAfterSlide', 2635 posterClick: 'lgPosterClick', 2636 dragStart: 'lgDragStart', 2637 dragMove: 'lgDragMove', 2638 dragEnd: 'lgDragEnd', 2639 beforeNextSlide: 'lgBeforeNextSlide', 2640 beforePrevSlide: 'lgBeforePrevSlide', 2641 beforeClose: 'lgBeforeClose', 2642 afterClose: 'lgAfterClose', 2643 rotateLeft: 'lgRotateLeft', 2644 rotateRight: 'lgRotateRight', 2645 flipHorizontal: 'lgFlipHorizontal', 2646 flipVertical: 'lgFlipVertical', 2647 autoplay: 'lgAutoplay', 2648 autoplayStart: 'lgAutoplayStart', 2649 autoplayStop: 'lgAutoplayStop' 2650}; 2651var Thumbnail = /** @class */function () { 2652 function Thumbnail(instance, $LG) { 2653 this.thumbOuterWidth = 0; 2654 this.thumbTotalWidth = 0; 2655 this.translateX = 0; 2656 this.thumbClickable = false; 2657 // get lightGallery core plugin instance 2658 this.core = instance; 2659 this.$LG = $LG; 2660 return this; 2661 } 2662 Thumbnail.prototype.init = function () { 2663 // extend module default settings with lightGallery core settings 2664 this.settings = __assign(__assign({}, thumbnailsSettings), this.core.settings); 2665 this.thumbOuterWidth = 0; 2666 this.thumbTotalWidth = this.core.galleryItems.length * (this.settings.thumbWidth + this.settings.thumbMargin); 2667 // Thumbnail animation value 2668 this.translateX = 0; 2669 this.setAnimateThumbStyles(); 2670 if (!this.core.settings.allowMediaOverlap) { 2671 this.settings.toggleThumb = false; 2672 } 2673 if (this.settings.thumbnail) { 2674 this.build(); 2675 if (this.settings.animateThumb) { 2676 if (this.settings.enableThumbDrag) { 2677 this.enableThumbDrag(); 2678 } 2679 if (this.settings.enableThumbSwipe) { 2680 this.enableThumbSwipe(); 2681 } 2682 this.thumbClickable = false; 2683 } else { 2684 this.thumbClickable = true; 2685 } 2686 this.toggleThumbBar(); 2687 this.thumbKeyPress(); 2688 } 2689 }; 2690 Thumbnail.prototype.build = function () { 2691 var _this = this; 2692 this.setThumbMarkup(); 2693 this.manageActiveClassOnSlideChange(); 2694 this.$lgThumb.first().on('click.lg touchend.lg', function (e) { 2695 var $target = _this.$LG(e.target); 2696 if (!$target.hasAttribute('data-lg-item-id')) { 2697 return; 2698 } 2699 setTimeout(function () { 2700 // In IE9 and bellow touch does not support 2701 // Go to slide if browser does not support css transitions 2702 if (_this.thumbClickable && !_this.core.lgBusy) { 2703 var index = parseInt($target.attr('data-lg-item-id')); 2704 _this.core.slide(index, false, true, false); 2705 } 2706 }, 50); 2707 }); 2708 this.core.LGel.on(lGEvents.beforeSlide + ".thumb", function (event) { 2709 var index = event.detail.index; 2710 _this.animateThumb(index); 2711 }); 2712 this.core.LGel.on(lGEvents.beforeOpen + ".thumb", function () { 2713 _this.thumbOuterWidth = _this.core.outer.get().offsetWidth; 2714 }); 2715 this.core.LGel.on(lGEvents.updateSlides + ".thumb", function () { 2716 _this.rebuildThumbnails(); 2717 }); 2718 this.core.LGel.on(lGEvents.containerResize + ".thumb", function () { 2719 if (!_this.core.lgOpened) return; 2720 setTimeout(function () { 2721 _this.thumbOuterWidth = _this.core.outer.get().offsetWidth; 2722 _this.animateThumb(_this.core.index); 2723 _this.thumbOuterWidth = _this.core.outer.get().offsetWidth; 2724 }, 50); 2725 }); 2726 }; 2727 Thumbnail.prototype.setThumbMarkup = function () { 2728 var thumbOuterClassNames = 'lg-thumb-outer '; 2729 if (this.settings.alignThumbnails) { 2730 thumbOuterClassNames += "lg-thumb-align-" + this.settings.alignThumbnails; 2731 } 2732 var html = "<div class=\"" + thumbOuterClassNames + "\">\n <div class=\"lg-thumb lg-group\">\n </div>\n </div>"; 2733 this.core.outer.addClass('lg-has-thumb'); 2734 if (this.settings.appendThumbnailsTo === '.lg-components') { 2735 this.core.$lgComponents.append(html); 2736 } else { 2737 this.core.outer.append(html); 2738 } 2739 this.$thumbOuter = this.core.outer.find('.lg-thumb-outer').first(); 2740 this.$lgThumb = this.core.outer.find('.lg-thumb').first(); 2741 if (this.settings.animateThumb) { 2742 this.core.outer.find('.lg-thumb').css('transition-duration', this.core.settings.speed + 'ms').css('width', this.thumbTotalWidth + 'px').css('position', 'relative'); 2743 } 2744 this.setThumbItemHtml(this.core.galleryItems); 2745 }; 2746 Thumbnail.prototype.enableThumbDrag = function () { 2747 var _this = this; 2748 var thumbDragUtils = { 2749 cords: { 2750 startX: 0, 2751 endX: 0 2752 }, 2753 isMoved: false, 2754 newTranslateX: 0, 2755 startTime: new Date(), 2756 endTime: new Date(), 2757 touchMoveTime: 0 2758 }; 2759 var isDragging = false; 2760 this.$thumbOuter.addClass('lg-grab'); 2761 this.core.outer.find('.lg-thumb').first().on('mousedown.lg.thumb', function (e) { 2762 if (_this.thumbTotalWidth > _this.thumbOuterWidth) { 2763 // execute only on .lg-object 2764 e.preventDefault(); 2765 thumbDragUtils.cords.startX = e.pageX; 2766 thumbDragUtils.startTime = new Date(); 2767 _this.thumbClickable = false; 2768 isDragging = true; 2769 // ** Fix for webkit cursor issue https://code.google.com/p/chromium/issues/detail?id=26723 2770 _this.core.outer.get().scrollLeft += 1; 2771 _this.core.outer.get().scrollLeft -= 1; 2772 // * 2773 _this.$thumbOuter.removeClass('lg-grab').addClass('lg-grabbing'); 2774 } 2775 }); 2776 this.$LG(window).on("mousemove.lg.thumb.global" + this.core.lgId, function (e) { 2777 if (!_this.core.lgOpened) return; 2778 if (isDragging) { 2779 thumbDragUtils.cords.endX = e.pageX; 2780 thumbDragUtils = _this.onThumbTouchMove(thumbDragUtils); 2781 } 2782 }); 2783 this.$LG(window).on("mouseup.lg.thumb.global" + this.core.lgId, function () { 2784 if (!_this.core.lgOpened) return; 2785 if (thumbDragUtils.isMoved) { 2786 thumbDragUtils = _this.onThumbTouchEnd(thumbDragUtils); 2787 } else { 2788 _this.thumbClickable = true; 2789 } 2790 if (isDragging) { 2791 isDragging = false; 2792 _this.$thumbOuter.removeClass('lg-grabbing').addClass('lg-grab'); 2793 } 2794 }); 2795 }; 2796 Thumbnail.prototype.enableThumbSwipe = function () { 2797 var _this = this; 2798 var thumbDragUtils = { 2799 cords: { 2800 startX: 0, 2801 endX: 0 2802 }, 2803 isMoved: false, 2804 newTranslateX: 0, 2805 startTime: new Date(), 2806 endTime: new Date(), 2807 touchMoveTime: 0 2808 }; 2809 this.$lgThumb.on('touchstart.lg', function (e) { 2810 if (_this.thumbTotalWidth > _this.thumbOuterWidth) { 2811 e.preventDefault(); 2812 thumbDragUtils.cords.startX = e.targetTouches[0].pageX; 2813 _this.thumbClickable = false; 2814 thumbDragUtils.startTime = new Date(); 2815 } 2816 }); 2817 this.$lgThumb.on('touchmove.lg', function (e) { 2818 if (_this.thumbTotalWidth > _this.thumbOuterWidth) { 2819 e.preventDefault(); 2820 thumbDragUtils.cords.endX = e.targetTouches[0].pageX; 2821 thumbDragUtils = _this.onThumbTouchMove(thumbDragUtils); 2822 } 2823 }); 2824 this.$lgThumb.on('touchend.lg', function () { 2825 if (thumbDragUtils.isMoved) { 2826 thumbDragUtils = _this.onThumbTouchEnd(thumbDragUtils); 2827 } else { 2828 _this.thumbClickable = true; 2829 } 2830 }); 2831 }; 2832 // Rebuild thumbnails 2833 Thumbnail.prototype.rebuildThumbnails = function () { 2834 var _this = this; 2835 // Remove transitions 2836 this.$thumbOuter.addClass('lg-rebuilding-thumbnails'); 2837 setTimeout(function () { 2838 _this.thumbTotalWidth = _this.core.galleryItems.length * (_this.settings.thumbWidth + _this.settings.thumbMargin); 2839 _this.$lgThumb.css('width', _this.thumbTotalWidth + 'px'); 2840 _this.$lgThumb.empty(); 2841 _this.setThumbItemHtml(_this.core.galleryItems); 2842 _this.animateThumb(_this.core.index); 2843 }, 50); 2844 setTimeout(function () { 2845 _this.$thumbOuter.removeClass('lg-rebuilding-thumbnails'); 2846 }, 200); 2847 }; 2848 // @ts-check 2849 Thumbnail.prototype.setTranslate = function (value) { 2850 this.$lgThumb.css('transform', 'translate3d(-' + value + 'px, 0px, 0px)'); 2851 }; 2852 Thumbnail.prototype.getPossibleTransformX = function (left) { 2853 if (left > this.thumbTotalWidth - this.thumbOuterWidth) { 2854 left = this.thumbTotalWidth - this.thumbOuterWidth; 2855 } 2856 if (left < 0) { 2857 left = 0; 2858 } 2859 return left; 2860 }; 2861 Thumbnail.prototype.animateThumb = function (index) { 2862 this.$lgThumb.css('transition-duration', this.core.settings.speed + 'ms'); 2863 if (this.settings.animateThumb) { 2864 var position = 0; 2865 switch (this.settings.currentPagerPosition) { 2866 case 'left': 2867 position = 0; 2868 break; 2869 case 'middle': 2870 position = this.thumbOuterWidth / 2 - this.settings.thumbWidth / 2; 2871 break; 2872 case 'right': 2873 position = this.thumbOuterWidth - this.settings.thumbWidth; 2874 } 2875 this.translateX = (this.settings.thumbWidth + this.settings.thumbMargin) * index - 1 - position; 2876 if (this.translateX > this.thumbTotalWidth - this.thumbOuterWidth) { 2877 this.translateX = this.thumbTotalWidth - this.thumbOuterWidth; 2878 } 2879 if (this.translateX < 0) { 2880 this.translateX = 0; 2881 } 2882 this.setTranslate(this.translateX); 2883 } 2884 }; 2885 Thumbnail.prototype.onThumbTouchMove = function (thumbDragUtils) { 2886 thumbDragUtils.newTranslateX = this.translateX; 2887 thumbDragUtils.isMoved = true; 2888 thumbDragUtils.touchMoveTime = new Date().valueOf(); 2889 thumbDragUtils.newTranslateX -= thumbDragUtils.cords.endX - thumbDragUtils.cords.startX; 2890 thumbDragUtils.newTranslateX = this.getPossibleTransformX(thumbDragUtils.newTranslateX); 2891 // move current slide 2892 this.setTranslate(thumbDragUtils.newTranslateX); 2893 this.$thumbOuter.addClass('lg-dragging'); 2894 return thumbDragUtils; 2895 }; 2896 Thumbnail.prototype.onThumbTouchEnd = function (thumbDragUtils) { 2897 thumbDragUtils.isMoved = false; 2898 thumbDragUtils.endTime = new Date(); 2899 this.$thumbOuter.removeClass('lg-dragging'); 2900 var touchDuration = thumbDragUtils.endTime.valueOf() - thumbDragUtils.startTime.valueOf(); 2901 var distanceXnew = thumbDragUtils.cords.endX - thumbDragUtils.cords.startX; 2902 var speedX = Math.abs(distanceXnew) / touchDuration; 2903 // Some magical numbers 2904 // Can be improved 2905 if (speedX > 0.15 && thumbDragUtils.endTime.valueOf() - thumbDragUtils.touchMoveTime < 30) { 2906 speedX += 1; 2907 if (speedX > 2) { 2908 speedX += 1; 2909 } 2910 speedX = speedX + speedX * (Math.abs(distanceXnew) / this.thumbOuterWidth); 2911 this.$lgThumb.css('transition-duration', Math.min(speedX - 1, 2) + 'settings'); 2912 distanceXnew = distanceXnew * speedX; 2913 this.translateX = this.getPossibleTransformX(this.translateX - distanceXnew); 2914 this.setTranslate(this.translateX); 2915 } else { 2916 this.translateX = thumbDragUtils.newTranslateX; 2917 } 2918 if (Math.abs(thumbDragUtils.cords.endX - thumbDragUtils.cords.startX) < this.settings.thumbnailSwipeThreshold) { 2919 this.thumbClickable = true; 2920 } 2921 return thumbDragUtils; 2922 }; 2923 Thumbnail.prototype.getThumbHtml = function (thumb, index, alt) { 2924 var slideVideoInfo = this.core.galleryItems[index].__slideVideoInfo || {}; 2925 var thumbImg; 2926 if (slideVideoInfo.youtube) { 2927 if (this.settings.loadYouTubeThumbnail) { 2928 thumbImg = '//img.youtube.com/vi/' + slideVideoInfo.youtube[1] + '/' + this.settings.youTubeThumbSize + '.jpg'; 2929 } else { 2930 thumbImg = thumb; 2931 } 2932 } else { 2933 thumbImg = thumb; 2934 } 2935 var div = document.createElement('div'); 2936 div.setAttribute('data-lg-item-id', index + ''); 2937 div.className = "lg-thumb-item " + (index === this.core.index ? 'active' : ''); 2938 div.style.cssText = "width: " + this.settings.thumbWidth + "px; height: " + this.settings.thumbHeight + "; margin-right: " + this.settings.thumbMargin + "px;"; 2939 var img = document.createElement('img'); 2940 img.alt = alt || ''; 2941 img.setAttribute('data-lg-item-id', index + ''); 2942 img.src = thumbImg; 2943 div.appendChild(img); 2944 return div; 2945 }; 2946 Thumbnail.prototype.setThumbItemHtml = function (items) { 2947 for (var i = 0; i < items.length; i++) { 2948 var thumb = this.getThumbHtml(items[i].thumb, i, items[i].alt); 2949 this.$lgThumb.append(thumb); 2950 } 2951 }; 2952 Thumbnail.prototype.setAnimateThumbStyles = function () { 2953 if (this.settings.animateThumb) { 2954 this.core.outer.addClass('lg-animate-thumb'); 2955 } 2956 }; 2957 // Manage thumbnail active calss 2958 Thumbnail.prototype.manageActiveClassOnSlideChange = function () { 2959 var _this = this; 2960 // manage active class for thumbnail 2961 this.core.LGel.on(lGEvents.beforeSlide + ".thumb", function (event) { 2962 var $thumb = _this.core.outer.find('.lg-thumb-item'); 2963 var index = event.detail.index; 2964 $thumb.removeClass('active'); 2965 $thumb.eq(index).addClass('active'); 2966 }); 2967 }; 2968 // Toggle thumbnail bar 2969 Thumbnail.prototype.toggleThumbBar = function () { 2970 var _this = this; 2971 if (this.settings.toggleThumb) { 2972 this.core.outer.addClass('lg-can-toggle'); 2973 this.core.$toolbar.append('<button type="button" aria-label="' + this.settings.thumbnailPluginStrings['toggleThumbnails'] + '" class="lg-toggle-thumb lg-icon"></button>'); 2974 this.core.outer.find('.lg-toggle-thumb').first().on('click.lg', function () { 2975 _this.core.outer.toggleClass('lg-components-open'); 2976 }); 2977 } 2978 }; 2979 Thumbnail.prototype.thumbKeyPress = function () { 2980 var _this = this; 2981 this.$LG(window).on("keydown.lg.thumb.global" + this.core.lgId, function (e) { 2982 if (!_this.core.lgOpened || !_this.settings.toggleThumb) return; 2983 if (e.keyCode === 38) { 2984 e.preventDefault(); 2985 _this.core.outer.addClass('lg-components-open'); 2986 } else if (e.keyCode === 40) { 2987 e.preventDefault(); 2988 _this.core.outer.removeClass('lg-components-open'); 2989 } 2990 }); 2991 }; 2992 Thumbnail.prototype.destroy = function () { 2993 if (this.settings.thumbnail) { 2994 this.$LG(window).off(".lg.thumb.global" + this.core.lgId); 2995 this.core.LGel.off('.lg.thumb'); 2996 this.core.LGel.off('.thumb'); 2997 this.$thumbOuter.remove(); 2998 this.core.outer.removeClass('lg-has-thumb'); 2999 } 3000 }; 3001 return Thumbnail; 3002}(); 3003/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Thumbnail); 3004 3005/***/ }), 3006
vendor: 20,871 bytes, lines 3007-3516
3007/***/ "./node_modules/lightgallery/plugins/video/lg-video.es5.js": 3008/*!*****************************************************************!*\ 3009 !*** ./node_modules/lightgallery/plugins/video/lg-video.es5.js ***! 3010 \*****************************************************************/ 3011/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { 3012 3013__webpack_require__.r(__webpack_exports__); 3014/* harmony export */ __webpack_require__.d(__webpack_exports__, { 3015/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) 3016/* harmony export */ }); 3017/*! 3018 * lightgallery | 2.8.3 | March 1st 2025 3019 * http://www.lightgalleryjs.com/ 3020 * Copyright (c) 2020 Sachin Neravath; 3021 * @license GPLv3 3022 */ 3023 3024/*! ***************************************************************************** 3025Copyright (c) Microsoft Corporation. 3026 3027Permission to use, copy, modify, and/or distribute this software for any 3028purpose with or without fee is hereby granted. 3029 3030THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 3031REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY 3032AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 3033INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 3034LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 3035OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 3036PERFORMANCE OF THIS SOFTWARE. 3037***************************************************************************** */ 3038 3039var __assign = function () { 3040 __assign = Object.assign || function __assign(t) { 3041 for (var s, i = 1, n = arguments.length; i < n; i++) { 3042 s = arguments[i]; 3043 for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; 3044 } 3045 return t; 3046 }; 3047 return __assign.apply(this, arguments); 3048}; 3049var videoSettings = { 3050 autoplayFirstVideo: true, 3051 youTubePlayerParams: false, 3052 vimeoPlayerParams: false, 3053 wistiaPlayerParams: false, 3054 gotoNextSlideOnVideoEnd: true, 3055 autoplayVideoOnSlide: false, 3056 videojs: false, 3057 videojsTheme: '', 3058 videojsOptions: {} 3059}; 3060 3061/** 3062 * List of lightGallery events 3063 * All events should be documented here 3064 * Below interfaces are used to build the website documentations 3065 * */ 3066var lGEvents = { 3067 afterAppendSlide: 'lgAfterAppendSlide', 3068 init: 'lgInit', 3069 hasVideo: 'lgHasVideo', 3070 containerResize: 'lgContainerResize', 3071 updateSlides: 'lgUpdateSlides', 3072 afterAppendSubHtml: 'lgAfterAppendSubHtml', 3073 beforeOpen: 'lgBeforeOpen', 3074 afterOpen: 'lgAfterOpen', 3075 slideItemLoad: 'lgSlideItemLoad', 3076 beforeSlide: 'lgBeforeSlide', 3077 afterSlide: 'lgAfterSlide', 3078 posterClick: 'lgPosterClick', 3079 dragStart: 'lgDragStart', 3080 dragMove: 'lgDragMove', 3081 dragEnd: 'lgDragEnd', 3082 beforeNextSlide: 'lgBeforeNextSlide', 3083 beforePrevSlide: 'lgBeforePrevSlide', 3084 beforeClose: 'lgBeforeClose', 3085 afterClose: 'lgAfterClose', 3086 rotateLeft: 'lgRotateLeft', 3087 rotateRight: 'lgRotateRight', 3088 flipHorizontal: 'lgFlipHorizontal', 3089 flipVertical: 'lgFlipVertical', 3090 autoplay: 'lgAutoplay', 3091 autoplayStart: 'lgAutoplayStart', 3092 autoplayStop: 'lgAutoplayStop' 3093}; 3094var param = function (obj) { 3095 return Object.keys(obj).map(function (k) { 3096 return encodeURIComponent(k) + '=' + encodeURIComponent(obj[k]); 3097 }).join('&'); 3098}; 3099var paramsToObject = function (url) { 3100 var paramas = url.slice(1).split('&').map(function (p) { 3101 return p.split('='); 3102 }).reduce(function (obj, pair) { 3103 var _a = pair.map(decodeURIComponent), 3104 key = _a[0], 3105 value = _a[1]; 3106 obj[key] = value; 3107 return obj; 3108 }, {}); 3109 return paramas; 3110}; 3111var getYouTubeParams = function (videoInfo, youTubePlayerParamsSettings) { 3112 if (!videoInfo.youtube) return ''; 3113 var slideUrlParams = videoInfo.youtube[2] ? paramsToObject(videoInfo.youtube[2]) : ''; 3114 // For youtube first params gets priority if duplicates found 3115 var defaultYouTubePlayerParams = { 3116 wmode: 'opaque', 3117 autoplay: 0, 3118 mute: 1, 3119 enablejsapi: 1 3120 }; 3121 var playerParamsSettings = youTubePlayerParamsSettings || {}; 3122 var youTubePlayerParams = __assign(__assign(__assign({}, defaultYouTubePlayerParams), playerParamsSettings), slideUrlParams); 3123 var youTubeParams = "?" + param(youTubePlayerParams); 3124 return youTubeParams; 3125}; 3126var isYouTubeNoCookie = function (url) { 3127 return url.includes('youtube-nocookie.com'); 3128}; 3129var getVimeoURLParams = function (defaultParams, videoInfo) { 3130 if (!videoInfo || !videoInfo.vimeo) return ''; 3131 var urlParams = videoInfo.vimeo[2] || ''; 3132 var defaultVimeoPlayerParams = Object.assign({}, { 3133 autoplay: 0, 3134 muted: 1 3135 }, defaultParams); 3136 var defaultPlayerParams = defaultVimeoPlayerParams && Object.keys(defaultVimeoPlayerParams).length !== 0 ? param(defaultVimeoPlayerParams) : ''; 3137 // Support private video 3138 var urlWithHash = videoInfo.vimeo[0].split('/').pop() || ''; 3139 var urlWithHashWithParams = urlWithHash.split('?')[0] || ''; 3140 var hash = urlWithHashWithParams.split('#')[0]; 3141 var isPrivate = videoInfo.vimeo[1] !== hash; 3142 if (isPrivate) { 3143 urlParams = urlParams.replace("/" + hash, ''); 3144 } 3145 urlParams = urlParams[0] == '?' ? '&' + urlParams.slice(1) : urlParams || ''; 3146 var privateUrlParams = isPrivate ? "h=" + hash : ''; 3147 defaultPlayerParams = privateUrlParams ? "&" + defaultPlayerParams : defaultPlayerParams; 3148 var vimeoPlayerParams = "?" + privateUrlParams + defaultPlayerParams + urlParams; 3149 return vimeoPlayerParams; 3150}; 3151 3152/** 3153 * Video module for lightGallery 3154 * Supports HTML5, YouTube, Vimeo, wistia videos 3155 * 3156 * 3157 * @ref Wistia 3158 * https://wistia.com/support/integrations/wordpress(How to get url) 3159 * https://wistia.com/support/developers/embed-options#using-embed-options 3160 * https://wistia.com/support/developers/player-api 3161 * https://wistia.com/support/developers/construct-an-embed-code 3162 * http://jsfiddle.net/xvnm7xLm/ 3163 * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video 3164 * https://wistia.com/support/embed-and-share/sharing-videos 3165 * https://private-sharing.wistia.com/medias/mwhrulrucj 3166 * 3167 * @ref Youtube 3168 * https://developers.google.com/youtube/player_parameters#enablejsapi 3169 * https://developers.google.com/youtube/iframe_api_reference 3170 * https://developer.chrome.com/blog/autoplay/#iframe-delegation 3171 * 3172 * @ref Vimeo 3173 * https://stackoverflow.com/questions/10488943/easy-way-to-get-vimeo-id-from-a-vimeo-url 3174 * https://vimeo.zendesk.com/hc/en-us/articles/360000121668-Starting-playback-at-a-specific-timecode 3175 * https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters 3176 */ 3177var Video = /** @class */function () { 3178 function Video(instance) { 3179 // get lightGallery core plugin instance 3180 this.core = instance; 3181 this.settings = __assign(__assign({}, videoSettings), this.core.settings); 3182 return this; 3183 } 3184 Video.prototype.init = function () { 3185 var _this = this; 3186 /** 3187 * Event triggered when video url found without poster 3188 * Append video HTML 3189 * Play if autoplayFirstVideo is true 3190 */ 3191 this.core.LGel.on(lGEvents.hasVideo + ".video", this.onHasVideo.bind(this)); 3192 this.core.LGel.on(lGEvents.posterClick + ".video", function () { 3193 var $el = _this.core.getSlideItem(_this.core.index); 3194 _this.loadVideoOnPosterClick($el); 3195 }); 3196 this.core.LGel.on(lGEvents.slideItemLoad + ".video", this.onSlideItemLoad.bind(this)); 3197 // @desc fired immediately before each slide transition. 3198 this.core.LGel.on(lGEvents.beforeSlide + ".video", this.onBeforeSlide.bind(this)); 3199 // @desc fired immediately after each slide transition. 3200 this.core.LGel.on(lGEvents.afterSlide + ".video", this.onAfterSlide.bind(this)); 3201 }; 3202 /** 3203 * @desc Event triggered when a slide is completely loaded 3204 * 3205 * @param {Event} event - lightGalley custom event 3206 */ 3207 Video.prototype.onSlideItemLoad = function (event) { 3208 var _this = this; 3209 var _a = event.detail, 3210 isFirstSlide = _a.isFirstSlide, 3211 index = _a.index; 3212 // Should check the active slide as well as user may have moved to different slide before the first slide is loaded 3213 if (this.settings.autoplayFirstVideo && isFirstSlide && index === this.core.index) { 3214 // Delay is just for the transition effect on video load 3215 setTimeout(function () { 3216 _this.loadAndPlayVideo(index); 3217 }, 200); 3218 } 3219 // Should not call on first slide. should check only if the slide is active 3220 if (!isFirstSlide && this.settings.autoplayVideoOnSlide && index === this.core.index) { 3221 this.loadAndPlayVideo(index); 3222 } 3223 }; 3224 /** 3225 * @desc Event triggered when video url or poster found 3226 * Append video HTML is poster is not given 3227 * Play if autoplayFirstVideo is true 3228 * 3229 * @param {Event} event - Javascript Event object. 3230 */ 3231 Video.prototype.onHasVideo = function (event) { 3232 var _a = event.detail, 3233 index = _a.index, 3234 src = _a.src, 3235 html5Video = _a.html5Video, 3236 hasPoster = _a.hasPoster; 3237 if (!hasPoster) { 3238 // All functions are called separately if poster exist in loadVideoOnPosterClick function 3239 this.appendVideos(this.core.getSlideItem(index), { 3240 src: src, 3241 addClass: 'lg-object', 3242 index: index, 3243 html5Video: html5Video 3244 }); 3245 // Automatically navigate to next slide once video reaches the end. 3246 this.gotoNextSlideOnVideoEnd(src, index); 3247 } 3248 }; 3249 /** 3250 * @desc fired immediately before each slide transition. 3251 * Pause the previous video 3252 * Hide the download button if the slide contains YouTube, Vimeo, or Wistia videos. 3253 * 3254 * @param {Event} event - Javascript Event object. 3255 * @param {number} prevIndex - Previous index of the slide. 3256 * @param {number} index - Current index of the slide 3257 */ 3258 Video.prototype.onBeforeSlide = function (event) { 3259 if (this.core.lGalleryOn) { 3260 var prevIndex = event.detail.prevIndex; 3261 this.pauseVideo(prevIndex); 3262 } 3263 }; 3264 /** 3265 * @desc fired immediately after each slide transition. 3266 * Play video if autoplayVideoOnSlide option is enabled. 3267 * 3268 * @param {Event} event - Javascript Event object. 3269 * @param {number} prevIndex - Previous index of the slide. 3270 * @param {number} index - Current index of the slide 3271 * @todo should check on onSlideLoad as well if video is not loaded on after slide 3272 */ 3273 Video.prototype.onAfterSlide = function (event) { 3274 var _this = this; 3275 var _a = event.detail, 3276 index = _a.index, 3277 prevIndex = _a.prevIndex; 3278 // Do not call on first slide 3279 var $slide = this.core.getSlideItem(index); 3280 if (this.settings.autoplayVideoOnSlide && index !== prevIndex) { 3281 if ($slide.hasClass('lg-complete')) { 3282 setTimeout(function () { 3283 _this.loadAndPlayVideo(index); 3284 }, 100); 3285 } 3286 } 3287 }; 3288 Video.prototype.loadAndPlayVideo = function (index) { 3289 var $slide = this.core.getSlideItem(index); 3290 var currentGalleryItem = this.core.galleryItems[index]; 3291 if (currentGalleryItem.poster) { 3292 this.loadVideoOnPosterClick($slide, true); 3293 } else { 3294 this.playVideo(index); 3295 } 3296 }; 3297 /** 3298 * Play HTML5, Youtube, Vimeo or Wistia videos in a particular slide. 3299 * @param {number} index - Index of the slide 3300 */ 3301 Video.prototype.playVideo = function (index) { 3302 this.controlVideo(index, 'play'); 3303 }; 3304 /** 3305 * Pause HTML5, Youtube, Vimeo or Wistia videos in a particular slide. 3306 * @param {number} index - Index of the slide 3307 */ 3308 Video.prototype.pauseVideo = function (index) { 3309 this.controlVideo(index, 'pause'); 3310 }; 3311 Video.prototype.getVideoHtml = function (src, addClass, index, html5Video) { 3312 var video = ''; 3313 var videoInfo = this.core.galleryItems[index].__slideVideoInfo || {}; 3314 var currentGalleryItem = this.core.galleryItems[index]; 3315 var videoTitle = currentGalleryItem.title || currentGalleryItem.alt; 3316 videoTitle = videoTitle ? 'title="' + videoTitle + '"' : ''; 3317 var commonIframeProps = "allowtransparency=\"true\"\n frameborder=\"0\"\n scrolling=\"no\"\n allowfullscreen\n mozallowfullscreen\n webkitallowfullscreen\n oallowfullscreen\n msallowfullscreen"; 3318 if (videoInfo.youtube) { 3319 var videoId = 'lg-youtube' + index; 3320 var youTubeParams = getYouTubeParams(videoInfo, this.settings.youTubePlayerParams); 3321 var isYouTubeNoCookieURL = isYouTubeNoCookie(src); 3322 var youtubeURL = isYouTubeNoCookieURL ? '//www.youtube-nocookie.com/' : '//www.youtube.com/'; 3323 video = "<iframe allow=\"autoplay\" id=" + videoId + " class=\"lg-video-object lg-youtube " + addClass + "\" " + videoTitle + " src=\"" + youtubeURL + "embed/" + (videoInfo.youtube[1] + youTubeParams) + "\" " + commonIframeProps + "></iframe>"; 3324 } else if (videoInfo.vimeo) { 3325 var videoId = 'lg-vimeo' + index; 3326 var playerParams = getVimeoURLParams(this.settings.vimeoPlayerParams, videoInfo); 3327 video = "<iframe allow=\"autoplay\" id=" + videoId + " class=\"lg-video-object lg-vimeo " + addClass + "\" " + videoTitle + " src=\"//player.vimeo.com/video/" + (videoInfo.vimeo[1] + playerParams) + "\" " + commonIframeProps + "></iframe>"; 3328 } else if (videoInfo.wistia) { 3329 var wistiaId = 'lg-wistia' + index; 3330 var playerParams = param(this.settings.wistiaPlayerParams); 3331 playerParams = playerParams ? '?' + playerParams : ''; 3332 video = "<iframe allow=\"autoplay\" id=\"" + wistiaId + "\" src=\"//fast.wistia.net/embed/iframe/" + (videoInfo.wistia[4] + playerParams) + "\" " + videoTitle + " class=\"wistia_embed lg-video-object lg-wistia " + addClass + "\" name=\"wistia_embed\" " + commonIframeProps + "></iframe>"; 3333 } else if (videoInfo.html5) { 3334 var html5VideoMarkup = ''; 3335 for (var i = 0; i < html5Video.source.length; i++) { 3336 var type = html5Video.source[i].type; 3337 var typeAttr = type ? "type=\"" + type + "\"" : ''; 3338 html5VideoMarkup += "<source src=\"" + html5Video.source[i].src + "\" " + typeAttr + ">"; 3339 } 3340 if (html5Video.tracks) { 3341 var _loop_1 = function (i) { 3342 var trackAttributes = ''; 3343 var track = html5Video.tracks[i]; 3344 Object.keys(track || {}).forEach(function (key) { 3345 trackAttributes += key + "=\"" + track[key] + "\" "; 3346 }); 3347 html5VideoMarkup += "<track " + trackAttributes + ">"; 3348 }; 3349 for (var i = 0; i < html5Video.tracks.length; i++) { 3350 _loop_1(i); 3351 } 3352 } 3353 var html5VideoAttrs_1 = ''; 3354 var videoAttributes_1 = html5Video.attributes || {}; 3355 Object.keys(videoAttributes_1 || {}).forEach(function (key) { 3356 html5VideoAttrs_1 += key + "=\"" + videoAttributes_1[key] + "\" "; 3357 }); 3358 video = "<video class=\"lg-video-object lg-html5 " + (this.settings.videojs && this.settings.videojsTheme ? this.settings.videojsTheme + ' ' : '') + " " + (this.settings.videojs ? ' video-js' : '') + "\" " + html5VideoAttrs_1 + ">\n " + html5VideoMarkup + "\n Your browser does not support HTML5 video.\n </video>"; 3359 } 3360 return video; 3361 }; 3362 /** 3363 * @desc - Append videos to the slide 3364 * 3365 * @param {HTMLElement} el - slide element 3366 * @param {Object} videoParams - Video parameters, Contains src, class, index, htmlVideo 3367 */ 3368 Video.prototype.appendVideos = function (el, videoParams) { 3369 var _a; 3370 var videoHtml = this.getVideoHtml(videoParams.src, videoParams.addClass, videoParams.index, videoParams.html5Video); 3371 el.find('.lg-video-cont').append(videoHtml); 3372 var $videoElement = el.find('.lg-video-object').first(); 3373 if (videoParams.html5Video) { 3374 $videoElement.on('mousedown.lg.video', function (e) { 3375 e.stopPropagation(); 3376 }); 3377 } 3378 if (this.settings.videojs && ((_a = this.core.galleryItems[videoParams.index].__slideVideoInfo) === null || _a === void 0 ? void 0 : _a.html5)) { 3379 try { 3380 return videojs($videoElement.get(), this.settings.videojsOptions); 3381 } catch (e) { 3382 console.error('lightGallery:- Make sure you have included videojs'); 3383 } 3384 } 3385 }; 3386 Video.prototype.gotoNextSlideOnVideoEnd = function (src, index) { 3387 var _this = this; 3388 var $videoElement = this.core.getSlideItem(index).find('.lg-video-object').first(); 3389 var videoInfo = this.core.galleryItems[index].__slideVideoInfo || {}; 3390 if (this.settings.gotoNextSlideOnVideoEnd) { 3391 if (videoInfo.html5) { 3392 $videoElement.on('ended', function () { 3393 _this.core.goToNextSlide(); 3394 }); 3395 } else if (videoInfo.vimeo) { 3396 try { 3397 // https://github.com/vimeo/player.js/#ended 3398 new Vimeo.Player($videoElement.get()).on('ended', function () { 3399 _this.core.goToNextSlide(); 3400 }); 3401 } catch (e) { 3402 console.error('lightGallery:- Make sure you have included //github.com/vimeo/player.js'); 3403 } 3404 } else if (videoInfo.wistia) { 3405 try { 3406 window._wq = window._wq || []; 3407 // @todo Event is gettign triggered multiple times 3408 window._wq.push({ 3409 id: $videoElement.attr('id'), 3410 onReady: function (video) { 3411 video.bind('end', function () { 3412 _this.core.goToNextSlide(); 3413 }); 3414 } 3415 }); 3416 } catch (e) { 3417 console.error('lightGallery:- Make sure you have included //fast.wistia.com/assets/external/E-v1.js'); 3418 } 3419 } 3420 } 3421 }; 3422 Video.prototype.controlVideo = function (index, action) { 3423 var $videoElement = this.core.getSlideItem(index).find('.lg-video-object').first(); 3424 var videoInfo = this.core.galleryItems[index].__slideVideoInfo || {}; 3425 if (!$videoElement.get()) return; 3426 if (videoInfo.youtube) { 3427 try { 3428 $videoElement.get().contentWindow.postMessage("{\"event\":\"command\",\"func\":\"" + action + "Video\",\"args\":\"\"}", '*'); 3429 } catch (e) { 3430 console.error("lightGallery:- " + e); 3431 } 3432 } else if (videoInfo.vimeo) { 3433 try { 3434 new Vimeo.Player($videoElement.get())[action](); 3435 } catch (e) { 3436 console.error('lightGallery:- Make sure you have included //github.com/vimeo/player.js'); 3437 } 3438 } else if (videoInfo.html5) { 3439 if (this.settings.videojs) { 3440 try { 3441 videojs($videoElement.get())[action](); 3442 } catch (e) { 3443 console.error('lightGallery:- Make sure you have included videojs'); 3444 } 3445 } else { 3446 $videoElement.get()[action](); 3447 } 3448 } else if (videoInfo.wistia) { 3449 try { 3450 window._wq = window._wq || []; 3451 // @todo Find a way to destroy wistia player instance 3452 window._wq.push({ 3453 id: $videoElement.attr('id'), 3454 onReady: function (video) { 3455 video[action](); 3456 } 3457 }); 3458 } catch (e) { 3459 console.error('lightGallery:- Make sure you have included //fast.wistia.com/assets/external/E-v1.js'); 3460 } 3461 } 3462 }; 3463 Video.prototype.loadVideoOnPosterClick = function ($el, forcePlay) { 3464 var _this = this; 3465 // check slide has poster 3466 if (!$el.hasClass('lg-video-loaded')) { 3467 // check already video element present 3468 if (!$el.hasClass('lg-has-video')) { 3469 $el.addClass('lg-has-video'); 3470 var _html = void 0; 3471 var _src = this.core.galleryItems[this.core.index].src; 3472 var video = this.core.galleryItems[this.core.index].video; 3473 if (video) { 3474 _html = typeof video === 'string' ? JSON.parse(video) : video; 3475 } 3476 var videoJsPlayer_1 = this.appendVideos($el, { 3477 src: _src, 3478 addClass: '', 3479 index: this.core.index, 3480 html5Video: _html 3481 }); 3482 this.gotoNextSlideOnVideoEnd(_src, this.core.index); 3483 var $tempImg = $el.find('.lg-object').first().get(); 3484 // @todo make sure it is working 3485 $el.find('.lg-video-cont').first().append($tempImg); 3486 $el.addClass('lg-video-loading'); 3487 videoJsPlayer_1 && videoJsPlayer_1.ready(function () { 3488 videoJsPlayer_1.on('loadedmetadata', function () { 3489 _this.onVideoLoadAfterPosterClick($el, _this.core.index); 3490 }); 3491 }); 3492 $el.find('.lg-video-object').first().on('load.lg error.lg loadedmetadata.lg', function () { 3493 setTimeout(function () { 3494 _this.onVideoLoadAfterPosterClick($el, _this.core.index); 3495 }, 50); 3496 }); 3497 } else { 3498 this.playVideo(this.core.index); 3499 } 3500 } else if (forcePlay) { 3501 this.playVideo(this.core.index); 3502 } 3503 }; 3504 Video.prototype.onVideoLoadAfterPosterClick = function ($el, index) { 3505 $el.addClass('lg-video-loaded'); 3506 this.playVideo(index); 3507 }; 3508 Video.prototype.destroy = function () { 3509 this.core.LGel.off('.lg.video'); 3510 this.core.LGel.off('.video'); 3511 }; 3512 return Video; 3513}(); 3514/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Video); 3515 3516/***/ })
vendor: 6 bytes, lines 3516-3518
3516 3517 3518}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.