@iamproperty/components 7.7.1--beta4 → 7.7.1--beta6

package/assets/ts/components/video-card/video-card.component.ts

@@ -1,150 +1,129 @@
-import { trackComponent, trackComponentRegistered } from '../_global';
-import { cardHTML, setupCard } from '../../modules/card.module';
-import { loadYouTubeScripts, createYoutTubeVideo } from '../../modules/videos';
-
-trackComponentRegistered('iam-video-card');
-
-class iamVideoCard extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-
-    const assetLocation = document.body.hasAttribute('data-assets-location')
-      ? document.body.getAttribute('data-assets-location')
-      : '/assets';
-    const loadCSS = `@import "${assetLocation}/css/components/video-card.component.css";`;
-
-    const template = document.createElement('template');
-    template.innerHTML = `
-    <style>
-    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
-    
-    ${loadCSS}
-    </style>
-    ${cardHTML}
-    <dialog>
-      <div class="embed"></div>
-    </dialog>
-    `;
-
-    this.shadowRoot.appendChild(template.content.cloneNode(true));
-  }
-
-  async connectedCallback(): void {
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const cardComponent = this;
-    const cardHead = cardComponent.shadowRoot.querySelector('.card__head');
-
-    const randLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));
-    const link_id = randLetter + Date.now();
-
-    let dialog;
-    let embed;
-
-    setupCard(cardComponent);
-
-    // Check if youtube or vimeo video link is present
-    if (cardComponent.querySelector('[data-youtube]'))
-      cardComponent.setAttribute(
-        'data-youtube',
-        cardComponent.querySelector('[data-youtube]').getAttribute('data-youtube')
-      );
-
-    if (cardComponent.querySelector('[data-vimeo]'))
-      cardComponent.setAttribute('data-vimeo', cardComponent.querySelector('[data-vimeo]').getAttribute('data-vimeo'));
-
-    // General dialog stuff
-    if (cardComponent.hasAttribute('data-youtube') || cardComponent.hasAttribute('data-vimeo')) {
-      cardHead.setAttribute('tabindex', '0');
-
-      // Add dialog to page
-      if (!document.getElementById(`${link_id}-dialog`)) {
-        document.body.insertAdjacentHTML(
-          'beforeend',
-          `<dialog id="${link_id}-dialog"><div class="embed" id="${link_id}"></div></dialog>`
-        );
-      }
-
-      dialog = document.getElementById(`${link_id}-dialog`);
-      embed = document.getElementById(link_id);
-    }
-
-    // Youtube
-    if (cardComponent.hasAttribute('data-youtube')) {
-      // Load the scripts only once
-      if (!document.body.classList.contains('youtubeLoaded')) {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        const loaded = await loadYouTubeScripts();
-      }
-      cardHead.addEventListener('click', function () {
-        const customEvent = new CustomEvent('play-video', {
-          detail: { 'Video Type': 'YoutTube', ID: cardComponent.getAttribute('data-youtube') },
-        });
-        cardComponent.dispatchEvent(customEvent);
-
-        createYoutTubeVideo(embed, this.getAttribute('[data-youtube]'));
-        dialog.showModal();
-      });
-
-      dialog.addEventListener('close', () => {
-        if (
-          window.player[embed.getAttribute('id')] &&
-          typeof window.player[embed.getAttribute('id')].pauseVideo == 'function'
-        ) {
-          window.player[embed.getAttribute('id')].pauseVideo();
-        }
-
-        const customEvent = new CustomEvent('close-video', {
-          detail: { 'Video Type': 'YoutTube', ID: cardComponent.getAttribute('data-youtube') },
-        });
-        cardComponent.dispatchEvent(customEvent);
-      });
-    } else if (cardComponent.hasAttribute('data-vimeo')) {
-      // Vimeo
-
-      cardHead.addEventListener('click', function () {
-        const videoId = cardComponent.getAttribute('data-vimeo');
-
-        const customEvent = new CustomEvent('play-video', {
-          detail: { 'Video Type': 'Vimeo', ID: videoId },
-        });
-        cardComponent.dispatchEvent(customEvent);
-
-        if (!embed.querySelector('iframe'))
-          embed.innerHTML = `<iframe src="https://player.vimeo.com/video/${videoId}?autoplay=1" width="100%" height="100%" frameborder="0" allow="autoplay; encrypted-media" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>`;
-
-        dialog.showModal();
-      });
-
-      dialog.addEventListener('close', () => {
-        embed.innerHTML = ``; // Remove the video since we cant pause it
-
-        const customEvent = new CustomEvent('close-video', {
-          detail: { 'Video Type': 'Vimeo', ID: cardComponent.getAttribute('data-vimeo') },
-        });
-        cardComponent.dispatchEvent(customEvent);
-      });
-    }
-
-    trackComponent(cardComponent, 'iam-video-card', ['play-video', 'close-video']);
-  }
-
-  static get observedAttributes(): any {
-    return ['data-image'];
-  }
-
-  attributeChangedCallback(attrName, oldVal, newVal): void {
-    switch (attrName) {
-      case 'data-image': {
-        if (oldVal != newVal) {
-          const cardHeadImg = this.shadowRoot.querySelector('.card__head img');
-
-          if (cardHeadImg) cardHeadImg.setAttribute('src', newVal);
-        }
-        break;
-      }
-    }
-  }
-}
-
-export default iamVideoCard;
+import { trackComponent, trackComponentRegistered } from '../_global';
+import { cardHTML, setupCard } from '../../modules/card.module';
+import { videoHTML, loadYouTubeScripts, createYoutTubeVideo,openYoutubeVideo,openVimeoVideo } from '../../modules/videos';
+import { openModal,closeModal,closeButtonHtml } from '../../modules/modal';
+
+trackComponentRegistered('iam-video-card');
+
+class iamVideoCard extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
+    const loadCSS = `@import "${assetLocation}/css/components/video-card.component.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    
+    ${loadCSS}
+    </style>
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous" />
+    ${cardHTML}
+    <dialog>
+      ${closeButtonHtml}
+      ${videoHTML}
+    </dialog>
+    `;
+
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  async connectedCallback(): void {
+    // eslint-disable-next-line @typescript-eslint/no-this-alias
+    const cardComponent = this;
+    const cardHead = cardComponent.shadowRoot.querySelector('.card__head');
+    const closeButton = this.shadowRoot?.querySelector('[data-close]');
+
+    this.insertAdjacentHTML('beforeend', `<div class="embed" slot="video"></div>`);
+    const embed = this.querySelector('.embed');
+
+    setupCard(cardComponent);
+    
+    if (cardComponent.querySelector('[data-youtube]')){
+      
+      cardComponent.setAttribute('data-youtube',cardComponent.querySelector('[data-youtube]').getAttribute('data-youtube'));
+      cardComponent.querySelector('[data-youtube]')?.remove();
+    }
+
+    if (cardComponent.querySelector('[data-vimeo]')){
+      
+      cardComponent.setAttribute('data-vimeo', cardComponent.querySelector('[data-vimeo]').getAttribute('data-vimeo'));
+      cardComponent.querySelector('[data-vimeo]')?.remove();
+    }
+    
+    
+
+    cardHead.insertAdjacentHTML(
+          'beforeend',
+          `<button class="btn btn-compact fa-play colour-success">Play</button>`
+        );
+
+        
+    const button = cardHead?.querySelector('button');
+
+    cardHead.tabIndex = 6;
+    button?.tabIndex = -1;
+
+    cardHead.addEventListener('click', () => {
+      
+      if(this.hasAttribute('data-youtube')){
+        const youtubeId = this.getAttribute('data-youtube');
+        embed?.setAttribute('id',youtubeId);
+        openYoutubeVideo(this);
+        openModal(this);
+      }
+      else if(this.hasAttribute('data-vimeo')) {
+        openVimeoVideo(this);
+        openModal(this);
+      }
+    });
+
+    closeButton?.addEventListener('click', () => {
+      closeModal(this);
+
+      if(this.hasAttribute('data-youtube')){
+        const youtubeId = this.getAttribute('data-youtube');
+
+        if (window.player[youtubeId] && typeof window.player[youtubeId].pauseVideo == 'function') {
+          window.player[youtubeId].pauseVideo();
+        }
+      }
+      else if(this.hasAttribute('data-vimeo')) {
+        
+        embed.innerHTML = ``; // Remove the video since we cant pause it
+
+        const customEvent = new CustomEvent('close-video', {
+          detail: { 'Video Type': 'Vimeo', ID: this.getAttribute('data-vimeo') },
+        });
+        this.dispatchEvent(customEvent);
+        window.dataLayer.push(customEvent.detail);
+      }
+    });
+
+    trackComponent(cardComponent, 'iam-video-card', ['play-video', 'close-video']);
+  }
+
+  static get observedAttributes(): any {
+    return ['data-image'];
+  }
+
+  attributeChangedCallback(attrName, oldVal, newVal): void {
+    switch (attrName) {
+      case 'data-image': {
+        if (oldVal != newVal) {
+          const cardHeadImg = this.shadowRoot.querySelector('.card__head img');
+
+          if (cardHeadImg) cardHeadImg.setAttribute('src', newVal);
+        }
+        break;
+      }
+    }
+  }
+}
+
+export default iamVideoCard;

