x4js 1.4.3 → 1.4.4

package/lib/popup.d.ts

@@ -1,71 +0,0 @@
-/**
-*  ___   ___ __
-*  \  \_/  /  / _
-*   \     /  /_| |_
-*   /  _  \____   _|
-*  /__/ \__\   |_|
-*
-* @file popup.ts
-* @author Etienne Cochard
-* @license
-* Copyright (c) 2019-2021 R-libre ingenierie
-*
-* This program is free software; you can redistribute it and/or modify
-* it under the terms of the GNU General Public License as published by
-* the Free Software Foundation; either version 3 of the License, or
-* (at your option) any later version.
-*
-* This program is distributed in the hope that it will be useful,
-* but WITHOUT ANY WARRANTY; without even the implied warranty of
-* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-* GNU General Public License for more details.
-*
-* You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
-**/
-import { Container, CProps, ContainerEventMap, EvSize } from './component';
-import { Point } from './tools';
-import { BasicEvent } from './x4_events';
-export interface EvMove extends BasicEvent {
-    pos: Point;
-}
-export declare function EvMove(pos: Point): EvMove;
-export interface PopupEventMap extends ContainerEventMap {
-    size: EvSize;
-    move: EvMove;
-}
-export interface PopupProps<E extends PopupEventMap = PopupEventMap> extends CProps<E> {
-    sizable?: boolean;
-}
-/**
- * base class for all popup elements
- */
-export declare class Popup<P extends PopupProps = PopupProps, E extends PopupEventMap = PopupEventMap> extends Container<P, E> {
-    protected m_ui_mask: HTMLElement;
-    private m_hasMask;
-    static modal_stack: HTMLElement[];
-    constructor(props: P);
-    enableMask(enable?: boolean): void;
-    /**
-     * display the popup on screen
-     */
-    show(modal?: boolean): void;
-    centerOnScreen(): void;
-    /**
-    * display the popup at a specific position
-    * @param x
-    * @param y
-    */
-    displayAt(x: number, y: number, align?: string, offset?: {
-        x: any;
-        y: any;
-    }): void;
-    /**
-     * close the popup
-     */
-    close(): void;
-    componentCreated(): void;
-    /**
-     * resize for 'all' resize attribute
-     */
-    private _mouseResize;
-}

package/lib/popup.js

