@creative-web-solution/front-library 7.1.19 → 7.1.20

package/CHANGELOG.md

@@ -1,18 +1,28 @@
 # CHANGELOG
 
 
+## 7.1.20
+
+* Remove legacy Modernizr addons
+* Add CSSTween feature
+* [DragSlider] Refacto GSAP
+
+
 ## 7.1.19
 
 * [DragSlider] Fix variable init in goToItem
 
+
 ## 7.1.18
 
 * [DragSlider] Expose some properties + allow item index in goToItem function
 
+
 ## 7.1.17
 
 * [DragSlider] Rework + add refresh function
 
+
 ## 7.1.16
 
 * Fix doc
@@ -146,365 +156,3 @@
 
 Move to TypeScript
 
-
-## 6.2.5
-
-* Slider: expose list of slide objects + expose page number for each slide
-
-
-## 6.2.4
-
-* Accordion: add an option to avoid closing all tabs
-
-
-## 6.2.3
-
-* Update DragSlider module
-
-
-## 6.2.2
-
-* Add DragSlider module
-* Update touchdevice detection method
-* Slider:
-    * Add function to start and stop auto slide
-    * Fix display when no loop and several slides per page
-
-
-## 6.2.1
-
-* Add a scope to the package name for NPM publish
-* Update doc
-* Add CSS custom variable Modernizr test
-
-
-## 6.1.3
-
-* Add CSS property setter/getter function
-
-
-## 6.1.2
-
-* Fix event propagation on select skin button
-
-
-## 6.1.1
-
-* Handle idle state in "wait" function: `wait('idle').then(...)`
-
-
-## 6.1.0
-
-* General:
-    * Refactor
-    * Minor updates
-    * Cleanup
-    * Update Tweenlite 2.x to GSAP 3.x
-
-* MediaQueriesEvents:
-    * Add `getValue` function
-
-* ScrollSnap:
-    * Update Tweenlite 2.x to GSAP 3.x
-    * Move GSAP functions in options to override them and be able to use another library
-
-* Slider:
-    * Update Tweenlite 2.x to GSAP 3.x
-    * Move GSAP functions in options to override them and be able to use another library
-
-* Add new WegGL category
-    * Add GLImageTransition
-
-
-## 6.0.16
-
-* Autocomplete:
-    * Add resetField, resetResults and reset functions
-
-
-## 6.0.15
-
-* Helpers:
-    * Update debounce function
-
-
-## 6.0.14
-
-* SkinSelect:
-    * Fix item focus and scroll
-
-
-## 6.0.13
-
-* Autocomplete:
-    * Fix repeated query parameter
-
-
-## 6.0.12
-
-* Select skin
-    * Fix focus on load
-
-
-## 6.0.11
-
-* Autocomplete:
-    * Add `enable` and `disable` functions
-
-
-## 6.0.10
-
-* Validator:
-    * Change the default live validation event name on input text from 'change' to 'input'
-* DOM:
-    * Minor updates
-    * The `wrap` function now can handle an HTMLElement as second parameters
-* Autocomplete:
-    * Add a `showAll` function to display all items of the list in source mode.
-* SkinSelect:
-    * Add keyboard feature
-
-
-## 6.0.9
-
-* Validator:
-    * Update email validation Regular Expression
-    * Add a loose one: Add data-loose on the input to use it
-
-
-## 6.0.8
-
-* DOM/Class:
-    * Handle array of css classes
-    * Add sClass function to replace a class by another
-* Update extend and copy functions
-* Update UrlParser
-
-
-## 6.0.7
-
-* Slider: Fix init options bug on `moveByPage` property
-
-
-## 6.0.6
-
-* Validator: Fix live validation on input hidden
-
-
-## 6.0.5
-
-* Add new Accordion module
-* Add new Tabs module
-* Select element skin
-    * Update the updateOptions function
-    * Add setValid/setInvalid function
-* Add function to compute the distance between 2 coordinates
-* Rename history to HistoryController
-* Update input file skin
-* Add quick template module
-* ScrollSnap: Fix bug which occurs when you just tap into the element without moving
-
-
-## 6.0.4
-
-* Select element skin
-    * Improve init when skin elements already exist in the DOM
-
-
-## 6.0.3
-
-* Popin
-    * Add function to programmatically open and close the loading layer
-
-
-## 6.0.2
-
-* Validator
-    * Add live validation system
-    * Add getQueryFromForm function
-    * Update validator scaffolding. Split everything that was in `import { validatorTools } from '@creative-web-solution/front-library/Modules/Validator';` in the `@creative-web-solution/front-library/Modules/Validator/Tools` folder.
-
-
-## 6.0.1
-
-* Add notification module
-
-
-## 6.0.0
-
-**Not compatible with 5.x.x version**
-
-* Remove builder
-* Remove dependencies system to use classic JS `import` instead
-* Add function to export in `front-library` project hosted on GitHub
-* General files and folders renaming
-
-### ScrollSnap
-
-* Add new refresh options
-
-### Mediaqueries events
-
-* Add `on` and `off` function to bind specific breakpoint
-
-### EventsManager
-
-* Fix the auto unbind of the `one` function
-
-
-## 5.2.14
-
-* Fix SnapScroll bug
-
-
-## 5.2.13
-
-* Add IntersectObserver
-
-### Validator
-
-* Change `getRadioList` second paramater to an object with 2 properties: `selector` and `othersOnly`
-* Add the property `$otherRadioOfGroup` to Input object
-
-### Mediaqueries events
-
-* Remove parameter `callbackOnQuit`
-* Add the possibility to call function when entering, leaving a mediaquery or on both
-* Add 3 static properties: `MediaQueriesEvents.TYPE_ON_ENTER` , `MediaQueriesEvents.TYPE_ON_LEAVE`  and `MediaQueriesEvents.TYPE_ON_BOTH`
-* Add a new optional parameter `type` on `register` function wich accept on of the 3 static properties. By default, it's set to `MediaQueriesEvents.TYPE_ON_ENTER`
-
-
-## 5.2.12
-
-* Add dependencies
-* Update documentation
-
-### Validator
-
-* Rename validator tools function: `getAllGroup` ==> `getRadioList`, `isRadioGroupChecked` ==> `isRadioListChecked`
-* `getLabel` function now return a string or an array of string
-* Add new function `getLabelElement` to return label HTMLElement or an array of HTMLElement
-
-### Window events
-
-* Add new `viewportInfo` property
-* Rename property: `scrollPosition` ==> `scrollInfo`, `windowSize` ==> `windowInfo`, `documentSize` ==> `documentInfo`
-* Change callback function signature: `(windowSize, documentSize, scrollPosition, eventName) => {}` ==> `({windowInfo, documentInfo, scrollInfo, viewportInfo}, eventName, originalEvent) => {}`
-
-### History controller
-
-* Remove `getState` function and replace it by `state` property.
-
-
-## 5.2.11
-
-* Fix gesture callback target
-
-### Mediaqueries events
-
-* Add new properties (`currentBreakpoint`, `list`) and deprecate some functions
-* Add a new way of initialize breakpoint objects (`min` and `max` instead of `query`)
-* Add new `unit` options
-
-### Window events
-
-* Add new properties (scroll, windowSize, documentSize) and deprecate some functions
-
-
-## 5.2.10
-
-* Custom events: Fix DOM elements handling
-
-
-## 5.2.9
-
-* Popin: Allow manual handle of http error
-
-
-## 5.2.8
-
-* fetch: Add X-Requested-With header to fetch calls
-
-
-## 5.2.7
-
-* Gesture: Fix preventDefault and stopPropagation functions
-
-
-## 5.2.6
-
-* Update UrlParser: Convert non string value, add `getParam` function.
-
-
-## 5.2.5
-
-* Add `cssPositionning` option
-* Fix Autocomplete variable name in the select function
-* Fix click on items
-
-
-## 5.2.4
-
-* Fix AbortController support test
-
-
-## 5.2.3
-
-* Improve Scroll Snap
-
-
-## 5.2.2
-
-* Update Scroll Snap
-* Add color helper
-
-
-## 5.2.1
-
-* Remove native polyfill. Use Symfony polyfill package instead.
-* Allow to define gesture options on slider controls
-
-
-## 5.2.0
-
-* Replace Reqwest dependency with window.fetch
-* Replace Bean dependency with custom event manager
-* Remove mousewheel event manager. Use the on('wheel', ...) function from the event manager
-
-
-## 5.1.5
-
-* Fix extend function
-
-
-## 5.1.4
-
-* Fix options in gesture module
-* Fix scroll snap module
-
-
-## 5.1.2
-
-* Update gesture callbacks name
-    * touchstart => start
-    * touchmove => move
-    * touchend => end
-* Update gesture prevent default and stop propagation functions name
-    * preventTouchstart => preventStart
-    * stopPropagationTouchstart => stopPropagationStart
-    * preventTouchmove => preventMove
-    * stopPropagationTouchmove => stopPropagationMove
-    * preventTouchend => preventEnd
-    * stopPropagationTouchend => stopPropagationEnd
-
-
-## 5.1.1
-
-* Fix google map multiple call + typo
-
-
-## 5.1.0
-
-* Add new polyfill (Element.append, ...)
-* Add JSDoc
-* Add has-localstorage helper

