hero modal

eds/blocks/hero/hero.js

@@ -1,4 +1,53 @@
 import { createAutoplayedVideo } from '../../scripts/scripts.js';
+import { calciteButton } from '../../scripts/dom-helpers.js';
+
+// decorate modal
+function decorateModal() {
+  const iframe = document.createElement('iframe');
+  iframe.classList.add('co3-modal', 'iframe');
+  const videoLink = document.querySelector('.video-link');
+  if (videoLink) {
+    iframe.setAttribute('src', videoLink.getAttribute('href'));
+  }
+  const modal = document.createElement('div');
+  modal.classList.add('co3-modal', 'calcite-mode-dark');
+  const closeButton = document.createElement('calcite-icon');
+  closeButton.classList.add('co3-modal-container', 'calcite-icon');
+  closeButton.setAttribute('icon', 'x');
+  closeButton.setAttribute('scale', 'm');
+  closeButton.setAttribute('aria-label', 'close modal');
+  closeButton.setAttribute('aria-hidden', 'false');
+  closeButton.setAttribute('tabindex', '0');
+  closeButton.addEventListener('click', () => {
+    removeModal(modal);
+  });
+  closeButton.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter' || event.key === ' ' || event.key === 'Escape') {
+      removeModal(modal);
+    }
+  });
+
+  const modalContainer = document.createElement('div');
+  modalContainer.classList.add('co3-modal-container');
+  modalContainer.setAttribute('tabindex', '0');
+  modalContainer.appendChild(iframe);
+  modalContainer.appendChild(closeButton);
+  modal.appendChild(modalContainer);
+  document.body.setAttribute('tabindex', '-1');
+  document.body.setAttribute('aria-hidden', 'true');
+  document.body.appendChild(modal);
+  document.addEventListener('keydown', handleEscKeyPress);
+  modal.addEventListener('click', (event) => {
+    if (event.target === modal) {
+      removeModal(modal);
+    }
+  });
+
+  iframe.addEventListener('load', () => {
+    toggleLoader();
+    modalContainer.focus();
+  });
+}
 
 export default function decorate(block) {
   const newChildren = [...block.children].map((entry) => {
@@ -36,7 +85,6 @@ export default function decorate(block) {
   }
 
   const videoAssets = block.querySelectorAll('a');
-
   if (videoAssets.length > 0) {
     const videoAsset = videoAssets[videoAssets.length - 1];
 
@@ -52,4 +100,27 @@ export default function decorate(block) {
       block.append(videoElement);
     }
   }
+
+  // Query the video link and enable the play button
+  const videoLink = block.querySelector('.video-link');
+  const btnContainer = videoLink.closest('.button-container');
+  console.log('btnContainer', btnContainer);
+
+  if ((videoLink) && (btnContainer)) {
+    btnContainer.replaceWith(calciteButton({
+      'icon-end': 'play-f',
+      appearance: 'solid',
+      href: videoLink.href,
+      label: videoLink.textContent,
+    }, videoLink.textContent));
+  }
+  // listen for click events on 'calcite-button'
+  const calciteBtn = block.querySelector('calcite-button');
+  if (calciteBtn) {
+    calciteBtn.addEventListener('click', (evt) => {
+      console.log('clicked', calciteBtn);
+      evt.preventDefault();
+      decorateModal();
+    });
+  }
 }