@pnx-mixtape/mxds 0.0.1

package/src/Utility/Elements/breakpoint-loader.ts

@@ -0,0 +1,79 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * Lazy Load a component based on breakpoint.
+ */
+
+type BreakpointLoaderOptions = {
+  mediaQuery?: string
+}
+
+export default class BreakpointLoader {
+  el: HTMLElement
+  callback: () => any
+  breakpoint: MediaQueryList
+  options: BreakpointLoaderOptions
+  fallbackBtn?: HTMLButtonElement
+  errorMsg?: HTMLElement
+
+  constructor(
+    el: HTMLElement,
+    callback: () => any,
+    options: BreakpointLoaderOptions = { mediaQuery: "(max-width: 720px)" },
+  ) {
+    if (!el) {
+      throw new Error("Element is null or empty.")
+    }
+    this.el = el
+    this.callback = callback
+    this.breakpoint = window.matchMedia(options.mediaQuery)
+    this.options = { ...options }
+    this.fallbackBtn = this.el.querySelector("[data-load-fallback]")
+    this.errorMsg = this.el.querySelector("[data-load-error]")
+  }
+
+  init = (): void => {
+    this.responsiveCheck(this.breakpoint)
+    this.breakpoint.addEventListener("change", this.responsiveCheck)
+    this.fallbackBtn?.addEventListener("click", this.handleClick)
+  }
+
+  responsiveCheck = ({ matches }): void => {
+    matches && this.load().catch(error => this.handleError(error))
+  }
+
+  load = async (): Promise<void> => {
+    try {
+      await this.callback()
+    } catch (error) {
+      this.handleError(error)
+    }
+    this.breakpoint.removeEventListener("change", this.responsiveCheck)
+  }
+
+  handleClick = (): void => {
+    this.load().catch(error => this.handleError(error))
+  }
+
+  handleError = (error): void => {
+    console.error(error) // eslint-disable-line no-console
+    this.errorMsg?.removeAttribute("hidden")
+  }
+
+  static create = (
+    selector: string,
+    callback: () => any,
+    options: BreakpointLoaderOptions = {},
+  ): void => {
+    if (!Object.hasOwn(window, "once")) return
+    window
+      .once("breakpoint-loader", selector)
+      ?.forEach((el: HTMLElement): void => {
+        const loader: BreakpointLoader = new BreakpointLoader(
+          el,
+          callback,
+          options,
+        )
+        loader.init()
+      })
+  }
+}

package/src/Utility/Elements/cookie-compliance.ts

