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

package/Modules/Popin/PopinBackground.ts

@@ -8,26 +8,26 @@ export default class PopinBackground {
 
     #$bgLayer: HTMLElement;
     #isOpened: boolean;
-    #options:  PopinOptionsType;
+    #options:  FLib.Popin.Options;
     #popin:    Popin | PopinController;
 
 
-    get isOpened() {
+    get isOpened(): boolean {
         return this.#isOpened;
     }
 
 
-    constructor( popin: Popin | PopinController, options: PopinOptionsType ) {
+    constructor( popin: Popin | PopinController, options: FLib.Popin.Options ) {
         this.#isOpened = false;
         this.#popin    = popin;
         this.#options  = options;
-        this.#$bgLayer = strToDOM( options.templates!.bgLayer! ) as HTMLElement;
+        this.#$bgLayer = strToDOM( options.templates.bgLayer ) as HTMLElement;
 
         document.body.appendChild( this.#$bgLayer );
     }
 
 
-    open() {
+    open(): Promise<any> {
         if ( this.#isOpened ) {
             return Promise.resolve();
         }
@@ -36,13 +36,13 @@ export default class PopinBackground {
             this.#$bgLayer.addEventListener( CLICK_EVENT_NAME, this.#onBgClick );
         }
 
-        return this.#options.animations!.openBg!( this.#$bgLayer ).then( () => {
+        return this.#options.animations.openBg( this.#$bgLayer ).then( () => {
             this.#isOpened = true;
         } );
     }
 
 
-    close() {
+    close(): Promise<any> {
         if ( !this.#isOpened ) {
             return Promise.resolve();
         }
@@ -51,18 +51,18 @@ export default class PopinBackground {
             this.#$bgLayer.removeEventListener( CLICK_EVENT_NAME, this.#onBgClick );
         }
 
-        return this.#options.animations!.closeBg!( this.#$bgLayer ).then( () => {
+        return this.#options.animations.closeBg( this.#$bgLayer ).then( () => {
             this.#isOpened = false;
         } );
     }
 
 
-    #onBgClick = () => {
+    #onBgClick = (): void => {
         this.#popin.close();
     }
 
 
-    destroy() {
+    destroy(): void {
         this.#$bgLayer.removeEventListener( CLICK_EVENT_NAME, this.#onBgClick );
-    };
+    }
 }

package/Modules/Popin/PopinController.ts

