@iamproperty/components 1.0.12 → 2.1.0

package/assets/js/modules/carousel.js

@@ -0,0 +1,102 @@
+function carousel(carouselElement) {
+
+  var scrollTimeout;
+
+  let carouselInner = carouselElement.querySelector('.carousel__inner');
+  let itemCount = carouselElement.querySelectorAll('.carousel__item').length;
+  let cols = carouselElement.getAttribute('data-cols');
+  let smCols = carouselElement.getAttribute('data-sm-cols');
+  let mdCols = carouselElement.getAttribute('data-md-cols');
+
+  carouselElement.querySelector('.carousel__controls a').classList.add('active');
+
+  // On scroll we need to make sure the buttons get corrected and the next testimonial is shown
+  carouselInner.addEventListener('scroll', function(e){
+    clearTimeout(scrollTimeout);
+    scrollTimeout = setTimeout(function(){ 
+
+      let scrollArea = carouselInner.clientWidth;
+      let scrollWidth = carouselInner.scrollWidth;
+      let scrollLeft = carouselInner.scrollLeft;
+      let targetSlide = Math.round((scrollLeft / scrollWidth) * itemCount) + 1;
+      let lastItemOffset = carouselElement.querySelector('.carousel__item:last-child').offsetLeft;
+
+      Array.from(carouselElement.querySelectorAll('.carousel__controls a')).forEach((link, index) => {
+        link.classList.remove('active');
+      });
+
+      carouselElement.querySelector('.control-'+targetSlide).classList.add('active');
+      
+      // Disable the previous button
+      if(targetSlide == 1)
+        carouselElement.querySelector('.btn-prev').setAttribute('disabled','disabled');
+      else
+        carouselElement.querySelector('.btn-prev').removeAttribute('disabled');
+
+      // Disable the next button if the last item is in view
+      if(carouselInner.scrollLeft + scrollArea > lastItemOffset)
+        carouselElement.querySelector('.btn-next').setAttribute('disabled','disabled');
+      else
+        carouselElement.querySelector('.btn-next').removeAttribute('disabled');
+
+    }, 100); 
+
+  }, false);
+
+  // when the buttons are used we need to make sure the carousel scrolls to the correct place
+  carouselElement.addEventListener('click', function(e){
+
+    for (var target = e.target; target && target != this; target = target.parentNode) {
+      if (target.matches('.carousel__controls a')) {
+        
+        e.preventDefault();
+
+        Array.from(carouselElement.querySelectorAll('.carousel__controls a')).forEach((link, index) => {
+          link.classList.remove('active');
+        });
+        target.classList.add('active');
+
+        const el = document.querySelector(target.getAttribute('href'));
+
+        carouselInner.scroll({
+          top: 0,
+          left: el.offsetLeft, 
+          behavior: 'smooth'
+        });
+
+        break;
+      }
+    }
+  }, false);
+
+  carouselElement.addEventListener('click', function(e){
+
+    for (var target = e.target; target && target != this; target = target.parentNode) {
+      if (target.matches('.btn-next, .btn-prev')) {
+        
+        e.preventDefault();
+        let scrollTo = target.classList.contains('btn-prev') ? carouselInner.scrollLeft - carouselInner.clientWidth : carouselInner.scrollLeft + carouselInner.clientWidth;
+        
+        carouselInner.scroll({
+          top: 0,
+          left: scrollTo, 
+          behavior: 'smooth'
+        });
+        break;
+      }
+    }
+  }, false);
+
+
+  // Add responsive hide button classes
+  if(itemCount == 1)
+    carouselElement.classList.add('hide-btns');
+
+  if(smCols >= itemCount)
+    carouselElement.classList.add('hide-sm-btns');
+
+  if(mdCols >= itemCount)
+    carouselElement.classList.add('hide-md-btns');
+}
+
+export default carousel

package/assets/js/modules/drawer.js

@@ -0,0 +1,16 @@
+const drawer = (element) => {
+
+  const observer = new IntersectionObserver( 
+
+    function([e]){
+      e.target.classList.toggle("in-view", e.intersectionRatio > 0)
+      document.getElementById('showDrawer').checked = false
+    },
+    { threshold: [1] }
+  );
+
+  const el = document.getElementById('drawer-end')
+  observer.observe(el);
+}
+
+export default drawer

package/assets/js/modules/form.js

@@ -0,0 +1,49 @@
+// Create a link between two input/selects with one acting as setting a minimum value and the second a maximum
+// The link between the two will prevent the max input field form setting a lower value than the min and vice versa
+function inputRange(inputWrapper){
+
+  inputWrapper.addEventListener('change', function(e){
+
+    var min = parseInt(inputWrapper.querySelector('[data-min] select,[data-min] input').value);
+    var max = parseInt(inputWrapper.querySelector('[data-max] select,[data-max] input').value);
+
+    // Set attributes for input fields
+    Array.from(inputWrapper.querySelectorAll('[data-min] input')).forEach((input, index) => {
+      
+      input.setAttribute('max',max);
+    });
+
+    Array.from(inputWrapper.querySelectorAll('[data-max] input')).forEach((input, index) => {
+      
+      input.setAttribute('min',min);
+    });
+
+    // Hide select options if they are higher or lower than the min and max values
+    Array.from(inputWrapper.querySelectorAll('[data-min] select option')).forEach((option, index) => {
+      
+      if(parseInt(option.getAttribute('value')) > max)
+        option.classList.add('d-none');
+      else 
+        option.classList.remove('d-none');
+    });
+
+    Array.from(inputWrapper.querySelectorAll('[data-max] select option')).forEach((option, index) => {
+      
+      if(parseInt(option.getAttribute('value')) < min)
+        option.classList.add('d-none');
+      else 
+        option.classList.remove('d-none');
+    });
+  }, false);
+}
+
+// Acts as an overall initialise function to trigger other functions.
+function form(formElement) {
+
+  // Check for input range groups
+  Array.from(formElement.querySelectorAll('[data-input-range]')).forEach((arrayElement, index) => {
+    inputRange(arrayElement);
+  });
+}
+
+export default form

package/assets/js/modules/helpers.js

@@ -0,0 +1,93 @@
+/** 
+ * 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.
+ */
+ 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
+}
+
+/**
+ * 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.
+ */
+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
+ */
+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
+ */
+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);
+      }
+    });
+  });
+}
+
+
+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
+}
+
+const zeroPad = (num, places) => String(num).padStart(places, '0')
+
+export {
+  addBodyClasses,
+  checkElements,
+  tableWrap,
+  tableStacked,
+  isNumeric,
+  zeroPad
+}

package/assets/js/modules/modal.js

@@ -0,0 +1,72 @@
+const modal = (element) => {
+
+  const links = element.querySelectorAll('.modal__outer a, .modal__outer button');
+  const firstLink = links[0]
+  const lastLink = links[links.length - 1]
+
+  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);
+  }
+
+  // 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 wont to remove the hash link
+      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;
+      }
+    }
+  });
+
+}
+
+export default modal

package/assets/js/modules/nav.js

@@ -0,0 +1,27 @@
+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);
+  });
+
+
+  const observer = new IntersectionObserver( 
+    ([e]) => e.target.classList.toggle("is-stuck", e.intersectionRatio < 1),
+    { threshold: [1] }
+  );
+
+  observer.observe(element);
+}
+
+export default navbar