@@ -0,0 +1,174 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access */
+/**
+ * @file cookie compliance banner
+ * adapted from http://alex-d.github.io/Cookies-EU-banner/.
+ *
+ * Any additional tracking javascript should first check `window.CookieCompliance.hasConsent()`
+ * before being initialised.
+ */
+
+import Cookies from "js-cookie"
+
+export default class CookieCompliance {
+  banner: HTMLElement
+  acceptBtn: HTMLButtonElement
+  moreBtn: HTMLButtonElement
+  rejectBtn: HTMLButtonElement
+  bots: RegExp
+  cookieName: string
+  waitRemove: number
+  trackingCookiesNames: string[]
+  hostname: string | undefined
+  defaultCookieSettings:
+    | {
+        path: string
+        expires: number
+        sameSite: string
+      }
+    | undefined
+
+  constructor(el: HTMLElement) {
+    this.banner = el
+    this.acceptBtn = el.querySelector("[data-cookie-accept]")
+    this.moreBtn = el.querySelector("[data-cookie-more]")
+    this.rejectBtn = el.querySelector("[data-cookie-reject]")
+    this.bots = /bot|crawler|spider|crawling/i
+    this.cookieName = "has-cookie-consent"
+    this.waitRemove =
+      this.banner.dataset.waitRemove === undefined
+        ? 0
+        : parseInt(this.banner.dataset.waitRemove, 10)
+    this.trackingCookiesNames = [
+      "__utma",
+      "__utmb",
+      "__utmc",
+      "__utmt",
+      "__utmv",
+      "__utmz",
+      "_ga",
+      "_gat",
+      "_gid",
+    ]
+  }
+
+  init = (): void => {
+    this.hostname = document.location.hostname.replace(/^www\./, "")
+    this.defaultCookieSettings = {
+      path: "/",
+      expires: 365,
+      sameSite: "Lax",
+    }
+
+    // Detect if the visitor is a bot or not
+    // Prevent for search engine take the cookie alert message as main content of the page.
+    const isBot: boolean = this.bots.test(navigator.userAgent)
+
+    // Check if DoNotTrack is activated.
+    const dnt =
+      // @ts-expect-error older browser.
+      navigator.doNotTrack || navigator.msDoNotTrack || window.doNotTrack
+    const isToTrack: boolean =
+      dnt !== null && dnt !== undefined
+        ? dnt && dnt !== "yes" && dnt !== 1 && dnt !== "1"
+        : true
+
+    // Do nothing if it is a bot.
+    // If DoNotTrack is activated, do nothing too.
+    if (isBot || !isToTrack || this.hasConsent() === false) {
+      this.removeBanner(0)
+      return
+    }
+
+    // User has already consent to use cookies to tracking.
+    if (this.hasConsent() === true) {
+      return
+    }
+
+    // Otherwise show banner.
+    this.showBanner()
+  }
+
+  showBanner = (): void => {
+    this.banner.removeAttribute("inert")
+    if (this.moreBtn) {
+      this.moreBtn.addEventListener("click", this.deleteCookie)
+    }
+    if (this.acceptBtn) {
+      this.acceptBtn.addEventListener("click", this.accept)
+    }
+    if (this.rejectBtn) {
+      this.rejectBtn.addEventListener("click", this.reject)
+    }
+  }
+
+  reject = (): void => {
+    this.removeBanner(this.waitRemove)
+    this.setCookie("false")
+
+    // Delete existing tracking cookies
+    this.trackingCookiesNames.map(this.deleteCookie)
+  }
+
+  accept = (): void => {
+    this.removeBanner(this.waitRemove)
+    this.setCookie("true")
+  }
+
+  hasConsent = (): boolean => {
+    const consent: "true" | "false" = Cookies.get(this.cookieName)
+    if (consent === "true") {
+      return true
+    }
+    if (consent === "false") {
+      return false
+    }
+
+    return null
+  }
+
+  setCookie = (value: "true" | "false"): void => {
+    Cookies.set(this.cookieName, value, this.defaultCookieSettings)
+    Cookies.set(this.cookieName, value, {
+      domain: `.${this.hostname}`,
+      ...this.defaultCookieSettings,
+    })
+  }
+
+  deleteCookie = (): void => {
+    Cookies.remove(this.cookieName, this.defaultCookieSettings)
+    Cookies.remove(this.cookieName, {
+      domain: `.${this.hostname}`,
+      ...this.defaultCookieSettings,
+    })
+  }
+
+  removeBanner = (wait: number): void => {
+    setTimeout(() => {
+      if (this.banner && this.banner.parentNode) {
+        if (this.moreBtn) {
+          this.moreBtn.removeEventListener("click", this.deleteCookie)
+        }
+        if (this.acceptBtn) {
+          this.acceptBtn.removeEventListener("click", this.accept)
+        }
+        if (this.rejectBtn) {
+          this.rejectBtn.removeEventListener("click", this.reject)
+        }
+        this.banner.parentNode.removeChild(this.banner)
+      }
+    }, wait)
+  }
+
+  static create({ context = null } = {}): void {
+    const [el] = window.once(
+      "cookie-compliance",
+      "#cookie-compliance",
+      context || document,
+    )
+    if (el) {
+      const cookieCompliance: CookieCompliance = new CookieCompliance(el)
+      cookieCompliance.init()
+      window.CookieCompliance = cookieCompliance
+    }
+  }
+}

package/src/Utility/Elements/disclosure-widget.ts

