x4js 1.4.2

package/lib/menu.js

@@ -0,0 +1,276 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file menu.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 { Component } from './component';
+import { EvClick } from './x4_events';
+import { Popup } from './popup';
+import { Icon } from './icon';
+import { Label } from './label';
+import { HLayout } from './layout';
+import { isString, getMousePos } from './tools';
+// ============================================================================
+// [MENU]
+// ============================================================================
+export class MenuSeparator extends Component {
+}
+export class MenuTitle extends Label {
+}
+export class Menu extends Popup {
+    static watchCount = 0;
+    static rootMenu = null;
+    m_subMenu;
+    m_opener;
+    m_virtual;
+    m_lock;
+    constructor(props, opener) {
+        super(props);
+        this.addClass('@shadow');
+        this.m_opener = opener;
+        this.m_virtual = false;
+        this.m_lock = 0;
+        this.enableMask(false);
+    }
+    lock(yes) {
+        this.m_lock += yes ? 1 : -1;
+    }
+    setVirtual() {
+        this.m_virtual = true;
+    }
+    setSubMenu(menu) {
+        this.m_subMenu = menu;
+    }
+    hideSubMenu() {
+        if (this.m_subMenu) {
+            this.m_subMenu.m_opener._close();
+            this.m_subMenu.hide();
+            this.m_subMenu = null;
+        }
+    }
+    /** @ignore */
+    render(props) {
+        this.setContent(props.items);
+    }
+    /**
+    *
+    */
+    show() {
+        if (!this.m_virtual) {
+            Menu._addMenu(this);
+        }
+        super.show();
+    }
+    /**
+     *
+    */
+    close() {
+        if (!this.dom && !this.m_virtual) {
+            return;
+        }
+        if (this.m_opener) {
+            this.m_opener._close();
+        }
+        if (this.m_subMenu) {
+            this.m_subMenu.close();
+            this.m_subMenu = null;
+        }
+        super.close();
+        Menu._removeMenu();
+    }
+    /**
+     *
+     */
+    clear() {
+        this.m_props.items = [];
+    }
+    /**
+    * @internal
+    */
+    static _addMenu(menu) {
+        //console.log( 'addmenu' );
+        if (Menu.watchCount == 0) {
+            Menu.rootMenu = menu;
+            document.addEventListener('mousedown', Menu._mouseWatcher);
+        }
+        Menu.watchCount++;
+    }
+    static _removeMenu() {
+        //console.log( 'removemenu' );
+        console.assert(Menu.watchCount > 0);
+        Menu.watchCount--;
+        if (Menu.watchCount == 0) {
+            document.removeEventListener('mousedown', Menu._mouseWatcher);
+        }
+    }
+    static _mouseWatcher(ev) {
+        if (ev.defaultPrevented) {
+            return;
+        }
+        let elOn = ev.target;
+        while (elOn) {
+            // is mouse on a menu
+            let mouseon = Component.getElement(elOn);
+            if (mouseon && (mouseon instanceof Menu /*|| elOn.$el instanceof Menubar*/)) {
+                return;
+            }
+            elOn = elOn.parentElement;
+        }
+        Menu._discardAll();
+    }
+    /**
+    * hide all the visible menus
+    */
+    static _discardAll() {
+        if (Menu.rootMenu) {
+            Menu.rootMenu.close();
+            Menu.rootMenu = null;
+        }
+    }
+    displayAt(...args) {
+        if (!this.m_lock) {
+            Menu._discardAll();
+        }
+        let x, y, align, offset;
+        if (args.length == 1) {
+            ({ x, y } = getMousePos(args[0], true));
+        }
+        else {
+            [x, y, align, offset] = args;
+        }
+        if (!align) {
+            align = 'top left';
+        }
+        super.displayAt(x, y, align, offset);
+    }
+}
+export class MenuItem extends Component {
+    m_menu;
+    m_isOpen;
+    constructor(a, b) {
+        if (isString(a)) {
+            super({
+                text: a,
+                click: b
+            });
+        }
+        else {
+            super(a);
+        }
+        this.mapPropEvents(this.m_props, 'click');
+        this.m_menu = null;
+        this.m_isOpen = false;
+        this.setDomEvent('mousedown', (e) => this._mousedown(e));
+        this.setDomEvent('click', (e) => this._click(e));
+    }
+    /** @ignore */
+    render(props) {
+        let icon = props.icon ?? 0x20;
+        let text = props.text;
+        if (props.checked !== undefined) {
+            icon = props.checked ? 'cls(far fa-check)' : 0; //todo: use stylesheet
+        }
+        if (this.isPopup) {
+            this.addClass('@popup-menu-item');
+        }
+        if (!text && !icon) {
+            this.addClass('@separator');
+        }
+        if (props.cls) {
+            this.addClass(props.cls);
+        }
+        this.setProp('tag', 'a');
+        //@bug: do not kill focus on click 
+        //	this.setAttribute( 'tabindex', '0' );
+        this.setContent([
+            icon < 0 ? null : new Icon({ icon }),
+            new Label({ flex: 1, text })
+        ]);
+    }
+    get id() {
+        return this.m_props.itemId;
+    }
+    get text() {
+        return this.m_props.text;
+    }
+    get isPopup() {
+        return !!this.m_props.items;
+    }
+    _close() {
+        this.removeClass('@opened');
+        this.m_isOpen = false;
+    }
+    _click(ev) {
+        if (!this.isPopup) {
+            this.emit('click', EvClick());
+            Menu._discardAll();
+        }
+    }
+    _mousedown(ev) {
+        if (this.isPopup) {
+            if (!this.m_menu) {
+                this.m_menu = new Menu({ items: this.m_props.items }, this);
+            }
+            let doClose = this.m_isOpen;
+            // if parent menu has an opened sub menu, close it
+            let parent_menu = Component.getElement(this.dom, Menu);
+            if (parent_menu) {
+                parent_menu.hideSubMenu();
+            }
+            if (!doClose) {
+                if (parent_menu) {
+                    parent_menu.setSubMenu(this.m_menu);
+                }
+                this.m_isOpen = true;
+                let rc = this.getBoundingRect();
+                this.m_menu.lock(true);
+                if (parent_menu) {
+                    // standard menu
+                    this.m_menu.displayAt(rc.right, rc.top);
+                }
+                else {
+                    // menubar / menubutton
+                    this.m_menu.displayAt(rc.left, rc.bottom);
+                }
+                this.m_menu.lock(false);
+                this.addClass('@opened');
+            }
+            ev.preventDefault();
+        }
+    }
+}
+/**
+ *
+ */
+export class MenuBar extends HLayout {
+    m_items;
+    constructor(props, opener) {
+        super(props);
+        console.assert(false, 'not imp');
+        this.addClass('@shadow');
+        this.m_items = props.items;
+    }
+    /** @ignore */
+    render() {
+        this.setContent(this.m_items);
+    }
+}

