@iamproperty/components 3.6.0 → 3.7.0

package/assets/ts/modules/dialogs.ts

@@ -0,0 +1,237 @@
+// @ts-nocheck
+import { createEmbed } from "./youtubevideo"; 
+
+const extendDialogs = (body) => {
+
+  // Dialogs/modals
+  body.addEventListener('click', (event) => {
+
+    // Modal
+    if (event && event.target instanceof HTMLElement && event.target.closest('[data-modal]')){
+
+      const button = event.target.closest('[data-modal]');
+      const modalID = button.hasAttribute('data-modal') ? button.getAttribute('data-modal') : button.getAttribute('data-filter');
+      const dialog = document.querySelector(`dialog#${modalID}`);
+      
+      createDialog(dialog);
+
+      
+      // Prevent the user from escaping the model when transactional
+      if(dialog.querySelector(':scope > .mh-lg > form:last-child > button:last-child, :scope > .mh-lg > button:last-child') && !dialog.classList.contains('dialog--multi')) {
+        dialog.addEventListener("cancel", (e) => {
+          e.preventDefault();
+        });        
+      }
+
+      // Create the video embed
+      let videoButton = dialog.querySelector('.youtube-embed a');
+      if (videoButton){
+        createEmbed(videoButton)
+      }
+
+      // Open the modal!
+      dialog.showModal();
+
+      dialog.focus();
+
+      console.log(dialog.querySelector('button'));
+
+      window.dataLayer = window.dataLayer || [];
+      window.dataLayer.push({
+        "event": "openModal",
+        "id": modalID
+      });
+    };
+  
+    // Close modal
+    if (event && event.target instanceof HTMLElement && event.target.closest('button.dialog__close')){
+      const dialog = event.target.closest('dialog[open]');
+
+      event.preventDefault();
+      dialog.close()
+        
+      window.dataLayer = window.dataLayer || [];
+      window.dataLayer.push({
+        "event": "closeModal",
+        "id": dialog.getAttribute('id')
+      });
+    }
+
+    // Track default close buttons
+    if (event && event.target instanceof HTMLElement && event.target.closest('button[formmethod="dialog"]')){
+      const dialog = event.target.closest('dialog[open]');
+
+      window.dataLayer = window.dataLayer || [];
+      window.dataLayer.push({
+        "event": "closeModal",
+        "id": dialog.getAttribute('id')
+      });
+    }
+    
+    // Close the modal when clicked on the backdrop
+    if (event && event.target instanceof HTMLElement && event.target.closest('dialog[open]')){
+      const dialog = event.target.closest('dialog[open]');
+      
+      // Dont allow the backdrop to be clicked when transactional
+      if(!dialog.querySelector(':scope > .mh-lg > form:last-child > button:last-child, :scope > .mh-lg > button:last-child') || dialog.classList.contains('dialog--multi')){
+
+        const dialogDimensions = dialog.getBoundingClientRect()
+
+        if (event.clientX < dialogDimensions.left || event.clientX > dialogDimensions.right || event.clientY < dialogDimensions.top || event.clientY > dialogDimensions.bottom) {
+
+          dialog.close()
+          
+          window.dataLayer = window.dataLayer || [];
+          window.dataLayer.push({
+            "event": "closeModal",
+            "id": dialog.getAttribute('id')
+          });
+        }
+      }
+    }
+
+    // Popover
+    if (event && event.target instanceof HTMLElement && event.target.closest('.dialog__wrapper > button')){
+
+      // Close existing open popover
+
+      let btn = event.target.closest('.dialog__wrapper > button');
+      let parent = event.target.closest('.dialog__wrapper > button').parentNode;
+      let dataEvent = "openPopover"
+      let popover = parent.querySelector(':scope > dialog');
+      
+
+      if(document.querySelector('dialog[open]') && document.querySelector('dialog[open]') != popover)
+        document.querySelector('dialog[open]').close();
+
+
+      if(popover.hasAttribute('open')){
+        
+        popover.close();
+        dataEvent = "closePopover"
+
+        popover.removeAttribute('style');
+        btn.classList.remove('active');
+      }
+      else {
+        
+        popover.show();
+        btn.classList.add('active');
+      
+        var position = btn.getBoundingClientRect();
+        let topOffset = position.top;
+        let leftOffset = position.left;
+
+        if(btn.closest('iam-table')){
+
+          let container = btn.closest('iam-table').parentNode.getBoundingClientRect();
+
+          topOffset -= container.top;
+          leftOffset -= container.left;
+
+        }
+
+        if(popover.classList.contains('dialog--fix')){
+          popover.setAttribute('style',`position:fixed;top: ${topOffset}px; left: ${leftOffset}px; margin: 3rem 0 0 0;`)
+        }
+      }
+      
+      // When the dialog is fixed it could dip under the viewport
+      // Lets check the dimensions and transform it to appear above
+      let boundingRec = popover.getBoundingClientRect();
+      let popoverBottom = boundingRec.bottom - window.scrollY;
+      let windowPos = window.innerHeight - window.scrollY;
+      if(popoverBottom > windowPos){
+
+        let currentStyle = popover.getAttribute('style');
+
+        popover.setAttribute('style',currentStyle+`transform: translate(0, calc(-100% - 4rem))`);
+      }
+
+      window.dataLayer = window.dataLayer || [];
+      
+      window.dataLayer.push({
+        "event": dataEvent,
+        "id": btn.textContent
+      });
+    };
+  });
+
+  return null
+}
+
+export const createDialog = (dialog) => {
+
+  // Multi dialog
+  if(dialog.classList.contains('dialog--multi') && !dialog.querySelector(':scope > .steps')) {
+    createMultiFormDialog(dialog);
+  }
+
+  if(!dialog.querySelector(':scope > .mh-lg') && !dialog.classList.contains('dialog--multi')){
+    dialog.innerHTML = `<div class="mh-lg">${dialog.innerHTML}</div>`;
+
+    let dialogContent = dialog.querySelector('.mh-lg');
+    let titleElement = dialog.querySelector('.mh-lg :is(.h1,.h2,.h3,.h4,.h5,.h6)');
+
+    if(titleElement){
+        
+      let optionalElement = titleElement.previousSibling;
+
+      dialogContent.before(titleElement);
+      
+      if(optionalElement)
+        titleElement.before(optionalElement);
+    }
+  }
+
+  // Create close button is needed
+  if(!dialog.querySelector(':scope > button:first-child'))
+    dialog.innerHTML = `<button class="dialog__close">Close</button>${dialog.innerHTML}`;
+
+}
+
+const createMultiFormDialog = (dialog) => {
+  let buttons = "";
+  let fieldsets = Array.from(dialog.querySelectorAll('fieldset[data-title]'));
+  fieldsets.forEach((fieldset,index) => {
+    buttons += `<button data-title="${fieldset.getAttribute('data-title')}" type="button" class="${index == 0 ? "active":""}">${fieldset.getAttribute('data-title')}</button>`;
+
+    const btnWrapper = document.createElement("div");
+    btnWrapper.classList.add('btn--wrapper');
+    fieldset.appendChild(btnWrapper);
+    
+
+    if(index != 0)
+      btnWrapper.innerHTML += `<button data-title="${fieldsets[index-1].getAttribute('data-title')}" class="btn btn-secondary mb-0" type="button">Previous</button>`;
+
+    if(index != fieldsets.length - 1)
+      btnWrapper.innerHTML += `<button data-title="${fieldsets[index+1].getAttribute('data-title')}" class="btn btn-primary mb-0" type="button">Next</button>`;
+
+    if(index == fieldsets.length - 1)
+      btnWrapper.innerHTML += `<button class="btn btn-primary mb-0">Submit</button>`;
+  });
+
+  dialog.innerHTML = `<div class="steps bg-primary">${buttons}</div>${dialog.innerHTML}`;
+
+
+  dialog.addEventListener('click', (event) => {
+    if (event && event.target instanceof HTMLElement && event.target.closest('button[data-title]')){
+      const button = event.target.closest('button[data-title]');
+      const fieldset = dialog.querySelector(`fieldset[data-title="${button.getAttribute('data-title')}"]`);
+      const step = dialog.querySelector(`.steps button[data-title="${button.getAttribute('data-title')}"]`);
+
+      Array.from(dialog.querySelectorAll('button')).forEach((button, index) => {
+        button.classList.remove('active');
+      });
+      Array.from(dialog.querySelectorAll('fieldset')).forEach((button, index) => {
+        button.classList.remove('active');
+      });
+
+      step.classList.add('active');
+      fieldset.classList.add('active');
+    };
+    return null
+  });
+}
+
+export default extendDialogs;

