michaelschiemer/resources/js/modules/form-handling/index.js

import { Logger } from '../../core/logger.js';
import { FormHandler } from './FormHandler.js';
import { FormValidator } from './FormValidator.js';
import { FormState } from './FormState.js';

/**
 * Form Handling Module
 * 
 * Provides comprehensive form handling with:
 * - HTML5-based validation (reads validation rules from HTML attributes)
 * - AJAX form submission with error handling
 * - Form state management (pristine, dirty, touched)
 * - Progressive enhancement
 * 
 * Usage:
 * - Add data-module="form-handling" to any form element
 * - Configure via data-options attribute:
 *   data-options='{"validateOnBlur": true, "ajaxSubmit": true}'
 * 
 * HTML Validation Attributes Supported:
 * - required: Field is required
 * - pattern: Custom regex pattern
 * - minlength/maxlength: String length limits
 * - min/max: Number range limits
 * - type="email": Email validation
 * - type="url": URL validation
 * - data-validate: Custom validation (phone, postal-code-de, no-html)
 * - data-error-*: Custom error messages
 */

const FormHandlingModule = {
    name: 'form-handling',
    
    // Module-level init (called by module system)
    init(config = {}, state = null) {
        Logger.info('[FormHandling] Module initialized (ready for DOM elements)');
        // Module is now ready - no DOM operations here
        return this;
    },
    
    // Element-specific init (called for individual form elements)
    initElement(element, options = {}) {
        Logger.info(`[FormHandling] Initializing on form: ${element.id || 'unnamed'}`);
        
        // Default configuration
        const config = {
            validateOnSubmit: true,
            validateOnBlur: false,
            validateOnInput: false,
            showInlineErrors: true,
            preventSubmitOnError: true,
            ajaxSubmit: true,
            submitMethod: 'POST',
            enableStateTracking: true,
            enableUnsavedWarning: false,
            ...options
        };
        
        // Initialize form handler
        const formHandler = FormHandler.create(element, config);
        
        // Store reference for later access
        element._formHandler = formHandler;
        element._formValidator = formHandler.validator;
        element._formState = formHandler.state;
        
        // Enable unsaved changes warning if configured
        if (config.enableUnsavedWarning) {
            formHandler.state.enableUnsavedChangesWarning();
        }
        
        // Add module-specific CSS classes
        element.classList.add('form-enhanced');
        
        // Trigger initialization event
        const event = new CustomEvent('form:initialized', {
            detail: {
                handler: formHandler,
                validator: formHandler.validator,
                state: formHandler.state,
                config: config
            },
            bubbles: true
        });
        
        element.dispatchEvent(event);
        
        Logger.info(`[FormHandling] Successfully initialized for form: ${element.id || 'unnamed'}`);
        
        return formHandler;
    },
    
    // Element-specific destroy (for form elements)
    destroyElement(element) {
        if (element._formHandler) {
            element._formHandler.destroy();
            delete element._formHandler;
            delete element._formValidator;
            delete element._formState;
        }
        
        element.classList.remove('form-enhanced');
        element.removeAttribute('data-enhanced');
        
        Logger.info(`[FormHandling] Destroyed for form: ${element.id || 'unnamed'}`);
    },
    
    // Module-level destroy
    destroy() {
        Logger.info('[FormHandling] Module destroyed');
    }
};

// Export individual classes for direct usage
export { FormHandler, FormValidator, FormState };

// Export as default for module system
export default FormHandlingModule;

// Export init function directly for compatibility with module system
export const init = FormHandlingModule.init.bind(FormHandlingModule);
export const initElement = FormHandlingModule.initElement.bind(FormHandlingModule);

// Also export named for direct usage
export { FormHandlingModule };