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