@iamproperty/components 3.0.0 → 3.2.0

package/assets/js/modules/drawer.js

@@ -1,16 +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);
-}
-
+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/file-upload.js

@@ -0,0 +1,48 @@
+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/js/modules/form.js

@@ -1,159 +1,168 @@
-// 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){
-
-    const url = inputWrapper.getAttribute('data-redirect');
-    const desiredValue = inputWrapper.getAttribute('data-value-if');
-
-    if(inputWrapper.value == desiredValue)
-      document.location.href = url;
-
-  }, 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][data-value-if]')).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
+// 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/js/modules/helpers.js

@@ -1,119 +1,119 @@
-/** 
- * 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;
-}
+/** 
+ * 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;
+}