@iamproperty/components 7.7.1--beta15 → 7.7.1--beta17

package/assets/ts/modules/carousel.ts

@@ -1,7 +1,7 @@
 export const generateThumbnailList = function (carouselComponent): any {
   const thumbnailImages = [];
 
-  Array.from(carouselComponent.querySelectorAll(':scope > div')).forEach((slide, index) => {
+  Array.from(carouselComponent.querySelectorAll(':scope > :is(div,iam-card)')).forEach((slide, index) => {
     if (slide.hasAttribute('data-thumbnail')) {
       thumbnailImages[index] = slide.getAttribute('data-thumbnail');
     }
@@ -11,7 +11,7 @@ export const generateThumbnailList = function (carouselComponent): any {
 };
 
 export const generatePipsHTML = function (carouselComponent, thumbnailImages): string {
-  const itemCount = carouselComponent.querySelectorAll(':scope > div').length;
+  const itemCount = carouselComponent.querySelectorAll(':scope > :is(div,iam-card)').length;
 
   let pips = '';
   for (let i = 1; i <= itemCount; i++) {
@@ -53,9 +53,9 @@ export const carousel = function (carouselComponent): void {
   const carouselInner = carouselElement.querySelector('.carousel__inner');
   const carouselControls = carouselElement.querySelector('.carousel__controls');
   const carouselProgress = carouselElement.querySelector('.carousel__progress [type="range"]');
-  const itemCount = carouselComponent.querySelectorAll(':scope > div').length;
+  const itemCount = carouselComponent.querySelectorAll(':scope > :is(div,iam-card)').length;
   let scrollArea = carouselInner.clientWidth;
-  let itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;
+  let itemWidth = carouselComponent.querySelector(':scope > :is(div,iam-card)').scrollWidth;
   let visibleItems = Math.round(scrollArea / itemWidth);
 
   carouselProgress.setAttribute('min', 1);
@@ -90,8 +90,8 @@ export const carousel = function (carouselComponent): void {
         const scrollLeft = carouselInner.scrollLeft;
         let targetSlide = Math.round((scrollLeft / scrollWidth) * itemCount) + 1;
 
-        const itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;
-        const lastItemOffset = carouselComponent.querySelector(':scope > div:last-child').offsetLeft;
+        const itemWidth = carouselComponent.querySelector(':scope > :is(div,iam-card)').scrollWidth;
+        const lastItemOffset = carouselComponent.querySelector(':scope > :is(div,iam-card):last-child').offsetLeft;
         //+60px here is to account for when the next offscreen slide is visible beneath the next arrow
         const lastItemInView =
           carouselInner.scrollLeft + scrollArea + carouselInner.getBoundingClientRect().left >= lastItemOffset + 60;
@@ -176,11 +176,11 @@ export const carousel = function (carouselComponent): void {
     function (e) {
       const scrollArea = carouselInner.clientWidth;
       //const scrollWidth = carouselInner.scrollWidth;
-      const itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;
+      const itemWidth = carouselComponent.querySelector(':scope > :is(div,iam-card)').scrollWidth;
 
       const visibleItems = Math.round(scrollArea / itemWidth);
 
-      const lastItemOffset = carouselComponent.querySelector(':scope > div:last-child').offsetLeft;
+      const lastItemOffset = carouselComponent.querySelector(':scope > :is(div,iam-card):last-child').offsetLeft;
       const lastItemInView =
         carouselInner.scrollLeft + scrollArea + carouselInner.getBoundingClientRect().left >= lastItemOffset + 60;
 
@@ -229,7 +229,7 @@ export const carousel = function (carouselComponent): void {
     clearInterval(stepperInterval);
     stepperInterval = setInterval(function () {
       scrollArea = carouselInner.clientWidth;
-      itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;
+      itemWidth = carouselComponent.querySelector(':scope > :is(div,iam-card)').scrollWidth;
       visibleItems = Math.round(scrollArea / itemWidth);
       carouselProgress.setAttribute('step', visibleItems);
       progressMax = getProgressMax(itemCount, visibleItems);
@@ -276,10 +276,10 @@ export const updateCarousel = function (carouselComponent): void {
   const carouselInner = carouselElement.querySelector('.carousel__inner');
   const carouselControls = carouselElement.querySelector('.carousel__controls');
   const carouselProgress = carouselElement.querySelector('.carousel__progress [type="range"]');
-  const itemCount = carouselComponent.querySelectorAll(':scope > div').length;
+  const itemCount = carouselComponent.querySelectorAll(':scope > :is(div,iam-card)').length;
 
   let scrollArea = carouselInner.clientWidth;
-  let itemWidth = carouselComponent.querySelector(':scope > div').scrollWidth;
+  let itemWidth = carouselComponent.querySelector(':scope > :is(div,iam-card)').scrollWidth;
   let visibleItems = Math.round(scrollArea / itemWidth);
 
   carouselProgress.setAttribute('min', 1);

package/assets/ts/modules/nav.ts

@@ -26,4 +26,139 @@ const navbar = (element): void => {
   }
 };
 
+export const populateNav = (data):void => {
+
+  let html = ``;
+
+  data.forEach((feature) => {
+
+    if(feature.attributes.sections.length)
+      html += `<details name="megamenu"><summary>${feature.attributes.title}</summary><div data-title="${feature.attributes.title}">${populateSections(feature.attributes.sections)}</div></details>`;
+    else if(feature.attributes.links)
+      html += `<details name="megamenu"><summary>${feature.attributes.title}</summary><div data-title="${feature.attributes.title}">${populateLinks(feature.attributes.links)}</div></details>`;
+    else 
+      html += `<a href="/">${feature.attributes.title}</a>`;
+  });
+
+  return html;
+}
+
+export const populateSections = (data):void => {
+
+  let html = ``;
+
+  data.forEach((section) => {
+
+    html += `<span class="section section--${section.layout}">
+      ${section.title ? `<span class="lead text-heading section-title" data-product="${section.id}" data-title>${section.title}</span>` : ''}
+      ${section.description ? `<span class="lead section-desc" data-product="${section.id}">! ${section.description}</span>` : ''}
+      ${populateLinks(section.links)}
+    </span>`;
+  });
+  return html;
+}
+
+export const populateLinks = (data):void => {
+
+  let html = ``;
+
+  data.forEach((link) => {
+
+
+    html += `<a href="${link.destinations.unlinked}" target="_blank" data-product="${link.productKey}" data-feature="${link.featureKey}" data-enabled="${link.destinations.linkedEnabled}" data-disabled="${link.destinations.linkedDisabled}">${link.title}</a>`;
+
+  });
+
+  return html;
+}
+
+export const loadNavData = async(Cookies): any => {
+
+  //const ajaxURL = 'https://dev.hub.iamproperty.group/data/ecosystem-switcher.json';
+  const ajaxURL = '/nav.json';
+
+  // Setup controller vars if not already set
+  if (!window.controller) window.controller = [];
+
+  // Abort if controller already present for this url
+  if (window.controller[ajaxURL]) window.controller[ajaxURL].abort();
+
+  // Create a new controller so it can be aborted if new fetch made
+  window.controller[ajaxURL] = new AbortController();
+  const { signal } = window.controller[ajaxURL];
+
+  try {
+    const response = await fetch(ajaxURL, {
+      signal,
+      method: 'GET',
+      headers: {
+        Accept: 'application/json',
+      },
+    });
+
+    const json = await response.json();
+    const data = json.data ? json.data : json;
+    return data;
+  } catch (error) {
+    if (error?.name === 'AbortError') {
+      return true;
+    }
+    console.log(error);
+    return 'There has been a problem. Please try again in a few moments.';
+  }
+}
+
+export const loadUserData = async(Cookies): any => {
+
+  const ajaxURL = '/user.json';
+
+  // Setup controller vars if not already set
+  if (!window.controller) window.controller = [];
+
+  // Abort if controller already present for this url
+  if (window.controller[ajaxURL]) window.controller[ajaxURL].abort();
+
+  // Create a new controller so it can be aborted if new fetch made
+  window.controller[ajaxURL] = new AbortController();
+  const { signal } = window.controller[ajaxURL];
+
+  try {
+    const response = await fetch(ajaxURL, {
+      signal,
+      method: 'GET',
+      headers: {
+        Accept: 'application/json',
+      },
+    });
+
+    const json = await response.json();
+    const data = json.data ? json.data : json;
+    return data;
+  } catch (error) {
+    if (error?.name === 'AbortError') {
+      return true;
+    }
+    console.log(error);
+    return 'There has been a problem. Please try again in a few moments.';
+  }
+}
+
+export const setEnabledLinks = (component,data):void => {
+
+  console.log(data);
+
+
+
+  
+  component.querySelectorAll(`[data-product][data-feature]`).forEach((element) => {
+    const isEnabled = data.attributes.products[element.getAttribute('data-product')].features[element.getAttribute('data-feature')];
+    element.setAttribute('data-is-enabled',isEnabled);
+    if(isEnabled && element.getAttribute('data-enabled')){
+      element.setAttribute('href',element.getAttribute('data-enabled'));
+      element.removeAttribute('target');
+    }
+  });
+
+}
+
 export default navbar;

package/assets/ts/modules/tabs.ts

@@ -165,7 +165,7 @@ export const setTabsEventHandlers = function (tabsElement: Element): void {
   details.forEach((detailsElement, index) => {
     detailsElement.addEventListener("toggle", function() {
       if(detailsElement.open)
-        detailsElement.querySelector('button,input').focus();
+        detailsElement.querySelector('button,input')?.focus();
     });
   });