Lightbox Overlay

const attemptFocus = element => {
  try {
    element.focus();
  } catch (e) {
    console.log(e);
  }

  return document.activeElement === element;
};

export class Dialog {
  constructor({ dialogId, focusAfterClosed, focusFirst, closeCallBack }) {
    this.dialogNode = document.getElementById(dialogId);
    this.closeCallBack = closeCallBack;
    this.dialogId = dialogId;

    if (this.dialogNode === null) {
      throw new Error(`No element found with id="${dialogId}".`);
    }

    const validRoles = ['dialog', 'alertdialog'];
    const isDialog = (this.dialogNode.getAttribute('role') || '')
      .trim()
      .split(/\s+/g)
      .some(token => validRoles.some(role => token === role));

    if (!isDialog) {
      throw new Error(
        'Dialog() requires a DOM element with ARIA role of dialog or alertdialog.'
      );
    }

    if (typeof focusAfterClosed === 'string') {
      this.focusAfterClosed = document.getElementById(focusAfterClosed);
    } else if (typeof focusAfterClosed === 'object') {
      this.focusAfterClosed = focusAfterClosed;
    } else {
      throw new Error(
        'the focusAfterClosed parameter is required for the aria.Dialog constructor.'
      );
    }

    this.dialogNode.classList.add('lightbox-overlay--active');
    document.body.style.overflow = 'hidden';

    if (typeof focusFirst === 'string') {
      this.focusFirst = document.getElementById(focusFirst);
    } else if (typeof focusFirst === 'object') {
      this.focusFirst = focusFirst;
    } else {
      this.focusFirst = null;
    }

    if (this.focusFirst) {
      this.focusFirst.focus();
    }

    this.lastFocus = document.activeElement;
    this.addEventListeners();
  }

  focusFirstDescendant(element) {
    for (let i = 0; i < element.childNodes.length; i++) {
      const child = element.childNodes[i];

      if (attemptFocus(child) || this.focusFirstDescendant(child)) {
        return true;
      }
    }
    return false;
  }

  trapFocus(event) {
    if (this.dialogNode.contains(event.target)) {
      this.lastFocus = event.target;
    } else {
      this.focusFirstDescendant(this.dialogNode);
      this.lastFocus = document.activeElement;
    }
  }

  destroy() {
    const videoDialog = document.querySelector('#generated-video-dialog');
    const vimeoDialog = document.querySelector('#generated-vimeo-video-dialog');

    // added conditon to fix  search popup close event trigger while video lighbox close
    if (
      this.dialogId === 'efl-search-mechanic-dialog' &&
      ((videoDialog &&
        videoDialog.classList.contains('lightbox-overlay--active')) ||
        (vimeoDialog &&
          vimeoDialog.classList.contains('lightbox-overlay--active')))
    ) {
      return;
    }

    this.removeListeners();
    this.dialogNode.classList.remove('lightbox-overlay--active');
    document.body.style.overflow = 'initial';
    this.focusAfterClosed.focus();

    if (this.closeCallBack) {
      this.closeCallBack();
    }
  }

  // EVENT LISTENERS
  handleEscape(event) {
    if (event.key !== 'Escape') {
      return;
    }
    this.destroy();
  }

  handleClick({ target }) {
    // We are only interested in clicks on the outer dialog, or the close button
    if (
      !target.classList.contains('lightbox-overlay__close') &&
      target.getAttribute('role') !== 'dialog'
    ) {
      return;
    }

    this.destroy();
  }

  removeListeners() {
    document.removeEventListener('focus', this.trapFocus, true);
    document.removeEventListener('keydown', this.handleEscape, true);
    document.removeEventListener('click', this.handleClick, true);
  }

  addEventListeners() {
    document.addEventListener('click', event => this.handleClick(event));
    document.addEventListener('keydown', event => this.handleEscape(event));
    document.addEventListener('focus', event => this.trapFocus(event));
  }
}

export default () => {
  window.openDialog = (
    dialogId,
    focusAfterClosed,
    focusFirst,
    closeCallBack
  ) => {
    return new Dialog({
      dialogId,
      focusAfterClosed,
      focusFirst,
      closeCallBack,
    });
  };
};