@@ -7,7 +7,6 @@ import { CLICK_EVENT_NAME, defaultOptions, toggleTabIndex } from './Tools';
 
 /**
  * Create a controller tha manage all popin in the page
- * @class PopinController
  *
  * @see extra/modules/popin.md for details.
  *
@@ -16,13 +15,13 @@ import { CLICK_EVENT_NAME, defaultOptions, toggleTabIndex } from './Tools';
  * popin.loadForm( $form );
  */
 export default class PopinController {
-    #options:    PopinOptionsType;
-    #selectors:  PopinSelectorsOptionsType;
+    #options:    FLib.Popin.Options;
+    #selectors:  FLib.Popin.SelectorsOptions;
     #background: PopinBackground;
     #popin:      Popin;
 
 
-    constructor( userOptions: PopinOptionsType = {}, $popin?: HTMLElement ) {
+    constructor( userOptions: FLib.Popin.OptionsInit = {}, $popin?: HTMLElement ) {
 
         if ( !( "AbortController" in window ) ) {
             throw 'This plugin uses fecth and AbortController. You may need to add a polyfill for this browser.';
@@ -30,7 +29,7 @@ export default class PopinController {
 
         this.#options = extend( defaultOptions, userOptions );
 
-        this.#selectors = this.#options.selectors!;
+        this.#selectors = this.#options.selectors;
 
         // global var, only one background for all popin
         this.#background = new PopinBackground( this, this.#options );
@@ -74,18 +73,18 @@ export default class PopinController {
 
             } );
 
-        let $triggerOnLoadPopin = document.querySelector( `[${ this.#selectors.openOnLoadAttribute }]` );
+        const $triggerOnLoadPopin = document.querySelector( `[${ this.#selectors.openOnLoadAttribute }]` );
 
         if ( $triggerOnLoadPopin ) {
-            this.parseElement(
+            this.#parseElement(
                 $triggerOnLoadPopin as HTMLElement,
-                $triggerOnLoadPopin.getAttribute( this.#selectors.openOnLoadAttribute! )
+                $triggerOnLoadPopin.getAttribute( this.#selectors.openOnLoadAttribute )
             );
         }
     }
 
 
-    private parseElement( $dom: HTMLElement, customUrl?: string | null ): Promise<void> {
+    #parseElement = ( $dom: HTMLElement, customUrl?: string | null ): Promise<void> => {
         if ( customUrl ) {
             return this.#popin.load( customUrl );
         }
@@ -105,62 +104,55 @@ export default class PopinController {
 
 
 
-    #openPopinHandler = ( e ) => {
+    #openPopinHandler = ( e: Event): void => {
         e.preventDefault();
 
-        this.parseElement( e.target );
+        this.#parseElement( e.target as HTMLElement );
     }
 
 
     /**
      * Load a file and display it in the popin
      *
-     * @param url
      * @param data - All parameters available for window.fetch
-     * @param [type=text]
      */
-    load( url: string, data: RequestInit, type?: PopinResponseType ): Promise<void> {
+    load( url: string, data: RequestInit, type?: FLib.Popin.ResponseType ): Promise<void> {
         return this.#popin.load( url, data, type );
-    };
+    }
 
 
     /**
      * Send a form and display the result it in the popin
-     *
-     * @param $form
      */
     loadForm( $form: HTMLFormElement ): Promise<void> {
         return this.#popin.loadForm( $form );
-    };
+    }
 
 
     /**
      * Load a page from a link and display the result it in the popin
-     *
-     * @param $link
      */
     loadLink( $link: HTMLAnchorElement ): Promise<void> {
         return this.#popin.loadLink( $link );
-    };
+    }
 
 
     /**
      * Insert some html in the popin and open it
      *
-     * @param html
      * @param openFirst - Open the popin THEN insert the html
      */
     set( html: string, openFirst?: boolean ): Promise<void> {
         return this.#popin.set( html, openFirst );
-    };
+    }
 
 
     /**
      * Remove the content of the popin
      */
-    clear() {
+    clear(): void {
         return this.#popin.clear();
-    };
+    }
 
 
     /**
@@ -168,7 +160,7 @@ export default class PopinController {
      */
     close(): Promise<void> {
         return this.#popin.close();
-    };
+    }
 
 
     /**
@@ -176,13 +168,13 @@ export default class PopinController {
      */
     open(): Promise<void> {
         return this.#popin.open();
-    };
+    }
 
 
     /**
      * Remove all events, css class or inline styles
      */
-    destroy() {
+    destroy(): this {
         this.#background.destroy();
         this.#popin.destroy();
 
@@ -193,6 +185,8 @@ export default class PopinController {
                 "callback":   this.#openPopinHandler
             }
         );
-    };
+
+        return this;
+    }
 
 }

package/Modules/Popin/Tools.ts

@@ -1,13 +1,12 @@
 
 export const FOCUSABLE_ELEMENTS_SELECTOR = 'a,button,input,select,textarea';
 
