@hortonstudio/main 1.6.6 → 1.6.7

package/autoInit/form.js

@@ -571,6 +571,12 @@ export function init() {
     return isValid;
   };
 
+  // Helper function to parse comma-separated config values
+  const parseFormConfig = (configString) => {
+    if (!configString) return [];
+    return configString.split(',').map(config => config.trim());
+  };
+
   const handleFormSubmit = (event) => {
     const form = event.target;
     
@@ -596,12 +602,63 @@ export function init() {
         removeError(input);
       });
       
+      // Handle text replacement if this form has replace fields
+      const replaceFieldElements = form.querySelectorAll('input[data-hs-form^="replace-field-"], textarea[data-hs-form^="replace-field-"], select[data-hs-form^="replace-field-"]');
+      if (replaceFieldElements.length > 0) {
+        replaceFieldElements.forEach(field => {
+          const dataHsForm = field.getAttribute('data-hs-form');
+          const suffix = dataHsForm.replace('replace-field-', '');
+          const value = field.value;
+          
+          // Find all matching text elements
+          const textElements = document.querySelectorAll(`[data-hs-form="replace-text-${suffix}"]`);
+          
+          textElements.forEach(element => {
+            element.textContent = value;
+          });
+        });
+      }
+      
+      // Handle form configuration
+      const formWrapper = form.closest('[data-hs-form="wrapper"]');
+      let shouldPreventSubmit = false;
+      
+      if (formWrapper && formWrapper.hasAttribute('data-hs-config')) {
+        const configString = formWrapper.getAttribute('data-hs-config');
+        const configs = parseFormConfig(configString);
+        
+        // Check for prevent-submit config
+        if (configs.includes('prevent-submit')) {
+          shouldPreventSubmit = true;
+        }
+        
+        // Check for click-trigger configs
+        configs.forEach(config => {
+          if (config.startsWith('click-trigger-')) {
+            const trigger = document.querySelector(`[data-hs-form="trigger"][data-hs-config*="${config}"]`);
+            if (trigger) {
+              setTimeout(() => {
+                trigger.click();
+              }, 100);
+            }
+          }
+        });
+      }
+      
       // Trigger final animation if it exists
       const finalAnimElement = form.querySelector(config.selectors.finalAnim);
       if (finalAnimElement) {
         finalAnimElement.click();
       }
       
+      // Prevent submission if configured to do so
+      if (shouldPreventSubmit) {
+        event.preventDefault();
+        event.stopPropagation();
+        event.stopImmediatePropagation();
+        return false;
+      }
+      
       // Don't prevent default - let the form submit naturally with its action/method
     }
   };
@@ -739,6 +796,7 @@ export function init() {
     window.removeEventListener('resize', handleResize);
   };
 
+
   // Initialize the form validation system
   const initializeFormValidation = () => {
     try {

package/autoInit/navbar.js

@@ -27,16 +27,12 @@ function setupDynamicDropdowns() {
   };
 
   dropdownWrappers.forEach((wrapper) => {
-    const toggle = wrapper.querySelector("a");
-    const allElements = wrapper.querySelectorAll("*");
-    let dropdownList = null;
-
-    for (const element of allElements) {
-      const links = element.querySelectorAll("a");
-      if (links.length >= 2 && !element.contains(toggle)) {
-        dropdownList = element;
-        break;
-      }
+    const toggle = wrapper.querySelector('[data-hs-nav="dropdown-toggle"]');
+    const dropdownList = wrapper.querySelector('[data-hs-nav="dropdown-list"]');
+
+    if (!toggle || !dropdownList) {
+      console.warn("Dropdown wrapper missing required elements:", wrapper);
+      return;
     }
 
     const toggleText = toggle.textContent?.trim() || "dropdown";

package/index.js

@@ -1,4 +1,4 @@
-// Version:1.6.6
+// Version:1.6.7
 const API_NAME = "hsmain";
 
 const initializeHsMain = async () => {
@@ -16,6 +16,7 @@ const initializeHsMain = async () => {
 
   const utilityModules = {
     "data-hs-util-ba": true,
+    "data-hs-util-slider": true,
   };
 
   const autoInitModules = {
@@ -38,6 +39,7 @@ const initializeHsMain = async () => {
   const moduleMap = {
     transition: () => import("./autoInit/transition.js"),
     "data-hs-util-ba": () => import("./utils/before-after.js"),
+    "data-hs-util-slider": () => import("./utils/slider.js"),
     "smooth-scroll": () => import("./autoInit/smooth-scroll.js"),
     navbar: () => import("./autoInit/navbar.js"),
     accessibility: () => import("./autoInit/accessibility.js"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hortonstudio/main",
-  "version": "1.6.6",
+  "version": "1.6.7",
   "description": "Animation and utility library for client websites",
   "main": "index.js",
   "type": "module",

package/utils/slider.js

@@ -0,0 +1,95 @@
+export const init = () => {
+  // Null checks for DOM elements
+  const wrapper = document.querySelector('[data-hs-slider="wrapper"]');
+  const nextBtn = document.querySelector('[data-hs-slider="next"]');
+  const prevBtn = document.querySelector('[data-hs-slider="previous"]');
+
+  // Early return if required elements don't exist
+  if (!wrapper || !nextBtn || !prevBtn) {
+    return;
+  }
+
+  // Validate slides exist and have length
+  const slides = wrapper.children;
+  if (!slides || slides.length === 0) {
+    return;
+  }
+
+  // Check if gsap is available globally
+  if (typeof gsap === 'undefined') {
+    return;
+  }
+
+  const totalSlides = slides.length;
+  let currentIndex = 0;
+  let isAnimating = false;
+
+  const firstClone = slides[0].cloneNode(true);
+  const lastClone = slides[slides.length - 1].cloneNode(true);
+
+  wrapper.appendChild(firstClone);
+  wrapper.insertBefore(lastClone, slides[0]);
+
+  currentIndex = 1;
+  gsap.set(wrapper, { xPercent: -100 });
+
+  nextBtn.addEventListener('click', () => {
+    if (isAnimating) return;
+    isAnimating = true;
+    
+    if (currentIndex === totalSlides) {
+      currentIndex++;
+      gsap.to(wrapper, {
+        xPercent: -currentIndex * 100,
+        duration: 0.5,
+        ease: "power2.inOut",
+        onComplete: () => {
+          gsap.set(wrapper, { xPercent: -100 });
+          currentIndex = 1;
+          isAnimating = false;
+        }
+      });
+    } else {
+      currentIndex++;
+      gsap.to(wrapper, {
+        xPercent: -currentIndex * 100,
+        duration: 0.5,
+        ease: "power2.inOut",
+        onComplete: () => {
+          isAnimating = false;
+        }
+      });
+    }
+  });
+
+  prevBtn.addEventListener('click', () => {
+    if (isAnimating) return;
+    isAnimating = true;
+    
+    if (currentIndex === 1) {
+      currentIndex--;
+      gsap.to(wrapper, {
+        xPercent: -currentIndex * 100,
+        duration: 0.5,
+        ease: "power2.inOut",
+        onComplete: () => {
+          gsap.set(wrapper, { xPercent: -totalSlides * 100 });
+          currentIndex = totalSlides;
+          isAnimating = false;
+        }
+      });
+    } else {
+      currentIndex--;
+      gsap.to(wrapper, {
+        xPercent: -currentIndex * 100,
+        duration: 0.5,
+        ease: "power2.inOut",
+        onComplete: () => {
+          isAnimating = false;
+        }
+      });
+    }
+  });
+};
+
+export const version = "1.0.0";