@@ -1,373 +0,0 @@
-/**
-*  ___   ___ __
-*  \  \_/  /  / _
-*   \     /  /_| |_
-*   /  _  \____   _|
-*  /__/ \__\   |_|
-*
-* @file popup.ts
-* @author Etienne Cochard
-* @license
-* Copyright (c) 2019-2021 R-libre ingenierie
-*
-* This program is free software; you can redistribute it and/or modify
-* it under the terms of the GNU General Public License as published by
-* the Free Software Foundation; either version 3 of the License, or
-* (at your option) any later version.
-*
-* This program is distributed in the hope that it will be useful,
-* but WITHOUT ANY WARRANTY; without even the implied warranty of
-* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-* GNU General Public License for more details.
-*
-* You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
-**/
-import { Container, flyWrap, SizerOverlay, Component, EvSize } from './component';
-import { Size, getMousePos } from './tools';
-import { BasicEvent } from './x4_events';
-import { Application } from './application';
-export function EvMove(pos) {
-    return BasicEvent({ pos });
-}
-/**
- * base class for all popup elements
- */
-export class Popup extends Container {
-    m_ui_mask;
-    m_hasMask = true;
-    static modal_stack = [];
-    constructor(props) {
-        super(props);
-        this.addClass('@hidden');
-    }
-    enableMask(enable = true) {
-        this.m_hasMask = enable;
-    }
-    /**
-     * display the popup on screen
-     */
-    show(modal) {
-        if (modal !== undefined) {
-            this.m_hasMask = modal ? true : false;
-        }
-        else {
-            modal = this.m_hasMask;
-        }
-        if (this.m_hasMask) {
-            // remove the focus
-            const focus = document.activeElement;
-            if (focus) {
-                focus.blur();
-            }
-            this.m_ui_mask = document.body.lastChild;
-            while (this.m_ui_mask) {
-                if (this.m_ui_mask.nodeType == 1) { // only element nodes
-                    let elUI = flyWrap(this.m_ui_mask);
-                    if (elUI.hasClass('@menu') || elUI.hasClass('@non-maskable')) {
-                        /* avoid circular dependencies instanceof Menu*/
-                        /* avoid nonmaskable elements tobe masked */
-                    }
-                    else if (elUI.getStyleValue('display') == 'none' || !elUI.isUserVisible()) {
-                        /* avoid masking hidden elements */
-                    }
-                    else if (!elUI.hasClass('@comp')) {
-                        /* avoid masking element that are not to us */
-                    }
-                    else {
-                        break;
-                    }
-                }
-                this.m_ui_mask = this.m_ui_mask.previousSibling;
-            }
-            if (this.m_ui_mask) {
-                flyWrap(this.m_ui_mask).addClass('@mask');
-            }
-        }
-        if (modal) {
-            Application.instance().enterModal(true);
-        }
-        // to avoid body growing because of appendChild
-        this.setStyle({
-            left: 0,
-            top: 0
-        });
-        document.body.appendChild(this._build());
-        this.removeClass('@hidden');
-        this.centerOnScreen();
-        if (modal) {
-            let focus = document.activeElement;
-            if (!this.dom.contains(focus)) {
-                const autofocus = this.queryItem('[autofocus]');
-                if (autofocus) {
-                    autofocus.focus();
-                }
-                else {
-                    let tabbable = this.queryItem('[tabindex]');
-                    if (tabbable) {
-                        let tab_indexes = [].map.call(tabbable, (e) => { return e; });
-                        // remove hidden elements
-                        tab_indexes = tab_indexes.filter((el) => el.offsetParent !== null);
-                        if (tab_indexes.length) {
-                            tab_indexes[0].focus();
-                        }
-                    }
-                }
-            }
-            Popup.modal_stack.push(this.dom);
-        }
-    }
-    centerOnScreen() {
-        let rc = this.getBoundingRect();
-        let x = (document.body.clientWidth - rc.width) / 2, y = (document.body.clientHeight - rc.height) / 2;
-        this.setStyleValue('left', x);
-        this.setStyleValue('top', y);
-    }
-    /**
-    * display the popup at a specific position
-    * @param x
-    * @param y
-    */
-    displayAt(x, y, align = 'top left', offset) {
-        this.show();
-        let halign = 'l', valign = 't';
-        if (align.indexOf('right') >= 0) {
-            halign = 'r';
-        }
-        if (align.indexOf('bottom') >= 0) {
-            valign = 'b';
-        }
-        // @TODO: this is a minimal overflow problem solution
-        let rc = document.body.getBoundingClientRect(), rm = this.getBoundingRect();
-        if (halign == 'r') {
-            x -= rm.width;
-        }
-        if (valign == 'b') {
-            y -= rm.height;
-        }
-        if (offset) {
-            x += offset.x;
-            y += offset.y;
-        }
-        if (x < 4) {
-            x = 4;
-        }
-        if ((x + rm.width) > rc.right - 4) {
-            x = rc.right - 4 - rm.width;
-            if (offset?.x < 0) {
-                x += offset.x;
-            }
-        }
-        if (y < 4) {
-            y = 4;
-        }
-        if ((y + rm.height) > rc.bottom - 4) {
-            y = rc.bottom - 4 - rm.height;
-            if (offset?.y < 0) {
-                y += offset.y;
-            }
-        }
-        this.setStyle({ left: x, top: y });
-    }
-    /**
-     * close the popup
-     */
-    close() {
-        this.hide();
-        if (this.m_hasMask && this.m_ui_mask) {
-            flyWrap(this.m_ui_mask).removeClass('@mask');
-            const app = Application.instance();
-            app.enterModal(false);
-        }
-        let index = Popup.modal_stack.indexOf(this.dom);
-        if (index >= 0) {
-            Popup.modal_stack.splice(index);
-        }
-        this.dispose();
-    }
-    componentCreated() {
-        if (this.m_props.sizable) {
-            this.addClass('@size-all');
-            let els = ['top', 'right', 'bottom', 'left', 'topleft', 'topright', 'bottomleft', 'bottomright'];
-            for (let sens of els) {
-                new SizerOverlay({
-                    target: this,
-                    sens: sens,
-                    events: { rawresize: (e) => this._mouseResize(e) }
-                });
-            }
-        }
-    }
-    /**
-     * resize for 'all' resize attribute
-     */
-    _mouseResize(event) {
-        event.preventDefault();
-        let irc = this.getBoundingRect();
-        let st = this.getComputedStyle();
-        let ev = event.ui_event;
-        let tm = st.parse('marginTop'), lm = st.parse('marginLeft'), rm = st.parse('marginRight'), bm = st.parse('marginBottom');
-        let ix = 0, iy = 0;
-        let mp = getMousePos(ev, true);
-        // horz
-        switch (event.sens) {
-            case 'topright':
-            case 'bottomright':
-            case 'right':
-                ix = (irc.right - rm) - mp.x;
-                break;
-            case 'topleft':
-            case 'bottomleft':
-            case 'left':
-                ix = (irc.left - lm) - mp.x;
-                break;
-        }
-        // vert
-        switch (event.sens) {
-            case 'bottomleft':
-            case 'bottomright':
-            case 'bottom':
-                iy = (irc.bottom - bm) - mp.y;
-                break;
-            case 'topleft':
-            case 'topright':
-            case 'top':
-                iy = (irc.top - tm) - mp.y;
-                break;
-        }
-        // left & top are with margin
-        // width & height not
-        irc.left -= lm;
-        irc.top -= tm;
-        //console.log( 'capture' );
-        let sens = event.sens;
-        Component.setCapture(this, (ne) => {
-            //console.log( ne );
-            let __move = (ex, ey) => {
-                let left = irc.left, top = irc.top, width = irc.width, height = irc.height;
-                let dx, dy;
-                let px = ex + ix, py = ey + iy;
-                if (px < 0) {
-                    px = 0;
-                }
-                if (py < 0) {
-                    py = 0;
-                }
-                // horz
-                switch (sens) {
-                    case 'topright':
-                    case 'bottomright':
-                    case 'right':
-                        width = px - left;
-                        break;
-                    case 'topleft':
-                    case 'bottomleft':
-                    case 'left':
-                        dx = left - px;
-                        width += dx;
-                        left -= dx;
-                        break;
-                }
-                // vert
-                switch (sens) {
-                    case 'bottomleft':
-                    case 'bottomright':
-                    case 'bottom':
-                        height = py - top;
-                        break;
-                    case 'topleft':
-                    case 'topright':
-                    case 'top':
-                        dy = top - py;
-                        height += dy;
-                        top -= dy;
-                        break;
-                }
-                let newsize = new Size(width, height);
-                this.setStyle({ left, top, width: newsize.width, height: newsize.height });
-                this.emit('size', EvSize(newsize));
-            };
-            if (ne.type == 'mouseup' || ne.type == 'touchend') {
-                Component.releaseCapture();
-            }
-            else if (ne.type == 'mousemove') {
-                let me = ne;
-                __move(me.pageX, me.pageY);
-            }
-            else if (ne.type == 'touchmove') {
-                let tev = ne;
-                __move(tev.touches[0].pageX, tev.touches[0].pageY);
-            }
-        });
-    }
-}
-/**
- * handle tab key
- */
-function x4handleKeyDown(e) {
-    if (e.key == 'Tab' || e.key == 'Enter') {
-        const target = e.target;
-        if (target.tagName == 'TEXTAREA') {
-            return;
-        }
-        const el = Component.getElement(target);
-        if (el && (el.hasAttribute('wants-tab') || el.hasAttribute('wants-enter'))) {
-            return;
-        }
-        let topStack = document.body;
-        if (Popup.modal_stack.length) {
-            topStack = Popup.modal_stack[Popup.modal_stack.length - 1];
-        }
-        _nextTab(topStack, e.target, e.shiftKey);
-        e.stopPropagation();
-        e.preventDefault();
-    }
-}
-/**
- * cycle through tabs
- */
-function _nextTab(root, el, prev) {
-    // first check if the focus is one of our child (disabled...)
-    let focusEl = document.activeElement;
-    if (!root.contains(focusEl)) {
-        return;
-    }
-    let comp = Component.getElement(el);
-    // get a list of elements with tab index, this way we should abble to
-    // cycle on them (not on browser address nor under dialog elements)
-    let tabbable = root.querySelectorAll('[tabindex]');
-    let tab_indexes = [].map.call(tabbable, (e) => { return e; });
-    // remove hidden elements
-    tab_indexes = tab_indexes.filter((el) => el.offsetParent !== null);
-    if (!tab_indexes.length) {
-        return;
-    }
-    let ct = tab_indexes.indexOf(el);
-    if (ct < 0) {
-        ct = 0;
-    }
-    else {
-        if (prev) {
-            if (ct > 0) {
-                ct--;
-            }
-            else {
-                ct = tab_indexes.length - 1;
-            }
-        }
-        else {
-            if (ct < tab_indexes.length - 1) {
-                ct++;
-            }
-            else {
-                ct = 0;
-            }
-        }
-    }
-    tab_indexes[ct].focus();
-}
-function installKBHandler() {
-    // set on body to be called after document (where all component domevent go)
-    document.body.addEventListener('keydown', x4handleKeyDown, true);
-}
-// too early ?
-document.body ? installKBHandler() : window.addEventListener('load', installKBHandler);

