@iamproperty/components 6.0.0 → 6.1.0--beta

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

@@ -0,0 +1,82 @@
+// @ts-nocheck
+import {trackComponent, trackComponentRegistered} from "../_global";
+import {cardHTML,setupCard} from "../../modules/card.module";
+
+trackComponentRegistered("iam-record-card");
+
+class iamRecordCard 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/record-card.component.css";`;
+    
+    const template = document.createElement('template');
+    template.innerHTML = `
+    <style>
+    ${this.hasAttribute('css') ? `@import "${this.getAttribute('css')}";` : ``}
+    
+    ${loadCSS}
+    </style>
+    ${cardHTML}
+    `;
+
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+	async connectedCallback() {
+
+    const cardComponent = this;
+    const cardHead =  cardComponent.shadowRoot.querySelector('.card__head');
+    setupCard(cardComponent);
+
+    Array.from(cardComponent.querySelectorAll(':scope > *:not([slot])')).forEach((element,index)=>{
+
+      element.setAttribute('slot','details');
+    });
+
+    if(cardComponent.hasAttribute('data-avatar')){
+
+      cardHead.innerHTML += `<img src="${cardComponent.getAttribute('data-avatar')}" alt="" loading="lazy" class="card__avatar" part="avatar" />`;
+    }
+  
+
+    trackComponent(cardComponent,"iam-record-card",[]);
+  }
+
+  static get observedAttributes() {
+    return ["data-image"];
+  }
+  
+  attributeChangedCallback(attrName, oldVal, newVal) {
+    switch (attrName) {
+      case "data-image": {
+
+        if(oldVal != newVal){
+
+          const cardHeadImg = this.shadowRoot.querySelector('.card__head img');
+
+          if(cardHeadImg)
+            cardHeadImg.setAttribute('src',newVal);
+        }
+        break;
+      }
+      case "data-avatar": {
+
+        if(oldVal != newVal){
+
+          const cardHeadImg = this.shadowRoot.querySelector('.card__avatar');
+
+          if(cardHeadImg)
+            cardHeadImg.setAttribute('src',newVal);
+        }
+        break;
+      }
+    }
+
+  }
+}
+
+export default iamRecordCard;

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

