@iamproperty/components 7.8.2--beta3 → 7.8.2--beta4

package/assets/ts/components/carousel/carousel.component.ts

@@ -5,6 +5,35 @@ trackComponentRegistered('iam-carousel');
 class iamCarousel extends HTMLElement {
   constructor() {
     super();
+    this.attachShadow({ mode: 'open' });
+
+    const assetLocation = document.body.hasAttribute('data-assets-location')
+      ? document.body.getAttribute('data-assets-location')
+      : '/assets';
+
+    const loadCSS = `@import "${assetLocation}/css/components/carousel.component.css";`;
+
+    const template = document.createElement('template');
+
+    template.innerHTML = /* HTML */ `
+      <style>
+        ${loadCSS}
+      </style>
+      <slot></slot>
+      <div class="carousel__controls" part="carousel__controls">
+        <div class="carousel__pips" part="carousel__pips"></div>
+        <div class="carousel__progress carousel__progress-xs" part="carousel__progress-xs">
+          <input type="range" min="1" max="100" value="1" step="1" />
+        </div>
+        <div class="carousel__progress carousel__progress-sm" part="carousel__progress-sm">
+          <input type="range" min="1" max="100" value="1" step="1" />
+        </div>
+        <div class="carousel__progress carousel__progress-md" part="carousel__progress-md">
+          <input type="range" min="1" max="100" value="1" step="1" />
+        </div>
+      </div>
+    `;
+    this.shadowRoot?.appendChild(template.content.cloneNode(true));
   }
 
   generateThumbnailList = (carouselComponent): any => {
@@ -46,7 +75,7 @@ class iamCarousel extends HTMLElement {
   }
 
   connectedCallback(): void {
-    
+    /*
     this.insertAdjacentHTML('beforeend',`
       <div class="carousel__controls">
         <div class="carousel__pips"></div>
@@ -61,15 +90,48 @@ class iamCarousel extends HTMLElement {
         </div>
       </div>
     `)
+    */
  
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const carouselElement = this;
-    const carouselProgress = this.querySelector('.carousel__progress-xs [type="range"]');
-    const carouselProgressSM = this.querySelector('.carousel__progress-sm [type="range"]');
-    const carouselProgressMD = this.querySelector('.carousel__progress-md [type="range"]');
+    const carouselProgress = this.shadowRoot.querySelector('.carousel__progress-xs [type="range"]');
+    const carouselProgressSM = this.shadowRoot.querySelector('.carousel__progress-sm [type="range"]');
+    const carouselProgressMD = this.shadowRoot.querySelector('.carousel__progress-md [type="range"]');
     const itemCount = this.querySelectorAll(':scope > *:not(.carousel__controls)').length;
     const progressPercent = this.progressPercent;
 
+    this.querySelectorAll(':scope > *').forEach((item,index) => {
+      item.setAttribute('data-child',index+1);
+    })
+    this.setAttribute('data-current',1);
+    
+    this.addEventListener("scrollsnapchange", (event) => {
+      
+      const snapTargetInlineElement = event.snapTargetInline;
+      const child = Array.from(snapTargetInlineElement.parentElement.children).indexOf(snapTargetInlineElement)+1;
+
+      if(child != this.getAttribute('data-current')){
+        const customEvent = new CustomEvent(`snap-to`, {
+          detail: {
+            item: child,
+          },
+        });
+
+        this.dispatchEvent(customEvent);
+        this.setAttribute('data-current',child);
+      }
+
+      console.log(child);
+      carouselProgress.value = child;
+      carouselProgress.style.setProperty('--percent', progressPercent(child, itemCount));
+      carouselProgressSM.value = child;
+      carouselProgressSM.style.setProperty('--percent', progressPercent(child, carouselProgressSM?.getAttribute('max')));
+      carouselProgressMD.value = child;
+      carouselProgressMD.style.setProperty('--percent', progressPercent(child, carouselProgressMD?.getAttribute('max')));
+      
+    });
+    
+
     let stepperInterval,
       stepperEvent = 'mouseup',
       stepperStart = 'mousedown';
@@ -111,17 +173,18 @@ class iamCarousel extends HTMLElement {
   
     // SM Progress bar
     const smStep = this.getAttribute('data-smcols') ? this.getAttribute('data-smcols') : 1;
-    const smItemCount = Math.floor(itemCount / smStep) * smStep;
+    //const smItemCount = Math.floor(itemCount / smStep) * smStep;
+    const SMMax = ((Math.floor(itemCount / smStep)-1) * smStep)+1;
 
-    carouselProgressSM.setAttribute('max', smItemCount);
+    carouselProgressSM.setAttribute('max', SMMax);
     carouselProgressSM.setAttribute('step', smStep);
 
-    carouselProgressSM.style.setProperty('--percent', progressPercent(carouselProgressSM.value, smItemCount));
+    carouselProgressSM.style.setProperty('--percent', progressPercent(carouselProgressSM.value, carouselProgressSM?.getAttribute('max')));
     
     carouselProgressSM.addEventListener(stepperStart, () => {
       clearInterval(stepperInterval);
       stepperInterval = setInterval(function () {
-        carouselProgressSM.style.setProperty('--percent', progressPercent(carouselProgressSM.value, smItemCount));
+        carouselProgressSM.style.setProperty('--percent', progressPercent(carouselProgressSM.value, carouselProgressSM?.getAttribute('max')));
       });
     });
 
@@ -133,8 +196,8 @@ class iamCarousel extends HTMLElement {
 
       clearInterval(stepperInterval);
 
-      carouselProgressSM.style.setProperty('--percent', progressPercent(carouselProgressSM.value, smItemCount));
-      const scrollTo = Math.floor((carouselElement.scrollWidth / smItemCount) * carouselProgressSM.value);
+      carouselProgressSM.style.setProperty('--percent', progressPercent(carouselProgressSM.value, carouselProgressSM?.getAttribute('max')));
+      const scrollTo = Math.floor((carouselElement.scrollWidth / itemCount) * carouselProgressSM.value);
 
       carouselElement.scrollTo({
         top: 0,
@@ -145,18 +208,18 @@ class iamCarousel extends HTMLElement {
 
     // MD Progress bar
 
-    const mdStep = this.getAttribute('data-smcols') ? this.getAttribute('data-smcols') : 1;
-    const mdItemCount = Math.floor(itemCount / mdStep) * mdStep;
+    const mdStep = this.getAttribute('data-mdcols') ? this.getAttribute('data-mdcols') : 1;
+    const mdMax = ((Math.floor(itemCount / mdStep)-1) * mdStep)+1;
 
-    carouselProgressMD.setAttribute('max', mdItemCount);
+    carouselProgressMD.setAttribute('max', mdMax);
     carouselProgressMD.setAttribute('step', mdStep);
 
-    carouselProgressMD.style.setProperty('--percent', progressPercent(carouselProgressMD.value, mdItemCount));
-    
+    carouselProgressMD.style.setProperty('--percent', progressPercent(carouselProgressMD.value, carouselProgressMD?.getAttribute('max')));
+
     carouselProgressMD.addEventListener(stepperStart, () => {
       clearInterval(stepperInterval);
       stepperInterval = setInterval(function () {
-        carouselProgressMD.style.setProperty('--percent', progressPercent(carouselProgressMD.value, mdItemCount));
+        carouselProgressMD.style.setProperty('--percent', progressPercent(carouselProgressMD.value, carouselProgressMD?.getAttribute('max')));
       });
     });
 
@@ -168,8 +231,10 @@ class iamCarousel extends HTMLElement {
 
       clearInterval(stepperInterval);
 
-      carouselProgressMD.style.setProperty('--percent', progressPercent(carouselProgressMD.value, mdItemCount));
-      const scrollTo = Math.floor((carouselElement.scrollWidth / mdItemCount) * carouselProgressMD.value);
+      carouselProgressMD.style.setProperty('--percent', progressPercent(carouselProgressMD.value, carouselProgressMD?.getAttribute('max')));
+      const scrollTo = Math.floor((carouselElement.scrollWidth / itemCount) * carouselProgressMD.value);
+
+      console.log(carouselProgressMD.value);
 
       carouselElement.scrollTo({
         top: 0,
@@ -180,7 +245,7 @@ class iamCarousel extends HTMLElement {
 
 
     // Thumbnails
-    const carouselPips = this.querySelector('.carousel__pips');
+    const carouselPips = this.shadowRoot.querySelector('.carousel__pips');
 
     if (carouselElement.querySelector('[data-thumbnail]')) {
       const thumbnailImages = this.generateThumbnailList(carouselElement);

package/assets/ts/components/content/content.component.ts

@@ -1,5 +1,4 @@
-
-import { transformButtons } from '../../modules/content';
+import {createTitle,replaceShortcode,transformElement,transformButtons, loadComponents} from '../../modules/content';
 
 class iamContent extends HTMLElement {
   constructor() {
@@ -23,95 +22,11 @@ class iamContent extends HTMLElement {
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-  addTitle = (title):void => {
-
-    if(this.hasAttribute('data-title-tag')){
-
-      return `<${this.getAttribute('data-title-tag')} class="${this.getAttribute('data-title-class')} iam-content--title">${title}</${this.getAttribute('data-title-tag')}>`;
-    }
-
-    return '';
-  }
-
-  fixContent = (component):void => {
-
-    const transform = component.getAttribute('data-transform');
-    let wrapper = component;
-
-    if(transform){
-
-      component.querySelectorAll(`${transform} > *:empty`).forEach((element) => {
-        element.remove();
-      });
-
-      wrapper = component.querySelector(`${transform}`);
-    }
-    else {
-
-      component.querySelectorAll(`:scope > *:empty`).forEach((element) => {
-        element.remove();
-      });
-    }
-    
-    const itemClass = component.getAttribute('data-items-class');
-
-    if(itemClass){
-        
-      wrapper.querySelectorAll(`:scope > *`).forEach((element) => {
-        element.classList.add(itemClass);
-      });
-    }
-
-  }
-
   connectedCallback(): void {
     // eslint-disable-next-line @typescript-eslint/no-this-alias
     const component = this;
     const url = this.getAttribute('data-url');
 
-    const transform = this.getAttribute('data-transform');
-
-    const fixContent = this.fixContent;
-
-    let elementAttributes = '';
-
-
-    for (const attr of this.attributes) {
-      elementAttributes += `${attr.name}="${attr.value}" `;
-    }
-
-    const addTitle = this.addTitle;
-
-    const registerComponents = (contentComponent): void => {
-      const components = ['skeleton','bone','carousel', 'card', 'banner', 'notification'];
-
-      const assetLocation = document.body.hasAttribute('data-assets-location')
-        ? document.body.getAttribute('data-assets-location')
-        : '/assets';
-
-      // Load components - Each component will load once the first of its type has been loaded
-      components.forEach((component) => {
-        if (component == 'notification') {
-          document.querySelectorAll('[data-notification]').forEach((element) => {
-            element.outerHTML = element.outerHTML
-              .replace(/<div/g, '<iam-notification')
-              .replace(/<\/div>/g, '</iam-notification>');
-          });
-        }
-
-        if (contentComponent.getElementsByTagName(`iam-${component}`).length === 0) return;
-
-        import(/* @vite-ignore */ `${assetLocation}/js/components/${component}/${component}.component.js`)
-          .then((module) => {
-            if (!window.customElements.get(`iam-${component}`))
-              window.customElements.define(`iam-${component}`, module.default);
-          })
-          .catch((err) => {
-            console.log(err.message);
-          });
-      });
-    };
-
     if (url) {
       const newXHRRequest = new XMLHttpRequest();
       newXHRRequest.open('GET', url, true);
@@ -123,37 +38,58 @@ class iamContent extends HTMLElement {
           if(Array.isArray(response))
             response = response[0];
 
-          const renderedContent = response.content.rendered.replaceAll(/<p>\[(.*)\]<\/p>/g, "<span data-shortcode=\"$1\"><iam-skeleton><iam-bone class=\"search\"></iam-bone></iam-skeleton></span>");
+          // Create the rendered content block and maintain any shortcodes
+          const renderedContent = replaceShortcode(response.content.rendered);
 
-
-          
+          // Update the content title
           component.parentElement?.querySelector('.iam-content--title')?.remove();
-          component.insertAdjacentHTML('beforebegin',addTitle(response.title.rendered));
-
+          const renderedTitle = createTitle(component, response.title.rendered);
 
+          // Transform the component if required
+          if(component.hasAttribute('data-transform')){
 
-          if(transform){
-          
-            component.innerHTML = `<${transform} ${elementAttributes}>${renderedContent}</${transform}>`;  
+            component.innerHTML = transformElement(component,renderedTitle,renderedContent);
             component.removeAttribute('class');
+
+            component.querySelectorAll(`${component.getAttribute('data-transform')} > *:empty`).forEach((element) => {
+              element.remove();
+            });
           }
           else {
-            
+
+            component.insertAdjacentHTML('beforebegin',renderedTitle);
+
             component.innerHTML = `${renderedContent}`;
+            component.querySelectorAll(`:scope > *:empty`).forEach((element) => {
+              element.remove();
+            });
           }
-            
-          fixContent(component);
-          registerComponents(component);
-          transformButtons(component);
 
+          // Load components - Each component will load once the first of its type has been loaded
+          loadComponents(component);
+
+          // Transform the buttons
+          Array.from(document.querySelectorAll('.wp-block-buttons')).forEach((buttons) => {
+
+            const fragment = transformButtons(buttons);
+            buttons.parentNode.replaceChild(fragment, buttons);
+          });
+
+          // This allows for content added dynamically via the standardised nav to be added after the content is loaded
           Array.from(document.querySelectorAll('[data-variable]')).forEach((element) => {
 
             if(document.querySelector(`[data-save-variable="${element.getAttribute('data-variable')}"][data-variable-value]`))
               element.innerHTML = document.querySelector(`[data-save-variable="${element.getAttribute('data-variable')}"][data-variable-value]`)?.getAttribute('data-variable-value');
           });
 
-          const changeEvent = new CustomEvent('loaded', { detail: {triggered: true} });
+          // Dispatch the loaded event for external JS and save to the data layer
+          const eventDetails = {url: url};
+          const changeEvent = new CustomEvent('content-loaded', { detail: eventDetails });
+
           component?.dispatchEvent(changeEvent);
+
+          window.dataLayer = window.dataLayer || [];
+          window.dataLayer.push({'event': 'content-loaded', ...eventDetails});
         }
       };