package/lib/settings.d.ts

@@ -1,33 +0,0 @@
-/**
-*  ___   ___ __
-*  \  \_/  /  / _
-*   \     /  /_| |_
-*   /  _  \____   _|
-*  /__/ \__\   |_|
-*
-* @file local_storage.ts
-* @author Etienne Cochard
-* @license
-* Copyright (c) 2019-2021 R-libre ingenierie
-*
-* This program is free software; you can redistribute it and/or modify
-* it under the terms of the GNU General Public License as published by
-* the Free Software Foundation; either version 3 of the License, or
-* (at your option) any later version.
-*
-* This program is distributed in the hope that it will be useful,
-* but WITHOUT ANY WARRANTY; without even the implied warranty of
-* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-* GNU General Public License for more details.
-*
-* You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
-**/
-export declare class Settings {
-    private m_data;
-    private m_name;
-    constructor(name?: string);
-    set(name: string, value: any): void;
-    get(name: string, defValue?: any): any;
-    private _save;
-    private _load;
-}

package/lib/settings.js

@@ -1,63 +0,0 @@
-/**
-*  ___   ___ __
-*  \  \_/  /  / _
-*   \     /  /_| |_
-*   /  _  \____   _|
-*  /__/ \__\   |_|
-*
-* @file local_storage.ts
-* @author Etienne Cochard
-* @license
-* Copyright (c) 2019-2021 R-libre ingenierie
-*
-* This program is free software; you can redistribute it and/or modify
-* it under the terms of the GNU General Public License as published by
-* the Free Software Foundation; either version 3 of the License, or
-* (at your option) any later version.
-*
-* This program is distributed in the hope that it will be useful,
-* but WITHOUT ANY WARRANTY; without even the implied warranty of
-* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-* GNU General Public License for more details.
-*
-* You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
-**/
-import { host } from './hosts/host';
-export class Settings {
-    m_data;
-    m_name;
-    constructor(name) {
-        this.m_data = null;
-        this.m_name = name ?? 'settings';
-    }
-    set(name, value) {
-        this._load();
-        this.m_data[name] = value;
-        this._save();
-    }
-    get(name, defValue) {
-        this._load();
-        return this.m_data[name] ?? defValue;
-    }
-    _save() {
-        let data = JSON.stringify(this.m_data);
-        host.writeLocalStorage(this.m_name, data);
-    }
-    _load() {
-        if (this.m_data) {
-            return;
-        }
-        this.m_data = {};
-        let data = host.readLocalStorage(this.m_name);
-        if (data !== null) {
-            data = JSON.parse(data);
-            if (data) {
-                this.m_data = data;
-            }
-            else {
-                console.info('There was an error attempting to read your settings.');
-            }
-        }
-        // console.info('There was an error attempting to read your settings.');
-    }
-}

