mp-design-system 1.2.63 → 1.2.65

package/src/assets/js/imports/gallery.js

@@ -1,87 +0,0 @@
-function Gallery() {
-  const mainSlides = document.querySelectorAll('.c-gallery__main .c-gallery__slide');
-  const thumbnailSlides = document.querySelectorAll('.c-gallery__thumbnails .c-gallery__slide');
-
-  thumbnailSlides.forEach(thumbnailSlide => thumbnailSlide.addEventListener('click', function(e) {
-    thumbnailSlides.forEach(function(thumbnail) {
-      if(thumbnail != e.target.parentNode) {
-        thumbnail.classList.remove('active');
-      }
-    });
-    e.target.parentNode.classList.add('active');
-
-    mainSlides.forEach(function(mainSlide) {
-      if(mainSlide.dataset.slide == thumbnailSlide.dataset.slide) {
-        mainSlide.classList.add('active');
-      } else {
-        mainSlide.classList.remove('active');
-      }
-    });
-  }));
-
-  mainSlides.forEach(function(mainSlide) {
-    if(!mainSlide.classList.contains('c-gallery__video')) {
-      mainSlide.addEventListener('click', lightboxTrigger);
-    }
-  });
-
-  function lightboxTrigger() {
-    const lightbox = document.querySelector('.c-gallery__main').cloneNode(true);
-    lightbox.classList.remove('c-gallery__main');
-    lightbox.classList.add('c-lightbox');
-    lightbox.querySelectorAll('.c-gallery__slide').forEach(function(slide) {
-      if(slide.classList.contains('c-gallery__video')) {
-        slide.remove();
-      }
-      if(!slide.classList.contains('c-gallery__video')) {
-        var slideImg = slide.querySelector('img');
-        if(slideImg.srcset != '') {
-          slideImg.removeAttribute('srcset');
-        }
-        var slideImgSrc = slideImg.getAttribute('src');
-        if (slideImgSrc) {
-          if (slideImgSrc.indexOf('?') !== -1) {
-            slideImg.setAttribute('src', slideImgSrc.split("?")[0] + '?quality=90&width=2176');
-          } else {
-            slideImg.setAttribute('src', slideImgSrc + '?quality=90&width=2176');
-          }
-        } else {
-          console.log(slideImg);
-          console.log('has no src defined...');
-        }
-      }
-      slide.classList.add('c-lightbox__slide');
-      slide.classList.remove('c-gallery__slide');
-    });
-    document.body.appendChild(lightbox);
-    lightbox.insertAdjacentHTML('beforeend', '<a class="c-lightbox__prev"></a><a class="c-lightbox__next"></a>');
-
-    lightbox.querySelector('.c-lightbox__prev').addEventListener('click', function() {
-      const lightboxActive = lightbox.querySelector('.active');
-      const prevImage = lightbox.querySelector('[data-slide="' + (parseInt(lightboxActive.dataset.slide) - 1) + '"]');
-      if(prevImage != null) {
-        lightboxActive.classList.remove('active');
-        prevImage.classList.add('active');
-      }
-    });
-
-    lightbox.querySelector('.c-lightbox__next').addEventListener('click', function() {
-      const lightboxActive = lightbox.querySelector('.active');
-      const nextImage = lightbox.querySelector('[data-slide="' + (parseInt(lightboxActive.dataset.slide) + 1) + '"]');
-      if(nextImage != null) {
-        lightboxActive.classList.remove('active');
-        nextImage.classList.add('active');
-      }
-    });
-
-    lightbox.addEventListener('click', function(e) {
-      if (e.target !== e.currentTarget) {
-        return;
-      } else {
-        lightbox.remove();
-      }
-    });
-  }
-}
-
-export default Gallery;

package/src/assets/js/imports/hero-pattern.js

