@iamproperty/components 3.2.0 → 3.4.4

package/assets/ts/modules/helpers.ts

@@ -0,0 +1,120 @@
+// @ts-nocheck
+/** 
+ * Global helper functions to help maintain and enhance framework elements.
+ * @module Helpers 
+ */
+
+/**
+ * Add global classes used by the CSS and later JavaScript.
+ * @param {HTMLElement} body Dom element, this doesn't have to be the body but it is recommended.
+ */
+ export const addBodyClasses = (body) => {
+  
+  body.classList.add("js-enabled");
+
+  if(navigator.userAgent.indexOf('MSIE')!==-1 || navigator.appVersion.indexOf('Trident/') > 0){
+    
+    body.classList.add("ie");
+  }
+
+  return null
+}
+
+/**
+ * Add global events.
+ * @param {HTMLElement} body Dom element, this doesn't have to be the body but it is recommended.
+ */
+export const addGlobalEvents = (body) => {
+  
+  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])`);
+
+    if(label)
+      label.click();
+    else if(detail)
+      detail.setAttribute('open','open');
+    
+  }, false);
+
+  return null
+}
+
+/**
+ * Check if an element contains certain elements that needs enhancing with the JavaScript helpers, it is recommended to do this on the page body after the dom is loaded. Elements that are loaded via ajax should also run this function. 
+ * @param {HTMLElement} element Dom element, this doesn't have to be the body but it is recommended.
+ */
+export const checkElements = (element) => {
+
+  // Tables
+  Array.from(element.querySelectorAll('table')).forEach((table, index) => {
+
+    tableStacked(table);
+    tableWrap(table);
+  });
+}
+
+/**
+ * Wrap tables with a table wrapper div to help maintain its responsive design.
+ * @param {HTMLElement} table Dom table element
+ */
+export const tableWrap = (table) => {
+  
+  if(!table.parentNode.classList.contains('table__wrapper')){
+
+    const tableHTML = table.outerHTML;
+
+    table.outerHTML = `<div class="table__wrapper">${tableHTML}</div>`;
+  }
+}
+
+/**
+ * Creates data attributes to be used by the CSS for mobile views.
+ * @param {HTMLElement} table Dom table element
+ */
+export const tableStacked = (table) => {
+
+  const colHeadings = Array.from(table.querySelectorAll('thead th'));
+  const colRows = Array.from(table.querySelectorAll('tbody tr'));
+
+  colRows.forEach((row, index) => {
+
+    const cells = Array.from(row.querySelectorAll('th, td'));
+    
+    cells.forEach((cell, cellIndex) => {
+
+      const heading = colHeadings[cellIndex];
+      if(typeof heading != "undefined"){
+
+        let tempDiv = document.createElement("div");
+        tempDiv.innerHTML = heading.innerHTML;
+        let headingText = tempDiv.textContent || tempDiv.innerText || "";
+        cell.setAttribute('data-label',headingText);
+      }
+    });
+  });
+}
+
+
+export const isNumeric = function(str) {
+  if (typeof str != "string") return false // we only process strings!  
+  return !isNaN(str) && // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...
+         !isNaN(parseFloat(str)) // ...and ensure strings of whitespace fail
+}
+
+export const zeroPad = (num, places) => String(num).padStart(places, '0')
+
+export const ucfirst = (str) => str.charAt(0).toUpperCase() + str.slice(1)
+export const ucwords = (str) => str.split(' ').map(s => ucfirst(s)).join(' ')
+export const unsnake = (str) => str.replace(/_/g, ' ')
+export const snake = (str) => str.replace(/ /g, '_')
+export const safeID = function(str){
+
+  str = str.toLowerCase();
+  str = snake(str);
+  str = str.replace(/\W/g,'');
+
+  return str;
+}

package/assets/ts/modules/modal.ts

@@ -0,0 +1,91 @@
+// @ts-nocheck
+const modal = (element) => {
+
+  const links = element.querySelectorAll('.modal__outer a, .modal__outer button');
+  const firstLink = links[0]
+  const lastLink = links[links.length - 1]
+  const modalID = element.getAttribute('id');
+
+  const closeModal = function(){
+    const button = document.querySelector('[href="'+window.location.hash+'"]');
+    button.focus();
+    window.location.hash = "close";
+    history.replaceState("", document.title, window.location.pathname + window.location.search);
+
+    // If there is more than one video lets make sure there is only one playing at a time.
+    if(typeof window.player != "undefined" && typeof window.player.pauseVideo == "function")
+      window.player.pauseVideo();
+  }
+
+  // Trap the tab focus inside
+  element.addEventListener('keydown', function(e){
+
+    if(e.key === "Tab" && e.shiftKey && document.activeElement == firstLink){
+
+      e.preventDefault();
+      lastLink.focus();
+    }
+    else if(e.key === "Tab" && !e.shiftKey && document.activeElement == lastLink) {
+
+      e.preventDefault();
+      firstLink.focus();
+    }
+  });
+
+  // ESC will close the open modal
+  document.addEventListener("keydown", function(e){
+    if (e.key === "Escape" && document.querySelector('.modal:target'))
+      closeModal();
+  });
+
+  element.addEventListener('click', function(e){
+    for (var target = e.target; target && target != this; target = target.parentNode) {
+
+      // Close links will close the model by default but we want to remove the hash link also
+      if (target.matches('[href="#close"]')) {
+        
+        e.preventDefault();
+        closeModal();
+        break;
+      }
+      // Dock the modal to the right or left to make the content behind readable
+      else if (target.matches('.modal__dock--right')) {
+        
+        e.preventDefault();
+        if(!element.classList.contains('modal--left'))
+          element.classList.add('modal--right');
+
+        element.classList.remove('modal--left');
+
+        break;
+      }   
+      else if (target.matches('.modal__dock--left')) {
+        
+        e.preventDefault();
+
+        if(!element.classList.contains('modal--right'))
+          element.classList.add('modal--left');
+
+        element.classList.remove('modal--right');
+
+        break;
+      }
+    }
+  });
+
+  function locationHashChanged() {
+    if (location.hash === '#'+modalID) {
+      console.log("Modal is now open");
+      const videoButton = document.querySelector('.modal:target .modal__inner > .youtube-embed:first-child:last-child a');
+
+      console.log(videoButton)
+      if (videoButton){
+        videoButton.click();
+      }
+        
+    }
+  }
+  window.onhashchange = locationHashChanged;
+}
+
+export default modal

package/assets/ts/modules/nav.ts

@@ -0,0 +1,29 @@
+// @ts-nocheck
+const navbar = (element) => {
+
+  Array.from(element.querySelectorAll('details')).forEach((detail, index) => {
+
+    detail.addEventListener('mouseenter', function(e){
+
+      if(window.matchMedia('(min-width: 62em)').matches)
+        detail.setAttribute('open','true')
+    }, false);
+
+    detail.addEventListener('mouseleave', function(e){
+
+      if(window.matchMedia('(min-width: 62em)').matches)
+        detail.removeAttribute('open')
+    }, false);
+  });
+
+  if ('IntersectionObserver' in window) {
+    const observer = new IntersectionObserver(
+      ([e]) => e.target.classList.toggle("is-stuck", e.intersectionRatio < 1),
+      { threshold: [1] }
+    );
+
+    observer.observe(element);
+  }
+}
+
+export default navbar

package/assets/ts/modules/orderablelist.ts

@@ -0,0 +1,123 @@
+// @ts-nocheck
+function orderlist(list) {
+  const randID = 'list_'+Math.random().toString(36).substr(2, 9);
+  const listItems = list.querySelectorAll('li');
+  const listCount = listItems.length;
+  let draggedRow;
+
+  list.setAttribute('role','list');
+  list.setAttribute('tabindex',0);
+  list.setAttribute('aria-label','Use the key tab to buttons to move between list items, once you have selected a list item you can move it up and down using the arrow keys.');
+
+  list.querySelectorAll('li').forEach((item, index) => {
+
+    // Make draggable
+    item.setAttribute('id',randID+'_row_'+(index+1));
+    item.setAttribute('data-order',index+1);
+    item.setAttribute('draggable','true');
+    item.addEventListener("dragstart", setDraggedRow);
+    item.setAttribute('tabindex',0);
+    item.setAttribute('role','listitem');
+    item.setAttribute('aria-label',`${item.innerText}: ${index+1} of ${listCount} moveable items`);
+  });
+
+  function setDraggedRow(e) {
+    e.dataTransfer.setData("text/plain", e.target.id);
+    draggedRow = e.target;
+    e.target.classList.add('li--dragging');
+  }
+
+  function resetItems(){
+
+    // Re label the rows
+    Array.from(list.querySelectorAll('li')).forEach((item, index) => {
+      item.classList.remove('li--dragging')
+      item.classList.remove('li--dropable')
+      item.setAttribute('data-order',index+1);
+      item.setAttribute('aria-label',`${item.innerText}: ${index+1} of ${listCount} moveable items`);
+    });
+  }
+
+  list.addEventListener("dragover", function( e ) {
+    // prevent default to allow drop
+    e.preventDefault();
+  }, false);
+
+  list.addEventListener("dragenter", function( e ) {
+    // prevent default to allow drop
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+
+    for (var target = e.target; target && target != this; target = target.parentNode) {
+      if (target.matches('li')) {
+
+        target.classList.add('li--dropable')
+      }
+    }
+  }, false);
+
+  list.addEventListener("dragleave", function( e ) {
+    // prevent default to allow drop
+    e.preventDefault();
+    for (var target = e.target; target && target != this; target = target.parentNode) {
+      if (target.matches('li')) {
+
+        target.classList.remove('li--dropable')
+      }
+    }
+  }, false);
+
+  list.addEventListener("drop", function(e) {
+
+    e.preventDefault();
+
+    for (var target = e.target; target && target != this; target = target.parentNode) {
+      if (target.matches('li')) {
+
+        if(target.parentNode != null && draggedRow.parentNode != null && target != draggedRow){
+
+          draggedRow.parentNode.removeChild( draggedRow );
+
+          if(draggedRow.getAttribute('data-order') > target.getAttribute('data-order'))
+            target.parentNode.insertBefore(draggedRow, target);
+          else
+            target.parentNode.insertBefore(draggedRow, target.nextElementSibling);
+
+          resetItems();
+
+
+          //tableElement.dispatchEvent(reorderedEvent);
+        }
+        break;
+      }
+    }
+  }, false);
+
+  list.addEventListener("keydown", function( e ) {
+
+    let item = e.target;
+
+    if(e.keyCode == 38){
+      e.preventDefault();
+
+      if (item.previousElementSibling)
+        item.parentNode.insertBefore(item, item.previousElementSibling);
+
+      item.focus();
+    }
+    else if(e.keyCode == 40){
+      e.preventDefault();
+
+      if (item.nextElementSibling)
+        item.parentNode.insertBefore(item.nextElementSibling, item);
+
+      item.focus();
+    }
+
+    resetItems();
+
+  }, false);
+
+}
+
+export default orderlist;