@@ -0,0 +1,173 @@
+/**
+ * Class for a generic Disclosure Widget.
+ */
+import { makeAnchor } from "../utilities"
+
+type DisclosureWidgetOptions = {
+  attribute?: string
+  shouldPreventDefault?: boolean
+  setInitialAttribute?: boolean
+  clickEvent?: "click" | "mouseover"
+}
+
+export type DisclosureWidgetEvent = {
+  isOpen: boolean
+  id: string
+  options: DisclosureWidgetOptions
+  target: Element
+}
+
+export default class DisclosureWidget {
+  options: DisclosureWidgetOptions
+  context: Document | Element
+  trigger: Element & { disclosureWidget?: DisclosureWidget }
+  element: Element
+  id: string
+  isOpen?: boolean
+  attached?: boolean
+
+  constructor(
+    trigger: Element,
+    element: Element,
+    overrides?: DisclosureWidgetOptions,
+    context: Element | Document = document,
+  ) {
+    if (!trigger) {
+      throw new Error("toggle is required.")
+    }
+    if (!element) {
+      throw new Error("element is required.")
+    }
+    const options: DisclosureWidgetOptions = {
+      attribute: "inert",
+      shouldPreventDefault: true,
+      setInitialAttribute: true,
+      clickEvent: "click",
+    }
+
+    this.options = { ...options, ...overrides }
+    this.context = context || document
+    this.trigger = trigger
+    this.element = element
+    this.id = this.element.id || this.generatedId()
+  }
+
+  init = (): void => {
+    if (Object.prototype.hasOwnProperty.call(this.trigger, "disclosureWidget"))
+      return
+    const { attribute, setInitialAttribute } = this.options
+    this.trigger.disclosureWidget = this
+    if (setInitialAttribute) this.element.setAttribute(attribute, "")
+    this.attach()
+  }
+
+  handleToggle = (): void => {
+    const { attribute, setInitialAttribute } = this.options
+    this.element.toggleAttribute(attribute)
+    const hasAttribute: boolean = this.element.hasAttribute(attribute)
+    this.isOpen = setInitialAttribute ? !hasAttribute : hasAttribute
+    this.trigger.setAttribute("aria-expanded", String(this.isOpen))
+    const newEvent: CustomEvent<DisclosureWidgetEvent> = new CustomEvent(
+      "disclosure-toggle",
+      {
+        bubbles: true,
+        cancelable: true,
+        detail: {
+          isOpen: this.isOpen,
+          id: this.id,
+          options: this.options,
+          target: this.element,
+        },
+      },
+    )
+    this.trigger.dispatchEvent(newEvent)
+  }
+
+  handleMouse = (event: MouseEvent): void => {
+    const { currentTarget, type, relatedTarget } = event
+
+    if (type === "mouseover" || type === "mouseout") {
+      const triggerParent = this.trigger.parentNode
+      if (
+        triggerParent !== currentTarget ||
+        triggerParent.contains(relatedTarget as HTMLElement)
+      )
+        return
+    } else if (this.trigger !== currentTarget) return
+
+    const { shouldPreventDefault } = this.options
+    this.handleToggle()
+    if (shouldPreventDefault) {
+      event.preventDefault()
+      event.stopPropagation()
+    }
+  }
+
+  handleKeyboard = (event: KeyboardEvent): void => {
+    const { key, target } = event
+    if (this.trigger !== target) return
+    const { isOpen } = this
+    const { shouldPreventDefault } = this.options
+
+    switch (key) {
+      // Down/Enter should open it.
+      case "ArrowDown":
+      case "Enter":
+        if (!isOpen) this.handleToggle()
+        if (shouldPreventDefault) event.preventDefault()
+        break
+
+      // Up/Esc should close it.
+      case "ArrowUp":
+      case "Escape":
+        if (isOpen) this.handleToggle()
+        if (shouldPreventDefault) event.preventDefault()
+        break
+
+      default:
+        break
+    }
+  }
+
+  attach = (): void => {
+    if (this.attached) return
+    const { clickEvent } = this.options
+    if (clickEvent === "mouseover") {
+      const parent = this.trigger.parentNode
+      parent.addEventListener("mouseover", this.handleMouse)
+      parent.addEventListener("mouseout", this.handleMouse)
+    } else {
+      this.trigger.addEventListener("click", this.handleMouse)
+    }
+    this.trigger.addEventListener("keydown", this.handleKeyboard)
+
+    this.trigger.setAttribute("aria-expanded", "false")
+    if (!this.trigger.hasAttribute("aria-controls"))
+      this.trigger.setAttribute("aria-controls", this.id)
+    this.attached = true
+  }
+
+  detach = (): void => {
+    if (!this.attached) return
+    if (this.isOpen) {
+      this.handleToggle()
+    }
+    const { clickEvent } = this.options
+    if (clickEvent === "mouseover") {
+      const parent = this.trigger.parentNode
+      parent.removeEventListener("mouseover", this.handleMouse)
+      parent.removeEventListener("mouseout", this.handleMouse)
+    } else {
+      this.trigger.removeEventListener("click", this.handleMouse)
+    }
+    this.trigger.removeEventListener("keydown", this.handleKeyboard)
+
+    this.trigger.removeAttribute("aria-expanded")
+    this.attached = false
+  }
+
+  generatedId = (): string => {
+    const string: string | undefined = this.trigger?.textContent?.trim()
+    return !string ? "" : makeAnchor(string)
+  }
+}

package/src/Utility/Elements/io-loader.ts