package/lib/messagebox.d.ts

@@ -0,0 +1,64 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file messagebox.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 { Dialog, DialogProps } from './dialog';
+import { HtmlString } from './tools';
+import { IconID } from './icon';
+import { Label } from './label';
+import { TextEdit } from './textedit';
+/**
+ * [ MESSAGEBOX ] -----------------------------------------------------------------
+ */
+export interface MessageBoxProps extends DialogProps {
+    message: string | HtmlString;
+    click: (button: string) => void;
+}
+export declare class MessageBox extends Dialog<MessageBoxProps> {
+    m_label: Label;
+    constructor(props: MessageBoxProps);
+    set text(txt: string | HtmlString);
+    /**
+     * display a messagebox
+     */
+    static show(props: string | HtmlString | MessageBoxProps): MessageBox;
+    /**
+     * display an alert message
+     */
+    static alert(text: string | HtmlString, title?: string): void;
+}
+export interface PromptBoxProps extends DialogProps {
+    message: string | HtmlString;
+    value?: string;
+    icon?: IconID;
+    click: (value: string) => void;
+}
+export declare class PromptDialogBox extends Dialog<PromptBoxProps> {
+    m_edit: TextEdit;
+    constructor(props: PromptBoxProps);
+    set text(txt: string | HtmlString);
+    /**
+     * display a messagebox
+     */
+    static show(props: string | HtmlString | PromptBoxProps, inputCallback?: (input: string) => void): PromptBoxProps;
+}

package/lib/messagebox.js

