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

package/Events/DeviceOrientation.ts

@@ -1,11 +1,10 @@
 /**
  * Handle device orientation change
  *
- * @param options
- *
  * @example
+ * ```ts
  * let ori = new DeviceOrientation({
- *     onOrientationChange: orientationName => {
+ *     onOrientationChange: orientationName = {
  *         console.log(orientationName)
  *     }
  * })
@@ -15,12 +14,13 @@
  *
  * // Remove event binding
  * ori.off()
+ * ```
  */
 export default class DeviceOrientation {
 
-    #orientationName: DeviceOrientationType = '';
+    #orientationName: FLib.Events.DeviceOrientation.Type = '';
 
-    #ORIENTATION_CONVERTION_TABLE: { [ keys: string ]: DeviceOrientationType } = {
+    #ORIENTATION_CONVERTION_TABLE: Record<string, FLib.Events.DeviceOrientation.Type> = {
         "landscape-primary":   "landscape-primary",
         "landscapePrimary":    "landscape-primary",
         "portrait-primary":    "portrait-primary",
@@ -38,19 +38,19 @@ export default class DeviceOrientation {
                 ? 'moz'
                 : 'msOrientation' in window.screen ? 'ms' : null;
 
-    #options: DeviceOrientationOptionsType;
+    #options: FLib.Events.DeviceOrientation.Options;
 
-    get orientation(): DeviceOrientationType {
+    get orientation(): FLib.Events.DeviceOrientation.Type {
         return this.#orientationName
     }
 
 
-    constructor( options: DeviceOrientationOptionsType ) {
+    constructor( options: FLib.Events.DeviceOrientation.Options ) {
         this.#options = options;
 
         if ( !this.#PREFIX ) {
-            window.addEventListener( 'orientationchange', this.checkWindowOrientation );
-            this.checkWindowOrientation();
+            window.addEventListener( 'orientationchange', this.#checkWindowOrientation );
+            this.#checkWindowOrientation();
             return;
         }
 
@@ -61,27 +61,27 @@ export default class DeviceOrientation {
         ) {
             window.screen.orientation.addEventListener(
                 'change',
-                this.checkScreenOrientation
+                this.#checkScreenOrientation
             );
-            this.checkScreenOrientation();
+            this.#checkScreenOrientation();
         }
         else {
             // @ts-expect-error
             window.screen.addEventListener(
                 `${ this.#PREFIX }orientationchange`,
-                this.checkScreenOrientation
+                this.#checkScreenOrientation
             );
-            this.checkScreenOrientation();
+            this.#checkScreenOrientation();
         }
     }
 
 
-    private getOrientationProperty(): string {
+    #getOrientationProperty = (): string => {
         return this.#PREFIX + ( this.#PREFIX === '' ? 'o' : 'O' ) + 'rientation'
     }
 
 
-    private processOrientation( type: DeviceOrientationType ): void {
+    #processOrientation = ( type: FLib.Events.DeviceOrientation.Type ): void => {
         this.#orientationName = type;
 
         if ( type && this.#options.onOrientationChange ) {
@@ -90,8 +90,8 @@ export default class DeviceOrientation {
     }
 
 
-    private checkWindowOrientation = (): void => {
-        let type: DeviceOrientationType = '';
+    #checkWindowOrientation = (): void => {
+        let type: FLib.Events.DeviceOrientation.Type = '';
 
         const orientation: number | string = window.orientation;
 
@@ -108,14 +108,14 @@ export default class DeviceOrientation {
             type = "portrait-secondary";
         }
 
-        this.processOrientation( type );
+        this.#processOrientation( type );
     }
 
 
-    private checkScreenOrientation(): void {
-        let type: DeviceOrientationType;
+    #checkScreenOrientation = (): void => {
+        let type: FLib.Events.DeviceOrientation.Type;
 
-        const orientation = window.screen[ this.getOrientationProperty() ];
+        const orientation = window.screen[ this.#getOrientationProperty() ];
 
         if ( typeof orientation === 'undefined' ) {
             return;
@@ -128,30 +128,26 @@ export default class DeviceOrientation {
             type = this.#ORIENTATION_CONVERTION_TABLE[ orientation ];
         }
 
-        this.processOrientation( type );
+        this.#processOrientation( type );
     }
 
 
     /**
      * Return the current normalized orientation
-     *
-     * @return {String} landscape-primary, portrait-primary, landscape-secondary, portrait-secondary
      */
-    getOrientation(): DeviceOrientationType {
+    getOrientation(): FLib.Events.DeviceOrientation.Type {
         return this.#orientationName;
     }
 
 
     /**
      * Remove all binding
-     *
-     * @returns {DeviceOrientation}
      */
     off(): this {
         if ( !this.#PREFIX ) {
             window.removeEventListener(
                 'orientationchange',
-                this.checkWindowOrientation
+                this.#checkWindowOrientation
             );
             return this;
         }
@@ -162,14 +158,14 @@ export default class DeviceOrientation {
         ) {
             window.screen.orientation.removeEventListener(
                 'change',
-                this.checkScreenOrientation
+                this.#checkScreenOrientation
             );
         }
         else {
             // @ts-expect-error
             window.screen.removeEventListener(
                 `${ this.#PREFIX }orientationchange`,
-                this.checkScreenOrientation
+                this.#checkScreenOrientation
             );
         }
 

package/Events/EventsManager.ts

@@ -3,8 +3,8 @@ import { slice } from '../Helpers/Slice';
 
 let passiveSupported = false,
     createEvt,
-    DOMRegistry:    DataRegistryType[] = [],
-    ObjectRegistry: DataRegistryType[] = [];
+    DOMRegistry:    FLib.Events.EventsManager.DataRegistry[] = [],
+    ObjectRegistry: FLib.Events.EventsManager.DataRegistry[] = [];
 
 
 (function () {
@@ -84,7 +84,7 @@ function getDelegation( $element: Node, selector: string, callback: ( e: Event,
 }
 
 
-function exists( $element: Node, eventName: string, options: OnOptionsType) {
+function exists( $element: Node, eventName: string, options: FLib.Events.EventsManager.OnOptions) {
     return ( $element instanceof Element ? DOMRegistry : ObjectRegistry ).find( item => {
         return item.$element === $element &&
                 item.eventName === eventName &&
@@ -110,20 +110,14 @@ function _useNativeDOMEvents( $element ) {
 
 /**
  * Indicate if the browser natively support passive event
- *
- * @name handlePassiveEvents
- * @type {Boolean}
  */
 export const handlePassiveEvents: boolean = passiveSupported;
 
 
 /**
  * Add an event listener
- *
- * @param $elements
- * @param options
  */
-export const on = function( $elements: any, options: OnOptionsType ): void {
+export const on = function( $elements: any, options: FLib.Events.EventsManager.OnOptions ): void {
     let eventOptions;
 
     const $ELEM_ARRAY = normalizeElements( $elements );
@@ -152,7 +146,7 @@ export const on = function( $elements: any, options: OnOptionsType ): void {
             const useNativeDOMEvents = _useNativeDOMEvents( $element );
             const cbFunction = options._internalCallback || options.callback;
 
-            const data: DataRegistryType = {
+            const data: FLib.Events.EventsManager.DataRegistry = {
                 $element,
                 eventName,
                 options
@@ -179,11 +173,8 @@ export const on = function( $elements: any, options: OnOptionsType ): void {
 
 /**
  * Add an event listener fired only one time
- *
- * @param $elements
- * @param options
  */
-export const one = function( $elements: any, options: OnOptionsType ): void {
+export const one = function( $elements: any, options: FLib.Events.EventsManager.OnOptions ): void {
 
     function _internalCallback( this: any, e ) {
         off( $elements || this, options );
@@ -199,19 +190,16 @@ export const one = function( $elements: any, options: OnOptionsType ): void {
 
 /**
  * Remove an event
- *
- * @param $elements
- * @param options
  */
-export const off = function( $elements: any, options: OffOptionsType ): void {
+export const off = function( $elements: any, options: FLib.Events.EventsManager.OffOptions ): void {
 
     const $ELEM_ARRAY = normalizeElements( $elements );
 
     options.eventsName.split( ' ' ).forEach( eventName => {
         $ELEM_ARRAY.forEach( $element => {
             const useNativeDOMEvents              = _useNativeDOMEvents( $element );
-            const removedItem: DataRegistryType[] = [];
-            let registry: DataRegistryType[]      = useNativeDOMEvents ? DOMRegistry : ObjectRegistry;
+            const removedItem: FLib.Events.EventsManager.DataRegistry[] = [];
+            let registry: FLib.Events.EventsManager.DataRegistry[]      = useNativeDOMEvents ? DOMRegistry : ObjectRegistry;
 
             registry.forEach( item => {
                 const callback = item.delegate || item.options._internalCallback || item.options.callback;
@@ -241,11 +229,8 @@ export const off = function( $elements: any, options: OffOptionsType ): void {
 
 /**
  * Fire an event
- *
- * @param $elements
- * @param options
  */
-export const fire = function( $elements: any, options: FireOptionsType ): void {
+export const fire = function( $elements: any, options: FLib.Events.EventsManager.FireOptions ): void {
     const $ELEM_ARRAY = normalizeElements( $elements );
 
     options.eventsName.split(' ').forEach( eventName => {

package/Events/Gesture.ts

@@ -2,7 +2,7 @@ import { on, off } from './EventsManager';
 import { extend }  from '../Helpers/Extend';
 
 
-const defaultOptions: GestureOptionsType = {
+const defaultOptions: FLib.Events.Gesture.Options = {
     "threshold":            20,
     "useTouch":             true,
     "velocityMax":          -1,
@@ -34,7 +34,7 @@ const MIN_DELTA_FOR_DIRECTION_CHANGE = 5; // px
 
 
 const EVENTS_NAME = ( function() {
-    let start, move, end, mode: GestureModeType;
+    let start, move, end, mode: FLib.Events.Gesture.Mode;
 
     const click = 'click';
     mode        = 'click';
@@ -114,7 +114,7 @@ function getPos( e ) {
 }
 
 
-function bindEvent( $elem: Node, eventsName: string, callback, options: GestureOptionsType, selector?: string ) {
+function bindEvent( $elem: Node, eventsName: string, callback, options: FLib.Events.Gesture.Options, selector?: string ) {
     let eventOptions;
 
     // Fix passive event on chrome 54+
@@ -145,7 +145,7 @@ function unbindEvent( $elem: Node, eventsName: string, callback ) {
 }
 
 
-function eventsHelper( e, eventName: string, options: GestureOptionsType, $currentTargetElement: Node ) {
+function eventsHelper( e, eventName: string, options: FLib.Events.Gesture.Options, $currentTargetElement: Node ) {
     const preventDefault = options[ `prevent${eventName}` ];
     const stopPropagation = options[ `stopPropagation${eventName}` ];
 
@@ -191,15 +191,15 @@ class GestureManager {
     #lastDirections;
     #$currentTargetElement;
     #$element;
-    #velocityArray: VelocityType[] = [];
-    #options: GestureOptionsType;
+    #velocityArray: FLib.Events.Gesture.Velocity[] = [];
+    #options: FLib.Events.Gesture.Options;
 
     get $element() {
         return this.#$element;
     }
 
 
-    constructor( $element: Node, options: GestureOptionsType ) {
+    constructor( $element: Node, options: FLib.Events.Gesture.Options ) {
         this.#$element = $element;
         this.#options  = options;
 
@@ -224,7 +224,7 @@ class GestureManager {
         );
     }
 
-    private cancelAll() {
+    #cancelAll = () => {
         this.#isAllCancelled = true;
         this.#isTapCancelled = true;
         unbindEvent( document.body, EVENTS_NAME.move, this.#onMove );
@@ -232,7 +232,7 @@ class GestureManager {
     }
 
 
-    private init() {
+    #init = () => {
         this.#isAllCancelled    = false;
         this.#isTapCancelled    = false;
         this.#isTapEventFired   = false;
@@ -262,7 +262,7 @@ class GestureManager {
 
 
     // Swipe are called only one time
-    private handleSwipe = ( e ): void => {
+    #handleSwipe = ( e ): void => {
         if ( Math.abs( this.#deltaX ) >= (this.#options.threshold as number) ) {
             this.#isTapCancelled = true;
 
@@ -299,7 +299,7 @@ class GestureManager {
 
 
     // Called along with touchmove
-    private handleMove = ( e ): void => {
+    #handleMove = ( e ): void => {
         const moveOnX =
             Math.abs( this.#currentX - this.#lastX ) > Math.abs( this.#currentY - this.#lastY );
 
@@ -327,7 +327,7 @@ class GestureManager {
     }
 
 
-    private handleVelocity( mustReset: boolean ) {
+    #handleVelocity = ( mustReset: boolean ) => {
         this.#velocityVars.startPosX = this.#velocityVars.endPosX;
         this.#velocityVars.startPosY = this.#velocityVars.endPosY;
         this.#velocityVars.endPosX   = this.#currentX;
@@ -359,7 +359,7 @@ class GestureManager {
     }
 
 
-    private fuzzyEquals( angle: number, targetAngle: number ) {
+    #fuzzyEquals = ( angle: number, targetAngle: number ) => {
         return (
             angle >= targetAngle - (this.#options.angleThreshold as number) &&
             angle <= targetAngle + (this.#options.angleThreshold as number)
@@ -367,9 +367,9 @@ class GestureManager {
     }
 
 
-    private getVelocityData(): GestureVelocityType {
+    #getVelocityData = (): FLib.Events.Gesture.VelocityReturnType => {
         let angle,
-            direction: GestureDirectionType = 'none';
+            direction: FLib.Events.Gesture.Direction = 'none';
 
         const currentTime = new Date().valueOf();
 
@@ -405,11 +405,11 @@ class GestureManager {
             direction = 'down-right';
             angle = 360 - angle;
 
-            if ( this.fuzzyEquals( angle, 360 ) ) {
+            if ( this.#fuzzyEquals( angle, 360 ) ) {
                 direction = 'right';
                 angle = 0;
             }
-            else if ( this.fuzzyEquals( angle, 270 ) ) {
+            else if ( this.#fuzzyEquals( angle, 270 ) ) {
                 direction = 'down';
                 angle = 270;
             }
@@ -417,11 +417,11 @@ class GestureManager {
         else if ( deltaPosX > 0 && deltaPosY < 0 ) {
             direction = 'up-right';
 
-            if ( this.fuzzyEquals( angle, 360 ) ) {
+            if ( this.#fuzzyEquals( angle, 360 ) ) {
                 direction = 'right';
                 angle = 0;
             }
-            else if ( this.fuzzyEquals( angle, 90 ) ) {
+            else if ( this.#fuzzyEquals( angle, 90 ) ) {
                 direction = 'up';
                 angle = 90;
             }
@@ -430,11 +430,11 @@ class GestureManager {
             direction = 'down-left';
             angle = angle + 180;
 
-            if ( this.fuzzyEquals( angle, 180 ) ) {
+            if ( this.#fuzzyEquals( angle, 180 ) ) {
                 direction = 'left';
                 angle = 180;
             }
-            else if ( this.fuzzyEquals( angle, 270 ) ) {
+            else if ( this.#fuzzyEquals( angle, 270 ) ) {
                 direction = 'down';
                 angle = 270;
             }
@@ -443,11 +443,11 @@ class GestureManager {
             direction = 'up-left';
             angle = 180 - angle;
 
-            if ( this.fuzzyEquals( angle, 180 ) ) {
+            if ( this.#fuzzyEquals( angle, 180 ) ) {
                 direction = 'left';
                 angle = 180;
             }
-            else if ( this.fuzzyEquals( angle, 90 ) ) {
+            else if ( this.#fuzzyEquals( angle, 90 ) ) {
                 direction = 'up';
                 angle = 90;
             }
@@ -477,7 +477,7 @@ class GestureManager {
         // Multitouch not handle for now
         if ( e.touches && e.touches.length > 1 ) {
             this.#$currentTargetElement = null;
-            this.cancelAll();
+            this.#cancelAll();
             return;
         }
 
@@ -489,7 +489,7 @@ class GestureManager {
             this.#options.start.call( this.#$currentTargetElement, e, this.#$currentTargetElement, touchCoords, 'start' );
         }
 
-        this.init();
+        this.#init();
 
         if ( touchCoords.pageX > -1 ) {
             this.#currentX = this.#startX = this.#lastX = touchCoords.pageX;
@@ -522,7 +522,7 @@ class GestureManager {
         }
 
         if ( e.touches && e.touches.length > 1 ) {
-            return this.cancelAll();
+            return this.#cancelAll();
         }
 
         const touchCoords = getPos(e);
@@ -579,13 +579,13 @@ class GestureManager {
         this.#lastTouchMoveTime = new Date().valueOf();
 
         if ( this.#options.swipe ) {
-            this.handleVelocity( hasDirectionChanged );
+            this.#handleVelocity( hasDirectionChanged );
         }
 
         this.#lastDirections = currentDirections;
 
-        this.handleSwipe( e );
-        this.handleMove( e );
+        this.#handleSwipe( e );
+        this.#handleMove( e );
     }
 
 
@@ -604,7 +604,7 @@ class GestureManager {
         }
 
         if ( this.#options.swipe ) {
-            const velocityData = this.getVelocityData();
+            const velocityData = this.#getVelocityData();
 
             if ( velocityData.averageVelocity >= 0 ) {
                 this.#options.swipe.call( this.#$currentTargetElement, e, this.#$currentTargetElement, velocityData, 'swipe' );
@@ -637,13 +637,13 @@ class GestureManager {
         }
 
         unbindEvent( this.#$element, EVENTS_NAME.click, this.#onClick );
-    };
+    }
 }
 
 
 /* -------------------- API */
 
-function addManager( $element: Node, handlerName: string | Symbol, options: GestureOptionsType ): GestureManagerType {
+function addManager( $element: Node, handlerName: string | symbol, options: FLib.Events.Gesture.Options ): FLib.Events.Gesture.Manager {
     let handler = gestureList.get( handlerName );
 
     if ( !handler ) {
@@ -662,7 +662,7 @@ function addManager( $element: Node, handlerName: string | Symbol, options: Gest
 }
 
 
-function removeManager( $element: Node, handlerName: string | Symbol ): void {
+function removeManager( $element: Node, handlerName: string | symbol ): void {
     let idx = 0;
     const handler = gestureList.get( handlerName );
 
@@ -690,7 +690,6 @@ function removeManager( $element: Node, handlerName: string | Symbol ): void {
  *
  * @param $elements - DOM element or DOMList element
  * @param handlerName - Name of the handler used to retrieve it and unbind events with gestureOff
- * @param userOptions
  *
  * @see
  * For more details, see extra/events.md
@@ -706,14 +705,14 @@ function removeManager( $element: Node, handlerName: string | Symbol ): void {
  *
  * @returns The handler (or array of handlers) to unbind events
  */
-export function gesture( $elements: GestureElementsType, handlerName: string | Symbol, userOptions: GestureOptionsType ): GestureManagerType | GestureManagerType[] {
+export function gesture( $elements: FLib.Events.Gesture.Elements, handlerName: string | symbol, userOptions: FLib.Events.Gesture.Options ): FLib.Events.Gesture.Manager | FLib.Events.Gesture.Manager[] {
     const options = extend( defaultOptions, userOptions );
 
     if (
         typeof ($elements as NodeList).length === 'number' &&
         ($elements as HTMLElement).tagName !== 'FORM'
     ) {
-        const managers: GestureManagerType[] = [];
+        const managers: FLib.Events.Gesture.Manager[] = [];
 
         ($elements as NodeList).forEach($element => {
             managers.push( addManager( $element, handlerName, options ) );
@@ -736,7 +735,7 @@ export function gesture( $elements: GestureElementsType, handlerName: string | S
  * @example
  * gestureOff( $element, 'handlerName' );
  */
-export function gestureOff( $elements: GestureElementsType, handlerName: string | Symbol ): void {
+export function gestureOff( $elements: FLib.Events.Gesture.Elements, handlerName: string | symbol ): void {
     if (
         typeof ($elements as NodeList).length === 'number' &&
         ($elements as HTMLElement).tagName !== 'FORM'

package/Events/HistoryController.ts

@@ -7,10 +7,11 @@ import { slice }     from '../Helpers/Slice';
  * Manage history pushState and popstate event
  *
  * @example
+ * ```ts
  * let h = new HistoryController( 'The default page title' )
  *
  * // Push a new state in the history
- * h.pushState( {data: 1}, 'The page title', '/path/page.html' )
+ * h.pushState({ data: 1 }, 'The page title', '/path/page.html' )
  *
  * // Return the current page state
  * h.getState()
@@ -19,10 +20,11 @@ import { slice }     from '../Helpers/Slice';
  * h.updateAnchor( anchor )
  *
  * // Register an handler for popState
- * h.register( handler ) => ( url, state )
+ * h.register( handler ) => ( url, state )
  *
  * // remove a registered handler for popState
  * h.remove( handler )
+ * ```
  *
  * @param defaultTitle - Default page title
  */
@@ -30,16 +32,16 @@ export default class HistoryController {
     #defaultTitle:           string;
     #hasPushstate:           boolean;
     #hasPopStateEvent:       boolean;
-    #currentState:           HistoryStateObjectType;
+    #currentState:           FLib.Events.History.StateObject;
     #registeredFunctionList: (( url: UrlParser, state: any ) => void)[];
 
 
-    get state(): HistoryStateObjectType {
+    get state(): FLib.Events.History.StateObject {
         return this.#currentState;
     }
 
 
-    constructor( defaultTitle: string = '' ) {
+    constructor( defaultTitle = '' ) {
 
         this.#hasPushstate     = !!window.history.pushState;
         this.#hasPopStateEvent = 'onpopstate' in window;
@@ -67,7 +69,7 @@ export default class HistoryController {
 
 
     // Call each registered function for popstate event
-    private callRegisteredFunction( url: UrlParser, state: any ): void {
+    #callRegisteredFunction = ( url: UrlParser, state: any ): void => {
         if ( !this.#registeredFunctionList.length ) {
             return;
         }
@@ -90,7 +92,7 @@ export default class HistoryController {
             "title": ""
         };
 
-        this.callRegisteredFunction( this.#currentState.url, state );
+        this.#callRegisteredFunction( this.#currentState.url, state );
     }
 
 
@@ -98,8 +100,6 @@ export default class HistoryController {
      * Push a new state in the history
      *
      * @param state - Native browser state object
-     * @param title
-     * @param url
      */
     pushState( state: any, title: string, url: string | UrlParser ): this {
         if ( !this.#hasPushstate ) {
@@ -131,8 +131,6 @@ export default class HistoryController {
 
     /**
      * Update the anchor of the current url
-     *
-     * @param anchor
      */
     updateAnchor( anchor: string ): this {
         if ( !this.#hasPushstate ) {
@@ -159,10 +157,8 @@ export default class HistoryController {
 
     /**
      * Register an handler for popState
-     *
-     * @param handler
      */
-    register( handler: HistoryCallbackType ): this {
+    register( handler: FLib.Events.History.Callback ): this {
         this.#registeredFunctionList.push( handler );
 
         return this;
@@ -171,10 +167,8 @@ export default class HistoryController {
 
     /**
      * Remove a registered handler for popState
-     *
-     * @param handler
      */
-    remove( handler: HistoryCallbackType ): this {
+    remove( handler: FLib.Events.History.Callback ): this {
         slice( this.#registeredFunctionList, handler );
 
         return this;