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

package/Types/GLImageTransition.d.ts

@@ -1,47 +1,51 @@
-type GLImageTransitionFitType  = 'cover' | 'contains';
+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 @@
+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,30 @@
+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;
+            }
+        }
+    }
+}

package/Types/Notifications.d.ts

@@ -1,47 +1,51 @@
-type NotificationType =  'info' | 'success' | 'warning' | 'danger';
+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
+                hide: ( $notification, options ) => Promise
+            };
+        }
 
-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,95 @@
+namespace FLib {
+    namespace Popin {
+        type AnimationFunction = ( $element: HTMLElement ) => Promise<void>;
+        type ResponseType          = 'arrayBuffer' | 'blob' | 'json' | 'text' | 'formData';
+
+        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 @@
+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,26 @@
+namespace FLib {
+    namespace SkinCheckbox {
+        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,38 @@
+namespace FLib {
+    namespace SkinFile {
+        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,28 @@
+namespace FLib {
+    namespace SkinRadio {
+        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,59 @@
+namespace FLib {
+    namespace SkinSelect {
+        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;
+        }
+    }
+}

package/Types/Slider.d.ts

@@ -0,0 +1,106 @@
+namespace FLib {
+    namespace Slider {
+        type SlideDirection = -1 | 1;
+
+        type SlideProperties = {
+            $slide:     HTMLElement;
+            id:         string;
+            delay:      number;
+            index:      number;
+            position:   number;
+            isFirst:    boolean;
+            isLast:     boolean;
+            isVisible:  boolean;
+            isActive:   boolean;
+            page:       number;
+            pageIndex:  number;
+        }
+
+
+        type SlideOptions = {
+            nbSlideVisibleBefore: number;
+            nbSlideVisibleAfter:  number;
+            slidePerPage:         number;
+            moveByPage:           boolean;
+            nbSlides:             number;
+            nbPages:              number;
+            speed:                number;
+            $slide:               HTMLElement;
+            index:                number;
+            /** Internal function using GSAP to set CSS styles. Can be override to use another library */
+            _setStyle?:             ( $elem, styles ) => void;
+            /** Internal function using GSAP to tween element. Can be override to use another library */
+            _tweenTo?:              ( $elem, styles ) => void;
+            /** Internal function using GSAP to initialize and tween element. Can be override to use another library */
+            _tweenFromTo?:          ( $elem, init, styles  ) => void;
+            /** Internal function using GSAP to remove tweens from element. Can be override to use another library */
+            _killTweens?:           ( $elem ) => void;
+        }
+
+        type CallbackParam = {
+            currentSlide: SlideProperties;
+            targetSlide: SlideProperties;
+            direction?: SlideDirection;
+            $button?: HTMLElement
+        }
+        type Callback     = ( data: CallbackParam ) => void;
+        type InitCallback = ({ currentSlide: SlidePropertiesType }) => void;
+
+        type Options = {
+            /** @defaultValue 0 */
+            startSlide:             number;
+            /** @defaultValue 0 */
+            nbSlideVisibleBefore:   number;
+            /** @defaultValue 0 */
+            nbSlideVisibleAfter:    number;
+            /** @defaultValue 1 */
+            slidePerPage:           number;
+            /** @defaultValue true */
+            moveByPage:             boolean;
+            /** In second
+             * @defaultValue 0.5
+            */
+            speed:                  number;
+            /** @defaultValue true */
+            smoothHeight:           boolean;
+            /** @defaultValue .list */
+            listSelector:           string;
+            /** @defaultValue .item */
+            itemsSelector:          string;
+            /** @defaultValue active-slide */
+            activeClass:            string;
+            /** @defaultValue true*/
+            loop:                   boolean;
+            /** Called one time at the begining of the animation */
+            onBefore?:              Callback;
+            /** Called for every slide that will come in the 1st position during the animation */
+            onBeforeEach?:          Callback;
+            /** Called one time at the end of the animation */
+            onAfter?:               Callback;
+            /** Called for every slide that is came in the 1st position during the animation */
+            onAfterEach?:           Callback;
+            /** Called one time at the initialisation of the slider */
+            onStart?:               InitCallback;
+            /** Internal function using GSAP to set CSS styles. Can be override to use another library */
+            _setStyle:              ( $elem, styles ) => void;
+            /** Internal function using GSAP to tween element. Can be override to use another library */
+            _tweenTo:               ( $elem, styles ) => void;
+            /** Internal function using GSAP to initialize and tween element. Can be override to use another library */
+            _tweenFromTo:           ( $elem, init, styles  ) => void;
+            /** Internal function using GSAP to remove tweens from element. Can be override to use another library */
+            _killTweens:            ( $elem ) => void;
+        }
+
+        type ControlsOptions = {
+            $btPrev?:                 HTMLElement;
+            $btNext?:                 HTMLElement;
+            $pagination?:             HTMLElement;
+            paginationItemsSelector?: string;
+            /** In second */
+            autoslide?:               number | boolean;
+            swipe?:                   boolean;
+            enableKeyboard?:          boolean;
+            gestureOptions?:          FLib.Events.Gesture.Options;
+        }
+    }
+}