@creative-web-solution/front-library 7.0.6 → 7.1.2

package/Types/GLImageTransition.d.ts

@@ -1,47 +1,51 @@
-type GLImageTransitionFitType  = 'cover' | 'contains';
+declare namespace FLib {
+    namespace GLImageTransition {
+        type FitType  = 'cover' | 'contains';
 
-interface GLImageTransitionPreset {
-    fsSource: string;
-    addUniform?( GL: WebGLRenderingContext, SHADER_PROGRAM: WebGLProgram ): void;
-    updateUniform?( GL: WebGLRenderingContext ): void;
-    onTransitionStart?();
-    onTransitionEnd?();
-}
+        interface Preset {
+            fsSource: string;
+            addUniform?( GL: WebGLRenderingContext, SHADER_PROGRAM: WebGLProgram ): void;
+            updateUniform?( GL: WebGLRenderingContext ): void;
+            onTransitionStart?();
+            onTransitionEnd?();
+        }
 
 
-type GLImageTransitionOptionsType = {
-    preset?:   GLImageTransitionPreset;
-    /** @default document.body */
-    $wrapper?: HTMLElement;
-    /** @default webgl */
-    context?:  string;
-    /** @default cover */
-    fitMode?: GLImageTransitionFitType;
-    /**
-     * Transition duration in second
-     * @default 1
-    */
-    duration?: number;
-    /**
-     * 0 <= color <= 1
-     * @default [0, 0, 0, 1]
-    */
-    backgroundColor?: number[];
-    /**
-     * Color displayed instead of the texture when an error occured on image loading. 0 <= color <= 1
-     * @default [0, 0, 1, 1]
-    */
-    dummyTextureColor?: number[];
-    canvasCssClass?: string;
-    /**
-     * Should the canvas size respond to the browser's size change
-     * @default false
-    */
-    fluid?: boolean;
-    /** Called juste before the loading start */
-    onImageLoading?: ( url: string, isInit: boolean ) => void;
-    /** Called once the loading is done */
-    onImageLoaded?: ( url: string, isInit: boolean ) => void;
-    /** Called on image loading error */
-    onImageError?: ( url: string, isInit: boolean ) => void;
+        type Options = {
+            preset:   Preset;
+            /** @defaultValue document.body */
+            $wrapper: HTMLElement;
+            /** @defaultValue webgl */
+            context:  string;
+            /** @defaultValue cover */
+            fitMode: FitType;
+            /**
+             * Transition duration in second
+             * @defaultValue 1
+            */
+            duration: number;
+            /**
+             * 0 &lt;= color &lt;= 1
+             * @defaultValue [0, 0, 0, 1]
+            */
+            backgroundColor: number[];
+            /**
+             * Color displayed instead of the texture when an error occured on image loading. 0 &lt;= color &lt;= 1
+             * @defaultValue [0, 0, 1, 1]
+            */
+            dummyTextureColor: number[];
+            canvasCssClass?: string;
+            /**
+             * Should the canvas size respond to the browser's size change
+             * @defaultValue false
+            */
+            fluid: boolean;
+            /** Called juste before the loading start */
+            onImageLoading?: ( url: string, isInit: boolean ) => void;
+            /** Called once the loading is done */
+            onImageLoaded?: ( url: string, isInit: boolean ) => void;
+            /** Called on image loading error */
+            onImageError?: ( url: string, isInit: boolean ) => void;
+        }
+    }
 }

package/Types/GlobalState.d.ts

@@ -0,0 +1,9 @@
+declare namespace FLib {
+    namespace GlobalState {
+        type Options = {
+            alwaysDispatch: boolean;
+            dispatchEvents: boolean;
+        };
+        type Callback = ( value: any, properyName: string, storeName: string ) => void;
+    }
+}

package/Types/Helpers.d.ts

@@ -0,0 +1,63 @@
+declare namespace FLib {
+    namespace Helpers {
+        namespace Color {
+            type RenderType =  'obj' | 'hex' | 'rgba';
+
+            type Color = {
+                r:  number;
+                g:  number;
+                b:  number;
+                a:  number;
+                hr: string;
+                hg: string;
+                hb: string;
+                ha: string;
+            }
+        }
+
+        namespace Cookie {
+            type Options = {
+                days:    number | null;
+                /** Default value is true if the location protocol is https */
+                secure:  boolean;
+                /** Default: window.location.hostname */
+                domain:  string;
+                /** Default: / */
+                path:    string;
+            }
+        }
+
+        interface UrlParser {
+            absolute:       string;
+            absolute2:      string;
+            anchor:         string;
+            authority:      string;
+            directory:      string;
+            file:           string;
+            full:           string;
+            full2:          string;
+            host:           string;
+            location;
+            password:       string;
+            path:           string;
+            port:           string;
+            protocol:       string;
+            query:          string;
+            queryKey:       Record<string, string>;
+            relative:       string;
+            relative2:      string;
+            source:         string;
+            user:           string;
+            userInfo:       string;
+            isAnchor:       boolean;
+            isSameDomain:   boolean;
+
+            init( url: string ): void;
+            setAnchor( anchor: string ): this;
+            getParam( key: string ): string;
+            setParam( keys: string | Record<string, string>, value?: string ): this;
+            removeParam( keys: string | string[] ): this
+            removeAll(): this;
+        }
+    }
+}

package/Types/Notifications.d.ts

@@ -1,47 +1,51 @@
-type NotificationType =  'info' | 'success' | 'warning' | 'danger';
+declare namespace FLib {
+    namespace Notifications {
+        type Type =  'info' | 'success' | 'warning' | 'danger';
 
-type NotificationsOptionsType = {
-    /** @default document.body */
-    $wrapper?: HTMLElement;
-    onClick?:  ( notification: Notification ) => void;
-    /**
-     * In second
-     * @default 5
-    */
-    autoCloseDelay?: number;
-    templates?: {
-        /** @default <div class="notifications"><div class="list"></div></div> */
-        notifications: string;
-        /** @default <div class="notification"></div> */
-        notification : string;
-    };
-    selectors?: {
-        /** @default .notifications */
-        notifications?: string;
-        /** @default .notification */
-        notification?:  string;
-        /** @default .list */
-        list?:          string;
-    };
-    cssClass?: {
-        /** @default open */
-        open?:    string;
-        /** @default success */
-        success?: string;
-        /** @default danger */
-        danger?:  string;
-        /** @default warning */
-        warning?: string;
-        /** @default info */
-        info?:    string;
-    };
-    animations?: {
-        show?: ( $notification, options ) => Promise
-        hide?: ( $notification, options ) => Promise
-    };
-}
+        type Options = {
+            /** @defaultValue document.body */
+            $wrapper: HTMLElement;
+            onClick:  ( notification ) => void;
+            /**
+             * In second
+             * @defaultValue 5
+            */
+            autoCloseDelay: number;
+            templates: {
+                /** @defaultValue <div class="notifications"><div class="list"></div></div> */
+                notifications: string;
+                /** @defaultValue <div class="notification"></div> */
+                notification : string;
+            };
+            selectors: {
+                /** @defaultValue .notifications */
+                notifications: string;
+                /** @defaultValue .notification */
+                notification:  string;
+                /** @defaultValue .list */
+                list:          string;
+            };
+            cssClass: {
+                /** @defaultValue open */
+                open:    string;
+                /** @defaultValue success */
+                success: string;
+                /** @defaultValue danger */
+                danger:  string;
+                /** @defaultValue warning */
+                warning: string;
+                /** @defaultValue info */
+                info:    string;
+            };
+            animations: {
+                show: ( $notification, options ) => Promise<any>
+                hide: ( $notification, options ) => Promise<any>
+            };
+        }
 
-type NotificationOptionsType = {
-    closeDelay?: number | false;
-    onClick?:    ( e: Event ) => void;
+        type NotificationOptions = {
+            closeDelay?: number | false;
+            onClick?:    ( e: Event ) => void;
+        }
+    }
 }

package/Types/Popin.d.ts

@@ -0,0 +1,113 @@
+declare namespace FLib {
+    namespace Popin {
+        type AnimationFunction = ( $element: HTMLElement ) => Promise<void>;
+        type ResponseType          = 'arrayBuffer' | 'blob' | 'json' | 'text' | 'formData';
+
+        interface Controller {
+            load( url: string, data: RequestInit, type?: FLib.Popin.ResponseType ): Promise<void>
+            loadForm( $form: HTMLFormElement ):      Promise<void>
+            loadLink( $link: HTMLAnchorElement ):    Promise<void>
+            set( html: string, openFirst?: boolean ): Promise<void>
+            clear():                                void;
+            close():                                Promise<void>;
+            open():                                 Promise<void>;
+            destroy():                              this;
+        }
+
+        interface Background {
+            isOpened:  boolean;
+            open():    Promise<any>;
+            close():   Promise<any>;
+            destroy(): void;
+        }
+
+        interface TemplatesOptions {
+            /** @defaultValue `<div class="popin-loader"></div>` */
+            popinLoader:  string;
+            /** @defaultValue `<div class="popin"><div class="popin-content"></div></div>` */
+            popin:        string;
+            /** @defaultValue `<div class="bg-popin"></div>` */
+            bgLayer:      string;
+            /** @defaultValue `"<div class="error">{{ message }}</div>"` */
+            errorMessage: string;
+        }
+
+        interface SelectorsOptions {
+            /** @defaultValue .popin */
+            popin:               string;
+            /** @defaultValue .popin-content */
+            popinContent:        string;
+            /** @defaultValue a[data-popin] */
+            links:               string;
+            /** @defaultValue form[data-popin] */
+            forms:               string;
+            /** @defaultValue button[data-close-popin] */
+            btClosePopin:        string;
+            /** @defaultValue data-onload-popin */
+            openOnLoadAttribute: string;
+        }
+
+        interface AnimationsOptions {
+            /** @defaultValue `$bg => { $bg.style.display = 'block'; return Promise.resolve(); }` */
+            openBg:        AnimationFunction;
+            /** @defaultValue `$bg => { $bg.style.display = 'none'; return Promise.resolve(); }` */
+            closeBg:       AnimationFunction;
+            /** @defaultValue `$popin => { $popin.style.display = 'block'; $popin.style.opacity = 0; return Promise.resolve(); }` */
+            initOpenPopin: AnimationFunction;
+            /** @defaultValue `$popin => { $popin.style.opacity = 1; return Promise.resolve(); }` */
+            openPopin:     AnimationFunction;
+            /** @defaultValue `$popin => { $popin.style.display = 'none'; return Promise.resolve(); }` */
+            closePopin:    AnimationFunction;
+            /** @defaultValue `$loader => { $loader.style.display = 'block'; return Promise.resolve(); }` */
+            openLoader:    AnimationFunction;
+            /** @defaultValue `$loader => { $loader.style.display = 'none'; return Promise.resolve(); }` */
+            closeLoader:   AnimationFunction;
+        }
+
+        interface Options {
+            /** @defaultValue false */
+            modal:             boolean;
+            /** @defaultValue 20 */
+            marginHeight:      number;
+            /** @defaultValue false */
+            autoResize:        boolean;
+            /** @defaultValue "Error while loading.." */
+            errorMessage:      string;
+            /** @defaultValue true */
+            enableKeyboard:    boolean;
+            onOpen?:            ( $popin: HTMLElement ) => void;
+            onClose?:           ( $popin: HTMLElement ) => void;
+            onLoad:             ( $popin: HTMLElement ) => Promise<void>;
+            /** @defaultValue `() => 'text'` */
+            setLinkResponseType: ( url: string, $link: HTMLAnchorElement ) => ResponseType;
+            /** @defaultValue `() => 'text'` */
+            setFormResponseType: ( $form: HTMLElement ) => ResponseType;
+            /** @defaultValue `() => true` */
+            checkValidity:       ( $form: HTMLElement ) => boolean | Promise<void>;
+            /** @defaultValue `(body) => { return { success: true, data: body }`  */
+            normalize:           ( body, response, isHttpError: boolean ) => { success: boolean, data };
+            /**
+             * If false, ajax http error (404, 500, ...) should be handled in the normalize function
+             * @defaultValue true
+            */
+            autoHandleAjaxError: boolean;
+            templates:           TemplatesOptions;
+            selectors:           SelectorsOptions;
+            animations:          AnimationsOptions;
+        }
+
+
+        interface ControllerOptions {
+            controller: Controller;
+            background: Background;
+        }
+
+
+        interface OptionsInit extends Partial<Options> {
+            templates?:           Partial<TemplatesOptions>;
+            selectors?:           Partial<SelectorsOptions>;
+            animations?:          Partial<AnimationsOptions>;
+
+        }
+    }
+}

package/Types/ScrollSnap.d.ts

@@ -0,0 +1,66 @@
+declare namespace FLib {
+    namespace ScrollSnap {
+        type SnapType = 'scroll' | 'api';
+
+        type DirectionType = 'h' | 'v';
+
+        type ScrollPropertyType = 'scrollLeft' | 'scrollTop';
+
+        type SizePropertyType = 'scrollWidth' | 'scrollHeight';
+
+
+        type Item = {
+            coord:   number;
+            index:   number;
+            isFirst: boolean;
+            isLast:  boolean;
+            $item:   HTMLElement;
+        }
+
+        type ScrollToCallback  = ( snapItem: Item, snapItemType: SnapType ) => void;
+        type Callback          = ( item: CallbackParam ) => void;
+
+        type CallbackParam = {
+            $scroller:    HTMLElement;
+            snapItem:     Item;
+            /** If the event comes after a scroll: scroll. If it comes after a function call (like next, previous, ...): api. */
+            type:         SnapType;
+            scrollerSize: number;
+            offsetSize:   number;
+        }
+
+        type RefreshOption = {
+            /** Selector or DOMList of the items */
+            snapTo?:         string | NodeList;
+            /** Item to put on the left */
+            $itemToSnapOn?:  HTMLElement;
+            $offsetElement?: HTMLElement;
+            offset?: {
+                top?:        number;
+                left?:       number;
+            };
+            direction?:      DirectionType;
+        }
+
+        type Options = {
+            /** @defaultValue locked */
+            lockedClass?:        string;
+            /** @defaultValue 2 */
+            minItemsToActivate?: number;
+            /** @defaultValue h */
+            direction?:          DirectionType;
+            /** Internal function using GSAP and scrollTo plugin to set the scroll. Can be override to use another library */
+            _setScroll?:         ( $scroller: HTMLElement, x: number, y: number ) => void;
+            $offsetElement?:     HTMLElement;
+            offset?: {
+                top?:            number;
+                left?:           number;
+            };
+            onSnapStart?:        Callback;
+            onSnapEnd?:          Callback;
+            onReachStart?:       Callback;
+            onReachEnd?:         Callback;
+            snapTo?:             string | NodeList;
+        }
+    }
+}

package/Types/SkinCheckbox.d.ts

@@ -0,0 +1,35 @@
+declare namespace FLib {
+    namespace SkinCheckbox {
+        interface SkinCheckbox {
+            check():      this;
+            uncheck():    this;
+            enable():     this;
+            disable():    this;
+            setInvalid(): this;
+            setValid():   this;
+        }
+
+        type Options = {
+            /** @defaultValue <span class="cb-skin"></span> */
+            wrap:          string;
+            /** @defaultValue invalid */
+            invalidClass:  string;
+            /** @defaultValue disabled */
+            disabledClass: string;
+            /** @defaultValue checked */
+            checkedClass:  string;
+        }
+
+        type AllOptions = Options & {
+            selector: string;
+        }
+
+        type CustomCheckbox = HTMLInputElement & {
+            __skinAPI?: SkinCheckbox
+        }
+
+        type CustomCheckboxParent = HTMLElement & {
+            __skinAPI?: SkinCheckbox
+        }
+    }
+}

package/Types/SkinFile.d.ts

@@ -0,0 +1,45 @@
+declare namespace FLib {
+    namespace SkinFile {
+        interface SkinFile {
+            enable():     this;
+            disable():    this;
+            setInvalid(): this;
+            setValid():   this;
+        }
+
+        type Options = {
+            /** @defaultValue .file-skin */
+            selector:             string;
+            /** @defaultValue <div class="file-skin"></div> */
+            wrap:                 string;
+            /** @defaultValue .file-info */
+            fileInfoSelector:     string;
+            /** @defaultValue <div class="file-info"></div> */
+            fileInfo:             string;
+            /** @defaultValue true */
+            autoHideFileInfo:     boolean;
+            /** @defaultValue .file-reset */
+            resetButtonSelector:  string;
+            /** @defaultValue <span class="file-reset">&times;</span> */
+            resetButton:          string;
+            /** @defaultValue disabled */
+            disabledClass:        string;
+            /** @defaultValue invalid */
+            invalidClass:         string;
+            /** @defaultValue selected */
+            selectedClass:        string;
+        }
+
+        type AllOptions = Options & {
+            selector: string;
+        }
+
+        type CustomInputFile = HTMLInputElement & {
+            __skinAPI?: SkinFile
+        }
+
+        type CustomInputFileParent = HTMLElement & {
+            __skinAPI?: SkinFile
+        }
+    }
+}

package/Types/SkinRadio.d.ts

@@ -0,0 +1,37 @@
+declare namespace FLib {
+    namespace SkinRadio {
+        interface SkinRadio {
+            check():      this;
+            uncheck():    this;
+            enable():     this;
+            disable():    this;
+            setInvalid(): this;
+            setValid():   this;
+        }
+
+        type Options = {
+            /** @defaultValue <span class="rb-skin"></span> */
+            wrap:          string;
+            /** @defaultValue invalid */
+            invalidClass:  string;
+            /** @defaultValue disabled */
+            disabledClass: string;
+            /** @defaultValue checked */
+            checkedClass:  string;
+        }
+
+        type AllOptions = Options & {
+            selector: string;
+        }
+
+        type CustomRadioButton = HTMLInputElement & {
+            __skinAPI?:  SkinRadioButton;
+            __$radioGroup?: NodeListOf<CustomRadioButton>;
+        }
+
+        type CustomRadioButtonParent = HTMLElement & {
+            __skinAPI?:  SkinRadioButton;
+            __$radioGroup?: NodeListOf<CustomRadioButton>;
+        }
+    }
+}

package/Types/SkinSelect.d.ts

@@ -0,0 +1,72 @@
+declare declare namespace FLib {
+    namespace SkinSelect {
+        interface SkinSelect {
+            enable():     this;
+            disable():    this;
+            setInvalid(): this;
+            setValid():   this;
+            setLoading(): this
+            unsetLoading(): this
+            updateTitle(): this
+            select( optionOrIndex: HTMLElement | number ): this
+            updateOptions( optionsArray?: FLib.SkinSelect.OptionArray[] ): this
+        }
+
+
+        type Options = {
+            /**
+             * If true, skin event the option list
+             * @defaultValue false
+            */
+            full:                boolean;
+            /** @defaultValue [] */
+            extraClass:          string[];
+            /** @defaultValue select-skin */
+            className:           string;
+            /** @defaultValue select-itm */
+            itemClassName:       string;
+            /** @defaultValue select */
+            selectWrapClassName: string;
+            /** @defaultValue select-layer */
+            layerClassName:      string;
+            /** @defaultValue select-list */
+            listClassName:       string;
+            /** @defaultValue hover */
+            hoverItemClass:      string;
+            /** @defaultValue show */
+            openedListClass:     string;
+            /** @defaultValue on */
+            activeOptionClass:   string;
+            /** @defaultValue disabled */
+            disabledClass:       string;
+            /** @defaultValue invalid */
+            invalidClass:        string;
+            /** @defaultValue loading */
+            loadingClass:        string;
+            listTpl: {
+                /** @defaultValue `<div class="{{ layerClassName }}"><ul class="{{ listClassName }}">{{ items }}</ul></div>` */
+                wrapper: string;
+                /** @defaultValue `<li class="{{ itemClassName }}{{ onClass }}" data-value="{{ value }}">{{ text }}</li>` */
+                item:    string;
+            };
+        }
+
+        type AllOptions = Options & {
+            selector: string;
+        }
+
+        type CustomSelect = HTMLSelectElement & {
+            __skinAPI?:  SkinSelect;
+        }
+
+        type CustomSelectParent = HTMLElement & {
+            __skinAPI?:  SkinSelect;
+        }
+
+        type OptionArray = {
+            text:      string;
+            value:     string;
+            selected?: boolean;
+        }
+    }
+}