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