1/*! 2 * lightgallery | 2.8.0-beta.3 | May 3rd 2024 3 * http://www.lightgalleryjs.com/ 4 * Copyright (c) 2020 Sachin Neravath; 5 * @license GPLv3 6 */ 7 8(function (global, factory) { 9 typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : 10 typeof define === 'function' && define.amd ? define(factory) : 11 (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.lgThumbnail = factory()); 12}(this, (function () { 'use strict'; 13 14 /*! ***************************************************************************** 15 Copyright (c) Microsoft Corporation. 16 17 Permission to use, copy, modify, and/or distribute this software for any 18 purpose with or without fee is hereby granted. 19 20 THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 21 REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY 22 AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 23 INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 24 LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 25 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 26 PERFORMANCE OF THIS SOFTWARE. 27 ***************************************************************************** */ 28 29 var __assign = function() { 30 __assign = Object.assign || function __assign(t) { 31 for (var s, i = 1, n = arguments.length; i < n; i++) { 32 s = arguments[i]; 33 for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; 34 } 35 return t; 36 }; 37 return __assign.apply(this, arguments); 38 }; 39 40 var thumbnailsSettings = { 41 thumbnail: true, 42 animateThumb: true, 43 currentPagerPosition: 'middle', 44 alignThumbnails: 'middle', 45 thumbWidth: 100, 46 thumbHeight: '80px', 47 thumbMargin: 5, 48 appendThumbnailsTo: '.lg-components', 49 toggleThumb: false, 50 enableThumbDrag: true, 51 enableThumbSwipe: true, 52 thumbnailSwipeThreshold: 10, 53 loadYouTubeThumbnail: true, 54 youTubeThumbSize: 1, 55 thumbnailPluginStrings: { 56 toggleThumbnails: 'Toggle thumbnails', 57 }, 58 }; 59 60 /** 61 * List of lightGallery events 62 * All events should be documented here 63 * Below interfaces are used to build the website documentations 64 * */ 65 var lGEvents = { 66 afterAppendSlide: 'lgAfterAppendSlide', 67 init: 'lgInit', 68 hasVideo: 'lgHasVideo', 69 containerResize: 'lgContainerResize', 70 updateSlides: 'lgUpdateSlides', 71 afterAppendSubHtml: 'lgAfterAppendSubHtml', 72 beforeOpen: 'lgBeforeOpen', 73 afterOpen: 'lgAfterOpen', 74 slideItemLoad: 'lgSlideItemLoad', 75 beforeSlide: 'lgBeforeSlide', 76 afterSlide: 'lgAfterSlide', 77 posterClick: 'lgPosterClick', 78 dragStart: 'lgDragStart', 79 dragMove: 'lgDragMove', 80 dragEnd: 'lgDragEnd', 81 beforeNextSlide: 'lgBeforeNextSlide', 82 beforePrevSlide: 'lgBeforePrevSlide', 83 beforeClose: 'lgBeforeClose', 84 afterClose: 'lgAfterClose', 85 rotateLeft: 'lgRotateLeft', 86 rotateRight: 'lgRotateRight', 87 flipHorizontal: 'lgFlipHorizontal', 88 flipVertical: 'lgFlipVertical', 89 autoplay: 'lgAutoplay', 90 autoplayStart: 'lgAutoplayStart', 91 autoplayStop: 'lgAutoplayStop', 92 }; 93 94 var Thumbnail = /** @class */ (function () { 95 function Thumbnail(instance, $LG) { 96 this.thumbOuterWidth = 0; 97 this.thumbTotalWidth = 0; 98 this.translateX = 0; 99 this.thumbClickable = false; 100 // get lightGallery core plugin instance 101 this.core = instance; 102 this.$LG = $LG; 103 return this; 104 } 105 Thumbnail.prototype.init = function () { 106 // extend module default settings with lightGallery core settings 107 this.settings = __assign(__assign({}, thumbnailsSettings), this.core.settings); 108 this.thumbOuterWidth = 0; 109 this.thumbTotalWidth = 110 this.core.galleryItems.length * 111 (this.settings.thumbWidth + this.settings.thumbMargin); 112 // Thumbnail animation value 113 this.translateX = 0; 114 this.setAnimateThumbStyles();
115 if (!this.core.settings.allowMediaOverlap) { 116 this.settings.toggleThumb = false; 117 } 118 if (this.settings.thumbnail) { 119 this.build(); 120 if (this.settings.animateThumb) { 121 if (this.settings.enableThumbDrag) { 122 this.enableThumbDrag(); 123 } 124 if (this.settings.enableThumbSwipe) { 125 this.enableThumbSwipe(); 126 } 127 this.thumbClickable = false; 128 } 129 else { 130 this.thumbClickable = true; 131 } 132 this.toggleThumbBar(); 133 this.thumbKeyPress(); 134 } 135 }; 136 Thumbnail.prototype.build = function () { 137 var _this = this; 138 this.setThumbMarkup(); 139 this.manageActiveClassOnSlideChange(); 140 this.$lgThumb.first().on('click.lg touchend.lg', function (e) { 141 var $target = _this.$LG(e.target); 142 if (!$target.hasAttribute('data-lg-item-id')) { 143 return; 144 } 145 setTimeout(function () { 146 // In IE9 and bellow touch does not support 147 // Go to slide if browser does not support css transitions 148 if (_this.thumbClickable && !_this.core.lgBusy) { 149 var index = parseInt($target.attr('data-lg-item-id')); 150 _this.core.slide(index, false, true, false); 151 } 152 }, 50); 153 }); 154 this.core.LGel.on(lGEvents.beforeSlide + ".thumb", function (event) { 155 var index = event.detail.index; 156 _this.animateThumb(index); 157 }); 158 this.core.LGel.on(lGEvents.beforeOpen + ".thumb", function () { 159 _this.thumbOuterWidth = _this.core.outer.get().offsetWidth; 160 }); 161 this.core.LGel.on(lGEvents.updateSlides + ".thumb", function () { 162 _this.rebuildThumbnails(); 163 }); 164 this.core.LGel.on(lGEvents.containerResize + ".thumb", function () { 165 if (!_this.core.lgOpened) 166 return; 167 setTimeout(function () { 168 _this.thumbOuterWidth = _this.core.outer.get().offsetWidth; 169 _this.animateThumb(_this.core.index); 170 _this.thumbOuterWidth = _this.core.outer.get().offsetWidth; 171 }, 50); 172 }); 173 }; 174 Thumbnail.prototype.setThumbMarkup = function () { 175 var thumbOuterClassNames = 'lg-thumb-outer '; 176 if (this.settings.alignThumbnails) { 177 thumbOuterClassNames += "lg-thumb-align-" + this.settings.alignThumbnails; 178 } 179 var html = "<div class=\"" + thumbOuterClassNames + "\">\n <div class=\"lg-thumb lg-group\">\n </div>\n </div>"; 180 this.core.outer.addClass('lg-has-thumb'); 181 if (this.settings.appendThumbnailsTo === '.lg-components') { 182 this.core.$lgComponents.append(html); 183 } 184 else { 185 this.core.outer.append(html); 186 } 187 this.$thumbOuter = this.core.outer.find('.lg-thumb-outer').first(); 188 this.$lgThumb = this.core.outer.find('.lg-thumb').first(); 189 if (this.settings.animateThumb) { 190 this.core.outer 191 .find('.lg-thumb') 192 .css('transition-duration', this.core.settings.speed + 'ms') 193 .css('width', this.thumbTotalWidth + 'px') 194 .css('position', 'relative'); 195 } 196 this.setThumbItemHtml(this.core.galleryItems); 197 }; 198 Thumbnail.prototype.enableThumbDrag = function () { 199 var _this = this; 200 var thumbDragUtils = { 201 cords: { 202 startX: 0, 203 endX: 0, 204 }, 205 isMoved: false, 206 newTranslateX: 0, 207 startTime: new Date(), 208 endTime: new Date(), 209 touchMoveTime: 0, 210 }; 211 var isDragging = false; 212 this.$thumbOuter.addClass('lg-grab'); 213 this.core.outer 214 .find('.lg-thumb') 215 .first() 216 .on('mousedown.lg.thumb', function (e) { 217 if (_this.thumbTotalWidth > _this.thumbOuterWidth) { 218 // execute only on .lg-object 219 e.preventDefault(); 220 thumbDragUtils.cords.startX = e.pageX; 221 thumbDragUtils.startTime = new Date(); 222 _this.thumbClickable = false; 223 isDragging = true; 224 // ** Fix for webkit cursor issue https://code.google.com/p/chromium/issues/detail?id=26723 225 _this.core.outer.get().scrollLeft += 1; 226 _this.core.outer.get().scrollLeft -= 1; 227 // * 228 _this.$thumbOuter 229 .removeClass('lg-grab') 230 .addClass('lg-grabbing'); 231 } 232 }); 233 this.$LG(window).on("mousemove.lg.thumb.global" + this.core.lgId, function (e) { 234 if (!_this.core.lgOpened) 235 return; 236 if (isDragging) { 237 thumbDragUtils.cords.endX = e.pageX; 238 thumbDragUtils = _this.onThumbTouchMove(thumbDragUtils); 239 } 240 }); 241 this.$LG(window).on("mouseup.lg.thumb.global" + this.core.lgId, function () { 242 if (!_this.core.lgOpened) 243 return; 244 if (thumbDragUtils.isMoved) { 245 thumbDragUtils = _this.onThumbTouchEnd(thumbDragUtils); 246 } 247 else { 248 _this.thumbClickable = true; 249 } 250 if (isDragging) { 251 isDragging = false; 252 _this.$thumbOuter.removeClass('lg-grabbing').addClass('lg-grab'); 253 } 254 }); 255 }; 256 Thumbnail.prototype.enableThumbSwipe = function () { 257 var _this = this; 258 var thumbDragUtils = { 259 cords: { 260 startX: 0, 261 endX: 0, 262 }, 263 isMoved: false, 264 newTranslateX: 0, 265 startTime: new Date(), 266 endTime: new Date(), 267 touchMoveTime: 0, 268 }; 269 this.$lgThumb.on('touchstart.lg', function (e) { 270 if (_this.thumbTotalWidth > _this.thumbOuterWidth) { 271 e.preventDefault(); 272 thumbDragUtils.cords.startX = e.targetTouches[0].pageX; 273 _this.thumbClickable = false; 274 thumbDragUtils.startTime = new Date(); 275 } 276 }); 277 this.$lgThumb.on('touchmove.lg', function (e) { 278 if (_this.thumbTotalWidth > _this.thumbOuterWidth) { 279 e.preventDefault(); 280 thumbDragUtils.cords.endX = e.targetTouches[0].pageX; 281 thumbDragUtils = _this.onThumbTouchMove(thumbDragUtils); 282 } 283 }); 284 this.$lgThumb.on('touchend.lg', function () { 285 if (thumbDragUtils.isMoved) { 286 thumbDragUtils = _this.onThumbTouchEnd(thumbDragUtils); 287 } 288 else { 289 _this.thumbClickable = true; 290 } 291 }); 292 }; 293 // Rebuild thumbnails 294 Thumbnail.prototype.rebuildThumbnails = function () { 295 var _this = this; 296 // Remove transitions 297 this.$thumbOuter.addClass('lg-rebuilding-thumbnails'); 298 setTimeout(function () { 299 _this.thumbTotalWidth = 300 _this.core.galleryItems.length * 301 (_this.settings.thumbWidth + _this.settings.thumbMargin); 302 _this.$lgThumb.css('width', _this.thumbTotalWidth + 'px'); 303 _this.$lgThumb.empty(); 304 _this.setThumbItemHtml(_this.core.galleryItems); 305 _this.animateThumb(_this.core.index); 306 }, 50); 307 setTimeout(function () { 308 _this.$thumbOuter.removeClass('lg-rebuilding-thumbnails'); 309 }, 200); 310 }; 311 // @ts-check 312 Thumbnail.prototype.setTranslate = function (value) { 313 this.$lgThumb.css('transform', 'translate3d(-' + value + 'px, 0px, 0px)'); 314 }; 315 Thumbnail.prototype.getPossibleTransformX = function (left) { 316 if (left > this.thumbTotalWidth - this.thumbOuterWidth) { 317 left = this.thumbTotalWidth - this.thumbOuterWidth; 318 } 319 if (left < 0) { 320 left = 0; 321 } 322 return left; 323 }; 324 Thumbnail.prototype.animateThumb = function (index) { 325 this.$lgThumb.css('transition-duration', this.core.settings.speed + 'ms'); 326 if (this.settings.animateThumb) { 327 var position = 0; 328 switch (this.settings.currentPagerPosition) { 329 case 'left': 330 position = 0; 331 break; 332 case 'middle': 333 position = 334 this.thumbOuterWidth / 2 - this.settings.thumbWidth / 2; 335 break; 336 case 'right': 337 position = this.thumbOuterWidth - this.settings.thumbWidth; 338 } 339 this.translateX = 340 (this.settings.thumbWidth + this.settings.thumbMargin) * index - 341 1 - 342 position; 343 if (this.translateX > this.thumbTotalWidth - this.thumbOuterWidth) { 344 this.translateX = this.thumbTotalWidth - this.thumbOuterWidth; 345 } 346 if (this.translateX < 0) { 347 this.translateX = 0; 348 } 349 this.setTranslate(this.translateX); 350 } 351 }; 352 Thumbnail.prototype.onThumbTouchMove = function (thumbDragUtils) { 353 thumbDragUtils.newTranslateX = this.translateX; 354 thumbDragUtils.isMoved = true; 355 thumbDragUtils.touchMoveTime = new Date().valueOf(); 356 thumbDragUtils.newTranslateX -= 357 thumbDragUtils.cords.endX - thumbDragUtils.cords.startX; 358 thumbDragUtils.newTranslateX = this.getPossibleTransformX(thumbDragUtils.newTranslateX); 359 // move current slide 360 this.setTranslate(thumbDragUtils.newTranslateX); 361 this.$thumbOuter.addClass('lg-dragging'); 362 return thumbDragUtils; 363 }; 364 Thumbnail.prototype.onThumbTouchEnd = function (thumbDragUtils) { 365 thumbDragUtils.isMoved = false; 366 thumbDragUtils.endTime = new Date(); 367 this.$thumbOuter.removeClass('lg-dragging'); 368 var touchDuration = thumbDragUtils.endTime.valueOf() - 369 thumbDragUtils.startTime.valueOf(); 370 var distanceXnew = thumbDragUtils.cords.endX - thumbDragUtils.cords.startX; 371 var speedX = Math.abs(distanceXnew) / touchDuration; 372 // Some magical numbers 373 // Can be improved 374 if (speedX > 0.15 && 375 thumbDragUtils.endTime.valueOf() - thumbDragUtils.touchMoveTime < 30) { 376 speedX += 1;
377 if (speedX > 2) { 378 speedX += 1; 379 } 380 speedX = 381 speedX + 382 speedX * (Math.abs(distanceXnew) / this.thumbOuterWidth); 383 this.$lgThumb.css('transition-duration', Math.min(speedX - 1, 2) + 'settings'); 384 distanceXnew = distanceXnew * speedX; 385 this.translateX = this.getPossibleTransformX(this.translateX - distanceXnew); 386 this.setTranslate(this.translateX); 387 } 388 else { 389 this.translateX = thumbDragUtils.newTranslateX; 390 } 391 if (Math.abs(thumbDragUtils.cords.endX - thumbDragUtils.cords.startX) < 392 this.settings.thumbnailSwipeThreshold) { 393 this.thumbClickable = true; 394 } 395 return thumbDragUtils; 396 }; 397 Thumbnail.prototype.getThumbHtml = function (thumb, index, alt) { 398 var slideVideoInfo = this.core.galleryItems[index].__slideVideoInfo || {}; 399 var thumbImg; 400 if (slideVideoInfo.youtube) { 401 if (this.settings.loadYouTubeThumbnail) { 402 thumbImg = 403 '//img.youtube.com/vi/' + 404 slideVideoInfo.youtube[1] + 405 '/' + 406 this.settings.youTubeThumbSize + 407 '.jpg'; 408 } 409 else { 410 thumbImg = thumb; 411 } 412 } 413 else { 414 thumbImg = thumb; 415 } 416 var div = document.createElement('div'); 417 div.setAttribute('data-lg-item-id', index + ''); 418 div.className = "lg-thumb-item " + (index === this.core.index ? 'active' : ''); 419 div.style.cssText = "width: " + this.settings.thumbWidth + "px; height: " + this.settings.thumbHeight + "; margin-right: " + this.settings.thumbMargin + "px;"; 420 var img = document.createElement('img'); 421 img.alt = alt || ''; 422 img.setAttribute('data-lg-item-id', index + ''); 423 img.src = thumbImg; 424 div.appendChild(img); 425 return div; 426 }; 427 Thumbnail.prototype.setThumbItemHtml = function (items) { 428 for (var i = 0; i < items.length; i++) { 429 var thumb = this.getThumbHtml(items[i].thumb, i, items[i].alt); 430 this.$lgThumb.append(thumb); 431 } 432 }; 433 Thumbnail.prototype.setAnimateThumbStyles = function () { 434 if (this.settings.animateThumb) { 435 this.core.outer.addClass('lg-animate-thumb'); 436 } 437 }; 438 // Manage thumbnail active calss 439 Thumbnail.prototype.manageActiveClassOnSlideChange = function () { 440 var _this = this; 441 // manage active class for thumbnail 442 this.core.LGel.on(lGEvents.beforeSlide + ".thumb", function (event) { 443 var $thumb = _this.core.outer.find('.lg-thumb-item'); 444 var index = event.detail.index; 445 $thumb.removeClass('active'); 446 $thumb.eq(index).addClass('active'); 447 }); 448 }; 449 // Toggle thumbnail bar 450 Thumbnail.prototype.toggleThumbBar = function () { 451 var _this = this; 452 if (this.settings.toggleThumb) { 453 this.core.outer.addClass('lg-can-toggle'); 454 this.core.$toolbar.append('<button type="button" aria-label="' + 455 this.settings.thumbnailPluginStrings['toggleThumbnails'] + 456 '" class="lg-toggle-thumb lg-icon"></button>'); 457 this.core.outer 458 .find('.lg-toggle-thumb') 459 .first() 460 .on('click.lg', function () { 461 _this.core.outer.toggleClass('lg-components-open'); 462 }); 463 } 464 }; 465 Thumbnail.prototype.thumbKeyPress = function () { 466 var _this = this; 467 this.$LG(window).on("keydown.lg.thumb.global" + this.core.lgId, function (e) { 468 if (!_this.core.lgOpened || !_this.settings.toggleThumb) 469 return; 470 if (e.keyCode === 38) { 471 e.preventDefault(); 472 _this.core.outer.addClass('lg-components-open'); 473 } 474 else if (e.keyCode === 40) { 475 e.preventDefault(); 476 _this.core.outer.removeClass('lg-components-open'); 477 } 478 }); 479 }; 480 Thumbnail.prototype.destroy = function () { 481 if (this.settings.thumbnail) { 482 this.$LG(window).off(".lg.thumb.global" + this.core.lgId); 483 this.core.LGel.off('.lg.thumb'); 484 this.core.LGel.off('.thumb'); 485 this.$thumbOuter.remove(); 486 this.core.outer.removeClass('lg-has-thumb'); 487 } 488 }; 489 return Thumbnail; 490 }()); 491 492 return Thumbnail; 493 494}))); 495//# sourceMappingURL=lg-thumbnail.umd.js.map
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.