x4js 1.4.2

package/lib/dialog.d.ts

@@ -0,0 +1,171 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file dialog.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 { Popup, PopupProps, PopupEventMap } from './popup';
+import { IconID } from './icon';
+import { Label } from './label';
+import { Form, FormButtons } from './form';
+import { Component, ComponentContent } from './component';
+import { BasicEvent, EventCallback } from './x4_events';
+import { Rect, Size } from './tools';
+interface Geometry {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    minimized: boolean;
+    maximized: boolean;
+}
+export interface EvClose extends BasicEvent {
+}
+export interface EvBtnClick extends BasicEvent {
+    button: string;
+}
+export declare function EvBtnClick(button: string): EvBtnClick;
+export interface DialogBoxEventMap extends PopupEventMap {
+    close: EvClose;
+    btnClick: EvBtnClick;
+}
+export declare type InitFormCallback = () => Form;
+export interface DialogProps<E extends DialogBoxEventMap = DialogBoxEventMap> extends PopupProps<E> {
+    title?: string;
+    icon?: IconID;
+    buttons?: FormButtons;
+    btnClick?: EventCallback<EvBtnClick>;
+    closable?: boolean;
+    movable?: boolean;
+    maximized?: boolean;
+    maximizable?: boolean;
+    minimizable?: boolean;
+    autoClose?: boolean;
+    width?: number;
+    height?: number;
+    dlgWidth?: number;
+    dlgHeight?: number;
+    form?: Form | InitFormCallback;
+    disableSuggestions?: boolean;
+}
+/**
+ * Standard dialog class
+ */
+export declare class Dialog<P extends DialogProps = DialogProps, E extends DialogBoxEventMap = DialogBoxEventMap> extends Popup<P, E> {
+    protected m_icon: IconID;
+    protected m_title: string;
+    protected m_form: Form;
+    protected m_buttons: FormButtons;
+    protected m_closable: boolean;
+    protected m_movable: boolean;
+    protected m_maximized: boolean;
+    protected m_minimized: boolean;
+    protected m_maximizable: boolean;
+    protected m_minimizable: boolean;
+    protected m_minFormSize: Size;
+    protected m_rc_max: Rect;
+    protected m_rc_min: Rect;
+    protected m_el_title: Component;
+    protected m_last_down: number;
+    protected m_auto_close: boolean;
+    protected m_ui_title: Label;
+    protected m_form_cb: InitFormCallback;
+    constructor(props: P);
+    /**
+     *
+     */
+    componentCreated(): void;
+    /**
+     *
+     */
+    private _handleClick;
+    /**
+     * restore the geometry
+     */
+    setGeometry(geom: Geometry): void;
+    /**
+     * return the geometry (usefull to save state)
+     */
+    getGeometry(): Geometry;
+    /**
+     * resize the dialog
+     * @param width
+     * @param height
+     */
+    setSize(width: number, height: number): void;
+    /** @ignore */
+    render(): void;
+    /**
+     * change the dialog content
+     * @param els
+     * @param refreshAll
+     */
+    setContent(els: ComponentContent, refreshAll?: boolean): void;
+    /**
+     * change the dialog buttons
+     * @param buttons
+     */
+    setButtons(buttons: FormButtons): void;
+    /**
+     * return the dialog form
+     */
+    get form(): Form;
+    /**
+     * close the dialog
+     */
+    close(): void;
+    /**
+     *
+     */
+    private _toggleMax;
+    /**
+     *
+     */
+    private _toggleMin;
+    /**
+     *
+     */
+    private _mouseDown;
+    /**
+     * maximize the dialog
+     */
+    maximize(): void;
+    /**
+     *
+     */
+    private _maximize;
+    /**
+     * minimize the dialog
+     */
+    minimize(): void;
+    /**
+     *
+     */
+    private _minimize;
+    /**
+     * change the dialog title
+     */
+    set title(title: string);
+    itemWithName<T extends Component>(name: string): T;
+    getValues(): any;
+    validate(): boolean;
+}
+export {};

package/lib/dialog.js

