@creative-web-solution/front-library 7.0.7 → 7.1.3

package/Modules/Validator/Internal/Input.ts

@@ -0,0 +1,366 @@
+import { on, off }                  from '../../../Events/EventsManager';
+import { unique }                   from '../../../Helpers/Unique';
+import validatorFunctionsController from './ValidatorFunctionsController';
+import InputValidator               from './InputValidator';
+import { getRadioList }             from '../Tools/RadioButton';
+
+
+/*
+ * Handle one input
+ */
+export default class Input implements FLib.Validator.Input {
+    #isRadio:                   boolean;
+    #inputType:                 string;
+    #inputId:                   string;
+    #$input:                    HTMLElement;
+    #$group:                    FLib.Validator.CustomValidatorRadioInput[] | undefined;
+    #$otherRadioOfGroup;
+    #hasValidator:              boolean;
+    #validatorsInErrors:        InputValidator[] = [];
+    #inlineCustomErrorMessages: Record<string, string>;
+    #liveHookFunctionHash;
+    #$label:                    HTMLLabelElement | undefined;
+    #validators:                InputValidator[];
+    #hasError:                  boolean;
+    #isLiveValidation           = false;
+    #options;
+
+    get $input(): HTMLElement {
+        return this.#$input;
+    }
+
+    get $label(): HTMLElement | undefined {
+        return this.#$label;
+    }
+
+    get hasError(): boolean {
+        return this.#hasError;
+    }
+
+    get isLiveValidation(): boolean {
+        return this.#isLiveValidation;
+    }
+
+    get $radioGroup(): FLib.Validator.CustomValidatorRadioInput[] | undefined {
+        return this.#$group;
+    }
+
+    get $otherRadioOfGroup(): FLib.Validator.CustomValidatorRadioInput[] {
+        return this.#$otherRadioOfGroup;
+    }
+
+    get hasValidator(): boolean {
+        return this.#hasValidator;
+    }
+
+
+    constructor( $input: HTMLElement & { type?: string }, options: FLib.Validator.Options & { hasLiveValidation: boolean; } ) {
+
+        this.#options = options;
+
+        if ( $input.type === 'radio' || $input.type === 'checkbox' ) {
+            this.#inputType = 'optin';
+        }
+        else if ( $input.type === 'hidden' ) {
+            this.#inputType = 'hidden';
+        }
+        else if ( $input.nodeName === 'SELECT' ) {
+            this.#inputType = 'select';
+        }
+        else {
+            this.#inputType = 'inputText';
+        }
+
+        this.#isRadio = $input.type === 'radio';
+        this.#inputId = $input.id;
+
+        if ( this.#inputId ) {
+            this.#$label = document.querySelector( `label[for="${ this.#inputId }"]` ) as HTMLLabelElement;
+        }
+
+        if ( !this.#$label ) {
+            this.#$label = $input.closest( 'label' ) as HTMLLabelElement;
+        }
+
+        // Get all validators for this input
+        this.#validators = validatorFunctionsController.getValidators( $input, options );
+
+        this.#hasValidator              = this.#validators.length > 0;
+        this.#inlineCustomErrorMessages = {};
+
+        if ( $input.hasAttribute( options.customErrorLabelPrefix ) ) {
+            this.#inlineCustomErrorMessages[ 'default' ] =
+                options.errorMessages[ $input.getAttribute( options.customErrorLabelPrefix ) as string ];
+        }
+
+        this.#validators.forEach( validator => {
+            const attrName = [ options.customErrorLabelPrefix, validator.name ].join( '-' );
+
+            if ( $input.hasAttribute( attrName ) ) {
+                this.#inlineCustomErrorMessages[ validator.name ] = $input.getAttribute( attrName ) as string;
+            }
+        })
+
+        // Cache all radio button with the same name attribute
+        if ( this.#isRadio ) {
+            this.#$group      = getRadioList( $input ) as FLib.Validator.CustomValidatorRadioInput[];
+            this.#$otherRadioOfGroup = Array.from( this.#$group ).filter( $rd => {
+                return $rd !== $input;
+            } );
+
+            this.#$group.forEach( $rd => {
+                $rd.__$radioMaster = $input as FLib.Validator.CustomValidatorRadioInput;
+                $rd.__$radioGroup  = this.#$group as FLib.Validator.CustomValidatorRadioInput[];
+                $rd.__$otherRadioOfGroup = ( Array.from( this.#$group as FLib.Validator.CustomValidatorRadioInput[] ) as FLib.Validator.CustomValidatorRadioInput[] ).filter( $rd2 => {
+                    return $rd2 !== $rd;
+                } );
+            } );
+        }
+
+        this.#$input      = $input;
+        this.#hasError    = false;
+
+
+        if ( this.#hasValidator && options.hasLiveValidation && this.#inputType !== 'hidden' ) {
+            on( this.#isRadio ? this.#$group : $input, {
+                "eventsName":   options.liveValidation?.eventsName?.[ this.#inputType ] as string,
+                "callback":     this.#onLiveValidation
+            } );
+        }
+
+        // Add extra listener (focus, blur, ...) on the input
+        if ( options.liveValidation?.eventsHook ) {
+            this.#liveHookFunctionHash = {};
+
+            Object
+                .keys( options.liveValidation.eventsHook )
+                .forEach( key => {
+                    this.#liveHookFunctionHash[ key ] = () => {
+                        options.liveValidation?.eventsHook[ key ]( this, event );
+                    }
+
+                    on( this.#isRadio ? this.#$group : $input, {
+                        "eventsName":   key,
+                        "callback":     this.#liveHookFunctionHash[ key ]
+                    } );
+                } );
+        }
+    }
+
+
+    /*
+     * Validate this input
+    */
+    #validate = ( isLiveValidation: boolean ): Promise<void> => {
+        this.#validatorsInErrors.length = 0;
+        this.#hasError                  = false;
+        this.#isLiveValidation          = isLiveValidation;
+
+        // This input has no (known) validation
+        if ( !this.#hasValidator ) {
+            return Promise.resolve();
+        }
+
+        const promArray: Promise<void>[] = [];
+
+        // Call all validators
+        this.#validators.forEach( validator => {
+            promArray.push( validator.validate( isLiveValidation ) )
+        } );
+
+        return Promise.all( promArray ).then(() => {
+            this.#validators.forEach( validator => {
+                if ( !validator.isValid() ) {
+                    this.#hasError = true
+                }
+            } );
+        } );
+    }
+
+
+    /*
+     * Return an array of validator in error
+     */
+    getErrors(): InputValidator[] {
+        this.#validatorsInErrors.length = 0;
+
+        // No validator => Field is valid
+        if ( !this.#hasValidator ) {
+            return this.#validatorsInErrors;
+        }
+
+        // Return only validator in invalid state
+        this.#validators.forEach( validator => {
+            if ( !validator.isValid() ) {
+                this.#validatorsInErrors.push( validator );
+            }
+        });
+
+        return this.#validatorsInErrors;
+    }
+
+
+    #labelToMessage = ( validatorName: string, _locale?: { [ key: string ]: string }, avoidDefaultMessage?: boolean ): string => {
+        let customInlineDefaultMessage,
+            customErrorDefaultMessage,
+            customInlineMessage;
+
+        if ( !avoidDefaultMessage ) {
+            // In attribute data-error-label
+            customInlineDefaultMessage = this.#inlineCustomErrorMessages[ 'default' ];
+            // In global options configuration
+            customErrorDefaultMessage = this.#options.errorMessages[ 'default' ];
+        }
+
+        // Forced in parameters of this function
+        const forcedJSMessage = _locale ? _locale[ validatorName ] : null;
+
+        if ( forcedJSMessage ) {
+            return forcedJSMessage;
+        }
+
+        // In attribute data-error-label-VALIDATOR_NAME
+        customInlineMessage = this.#inlineCustomErrorMessages[ validatorName ];
+        if ( customInlineMessage ) {
+            customInlineMessage =
+                this.#options.errorMessages[ customInlineMessage ] ||
+                customInlineMessage;
+        }
+
+        if ( customInlineMessage ) {
+            return customInlineMessage;
+        }
+
+        // In global options configuration
+        const customErrorMessage = this.#options.errorMessages[ validatorName ];
+
+        if ( customErrorMessage ) {
+            return customErrorMessage;
+        }
+
+        return (
+            customInlineDefaultMessage ||
+            customErrorDefaultMessage ||
+            validatorName
+        );
+    }
+
+
+    /*
+     * Return an array of error messages and labels
+     */
+    getErrorMessages( _locale?: { [ key: string ]: string } ): { message: string, label: string, type: string }[] {
+        this.getErrors();
+
+        if ( !this.#validatorsInErrors.length ) {
+            return [];
+        }
+
+        const messages: { message: string, label: string, type: string }[] = [];
+
+        this.#validatorsInErrors.forEach( validator => {
+            // BASIC MESSAGE (determined from validator name)
+            messages.push( {
+                "message": this.#labelToMessage( validator.name, _locale ),
+                "label":   validator.name,
+                "type":    "basic"
+            } );
+
+            // EXTRA MESSAGE (from the validator function)
+
+            validator.extraErrorMessages.forEach( extraErrorMessage => {
+                messages.push( {
+                    "message": this.#labelToMessage( extraErrorMessage, _locale, true ),
+                    "label":   validator.name,
+                    "type":    "extra"
+                } );
+            });
+        });
+
+        return unique( messages, ( elem, resultArray ) => {
+            return !resultArray.find( resultElem => {
+                return elem.message === resultElem.message
+            } );
+        } );
+    }
+
+
+    /*
+     * Return a promise that resolve if the validation is successful
+     */
+    isValid(): Promise<void> {
+        return this.#validate( false );
+    }
+
+
+    /**
+     * Get custom data of all validators
+     */
+    getData(): any[] {
+        this.getErrors();
+
+        if ( !this.#validatorsInErrors.length ) {
+            return [];
+        }
+
+        const dataArray: any[] = [];
+
+        this.#validatorsInErrors.forEach( validator => {
+            const data = validator.getData();
+
+            if ( !data ) {
+                return;
+            }
+
+            dataArray.push( data );
+        })
+
+        return dataArray;
+    }
+
+
+    /*
+     * Remove events binding from the field
+     */
+    destroy(): this {
+
+        if ( this.#hasValidator && this.#options.hasLiveValidation && this.#inputType !== 'hidden' ) {
+            off( this.#isRadio ? this.#$group : this.#$input, {
+                "eventsName":   this.#options.liveValidation.eventsName[ this.#inputType ],
+                "callback":     this.#onLiveValidation
+            } );
+        }
+
+
+        if ( this.#options.liveValidation.eventsHook && this.#liveHookFunctionHash ) {
+            Object
+                .keys( this.#options.liveValidation.eventsHook )
+                .forEach( key => {
+                    off( this.#isRadio ? this.#$group : this.#$input, {
+                        "eventsName":   key,
+                        "callback":     this.#liveHookFunctionHash[ key ]
+                    } );
+                } );
+        }
+
+        return this;
+    }
+
+
+    #onLiveValidation = ( event: Event ): void => {
+        this.#validate( true )
+            .then( () => {
+                if ( this.hasError && this.#options.liveValidation.onInvalidate ) {
+                    this.#options.liveValidation.onInvalidate( this, event );
+                }
+                else if ( !this.hasError && this.#options.liveValidation.onValidate ) {
+                    this.#options.liveValidation.onValidate( this, event );
+                }
+            } )
+            .catch( err => {
+                if ( window.$$DEBUG$$ ) {
+                    console.log( err );
+                }
+            } );
+    }
+}

