Add Javascript Types w/JSDoc

assets/animations.js

@@ -1,9 +1,15 @@
+// Class names for scroll animations
 const SCROLL_ANIMATION_TRIGGER_CLASSNAME = 'scroll-trigger';
 const SCROLL_ANIMATION_OFFSCREEN_CLASSNAME = 'scroll-trigger--offscreen';
 const SCROLL_ZOOM_IN_TRIGGER_CLASSNAME = 'animate--zoom-in';
 const SCROLL_ANIMATION_CANCEL_CLASSNAME = 'scroll-trigger--cancel';
 
-// Scroll in animation logic
+/**
+ * Callback for the IntersectionObserver.
+ * Handles adding/removing animation classes based on the element's visibility in the viewport.
+ * @param {IntersectionObserverEntry[]} elements - The elements being observed.
+ * @param {IntersectionObserver} observer - The IntersectionObserver instance.
+ */
 function onIntersection(elements, observer) {
  elements.forEach((element, index) => {
  if (element.isIntersecting) {
@@ -21,6 +27,11 @@ function onIntersection(elements, observer) {
  });
 }
 
+/**
+ * Initialize scroll animation triggers.
+ * @param {HTMLElement} [rootEl=document] - The root element to search for scroll animation triggers.
+ * @param {boolean} [isDesignModeEvent=false] - Flag to indicate if the function is being called from a Shopify design mode event.
+ */
 function initializeScrollAnimationTrigger(rootEl = document, isDesignModeEvent = false) {
  const animationTriggerElements = Array.from(rootEl.getElementsByClassName(SCROLL_ANIMATION_TRIGGER_CLASSNAME));
  if (animationTriggerElements.length === 0) return;
@@ -38,7 +49,9 @@ function initializeScrollAnimationTrigger(rootEl = document, isDesignModeEvent =
  animationTriggerElements.forEach((element) => observer.observe(element));
 }
 
-// Zoom in animation logic
+/**
+ * Initialize scroll zoom animation triggers.
+ */
 function initializeScrollZoomAnimationTrigger() {
  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
 
@@ -71,6 +84,11 @@ function initializeScrollZoomAnimationTrigger() {
  });
 }
 
+/**
+ * Calculates percentage of element visible in viewport.
+ * @param {HTMLElement} element - The element to calculate the visibility percentage of.
+ * @returns {number} The visibility percentage of the element.
+ */
 function percentageSeen(element) {
  const viewportHeight = window.innerHeight;
  const scrollY = window.scrollY;
@@ -91,11 +109,13 @@ function percentageSeen(element) {
  return Math.round(percentage);
 }
 
+// Initialize animations on DOM content loaded
 window.addEventListener('DOMContentLoaded', () => {
  initializeScrollAnimationTrigger();
  initializeScrollZoomAnimationTrigger();
 });
 
+// Shopify design mode event listeners
 if (Shopify.designMode) {
  document.addEventListener('shopify:section:load', (event) => initializeScrollAnimationTrigger(event.target, true));
  document.addEventListener('shopify:section:reorder', () => initializeScrollAnimationTrigger(document, true));

assets/cart-drawer.js

@@ -1,3 +1,7 @@
+/**
+ * Cart Drawer custom element class.
+ * @extends HTMLElement
+ */
 class CartDrawer extends HTMLElement {
  constructor() {
  super();
@@ -7,6 +11,9 @@ class CartDrawer extends HTMLElement {
  this.setHeaderCartIconAccessibility();
  }
 
+ /**
+ * Sets accessibility attributes for header cart icon.
+ */
  setHeaderCartIconAccessibility() {
  const cartLink = document.querySelector('#cart-icon-bubble');
  if (!cartLink) return;
@@ -25,6 +32,10 @@ class CartDrawer extends HTMLElement {
  });
  }
 
+ /**
+ * Opens the cart drawer.
+ * @param {HTMLElement} [triggeredBy] - The element that triggered the open action.
+ */
  open(triggeredBy) {
  if (triggeredBy) this.setActiveElement(triggeredBy);
  const cartDrawerNote = this.querySelector('[id^="Details-"] summary');
@@ -49,12 +60,18 @@ class CartDrawer extends HTMLElement {
  document.body.classList.add('overflow-hidden');
  }
 
+ /**
+ * Closes the cart drawer.
+ */
  close() {
  this.classList.remove('active');
  removeTrapFocus(this.activeElement);
  document.body.classList.remove('overflow-hidden');
  }
 
+ /**
+ * Sets accessibility attributes for the cart drawer note.
+ */
  setSummaryAccessibility(cartDrawerNote) {
  cartDrawerNote.setAttribute('role', 'button');
  cartDrawerNote.setAttribute('aria-expanded', 'false');
@@ -70,6 +87,10 @@ class CartDrawer extends HTMLElement {
  cartDrawerNote.parentElement.addEventListener('keyup', onKeyUpEscape);
  }
 
+ /**
+ * Renders the cart drawer contents.
+ * @param {Object} parsedState - The parsed state of the cart.
+ */
  renderContents(parsedState) {
  this.querySelector('.drawer__inner').classList.contains('is-empty') &&
  this.querySelector('.drawer__inner').classList.remove('is-empty');
@@ -89,10 +110,20 @@ class CartDrawer extends HTMLElement {
  });
  }
 
+ /**
+ * Gets the inner HTML of a cart section.
+ * @param {string} html - The HTML string to parse.
+ * @param {string} [selector='.shopify-section'] - The selector to query for.
+ * @returns {string} The inner HTML of the matched section.
+ */
  getSectionInnerHTML(html, selector = '.shopify-section') {
  return new DOMParser().parseFromString(html, 'text/html').querySelector(selector).innerHTML;
  }
 
+ /**
+ * Array of section selectors for sections api to render.
+ * @returns {Array<Object>} The array of sections to render.
+ */
  getSectionsToRender() {
  return [
  {
@@ -105,18 +136,36 @@ class CartDrawer extends HTMLElement {
  ];
  }
 
+ /**
+ * Gets the DOM of a cart drawer section.
+ * @param {string} html - The HTML string to parse.
+ * @param {string} [selector='.shopify-section'] - The selector to query for.
+ * @returns {HTMLElement} The DOM of the matched section.
+ */
  getSectionDOM(html, selector = '.shopify-section') {
  return new DOMParser().parseFromString(html, 'text/html').querySelector(selector);
  }
 
+ /**
+ * Sets the active element.
+ * @param {HTMLElement} element - The element to set as active.
+ */
  setActiveElement(element) {
  this.activeElement = element;
  }
 }
 
 customElements.define('cart-drawer', CartDrawer);
 
+/**
+ * Cart Drawer Items custom element class.
+ * @extends CartItems
+ */
 class CartDrawerItems extends CartItems {
+ /**
+ * Array of section selectors for sections api to render.
+ * @returns {Array<Object>} The array of sections to render.
+ */
  getSectionsToRender() {
  return [
  {

assets/cart-notification.js

@@ -1,8 +1,14 @@
+/**
+ * Cart Notification custom element class.
+ * @extends HTMLElement
+ */
 class CartNotification extends HTMLElement {
  constructor() {
  super();
 
+ /** @type {HTMLElement} */
  this.notification = document.getElementById('cart-notification');
+ /** @type {HTMLElement} */
  this.header = document.querySelector('sticky-header');
  this.onBodyClick = this.handleBodyClick.bind(this);
 
@@ -12,6 +18,9 @@ class CartNotification extends HTMLElement {
  );
  }
 
+ /**
+ * Open the cart notification.
+ */
  open() {
  this.notification.classList.add('animate', 'active');
 
@@ -27,13 +36,20 @@ class CartNotification extends HTMLElement {
  document.body.addEventListener('click', this.onBodyClick);
  }
 
+ /**
+ * Close the cart notification.
+ */
  close() {
  this.notification.classList.remove('active');
  document.body.removeEventListener('click', this.onBodyClick);
 
  removeTrapFocus(this.activeElement);
  }
 
+ /**
+ * Replace DOM with parsed state from Sections API.
+ * @param {Object} parsedState - The parsed state object from Sections API.
+ */
  renderContents(parsedState) {
  this.cartItemKey = parsedState.key;
  this.getSectionsToRender().forEach((section) => {
@@ -47,6 +63,10 @@ class CartNotification extends HTMLElement {
  this.open();
  }
 
+ /**
+ * Array of sections to fetch from the Sections API.
+ * @returns {Array<Object>} Array of sections to fetch from the Sections API.
+ */
  getSectionsToRender() {
  return [
  {
@@ -62,10 +82,20 @@ class CartNotification extends HTMLElement {
  ];
  }
 
+ /**
+ * Gets the inner HTML of a cart section.
+ * @param {string} html - The HTML string to parse.
+ * @param {string} [selector='.shopify-section'] - The selector to query for.
+ * @returns {string} The inner HTML of the matched section.
+ */
  getSectionInnerHTML(html, selector = '.shopify-section') {
  return new DOMParser().parseFromString(html, 'text/html').querySelector(selector).innerHTML;
  }
 
+ /**
+ * Handle body click events to close the cart notification if clicked outside.
+ * @param {MouseEvent} evt - The click event.
+ */
  handleBodyClick(evt) {
  const target = evt.target;
  if (target !== this.notification && !target.closest('cart-notification')) {
@@ -75,6 +105,10 @@ class CartNotification extends HTMLElement {
  }
  }
 
+ /**
+ * Sets the active element.
+ * @param {HTMLElement} element - The element to set as active.
+ */
  setActiveElement(element) {
  this.activeElement = element;
  }