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

package/Events/TouchHover.ts

@@ -5,21 +5,18 @@ import { wait }                from '../Helpers/Wait';
 
 /**
  * Simulate hover (on touch) on mobile device. Touch a second time to follow the link.
- * @class
  *
- * @example new TouchHover( {
+ * @example
+ * ```ts
+ * new TouchHover( {
  *     "cssClass": 'hover',
  *     "selector": '.link',
  *     "$wrapper": $myWrapper
  * } );
- *
- * @param {Object} options
- * @param {String} options.cssClass
- * @param {String} options.selector
- * @param {HTMLEvent} options.$wrapper
+ * ```
  */
 export default class TouchHover {
-    #options:                 TouchHoverOptions ;
+    #options:                 FLib.Events.TouchHover.Options;
     #$lastElem:               Element | null = null;
     #hasClickOutsideListener: boolean;
 
@@ -29,7 +26,7 @@ export default class TouchHover {
     #clickOutsideHandlerName  = Symbol( 'touchhover2' );
 
 
-    constructor( options: TouchHoverOptions ) {
+    constructor( options: FLib.Events.TouchHover.Options ) {
         this.#options                 = options;
         this.#hasClickOutsideListener = false;
         this.#options.$wrapper        = this.#options.$wrapper || this.#$body;
@@ -40,7 +37,7 @@ export default class TouchHover {
 
         gesture( this.#options.$wrapper, this.#gestureHandlerName, {
             "selector":     this.#options.selector,
-            "end":          this.toggleClass.bind( this ),
+            "end":          this.#toggleClass.bind( this ),
             "preventClick": ( e, $target ) => {
                 return $target[ this.#hasBeenTouchedOnce ];
             }
@@ -48,7 +45,7 @@ export default class TouchHover {
     }
 
 
-    private onClickOutside( e, $target ) {
+    #onClickOutside = ( e: Event, $target: HTMLElement ): void => {
 
         if ( $target.closest( this.#options.selector ) ) {
             return;
@@ -58,20 +55,20 @@ export default class TouchHover {
 
         this.#hasClickOutsideListener = false;
 
-        this.removeClass();
+        this.#removeClass();
     }
 
 
-    private addClass( $target ) {
+    #addClass = ( $target: HTMLElement ): void => {
         $target[ this.#hasBeenTouchedOnce ] = true;
 
-        aClass( $target, this.#options.cssClass );
+        aClass( $target as HTMLElement, this.#options.cssClass );
         this.#$lastElem = $target;
 
         if ( !this.#hasClickOutsideListener ) {
             wait().then( () => {
                 gesture( this.#$body, this.#clickOutsideHandlerName, {
-                    "end": this.onClickOutside.bind( this )
+                    "end": this.#onClickOutside.bind( this )
                 } );
             } );
 
@@ -80,7 +77,7 @@ export default class TouchHover {
     }
 
 
-    private removeClass() {
+    #removeClass = (): void => {
         if ( this.#$lastElem ) {
             rClass( this.#$lastElem, this.#options.cssClass );
 
@@ -90,24 +87,24 @@ export default class TouchHover {
     }
 
 
-    private toggleClass( e, $target ) {
+    #toggleClass = ( e: Event, $target: HTMLElement ): void => {
         if ( $target !== this.#$lastElem ) {
-            this.removeClass();
+            this.#removeClass();
         }
 
         if ( $target[ this.#hasBeenTouchedOnce ] ) {
-            this.removeClass();
+            this.#removeClass();
             return;
         }
 
-        this.addClass( $target );
+        this.#addClass( $target );
     }
 
 
     /**
      * Remove all binded events
      */
-    destroy() {
+    destroy(): this {
         gestureOff( this.#options.$wrapper, this.#gestureHandlerName );
         gestureOff( this.#$body, this.#clickOutsideHandlerName );
 

package/Events/WindowEvents.ts

@@ -5,17 +5,16 @@ import { windowSize }   from '../DOM/WindowSize';
 
 /**
  * Window events handler
- * @class
  *
  * @example
- *
+ * ```ts
  * let w = new WindowEvents( window );
  *
- * or to change throttle delay :
+ * // or to change throttle delay :
  *
  * let w = new WindowEvents( window, 150 );
  *
- * let callback = ( { windowInfo, scrollInfo, documentInfo, viewportInfo }, type, event ) => {};
+ * let callback = ( { windowInfo, scrollInfo, documentInfo, viewportInfo }, type, event ) => {};
  *
  * w.register( callback, 'resize' ); // type = 'resize', 'scroll' or undefined for both
  * w.remove( callback, 'resize' );
@@ -34,6 +33,7 @@ import { windowSize }   from '../DOM/WindowSize';
  * { width, height } = w.windowInfo;
  * { width, height } = w.documentInfo;
  * { top, left, bottom, right, width, height } = w.viewportInfo;
+ * ```
  */
 export default class WindowEvents {
 
@@ -52,21 +52,21 @@ export default class WindowEvents {
     /**
      * Get the last stored scroll position
      */
-    get scrollInfo() {
+    get scrollInfo(): FLib.Events.WindowEvents.ScrollInfo {
         return this.#scrollInfo;
     }
 
     /**
      * Get the last stored window size
      */
-    get windowInfo() {
+    get windowInfo(): FLib.Events.WindowEvents.WindowInfo {
         return this.#windowInfo;
     }
 
     /**
      * Get the last stored document size
      */
-    get documentInfo() {
+    get documentInfo(): FLib.Events.WindowEvents.DocumentInfo {
         return this.#documentInfo;
     }
 
@@ -77,29 +77,29 @@ export default class WindowEvents {
      * The viewport is the displayed part of the document.<br>
      * So, its top and left are the scroll position and its width and height are the window size.<br>
      */
-    get viewportInfo() {
+    get viewportInfo(): FLib.Events.WindowEvents.ViewportInfo {
         return this.#viewportInfo;
     }
 
 
     /**
      * @param $window - DOM object on which the events will be checked
-     * @param [throttleDelay=-1] - Throttle delay in ms. If < 0, it use requestAnimationFrame
+     * @param throttleDelay - Throttle delay in ms. If &lt; 0, it use requestAnimationFrame
      */
-    constructor( $window, throttleDelay = -1 ) {
+    constructor( $window: HTMLElement | Window, throttleDelay = -1 ) {
         this.#$window       = $window;
         this.#throttleDelay = throttleDelay;
     }
 
 
     // Call each registered function for resize event
-    private updateResize( originalEvent ) {
+    #updateResize = ( originalEvent?: Event ): void => {
         if ( !this.#resizeFunctionSet.size ) {
             return;
         }
 
         this.#resizeFunctionSet.forEach( fcn => {
-            ( fcn as WindowEventsCallbackType )( {
+            ( fcn as FLib.Events.WindowEvents.Callback )( {
                     "windowInfo":   this.#windowInfo,
                     "scrollInfo":   this.#scrollInfo,
                     "documentInfo": this.#documentInfo,
@@ -113,13 +113,13 @@ export default class WindowEvents {
 
 
     // Call each registered function for scroll event
-    private updateScroll( originalEvent ) {
+    #updateScroll = ( originalEvent?: Event ): void => {
         if ( !this.#scrollFunctionSet.size ) {
             return;
         }
 
         this.#scrollFunctionSet.forEach( fcn => {
-            ( fcn as WindowEventsCallbackType )( {
+            ( fcn as FLib.Events.WindowEvents.Callback )( {
                     "windowInfo":   this.#windowInfo,
                     "scrollInfo":   this.#scrollInfo,
                     "documentInfo": this.#documentInfo,
@@ -132,7 +132,7 @@ export default class WindowEvents {
     }
 
 
-    private updateValue( type?: WindowEventsType ) {
+    #updateValue = ( type?: FLib.Events.WindowEvents.Type ): void => {
         if ( type !== 'resize' ) {
             this.#scrollInfo = windowScroll();
         }
@@ -152,7 +152,7 @@ export default class WindowEvents {
     }
 
 
-    #changeHandler = ( e: Event ) => {
+    #changeHandler = ( e: Event ): void => {
         if ( this.#tick ) {
             return;
         }
@@ -162,7 +162,7 @@ export default class WindowEvents {
         const FNC = ( ( ev: Event ) => {
                         return () => {
                             const TYPE = ev.type === 'scroll' ? 'scroll' : 'resize';
-                            this.updateValue( TYPE );
+                            this.#updateValue( TYPE );
                             this.refresh( TYPE, ev );
                             this.#tick = false;
                         }
@@ -180,10 +180,9 @@ export default class WindowEvents {
     /**
      * Register a function on a type of event
      *
-     * @param callback
      * @param type - resize | scroll | undefined (both)
      */
-    register( callback: WindowEventsCallbackType, type?: WindowEventsType ): this {
+    register( callback: FLib.Events.WindowEvents.Callback, type?: FLib.Events.WindowEvents.Type ): this {
         if ( type !== 'scroll' ) {
             this.#resizeFunctionSet.add( callback );
         }
@@ -195,7 +194,7 @@ export default class WindowEvents {
         if ( !this.#isActive && ( this.#resizeFunctionSet.size || this.#scrollFunctionSet.size ) ) {
             this.#$window.addEventListener( 'resize', this.#changeHandler );
             this.#$window.addEventListener( 'scroll', this.#changeHandler );
-            this.updateValue();
+            this.#updateValue();
             this.#isActive = true;
         }
 
@@ -206,10 +205,9 @@ export default class WindowEvents {
     /**
      * Unregister a function for a type of event
      *
-     * @param callback
      * @param type - resize | scroll | undefined (both)
      */
-    remove( callback: WindowEventsCallbackType, type?: WindowEventsType ): this {
+    remove( callback: FLib.Events.WindowEvents.Callback, type?: FLib.Events.WindowEvents.Type  ): this {
         if ( type !== 'scroll' ) {
             this.#resizeFunctionSet.delete( callback );
         }
@@ -234,8 +232,8 @@ export default class WindowEvents {
      *
      * @param type - resize | scroll | undefined (both)
      */
-    update( type?: WindowEventsType ): this {
-        this.updateValue( type );
+    update( type?: FLib.Events.WindowEvents.Type  ): this {
+        this.#updateValue( type );
 
         return this;
     }
@@ -246,13 +244,13 @@ export default class WindowEvents {
      *
      * @param type - resize | scroll | undefined (both)
      */
-    refresh( type?: WindowEventsType, _oe?: Event ): this {
+    refresh( type?: FLib.Events.WindowEvents.Type , _oe?: Event ): this {
         if ( type !== 'scroll' ) {
-            this.updateResize( _oe );
+            this.#updateResize( _oe );
         }
 
         if ( type !== 'resize' ) {
-            this.updateScroll( _oe );
+            this.#updateScroll( _oe );
         }
 
         return this;
@@ -261,10 +259,8 @@ export default class WindowEvents {
 
     /**
      * Call a function with the last stored positions and sizes
-     *
-     * @param callback
      */
-    get( callback: WindowEventsCallbackType ): this {
+    get( callback: FLib.Events.WindowEvents.Callback ): this {
         callback({
                 "windowInfo":   this.#windowInfo,
                 "scrollInfo":   this.#scrollInfo,

package/Helpers/Colors.ts

@@ -25,8 +25,6 @@ function toHexValue( c: number ): string {
 /**
  * Convert a rgba string to a hex string
  *
- * @param rgba
- *
  * @example
  * rgbaToHex( 'rgb(125 ,233, 105)' );
  *
@@ -41,8 +39,6 @@ export function rgbaToHex( rgba: string ): string {
 /**
  * Convert a hex string to a rgba string
  *
- * @param hex
- *
  * @example
  * hexToRgba( '#F5C' );
  *
@@ -57,8 +53,6 @@ export function hexToRgba( hex: string ): string {
 /**
  * Return true if the string is an rgb or rgba color
  *
- * @param rgba
- *
  * @example
  * isRGBA( 'rgb(125 ,233, 105)' );
  *
@@ -74,8 +68,6 @@ export function isRGBA( rgba: string ): boolean {
 /**
  * Return true if the string is an hexadecimal color
  *
- * @param hexColor
- *
  * @example
  * isHexColor( '#FFF' );
  *
@@ -93,15 +85,13 @@ export function isHexColor( hexColor: string ): boolean {
 /**
  * Split an rgb or rgba color
  *
- * @param rgba
- *
  * @example
  * splitRGBA( 'rgb(125 ,233, 105)' );
  *
  * @example
  * splitRGBA( 'rgba(125 ,233, 105, 0.75)' );
 */
-export function splitRGBA( rgba: string ): ColorType {
+export function splitRGBA( rgba: string ): FLib.Helpers.Color.Color {
 
     const parts: number[] = rgba
                     .replace( RGBA_CLEAN_1, '' )
@@ -133,8 +123,6 @@ export function splitRGBA( rgba: string ): ColorType {
 /**
  * Split an hexadecimal color
  *
- * @param hexColor
- *
  * @example
  * splitHexColor( '#F5A' );
  *
@@ -145,7 +133,7 @@ export function splitRGBA( rgba: string ): ColorType {
  * // With alpha
  * splitHexColor( '#FA58ACCC' );
 */
-export function splitHexColor( hexColor: string ): ColorType {
+export function splitHexColor( hexColor: string ): FLib.Helpers.Color.Color {
     let alpha;
 
     hexColor = hexColor.slice( 1 );
@@ -185,12 +173,10 @@ export function splitHexColor( hexColor: string ): ColorType {
 /**
  * Format an object color to an hex color
  *
- * @param color
- *
  * @example
  * formatHexColor( color );
 */
-export function formatHexColor( color: ColorType ): string {
+export function formatHexColor( color: FLib.Helpers.Color.Color ): string {
     return `#${ color.hr }${ color.hg }${ color.hb }${ color.a !== 1 ? color.ha : '' }`;
 }
 
@@ -198,13 +184,11 @@ export function formatHexColor( color: ColorType ): string {
 /**
  * Format an object color to an rgba color
  *
- * @param color
- *
  * @example
  * formatRGBAColor( color );
  *
 */
-export function formatRGBAColor( color: ColorType ): string {
+export function formatRGBAColor( color: FLib.Helpers.Color.Color ): string {
     if ( color.a !== 1 ) {
         return `rgba(${ color.r },${ color.g },${ color.b },${ color.a })`;
     }
@@ -239,7 +223,7 @@ export function formatRGBAColor( color: ColorType ): string {
  * let blendedcolor1 = shadeBlend( color1, color2, 0.333 );
  * let blendedcolor34 = shadeBlend( color3, color4, -0.8 );
  */
-export function shadeBlend( color1: string, color2: string | null, percent: number, render: ColorRenderType = 'obj' ): ColorType | string {
+export function shadeBlend( color1: string, color2: string | null, percent: number, render: FLib.Helpers.Color.RenderType = 'obj' ): FLib.Helpers.Color.Color | string {
     let color;
 
     const coef = Math.abs( percent );
@@ -282,7 +266,7 @@ export function shadeBlend( color1: string, color2: string | null, percent: numb
  * @param percent - Percent (between 0 and 1)
  * @param render - render type: obj, hex or rgba
 */
-export function lighten( color: string, percent: number, render: ColorRenderType = 'obj' ): ColorType | string {
+export function lighten( color: string, percent: number, render: FLib.Helpers.Color.RenderType = 'obj' ): FLib.Helpers.Color.Color | string {
     return shadeBlend( color, null, Math.abs( percent ), render );
 }
 
@@ -294,6 +278,6 @@ export function lighten( color: string, percent: number, render: ColorRenderType
  * @param percent - Percent (between 0 and 1)
  * @param render - render type: obj, hex or rgba
 */
-export function darken( color: string, percent: number, render: ColorRenderType = 'obj' ): ColorType | string {
+export function darken( color: string, percent: number, render: FLib.Helpers.Color.RenderType = 'obj' ): FLib.Helpers.Color.Color | string {
     return shadeBlend( color, null, percent > 0 ? percent * -1 : percent, render );
 }

package/Helpers/Cookie.ts

@@ -1,4 +1,4 @@
-const defaultOptions: CookieOptionsType = {
+const defaultOptions: FLib.Helpers.Cookie.Options = {
     "days": null,
     "secure": window.location.protocol.indexOf('https') > -1,
     "domain": window.location.hostname,
@@ -8,9 +8,9 @@ const defaultOptions: CookieOptionsType = {
 
 /**
  * Manage cookie
- * @class
  *
  * @example
+ * ```ts
  * cookie.create( 'cookieName', 'cookieValue' )
  * cookie.read( 'cookieName' )
  * cookie.delete( 'cookieName' )
@@ -22,20 +22,17 @@ const defaultOptions: CookieOptionsType = {
  *  "domain": "test.com",
  *  "path": "/myDir"
  *  } );
+ * ```
  */
 class Cookie {
 
     /**
      * Create a cookie
-     *
-     * @param name
-     * @param value
-     * @param userOptions
      */
-    create( name: string, value: string, userOptions?: CookieOptionsType ): this {
+    create( name: string, value: string, userOptions: Partial<FLib.Helpers.Cookie.Options> = {} ): this {
         let date;
 
-        const { days, secure, domain, path } = Object.assign( defaultOptions, userOptions || {} );
+        const { days, secure, domain, path } = Object.assign( defaultOptions, userOptions );
 
         const cookieText: string[] = [];
 
@@ -65,8 +62,6 @@ class Cookie {
 
     /**
      * Read a cookie
-     *
-     * @param name
      */
     read( name: string ): string {
         let c;
@@ -89,8 +84,6 @@ class Cookie {
 
     /**
      * Delete a cookie
-     *
-     * @param name
      */
     delete( name: string ): this {
         this.create( name, '' );

package/Helpers/Coordinates.ts

@@ -5,13 +5,6 @@ function degToRad( angle: number ): number {
 
 /**
  * Compute the distance (in km) between 2 coordinates
- *
- * @param latitude1
- * @param longitude1
- * @param latitude2
- * @param longitude2
- *
- * @return The distance in kilometers between 2 points
  */
 export function distance( latitude1: number, longitude1: number, latitude2: number, longitude2: number ): number {
     let dist: number;

package/Helpers/Debounce.ts

@@ -1,24 +1,20 @@
 /**
  * Debounce
  *
- * @param callback
- * @param threshold
- * @param immediate
- *
  * @example
  * debouncedFunction = debounce( myFunction, 200 )
  */
 export function debounce(
                     callback: ( ...args: any[] ) => void,
                     threshold = 100,
-                    immediate: boolean = false
+                    immediate = false
                 ): ( ...args: any[] ) => void {
-    let timeout: ReturnType<typeof setTimeout> | undefined;
+    let timeout: ReturnType<typeof setTimeout> | undefined;
 
     return function<Type>( this: Type, ...args: any[] ) {
 
         const later = () => {
-            timeout =  undefined;
+            timeout = undefined;
 
             if ( !immediate ) {
                 callback.apply( this, args );

package/Helpers/Defer.ts

@@ -10,7 +10,7 @@
  * // To reject:
  * dfd.reject()
  *
- * @returns {Promise} - a promise with a resolve and reject function
+ * @returns - a promise with a resolve and reject function
  */
 export function defer(): Promise<any> & { resolve: ( a?: any ) => void; reject:  ( a?: any ) => void; } {
     let res: (a: any ) => void,

package/Helpers/GetValue.ts

@@ -17,8 +17,6 @@ function cleanFieldsValue( value: any ): string {
 /**
  * Get the value of a form field (get from jQuery)
  *
- * @param $input
- *
  * @example value = getValue( $input )
  *
  * @returns The value of the form field

package/Helpers/Insert.ts

@@ -1,7 +1,6 @@
 /**
  * Insert a value or an object in a list. Doesn't change the original list.
  *
- * @param list
  * @param what - Something to insert
  * @param indexWhere - Index in the list
  *

package/Helpers/Sequential.ts

@@ -4,8 +4,6 @@ import { isArray } from './Type';
 /**
  * Create a sequential list of promises (which resolves one after another)
  *
- * @param promisesArray
- *
  * @example
  * prom = sequence( arrayOfPromise )
  */

package/Helpers/Slice.ts

@@ -1,9 +1,6 @@
 /**
  * Remove an object from a list. Doesn't change the original list.
  *
- * @param list
- * @param what
- *
  * @example
  * modifiedArray = slice( list, obj )
  *

package/Helpers/Throttle.ts

@@ -1,7 +1,6 @@
 /**
  * Throttle
  *
- * @param callback
  * @param limit - In millisecond
  *
  * @example

package/Helpers/TransitionHelpers.ts

@@ -40,18 +40,19 @@ function addWatcher( $element: HTMLElement, styleChange: ( $element: HTMLElement
  * @param styleChange - Change the style of $element inside this function by adding a class or set a style property
  * @param delay - Delay betwwen the add of the listener and call of styleChange.
  *
- * @description
- *
  * delay = 'idle' : window.requestIdleCallback
  * delay < 0 : window.requestAnimationFrame
  * delay >= 0 : setTimeout
  *
- * @example Watch for the end of the transition of the property "opacity" on the pseudo element ::after on $element
+ * @example
+ * ```ts
+ * // Watch for the end of the transition of the property "opacity" on the pseudo element ::after on $element
  *
  * const myWatcher = transitionWatcher( $elment, () => $element.classList.add('some-class'), {
  *  "pseudoElement": "after",
  *  "property":     "opacity"
  * } );
+ * ```
  */
 export function transitionWatcher( $element: HTMLElement, styleChange: ( $element: HTMLElement ) => (Promise<void> | any ), options?: { delay: 'idle' | number, pseudoElement?: 'after' | 'before' | 'both', animationName?: string[] } ): Promise<HTMLElement> {
     return addWatcher( $element, styleChange, false, options );
@@ -62,18 +63,19 @@ export function transitionWatcher( $element: HTMLElement, styleChange: ( $elemen
  * @param animationStart - Start the animation of $element inside this function by adding a class or set a style property
  * @param delay - Delay betwwen the add of the listener and call of animationStart.
  *
- * @description
- *
  * delay = 'idle' : window.requestIdleCallback
  * delay &lt; 0 : window.requestAnimationFrame
  * delay &gt;= 0 : setTimeout
  *
- * @example Watch for the end of the animation "my-animation" on the pseudo element ::after on $element
+ * @example
+ * ```ts
+ * //Watch for the end of the animation "my-animation" on the pseudo element ::after on $element
  *
  * const myWatcher = animationWatcher( $elment, () =&gt; $element.classList.add('some-class'), {
  *  "pseudoElement": "after",
  *  "animationName": ["my-animation"]
  * } );
+ * ```
  */
  export function animationWatcher( $element: HTMLElement, animationStart: ( $element: HTMLElement ) => (Promise<void> | any ), options?: { delay: 'idle' | number, pseudoElement?: 'after' | 'before' | 'both', animationName?: string[] } ): Promise<HTMLElement> {
     return addWatcher( $element, animationStart, true, options );