package/Modules/Validator/Internal/InputValidator.ts

@@ -0,0 +1,99 @@
+import { getValue } from '../../../Helpers/GetValue';
+
+
+/*
+ * Used to make one validation on one input
+ * Store the state (valid or not) between validations
+ */
+export default class InputValidator implements FLib.Validator.InputValidator {
+    #$input:                HTMLElement;
+    #name:                  string;
+    #isAsynch:              boolean;
+    #extraMessages;
+    #extraErrorMessages;
+    #data;
+    #validateFunc:          FLib.Validator.ValidateFunction;
+    #state:                 FLib.Validator.ValidationState | undefined;
+    #validatorOptions;
+
+
+    get $input(): HTMLElement {
+        return this.#$input;
+    }
+
+    get name(): string {
+        return this.#name;
+    }
+
+    get isAsynch(): boolean {
+        return this.#isAsynch;
+    }
+
+    get extraMessages(): string[] {
+        return this.#extraMessages;
+    }
+
+    get extraErrorMessages(): string[] {
+        return this.#extraErrorMessages;
+    }
+
+    get data(): any {
+        return this.#data;
+    }
+
+
+    constructor( $input: HTMLElement, validatorParams: FLib.Validator.Validator, validatorOptions: FLib.Validator.Validator & { hasLiveValidation: boolean; } ) {
+        this.#validateFunc       = validatorParams.validate;
+
+        this.#$input             = $input;
+        this.#name               = validatorParams.name;
+        this.#isAsynch           = validatorParams.isAsynch;
+        // Extra message like warning, not error
+        this.#extraMessages      = [];
+        // Extra error message rise by the validator
+        this.#extraErrorMessages = [];
+        // Extra data send by the validator
+        this.#data               = null;
+        this.#validatorOptions   = validatorOptions;
+    }
+
+
+    /*
+     * Validate the current input with one validator
+     */
+    validate( isLiveValidation: boolean ): Promise<void> {
+        const value = getValue( this.#$input );
+
+        this.#extraMessages.length      = 0;
+        this.#extraErrorMessages.length = 0;
+        this.#data                      = null;
+
+        return new Promise<void>( resolve => {
+            this.#validateFunc( this.#$input, value, isLiveValidation, this.#validatorOptions ).then( _state => {
+                this.#state              = _state;
+
+                this.#extraMessages      = _state.extraMessages || this.#extraMessages;
+                this.#extraErrorMessages = _state.extraErrorMessages || this.#extraErrorMessages;
+                this.#data               = _state.data;
+
+                resolve();
+            } );
+        } );
+    }
+
+
+    /**
+     * @returns true if the input is valid
+     */
+    isValid(): boolean {
+        return !!this.#state && this.#state.isValid;
+    }
+
+
+    /**
+     * Get custom data that can optionnaly be passed to the validator
+     */
+    getData(): any {
+        return this.#data;
+    }
+}

