@iamproperty/components 3.2.0 → 3.4.5

package/assets/sass/_tests/func.spec.js

@@ -0,0 +1,9 @@
+/**
+ * @jest-environment jest-environment-node-single-context
+ */
+
+const path = require('path');
+const sassTrue = require('sass-true');
+
+const sassFile = path.join(__dirname, 'func.spec.scss');
+sassTrue.runSass({ describe, it }, sassFile);

package/assets/sass/_tests/mixins.spec.js

@@ -0,0 +1,9 @@
+/**
+ * @jest-environment jest-environment-node-single-context
+ */
+
+const path = require('path');
+const sassTrue = require('sass-true');
+
+const sassFile = path.join(__dirname, 'mixins.spec.scss');
+sassTrue.runSass({ describe, it }, sassFile);

package/assets/sass/_tests/typography.spec.js

@@ -0,0 +1,9 @@
+/**
+ * @jest-environment jest-environment-node-single-context
+ */
+
+const path = require('path');
+const sassTrue = require('sass-true');
+
+const sassFile = path.join(__dirname, 'typography.spec.scss');
+sassTrue.runSass({ describe, it }, sassFile);

package/assets/ts/main.ts

@@ -1,14 +1,14 @@
 // @ts-nocheck
 // Modules
-import * as helpers from '../js/modules/helpers'
-import nav from '../js/modules/nav'
-import table from '../js/modules/table'
-import accordion from '../js/modules/accordion'
-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 * as helpers from './modules/helpers'
+import nav from './modules/nav'
+import table from './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'
 
 // Attach classes to dom elements
 document.addEventListener("DOMContentLoaded", function() {

package/assets/ts/modules/accordion.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 function accordion(accordionElement: Element) {
 
   // Fetch all the details element.

package/assets/ts/modules/alert.ts

@@ -0,0 +1,58 @@
+// @ts-nocheck
+function alert(element) {
+
+  // Create a dissmissable button
+  element.addEventListener('click', function(e){
+
+    for (var target = e.target; target && target != this; target = target.parentNode) {
+      if (target.matches('.btn-close')) {
+        
+        e.preventDefault();
+
+        element.classList.remove('show');
+        setTimeout(function () {
+          element.remove();
+        }, 300); // Execute something() 1 second later.
+
+        break;
+      }
+    }
+  }, false);
+
+  // Self disappearing alert
+  if(element.hasAttribute('data-timeout')){
+
+    let timeOut = element.getAttribute('data-timeout');
+
+    setTimeout(function () {
+      element.classList.remove('show');
+      setTimeout(function () {
+        element.remove();
+      }, 300); // Execute something() 1 second later.
+    }, timeOut); // Execute something() 1 second later.
+  }
+    
+
+
+  // Create an alert holder thats fixed to the bottom of the page, alerts with the class of alert--fix are then moved to this area. Creating a fixed but scrollable area that alerts can be stacked up on.
+  if(!document.querySelector('.alert__holder')){
+    var bodyElement = document.getElementsByTagName("BODY")[0];
+
+    let newDiv = document.createElement("div");
+    newDiv.classList.add('alert__holder');
+
+    if(document.querySelector('main'))
+      document.querySelector('main').appendChild(newDiv);
+    else
+      document.body.appendChild(newDiv); 
+  }
+
+  let alertHolder = document.querySelector('.alert__holder');
+
+  if(element.classList.contains('alert--fixed') && !element.parentNode.classList.contains('alert__wrapper')){
+
+    alertHolder.appendChild(element);
+  }
+}
+
+export default alert

package/assets/ts/modules/carousel.ts

@@ -0,0 +1,103 @@
+// @ts-nocheck
+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/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