-export function toggleTabIndex( $elements, $popin, activate ) {
-    let tabIndex;
+export function toggleTabIndex( $elements: NodeListOf<HTMLElement> | undefined | null, $popin: HTMLElement, activate: boolean ): void {
     $elements = $elements || $popin.querySelectorAll( FOCUSABLE_ELEMENTS_SELECTOR );
-    tabIndex = activate ? '0' : '-1';
+    const tabIndex = activate ? '0' : '-1';
     $elements.forEach( e => e.setAttribute( 'tabindex', tabIndex ) );
     $popin.setAttribute( 'tabindex', tabIndex );
-    $popin.setAttribute( 'aria-hidden', !activate );
+    $popin.setAttribute( 'aria-hidden', activate ? 'false' : 'true' );
 }
 
 export const CLICK_EVENT_NAME = window.matchMedia( '(hover: none)' ).matches ? 'touchend' : 'click';
@@ -18,19 +17,19 @@ export const defaultOptions = {
     "marginHeight": 20,
     "autoResize": false,
     "enableKeyboard": true,
-    "onLoad": () => {
+    "onLoad": (): Promise<any> => {
         return Promise.resolve();
     },
-    "setLinkResponseType": () => {
+    "setLinkResponseType": (): string => {
         return 'text';
     },
-    "setFormResponseType": () => {
+    "setFormResponseType": (): string => {
         return 'text';
     },
-    "checkValidity": () => {
+    "checkValidity": (): boolean => {
         return true;
     },
-    "normalize": body => {
+    "normalize": <V>( body: V ): { success: boolean, data: V } => {
         return {
             "success": true,
             "data": body
@@ -41,7 +40,7 @@ export const defaultOptions = {
         "popinLoader": "<div class=\"popin-loader\"></div>",
         "popin": "<div class=\"popin\"><div class=\"popin-content\"></div></div>",
         "bgLayer": "<div class=\"bg-popin\"></div>",
-        "errorMessage": "<div class=\"error\"><%= message %></div>"
+        "errorMessage": "<div class=\"error\">{{ message }}</div>"
     },
     "selectors": {
         "popin": ".popin",
@@ -52,32 +51,32 @@ export const defaultOptions = {
         "openOnLoadAttribute": "data-onload-popin"
     },
     "animations": {
-        "openBg": $bg => {
+        "openBg": ( $bg: HTMLElement ): Promise<any> => {
             $bg.style.display = 'block';
             return Promise.resolve();
         },
-        "closeBg": $bg => {
+        "closeBg": ( $bg: HTMLElement ): Promise<any> => {
             $bg.style.display = 'none';
             return Promise.resolve();
         },
-        "initOpenPopin": $popin => {
+        "initOpenPopin": ( $popin: HTMLElement ): Promise<any> => {
             $popin.style.display = 'block';
-            $popin.style.opacity = 0;
+            $popin.style.opacity = '0';
             return Promise.resolve();
         },
-        "openPopin": $popin => {
-            $popin.style.opacity = 1;
+        "openPopin": ( $popin: HTMLElement ): Promise<any> => {
+            $popin.style.opacity = '1';
             return Promise.resolve();
         },
-        "closePopin": $popin => {
+        "closePopin": ( $popin: HTMLElement ): Promise<any> => {
             $popin.style.display = 'none';
             return Promise.resolve();
         },
-        "openLoader": $loader => {
+        "openLoader": ( $loader: HTMLElement ): Promise<any> => {
             $loader.style.display = 'block';
             return Promise.resolve();
         },
-        "closeLoader": $loader => {
+        "closeLoader": ( $loader : HTMLElement): Promise<any> => {
             $loader.style.display = 'none';
             return Promise.resolve();
         }

package/Modules/QuickTemplate.ts

@@ -1,16 +1,14 @@
 /**
  * Simple template function based on string substitution
- * @function
- *
- * @param template
- * @param data
  *
  * @example
- * let HTML = quickTemplate( 'My name is { lastname }. { firstname} { lastname }.', { "firstname": "James", "lastname": "Bond" } );
+ * ```ts
+ * let HTML = quickTemplate( 'My name is {{ lastname }}. {{ firstname }} {{ lastname }}.', { "firstname": "James", "lastname": "Bond" } );
+ * ```
  */
 export default function quickTemplate( template: string, data: { [ key: string ]: string } ): string {
     Object.keys( data ).forEach( key => {
-        template = template.replace( new RegExp( `{\\s*${ key }\\s*}`, 'g' ), data[ key ] );
+        template = template.replace( new RegExp( `{{\\s*${ key }\\s*}}`, 'g' ), data[ key ] );
     } );
 
     return template;