package/Modules/Validator/Internal/ValidatorFunctionsController.ts

@@ -0,0 +1,58 @@
+import InputValidator from './InputValidator';
+
+
+/*
+ * Object managing all validation functions
+ */
+class ValidatorFunctions {
+    #validators: FLib.Validator.Validator[] = [];
+
+    /*
+     * Add new validator to the list
+     */
+    addValidator = ( name: string, selector: string, isAsynch: boolean | FLib.Validator.ValidateFunction, func?: FLib.Validator.ValidateFunction ) => {
+        if ( typeof func === 'undefined' ) {
+            func    = (isAsynch as unknown) as FLib.Validator.ValidateFunction;
+            isAsynch = false;
+        }
+
+        this.#validators.push( {
+            name,
+            selector,
+            "validate": func,
+            "isAsynch": isAsynch as boolean
+        } );
+    }
+
+
+    /*
+     * Create and return all validators that apply to an inputs
+     */
+    getValidators( $input: HTMLElement, options: FLib.Validator.Options & { hasLiveValidation: boolean; } ) {
+        let validatorOptions;
+
+        const inputsValidators: InputValidator[] = [];
+
+        this.#validators.forEach( validatorParams => {
+            if ( $input.matches( validatorParams.selector ) ) {
+                validatorOptions =
+                    options.validatorsOptions &&
+                    options.validatorsOptions[ validatorParams.name ]
+                        ? options.validatorsOptions[ validatorParams.name ]
+                        : null;
+                inputsValidators.push(
+                    new InputValidator(
+                        $input,
+                        validatorParams,
+                        validatorOptions
+                    )
+                );
+            }
+        })
+
+        return inputsValidators;
+    }
+}
+
+
+export default new ValidatorFunctions();

