gallery.js

  1. import { queryOne, queryAll } from '@ecl/dom-utils';
  2. import { createFocusTrap } from 'focus-trap';
  4. /**
  5.  * @param {HTMLElement} element DOM element for component instantiation and scope
  6.  * @param {Object} options
  7.  * @param {String} options.galleryItemSelector Selector for gallery element
  8.  * @param {String} options.descriptionSelector Selector for gallery description element
  9.  * @param {String} options.titleSelector Selector for gallery title element
  10.  * @param {String} options.closeButtonSelector Selector for close button element
  11.  * @param {String} options.allButtonSelector Selector for view all button element
  12.  * @param {String} options.overlaySelector Selector for gallery overlay element
  13.  * @param {String} options.overlayHeaderSelector Selector for gallery overlay header element
  14.  * @param {String} options.overlayFooterSelector Selector for gallery overlay footer element
  15.  * @param {String} options.overlayMediaSelector Selector for gallery overlay media element
  16.  * @param {String} options.overlayCounterCurrentSelector Selector for gallery overlay current number element
  17.  * @param {String} options.overlayCounterMaxSelector Selector for display of number of elements in the gallery overlay
  18.  * @param {String} options.overlayDownloadSelector Selector for gallery overlay download element
  19.  * @param {String} options.overlayShareSelector Selector for gallery overlay share element
  20.  * @param {String} options.overlayDescriptionSelector Selector for gallery overlay description element
  21.  * @param {String} options.overlayPreviousSelector Selector for gallery overlay previous link element
  22.  * @param {String} options.overlayNextSelector Selector for gallery overlay next link element
  23.  * @param {String} options.videoTitleSelector Selector for video title
  24.  * @param {Boolean} options.attachClickListener Whether or not to bind click events
  25.  * @param {Boolean} options.attachKeyListener Whether or not to bind keyup events
  26.  */
  27. export class Gallery {
  28.   /**
  29.    * @static
  30.    * Shorthand for instance creation and initialisation.
  31.    *
  32.    * @param {HTMLElement} root DOM element for component instantiation and scope
  33.    *
  34.    * @return {Gallery} An instance of Gallery.
  35.    */
  36.   static autoInit(root, { GALLERY: defaultOptions = {} } = {}) {
  37.     const gallery = new Gallery(root, defaultOptions);
  38.     gallery.init();
  39.     root.ECLGallery = gallery;
  40.     return gallery;
  41.   }
  43.   constructor(
  44.     element,
  45.     {
  46.       expandableSelector = 'data-ecl-gallery-not-expandable',
  47.       galleryItemSelector = '[data-ecl-gallery-item]',
  48.       descriptionSelector = '[data-ecl-gallery-description]',
  49.       titleSelector = '[data-ecl-gallery-title]',
  50.       noOverlaySelector = 'data-ecl-gallery-no-overlay',
  51.       itemsLimitSelector = 'data-ecl-gallery-visible-items',
  52.       closeButtonSelector = '[data-ecl-gallery-close]',
  53.       viewAllSelector = '[data-ecl-gallery-all]',
  54.       viewAllLabelSelector = 'data-ecl-gallery-collapsed-label',
  55.       viewAllExpandedLabelSelector = 'data-ecl-gallery-expanded-label',
  56.       countSelector = '[data-ecl-gallery-count]',
  57.       overlaySelector = '[data-ecl-gallery-overlay]',
  58.       overlayHeaderSelector = '[data-ecl-gallery-overlay-header]',
  59.       overlayFooterSelector = '[data-ecl-gallery-overlay-footer]',
  60.       overlayMediaSelector = '[data-ecl-gallery-overlay-media]',
  61.       overlayCounterCurrentSelector = '[data-ecl-gallery-overlay-counter-current]',
  62.       overlayCounterMaxSelector = '[data-ecl-gallery-overlay-counter-max]',
  63.       overlayDownloadSelector = '[data-ecl-gallery-overlay-download]',
  64.       overlayShareSelector = '[data-ecl-gallery-overlay-share]',
  65.       overlayDescriptionSelector = '[data-ecl-gallery-overlay-description]',
  66.       overlayPreviousSelector = '[data-ecl-gallery-overlay-previous]',
  67.       overlayNextSelector = '[data-ecl-gallery-overlay-next]',
  68.       videoTitleSelector = 'data-ecl-gallery-item-video-title',
  69.       attachClickListener = true,
  70.       attachKeyListener = true,
  71.       attachResizeListener = true,
  72.     } = {},
  73.   ) {
  74.     // Check element
  75.     if (!element || element.nodeType !== Node.ELEMENT_NODE) {
  76.       throw new TypeError(
  77.         'DOM element should be given to initialize this widget.',
  78.       );
  79.     }
  81.     this.element = element;
  83.     // Options
  84.     this.galleryItemSelector = galleryItemSelector;
  85.     this.descriptionSelector = descriptionSelector;
  86.     this.titleSelector = titleSelector;
  87.     this.closeButtonSelector = closeButtonSelector;
  88.     this.viewAllSelector = viewAllSelector;
  89.     this.countSelector = countSelector;
  90.     this.itemsLimitSelector = itemsLimitSelector;
  91.     this.overlaySelector = overlaySelector;
  92.     this.noOverlaySelector = noOverlaySelector;
  93.     this.overlayHeaderSelector = overlayHeaderSelector;
  94.     this.overlayFooterSelector = overlayFooterSelector;
  95.     this.overlayMediaSelector = overlayMediaSelector;
  96.     this.overlayCounterCurrentSelector = overlayCounterCurrentSelector;
  97.     this.overlayCounterMaxSelector = overlayCounterMaxSelector;
  98.     this.overlayDownloadSelector = overlayDownloadSelector;
  99.     this.overlayShareSelector = overlayShareSelector;
  100.     this.overlayDescriptionSelector = overlayDescriptionSelector;
  101.     this.overlayPreviousSelector = overlayPreviousSelector;
  102.     this.overlayNextSelector = overlayNextSelector;
  103.     this.attachClickListener = attachClickListener;
  104.     this.attachKeyListener = attachKeyListener;
  105.     this.attachResizeListener = attachResizeListener;
  106.     this.viewAllLabelSelector = viewAllLabelSelector;
  107.     this.viewAllExpandedLabelSelector = viewAllExpandedLabelSelector;
  108.     this.expandableSelector = expandableSelector;
  109.     this.videoTitleSelector = videoTitleSelector;
  111.     // Private variables
  112.     this.galleryItems = null;
  113.     this.closeButton = null;
  114.     this.viewAll = null;
  115.     this.count = null;
  116.     this.overlay = null;
  117.     this.overlayHeader = null;
  118.     this.overlayFooter = null;
  119.     this.overlayMedia = null;
  120.     this.overlayCounterCurrent = null;
  121.     this.overlayCounterMax = null;
  122.     this.overlayDownload = null;
  123.     this.overlayShare = null;
  124.     this.overlayDescription = null;
  125.     this.overlayPrevious = null;
  126.     this.overlayNext = null;
  127.     this.selectedItem = null;
  128.     this.focusTrap = null;
  129.     this.isDesktop = false;
  130.     this.resizeTimer = null;
  131.     this.visibleItems = 0;
  132.     this.breakpointMd = 768;
  133.     this.breakpointLg = 996;
  134.     this.imageHeight = 185;
  135.     this.imageHeightBig = 260;
  137.     // Bind `this` for use in callbacks
  138.     this.iframeResize = this.iframeResize.bind(this);
  139.     this.handleClickOnCloseButton = this.handleClickOnCloseButton.bind(this);
  140.     this.handleClickOnViewAll = this.handleClickOnViewAll.bind(this);
  141.     this.handleClickOnItem = this.handleClickOnItem.bind(this);
  142.     this.preventClickOnItem = this.preventClickOnItem.bind(this);
  143.     this.handleKeyPressOnItem = this.handleKeyPressOnItem.bind(this);
  144.     this.handleClickOnPreviousButton =
  145.       this.handleClickOnPreviousButton.bind(this);
  146.     this.handleClickOnNextButton = this.handleClickOnNextButton.bind(this);
  147.     this.handleKeyboard = this.handleKeyboard.bind(this);
  148.     this.handleResize = this.handleResize.bind(this);
  149.   }
  151.   /**
  152.    * Initialise component.
  153.    */
  154.   init() {
  155.     if (!ECL) {
  156.       throw new TypeError('Called init but ECL is not present');
  157.     }
  158.     ECL.components = ECL.components || new Map();
  159.     // Query elements
  160.     this.expandable = !this.element.hasAttribute(this.expandableSelector);
  161.     this.visibleItems = this.element.getAttribute(this.itemsLimitSelector);
  162.     this.galleryItems = queryAll(this.galleryItemSelector, this.element);
  163.     this.closeButton = queryOne(this.closeButtonSelector, this.element);
  164.     this.noOverlay = this.element.hasAttribute(this.noOverlaySelector);
  165.     if (this.expandable) {
  166.       this.viewAll = queryOne(this.viewAllSelector, this.element);
  167.       this.viewAllLabel =
  168.         this.viewAll.getAttribute(this.viewAllLabelSelector) ||
  169.         this.viewAll.innerText;
  170.       this.viewAllLabelExpanded =
  171.         this.viewAll.getAttribute(this.viewAllExpandedLabelSelector) ||
  172.         this.viewAllLabel;
  173.     }
  174.     this.count = queryOne(this.countSelector, this.element);
  176.     // Bind click event on view all (open first item)
  177.     if (this.attachClickListener && this.viewAll) {
  178.       this.viewAll.addEventListener('click', this.handleClickOnViewAll);
  179.     }
  180.     if (!this.noOverlay) {
  181.       this.overlay = queryOne(this.overlaySelector, this.element);
  182.       this.overlayHeader = queryOne(this.overlayHeaderSelector, this.overlay);
  183.       this.overlayFooter = queryOne(this.overlayFooterSelector, this.overlay);
  184.       this.overlayMedia = queryOne(this.overlayMediaSelector, this.overlay);
  185.       this.overlayCounterCurrent = queryOne(
  186.         this.overlayCounterCurrentSelector,
  187.         this.overlay,
  188.       );
  189.       this.overlayCounterMax = queryOne(
  190.         this.overlayCounterMaxSelector,
  191.         this.overlay,
  192.       );
  193.       this.overlayDownload = queryOne(
  194.         this.overlayDownloadSelector,
  195.         this.overlay,
  196.       );
  197.       this.overlayShare = queryOne(this.overlayShareSelector, this.overlay);
  198.       this.overlayDescription = queryOne(
  199.         this.overlayDescriptionSelector,
  200.         this.overlay,
  201.       );
  202.       this.overlayPrevious = queryOne(
  203.         this.overlayPreviousSelector,
  204.         this.overlay,
  205.       );
  206.       this.overlayNext = queryOne(this.overlayNextSelector, this.overlay);
  208.       // Create focus trap
  209.       this.focusTrap = createFocusTrap(this.overlay, {
  210.         escapeDeactivates: false,
  211.         returnFocusOnDeactivate: false,
  212.       });
  214.       // Polyfill to support <dialog>
  215.       this.isDialogSupported = true;
  216.       if (!window.HTMLDialogElement) {
  217.         this.isDialogSupported = false;
  218.       }
  220.       // Bind click event on close button
  221.       if (this.attachClickListener && this.closeButton) {
  222.         this.closeButton.addEventListener(
  223.           'click',
  224.           this.handleClickOnCloseButton,
  225.         );
  226.       }
  228.       // Bind click event on gallery items
  229.       if (this.attachClickListener && this.galleryItems) {
  230.         this.galleryItems.forEach((galleryItem) => {
  231.           if (this.attachClickListener) {
  232.             galleryItem.addEventListener('click', this.handleClickOnItem);
  233.           }
  234.           if (this.attachKeyListener) {
  235.             galleryItem.addEventListener('keyup', this.handleKeyPressOnItem);
  236.           }
  237.         });
  238.       }
  240.       // Bind click event on previous button
  241.       if (this.attachClickListener && this.overlayPrevious) {
  242.         this.overlayPrevious.addEventListener(
  243.           'click',
  244.           this.handleClickOnPreviousButton,
  245.         );
  246.       }
  248.       // Bind click event on next button
  249.       if (this.attachClickListener && this.overlayNext) {
  250.         this.overlayNext.addEventListener(
  251.           'click',
  252.           this.handleClickOnNextButton,
  253.         );
  254.       }
  256.       // Bind other close event
  257.       if (!this.isDialogSupported && this.attachKeyListener && this.overlay) {
  258.         this.overlay.addEventListener('keyup', this.handleKeyboard);
  259.       }
  260.       if (this.isDialogSupported && this.overlay) {
  261.         this.overlay.addEventListener('close', this.handleClickOnCloseButton);
  262.       }
  263.     } else {
  264.       this.galleryItems.forEach((galleryItem) => {
  265.         galleryItem.classList.add('ecl-gallery__item__link--frozen');
  266.         galleryItem.addEventListener('click', this.preventClickOnItem);
  267.       });
  268.     }
  270.     // Bind resize events
  271.     if (this.attachResizeListener) {
  272.       window.addEventListener('resize', this.handleResize);
  273.     }
  275.     // Init display of gallery items
  276.     if (this.expandable) {
  277.       this.checkScreen();
  278.       this.hideItems();
  279.     }
  281.     // Add number to gallery items
  282.     this.galleryItems.forEach((galleryItem, key) => {
  283.       galleryItem.setAttribute('data-ecl-gallery-item-id', key);
  284.     });
  286.     // Update counter
  287.     if (this.count) {
  288.       this.count.innerHTML = this.galleryItems.length;
  289.     }
  291.     // Set ecl initialized attribute
  292.     this.element.setAttribute('data-ecl-auto-initialized', 'true');
  293.     ECL.components.set(this.element, this);
  294.   }
  296.   /**
  297.    * Destroy component.
  298.    */
  299.   destroy() {
  300.     if (this.attachClickListener && this.closeButton) {
  301.       this.closeButton.removeEventListener(
  302.         'click',
  303.         this.handleClickOnCloseButton,
  304.       );
  305.     }
  307.     if (this.attachClickListener && this.viewAll) {
  308.       this.viewAll.removeEventListener('click', this.handleClickOnViewAll);
  309.     }
  311.     if (this.attachClickListener && this.galleryItems) {
  312.       this.galleryItems.forEach((galleryItem) => {
  313.         galleryItem.removeEventListener('click', this.handleClickOnItem);
  314.       });
  315.     }
  317.     if (this.attachClickListener && this.overlayPrevious) {
  318.       this.overlayPrevious.removeEventListener(
  319.         'click',
  320.         this.handleClickOnPreviousButton,
  321.       );
  322.     }
  324.     if (this.attachClickListener && this.overlayNext) {
  325.       this.overlayNext.removeEventListener(
  326.         'click',
  327.         this.handleClickOnNextButton,
  328.       );
  329.     }
  331.     if (!this.isDialogSupported && this.attachKeyListener && this.overlay) {
  332.       this.overlay.removeEventListener('keyup', this.handleKeyboard);
  333.     }
  334.     if (this.isDialogSupported && this.overlay) {
  335.       this.overlay.removeEventListener('close', this.handleClickOnCloseButton);
  336.     }
  338.     if (this.attachResizeListener) {
  339.       window.removeEventListener('resize', this.handleResize);
  340.     }
  342.     if (this.element) {
  343.       this.element.removeAttribute('data-ecl-auto-initialized');
  344.       ECL.components.delete(this.element);
  345.     }
  346.   }
  348.   /**
  349.    * Check if current display is desktop or mobile
  350.    */
  351.   checkScreen() {
  352.     if (window.innerWidth > this.breakpointMd) {
  353.       this.isDesktop = true;
  354.     } else {
  355.       this.isDesktop = false;
  356.     }
  357.     if (window.innerWidth > this.breakpointLg) {
  358.       this.isLarge = true;
  359.     }
  360.   }
  362.   iframeResize(iframe) {
  363.     if (!iframe && this.overlay) {
  364.       iframe = queryOne('iframe', this.overlay);
  365.     }
  367.     if (iframe) {
  368.       const width = window.innerWidth;
  370.       setTimeout(() => {
  371.         const height =
  372.           this.overlay.clientHeight -
  373.           this.overlayHeader.clientHeight -
  374.           this.overlayFooter.clientHeight;
  376.         if (width > height) {
  377.           iframe.setAttribute('height', `${height}px`);
  379.           if ((height * 16) / 9 > width) {
  380.             iframe.setAttribute('width', `${width - 0.05 * width}px`);
  381.           } else {
  382.             iframe.setAttribute('width', `${(height * 16) / 9}px`);
  383.           }
  384.         } else {
  385.           iframe.setAttribute('width', `${width}px`);
  386.           if ((width * 4) / 3 > height) {
  387.             iframe.setAttribute('height', `${height - 0.05 * height}px`);
  388.           } else {
  389.             iframe.setAttribute('height', `${(width * 4) / 3}px`);
  390.           }
  391.         }
  392.       }, 0);
  393.     }
  394.   }
  396.   /**
  397.    * @param {Int} rows/item number
  398.    *
  399.    * Hide several gallery items by default
  400.    * - 2 "lines" of items on desktop
  401.    * - only 3 items on mobile or the desired rows or items
  402.    *   when using the view more button.
  403.    */
  404.   hideItems(plus = 0) {
  405.     if (!this.viewAll || this.viewAll.expanded) return;
  407.     if (this.isDesktop) {
  408.       let hiddenItemIds = [];
  409.       // We should browse the list first to mark the items to be hidden, and hide them later
  410.       // otherwise, it will interfer with the calculus
  411.       this.galleryItems.forEach((galleryItem, key) => {
  412.         galleryItem.parentNode.classList.remove('ecl-gallery__item--hidden');
  413.         if (key >= Number(this.visibleItems) + Number(plus)) {
  414.           hiddenItemIds = [...hiddenItemIds, key];
  415.         }
  416.       });
  417.       hiddenItemIds.forEach((id) => {
  418.         this.galleryItems[id].parentNode.classList.add(
  419.           'ecl-gallery__item--hidden',
  420.         );
  421.       });
  422.       return;
  423.     }
  425.     this.galleryItems.forEach((galleryItem, key) => {
  426.       if (key > 2 + Number(plus)) {
  427.         galleryItem.parentNode.classList.add('ecl-gallery__item--hidden');
  428.       } else {
  429.         galleryItem.parentNode.classList.remove('ecl-gallery__item--hidden');
  430.       }
  431.     });
  432.   }
  434.   /**
  435.    * Trigger events on resize
  436.    * Uses a debounce, for performance
  437.    */
  438.   handleResize() {
  439.     clearTimeout(this.resizeTimer);
  440.     this.resizeTimer = setTimeout(() => {
  441.       this.checkScreen();
  442.       this.hideItems();
  443.       this.iframeResize();
  444.     }, 200);
  445.   }
  447.   /**
  448.    * @param {HTMLElement} selectedItem Media element
  449.    */
  450.   updateOverlay(selectedItem) {
  451.     this.selectedItem = selectedItem;
  452.     const embeddedVideo = selectedItem.getAttribute(
  453.       'data-ecl-gallery-item-embed-src',
  454.     );
  455.     const embeddedVideoAudio = selectedItem.getAttribute(
  456.       'data-ecl-gallery-item-embed-audio',
  457.     );
  458.     const video = queryOne('video', selectedItem);
  459.     let mediaElement = null;
  461.     // Update media
  462.     if (embeddedVideo != null) {
  463.       // Media is a embedded video
  464.       mediaElement = document.createElement('div');
  465.       mediaElement.classList.add('ecl-gallery__slider-embed');
  467.       const mediaAudio = document.createElement('div');
  468.       mediaAudio.classList.add('ecl-gallery__slider-embed-audio');
  469.       if (embeddedVideoAudio) {
  470.         mediaAudio.innerHTML = embeddedVideoAudio;
  471.       }
  473.       const iframeUrl = new URL(embeddedVideo);
  475.       // Youtube
  476.       if (iframeUrl.host.includes('youtube')) {
  477.         iframeUrl.searchParams.set('disablekb', 1);
  478.       }
  479.       const mediaIframe = document.createElement('iframe');
  480.       mediaIframe.setAttribute('src', iframeUrl);
  481.       mediaIframe.setAttribute('frameBorder', '0');
  483.       // Update iframe title
  484.       const videoTitle = selectedItem.getAttribute(this.videoTitleSelector);
  485.       if (videoTitle) {
  486.         mediaIframe.setAttribute('title', videoTitle);
  487.       }
  489.       if (this.overlayMedia) {
  490.         if (embeddedVideoAudio) {
  491.           mediaElement.appendChild(mediaAudio);
  492.         }
  493.         mediaElement.appendChild(mediaIframe);
  494.         this.overlayMedia.innerHTML = '';
  495.         this.overlayMedia.appendChild(mediaElement);
  496.       }
  497.       this.iframeResize(mediaIframe);
  498.     } else if (video != null) {
  499.       // Media is a video
  500.       mediaElement = document.createElement('video');
  501.       mediaElement.setAttribute('poster', video.poster);
  502.       mediaElement.setAttribute('controls', 'controls');
  503.       mediaElement.classList.add('ecl-gallery__slider-video');
  505.       // Update video title
  506.       const videoTitle = selectedItem.getAttribute(this.videoTitleSelector);
  507.       if (videoTitle) {
  508.         mediaElement.setAttribute('aria-label', videoTitle);
  509.       }
  511.       if (this.overlayMedia) {
  512.         this.overlayMedia.innerHTML = '';
  513.         this.overlayMedia.appendChild(mediaElement);
  514.       }
  516.       // Get sources
  517.       const sources = queryAll('source', video);
  518.       sources.forEach((source) => {
  519.         const sourceTag = document.createElement('source');
  520.         sourceTag.setAttribute('src', source.getAttribute('src'));
  521.         sourceTag.setAttribute('type', source.getAttribute('type'));
  522.         mediaElement.appendChild(sourceTag);
  523.       });
  525.       // Get tracks
  526.       const tracks = queryAll('track', video);
  527.       tracks.forEach((track) => {
  528.         const trackTag = document.createElement('track');
  529.         trackTag.setAttribute('src', track.getAttribute('src'));
  530.         trackTag.setAttribute('kind', track.getAttribute('kind'));
  531.         trackTag.setAttribute('srclang', track.getAttribute('srcLang'));
  532.         trackTag.setAttribute('label', track.getAttribute('label'));
  533.         mediaElement.appendChild(trackTag);
  534.       });
  536.       mediaElement.load();
  537.     } else {
  538.       // Media is an image
  539.       const picture = queryOne('.ecl-gallery__picture', selectedItem);
  540.       const image = queryOne('img', picture);
  541.       if (picture) {
  542.         image.classList.remove('ecl-gallery__image');
  543.         mediaElement = picture.cloneNode(true);
  544.       } else {
  545.         // backward compatibility
  546.         mediaElement = document.createElement('img');
  547.         mediaElement.setAttribute('src', image.getAttribute('src'));
  548.         mediaElement.setAttribute('alt', image.getAttribute('alt'));
  549.       }
  550.       mediaElement.classList.add('ecl-gallery__slider-image');
  552.       if (this.overlayMedia) {
  553.         this.overlayMedia.innerHTML = '';
  554.         this.overlayMedia.appendChild(mediaElement);
  555.       }
  556.     }
  558.     // Get id
  559.     const id = selectedItem.getAttribute('id');
  561.     // Update counter
  562.     this.overlayCounterCurrent.innerHTML =
  563.       +selectedItem.getAttribute('data-ecl-gallery-item-id') + 1;
  564.     this.overlayCounterMax.innerHTML = this.galleryItems.length;
  566.     // Prepare display of links for mobile
  567.     const actionMobile = document.createElement('div');
  568.     actionMobile.classList.add('ecl-gallery__detail-actions-mobile');
  570.     // Update download link
  571.     if (this.overlayDownload !== null && embeddedVideo === null) {
  572.       this.overlayDownload.href = this.selectedItem.href;
  573.       if (id) {
  574.         this.overlayDownload.setAttribute('aria-describedby', `${id}-title`);
  575.       }
  576.       this.overlayDownload.hidden = false;
  577.       actionMobile.appendChild(this.overlayDownload.cloneNode(true));
  578.     } else if (this.overlayDownload !== null) {
  579.       this.overlayDownload.hidden = true;
  580.     }
  582.     // Update share link
  583.     const shareHref = this.selectedItem.getAttribute(
  584.       'data-ecl-gallery-item-share',
  585.     );
  586.     if (shareHref != null) {
  587.       this.overlayShare.href = shareHref;
  588.       if (id) {
  589.         this.overlayShare.setAttribute('aria-describedby', `${id}-title`);
  590.       }
  591.       this.overlayShare.hidden = false;
  592.       actionMobile.appendChild(this.overlayShare.cloneNode(true));
  593.     } else {
  594.       this.overlayShare.hidden = true;
  595.     }
  597.     // Update description
  598.     const description = queryOne(this.descriptionSelector, selectedItem);
  599.     if (description) {
  600.       this.overlayDescription.innerHTML = description.innerHTML;
  601.     }
  602.     if (actionMobile.childNodes.length > 0) {
  603.       this.overlayDescription.prepend(actionMobile);
  604.     }
  605.   }
  607.   /**
  608.    * Handles keyboard events such as Escape and navigation.
  609.    *
  610.    * @param {Event} e
  611.    */
  612.   handleKeyboard(e) {
  613.     // Detect press on Escape
  614.     // Only used if the browser do not support <dialog>
  615.     if (e.key === 'Escape' || e.key === 'Esc') {
  616.       this.handleClickOnCloseButton();
  617.     }
  618.   }
  620.   /**
  621.    * Invoke listeners for close events.
  622.    */
  623.   handleClickOnCloseButton() {
  624.     if (this.isDialogSupported) {
  625.       this.overlay.close();
  626.     } else {
  627.       this.overlay.removeAttribute('open');
  628.     }
  630.     // Remove iframe
  631.     const embeddedVideo = queryOne('iframe', this.overlayMedia);
  632.     if (embeddedVideo) embeddedVideo.remove();
  634.     // Stop video
  635.     const video = queryOne('video', this.overlayMedia);
  636.     if (video) video.pause();
  638.     // Untrap focus
  639.     this.focusTrap.deactivate();
  641.     // Restore css class on items
  642.     this.galleryItems.forEach((galleryItem) => {
  643.       const image = queryOne('img', galleryItem);
  644.       if (image) {
  645.         image.classList.add('ecl-gallery__image');
  646.       }
  647.     });
  649.     // Focus item
  650.     this.selectedItem.focus();
  652.     // Enable scroll on body
  653.     document.body.classList.remove('ecl-u-disablescroll');
  654.   }
  656.   /**
  657.    * Invoke listeners for on pressing the spacebar button.
  658.    *
  659.    * @param {Event} e
  660.    */
  661.   handleKeyPressOnItem(e) {
  662.     if (e.keyCode === 32) {
  663.       // If spacebar trigger the modal
  664.       this.handleClickOnItem(e);
  665.     }
  666.   }
  668.   /**
  669.    * Invoke listeners for on click events on view all.
  670.    *
  671.    * @param {Event} e
  672.    */
  673.   handleClickOnViewAll(e) {
  674.     e.preventDefault();
  675.     if (!this.viewAll) return;
  677.     if (this.viewAll.expanded) {
  678.       delete this.viewAll.expanded;
  679.       this.checkScreen();
  680.       this.hideItems();
  681.       this.viewAll.textContent = this.viewAllLabel;
  682.     } else {
  683.       this.viewAll.expanded = true;
  684.       this.viewAll.textContent = this.viewAllLabelExpanded;
  686.       const hidden = this.galleryItems.filter((item) =>
  687.         item.parentNode.classList.contains('ecl-gallery__item--hidden'),
  688.       );
  689.       if (hidden.length > 0) {
  690.         hidden.forEach((item) => {
  691.           item.parentNode.classList.remove('ecl-gallery__item--hidden');
  692.         });
  693.         hidden[0].focus();
  694.       }
  695.     }
  696.   }
  698.   /**
  699.    * Invoke listeners for on click events on the given gallery item.
  700.    *
  701.    * @param {Event} e
  702.    */
  703.   handleClickOnItem(e) {
  704.     e.preventDefault();
  706.     // Disable scroll on body
  707.     document.body.classList.add('ecl-u-disablescroll');
  709.     // Display overlay
  710.     if (this.isDialogSupported) {
  711.       this.overlay.showModal();
  712.     } else {
  713.       this.overlay.setAttribute('open', '');
  714.     }
  716.     // Update overlay
  717.     this.updateOverlay(e.currentTarget);
  719.     // Trap focus
  720.     this.focusTrap.activate();
  721.   }
  723.   /**
  724.    * handle click event on gallery items when no overlay.
  725.    *
  726.    * @param {Event} e
  727.    */
  728.   // eslint-disable-next-line class-methods-use-this
  729.   preventClickOnItem(e) {
  730.     e.preventDefault();
  731.     e.stopPropagation();
  732.   }
  734.   /**
  735.    * Invoke listeners for on click events on previous navigation link.
  736.    */
  737.   handleClickOnPreviousButton() {
  738.     // Get current id
  739.     const currentId = this.selectedItem.getAttribute(
  740.       'data-ecl-gallery-item-id',
  741.     );
  743.     // Get previous id
  744.     let previousId = +currentId - 1;
  745.     if (previousId < 0) previousId = this.galleryItems.length - 1;
  747.     // Stop video
  748.     const video = queryOne('video', this.selectedItem);
  749.     if (video) video.pause();
  751.     // Update overlay
  752.     this.updateOverlay(this.galleryItems[previousId]);
  753.     this.selectedItem = this.galleryItems[previousId];
  755.     return this;
  756.   }
  758.   /**
  759.    * Invoke listeners for on click events on next navigation link.
  760.    */
  761.   handleClickOnNextButton() {
  762.     // Get current id
  763.     const currentId = this.selectedItem.getAttribute(
  764.       'data-ecl-gallery-item-id',
  765.     );
  767.     // Get next id
  768.     let nextId = +currentId + 1;
  769.     if (nextId >= this.galleryItems.length) nextId = 0;
  771.     // Stop video
  772.     const video = queryOne('video', this.selectedItem);
  773.     if (video) video.pause();
  775.     // Update overlay
  776.     this.updateOverlay(this.galleryItems[nextId]);
  777.     this.selectedItem = this.galleryItems[nextId];
  779.     return this;
  780.   }
  781. }
  783. export default Gallery;