@@ -1,94 +0,0 @@
-import { range, shuffle, userPrefersReducedMotion } from './utilities';
-
-function HeroPattern() {
-  let time = 0;
-
-  const c = document.querySelector('.c-hero__canvas');
-  if (!c) return;
-  const ctx = c.getContext("2d");
-  
-  const sineColour = "rgb(19,170,19)";
-  const reduceMotion = userPrefersReducedMotion();
-
-  const crossGap = 147;
-  const minimumOpacity = 0;
-  const maximumOpacity = 0.5;
-  const crossSpeed = 0.25;
-
-  let width;
-  let height;
-  let across;
-  let down;
-  let crosses = [];
-  let totalPoints;
-
-  function draw() {
-    // Sine wave
-    time = time + 0.005;
-    
-    ctx.clearRect(0, 0, c.width, c.height);
-    ctx.beginPath();
-  
-    for(let cnt = c.width; cnt > 0; cnt--) {
-      ctx.lineTo(cnt, c.height * 0.5 - (Math.cos(time + cnt / 5 * 0.03) * (height * 0.3) ));
-    }
-  
-    ctx.lineWidth = 0.5;
-    ctx.strokeStyle = sineColour;
-    ctx.stroke();
-  
-    // Crosses
-    crosses.forEach(cross => {
-      drawCross(cross.x, cross.y, range(0, crosses.length, minimumOpacity, maximumOpacity, cross.counter));
-  
-      cross.counter += cross.direction;
-      if (cross.counter >= crosses.length) cross.direction = -1 * crossSpeed;
-      if (cross.counter < 0) cross.direction = crossSpeed;
-    })
-  
-    if (!reduceMotion) {
-      window.requestAnimationFrame(draw);
-    }
-  }
-  
-  function onResize() {
-    width = c.scrollWidth;
-    height = c.scrollHeight;
-  
-    ctx.canvas.width  = width;
-    ctx.canvas.height = height;
-  
-    across = Math.ceil(width / crossGap);
-    down = Math.ceil(height / crossGap);
-  
-    totalPoints = (across + 1) * (down + 1);
-    const ids = shuffle(Array.from({ length: totalPoints }, (_, i) => (i)))
-    crosses = [];
-    for(let x = 0; x <= across; x++) {
-      for(let y = 0; y <= down; y++) {
-        crosses.push({
-          counter: ids.shift(),
-          direction: Math.random() > 0.5 ? crossSpeed : -1 * crossSpeed,
-          x: crossGap * (x + 1) - crossGap / 1,
-          y: crossGap * (y + 1) - crossGap / 2
-        });
-      }
-    }
-  }
-  
-  function drawCross(x, y, opacity) {
-    ctx.beginPath();
-    ctx.moveTo(x - 14, y);
-    ctx.lineTo(x + 14, y);
-    ctx.strokeStyle = `rgba(255, 255, 255, ${opacity}`;
-    ctx.moveTo(x, y - 14);
-    ctx.lineTo(x, y + 14);
-    ctx.stroke();
-  }
-
-  window.addEventListener('resize', onResize);
-  onResize();
-  draw();
-}
-
-export default HeroPattern;

package/src/assets/js/imports/hero-video.js

@@ -1,53 +0,0 @@
-function HeroVideo() {
-  document.addEventListener("DOMContentLoaded", () => {
-    const videoBackground = document.getElementById('videoBackground');
-    if(typeof(videoBackground) != 'undefined' && videoBackground != null) {
-      const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
-      if(!reducedMotion || reducedMotion.matches) {
-        videoBackground.pause();
-      }
-      
-      const lightboxTrigger = document.getElementById('playVideo');
-      const lightboxContainer = document.getElementById('lightboxVideo');
-      const lightboxVideo = lightboxContainer.querySelector('.c-lightbox__video');
-
-      lightboxTrigger.addEventListener('click', e => {
-        videoBackground.pause();
-        lightboxContainer.classList.remove('u-hidden');
-        checkVideos();
-      });
-  
-      lightboxContainer.addEventListener('click', (e) => {
-        if (!e.target.classList.contains('c-lightbox__video')) {
-          videoBackground.setAttribute('autoplay','');
-          lightboxContainer.classList.add('u-hidden');
-          checkVideos();
-        }
-      });
-      window.addEventListener('keydown', function(e) {
-        if (e.key == "Escape") {
-          videoBackground.setAttribute('autoplay','');
-          lightboxContainer.classList.add('u-hidden');
-          checkVideos();
-        }
-      });
-
-      function checkVideos() {
-        if(lightboxContainer.classList.contains('u-hidden')) {
-          if (videoBackground.paused) {
-            videoBackground.play();
-          }
-          if (!lightboxVideo.paused) {
-            lightboxVideo.pause();
-          }
-        } else {
-          if (!videoBackground.paused) {
-            videoBackground.pause();
-          }
-        }
-      }
-    }
-  });
-}
-
-export default HeroVideo;

