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

package/WebGL/GLImageTransition/Presets/Fade.ts

@@ -1,9 +1,9 @@
 /**
  * Simple fade between 2 images
  */
-export default class Fade implements GLImageTransitionPreset {
+export default class Fade implements FLib.GLImageTransition.Preset {
 
-    get fsSource() {
+    get fsSource(): string {
         return `
             #ifdef GL_ES
             precision mediump float;
@@ -27,5 +27,4 @@ export default class Fade implements GLImageTransitionPreset {
             }
         `;
     }
-
 }

package/WebGL/GLImageTransition/Presets/HorizontalMovingGrid.ts

@@ -2,7 +2,7 @@
  * Reveal the next image by moving horizontally the columns of a "grid"
  * Insipred by @patriciogv's Ikeda Data Stream - 2015
  */
-export default class HorizontalMovingGrid implements GLImageTransitionPreset {
+export default class HorizontalMovingGrid implements FLib.GLImageTransition.Preset {
 
     #speed:    number;
     #grid:     number[];
@@ -10,7 +10,7 @@ export default class HorizontalMovingGrid implements GLImageTransitionPreset {
     #U_GRID!:  WebGLUniformLocation | null;
 
 
-    get fsSource() {
+    get fsSource(): string {
         return `
             #ifdef GL_ES
             precision mediump float;
@@ -73,21 +73,21 @@ export default class HorizontalMovingGrid implements GLImageTransitionPreset {
         `;
     }
 
-    get speed() {
+    get speed(): number {
         return this.#speed;
     }
-    get grid() {
+    get grid(): number[] {
         return this.#grid;
     }
-    get U_SPEED() {
+    get U_SPEED(): WebGLUniformLocation | null {
         return this.#U_SPEED;
     }
-    get U_GRID() {
+    get U_GRID(): WebGLUniformLocation | null {
         return this.#U_GRID;
     }
 
 
-    constructor( speed: number = 1, grid: number[] = [ 100, 50 ] ) {
+    constructor( speed = 1, grid: number[] = [ 100, 50 ] ) {
         this.#speed = speed;
         this.#grid  = grid;
     }
@@ -96,7 +96,7 @@ export default class HorizontalMovingGrid implements GLImageTransitionPreset {
     /**
      * Create specific uniform for this preset
      */
-    addUniform( GL: WebGLRenderingContext, SHADER_PROGRAM: WebGLProgram ) {
+    addUniform( GL: WebGLRenderingContext, SHADER_PROGRAM: WebGLProgram ): void {
         this.#U_SPEED = GL.getUniformLocation( SHADER_PROGRAM, 'uSpeed' );
         this.#U_GRID  = GL.getUniformLocation( SHADER_PROGRAM, 'uGrid' );
     }
@@ -105,7 +105,7 @@ export default class HorizontalMovingGrid implements GLImageTransitionPreset {
     /**
      * Update the uniform of this preset during render
      */
-    updateUniform( GL: WebGLRenderingContext ) {
+    updateUniform( GL: WebGLRenderingContext ): void {
         GL.uniform1f( this.#U_SPEED, this.#speed );
         GL.uniform2fv( this.#U_GRID, this.#grid );
     }

package/WebGL/GLImageTransition/Presets/PresetSample.ts

@@ -1,14 +1,14 @@
 /**
  * Preset sample
  */
-export default class PresetSample implements GLImageTransitionPreset {
+export default class PresetSample implements FLib.GLImageTransition.Preset {
 
     #myUniformValue: number;
     #U_MY_UNIFORM!:  WebGLUniformLocation | null;
 
 
     // Fragment shader source code
-    get fsSource() {
+    get fsSource(): string {
         return `
             #ifdef GL_ES
             precision mediump float;
@@ -33,13 +33,13 @@ export default class PresetSample implements GLImageTransitionPreset {
                 gl_FragColor = vec4( color, 1.0 );
             }
         `;
-    };
+    }
 
-    get myUniformValue() {
+    get myUniformValue(): number {
         return this.#myUniformValue;
     }
 
-    get U_MY_UNIFORM() {
+    get U_MY_UNIFORM(): WebGLUniformLocation | null {
         return this.#U_MY_UNIFORM;
     }
 
@@ -55,7 +55,7 @@ export default class PresetSample implements GLImageTransitionPreset {
     /**
      * Create specific uniforms for this preset
      */
-    addUniform( GL: WebGLRenderingContext, SHADER_PROGRAM: WebGLProgram ) {
+    addUniform( GL: WebGLRenderingContext, SHADER_PROGRAM: WebGLProgram ): void {
         this.#U_MY_UNIFORM = GL.getUniformLocation( SHADER_PROGRAM, 'uMyUniform' );
     }
 
@@ -63,7 +63,7 @@ export default class PresetSample implements GLImageTransitionPreset {
     /**
      * Update the uniforms of this preset during render
      */
-    updateUniform( GL: WebGLRenderingContext ) {
+    updateUniform( GL: WebGLRenderingContext ): void {
         GL.uniform1f( this.#U_MY_UNIFORM, this.#myUniformValue );
     }
 
@@ -71,13 +71,15 @@ export default class PresetSample implements GLImageTransitionPreset {
     /**
      * Called each time before a transition
      */
-    onTransitionStart() {
+    onTransitionStart(): void {
+        // Code here
     }
 
 
     /**
      * Called each time after a transition
      */
-    onTransitionEnd() {
+    onTransitionEnd(): void {
+        // Code here
     }
 }

package/WebGL/GLImageTransition/Presets/Solarisation.ts

@@ -1,14 +1,14 @@
 /**
  * All colors go to white on the current image et go to the color of the next one
  */
-export default class Solarisation implements GLImageTransitionPreset {
+export default class Solarisation implements FLib.GLImageTransition.Preset {
 
     #fadeToBlack:      boolean;
     #fadeToBlackValue: number;
     #U_FADE_TO_BLACK!: WebGLUniformLocation | null;
 
 
-    get fsSource() {
+    get fsSource(): string {
         return `
             #ifdef GL_ES
             precision mediump float;
@@ -39,11 +39,11 @@ export default class Solarisation implements GLImageTransitionPreset {
         `;
     }
 
-    get fadeToBlack() {
+    get fadeToBlack(): boolean {
         return this.#fadeToBlack;
     }
 
-    get U_FADE_TO_BLACK() {
+    get U_FADE_TO_BLACK(): WebGLUniformLocation | null {
         return this.#U_FADE_TO_BLACK;
     }
 
@@ -52,7 +52,7 @@ export default class Solarisation implements GLImageTransitionPreset {
     /**
      * Solarisation constructor
      *
-     * @param {Boolean} fadeToBlack - Fade to black instead of white
+     * @param fadeToBlack - Fade to black instead of white
      */
     constructor( fadeToBlack = false ) {
         this.#fadeToBlack      = fadeToBlack;
@@ -62,21 +62,16 @@ export default class Solarisation implements GLImageTransitionPreset {
 
     /**
      * Create specific uniforms for this preset
-     *
-     * @param {WebGLRenderingContext} GL
-     * @param {WebGLProgram} SHADER_PROGRAM
      */
-    addUniform( GL, SHADER_PROGRAM ) {
+    addUniform( GL: WebGLRenderingContext, SHADER_PROGRAM: WebGLProgram ): void {
         this.#U_FADE_TO_BLACK = GL.getUniformLocation( SHADER_PROGRAM, 'uFadeToBlack' );
     }
 
 
     /**
      * Update the uniforms of this preset during render
-     *
-     * @param {WebGLRenderingContext} GL
      */
-    updateUniform( GL ) {
+    updateUniform( GL: WebGLRenderingContext ): void {
         GL.uniform1f( this.#U_FADE_TO_BLACK, this.#fadeToBlackValue );
     }
 }

package/package.json

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

package/Modules/Template.ts

@@ -1,209 +0,0 @@
-// From underscore
-
-const _ = {};
-
-// By default, Underscore uses ERB-style template delimiters, change the
-// following template settings to use alternative delimiters.
-const templateSettings = {
-    "evaluate":    /<%([\s\S]+?)%>/g,
-    "interpolate": /<%=([\s\S]+?)%>/g,
-    "escape":      /<%-([\s\S]+?)%>/g
-};
-
-// When customizing `templateSettings`, if you don't want to define an
-// interpolation, evaluation or escaping regex, we need one that is
-// guaranteed not to match.
-const noMatch = /(.)^/;
-
-// Certain characters need to be escaped so that they can be put into a
-// string literal.
-const escapes = {
-    "'": "'",
-    '\\': '\\',
-    '\r': 'r',
-    '\n': 'n',
-    '\t': 't',
-    '\u2028': 'u2028',
-    '\u2029': 'u2029'
-};
-
-const escaper = /\\|'|\r|\n|\t|\u2028|\u2029/g;
-
-// List of HTML entities for escaping.
-const entityMap = {
-    "escape": {
-        '&': '&amp;',
-        '<': '&lt;',
-        '>': '&gt;',
-        '"': '&quot;',
-        "'": '&#x27;'
-    },
-    "unescape": {}
-};
-
-function objectKeys(obj) {
-    if (obj !== Object(obj)) {
-        return [];
-    }
-    return Object.keys(obj);
-}
-
-// Invert the keys and values of an object. The values must be serializable.
-function invert(obj) {
-    let result = {},
-        keys = objectKeys(obj);
-
-    for (let i = 0, length = keys.length; i < length; i++) {
-        result[obj[keys[i]]] = keys[i];
-    }
-
-    return result;
-}
-
-entityMap.unescape = invert( entityMap.escape );
-
-// "Regexes" containing the keys and values listed immediately above.
-let entityRegexes = {
-    escape: new RegExp(
-        '[' + objectKeys(entityMap.escape).join('') + ']',
-        'g'
-    ),
-    unescape: new RegExp(
-        '(' + objectKeys(entityMap.unescape).join('|') + ')',
-        'g'
-    )
-}
-
-// Functions for escaping and unescaping strings to/from HTML interpolation.
-;['escape', 'unescape'].forEach(method => {
-    _[method] = function(string) {
-        if (string == null) {
-            return '';
-        }
-
-        return ('' + string).replace(entityRegexes[method], match => {
-            return entityMap[method][match];
-        });
-    }
-})
-
-// Fill in a given object with default properties.
-function defaults(...obj) {
-    obj.forEach(source => {
-        if (source) {
-            for (let prop in source) {
-                if (obj[prop] === void 0) {
-                    obj[prop] = source[prop];
-                }
-            }
-        }
-    });
-
-    return obj;
-}
-
-// JavaScript micro-templating, similar to John Resig's implementation.
-// Underscore templating handles arbitrary delimiters, preserves whitespace,
-// and correctly escapes quotes within interpolated code.
-/**
- * Micro templating from Underscore
- *
- * @param text
- * @param data
- * @param [settings]
- * @param [settings.evaluate=/<%([\s\S]+?)%>/g]
- * @param [settings.interpolate=/<%=([\s\S]+?)%>/g]
- * @param [settings.escape=/<%-([\s\S]+?)%>/g]
- *
- * @see extra/modules/template.md
- *
- * @example
- * let tplFunction = template( html );
- * let html = tplFunction( { "text": "hey!!" } );
- *
- * @example
- *
- * let html = template( html, { "text": "hey!!" } );
- */
-export default function template( text: string, data?, settings? ) {
-    let render, index, source, tpl
-
-    settings = defaults({}, templateSettings, settings)
-
-    // Combine delimiters into one regular expression via alternation.
-    let matcher = new RegExp(
-        [
-            (settings.escape || noMatch).source,
-            (settings.interpolate || noMatch).source,
-            (settings.evaluate || noMatch).source
-        ].join('|') + '|$',
-        'g'
-    )
-
-    // Compile the template source, escaping string literals appropriately.
-    index = 0;
-    source = "__p+='";
-
-    text.replace(
-        matcher,
-        (match, escape, interpolate, evaluate, offset) => {
-            source += text.slice(index, offset).replace(escaper, match => {
-                return '\\' + escapes[match];
-            });
-
-            if (escape) {
-                source +=
-                    "'+\n((__t=(" +
-                    escape +
-                    "))==null?'':_.escape(__t))+\n'";
-            }
-
-            if (interpolate) {
-                source += "'+\n((__t=(" + interpolate + "))==null?'':__t)+\n'";
-            }
-
-            if (evaluate) {
-                source += "';\n" + evaluate + "\n__p+='";
-            }
-
-            index = offset + match.length;
-
-            return match;
-        }
-    );
-
-    source += "';\n";
-
-    // If a variable is not specified, place data values in local scope.
-    if (!settings.variable) {
-        source = 'with(obj||{}){\n' + source + '}\n';
-    }
-
-    source =
-        "var __t,__p='',__j=Array.prototype.join," +
-        "print=function(){__p+=__j.call(arguments,'');};\n" +
-        source +
-        'return __p;\n';
-
-    try {
-        render = new Function(settings.variable || 'obj', '_', source);
-    } catch (e) {
-        e.source = source;
-        throw e;
-    }
-
-    if (data) {
-        return render(data, _);
-    }
-
-    tpl = function(data) {
-        /** @ts-expect-error */
-        return render.call(this, data, _);
-    }
-
-    // Provide the compiled function source as a convenience for precompilation.
-    tpl.source = 'function(' + (settings.variable || 'obj') + '){\n' + source + '}';
-
-    return tpl;
-}
-

package/Types/AccordionTypes.d.ts

@@ -1,29 +0,0 @@
-type AutocompleteLayerPositionType  = 'top' | 'bottom';
-
-type AccordionAnimationFunctionType = ( $tab: HTMLElement, $panel: HTMLElement ) => Promise<void>;
-type AccordionCallbackType          = ( $tab: HTMLElement, $panel: HTMLElement ) => void;
-type AccordionCloseCallbackType     = ( $tab: HTMLElement, $panel: HTMLElement, autoclose: boolean ) => void;
-
-
-type AccordionOptionsType = {
-    /** Default: 'button[aria-expanded]' */
-    tabSelector:       string;
-    /** Default: false */
-    allowMultipleTab?: boolean;
-    /** Default: false */
-    atLeastOneOpen?:   boolean;
-    onOpenAtStart?:    AccordionCallbackType;
-    onOpen?:           AccordionCallbackType;
-    onClose?:          AccordionCloseCallbackType;
-    animations?: {
-        open?:         AccordionAnimationFunctionType;
-        close?:        AccordionAnimationFunctionType;
-        destroy?:      AccordionAnimationFunctionType;
-    }
-}
-
-
-type AccordionTabOptionsType = AccordionOptionsType & {
-    onOpenTab: (( tab: Tab ) => void) | null;
-    index:     number;
-}

package/Types/AutocompleteTypes.d.ts

@@ -1,85 +0,0 @@
-type AutocompleteItemType = {
-    name: string;
-    [ key: string ]: any;
-}
-
-type AutocompleteOptionsType = {
-    $searchField: HTMLElement;
-    /** @default document.body */
-    $panelWrapper?: HTMLElement;
-    /** @default 200 */
-    maxHeight?: number;
-    /** @default false */
-    useCache?: boolean;
-    /** @default 3 */
-    minchar?: number;
-    /** @default AutocompleteLayerPosition.top */
-    layerPosition?: AutocompleteLayerPosition;
-    source?: ( query: string | null, callback: ( results: AutocompleteItemType[] ) => void ) => void;
-    url?: string;
-    /**
-     * Use CSS or Javascript for the position of the layer
-     * @default false
-    */
-    cssPositionning?: boolean;
-    /**
-     * Update or not the text field with the selected value
-     * @default true
-    */
-    updateOnSelect?: boolean;
-    onSelect?: ({ item, query, resultsList }) => void;
-    queryParams?: ( query: string ) => { "search": string };
-    normalize?: ( data: any ) => { success: boolean, results: AutocompleteItemType[] };
-    /**
-     * Allow to manipulate the displayed value of items
-     * @default ({item, query, resultList}) => item.name
-    */
-    renderFieldValue?: (options: { item: AutocompleteItemType, query: string, resultList: AutocompleteItemType[] }) => string;
-    /**
-     * @default ({resultItem, query, index, itemsList, cssClass}) => `<li role="option" data-idx="${index}" class="${cssClass.item}"><a class="${cssClass.link}">${resultItem.markedName}</a></li>`
-     */
-    render?: ( options: { resultItem: AutocompleteItemType, query: string, index: number, itemsList: AutocompleteItemType[], cssClass: AutocompleteClassnameType }) => string;
-    /**
-     * @default ({resultList, query, cssClass}) => `<ul role="listbox" class="${cssClass.list}">${resultList.join('')}</ul>`
-     */
-    renderList?: ( options: { resultList: AutocompleteItemType[], query: string, cssClass: AutocompleteClassnameType }) => string;
-    /**
-     * @default ({errorMsg, query, cssClass}) => `<li class="${cssClass.error}">${errorMsg}</li>`
-     */
-    renderError?: (options: { errorMsg: string, query: string, cssClass: AutocompleteClassnameType }) => string;
-    /**
-     * Allow to wrap the query with a tag in the result item name
-     * @default ({resultItem, reQuery, query, index, resultList, cssClass}) => {resultItem.name && (resultItem.markedName = resultItem.name.replace(reQuery,`<mark class="${cssClass.mark}">$1</mark>`));}
-    */
-    renderMark?: ( options: { resultItem: AutocompleteItemType, reQuery?: RegExp, query: string, index: number, resultList: AutocompleteItemType[], cssClass: AutocompleteClassnameType }) => void;
-    l10n?:      AutocompleteL10NType;
-    className?: AutocompleteClassnameType;
-}
-
-
-type AutocompleteL10NType = {
-    /** @default No result */
-    noResult?: string;
-    /** @default Server error */
-    error?: string;
-}
-
-type AutocompleteClassnameType = {
-    /** @default ac-layer */
-    layer?: string;
-    /** @default ac-list */
-    list?: string;
-    /** @default acl-itm */
-    item?: string;
-    /** @default acl-lnk */
-    link?: string;
-    /** @default acl-mrk */
-    mark?: string;
-    /** @default acl-error */
-    error?: string;
-    /** @default hover */
-    hover?: string;
-    /** @default disable */
-    disable?: string;
-}
-

package/Types/DOMTypes.d.ts

@@ -1,62 +0,0 @@
-type ClassInputType = Element | Element[] | Node | NodeList;
-
-
-interface OffsetType {
-    top:    number;
-    y:      number;
-    left:   number;
-    x:      number;
-    right:  number;
-    bottom: number;
-    width:  number;
-    height: number;
-}
-
-
-type DOMSizeType = {
-    width:  number;
-    height: number;
-}
-
-
-type DOMPositionType = {
-    left: number;
-    top:  number;
-}
-
-
-type MatrixTranslateType = {
-    tx: number;
-    ty: number;
-    tz: number;
-}
-
-
-type MatrixTransformType = {
-    tx: number;
-    ty: number;
-    tz: number;
-    rx: number;
-    ry: number;
-    rz: number;
-}
-
-
-type MatrixMatrixType = {
-    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;
-}

package/Types/DragSliderTypes.d.ts

@@ -1,52 +0,0 @@
-type DragSliderCallbackParam = {
-    item:        any;
-    xPos:        number;
-    moveMaxSize: number;
-    isAtStart:   boolean;
-    isAtEnd:     boolean;
-}
-
-type DragSliderItemType = {
-    index:   number;
-    isFirst: boolean;
-    isLast:  boolean;
-    $item:   HTMLElement;
-    info:    OffsetType;
-}
-
-type DeltaMoveType = {
-    x:      number;
-    deltaX: number;
-    deltaY: number;
-    newX:   number;
-}
-
-type DragSliderCallback = ( data: DragSliderCallbackParam ) => void;
-
-type DragSliderOptions = {
-    viewportSelector:   string;
-    listSelector:       string;
-    itemSelector:       string;
-    dragClass:          string;
-    /** @default is-locked */
-    lockedClass?:       string;
-    onStartDrag?:       DragSliderCallback;
-    onDrag?:            DragSliderCallback;
-    onStopDrag?:        DragSliderCallback;
-    onSnap?:            DragSliderCallback;
-    onSnapUpdate?:      DragSliderCallback;
-    onMouseEnter?:      DragSliderCallback;
-    onMouseLeave?:      DragSliderCallback;
-    onInit?:            DragSliderCallback;
-    onChangeState?:     ( isDragging: boolean ) => void;
-    /**
-     * In px.
-     * @default 40
-    */
-    swipeTresholdMin?: number;
-    /**
-     * In % (0.5 = 50% of the size of one item).
-     * @default 0.5
-    */
-    swipeTresholdSize?:number;
-}