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

package/Helpers/Type.ts

@@ -6,9 +6,6 @@ const CORE_HAS_OWN   = CLASS_TO_TYPE.hasOwnProperty;
 /**
  * Check the type of an object
  *
- * @param obj
- * @param type
- *
  * @example
  * boolean = isType( obj, 'String' )
  *
@@ -22,8 +19,6 @@ export function isType( obj: any, type: string ): boolean {
 /**
  * Return true if the objec is an Array
  *
- * @param obj
- *
  * @example
  * boolean = isArray( obj )
  */
@@ -35,8 +30,6 @@ export function isArray( obj: any ): boolean {
 /**
  * Return true if the object is a Function
  *
- * @param obj
- *
  * @example
  * boolean = isFunction( obj )
  */
@@ -48,8 +41,6 @@ export function isFunction( obj: any ): boolean {
 /**
  * Return true if the object is a String
  *
- * @param obj
- *
  * @example
  * boolean = isString( obj )
  */
@@ -61,8 +52,6 @@ export function isString( obj: any ): boolean {
 /**
  * Return true if the object is a Number
  *
- * @param obj
- *
  * @example
  * boolean = isNumber( obj )
  */
@@ -82,9 +71,7 @@ export function isNumber( obj: any ): boolean {
 
 
 /**
- * Return true if obj is {} or an object created with "new Object"
- *
- * @param obj
+ * Return true if obj is `{}` or an object created with "new Object"
  */
 export function isPlainObject( obj: any ): boolean {
     // Detect obvious negatives

package/Helpers/Unique.ts

@@ -1,16 +1,16 @@
 /**
  * Remove all duplicate from a list. Doesn't change the original list.
  *
- * @param list
- * @param filter - Optionnal, (currentItem, returnArray) => { should return true or false }
+ * @param filter - Optionnal, (currentItem, returnArray) => `{` should return true or false `}`
  *
  * @example
+ * ```ts
  * // Using the native includes function
  * modifiedArray = unique( array )
  *
- * @example
  * // With custom function (here, same as default behaviour)
  * modifiedArray = unique( array, (currentValue, returnArray) => { return !returnArray.includes(currentValue) } )
+ * ```
  *
  * @returns Filtered list
  */

package/Helpers/UrlParser.ts

@@ -1,9 +1,8 @@
 /**
  * Parse an URL
  *
- * @param url
- *
  * @example
+ * ```ts
  * let url = new UrlParser( 'https://username:password@demo.domain.com:1337/section/page.html?param=1&param=2#anchor' );
  *
  * // Update the anchor and regenerate url
@@ -32,6 +31,7 @@
  *
  * // Remove all query param
  * url.removeAll()
+ * ```
  */
 export class UrlParser {
     /** Complete url without userInfo and anchor. Ex: https://demo.domain.com:1337/section/page.html?param=2 */
@@ -40,7 +40,7 @@ export class UrlParser {
     absolute2    = '';
     /** Ex: anchor */
     anchor       = '';
-    /** Ex: username:password@demo.domain.com:1337 */
+    /** Ex: username:password\@demo.domain.com:1337 */
     authority    = '';
     /** Ex: /section/ */
     directory    = '';
@@ -63,8 +63,8 @@ export class UrlParser {
     protocol     = '';
     /** Ex: param=2 */
     query        = '';
-    /** Ex: { "param": "2" } */
-    queryKey: { [ key: string ]: string }     = {};
+    /** Ex: `{` "param": "2" `}` */
+    queryKey: Record<string, string>     = {};
     /** Ex: Url without host, credential and anchor */
     relative     = '';
     /** Ex: Url without host, credential but with anchor */
@@ -89,7 +89,7 @@ export class UrlParser {
     /*
         Rebuild the complete url
     */
-    private rebuild() {
+    #rebuild = (): void => {
         let portToAdd, queryToAdd;
 
         queryToAdd = '';
@@ -162,7 +162,7 @@ export class UrlParser {
     /**
      * Init
      */
-    init( url: string ) {
+    init( url: string ): void {
         let location, result;
 
         const parseUri = function( str: string ) {
@@ -240,19 +240,17 @@ export class UrlParser {
             this[ key ] = result[ key ];
         } );
 
-        this.rebuild();
+        this.#rebuild();
     }
 
 
     /**
      * Change the anchor
-     *
-     * @param anchor
      */
     setAnchor( anchor: string ): this {
         this.anchor = anchor;
 
-        this.rebuild();
+        this.#rebuild();
 
         return this;
     }
@@ -261,8 +259,6 @@ export class UrlParser {
     /**
      * Get the value of a query param
      *
-     * @param key
-     *
      * @returns The parameter value or undefined
      */
     getParam( key: string ): string {
@@ -276,11 +272,8 @@ export class UrlParser {
 
     /**
      * Add/modify one or several query param
-     *
-     * @param keys
-     * @param value
      */
-    setParam( keys: string | { [ keys: string ]: string }, value?: string ): this {
+    setParam( keys: string | Record<string, string>, value?: string ): this {
         if ( !this.queryKey ) {
             this.queryKey = {};
         }
@@ -294,7 +287,7 @@ export class UrlParser {
             } );
         }
 
-        this.rebuild();
+        this.#rebuild();
 
         return this;
     }
@@ -302,8 +295,6 @@ export class UrlParser {
 
     /**
      * Remove one or several query param
-     *
-     * @param keys
      */
     removeParam( keys: string | string[] ): this {
         if ( !this.queryKey ) {
@@ -319,7 +310,7 @@ export class UrlParser {
             } );
         }
 
-        this.rebuild();
+        this.#rebuild();
 
         return this;
     }
@@ -331,7 +322,7 @@ export class UrlParser {
     removeAll(): this {
         this.queryKey = {};
 
-        this.rebuild();
+        this.#rebuild();
 
         return this;
     }

package/Helpers/Wait.ts

@@ -1,6 +1,6 @@
 /**
  * Return a promise and wait for 'waitFor' millisecond to resolve it.
- * If 'waitFor' < 0 => wait for an animation frame
+ * If 'waitFor' &lt; 0 =&gt; wait for an animation frame
  *
  * @param waitFor - Number in ms or 'idle'
  *

package/Modules/Accordion/Tab.ts

@@ -13,7 +13,7 @@ export default class Tab {
     #$TAB;
 
 
-    constructor( $TAB: HTMLElement, options: AccordionTabOptionsType ) {
+    constructor( $TAB: HTMLElement, options: FLib.Accordion.TabOptions ) {
         this.#options     = options;
         this.#$TAB        = $TAB ;
 
@@ -28,17 +28,17 @@ export default class Tab {
         } );
 
         if ( this.#isOpen ) {
-            this.openTab( true );
+            this.#openTab( true );
         }
     }
 
 
-    private changeTabState() {
+    #changeTabState = (): void => {
         this.#$TAB.setAttribute( 'aria-expanded', this.#isOpen ? 'true' : 'false' );
     }
 
 
-    private openTab( isOpenAtStart?: boolean ) {
+    #openTab = ( isOpenAtStart?: boolean ): void => {
         this.#options.animations
                     .open( this.#$TAB, this.#$TAB_PANNEL )
                     .then( () => {
@@ -55,11 +55,11 @@ export default class Tab {
             this.#options.onOpenTab( this );
         }
         this.#isOpen = true;
-        this.changeTabState();
+        this.#changeTabState();
     }
 
 
-    private closeTab( autoClose?: boolean ) {
+    #closeTab = ( autoClose?: boolean ): void => {
         this.#options.animations
                     .close( this.#$TAB, this.#$TAB_PANNEL )
                     .then( () => {
@@ -69,32 +69,32 @@ export default class Tab {
                     } );
 
         this.#isOpen = false;
-        this.changeTabState();
+        this.#changeTabState();
     }
 
 
-    #toggleTab = ( e: Event ) => {
+    #toggleTab = ( e: Event ): void => {
         e.preventDefault();
 
         if( this.#isOpen && ( !this.#options.atLeastOneOpen || this.#options.allowMultipleTab ) ) {
-            this.closeTab();
+            this.#closeTab();
         }
         else if( !this.#isOpen ) {
-            this.openTab();
+            this.#openTab();
         }
     }
 
 
-    close( autoClose?: boolean ) {
-        if( !this.#isOpen ) {
-            return;
+    close( autoClose?: boolean ): this {
+        if( this.#isOpen ) {
+            this.#closeTab( autoClose );
         }
 
-        this.closeTab( autoClose );
+        return this;
     }
 
 
-    destroy() {
+    destroy(): this {
         this.#options.animations.destroy( this.#$TAB, this.#$TAB_PANNEL );
 
         off( this.#$TAB, {
@@ -103,5 +103,7 @@ export default class Tab {
         } );
 
         this.#$TAB.setAttribute( 'aria-expanded', this.#originalOpenedState ? 'true' : 'false' );
-    };
+
+        return this;
+    }
 }

package/Modules/Accordion/index.ts

@@ -3,7 +3,7 @@ import { extend }               from '../../Helpers/Extend';
 import Tab                      from './Tab';
 
 
-const DEFAULT_OPTIONS: AccordionOptionsType = {
+const DEFAULT_OPTIONS = {
     "tabSelector":      "button[aria-expanded]",
     "allowMultipleTab": false,
     "atLeastOneOpen":   false,
@@ -31,6 +31,7 @@ const DEFAULT_OPTIONS: AccordionOptionsType = {
  * Accordion
  *
  * @example
+ * ```ts
  * new Accordion( document.querySelector( '.accordion' ), {
  *      "tabSelector":     ".tab",
  *      "allowMultipleTab": false,
@@ -62,9 +63,11 @@ const DEFAULT_OPTIONS: AccordionOptionsType = {
  *          console.log( 'close: ', $tab, $panel );
  *      }
  *  } );
+ * ```
  *
  * HTML:
  *
+ * ```html
  * <div class="accordion">
  *     <button aria-expanded="true" class="tab" aria-controls="panel-1">Button name</button>
  *     <div id="panel-1" class="panel">
@@ -76,12 +79,13 @@ const DEFAULT_OPTIONS: AccordionOptionsType = {
  *        <p>Content</p>
  *     </div>
  * </div>
+ * ```
  *
  * Set aria-expanded to "true" on the tab you want open at start
  */
 export default class Accordion {
-    #options:       AccordionOptionsType;
-    #$tabs:         NodeList;
+    #options:       FLib.Accordion.Options;
+    #$tabs:         NodeListOf<HTMLElement>;
     #tablist:       Tab[];
     #status:        string;
     #lastOpenedTab: Tab | null = null;
@@ -91,7 +95,7 @@ export default class Accordion {
     #STATUS_OFF = 'STATUS_OFF';
 
 
-    constructor( $accordionWrapper: HTMLElement, userOptions: AccordionOptionsType ) {
+    constructor( $accordionWrapper: HTMLElement, userOptions: FLib.Accordion.OptionsInit ) {
 
         this.#options       = extend( DEFAULT_OPTIONS, userOptions );
 
@@ -99,11 +103,11 @@ export default class Accordion {
         this.#tablist       = [];
         this.#status        = this.#STATUS_OFF;
 
-        this.on();
+        this.#on();
     }
 
 
-    #onOpenTab = ( tab: Tab ) => {
+    #onOpenTab = ( tab: Tab ): void => {
         if ( this.#lastOpenedTab ) {
             this.#lastOpenedTab.close( true );
         }
@@ -112,7 +116,7 @@ export default class Accordion {
     }
 
 
-    private on(){
+    #on = (): void => {
         if( this.#status === this.#STATUS_ON ){
             return;
         }
@@ -120,7 +124,7 @@ export default class Accordion {
         this.#status = this.#STATUS_ON;
 
         this.#$tabs.forEach( ( $tab, index ) => {
-            this.#tablist.push( new Tab( $tab as HTMLElement, {
+            this.#tablist.push( new Tab( $tab, {
                 ...this.#options,
                 index,
                 "onOpenTab": this.#options.allowMultipleTab ? null : this.#onOpenTab
@@ -129,7 +133,7 @@ export default class Accordion {
     }
 
 
-    private off() {
+    #off = (): void => {
         if( this.#status === this.#STATUS_OFF ){
             return;
         }
@@ -147,16 +151,20 @@ export default class Accordion {
     /**
      * Remove all events, css class, ...
      */
-    destroy() {
-        this.off();
-    };
+    destroy(): this {
+        this.#off();
+
+        return this;
+    }
 
 
     /**
      * Restart the module
      */
-    update() {
-        this.off();
-        this.on();
-    };
+    update(): this {
+        this.#off();
+        this.#on();
+
+        return this;
+    }
 }