package/src/assets/js/imports/hotspot-image.js

@@ -1,91 +0,0 @@
-// Function to initialize tooltip behavior
-function HotspotImage() {
-  // Add delay for Tridion JavaScript created hotspot images
-  setTimeout(function () {
-    // Select all elements that trigger tooltips
-    const tooltips = document.querySelectorAll('.c-hotspot-image__button');
-
-    // Add event listeners for each tooltip button
-    tooltips.forEach((button) => {
-      button.addEventListener('click', handleTooltipToggle);
-    });
-
-    // Add event listener for Escape key press
-    document.addEventListener('keydown', handleKeyDown);
-
-    // Add event listener for click outside tooltip
-    document.addEventListener('click', handleClickOutside);
-  }, 2000);
-}
-
-// Function to handle the tooltip toggle
-function handleTooltipToggle(event) {
-  // Prevent default action if needed
-  event.preventDefault();
-
-  const button = event.currentTarget;
-  const tooltipId = button.getAttribute('aria-controls');
-  const tooltip = document.getElementById(tooltipId);
-
-  if (tooltip.classList.contains('c-hotspot-image__tooltip--open')) {
-    closeTooltip(button, tooltip);
-  } else {
-    openTooltip(button, tooltip);
-  }
-}
-
-// Function to open a tooltip
-function openTooltip(button, tooltip) {
-  // Add active class and make tooltip visible
-  tooltip.classList.add('c-hotspot-image__tooltip--open');
-  tooltip.setAttribute('aria-hidden', 'false');
-  button.setAttribute('aria-expanded', 'true');
-
-  // Add event listener for click outside
-  document.addEventListener('click', handleClickOutside);
-}
-
-// Function to close a tooltip
-function closeTooltip(button, tooltip) {
-  // Remove active class and hide tooltip
-  tooltip.classList.remove('c-hotspot-image__tooltip--open');
-  tooltip.setAttribute('aria-hidden', 'true');
-  button.setAttribute('aria-expanded', 'false');
-
-  // Remove event listener for click outside
-  document.removeEventListener('click', handleClickOutside);
-}
-
-// Function to handle Escape key press
-function handleKeyDown(event) {
-  if (event.key === 'Escape') {
-    const activeTooltip = document.querySelector(
-      '.c-hotspot-image__tooltip--open'
-    );
-    if (activeTooltip) {
-      const button = document.querySelector(
-        `[aria-controls="${activeTooltip.id}"]`
-      );
-      closeTooltip(button, activeTooltip);
-    }
-  }
-}
-
-// Function to handle click outside the tooltip
-function handleClickOutside(event) {
-  const activeTooltip = document.querySelector(
-    '.c-hotspot-image__tooltip--open'
-  );
-  if (
-    activeTooltip &&
-    !activeTooltip.contains(event.target) &&
-    !event.target.closest('.c-hotspot-image__button')
-  ) {
-    const button = document.querySelector(
-      `[aria-controls="${activeTooltip.id}"]`
-    );
-    closeTooltip(button, activeTooltip);
-  }
-}
-
-export default HotspotImage;

package/src/assets/js/imports/internal-nav.js