@@ -0,0 +1,57 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * Lazy Load on an Intersection Observer
+ */
+
+export default class IntersectionLoader {
+  el: HTMLElement
+  callback: () => any
+  observer: IntersectionObserver
+  fallbackBtn?: HTMLButtonElement
+  errorMsg?: HTMLElement
+
+  constructor(el: HTMLElement, callback: () => any) {
+    this.el = el
+    this.callback = callback
+    this.fallbackBtn = this.el.querySelector("[data-load-fallback]")
+    this.errorMsg = this.el.querySelector("[data-load-error]")
+  }
+
+  init = (): void => {
+    this.observer = new IntersectionObserver(items => {
+      items.forEach(({ isIntersecting }) => {
+        if (isIntersecting) this.load().catch(error => this.handleError(error))
+      })
+    })
+    this.observer.observe(this.el)
+    this.fallbackBtn?.addEventListener("click", this.handleClick)
+  }
+
+  load = async (): Promise<void> => {
+    try {
+      await this.callback()
+    } catch (error) {
+      this.handleError(error)
+    }
+    this.observer.unobserve(this.el)
+  }
+
+  handleClick = (): void => {
+    this.load().catch(error => this.handleError(error))
+  }
+
+  handleError = (error): void => {
+    console.error(error) // eslint-disable-line no-console
+    this.errorMsg?.removeAttribute("hidden")
+  }
+
+  static create = (selector: string, callback: () => any): void => {
+    if (!Object.hasOwn(window, "once")) return
+    window
+      .once("intersection-loader", selector)
+      ?.forEach((el: HTMLElement): void => {
+        const loader: IntersectionLoader = new IntersectionLoader(el, callback)
+        loader.init()
+      })
+  }
+}

package/src/Utility/Elements/keyboard.ts

@@ -0,0 +1,150 @@
+/**
+ * Class for Keyboard navigation helper.
+ */
+
+export default class Keyboard {
+  constructor() {
+    window.Mixtape = window.Mixtape || {}
+    window.Mixtape.Popups = window.Mixtape.Popups || []
+    window.Mixtape.Menu = window.Mixtape.Menu || {}
+  }
+
+  attachPopup = (id: string, closefn: () => void): void => {
+    window.Mixtape.Popups.push({
+      id,
+      closefn,
+    })
+  }
+
+  detachPopup = (id: string): void => {
+    window.Mixtape.Popups = window.Mixtape.Popups.filter(item => item.id !== id)
+  }
+
+  attachMenu = (
+    context: HTMLElement,
+    items: NodeListOf<HTMLAnchorElement | HTMLButtonElement>,
+  ): void => {
+    window.Mixtape.Menu = {
+      context,
+      items,
+    }
+  }
+
+  detachMenu = (): void => {
+    window.Mixtape.Menu = null
+  }
+
+  getNextFocusableMenuItem = (
+    active: number,
+    back: boolean = false,
+  ): number => {
+    if (!back) {
+      // If moving forward, it's the active index + 1, or 0 if we are at the
+      // end of the menu.
+      return window.Mixtape.Menu.items.length > active + 1 ? active + 1 : 0
+    }
+    // If moving back, it's the active index - 1, or the menu length if we
+    // are at the start of the menu.
+    return active === 0 ? window.Mixtape.Menu.items.length - 1 : active - 1
+  }
+
+  moveFocus = (target: HTMLElement, back: boolean = false): void => {
+    if (!window.Mixtape.Menu.items) return
+    let active: number = 0
+    // Retrieve the active menu item by looping through the list of menu links.
+    window.Mixtape.Menu.items.forEach((element, index): void => {
+      if (element === target) {
+        active = index
+      }
+    })
+    let focus: number = this.getNextFocusableMenuItem(active, back)
+
+    // Check if item is tabbable.
+    // Some menus, like the secondary nav have hidden items that require a
+    // toggle to be clicked before the items are tabbable. This allows invisible
+    // menu items to be skipped when moving focus with the this.
+    // Make sure tabbable.
+    let tabbable: string =
+      window.Mixtape.Menu.items[focus].getAttribute("tabindex")
+    if (tabbable !== "-1") {
+      window.Mixtape.Menu.items[focus].focus()
+    } else {
+      // Loop through items until we find a visible one.
+      while (tabbable === "-1") {
+        focus = this.getNextFocusableMenuItem(focus, back)
+        tabbable = window.Mixtape.Menu.items[focus].getAttribute("tabindex")
+      }
+      window.Mixtape.Menu.items[focus].focus()
+    }
+
+    window.Mixtape.Menu.active = focus
+  }
+
+  handleGlobalClick = ({ target }: MouseEvent): void => {
+    const activePopup = window.Mixtape.Popups
+      ? window.Mixtape.Popups[window.Mixtape.Popups.length - 1]
+      : null
+    if (!activePopup) return
+
+    // Click away from a popup to close it.
+    // It's up to the popup class to preventDefault on it's contents to
+    // stop this from being triggered.
+    if (activePopup.id) {
+      const popupEl: HTMLElement = document.querySelector(
+        `#${activePopup.id}`,
+      ).parentElement
+      if (
+        popupEl &&
+        (target === popupEl || popupEl?.contains(target as HTMLElement))
+      )
+        return
+      activePopup.closefn()
+    }
+  }
+
+  handleGlobalKeydown = (event: KeyboardEvent): void => {
+    const activePopup = window.Mixtape.Popups
+      ? window.Mixtape.Popups[window.Mixtape.Popups.length - 1]
+      : null
+    const target = event.target as HTMLElement
+
+    switch (event.key) {
+      // Escape always closes an open popup followed by any open popups.
+      case "Escape":
+        if (activePopup) {
+          activePopup.closefn()
+        }
+        break
+
+      // Down/Right arrows navigate focus forward, with wrapping.
+      case "ArrowDown":
+      case "ArrowRight":
+        if (window.Mixtape.Menu?.items) {
+          event.preventDefault()
+          this.moveFocus(target)
+        }
+        break
+
+      // Up/Left arrows navigate focus backwards, with wrapping.
+      case "ArrowUp":
+      case "ArrowLeft":
+        if (window.Mixtape.Menu?.items) {
+          event.preventDefault()
+          this.moveFocus(target, true)
+        }
+        break
+
+      default:
+        break
+    }
+  }
+
+  attachEventListeners = (signal: AbortSignal): void => {
+    window.addEventListener("click", this.handleGlobalClick, {
+      signal,
+    })
+    window.addEventListener("keydown", this.handleGlobalKeydown, {
+      signal,
+    })
+  }
+}