package/Helpers/TransitionHelpers.ts

@@ -6,13 +6,13 @@ import { wait }           from './Wait';
 const KEY = Symbol( 'TransitionHelper' );
 
 
-function addWatcher( $element: HTMLElement, styleChange: ( $element: HTMLElement ) => (Promise<void> | any ), isAnimation: boolean, options: { delay?: 'idle' | number, pseudoElement?: 'after' | 'before' | 'both', property?: string[], animationName?: string[] } = {} ): Promise<HTMLElement> {
+function addWatcher( $element: HTMLElement, styleChange: ( $element: HTMLElement ) => (Promise<void> | any ), isAnimation: boolean, options: { delay?: 'idle' | number, pseudoElement?: 'after' | 'before' | 'both', properties?: string[], animationName?: string[] } = {} ): Promise<HTMLElement> {
     if ( $element[ KEY ] ) {
         $element[ KEY ].off();
     }
 
-    if ( typeof options.delay !== undefined ) {
-        options.delay = 'idle'
+    if ( typeof options.delay !== 'number' && options.delay !== 'idle') {
+        options.delay = 'idle';
     }
 
     $element[ KEY ] = isAnimation ?
@@ -21,17 +21,17 @@ function addWatcher( $element: HTMLElement, styleChange: ( $element: HTMLElement
                             "pseudoElement": options.pseudoElement
                         } ) :
                         onTransitionEnd( $element, {
-                            "property":      options.property,
+                            "property":      options.properties,
                             "pseudoElement": options.pseudoElement
                         } );
 
-    wait( options.delay ).then( () => styleChange( $element ) );
-
     $element[ KEY ].then( () => {
         $element[ KEY ] = null;
         return $element;
     } );
 
+    wait( options.delay ).then( () => styleChange( $element ) );
+
     return $element[ KEY ];
 }
 
@@ -54,7 +54,7 @@ function addWatcher( $element: HTMLElement, styleChange: ( $element: HTMLElement
  * } );
  * ```
  */
-export function transitionWatcher( $element: HTMLElement, styleChange: ( $element: HTMLElement ) => (Promise<void> | any ), options?: { delay: 'idle' | number, pseudoElement?: 'after' | 'before' | 'both', animationName?: string[] } ): Promise<HTMLElement> {
+export function transitionWatcher( $element: HTMLElement, styleChange: ( $element: HTMLElement ) => (Promise<void> | any ), options?: { delay?: 'idle' | number, pseudoElement?: 'after' | 'before' | 'both', properties?: string[], animationName?: string[] } ): Promise<HTMLElement> {
     return addWatcher( $element, styleChange, false, options );
 }
 
@@ -77,7 +77,7 @@ export function transitionWatcher( $element: HTMLElement, styleChange: ( $elemen
  * } );
  * ```
  */
- export function animationWatcher( $element: HTMLElement, animationStart: ( $element: HTMLElement ) => (Promise<void> | any ), options?: { delay: 'idle' | number, pseudoElement?: 'after' | 'before' | 'both', animationName?: string[] } ): Promise<HTMLElement> {
+ 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 );
 }
 

package/Modules/DragSlider.ts

@@ -6,8 +6,46 @@ import { prop }                    from '../DOM/Styles';
 import { aClass, rClass, tClass }  from '../DOM/Class';
 import { on, off }                 from '../Events/EventsManager';
 import { isTouchDevice }           from '../Tools/TouchDeviceSupport';
-import { copy }                    from '../Helpers/Extend';
-
+import { extend }                  from '../Helpers/Extend';
+
+const defaultOptions = {
+    swipeTresholdMin: 40,
+    swipeTresholdSize: 0.5,
+    lockedClass: 'is-locked',
+    _animReset: function($list) {
+        gsap.set( $list, {
+            "x": 0,
+            "y": 0,
+            "z": 0
+        } );
+    },
+    _animClear: function($list) {
+        gsap.set( $list, {
+            "clearProps": "all"
+        } );
+    },
+    _animKill: function($list) {
+        gsap.killTweensOf( $list );
+    },
+    _animMoveItem: function($list, x, onUpdate) {
+        return gsap.to( $list, {
+            "duration": 0.3,
+            "x":        x,
+            "y":        0,
+            "z":        0,
+            "onUpdate": function() {
+                onUpdate(gsap.getProperty( this.targets()[ 0 ], 'x' ));
+            }
+        } );
+    },
+    _setCoordinates: function($list, x) {
+        gsap.set( $list, {
+            "x": x,
+            "y": 0,
+            "z": 0
+        } );
+    }
+}
 
 /**
  * DragSlider
@@ -56,9 +94,9 @@ export default class DragSlider {
     }
 
 
-    constructor( $slider: HTMLElement, options: Partial<FLib.DragSlider.Options> ) {
+    constructor( $slider: HTMLElement, userOptions: Partial<FLib.DragSlider.Options> ) {
 
-        if ( !options.viewportSelector || !options.listSelector || !options.itemSelector || !options.dragClass ) {
+        if ( !userOptions.viewportSelector || !userOptions.listSelector || !userOptions.itemSelector || !userOptions.dragClass ) {
             throw '[Drag Slider]: Missing at least one of viewportSelector, listSelector, itemSelector, dragClass';
         }
 
@@ -66,11 +104,7 @@ export default class DragSlider {
 
         this.#isDraggingActive = false;
 
-        this.#options = copy( options );
-
-        this.#options.swipeTresholdMin  = options.swipeTresholdMin || 40;
-        this.#options.swipeTresholdSize = options.swipeTresholdSize || 0.5;
-        this.#options.lockedClass       = options.lockedClass || 'is-locked';
+        this.#options = extend( defaultOptions, userOptions );
 
         this.#itemArray = [];
 
@@ -95,8 +129,6 @@ export default class DragSlider {
             return;
         }
 
-        const LAST_INDEX = this.#$items.length - 1;
-
         this.#viewportInfo    = offset( this.#$viewport as HTMLElement );
         this.#siteOffsetLeft  = parseInt( prop( (this.#$items[ 0 ] as HTMLElement), 'marginLeft' ), 10 );
 
@@ -107,12 +139,8 @@ export default class DragSlider {
 
         if ( !this.#isDraggingActive ) {
             this.#isDragging = false;
-            gsap.killTweensOf( this.#$list );
-            gsap.set( this.#$list, {
-                "x": 0,
-                "y": 0,
-                "z": 0
-            } );
+            this.#options._animKill( this.#$list );
+            this.#options._animReset( this.#$list );
         }
 
         tClass( this.#$slider, this.#options.lockedClass, !this.#isDraggingActive );
@@ -168,8 +196,7 @@ export default class DragSlider {
     }
 
 
-    #snapToItemAnimation =  ( snapItem: FLib.DragSlider.Item ): gsap.core.Tween | void => {
-
+    #snapToItemAnimation =  ( snapItem: FLib.DragSlider.Item ): Promise<any> | void => {
         if (!snapItem) {
             return;
         }
@@ -203,26 +230,17 @@ export default class DragSlider {
 
         this.#currentSnapItem = snapItem;
 
-        const TWEEN = gsap.to( this.#$list as HTMLElement, {
-            "duration": 0.3,
-            "x":        finalX,
-            "y":        0,
-            "z":        0,
-            "onUpdateParams": [ this ],
-            "onUpdate": function( ctx ) {
-                ctx.#deltaMove.x = gsap.getProperty( this.targets()[ 0 ], 'x' ) as number;
-
-                ctx.#options.onSnapUpdate?.( {
-                    "item":        snapItem,
-                    "xPos":        ctx.#deltaMove.x,
-                    "moveMaxSize": ctx.#listDelta,
-                    "isAtStart":   IS_SNAP_TO_START,
-                    "isAtEnd":     IS_SNAP_TO_END
-                } );
-            }
-        } );
+        return this.#options._animMoveItem( this.#$list, finalX, (newX) => {
+            this.#deltaMove.x = newX;
 
-        return TWEEN
+            this.#options.onSnapUpdate?.( {
+                "item":        snapItem,
+                "xPos":        this.#deltaMove.x,
+                "moveMaxSize": this.#listDelta,
+                "isAtStart":   IS_SNAP_TO_START,
+                "isAtEnd":     IS_SNAP_TO_END
+            } );
+        } );
     }
 
 
@@ -247,7 +265,7 @@ export default class DragSlider {
 
 
     #getFirstNextItem = ( xPos: number ): { snapItem: FLib.DragSlider.Item, snapToEnd: boolean } => {
-        let lastDelta, snapItem;
+        let snapItem;
 
         const absXPos = Math.abs( xPos );
 
@@ -256,7 +274,6 @@ export default class DragSlider {
                 continue;
             }
 
-            lastDelta = Math.abs( absXPos - item.info.left );
             snapItem  = item;
             break;
         }
@@ -328,10 +345,11 @@ export default class DragSlider {
 
         this.#isDragging = true;
 
-        gsap.killTweensOf( this.#$list );
+        this.#options._animKill( this.#$list );
 
         this.#startDragCoords = coords;
         this.#listDelta       = this.#viewportInfo.width - this.#$list.scrollWidth;
+        this.#deltaMove.newX  = this.#deltaMove.x;
 
         gesture( document.body, 'dragSlider', {
             "move":        this.#onMove,
@@ -371,11 +389,7 @@ export default class DragSlider {
             this.#deltaMove.newX = this.#listDelta;
         }
 
-        gsap.set( this.#$list as HTMLElement, {
-            "x": this.#deltaMove.newX,
-            "y": 0,
-            "z": 0
-        } );
+        this.#options._setCoordinates(this.#$list, this.#deltaMove.newX);
 
         this.#options.onDrag?.( {
             "item":        this.#currentSnapItem,
@@ -443,7 +457,7 @@ export default class DragSlider {
     }
 
 
-    next(): gsap.core.Tween | void {
+    next(): Promise<any> | void {
         const CURRENT_ITEM = this.#currentSnapItem as FLib.DragSlider.Item;
 
         if ( !this.#isDraggingActive || !this.#itemArray[ CURRENT_ITEM.index + 1 ] ) {
@@ -454,7 +468,7 @@ export default class DragSlider {
     }
 
 
-    previous(): gsap.core.Tween | void {
+    previous(): Promise<any> | void {
         const CURRENT_ITEM = this.#currentSnapItem as FLib.DragSlider.Item;
 
         if ( !this.#isDraggingActive || CURRENT_ITEM.isFirst ) {
@@ -465,7 +479,7 @@ export default class DragSlider {
     }
 
 
-    goToItem( blockOrIndex: HTMLElement | number ): gsap.core.Tween | void {
+    goToItem( blockOrIndex: HTMLElement | number ): Promise<any> | void {
 
         if ( !this.#isDraggingActive ) {
             return;
@@ -500,25 +514,17 @@ export default class DragSlider {
             "isAtEnd":     this.#deltaMove.x === this.#listDelta
         } );
 
-        return gsap.to( this.#$list as HTMLElement, {
-            "duration": 0.3,
-            "x":        -1 * ITEM.info.left + this.#siteOffsetLeft,
-            "y":        0,
-            "z":        0,
-            "onUpdateParams": [ this ],
-            "onUpdate": function( ctx ) {
-
-                ctx.#deltaMove.x = gsap.getProperty( this.targets()[ 0 ], 'x' ) as number;
-
-                ctx.#options.onSnapUpdate?.( {
-                    "item":        ITEM,
-                    "xPos":        ctx.#deltaMove.x,
-                    "moveMaxSize": ctx.#listDelta,
-                    "isAtStart":   ctx.#deltaMove.x === 0,
-                    "isAtEnd":     ctx.#deltaMove.x === ctx.#listDelta
-                } );
-            }
-        } );
+        return this.#options._animMoveItem(this.#$list, -1 * ITEM.info.left + this.#siteOffsetLeft, (x) => {
+            this.#deltaMove.x = x;
+
+            this.#options.onSnapUpdate?.( {
+                "item":        ITEM,
+                "xPos":        this.#deltaMove.x,
+                "moveMaxSize": this.#listDelta,
+                "isAtStart":   this.#deltaMove.x === 0,
+                "isAtEnd":     this.#deltaMove.x === this.#listDelta
+            } );
+        });
     }
 
     refresh = (): this => {
@@ -634,11 +640,8 @@ export default class DragSlider {
         } );
 
         if ( this.#$list ) {
-            gsap.killTweensOf( this.#$list );
-
-            gsap.set( this.#$list, {
-                "clearProps": "all"
-            } );
+            this.#options._animKill( this.#$list );
+            this.#options._animClear( this.#$list );
         }
 
         this.#$viewport && rClass( this.#$viewport, this.#options.dragClass );

package/README.md

@@ -1,6 +1,6 @@
 # Front Library
 
-@version: 7.1.19
+@version: 7.1.20
 
 
 ## Use

package/Types/DOM.d.ts

@@ -29,13 +29,54 @@ declare namespace FLib {
 
 
     namespace Matrix {
+        type Matrix3D = {
+            a1: number;
+            b1: number;
+            c1: number;
+            d1: number;
+            a2: number;
+            b2: number;
+            c2: number;
+            d2: number;
+            a3: number;
+            b3: number;
+            c3: number;
+            d3: number;
+            a4: number;
+            b4: number;
+            c4: number;
+            d4: number;
+        }
+
+        type Matrix2D = {
+            a1: number;
+            b1: number;
+            c1: number;
+            a2: number;
+            b2: number;
+            c2: number;
+            a3: number;
+            b3: number;
+            c3: number;
+        }
 
-        type Translate = {
+        type Translation = {
             tx: number;
             ty: number;
             tz: number;
         }
 
+        type Rotation = {
+            rx: number;
+            ry: number;
+            rz: number;
+        }
+
+        type Scale = {
+            sx: number;
+            sy: number;
+            sz: number;
+        }
 
         type Transform = {
             tx: number;
@@ -44,26 +85,9 @@ declare namespace FLib {
             rx: number;
             ry: number;
             rz: number;
-        }
-
-
-        type Matrix = {
-            m11: number;
-            m21: number;
-            m31: number;
-            m41: number;
-            m12: number;
-            m22: number;
-            m32: number;
-            m42: number;
-            m13: number;
-            m23: number;
-            m33: number;
-            m43: number;
-            m14: number;
-            m24: number;
-            m34: number;
-            m44: number;
+            sx: number;
+            sy: number;
+            sz: number;
         }
     }
 }

package/Types/DragSlider.d.ts

@@ -51,6 +51,11 @@ declare namespace FLib {
              * @defaultValue 0.5
             */
             swipeTresholdSize:number;
+            _animReset: ($list) => void;
+            _animClear: ($list) => void;
+            _animKill: ($list) => void;
+            _animMoveItem: ($list, x, onUpdate) => Promise<any> | void;
+            _setCoordinates: ($list, x) => void;
         }
     }
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@creative-web-solution/front-library",
   "title": "Frontend library",
   "description": "Frontend functions and modules",
