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

package/Events/ImageLoad.ts

@@ -44,25 +44,27 @@ function isDataURI( src ) {
  * Preload an image
  *
  * @param $element - DOM image to preload
- * @param manageError - If true reject the promise on error (false)
- * @param callback - Function called on image load
+ * @param callback - Function called on image load (`{` $element, type: string `}`) => `{}`
+ * @param handleError - If true reject the promise on error
  *
  * @example
- * onImageLoad( $image, manageError, callback ).then( () => {} )
+ * ```ts
+ * onImageLoad( $image, callback, handleError ).then( () => {} )
  *
  * // To allow event cancelation, don't chain .then() directly after onImageLoad
- * let preload = onImageLoad( $image, callback, manageError );
+ * let preload = onImageLoad( $image, callback, handleError );
  * preload.then( () => {} );
  * ...
  *
  * preload.off();
+ * ```
  *
  * @returns Return a standard Promise + an .off() function to cancel event
  */
-export function onImageLoad( $element: Element, manageError?: boolean, callback?: ( $element: Element, type: ImageLoadEventType ) => void ): ImagePromiseType {
+export function onImageLoad( $element: Element, callback?: ( data: FLib.Events.ImagesLoad.CallbackParam ) => void, handleError = false ): FLib.Events.ImagesLoad.PromiseLoad {
     let _remove;
 
-    const PROM: ImagePromiseType = new Promise( function( this: ImagePromiseType, resolve, reject ) {
+    const PROM: FLib.Events.ImagesLoad.PromiseLoad = new Promise( function( resolve, reject ) {
         let $img;
 
         function onImageLoaded( e ) {
@@ -71,14 +73,20 @@ export function onImageLoad( $element: Element, manageError?: boolean, callback?
             $img = null;
 
             if ( callback ) {
-                callback( $element, e.type );
+                callback( {
+                    $element,
+                    "type": e.type
+                } );
             }
 
-            if ( manageError && e.type === 'error' ) {
+            if ( handleError && e.type === 'error' ) {
                 reject();
             }
             else {
-                resolve( [ $element, e.type ] );
+                resolve( {
+                    $element,
+                    "type": e.type
+                } );
             }
         }
 
@@ -103,10 +111,16 @@ export function onImageLoad( $element: Element, manageError?: boolean, callback?
                 ( !hasNativePicture && ($element as HTMLImageElement).complete && !isDataURI( src ) )
             ) {
                 if ( callback ) {
-                    callback( $element, 'complete' );
+                    callback({
+                        $element,
+                        "type": 'complete'
+                    });
                 }
 
-                resolve( [ $element, 'complete' ] );
+                resolve({
+                    $element,
+                    "type": 'complete'
+                });
                 return;
             }
 
@@ -121,7 +135,7 @@ export function onImageLoad( $element: Element, manageError?: boolean, callback?
             $img.addEventListener( 'error', onImageLoaded );
             $img.addEventListener( 'load', onImageLoaded );
         } );
-    } ) as ImagePromiseType;
+    } ) as FLib.Events.ImagesLoad.PromiseLoad;
 
     PROM.off = _remove;
 
@@ -133,29 +147,31 @@ export function onImageLoad( $element: Element, manageError?: boolean, callback?
  * Preload a list of images
  *
  * @param $elements - Array of images to preload
- * @param manageError - If true reject the promise on error (false)
- * @param callback - Function called on each image load ($element, eventType:string) => {}
+ * @param callback - Function called on each image load (`{` $element, type:string `}`) => `{}`
+ * @param handleError - If true reject the promise on error
  *
  * @example
- * onAllImagesLoad( $images, manageError, partialCallback ).then( () => {} )
+ * ```ts
+ * onAllImagesLoad( $images, partialCallback, handleError ).then( () => {} )
  *
  * // To allow event cancelation, don't chain .then() directly after onAllImagesLoad
- * let preload = onAllImagesLoad( $images, manageError, callback );
+ * let preload = onAllImagesLoad( $images, callback, handleError );
  * preload.then( () => {} );
  * ...
  *
  * preload.off();
+ * ```
  *
  * @returns Return a standard Promise + an .off() function to cancel event
  */
-export function onAllImagesLoad( $images: NodeList | Element[], ...args ): ImagesPromiseType {
-    const promArray: ImagePromiseType[] = [];
+export function onAllImagesLoad( $images: NodeList | Element[], ...args: any[] ): FLib.Events.ImagesLoad.PromisesLoad {
+    const promArray: FLib.Events.ImagesLoad.PromiseLoad[] = [];
 
     $images.forEach( $img => {
         promArray.push( onImageLoad( $img, ...args ) );
     } );
 
-    const promResult: ImagesPromiseType = Promise.all( promArray ) as ImagesPromiseType;
+    const promResult: FLib.Events.ImagesLoad.PromisesLoad = Promise.all( promArray ) as FLib.Events.ImagesLoad.PromisesLoad;
 
     promResult.off = function() {
         promArray.forEach( imageLoad => {

package/Events/IntersectObserver.ts

@@ -6,6 +6,7 @@ import { slice }  from '../Helpers/Slice';
  * Wrapper for the IntersectionObserver API
  *
  * @example
+ * ```ts
  * let io = new IntersectObserver( {
  *      "onIntersecting": callback
  * } );
@@ -26,17 +27,16 @@ import { slice }  from '../Helpers/Slice';
  *
  * // To remove all elements from the observer
  * io.clear();
- *
- * @param options
+ * ```
  */
 export default class IntersectObserver {
 
     #elementObserver: IntersectionObserver;
-    #options:         IntersectObserverOptionsType;
+    #options:         FLib.Events.IntersectObserver.Options;
     #observedElements;
 
 
-    constructor( options: IntersectObserverOptionsType ) {
+    constructor( options: FLib.Events.IntersectObserver.Options ) {
         this.#options = extend( {
             "onIntersecting": null,
             "onlyOnce": false,
@@ -52,15 +52,15 @@ export default class IntersectObserver {
         }
 
         this.#observedElements = [];
-        this.#elementObserver  = new IntersectionObserver( this.intersect.bind( this ), this.#options.ioOptions );
+        this.#elementObserver  = new IntersectionObserver( this.#intersect.bind( this ), this.#options.ioOptions );
     }
 
 
-    private intersect( entries: IntersectionObserverEntry[] ) {
+    #intersect = ( entries: IntersectionObserverEntry[] ): void => {
         entries.forEach( ( entry: IntersectionObserverEntry ) => {
             if ( this.#options.onlyOnce && entry.isIntersecting ) {
                 this.#options.onIntersecting.call( entry.target, entry.target, entry );
-                this.unobserve( entry.target );
+                this.#unobserve( entry.target );
                 return;
             }
             else if ( !this.#options.onlyOnce ) {
@@ -70,13 +70,13 @@ export default class IntersectObserver {
     }
 
 
-    private unobserve( $element: Element ) {
+    #unobserve = ( $element: Element ): void => {
         this.#elementObserver.unobserve( $element );
         slice( this.#observedElements, $element )
     }
 
 
-    private observe( $element: Element ) {
+    #observe = ( $element: Element ): void => {
         if ( this.#observedElements.includes( $element ) ) {
             return;
         }
@@ -87,26 +87,24 @@ export default class IntersectObserver {
     }
 
 
-    private toggle( $elements: Element | NodeList | Element[], isAddAction ) {
+    #toggle = ( $elements: Element | NodeList | Element[], isAddAction?: boolean ): void => {
         if ( ( $elements instanceof NodeList || $elements instanceof Array ) && typeof $elements.forEach !== 'undefined' ) {
             $elements.forEach( $element => {
-                isAddAction ? this.observe( $element ) : this.unobserve( $element );
+                isAddAction ? this.#observe( $element ) : this.#unobserve( $element );
             } );
 
             return;
         }
 
-        isAddAction ? this.observe( $elements as Element ) : this.unobserve( $elements as Element );
+        isAddAction ? this.#observe( $elements as Element ) : this.#unobserve( $elements as Element );
     }
 
 
     /**
      * Add elements to be observed
-     *
-     * @param $elements
      */
     add( $elements: Element | NodeList | Element[] ): this {
-        this.toggle( $elements, true );
+        this.#toggle( $elements, true );
 
         return this;
     }
@@ -114,11 +112,9 @@ export default class IntersectObserver {
 
     /**
      * Stop some elements to be observed
-     *
-     * @param $elements
      */
     remove( $elements: Element | NodeList | Element[] ): this {
-        this.toggle( $elements, false );
+        this.#toggle( $elements, false );
 
         return this;
     }
@@ -132,7 +128,7 @@ export default class IntersectObserver {
             return this;
         }
 
-        this.toggle( this.#observedElements, false );
+        this.#toggle( this.#observedElements, false );
 
         this.#observedElements.length = 0;
 

package/Events/KeyboardHandler.ts

@@ -17,10 +17,10 @@ export default class KeyboardHandler {
 
     #$element;
     #options;
-    #eventsName = new Map();
+    #eventsName = new Map<string, ( e: KeyboardEvent ) => string[]>();
 
 
-    constructor( $element: Element, userOptions: KeyboardHandlerOptions = {} ) {
+    constructor( $element: Element, userOptions: FLib.Events.KeyboardHandler.Options = {} ) {
 
         this.#$element = $element;
 
@@ -44,7 +44,7 @@ export default class KeyboardHandler {
         this.#eventsName.set( 'ArrowDown',  () => [ 'onDown', 'onPrevious' ] );
         this.#eventsName.set( 'PageUp',     () => [ 'onPageUp' ] );
         this.#eventsName.set( 'PageDown',   () => [ 'onPageDown' ] );
-        this.#eventsName.set( 'Tab',       e => {
+        this.#eventsName.set( 'Tab',       ( e: KeyboardEvent ) => {
             if ( e.shiftKey && this.#options[ 'onTabReverse' ] ) {
                 return [ 'onTabReverse' ];
             }
@@ -55,7 +55,7 @@ export default class KeyboardHandler {
     }
 
 
-    private handleCallbacks( event, $context, callbacks ) {
+    #handleCallbacks = ( event: KeyboardEvent, $context: EventTarget | null, callbacks: string[] ): void => {
         callbacks.forEach( cb => {
             if ( this.#options[ cb ] ) {
                 this.#options[ cb ].call( $context, event, $context );
@@ -64,7 +64,7 @@ export default class KeyboardHandler {
     }
 
 
-    #onKeypress = ( e: KeyboardEvent ) => {
+    #onKeypress = ( e: KeyboardEvent ): void => {
         const key = e.key;
 
         // Block all key except tab, CTRL R, CMD R or F5
@@ -78,10 +78,12 @@ export default class KeyboardHandler {
             e.preventDefault();
         }
 
-        this.handleCallbacks( e, e.target, [ 'onKey' ] );
+        this.#handleCallbacks( e, e.target, [ 'onKey' ] );
 
-        if ( this.#eventsName.has( key ) ) {
-            this.handleCallbacks( e, e.target, this.#eventsName.get( key )( e ) );
+        const FNC = this.#eventsName.get( key );
+
+        if ( FNC ) {
+            this.#handleCallbacks( e, e.target, FNC( e ) );
         }
     }
 

package/Events/MediaQueriesEvents.ts

@@ -6,37 +6,41 @@ import { slice }  from '../Helpers/Slice';
  * Manage media queries events
  *
  * @example
+ * ```ts
  * let mquery = new MediaQueriesEvents( [
+ *    {
  *        "name" :        "mob",
  *        "query":        window.matchMedia( '(max-width:767px)' )
- *    },
+ *    \},
  *    {
  *        "name" :        "tab",
  *        "query":        window.matchMedia( '(min-width:768px) and (max-width:959px)' )
- *    },
+ *    \},
  *    {
  *        "name" :        "desk",
  *        "query":        window.matchMedia( '(min-width:960px)' )
- *    } ] );
+ *    \}
+ * ] );
  *
  * or
  *
  *  let mquery = new MediaQueriesEvents( [
+ *    {
  *        "name" :        "mob",
  *        "max":          767
- *    },
+ *    \},
  *    {
  *        "name" :        "tab",
  *        "min":          768,
  *        "max":          956
- *    },
+ *    \},
  *    {
  *        "name" :        "desk",
  *        "max":          960
- *    } ],
+ *    \} ],
  *    {
  *       "unit": "px" // Default value
- *    }
+ *    \}
  * );
  *
  * // Register a function to be call when leaving any breakpoint
@@ -63,9 +67,9 @@ import { slice }  from '../Helpers/Slice';
  * boolean = mquery.is( 'desk' );
  *
  * // Current active breakpoint
- * myBreakpoint = mquery.currentBreakpoint; // => {name, query, ...} or false
- * myBreakpoint.is( 'mob' ); // => true|false
- * myBreakpoint.in( ['mob', 'tab'] ); // => true|false
+ * myBreakpoint = mquery.currentBreakpoint; // => { name, query, ... } or false
+ * myBreakpoint.is( 'mob' ); // => true|false
+ * myBreakpoint.in( ['mob', 'tab'] ); // => true|false
  *
  * // List of all breakpoints
  * array = mquery.list;
@@ -78,30 +82,30 @@ import { slice }  from '../Helpers/Slice';
  *
  * // Resume media queries watch
  * mquery.resume();
- *
+ * ```
  */
 export default class MediaQueriesEvents {
 
-    #breakpointsList:   Breakpoint[];
-    #currentBreakpoint: Breakpoint | undefined;
-    #functionHash:      { [ key: string ]: MediaQueriesEventsInternalCallbackType[] };
-    #isSuspended:       boolean = false;
-    #options:           MediaQueriesEventsOptions;
+    #breakpointsList:   FLib.Events.MediaqueriesEvents.Breakpoint[];
+    #currentBreakpoint: FLib.Events.MediaqueriesEvents.Breakpoint | undefined;
+    #functionHash:      Record<string, FLib.Events.MediaqueriesEvents.InternalCallbackType[]>;
+    #isSuspended        = false;
+    #options:           FLib.Events.MediaqueriesEvents.Options;
 
     #globalHashName     = '__globalHashName';
 
     /** Current active breakpoint */
-    get currentBreakpoint() {
+    get currentBreakpoint(): FLib.Events.MediaqueriesEvents.Breakpoint | undefined {
         return this.#currentBreakpoint;
     }
 
     /** List of all breakpoints */
-    get list() {
+    get list(): FLib.Events.MediaqueriesEvents.Breakpoint[] {
         return this.#breakpointsList;
     }
 
 
-    constructor( breakpointsList: MediaQueriesEventsListOptions[], userOptions: MediaQueriesEventsOptions ) {
+    constructor( breakpointsList: FLib.Events.MediaqueriesEvents.ListOptions[], userOptions: FLib.Events.MediaqueriesEvents.Options ) {
         const DEFAULT_OPTIONS = {
             "unit": "px"
         };
@@ -118,16 +122,16 @@ export default class MediaQueriesEvents {
 
         // Handlers
         this.#breakpointsList = breakpointsList.map( breakpointItem => {
-            const breakpoint: Breakpoint = {
+            const breakpoint: FLib.Events.MediaqueriesEvents.Breakpoint = {
                 ...breakpointItem,
-                "query": breakpointItem.query || this.createQuery( breakpointItem ),
+                "query": breakpointItem.query || this.#createQuery( breakpointItem ),
                 "handler": mql => {
                     if ( mql.matches ) {
                         this.#currentBreakpoint = breakpoint;
                     }
 
                     if ( !this.#isSuspended ) {
-                        this.update( breakpoint, mql.matches );
+                        this.#update( breakpoint, mql.matches );
                     }
                 },
                 "in": breakpointNameList => {
@@ -150,14 +154,14 @@ export default class MediaQueriesEvents {
             return breakpoint;
         });
 
-        this.#currentBreakpoint = this.getCurrentBreakpoint();
+        this.#currentBreakpoint = this.#getCurrentBreakpoint();
     }
 
 
     // TOOLS
 
 
-    private processList( list, breakpoint, isMatching ) {
+    #processList = ( list: FLib.Events.MediaqueriesEvents.InternalCallbackType[], breakpoint: FLib.Events.MediaqueriesEvents.Breakpoint, isMatching: boolean ): void => {
         list.forEach( obj => {
             if (
                 obj.type === 'both' ||
@@ -171,28 +175,28 @@ export default class MediaQueriesEvents {
 
 
     // Call each registered function
-    private update( breakpoint: Breakpoint, isMatching: boolean ): void {
+    #update = ( breakpoint: FLib.Events.MediaqueriesEvents.Breakpoint, isMatching: boolean ): void => {
         if ( this.#functionHash[ breakpoint.name ] && this.#functionHash[ breakpoint.name ].length ) {
-            this.processList( this.#functionHash[ breakpoint.name ], breakpoint, isMatching );
+            this.#processList( this.#functionHash[ breakpoint.name ], breakpoint, isMatching );
         }
 
         if ( this.#functionHash[ this.#globalHashName ].length ) {
-            this.processList( this.#functionHash[ this.#globalHashName ], breakpoint, isMatching );
+            this.#processList( this.#functionHash[ this.#globalHashName ], breakpoint, isMatching );
         }
     }
 
 
-    private getBreakpoint( breakpointName: string ): Breakpoint | undefined {
+    #getBreakpoint = ( breakpointName: string ): FLib.Events.MediaqueriesEvents.Breakpoint | undefined => {
         return this.#breakpointsList.find( bp => bp.name === breakpointName );
     }
 
 
-    private getCurrentBreakpoint(): Breakpoint | undefined {
+    #getCurrentBreakpoint = (): FLib.Events.MediaqueriesEvents.Breakpoint | undefined => {
         return this.#breakpointsList.find( bp => bp.query.matches );
     }
 
 
-    private createQuery( breakpoint: MediaQueriesEventsListOptions ): MediaQueryList {
+    #createQuery = ( breakpoint: FLib.Events.MediaqueriesEvents.ListOptions ): MediaQueryList => {
         let minQuery, maxQuery, query;
 
         if ( typeof breakpoint.min === 'number' ) {
@@ -226,18 +230,18 @@ export default class MediaQueriesEvents {
     /**
      * Return the value of the property with the name of the current breakpoint of an object
      *
-     * @param obj
-     *
      * @example
+     * ```ts
+     * // If the current breakpoint name is "small", it will return "val1"
      * mediaQueryEvent.getValue( { "small": "val1", "medium": "val2", ... } );
-     * Ih the current breakpoint name is "small", it will return "val1"
+     * ```
      */
-    getValue<Value>( obj: { [ key: string ]: Value } ): Value | undefined {
+    getValue<Value>( obj: Record<string, Value> ): Value | undefined {
         if ( !this.#currentBreakpoint ) {
             return;
         }
         return obj[ this.#currentBreakpoint.name ];
-    };
+    }
 
 
     /**
@@ -245,9 +249,9 @@ export default class MediaQueriesEvents {
      *
      * @param callback - Callback
      * @param breakpointName - Name of the breakpoint
-     * @param [type=MediaQueriesEvents.TYPE_ON_ENTER] - Select when the function will be called: when entering the query, when leaving it, or on both
+     * @param type - Select when the function will be called: when entering the query, when leaving it, or on both
     */
-    on( callback: MediaQueriesEventsCallback, breakpointName: string, type: MediaQueriesEventsCallbackType = 'enter' ): this {
+    on( callback: FLib.Events.MediaqueriesEvents.Callback, breakpointName: string, type: FLib.Events.MediaqueriesEvents.CallbackType = 'enter' ): this {
         if ( !this.#functionHash[ breakpointName ] ) {
             return this;
         }
@@ -264,15 +268,15 @@ export default class MediaQueriesEvents {
     /**
      * Unbind a function to be called on a specific breakpoint
      *
-     * @param {Function} callback - Function to remove from the registered function list
-     * @param {String} breakpointName - Name of the breakpoint
+     * @param callback - Function to remove from the registered function list
+     * @param breakpointName - Name of the breakpoint
     */
-    off( callback: MediaQueriesEventsCallback, breakpointName: string ): this {
+    off( callback: FLib.Events.MediaqueriesEvents.Callback, breakpointName: string ): this {
         if ( !this.#functionHash[ breakpointName ] ) {
             return this;
         }
 
-        let obj = this.#functionHash[ breakpointName ].find( o => o.callback === callback );
+        const obj = this.#functionHash[ breakpointName ].find( o => o.callback === callback );
 
         slice( this.#functionHash[ breakpointName ], obj );
 
@@ -283,10 +287,10 @@ export default class MediaQueriesEvents {
     /**
      * Register a function to be called on all media queries change
      *
-     * @param {MediaQueriesEvents_Handler} callback - Function to call on mediaquery change
-     * @param {String} [type=MediaQueriesEvents.TYPE_ON_ENTER] - Select when the function will be called: when entering the query, when leaving it, or on both
+     * @param callback - Function to call on mediaquery change
+     * @param type - Select when the function will be called: when entering the query, when leaving it, or on both
     */
-    register( callback: MediaQueriesEventsCallback, type: MediaQueriesEventsCallbackType = 'enter' ): this {
+    register( callback: FLib.Events.MediaqueriesEvents.Callback, type: FLib.Events.MediaqueriesEvents.CallbackType = 'enter' ): this {
         this.#functionHash[ this.#globalHashName ].push({
             callback,
             type
@@ -301,8 +305,8 @@ export default class MediaQueriesEvents {
      *
      * @param callback - Function to remove from the registered function list
     */
-    remove( callback: MediaQueriesEventsCallback ): this {
-        let obj = this.#functionHash[ this.#globalHashName ].find( o => o.callback === callback );
+    remove( callback: FLib.Events.MediaqueriesEvents.Callback ): this {
+        const obj = this.#functionHash[ this.#globalHashName ].find( o => o.callback === callback );
 
         slice( this.#functionHash[ this.#globalHashName ], obj );
 
@@ -318,7 +322,7 @@ export default class MediaQueriesEvents {
             return this;
         }
 
-        this.update( this.#currentBreakpoint, this.#currentBreakpoint.query.matches );
+        this.#update( this.#currentBreakpoint, this.#currentBreakpoint.query.matches );
 
         return this;
     }
@@ -329,7 +333,7 @@ export default class MediaQueriesEvents {
      *
      * @param callback - Function to call
      */
-    get( callback: MediaQueriesEventsCallback ): this {
+    get( callback: FLib.Events.MediaqueriesEvents.Callback ): this {
         if ( !this.#currentBreakpoint || !callback ) {
             return this;
         }
@@ -346,9 +350,7 @@ export default class MediaQueriesEvents {
      * @param breakpointName - Name of a breakpoint
      */
     is( breakpointName: string ): boolean {
-        let breakpoint;
-
-        breakpoint = this.getBreakpoint( breakpointName );
+        const breakpoint = this.#getBreakpoint( breakpointName );
 
         return breakpoint ? breakpoint.query.matches : false;
     }

package/Events/OnAnimationEnd.ts

@@ -4,12 +4,10 @@ import { animationendEventName } from '../Tools/PrefixedProperties';
 /**
  * Bind a one time animationend event on a DOM object
  *
- * @param $elem
- *
  * @example
+ * ```ts
  * onAnimationEnd( $elem ).then( () => {} );
  *
- * @example
  * // To remove the event binding, don't chain .then() directly after onAnimationEnd:
  * let animationEnd = onAnimationEnd( $element );
  * animationEnd.then( () => {} );
@@ -18,17 +16,18 @@ import { animationendEventName } from '../Tools/PrefixedProperties';
  *
  * // To watch for a animation end:
  * onAnimationEnd( $elem, {
- * "animationName": "name-of-my-css-animation"
+ * "animationName": [ "name-of-my-css-animation" ]
  * } )
  *
  * // To watch a animation end on a pseudo element like "::after":
  * onAnimationEnd( $elem, {
  * "pseudoElement": "after"
  * } )
+ * ```
  *
  * @returns Return a standard Promise + an .off() function to cancel event
  */
-export default function onAnimationEnd( $element: Element, options: { pseudoElement?: 'after' | 'before' | 'both', animationName?: string } = {} ): Promise<any> & { off(); } {
+export default function onAnimationEnd( $element: Element, options: { pseudoElement?: 'after' | 'before' | 'both', animationName?: string[] } = {} ): Promise<any> & { off(); } {
     let _resolve;
 
     const promise = new Promise( function( resolve ) {
@@ -44,7 +43,7 @@ export default function onAnimationEnd( $element: Element, options: { pseudoElem
     function onAnimationEnd( e ) {
         if (
             e.target !== $element ||
-            ( options.animationName && options.animationName !== e.animationName ) ||
+            ( options.animationName && !options.animationName.includes( e.animationName ) ) ||
             ( options.pseudoElement === 'after' && e.pseudoElement !== '::after' ) ||
             ( options.pseudoElement === 'before' && e.pseudoElement !== '::before' ) ||
             ( options.pseudoElement === 'both' && !e.pseudoElement ) ||

package/Events/OnTransitionEnd.ts

@@ -4,12 +4,11 @@ import { transitionendEventName }   from '../Tools/PrefixedProperties';
 /**
  * Bind a one time transitionend event on a DOM object
  *
- * @param $element
- *
  * @example
- * onTransitionEnd( $elem ).then( () => {} );
+ * onTransitionEnd( $elem ).then( () => `{}` );
  *
  * @example
+ * ```ts
  * // To remove the event binding, don't chain .then() directly after onTransitionEnd:
  * let transitionEnd = onTransitionEnd( $element );
  * transitionEnd.then( () => {} );
@@ -25,6 +24,7 @@ import { transitionendEventName }   from '../Tools/PrefixedProperties';
  * onTransitionEnd( $elem, {
  * "pseudoElement": "after"
  * } )
+ * ```
  *
  * @returns Return a standard Promise + an .off() function to cancel event
  */