@@ -0,0 +1,468 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file dialog.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 { Popup, EvMove } from './popup';
+import { Icon } from './icon';
+import { HLayout } from './layout';
+import { Label } from './label';
+import { Form } from './form';
+import { Component, EvSize, flyWrap } from './component';
+import { BasicEvent } from './x4_events';
+import { Rect, getMousePos, isFunction, isTouchDevice } from './tools';
+export function EvBtnClick(button) {
+    return BasicEvent({ button });
+}
+/**
+ * Standard dialog class
+ */
+export class Dialog extends Popup {
+    m_icon;
+    m_title;
+    m_form;
+    m_buttons;
+    m_closable;
+    m_movable;
+    m_maximized;
+    m_minimized;
+    m_maximizable;
+    m_minimizable;
+    m_minFormSize;
+    m_rc_max;
+    m_rc_min;
+    m_el_title;
+    m_last_down;
+    m_auto_close;
+    m_ui_title;
+    m_form_cb;
+    constructor(props) {
+        let content = props.content;
+        props.content = null;
+        let width = props.width;
+        let height = props.height;
+        props.width = undefined;
+        props.height = undefined;
+        super(props);
+        this.m_minFormSize = { width, height };
+        this.enableMask(true);
+        if (props.form) {
+            if (!isFunction(props.form)) {
+                this.m_form = props.form;
+                this.m_form.on('btnClick', (e) => this._handleClick(e));
+            }
+            else {
+                this.m_form_cb = props.form;
+            }
+        }
+        else {
+            this.m_form = new Form({
+                content,
+                buttons: props.buttons,
+                disableSuggestions: props.disableSuggestions,
+                btnClick: (e) => this._handleClick(e)
+            });
+        }
+        this.m_movable = props.movable;
+        this.m_auto_close = props.autoClose ?? true;
+        this.m_icon = props.icon;
+        this.m_title = props.title;
+        this.m_buttons = props.buttons ?? null;
+        this.m_closable = props.closable ?? false;
+        this.m_last_down = 0;
+        this.on('size', (ev) => {
+            this.addClass('@resized');
+            this.m_form.setStyleValue('width', null);
+            this.m_form.setStyleValue('height', null);
+        });
+        this.m_maximized = false;
+        this.m_minimized = false;
+        this.m_maximizable = false;
+        this.m_minimizable = false;
+        if (props.maximizable !== undefined) {
+            this.m_maximizable = props.maximizable;
+        }
+        if (props.minimizable !== undefined) {
+            this.m_minimizable = props.minimizable;
+        }
+        if (props.maximized == true) {
+            this.m_maximizable = true;
+        }
+        if (props.btnClick) {
+            this.on('btnClick', props.btnClick);
+        }
+    }
+    /**
+     *
+     */
+    componentCreated() {
+        super.componentCreated();
+        if (this.m_minFormSize.width) {
+            this.m_form.setStyle({
+                minWidth: this.m_minFormSize.width,
+                width: this.m_minFormSize.width
+            });
+        }
+        if (this.m_minFormSize.height) {
+            this.m_form.setStyle({
+                minHeight: this.m_minFormSize.height,
+                height: this.m_minFormSize.height
+            });
+        }
+        const rc = this.getBoundingRect();
+        this.setStyleValue('min-width', rc.width);
+        this.setStyleValue('min-height', rc.height);
+        this.setStyleValue('width', rc.width);
+        this.setStyleValue('height', rc.height);
+        if (this.m_props.dlgWidth) {
+            this.setStyleValue('width', this.m_props.dlgWidth + '%');
+        }
+        if (this.m_props.dlgHeight) {
+            this.setStyleValue('height', this.m_props.dlgHeight + '%');
+        }
+        this.addClass('@resized');
+        if (this.m_props.maximized) {
+            this._maximize();
+            this.emit('size', EvSize(null));
+        }
+        else {
+            this.centerOnScreen();
+        }
+    }
+    /**
+     *
+     */
+    _handleClick(ev) {
+        this.emit('btnClick', ev);
+        if (!ev.defaultPrevented) {
+            this.close();
+        }
+    }
+    /**
+     * restore the geometry
+     */
+    setGeometry(geom) {
+        if (geom.minimized && this.m_minimizable) {
+            this._minimize(false);
+            this.m_rc_min = new Rect(geom.left, geom.top, geom.width, geom.height);
+            this.displayAt(geom.left, geom.top, 'top-left');
+        }
+        else if (geom.maximized && this.m_maximizable) {
+            this._maximize(false);
+            this.m_rc_max = new Rect(geom.left, geom.top, geom.width, geom.height);
+        }
+        else {
+            this.setSize(geom.width, geom.height);
+            this.displayAt(geom.left, geom.top, 'top-left');
+        }
+    }
+    /**
+     * return the geometry (usefull to save state)
+     */
+    getGeometry() {
+        if (this.m_minimized) {
+            return {
+                left: this.m_rc_min.left,
+                top: this.m_rc_min.top,
+                width: this.m_rc_min.width,
+                height: this.m_rc_min.height,
+                minimized: true,
+                maximized: false
+            };
+        }
+        else if (this.m_maximized) {
+            return {
+                left: this.m_rc_max.left,
+                top: this.m_rc_max.top,
+                width: this.m_rc_max.width,
+                height: this.m_rc_max.height,
+                minimized: false,
+                maximized: true
+            };
+        }
+        let rc = this.getBoundingRect();
+        return {
+            left: rc.left,
+            top: rc.top,
+            width: rc.width,
+            height: rc.height,
+            minimized: false,
+            maximized: false
+        };
+    }
+    /**
+     * resize the dialog
+     * @param width
+     * @param height
+     */
+    setSize(width, height) {
+        this.setStyle({ width, height });
+        this.emit('size', EvSize({ width, height }));
+    }
+    /** @ignore */
+    render() {
+        if (this.m_form_cb) {
+            this.m_form = this.m_form_cb();
+            this.m_form.on('btnClick', (e) => this._handleClick(e));
+            this.m_form_cb = null;
+        }
+        let hasTitle = this.m_icon !== undefined || this.m_closable || this.m_title !== undefined || this.m_movable;
+        this.m_el_title = null;
+        if (hasTitle) {
+            this.m_el_title = new HLayout({
+                cls: 'title',
+                content: [
+                    this.m_icon ? new Icon({ icon: this.m_icon }) : null,
+                    this.m_ui_title = new Label({ flex: 1, text: this.m_title }),
+                    this.m_minimizable ? new Icon({ cls: 'min-btn', icon: 'cls(far fa-window-minimize)', dom_events: { click: () => this._toggleMin() } }) : null,
+                    this.m_maximizable ? new Icon({ cls: 'max-btn', icon: 'cls(far fa-window-maximize)', dom_events: { click: () => this._toggleMax() } }) : null,
+                    this.m_closable ? new Icon({ icon: 'cls(far fa-rectangle-times)', dom_events: { click: () => this.close() } }) : null,
+                ]
+            });
+            if (this.m_movable) {
+                if (isTouchDevice()) {
+                    this.m_el_title.setDomEvent('touchstart', (e) => this._mouseDown(e));
+                }
+                else {
+                    this.m_el_title.setDomEvent('mousedown', (e) => this._mouseDown(e));
+                }
+            }
+        }
+        super.setContent([
+            this.m_el_title,
+            this.m_form
+        ]);
+    }
+    /**
+     * change the dialog content
+     * @param els
+     * @param refreshAll
+     */
+    setContent(els, refreshAll = true) {
+        this.m_form.setContent(els, refreshAll);
+    }
+    /**
+     * change the dialog buttons
+     * @param buttons
+     */
+    setButtons(buttons) {
+        this.m_form.setButtons(buttons);
+    }
+    /**
+     * return the dialog form
+     */
+    get form() {
+        return this.m_form;
+    }
+    /**
+     * close the dialog
+     */
+    close() {
+        this.emit('close', {});
+        super.close();
+    }
+    /**
+     *
+     */
+    _toggleMax() {
+        if (!this.m_maximizable) {
+            return;
+        }
+        if (this.m_maximized) {
+            this.removeClass('maximized');
+            this.setStyle({
+                left: this.m_rc_max.left,
+                top: this.m_rc_max.top,
+                width: this.m_rc_max.width,
+                height: this.m_rc_max.height,
+            });
+            this.m_maximized = false;
+            this.emit('size', EvSize(null, 'restore'));
+        }
+        else {
+            this._maximize();
+            this.emit('size', EvSize(null, 'maximize'));
+        }
+    }
+    /**
+     *
+     */
+    _toggleMin() {
+        if (!this.m_minimizable) {
+            return;
+        }
+        if (this.m_minimized) {
+            this.removeClass('minimized');
+            this.setStyle({
+                //left: 	this.m_rc_min.left,
+                //top: 	this.m_rc_min.top,
+                width: this.m_rc_min.width,
+                height: this.m_rc_min.height,
+            });
+            this.m_minimized = false;
+            this.emit('size', EvSize(null, 'restore'));
+        }
+        else {
+            this._minimize();
+            this.emit('size', EvSize(null, 'minimize'));
+        }
+    }
+    /**
+     *
+     */
+    _mouseDown(event) {
+        let { x, y } = getMousePos(event, true);
+        let wrc = flyWrap(document.body).getBoundingRect();
+        let rc = this.getBoundingRect(true);
+        let trc = this.m_el_title.getBoundingRect();
+        let dx = x - rc.left, dy = y - rc.top;
+        let cstyle = this.getComputedStyle();
+        let topw = cstyle.parse('marginTop') + cstyle.parse('paddingTop') + cstyle.parse('borderTopWidth');
+        let botw = cstyle.parse('marginBottom') + cstyle.parse('paddingBottom') + cstyle.parse('borderBottomWidth');
+        let lftw = cstyle.parse('marginLeft') + cstyle.parse('paddingLeft') + cstyle.parse('borderLeftWidth');
+        let rgtw = cstyle.parse('marginRight') + cstyle.parse('paddingRight') + cstyle.parse('borderRightWidth');
+        wrc.top += topw - trc.height;
+        wrc.height -= topw + botw - trc.height;
+        wrc.left += lftw;
+        wrc.width -= lftw + rgtw;
+        // custom handling double click
+        const now = Date.now();
+        const delta = now - this.m_last_down;
+        if (this.m_maximizable && delta < 700) {
+            this._toggleMax();
+            return;
+        }
+        this.m_last_down = now;
+        if (this.m_maximized) {
+            // cannot move in max state
+            return;
+        }
+        let __move = (ex, ey) => {
+            let x = ex - dx, y = ey - dy;
+            if (x + rc.width < wrc.left) {
+                x = wrc.left - rc.width;
+            }
+            else if (x > wrc.right) {
+                x = wrc.right;
+            }
+            if (y < wrc.top) { // title grip is on top
+                y = wrc.top;
+            }
+            else if (y > wrc.bottom) {
+                y = wrc.bottom;
+            }
+            this.setStyle({
+                left: x,
+                top: y
+            });
+        };
+        Component.setCapture(this, (ev) => {
+            if (ev.type == 'mousemove') {
+                let mev = ev;
+                __move(mev.clientX, mev.clientY);
+            }
+            else if (ev.type == 'touchmove') {
+                let tev = ev;
+                if (tev.touches.length == 1) {
+                    __move(tev.touches[0].clientX, tev.touches[0].clientY);
+                }
+            }
+            else if (ev.type == 'mouseup' || ev.type == 'touchend') {
+                Component.releaseCapture();
+                this.emit('move', EvMove(null));
+            }
+            else if (ev.type == 'mousedown' || ev.type == 'touchstart') {
+            }
+        });
+    }
+    /**
+     * maximize the dialog
+     */
+    maximize() {
+        if (!this.m_maximizable || this.m_maximized) {
+            return;
+        }
+        this._maximize();
+        this.emit('size', EvSize(null));
+    }
+    /**
+     *
+     */
+    _maximize(saveRect = true) {
+        if (saveRect) {
+            this.m_rc_max = this.getBoundingRect(false);
+        }
+        this.addClass('maximized');
+        this.m_maximized = true;
+        this.setStyle({
+            left: undefined,
+            top: undefined,
+            width: undefined,
+            height: undefined,
+        });
+    }
+    /**
+     * minimize the dialog
+     */
+    minimize() {
+        if (!this.m_minimizable || this.m_minimized) {
+            return;
+        }
+        this._minimize();
+        this.emit('size', EvSize(null));
+    }
+    /**
+     *
+     */
+    _minimize(saveRect = true) {
+        if (saveRect) {
+            this.m_rc_min = this.getBoundingRect(false);
+        }
+        this.addClass('minimized');
+        this.m_minimized = true;
+        this.setStyle({
+            //left: undefined,
+            //top: undefined,
+            width: undefined,
+            height: undefined,
+        });
+    }
+    /**
+     * change the dialog title
+     */
+    set title(title) {
+        this.m_title = title;
+        if (this.m_ui_title) {
+            this.m_ui_title.text = title;
+        }
+    }
+    itemWithName(name) {
+        let result = this.dom.querySelector(`[name="${name}"]`);
+        return result ? Component.getElement(result) : null;
+    }
+    getValues() {
+        return this.m_form.getValues();
+    }
+    validate() {
+        return this.m_form.validate();
+    }
+}