package/src/Utility/Hooks/useLocalStorage.ts

@@ -0,0 +1,78 @@
+/* eslint-disable no-unused-vars, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call */
+import { useEffect, useCallback, useSyncExternalStore } from "react"
+
+type LocalStorageCallback = (this: Window, ev: StorageEvent) => void
+type SetStateCallback = (value: any) => void
+
+type LocalStorageProps = {
+  key: string
+  initialValue: any
+}
+
+const setLocalStorageItem = (key: string, value: any): void => {
+  const stringifiedValue = JSON.stringify(value)
+  window.localStorage.setItem(key, stringifiedValue)
+  window.dispatchEvent(
+    new StorageEvent("storage", { key, newValue: stringifiedValue }),
+  )
+}
+
+const removeLocalStorageItem = (key: string): void => {
+  window.localStorage.removeItem(key)
+  window.dispatchEvent(new StorageEvent("storage", { key, newValue: null }))
+}
+
+const useLocalStorage = ({
+  key,
+  initialValue,
+}: LocalStorageProps): [string, SetStateCallback] => {
+  const subscribe = useCallback((callback: LocalStorageCallback) => {
+    window.addEventListener("storage", callback)
+    return () => window.removeEventListener("storage", callback)
+  }, [])
+
+  const getSnapshot = () => window.localStorage.getItem(key)
+
+  const getServerSnapshot = () => {
+    throw Error("useLocalStorage is a client-only hook")
+  }
+
+  const store: string = useSyncExternalStore(
+    subscribe,
+    getSnapshot,
+    getServerSnapshot,
+  )
+
+  const setState = useCallback(
+    (value): void => {
+      try {
+        const storeValue: string = JSON.parse(store) as string
+        const nextState =
+          typeof value === "function" ? value(storeValue) : value
+        if (nextState === undefined || nextState === null) {
+          removeLocalStorageItem(key)
+        } else {
+          setLocalStorageItem(key, nextState)
+        }
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.warn(e)
+      }
+    },
+    [key, store],
+  )
+
+  useEffect(() => {
+    if (
+      window.localStorage.getItem(key) === null &&
+      typeof initialValue !== "undefined"
+    ) {
+      setLocalStorageItem(key, initialValue)
+    }
+  }, [key, initialValue])
+
+  const value: string = store ? (JSON.parse(store) as string) : initialValue
+  return [value, setState]
+}
+
+export default useLocalStorage