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;
   }