@iamproperty/components 3.1.0 → 3.4.4

package/assets/ts/modules/chart.ts

@@ -0,0 +1,219 @@
+// @ts-nocheck
+import { ucfirst, unsnake } from './helpers'
+
+function chart(chartElement,min,max,type) {
+
+  let chartKey = chartElement.querySelector('.chart__key');
+  let chartYaxis = chartElement.querySelector('.chart__yaxis');
+  let chartGuidelines = chartElement.querySelector('.chart__guidelines');
+
+  // Chart key
+  if(chartKey && chartKey.childElementCount == 0){
+    createChartKey(chartElement);
+  }
+
+  // Y Axis and Guidelines
+  if(chartYaxis && chartYaxis.childElementCount == 0){
+    createChartYaxis(chartElement);
+  }
+  if(chartGuidelines && chartGuidelines.childElementCount == 0){
+    createChartGuidelines(chartElement);
+  }
+
+  // Create lines for line graph
+  if(type == "line")
+    createLines(chartElement,min,max);
+
+  // Create pies
+  if(type == "pie")
+    createPies(chartElement);
+
+  // Add css vars to cells
+  Array.from(chartElement.querySelectorAll('tbody tr')).forEach((tr, index) => {
+
+    let group = tr.querySelector('td:first-child, th:first-child') ? tr.querySelector('td:first-child, th:first-child').innerHTML : '';
+
+    Array.from(tr.querySelectorAll('td[data-numeric]:not([data-numeric="0"]):not(:first-child)')).forEach((td, index) => {
+
+      const value = Number.parseFloat(td.getAttribute('data-numeric'));
+      let percent = ((value - min)/(max)) * 100;
+      const content = td.innerHTML;
+      const label = td.getAttribute('data-label');
+      let bottom = 0;
+
+      // If the value is negative the position below the 0 line
+      if(min < 0){
+        bottom = Math.abs((min)/(max)*100);
+        if(value < 0){
+          bottom = bottom - percent;
+        }
+      }
+      td.setAttribute("style",`--bottom:${bottom}%;--percent:${percent}%;`);
+
+
+      td.innerHTML = `<span data-group="${group}" data-label="${label}">${content}</span>`;
+    });
+  });
+}
+
+export const createChartKey = function(chartElement){
+
+  let chartKey = chartElement.querySelector('.chart__key');
+
+  Array.from(chartElement.querySelectorAll('thead th')).forEach((arrayElement, index) => {
+
+    chartKey.innerHTML += `<div class="key">${arrayElement.innerText}</div>`;
+  });
+}
+
+export const createChartGuidelines = function(chartElement){
+
+  let chartGuidelines = chartElement.querySelector('.chart__guidelines');
+  const max = chartElement.getAttribute('data-max');
+  const min = chartElement.getAttribute('data-min');
+
+  chartGuidelines.innerHTML += `<div style="--value: 0;--percent:0%;" class="axis__point"><span>0</span></div>`;
+  chartGuidelines.innerHTML += `<div style="--value: ${max};--percent:100%;" class="axis__point"><span>${max}</span></div>`;
+}
+
+export const createChartYaxis = function(chartElement){
+
+  let chartYaxis = chartElement.querySelector('.chart__yaxis');
+  const max = chartElement.getAttribute('data-max');
+  const min = chartElement.getAttribute('data-min');
+
+  chartYaxis.innerHTML += `<div style="--value: 0;--percent:0%;" class="axis__point"><span>0</span></div>`;
+  chartYaxis.innerHTML += `<div style="--value: ${max};--percent:100%;" class="axis__point"><span>${max}</span></div>`;
+}
+
+function getCoordinatesForPercent(percent) {
+  const x = Math.cos(2 * Math.PI * percent);
+  const y = Math.sin(2 * Math.PI * percent);
+  return [x*100, y*100];
+}
+
+export const createPies = function(chartElement){
+
+  let returnString = '';
+  let pieWrapper = chartElement.querySelector('.pies');
+
+  Array.from(chartElement.querySelectorAll('tbody tr')).forEach((item, index) => {
+
+    let paths = '';
+    let tooltips = '';
+
+    let cumulativePercent = 0;
+
+    let total = 0;
+
+    let titleKey = item.querySelectorAll('td')[0]
+    let title = titleKey.innerHTML;
+
+    Array.from(item.querySelectorAll('td')).forEach((cell, subindex) => {
+
+      if(subindex != 0){
+
+        let value = cell.getAttribute('data-numeric');
+
+        value = value.replace('£','');
+        value = value.replace('%','');
+        value = Number.parseInt(value);
+
+        total += value;
+      }
+    });
+
+    Array.from(item.querySelectorAll('td')).forEach((cell, subindex) => {
+
+      if(subindex != 0){
+
+        let value = cell.getAttribute('data-numeric');
+
+        value = value.replace('£','');
+        value = value.replace('%','');
+        value = Number.parseInt(value);
+
+        let percent = value/total;
+
+        //lines[subindex-1] += `${command} ${spacer * index} ${100-percent} `;
+        const [startX, startY] = getCoordinatesForPercent(cumulativePercent);
+
+          // each slice starts where the last slice ended, so keep a cumulative percent
+          cumulativePercent += percent;
+
+          const [endX, endY] = getCoordinatesForPercent(cumulativePercent);
+
+          // if the slice is more than 50%, take the large arc (the long way around)
+          const largeArcFlag = percent > .5 ? 1 : 0;
+
+          // create an array and join it just for code readability
+          const pathData = [
+            `M ${startX} ${startY}`, // Move
+            `A 100 100 0 ${largeArcFlag} 1 ${endX} ${endY}`, // Arc
+            `L 0 0`, // Line
+          ].join(' ');
+
+        paths += `<path d="${pathData}"></path>`;
+        tooltips += `<foreignObject x="-70" y="-70" width="140" height="140" style="transform: rotate(90deg)"><div><span class="h5 mb-0"><span class="total d-block">${ucfirst(unsnake(title))}</span> ${ucfirst(unsnake(cell.getAttribute('data-label')))}<br/> ${cell.innerHTML}</span></div></foreignObject>`;
+      }
+    });
+
+    returnString += `<div class="pie"><svg viewBox="-105 -105 210 210" style="transform: rotate(-90deg)" preserveAspectRatio="none">${paths}<foreignObject x="-70" y="-70" width="140" height="140" style="transform: rotate(90deg)"><div><span class="h5 mb-0">${title}</span></div></foreignObject>${tooltips}</svg></div>`
+  });
+
+  pieWrapper.innerHTML = returnString;
+}
+
+export const createLines = function(chartElement,min,max){
+
+  let returnString = '';
+  let linesWrapper = chartElement.querySelector('.lines');
+
+  let items = Array.from(chartElement.querySelectorAll('tbody tr'));
+
+  let lines = Array();
+  let spacer = 200/(items.length - 1);
+
+  // Creates the lines array from the fields array
+  Array.from(chartElement.querySelectorAll('thead th')).forEach((field, index) => {
+
+    if(index != 0){
+
+      lines[index-1] = '';
+    }
+  });
+
+  // populate the lines array from the items array
+  Array.from(chartElement.querySelectorAll('tbody tr')).forEach((item, index) => {
+
+    Array.from(item.querySelectorAll('td')).forEach((cell, subindex) => {
+
+      if(subindex != 0){
+
+        let value = cell.getAttribute('data-numeric');
+
+        value = value.replace('£','');
+        value = value.replace('%','');
+        value = Number.parseFloat(value) - min;
+
+        const percent = (value/max) * 100;
+
+        let command = index == 0 ? 'M' : 'L';
+
+        lines[subindex-1] += `${command} ${spacer * index} ${100-percent} `;
+      }
+    });
+  });
+
+  lines.forEach((line, index) => {
+
+    returnString += `
+<svg viewBox="0 0 200 100" class="line" preserveAspectRatio="none">
+  <path fill="none" d="${line}"></path>
+</svg>`
+  });
+
+  linesWrapper.innerHTML = returnString;
+}
+
+export default chart

