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