-  "version": "7.1.19",
+  "version": "7.1.20",
   "homepage": "https://github.com/creative-web-solution/front-library",
   "author": "Creative Web Solution <contact@cws-studio.com> (https://www.cws-studio.com)",
   "keywords": [],

package/DOM/Matrix.ts

@@ -1,142 +0,0 @@
-import { prop }                  from './Styles';
-import { transformPropertyName } from '../Tools/PrefixedProperties';
-
-/**
- * Get the matrix of a DOM element
- *
- * @example
- * ```ts
- * { m11, m21, m31, m41, m12, m22, m32, m42, m13, m23, m33, m43, m14, m24, m34, m44 } = getMatrix ( $elem )
- * ```
- *
- * @returns the translate properties
- */
-export function getMatrix( $elem: Element ): FLib.Matrix.Matrix {
-    let matrix: FLib.Matrix.Matrix;
-
-    const matrixString = prop( $elem, transformPropertyName );
-    const c            = matrixString.split( /\s*[(),]\s*/ ).slice( 1, -1 );
-
-    if ( c.length === 6 ) {
-        // 'matrix()' (3x2)
-        matrix = {
-            "m11": +c[ 0 ],
-            "m21": +c[ 2 ],
-            "m31": 0,
-            "m41": +c[ 4 ],
-            "m12": +c[ 1 ],
-            "m22": +c[ 3 ],
-            "m32": 0,
-            "m42": +c[ 5 ],
-            "m13": 0,
-            "m23": 0,
-            "m33": 1,
-            "m43": 0,
-            "m14": 0,
-            "m24": 0,
-            "m34": 0,
-            "m44": 1
-        };
-    }
-    else if ( c.length === 16 ) {
-        // matrix3d() (4x4)
-        matrix = {
-            "m11": +c[ 0 ],
-            "m21": +c[ 4 ],
-            "m31": +c[ 8 ],
-            "m41": +c[ 12 ],
-            "m12": +c[ 1 ],
-            "m22": +c[ 5 ],
-            "m32": +c[ 9 ],
-            "m42": +c[ 13 ],
-            "m13": +c[ 2 ],
-            "m23": +c[ 6 ],
-            "m33": +c[ 10 ],
-            "m43": +c[ 14 ],
-            "m14": +c[ 3 ],
-            "m24": +c[ 7 ],
-            "m34": +c[ 11 ],
-            "m44": +c[ 15 ]
-        };
-    }
-    else {
-        // handle 'none' or invalid values.
-        matrix = {
-            "m11": 1,
-            "m21": 0,
-            "m31": 0,
-            "m41": 0,
-            "m12": 0,
-            "m22": 1,
-            "m32": 0,
-            "m42": 0,
-            "m13": 0,
-            "m23": 0,
-            "m33": 1,
-            "m43": 0,
-            "m14": 0,
-            "m24": 0,
-            "m34": 0,
-            "m44": 1
-        };
-    }
-
-    return matrix;
-}
-
-
-/**
- * Get the translation values of a DOM element
- *
- * @example
- * ```ts
- * { tx, ty, tz } = getTranslate ( $elem )
- * ```
- *
- * @returns the translate properties
- */
-export function getTranslate( $elem: Element ): FLib.Matrix.Translate {
-    const matrix: FLib.Matrix.Matrix = getMatrix( $elem );
-
-    return {
-        "tx": matrix.m41,
-        "ty": matrix.m42,
-        "tz": matrix.m43
-    };
-}
-
-
-/**
- * Get the transform values of a DOM element
- *
- * @example
- * ```ts
- * { tx, ty, tz, rx, ry, rz } = getTransform ( $elem )
- * ```
- *
- * @returns the transform properties
- */
-export function getTransform( $elem: Element ): FLib.Matrix.Transform {
-    let rotateX: number, rotateZ: number;
-
-    const matrix: FLib.Matrix.Matrix = getMatrix( $elem );
-    const rotateY: number = Math.asin( -matrix.m13 );
-
-    if ( Math.cos(rotateY) !== 0 ) {
-        rotateX = Math.atan2( matrix.m23, matrix.m33 );
-        rotateZ = Math.atan2( matrix.m12, matrix.m11 );
-    }
-    else {
-        rotateX = Math.atan2( -matrix.m31, matrix.m22 );
-        rotateZ = 0
-    }
-
-    return {
-        "rx": rotateX,
-        "ry": rotateY,
-        "rz": rotateZ,
-        "tx": matrix.m41,
-        "ty": matrix.m42,
-        "tz": matrix.m43
-    };
-}