@iamproperty/components 6.0.0 → 6.1.0--beta2

package/assets/ts/modules/carousel.ts

@@ -1,12 +1,94 @@
 // @ts-nocheck
-function carousel(carouselElement, row) {
+
+export const generateThumbnailList = function(carouselComponent){
+
+  let thumbnailImages = [];
+
+  Array.from(carouselComponent.querySelectorAll(':scope > div')).forEach((slide, index) => {
+        
+    if(slide.hasAttribute('data-thumbnail')){
+
+      thumbnailImages[index] = slide.getAttribute('data-thumbnail');
+    }
+  });
+
+  return thumbnailImages;
+}
+
+
+export const generatePipsHTML = function(carouselComponent,thumbnailImages){
+
+  let itemCount = carouselComponent.querySelectorAll(':scope > div').length;
+
+  let pips = "";
+  for (let i = 1; i <= itemCount; i++) {
+    let pipContent = null;
+    let pipClass = '';
+
+    if (thumbnailImages.length && thumbnailImages[i - 1]) {
+      pipClass = 'has-thumbnail';
+      pipContent = `<img src="${thumbnailImages[i - 1]}" alt="Slide ${i}" height="148"/>`;
+    } else {
+      pipContent = `Slide ${i}`;
+    }
+
+    pips += `<button class="control-${i} ${pipClass}" data-slide="${i}" ${i == 1 ? "aria-current":""}>${pipContent}</button>`;
+  }
+  
+  return pips;
+}
+
+
+const getProgressMax = function(itemCount,visibleItems){
+
+  if(visibleItems == 1){
+    return itemCount;
+  }
+
+  let max = (Math.ceil(itemCount / visibleItems) * visibleItems) - visibleItems;
+
+  return max + 1;
+}
+
+const getProgressPercent = function(value,max){
+  
+  return (((value-1)/(max-1)) * 100);
+}
+
+export const carousel = function (carouselComponent) {
 
   var scrollTimeout;
 
+  const carouselElement = carouselComponent.shadowRoot.querySelector('.carousel');
+
   let carouselInner = carouselElement.querySelector('.carousel__inner');
   let carouselControls = carouselElement.querySelector('.carousel__controls');
-  let itemCount = row.querySelectorAll(':scope > .col').length;
+  let carouselProgress = carouselElement.querySelector('.carousel__progress [type="range"]');
+  let itemCount = carouselComponent.querySelectorAll(':scope > div').length;
+  let scrollArea = carouselInner.clientWidth;
+  let itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;
+  let visibleItems = Math.round(scrollArea / itemWidth);
+
+  carouselProgress.setAttribute('min',1);
+  carouselProgress.setAttribute('step',visibleItems);
+
+  let progressMax = getProgressMax(itemCount,visibleItems);
+
+  carouselProgress.setAttribute('max',progressMax);
+  carouselProgress.value = 1;
+
+  let percent = getProgressPercent(1,progressMax);
   
+  carouselProgress.style.setProperty('--percent', percent + "%");
+  
+  let stepperInterval, stepperEvent = "mouseup", stepperStart = "mousedown";
+    
+  if("ontouchstart" in document.documentElement) {
+    stepperEvent = "touchend";
+    stepperStart = "touchstart";
+  }
+
+
   // On scroll we need to make sure the buttons get corrected and the next testimonial is shown
   carouselInner.addEventListener('scroll', function(e){
     clearTimeout(scrollTimeout);
@@ -17,8 +99,8 @@ function carousel(carouselElement, row) {
       let scrollLeft = carouselInner.scrollLeft;
       let targetSlide = Math.round((scrollLeft / scrollWidth) * itemCount) + 1;
      
-      let itemWidth = row.querySelector(':scope > .col').scrollWidth;
-      let lastItemOffset = row.querySelector(':scope > .col:last-child').offsetLeft;
+      let itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;
+      let lastItemOffset = carouselComponent.querySelector(':scope > div:last-child').offsetLeft;
       //+60px here is to account for when the next offscreen slide is visible beneath the next arrow
       let lastItemInView = carouselInner.scrollLeft + scrollArea + carouselInner.getBoundingClientRect().left >= (lastItemOffset + 60);
 
@@ -27,6 +109,9 @@ function carousel(carouselElement, row) {
       //Check if theres room for more slides than we have
       let leftOverSpace = (Math.ceil(itemCount / visibleItems) * visibleItems) - itemCount;
 
+      carouselProgress.setAttribute('step',visibleItems);
+
+
       if(leftOverSpace > 0 && lastItemInView){
         targetSlide = (Math.floor(itemCount / visibleItems) * visibleItems) + 1;
       } 
@@ -49,6 +134,16 @@ function carousel(carouselElement, row) {
       else
         carouselElement.querySelector('.btn-next').removeAttribute('disabled');
       
+      carouselProgress.value = targetSlide;
+
+      
+      progressMax = getProgressMax(itemCount,visibleItems);
+
+      carouselProgress.setAttribute('max',progressMax);
+      percent = (targetSlide/progressMax) * 100;
+      percent = getProgressPercent(targetSlide,progressMax);
+      carouselProgress.style.setProperty('--percent', percent + "%");
+
     }, 100); 
 
   }, false);
@@ -65,8 +160,15 @@ function carousel(carouselElement, row) {
           button.removeAttribute('aria-current');
         });
         target.setAttribute('aria-current', true);
+
+        const customEvent = new CustomEvent("pip-clicked", {  detail: { 
+                                                            'slide': target.getAttribute('data-slide')
+                                                          }
+                                                        });
+
+        carouselComponent.dispatchEvent(customEvent);
         
-        const el = row.querySelector(`:scope > *:nth-child(${target.getAttribute('data-slide')})`);
+        const el = carouselComponent.querySelector(`:scope > *:nth-child(${target.getAttribute('data-slide')})`);
 
         carouselInner.scroll({
           top: 0,
@@ -83,11 +185,11 @@ function carousel(carouselElement, row) {
 
     let scrollArea = carouselInner.clientWidth;
     let scrollWidth = carouselInner.scrollWidth;
-    let itemWidth = row.querySelector(':scope > .col').scrollWidth;
+    let itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;
 
     let visibleItems = Math.round(scrollArea / itemWidth);
 
-    let lastItemOffset = row.querySelector(':scope > .col:last-child').offsetLeft;
+    let lastItemOffset = carouselComponent.querySelector(':scope > div:last-child').offsetLeft;
     let lastItemInView = carouselInner.scrollLeft + scrollArea + carouselInner.getBoundingClientRect().left >= (lastItemOffset + 60);
 
     //Check if theres room for more slides than we have
@@ -104,6 +206,15 @@ function carousel(carouselElement, row) {
 
     for (var target = e.target; target && target != this; target = target.parentNode) {
       if (typeof target.matches == "function" && target.matches('.btn-next, .btn-prev')) {
+
+        let direction = target.matches('.btn-next') ? 'next' : 'prev';
+
+        const customEvent = new CustomEvent(`${direction}-clicked`, {  detail: { 
+          'slide': target.getAttribute('data-go')
+          }
+        });
+
+        carouselComponent.dispatchEvent(customEvent);
         
         e.preventDefault();
         let scrollTo = target.classList.contains('btn-prev') ? carouselInner.scrollLeft - movement : carouselInner.scrollLeft + carouselInner.clientWidth;
@@ -117,6 +228,49 @@ function carousel(carouselElement, row) {
       }
     }
   }, false);
+
+
+  carouselProgress.addEventListener(stepperStart,function(event){
+    
+    clearInterval(stepperInterval);
+    stepperInterval = setInterval(function() {
+      scrollArea = carouselInner.clientWidth;
+      itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;
+      visibleItems = Math.round(scrollArea / itemWidth);
+      carouselProgress.setAttribute('step',visibleItems);
+      progressMax = getProgressMax(itemCount,visibleItems);
+      carouselProgress.setAttribute('max',progressMax);
+      percent = getProgressPercent(carouselProgress.value,progressMax);
+
+      carouselProgress.style.setProperty('--percent', percent + "%");
+    }, 10);
+  });
+
+  carouselProgress.addEventListener(stepperEvent,function(event){
+    clearInterval(stepperInterval);
+  });
+
+  carouselProgress.addEventListener('change', function(e){
+
+    clearInterval(stepperInterval);
+    let target = carouselComponent.querySelector(`:scope > *:nth-child(${carouselProgress.value})`);
+
+    carouselInner.scroll({
+      top: 0,
+      left: target ? target.offsetLeft - carouselInner.getBoundingClientRect().left : 0, 
+      behavior: 'smooth'
+    });
+
+    let direction = target.matches('.btn-next') ? 'next' : 'prev';
+        
+    const customEvent = new CustomEvent(`slider-changed`, {  detail: { 
+      'slide': carouselProgress.value
+      }
+    });
+
+    carouselComponent.dispatchEvent(customEvent);
+    
+  }, false);
 }
 
 export default carousel

package/assets/ts/modules/dialogs.ts

@@ -1,6 +1,4 @@
 // @ts-nocheck
-import { createEmbed } from "./youtubevideo"; 
-
 const extendDialogs = (body) => {
 
   Array.from(body.querySelectorAll('dialog[open]')).forEach((dialog, index) => {
@@ -36,8 +34,11 @@ const extendDialogs = (body) => {
       dialog.showModal();
       dialog.focus();
 
-      let firstWidth = dialog.offsetWidth;
-      dialog.setAttribute('style',`max-width: ${firstWidth}px;`);
+      if(!dialog.querySelector('iam-multi-step')){
+        
+        let firstWidth = dialog.offsetWidth;
+        dialog.setAttribute('style',`max-width: ${firstWidth}px;`);
+      }
 
       // When the modal is opened we want to make sure any duplicate checkboxes are matching the originals
       Array.from(dialog.querySelectorAll('[data-duplicate]')).forEach((element,index) => {
@@ -231,19 +232,8 @@ const extendDialogs = (body) => {
 
 export const createDialog = (dialog) => { 
 
-  // Create the video embed
-  let videoButton = dialog.querySelector('.youtube-embed a');
-  if (videoButton){
-    createEmbed(videoButton)
-  }
-
-  // Multi dialog
-  if(dialog.classList.contains('dialog--multi') && !dialog.querySelector(':scope > .steps')) {
-    createMultiFormDialog(dialog);
-  }
-
   // If you are using Vue eevents and bindings its recommended to add in the .mh-lg div manually to the dialog
-  if(!dialog.querySelector(':scope .mh-lg') && !dialog.classList.contains('dialog--multi')){
+  if(!dialog.querySelector(':scope .mh-lg') && !dialog.querySelector('iam-multi-step')){
     dialog.innerHTML = `<div class="mh-lg">${dialog.innerHTML}</div>`;
 
     let dialogContent = dialog.querySelector('.mh-lg');
@@ -266,170 +256,4 @@ export const createDialog = (dialog) => {
 
 }
 
-export const createMultiFormDialog = (dialog) => {
-
-  let buttons = "";
-  let fieldsets = Array.from(dialog.querySelectorAll('fieldset[data-title]'));
-  let form = dialog.querySelector('form');
-
-  fieldsets.forEach((fieldset,index) => {
-    buttons += `<button data-title="${fieldset.getAttribute('data-title')}" type="button" class="${index == 0 ? "active":""}" tabindex="-1">${fieldset.getAttribute('data-title')}</button>`;
-
-    const btnWrapper = document.createElement("div");
-    btnWrapper.classList.add('btn--wrapper');
-    fieldset.appendChild(btnWrapper);
-    
-    if(index != 0)
-      btnWrapper.innerHTML += `<button data-title="${fieldsets[index-1].getAttribute('data-title')}" class="btn btn-secondary mb-0" data-previous type="button">Previous</button>`;
-
-    if(index != fieldsets.length - 1)
-      btnWrapper.innerHTML += `<button data-title="${fieldsets[index+1].getAttribute('data-title')}" class="btn btn-primary mb-0" data-next type="button">Next</button>`;
-
-    // Last fieldset
-    if(index == fieldsets.length - 1){
-      if(form && form.querySelector(':scope > button[type="submit"]')){
-
-        let existingButton = form.querySelector(':scope > button[type="submit"]');
-        existingButton.classList.add('mb-0')
-
-        btnWrapper.insertAdjacentElement('beforeend',existingButton);
-      }
-      else
-        btnWrapper.innerHTML += `<button data-title="${fieldsets[index].getAttribute('data-title')}" class="btn btn-primary mb-0" data-next type="submit">Submit</button>`;
-    }  
-  });
-
-  dialog.insertAdjacentHTML('afterbegin',`<div class="steps bg-primary">${buttons}</div>`);
-
-
-  // Open the fieldset with an error inside
-  let validatedFieldsets = Array.from(dialog.querySelectorAll('fieldset.was-validated'));
-  for (let i = 0; i < validatedFieldsets.length; i++) {
-
-    let fieldset = validatedFieldsets[i];
-    let fieldsetID = fieldset.getAttribute('data-title');
-    
-    if(fieldset.querySelector('.is-invalid')){
-
-      Array.from(dialog.querySelectorAll(`[data-title="${fieldsetID}"]`)).forEach((element, index) => {
-
-        element.classList.add('active');
-      });
-
-      break;
-    }
-    else {
-
-      Array.from(dialog.querySelectorAll(`[data-title="${fieldsetID}"]`)).forEach((element, index) => {
-
-        element.classList.add('valid');
-      });
-    }
-  }
-
-  // Prevent the bubble messages
-  dialog.addEventListener('invalid', (function () {
-    return function (e) {
-      e.preventDefault();
-    };
-  })(), true);
-
-
-  function validateFieldset(button){
-
-    const currentFieldset = dialog.querySelector(`fieldset.active`) ? dialog.querySelector(`fieldset.active`) : dialog.querySelector(`fieldset[data-title]`);
-    const currentFieldsetID = currentFieldset.getAttribute('data-title');
-    let isFieldsetValid = true;
-
-    currentFieldset.classList.add('was-validated');
-
-    Array.from(currentFieldset.querySelectorAll('input')).forEach((input, index) => {
-
-      if (!input.checkValidity())
-        isFieldsetValid = false;
-    });
-
-    // If valid mode to next field set
-    if(!isFieldsetValid){
-
-      Array.from(dialog.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach((element, index) => {
-
-        element.classList.remove('valid');
-      });
-    }
-    else {
-
-      Array.from(dialog.querySelectorAll(`[data-title="${currentFieldsetID}"]`)).forEach((element, index) => {
-
-        element.classList.add('valid');
-      });
-    }
-
-    // Allow the previous button to navigate
-    if(isFieldsetValid || !button.hasAttribute('data-next')){
-
-      const fieldset = dialog.querySelector(`fieldset[data-title="${button.getAttribute('data-title')}"]`);
-      const step = dialog.querySelector(`.steps button[data-title="${button.getAttribute('data-title')}"]`);
-
-      Array.from(dialog.querySelectorAll('button')).forEach((button, index) => {
-        button.classList.remove('active');
-      });
-      Array.from(dialog.querySelectorAll('fieldset')).forEach((button, index) => {
-        button.classList.remove('active');
-      });
-
-      step.classList.add('active');
-      fieldset.classList.add('active');
-    }
-
-
-    let fieldsetCount = Array.from(dialog.querySelectorAll(`fieldset`)).length;
-    let validFieldsetCount = Array.from(dialog.querySelectorAll(`fieldset.valid`)).length;
-
-    // update the progress bar
-    dialog.style.setProperty('--progress', `${(validFieldsetCount/(fieldsetCount - 1) * 100)}%`);
-  }
-
-  // remove error messages from server
-  dialog.addEventListener('keydown', (event) => {
-    if (event && event.target instanceof HTMLElement && event.target.closest('button')){
-
-      const button = event.target.closest('button');
-
-      if(event.keyCode == 13 && button.getAttribute('type') != "submit"){
-        
-        event.preventDefault();
-        validateFieldset(button);
-      }
-
-    }
-
-    if (event && event.target instanceof HTMLElement && event.target.closest('input')){
-      const input = event.target.closest('input');
-
-      input.classList.remove('is-invalid');
-
-      if(event.keyCode == 13){
-        
-        event.preventDefault();
-      }
-    }
-  });
-
-
-  dialog.addEventListener('click', (event) => {
-    if (event && event.target instanceof HTMLElement && event.target.closest('button[type="submit"]')){
-      
-      const form = event.target.closest('form');
-      form.classList.add('was-validated');
-    }
-    else if (event && event.target instanceof HTMLElement && event.target.closest('button[data-title]')){
-
-      const button = event.target.closest('button[data-title]');
-      validateFieldset(button);
-    };
-    return null
-  });
-}
-
 export default extendDialogs;

package/assets/ts/modules/table.ts

@@ -758,7 +758,7 @@ export const filterTable = (table, form, wrapper) => {
   });
 
   // Work out what to display after pagination
-  Array.from(table.querySelectorAll('tbody tr:not(.filtered')).forEach((row, index) => {
+  Array.from(table.querySelectorAll('tbody tr:not(.filtered)')).forEach((row, index) => {
 
     matched++;
 

package/assets/ts/scripts.ts

@@ -0,0 +1,22 @@
+// @ts-nocheck
+// Modules
+import * as helpers from '../js/modules/helpers'
+import extendDialogs from '../js/modules/dialogs'
+import createDataLayer from '../js/modules/data-layer'
+import extendInputs from '../js/modules/inputs';
+import createDynamicEvents from '../js/modules/dynamicEvents'
+
+// Attach classes to dom elements
+document.addEventListener("DOMContentLoaded", function() {
+
+  createDataLayer();
+  createDynamicEvents();
+  
+  // Global stuff
+  helpers.addBodyClasses(document.body);
+  helpers.addGlobalEvents(document.body);
+  
+  extendDialogs(document.body);
+  extendInputs(document.body);
+
+});

package/assets/ts/tests/filterlist.spec.ts

@@ -24,6 +24,6 @@ describe('addDataAttributes', () => {
   test('should add a class of d-none to each item except the one containing Lucas Myers', () => {
 
     expect(list.querySelectorAll('li:not(.d-none)').length).toEqual(1);
-    expect(list.querySelector('li:not(.d-none').textContent).toEqual('Lucas Myers');
+    expect(list.querySelector('li:not(.d-none)').textContent).toEqual('Lucas Myers');
   });
 });