@@ -1,41 +0,0 @@
-function InternalNav() {
-    const internalNav = document.querySelector('.c-internal-nav--sticky');
-
-    if (!internalNav) {
-        return;
-    }
-
-    const observerOptions = {
-        root: null,
-        rootMargin: '0px',
-        threshold: 1.0
-    };
-
-    const intersectionCallback = (entries, observer) => {
-        const isIntersecting = entries[0].isIntersecting;
-        internalNav.classList.toggle('c-internal-nav--stuck', !isIntersecting);
-    };
-
-    const observer = new IntersectionObserver(intersectionCallback, observerOptions);
-    observer.observe(internalNav);
-
-    let internalNavHeight = internalNav.offsetHeight;
-
-    const updateInternalNavHeight = () => {
-        internalNavHeight = internalNav.offsetHeight;
-        const anchors = Array.from(internalNav.querySelectorAll('a'));
-        anchors.forEach(anchor => {
-            const id = anchor.getAttribute('href').replace('#', '');
-            const target = document.getElementById(id);
-            if (target) {
-                target.style.scrollMarginTop = `${internalNavHeight}px`;
-            }
-        });
-    };
-
-    window.addEventListener('resize', updateInternalNavHeight);
-
-    updateInternalNavHeight();
-}
-
-export default InternalNav;

package/src/assets/js/imports/off-canvas.js

