@hortonstudio/main 1.2.35 → 1.4.0

package/autoInit/form.js

@@ -0,0 +1,471 @@
+export function init() {
+  const config = {
+    selectors: {
+      form: 'form',
+      errorTemplate: '[data-hs-form="form-error"]',
+      requiredStep: '[data-hs-form="required-step"]',
+      nextButton: '[data-hs-form="next-button"]',
+      nextAnim: '[data-hs-form="next-anim"]',
+      finalAnim: '[data-hs-form="final-anim"]'
+    },
+    errorMessages: {
+      email: 'Please enter a valid email address',
+      tel: 'Please enter a valid phone number',
+      number: 'Please enter a valid number',
+      url: 'Please enter a valid URL',
+      text: 'This field is required',
+      textarea: 'This field is required',
+      select: 'Please select an option',
+      checkbox: 'Please check this box',
+      radio: 'Please select an option',
+      default: 'This field is required'
+    }
+  };
+
+  const activeErrors = new Map();
+  let errorTemplate = null;
+  let originalErrorTemplate = null;
+  let isValidating = false;
+
+  const initializeForms = () => {
+    const forms = document.querySelectorAll(config.selectors.form);
+    forms.forEach(form => {
+      form.setAttribute('novalidate', '');
+      
+      // Completely disable all browser validation methods
+      form.checkValidity = () => true;
+      form.reportValidity = () => true;
+      
+      // Override all input validation as well
+      const inputs = form.querySelectorAll('input, textarea, select');
+      inputs.forEach(input => {
+        // Remove required attribute and store it
+        if (input.hasAttribute('required')) {
+          input.removeAttribute('required');
+          input.setAttribute('data-was-required', 'true');
+        }
+        
+        // Override validation methods
+        input.checkValidity = () => true;
+        input.reportValidity = () => true;
+        input.setCustomValidity = () => {};
+      });
+    });
+
+    errorTemplate = document.querySelector(config.selectors.errorTemplate);
+    if (!errorTemplate) {
+      console.warn('Form validation: Error template not found');
+    } else {
+      // Clone the template, clean it up, and remove original from DOM
+      originalErrorTemplate = errorTemplate.cloneNode(true);
+      
+      // Clean up the cloned template
+      originalErrorTemplate.removeAttribute('data-hs-form');
+      originalErrorTemplate.removeAttribute('style');
+      originalErrorTemplate.textContent = ''; // Clear any placeholder text
+      
+      // Remove the original template from the DOM
+      errorTemplate.remove();
+    }
+  };
+
+  const getErrorMessage = (input) => {
+    const inputType = input.type || input.tagName.toLowerCase();
+    const value = input.value.trim();
+    
+    // If field is empty and was required, return required message
+    if (input.hasAttribute('data-was-required') && !value) {
+      return config.errorMessages[inputType] || config.errorMessages.default;
+    }
+    
+    // For non-empty invalid fields, return type-specific messages
+    if (value) {
+      switch (inputType) {
+        case 'email':
+          return 'Please enter a valid email address';
+        case 'url':
+          return 'Please enter a valid URL';
+        case 'number':
+          if (input.hasAttribute('min') && parseFloat(value) < parseFloat(input.min)) {
+            return `Number must be at least ${input.min}`;
+          }
+          if (input.hasAttribute('max') && parseFloat(value) > parseFloat(input.max)) {
+            return `Number must be no more than ${input.max}`;
+          }
+          return 'Please enter a valid number';
+        case 'tel':
+          return 'Please enter a valid phone number';
+        default:
+          if (input.hasAttribute('minlength') && value.length < parseInt(input.minlength)) {
+            return `Must be at least ${input.minlength} characters`;
+          }
+          if (input.hasAttribute('maxlength') && value.length > parseInt(input.maxlength)) {
+            return `Must be no more than ${input.maxlength} characters`;
+          }
+          if (input.hasAttribute('pattern')) {
+            return 'Please match the required format';
+          }
+          return config.errorMessages[inputType] || config.errorMessages.default;
+      }
+    }
+    
+    return config.errorMessages[inputType] || config.errorMessages.default;
+  };
+
+  const createErrorElement = (message) => {
+    if (!originalErrorTemplate) return null;
+
+    const errorElement = originalErrorTemplate.cloneNode(true);
+    errorElement.textContent = message;
+    
+    return errorElement;
+  };
+
+  const positionError = (errorElement, input) => {
+    const inputRect = input.getBoundingClientRect();
+    const errorRect = errorElement.getBoundingClientRect();
+    
+    let top = inputRect.bottom + window.scrollY + 8;
+    let left = inputRect.left + window.scrollX + (inputRect.width / 2) - (errorRect.width / 2);
+    
+    // Check viewport boundaries
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    
+    // Adjust horizontal position
+    if (left < 10) {
+      left = 10;
+    } else if (left + errorRect.width > viewportWidth - 10) {
+      left = viewportWidth - errorRect.width - 10;
+    }
+    
+    // Adjust vertical position if error would be below viewport
+    if (inputRect.bottom + errorRect.height + 16 > viewportHeight) {
+      top = inputRect.top + window.scrollY - errorRect.height - 8;
+    }
+    
+    const finalTop = top - window.scrollY;
+    const finalLeft = left - window.scrollX;
+    
+    // Only set the minimal positioning styles needed
+    errorElement.style.position = 'fixed';
+    errorElement.style.top = `${finalTop}px`;
+    errorElement.style.left = `${finalLeft}px`;
+    errorElement.style.zIndex = '9999';
+  };
+
+  const showError = (input, message) => {
+    removeError(input);
+    
+    const errorElement = createErrorElement(message);
+    if (!errorElement) return;
+    document.body.appendChild(errorElement);
+    positionError(errorElement, input);
+    
+    activeErrors.set(input, errorElement);
+    
+    input.setAttribute('aria-invalid', 'true');
+    input.setAttribute('aria-describedby', `error-${Date.now()}`);
+    errorElement.id = input.getAttribute('aria-describedby');
+  };
+
+  const removeError = (input) => {
+    const errorElement = activeErrors.get(input);
+    if (errorElement) {
+      errorElement.remove();
+      activeErrors.delete(input);
+      input.removeAttribute('aria-invalid');
+      input.removeAttribute('aria-describedby');
+    }
+  };
+
+  const customValidateField = (field) => {
+    const value = field.value.trim();
+    const type = field.type || field.tagName.toLowerCase();
+    
+    // Check if field was required (now stored in data-was-required)
+    if (field.hasAttribute('data-was-required')) {
+      // Special handling for checkboxes and radio buttons
+      if (type === 'checkbox' || type === 'radio') {
+        return field.checked;
+      }
+      
+      // For other field types, check if empty
+      if (!value) {
+        return false;
+      }
+      
+      // Type-specific validation for non-empty values
+      switch (type) {
+        case 'email':
+          // Basic email validation
+          const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+          return emailRegex.test(value);
+          
+        case 'url':
+          // Basic URL validation
+          try {
+            new URL(value);
+            return true;
+          } catch {
+            return false;
+          }
+          
+        case 'number':
+          // Number validation
+          const num = parseFloat(value);
+          if (isNaN(num)) return false;
+          
+          // Check min/max if present
+          if (field.hasAttribute('min') && num < parseFloat(field.min)) return false;
+          if (field.hasAttribute('max') && num > parseFloat(field.max)) return false;
+          return true;
+          
+        case 'tel':
+          // Basic phone validation (at least 10 digits)
+          const phoneRegex = /\d{10,}/;
+          return phoneRegex.test(value.replace(/\D/g, ''));
+          
+        default:
+          // For text, textarea, etc. - check minlength/maxlength
+          if (field.hasAttribute('minlength') && value.length < parseInt(field.minlength)) return false;
+          if (field.hasAttribute('maxlength') && value.length > parseInt(field.maxlength)) return false;
+          
+          // Check pattern if present
+          if (field.hasAttribute('pattern')) {
+            const pattern = new RegExp(field.pattern);
+            return pattern.test(value);
+          }
+          
+          return true;
+      }
+    }
+    
+    return true; // Field is valid if not required or passes validation
+  };
+
+  const validateContainer = (container) => {
+    const requiredFields = container.querySelectorAll('input[data-was-required], textarea[data-was-required], select[data-was-required]');
+    let isValid = true;
+    let firstInvalidField = null;
+
+    requiredFields.forEach((field) => {
+      const fieldValid = customValidateField(field);
+      
+      if (!fieldValid) {
+        isValid = false;
+        
+        if (!firstInvalidField) {
+          firstInvalidField = field;
+        }
+      }
+    });
+
+    if (!isValid && firstInvalidField) {
+      activeErrors.forEach((_, input) => {
+        removeError(input);
+      });
+      
+      firstInvalidField.focus();
+      
+      const message = getErrorMessage(firstInvalidField);
+      showError(firstInvalidField, message);
+    }
+
+    return isValid;
+  };
+
+  const handleFormSubmit = (event) => {
+    const form = event.target;
+    
+    // Set validation flag to prevent click outside interference
+    isValidating = true;
+    
+    const isValid = validateContainer(form);
+    
+    // Reset validation flag after a brief delay
+    setTimeout(() => {
+      isValidating = false;
+    }, 200);
+    
+    if (!isValid) {
+      // Only prevent submission if form is invalid
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+      return false;
+    } else {
+      // Clear all errors before submission
+      activeErrors.forEach((_, input) => {
+        removeError(input);
+      });
+      
+      // Trigger final animation if it exists
+      const finalAnimElement = form.querySelector(config.selectors.finalAnim);
+      if (finalAnimElement) {
+        finalAnimElement.click();
+      }
+      
+      // Don't prevent default - let the form submit naturally with its action/method
+    }
+  };
+
+  const handleNextButtonClick = (event) => {
+    event.preventDefault();
+    
+    const button = event.target;
+    const requiredStepContainer = button.closest(config.selectors.requiredStep);
+    
+    if (!requiredStepContainer) {
+      return;
+    }
+    
+    // Set validation flag to prevent click outside interference
+    isValidating = true;
+    
+    const isValid = validateContainer(requiredStepContainer);
+    
+    // Reset validation flag after a brief delay
+    setTimeout(() => {
+      isValidating = false;
+    }, 200);
+    
+    if (isValid) {
+      const nextAnimElement = requiredStepContainer.querySelector(config.selectors.nextAnim);
+      if (nextAnimElement) {
+        nextAnimElement.click();
+      }
+    }
+  };
+
+  const handleInputChange = (event) => {
+    const input = event.target;
+    if (activeErrors.has(input)) {
+      removeError(input);
+    }
+  };
+
+  const handleClickOutside = (event) => {
+    const clickedElement = event.target;
+    
+    // Don't process click outside during validation
+    if (isValidating) {
+      return;
+    }
+    
+    // Don't remove errors if clicking on next button
+    if (clickedElement.closest(config.selectors.nextButton)) {
+      return;
+    }
+    
+    // Don't remove errors immediately after they're created
+    setTimeout(() => {
+      // Double check validation flag hasn't been set during timeout
+      if (isValidating) {
+        return;
+      }
+      
+      activeErrors.forEach((errorElement, input) => {
+        if (input !== clickedElement && !input.contains(clickedElement) && 
+            errorElement !== clickedElement && !errorElement.contains(clickedElement)) {
+          removeError(input);
+        }
+      });
+    }, 100); // Small delay to prevent immediate removal
+  };
+
+  const handleScroll = () => {
+    activeErrors.forEach((errorElement, input) => {
+      const inputRect = input.getBoundingClientRect();
+      const isVisible = inputRect.top >= 0 && inputRect.bottom <= window.innerHeight;
+      
+      if (isVisible) {
+        positionError(errorElement, input);
+      } else {
+        errorElement.style.display = 'none';
+      }
+    });
+  };
+
+  const handleResize = () => {
+    activeErrors.forEach((errorElement, input) => {
+      positionError(errorElement, input);
+    });
+  };
+
+  const setupEventListeners = () => {
+    // Global invalid event prevention - this catches ALL invalid events
+    document.addEventListener('invalid', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+      return false;
+    }, true);
+    
+    // Form submit listeners - use capture phase to ensure we catch it first
+    document.addEventListener('submit', handleFormSubmit, true);
+    
+    // Next button listeners
+    document.addEventListener('click', (event) => {
+      if (event.target.closest(config.selectors.nextButton)) {
+        handleNextButtonClick(event);
+      }
+    });
+    
+    // Input change listeners
+    document.addEventListener('input', handleInputChange);
+    
+    // Click outside listeners
+    document.addEventListener('click', handleClickOutside);
+    
+    // Scroll and resize listeners
+    window.addEventListener('scroll', handleScroll);
+    window.addEventListener('resize', handleResize);
+  };
+
+  const destroy = () => {
+    // Clean up all active errors
+    activeErrors.forEach((_, input) => {
+      removeError(input);
+    });
+    
+    // Remove event listeners
+    document.removeEventListener('invalid', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+      return false;
+    }, true);
+    document.removeEventListener('submit', handleFormSubmit, true);
+    document.removeEventListener('input', handleInputChange);
+    document.removeEventListener('click', handleClickOutside);
+    window.removeEventListener('scroll', handleScroll);
+    window.removeEventListener('resize', handleResize);
+  };
+
+  // Initialize the form validation system
+  const initializeFormValidation = () => {
+    try {
+      initializeForms();
+      setupEventListeners();
+      
+      return {
+        result: "form initialized",
+        destroy
+      };
+    } catch (error) {
+      console.error('Form validation initialization failed:', error);
+      return {
+        result: "form initialization failed",
+        destroy
+      };
+    }
+  };
+
+  // Handle DOM ready state
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initializeFormValidation);
+  } else {
+    return initializeFormValidation();
+  }
+}

