@iamproperty/components 3.4.4 → 3.4.6

package/assets/ts/{main.ts → flat-components.ts}

@@ -1,22 +1,23 @@
 // @ts-nocheck
 // Modules
-import * as helpers from './modules/helpers'
-import nav from './modules/nav'
-import table from './modules/table'
+import * as helpers from '../js/modules/helpers'
+import nav from '../js/modules/nav'
+import table from '../js/modules/table'
 import accordion from './modules/accordion'
-import testimonial from './modules/testimonial'
-import carousel from './modules/carousel'
-import form from './modules/form'
-import youtubeVideo from './modules/youtubevideo'
-import modal from './modules/modal'
+import testimonial from '../js/modules/testimonial'
+import carousel from '../js/modules/carousel'
+import form from '../js/modules/form'
+import youtubeVideo from '../js/modules/youtubevideo'
+import modal from '../js/modules/modal'
+import tabs from '../js/modules/tabs'
 
 // Attach classes to dom elements
 document.addEventListener("DOMContentLoaded", function() {
 
+  // Global stuff
   helpers.addBodyClasses(document.body);
   helpers.addGlobalEvents(document.body);
   helpers.checkElements(document.body);
-  console.log('test.js');
 
   // ANav
   Array.from(document.querySelectorAll('.nav')).forEach((arrayElement) => {
@@ -53,6 +54,10 @@ document.addEventListener("DOMContentLoaded", function() {
   Array.from(document.querySelectorAll('.youtube-embed')).forEach((arrayElement) => {
     new youtubeVideo(arrayElement);
   });
+  // Tabs
+  Array.from(document.querySelectorAll('.tabs')).forEach((arrayElement) => {
+    tabs(arrayElement);
+  });
 
 
   window.addEventListener('hashchange', function() {
@@ -60,9 +65,8 @@ document.addEventListener("DOMContentLoaded", function() {
     const hash = location.hash.replace('#','');
     const label = document.querySelector(`label[for="${hash}"]`);
 
-    if (label instanceof HTMLElement) {
+    if (label instanceof HTMLElement)
       label.click();
-    }
 
   }, false);
 });

package/assets/ts/html.d.ts

@@ -0,0 +1,4 @@
+declare module '*.html' {
+  const value: string;
+  export default value
+}

package/assets/ts/modules/accordion.ts

@@ -1,6 +1,21 @@
 // @ts-nocheck
 function accordion(accordionElement: Element) {
 
+  // Add classes to help with CSS 
+  let details = accordionElement.querySelectorAll('details');
+  let summaries = accordionElement.querySelectorAll('summary');
+  
+  details.forEach((detail) => {
+    detail.classList.add('accordion-item');
+  });
+
+  summaries.forEach((summary) => {
+    summary.classList.add('accordion-header');
+    summary.classList.add('accordion-button');
+    summary.classList.add('h4');
+  });
+  
+
   // Fetch all the details element.
   if(!accordionElement.classList.contains('accordion--keep-open')){
 
@@ -18,27 +33,6 @@ function accordion(accordionElement: Element) {
       });
     });
   }
-
-
-  if(window.location.hash && document.querySelector(window.location.hash+':not([open]) summary')) {
-
-    const detail = document.querySelector(window.location.hash+' summary');
-
-    if (detail instanceof HTMLElement) {
-      detail.click();
-    }
-  }
-
-  window.addEventListener('hashchange', function(){
-    if(window.location.hash && document.querySelector(window.location.hash+' summary')) {
-
-      const detail = document.querySelector(window.location.hash+' summary');
-
-      if (detail instanceof HTMLElement) {
-        detail.click();
-      }
-    }
-  });
 }
 
 export default accordion

package/assets/ts/modules/helpers.ts

@@ -26,16 +26,24 @@
  */
 export const addGlobalEvents = (body) => {
   
+  if(location.hash && document.querySelector(location.hash+':not([open]) summary')) {
+
+    const summary = document.querySelector(location.hash+' summary');
+
+    if (summary instanceof HTMLElement) 
+      summary.click();
+  }
+
   window.addEventListener('hashchange', function() {
 
     const hash = location.hash.replace('#','');
     const label = document.querySelector(`label[for="${hash}"]`);
-    const detail = document.querySelector(`details[id="${hash}"]:not([open])`);
+    const summary = document.querySelector(location.hash+' summary');
 
-    if(label)
+    if(label instanceof HTMLElement)
       label.click();
-    else if(detail)
-      detail.setAttribute('open','open');
+    else if(summary instanceof HTMLElement)
+      summary.click();
     
   }, false);
 

package/assets/ts/modules/tabs.ts

@@ -0,0 +1,129 @@
+// @ts-nocheck
+export const createTabsLinks = function(tabsElement: Element) {
+
+  const details = tabsElement.querySelectorAll(':scope > details');
+  let summaries = tabsElement.querySelectorAll(':scope > details > summary');
+  let tabLinks = tabsElement.querySelector(':scope > .tabs__links');
+
+  if(tabsElement.shadowRoot && tabsElement.shadowRoot.querySelector('.tabs__links'))
+    tabLinks = tabsElement.shadowRoot.querySelector('.tabs__links');
+
+  if(!tabLinks){
+    tabLinks = document.createElement('div');
+    tabLinks.classList.add('tabs__links');
+
+    tabsElement.prepend(tabLinks);
+  }
+
+  // Create the tab buttons from the summary titles
+  details.forEach((detail, index) => {
+    
+    let summary = detail.querySelector(':scope > summary');
+    summary.classList.add('visually-hidden');
+    
+    let button = document.createElement('button');
+    if(detail.hasAttribute('id')){
+        
+      button = document.createElement('a');
+      button.setAttribute('href',`#${detail.getAttribute('id')}`);
+    }
+
+    if(detail.hasAttribute('open')){
+      button.setAttribute('aria-pressed',true);
+    }
+    
+    button.innerHTML = `${summary.innerText}`;
+    button.classList.add('link');
+    button.setAttribute('data-index',index);
+    button.setAttribute('tabindex','-1');
+
+    tabLinks.appendChild(button);
+  });
+
+}
+
+export const setTabsEventHandlers = function(tabsElement: Element){
+
+  let details = tabsElement.querySelectorAll(':scope > details');
+  let summaries = tabsElement.querySelectorAll(':scope > details > summary');
+  let buttons = tabsElement.querySelectorAll(':scope > .tabs__links > button, .tabs__links > a');
+
+  if(tabsElement.shadowRoot)
+    buttons = tabsElement.shadowRoot.querySelectorAll('.tabs__links > button, .tabs__links > a');
+
+  // Set the on click for the tab buttons, these will open the details box it matches too
+  buttons.forEach((button) => {
+
+    button.addEventListener("click", (e) => {
+      e.preventDefault();
+      buttons.forEach((buttonLoopItem) => {
+
+        let buttonPressed = buttonLoopItem == button ? true : false;
+        buttonLoopItem.setAttribute('aria-pressed', buttonPressed);
+      });
+      details.forEach((detail, detailsIndex) => {
+        
+        let detailsOpen = button.getAttribute('data-index') == detailsIndex ? true : false;
+
+        if(detailsOpen)
+          detail.setAttribute('open', detailsOpen);
+        else
+          detail.removeAttribute('open')
+      });
+
+      if(button.hasAttribute('href'))
+        history.pushState(undefined, undefined, button.getAttribute('href'))
+    });
+
+  });
+  
+  // Make sure we dont loose existing summary functionality
+  summaries.forEach((summary, index) => { 
+
+    // Maintain the focus on the summary element but visually highlight the tab button
+    summary.addEventListener("focus", (e) => {
+
+      buttons.forEach((button) => {
+          
+        button.classList.remove('focus');
+      });
+      buttons[index].classList.add('focus');
+    });
+    summary.addEventListener("click", (e) => {
+
+      e.preventDefault();
+      buttons[index].click();
+    });
+  });
+
+}
+
+export const openFirstTab = function(tabsElement: Element){
+
+  let details = tabsElement.querySelectorAll(':scope > details');
+  let buttons = tabsElement.querySelectorAll(':scope > .tabs__links > button, .tabs__links > a');
+
+  if(tabsElement.shadowRoot)
+    buttons = tabsElement.shadowRoot.querySelectorAll('.tabs__links > button, .tabs__links > a');
+
+  if(location.hash && tabsElement.querySelector(`.tabs__links [href="${location.hash}"]`)){
+      
+    tabsElement.querySelector(`[href="${location.hash}"]`).setAttribute('open',true);
+    tabsElement.querySelector(`details[id="${location.hash.replace('#','')}"]`).setAttribute('open',true);
+  }
+  else if(!tabsElement.querySelector(`details[open]`)) {
+
+    details[0].setAttribute('open',true);
+    buttons[0].setAttribute('aria-pressed',true);
+  }
+
+}
+
+const tabs = function(tabsElement: Element){
+
+  createTabsLinks(tabsElement);
+  setTabsEventHandlers(tabsElement);
+  openFirstTab(tabsElement);
+}
+
+export default tabs