@@ -1,219 +0,0 @@
-// Function to initialize off-canvas behavior
-function OffCanvas() {
-  // Select all elements that trigger off-canvas behavior
-  const toggles = document.querySelectorAll(".c-off-canvas__toggle");
-
-  // Iterate through each toggle element
-  if (toggles.length) {
-    toggles.forEach(toggle => {
-      // Determine initial visibility state and handle click event
-      handleOffCanvas(toggle, isVisible(toggle));
-      toggle.addEventListener('click', () => toggleOffCanvas(toggle));
-    });
-
-    // Add event listener for scroll events to check visibility
-    // window.addEventListener('scroll', () => {
-    //   toggles.forEach(toggle => {
-    //     handleOffCanvas(toggle, isVisible(toggle));
-    //   });
-    // });
-
-    // Add event listener for resize events to check visibility
-    window.addEventListener('resize', () => {
-      toggles.forEach(toggle => {
-        handleOffCanvas(toggle, isVisible(toggle));
-      });
-    });
-  }
-}
-
-// Function to check if an element is currently visible on the page
-function isVisible(element) {
-  // Check element's styles for visibility
-  const style = window.getComputedStyle(element);
-  return (
-    style.display !== 'none' &&
-    style.visibility !== 'hidden'
-  );
-}
-
-// Function to handle off-canvas behavior based on visibility
-function handleOffCanvas(toggle, isVisible) {
-  const target = document.getElementById(toggle.getAttribute('data-target'));
-  if (isVisible === true) {
-    createOffCanvas(target);
-  } else {
-    removeOffCanvas(target);
-  }
-}
-
-// Function to create off canvas
-function createOffCanvas(target) {
-  // Add necessary classes and attributes for off-canvas display
-  target.classList.add('c-off-canvas');
-  target.setAttribute('tabindex', '-1');
-  target.setAttribute('aria-hidden', 'true');
-  
-  // Extract specific sections of the off-canvas content
-  const targetHeader = target.querySelector('[data-off-canvas="header"]');
-  const targetMain = target.querySelector('[data-off-canvas="main"]');
-  const targetFooter = target.querySelector('[data-off-canvas="footer"]');
-
-  // Extract content from the sections
-  const targetHeaderContent = targetHeader !== null ? targetHeader.outerHTML : '';
-  const targetMainContent = targetMain !== null ? targetMain.outerHTML : '';
-  const targetFooterContent = targetFooter !== null ? targetFooter.outerHTML : '';
-
-  // Replace the target's content with off-canvas structure
-  target.innerHTML = `
-    <div class="c-off-canvas__backdrop" role="presentation"></div>
-    <div class="c-off-canvas__content" role="dialog" aria-modal="true" aria-labelledby="offCanvasHeader">
-      <header id="offCanvasHeader" class="c-off-canvas__header">${targetHeaderContent}</header>
-      <main class="c-off-canvas__main">${targetMainContent}</main>
-      <footer class="c-off-canvas__footer">
-        ${targetFooterContent}
-        <button class="mp c-twi c-twi--left c-off-canvas__close" data-off-canvas-close="true" onclick="return false">
-          <span>Cancel</span>
-          <svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--cross">
-            <use xlink:href="/static/svg/sprite.svg#cross"></use>
-          </svg>
-        </button>
-      </footer>
-    </div>
-  `;
-}
-
-// Function to remove off-canvas layout
-function removeOffCanvas(target) {
-  // Remove classes and attributes for off-canvas display
-  target.classList.remove('c-off-canvas', 'c-off-canvas--active');
-  target.removeAttribute('tabindex');
-  target.removeAttribute('aria-hidden');
-
-  // Remove backdrop element if present
-  const targetBackdrop = target.querySelector('.c-off-canvas__backdrop');
-  if (targetBackdrop) {
-    targetBackdrop.remove();
-  }
-
-  // Restore original content by removing off-canvas structure
-  const targetContent = target.querySelector('.c-off-canvas__content');
-  if (targetContent) {
-    while (targetContent.firstChild) {
-      target.insertBefore(targetContent.firstChild, targetContent);
-    }
-    target.removeChild(targetContent);
-  }
-
-  const targetHeader = target.querySelector('.c-off-canvas__header');
-  if (targetHeader) {
-    while (targetHeader.firstChild) {
-      target.insertBefore(targetHeader.firstChild, targetHeader);
-    }
-    target.removeChild(targetHeader);
-  }
-
-  const targetMain = target.querySelector('.c-off-canvas__main');
-  if (targetMain) {
-    while (targetMain.firstChild) {
-      target.insertBefore(targetMain.firstChild, targetMain);
-    }
-    target.removeChild(targetMain);
-  }
-
-  const targetFooter = target.querySelector('.c-off-canvas__footer');
-  if (targetFooter) {
-    while (targetFooter.firstChild) {
-      target.insertBefore(targetFooter.firstChild, targetFooter);
-    }
-    target.removeChild(targetFooter);
-  }
-  
-  // Remove close button element if present
-  const targetClose = target.querySelector('.c-off-canvas__close');
-  if (targetClose) {
-    targetClose.remove();
-  }
-}
-
-// Function to toggle off-canvas visibility
-function toggleOffCanvas(toggle) {
-  const target = document.getElementById(toggle.getAttribute('data-target'));
-
-  // Check if the target is already open or closed
-  if (!target.classList.contains('c-off-canvas--active')) {
-    openOffCanvas(toggle, target);
-  } else if (target.classList.contains('c-off-canvas--active')) {
-    closeOffCanvas(target);
-  }
-}
-
-function openOffCanvas(toggle, target) {
-  // Add classes and attributes for open off-canvas
-  toggle.setAttribute('aria-expanded', 'true');
-  target.classList.add('c-off-canvas--active');
-  target.setAttribute('aria-hidden', 'false');
-
-  // Add event listener for backdrop clicks
-  const offCanvasBackdrop = target.querySelector('.c-off-canvas__backdrop');
-  if(offCanvasBackdrop) {
-    offCanvasBackdrop.addEventListener('click', handleBackdropClick);
-  }
-
-  // Add event listener forclose button clicks
-  const offCanvasCloseElements = target.querySelectorAll('[data-off-canvas-close="true"]');
-  if (offCanvasCloseElements.length > 0) {
-    offCanvasCloseElements.forEach((offCanvasClose) => {
-      offCanvasClose.addEventListener('click', handleCloseClick);
-    });
-  }
-
-   // Add event listener for Escape key press
-  document.addEventListener('keydown', handleKeyDown, { once: true });
-
-  // Adjust body overflow to prevent scrolling
-  document.body.style.overflowY = 'hidden';
-
-  // Close other open off-canvas elements
-  const allOffCanvasElementsExceptCurrent = Array.from(document.querySelectorAll('.c-off-canvas')).filter(offCanvas => offCanvas !== target);
-  if (allOffCanvasElementsExceptCurrent.length > 0) {
-    allOffCanvasElementsExceptCurrent.forEach((offCanvas) => {
-      closeOffCanvas(offCanvas);
-    });
-  }
-}
-
-// Function to close an off-canvas
-function closeOffCanvas(target) {
-  // Remove classes and attributes for open off-canvas
-  document.querySelector('[data-target="' + target.id + '"').setAttribute('aria-expanded', 'false');
-  target.classList.remove('c-off-canvas--active');
-  target.setAttribute('aria-hidden', 'true');
-
-  // Restore body overflow
-  document.body.style.overflowY = '';
-}
-
-// Function to handle backdrop click
-function handleBackdropClick() {
-  const offCanvas = this.closest('.c-off-canvas');
-  closeOffCanvas(offCanvas);
-}
-
-// Function to handle Escape key press
-function handleKeyDown(event) {
-  if (event.key === 'Escape') {
-    const activeOffCanvas = document.querySelector('.c-off-canvas--active');
-    if (activeOffCanvas) {
-      closeOffCanvas(activeOffCanvas);
-    }
-  }
-}
-
-// Function to handle close button click
-function handleCloseClick() {
-  const offCanvas = this.closest('.c-off-canvas');
-  closeOffCanvas(offCanvas);
-}
-
-export default OffCanvas;

