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