package/Modules/Validator/Max.ts

@@ -9,7 +9,7 @@ addValidator( 'max', '[max]', ( $input, value, isLiveValidation ) => {
         $input,
         value,
         "isValid": value === '' ||
-                    parseFloat( value as string ) <= parseFloat( $input.getAttribute( 'max' )! ),
+                    parseFloat( value as string ) <= parseFloat( $input.getAttribute( 'max' ) as string ),
         "label": "max",
         isLiveValidation
     });

package/Modules/Validator/Min.ts

@@ -9,7 +9,7 @@ addValidator( 'min', '[min]', ( $input, value, isLiveValidation ) => {
         $input,
         value,
         "isValid": value === '' ||
-                parseFloat( value as string ) >= parseFloat( $input.getAttribute( 'min' )! ),
+                parseFloat( value as string ) >= parseFloat( $input.getAttribute( 'min' ) as string ),
         "label": "min",
         isLiveValidation
     });

package/Modules/Validator/MultiRequired.ts

@@ -12,9 +12,9 @@ import { isRadioListChecked } from './Tools/RadioButton';
  *
  */
 addValidator( 'multirequired', '[data-multirequired]', ( $input, value, isLiveValidation ) => {
-    let $group, arrayData, count, data, groupName, nbRequiredMax, nbRequiredMin;
+    let $group, count, nbRequiredMax;
 
-    data = $input.getAttribute( 'data-multirequired' );
+    const data = $input.getAttribute( 'data-multirequired' ) as string;
     count = 0;
 
     if ( data.indexOf( '|' ) === -1 ) {
@@ -27,8 +27,8 @@ addValidator( 'multirequired', '[data-multirequired]', ( $input, value, isLiveVa
         });
     }
 
-    arrayData = data.split( '|' );
-    groupName = arrayData[ 0 ];
+    const arrayData = data.split( '|' );
+    const groupName = arrayData[ 0 ];
 
     $group = document.querySelectorAll( `[data-multirequired-group^="${ groupName }"]` );
 
@@ -42,7 +42,7 @@ addValidator( 'multirequired', '[data-multirequired]', ( $input, value, isLiveVa
         });
     }
 
-    nbRequiredMin = parseInt( arrayData[ 1 ], 10 ) || 0
+    const nbRequiredMin = parseInt( arrayData[ 1 ], 10 ) || 0
 
     if ( arrayData.length > 2 ) {
         nbRequiredMax = parseInt( arrayData[ 2 ], 10 );

package/Modules/Validator/Number.ts

@@ -1,6 +1,7 @@
 import isNumber         from './Tools/IsNumber';
 import { addValidator } from './index';
 
+
 /**
  * Number validation
  */

package/Modules/Validator/Pattern.ts

@@ -8,7 +8,7 @@ addValidator( 'pattern', '[pattern]', ( $input, value, isLiveValidation ) => {
     return Promise.resolve({
         $input,
         value,
-        "isValid": value === '' || new RegExp( $input.getAttribute( 'pattern' )! ).test( value as string ),
+        "isValid": value === '' || new RegExp( $input.getAttribute( 'pattern' ) as string ).test( value as string ),
         "label":   "pattern",
         isLiveValidation
     });

package/Modules/Validator/Recaptcha.ts

@@ -1,5 +1,6 @@
 import { addValidator } from './index';
 
+
 addValidator( 'recaptcha', '.js--recaptcha', ( $input, value, isLiveValidation ) => {
     return Promise.resolve({
         $input,

package/Modules/Validator/Required.ts

@@ -2,6 +2,7 @@ import isEmpty                from './Tools/IsEmpty';
 import { addValidator }       from './index';
 import { isRadioListChecked } from './Tools/RadioButton';
 
+
 /**
  * Required validation
  */
@@ -12,8 +13,8 @@ addValidator( 'required', '[required]', ( $input, value, isLiveValidation ) => {
         isValid = ($input as HTMLInputElement).checked;
     }
     else if ( ($input as HTMLInputElement).type === 'radio' ) {
-        /** @ts-expect-error */
-        isValid = isRadioListChecked( $input.__$radioGroup );
+
+        isValid = isRadioListChecked( ($input as FLib.Validator.CustomValidatorRadioInput).__$radioGroup );
     }
     else {
         isValid = !isEmpty( value );