1/*! 2 * lightgallery | 2.5.0 | June 13th 2022 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 //Uncode edit ##START## 155 // this.core.LGel.on(lGEvents.beforeSlide + ".thumb", function (event) { 156 this.core.LGel.on(lGEvents.beforeSlide, function (event) { 157 //Uncode edit ##END## 158 var index = event.detail.index; 159 _this.animateThumb(index); 160 }); 161 //Uncode edit ##START## 162 // this.core.LGel.on(lGEvents.beforeOpen + ".thumb", function () { 163 this.core.LGel.on(lGEvents.beforeOpen, function () { 164 //Uncode edit ##END## 165 _this.thumbOuterWidth = _this.core.outer.get().offsetWidth; 166 }); 167 //Uncode edit ##START## 168 // this.core.LGel.on(lGEvents.updateSlides + ".thumb", function () { 169 this.core.LGel.on(lGEvents.updateSlides, function () { 170 //Uncode edit ##END## 171 _this.rebuildThumbnails(); 172 }); 173 //Uncode edit ##START## 174 // this.core.LGel.on(lGEvents.containerResize + ".thumb", function () { 175 this.core.LGel.on(lGEvents.containerResize, function () { 176 //Uncode edit ##END## 177 if (!_this.core.lgOpened) 178 return; 179 setTimeout(function () { 180 _this.thumbOuterWidth = _this.core.outer.get().offsetWidth; 181 _this.animateThumb(_this.core.index); 182 _this.thumbOuterWidth = _this.core.outer.get().offsetWidth; 183 }, 50); 184 }); 185 }; 186 Thumbnail.prototype.setThumbMarkup = function () { 187 var thumbOuterClassNames = 'lg-thumb-outer '; 188 if (this.settings.alignThumbnails) { 189 thumbOuterClassNames += "lg-thumb-align-" + this.settings.alignThumbnails; 190 } 191 var html = "<div class=\"" + thumbOuterClassNames + "\">\n <div class=\"lg-thumb lg-group\">\n </div>\n </div>"; 192 this.core.outer.addClass('lg-has-thumb'); 193 if (this.settings.appendThumbnailsTo === '.lg-components') { 194 this.core.$lgComponents.append(html); 195 } 196 else { 197 this.core.outer.append(html); 198 } 199 this.$thumbOuter = this.core.outer.find('.lg-thumb-outer').first(); 200 this.$lgThumb = this.core.outer.find('.lg-thumb').first(); 201 if (this.settings.animateThumb) { 202 this.core.outer 203 .find('.lg-thumb') 204 .css('transition-duration', this.core.settings.speed + 'ms') 205 .css('width', this.thumbTotalWidth + 'px') 206 .css('position', 'relative'); 207 } 208 this.setThumbItemHtml(this.core.galleryItems); 209 }; 210 Thumbnail.prototype.enableThumbDrag = function () { 211 var _this = this; 212 var thumbDragUtils = { 213 cords: { 214 startX: 0, 215 endX: 0, 216 }, 217 isMoved: false, 218 newTranslateX: 0, 219 startTime: new Date(), 220 endTime: new Date(), 221 touchMoveTime: 0, 222 }; 223 var isDragging = false; 224 this.$thumbOuter.addClass('lg-grab'); 225 this.core.outer 226 .find('.lg-thumb') 227 .first() 228 .on('mousedown.lg.thumb', function (e) { 229 if (_this.thumbTotalWidth > _this.thumbOuterWidth) { 230 // execute only on .lg-object 231 e.preventDefault(); 232 thumbDragUtils.cords.startX = e.pageX; 233 thumbDragUtils.startTime = new Date(); 234 _this.thumbClickable = false; 235 isDragging = true; 236 // ** Fix for webkit cursor issue https://code.google.com/p/chromium/issues/detail?id=26723 237 _this.core.outer.get().scrollLeft += 1; 238 _this.core.outer.get().scrollLeft -= 1; 239 // * 240 _this.$thumbOuter 241 .removeClass('lg-grab') 242 .addClass('lg-grabbing'); 243 } 244 }); 245 this.$LG(window).on("mousemove.lg.thumb.global" + this.core.lgId, function (e) { 246 if (!_this.core.lgOpened) 247 return; 248 if (isDragging) { 249 thumbDragUtils.cords.endX = e.pageX; 250 thumbDragUtils = _this.onThumbTouchMove(thumbDragUtils); 251 } 252 }); 253 this.$LG(window).on("mouseup.lg.thumb.global" + this.core.lgId, function () { 254 if (!_this.core.lgOpened) 255 return; 256 if (thumbDragUtils.isMoved) { 257 thumbDragUtils = _this.onThumbTouchEnd(thumbDragUtils); 258 } 259 else { 260 _this.thumbClickable = true; 261 } 262 if (isDragging) { 263 isDragging = false;
264 _this.$thumbOuter.removeClass('lg-grabbing').addClass('lg-grab'); 265 } 266 }); 267 }; 268 Thumbnail.prototype.enableThumbSwipe = function () { 269 var _this = this; 270 var thumbDragUtils = { 271 cords: { 272 startX: 0, 273 endX: 0, 274 }, 275 isMoved: false, 276 newTranslateX: 0, 277 startTime: new Date(), 278 endTime: new Date(), 279 touchMoveTime: 0, 280 }; 281 this.$lgThumb.on('touchstart.lg', function (e) { 282 if (_this.thumbTotalWidth > _this.thumbOuterWidth) { 283 e.preventDefault(); 284 thumbDragUtils.cords.startX = e.targetTouches[0].pageX; 285 _this.thumbClickable = false; 286 thumbDragUtils.startTime = new Date(); 287 } 288 }); 289 this.$lgThumb.on('touchmove.lg', function (e) { 290 if (_this.thumbTotalWidth > _this.thumbOuterWidth) { 291 e.preventDefault(); 292 thumbDragUtils.cords.endX = e.targetTouches[0].pageX; 293 thumbDragUtils = _this.onThumbTouchMove(thumbDragUtils); 294 } 295 }); 296 this.$lgThumb.on('touchend.lg', function () { 297 if (thumbDragUtils.isMoved) { 298 thumbDragUtils = _this.onThumbTouchEnd(thumbDragUtils); 299 } 300 else { 301 _this.thumbClickable = true; 302 } 303 }); 304 }; 305 // Rebuild thumbnails 306 Thumbnail.prototype.rebuildThumbnails = function () { 307 var _this = this; 308 // Remove transitions 309 this.$thumbOuter.addClass('lg-rebuilding-thumbnails'); 310 setTimeout(function () { 311 _this.thumbTotalWidth = 312 _this.core.galleryItems.length * 313 (_this.settings.thumbWidth + _this.settings.thumbMargin); 314 _this.$lgThumb.css('width', _this.thumbTotalWidth + 'px'); 315 _this.$lgThumb.empty(); 316 _this.setThumbItemHtml(_this.core.galleryItems); 317 _this.animateThumb(_this.core.index); 318 }, 50); 319 setTimeout(function () { 320 _this.$thumbOuter.removeClass('lg-rebuilding-thumbnails'); 321 }, 200); 322 }; 323 // @ts-check 324 Thumbnail.prototype.setTranslate = function (value) { 325 this.$lgThumb.css('transform', 'translate3d(-' + value + 'px, 0px, 0px)'); 326 }; 327 Thumbnail.prototype.getPossibleTransformX = function (left) { 328 if (left > this.thumbTotalWidth - this.thumbOuterWidth) { 329 left = this.thumbTotalWidth - this.thumbOuterWidth; 330 } 331 if (left < 0) { 332 left = 0; 333 } 334 return left; 335 }; 336 Thumbnail.prototype.animateThumb = function (index) { 337 this.$lgThumb.css('transition-duration', this.core.settings.speed + 'ms'); 338 if (this.settings.animateThumb) { 339 var position = 0; 340 switch (this.settings.currentPagerPosition) { 341 case 'left': 342 position = 0; 343 break; 344 case 'middle': 345 position = 346 this.thumbOuterWidth / 2 - this.settings.thumbWidth / 2; 347 break; 348 case 'right': 349 position = this.thumbOuterWidth - this.settings.thumbWidth; 350 } 351 this.translateX = 352 (this.settings.thumbWidth + this.settings.thumbMargin) * index - 353 1 - 354 position; 355 if (this.translateX > this.thumbTotalWidth - this.thumbOuterWidth) { 356 this.translateX = this.thumbTotalWidth - this.thumbOuterWidth; 357 } 358 if (this.translateX < 0) { 359 this.translateX = 0; 360 } 361 this.setTranslate(this.translateX); 362 } 363 }; 364 Thumbnail.prototype.onThumbTouchMove = function (thumbDragUtils) { 365 thumbDragUtils.newTranslateX = this.translateX; 366 thumbDragUtils.isMoved = true; 367 thumbDragUtils.touchMoveTime = new Date().valueOf(); 368 thumbDragUtils.newTranslateX -= 369 thumbDragUtils.cords.endX - thumbDragUtils.cords.startX; 370 thumbDragUtils.newTranslateX = this.getPossibleTransformX(thumbDragUtils.newTranslateX); 371 // move current slide 372 this.setTranslate(thumbDragUtils.newTranslateX); 373 this.$thumbOuter.addClass('lg-dragging'); 374 return thumbDragUtils; 375 }; 376 Thumbnail.prototype.onThumbTouchEnd = function (thumbDragUtils) { 377 thumbDragUtils.isMoved = false; 378 thumbDragUtils.endTime = new Date(); 379 this.$thumbOuter.removeClass('lg-dragging'); 380 var touchDuration = thumbDragUtils.endTime.valueOf() - 381 thumbDragUtils.startTime.valueOf(); 382 var distanceXnew = thumbDragUtils.cords.endX - thumbDragUtils.cords.startX; 383 var speedX = Math.abs(distanceXnew) / touchDuration; 384 // Some magical numbers 385 // Can be improved 386 if (speedX > 0.15 && 387 thumbDragUtils.endTime.valueOf() - thumbDragUtils.touchMoveTime < 30) { 388 speedX += 1; 389 if (speedX > 2) { 390 speedX += 1; 391 } 392 speedX = 393 speedX + 394 speedX * (Math.abs(distanceXnew) / this.thumbOuterWidth); 395 this.$lgThumb.css('transition-duration', Math.min(speedX - 1, 2) + 'settings'); 396 distanceXnew = distanceXnew * speedX; 397 this.translateX = this.getPossibleTransformX(this.translateX - distanceXnew); 398 this.setTranslate(this.translateX); 399 } 400 else { 401 this.translateX = thumbDragUtils.newTranslateX; 402 } 403 if (Math.abs(thumbDragUtils.cords.endX - thumbDragUtils.cords.startX) < 404 this.settings.thumbnailSwipeThreshold) { 405 this.thumbClickable = true; 406 } 407 return thumbDragUtils; 408 };
409 Thumbnail.prototype.getThumbHtml = function (thumb, index, alt) { 410 var slideVideoInfo = this.core.galleryItems[index].__slideVideoInfo || {}; 411 var thumbImg, 412 altTh = this.core.galleryItems[index].subHtml, 413 altApp = ''; 414 if (slideVideoInfo.youtube) { 415 if (this.settings.loadYouTubeThumbnail) { 416 thumbImg = 417 '//img.youtube.com/vi/' + 418 slideVideoInfo.youtube[1] + 419 '/' + 420 this.settings.youTubeThumbSize + 421 '.jpg'; 422 } 423 else { 424 thumbImg = thumb; 425 } 426 } 427 else { 428 thumbImg = thumb; 429 } 430 431 if ( altTh ) { 432 altTh = altTh.replace(/<\/?[^>]+(>|$)/g, ""); 433 altApp = 'alt=\"' + altTh + ' \" '; 434 } else if ( typeof alt !== 'undefined' ) { 435 altApp = 'alt=\"' + alt + ' \" '; 436 } 437 438 if ( thumbImg ) { 439 return "<div data-lg-item-id=\"" + index + "\" class=\"lg-thumb-item " + (index === this.core.index ? ' active' : '') + "\" \n style=\"width:" + this.settings.thumbWidth + "px; height: " + this.settings.thumbHeight + ";\n margin-right: " + this.settings.thumbMargin + "px;\">\n <img data-lg-item-id=\"" + index + "\" " + altApp + "src=\"" + thumbImg + "\" />\n </div>"; 440 } else { 441 return "<div data-lg-item-id=\"" + index + "\" class=\"lg-thumb-item " + (index === this.core.index ? ' active' : '') + "\" \n style=\"width:" + this.settings.thumbWidth + "px; height: " + this.settings.thumbHeight + ";\n margin-right: " + this.settings.thumbMargin + "px;\">\n </div>"; 442 } 443 }; 444 Thumbnail.prototype.getThumbItemHtml = function (items) { 445 var thumbList = ''; 446 for (var i = 0; i < items.length; i++) { 447 thumbList += this.getThumbHtml(items[i].thumb, i, items[i].alt); 448 } 449 return thumbList; 450 }; 451 Thumbnail.prototype.setThumbItemHtml = function (items) { 452 var thumbList = this.getThumbItemHtml(items); 453 this.$lgThumb.html(thumbList); 454 }; 455 Thumbnail.prototype.setAnimateThumbStyles = function () { 456 if (this.settings.animateThumb) { 457 this.core.outer.addClass('lg-animate-thumb'); 458 } 459 }; 460 // Manage thumbnail active calss
461 Thumbnail.prototype.manageActiveClassOnSlideChange = function () { 462 var _this = this; 463 // manage active class for thumbnail 464 //Uncode edit ##START## 465 // this.core.LGel.on(lGEvents.beforeSlide + ".thumb", function (event) { 466 this.core.LGel.on(lGEvents.beforeSlide, function (event) { 467 //Uncode edit ##END## 468 var $thumb = _this.core.outer.find('.lg-thumb-item'); 469 var index = event.detail.index; 470 $thumb.removeClass('active'); 471 $thumb.eq(index).addClass('active'); 472 }); 473 }; 474 // Toggle thumbnail bar 475 Thumbnail.prototype.toggleThumbBar = function () { 476 var _this = this; 477 if (this.settings.toggleThumb) { 478 this.core.outer.addClass('lg-can-toggle'); 479 this.core.$toolbar.append('<button type="button" aria-label="' + 480 this.settings.thumbnailPluginStrings['toggleThumbnails'] + 481 '" class="lg-toggle-thumb lg-icon"></button>'); 482 this.core.outer 483 .find('.lg-toggle-thumb') 484 .first() 485 .on('click.lg', function () { 486 _this.core.outer.toggleClass('lg-components-open'); 487 }); 488 } 489 }; 490 Thumbnail.prototype.thumbKeyPress = function () { 491 var _this = this; 492 this.$LG(window).on("keydown.lg.thumb.global" + this.core.lgId, function (e) { 493 if (!_this.core.lgOpened || !_this.settings.toggleThumb) 494 return; 495 if (e.keyCode === 38) { 496 e.preventDefault(); 497 _this.core.outer.addClass('lg-components-open'); 498 } 499 else if (e.keyCode === 40) { 500 e.preventDefault(); 501 _this.core.outer.removeClass('lg-components-open'); 502 } 503 }); 504 }; 505 Thumbnail.prototype.destroy = function () { 506 if (this.settings.thumbnail) { 507 this.$LG(window).off(".lg.thumb.global" + this.core.lgId); 508 this.core.LGel.off('.lg.thumb'); 509 this.core.LGel.off('.thumb'); 510 this.$thumbOuter.remove(); 511 this.core.outer.removeClass('lg-has-thumb'); 512 } 513 }; 514 return Thumbnail; 515 }()); 516 517 return Thumbnail; 518 519})));
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.