package/autoInit/modal.js

@@ -4,36 +4,36 @@ function initModal() {
     blurOpacity: 0.5,
     breakpoints: {
       mobile: 767,
-      tablet: 991
-    }
+      tablet: 991,
+    },
   };
 
   function getCurrentBreakpoint() {
     const width = window.innerWidth;
-    if (width <= config.breakpoints.mobile) return 'mobile';
-    if (width <= config.breakpoints.tablet) return 'tablet';
-    return 'desktop';
+    if (width <= config.breakpoints.mobile) return "mobile";
+    if (width <= config.breakpoints.tablet) return "tablet";
+    return "desktop";
   }
 
   function shouldPreventModal(element) {
-    const preventAttr = element.getAttribute('data-hs-modalprevent');
+    const preventAttr = element.getAttribute("data-hs-modalprevent");
     if (!preventAttr) return false;
-    
+
     const currentBreakpoint = getCurrentBreakpoint();
-    const preventBreakpoints = preventAttr.split(',').map(bp => bp.trim());
-    
+    const preventBreakpoints = preventAttr.split(",").map((bp) => bp.trim());
+
     return preventBreakpoints.includes(currentBreakpoint);
   }
 
   function openModal(element) {
     if (shouldPreventModal(element)) return;
-    
-    document.body.classList.add('u-overflow-clip');
-    
+
+    document.body.classList.add("u-overflow-clip");
+
     // Add blur to all other modals
-    document.querySelectorAll('[data-hs-modal]').forEach(modal => {
+    document.querySelectorAll("[data-hs-modal]").forEach((modal) => {
       if (modal !== element) {
-        modal.style.display = 'block';
+        modal.style.display = "block";
         modal.style.opacity = config.blurOpacity;
         modal.style.transition = `opacity ${config.transitionDuration}s ease`;
       }
@@ -41,13 +41,13 @@ function initModal() {
   }
 
   function closeModal(element) {
-    document.body.classList.remove('u-overflow-clip');
-    
+    document.body.classList.remove("u-overflow-clip");
+
     // Remove blur from all other modals
-    document.querySelectorAll('[data-hs-modal]').forEach(modal => {
+    document.querySelectorAll("[data-hs-modal]").forEach((modal) => {
       if (modal !== element) {
-        modal.style.display = 'none';
-        modal.style.opacity = '0';
+        modal.style.display = "none";
+        modal.style.opacity = "0";
         modal.style.transition = `opacity ${config.transitionDuration}s ease`;
       }
     });
@@ -57,11 +57,14 @@ function initModal() {
   let preventedModalStates = new Map();
 
   function handleBreakpointChange() {
-    document.querySelectorAll('[data-hs-modalprevent]').forEach(element => {
-      const elementKey = element.getAttribute('data-hs-modal') + '_' + (element.id || element.className);
+    document.querySelectorAll("[data-hs-modalprevent]").forEach((element) => {
+      const elementKey =
+        element.getAttribute("data-hs-modal") +
+        "_" +
+        (element.id || element.className);
       const shouldPrevent = shouldPreventModal(element);
       const wasStoredAsOpen = preventedModalStates.get(elementKey);
-      
+
       if (shouldPrevent && element.x) {
         preventedModalStates.set(elementKey, true);
         element.x = 0;
@@ -76,7 +79,7 @@ function initModal() {
 
   function toggleModal(element) {
     element.x = ((element.x || 0) + 1) % 2;
-    
+
     if (element.x) {
       openModal(element);
     } else {
@@ -85,40 +88,42 @@ function initModal() {
   }
 
   // Initialize openclose functionality
-  document.querySelectorAll('[data-hs-modal="openclose"]').forEach(trigger => {
-    trigger.addEventListener('click', function() {
-      toggleModal(this);
+  document
+    .querySelectorAll('[data-hs-modal="openclose"]')
+    .forEach((trigger) => {
+      trigger.addEventListener("click", function () {
+        toggleModal(this);
+      });
     });
-  });
 
   // Initialize open functionality
-  document.querySelectorAll('[data-hs-modal="open"]').forEach(trigger => {
-    trigger.addEventListener('click', function() {
+  document.querySelectorAll('[data-hs-modal="open"]').forEach((trigger) => {
+    trigger.addEventListener("click", function () {
       openModal(this);
     });
   });
 
   // Initialize close functionality
-  document.querySelectorAll('[data-hs-modal="close"]').forEach(trigger => {
-    trigger.addEventListener('click', function() {
+  document.querySelectorAll('[data-hs-modal="close"]').forEach((trigger) => {
+    trigger.addEventListener("click", function () {
       closeModal(this);
     });
   });
 
   // Handle window resize to check for prevented modals
-  window.addEventListener('resize', function() {
+  window.addEventListener("resize", function () {
     handleBreakpointChange();
   });
 
-  return { result: 'modal initialized' };
+  return { result: "modal initialized" };
 }
 
 export function init() {
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initModal);
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initModal);
   } else {
     initModal();
   }
-  
-  return { result: 'modal initialized' };
-}
+
+  return { result: "modal initialized" };
+}