package/assets/ts/modules/helpers.ts

@@ -1,6 +1,4 @@
 // @ts-nocheck
-import { createEmbed } from "./youtubevideo"; 
-
 /** 
  * Global helper functions to help maintain and enhance framework elements.
  * @module Helpers 
@@ -49,7 +47,7 @@ export const addGlobalEvents = (body) => {
 
   addEventListener("popstate", (event) => {
 
-    if(event.state.type == "pagination"){
+    if(event && event.state.type && event.state.type == "pagination"){
       let form = document.querySelector(`#${event.state.form}`);
       let pageInput = document.querySelector(`#${event.state.form} [data-pagination]`);
       
@@ -62,126 +60,6 @@ export const addGlobalEvents = (body) => {
     }
   });
 
-  // Dialogs/modals
-  document.addEventListener('click', (event) => {
-
-    // Modal
-    if (event && event.target instanceof HTMLElement && event.target.closest('[data-modal]')){
-
-      const button = event.target.closest('[data-modal]');
-      const modalID = button.hasAttribute('data-modal') ? button.getAttribute('data-modal') : button.getAttribute('data-filter');
-      const dialog = document.querySelector(`dialog#${modalID}`);
-      
-      // Create close button is needed
-      dialog.innerHTML = `<button class="dialog__close">Close</button>${dialog.innerHTML}`;
-      
-      // remove close button when dialog is closed
-      dialog.addEventListener("close", () => {
-        const closeButton = dialog.querySelector('.dialog__close');
-        dialog.removeChild(closeButton);
-      }, { once: true }); // only adds this once
-      
-      let videoButton = dialog.querySelector('.youtube-embed a');
-
-      if (videoButton){
-        createEmbed(videoButton)
-      }
-
-      dialog.showModal();
-
-      window.dataLayer = window.dataLayer || [];
-      window.dataLayer.push({
-        "event": "openModal",
-        "id": modalID
-      });
-    };
-
-    // Close modal
-    if (event && event.target instanceof HTMLElement && event.target.closest('button.dialog__close')){
-      const dialog = event.target.closest('dialog[open]');
-
-      event.preventDefault();
-      dialog.close()
-        
-      window.dataLayer = window.dataLayer || [];
-      window.dataLayer.push({
-        "event": "closeModal",
-        "id": dialog.getAttribute('id')
-      });
-    }
-    
-    if (event && event.target instanceof HTMLElement && event.target.closest('dialog[open]')){
-      const dialog = event.target.closest('dialog[open]');
-      const dialogDimensions = dialog.getBoundingClientRect()
-
-      if (event.clientX < dialogDimensions.left || event.clientX > dialogDimensions.right || event.clientY < dialogDimensions.top || event.clientY > dialogDimensions.bottom) {
-
-        dialog.close()
-        
-        window.dataLayer = window.dataLayer || [];
-        window.dataLayer.push({
-          "event": "closeModal",
-          "id": dialog.getAttribute('id')
-        });
-      }
-    }
-
-    // Popover
-    if (event && event.target instanceof HTMLElement && event.target.closest('.dialog__wrapper > button')){
-
-      // Close existing open popover
-
-      let btn = event.target.closest('.dialog__wrapper > button');
-      let parent = event.target.closest('.dialog__wrapper > button').parentNode;
-      let dataEvent = "openPopover"
-      let popover = parent.querySelector(':scope > dialog');
-      
-
-      if(document.querySelector('dialog[open]') && document.querySelector('dialog[open]') != popover)
-        document.querySelector('dialog[open]').close();
-
-
-      if(popover.hasAttribute('open')){
-        
-        popover.close();
-        dataEvent = "closePopover"
-
-        popover.removeAttribute('style');
-        btn.classList.remove('active');
-      }
-      else {
-        
-        popover.show();
-        btn.classList.add('active');
-      
-        var position = btn.getBoundingClientRect();
-        let topOffset = position.top;
-        let leftOffset = position.left;
-
-        if(btn.closest('iam-table')){
-
-          let container = btn.closest('iam-table').parentNode.getBoundingClientRect();
-
-          topOffset -= container.top;
-          leftOffset -= container.left;
-
-        }
-
-        if(popover.classList.contains('dialog--fix')){
-          popover.setAttribute('style',`position:fixed;top: ${topOffset}px; left: ${leftOffset}px; margin: 3rem 0 0 0;`)
-        }
-      }
-        
-
-      window.dataLayer = window.dataLayer || [];
-      
-      window.dataLayer.push({
-        "event": dataEvent,
-        "id": btn.textContent
-      });
-    };
-  });
-
   return null
 }
 

package/assets/ts/modules/table.ts

@@ -67,14 +67,17 @@ export const createMobileButton = (table) => {
   if(table.closest('.table--fullwidth'))
     return false;
 
+  if(table.querySelectorAll('thead tr th').length < 4)
+    return false;
+
   Array.from(table.querySelectorAll('tbody tr')).forEach((row, index) => {
     let firstCol = row.querySelector(':scope > :is(td,th):first-child');
+
     let colContent = firstCol.textContent;
 
     if(colContent != "")
       firstCol.innerHTML =`<span class="td__content">${colContent}</span><button type="button" class="d-none">${colContent}</button>`;
     else {
-        
       let secondCol = row.querySelector(':scope > :is(td,th):nth-child(2)');
       let secondColContent = secondCol.textContent;
       secondCol.innerHTML =`<span class="td__content">${secondColContent}</span><button type="button" class="d-none">${secondColContent}</button>`;
@@ -383,16 +386,9 @@ export const filterTable = (table, form, wrapper) => {
       element.innerHTML += `(${filters.length})`;
     });
   }
-
-  // Stop function if no filters identified
-  if(!Object.keys(searches).length && !Object.keys(filters).length)
-    return false;
   
-  table.classList.add('table--filtered');
-
-
   // Filter the table
-
+  table.classList.add('table--filtered');
   for (const [key, filterValue] of Object.entries(filters)) {
     
     Array.from(table.querySelectorAll('tbody tr:not(.filtered)')).forEach((row, index) => {
@@ -504,8 +500,10 @@ export const filterTable = (table, form, wrapper) => {
     matched++;
 
     row.classList.add('filtered--matched');
+
     // pagination bit 
-    if(Math.ceil(matched/showRows) == parseInt(page))
+    let matchesPage = Math.ceil(matched/showRows);
+    if(matchesPage == parseInt(page))
       row.classList.add('filtered--show');
   });
 
@@ -595,9 +593,12 @@ export const addPaginationEventListeners = function(table, form, pagination, wra
       wrapper.setAttribute('data-page', newPage);
       form.dispatchEvent(new Event("submit"));
 
-      const url = new URL(location);
-      url.searchParams.set("page", newPage);
-      history.pushState({'type':'pagination','form':form.getAttribute('id'),'page':newPage}, "", url)
+      if(table.hasAttribute('data-show-history')){
+          
+        const url = new URL(location);
+        url.searchParams.set("page", newPage);
+        history.pushState({'type':'pagination','form':form.getAttribute('id'),'page':newPage}, "", url)
+      }
     }
 
     if (event && event.target instanceof HTMLElement && event.target.closest('[data-show]')){

package/assets/ts/modules/tabs.ts

@@ -51,15 +51,11 @@ export const setTabsEventHandlers = function(tabsElement: Element){
   if(tabsElement.shadowRoot)
     buttons = tabsElement.shadowRoot.querySelectorAll('.tabs__links > .link');
 
-  console.log(buttons)
-
   // Set the on click for the tab buttons, these will open the details box it matches too
   buttons.forEach((button) => {
 
     button.addEventListener("click", (e) => {
 
-      console.log('hi')
-
       e.preventDefault();
       buttons.forEach((buttonLoopItem) => {
 

package/assets/ts/tests/table.spec.ts

@@ -9,6 +9,9 @@ const basicTable = `<thead>
     <th>Heading 1</th>
     <th>Heading 2</th>
     <th>Heading 3</th>
+    <th>Heading 4</th>
+    <th>Heading 5</th>
+    <th>Heading 6</th>
   </tr>
 </thead>
 <tbody>
@@ -16,21 +19,33 @@ const basicTable = `<thead>
     <td>Cell 1</td>
     <td>Low</td>
     <td>Cell 3</td>
+    <td>Cell 4</td>
+    <td>Cell 5</td>
+    <td>Cell 6</td>
   </tr>
   <tr>
     <td>Cell 1</td>
     <td>Low</td>
     <td><a href="/link">View information</a></td>
+    <td>Cell 4</td>
+    <td>Cell 5</td>
+    <td>Cell 6</td>
   </tr>
   <tr>
     <td>Different Cell 1</td>
     <td>Medium</td>
     <td><a href="/link">View information</a></td>
+    <td>Cell 4</td>
+    <td>Cell 5</td>
+    <td>Cell 6</td>
   </tr>
   <tr>
     <td>Different Cell 1</td>
     <td>High</td>
     <td><a href="/link">View information</a></td>
+    <td>Cell 4</td>
+    <td>Cell 5</td>
+    <td>Cell 6</td>
   </tr>
 </tbody>`;