https://www.matsuyafoods-holdings.co.jp/wordpress/wp-content/themes/matsuyafoods-holdings/assets/js/script.js

427/*!
428  * PhotoSwipe 5.4.4 - https://photoswipe.com
429  * (c) 2024 Dmytro Semenov
430  */
431/** @typedef {import('../photoswipe.js').Point} Point */
432
433/**
434 * @template {keyof HTMLElementTagNameMap} T
435 * @param {string} className
436 * @param {T} tagName
437 * @param {Node} [appendToEl]
438 * @returns {HTMLElementTagNameMap[T]}
439 */
440function createElement(className, tagName, appendToEl) {
441  const el = document.createElement(tagName);
442
443  if (className) {
444    el.className = className;
445  }
446
447  if (appendToEl) {
448    appendToEl.appendChild(el);
449  }
450
451  return el;
452}
453/**
454 * @param {Point} p1
455 * @param {Point} p2
456 * @returns {Point}
457 */
458
459function equalizePoints(p1, p2) {
460  p1.x = p2.x;
461  p1.y = p2.y;
462
463  if (p2.id !== undefined) {
464    p1.id = p2.id;
465  }
466
467  return p1;
468}
469/**
470 * @param {Point} p
471 */
472
473function roundPoint(p) {
474  p.x = Math.round(p.x);
475  p.y = Math.round(p.y);
476}
477/**
478 * Returns distance between two points.
479 *
480 * @param {Point} p1
481 * @param {Point} p2
482 * @returns {number}
483 */
484
485function getDistanceBetween(p1, p2) {
486  const x = Math.abs(p1.x - p2.x);
487  const y = Math.abs(p1.y - p2.y);
488  return Math.sqrt(x * x + y * y);
489}
490/**
491 * Whether X and Y positions of points are equal
492 *
493 * @param {Point} p1
494 * @param {Point} p2
495 * @returns {boolean}
496 */
497
498function pointsEqual(p1, p2) {
499  return p1.x === p2.x && p1.y === p2.y;
500}
501/**
502 * The float result between the min and max values.
503 *
504 * @param {number} val
505 * @param {number} min
506 * @param {number} max
507 * @returns {number}
508 */
509
510function clamp(val, min, max) {
511  return Math.min(Math.max(val, min), max);
512}
513/**
514 * Get transform string
515 *
516 * @param {number} x
517 * @param {number} [y]
518 * @param {number} [scale]
519 * @returns {string}
520 */
521
522function toTransformString(x, y, scale) {
523  let propValue = `translate3d(${x}px,${y || 0}px,0)`;
524
525  if (scale !== undefined) {
526    propValue += ` scale3d(${scale},${scale},1)`;
527  }
528
529  return propValue;
530}
531/**
532 * Apply transform:translate(x, y) scale(scale) to element
533 *
534 * @param {HTMLElement} el
535 * @param {number} x
536 * @param {number} [y]
537 * @param {number} [scale]
538 */
539
540function setTransform(el, x, y, scale) {
541  el.style.transform = toTransformString(x, y, scale);
542}
543const defaultCSSEasing = 'cubic-bezier(.4,0,.22,1)';
544/**
545 * Apply CSS transition to element
546 *
547 * @param {HTMLElement} el
548 * @param {string} [prop] CSS property to animate
549 * @param {number} [duration] in ms
550 * @param {string} [ease] CSS easing function
551 */
552
553function setTransitionStyle(el, prop, duration, ease) {
554  // inOut: 'cubic-bezier(.4, 0, .22, 1)', // for "toggle state" transitions
555  // out: 'cubic-bezier(0, 0, .22, 1)', // for "show" transitions
556  // in: 'cubic-bezier(.4, 0, 1, 1)'// for "hide" transitions
557  el.style.transition = prop ? `${prop} ${duration}ms ${ease || defaultCSSEasing}` : 'none';
558}
559/**
560 * Apply width and height CSS properties to element
561 *
562 * @param {HTMLElement} el
563 * @param {string | number} w
564 * @param {string | number} h
565 */
566
567function setWidthHeight(el, w, h) {
568  el.style.width = typeof w === 'number' ? `${w}px` : w;
569  el.style.height = typeof h === 'number' ? `${h}px` : h;
570}
571/**
572 * @param {HTMLElement} el
573 */
574
575function removeTransitionStyle(el) {
576  setTransitionStyle(el);
577}
578/**
579 * @param {HTMLImageElement} img
580 * @returns {Promise<HTMLImageElement | void>}
581 */
582
583function decodeImage(img) {
584  if ('decode' in img) {
585    return img.decode().catch(() => {});
586  }
587
588  if (img.complete) {
589    return Promise.resolve(img);
590  }
591
592  return new Promise((resolve, reject) => {
593    img.onload = () => resolve(img);
594
595    img.onerror = reject;
596  });
597}
598/** @typedef {LOAD_STATE[keyof LOAD_STATE]} LoadState */
599
600/** @type {{ IDLE: 'idle'; LOADING: 'loading'; LOADED: 'loaded'; ERROR: 'error' }} */
601
602const LOAD_STATE = {
603  IDLE: 'idle',
604  LOADING: 'loading',
605  LOADED: 'loaded',
606  ERROR: 'error'
607};
608/**
609 * Check if click or keydown event was dispatched
610 * with a special key or via mouse wheel.
611 *
612 * @param {MouseEvent | KeyboardEvent} e
613 * @returns {boolean}
614 */
615
616function specialKeyUsed(e) {
617  return 'button' in e && e.button === 1 || e.ctrlKey || e.metaKey || e.altKey || e.shiftKey;
618}
619/**
620 * Parse `gallery` or `children` options.
621 *
622 * @param {import('../photoswipe.js').ElementProvider} [option]
623 * @param {string} [legacySelector]
624 * @param {HTMLElement | Document} [parent]
625 * @returns HTMLElement[]
626 */
627
628function getElementsFromOption(option, legacySelector, parent = document) {
629  /** @type {HTMLElement[]} */
630  let elements = [];
631
632  if (option instanceof Element) {
633    elements = [option];
634  } else if (option instanceof NodeList || Array.isArray(option)) {
635    elements = Array.from(option);
636  } else {
637    const selector = typeof option === 'string' ? option : legacySelector;
638
639    if (selector) {
640      elements = Array.from(parent.querySelectorAll(selector));
641    }
642  }
643
644  return elements;
645}
646/**
647 * Check if browser is Safari
648 *
649 * @returns {boolean}
650 */
651
652function isSafari() {
653  return !!(navigator.vendor && navigator.vendor.match(/apple/i));
654}
655
656// Detect passive event listener support
657let supportsPassive = false;
658/* eslint-disable */
659
660try {
661  /* @ts-ignore */
662  window.addEventListener('test', null, Object.defineProperty({}, 'passive', {
663    get: () => {
664      supportsPassive = true;
665    }
666  }));
667} catch (e) {}
668/* eslint-enable */
669
670/**
671 * @typedef {Object} PoolItem
672 * @prop {HTMLElement | Window | Document | undefined | null} target
673 * @prop {string} type
674 * @prop {EventListenerOrEventListenerObject} listener
675 * @prop {boolean} [passive]
676 */
677
678
679class DOMEvents {
680  constructor() {
681    /**
682     * @type {PoolItem[]}
683     * @private
684     */
685    this._pool = [];
686  }
687  /**
688   * Adds event listeners
689   *
690   * @param {PoolItem['target']} target
691   * @param {PoolItem['type']} type Can be multiple, separated by space.
692   * @param {PoolItem['listener']} listener
693   * @param {PoolItem['passive']} [passive]
694   */
695
696
697  add(target, type, listener, passive) {
698    this._toggleListener(target, type, listener, passive);
699  }
700  /**
701   * Removes event listeners
702   *
703   * @param {PoolItem['target']} target
704   * @param {PoolItem['type']} type
705   * @param {PoolItem['listener']} listener
706   * @param {PoolItem['passive']} [passive]
707   */
708
709
710  remove(target, type, listener, passive) {
711    this._toggleListener(target, type, listener, passive, true);
712  }
713  /**
714   * Removes all bound events
715   */
716
717
718  removeAll() {
719    this._pool.forEach(poolItem => {
720      this._toggleListener(poolItem.target, poolItem.type, poolItem.listener, poolItem.passive, true, true);
721    });
722
723    this._pool = [];
724  }
725  /**
726   * Adds or removes event
727   *
728   * @private
729   * @param {PoolItem['target']} target
730   * @param {PoolItem['type']} type
731   * @param {PoolItem['listener']} listener
732   * @param {PoolItem['passive']} [passive]
733   * @param {boolean} [unbind] Whether the event should be added or removed
734   * @param {boolean} [skipPool] Whether events pool should be skipped
735   */
736
737
738  _toggleListener(target, type, listener, passive, unbind, skipPool) {
739    if (!target) {
740      return;
741    }
742
743    const methodName = unbind ? 'removeEventListener' : 'addEventListener';
744    const types = type.split(' ');
745    types.forEach(eType => {
746      if (eType) {
747        // Events pool is used to easily unbind all events when PhotoSwipe is closed,
748        // so developer doesn't need to do this manually
749        if (!skipPool) {
750          if (unbind) {
751            // Remove from the events pool
752            this._pool = this._pool.filter(poolItem => {
753              return poolItem.type !== eType || poolItem.listener !== listener || poolItem.target !== target;
754            });
755          } else {
756            // Add to the events pool
757            this._pool.push({
758              target,
759              type: eType,
760              listener,
761              passive
762            });
763          }
764        } // most PhotoSwipe events call preventDefault,
765        // and we do not need browser to scroll the page
766
767
768        const eventOptions = supportsPassive ? {
769          passive: passive || false
770        } : false;
771        target[methodName](eType, listener, eventOptions);
772      }
773    });
774  }
775
776}
777
778/** @typedef {import('../photoswipe.js').PhotoSwipeOptions} PhotoSwipeOptions */
779
780/** @typedef {import('../core/base.js').default} PhotoSwipeBase */
781
782/** @typedef {import('../photoswipe.js').Point} Point */
783
784/** @typedef {import('../slide/slide.js').SlideData} SlideData */
785
786/**
787 * @param {PhotoSwipeOptions} options
788 * @param {PhotoSwipeBase} pswp
789 * @returns {Point}
790 */
791function getViewportSize(options, pswp) {
792  if (options.getViewportSizeFn) {
793    const newViewportSize = options.getViewportSizeFn(options, pswp);
794
795    if (newViewportSize) {
796      return newViewportSize;
797    }
798  }
799
800  return {
801    x: document.documentElement.clientWidth,
802    // TODO: height on mobile is very incosistent due to toolbar
803    // find a way to improve this
804    //
805    // document.documentElement.clientHeight - doesn't seem to work well
806    y: window.innerHeight
807  };
808}
809/**
810 * Parses padding option.
811 * Supported formats:
812 *
813 * // Object
814 * padding: {
815 *  top: 0,
816 *  bottom: 0,
817 *  left: 0,
818 *  right: 0
819 * }
820 *
821 * // A function that returns the object
822 * paddingFn: (viewportSize, itemData, index) => {
823 *  return {
824 *    top: 0,
825 *    bottom: 0,
826 *    left: 0,
827 *    right: 0
828 *  };
829 * }
830 *
831 * // Legacy variant
832 * paddingLeft: 0,
833 * paddingRight: 0,
834 * paddingTop: 0,
835 * paddingBottom: 0,
836 *
837 * @param {'left' | 'top' | 'bottom' | 'right'} prop
838 * @param {PhotoSwipeOptions} options PhotoSwipe options
839 * @param {Point} viewportSize PhotoSwipe viewport size, for example: { x:800, y:600 }
840 * @param {SlideData} itemData Data about the slide
841 * @param {number} index Slide index
842 * @returns {number}
843 */
844
845function parsePaddingOption(prop, options, viewportSize, itemData, index) {
846  let paddingValue = 0;
847
848  if (options.paddingFn) {
849    paddingValue = options.paddingFn(viewportSize, itemData, index)[prop];
850  } else if (options.padding) {
851    paddingValue = options.padding[prop];
852  } else {
853    const legacyPropName = 'padding' + prop[0].toUpperCase() + prop.slice(1); // @ts-expect-error
854
855    if (options[legacyPropName]) {
856      // @ts-expect-error
857      paddingValue = options[legacyPropName];
858    }
859  }
860
861  return Number(paddingValue) || 0;
862}
863/**
864 * @param {PhotoSwipeOptions} options
865 * @param {Point} viewportSize
866 * @param {SlideData} itemData
867 * @param {number} index
868 * @returns {Point}
869 */
870
871function getPanAreaSize(options, viewportSize, itemData, index) {
872  return {
873    x: viewportSize.x - parsePaddingOption('left', options, viewportSize, itemData, index) - parsePaddingOption('right', options, viewportSize, itemData, index),
874    y: viewportSize.y - parsePaddingOption('top', options, viewportSize, itemData, index) - parsePaddingOption('bottom', options, viewportSize, itemData, index)
875  };
876}
877
878/** @typedef {import('./slide.js').default} Slide */
879
880/** @typedef {Record<Axis, number>} Point */
881
882/** @typedef {'x' | 'y'} Axis */
883
884/**
885 * Calculates minimum, maximum and initial (center) bounds of a slide
886 */
887
888class PanBounds {
889  /**
890   * @param {Slide} slide
891   */
892  constructor(slide) {
893    this.slide = slide;
894    this.currZoomLevel = 1;
895    this.center =
896    /** @type {Point} */
897    {
898      x: 0,
899      y: 0
900    };
901    this.max =
902    /** @type {Point} */
903    {
904      x: 0,
905      y: 0
906    };
907    this.min =
908    /** @type {Point} */
909    {
910      x: 0,
911      y: 0
912    };
913  }
914  /**
915   * _getItemBounds
916   *
917   * @param {number} currZoomLevel
918   */
919
920
921  update(currZoomLevel) {
922    this.currZoomLevel = currZoomLevel;
923
924    if (!this.slide.width) {
925      this.reset();
926    } else {
927      this._updateAxis('x');
928
929      this._updateAxis('y');
930
931      this.slide.pswp.dispatch('calcBounds', {
932        slide: this.slide
933      });
934    }
935  }
936  /**
937   * _calculateItemBoundsForAxis
938   *
939   * @param {Axis} axis
940   */
941
942
943  _updateAxis(axis) {
944    const {
945      pswp
946    } = this.slide;
947    const elSize = this.slide[axis === 'x' ? 'width' : 'height'] * this.currZoomLevel;
948    const paddingProp = axis === 'x' ? 'left' : 'top';
949    const padding = parsePaddingOption(paddingProp, pswp.options, pswp.viewportSize, this.slide.data, this.slide.index);
950    const panAreaSize = this.slide.panAreaSize[axis]; // Default position of element.
951    // By default, it is center of viewport:
952
953    this.center[axis] = Math.round((panAreaSize - elSize) / 2) + padding; // maximum pan position
954
955    this.max[axis] = elSize > panAreaSize ? Math.round(panAreaSize - elSize) + padding : this.center[axis]; // minimum pan position
956
957    this.min[axis] = elSize > panAreaSize ? padding : this.center[axis];
958  } // _getZeroBounds
959
960
961  reset() {
962    this.center.x = 0;
963    this.center.y = 0;
964    this.max.x = 0;
965    this.max.y = 0;
966    this.min.x = 0;
967    this.min.y = 0;
968  }
969  /**
970   * Correct pan position if it's beyond the bounds
971   *
972   * @param {Axis} axis x or y
973   * @param {number} panOffset
974   * @returns {number}
975   */
976
977
978  correctPan(axis, panOffset) {
979    // checkPanBounds
980    return clamp(panOffset, this.max[axis], this.min[axis]);
981  }
982
983}
984
985const MAX_IMAGE_WIDTH = 4000;
986/** @typedef {import('../photoswipe.js').default} PhotoSwipe */
987
988/** @typedef {import('../photoswipe.js').PhotoSwipeOptions} PhotoSwipeOptions */
989
990/** @typedef {import('../photoswipe.js').Point} Point */
991
992/** @typedef {import('../slide/slide.js').SlideData} SlideData */
993
994/** @typedef {'fit' | 'fill' | number | ((zoomLevelObject: ZoomLevel) => number)} ZoomLevelOption */
995
996/**
997 * Calculates zoom levels for specific slide.
998 * Depends on viewport size and image size.
999 */
1000
1001class ZoomLevel {
1002  /**
1003   * @param {PhotoSwipeOptions} options PhotoSwipe options
1004   * @param {SlideData} itemData Slide data
1005   * @param {number} index Slide index
1006   * @param {PhotoSwipe} [pswp] PhotoSwipe instance, can be undefined if not initialized yet
1007   */
1008  constructor(options, itemData, index, pswp) {
1009    this.pswp = pswp;
1010    this.options = options;
1011    this.itemData = itemData;
1012    this.index = index;
1013    /** @type { Point | null } */
1014
1015    this.panAreaSize = null;
1016    /** @type { Point | null } */
1017
1018    this.elementSize = null;
1019    this.fit = 1;
1020    this.fill = 1;
1021    this.vFill = 1;
1022    this.initial = 1;
1023    this.secondary = 1;
1024    this.max = 1;
1025    this.min = 1;
1026  }
1027  /**
1028   * Calculate initial, secondary and maximum zoom level for the specified slide.
1029   *
1030   * It should be called when either image or viewport size changes.
1031   *
1032   * @param {number} maxWidth
1033   * @param {number} maxHeight
1034   * @param {Point} panAreaSize
1035   */
1036
1037
1038  update(maxWidth, maxHeight, panAreaSize) {
1039    /** @type {Point} */
1040    const elementSize = {
1041      x: maxWidth,
1042      y: maxHeight
1043    };
1044    this.elementSize = elementSize;
1045    this.panAreaSize = panAreaSize;
1046    const hRatio = panAreaSize.x / elementSize.x;
1047    const vRatio = panAreaSize.y / elementSize.y;
1048    this.fit = Math.min(1, hRatio < vRatio ? hRatio : vRatio);
1049    this.fill = Math.min(1, hRatio > vRatio ? hRatio : vRatio); // zoom.vFill defines zoom level of the image
1050    // when it has 100% of viewport vertical space (height)
1051
1052    this.vFill = Math.min(1, vRatio);
1053    this.initial = this._getInitial();
1054    this.secondary = this._getSecondary();
1055    this.max = Math.max(this.initial, this.secondary, this._getMax());
1056    this.min = Math.min(this.fit, this.initial, this.secondary);
1057
1058    if (this.pswp) {
1059      this.pswp.dispatch('zoomLevelsUpdate', {
1060        zoomLevels: this,
1061        slideData: this.itemData
1062      });
1063    }
1064  }
1065  /**
1066   * Parses user-defined zoom option.
1067   *
1068   * @private
1069   * @param {'initial' | 'secondary' | 'max'} optionPrefix Zoom level option prefix (initial, secondary, max)
1070   * @returns { number | undefined }
1071   */
1072
1073
1074  _parseZoomLevelOption(optionPrefix) {
1075    const optionName =
1076    /** @type {'initialZoomLevel' | 'secondaryZoomLevel' | 'maxZoomLevel'} */
1077    optionPrefix + 'ZoomLevel';
1078    const optionValue = this.options[optionName];
1079
1080    if (!optionValue) {
1081      return;
1082    }
1083
1084    if (typeof optionValue === 'function') {
1085      return optionValue(this);
1086    }
1087
1088    if (optionValue === 'fill') {
1089      return this.fill;
1090    }
1091
1092    if (optionValue === 'fit') {
1093      return this.fit;
1094    }
1095
1096    return Number(optionValue);
1097  }
1098  /**
1099   * Get zoom level to which image will be zoomed after double-tap gesture,
1100   * or when user clicks on zoom icon,
1101   * or mouse-click on image itself.
1102   * If you return 1 image will be zoomed to its original size.
1103   *
1104   * @private
1105   * @return {number}
1106   */
1107
1108
1109  _getSecondary() {

1110    let currZoomLevel = this._parseZoomLevelOption('secondary');
1111
1112    if (currZoomLevel) {
1113      return currZoomLevel;
1114    } // 3x of "fit" state, but not larger than original
1115
1116
1117    currZoomLevel = Math.min(1, this.fit * 3);
1118
1119    if (this.elementSize && currZoomLevel * this.elementSize.x > MAX_IMAGE_WIDTH) {
1120      currZoomLevel = MAX_IMAGE_WIDTH / this.elementSize.x;
1121    }
1122
1123    return currZoomLevel;
1124  }
1125  /**
1126   * Get initial image zoom level.
1127   *
1128   * @private
1129   * @return {number}
1130   */
1131
1132
1133  _getInitial() {
1134    return this._parseZoomLevelOption('initial') || this.fit;
1135  }
1136  /**
1137   * Maximum zoom level when user zooms
1138   * via zoom/pinch gesture,
1139   * via cmd/ctrl-wheel or via trackpad.
1140   *
1141   * @private
1142   * @return {number}
1143   */
1144
1145
1146  _getMax() {
1147    // max zoom level is x4 from "fit state",
1148    // used for zoom gesture and ctrl/trackpad zoom
1149    return this._parseZoomLevelOption('max') || Math.max(1, this.fit * 4);
1150  }
1151
1152}
1153
1154/** @typedef {import('../photoswipe.js').default} PhotoSwipe */
1155/**
1156 * Renders and allows to control a single slide
1157 */
1158
1159class Slide {
1160  /**
1161   * @param {SlideData} data
1162   * @param {number} index
1163   * @param {PhotoSwipe} pswp
1164   */
1165  constructor(data, index, pswp) {
1166    this.data = data;
1167    this.index = index;
1168    this.pswp = pswp;
1169    this.isActive = index === pswp.currIndex;
1170    this.currentResolution = 0;
1171    /** @type {Point} */
1172
1173    this.panAreaSize = {
1174      x: 0,
1175      y: 0
1176    };
1177    /** @type {Point} */
1178
1179    this.pan = {
1180      x: 0,
1181      y: 0
1182    };
1183    this.isFirstSlide = this.isActive && !pswp.opener.isOpen;
1184    this.zoomLevels = new ZoomLevel(pswp.options, data, index, pswp);
1185    this.pswp.dispatch('gettingData', {
1186      slide: this,
1187      data: this.data,
1188      index
1189    });
1190    this.content = this.pswp.contentLoader.getContentBySlide(this);
1191    this.container = createElement('pswp__zoom-wrap', 'div');
1192    /** @type {HTMLElement | null} */
1193
1194    this.holderElement = null;
1195    this.currZoomLevel = 1;
1196    /** @type {number} */
1197
1198    this.width = this.content.width;
1199    /** @type {number} */
1200
1201    this.height = this.content.height;
1202    this.heavyAppended = false;
1203    this.bounds = new PanBounds(this);
1204    this.prevDisplayedWidth = -1;
1205    this.prevDisplayedHeight = -1;
1206    this.pswp.dispatch('slideInit', {
1207      slide: this
1208    });
1209  }
1210  /**
1211   * If this slide is active/current/visible
1212   *
1213   * @param {boolean} isActive
1214   */
1215
1216
1217  setIsActive(isActive) {
1218    if (isActive && !this.isActive) {
1219      // slide just became active
1220      this.activate();
1221    } else if (!isActive && this.isActive) {
1222      // slide just became non-active
1223      this.deactivate();
1224    }
1225  }
1226  /**
1227   * Appends slide content to DOM
1228   *
1229   * @param {HTMLElement} holderElement
1230   */
1231
1232
1233  append(holderElement) {
1234    this.holderElement = holderElement;
1235    this.container.style.transformOrigin = '0 0'; // Slide appended to DOM
1236
1237    if (!this.data) {
1238      return;
1239    }
1240
1241    this.calculateSize();
1242    this.load();
1243    this.updateContentSize();
1244    this.appendHeavy();
1245    this.holderElement.appendChild(this.container);
1246    this.zoomAndPanToInitial();
1247    this.pswp.dispatch('firstZoomPan', {
1248      slide: this
1249    });
1250    this.applyCurrentZoomPan();
1251    this.pswp.dispatch('afterSetContent', {
1252      slide: this
1253    });
1254
1255    if (this.isActive) {
1256      this.activate();
1257    }
1258  }
1259
1260  load() {
1261    this.content.load(false);
1262    this.pswp.dispatch('slideLoad', {
1263      slide: this
1264    });
1265  }
1266  /**
1267   * Append "heavy" DOM elements
1268   *
1269   * This may depend on a type of slide,
1270   * but generally these are large images.
1271   */
1272
1273
1274  appendHeavy() {
1275    const {
1276      pswp
1277    } = this;
1278    // Avoid appending heavy elements during animations
1279
1280    if (this.heavyAppended || !pswp.opener.isOpen || pswp.mainScroll.isShifted() || !this.isActive && false) {
1281      return;
1282    }
1283
1284    if (this.pswp.dispatch('appendHeavy', {
1285      slide: this
1286    }).defaultPrevented) {
1287      return;
1288    }
1289
1290    this.heavyAppended = true;
1291    this.content.append();
1292    this.pswp.dispatch('appendHeavyContent', {
1293      slide: this
1294    });
1295  }
1296  /**

1297   * Triggered when this slide is active (selected).
1298   *
1299   * If it's part of opening/closing transition -
1300   * activate() will trigger after the transition is ended.
1301   */
1302
1303
1304  activate() {
1305    this.isActive = true;
1306    this.appendHeavy();
1307    this.content.activate();
1308    this.pswp.dispatch('slideActivate', {
1309      slide: this
1310    });
1311  }
1312  /**
1313   * Triggered when this slide becomes inactive.
1314   *
1315   * Slide can become inactive only after it was active.
1316   */
1317
1318
1319  deactivate() {
1320    this.isActive = false;
1321    this.content.deactivate();
1322
1323    if (this.currZoomLevel !== this.zoomLevels.initial) {
1324      // allow filtering
1325      this.calculateSize();
1326    } // reset zoom level
1327
1328
1329    this.currentResolution = 0;
1330    this.zoomAndPanToInitial();
1331    this.applyCurrentZoomPan();
1332    this.updateContentSize();
1333    this.pswp.dispatch('slideDeactivate', {
1334      slide: this
1335    });
1336  }
1337  /**
1338   * The slide should destroy itself, it will never be used again.
1339   * (unbind all events and destroy internal components)
1340   */
1341
1342
1343  destroy() {
1344    this.content.hasSlide = false;
1345    this.content.remove();
1346    this.container.remove();
1347    this.pswp.dispatch('slideDestroy', {
1348      slide: this
1349    });
1350  }
1351
1352  resize() {
1353    if (this.currZoomLevel === this.zoomLevels.initial || !this.isActive) {
1354      // Keep initial zoom level if it was before the resize,
1355      // as well as when this slide is not active
1356      // Reset position and scale to original state
1357      this.calculateSize();
1358      this.currentResolution = 0;
1359      this.zoomAndPanToInitial();
1360      this.applyCurrentZoomPan();
1361      this.updateContentSize();
1362    } else {
1363      // readjust pan position if it's beyond the bounds
1364      this.calculateSize();
1365      this.bounds.update(this.currZoomLevel);
1366      this.panTo(this.pan.x, this.pan.y);
1367    }
1368  }
1369  /**
1370   * Apply size to current slide content,
1371   * based on the current resolution and scale.
1372   *
1373   * @param {boolean} [force] if size should be updated even if dimensions weren't changed
1374   */
1375
1376
1377  updateContentSize(force) {
1378    // Use initial zoom level
1379    // if resolution is not defined (user didn't zoom yet)
1380    const scaleMultiplier = this.currentResolution || this.zoomLevels.initial;
1381
1382    if (!scaleMultiplier) {
1383      return;
1384    }
1385
1386    const width = Math.round(this.width * scaleMultiplier) || this.pswp.viewportSize.x;
1387    const height = Math.round(this.height * scaleMultiplier) || this.pswp.viewportSize.y;
1388
1389    if (!this.sizeChanged(width, height) && !force) {
1390      return;
1391    }
1392
1393    this.content.setDisplayedSize(width, height);
1394  }
1395  /**
1396   * @param {number} width
1397   * @param {number} height
1398   */
1399
1400
1401  sizeChanged(width, height) {
1402    if (width !== this.prevDisplayedWidth || height !== this.prevDisplayedHeight) {
1403      this.prevDisplayedWidth = width;
1404      this.prevDisplayedHeight = height;
1405      return true;
1406    }
1407
1408    return false;
1409  }
1410  /** @returns {HTMLImageElement | HTMLDivElement | null | undefined} */
1411
1412
1413  getPlaceholderElement() {
1414    var _this$content$placeho;
1415
1416    return (_this$content$placeho = this.content.placeholder) === null || _this$content$placeho === void 0 ? void 0 : _this$content$placeho.element;
1417  }
1418  /**
1419   * Zoom current slide image to...
1420   *
1421   * @param {number} destZoomLevel Destination zoom level.
1422   * @param {Point} [centerPoint]
1423   * Transform origin center point, or false if viewport center should be used.
1424   * @param {number | false} [transitionDuration] Transition duration, may be set to 0.
1425   * @param {boolean} [ignoreBounds] Minimum and maximum zoom levels will be ignored.
1426   */
1427
1428
1429  zoomTo(destZoomLevel, centerPoint, transitionDuration, ignoreBounds) {
1430    const {
1431      pswp
1432    } = this;
1433
1434    if (!this.isZoomable() || pswp.mainScroll.isShifted()) {
1435      return;
1436    }
1437
1438    pswp.dispatch('beforeZoomTo', {
1439      destZoomLevel,
1440      centerPoint,
1441      transitionDuration
1442    }); // stop all pan and zoom transitions
1443
1444    pswp.animations.stopAllPan(); // if (!centerPoint) {
1445    //   centerPoint = pswp.getViewportCenterPoint();
1446    // }
1447
1448    const prevZoomLevel = this.currZoomLevel;
1449
1450    if (!ignoreBounds) {
1451      destZoomLevel = clamp(destZoomLevel, this.zoomLevels.min, this.zoomLevels.max);
1452    } // if (transitionDuration === undefined) {
1453    //   transitionDuration = this.pswp.options.zoomAnimationDuration;
1454    // }
1455
1456
1457    this.setZoomLevel(destZoomLevel);
1458    this.pan.x = this.calculateZoomToPanOffset('x', centerPoint, prevZoomLevel);
1459    this.pan.y = this.calculateZoomToPanOffset('y', centerPoint, prevZoomLevel);
1460    roundPoint(this.pan);
1461
1462    const finishTransition = () => {
1463      this._setResolution(destZoomLevel);
1464
1465      this.applyCurrentZoomPan();
1466    };
1467
1468    if (!transitionDuration) {
1469      finishTransition();
1470    } else {
1471      pswp.animations.startTransition({
1472        isPan: true,
1473        name: 'zoomTo',
1474        target: this.container,
1475        transform: this.getCurrentTransform(),
1476        onComplete: finishTransition,
1477        duration: transitionDuration,
1478        easing: pswp.options.easing
1479      });
1480    }
1481  }
1482  /**
1483   * @param {Point} [centerPoint]
1484   */
1485
1486
1487  toggleZoom(centerPoint) {
1488    this.zoomTo(this.currZoomLevel === this.zoomLevels.initial ? this.zoomLevels.secondary : this.zoomLevels.initial, centerPoint, this.pswp.options.zoomAnimationDuration);
1489  }
1490  /**
1491   * Updates zoom level property and recalculates new pan bounds,
1492   * unlike zoomTo it does not apply transform (use applyCurrentZoomPan)
1493   *
1494   * @param {number} currZoomLevel
1495   */
1496
1497
1498  setZoomLevel(currZoomLevel) {
1499    this.currZoomLevel = currZoomLevel;
1500    this.bounds.update(this.currZoomLevel);
1501  }
1502  /**
1503   * Get pan position after zoom at a given `point`.
1504   *
1505   * Always call setZoomLevel(newZoomLevel) beforehand to recalculate
1506   * pan bounds according to the new zoom level.
1507   *
1508   * @param {'x' | 'y'} axis
1509   * @param {Point} [point]
1510   * point based on which zoom is performed, usually refers to the current mouse position,
1511   * if false - viewport center will be used.
1512   * @param {number} [prevZoomLevel] Zoom level before new zoom was applied.
1513   * @returns {number}
1514   */
1515
1516
1517  calculateZoomToPanOffset(axis, point, prevZoomLevel) {
1518    const totalPanDistance = this.bounds.max[axis] - this.bounds.min[axis];
1519
1520    if (totalPanDistance === 0) {
1521      return this.bounds.center[axis];
1522    }
1523
1524    if (!point) {
1525      point = this.pswp.getViewportCenterPoint();
1526    }
1527
1528    if (!prevZoomLevel) {
1529      prevZoomLevel = this.zoomLevels.initial;
1530    }
1531
1532    const zoomFactor = this.currZoomLevel / prevZoomLevel;
1533    return this.bounds.correctPan(axis, (this.pan[axis] - point[axis]) * zoomFactor + point[axis]);
1534  }
1535  /**
1536   * Apply pan and keep it within bounds.
1537   *
1538   * @param {number} panX
1539   * @param {number} panY
1540   */
1541
1542
1543  panTo(panX, panY) {
1544    this.pan.x = this.bounds.correctPan('x', panX);
1545    this.pan.y = this.bounds.correctPan('y', panY);
1546    this.applyCurrentZoomPan();
1547  }
1548  /**
1549   * If the slide in the current state can be panned by the user
1550   * @returns {boolean}
1551   */
1552
1553
1554  isPannable() {
1555    return Boolean(this.width) && this.currZoomLevel > this.zoomLevels.fit;
1556  }
1557  /**
1558   * If the slide can be zoomed
1559   * @returns {boolean}
1560   */
1561
1562
1563  isZoomable() {
1564    return Boolean(this.width) && this.content.isZoomable();
1565  }
1566  /**
1567   * Apply transform and scale based on
1568   * the current pan position (this.pan) and zoom level (this.currZoomLevel)
1569   */
1570
1571
1572  applyCurrentZoomPan() {
1573    this._applyZoomTransform(this.pan.x, this.pan.y, this.currZoomLevel);
1574
1575    if (this === this.pswp.currSlide) {
1576      this.pswp.dispatch('zoomPanUpdate', {
1577        slide: this
1578      });
1579    }
1580  }
1581
1582  zoomAndPanToInitial() {
1583    this.currZoomLevel = this.zoomLevels.initial; // pan according to the zoom level
1584
1585    this.bounds.update(this.currZoomLevel);
1586    equalizePoints(this.pan, this.bounds.center);
1587    this.pswp.dispatch('initialZoomPan', {
1588      slide: this
1589    });
1590  }
1591  /**
1592   * Set translate and scale based on current resolution
1593   *
1594   * @param {number} x
1595   * @param {number} y
1596   * @param {number} zoom
1597   * @private
1598   */
1599
1600
1601  _applyZoomTransform(x, y, zoom) {
1602    zoom /= this.currentResolution || this.zoomLevels.initial;
1603    setTransform(this.container, x, y, zoom);
1604  }
1605
1606  calculateSize() {
1607    const {
1608      pswp
1609    } = this;
1610    equalizePoints(this.panAreaSize, getPanAreaSize(pswp.options, pswp.viewportSize, this.data, this.index));
1611    this.zoomLevels.update(this.width, this.height, this.panAreaSize);
1612    pswp.dispatch('calcSlideSize', {
1613      slide: this
1614    });
1615  }
1616  /** @returns {string} */
1617
1618
1619  getCurrentTransform() {
1620    const scale = this.currZoomLevel / (this.currentResolution || this.zoomLevels.initial);
1621    return toTransformString(this.pan.x, this.pan.y, scale);
1622  }
1623  /**
1624   * Set resolution and re-render the image.
1625   *
1626   * For example, if the real image size is 2000x1500,
1627   * and resolution is 0.5 - it will be rendered as 1000x750.
1628   *
1629   * Image with zoom level 2 and resolution 0.5 is
1630   * the same as image with zoom level 1 and resolution 1.
1631   *
1632   * Used to optimize animations and make
1633   * sure that browser renders image in the highest quality.
1634   * Also used by responsive images to load the correct one.
1635   *
1636   * @param {number} newResolution
1637   */
1638
1639
1640  _setResolution(newResolution) {
1641    if (newResolution === this.currentResolution) {
1642      return;
1643    }
1644
1645    this.currentResolution = newResolution;
1646    this.updateContentSize();
1647    this.pswp.dispatch('resolutionChanged');
1648  }
1649
1650}
1651
1652/** @typedef {import('../photoswipe.js').Point} Point */
1653
1654/** @typedef {import('./gestures.js').default} Gestures */
1655
1656const PAN_END_FRICTION = 0.35;
1657const VERTICAL_DRAG_FRICTION = 0.6; // 1 corresponds to the third of viewport height
1658
1659const MIN_RATIO_TO_CLOSE = 0.4; // Minimum speed required to navigate
1660// to next or previous slide
1661
1662const MIN_NEXT_SLIDE_SPEED = 0.5;
1663/**
1664 * @param {number} initialVelocity
1665 * @param {number} decelerationRate
1666 * @returns {number}
1667 */
1668
1669function project(initialVelocity, decelerationRate) {
1670  return initialVelocity * decelerationRate / (1 - decelerationRate);
1671}
1672/**
1673 * Handles single pointer dragging
1674 */
1675
1676
1677class DragHandler {
1678  /**
1679   * @param {Gestures} gestures
1680   */
1681  constructor(gestures) {
1682    this.gestures = gestures;
1683    this.pswp = gestures.pswp;
1684    /** @type {Point} */
1685
1686    this.startPan = {
1687      x: 0,
1688      y: 0
1689    };
1690  }
1691
1692  start() {
1693    if (this.pswp.currSlide) {
1694      equalizePoints(this.startPan, this.pswp.currSlide.pan);
1695    }
1696
1697    this.pswp.animations.stopAll();
1698  }
1699
1700  change() {
1701    const {
1702      p1,
1703      prevP1,
1704      dragAxis
1705    } = this.gestures;
1706    const {
1707      currSlide
1708    } = this.pswp;
1709
1710    if (dragAxis === 'y' && this.pswp.options.closeOnVerticalDrag && currSlide && currSlide.currZoomLevel <= currSlide.zoomLevels.fit && !this.gestures.isMultitouch) {
1711      // Handle vertical drag to close
1712      const panY = currSlide.pan.y + (p1.y - prevP1.y);
1713
1714      if (!this.pswp.dispatch('verticalDrag', {
1715        panY
1716      }).defaultPrevented) {
1717        this._setPanWithFriction('y', panY, VERTICAL_DRAG_FRICTION);
1718
1719        const bgOpacity = 1 - Math.abs(this._getVerticalDragRatio(currSlide.pan.y));
1720        this.pswp.applyBgOpacity(bgOpacity);
1721        currSlide.applyCurrentZoomPan();
1722      }
1723    } else {
1724      const mainScrollChanged = this._panOrMoveMainScroll('x');
1725
1726      if (!mainScrollChanged) {
1727        this._panOrMoveMainScroll('y');
1728
1729        if (currSlide) {
1730          roundPoint(currSlide.pan);
1731          currSlide.applyCurrentZoomPan();
1732        }
1733      }
1734    }
1735  }
1736
1737  end() {
1738    const {
1739      velocity
1740    } = this.gestures;
1741    const {
1742      mainScroll,
1743      currSlide
1744    } = this.pswp;
1745    let indexDiff = 0;
1746    this.pswp.animations.stopAll(); // Handle main scroll if it's shifted
1747
1748    if (mainScroll.isShifted()) {
1749      // Position of the main scroll relative to the viewport
1750      const mainScrollShiftDiff = mainScroll.x - mainScroll.getCurrSlideX(); // Ratio between 0 and 1:
1751      // 0 - slide is not visible at all,
1752      // 0.5 - half of the slide is visible
1753      // 1 - slide is fully visible
1754
1755      const currentSlideVisibilityRatio = mainScrollShiftDiff / this.pswp.viewportSize.x; // Go next slide.
1756      //
1757      // - if velocity and its direction is matched,
1758      //   and we see at least tiny part of the next slide
1759      //
1760      // - or if we see less than 50% of the current slide
1761      //   and velocity is close to 0
1762      //
1763
1764      if (velocity.x < -MIN_NEXT_SLIDE_SPEED && currentSlideVisibilityRatio < 0 || velocity.x < 0.1 && currentSlideVisibilityRatio < -0.5) {
1765        // Go to next slide
1766        indexDiff = 1;
1767        velocity.x = Math.min(velocity.x, 0);
1768      } else if (velocity.x > MIN_NEXT_SLIDE_SPEED && currentSlideVisibilityRatio > 0 || velocity.x > -0.1 && currentSlideVisibilityRatio > 0.5) {
1769        // Go to prev slide
1770        indexDiff = -1;
1771        velocity.x = Math.max(velocity.x, 0);
1772      }
1773
1774      mainScroll.moveIndexBy(indexDiff, true, velocity.x);
1775    } // Restore zoom level
1776
1777
1778    if (currSlide && currSlide.currZoomLevel > currSlide.zoomLevels.max || this.gestures.isMultitouch) {
1779      this.gestures.zoomLevels.correctZoomPan(true);
1780    } else {
1781      // we run two animations instead of one,
1782      // as each axis has own pan boundaries and thus different spring function
1783      // (correctZoomPan does not have this functionality,
1784      //  it animates all properties with single timing function)
1785      this._finishPanGestureForAxis('x');
1786
1787      this._finishPanGestureForAxis('y');
1788    }
1789  }
1790  /**
1791   * @private
1792   * @param {'x' | 'y'} axis
1793   */
1794
1795
1796  _finishPanGestureForAxis(axis) {
1797    const {
1798      velocity
1799    } = this.gestures;
1800    const {
1801      currSlide
1802    } = this.pswp;
1803
1804    if (!currSlide) {
1805      return;
1806    }
1807
1808    const {
1809      pan,
1810      bounds
1811    } = currSlide;
1812    const panPos = pan[axis];
1813    const restoreBgOpacity = this.pswp.bgOpacity < 1 && axis === 'y'; // 0.995 means - scroll view loses 0.5% of its velocity per millisecond
1814    // Increasing this number will reduce travel distance
1815
1816    const decelerationRate = 0.995; // 0.99
1817    // Pan position if there is no bounds
1818
1819    const projectedPosition = panPos + project(velocity[axis], decelerationRate);
1820
1821    if (restoreBgOpacity) {
1822      const vDragRatio = this._getVerticalDragRatio(panPos);
1823
1824      const projectedVDragRatio = this._getVerticalDragRatio(projectedPosition); // If we are above and moving upwards,
1825      // or if we are below and moving downwards
1826
1827
1828      if (vDragRatio < 0 && projectedVDragRatio < -MIN_RATIO_TO_CLOSE || vDragRatio > 0 && projectedVDragRatio > MIN_RATIO_TO_CLOSE) {
1829        this.pswp.close();
1830        return;
1831      }
1832    } // Pan position with corrected bounds
1833
1834
1835    const correctedPanPosition = bounds.correctPan(axis, projectedPosition); // Exit if pan position should not be changed
1836    // or if speed it too low
1837
1838    if (panPos === correctedPanPosition) {
1839      return;
1840    } // Overshoot if the final position is out of pan bounds
1841
1842
1843    const dampingRatio = correctedPanPosition === projectedPosition ? 1 : 0.82;
1844    const initialBgOpacity = this.pswp.bgOpacity;
1845    const totalPanDist = correctedPanPosition - panPos;
1846    this.pswp.animations.startSpring({
1847      name: 'panGesture' + axis,
1848      isPan: true,
1849      start: panPos,
1850      end: correctedPanPosition,
1851      velocity: velocity[axis],
1852      dampingRatio,
1853      onUpdate: pos => {
1854        // Animate opacity of background relative to Y pan position of an image
1855        if (restoreBgOpacity && this.pswp.bgOpacity < 1) {
1856          // 0 - start of animation, 1 - end of animation
1857          const animationProgressRatio = 1 - (correctedPanPosition - pos) / totalPanDist; // We clamp opacity to keep it between 0 and 1.
1858          // As progress ratio can be larger than 1 due to overshoot,
1859          // and we do not want to bounce opacity.
1860
1861          this.pswp.applyBgOpacity(clamp(initialBgOpacity + (1 - initialBgOpacity) * animationProgressRatio, 0, 1));
1862        }
1863
1864        pan[axis] = Math.floor(pos);
1865        currSlide.applyCurrentZoomPan();
1866      }
1867    });
1868  }
1869  /**
1870   * Update position of the main scroll,
1871   * or/and update pan position of the current slide.
1872   *
1873   * Should return true if it changes (or can change) main scroll.
1874   *
1875   * @private
1876   * @param {'x' | 'y'} axis
1877   * @returns {boolean}
1878   */
1879
1880
1881  _panOrMoveMainScroll(axis) {
1882    const {
1883      p1,
1884      dragAxis,
1885      prevP1,
1886      isMultitouch
1887    } = this.gestures;
1888    const {
1889      currSlide,
1890      mainScroll
1891    } = this.pswp;
1892    const delta = p1[axis] - prevP1[axis];
1893    const newMainScrollX = mainScroll.x + delta;
1894
1895    if (!delta || !currSlide) {
1896      return false;
1897    } // Always move main scroll if image can not be panned
1898
1899
1900    if (axis === 'x' && !currSlide.isPannable() && !isMultitouch) {
1901      mainScroll.moveTo(newMainScrollX, true);
1902      return true; // changed main scroll
1903    }
1904
1905    const {
1906      bounds
1907    } = currSlide;
1908    const newPan = currSlide.pan[axis] + delta;
1909
1910    if (this.pswp.options.allowPanToNext && dragAxis === 'x' && axis === 'x' && !isMultitouch) {
1911      const currSlideMainScrollX = mainScroll.getCurrSlideX(); // Position of the main scroll relative to the viewport
1912
1913      const mainScrollShiftDiff = mainScroll.x - currSlideMainScrollX;
1914      const isLeftToRight = delta > 0;
1915      const isRightToLeft = !isLeftToRight;
1916
1917      if (newPan > bounds.min[axis] && isLeftToRight) {
1918        // Panning from left to right, beyond the left edge
1919        // Wether the image was at minimum pan position (or less)
1920        // when this drag gesture started.
1921        // Minimum pan position refers to the left edge of the image.
1922        const wasAtMinPanPosition = bounds.min[axis] <= this.startPan[axis];
1923
1924        if (wasAtMinPanPosition) {
1925          mainScroll.moveTo(newMainScrollX, true);
1926          return true;
1927        } else {
1928          this._setPanWithFriction(axis, newPan); //currSlide.pan[axis] = newPan;
1929
1930        }
1931      } else if (newPan < bounds.max[axis] && isRightToLeft) {
1932        // Paning from right to left, beyond the right edge
1933        // Maximum pan position refers to the right edge of the image.
1934        const wasAtMaxPanPosition = this.startPan[axis] <= bounds.max[axis];
1935
1936        if (wasAtMaxPanPosition) {
1937          mainScroll.moveTo(newMainScrollX, true);
1938          return true;
1939        } else {
1940          this._setPanWithFriction(axis, newPan); //currSlide.pan[axis] = newPan;
1941
1942        }
1943      } else {
1944        // If main scroll is shifted
1945        if (mainScrollShiftDiff !== 0) {
1946          // If main scroll is shifted right
1947          if (mainScrollShiftDiff > 0
1948          /*&& isRightToLeft*/
1949          ) {
1950            mainScroll.moveTo(Math.max(newMainScrollX, currSlideMainScrollX), true);
1951            return true;
1952          } else if (mainScrollShiftDiff < 0
1953          /*&& isLeftToRight*/
1954          ) {
1955            // Main scroll is shifted left (Position is less than 0 comparing to the viewport 0)
1956            mainScroll.moveTo(Math.min(newMainScrollX, currSlideMainScrollX), true);
1957            return true;
1958          }
1959        } else {
1960          // We are within pan bounds, so just pan
1961          this._setPanWithFriction(axis, newPan);
1962        }
1963      }
1964    } else {
1965      if (axis === 'y') {
1966        // Do not pan vertically if main scroll is shifted o
1967        if (!mainScroll.isShifted() && bounds.min.y !== bounds.max.y) {
1968          this._setPanWithFriction(axis, newPan);
1969        }
1970      } else {
1971        this._setPanWithFriction(axis, newPan);
1972      }
1973    }
1974
1975    return false;
1976  } // If we move above - the ratio is negative
1977  // If we move below the ratio is positive
1978
1979  /**
1980   * Relation between pan Y position and third of viewport height.
1981   *
1982   * When we are at initial position (center bounds) - the ratio is 0,
1983   * if position is shifted upwards - the ratio is negative,
1984   * if position is shifted downwards - the ratio is positive.
1985   *
1986   * @private
1987   * @param {number} panY The current pan Y position.
1988   * @returns {number}
1989   */
1990
1991
1992  _getVerticalDragRatio(panY) {
1993    var _this$pswp$currSlide$, _this$pswp$currSlide;
1994
1995    return (panY - ((_this$pswp$currSlide$ = (_this$pswp$currSlide = this.pswp.currSlide) === null || _this$pswp$currSlide === void 0 ? void 0 : _this$pswp$currSlide.bounds.center.y) !== null && _this$pswp$currSlide$ !== void 0 ? _this$pswp$currSlide$ : 0)) / (this.pswp.viewportSize.y / 3);
1996  }
1997  /**
1998   * Set pan position of the current slide.
1999   * Apply friction if the position is beyond the pan bounds,
2000   * or if custom friction is defined.
2001   *
2002   * @private
2003   * @param {'x' | 'y'} axis
2004   * @param {number} potentialPan
2005   * @param {number} [customFriction] (0.1 - 1)
2006   */
2007
2008
2009  _setPanWithFriction(axis, potentialPan, customFriction) {
2010    const {
2011      currSlide
2012    } = this.pswp;
2013
2014    if (!currSlide) {
2015      return;
2016    }
2017
2018    const {
2019      pan,
2020      bounds
2021    } = currSlide;
2022    const correctedPan = bounds.correctPan(axis, potentialPan); // If we are out of pan bounds
2023
2024    if (correctedPan !== potentialPan || customFriction) {
2025      const delta = Math.round(potentialPan - pan[axis]);
2026      pan[axis] += delta * (customFriction || PAN_END_FRICTION);
2027    } else {
2028      pan[axis] = potentialPan;
2029    }
2030  }
2031
2032}
2033
2034/** @typedef {import('../photoswipe.js').Point} Point */
2035
2036/** @typedef {import('./gestures.js').default} Gestures */
2037
2038const UPPER_ZOOM_FRICTION = 0.05;
2039const LOWER_ZOOM_FRICTION = 0.15;
2040/**
2041 * Get center point between two points
2042 *
2043 * @param {Point} p
2044 * @param {Point} p1
2045 * @param {Point} p2
2046 * @returns {Point}
2047 */
2048
2049function getZoomPointsCenter(p, p1, p2) {
2050  p.x = (p1.x + p2.x) / 2;
2051  p.y = (p1.y + p2.y) / 2;
2052  return p;
2053}
2054
2055class ZoomHandler {
2056  /**
2057   * @param {Gestures} gestures
2058   */
2059  constructor(gestures) {
2060    this.gestures = gestures;
2061    /**
2062     * @private
2063     * @type {Point}
2064     */
2065
2066    this._startPan = {
2067      x: 0,
2068      y: 0
2069    };
2070    /**
2071     * @private
2072     * @type {Point}
2073     */
2074
2075    this._startZoomPoint = {
2076      x: 0,
2077      y: 0
2078    };
2079    /**
2080     * @private
2081     * @type {Point}
2082     */
2083
2084    this._zoomPoint = {
2085      x: 0,
2086      y: 0
2087    };
2088    /** @private */
2089
2090    this._wasOverFitZoomLevel = false;
2091    /** @private */
2092
2093    this._startZoomLevel = 1;
2094  }
2095
2096  start() {
2097    const {
2098      currSlide
2099    } = this.gestures.pswp;
2100
2101    if (currSlide) {
2102      this._startZoomLevel = currSlide.currZoomLevel;
2103      equalizePoints(this._startPan, currSlide.pan);
2104    }
2105
2106    this.gestures.pswp.animations.stopAllPan();
2107    this._wasOverFitZoomLevel = false;
2108  }
2109
2110  change() {
2111    const {
2112      p1,
2113      startP1,
2114      p2,
2115      startP2,
2116      pswp
2117    } = this.gestures;
2118    const {
2119      currSlide
2120    } = pswp;
2121
2122    if (!currSlide) {
2123      return;
2124    }
2125
2126    const minZoomLevel = currSlide.zoomLevels.min;
2127    const maxZoomLevel = currSlide.zoomLevels.max;
2128
2129    if (!currSlide.isZoomable() || pswp.mainScroll.isShifted()) {
2130      return;
2131    }
2132
2133    getZoomPointsCenter(this._startZoomPoint, startP1, startP2);
2134    getZoomPointsCenter(this._zoomPoint, p1, p2);
2135
2136    let currZoomLevel = 1 / getDistanceBetween(startP1, startP2) * getDistanceBetween(p1, p2) * this._startZoomLevel; // slightly over the zoom.fit
2137
2138
2139    if (currZoomLevel > currSlide.zoomLevels.initial + currSlide.zoomLevels.initial / 15) {
2140      this._wasOverFitZoomLevel = true;
2141    }
2142
2143    if (currZoomLevel < minZoomLevel) {
2144      if (pswp.options.pinchToClose && !this._wasOverFitZoomLevel && this._startZoomLevel <= currSlide.zoomLevels.initial) {
2145        // fade out background if zooming out
2146        const bgOpacity = 1 - (minZoomLevel - currZoomLevel) / (minZoomLevel / 1.2);
2147
2148        if (!pswp.dispatch('pinchClose', {
2149          bgOpacity
2150        }).defaultPrevented) {
2151          pswp.applyBgOpacity(bgOpacity);
2152        }
2153      } else {
2154        // Apply the friction if zoom level is below the min
2155        currZoomLevel = minZoomLevel - (minZoomLevel - currZoomLevel) * LOWER_ZOOM_FRICTION;
2156      }
2157    } else if (currZoomLevel > maxZoomLevel) {
2158      // Apply the friction if zoom level is above the max
2159      currZoomLevel = maxZoomLevel + (currZoomLevel - maxZoomLevel) * UPPER_ZOOM_FRICTION;
2160    }
2161
2162    currSlide.pan.x = this._calculatePanForZoomLevel('x', currZoomLevel);
2163    currSlide.pan.y = this._calculatePanForZoomLevel('y', currZoomLevel);
2164    currSlide.setZoomLevel(currZoomLevel);
2165    currSlide.applyCurrentZoomPan();
2166  }
2167
2168  end() {
2169    const {
2170      pswp
2171    } = this.gestures;
2172    const {
2173      currSlide
2174    } = pswp;
2175
2176    if ((!currSlide || currSlide.currZoomLevel < currSlide.zoomLevels.initial) && !this._wasOverFitZoomLevel && pswp.options.pinchToClose) {
2177      pswp.close();
2178    } else {
2179      this.correctZoomPan();
2180    }
2181  }
2182  /**
2183   * @private
2184   * @param {'x' | 'y'} axis
2185   * @param {number} currZoomLevel
2186   * @returns {number}
2187   */
2188
2189
2190  _calculatePanForZoomLevel(axis, currZoomLevel) {
2191    const zoomFactor = currZoomLevel / this._startZoomLevel;
2192    return this._zoomPoint[axis] - (this._startZoomPoint[axis] - this._startPan[axis]) * zoomFactor;
2193  }
2194  /**
2195   * Correct currZoomLevel and pan if they are
2196   * beyond minimum or maximum values.
2197   * With animation.
2198   *
2199   * @param {boolean} [ignoreGesture]
2200   * Wether gesture coordinates should be ignored when calculating destination pan position.
2201   */
2202
2203
2204  correctZoomPan(ignoreGesture) {
2205    const {
2206      pswp
2207    } = this.gestures;
2208    const {
2209      currSlide
2210    } = pswp;
2211
2212    if (!(currSlide !== null && currSlide !== void 0 && currSlide.isZoomable())) {
2213      return;
2214    }
2215
2216    if (this._zoomPoint.x === 0) {
2217      ignoreGesture = true;
2218    }
2219
2220    const prevZoomLevel = currSlide.currZoomLevel;
2221    /** @type {number} */
2222
2223    let destinationZoomLevel;
2224    let currZoomLevelNeedsChange = true;
2225
2226    if (prevZoomLevel < currSlide.zoomLevels.initial) {
2227      destinationZoomLevel = currSlide.zoomLevels.initial; // zoom to min
2228    } else if (prevZoomLevel > currSlide.zoomLevels.max) {
2229      destinationZoomLevel = currSlide.zoomLevels.max; // zoom to max
2230    } else {
2231      currZoomLevelNeedsChange = false;
2232      destinationZoomLevel = prevZoomLevel;
2233    }
2234
2235    const initialBgOpacity = pswp.bgOpacity;
2236    const restoreBgOpacity = pswp.bgOpacity < 1;
2237    const initialPan = equalizePoints({
2238      x: 0,
2239      y: 0
2240    }, currSlide.pan);
2241    let destinationPan = equalizePoints({
2242      x: 0,
2243      y: 0
2244    }, initialPan);
2245
2246    if (ignoreGesture) {
2247      this._zoomPoint.x = 0;
2248      this._zoomPoint.y = 0;
2249      this._startZoomPoint.x = 0;
2250      this._startZoomPoint.y = 0;
2251      this._startZoomLevel = prevZoomLevel;
2252      equalizePoints(this._startPan, initialPan);
2253    }
2254
2255    if (currZoomLevelNeedsChange) {
2256      destinationPan = {
2257        x: this._calculatePanForZoomLevel('x', destinationZoomLevel),
2258        y: this._calculatePanForZoomLevel('y', destinationZoomLevel)
2259      };
2260    } // set zoom level, so pan bounds are updated according to it
2261
2262
2263    currSlide.setZoomLevel(destinationZoomLevel);
2264    destinationPan = {
2265      x: currSlide.bounds.correctPan('x', destinationPan.x),
2266      y: currSlide.bounds.correctPan('y', destinationPan.y)
2267    }; // return zoom level and its bounds to initial
2268
2269    currSlide.setZoomLevel(prevZoomLevel);
2270    const panNeedsChange = !pointsEqual(destinationPan, initialPan);
2271
2272    if (!panNeedsChange && !currZoomLevelNeedsChange && !restoreBgOpacity) {
2273      // update resolution after gesture
2274      currSlide._setResolution(destinationZoomLevel);
2275
2276      currSlide.applyCurrentZoomPan(); // nothing to animate
2277
2278      return;
2279    }
2280
2281    pswp.animations.stopAllPan();
2282    pswp.animations.startSpring({
2283      isPan: true,
2284      start: 0,
2285      end: 1000,
2286      velocity: 0,
2287      dampingRatio: 1,
2288      naturalFrequency: 40,
2289      onUpdate: now => {
2290        now /= 1000; // 0 - start, 1 - end
2291
2292        if (panNeedsChange || currZoomLevelNeedsChange) {
2293          if (panNeedsChange) {
2294            currSlide.pan.x = initialPan.x + (destinationPan.x - initialPan.x) * now;
2295            currSlide.pan.y = initialPan.y + (destinationPan.y - initialPan.y) * now;
2296          }
2297
2298          if (currZoomLevelNeedsChange) {
2299            const newZoomLevel = prevZoomLevel + (destinationZoomLevel - prevZoomLevel) * now;
2300            currSlide.setZoomLevel(newZoomLevel);
2301          }
2302
2303          currSlide.applyCurrentZoomPan();
2304        } // Restore background opacity
2305
2306
2307        if (restoreBgOpacity && pswp.bgOpacity < 1) {
2308          // We clamp opacity to keep it between 0 and 1.
2309          // As progress ratio can be larger than 1 due to overshoot,
2310          // and we do not want to bounce opacity.
2311          pswp.applyBgOpacity(clamp(initialBgOpacity + (1 - initialBgOpacity) * now, 0, 1));
2312        }
2313      },
2314      onComplete: () => {
2315        // update resolution after transition ends
2316        currSlide._setResolution(destinationZoomLevel);
2317
2318        currSlide.applyCurrentZoomPan();
2319      }
2320    });
2321  }
2322
2323}
2324
2325/**
2326 * @template {string} T
2327 * @template {string} P
2328 * @typedef {import('../types.js').AddPostfix<T, P>} AddPostfix<T, P>
2329 */
2330
2331/** @typedef {import('./gestures.js').default} Gestures */
2332
2333/** @typedef {import('../photoswipe.js').Point} Point */
2334
2335/** @typedef {'imageClick' | 'bgClick' | 'tap' | 'doubleTap'} Actions */
2336
2337/**
2338 * Whether the tap was performed on the main slide
2339 * (rather than controls or caption).
2340 *
2341 * @param {PointerEvent} event
2342 * @returns {boolean}
2343 */
2344function didTapOnMainContent(event) {
2345  return !!
2346  /** @type {HTMLElement} */
2347  event.target.closest('.pswp__container');
2348}
2349/**
2350 * Tap, double-tap handler.
2351 */
2352
2353
2354class TapHandler {
2355  /**
2356   * @param {Gestures} gestures
2357   */
2358  constructor(gestures) {
2359    this.gestures = gestures;
2360  }
2361  /**
2362   * @param {Point} point
2363   * @param {PointerEvent} originalEvent
2364   */
2365
2366
2367  click(point, originalEvent) {
2368    const targetClassList =
2369    /** @type {HTMLElement} */
2370    originalEvent.target.classList;
2371    const isImageClick = targetClassList.contains('pswp__img');
2372    const isBackgroundClick = targetClassList.contains('pswp__item') || targetClassList.contains('pswp__zoom-wrap');
2373
2374    if (isImageClick) {
2375      this._doClickOrTapAction('imageClick', point, originalEvent);
2376    } else if (isBackgroundClick) {
2377      this._doClickOrTapAction('bgClick', point, originalEvent);
2378    }
2379  }
2380  /**
2381   * @param {Point} point
2382   * @param {PointerEvent} originalEvent
2383   */
2384
2385
2386  tap(point, originalEvent) {
2387    if (didTapOnMainContent(originalEvent)) {
2388      this._doClickOrTapAction('tap', point, originalEvent);
2389    }
2390  }
2391  /**
2392   * @param {Point} point
2393   * @param {PointerEvent} originalEvent
2394   */
2395
2396
2397  doubleTap(point, originalEvent) {
2398    if (didTapOnMainContent(originalEvent)) {
2399      this._doClickOrTapAction('doubleTap', point, originalEvent);
2400    }
2401  }
2402  /**
2403   * @private
2404   * @param {Actions} actionName
2405   * @param {Point} point
2406   * @param {PointerEvent} originalEvent
2407   */
2408
2409
2410  _doClickOrTapAction(actionName, point, originalEvent) {
2411    var _this$gestures$pswp$e;
2412
2413    const {
2414      pswp
2415    } = this.gestures;
2416    const {
2417      currSlide
2418    } = pswp;
2419    const actionFullName =
2420    /** @type {AddPostfix<Actions, 'Action'>} */
2421    actionName + 'Action';
2422    const optionValue = pswp.options[actionFullName];
2423
2424    if (pswp.dispatch(actionFullName, {
2425      point,
2426      originalEvent
2427    }).defaultPrevented) {
2428      return;
2429    }
2430
2431    if (typeof optionValue === 'function') {
2432      optionValue.call(pswp, point, originalEvent);
2433      return;
2434    }
2435
2436    switch (optionValue) {
2437      case 'close':
2438      case 'next':
2439        pswp[optionValue]();
2440        break;
2441
2442      case 'zoom':
2443        currSlide === null || currSlide === void 0 || currSlide.toggleZoom(point);
2444        break;
2445
2446      case 'zoom-or-close':
2447        // by default click zooms current image,
2448        // if it can not be zoomed - gallery will be closed
2449        if (currSlide !== null && currSlide !== void 0 && currSlide.isZoomable() && currSlide.zoomLevels.secondary !== currSlide.zoomLevels.initial) {
2450          currSlide.toggleZoom(point);
2451        } else if (pswp.options.clickToCloseNonZoomable) {
2452          pswp.close();
2453        }
2454
2455        break;
2456
2457      case 'toggle-controls':
2458        (_this$gestures$pswp$e = this.gestures.pswp.element) === null || _this$gestures$pswp$e === void 0 || _this$gestures$pswp$e.classList.toggle('pswp--ui-visible'); // if (_controlsVisible) {
2459        //   _ui.hideControls();
2460        // } else {
2461        //   _ui.showControls();
2462        // }
2463
2464        break;
2465    }
2466  }
2467
2468}
2469
2470/** @typedef {import('../photoswipe.js').default} PhotoSwipe */
2471
2472/** @typedef {import('../photoswipe.js').Point} Point */
2473// How far should user should drag
2474// until we can determine that the gesture is swipe and its direction
2475
2476const AXIS_SWIPE_HYSTERISIS = 10; //const PAN_END_FRICTION = 0.35;
2477
2478const DOUBLE_TAP_DELAY = 300; // ms
2479
2480const MIN_TAP_DISTANCE = 25; // px
2481
2482/**
2483 * Gestures class bind touch, pointer or mouse events
2484 * and emits drag to drag-handler and zoom events zoom-handler.
2485 *
2486 * Drag and zoom events are emited in requestAnimationFrame,
2487 * and only when one of pointers was actually changed.
2488 */
2489
2490class Gestures {
2491  /**
2492   * @param {PhotoSwipe} pswp
2493   */
2494  constructor(pswp) {
2495    this.pswp = pswp;
2496    /** @type {'x' | 'y' | null} */
2497
2498    this.dragAxis = null; // point objects are defined once and reused
2499    // PhotoSwipe keeps track only of two pointers, others are ignored
2500
2501    /** @type {Point} */
2502
2503    this.p1 = {
2504      x: 0,
2505      y: 0
2506    }; // the first pressed pointer
2507
2508    /** @type {Point} */
2509
2510    this.p2 = {
2511      x: 0,
2512      y: 0
2513    }; // the second pressed pointer
2514
2515    /** @type {Point} */
2516
2517    this.prevP1 = {
2518      x: 0,
2519      y: 0
2520    };
2521    /** @type {Point} */
2522
2523    this.prevP2 = {
2524      x: 0,
2525      y: 0
2526    };
2527    /** @type {Point} */
2528
2529    this.startP1 = {
2530      x: 0,
2531      y: 0
2532    };
2533    /** @type {Point} */
2534
2535    this.startP2 = {
2536      x: 0,
2537      y: 0
2538    };
2539    /** @type {Point} */
2540
2541    this.velocity = {
2542      x: 0,
2543      y: 0
2544    };
2545    /** @type {Point}
2546     * @private
2547     */
2548
2549    this._lastStartP1 = {
2550      x: 0,
2551      y: 0
2552    };
2553    /** @type {Point}
2554     * @private
2555     */
2556
2557    this._intervalP1 = {
2558      x: 0,
2559      y: 0
2560    };
2561    /** @private */
2562
2563    this._numActivePoints = 0;
2564    /** @type {Point[]}
2565     * @private
2566     */
2567
2568    this._ongoingPointers = [];
2569    /** @private */
2570
2571    this._touchEventEnabled = 'ontouchstart' in window;
2572    /** @private */
2573
2574    this._pointerEventEnabled = !!window.PointerEvent;
2575    this.supportsTouch = this._touchEventEnabled || this._pointerEventEnabled && navigator.maxTouchPoints > 1;
2576    /** @private */
2577
2578    this._numActivePoints = 0;
2579    /** @private */
2580
2581    this._intervalTime = 0;
2582    /** @private */
2583
2584    this._velocityCalculated = false;
2585    this.isMultitouch = false;
2586    this.isDragging = false;
2587    this.isZooming = false;
2588    /** @type {number | null} */
2589
2590    this.raf = null;
2591    /** @type {NodeJS.Timeout | null}
2592     * @private
2593     */
2594
2595    this._tapTimer = null;
2596
2597    if (!this.supportsTouch) {
2598      // disable pan to next slide for non-touch devices
2599      pswp.options.allowPanToNext = false;
2600    }
2601
2602    this.drag = new DragHandler(this);
2603    this.zoomLevels = new ZoomHandler(this);
2604    this.tapHandler = new TapHandler(this);
2605    pswp.on('bindEvents', () => {
2606      pswp.events.add(pswp.scrollWrap, 'click',
2607      /** @type EventListener */
2608      this._onClick.bind(this));
2609
2610      if (this._pointerEventEnabled) {
2611        this._bindEvents('pointer', 'down', 'up', 'cancel');
2612      } else if (this._touchEventEnabled) {
2613        this._bindEvents('touch', 'start', 'end', 'cancel'); // In previous versions we also bound mouse event here,
2614        // in case device supports both touch and mouse events,
2615        // but newer versions of browsers now support PointerEvent.
2616        // on iOS10 if you bind touchmove/end after touchstart,
2617        // and you don't preventDefault touchstart (which PhotoSwipe does),
2618        // preventDefault will have no effect on touchmove and touchend.
2619        // Unless you bind it previously.
2620
2621
2622        if (pswp.scrollWrap) {
2623          pswp.scrollWrap.ontouchmove = () => {};
2624
2625          pswp.scrollWrap.ontouchend = () => {};
2626        }
2627      } else {
2628        this._bindEvents('mouse', 'down', 'up');
2629      }
2630    });
2631  }
2632  /**
2633   * @private
2634   * @param {'mouse' | 'touch' | 'pointer'} pref
2635   * @param {'down' | 'start'} down
2636   * @param {'up' | 'end'} up
2637   * @param {'cancel'} [cancel]
2638   */
2639
2640
2641  _bindEvents(pref, down, up, cancel) {
2642    const {
2643      pswp
2644    } = this;
2645    const {
2646      events
2647    } = pswp;
2648    const cancelEvent = cancel ? pref + cancel : '';
2649    events.add(pswp.scrollWrap, pref + down,
2650    /** @type EventListener */
2651    this.onPointerDown.bind(this));
2652    events.add(window, pref + 'move',
2653    /** @type EventListener */
2654    this.onPointerMove.bind(this));
2655    events.add(window, pref + up,
2656    /** @type EventListener */
2657    this.onPointerUp.bind(this));
2658
2659    if (cancelEvent) {
2660      events.add(pswp.scrollWrap, cancelEvent,
2661      /** @type EventListener */
2662      this.onPointerUp.bind(this));
2663    }
2664  }
2665  /**
2666   * @param {PointerEvent} e
2667   */
2668
2669
2670  onPointerDown(e) {
2671    // We do not call preventDefault for touch events
2672    // to allow browser to show native dialog on longpress
2673    // (the one that allows to save image or open it in new tab).
2674    //
2675    // Desktop Safari allows to drag images when preventDefault isn't called on mousedown,
2676    // even though preventDefault IS called on mousemove. That's why we preventDefault mousedown.
2677    const isMousePointer = e.type === 'mousedown' || e.pointerType === 'mouse'; // Allow dragging only via left mouse button.
2678    // http://www.quirksmode.org/js/events_properties.html
2679    // https://developer.mozilla.org/en-US/docs/Web/API/event.button
2680
2681    if (isMousePointer && e.button > 0) {
2682      return;
2683    }
2684
2685    const {
2686      pswp
2687    } = this; // if PhotoSwipe is opening or closing
2688
2689    if (!pswp.opener.isOpen) {
2690      e.preventDefault();
2691      return;
2692    }
2693
2694    if (pswp.dispatch('pointerDown', {
2695      originalEvent: e
2696    }).defaultPrevented) {
2697      return;
2698    }
2699
2700    if (isMousePointer) {
2701      pswp.mouseDetected(); // preventDefault mouse event to prevent
2702      // browser image drag feature
2703
2704      this._preventPointerEventBehaviour(e, 'down');
2705    }
2706
2707    pswp.animations.stopAll();
2708
2709    this._updatePoints(e, 'down');
2710
2711    if (this._numActivePoints === 1) {
2712      this.dragAxis = null; // we need to store initial point to determine the main axis,
2713      // drag is activated only after the axis is determined
2714
2715      equalizePoints(this.startP1, this.p1);
2716    }
2717
2718    if (this._numActivePoints > 1) {
2719      // Tap or double tap should not trigger if more than one pointer
2720      this._clearTapTimer();
2721
2722      this.isMultitouch = true;
2723    } else {
2724      this.isMultitouch = false;
2725    }
2726  }
2727  /**
2728   * @param {PointerEvent} e
2729   */
2730
2731
2732  onPointerMove(e) {
2733    this._preventPointerEventBehaviour(e, 'move');
2734
2735    if (!this._numActivePoints) {
2736      return;
2737    }
2738
2739    this._updatePoints(e, 'move');
2740
2741    if (this.pswp.dispatch('pointerMove', {
2742      originalEvent: e
2743    }).defaultPrevented) {
2744      return;
2745    }
2746
2747    if (this._numActivePoints === 1 && !this.isDragging) {
2748      if (!this.dragAxis) {
2749        this._calculateDragDirection();
2750      } // Drag axis was detected, emit drag.start
2751
2752
2753      if (this.dragAxis && !this.isDragging) {
2754        if (this.isZooming) {
2755          this.isZooming = false;
2756          this.zoomLevels.end();
2757        }
2758
2759        this.isDragging = true;
2760
2761        this._clearTapTimer(); // Tap can not trigger after drag
2762        // Adjust starting point
2763
2764
2765        this._updateStartPoints();
2766
2767        this._intervalTime = Date.now(); //this._startTime = this._intervalTime;
2768
2769        this._velocityCalculated = false;
2770        equalizePoints(this._intervalP1, this.p1);
2771        this.velocity.x = 0;
2772        this.velocity.y = 0;
2773        this.drag.start();
2774
2775        this._rafStopLoop();
2776
2777        this._rafRenderLoop();
2778      }
2779    } else if (this._numActivePoints > 1 && !this.isZooming) {
2780      this._finishDrag();
2781
2782      this.isZooming = true; // Adjust starting points
2783
2784      this._updateStartPoints();
2785
2786      this.zoomLevels.start();
2787
2788      this._rafStopLoop();
2789
2790      this._rafRenderLoop();
2791    }
2792  }
2793  /**
2794   * @private
2795   */
2796
2797
2798  _finishDrag() {
2799    if (this.isDragging) {
2800      this.isDragging = false; // Try to calculate velocity,
2801      // if it wasn't calculated yet in drag.change
2802
2803      if (!this._velocityCalculated) {
2804        this._updateVelocity(true);
2805      }
2806
2807      this.drag.end();
2808      this.dragAxis = null;
2809    }
2810  }
2811  /**
2812   * @param {PointerEvent} e
2813   */
2814
2815
2816  onPointerUp(e) {
2817    if (!this._numActivePoints) {
2818      return;
2819    }
2820
2821    this._updatePoints(e, 'up');
2822
2823    if (this.pswp.dispatch('pointerUp', {
2824      originalEvent: e
2825    }).defaultPrevented) {
2826      return;
2827    }
2828
2829    if (this._numActivePoints === 0) {
2830      this._rafStopLoop();
2831
2832      if (this.isDragging) {
2833        this._finishDrag();
2834      } else if (!this.isZooming && !this.isMultitouch) {
2835        //this.zoomLevels.correctZoomPan();
2836        this._finishTap(e);
2837      }
2838    }
2839
2840    if (this._numActivePoints < 2 && this.isZooming) {
2841      this.isZooming = false;
2842      this.zoomLevels.end();
2843
2844      if (this._numActivePoints === 1) {
2845        // Since we have 1 point left, we need to reinitiate drag
2846        this.dragAxis = null;
2847
2848        this._updateStartPoints();
2849      }
2850    }
2851  }
2852  /**
2853   * @private
2854   */
2855
2856
2857  _rafRenderLoop() {
2858    if (this.isDragging || this.isZooming) {
2859      this._updateVelocity();
2860
2861      if (this.isDragging) {
2862        // make sure that pointer moved since the last update
2863        if (!pointsEqual(this.p1, this.prevP1)) {
2864          this.drag.change();
2865        }
2866      } else
2867        /* if (this.isZooming) */
2868        {
2869          if (!pointsEqual(this.p1, this.prevP1) || !pointsEqual(this.p2, this.prevP2)) {
2870            this.zoomLevels.change();
2871          }
2872        }
2873
2874      this._updatePrevPoints();
2875
2876      this.raf = requestAnimationFrame(this._rafRenderLoop.bind(this));
2877    }
2878  }
2879  /**
2880   * Update velocity at 50ms interval
2881   *
2882   * @private
2883   * @param {boolean} [force]
2884   */
2885
2886
2887  _updateVelocity(force) {
2888    const time = Date.now();
2889    const duration = time - this._intervalTime;
2890
2891    if (duration < 50 && !force) {
2892      return;
2893    }
2894
2895    this.velocity.x = this._getVelocity('x', duration);
2896    this.velocity.y = this._getVelocity('y', duration);
2897    this._intervalTime = time;
2898    equalizePoints(this._intervalP1, this.p1);
2899    this._velocityCalculated = true;
2900  }
2901  /**
2902   * @private
2903   * @param {PointerEvent} e
2904   */
2905
2906
2907  _finishTap(e) {
2908    const {
2909      mainScroll
2910    } = this.pswp; // Do not trigger tap events if main scroll is shifted
2911
2912    if (mainScroll.isShifted()) {
2913      // restore main scroll position
2914      // (usually happens if stopped in the middle of animation)
2915      mainScroll.moveIndexBy(0, true);
2916      return;
2917    } // Do not trigger tap for touchcancel or pointercancel
2918
2919
2920    if (e.type.indexOf('cancel') > 0) {
2921      return;
2922    } // Trigger click instead of tap for mouse events
2923
2924
2925    if (e.type === 'mouseup' || e.pointerType === 'mouse') {
2926      this.tapHandler.click(this.startP1, e);
2927      return;
2928    } // Disable delay if there is no doubleTapAction
2929
2930
2931    const tapDelay = this.pswp.options.doubleTapAction ? DOUBLE_TAP_DELAY : 0; // If tapTimer is defined - we tapped recently,
2932    // check if the current tap is close to the previous one,
2933    // if yes - trigger double tap
2934
2935    if (this._tapTimer) {
2936      this._clearTapTimer(); // Check if two taps were more or less on the same place
2937
2938
2939      if (getDistanceBetween(this._lastStartP1, this.startP1) < MIN_TAP_DISTANCE) {
2940        this.tapHandler.doubleTap(this.startP1, e);
2941      }
2942    } else {
2943      equalizePoints(this._lastStartP1, this.startP1);
2944      this._tapTimer = setTimeout(() => {
2945        this.tapHandler.tap(this.startP1, e);
2946
2947        this._clearTapTimer();
2948      }, tapDelay);
2949    }
2950  }
2951  /**
2952   * @private
2953   */
2954
2955
2956  _clearTapTimer() {
2957    if (this._tapTimer) {
2958      clearTimeout(this._tapTimer);
2959      this._tapTimer = null;
2960    }
2961  }
2962  /**
2963   * Get velocity for axis
2964   *
2965   * @private
2966   * @param {'x' | 'y'} axis
2967   * @param {number} duration
2968   * @returns {number}
2969   */
2970
2971
2972  _getVelocity(axis, duration) {
2973    // displacement is like distance, but can be negative.
2974    const displacement = this.p1[axis] - this._intervalP1[axis];
2975
2976    if (Math.abs(displacement) > 1 && duration > 5) {
2977      return displacement / duration;
2978    }
2979
2980    return 0;
2981  }
2982  /**
2983   * @private
2984   */
2985
2986
2987  _rafStopLoop() {
2988    if (this.raf) {
2989      cancelAnimationFrame(this.raf);
2990      this.raf = null;
2991    }
2992  }
2993  /**
2994   * @private
2995   * @param {PointerEvent} e
2996   * @param {'up' | 'down' | 'move'} pointerType Normalized pointer type
2997   */
2998
2999
3000  _preventPointerEventBehaviour(e, pointerType) {
3001    const preventPointerEvent = this.pswp.applyFilters('preventPointerEvent', true, e, pointerType);
3002
3003    if (preventPointerEvent) {
3004      e.preventDefault();
3005    }
3006  }
3007  /**
3008   * Parses and normalizes points from the touch, mouse or pointer event.
3009   * Updates p1 and p2.
3010   *
3011   * @private
3012   * @param {PointerEvent | TouchEvent} e
3013   * @param {'up' | 'down' | 'move'} pointerType Normalized pointer type
3014   */
3015
3016
3017  _updatePoints(e, pointerType) {
3018    if (this._pointerEventEnabled) {
3019      const pointerEvent =
3020      /** @type {PointerEvent} */
3021      e; // Try to find the current pointer in ongoing pointers by its ID
3022
3023      const pointerIndex = this._ongoingPointers.findIndex(ongoingPointer => {
3024        return ongoingPointer.id === pointerEvent.pointerId;
3025      });
3026
3027      if (pointerType === 'up' && pointerIndex > -1) {
3028        // release the pointer - remove it from ongoing
3029        this._ongoingPointers.splice(pointerIndex, 1);
3030      } else if (pointerType === 'down' && pointerIndex === -1) {
3031        // add new pointer
3032        this._ongoingPointers.push(this._convertEventPosToPoint(pointerEvent, {
3033          x: 0,
3034          y: 0
3035        }));
3036      } else if (pointerIndex > -1) {
3037        // update existing pointer
3038        this._convertEventPosToPoint(pointerEvent, this._ongoingPointers[pointerIndex]);
3039      }
3040
3041      this._numActivePoints = this._ongoingPointers.length; // update points that PhotoSwipe uses
3042      // to calculate position and scale
3043
3044      if (this._numActivePoints > 0) {
3045        equalizePoints(this.p1, this._ongoingPointers[0]);
3046      }
3047
3048      if (this._numActivePoints > 1) {
3049        equalizePoints(this.p2, this._ongoingPointers[1]);
3050      }
3051    } else {
3052      const touchEvent =
3053      /** @type {TouchEvent} */
3054      e;
3055      this._numActivePoints = 0;
3056
3057      if (touchEvent.type.indexOf('touch') > -1) {
3058        // Touch Event
3059        // https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent
3060        if (touchEvent.touches && touchEvent.touches.length > 0) {
3061          this._convertEventPosToPoint(touchEvent.touches[0], this.p1);
3062
3063          this._numActivePoints++;
3064
3065          if (touchEvent.touches.length > 1) {
3066            this._convertEventPosToPoint(touchEvent.touches[1], this.p2);
3067
3068            this._numActivePoints++;
3069          }
3070        }
3071      } else {
3072        // Mouse Event
3073        this._convertEventPosToPoint(
3074        /** @type {PointerEvent} */
3075        e, this.p1);
3076
3077        if (pointerType === 'up') {
3078          // clear all points on mouseup
3079          this._numActivePoints = 0;
3080        } else {
3081          this._numActivePoints++;
3082        }
3083      }
3084    }
3085  }
3086  /** update points that were used during previous rAF tick
3087   * @private
3088   */
3089
3090
3091  _updatePrevPoints() {
3092    equalizePoints(this.prevP1, this.p1);
3093    equalizePoints(this.prevP2, this.p2);
3094  }
3095  /** update points at the start of gesture
3096   * @private
3097   */
3098
3099
3100  _updateStartPoints() {
3101    equalizePoints(this.startP1, this.p1);
3102    equalizePoints(this.startP2, this.p2);
3103
3104    this._updatePrevPoints();
3105  }
3106  /** @private */
3107
3108
3109  _calculateDragDirection() {
3110    if (this.pswp.mainScroll.isShifted()) {
3111      // if main scroll position is shifted – direction is always horizontal
3112      this.dragAxis = 'x';
3113    } else {
3114      // calculate delta of the last touchmove tick
3115      const diff = Math.abs(this.p1.x - this.startP1.x) - Math.abs(this.p1.y - this.startP1.y);
3116
3117      if (diff !== 0) {
3118        // check if pointer was shifted horizontally or vertically
3119        const axisToCheck = diff > 0 ? 'x' : 'y';
3120
3121        if (Math.abs(this.p1[axisToCheck] - this.startP1[axisToCheck]) >= AXIS_SWIPE_HYSTERISIS) {
3122          this.dragAxis = axisToCheck;
3123        }
3124      }
3125    }
3126  }
3127  /**
3128   * Converts touch, pointer or mouse event
3129   * to PhotoSwipe point.
3130   *
3131   * @private
3132   * @param {Touch | PointerEvent} e
3133   * @param {Point} p
3134   * @returns {Point}
3135   */
3136
3137
3138  _convertEventPosToPoint(e, p) {
3139    p.x = e.pageX - this.pswp.offset.x;
3140    p.y = e.pageY - this.pswp.offset.y;
3141
3142    if ('pointerId' in e) {
3143      p.id = e.pointerId;
3144    } else if (e.identifier !== undefined) {
3145      p.id = e.identifier;
3146    }
3147
3148    return p;
3149  }
3150  /**
3151   * @private
3152   * @param {PointerEvent} e
3153   */
3154
3155
3156  _onClick(e) {
3157    // Do not allow click event to pass through after drag
3158    if (this.pswp.mainScroll.isShifted()) {
3159      e.preventDefault();
3160      e.stopPropagation();
3161    }
3162  }
3163
3164}
3165
3166/** @typedef {import('./photoswipe.js').default} PhotoSwipe */
3167
3168/** @typedef {import('./slide/slide.js').default} Slide */
3169
3170/** @typedef {{ el: HTMLDivElement; slide?: Slide }} ItemHolder */
3171
3172const MAIN_SCROLL_END_FRICTION = 0.35; // const MIN_SWIPE_TRANSITION_DURATION = 250;
3173// const MAX_SWIPE_TRABSITION_DURATION = 500;
3174// const DEFAULT_SWIPE_TRANSITION_DURATION = 333;
3175
3176/**
3177 * Handles movement of the main scrolling container
3178 * (for example, it repositions when user swipes left or right).
3179 *
3180 * Also stores its state.
3181 */
3182
3183class MainScroll {
3184  /**
3185   * @param {PhotoSwipe} pswp
3186   */
3187  constructor(pswp) {
3188    this.pswp = pswp;
3189    this.x = 0;
3190    this.slideWidth = 0;
3191    /** @private */
3192
3193    this._currPositionIndex = 0;
3194    /** @private */
3195
3196    this._prevPositionIndex = 0;
3197    /** @private */
3198
3199    this._containerShiftIndex = -1;
3200    /** @type {ItemHolder[]} */
3201
3202    this.itemHolders = [];
3203  }
3204  /**
3205   * Position the scroller and slide containers
3206   * according to viewport size.
3207   *
3208   * @param {boolean} [resizeSlides] Whether slides content should resized
3209   */
3210
3211
3212  resize(resizeSlides) {
3213    const {
3214      pswp
3215    } = this;
3216    const newSlideWidth = Math.round(pswp.viewportSize.x + pswp.viewportSize.x * pswp.options.spacing); // Mobile browsers might trigger a resize event during a gesture.
3217    // (due to toolbar appearing or hiding).
3218    // Avoid re-adjusting main scroll position if width wasn't changed
3219
3220    const slideWidthChanged = newSlideWidth !== this.slideWidth;
3221
3222    if (slideWidthChanged) {
3223      this.slideWidth = newSlideWidth;
3224      this.moveTo(this.getCurrSlideX());
3225    }
3226
3227    this.itemHolders.forEach((itemHolder, index) => {
3228      if (slideWidthChanged) {
3229        setTransform(itemHolder.el, (index + this._containerShiftIndex) * this.slideWidth);
3230      }
3231
3232      if (resizeSlides && itemHolder.slide) {
3233        itemHolder.slide.resize();
3234      }
3235    });
3236  }
3237  /**
3238   * Reset X position of the main scroller to zero
3239   */
3240
3241
3242  resetPosition() {
3243    // Position on the main scroller (offset)
3244    // it is independent from slide index
3245    this._currPositionIndex = 0;
3246    this._prevPositionIndex = 0; // This will force recalculation of size on next resize()
3247
3248    this.slideWidth = 0; // _containerShiftIndex*viewportSize will give you amount of transform of the current slide
3249
3250    this._containerShiftIndex = -1;
3251  }
3252  /**
3253   * Create and append array of three items
3254   * that hold data about slides in DOM
3255   */
3256
3257
3258  appendHolders() {
3259    this.itemHolders = []; // append our three slide holders -
3260    // previous, current, and next
3261
3262    for (let i = 0; i < 3; i++) {
3263      const el = createElement('pswp__item', 'div', this.pswp.container);
3264      el.setAttribute('role', 'group');
3265      el.setAttribute('aria-roledescription', 'slide');
3266      el.setAttribute('aria-hidden', 'true'); // hide nearby item holders until initial zoom animation finishes (to avoid extra Paints)
3267
3268      el.style.display = i === 1 ? 'block' : 'none';
3269      this.itemHolders.push({
3270        el //index: -1
3271
3272      });
3273    }
3274  }
3275  /**
3276   * Whether the main scroll can be horizontally swiped to the next or previous slide.
3277   * @returns {boolean}
3278   */
3279
3280
3281  canBeSwiped() {
3282    return this.pswp.getNumItems() > 1;
3283  }
3284  /**
3285   * Move main scroll by X amount of slides.
3286   * For example:
3287   *   `-1` will move to the previous slide,
3288   *    `0` will reset the scroll position of the current slide,
3289   *    `3` will move three slides forward
3290   *
3291   * If loop option is enabled - index will be automatically looped too,
3292   * (for example `-1` will move to the last slide of the gallery).
3293   *
3294   * @param {number} diff
3295   * @param {boolean} [animate]
3296   * @param {number} [velocityX]
3297   * @returns {boolean} whether index was changed or not
3298   */
3299
3300
3301  moveIndexBy(diff, animate, velocityX) {
3302    const {
3303      pswp
3304    } = this;
3305    let newIndex = pswp.potentialIndex + diff;
3306    const numSlides = pswp.getNumItems();
3307
3308    if (pswp.canLoop()) {
3309      newIndex = pswp.getLoopedIndex(newIndex);
3310      const distance = (diff + numSlides) % numSlides;
3311
3312      if (distance <= numSlides / 2) {
3313        // go forward
3314        diff = distance;
3315      } else {
3316        // go backwards
3317        diff = distance - numSlides;
3318      }
3319    } else {
3320      if (newIndex < 0) {
3321        newIndex = 0;
3322      } else if (newIndex >= numSlides) {
3323        newIndex = numSlides - 1;
3324      }
3325
3326      diff = newIndex - pswp.potentialIndex;
3327    }
3328
3329    pswp.potentialIndex = newIndex;
3330    this._currPositionIndex -= diff;
3331    pswp.animations.stopMainScroll();
3332    const destinationX = this.getCurrSlideX();
3333
3334    if (!animate) {
3335      this.moveTo(destinationX);
3336      this.updateCurrItem();
3337    } else {
3338      pswp.animations.startSpring({
3339        isMainScroll: true,
3340        start: this.x,
3341        end: destinationX,
3342        velocity: velocityX || 0,
3343        naturalFrequency: 30,
3344        dampingRatio: 1,
3345        //0.7,
3346        onUpdate: x => {
3347          this.moveTo(x);
3348        },
3349        onComplete: () => {
3350          this.updateCurrItem();
3351          pswp.appendHeavy();
3352        }
3353      });
3354      let currDiff = pswp.potentialIndex - pswp.currIndex;
3355
3356      if (pswp.canLoop()) {
3357        const currDistance = (currDiff + numSlides) % numSlides;
3358
3359        if (currDistance <= numSlides / 2) {
3360          // go forward
3361          currDiff = currDistance;
3362        } else {
3363          // go backwards
3364          currDiff = currDistance - numSlides;
3365        }
3366      } // Force-append new slides during transition
3367      // if difference between slides is more than 1
3368
3369
3370      if (Math.abs(currDiff) > 1) {
3371        this.updateCurrItem();
3372      }
3373    }
3374
3375    return Boolean(diff);
3376  }
3377  /**
3378   * X position of the main scroll for the current slide
3379   * (ignores position during dragging)
3380   * @returns {number}
3381   */
3382
3383
3384  getCurrSlideX() {
3385    return this.slideWidth * this._currPositionIndex;
3386  }
3387  /**
3388   * Whether scroll position is shifted.
3389   * For example, it will return true if the scroll is being dragged or animated.
3390   * @returns {boolean}
3391   */
3392
3393
3394  isShifted() {
3395    return this.x !== this.getCurrSlideX();
3396  }
3397  /**
3398   * Update slides X positions and set their content
3399   */
3400
3401
3402  updateCurrItem() {
3403    var _this$itemHolders$;
3404
3405    const {
3406      pswp
3407    } = this;
3408    const positionDifference = this._prevPositionIndex - this._currPositionIndex;
3409
3410    if (!positionDifference) {
3411      return;
3412    }
3413
3414    this._prevPositionIndex = this._currPositionIndex;
3415    pswp.currIndex = pswp.potentialIndex;
3416    let diffAbs = Math.abs(positionDifference);
3417    /** @type {ItemHolder | undefined} */
3418
3419    let tempHolder;
3420
3421    if (diffAbs >= 3) {
3422      this._containerShiftIndex += positionDifference + (positionDifference > 0 ? -3 : 3);
3423      diffAbs = 3; // If slides are changed by 3 screens or more - clean up previous slides
3424
3425      this.itemHolders.forEach(itemHolder => {
3426        var _itemHolder$slide;
3427
3428        (_itemHolder$slide = itemHolder.slide) === null || _itemHolder$slide === void 0 || _itemHolder$slide.destroy();
3429        itemHolder.slide = undefined;
3430      });
3431    }
3432
3433    for (let i = 0; i < diffAbs; i++) {
3434      if (positionDifference > 0) {
3435        tempHolder = this.itemHolders.shift();
3436
3437        if (tempHolder) {
3438          this.itemHolders[2] = tempHolder; // move first to last
3439
3440          this._containerShiftIndex++;
3441          setTransform(tempHolder.el, (this._containerShiftIndex + 2) * this.slideWidth);
3442          pswp.setContent(tempHolder, pswp.currIndex - diffAbs + i + 2);
3443        }
3444      } else {
3445        tempHolder = this.itemHolders.pop();
3446
3447        if (tempHolder) {
3448          this.itemHolders.unshift(tempHolder); // move last to first
3449
3450          this._containerShiftIndex--;
3451          setTransform(tempHolder.el, this._containerShiftIndex * this.slideWidth);
3452          pswp.setContent(tempHolder, pswp.currIndex + diffAbs - i - 2);
3453        }
3454      }
3455    } // Reset transfrom every 50ish navigations in one direction.
3456    //
3457    // Otherwise transform will keep growing indefinitely,
3458    // which might cause issues as browsers have a maximum transform limit.
3459    // I wasn't able to reach it, but just to be safe.
3460    // This should not cause noticable lag.
3461
3462
3463    if (Math.abs(this._containerShiftIndex) > 50 && !this.isShifted()) {
3464      this.resetPosition();
3465      this.resize();
3466    } // Pan transition might be running (and consntantly updating pan position)
3467
3468
3469    pswp.animations.stopAllPan();
3470    this.itemHolders.forEach((itemHolder, i) => {
3471      if (itemHolder.slide) {
3472        // Slide in the 2nd holder is always active
3473        itemHolder.slide.setIsActive(i === 1);
3474      }
3475    });
3476    pswp.currSlide = (_this$itemHolders$ = this.itemHolders[1]) === null || _this$itemHolders$ === void 0 ? void 0 : _this$itemHolders$.slide;
3477    pswp.contentLoader.updateLazy(positionDifference);
3478
3479    if (pswp.currSlide) {
3480      pswp.currSlide.applyCurrentZoomPan();
3481    }
3482
3483    pswp.dispatch('change');
3484  }
3485  /**
3486   * Move the X position of the main scroll container
3487   *
3488   * @param {number} x
3489   * @param {boolean} [dragging]
3490   */
3491
3492
3493  moveTo(x, dragging) {
3494    if (!this.pswp.canLoop() && dragging) {
3495      // Apply friction
3496      let newSlideIndexOffset = (this.slideWidth * this._currPositionIndex - x) / this.slideWidth;
3497      newSlideIndexOffset += this.pswp.currIndex;
3498      const delta = Math.round(x - this.x);
3499
3500      if (newSlideIndexOffset < 0 && delta > 0 || newSlideIndexOffset >= this.pswp.getNumItems() - 1 && delta < 0) {
3501        x = this.x + delta * MAIN_SCROLL_END_FRICTION;
3502      }
3503    }
3504
3505    this.x = x;
3506
3507    if (this.pswp.container) {
3508      setTransform(this.pswp.container, x);
3509    }
3510
3511    this.pswp.dispatch('moveMainScroll', {
3512      x,
3513      dragging: dragging !== null && dragging !== void 0 ? dragging : false
3514    });
3515  }
3516
3517}
3518
3519/** @typedef {import('./photoswipe.js').default} PhotoSwipe */
3520
3521/**
3522 * @template T
3523 * @typedef {import('./types.js').Methods<T>} Methods<T>
3524 */
3525
3526const KeyboardKeyCodesMap = {
3527  Escape: 27,
3528  z: 90,
3529  ArrowLeft: 37,
3530  ArrowUp: 38,
3531  ArrowRight: 39,
3532  ArrowDown: 40,
3533  Tab: 9
3534};
3535/**
3536 * @template {keyof KeyboardKeyCodesMap} T
3537 * @param {T} key
3538 * @param {boolean} isKeySupported
3539 * @returns {T | number | undefined}
3540 */
3541
3542const getKeyboardEventKey = (key, isKeySupported) => {
3543  return isKeySupported ? key : KeyboardKeyCodesMap[key];
3544};
3545/**
3546 * - Manages keyboard shortcuts.
3547 * - Helps trap focus within photoswipe.
3548 */
3549
3550
3551class Keyboard {
3552  /**
3553   * @param {PhotoSwipe} pswp
3554   */
3555  constructor(pswp) {
3556    this.pswp = pswp;
3557    /** @private */
3558
3559    this._wasFocused = false;
3560    pswp.on('bindEvents', () => {
3561      if (pswp.options.trapFocus) {
3562        // Dialog was likely opened by keyboard if initial point is not defined
3563        if (!pswp.options.initialPointerPos) {
3564          // focus causes layout,
3565          // which causes lag during the animation,
3566          // that's why we delay it until the opener transition ends
3567          this._focusRoot();
3568        }
3569
3570        pswp.events.add(document, 'focusin',
3571        /** @type EventListener */
3572        this._onFocusIn.bind(this));
3573      }
3574
3575      pswp.events.add(document, 'keydown',
3576      /** @type EventListener */
3577      this._onKeyDown.bind(this));
3578    });
3579    const lastActiveElement =
3580    /** @type {HTMLElement} */
3581    document.activeElement;
3582    pswp.on('destroy', () => {
3583      if (pswp.options.returnFocus && lastActiveElement && this._wasFocused) {
3584        lastActiveElement.focus();
3585      }
3586    });
3587  }
3588  /** @private */
3589
3590
3591  _focusRoot() {
3592    if (!this._wasFocused && this.pswp.element) {
3593      this.pswp.element.focus();
3594      this._wasFocused = true;
3595    }
3596  }
3597  /**
3598   * @private
3599   * @param {KeyboardEvent} e
3600   */
3601
3602
3603  _onKeyDown(e) {
3604    const {
3605      pswp
3606    } = this;
3607
3608    if (pswp.dispatch('keydown', {
3609      originalEvent: e
3610    }).defaultPrevented) {
3611      return;
3612    }
3613
3614    if (specialKeyUsed(e)) {
3615      // don't do anything if special key pressed
3616      // to prevent from overriding default browser actions
3617      // for example, in Chrome on Mac cmd+arrow-left returns to previous page
3618      return;
3619    }
3620    /** @type {Methods<PhotoSwipe> | undefined} */
3621
3622
3623    let keydownAction;
3624    /** @type {'x' | 'y' | undefined} */
3625
3626    let axis;
3627    let isForward = false;
3628    const isKeySupported = ('key' in e);
3629
3630    switch (isKeySupported ? e.key : e.keyCode) {
3631      case getKeyboardEventKey('Escape', isKeySupported):
3632        if (pswp.options.escKey) {
3633          keydownAction = 'close';
3634        }
3635
3636        break;
3637
3638      case getKeyboardEventKey('z', isKeySupported):
3639        keydownAction = 'toggleZoom';
3640        break;
3641
3642      case getKeyboardEventKey('ArrowLeft', isKeySupported):
3643        axis = 'x';
3644        break;
3645
3646      case getKeyboardEventKey('ArrowUp', isKeySupported):
3647        axis = 'y';
3648        break;
3649
3650      case getKeyboardEventKey('ArrowRight', isKeySupported):
3651        axis = 'x';
3652        isForward = true;
3653        break;
3654
3655      case getKeyboardEventKey('ArrowDown', isKeySupported):
3656        isForward = true;
3657        axis = 'y';
3658        break;
3659
3660      case getKeyboardEventKey('Tab', isKeySupported):
3661        this._focusRoot();
3662
3663        break;
3664    } // if left/right/top/bottom key
3665
3666
3667    if (axis) {
3668      // prevent page scroll
3669      e.preventDefault();
3670      const {
3671        currSlide
3672      } = pswp;
3673
3674      if (pswp.options.arrowKeys && axis === 'x' && pswp.getNumItems() > 1) {
3675        keydownAction = isForward ? 'next' : 'prev';
3676      } else if (currSlide && currSlide.currZoomLevel > currSlide.zoomLevels.fit) {
3677        // up/down arrow keys pan the image vertically
3678        // left/right arrow keys pan horizontally.
3679        // Unless there is only one image,
3680        // or arrowKeys option is disabled
3681        currSlide.pan[axis] += isForward ? -80 : 80;
3682        currSlide.panTo(currSlide.pan.x, currSlide.pan.y);
3683      }
3684    }
3685
3686    if (keydownAction) {
3687      e.preventDefault(); // @ts-ignore
3688
3689      pswp[keydownAction]();
3690    }
3691  }
3692  /**
3693   * Trap focus inside photoswipe
3694   *
3695   * @private
3696   * @param {FocusEvent} e
3697   */
3698
3699
3700  _onFocusIn(e) {
3701    const {
3702      template
3703    } = this.pswp;
3704
3705    if (template && document !== e.target && template !== e.target && !template.contains(
3706    /** @type {Node} */
3707    e.target)) {
3708      // focus root element
3709      template.focus();
3710    }
3711  }
3712
3713}
3714
3715const DEFAULT_EASING = 'cubic-bezier(.4,0,.22,1)';
3716/** @typedef {import('./animations.js').SharedAnimationProps} SharedAnimationProps */
3717
3718/** @typedef {Object} DefaultCssAnimationProps
3719 *
3720 * @prop {HTMLElement} target
3721 * @prop {number} [duration]
3722 * @prop {string} [easing]
3723 * @prop {string} [transform]
3724 * @prop {string} [opacity]
3725 * */
3726
3727/** @typedef {SharedAnimationProps & DefaultCssAnimationProps} CssAnimationProps */
3728
3729/**
3730 * Runs CSS transition.
3731 */
3732
3733class CSSAnimation {
3734  /**
3735   * onComplete can be unpredictable, be careful about current state
3736   *
3737   * @param {CssAnimationProps} props
3738   */
3739  constructor(props) {
3740    var _props$prop;
3741
3742    this.props = props;
3743    const {
3744      target,
3745      onComplete,
3746      transform,
3747      onFinish = () => {},
3748      duration = 333,
3749      easing = DEFAULT_EASING
3750    } = props;
3751    this.onFinish = onFinish; // support only transform and opacity
3752
3753    const prop = transform ? 'transform' : 'opacity';
3754    const propValue = (_props$prop = props[prop]) !== null && _props$prop !== void 0 ? _props$prop : '';
3755    /** @private */
3756
3757    this._target = target;
3758    /** @private */
3759
3760    this._onComplete = onComplete;
3761    /** @private */
3762
3763    this._finished = false;
3764    /** @private */
3765
3766    this._onTransitionEnd = this._onTransitionEnd.bind(this); // Using timeout hack to make sure that animation
3767    // starts even if the animated property was changed recently,
3768    // otherwise transitionend might not fire or transition won't start.
3769    // https://drafts.csswg.org/css-transitions/#starting
3770    //
3771    // ¯\_(ツ)_/¯
3772
3773    /** @private */
3774
3775    this._helperTimeout = setTimeout(() => {
3776      setTransitionStyle(target, prop, duration, easing);
3777      this._helperTimeout = setTimeout(() => {
3778        target.addEventListener('transitionend', this._onTransitionEnd, false);
3779        target.addEventListener('transitioncancel', this._onTransitionEnd, false); // Safari occasionally does not emit transitionend event
3780        // if element property was modified during the transition,
3781        // which may be caused by resize or third party component,
3782        // using timeout as a safety fallback
3783
3784        this._helperTimeout = setTimeout(() => {
3785          this._finalizeAnimation();
3786        }, duration + 500);
3787        target.style[prop] = propValue;
3788      }, 30); // Do not reduce this number
3789    }, 0);
3790  }
3791  /**
3792   * @private
3793   * @param {TransitionEvent} e
3794   */
3795
3796
3797  _onTransitionEnd(e) {
3798    if (e.target === this._target) {
3799      this._finalizeAnimation();
3800    }
3801  }
3802  /**
3803   * @private
3804   */
3805
3806
3807  _finalizeAnimation() {
3808    if (!this._finished) {
3809      this._finished = true;
3810      this.onFinish();
3811
3812      if (this._onComplete) {
3813        this._onComplete();
3814      }
3815    }
3816  } // Destroy is called automatically onFinish
3817
3818
3819  destroy() {
3820    if (this._helperTimeout) {
3821      clearTimeout(this._helperTimeout);
3822    }
3823
3824    removeTransitionStyle(this._target);
3825
3826    this._target.removeEventListener('transitionend', this._onTransitionEnd, false);
3827
3828    this._target.removeEventListener('transitioncancel', this._onTransitionEnd, false);
3829
3830    if (!this._finished) {
3831      this._finalizeAnimation();
3832    }
3833  }
3834
3835}
3836
3837const DEFAULT_NATURAL_FREQUENCY = 12;
3838const DEFAULT_DAMPING_RATIO = 0.75;
3839/**
3840 * Spring easing helper
3841 */
3842
3843class SpringEaser {
3844  /**
3845   * @param {number} initialVelocity Initial velocity, px per ms.
3846   *
3847   * @param {number} [dampingRatio]
3848   * Determines how bouncy animation will be.
3849   * From 0 to 1, 0 - always overshoot, 1 - do not overshoot.
3850   * "overshoot" refers to part of animation that
3851   * goes beyond the final value.
3852   *
3853   * @param {number} [naturalFrequency]
3854   * Determines how fast animation will slow down.
3855   * The higher value - the stiffer the transition will be,
3856   * and the faster it will slow down.
3857   * Recommended value from 10 to 50
3858   */
3859  constructor(initialVelocity, dampingRatio, naturalFrequency) {
3860    this.velocity = initialVelocity * 1000; // convert to "pixels per second"
3861    // https://en.wikipedia.org/wiki/Damping_ratio
3862
3863    this._dampingRatio = dampingRatio || DEFAULT_DAMPING_RATIO; // https://en.wikipedia.org/wiki/Natural_frequency
3864
3865    this._naturalFrequency = naturalFrequency || DEFAULT_NATURAL_FREQUENCY;
3866    this._dampedFrequency = this._naturalFrequency;
3867
3868    if (this._dampingRatio < 1) {
3869      this._dampedFrequency *= Math.sqrt(1 - this._dampingRatio * this._dampingRatio);
3870    }
3871  }
3872  /**
3873   * @param {number} deltaPosition Difference between current and end position of the animation
3874   * @param {number} deltaTime Frame duration in milliseconds
3875   *
3876   * @returns {number} Displacement, relative to the end position.
3877   */
3878
3879
3880  easeFrame(deltaPosition, deltaTime) {
3881    // Inspired by Apple Webkit and Android spring function implementation
3882    // https://en.wikipedia.org/wiki/Oscillation
3883    // https://en.wikipedia.org/wiki/Damping_ratio
3884    // we ignore mass (assume that it's 1kg)
3885    let displacement = 0;
3886    let coeff;
3887    deltaTime /= 1000;
3888    const naturalDumpingPow = Math.E ** (-this._dampingRatio * this._naturalFrequency * deltaTime);
3889
3890    if (this._dampingRatio === 1) {
3891      coeff = this.velocity + this._naturalFrequency * deltaPosition;
3892      displacement = (deltaPosition + coeff * deltaTime) * naturalDumpingPow;
3893      this.velocity = displacement * -this._naturalFrequency + coeff * naturalDumpingPow;
3894    } else if (this._dampingRatio < 1) {
3895      coeff = 1 / this._dampedFrequency * (this._dampingRatio * this._naturalFrequency * deltaPosition + this.velocity);
3896      const dumpedFCos = Math.cos(this._dampedFrequency * deltaTime);
3897      const dumpedFSin = Math.sin(this._dampedFrequency * deltaTime);
3898      displacement = naturalDumpingPow * (deltaPosition * dumpedFCos + coeff * dumpedFSin);
3899      this.velocity = displacement * -this._naturalFrequency * this._dampingRatio + naturalDumpingPow * (-this._dampedFrequency * deltaPosition * dumpedFSin + this._dampedFrequency * coeff * dumpedFCos);
3900    } // Overdamped (>1) damping ratio is not supported
3901
3902
3903    return displacement;
3904  }
3905
3906}
3907
3908/** @typedef {import('./animations.js').SharedAnimationProps} SharedAnimationProps */
3909
3910/**
3911 * @typedef {Object} DefaultSpringAnimationProps
3912 *
3913 * @prop {number} start
3914 * @prop {number} end
3915 * @prop {number} velocity
3916 * @prop {number} [dampingRatio]
3917 * @prop {number} [naturalFrequency]
3918 * @prop {(end: number) => void} onUpdate
3919 */
3920
3921/** @typedef {SharedAnimationProps & DefaultSpringAnimationProps} SpringAnimationProps */
3922
3923class SpringAnimation {
3924  /**
3925   * @param {SpringAnimationProps} props
3926   */
3927  constructor(props) {
3928    this.props = props;
3929    this._raf = 0;
3930    const {
3931      start,
3932      end,
3933      velocity,
3934      onUpdate,
3935      onComplete,
3936      onFinish = () => {},
3937      dampingRatio,
3938      naturalFrequency
3939    } = props;
3940    this.onFinish = onFinish;
3941    const easer = new SpringEaser(velocity, dampingRatio, naturalFrequency);
3942    let prevTime = Date.now();
3943    let deltaPosition = start - end;
3944
3945    const animationLoop = () => {
3946      if (this._raf) {
3947        deltaPosition = easer.easeFrame(deltaPosition, Date.now() - prevTime); // Stop the animation if velocity is low and position is close to end
3948
3949        if (Math.abs(deltaPosition) < 1 && Math.abs(easer.velocity) < 50) {
3950          // Finalize the animation
3951          onUpdate(end);
3952
3953          if (onComplete) {
3954            onComplete();
3955          }
3956
3957          this.onFinish();
3958        } else {
3959          prevTime = Date.now();
3960          onUpdate(deltaPosition + end);
3961          this._raf = requestAnimationFrame(animationLoop);
3962        }
3963      }
3964    };
3965
3966    this._raf = requestAnimationFrame(animationLoop);
3967  } // Destroy is called automatically onFinish
3968
3969
3970  destroy() {
3971    if (this._raf >= 0) {
3972      cancelAnimationFrame(this._raf);
3973    }
3974
3975    this._raf = 0;
3976  }
3977
3978}
3979
3980/** @typedef {import('./css-animation.js').CssAnimationProps} CssAnimationProps */
3981
3982/** @typedef {import('./spring-animation.js').SpringAnimationProps} SpringAnimationProps */
3983
3984/** @typedef {Object} SharedAnimationProps
3985 * @prop {string} [name]
3986 * @prop {boolean} [isPan]
3987 * @prop {boolean} [isMainScroll]
3988 * @prop {VoidFunction} [onComplete]
3989 * @prop {VoidFunction} [onFinish]
3990 */
3991
3992/** @typedef {SpringAnimation | CSSAnimation} Animation */
3993
3994/** @typedef {SpringAnimationProps | CssAnimationProps} AnimationProps */
3995
3996/**
3997 * Manages animations
3998 */
3999
4000class Animations {
4001  constructor() {
4002    /** @type {Animation[]} */
4003    this.activeAnimations = [];
4004  }
4005  /**
4006   * @param {SpringAnimationProps} props
4007   */
4008
4009
4010  startSpring(props) {
4011    this._start(props, true);
4012  }
4013  /**
4014   * @param {CssAnimationProps} props
4015   */
4016
4017
4018  startTransition(props) {
4019    this._start(props);
4020  }
4021  /**
4022   * @private
4023   * @param {AnimationProps} props
4024   * @param {boolean} [isSpring]
4025   * @returns {Animation}
4026   */
4027
4028
4029  _start(props, isSpring) {
4030    const animation = isSpring ? new SpringAnimation(
4031    /** @type SpringAnimationProps */
4032    props) : new CSSAnimation(
4033    /** @type CssAnimationProps */
4034    props);
4035    this.activeAnimations.push(animation);
4036
4037    animation.onFinish = () => this.stop(animation);
4038
4039    return animation;
4040  }
4041  /**
4042   * @param {Animation} animation
4043   */
4044
4045
4046  stop(animation) {
4047    animation.destroy();
4048    const index = this.activeAnimations.indexOf(animation);
4049
4050    if (index > -1) {
4051      this.activeAnimations.splice(index, 1);
4052    }
4053  }
4054
4055  stopAll() {
4056    // _stopAllAnimations
4057    this.activeAnimations.forEach(animation => {
4058      animation.destroy();
4059    });
4060    this.activeAnimations = [];
4061  }
4062  /**
4063   * Stop all pan or zoom transitions
4064   */
4065
4066
4067  stopAllPan() {
4068    this.activeAnimations = this.activeAnimations.filter(animation => {
4069      if (animation.props.isPan) {
4070        animation.destroy();
4071        return false;
4072      }
4073
4074      return true;
4075    });
4076  }
4077
4078  stopMainScroll() {
4079    this.activeAnimations = this.activeAnimations.filter(animation => {
4080      if (animation.props.isMainScroll) {
4081        animation.destroy();
4082        return false;
4083      }
4084
4085      return true;
4086    });
4087  }
4088  /**
4089   * Returns true if main scroll transition is running
4090   */
4091  // isMainScrollRunning() {
4092  //   return this.activeAnimations.some((animation) => {
4093  //     return animation.props.isMainScroll;
4094  //   });
4095  // }
4096
4097  /**
4098   * Returns true if any pan or zoom transition is running
4099   */
4100
4101
4102  isPanRunning() {
4103    return this.activeAnimations.some(animation => {
4104      return animation.props.isPan;
4105    });
4106  }
4107
4108}
4109
4110/** @typedef {import('./photoswipe.js').default} PhotoSwipe */
4111
4112/**
4113 * Handles scroll wheel.
4114 * Can pan and zoom current slide image.
4115 */
4116class ScrollWheel {
4117  /**
4118   * @param {PhotoSwipe} pswp
4119   */
4120  constructor(pswp) {
4121    this.pswp = pswp;
4122    pswp.events.add(pswp.element, 'wheel',
4123    /** @type EventListener */
4124    this._onWheel.bind(this));
4125  }
4126  /**
4127   * @private
4128   * @param {WheelEvent} e
4129   */
4130
4131
4132  _onWheel(e) {
4133    e.preventDefault();
4134    const {
4135      currSlide
4136    } = this.pswp;
4137    let {
4138      deltaX,
4139      deltaY
4140    } = e;
4141
4142    if (!currSlide) {
4143      return;
4144    }
4145
4146    if (this.pswp.dispatch('wheel', {
4147      originalEvent: e
4148    }).defaultPrevented) {
4149      return;
4150    }
4151
4152    if (e.ctrlKey || this.pswp.options.wheelToZoom) {
4153      // zoom
4154      if (currSlide.isZoomable()) {
4155        let zoomFactor = -deltaY;
4156
4157        if (e.deltaMode === 1
4158        /* DOM_DELTA_LINE */
4159        ) {
4160          zoomFactor *= 0.05;
4161        } else {
4162          zoomFactor *= e.deltaMode ? 1 : 0.002;
4163        }
4164
4165        zoomFactor = 2 ** zoomFactor;
4166        const destZoomLevel = currSlide.currZoomLevel * zoomFactor;
4167        currSlide.zoomTo(destZoomLevel, {
4168          x: e.clientX,
4169          y: e.clientY
4170        });
4171      }
4172    } else {
4173      // pan
4174      if (currSlide.isPannable()) {
4175        if (e.deltaMode === 1
4176        /* DOM_DELTA_LINE */
4177        ) {
4178          // 18 - average line height
4179          deltaX *= 18;
4180          deltaY *= 18;
4181        }
4182
4183        currSlide.panTo(currSlide.pan.x - deltaX, currSlide.pan.y - deltaY);
4184      }
4185    }
4186  }
4187
4188}
4189
4190/** @typedef {import('../photoswipe.js').default} PhotoSwipe */
4191
4192/**
4193 * @template T
4194 * @typedef {import('../types.js').Methods<T>} Methods<T>
4195 */
4196
4197/**
4198 * @typedef {Object} UIElementMarkupProps
4199 * @prop {boolean} [isCustomSVG]
4200 * @prop {string} inner
4201 * @prop {string} [outlineID]
4202 * @prop {number | string} [size]
4203 */
4204
4205/**
4206 * @typedef {Object} UIElementData
4207 * @prop {DefaultUIElements | string} [name]
4208 * @prop {string} [className]
4209 * @prop {UIElementMarkup} [html]
4210 * @prop {boolean} [isButton]
4211 * @prop {keyof HTMLElementTagNameMap} [tagName]
4212 * @prop {string} [title]
4213 * @prop {string} [ariaLabel]
4214 * @prop {(element: HTMLElement, pswp: PhotoSwipe) => void} [onInit]
4215 * @prop {Methods<PhotoSwipe> | ((e: MouseEvent, element: HTMLElement, pswp: PhotoSwipe) => void)} [onClick]
4216 * @prop {'bar' | 'wrapper' | 'root'} [appendTo]
4217 * @prop {number} [order]
4218 */
4219
4220/** @typedef {'arrowPrev' | 'arrowNext' | 'close' | 'zoom' | 'counter'} DefaultUIElements */
4221
4222/** @typedef {string | UIElementMarkupProps} UIElementMarkup */
4223
4224/**
4225 * @param {UIElementMarkup} [htmlData]
4226 * @returns {string}
4227 */
4228
4229function addElementHTML(htmlData) {
4230  if (typeof htmlData === 'string') {
4231    // Allow developers to provide full svg,
4232    // For example:
4233    // <svg viewBox="0 0 32 32" width="32" height="32" aria-hidden="true" class="pswp__icn">
4234    //   <path d="..." />
4235    //   <circle ... />
4236    // </svg>
4237    // Can also be any HTML string.
4238    return htmlData;
4239  }
4240
4241  if (!htmlData || !htmlData.isCustomSVG) {
4242    return '';
4243  }
4244
4245  const svgData = htmlData;
4246  let out = '<svg aria-hidden="true" class="pswp__icn" viewBox="0 0 %d %d" width="%d" height="%d">'; // replace all %d with size
4247
4248  out = out.split('%d').join(
4249  /** @type {string} */
4250  svgData.size || 32); // Icons may contain outline/shadow,
4251  // to make it we "clone" base icon shape and add border to it.
4252  // Icon itself and border are styled via CSS.
4253  //
4254  // Property shadowID defines ID of element that should be cloned.
4255
4256  if (svgData.outlineID) {
4257    out += '<use class="pswp__icn-shadow" xlink:href="#' + svgData.outlineID + '"/>';
4258  }
4259
4260  out += svgData.inner;
4261  out += '</svg>';
4262  return out;
4263}
4264
4265class UIElement {
4266  /**
4267   * @param {PhotoSwipe} pswp
4268   * @param {UIElementData} data
4269   */
4270  constructor(pswp, data) {
4271    var _container;
4272
4273    const name = data.name || data.className;
4274    let elementHTML = data.html; // @ts-expect-error lookup only by `data.name` maybe?
4275
4276    if (pswp.options[name] === false) {
4277      // exit if element is disabled from options
4278      return;
4279    } // Allow to override SVG icons from options
4280    // @ts-expect-error lookup only by `data.name` maybe?
4281
4282
4283    if (typeof pswp.options[name + 'SVG'] === 'string') {
4284      // arrowPrevSVG
4285      // arrowNextSVG
4286      // closeSVG
4287      // zoomSVG
4288      // @ts-expect-error lookup only by `data.name` maybe?
4289      elementHTML = pswp.options[name + 'SVG'];
4290    }
4291
4292    pswp.dispatch('uiElementCreate', {
4293      data
4294    });
4295    let className = '';
4296
4297    if (data.isButton) {
4298      className += 'pswp__button ';
4299      className += data.className || `pswp__button--${data.name}`;
4300    } else {
4301      className += data.className || `pswp__${data.name}`;
4302    }
4303
4304    let tagName = data.isButton ? data.tagName || 'button' : data.tagName || 'div';
4305    tagName =
4306    /** @type {keyof HTMLElementTagNameMap} */
4307    tagName.toLowerCase();
4308    /** @type {HTMLElement} */
4309
4310    const element = createElement(className, tagName);
4311
4312    if (data.isButton) {
4313      if (tagName === 'button') {
4314        /** @type {HTMLButtonElement} */
4315        element.type = 'button';
4316      }
4317
4318      let {
4319        title
4320      } = data;
4321      const {
4322        ariaLabel
4323      } = data; // @ts-expect-error lookup only by `data.name` maybe?
4324
4325      if (typeof pswp.options[name + 'Title'] === 'string') {
4326        // @ts-expect-error lookup only by `data.name` maybe?
4327        title = pswp.options[name + 'Title'];
4328      }
4329
4330      if (title) {
4331        element.title = title;
4332      }
4333
4334      const ariaText = ariaLabel || title;
4335
4336      if (ariaText) {
4337        element.setAttribute('aria-label', ariaText);
4338      }
4339    }
4340
4341    element.innerHTML = addElementHTML(elementHTML);
4342
4343    if (data.onInit) {
4344      data.onInit(element, pswp);
4345    }
4346
4347    if (data.onClick) {
4348      element.onclick = e => {
4349        if (typeof data.onClick === 'string') {
4350          // @ts-ignore
4351          pswp[data.onClick]();
4352        } else if (typeof data.onClick === 'function') {
4353          data.onClick(e, element, pswp);
4354        }
4355      };
4356    } // Top bar is default position
4357
4358
4359    const appendTo = data.appendTo || 'bar';
4360    /** @type {HTMLElement | undefined} root element by default */
4361
4362    let container = pswp.element;
4363
4364    if (appendTo === 'bar') {
4365      if (!pswp.topBar) {
4366        pswp.topBar = createElement('pswp__top-bar pswp__hide-on-close', 'div', pswp.scrollWrap);
4367      }
4368
4369      container = pswp.topBar;
4370    } else {
4371      // element outside of top bar gets a secondary class
4372      // that makes element fade out on close
4373      element.classList.add('pswp__hide-on-close');
4374
4375      if (appendTo === 'wrapper') {
4376        container = pswp.scrollWrap;
4377      }
4378    }
4379
4380    (_container = container) === null || _container === void 0 || _container.appendChild(pswp.applyFilters('uiElement', element, data));
4381  }
4382
4383}
4384
4385/*
4386  Backward and forward arrow buttons
4387 */
4388
4389/** @typedef {import('./ui-element.js').UIElementData} UIElementData */
4390
4391/** @typedef {import('../photoswipe.js').default} PhotoSwipe */
4392
4393/**
4394 *
4395 * @param {HTMLElement} element
4396 * @param {PhotoSwipe} pswp
4397 * @param {boolean} [isNextButton]
4398 */
4399function initArrowButton(element, pswp, isNextButton) {
4400  element.classList.add('pswp__button--arrow'); // TODO: this should point to a unique id for this instance
4401
4402  element.setAttribute('aria-controls', 'pswp__items');
4403  pswp.on('change', () => {
4404    if (!pswp.options.loop) {
4405      if (isNextButton) {
4406        /** @type {HTMLButtonElement} */
4407        element.disabled = !(pswp.currIndex < pswp.getNumItems() - 1);
4408      } else {
4409        /** @type {HTMLButtonElement} */
4410        element.disabled = !(pswp.currIndex > 0);
4411      }
4412    }
4413  });
4414}
4415/** @type {UIElementData} */
4416
4417
4418const arrowPrev = {
4419  name: 'arrowPrev',
4420  className: 'pswp__button--arrow--prev',
4421  title: 'Previous',
4422  order: 10,
4423  isButton: true,
4424  appendTo: 'wrapper',
4425  html: {
4426    isCustomSVG: true,
4427    size: 60,
4428    inner: '<path d="M29 43l-3 3-16-16 16-16 3 3-13 13 13 13z" id="pswp__icn-arrow"/>',
4429    outlineID: 'pswp__icn-arrow'
4430  },
4431  onClick: 'prev',
4432  onInit: initArrowButton
4433};
4434/** @type {UIElementData} */
4435
4436const arrowNext = {
4437  name: 'arrowNext',
4438  className: 'pswp__button--arrow--next',
4439  title: 'Next',
4440  order: 11,
4441  isButton: true,
4442  appendTo: 'wrapper',
4443  html: {
4444    isCustomSVG: true,
4445    size: 60,
4446    inner: '<use xlink:href="#pswp__icn-arrow"/>',
4447    outlineID: 'pswp__icn-arrow'
4448  },
4449  onClick: 'next',
4450  onInit: (el, pswp) => {
4451    initArrowButton(el, pswp, true);
4452  }
4453};
4454
4455/** @type {import('./ui-element.js').UIElementData} UIElementData */
4456const closeButton = {
4457  name: 'close',
4458  title: 'Close',
4459  order: 20,
4460  isButton: true,
4461  html: {
4462    isCustomSVG: true,
4463    inner: '<path d="M24 10l-2-2-6 6-6-6-2 2 6 6-6 6 2 2 6-6 6 6 2-2-6-6z" id="pswp__icn-close"/>',
4464    outlineID: 'pswp__icn-close'
4465  },
4466  onClick: 'close'
4467};
4468
4469/** @type {import('./ui-element.js').UIElementData} UIElementData */
4470const zoomButton = {
4471  name: 'zoom',
4472  title: 'Zoom',
4473  order: 10,
4474  isButton: true,
4475  html: {
4476    isCustomSVG: true,
4477    // eslint-disable-next-line max-len
4478    inner: '<path d="M17.426 19.926a6 6 0 1 1 1.5-1.5L23 22.5 21.5 24l-4.074-4.074z" id="pswp__icn-zoom"/>' + '<path fill="currentColor" class="pswp__zoom-icn-bar-h" d="M11 16v-2h6v2z"/>' + '<path fill="currentColor" class="pswp__zoom-icn-bar-v" d="M13 12h2v6h-2z"/>',
4479    outlineID: 'pswp__icn-zoom'
4480  },
4481  onClick: 'toggleZoom'
4482};
4483
4484/** @type {import('./ui-element.js').UIElementData} UIElementData */
4485const loadingIndicator = {
4486  name: 'preloader',
4487  appendTo: 'bar',
4488  order: 7,
4489  html: {
4490    isCustomSVG: true,
4491    // eslint-disable-next-line max-len
4492    inner: '<path fill-rule="evenodd" clip-rule="evenodd" d="M21.2 16a5.2 5.2 0 1 1-5.2-5.2V8a8 8 0 1 0 8 8h-2.8Z" id="pswp__icn-loading"/>',
4493    outlineID: 'pswp__icn-loading'
4494  },
4495  onInit: (indicatorElement, pswp) => {
4496    /** @type {boolean | undefined} */
4497    let isVisible;
4498    /** @type {NodeJS.Timeout | null} */
4499
4500    let delayTimeout = null;
4501    /**
4502     * @param {string} className
4503     * @param {boolean} add
4504     */
4505
4506    const toggleIndicatorClass = (className, add) => {
4507      indicatorElement.classList.toggle('pswp__preloader--' + className, add);
4508    };
4509    /**
4510     * @param {boolean} visible
4511     */
4512
4513
4514    const setIndicatorVisibility = visible => {
4515      if (isVisible !== visible) {
4516        isVisible = visible;
4517        toggleIndicatorClass('active', visible);
4518      }
4519    };
4520
4521    const updatePreloaderVisibility = () => {
4522      var _pswp$currSlide;
4523
4524      if (!((_pswp$currSlide = pswp.currSlide) !== null && _pswp$currSlide !== void 0 && _pswp$currSlide.content.isLoading())) {
4525        setIndicatorVisibility(false);
4526
4527        if (delayTimeout) {
4528          clearTimeout(delayTimeout);
4529          delayTimeout = null;
4530        }
4531
4532        return;
4533      }
4534
4535      if (!delayTimeout) {
4536        // display loading indicator with delay
4537        delayTimeout = setTimeout(() => {
4538          var _pswp$currSlide2;
4539
4540          setIndicatorVisibility(Boolean((_pswp$currSlide2 = pswp.currSlide) === null || _pswp$currSlide2 === void 0 ? void 0 : _pswp$currSlide2.content.isLoading()));
4541          delayTimeout = null;
4542        }, pswp.options.preloaderDelay);
4543      }
4544    };
4545
4546    pswp.on('change', updatePreloaderVisibility);
4547    pswp.on('loadComplete', e => {
4548      if (pswp.currSlide === e.slide) {
4549        updatePreloaderVisibility();
4550      }
4551    }); // expose the method
4552
4553    if (pswp.ui) {
4554      pswp.ui.updatePreloaderVisibility = updatePreloaderVisibility;
4555    }
4556  }
4557};
4558
4559/** @type {import('./ui-element.js').UIElementData} UIElementData */
4560const counterIndicator = {
4561  name: 'counter',
4562  order: 5,
4563  onInit: (counterElement, pswp) => {
4564    pswp.on('change', () => {
4565      counterElement.innerText = pswp.currIndex + 1 + pswp.options.indexIndicatorSep + pswp.getNumItems();
4566    });
4567  }
4568};
4569
4570/** @typedef {import('../photoswipe.js').default} PhotoSwipe */
4571
4572/** @typedef {import('./ui-element.js').UIElementData} UIElementData */
4573
4574/**
4575 * Set special class on element when image is zoomed.
4576 *
4577 * By default, it is used to adjust
4578 * zoom icon and zoom cursor via CSS.
4579 *
4580 * @param {HTMLElement} el
4581 * @param {boolean} isZoomedIn
4582 */
4583
4584function setZoomedIn(el, isZoomedIn) {
4585  el.classList.toggle('pswp--zoomed-in', isZoomedIn);
4586}
4587
4588class UI {
4589  /**
4590   * @param {PhotoSwipe} pswp
4591   */
4592  constructor(pswp) {
4593    this.pswp = pswp;
4594    this.isRegistered = false;
4595    /** @type {UIElementData[]} */
4596
4597    this.uiElementsData = [];
4598    /** @type {(UIElement | UIElementData)[]} */
4599
4600    this.items = [];
4601    /** @type {() => void} */
4602
4603    this.updatePreloaderVisibility = () => {};
4604    /**
4605     * @private
4606     * @type {number | undefined}
4607     */
4608
4609
4610    this._lastUpdatedZoomLevel = undefined;
4611  }
4612
4613  init() {
4614    const {
4615      pswp
4616    } = this;
4617    this.isRegistered = false;
4618    this.uiElementsData = [closeButton, arrowPrev, arrowNext, zoomButton, loadingIndicator, counterIndicator];
4619    pswp.dispatch('uiRegister'); // sort by order
4620
4621    this.uiElementsData.sort((a, b) => {
4622      // default order is 0
4623      return (a.order || 0) - (b.order || 0);
4624    });
4625    this.items = [];
4626    this.isRegistered = true;
4627    this.uiElementsData.forEach(uiElementData => {
4628      this.registerElement(uiElementData);
4629    });
4630    pswp.on('change', () => {
4631      var _pswp$element;
4632
4633      (_pswp$element = pswp.element) === null || _pswp$element === void 0 || _pswp$element.classList.toggle('pswp--one-slide', pswp.getNumItems() === 1);
4634    });
4635    pswp.on('zoomPanUpdate', () => this._onZoomPanUpdate());
4636  }
4637  /**
4638   * @param {UIElementData} elementData
4639   */
4640
4641
4642  registerElement(elementData) {
4643    if (this.isRegistered) {
4644      this.items.push(new UIElement(this.pswp, elementData));
4645    } else {
4646      this.uiElementsData.push(elementData);
4647    }
4648  }
4649  /**
4650   * Fired each time zoom or pan position is changed.
4651   * Update classes that control visibility of zoom button and cursor icon.
4652   *
4653   * @private
4654   */
4655
4656
4657  _onZoomPanUpdate() {
4658    const {
4659      template,
4660      currSlide,
4661      options
4662    } = this.pswp;
4663
4664    if (this.pswp.opener.isClosing || !template || !currSlide) {
4665      return;
4666    }
4667
4668    let {
4669      currZoomLevel
4670    } = currSlide; // if not open yet - check against initial zoom level
4671
4672    if (!this.pswp.opener.isOpen) {
4673      currZoomLevel = currSlide.zoomLevels.initial;
4674    }
4675
4676    if (currZoomLevel === this._lastUpdatedZoomLevel) {
4677      return;
4678    }
4679
4680    this._lastUpdatedZoomLevel = currZoomLevel;
4681    const currZoomLevelDiff = currSlide.zoomLevels.initial - currSlide.zoomLevels.secondary; // Initial and secondary zoom levels are almost equal
4682
4683    if (Math.abs(currZoomLevelDiff) < 0.01 || !currSlide.isZoomable()) {
4684      // disable zoom
4685      setZoomedIn(template, false);
4686      template.classList.remove('pswp--zoom-allowed');
4687      return;
4688    }
4689
4690    template.classList.add('pswp--zoom-allowed');
4691    const potentialZoomLevel = currZoomLevel === currSlide.zoomLevels.initial ? currSlide.zoomLevels.secondary : currSlide.zoomLevels.initial;
4692    setZoomedIn(template, potentialZoomLevel <= currZoomLevel);
4693
4694    if (options.imageClickAction === 'zoom' || options.imageClickAction === 'zoom-or-close') {
4695      template.classList.add('pswp--click-to-zoom');
4696    }
4697  }
4698
4699}
4700
4701/** @typedef {import('./slide.js').SlideData} SlideData */
4702
4703/** @typedef {import('../photoswipe.js').default} PhotoSwipe */
4704
4705/** @typedef {{ x: number; y: number; w: number; innerRect?: { w: number; h: number; x: number; y: number } }} Bounds */
4706
4707/**
4708 * @param {HTMLElement} el
4709 * @returns Bounds
4710 */
4711function getBoundsByElement(el) {
4712  const thumbAreaRect = el.getBoundingClientRect();
4713  return {
4714    x: thumbAreaRect.left,
4715    y: thumbAreaRect.top,
4716    w: thumbAreaRect.width
4717  };
4718}
4719/**
4720 * @param {HTMLElement} el
4721 * @param {number} imageWidth
4722 * @param {number} imageHeight
4723 * @returns Bounds
4724 */
4725
4726
4727function getCroppedBoundsByElement(el, imageWidth, imageHeight) {
4728  const thumbAreaRect = el.getBoundingClientRect(); // fill image into the area
4729  // (do they same as object-fit:cover does to retrieve coordinates)
4730
4731  const hRatio = thumbAreaRect.width / imageWidth;
4732  const vRatio = thumbAreaRect.height / imageHeight;
4733  const fillZoomLevel = hRatio > vRatio ? hRatio : vRatio;
4734  const offsetX = (thumbAreaRect.width - imageWidth * fillZoomLevel) / 2;
4735  const offsetY = (thumbAreaRect.height - imageHeight * fillZoomLevel) / 2;
4736  /**
4737   * Coordinates of the image,
4738   * as if it was not cropped,
4739   * height is calculated automatically
4740   *
4741   * @type {Bounds}
4742   */
4743
4744  const bounds = {
4745    x: thumbAreaRect.left + offsetX,
4746    y: thumbAreaRect.top + offsetY,
4747    w: imageWidth * fillZoomLevel
4748  }; // Coordinates of inner crop area
4749  // relative to the image
4750
4751  bounds.innerRect = {
4752    w: thumbAreaRect.width,
4753    h: thumbAreaRect.height,
4754    x: offsetX,
4755    y: offsetY
4756  };
4757  return bounds;
4758}
4759/**
4760 * Get dimensions of thumbnail image
4761 * (click on which opens photoswipe or closes photoswipe to)
4762 *
4763 * @param {number} index
4764 * @param {SlideData} itemData
4765 * @param {PhotoSwipe} instance PhotoSwipe instance
4766 * @returns {Bounds | undefined}
4767 */
4768
4769
4770function getThumbBounds(index, itemData, instance) {
4771  // legacy event, before filters were introduced
4772  const event = instance.dispatch('thumbBounds', {
4773    index,
4774    itemData,
4775    instance
4776  }); // @ts-expect-error
4777
4778  if (event.thumbBounds) {
4779    // @ts-expect-error
4780    return event.thumbBounds;
4781  }
4782
4783  const {
4784    element
4785  } = itemData;
4786  /** @type {Bounds | undefined} */
4787
4788  let thumbBounds;
4789  /** @type {HTMLElement | null | undefined} */
4790
4791  let thumbnail;
4792
4793  if (element && instance.options.thumbSelector !== false) {
4794    const thumbSelector = instance.options.thumbSelector || 'img';
4795    thumbnail = element.matches(thumbSelector) ? element :
4796    /** @type {HTMLElement | null} */
4797    element.querySelector(thumbSelector);
4798  }
4799
4800  thumbnail = instance.applyFilters('thumbEl', thumbnail, itemData, index);
4801
4802  if (thumbnail) {
4803    if (!itemData.thumbCropped) {
4804      thumbBounds = getBoundsByElement(thumbnail);
4805    } else {
4806      thumbBounds = getCroppedBoundsByElement(thumbnail, itemData.width || itemData.w || 0, itemData.height || itemData.h || 0);
4807    }
4808  }
4809
4810  return instance.applyFilters('thumbBounds', thumbBounds, itemData, index);
4811}
4812
4813/** @typedef {import('../lightbox/lightbox.js').default} PhotoSwipeLightbox */
4814
4815/** @typedef {import('../photoswipe.js').default} PhotoSwipe */
4816
4817/** @typedef {import('../photoswipe.js').PhotoSwipeOptions} PhotoSwipeOptions */
4818
4819/** @typedef {import('../photoswipe.js').DataSource} DataSource */
4820
4821/** @typedef {import('../ui/ui-element.js').UIElementData} UIElementData */
4822
4823/** @typedef {import('../slide/content.js').default} ContentDefault */
4824
4825/** @typedef {import('../slide/slide.js').default} Slide */
4826
4827/** @typedef {import('../slide/slide.js').SlideData} SlideData */
4828
4829/** @typedef {import('../slide/zoom-level.js').default} ZoomLevel */
4830
4831/** @typedef {import('../slide/get-thumb-bounds.js').Bounds} Bounds */
4832
4833/**
4834 * Allow adding an arbitrary props to the Content
4835 * https://photoswipe.com/custom-content/#using-webp-image-format
4836 * @typedef {ContentDefault & Record<string, any>} Content
4837 */
4838
4839/** @typedef {{ x?: number; y?: number }} Point */
4840
4841/**
4842 * @typedef {Object} PhotoSwipeEventsMap https://photoswipe.com/events/
4843 *
4844 *
4845 * https://photoswipe.com/adding-ui-elements/
4846 *
4847 * @prop {undefined} uiRegister
4848 * @prop {{ data: UIElementData }} uiElementCreate
4849 *
4850 *
4851 * https://photoswipe.com/events/#initialization-events
4852 *
4853 * @prop {undefined} beforeOpen
4854 * @prop {undefined} firstUpdate
4855 * @prop {undefined} initialLayout
4856 * @prop {undefined} change
4857 * @prop {undefined} afterInit
4858 * @prop {undefined} bindEvents
4859 *
4860 *
4861 * https://photoswipe.com/events/#opening-or-closing-transition-events
4862 *
4863 * @prop {undefined} openingAnimationStart
4864 * @prop {undefined} openingAnimationEnd
4865 * @prop {undefined} closingAnimationStart
4866 * @prop {undefined} closingAnimationEnd
4867 *
4868 *
4869 * https://photoswipe.com/events/#closing-events
4870 *
4871 * @prop {undefined} close
4872 * @prop {undefined} destroy
4873 *
4874 *
4875 * https://photoswipe.com/events/#pointer-and-gesture-events
4876 *
4877 * @prop {{ originalEvent: PointerEvent }} pointerDown
4878 * @prop {{ originalEvent: PointerEvent }} pointerMove
4879 * @prop {{ originalEvent: PointerEvent }} pointerUp
4880 * @prop {{ bgOpacity: number }} pinchClose can be default prevented
4881 * @prop {{ panY: number }} verticalDrag can be default prevented
4882 *
4883 *
4884 * https://photoswipe.com/events/#slide-content-events
4885 *
4886 * @prop {{ content: Content }} contentInit
4887 * @prop {{ content: Content; isLazy: boolean }} contentLoad can be default prevented
4888 * @prop {{ content: Content; isLazy: boolean }} contentLoadImage can be default prevented
4889 * @prop {{ content: Content; slide: Slide; isError?: boolean }} loadComplete
4890 * @prop {{ content: Content; slide: Slide }} loadError
4891 * @prop {{ content: Content; width: number; height: number }} contentResize can be default prevented
4892 * @prop {{ content: Content; width: number; height: number; slide: Slide }} imageSizeChange
4893 * @prop {{ content: Content }} contentLazyLoad can be default prevented
4894 * @prop {{ content: Content }} contentAppend can be default prevented
4895 * @prop {{ content: Content }} contentActivate can be default prevented
4896 * @prop {{ content: Content }} contentDeactivate can be default prevented
4897 * @prop {{ content: Content }} contentRemove can be default prevented
4898 * @prop {{ content: Content }} contentDestroy can be default prevented
4899 *
4900 *
4901 * undocumented
4902 *
4903 * @prop {{ point: Point; originalEvent: PointerEvent }} imageClickAction can be default prevented
4904 * @prop {{ point: Point; originalEvent: PointerEvent }} bgClickAction can be default prevented
4905 * @prop {{ point: Point; originalEvent: PointerEvent }} tapAction can be default prevented
4906 * @prop {{ point: Point; originalEvent: PointerEvent }} doubleTapAction can be default prevented
4907 *
4908 * @prop {{ originalEvent: KeyboardEvent }} keydown can be default prevented
4909 * @prop {{ x: number; dragging: boolean }} moveMainScroll
4910 * @prop {{ slide: Slide }} firstZoomPan
4911 * @prop {{ slide: Slide | undefined, data: SlideData, index: number }} gettingData
4912 * @prop {undefined} beforeResize
4913 * @prop {undefined} resize
4914 * @prop {undefined} viewportSize
4915 * @prop {undefined} updateScrollOffset
4916 * @prop {{ slide: Slide }} slideInit
4917 * @prop {{ slide: Slide }} afterSetContent
4918 * @prop {{ slide: Slide }} slideLoad
4919 * @prop {{ slide: Slide }} appendHeavy can be default prevented
4920 * @prop {{ slide: Slide }} appendHeavyContent
4921 * @prop {{ slide: Slide }} slideActivate
4922 * @prop {{ slide: Slide }} slideDeactivate
4923 * @prop {{ slide: Slide }} slideDestroy
4924 * @prop {{ destZoomLevel: number, centerPoint: Point | undefined, transitionDuration: number | false | undefined }} beforeZoomTo
4925 * @prop {{ slide: Slide }} zoomPanUpdate
4926 * @prop {{ slide: Slide }} initialZoomPan
4927 * @prop {{ slide: Slide }} calcSlideSize
4928 * @prop {undefined} resolutionChanged
4929 * @prop {{ originalEvent: WheelEvent }} wheel can be default prevented
4930 * @prop {{ content: Content }} contentAppendImage can be default prevented
4931 * @prop {{ index: number; itemData: SlideData }} lazyLoadSlide can be default prevented
4932 * @prop {undefined} lazyLoad
4933 * @prop {{ slide: Slide }} calcBounds
4934 * @prop {{ zoomLevels: ZoomLevel, slideData: SlideData }} zoomLevelsUpdate
4935 *
4936 *
4937 * legacy
4938 *
4939 * @prop {undefined} init
4940 * @prop {undefined} initialZoomIn
4941 * @prop {undefined} initialZoomOut
4942 * @prop {undefined} initialZoomInEnd
4943 * @prop {undefined} initialZoomOutEnd
4944 * @prop {{ dataSource: DataSource | undefined, numItems: number }} numItems
4945 * @prop {{ itemData: SlideData; index: number }} itemData
4946 * @prop {{ index: number, itemData: SlideData, instance: PhotoSwipe }} thumbBounds
4947 */
4948
4949/**
4950 * @typedef {Object} PhotoSwipeFiltersMap https://photoswipe.com/filters/
4951 *
4952 * @prop {(numItems: number, dataSource: DataSource | undefined) => number} numItems
4953 * Modify the total amount of slides. Example on Data sources page.
4954 * https://photoswipe.com/filters/#numitems
4955 *
4956 * @prop {(itemData: SlideData, index: number) => SlideData} itemData
4957 * Modify slide item data. Example on Data sources page.
4958 * https://photoswipe.com/filters/#itemdata
4959 *
4960 * @prop {(itemData: SlideData, element: HTMLElement, linkEl: HTMLAnchorElement) => SlideData} domItemData
4961 * Modify item data when it's parsed from DOM element. Example on Data sources page.
4962 * https://photoswipe.com/filters/#domitemdata
4963 *
4964 * @prop {(clickedIndex: number, e: MouseEvent, instance: PhotoSwipeLightbox) => number} clickedIndex
4965 * Modify clicked gallery item index.
4966 * https://photoswipe.com/filters/#clickedindex
4967 *
4968 * @prop {(placeholderSrc: string | false, content: Content) => string | false} placeholderSrc
4969 * Modify placeholder image source.
4970 * https://photoswipe.com/filters/#placeholdersrc
4971 *
4972 * @prop {(isContentLoading: boolean, content: Content) => boolean} isContentLoading
4973 * Modify if the content is currently loading.
4974 * https://photoswipe.com/filters/#iscontentloading
4975 *
4976 * @prop {(isContentZoomable: boolean, content: Content) => boolean} isContentZoomable
4977 * Modify if the content can be zoomed.
4978 * https://photoswipe.com/filters/#iscontentzoomable
4979 *
4980 * @prop {(useContentPlaceholder: boolean, content: Content) => boolean} useContentPlaceholder
4981 * Modify if the placeholder should be used for the content.
4982 * https://photoswipe.com/filters/#usecontentplaceholder
4983 *
4984 * @prop {(isKeepingPlaceholder: boolean, content: Content) => boolean} isKeepingPlaceholder
4985 * Modify if the placeholder should be kept after the content is loaded.
4986 * https://photoswipe.com/filters/#iskeepingplaceholder
4987 *
4988 *
4989 * @prop {(contentErrorElement: HTMLElement, content: Content) => HTMLElement} contentErrorElement
4990 * Modify an element when the content has error state (for example, if image cannot be loaded).
4991 * https://photoswipe.com/filters/#contenterrorelement
4992 *
4993 * @prop {(element: HTMLElement, data: UIElementData) => HTMLElement} uiElement
4994 * Modify a UI element that's being created.
4995 * https://photoswipe.com/filters/#uielement
4996 *
4997 * @prop {(thumbnail: HTMLElement | null | undefined, itemData: SlideData, index: number) => HTMLElement} thumbEl
4998 * Modify the thumbnail element from which opening zoom animation starts or ends.
4999 * https://photoswipe.com/filters/#thumbel
5000 *
5001 * @prop {(thumbBounds: Bounds | undefined, itemData: SlideData, index: number) => Bounds} thumbBounds
5002 * Modify the thumbnail bounds from which opening zoom animation starts or ends.
5003 * https://photoswipe.com/filters/#thumbbounds
5004 *
5005 * @prop {(srcsetSizesWidth: number, content: Content) => number} srcsetSizesWidth
5006 *
5007 * @prop {(preventPointerEvent: boolean, event: PointerEvent, pointerType: string) => boolean} preventPointerEvent
5008 *
5009 */
5010
5011/**
5012 * @template {keyof PhotoSwipeFiltersMap} T
5013 * @typedef {{ fn: PhotoSwipeFiltersMap[T], priority: number }} Filter
5014 */
5015
5016/**
5017 * @template {keyof PhotoSwipeEventsMap} T
5018 * @typedef {PhotoSwipeEventsMap[T] extends undefined ? PhotoSwipeEvent<T> : PhotoSwipeEvent<T> & PhotoSwipeEventsMap[T]} AugmentedEvent
5019 */
5020
5021/**
5022 * @template {keyof PhotoSwipeEventsMap} T
5023 * @typedef {(event: AugmentedEvent<T>) => void} EventCallback
5024 */
5025
5026/**
5027 * Base PhotoSwipe event object
5028 *
5029 * @template {keyof PhotoSwipeEventsMap} T
5030 */
5031class PhotoSwipeEvent {
5032  /**
5033   * @param {T} type
5034   * @param {PhotoSwipeEventsMap[T]} [details]
5035   */
5036  constructor(type, details) {
5037    this.type = type;
5038    this.defaultPrevented = false;
5039
5040    if (details) {
5041      Object.assign(this, details);
5042    }
5043  }
5044
5045  preventDefault() {
5046    this.defaultPrevented = true;
5047  }
5048
5049}
5050/**
5051 * PhotoSwipe base class that can listen and dispatch for events.
5052 * Shared by PhotoSwipe Core and PhotoSwipe Lightbox, extended by base.js
5053 */
5054
5055
5056class Eventable {
5057  constructor() {
5058    /**
5059     * @type {{ [T in keyof PhotoSwipeEventsMap]?: ((event: AugmentedEvent<T>) => void)[] }}
5060     */
5061    this._listeners = {};
5062    /**
5063     * @type {{ [T in keyof PhotoSwipeFiltersMap]?: Filter<T>[] }}
5064     */
5065
5066    this._filters = {};
5067    /** @type {PhotoSwipe | undefined} */
5068
5069    this.pswp = undefined;
5070    /** @type {PhotoSwipeOptions | undefined} */
5071
5072    this.options = undefined;
5073  }
5074  /**
5075   * @template {keyof PhotoSwipeFiltersMap} T
5076   * @param {T} name
5077   * @param {PhotoSwipeFiltersMap[T]} fn
5078   * @param {number} priority
5079   */
5080
5081
5082  addFilter(name, fn, priority = 100) {
5083    var _this$_filters$name, _this$_filters$name2, _this$pswp;
5084
5085    if (!this._filters[name]) {
5086      this._filters[name] = [];
5087    }
5088
5089    (_this$_filters$name = this._filters[name]) === null || _this$_filters$name === void 0 || _this$_filters$name.push({
5090      fn,
5091      priority
5092    });
5093    (_this$_filters$name2 = this._filters[name]) === null || _this$_filters$name2 === void 0 || _this$_filters$name2.sort((f1, f2) => f1.priority - f2.priority);
5094    (_this$pswp = this.pswp) === null || _this$pswp === void 0 || _this$pswp.addFilter(name, fn, priority);
5095  }
5096  /**
5097   * @template {keyof PhotoSwipeFiltersMap} T
5098   * @param {T} name
5099   * @param {PhotoSwipeFiltersMap[T]} fn
5100   */
5101
5102
5103  removeFilter(name, fn) {
5104    if (this._filters[name]) {
5105      // @ts-expect-error
5106      this._filters[name] = this._filters[name].filter(filter => filter.fn !== fn);
5107    }
5108
5109    if (this.pswp) {
5110      this.pswp.removeFilter(name, fn);
5111    }
5112  }
5113  /**
5114   * @template {keyof PhotoSwipeFiltersMap} T
5115   * @param {T} name
5116   * @param {Parameters<PhotoSwipeFiltersMap[T]>} args
5117   * @returns {Parameters<PhotoSwipeFiltersMap[T]>[0]}
5118   */
5119
5120
5121  applyFilters(name, ...args) {
5122    var _this$_filters$name3;
5123
5124    (_this$_filters$name3 = this._filters[name]) === null || _this$_filters$name3 === void 0 || _this$_filters$name3.forEach(filter => {
5125      // @ts-expect-error
5126      args[0] = filter.fn.apply(this, args);
5127    });
5128    return args[0];
5129  }
5130  /**
5131   * @template {keyof PhotoSwipeEventsMap} T
5132   * @param {T} name
5133   * @param {EventCallback<T>} fn
5134   */
5135
5136
5137  on(name, fn) {
5138    var _this$_listeners$name, _this$pswp2;
5139
5140    if (!this._listeners[name]) {
5141      this._listeners[name] = [];
5142    }
5143
5144    (_this$_listeners$name = this._listeners[name]) === null || _this$_listeners$name === void 0 || _this$_listeners$name.push(fn); // When binding events to lightbox,
5145    // also bind events to PhotoSwipe Core,
5146    // if it's open.
5147
5148    (_this$pswp2 = this.pswp) === null || _this$pswp2 === void 0 || _this$pswp2.on(name, fn);
5149  }
5150  /**
5151   * @template {keyof PhotoSwipeEventsMap} T
5152   * @param {T} name
5153   * @param {EventCallback<T>} fn
5154   */
5155
5156
5157  off(name, fn) {
5158    var _this$pswp3;
5159
5160    if (this._listeners[name]) {
5161      // @ts-expect-error
5162      this._listeners[name] = this._listeners[name].filter(listener => fn !== listener);
5163    }
5164
5165    (_this$pswp3 = this.pswp) === null || _this$pswp3 === void 0 || _this$pswp3.off(name, fn);
5166  }
5167  /**
5168   * @template {keyof PhotoSwipeEventsMap} T
5169   * @param {T} name
5170   * @param {PhotoSwipeEventsMap[T]} [details]
5171   * @returns {AugmentedEvent<T>}
5172   */
5173
5174
5175  dispatch(name, details) {
5176    var _this$_listeners$name2;
5177
5178    if (this.pswp) {
5179      return this.pswp.dispatch(name, details);
5180    }
5181
5182    const event =
5183    /** @type {AugmentedEvent<T>} */
5184    new PhotoSwipeEvent(name, details);
5185    (_this$_listeners$name2 = this._listeners[name]) === null || _this$_listeners$name2 === void 0 || _this$_listeners$name2.forEach(listener => {
5186      listener.call(this, event);
5187    });
5188    return event;
5189  }
5190
5191}
5192
5193class Placeholder {
5194  /**
5195   * @param {string | false} imageSrc
5196   * @param {HTMLElement} container
5197   */
5198  constructor(imageSrc, container) {
5199    // Create placeholder
5200    // (stretched thumbnail or simple div behind the main image)
5201
5202    /** @type {HTMLImageElement | HTMLDivElement | null} */
5203    this.element = createElement('pswp__img pswp__img--placeholder', imageSrc ? 'img' : 'div', container);
5204
5205    if (imageSrc) {
5206      const imgEl =
5207      /** @type {HTMLImageElement} */
5208      this.element;
5209      imgEl.decoding = 'async';
5210      imgEl.alt = '';
5211      imgEl.src = imageSrc;
5212      imgEl.setAttribute('role', 'presentation');
5213    }
5214
5215    this.element.setAttribute('aria-hidden', 'true');
5216  }
5217  /**
5218   * @param {number} width
5219   * @param {number} height
5220   */
5221
5222
5223  setDisplayedSize(width, height) {
5224    if (!this.element) {
5225      return;
5226    }
5227
5228    if (this.element.tagName === 'IMG') {
5229      // Use transform scale() to modify img placeholder size
5230      // (instead of changing width/height directly).
5231      // This helps with performance, specifically in iOS15 Safari.
5232      setWidthHeight(this.element, 250, 'auto');
5233      this.element.style.transformOrigin = '0 0';
5234      this.element.style.transform = toTransformString(0, 0, width / 250);
5235    } else {
5236      setWidthHeight(this.element, width, height);
5237    }
5238  }
5239
5240  destroy() {
5241    var _this$element;
5242
5243    if ((_this$element = this.element) !== null && _this$element !== void 0 && _this$element.parentNode) {
5244      this.element.remove();
5245    }
5246
5247    this.element = null;
5248  }
5249
5250}
5251