@@ -0,0 +1,227 @@
+// @ts-nocheck
+import {trackComponent, trackComponentRegistered} from "../_global";
+import {cardHTML,setupCard} from "../../modules/card.module";
+
+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() {
+
+    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')){
+        let loaded = await this.loadYouTubeScripts();
+      }
+      cardHead.addEventListener('click',function(){
+
+        const customEvent = new CustomEvent("play-video", { detail: { 'Video Type': 'YoutTube', 'ID': cardComponent.getAttribute('data-youtube') } });
+        cardComponent.dispatchEvent(customEvent);
+
+        cardComponent.createYoutTubeVideo(embed);
+        dialog.showModal();
+      });
+
+      dialog.addEventListener("close", (event) => {
+
+        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", (event) => {
+        
+        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']);
+  }
+
+  loadYouTubeScripts(){
+
+    return new Promise((resolve, reject) => {
+
+      const image = new Image();
+      image.onload = function(){
+
+        // This code loads the IFrame Player API code asynchronously.
+        var tag = document.createElement('script');
+        tag.src = "https://www.youtube.com/iframe_api";
+        var firstScriptTag = document.getElementsByTagName('script')[0];
+        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+        document.body.classList.add('youtubeLoaded');
+        resolve(true);
+      };
+      image.onerror = function(){
+        reject(false);
+      };
+      image.src = "https://youtube.com/favicon.ico";
+    });
+
+  }
+
+  createYoutTubeVideo(target){
+
+    if(typeof window.player == "undefined"){
+      window.player = [];
+    }
+
+    var link_id = target.getAttribute('id');
+    var video_id = this.getAttribute('data-youtube');
+
+    console.log(window.player)
+
+    if(typeof window.player[link_id] != 'undefined' && typeof window.player[link_id].pauseVideo == "function"){
+      
+      window.player[link_id].playVideo();
+
+      return false;
+    }
+
+    // This function creates an <iframe> (and YouTube player) after the API code downloads.
+    //function onYouTubeIframeAPIReady() {
+
+      window.player[link_id] = new YT.Player(link_id, {
+        height: '100%',
+        width: '100%',
+        videoId: video_id,
+        playerVars: {
+          'modestbranding': 1,
+          'playsinline': 1,
+          'rel': 0,
+          'showinfo': 0
+        },
+        events: {
+          'onReady': onPlayerReady,
+          'onStateChange': onPlayerStateChange
+        }
+      });
+    //}
+    //onYouTubeIframeAPIReady();
+
+    // The API will call this function when the video player is ready.
+    function onPlayerReady(event) {
+      // Play the video straight away
+      event.target.playVideo();
+    }
+
+    // The API calls this function when the player's state changes.
+    // The function indicates that when playing a video (state=1)
+    var done = false;
+    function onPlayerStateChange(event) {
+
+      if (event.data == YT.PlayerState.PLAYING && !done) {
+
+        var link = document.getElementById(link_id);
+        link.classList.add('player-ready');
+
+        done = true;
+      }
+    }
+  }
+
+  static get observedAttributes() {
+    return ["data-image"];
+  }
+  
+  attributeChangedCallback(attrName, oldVal, newVal) {
+    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.ts

@@ -0,0 +1,38 @@
+// @ts-nocheck
+const components = ["accordion","header","table","tabs",'card','filter-card','video-card','record-card',"filterlist",'applied-filters','pagination','notification','actionbar','nav','collapsible-side','address-lookup','fileupload','search','inline-edit','multiselect','slider','carousel','marketing','barchart'];
+
+const prefix = "iam"
+const options = {
+  rootMargin: '50px',
+  threshold: 0.1
+}
+const componentExt = ".component.min.js";
+
+// Load components - Each component will load once the first of its type has been loaded
+components.forEach((component) => {
+
+  if(document.getElementsByTagName(`${prefix}-${component}`).length === 0)
+    return;
+
+  let callback = (entries:any) => {
+    entries.forEach((entry:any) => {
+      
+      if(entry.intersectionRatio > 0){
+
+        console.log(component)
+        
+        import(`./components/${component}/${component}${componentExt}`).then(module => {
+          if (!window.customElements.get(`${prefix}-${component}`))
+            window.customElements.define(`${prefix}-${component}`, module.default);
+        }).catch((err) => {
+          console.log(err.message);
+        });  
+
+        intObserver.unobserve(entry.target);
+      }
+    });
+  };
+
+  const intObserver = new IntersectionObserver(callback, options);
+  intObserver.observe(document.getElementsByTagName(`${prefix}-${component}`)[0]);
+});

package/assets/ts/modules/card.module.ts

@@ -0,0 +1,43 @@
+export const cardHTML = `<div class="card__head" part="head">
+  <slot name="head"></slot>
+</div>
+<div class="card__badges"><slot name="badges"></slot></div>
+<slot name="checkbox" class="activate-prevent-hover"></slot>
+<div class="card__body" part="body">
+  <slot></slot>
+  <slot name="secondary" part="secondary"></slot>
+</div>
+<div class="card__details" part="details">
+  <slot name="details"></slot>
+</div>
+<div class="card__footer" part="footer">
+  <slot name="footer"></slot>
+</div>`;
+
+
+export const setupCard = (cardComponent:any) => {
+
+  cardComponent.classList.add('card');
+  const cardHead =  cardComponent.shadowRoot.querySelector('.card__head');
+  const cardBody =  cardComponent.shadowRoot.querySelector('.card__body');
+
+  if(cardComponent.hasAttribute('data-image')){
+
+    cardHead.innerHTML += `<img src="${cardComponent.getAttribute('data-image')}" alt="" loading="lazy" part="image" />`;
+  }
+
+
+  // Inset the HTML for the data total or icon fallback
+  if(cardComponent.hasAttribute('data-total')){
+
+    cardBody.insertAdjacentHTML('beforeend', `<div class="card__total">${cardComponent.getAttribute('data-total')}</div>`);
+  }
+  else if(cardComponent.querySelector('[slot="total-icon"]')){
+    
+    cardBody.insertAdjacentHTML('beforeend', `<div class="card__total"><slot name="total-icon"></slot></div>`);
+  }
+
+  if(!cardComponent.querySelector('[slot="badges"]')){
+    cardComponent.shadowRoot.querySelector('.card__badges').remove();
+  }
+}

package/assets/ts/modules/dialogs.ts

@@ -1,6 +1,4 @@
 // @ts-nocheck
-import { createEmbed } from "./youtubevideo"; 
-
 const extendDialogs = (body) => {
 
   Array.from(body.querySelectorAll('dialog[open]')).forEach((dialog, index) => {
@@ -231,12 +229,6 @@ const extendDialogs = (body) => {
 
 export const createDialog = (dialog) => { 
 
-  // Create the video embed
-  let videoButton = dialog.querySelector('.youtube-embed a');
-  if (videoButton){
-    createEmbed(videoButton)
-  }
-
   // Multi dialog
   if(dialog.classList.contains('dialog--multi') && !dialog.querySelector(':scope > .steps')) {
     createMultiFormDialog(dialog);

package/assets/ts/modules/table.ts

@@ -758,7 +758,7 @@ export const filterTable = (table, form, wrapper) => {
   });
 
   // Work out what to display after pagination
-  Array.from(table.querySelectorAll('tbody tr:not(.filtered')).forEach((row, index) => {
+  Array.from(table.querySelectorAll('tbody tr:not(.filtered)')).forEach((row, index) => {
 
     matched++;
 

package/assets/ts/scripts.ts

@@ -0,0 +1,22 @@
+// @ts-nocheck
+// Modules
+import * as helpers from '../js/modules/helpers'
+import extendDialogs from '../js/modules/dialogs'
+import createDataLayer from '../js/modules/data-layer'
+import extendInputs from '../js/modules/inputs';
+import createDynamicEvents from '../js/modules/dynamicEvents'
+
+// Attach classes to dom elements
+document.addEventListener("DOMContentLoaded", function() {
+
+  createDataLayer();
+  createDynamicEvents();
+  
+  // Global stuff
+  helpers.addBodyClasses(document.body);
+  helpers.addGlobalEvents(document.body);
+  
+  extendDialogs(document.body);
+  extendInputs(document.body);
+
+});

package/assets/ts/tests/filterlist.spec.ts

@@ -24,6 +24,6 @@ describe('addDataAttributes', () => {
   test('should add a class of d-none to each item except the one containing Lucas Myers', () => {
 
     expect(list.querySelectorAll('li:not(.d-none)').length).toEqual(1);
-    expect(list.querySelector('li:not(.d-none').textContent).toEqual('Lucas Myers');
+    expect(list.querySelector('li:not(.d-none)').textContent).toEqual('Lucas Myers');
   });
 });