package/assets/ts/modules/drawer.ts

@@ -0,0 +1,17 @@
+// @ts-nocheck
+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/ts/modules/file-upload.ts

@@ -0,0 +1,49 @@
+// @ts-nocheck
+function fileupload(form, callback) {
+
+  const input = form.querySelector('[type="file"]');
+  const label = form.querySelector(`[for="${input.getAttribute('id')}"]`);
+  const add = form.querySelector('.file-upload__add');
+
+  form.querySelector('button').remove()
+
+  input.addEventListener("change", function( e ) {
+    // prevent default to allow drop
+
+    let url = form.getAttribute('action');
+    let formData = new FormData(form);
+
+    input.setAttribute('disabled', 'disabled');
+
+    fetch(url, {
+      method: 'POST',
+      body: formData
+    })
+    .then(() => {
+
+      form.classList.add('file-uploaded')
+      label.innerHTML = 'File uploaded';
+
+      if(typeof callback == "function")
+        callback();
+    })
+
+
+  }, false);
+
+
+  form.addEventListener("submit", function( e ) {
+    // prevent default to allow drop
+    e.preventDefault();
+  }, false);
+
+  add.addEventListener("click", function( e ) {
+
+    form.classList.remove('file-uploaded')
+    label.innerHTML = 'Select a file to upload';
+    input.removeAttribute('disabled');
+
+  }, false);
+}
+
+export default fileupload;

