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

package/CHANGELOG.md

@@ -1,6 +1,21 @@
 # CHANGELOG
 
 
+## 7.1.0
+
+* Typescript cleanup
+* Remove micro templating modules
+* Fix Validator missing files
+
+**Compatibility warning:**
+
+* SkinSelect: Change templating system
+* Popin: Change templating system
+* onImageLoad and onAllImagesLoad:
+    * Update function signature
+    * Update callback param from array to hash
+
+
 ## 7.0.7
 
 * Add transition helpers function : `transitionWatcher`, `animationWatcher` and `killWatcher`

package/DOM/Class.ts

@@ -11,7 +11,7 @@ function normalizeCssClass( cssClass: string[] | string ): string[] {
 }
 
 
-function isIterable( obj: ClassInputType ): boolean {
+function isIterable( obj: FLib.DOM.ClassInput ): boolean {
     return ( obj instanceof NodeList || obj instanceof Array ) && typeof obj.forEach !== 'undefined'
 }
 
@@ -30,7 +30,7 @@ function applyToggle( $element: Element, cleanedCssClass: string[], forceAdd?: b
 
 
 // Use to toggle class only
-function classToggle( $elements: ClassInputType, cssClass: string | string[], forceAdd?: boolean ): ClassInputType {
+function classToggle( $elements: FLib.DOM.ClassInput, cssClass: string | string[], forceAdd?: boolean ): FLib.DOM.ClassInput {
     const cleanedCssClass: string[] = normalizeCssClass( cssClass );
 
     if ( isIterable( $elements ) ) {
@@ -47,7 +47,7 @@ function classToggle( $elements: ClassInputType, cssClass: string | string[], fo
 
 
 // Used to add/remove class only
-function classChange( $elements: ClassInputType, cssClass: string | string[], add: boolean ): ClassInputType {
+function classChange( $elements: FLib.DOM.ClassInput, cssClass: string | string[], add: boolean ): FLib.DOM.ClassInput {
     const functionName: 'add' | 'remove' = add ? 'add' : 'remove';
     const cleanedCssClass: string[]      = normalizeCssClass( cssClass );
 
@@ -86,8 +86,6 @@ function classReplace( $element: Element, oldCssClass: string, newCssClass:strin
  *
  * @example
  * boolean = hClass( $element, "css-class" )
- *
- * @return - true if a class is present on a DOM element
  */
 export function hClass( $element: Element, cssClass: string ): boolean {
     return $element.classList.contains( cssClass );
@@ -105,7 +103,7 @@ export function hClass( $element: Element, cssClass: string ): boolean {
  *
  * @returns $elements
  */
-export function aClass( $elements: ClassInputType, cssClass: string | string[] ): ClassInputType {
+export function aClass( $elements: FLib.DOM.ClassInput, cssClass: string | string[] ): FLib.DOM.ClassInput {
     return classChange( $elements, cssClass, true );
 }
 
@@ -120,7 +118,7 @@ export function aClass( $elements: ClassInputType, cssClass: string | string[] )
  *
  * @returns $elements
  */
-export function rClass( $elements: ClassInputType, cssClass: string | string[] ): ClassInputType {
+export function rClass( $elements: FLib.DOM.ClassInput, cssClass: string | string[] ): FLib.DOM.ClassInput {
     return classChange( $elements, cssClass, false );
 }
 
@@ -140,7 +138,7 @@ export function rClass( $elements: ClassInputType, cssClass: string | string[] )
  *
  * @returns $elements
  */
-export function tClass( $elements: ClassInputType, cssClass: string | string[], forceAdd?: boolean ): ClassInputType {
+export function tClass( $elements: FLib.DOM.ClassInput, cssClass: string | string[], forceAdd?: boolean ): FLib.DOM.ClassInput {
     return classToggle(
         $elements,
         cssClass,
@@ -153,16 +151,16 @@ export function tClass( $elements: ClassInputType, cssClass: string | string[],
  * Replace a css class by another.
  * Remove oldCssClass and add newCssClass only if oldCssClass exists
  *
- * @param $elements
- * @param oldCssClass
- * @param newCssClass
+ * @param $elements - DOM element or array of DOM element
+ * @param oldCssClass - Class name to replace
+ * @param newCssClass - Class name used to replace the old one
  *
  * @example
  * sClass( $elements, "old-css-class", "new-css-class" )
  *
  * @returns $elements
  */
-export function sClass( $elements: ClassInputType, oldCssClass: string, newCssClass: string ): ClassInputType {
+export function sClass( $elements: FLib.DOM.ClassInput, oldCssClass: string, newCssClass: string ): FLib.DOM.ClassInput {
 
     if ( isIterable( $elements ) ) {
         ($elements as Element[]).forEach( $element => {

package/DOM/DocumentSize.ts

@@ -2,9 +2,11 @@
  * Get the current document size
  *
  * @example
+ * ```ts
  * { width, height } = documentSize()
+ * ```
  */
-export function documentSize(): DOMSizeType {
+export function documentSize(): FLib.DOM.Size {
     return {
         "height": document.documentElement.scrollHeight,
         "width":  document.documentElement.scrollWidth

package/DOM/Filter.ts

@@ -6,8 +6,6 @@
  *
  * @example
  * filteredArray = filter( $elements, 'div.some-class' );
- *
- * @return Filtered list
  */
 export function filter( $elements: NodeList | Element[], selector: string ): Element[] {
     const $filteredElements: Element[] = [];

package/DOM/Index.ts

@@ -1,15 +1,13 @@
 /**
  * Return the index of a DOM element
  *
- * @param $element
- *
  * @example
  * elementIndex = index( $element );
  *
  * @returns - Position (starting at 0) of the element in the DOM list is belong to. -1 if there is no parentNode.
  */
 export function index( $element: Element ): number {
-    let $child: ChildNode | null, idx: number;
+    let $child: ChildNode | null, idx: number;
 
     if ( !$element.parentNode ) {
         return -1;

package/DOM/Manipulation.ts

@@ -70,8 +70,6 @@ export function insertAfter( $what: Element, $after: Element ): Element {
 /**
  * Clone a DOM element
  *
- * @param $element
- *
  * @example
  * $clonedElement = clone( $element )
  *
@@ -85,7 +83,6 @@ export function clone( $element: Node ): Node {
 /**
  * Remove an element from the DOM
  *
- * @param $element
  * @param $parentNode - If undefined the parentNode will be used
  *
  * @example

package/DOM/Matrix.ts

@@ -4,15 +4,15 @@ import { transformPropertyName } from '../Tools/PrefixedProperties';
 /**
  * Get the matrix of a DOM element
  *
- * @param $elem
- *
  * @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 ): MatrixMatrixType {
-    let matrix: MatrixMatrixType;
+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 );
@@ -88,15 +88,15 @@ export function getMatrix( $elem: Element ): MatrixMatrixType {
 /**
  * Get the translation values of a DOM element
  *
- * @param $elem
- *
  * @example
+ * ```ts
  * { tx, ty, tz } = getTranslate ( $elem )
+ * ```
  *
  * @returns the translate properties
  */
-export function getTranslate( $elem: Element ): MatrixTranslateType {
-    const matrix: MatrixMatrixType = getMatrix( $elem );
+export function getTranslate( $elem: Element ): FLib.Matrix.Translate {
+    const matrix: FLib.Matrix.Matrix = getMatrix( $elem );
 
     return {
         "tx": matrix.m41,
@@ -109,17 +109,17 @@ export function getTranslate( $elem: Element ): MatrixTranslateType {
 /**
  * Get the transform values of a DOM element
  *
- * @param $elem
- *
  * @example
+ * ```ts
  * { tx, ty, tz, rx, ry, rz } = getTransform ( $elem )
+ * ```
  *
  * @returns the transform properties
  */
-export function getTransform( $elem: Element ): MatrixTransformType {
+export function getTransform( $elem: Element ): FLib.Matrix.Transform {
     let rotateX: number, rotateZ: number;
 
-    const matrix: MatrixMatrixType = getMatrix( $elem );
+    const matrix: FLib.Matrix.Matrix = getMatrix( $elem );
     const rotateY: number = Math.asin( -matrix.m13 );
 
     if ( Math.cos(rotateY) !== 0 ) {

package/DOM/Offset.ts

@@ -10,26 +10,25 @@ function getWindow( $element: Window | Document ): Window | null {
 /**
  * Get the transform values of a DOM element
  *
- * @param $element
  * @param isRelativeToViewport - If true, the position is computed relatively to the viewport (top/left of the browser) and not the top/left of the document. This mean, it doesn't take the scroll in count.
  * @param $relativeTo - Optional, compute top and left relatively to another Element
  *
  * @example
+ * ```ts
  * // Get offset from the top/left of the document
  * { width, height, top, left, bottom, right } = offset( $element )
  *
- * @example
  * // Same without taking the scroll position in count (top/left of the browser).
  * result = offset( $element, true )
  *
- * @example
  * // Get offset relatively from another element
  * result = offset( $element, false, $target )
+ * ```
  *
  * @returns the offset properties
  */
-export function offset( $element: Element, isRelativeToViewport?: boolean, $relativeTo?: Element ): OffsetType {
-    let $window, rootValue, box: OffsetType;
+export function offset( $element: Element, isRelativeToViewport?: boolean, $relativeTo?: Element ): FLib.DOM.Offset {
+    let $window, rootValue, box: FLib.DOM.Offset;
 
     box             = { "top": 0, "y": 0, "left": 0, "x": 0, "right": 0, "bottom": 0, "width": 0, "height": 0 };
     const $document = $element && $element.ownerDocument;

package/DOM/OuterSize.ts

@@ -3,10 +3,10 @@ import { getStyle } from './Styles';
 
 function getOuterDim(
     $element: HTMLElement,
-    border: boolean = false,
-    margin: boolean = false,
+    border = false,
+    margin = false,
     dimensionName?: string
-): DOMSizeType {
+): FLib.DOM.Size {
     let size, elementStyle;
 
 
@@ -43,21 +43,21 @@ function getOuterDim(
 /**
  * Get the outside width of a DOM element
  *
- * @param $element
  * @param border - Include border width?
  * @param margin - Include margin width?
  *
  * @example
+ * ```ts
  * // width including padding
  * elementWidth = outerWidth($element)
  *
- * @example
  * // width including padding, border and margin
  * elementWidth = outerWidth($element, true, true)
+ * ```
  *
  * @returns The width of the object
  */
-export function outerWidth( $element: HTMLElement, border: boolean = false, margin: boolean = false ): number {
+export function outerWidth( $element: HTMLElement, border = false, margin = false ): number {
     return getOuterDim(
         $element,
         border,
@@ -70,21 +70,21 @@ export function outerWidth( $element: HTMLElement, border: boolean = false, marg
 /**
  * Get the outside height of a DOM element
  *
- * @param $element
  * @param border - Include border width?
  * @param margin - Include margin width?
  *
  * @example
+ * ```ts
  * // height including padding
  * elementHeight = outerHeight($element)
  *
- * @example
  * // height including padding, border and margin
  * elementHeight = outerHeight($element, true, true)
+ * ```
  *
  * @returns the height of the object
  */
-export function outerHeight( $element: HTMLElement, border: boolean = false, margin: boolean = false ): number {
+export function outerHeight( $element: HTMLElement, border = false, margin = false ): number {
     return getOuterDim(
         $element,
         border,
@@ -97,21 +97,21 @@ export function outerHeight( $element: HTMLElement, border: boolean = false, mar
 /**
  * Get the outside size of a DOM element
  *
- * @param $element
  * @param border - Include border width?
  * @param margin - Include margin width?
  *
  * @example
+ * ```ts
  * // size including padding
  * {width, height} = outerSize($element)
  *
- * @example
  * // height including padding, border and margin
  * size = outerSize($element, true, true)
+ * ```
  *
  * @returns The width and height of the object
  */
-export function outerSize( $element: HTMLElement, border: boolean = false, margin: boolean = false ): DOMSizeType {
+export function outerSize( $element: HTMLElement, border = false, margin = false ): FLib.DOM.Size {
     return getOuterDim(
         $element,
         border,

package/DOM/PageToDOM.ts

@@ -232,10 +232,10 @@ function string2dom( html: string, callback: ( document: Document, destroy: () =
 /**
  * Convert a whole HTML page string in a document
  *
- * @param html
- *
  * @example
+ * ```ts
  * pageToDOM( html ).then( $document => {} )
+ * ```
  *
  * @returns a Promise with the converted document in parameter
  */

package/DOM/Position.ts

@@ -2,18 +2,18 @@
  * Return the position of an element or
  * The position relative to another element
  *
- * @param $element
  * @param $target - If set, the position of $element will be computed relatively to this element
  *
  * @example
+ * ```ts
  * { top, left } = position( $element )
  *
- * @example
  * { top, left } = position( $element, $target )
+ * ```
  *
  * @returns The coordinate of the object
  */
-export function position( $element: HTMLElement, $target?: HTMLElement ): DOMPositionType {
+export function position( $element: HTMLElement, $target?: HTMLElement ): FLib.DOM.Position {
 
     if ( !$target ) {
         return {

package/DOM/Size.ts

@@ -4,8 +4,6 @@ import { prop, getStyle } from './Styles';
 /**
  * Compute the width of an element
  *
- * @param $element
- *
  * @example
  * elementWidth = width( $element )
  *
@@ -19,8 +17,6 @@ export function width( $element: Element ): number {
 /**
  * Compute the height of an element
  *
- * @param $element
- *
  * @example
  * elementHeight = height( $element )
  *
@@ -34,14 +30,14 @@ export function height( $element: Element ): number {
 /**
  * Compute the size of an element
  *
- * @param $element
- *
  * @example
+ * ```ts
  * {width, height} = size( $element )
+ * ```
  *
  * @returns The width and height of an element
  */
-export function size( $element: Element ): DOMSizeType {
+export function size( $element: Element ): FLib.DOM.Size {
     const style  = getStyle( $element );
     const width  = style[ 'width' ];
     const height = style[ 'height' ];

package/DOM/StrToDOM.ts

@@ -1,7 +1,6 @@
 /**
  * Convert an html string into a DOM object
  *
- * @param html
  * @param tag - Used to create an element to convert html inside. 'DIV' by default
  *
  * @example

package/DOM/Styles.ts

@@ -1,8 +1,6 @@
 /**
  * Return the style of a DOM element
  *
- * @param $element
- *
  * @example
  * styles = getStyle($element)
  */
@@ -14,32 +12,28 @@ export function getStyle( $element: Element ): CSSStyleDeclaration {
 /**
  * Return the value of a style property of a DOM element
  *
- * @param $element
  * @param property - Camel case property name
  *
  * @example
  * styles = prop($element, 'marginTop')
  */
 export function prop( $element: Element, property: string ): string {
-    return getStyle( $element )[ <any>property ];
+    return getStyle( $element )[ property ];
 }
 
 
 /**
  * Set a CSS property on an element
  *
- * @param $element
- * @param property
- * @param value
- *
  * @example
+ * ```ts
  * $element = setCssVar($element, '--my-var', '12px')
  *
- * @example
  * $element = setCssVar($element, {
  *  "--my-var":   "12px",
  *  "--my-var-2": "100%"
  * })
+ * ```
  *
  * @returns $element
  */
@@ -62,9 +56,6 @@ export function setCssProperty(
 /**
  * Get a CSS property of an element
  *
- * @param $element
- * @param property
- *
  * @example
  * value = getCssProperty($element, '--my-var')
  */

package/DOM/Traversing.ts

@@ -1,8 +1,6 @@
 /**
  * Return the next element in the DOM
  *
- * @param $element
- *
  * @example
  * $nextElement = next($element)
  *
@@ -16,8 +14,6 @@ export function next( $element: Element ): Element | null {
 /**
  * Return the previous element in the DOM
  *
- * @param $element
- *
  * @example
  * $previousElement = previous($element)
  *
@@ -31,8 +27,6 @@ export function previous( $element: Element ): Element | null {
 /**
  * Return all the children of a DOM element
  *
- * @param $element
- *
  * @example
  * $elements = children($element)
  */

package/DOM/WindowScroll.ts

@@ -2,11 +2,13 @@
  * Get the scroll position of the window
  *
  * @example
+ * ```ts
  * {top, left} = scroll()
+ * ```
  *
  * @returns The position of the scroll
  */
-export function windowScroll(): DOMPositionType {
+export function windowScroll(): FLib.DOM.Position {
     let sx, sy, d, r, b;
 
     if ( window.pageYOffset !== undefined ) {

package/DOM/WindowSize.ts

@@ -2,11 +2,13 @@
  * Get the size of the window
  *
  * @example
+ * ```ts
  * {width, height} = windowSize()
+ * ```
  *
  * @returns The width and height of the window
  */
-export function windowSize(): DOMSizeType {
+export function windowSize(): FLib.DOM.Size {
     return {
         "width":  window.innerWidth,
         "height": window.innerHeight

package/DOM/Wrap.ts

@@ -4,7 +4,6 @@ import { isString } from '../Helpers/Type';
 /**
  * Wrap a DOM element in another
  *
- * @param $element
  * @param tag - String example: <span></span>
  *
  * @example