{"version":3,"file":"video-modal-13cd108a.js","sources":["../../../../src/scripts/modules/video-modal.ts"],"sourcesContent":["import { Component } from '@verndale/core';\nimport { FocusTrap, createFocusTrap } from 'focus-trap';\nimport { focusableElements } from '../helpers/helpers';\nimport figure from './figure';\nimport { ExtendedWindowType } from '../coveo/engine';\n\nclass VideoModal extends Component {\n  private focusTrap: FocusTrap;\n  private focusableModalElements: NodeList | undefined;\n  private focusableElementsString: string | undefined;\n  private lastFocusedElement: HTMLElement | null | undefined;\n  private videoFigure: figure | undefined;\n\n  constructor(el: HTMLElement) {\n    super(el);\n    this.focusTrap = createFocusTrap(el) || '';\n    this.videoFigure = new figure(this.dom.$figureContainer as HTMLElement);\n  }\n\n  setupDefaults() {\n    this.dom = {\n      $modal: this.el,\n      $closeButton: this.el.querySelector<HTMLElement>(\n        '.video-modal__close-button'\n      ),\n      $backdrop: this.el.querySelector<HTMLElement>('.video-modal__backdrop'),\n      $content: this.el.querySelector<HTMLElement>('.video-modal__content'),\n      $figure: this.el.querySelector<HTMLElement>(\n        '.video-modal__content figure'\n      ),\n      $modalTitle: this.el.querySelector<HTMLElement>('.video-modal__title'),\n      $modalSummary: this.el.querySelector<HTMLElement>(\n        '.video-modal__summary'\n      ),\n      $figureContainer:\n        this.el.querySelector<HTMLElement>('.figure__container'),\n      $captionPicture: this.el.querySelector<HTMLElement>(\n        '.figure__container .figure__media picture'\n      )\n    };\n\n    this.focusTrap = createFocusTrap(this.el) || '';\n    this.focusableElementsString = focusableElements.join(', ');\n    this.focusableModalElements = (this.el as HTMLElement).querySelectorAll(\n      this.focusableElementsString\n    );\n  }\n\n  addListeners() {\n    (this.dom.$backdrop as HTMLElement).addEventListener(\n      'click',\n      this.handleBackdropClick.bind(this)\n    );\n    (this.dom.$modal as HTMLElement).addEventListener(\n      'keydown',\n      this.handleKeydown.bind(this)\n    );\n    (this.dom.$closeButton as HTMLElement).addEventListener(\n      'click',\n      this.closeModal.bind(this)\n    );\n    window.addEventListener('click', this.openModal.bind(this));\n  }\n\n  handleBackdropClick(e: Event) {\n    if (e.target === this.dom.$backdrop) {\n      this.closeModal();\n    }\n  }\n\n  handleKeydown(e: KeyboardEvent) {\n    if (e.key === 'Escape') {\n      this.closeModal();\n    }\n  }\n\n  openModal(e: Event) {\n    const trigger = e.target as HTMLElement;\n\n    if (trigger?.getAttribute('data-trigger-modal') === this.el.id) {\n      this.setModalData(trigger);\n      this.lastFocusedElement = document.activeElement as HTMLElement;\n      this.focusableModalElements?.forEach(element =>\n        (element as HTMLElement).setAttribute('tabindex', '1')\n      );\n\n      (this.dom.$modal as HTMLElement).setAttribute('aria-hidden', 'false');\n      this.focusTrap.activate();\n\n      if (this.focusableModalElements?.length) {\n        if (this.focusableModalElements[0] !== this.dom.$closeButton)\n          (this.focusableModalElements[0] as HTMLElement).focus();\n      }\n\n      const global = window as ExtendedWindowType;\n\n      global.dataLayer?.push({\n        event: 'modal_view',\n        event_category: 'modal overlay',\n        event_action: 'view',\n        event_attributes: {\n          modalName: 'video'\n        }\n      });\n    }\n  }\n\n  setModalData(trigger: HTMLElement | null) {\n    const videoId = trigger?.getAttribute('data-video-id');\n    const imageSrc = trigger?.getAttribute('data-image-src');\n    const imageSrcset = trigger?.getAttribute('data-image-srcset');\n    const imageHeight = trigger?.getAttribute('data-image-height');\n    const imageWidth = trigger?.getAttribute('data-image-width');\n    const imageDescription = trigger?.getAttribute('data-image-description');\n    const imageSrcsetArray = imageSrcset?.split(',');\n    const videoTitle = trigger?.getAttribute('data-video-title');\n    const videoSummary = trigger?.getAttribute('data-video-summary');\n    const videoFigure = this.dom.$figure as HTMLElement;\n    const videoPlayerPlay = videoFigure?.dataset.videoPlayerPlay;\n    const videoPlayerEnd = videoFigure?.dataset.videoPlayerEnd;\n    const videoPlayerProgress = videoFigure?.dataset.videoPlayerProgress;\n\n    if (videoPlayerPlay) {\n      videoFigure.dataset.videoPlayerPlay = videoPlayerPlay.replace(\n        'videoNamePlaceholder',\n        videoTitle as string\n      );\n    }\n\n    if (videoPlayerEnd) {\n      videoFigure.dataset.videoPlayerEnd = videoPlayerEnd.replace(\n        'videoNamePlaceholder',\n        videoTitle as string\n      );\n    }\n\n    if (videoPlayerProgress) {\n      videoFigure.dataset.videoPlayerProgress = videoPlayerProgress.replace(\n        'videoNamePlaceholder',\n        videoTitle as string\n      );\n    }\n\n    let pictureContent = '';\n    this.videoFigure?.handleReplaceId(videoId as string, true);\n    (this.dom.$modalTitle as HTMLElement).innerHTML = videoTitle as string;\n    (this.dom.$modalSummary as HTMLElement).innerHTML = videoSummary as string;\n\n    imageSrcsetArray?.forEach(source => {\n      if (source.length > 0) {\n        const sourceArray = source.split(' : ');\n        pictureContent += `<source media=\"(max-width: ${sourceArray[0]})\" srcset=\"${sourceArray[1]}\">`;\n      }\n    });\n    pictureContent += `<img src=\"${imageSrc}\" alt=\"${imageDescription}\" height=\"${imageHeight}\" width=\"${imageWidth}\">`;\n    (this.dom.$captionPicture as HTMLElement).innerHTML = pictureContent;\n  }\n\n  closeModal() {\n    this.focusTrap.deactivate();\n    (this.dom.$modal as HTMLElement).setAttribute('aria-hidden', 'true');\n    if (this.lastFocusedElement) this.lastFocusedElement.focus();\n    this.videoFigure?.handleExternalVideoPause();\n\n    const global = window as ExtendedWindowType;\n\n    global.dataLayer?.push({\n      event: 'modal_close',\n      event_category: 'modal overlay',\n      event_action: 'close',\n      event_attributes: {\n        modalName: 'video'\n      }\n    });\n  }\n}\n\nexport default VideoModal;\n"],"names":["VideoModal","Component","el","__publicField","createFocusTrap","figure","focusableElements","trigger","_a","element","_b","_c","videoId","imageSrc","imageSrcset","imageHeight","imageWidth","imageDescription","imageSrcsetArray","videoTitle","videoSummary","videoFigure","videoPlayerPlay","videoPlayerEnd","videoPlayerProgress","pictureContent","source","sourceArray"],"mappings":"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"}