package/assets/ts/modules/form.ts

@@ -0,0 +1,169 @@
+// @ts-nocheck
+// 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);
+}
+
+function inputRedirect(inputWrapper){
+
+
+  inputWrapper.addEventListener('change', function(e){
+
+    if(inputWrapper.matches('[data-value-if]')) {
+
+      const url = inputWrapper.getAttribute('data-redirect');
+      const desiredValue = inputWrapper.getAttribute('data-value-if');
+
+      if(inputWrapper.value == desiredValue)
+        document.location.href = url;
+    }
+    else {
+
+      if(typeof inputWrapper.value != "undefined")
+        document.location.href = inputWrapper.value;
+    }
+
+  }, false);
+}
+
+//
+function multipleFileUploads(wrapper){
+
+  const fileTenplate = wrapper.querySelector('.row');
+  const clone = fileTenplate.cloneNode(true);
+  const addButton = wrapper.querySelector('[data-add]');
+
+  wrapper.addEventListener('click', function(e){
+    for (var target = e.target; target && target != this; target = target.parentNode) {
+      if (target.matches('[data-add]')) {  // Add a new row upload file input fields
+
+        const tempClone = clone.cloneNode(true);
+        wrapper.insertBefore(tempClone,target);
+
+        if(addButton.matches('[data-maxfiles]') && Array.from(wrapper.querySelectorAll(':scope > .row')).length >= addButton.dataset.maxfiles)
+          addButton.setAttribute('disabled','disabled');
+
+      break;
+      }
+      if (target.matches('[data-delete]')) { // Delete the current row
+
+        let row = target.closest('.row');
+        row.remove();
+
+        if(addButton.matches('[data-maxfiles]') && Array.from(wrapper.querySelectorAll(':scope > .row')).length < addButton.dataset.maxfiles)
+          addButton.removeAttribute('disabled');
+
+      break;
+      }
+    }
+
+  }, 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);
+  });
+
+  Array.from(formElement.querySelectorAll('[data-redirect]')).forEach((arrayElement, index) => {
+    inputRedirect(arrayElement);
+  });
+
+  Array.from(formElement.querySelectorAll('.multiple-file-uploads')).forEach((arrayElement, index) => {
+    multipleFileUploads(arrayElement);
+  });
+
+
+  // Check the file size of a file when uploaded in case it exceeds the max file size set
+  formElement.addEventListener('change', function(e){
+    for (var target = e.target; target && target != this; target = target.parentNode) {
+      if (target.matches('[type="file"][data-filesize]') && target.files && target.files[0]) {
+
+          const maxAllowedSize = target.dataset.filesize;
+          if (target.files[0].size > maxAllowedSize) {
+
+            target.value = '';
+            alert('File too large');
+          }
+        break;
+      }
+    }
+  }, false);
+
+
+  // When a form is updated we may want to update some of the existing input fields; setting active fields when some data is selected.
+  formElement.addEventListener('change', function(e){
+
+    // Remove disabled attribute when a pre-selected input field equals a certain value
+    Array.from(formElement.querySelectorAll('select[data-activeif][data-equals],input[data-activeif][data-equals]')).forEach((arrayElement, index) => {
+
+      let group = arrayElement.closest('[data-group]') ? arrayElement.closest('[data-group]') : formElement;
+      let selector = arrayElement.dataset.activeif;
+      let value = arrayElement.dataset.equals;
+      let testElement = group.querySelector(`select[data-id="${selector}"],input[data-id="${selector}"]`);
+
+      if(testElement.value == value){
+        arrayElement.removeAttribute('disabled');
+      }
+      else {
+        arrayElement.setAttribute('disabled','disabled');
+        arrayElement.value = '';
+      }
+    });
+
+    // Show this input wrapper when a pre-selected input field equals a certain value
+    Array.from(formElement.querySelectorAll('.form-control__wrapper[data-displayif][data-equals]')).forEach((arrayElement, index) => {
+
+      let group = arrayElement.closest('[data-group]') ? arrayElement.closest('[data-group]') : formElement;
+      let selector = arrayElement.dataset.activeif;
+      let value = arrayElement.dataset.equals;
+      let testElement = group.querySelector(`select[data-id="${selector}"],input[data-id="${selector}"]`);
+
+      if(testElement.value == value)
+        arrayElement.classList.remove('d-none');
+      else
+        arrayElement.classList.add('d-none');
+    });
+
+  }, false);
+}
+
+export default form

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