Source: media/lightbox/Lightbox.js

  1. import { PopupPagination } from "../../map/popup/PopupPagination.js";
  2. import { MediaCaption } from "./utils.js";
  3. import { CloseButton, ShareButton, MetadataButton, ZoomText } from "./uiElements.js"
  4. import { EventObject } from "../../events/EventObject.js";
  5. import { DeviceProperties, ElementProperties } from "../utils/helperTools.js";
  6. import { PhotoswipeLightbox } from "./PhotoswipeLightbox.js";
  7. import { PhotoswipeLightboxEvents } from "./PhotoswipeLightboxEvents.js";
  8. export { Lightbox }
  10. /**
  11.  * Lightbox class to build a media lightbox using the core functionalities of the photoswipe lightbox. However, the pswp UI is replaced by own UI design, thus own DOM structure and elements (e.g., buttons, text).
  12.  * @extends EventObject
  13.  * @author ckraemme <ckraemme@awi.de>
  14.  */
  15. class Lightbox extends EventObject {
  16.     /**
  17.      * Creates the lightbox.
  18.      * @param {Object} lightboxData -  LightboxData class object.
  19.      * @param {Object} lightboxConfig - LightboxConfig class object.
  20.      */
  21.     constructor(lightboxData, lightboxConfig) {
  22.         super({
  23.             "lightbox_open": [], // [1]
  24.             "lightbox_close": [],// [1]
  25.             "lightbox_critical_state": [],
  26.             //[1]: required for enabling/disabling scrollbars
  27.         });
  29.         this.lightboxData = lightboxData;
  30.         this.lightboxConfig = lightboxConfig;
  31.     }
  33.     init() {
  34.         if (this.lightboxConfig.slideOnStartIndex != null) {
  35.             this._build();
  36.         }
  38.         const gallery = this.lightboxConfig.targetElement.querySelector('.pswp-gallery');
  39.         if (gallery) {
  40.             gallery.addEventListener("click", (e) => {
  41.                 this.lightboxConfig.slideOnStartIndex = this._getIndexOfItemInGallery(e.target);
  42.                 if (Number.isInteger(this.lightboxConfig.slideOnStartIndex)) {
  43.                     e.preventDefault();
  44.                     this._build();
  45.                 }
  46.             })
  47.         }
  48.     }
  50.     _opening() {
  51.         this.lightboxWrapper.classList.remove('state-before-opening');
  52.         this.lightboxWrapper.classList.add('state-opening');
  53.         this._initLightboxHistoryEntry();
  54.     }
  56.     _open() {
  57.         this.lightboxWrapper.classList.remove('state-opening');
  58.     }
  60.     _closing() {
  61.         this.lightboxWrapper.classList.add('state-closing');
  62.         this.shareButton.closeContent();
  63.         this._disableClosingAnimationBasedOnItemVisibility();
  64.         this._removeLightboxHistoryEntry();
  65.     }
  67.     _closed() {
  68.         this.lightboxWrapper.remove();
  69.         this.pswpLightbox = null;
  70.         this.lightboxWrapper.classList.remove('state-closing');
  71.         this.lightboxWrapper = null;
  72.     }
  74.     /**
  75.      * FixMe: This feature collides with the VUE routing in the portal. Somehow a page reload is triggered when
  76.      *        history.back is called.
  77.      * 
  78.      * On touch screens, allow the user to close the lightbox using the browser's back button (i.e. swipe back).
  79.      * @private
  80.      */
  81.     _initLightboxHistoryEntry() {
  82.         //if (DeviceProperties.isTouchDevice()) {
  83.         //    if (history.state?.name != "Lightbox")
  84.         //        history.pushState({ name: "Lightbox" }, null, document.URL);
  85.         //
  86.         //    this.historyStateMethod = this._removeLightboxHistoryEntry.bind(this);
  87.         //    window.addEventListener('popstate', this.historyStateMethod);
  88.         //}
  89.     }
  91.     _removeLightboxHistoryEntry() {
  92.         //if (DeviceProperties.isTouchDevice()) {
  93.         //    window.removeEventListener('popstate', this.historyStateMethod);
  94.         //    if (history.state?.name == "Lightbox")
  95.         //        history.back();
  96.         //    this.pswpLightbox.lightbox.pswp?.close();
  97.         //}
  98.     }
  100.     /**
  101.      * Disable lightbox closing animation if the gallery item is not in the viewport.
  102.      * @private
  103.      */
  104.     _disableClosingAnimationBasedOnItemVisibility() {
  105.         const index = this.pswpLightbox.lightbox.pswp.currIndex;
  106.         const placeholderElement = document.querySelectorAll('.pswp-gallery__item')[index];
  107.         const deviation = 1.0;
  108.         const isInViewport = ElementProperties.isInViewport(placeholderElement, deviation);
  109.         if (!isInViewport)
  110.             this.pswpLightbox.lightbox.pswp.options.showHideAnimationType = 'none';
  111.     }
  113.     _getIndexOfItemInGallery(itemNode) {
  114.         const galleryItemNodes = document.querySelectorAll('.pswp-gallery__item');
  115.         let itemIndex;
  116.         for (let index = 0; index < galleryItemNodes.length; index++) {
  117.             const item = galleryItemNodes[index];
  118.             if (item.contains(itemNode)) {
  119.                 itemIndex = index;
  120.                 break
  121.             }
  122.         }
  123.         return itemIndex
  124.     }
  126.     /**
  127.      * Set the height of the lightbox to window.innerHeight to prevent overflowing
  128.      * content below the address bar in mobile browsers.
  129.      * @private
  130.      */
  131.     _setLightboxResizeListener() {
  132.         this._resetLightboxResizeListener();
  133.         this._resizeListener = () => {
  134.             this.lightboxWrapper.style.height = window.innerHeight + "px";
  135.         };
  136.         window.addEventListener("resize", this._resizeListener);
  137.         this._resizeListener();
  138.     }
  140.     _resetLightboxResizeListener() {
  141.         if (this._resizeListener) {
  142.             window.removeEventListener("resize", this._resizeListener);
  143.         }
  144.     }
  146.     _build() {
  147.         //Observe: 0 to slideOnStartIndex is required so all items before current item are filtered, thus slideOnStartIndex matches with filtered grid 
  148.         this.lightboxData.loadItems(0, this.lightboxConfig.slideOnStartIndex || 1, false, {})
  149.             //this.lightboxData.getItemsQuantity() //TODO: why is it not working?
  150.             //this.lightboxData.getItem(this.lightboxConfig.slideOnStartIndex, [-3, 3]) //replaces: options.preloadFirstSlide=true  //OR put in 'itemData' and activate preloadFirstSlide?
  151.             .then(() => {
  152.                 this._initDOM();
  153.                 this.pswpLightbox = new PhotoswipeLightbox(this.lightboxConfig.targetElement.querySelector('.pswp-lightbox'), this.lightboxData, this.lightboxConfig.slideOnStartIndex);
  154.                 this._handlePswpEvents();
  155.                 this._setLightboxResizeListener();
  156.                 this.fire("lightbox_open");
  157.             }).catch((error) => {
  158.                 this.fire("lightbox_critical_state", error)
  159.             })
  160.     }
  162.     _initDOM() {
  163.         this.lightboxWrapper = document.createElement('div');
  164.         this.lightboxWrapper.classList.add(...['vef-ui', 'custom-lightbox', 'state-before-opening']);
  165.         this._initDOMHeader();
  166.         this._initDOMContent();
  167.         this._initDOMPagination();
  168.         this.lightboxConfig.targetElement.append(this.lightboxWrapper);
  169.     }
  171.     _initDOMHeader() {
  172.         let lightboxHeader = document.createElement('div');
  173.         lightboxHeader.className = 'vef-ui lightbox-header';
  175.         const headerLeft = document.createElement('div');
  176.         headerLeft.classList.add('header-left');
  177.         this.mobileMetadataButton = new MetadataButton(headerLeft);
  179.         const headerRight = document.createElement('div');
  180.         headerRight.classList.add('header-right');
  182.         this.zoomText = new ZoomText(headerRight);
  183.         this.shareButton = new ShareButton(headerRight);
  184.         this.closeButton = new CloseButton(headerRight);
  186.         if (this.lightboxConfig.showShareButton === false)
  187.             this.shareButton.hideButton()
  189.         lightboxHeader.append(headerLeft);
  190.         lightboxHeader.append(headerRight);
  191.         this.lightboxWrapper.prepend(lightboxHeader);
  192.     }
  194.     _initDOMContent() {
  195.         const pswpLightbox = document.createElement('div');
  196.         pswpLightbox.classList.add(...['vef-ui', 'lightbox-content', 'pswp-lightbox']);
  197.         this.lightboxWrapper.append(pswpLightbox);
  198.         this.shareButton.createBox(pswpLightbox);
  199.         PhotoswipeLightboxEvents.preventOnShareBox(this.shareButton.contentBoxElement);
  200.     }
  202.     _initDOMPagination() {
  203.         const lightboxFooter = document.createElement('div');
  204.         lightboxFooter.classList.add(...['vef-ui', 'lightbox-footer']);
  205.         this.pagination = new PopupPagination(lightboxFooter, { pageCount: this.lightboxData.dataItemAmount });
  206.         this.lightboxWrapper.append(lightboxFooter);
  207.     }
  209.     _handlePswpEvents() {
  211.         this.pswpLightbox.on('pswp_lightbox_opening', () => {
  212.             this._opening();
  213.         })
  215.         this.pswpLightbox.on('pswp_lightbox_open', () => {
  216.             this._open();
  217.         })
  219.         this.pswpLightbox.on('pswp_lightbox_ready', () => {
  220.             const lightbox = this.pswpLightbox.lightbox;
  221.             this.pagination.on('next', () => { lightbox.pswp.next() });
  222.             this.pagination.on('previous', () => { lightbox.pswp.prev() });
  223.             this.closeButton.onClick(() => { lightbox.pswp.close() })
  224.         })
  226.         this.pswpLightbox.on("pswp_lightbox_slide_change", (index) => {
  227.             //console.log(`slide change [${index + 1}/${this.lightboxData.galleryItemAmount}]`);
  228.             if (this.lightboxConfig.showShareButton === true) {
  229.                 const shareLink = this.lightboxData.getShareLink(index)
  230.                 this.shareButton.setLink(shareLink);
  232.                 const deactivateShareButton = shareLink == undefined;
  233.                 deactivateShareButton ? this.shareButton.deactivateButton() : this.shareButton.activateButton();
  234.             }
  237.             this.pagination.setPage(this.lightboxData.shownItemPosition(index));
  239.             this.lightboxData.getSidebarTemplate().then((metadataTemplate) => {
  240.                 const isItemLoaded = this.lightboxData['galleryItems'][index] != null;
  241.                 if (isItemLoaded) {
  242.                     const caption = MediaCaption.getCaption(this.lightboxData['galleryItems'][index]['sidebarData'], metadataTemplate);
  243.                     const captionTarget = document.querySelector('.lightbox-content');
  244.                     this.mobileMetadataButton.setContent(caption, captionTarget);
  245.                 }
  246.             })
  248.         })
  250.         this.pswpLightbox.on("pswp_lightbox_zoom", ([zoomLevel, showZoomLevel]) => {
  251.             this.zoomText.isContentVisible = showZoomLevel;
  252.             this.zoomText.setZoom(zoomLevel);
  253.         })
  255.         this.pswpLightbox.on('pswp_lightbox_close', () => {
  256.             this.fire("lightbox_close");
  257.             this._resetLightboxResizeListener();
  258.             this._closing();
  259.         })
  261.         this.pswpLightbox.on('pswp_lightbox_destroy', () => {
  262.             this._closed();
  263.         })
  265.         this.pswpLightbox.on('pswp_critical_state', (message) => {
  266.             this.fire("lightbox_critical_state", message);
  267.         })
  268.     }
  269. }