x4js 1.4.2

package/lib/popup.js

@@ -0,0 +1,373 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @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/property_editor.d.ts

@@ -0,0 +1,67 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file propertyeditor.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 { CEventMap, Component, CProps } from './component';
+import { EvChange, EventCallback } from './x4_events';
+import { InputProps } from './input';
+import { Spreadsheet } from './spreadsheet';
+import { Record } from './datastore';
+export interface SaveCallback {
+    (id: any, record: any[]): void;
+}
+export declare type IPropertyField = {
+    id: any;
+    title: string;
+    type: Function | "string" | 'number' | 'boolean' | 'choice' | 'password' | 'button' | 'color';
+    value?: any;
+    data?: any;
+    editorProps?: InputProps;
+    readOnly?: boolean;
+};
+interface PropertyEditorEventMap extends CEventMap {
+    change: EvChange;
+}
+export interface PropertyEditorProps extends CProps<PropertyEditorEventMap> {
+    fields: IPropertyField[];
+    labelWidth?: number;
+    record?: Record;
+    change: EventCallback<EvChange>;
+}
+export declare class PropertyEditor extends Component<PropertyEditorProps, PropertyEditorEventMap> {
+    m_fields: IPropertyField[];
+    m_record: Record;
+    m_sheet: Spreadsheet;
+    m_label_w: number;
+    constructor(props: PropertyEditorProps);
+    render(props: PropertyEditorProps): void;
+    setFields(fields: IPropertyField[]): void;
+    setRecord(record: Record): void;
+    private _updateProperties;
+    private _cellChange;
+    _renderCell(text: any, rec: any): any;
+    _editCell(props: any, row: number, col: number): Component<CProps<import("./base_component").BaseComponentEventMap>, import("./base_component").BaseComponentEventMap>;
+    private _choicesFromArray;
+    private _choicesFromStore;
+}
+export {};

package/lib/property_editor.js