@@ -0,0 +1,141 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file messagebox.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 { Dialog } from './dialog';
+import { asap, isHtmlString, isString } from './tools';
+import { HLayout } from './layout';
+import { Icon } from './icon';
+import { Label } from './label';
+import { TextEdit } from './textedit';
+export class MessageBox extends Dialog {
+    m_label;
+    constructor(props) {
+        // remove overloaded elements from DialogBoxProps
+        let icon = props.icon ?? 'cls(far fa-circle-exclamation)'; // todo: resolve that
+        props.icon = undefined;
+        let buttons = props.buttons === undefined ? ['ok'] : props.buttons;
+        props.buttons = undefined;
+        super(props);
+        let msg = props.message;
+        this.form.updateContent(new HLayout({
+            style: { padding: 8 },
+            content: [
+                new Icon({ cls: 'icon', icon }),
+                this.m_label = new Label({ cls: 'text', text: msg, multiline: true })
+            ]
+        }), buttons);
+        this.on('btnClick', (ev) => {
+            // no prevent default -> always close the messagebox
+            if (!this.m_props.click) {
+                return;
+            }
+            asap(() => {
+                this.m_props.click(ev.button);
+            });
+        });
+    }
+    set text(txt) {
+        this.m_label.text = txt;
+    }
+    /**
+     * display a messagebox
+     */
+    static show(props) {
+        let msg;
+        if (isString(props) || isHtmlString(props)) {
+            msg = new MessageBox({ message: props, click: () => { } });
+        }
+        else {
+            msg = new MessageBox(props);
+        }
+        msg.show();
+        return msg;
+    }
+    /**
+     * display an alert message
+     */
+    static alert(text, title = null) {
+        new MessageBox({
+            cls: 'warning',
+            title,
+            message: text,
+            buttons: ['ok'],
+            click: () => { },
+        }).show();
+    }
+}
+export class PromptDialogBox extends Dialog {
+    m_edit;
+    constructor(props) {
+        // remove overloaded elements from DialogBoxProps
+        //let icon = props.icon;	// ?? 'cls(far fa-comment-check)';	// todo: resolve that
+        //props.icon = undefined;
+        props.buttons = undefined;
+        props.width = props.width ?? 500;
+        super(props);
+        this.form.updateContent(new HLayout({
+            cls: 'panel',
+            content: [
+                //icon ? new Icon({
+                //	cls: 'icon',
+                //	icon: icon
+                //}) : null,
+                this.m_edit = new TextEdit({
+                    flex: 1,
+                    autoFocus: true,
+                    label: props.message,
+                    value: props.value
+                }),
+            ]
+        }), ['ok', 'cancel']);
+        if (props.click) {
+            this.on('btnClick', (ev) => {
+                if (ev.button === 'ok') {
+                    // no prevent default -> always close the messagebox
+                    // asap to allow
+                    asap(() => {
+                        this.m_props.click(this.m_edit.value);
+                    });
+                }
+            });
+        }
+    }
+    set text(txt) {
+        this.m_edit.label = txt;
+    }
+    /**
+     * display a messagebox
+     */
+    static show(props, inputCallback) {
+        let msg;
+        if (isString(props) || isHtmlString(props)) {
+            msg = new PromptDialogBox({ message: props, click: inputCallback });
+        }
+        else {
+            msg = new PromptDialogBox(props);
+        }
+        msg.show();
+        return msg;
+    }
+}

package/lib/panel.d.ts

@@ -0,0 +1,42 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file panel.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 { Component, ComponentContent, ContainerProps, ContainerEventMap } from './component';
+import { VLayout } from './layout';
+import { IconID } from './icon';
+export interface PanelProps<E extends ContainerEventMap = ContainerEventMap> extends ContainerProps<E> {
+    icon?: IconID;
+    title: string;
+    gadgets?: Component[];
+    sens?: 'horizontal' | 'vertical';
+}
+export declare class Panel<T extends PanelProps = PanelProps, E extends ContainerEventMap = ContainerEventMap> extends VLayout<T, E> {
+    private m_ui_title;
+    private m_ui_body;
+    constructor(props: T);
+    /** @ignore */
+    render(): void;
+    setContent(els: ComponentContent): void;
+    set title(text: string);
+}

package/lib/panel.js

@@ -0,0 +1,61 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file panel.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 { Component } from './component';
+import { VLayout, HLayout } from './layout';
+import { Label } from './label';
+import { Icon } from './icon';
+export class Panel extends VLayout {
+    m_ui_title;
+    m_ui_body;
+    constructor(props) {
+        super(props);
+        const sens = props?.sens == 'horizontal' ? '@hlayout' : '@vlayout';
+        //todo: cannot be called twice do to content overload
+        this.m_ui_title = new Label({ cls: 'title', text: this.m_props.title });
+        this.m_ui_body = new Component({ cls: 'body ' + sens, content: this.m_props.content });
+    }
+    /** @ignore */
+    render() {
+        const gadgets = this.m_props.gadgets ?? [];
+        const icon = this.m_props.icon ? new Icon({ icon: this.m_props.icon }) : null;
+        super.setContent([
+            new HLayout({
+                cls: 'title',
+                content: [
+                    icon,
+                    this.m_ui_title,
+                    ...gadgets
+                ]
+            }),
+            this.m_ui_body
+        ]);
+    }
+    setContent(els) {
+        this.m_ui_body.setContent(els);
+    }
+    set title(text) {
+        this.m_ui_title.text = text;
+    }
+}

package/lib/popup.d.ts

@@ -0,0 +1,71 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @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;
+}