package/lib/styles.d.ts

@@ -1,81 +0,0 @@
-/**
-*  ___   ___ __
-*  \  \_/  /  / _
-*   \     /  /_| |_
-*   /  _  \____   _|
-*  /__/ \__\   |_|
-*
-* @file styles.ts
-* @author Etienne Cochard
-* @license
-* Copyright (c) 2019-2021 R-libre ingenierie
-*
-* This program is free software; you can redistribute it and/or modify
-* it under the terms of the GNU General Public License as published by
-* the Free Software Foundation; either version 3 of the License, or
-* (at your option) any later version.
-*
-* This program is distributed in the hope that it will be useful,
-* but WITHOUT ANY WARRANTY; without even the implied warranty of
-* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-* GNU General Public License for more details.
-*
-* You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
-**/
-/**
- *  -- [ @STYLESHEET ] -----------------------------------------------------------------
- */
-export declare class Stylesheet {
-    private m_sheet;
-    private m_rules;
-    constructor();
-    /**
-     * add a new rule to the style sheet
-     * @param {string} name - internal rule name
-     * @param {string} definition - css definition of the rule
-     * @example
-     * setRule('xbody', "body { background-color: #ff0000; }" );
-     */
-    setRule(name: string, definition: any): void;
-    /**
-     * return the style variable value
-     * @param name - variable name without '--'
-     * @example
-     * ```
-     * let color = Component.getCss( ).getVar( 'button-color' );
-     * ```
-     */
-    static getVar(name: string): any;
-    static guid: number;
-    static doc_style: CSSStyleDeclaration;
-}
-/**
- *  -- [ @CSSPARSER ] -----------------------------------------------------------------
- *
- * adaptation of jss-for-node-js
- */
-export declare class CSSParser {
-    private result;
-    parse(css: any): string;
-    static mk_string(rules: any): string;
-    private parse_json;
-    private makePropertyName;
-    private makeSelectorName;
-    addProperty(scope: string, property: string, value: any): void;
-}
-export declare class ComputedStyle {
-    m_style: CSSStyleDeclaration;
-    constructor(style: CSSStyleDeclaration);
-    /**
-     * return the raw value
-     */
-    value(name: string): string;
-    /**
-     * return the interpreted value
-     */
-    parse(name: string): number;
-    /**
-     *
-     */
-    get style(): CSSStyleDeclaration;
-}