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.metaSelector Selector for gallery meta info 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.overlayMetaSelector Selector for gallery overlay meta info element
  22.  * @param {String} options.overlayPreviousSelector Selector for gallery overlay previous link element
  23.  * @param {String} options.overlayNextSelector Selector for gallery overlay next link element
  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.       noOverlaySelector = 'data-ecl-gallery-no-overlay',
  50.       metaSelector = '[data-ecl-gallery-meta]',
  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.       overlayMetaSelector = '[data-ecl-gallery-overlay-meta]',
  67.       overlayPreviousSelector = '[data-ecl-gallery-overlay-previous]',
  68.       overlayNextSelector = '[data-ecl-gallery-overlay-next]',
  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.metaSelector = metaSelector;
  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.overlayMetaSelector = overlayMetaSelector;
  102.     this.overlayPreviousSelector = overlayPreviousSelector;
  103.     this.overlayNextSelector = overlayNextSelector;
  104.     this.attachClickListener = attachClickListener;
  105.     this.attachKeyListener = attachKeyListener;
  106.     this.attachResizeListener = attachResizeListener;
  107.     this.viewAllLabelSelector = viewAllLabelSelector;
  108.     this.viewAllExpandedLabelSelector = viewAllExpandedLabelSelector;
  109.     this.expandableSelector = expandableSelector;
  111.     // Private variables
  112.     this.galleryItems = null;
  113.     this.meta = null;
  114.     this.closeButton = null;
  115.     this.viewAll = null;
  116.     this.count = null;
  117.     this.overlay = null;
  118.     this.overlayHeader = null;
  119.     this.overlayFooter = null;
  120.     this.overlayMedia = null;
  121.     this.overlayCounterCurrent = null;
  122.     this.overlayCounterMax = null;
  123.     this.overlayDownload = null;
  124.     this.overlayShare = null;
  125.     this.overlayDescription = null;
  126.     this.overlayMeta = null;
  127.     this.overlayPrevious = null;
  128.     this.overlayNext = null;
  129.     this.selectedItem = null;
  130.     this.focusTrap = null;
  131.     this.isDesktop = false;
  132.     this.resizeTimer = null;
  133.     this.visibleItems = 0;
  134.     this.breakpointMd = 768;
  135.     this.breakpointLg = 996;
  136.     this.imageHeight = 185;
  137.     this.imageHeightBig = 260;
  139.     // Bind `this` for use in callbacks
  140.     this.iframeResize = this.iframeResize.bind(this);
  141.     this.handleClickOnCloseButton = this.handleClickOnCloseButton.bind(this);
  142.     this.handleClickOnViewAll = this.handleClickOnViewAll.bind(this);
  143.     this.handleClickOnItem = this.handleClickOnItem.bind(this);
  144.     this.preventClickOnItem = this.preventClickOnItem.bind(this);
  145.     this.handleKeyPressOnItem = this.handleKeyPressOnItem.bind(this);
  146.     this.handleClickOnPreviousButton =
  147.       this.handleClickOnPreviousButton.bind(this);
  148.     this.handleClickOnNextButton = this.handleClickOnNextButton.bind(this);
  149.     this.handleKeyboard = this.handleKeyboard.bind(this);
  150.     this.handleResize = this.handleResize.bind(this);
  151.   }
  153.   /**
  154.    * Initialise component.
  155.    */
  156.   init() {
  157.     if (!ECL) {
  158.       throw new TypeError('Called init but ECL is not present');
  159.     }
  160.     ECL.components = ECL.components || new Map();
  161.     // Query elements
  162.     this.expandable = !this.element.hasAttribute(this.expandableSelector);
  163.     this.visibleItems = this.element.getAttribute(this.itemsLimitSelector);
  164.     this.galleryItems = queryAll(this.galleryItemSelector, this.element);
  165.     this.closeButton = queryOne(this.closeButtonSelector, this.element);
  166.     this.noOverlay = this.element.hasAttribute(this.noOverlaySelector);
  167.     if (this.expandable) {
  168.       this.viewAll = queryOne(this.viewAllSelector, this.element);
  169.       this.viewAllLabel =
  170.         this.viewAll.getAttribute(this.viewAllLabelSelector) ||
  171.         this.viewAll.innerText;
  172.       this.viewAllLabelExpanded =
  173.         this.viewAll.getAttribute(this.viewAllExpandedLabelSelector) ||
  174.         this.viewAllLabel;
  175.     }
  176.     this.count = queryOne(this.countSelector, this.element);
  177.     // Bind click event on view all (open first item)
  178.     if (this.attachClickListener && this.viewAll) {
  179.       this.viewAll.addEventListener('click', this.handleClickOnViewAll);
  180.     }
  181.     if (!this.noOverlay) {
  182.       this.overlay = queryOne(this.overlaySelector, this.element);
  183.       this.overlayHeader = queryOne(this.overlayHeaderSelector, this.overlay);
  184.       this.overlayFooter = queryOne(this.overlayFooterSelector, this.overlay);
  185.       this.overlayMedia = queryOne(this.overlayMediaSelector, this.overlay);
  186.       this.overlayCounterCurrent = queryOne(
  187.         this.overlayCounterCurrentSelector,
  188.         this.overlay,
  189.       );
  190.       this.overlayCounterMax = queryOne(
  191.         this.overlayCounterMaxSelector,
  192.         this.overlay,
  193.       );
  194.       this.overlayDownload = queryOne(
  195.         this.overlayDownloadSelector,
  196.         this.overlay,
  197.       );
  198.       this.overlayShare = queryOne(this.overlayShareSelector, this.overlay);
  199.       this.overlayDescription = queryOne(
  200.         this.overlayDescriptionSelector,
  201.         this.overlay,
  202.       );
  203.       this.overlayMeta = queryOne(this.overlayMetaSelector, this.overlay);
  204.       this.overlayPrevious = queryOne(
  205.         this.overlayPreviousSelector,
  206.         this.overlay,
  207.       );
  208.       this.overlayNext = queryOne(this.overlayNextSelector, this.overlay);
  210.       // Create focus trap
  211.       this.focusTrap = createFocusTrap(this.overlay, {
  212.         escapeDeactivates: false,
  213.         returnFocusOnDeactivate: false,
  214.       });
  216.       // Polyfill to support <dialog>
  217.       this.isDialogSupported = true;
  218.       if (!window.HTMLDialogElement) {
  219.         this.isDialogSupported = false;
  220.       }
  222.       // Bind click event on close button
  223.       if (this.attachClickListener && this.closeButton) {
  224.         this.closeButton.addEventListener(
  225.           'click',
  226.           this.handleClickOnCloseButton,
  227.         );
  228.       }
  230.       // Bind click event on gallery items
  231.       if (this.attachClickListener && this.galleryItems) {
  232.         this.galleryItems.forEach((galleryItem) => {
  233.           if (this.attachClickListener) {
  234.             galleryItem.addEventListener('click', this.handleClickOnItem);
  235.           }
  236.           if (this.attachKeyListener) {
  237.             galleryItem.addEventListener('keyup', this.handleKeyPressOnItem);
  238.           }
  239.         });
  240.       }
  242.       // Bind click event on previous button
  243.       if (this.attachClickListener && this.overlayPrevious) {
  244.         this.overlayPrevious.addEventListener(
  245.           'click',
  246.           this.handleClickOnPreviousButton,
  247.         );
  248.       }
  250.       // Bind click event on next button
  251.       if (this.attachClickListener && this.overlayNext) {
  252.         this.overlayNext.addEventListener(
  253.           'click',
  254.           this.handleClickOnNextButton,
  255.         );
  256.       }
  258.       // Bind other close event
  259.       if (!this.isDialogSupported && this.attachKeyListener && this.overlay) {
  260.         this.overlay.addEventListener('keyup', this.handleKeyboard);
  261.       }
  262.       if (this.isDialogSupported && this.overlay) {
  263.         this.overlay.addEventListener('close', this.handleClickOnCloseButton);
  264.       }
  265.     } else {
  266.       this.galleryItems.forEach((galleryItem) => {
  267.         galleryItem.classList.add('ecl-gallery__item__link--frozen');
  268.         galleryItem.addEventListener('click', this.preventClickOnItem);
  269.       });
  270.     }
  272.     // Bind resize events
  273.     if (this.attachResizeListener) {
  274.       window.addEventListener('resize', this.handleResize);
  275.     }
  277.     // Init display of gallery items
  278.     if (this.expandable) {
  279.       this.checkScreen();
  280.       this.hideItems();
  281.     }
  283.     // Add number to gallery items
  284.     this.galleryItems.forEach((galleryItem, key) => {
  285.       galleryItem.setAttribute('data-ecl-gallery-item-id', key);
  286.     });
  288.     // Update counter
  289.     if (this.count) {
  290.       this.count.innerHTML = this.galleryItems.length;
  291.     }
  293.     // Set ecl initialized attribute
  294.     this.element.setAttribute('data-ecl-auto-initialized', 'true');
  295.     ECL.components.set(this.element, this);
  296.   }
  298.   /**
  299.    * Destroy component.
  300.    */
  301.   destroy() {
  302.     if (this.attachClickListener && this.closeButton) {
  303.       this.closeButton.removeEventListener(
  304.         'click',
  305.         this.handleClickOnCloseButton,
  306.       );
  307.     }
  309.     if (this.attachClickListener && this.viewAll) {
  310.       this.viewAll.removeEventListener('click', this.handleClickOnViewAll);
  311.     }
  313.     if (this.attachClickListener && this.galleryItems) {
  314.       this.galleryItems.forEach((galleryItem) => {
  315.         galleryItem.removeEventListener('click', this.handleClickOnItem);
  316.       });
  317.     }
  319.     if (this.attachClickListener && this.overlayPrevious) {
  320.       this.overlayPrevious.removeEventListener(
  321.         'click',
  322.         this.handleClickOnPreviousButton,
  323.       );
  324.     }
  326.     if (this.attachClickListener && this.overlayNext) {
  327.       this.overlayNext.removeEventListener(
  328.         'click',
  329.         this.handleClickOnNextButton,
  330.       );
  331.     }
  333.     if (!this.isDialogSupported && this.attachKeyListener && this.overlay) {
  334.       this.overlay.removeEventListener('keyup', this.handleKeyboard);
  335.     }
  336.     if (this.isDialogSupported && this.overlay) {
  337.       this.overlay.removeEventListener('close', this.handleClickOnCloseButton);
  338.     }
  340.     if (this.attachResizeListener) {
  341.       window.removeEventListener('resize', this.handleResize);
  342.     }
  344.     if (this.element) {
  345.       this.element.removeAttribute('data-ecl-auto-initialized');
  346.       ECL.components.delete(this.element);
  347.     }
  348.   }
  350.   /**
  351.    * Check if current display is desktop or mobile
  352.    */
  353.   checkScreen() {
  354.     if (window.innerWidth > this.breakpointMd) {
  355.       this.isDesktop = true;
  356.     } else {
  357.       this.isDesktop = false;
  358.     }
  359.     if (window.innerWidth > this.breakpointLg) {
  360.       this.isLarge = true;
  361.     }
  362.   }
  364.   iframeResize(iframe) {
  365.     if (!iframe && this.overlay) {
  366.       iframe = queryOne('iframe', this.overlay);
  367.     }
  369.     if (iframe) {
  370.       const width = window.innerWidth;
  372.       setTimeout(() => {
  373.         const height =
  374.           this.overlay.clientHeight -
  375.           this.overlayHeader.clientHeight -
  376.           this.overlayFooter.clientHeight;
  378.         if (width > height) {
  379.           iframe.setAttribute('height', `${height}px`);
  381.           if ((height * 16) / 9 > width) {
  382.             iframe.setAttribute('width', `${width - 0.05 * width}px`);
  383.           } else {
  384.             iframe.setAttribute('width', `${(height * 16) / 9}px`);
  385.           }
  386.         } else {
  387.           iframe.setAttribute('width', `${width}px`);
  388.           if ((width * 4) / 3 > height) {
  389.             iframe.setAttribute('height', `${height - 0.05 * height}px`);
  390.           } else {
  391.             iframe.setAttribute('height', `${(width * 4) / 3}px`);
  392.           }
  393.         }
  394.       }, 0);
  395.     }
  396.   }
  398.   /**
  399.    * @param {Int} rows/item number
  400.    *
  401.    * Hide several gallery items by default
  402.    * - 2 "lines" of items on desktop
  403.    * - only 3 items on mobile or the desired rows or items
  404.    *   when using the view more button.
  405.    */
  406.   hideItems(plus = 0) {
  407.     if (!this.viewAll || this.viewAll.expanded) return;
  409.     if (this.isDesktop) {
  410.       let hiddenItemIds = [];
  411.       // We should browse the list first to mark the items to be hidden, and hide them later
  412.       // otherwise, it will interfer with the calculus
  413.       this.galleryItems.forEach((galleryItem, key) => {
  414.         galleryItem.parentNode.classList.remove('ecl-gallery__item--hidden');
  415.         if (key >= Number(this.visibleItems) + Number(plus)) {
  416.           hiddenItemIds = [...hiddenItemIds, key];
  417.         }
  418.       });
  419.       hiddenItemIds.forEach((id) => {
  420.         this.galleryItems[id].parentNode.classList.add(
  421.           'ecl-gallery__item--hidden',
  422.         );
  423.       });
  424.       return;
  425.     }
  427.     this.galleryItems.forEach((galleryItem, key) => {
  428.       if (key > 2 + Number(plus)) {
  429.         galleryItem.parentNode.classList.add('ecl-gallery__item--hidden');
  430.       } else {
  431.         galleryItem.parentNode.classList.remove('ecl-gallery__item--hidden');
  432.       }
  433.     });
  434.   }
  436.   /**
  437.    * Trigger events on resize
  438.    * Uses a debounce, for performance
  439.    */
  440.   handleResize() {
  441.     clearTimeout(this.resizeTimer);
  442.     this.resizeTimer = setTimeout(() => {
  443.       this.checkScreen();
  444.       this.hideItems();
  445.       this.iframeResize();
  446.     }, 200);
  447.   }
  449.   /**
  450.    * @param {HTMLElement} selectedItem Media element
  451.    */
  452.   updateOverlay(selectedItem) {
  453.     this.selectedItem = selectedItem;
  454.     const embeddedVideo = selectedItem.getAttribute(
  455.       'data-ecl-gallery-item-embed-src',
  456.     );
  457.     const video = queryOne('video', selectedItem);
  458.     let mediaElement = null;
  460.     // Update media
  461.     if (embeddedVideo != null) {
  462.       // Media is a embedded video
  463.       mediaElement = document.createElement('div');
  464.       mediaElement.classList.add('ecl-gallery__slider-embed');
  466.       const mediaIframe = document.createElement('iframe');
  467.       mediaIframe.setAttribute('src', embeddedVideo);
  468.       mediaIframe.setAttribute('frameBorder', '0');
  470.       if (this.overlayMedia) {
  471.         mediaElement.appendChild(mediaIframe);
  472.         this.overlayMedia.innerHTML = '';
  473.         this.overlayMedia.appendChild(mediaElement);
  474.       }
  475.       this.iframeResize(mediaIframe);
  476.     } else if (video != null) {
  477.       // Media is a video
  478.       mediaElement = document.createElement('video');
  479.       mediaElement.setAttribute('poster', video.poster);
  480.       mediaElement.setAttribute('controls', 'controls');
  481.       mediaElement.classList.add('ecl-gallery__slider-video');
  483.       if (this.overlayMedia) {
  484.         this.overlayMedia.innerHTML = '';
  485.         this.overlayMedia.appendChild(mediaElement);
  486.       }
  488.       // Get sources
  489.       const sources = queryAll('source', video);
  490.       sources.forEach((source) => {
  491.         const sourceTag = document.createElement('source');
  492.         sourceTag.setAttribute('src', source.getAttribute('src'));
  493.         sourceTag.setAttribute('type', source.getAttribute('type'));
  494.         mediaElement.appendChild(sourceTag);
  495.       });
  497.       // Get tracks
  498.       const tracks = queryAll('track', video);
  499.       tracks.forEach((track) => {
  500.         const trackTag = document.createElement('track');
  501.         trackTag.setAttribute('src', track.getAttribute('src'));
  502.         trackTag.setAttribute('kind', track.getAttribute('kind'));
  503.         trackTag.setAttribute('srclang', track.getAttribute('srcLang'));
  504.         trackTag.setAttribute('label', track.getAttribute('label'));
  505.         mediaElement.appendChild(trackTag);
  506.       });
  508.       mediaElement.load();
  509.     } else {
  510.       // Media is an image
  511.       const image = queryOne('img', selectedItem);
  512.       const picture = queryOne('picture', selectedItem);
  513.       if (picture) {
  514.         image.classList.remove('ecl-gallery__image');
  515.         mediaElement = picture.cloneNode(true);
  516.       } else {
  517.         // backward compatibility
  518.         mediaElement = document.createElement('img');
  519.         mediaElement.setAttribute('src', image.getAttribute('src'));
  520.         mediaElement.setAttribute('alt', image.getAttribute('alt'));
  521.       }
  522.       mediaElement.classList.add('ecl-gallery__slider-image');
  524.       if (this.overlayMedia) {
  525.         this.overlayMedia.innerHTML = '';
  526.         this.overlayMedia.appendChild(mediaElement);
  527.       }
  528.     }
  530.     // Update counter
  531.     this.overlayCounterCurrent.innerHTML =
  532.       +selectedItem.getAttribute('data-ecl-gallery-item-id') + 1;
  533.     this.overlayCounterMax.innerHTML = this.galleryItems.length;
  535.     // Update share link
  536.     const shareHref = this.selectedItem.getAttribute(
  537.       'data-ecl-gallery-item-share',
  538.     );
  539.     if (shareHref != null) {
  540.       this.overlayShare.href = shareHref;
  541.       this.overlayShare.hidden = false;
  542.     } else {
  543.       this.overlayShare.hidden = true;
  544.     }
  546.     // Update download link
  547.     if (this.overlayDownload !== null && embeddedVideo === null) {
  548.       this.overlayDownload.href = this.selectedItem.href;
  549.       this.overlayDownload.hidden = false;
  550.     } else if (this.overlayDownload !== null) {
  551.       this.overlayDownload.hidden = true;
  552.     }
  554.     // Update meta
  555.     const meta = queryOne(this.metaSelector, selectedItem);
  556.     this.overlayMeta.innerHTML = meta.innerHTML;
  558.     // Update description
  559.     const description = queryOne(this.descriptionSelector, selectedItem);
  560.     this.overlayDescription.innerHTML = description.innerHTML;
  561.   }
  563.   /**
  564.    * Handles keyboard events such as Escape and navigation.
  565.    *
  566.    * @param {Event} e
  567.    */
  568.   handleKeyboard(e) {
  569.     // Detect press on Escape
  570.     // Only used if the browser do not support <dialog>
  571.     if (e.key === 'Escape' || e.key === 'Esc') {
  572.       this.handleClickOnCloseButton();
  573.     }
  574.   }
  576.   /**
  577.    * Invoke listeners for close events.
  578.    */
  579.   handleClickOnCloseButton() {
  580.     if (this.isDialogSupported) {
  581.       this.overlay.close();
  582.     } else {
  583.       this.overlay.removeAttribute('open');
  584.     }
  586.     // Remove iframe
  587.     const embeddedVideo = queryOne('iframe', this.overlayMedia);
  588.     if (embeddedVideo) embeddedVideo.remove();
  590.     // Stop video
  591.     const video = queryOne('video', this.overlayMedia);
  592.     if (video) video.pause();
  594.     // Untrap focus
  595.     this.focusTrap.deactivate();
  597.     // Focus item
  598.     this.selectedItem.focus();
  600.     // Enable scroll on body
  601.     document.body.classList.remove('ecl-u-disablescroll');
  602.   }
  604.   /**
  605.    * Invoke listeners for on pressing the spacebar button.
  606.    *
  607.    * @param {Event} e
  608.    */
  609.   handleKeyPressOnItem(e) {
  610.     if (e.keyCode === 32) {
  611.       // If spacebar trigger the modal
  612.       this.handleClickOnItem(e);
  613.     }
  614.   }
  616.   /**
  617.    * Invoke listeners for on click events on view all.
  618.    *
  619.    * @param {Event} e
  620.    */
  621.   handleClickOnViewAll(e) {
  622.     e.preventDefault();
  623.     if (!this.viewAll) return;
  625.     if (this.viewAll.expanded) {
  626.       delete this.viewAll.expanded;
  627.       this.checkScreen();
  628.       this.hideItems();
  629.       this.viewAll.textContent = this.viewAllLabel;
  630.     } else {
  631.       this.galleryItems.forEach((item) => {
  632.         this.viewAll.expanded = true;
  633.         item.parentNode.classList.remove('ecl-gallery__item--hidden');
  634.         this.viewAll.textContent = this.viewAllLabelExpanded;
  635.       });
  636.     }
  637.   }
  639.   /**
  640.    * Invoke listeners for on click events on the given gallery item.
  641.    *
  642.    * @param {Event} e
  643.    */
  644.   handleClickOnItem(e) {
  645.     e.preventDefault();
  647.     // Disable scroll on body
  648.     document.body.classList.add('ecl-u-disablescroll');
  650.     // Display overlay
  651.     if (this.isDialogSupported) {
  652.       this.overlay.showModal();
  653.     } else {
  654.       this.overlay.setAttribute('open', '');
  655.     }
  657.     // Update overlay
  658.     this.updateOverlay(e.currentTarget);
  660.     // Trap focus
  661.     this.focusTrap.activate();
  662.   }
  664.   /**
  665.    * handle click event on gallery items when no overlay.
  666.    *
  667.    * @param {Event} e
  668.    */
  669.   // eslint-disable-next-line class-methods-use-this
  670.   preventClickOnItem(e) {
  671.     e.preventDefault();
  672.     e.stopPropagation();
  673.   }
  675.   /**
  676.    * Invoke listeners for on click events on previous navigation link.
  677.    */
  678.   handleClickOnPreviousButton() {
  679.     // Get current id
  680.     const currentId = this.selectedItem.getAttribute(
  681.       'data-ecl-gallery-item-id',
  682.     );
  684.     // Get previous id
  685.     let previousId = +currentId - 1;
  686.     if (previousId < 0) previousId = this.galleryItems.length - 1;
  688.     // Stop video
  689.     const video = queryOne('video', this.selectedItem);
  690.     if (video) video.pause();
  692.     // Update overlay
  693.     this.updateOverlay(this.galleryItems[previousId]);
  694.     this.selectedItem = this.galleryItems[previousId];
  696.     return this;
  697.   }
  699.   /**
  700.    * Invoke listeners for on click events on next navigation link.
  701.    */
  702.   handleClickOnNextButton() {
  703.     // Get current id
  704.     const currentId = this.selectedItem.getAttribute(
  705.       'data-ecl-gallery-item-id',
  706.     );
  708.     // Get next id
  709.     let nextId = +currentId + 1;
  710.     if (nextId >= this.galleryItems.length) nextId = 0;
  712.     // Stop video
  713.     const video = queryOne('video', this.selectedItem);
  714.     if (video) video.pause();
  716.     // Update overlay
  717.     this.updateOverlay(this.galleryItems[nextId]);
  718.     this.selectedItem = this.galleryItems[nextId];
  720.     return this;
  721.   }
  722. }
  724. export default Gallery;