@@ -0,0 +1,247 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file propertyeditor.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 { EvChange } from './x4_events';
+import { Input } from './input';
+import { TextEdit } from './textedit';
+import { CheckBox } from './checkbox';
+import { Spreadsheet } from './spreadsheet';
+import { _tr } from './i18n';
+export class PropertyEditor extends Component {
+    m_fields;
+    m_record;
+    m_sheet;
+    m_label_w;
+    constructor(props) {
+        super(props);
+        this.mapPropEvents(props, 'change');
+    }
+    render(props) {
+        this.m_record = props.record;
+        this.m_fields = props.fields ?? [];
+        this.m_label_w = props.labelWidth;
+        this.m_sheet = new Spreadsheet({
+            cls: '@fit',
+            columns: [
+                {
+                    title: _tr.global.property,
+                    width: this.m_label_w > 0 ? this.m_label_w : -1,
+                    cls: 'property'
+                },
+                {
+                    title: _tr.global.value,
+                    width: -1,
+                    createEditor: (...a) => this._editCell(...a),
+                    renderer: (...a) => this._renderCell(...a)
+                },
+            ],
+            autoedit: true,
+            change: (e) => this._cellChange(e)
+        });
+        this._updateProperties();
+        this.setContent(this.m_sheet);
+    }
+    setFields(fields) {
+        if (fields) {
+            this.m_fields = fields;
+            this._updateProperties();
+        }
+        else {
+            this.m_sheet.clearData();
+        }
+    }
+    setRecord(record) {
+        this.m_record = record;
+        this._updateProperties();
+    }
+    _updateProperties() {
+        this.m_sheet.lockUpdate(true);
+        this.m_sheet.clearData();
+        this.m_fields.forEach((fld, lno) => {
+            this.m_sheet.setCellText(lno, 0, fld.title);
+            if (this.m_record) {
+                this.m_sheet.setCellText(lno, 1, this.m_record.getField(fld.id));
+            }
+            else {
+                this.m_sheet.setCellText(lno, 1, fld.value);
+            }
+        });
+        this.m_sheet.lockUpdate(false);
+    }
+    _cellChange(ev) {
+        let ctx = ev.context;
+        let text = ev.value;
+        if (ctx.col != 1) {
+            return;
+        }
+        let fld = this.m_fields[ctx.row];
+        switch (fld.type) {
+            default:
+            case 'string': {
+                break;
+            }
+            case 'number': {
+                break;
+            }
+            case 'password': {
+                break;
+            }
+            case 'boolean': {
+                break;
+            }
+            case 'choice': {
+                /*
+                let cprops = <ComboBoxProps>fprops;
+                if( cprops!==fld.props ) {
+                    
+                    let choices;
+                    if( isArray(fld.values) ) {
+                        choices = this._choicesFromArray( fld.values );
+                    }
+                    else if( fld.values instanceof DataStore ) {
+                        choices = this._choicesFromStore( fld.values, 'name' );
+                    }
+                                                
+                    cprops.items = choices;
+                }
+
+                editor = new ComboBox( cprops );
+                */
+                break;
+            }
+        }
+        if (this.m_record) {
+            this.m_record.setField(fld.id, text);
+        }
+        else {
+            fld.value = text;
+        }
+        this.emit('change', EvChange(text, fld));
+    }
+    _renderCell(text, rec) {
+        let fld = this.m_fields[rec.row];
+        switch (fld.type) {
+            default:
+            case 'string': {
+                break;
+            }
+            case 'number': {
+                break;
+            }
+            case 'password': {
+                text = '●●●●●●';
+                break;
+            }
+            case 'boolean': {
+                break;
+            }
+            case 'choice': {
+                /*
+                let cprops = <ComboBoxProps>fprops;
+                if( cprops!==fld.props ) {
+                    
+                    let choices;
+                    if( isArray(fld.values) ) {
+                        choices = this._choicesFromArray( fld.values );
+                    }
+                    else if( fld.values instanceof DataStore ) {
+                        choices = this._choicesFromStore( fld.values, 'name' );
+                    }
+                                                
+                    cprops.items = choices;
+                }
+
+                editor = new ComboBox( cprops );
+                */
+                break;
+            }
+        }
+        return text;
+    }
+    _editCell(props, row, col) {
+        let fld = this.m_fields[row];
+        let editor;
+        switch (fld.type) {
+            default:
+            case 'string': {
+                editor = new TextEdit(props);
+                break;
+            }
+            case 'number': {
+                editor = new TextEdit(props);
+                break;
+            }
+            case 'password': {
+                props.type = 'password';
+                props.value = this.m_record.getField(fld.id);
+                editor = new Input(props);
+                break;
+            }
+            case 'boolean': {
+                editor = new CheckBox(props);
+                break;
+            }
+            case 'choice': {
+                /*let cprops = <ComboBoxProps>props;
+                if( cprops!==fld.props ) {
+                    
+                    let choices;
+                    if( isArray(fld.values) ) {
+                        choices = this._choicesFromArray( fld.values );
+                    }
+                    else if( fld.values instanceof DataStore ) {
+                        choices = this._choicesFromStore( fld.values, 'name' );
+                    }
+                                                
+                    cprops.items = choices;
+                }
+
+                editor = new ComboBox( cprops );
+                */
+                break;
+            }
+        }
+        return editor;
+    }
+    _choicesFromArray(values) {
+        let choices = values.map((e) => {
+            if (typeof (e) == 'object') {
+                return { id: e.id, text: e.value };
+            }
+            else {
+                return { id: e, text: '' + e };
+            }
+        });
+        return choices;
+    }
+    _choicesFromStore(view, field) {
+        let choices = [];
+        for (let i = 0, n = view.count; i < n; i++) {
+            let rec = view.getByIndex(i);
+            choices.push({ id: rec.getID(), text: rec.getField(field) });
+        }
+        return choices;
+    }
+}