package/assets/ts/components/video-modal/video-modal.component.ts

@@ -1,137 +1,88 @@
-import { trackComponent, trackComponentRegistered } from '../_global';
-import { loadYouTubeScripts, createYoutTubeVideo } from '../../modules/videos';
-import { openModal,closeModal,closeButtonHtml } from '../../modules/modal';
-
-trackComponentRegistered('iam-video-modal');
-
-class iamVideoCard extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-
-    const assetLocation = document.body.hasAttribute('data-assets-location')
-      ? document.body.getAttribute('data-assets-location')
-      : '/assets';
-    const loadCSS = `@import "${assetLocation}/css/components/modal.component.css";`;
-
-    const template = document.createElement('template');
-    template.innerHTML = `
-    <style>
-    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
-    
-    ${loadCSS}
-    </style>
-
-    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous" />
-
-    <dialog>
-      ${closeButtonHtml}
-      <slot></slot>
-    </dialog>
-    `;
-
-    this.shadowRoot.appendChild(template.content.cloneNode(true));
-  }
-
-  openYoutubeVideo = async (id, component):void => {
-
-    const embed = component.querySelector('.embed');
-
-    openModal(id, component);
-
-    const youtubeId = component.getAttribute('data-youtube');
-    let loaded;
-    if (!document.body.classList.contains('youtubeLoaded')) {
-      
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      loaded = await loadYouTubeScripts();
-    }
-
-    const customEvent = new CustomEvent('play-video', {
-      detail: { 'Video Type': 'YoutTube', ID: youtubeId },
-    });
-    component.dispatchEvent(customEvent);
-
-    const interval = setInterval(():void => {
-
-      if(typeof YT != "undefined"){
-        clearInterval(interval);
-        createYoutTubeVideo(embed, youtubeId);
-      }
-    }, 200);
-    // Limit the number of calls
-    setTimeout(function() {
-      clearInterval(interval)
-    }, 2000);
-
-  } 
-  
-  openVimeoVideo = async (id, component):void => {
-
-    const embed = component.querySelector('.embed');
-
-    openModal(id, component);
-
-    const vimeoId = component.getAttribute('data-vimeo');
-
-    const customEvent = new CustomEvent('play-video', {
-      detail: { 'Video Type': 'Vimeo', ID: vimeoId },
-    });
-    component.dispatchEvent(customEvent);
-    window.dataLayer.push(customEvent.detail);
-
-    if (!embed.querySelector('iframe'))
-      embed.innerHTML = `<iframe src="https://player.vimeo.com/video/${vimeoId}?autoplay=1" width="100%" height="100%" frameborder="0" allow="autoplay; encrypted-media" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>`;
-
-  } 
-
-  async connectedCallback(): void {
-    
-    const id = this.getAttribute('id');
-    const closeButton = this.shadowRoot?.querySelector('[data-close]');
-    
-    this.innerHTML = `<div class="embed"></div>`
-    const embed = this.querySelector('.embed');
-
-    document.addEventListener('click', async (e) => {
-
-      if(e.target.closest(`[command="show-modal"][commandfor="${id}"]`)){
-
-        e.preventDefault();
-
-        if(this.hasAttribute('data-youtube')){
-          const youtubeId = this.getAttribute('data-youtube');
-          embed?.setAttribute('id',youtubeId);
-          this.openYoutubeVideo(id, this);
-        }
-        else if(this.hasAttribute('data-vimeo')) {
-          this.openVimeoVideo(id, this);
-        }
-      }
-    });
-    
-    closeButton?.addEventListener('click', () => {
-      closeModal(id, this);
-
-      if(this.hasAttribute('data-youtube')){
-        const youtubeId = this.getAttribute('data-youtube');
-
-        if (window.player[youtubeId] && typeof window.player[youtubeId].pauseVideo == 'function') {
-          window.player[youtubeId].pauseVideo();
-        }
-      }
-      else if(this.hasAttribute('data-vimeo')) {
-        
-        embed.innerHTML = ``; // Remove the video since we cant pause it
-
-        const customEvent = new CustomEvent('close-video', {
-          detail: { 'Video Type': 'Vimeo', ID: this.getAttribute('data-vimeo') },
-        });
-        this.dispatchEvent(customEvent);
-        window.dataLayer.push(customEvent.detail);
-      }
-    });
-  }
-}
-
-export default iamVideoCard;
+import { trackComponent, trackComponentRegistered } from '../_global';
+import { videoHTML, loadYouTubeScripts, createYoutTubeVideo,openYoutubeVideo,openVimeoVideo } from '../../modules/videos';
+import { openModal,closeModal,closeButtonHtml } from '../../modules/modal';
+
+trackComponentRegistered('iam-video-modal');
+
+class iamVideoCard extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
+    const loadCSS = `@import "${assetLocation}/css/components/modal.component.css";`;
+
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    
+    ${loadCSS}
+    </style>
+
+    <link rel="stylesheet" href="https://kit.fontawesome.com/8bd0fca975.css" crossorigin="anonymous" />
+
+    <dialog>
+      ${closeButtonHtml}
+      ${videoHTML}
+    </dialog>
+    `;
+
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  async connectedCallback(): void {
+    
+    const id = this.getAttribute('id');
+    const closeButton = this.shadowRoot?.querySelector('[data-close]');
+    
+    this.innerHTML = `<div class="embed" slot="video"></div>`;
+    const embed = this.querySelector('.embed');
+
+    document.addEventListener('click', (e) => {
+
+      if(e.target.closest(`[command="show-modal"][commandfor="${id}"]`)){
+
+        e.preventDefault();
+
+        if(this.hasAttribute('data-youtube')){
+          const youtubeId = this.getAttribute('data-youtube');
+          embed?.setAttribute('id',youtubeId);
+          openYoutubeVideo(this);
+          openModal(this);
+        }
+        else if(this.hasAttribute('data-vimeo')) {
+          openVimeoVideo(this);
+          openModal(this);
+        }
+      }
+    });
+
+    
+    closeButton?.addEventListener('click', () => {
+      closeModal(this);
+
+      if(this.hasAttribute('data-youtube')){
+        const youtubeId = this.getAttribute('data-youtube');
+
+        if (window.player[youtubeId] && typeof window.player[youtubeId].pauseVideo == 'function') {
+          window.player[youtubeId].pauseVideo();
+        }
+      }
+      else if(this.hasAttribute('data-vimeo')) {
+        
+        embed.innerHTML = ``; // Remove the video since we cant pause it
+
+        const customEvent = new CustomEvent('close-video', {
+          detail: { 'Video Type': 'Vimeo', ID: this.getAttribute('data-vimeo') },
+        });
+        this.dispatchEvent(customEvent);
+        window.dataLayer.push(customEvent.detail);
+      }
+    });
+  }
+}
+
+export default iamVideoCard;