https://franklinnc.com/revize/plugins/zbuilder/v1/website/_assets_…/dist/plugins/zoom/lg-zoom.umd.js
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.lgZoom = 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 zoomSettings = { 41 scale: 1, 42 zoom: true, 43 infiniteZoom: true, 44 actualSize: true, 45 showZoomInOutIcons: false, 46 actualSizeIcons: { 47 zoomIn: 'lg-zoom-in', 48 zoomOut: 'lg-zoom-out', 49 }, 50 enableZoomAfter: 300, 51 zoomPluginStrings: { 52 zoomIn: 'Zoom in', 53 zoomOut: 'Zoom out', 54 viewActualSize: 'View actual size', 55 }, 56 }; 57 58 /** 59 * List of lightGallery events 60 * All events should be documented here 61 * Below interfaces are used to build the website documentations 62 * */ 63 var lGEvents = { 64 afterAppendSlide: 'lgAfterAppendSlide', 65 init: 'lgInit', 66 hasVideo: 'lgHasVideo', 67 containerResize: 'lgContainerResize', 68 updateSlides: 'lgUpdateSlides', 69 afterAppendSubHtml: 'lgAfterAppendSubHtml', 70 beforeOpen: 'lgBeforeOpen', 71 afterOpen: 'lgAfterOpen', 72 slideItemLoad: 'lgSlideItemLoad', 73 beforeSlide: 'lgBeforeSlide', 74 afterSlide: 'lgAfterSlide', 75 posterClick: 'lgPosterClick', 76 dragStart: 'lgDragStart', 77 dragMove: 'lgDragMove', 78 dragEnd: 'lgDragEnd', 79 beforeNextSlide: 'lgBeforeNextSlide', 80 beforePrevSlide: 'lgBeforePrevSlide', 81 beforeClose: 'lgBeforeClose', 82 afterClose: 'lgAfterClose', 83 rotateLeft: 'lgRotateLeft', 84 rotateRight: 'lgRotateRight', 85 flipHorizontal: 'lgFlipHorizontal', 86 flipVertical: 'lgFlipVertical', 87 autoplay: 'lgAutoplay', 88 autoplayStart: 'lgAutoplayStart', 89 autoplayStop: 'lgAutoplayStop', 90 }; 91 92 var ZOOM_TRANSITION_DURATION = 500; 93 var Zoom = /** @class */ (function () { 94 function Zoom(instance, $LG) { 95 // get lightGallery core plugin instance 96 this.core = instance; 97 this.$LG = $LG; 98 this.settings = __assign(__assign({}, zoomSettings), this.core.settings); 99 return this; 100 } 101 // Append Zoom controls. Actual size, Zoom-in, Zoom-out 102 Zoom.prototype.buildTemplates = function () { 103 var zoomIcons = this.settings.showZoomInOutIcons 104 ? "<button id=\"" + this.core.getIdName('lg-zoom-in') + "\" type=\"button\" aria-label=\"" + this.settings.zoomPluginStrings['zoomIn'] + "\" class=\"lg-zoom-in lg-icon\"></button><button id=\"" + this.core.getIdName('lg-zoom-out') + "\" type=\"button\" aria-label=\"" + this.settings.zoomPluginStrings['zoomOut'] + "\" class=\"lg-zoom-out lg-icon\"></button>" 105 : ''; 106 if (this.settings.actualSize) { 107 zoomIcons += "<button id=\"" + this.core.getIdName('lg-actual-size') + "\" type=\"button\" aria-label=\"" + this.settings.zoomPluginStrings['viewActualSize'] + "\" class=\"" + this.settings.actualSizeIcons.zoomIn + " lg-icon\"></button>"; 108 } 109 this.core.outer.addClass('lg-use-transition-for-zoom'); 110 this.core.$toolbar.first().append(zoomIcons);
111 }; 112 /** 113 * @desc Enable zoom option only once the image is completely loaded 114 * If zoomFromOrigin is true, Zoom is enabled once the dummy image has been inserted 115 * 116 * Zoom styles are defined under lg-zoomable CSS class. 117 */ 118 Zoom.prototype.enableZoom = function (event) { 119 var _this = this; 120 // delay will be 0 except first time 121 var _speed = this.settings.enableZoomAfter + event.detail.delay; 122 // set _speed value 0 if gallery opened from direct url and if it is first slide 123 if (this.$LG('body').first().hasClass('lg-from-hash') && 124 event.detail.delay) { 125 // will execute only once 126 _speed = 0; 127 } 128 else { 129 // Remove lg-from-hash to enable starting animation. 130 this.$LG('body').first().removeClass('lg-from-hash'); 131 } 132 this.zoomableTimeout = setTimeout(function () { 133 if (!_this.isImageSlide(_this.core.index)) { 134 return; 135 } 136 _this.core.getSlideItem(event.detail.index).addClass('lg-zoomable'); 137 if (event.detail.index === _this.core.index) { 138 _this.setZoomEssentials(); 139 } 140 }, _speed + 30); 141 }; 142 Zoom.prototype.enableZoomOnSlideItemLoad = function () { 143 // Add zoomable class 144 this.core.LGel.on(lGEvents.slideItemLoad + ".zoom", this.enableZoom.bind(this)); 145 }; 146 Zoom.prototype.getDragCords = function (e) { 147 return { 148 x: e.pageX, 149 y: e.pageY, 150 }; 151 }; 152 Zoom.prototype.getSwipeCords = function (e) { 153 var x = e.touches[0].pageX; 154 var y = e.touches[0].pageY; 155 return { 156 x: x, 157 y: y, 158 }; 159 }; 160 Zoom.prototype.getDragAllowedAxises = function (scale, scaleDiff) { 161 if (!this.containerRect) { 162 return { 163 allowX: false, 164 allowY: false, 165 }; 166 } 167 var $image = this.core 168 .getSlideItem(this.core.index) 169 .find('.lg-image') 170 .first() 171 .get(); 172 var height = 0; 173 var width = 0; 174 var rect = $image.getBoundingClientRect(); 175 if (scale) { 176 height = $image.offsetHeight * scale; 177 width = $image.offsetWidth * scale; 178 } 179 else if (scaleDiff) { 180 height = rect.height + scaleDiff * rect.height; 181 width = rect.width + scaleDiff * rect.width; 182 } 183 else { 184 height = rect.height; 185 width = rect.width; 186 } 187 var allowY = height > this.containerRect.height; 188 var allowX = width > this.containerRect.width; 189 return { 190 allowX: allowX, 191 allowY: allowY, 192 }; 193 }; 194 Zoom.prototype.setZoomEssentials = function () { 195 this.containerRect = this.core.$content.get().getBoundingClientRect(); 196 }; 197 /** 198 * @desc Image zoom 199 * Translate the wrap and scale the image to get better user experience 200 * 201 * @param {String} scale - Zoom decrement/increment value 202 */ 203 Zoom.prototype.zoomImage = function (scale, scaleDiff, reposition, resetToMax) { 204 if (Math.abs(scaleDiff) <= 0) 205 return; 206 var offsetX = this.containerRect.width / 2 + this.containerRect.left; 207 var offsetY = this.containerRect.height / 2 + 208 this.containerRect.top + 209 this.scrollTop; 210 var originalX; 211 var originalY; 212 if (scale === 1) { 213 this.positionChanged = false; 214 } 215 var dragAllowedAxises = this.getDragAllowedAxises(0, scaleDiff); 216 var allowY = dragAllowedAxises.allowY, allowX = dragAllowedAxises.allowX; 217 if (this.positionChanged) { 218 originalX = this.left / (this.scale - scaleDiff); 219 originalY = this.top / (this.scale - scaleDiff); 220 this.pageX = offsetX - originalX; 221 this.pageY = offsetY - originalY; 222 this.positionChanged = false; 223 } 224 var possibleSwipeCords = this.getPossibleSwipeDragCords(scaleDiff); 225 var x; 226 var y; 227 var _x = offsetX - this.pageX; 228 var _y = offsetY - this.pageY; 229 if (scale - scaleDiff > 1) { 230 var scaleVal = (scale - scaleDiff) / Math.abs(scaleDiff); 231 _x = 232 (scaleDiff < 0 ? -_x : _x) + 233 this.left * (scaleVal + (scaleDiff < 0 ? -1 : 1)); 234 _y = 235 (scaleDiff < 0 ? -_y : _y) + 236 this.top * (scaleVal + (scaleDiff < 0 ? -1 : 1)); 237 x = _x / scaleVal; 238 y = _y / scaleVal; 239 } 240 else { 241 var scaleVal = (scale - scaleDiff) * scaleDiff; 242 x = _x * scaleVal; 243 y = _y * scaleVal; 244 } 245 if (reposition) { 246 if (allowX) { 247 if (this.isBeyondPossibleLeft(x, possibleSwipeCords.minX)) { 248 x = possibleSwipeCords.minX; 249 } 250 else if (this.isBeyondPossibleRight(x, possibleSwipeCords.maxX)) { 251 x = possibleSwipeCords.maxX; 252 } 253 } 254 else { 255 if (scale > 1) { 256 if (x < possibleSwipeCords.minX) { 257 x = possibleSwipeCords.minX; 258 } 259 else if (x > possibleSwipeCords.maxX) { 260 x = possibleSwipeCords.maxX; 261 } 262 } 263 } 264 // @todo fix this 265 if (allowY) { 266 if (this.isBeyondPossibleTop(y, possibleSwipeCords.minY)) { 267 y = possibleSwipeCords.minY; 268 } 269 else if (this.isBeyondPossibleBottom(y, possibleSwipeCords.maxY)) { 270 y = possibleSwipeCords.maxY; 271 } 272 } 273 else { 274 // If the translate value based on index of beyond the viewport, utilize the available space to prevent image being cut out 275 if (scale > 1) { 276 //If image goes beyond viewport top, use the minim possible translate value 277 if (y < possibleSwipeCords.minY) { 278 y = possibleSwipeCords.minY; 279 } 280 else if (y > possibleSwipeCords.maxY) { 281 y = possibleSwipeCords.maxY; 282 } 283 } 284 } 285 } 286 this.setZoomStyles({ 287 x: x, 288 y: y, 289 scale: scale, 290 }); 291 this.left = x; 292 this.top = y; 293 if (resetToMax) { 294 this.setZoomImageSize(); 295 } 296 }; 297 Zoom.prototype.resetImageTranslate = function (index) { 298 if (!this.isImageSlide(index)) { 299 return; 300 } 301 var $image = this.core.getSlideItem(index).find('.lg-image').first(); 302 this.imageReset = false; 303 $image.removeClass('reset-transition reset-transition-y reset-transition-x'); 304 this.core.outer.removeClass('lg-actual-size'); 305 $image.css('width', 'auto').css('height', 'auto'); 306 setTimeout(function () { 307 $image.removeClass('no-transition'); 308 }, 10); 309 }; 310 Zoom.prototype.setZoomImageSize = function () { 311 var _this = this; 312 var $image = this.core 313 .getSlideItem(this.core.index) 314 .find('.lg-image') 315 .first(); 316 setTimeout(function () { 317 var actualSizeScale = _this.getCurrentImageActualSizeScale(); 318 if (_this.scale >= actualSizeScale) { 319 $image.addClass('no-transition'); 320 _this.imageReset = true; 321 } 322 }, ZOOM_TRANSITION_DURATION); 323 setTimeout(function () { 324 var actualSizeScale = _this.getCurrentImageActualSizeScale(); 325 if (_this.scale >= actualSizeScale) { 326 var dragAllowedAxises = _this.getDragAllowedAxises(_this.scale); 327 $image
328 .css('width', $image.get().naturalWidth + 'px') 329 .css('height', $image.get().naturalHeight + 'px'); 330 _this.core.outer.addClass('lg-actual-size'); 331 if (dragAllowedAxises.allowX && dragAllowedAxises.allowY) { 332 $image.addClass('reset-transition'); 333 } 334 else if (dragAllowedAxises.allowX && 335 !dragAllowedAxises.allowY) { 336 $image.addClass('reset-transition-x'); 337 } 338 else if (!dragAllowedAxises.allowX && 339 dragAllowedAxises.allowY) { 340 $image.addClass('reset-transition-y'); 341 } 342 } 343 }, ZOOM_TRANSITION_DURATION + 50); 344 }; 345 /** 346 * @desc apply scale3d to image and translate to image wrap 347 * @param {style} X,Y and scale 348 */ 349 Zoom.prototype.setZoomStyles = function (style) { 350 var $imageWrap = this.core 351 .getSlideItem(this.core.index) 352 .find('.lg-img-wrap') 353 .first(); 354 var $image = this.core 355 .getSlideItem(this.core.index) 356 .find('.lg-image') 357 .first(); 358 var $dummyImage = this.core.outer 359 .find('.lg-current .lg-dummy-img') 360 .first(); 361 this.scale = style.scale; 362 $image.css('transform', 'scale3d(' + style.scale + ', ' + style.scale + ', 1)'); 363 $dummyImage.css('transform', 'scale3d(' + style.scale + ', ' + style.scale + ', 1)'); 364 var transform = 'translate3d(' + style.x + 'px, ' + style.y + 'px, 0)'; 365 $imageWrap.css('transform', transform); 366 }; 367 /** 368 * @param index - Index of the current slide 369 * @param event - event will be available only if the function is called on clicking/taping the imags 370 */ 371 Zoom.prototype.setActualSize = function (index, event) { 372 var _this = this; 373 if (this.zoomInProgress) { 374 return; 375 } 376 this.zoomInProgress = true; 377 var currentItem = this.core.galleryItems[this.core.index]; 378 this.resetImageTranslate(index); 379 setTimeout(function () { 380 // Allow zoom only on image 381 if (!currentItem.src || 382 _this.core.outer.hasClass('lg-first-slide-loading')) { 383 return; 384 } 385 var scale = _this.getCurrentImageActualSizeScale(); 386 var prevScale = _this.scale; 387 if (_this.core.outer.hasClass('lg-zoomed')) { 388 _this.scale = 1; 389 } 390 else { 391 _this.scale = _this.getScale(scale); 392 } 393 _this.setPageCords(event); 394 _this.beginZoom(_this.scale); 395 _this.zoomImage(_this.scale, _this.scale - prevScale, true, true); 396 }, 50); 397 setTimeout(function () { 398 _this.core.outer.removeClass('lg-grabbing').addClass('lg-grab'); 399 }, 60); 400 setTimeout(function () { 401 _this.zoomInProgress = false; 402 }, ZOOM_TRANSITION_DURATION + 110); 403 }; 404 Zoom.prototype.getNaturalWidth = function (index) { 405 var $image = this.core.getSlideItem(index).find('.lg-image').first(); 406 var naturalWidth = this.core.galleryItems[index].width; 407 return naturalWidth 408 ? parseFloat(naturalWidth) 409 : $image.get().naturalWidth; 410 }; 411 Zoom.prototype.getActualSizeScale = function (naturalWidth, width) { 412 var _scale; 413 var scale;
414 if (naturalWidth >= width) { 415 _scale = naturalWidth / width; 416 scale = _scale || 2; 417 } 418 else { 419 scale = 1; 420 } 421 return scale; 422 }; 423 Zoom.prototype.getCurrentImageActualSizeScale = function () { 424 var $image = this.core 425 .getSlideItem(this.core.index) 426 .find('.lg-image') 427 .first(); 428 var width = $image.get().offsetWidth; 429 var naturalWidth = this.getNaturalWidth(this.core.index) || width; 430 return this.getActualSizeScale(naturalWidth, width); 431 }; 432 Zoom.prototype.getPageCords = function (event) { 433 var cords = {}; 434 if (event) { 435 cords.x = event.pageX || event.touches[0].pageX; 436 cords.y = event.pageY || event.touches[0].pageY; 437 } 438 else { 439 var containerRect = this.core.$content 440 .get() 441 .getBoundingClientRect(); 442 cords.x = containerRect.width / 2 + containerRect.left; 443 cords.y = 444 containerRect.height / 2 + this.scrollTop + containerRect.top; 445 } 446 return cords; 447 }; 448 Zoom.prototype.setPageCords = function (event) { 449 var pageCords = this.getPageCords(event); 450 this.pageX = pageCords.x; 451 this.pageY = pageCords.y; 452 }; 453 Zoom.prototype.manageActualPixelClassNames = function () { 454 var $actualSize = this.core.getElementById('lg-actual-size'); 455 $actualSize 456 .removeClass(this.settings.actualSizeIcons.zoomIn) 457 .addClass(this.settings.actualSizeIcons.zoomOut); 458 }; 459 // If true, zoomed - in else zoomed out 460 Zoom.prototype.beginZoom = function (scale) { 461 this.core.outer.removeClass('lg-zoom-drag-transition lg-zoom-dragging'); 462 if (scale > 1) { 463 this.core.outer.addClass('lg-zoomed'); 464 this.manageActualPixelClassNames(); 465 } 466 else { 467 this.resetZoom(); 468 } 469 return scale > 1; 470 }; 471 Zoom.prototype.getScale = function (scale) { 472 var actualSizeScale = this.getCurrentImageActualSizeScale(); 473 if (scale < 1) { 474 scale = 1; 475 } 476 else if (scale > actualSizeScale) { 477 scale = actualSizeScale; 478 } 479 return scale; 480 }; 481 Zoom.prototype.init = function () { 482 var _this = this; 483 if (!this.settings.zoom) { 484 return; 485 } 486 this.buildTemplates(); 487 this.enableZoomOnSlideItemLoad(); 488 var tapped = null; 489 this.core.outer.on('dblclick.lg', function (event) { 490 if (!_this.$LG(event.target).hasClass('lg-image')) { 491 return; 492 } 493 _this.setActualSize(_this.core.index, event); 494 }); 495 this.core.outer.on('touchstart.lg', function (event) { 496 var $target = _this.$LG(event.target); 497 if (event.touches.length === 1 && $target.hasClass('lg-image')) { 498 if (!tapped) { 499 tapped = setTimeout(function () { 500 tapped = null; 501 }, 300); 502 } 503 else { 504 clearTimeout(tapped); 505 tapped = null; 506 event.preventDefault(); 507 _this.setActualSize(_this.core.index, event); 508 } 509 } 510 }); 511 this.core.LGel.on(lGEvents.containerResize + ".zoom " + lGEvents.rotateRight + ".zoom " + lGEvents.rotateLeft + ".zoom " + lGEvents.flipHorizontal + ".zoom " + lGEvents.flipVertical + ".zoom", function () { 512 if (!_this.core.lgOpened || 513 !_this.isImageSlide(_this.core.index) || 514 _this.core.touchAction) { 515 return; 516 } 517 var _LGel = _this.core 518 .getSlideItem(_this.core.index) 519 .find('.lg-img-wrap') 520 .first(); 521 _this.top = 0; 522 _this.left = 0; 523 _this.setZoomEssentials(); 524 _this.setZoomSwipeStyles(_LGel, { x: 0, y: 0 }); 525 _this.positionChanged = true; 526 }); 527 // Update zoom on resize and orientationchange 528 this.$LG(window).on("scroll.lg.zoom.global" + this.core.lgId, function () { 529 if (!_this.core.lgOpened) 530 return; 531 _this.scrollTop = _this.$LG(window).scrollTop(); 532 }); 533 this.core.getElementById('lg-zoom-out').on('click.lg', function () { 534 // Allow zoom only on image 535 if (!_this.isImageSlide(_this.core.index)) { 536 return; 537 } 538 var timeout = 0; 539 if (_this.imageReset) { 540 _this.resetImageTranslate(_this.core.index); 541 timeout = 50; 542 } 543 setTimeout(function () { 544 var scale = _this.scale - _this.settings.scale; 545 if (scale < 1) { 546 scale = 1; 547 } 548 _this.beginZoom(scale); 549 _this.zoomImage(scale, -_this.settings.scale, true, !_this.settings.infiniteZoom); 550 }, timeout); 551 }); 552 this.core.getElementById('lg-zoom-in').on('click.lg', function () { 553 _this.zoomIn(); 554 }); 555 this.core.getElementById('lg-actual-size').on('click.lg', function () { 556 _this.setActualSize(_this.core.index); 557 }); 558 this.core.LGel.on(lGEvents.beforeOpen + ".zoom", function () { 559 _this.core.outer.find('.lg-item').removeClass('lg-zoomable'); 560 }); 561 this.core.LGel.on(lGEvents.afterOpen + ".zoom", function () { 562 _this.scrollTop = _this.$LG(window).scrollTop(); 563 // Set the initial value center 564 _this.pageX = _this.core.outer.width() / 2;
565 _this.pageY = _this.core.outer.height() / 2 + _this.scrollTop; 566 _this.scale = 1; 567 }); 568 // Reset zoom on slide change 569 this.core.LGel.on(lGEvents.afterSlide + ".zoom", function (event) { 570 var prevIndex = event.detail.prevIndex; 571 _this.scale = 1; 572 _this.positionChanged = false; 573 _this.zoomInProgress = false; 574 _this.resetZoom(prevIndex); 575 _this.resetImageTranslate(prevIndex); 576 if (_this.isImageSlide(_this.core.index)) { 577 _this.setZoomEssentials(); 578 } 579 }); 580 // Drag option after zoom 581 this.zoomDrag(); 582 this.pinchZoom(); 583 this.zoomSwipe(); 584 // Store the zoomable timeout value just to clear it while closing 585 this.zoomableTimeout = false; 586 this.positionChanged = false; 587 this.zoomInProgress = false; 588 }; 589 Zoom.prototype.zoomIn = function () { 590 // Allow zoom only on image 591 if (!this.isImageSlide(this.core.index)) { 592 return; 593 } 594 var scale = this.scale + this.settings.scale; 595 if (!this.settings.infiniteZoom) { 596 scale = this.getScale(scale); 597 } 598 this.beginZoom(scale); 599 this.zoomImage(scale, Math.min(this.settings.scale, scale - this.scale), true, !this.settings.infiniteZoom); 600 }; 601 // Reset zoom effect 602 Zoom.prototype.resetZoom = function (index) { 603 this.core.outer.removeClass('lg-zoomed lg-zoom-drag-transition'); 604 var $actualSize = this.core.getElementById('lg-actual-size'); 605 var $item = this.core.getSlideItem(index !== undefined ? index : this.core.index); 606 $actualSize 607 .removeClass(this.settings.actualSizeIcons.zoomOut) 608 .addClass(this.settings.actualSizeIcons.zoomIn); 609 $item.find('.lg-img-wrap').first().removeAttr('style'); 610 $item.find('.lg-image').first().removeAttr('style'); 611 this.scale = 1; 612 this.left = 0; 613 this.top = 0; 614 // Reset pagx pagy values to center 615 this.setPageCords(); 616 }; 617 Zoom.prototype.getTouchDistance = function (e) { 618 return Math.sqrt((e.touches[0].pageX - e.touches[1].pageX) * 619 (e.touches[0].pageX - e.touches[1].pageX) + 620 (e.touches[0].pageY - e.touches[1].pageY) * 621 (e.touches[0].pageY - e.touches[1].pageY)); 622 }; 623 Zoom.prototype.pinchZoom = function () { 624 var _this = this; 625 var startDist = 0; 626 var pinchStarted = false; 627 var initScale = 1; 628 var prevScale = 0; 629 var $item = this.core.getSlideItem(this.core.index); 630 this.core.outer.on('touchstart.lg', function (e) { 631 $item = _this.core.getSlideItem(_this.core.index); 632 if (!_this.isImageSlide(_this.core.index)) { 633 return; 634 } 635 if (e.touches.length === 2) { 636 e.preventDefault(); 637 if (_this.core.outer.hasClass('lg-first-slide-loading')) { 638 return; 639 } 640 initScale = _this.scale || 1; 641 _this.core.outer.removeClass('lg-zoom-drag-transition lg-zoom-dragging'); 642 _this.setPageCords(e); 643 _this.resetImageTranslate(_this.core.index); 644 _this.core.touchAction = 'pinch'; 645 startDist = _this.getTouchDistance(e); 646 } 647 }); 648 this.core.$inner.on('touchmove.lg', function (e) { 649 if (e.touches.length === 2 && 650 _this.core.touchAction === 'pinch' && 651 (_this.$LG(e.target).hasClass('lg-item') || 652 $item.get().contains(e.target))) { 653 e.preventDefault(); 654 var endDist = _this.getTouchDistance(e); 655 var distance = startDist - endDist; 656 if (!pinchStarted && Math.abs(distance) > 5) { 657 pinchStarted = true; 658 } 659 if (pinchStarted) { 660 prevScale = _this.scale; 661 var _scale = Math.max(1, initScale + -distance * 0.02); 662 _this.scale = 663 Math.round((_scale + Number.EPSILON) * 100) / 100; 664 var diff = _this.scale - prevScale; 665 _this.zoomImage(_this.scale, Math.round((diff +
665Number.EPSILON) * 100) / 100, false, false); 666 } 667 } 668 }); 669 this.core.$inner.on('touchend.lg', function (e) { 670 if (_this.core.touchAction === 'pinch' && 671 (_this.$LG(e.target).hasClass('lg-item') || 672 $item.get().contains(e.target))) { 673 pinchStarted = false; 674 startDist = 0; 675 if (_this.scale <= 1) { 676 _this.resetZoom(); 677 } 678 else { 679 var actualSizeScale = _this.getCurrentImageActualSizeScale(); 680 if (_this.scale >= actualSizeScale) { 681 var scaleDiff = actualSizeScale - _this.scale; 682 if (scaleDiff === 0) { 683 scaleDiff = 0.01; 684 } 685 _this.zoomImage(actualSizeScale, scaleDiff, false, true); 686 } 687 _this.manageActualPixelClassNames(); 688 _this.core.outer.addClass('lg-zoomed'); 689 } 690 _this.core.touchAction = undefined; 691 } 692 }); 693 }; 694 Zoom.prototype.touchendZoom = function (startCoords, endCoords, allowX, allowY, touchDuration) { 695 var distanceXnew = endCoords.x - startCoords.x; 696 var distanceYnew = endCoords.y - startCoords.y; 697 var speedX = Math.abs(distanceXnew) / touchDuration + 1; 698 var speedY = Math.abs(distanceYnew) / touchDuration + 1; 699 if (speedX > 2) { 700 speedX += 1; 701 } 702 if (speedY > 2) { 703 speedY += 1; 704 } 705 distanceXnew = distanceXnew * speedX; 706 distanceYnew = distanceYnew * speedY; 707 var _LGel = this.core 708 .getSlideItem(this.core.index) 709 .find('.lg-img-wrap') 710 .first(); 711 var distance = {}; 712 distance.x = this.left + distanceXnew; 713 distance.y = this.top + distanceYnew; 714 var possibleSwipeCords = this.getPossibleSwipeDragCords(); 715 if (Math.abs(distanceXnew) > 15 || Math.abs(distanceYnew) > 15) { 716 if (allowY) { 717 if (this.isBeyondPossibleTop(distance.y, possibleSwipeCords.minY)) { 718 distance.y = possibleSwipeCords.minY; 719 } 720 else if (this.isBeyondPossibleBottom(distance.y, possibleSwipeCords.maxY)) { 721 distance.y = possibleSwipeCords.maxY; 722 } 723 } 724 if (allowX) { 725 if (this.isBeyondPossibleLeft(distance.x, possibleSwipeCords.minX)) { 726 distance.x = possibleSwipeCords.minX; 727 } 728 else if (this.isBeyondPossibleRight(distance.x, possibleSwipeCords.maxX)) { 729 distance.x = possibleSwipeCords.maxX; 730 } 731 } 732 if (allowY) { 733 this.top = distance.y; 734 } 735 else { 736 distance.y = this.top; 737 } 738 if (allowX) { 739 this.left = distance.x; 740 } 741 else { 742 distance.x = this.left; 743 } 744 this.setZoomSwipeStyles(_LGel, distance); 745 this.positionChanged = true; 746 } 747 }; 748 Zoom.prototype.getZoomSwipeCords = function (startCoords, endCoords, allowX, allowY, possibleSwipeCords) { 749 var distance = {}; 750 if (allowY) { 751 distance.y = this.top + (endCoords.y - startCoords.y); 752 if (this.isBeyondPossibleTop(distance.y, possibleSwipeCords.minY)) { 753 var diffMinY = possibleSwipeCords.minY - distance.y; 754 distance.y = possibleSwipeCords.minY - diffMinY / 6; 755 } 756 else if (this.isBeyondPossibleBottom(distance.y, possibleSwipeCords.maxY)) { 757 var diffMaxY = distance.y - possibleSwipeCords.maxY; 758 distance.y = possibleSwipeCords.maxY + diffMaxY / 6; 759 } 760 } 761 else { 762 distance.y = this.top; 763 } 764 if (allowX) { 765 distance.x = this.left + (endCoords.x - startCoords.x); 766 if (this.isBeyondPossibleLeft(distance.x, possibleSwipeCords.minX)) { 767 var diffMinX = possibleSwipeCords.minX - distance.x; 768 distance.x = possibleSwipeCords.minX - diffMinX / 6;
769 } 770 else if (this.isBeyondPossibleRight(distance.x, possibleSwipeCords.maxX)) { 771 var difMaxX = distance.x - possibleSwipeCords.maxX; 772 distance.x = possibleSwipeCords.maxX + difMaxX / 6; 773 } 774 } 775 else { 776 distance.x = this.left; 777 } 778 return distance; 779 }; 780 Zoom.prototype.isBeyondPossibleLeft = function (x, minX) { 781 return x >= minX; 782 }; 783 Zoom.prototype.isBeyondPossibleRight = function (x, maxX) { 784 return x <= maxX; 785 }; 786 Zoom.prototype.isBeyondPossibleTop = function (y, minY) { 787 return y >= minY; 788 }; 789 Zoom.prototype.isBeyondPossibleBottom = function (y, maxY) { 790 return y <= maxY; 791 }; 792 Zoom.prototype.isImageSlide = function (index) { 793 var currentItem = this.core.galleryItems[index]; 794 return this.core.getSlideType(currentItem) === 'image'; 795 }; 796 Zoom.prototype.getPossibleSwipeDragCords = function (scale) { 797 var $image = this.core 798 .getSlideItem(this.core.index) 799 .find('.lg-image') 800 .first(); 801 var bottom = this.core.mediaContainerPosition.bottom; 802 var imgRect = $image.get().getBoundingClientRect(); 803 var imageHeight = imgRect.height; 804 var imageWidth = imgRect.width; 805 if (scale) { 806 imageHeight = imageHeight + scale * imageHeight; 807 imageWidth = imageWidth + scale * imageWidth; 808 } 809 var minY = (imageHeight - this.containerRect.height) / 2; 810 var maxY = (this.containerRect.height - imageHeight) / 2 + bottom; 811 var minX = (imageWidth - this.containerRect.width) / 2; 812 var maxX = (this.containerRect.width - imageWidth) / 2; 813 var possibleSwipeCords = { 814 minY: minY, 815 maxY: maxY, 816 minX: minX, 817 maxX: maxX, 818 }; 819 return possibleSwipeCords; 820 }; 821 Zoom.prototype.setZoomSwipeStyles = function (LGel, distance) { 822 LGel.css('transform', 'translate3d(' + distance.x + 'px, ' + distance.y + 'px, 0)'); 823 }; 824 Zoom.prototype.zoomSwipe = function () { 825 var _this = this; 826 var startCoords = {}; 827 var endCoords = {}; 828 var isMoved = false; 829 // Allow x direction drag 830 var allowX = false; 831 // Allow Y direction drag 832 var allowY = false; 833 var startTime = new Date(); 834 var endTime = new Date(); 835 var possibleSwipeCords; 836 var _LGel; 837 var $item = this.core.getSlideItem(this.core.index); 838 this.core.$inner.on('touchstart.lg', function (e) { 839 // Allow zoom only on image 840 if (!_this.isImageSlide(_this.core.index)) { 841 return; 842 } 843 $item = _this.core.getSlideItem(_this.core.index); 844 if ((_this.$LG(e.target).hasClass('lg-item') || 845 $item.get().contains(e.target)) && 846 e.touches.length === 1 && 847 _this.core.outer.hasClass('lg-zoomed')) { 848 e.preventDefault(); 849 startTime = new Date(); 850 _this.core.touchAction = 'zoomSwipe'; 851 _LGel = _this.core 852 .getSlideItem(_this.core.index) 853 .find('.lg-img-wrap') 854 .first(); 855 var dragAllowedAxises = _this.getDragAllowedAxises(0); 856 allowY = dragAllowedAxises.allowY; 857 allowX = dragAllowedAxises.allowX; 858 if (allowX || allowY) { 859 startCoords = _this.getSwipeCords(e); 860 } 861 possibleSwipeCords = _this.getPossibleSwipeDragCords(); 862 // reset opacity and transition duration 863 _this.core.outer.addClass('lg-zoom-dragging lg-zoom-drag-transition'); 864 } 865 }); 866 this.core.$inner.on('touchmove.lg', function (e) { 867 if (e.touches.length === 1 && 868 _this.core.touchAction === 'zoomSwipe' && 869 (_this.$LG(e.target).hasClass('lg-item') || 870 $item.get().contains(e.target))) { 871 e.preventDefault(); 872 _this.core.touchAction = 'zoomSwipe';
873 endCoords = _this.getSwipeCords(e); 874 var distance = _this.getZoomSwipeCords(startCoords, endCoords, allowX, allowY, possibleSwipeCords); 875 if (Math.abs(endCoords.x - startCoords.x) > 15 || 876 Math.abs(endCoords.y - startCoords.y) > 15) { 877 isMoved = true; 878 _this.setZoomSwipeStyles(_LGel, distance); 879 } 880 } 881 }); 882 this.core.$inner.on('touchend.lg', function (e) { 883 if (_this.core.touchAction === 'zoomSwipe' && 884 (_this.$LG(e.target).hasClass('lg-item') || 885 $item.get().contains(e.target))) { 886 e.preventDefault(); 887 _this.core.touchAction = undefined; 888 _this.core.outer.removeClass('lg-zoom-dragging'); 889 if (!isMoved) { 890 return; 891 } 892 isMoved = false; 893 endTime = new Date(); 894 var touchDuration = endTime.valueOf() - startTime.valueOf(); 895 _this.touchendZoom(startCoords, endCoords, allowX, allowY, touchDuration); 896 } 897 }); 898 }; 899 Zoom.prototype.zoomDrag = function () { 900 var _this = this; 901 var startCoords = {}; 902 var endCoords = {}; 903 var isDragging = false; 904 var isMoved = false; 905 // Allow x direction drag 906 var allowX = false; 907 // Allow Y direction drag 908 var allowY = false; 909 var startTime; 910 var endTime; 911 var possibleSwipeCords; 912 var _LGel; 913 this.core.outer.on('mousedown.lg.zoom', function (e) { 914 // Allow zoom only on image 915 if (!_this.isImageSlide(_this.core.index)) { 916 return; 917 } 918 var $item = _this.core.getSlideItem(_this.core.index); 919 if (_this.$LG(e.target).hasClass('lg-item') || 920 $item.get().contains(e.target)) { 921 startTime = new Date(); 922 _LGel = _this.core 923 .getSlideItem(_this.core.index) 924 .find('.lg-img-wrap') 925 .first(); 926 var dragAllowedAxises = _this.getDragAllowedAxises(0); 927 allowY = dragAllowedAxises.allowY; 928 allowX = dragAllowedAxises.allowX; 929 if (_this.core.outer.hasClass('lg-zoomed')) { 930 if (_this.$LG(e.target).hasClass('lg-object') && 931 (allowX || allowY)) { 932 e.preventDefault(); 933 startCoords = _this.getDragCords(e); 934 possibleSwipeCords = _this.getPossibleSwipeDragCords(); 935 isDragging = true; 936 _this.core.outer 937 .removeClass('lg-grab') 938 .addClass('lg-grabbing lg-zoom-drag-transition lg-zoom-dragging'); 939 // reset opacity and transition duration 940 } 941 } 942 } 943 }); 944 this.$LG(window).on("mousemove.lg.zoom.global" + this.core.lgId, function (e) { 945 if (isDragging) { 946 isMoved = true; 947 endCoords = _this.getDragCords(e); 948 var distance = _this.getZoomSwipeCords(startCoords, endCoords, allowX, allowY, possibleSwipeCords); 949 _this.setZoomSwipeStyles(_LGel, distance); 950 } 951 }); 952 this.$LG(window).on("mouseup.lg.zoom.global" + this.core.lgId, function (e) { 953 if (isDragging) { 954 endTime = new Date(); 955 isDragging = false; 956 _this.core.outer.removeClass('lg-zoom-dragging'); 957 // Fix for chrome mouse move on click 958 if (isMoved && 959 (startCoords.x !== endCoords.x || 960 startCoords.y !== endCoords.y)) { 961 endCoords = _this.getDragCords(e); 962 var touchDuration = endTime.valueOf() - startTime.valueOf(); 963 _this.touchendZoom(startCoords, endCoords, allowX, allowY, touchDuration); 964 } 965 isMoved = false; 966 } 967 _this.core.outer.removeClass('lg-grabbing').addClass('lg-grab'); 968 }); 969 }; 970 Zoom.prototype.closeGallery = function () { 971 this.resetZoom(); 972 this.zoomInProgress = false; 973 }; 974 Zoom.prototype.destroy = function () { 975 // Unbind all events added by lightGallery zoom plugin 976 this.$LG(window).off(".lg.zoom.global" + this.core.lgId); 977 this.core.LGel.off('.lg.zoom'); 978 this.core.LGel.off('.zoom'); 979 clearTimeout(this.zoomableTimeout); 980 this.zoomableTimeout = false; 981 }; 982 return Zoom; 983 }()); 984 985 return Zoom; 986 987}))); 988//# sourceMappingURL=lg-zoom.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.