package/src/assets/js/imports/responsive-table.js

@@ -1,30 +0,0 @@
-const ResponsiveTable = () => {
-  const tables = Array.from(document.querySelectorAll('.c-table--responsive'));
-  tables.forEach(createResponsiveTable);
-
-  /**
-   * Create responsive table headers for large tables
-   * @param {HTMLTableElement} table
-   */
-  function createResponsiveTable(table) {
-    const headers = table.querySelectorAll('thead > :first-child th');
-    const breakPoint = Number(table.getAttribute('data-columns')) || 2
-  
-    if (headers.length < breakPoint) {
-      table.classList.remove('c-table--responsive');
-      return;
-    };
-
-    Array.from(table.querySelectorAll('tbody tr')).forEach((row) => {
-      Array.from(headers)
-        .map((x) => x.textContent)
-        .forEach((header, index) => {
-          if (row.children[index]) {
-            row.children[index].setAttribute('data-responsive-title', header);
-          }
-        });
-    });
-  }
-};
-
-export default ResponsiveTable;

package/src/assets/js/imports/scroll-spy.js

@@ -1,46 +0,0 @@
-function ScrollSpy() {
-  const internalNav = document.querySelector('.c-internal-nav--sticky');
-  const internalNavHeight = internalNav ? internalNav.offsetHeight : 0;
-
-  const spies = Array.from(document.querySelectorAll('.c-scroll-spy'));
-  spies.forEach(spy => {
-    setup(spy, internalNavHeight);
-  });
-}
-
-function setup(element, internalNavHeight) {
-  const anchors = Array.from(element.querySelectorAll('a'));
-  const observer = new IntersectionObserver(observation(anchors));
-  
-  anchors.forEach(anchor => {
-    const id = anchor.getAttribute('href').replace('#', '');
-    const target = document.getElementById(id);
-    if (!target) return;
-
-    observer.observe(target);
-  });
-
-  const currentTop = parseFloat(window.getComputedStyle(element).top);
-  element.style.top = `${currentTop + internalNavHeight}px`;
-}
-
-/**
- * @param {Array<HTMLAnchorElement>} results 
- * @return {Array<IntersectionObserverEntry>}
- */
-function observation(anchors) {
-  return (results) => {
-    const firstObservation = results.find(x => x.isIntersecting);
-
-    if (firstObservation) {
-      anchors.forEach(x => {
-        x.classList.toggle(
-          'c-scroll-spy-active',
-          x.getAttribute('href') === '#' + firstObservation.target.id
-        )
-      })
-    }
-  }
-}
-
-export default ScrollSpy;

package/src/assets/js/imports/scrollbar-width.js

@@ -1,15 +0,0 @@
-import { debounce } from './utilities';
-
-function ScrollbarWidth() {
-    setScrollbarWidth();
-    window.addEventListener('resize', debounce(setScrollbarWidth, 250));
-}
-
-function setScrollbarWidth() {
-    document.documentElement.style.setProperty(
-        '--scrollbarWidth', 
-        window.innerWidth - document.body.clientWidth + 'px'
-    );
-}
-
-export default ScrollbarWidth;