x4js 1.4.4 → 1.4.7

package/lib/popup.js

@@ -0,0 +1,378 @@
+"use strict";
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @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/>.
+**/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Popup = exports.EvMove = void 0;
+const component_1 = require("./component");
+const tools_1 = require("./tools");
+const x4_events_1 = require("./x4_events");
+const application_1 = require("./application");
+function EvMove(pos) {
+    return (0, x4_events_1.BasicEvent)({ pos });
+}
+exports.EvMove = EvMove;
+/**
+ * base class for all popup elements
+ */
+class Popup extends component_1.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 = (0, component_1.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) {
+                (0, component_1.flyWrap)(this.m_ui_mask).addClass('@mask');
+            }
+        }
+        if (modal) {
+            application_1.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) {
+            (0, component_1.flyWrap)(this.m_ui_mask).removeClass('@mask');
+            const app = application_1.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 component_1.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 = (0, tools_1.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_1.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 tools_1.Size(width, height);
+                this.setStyle({ left, top, width: newsize.width, height: newsize.height });
+                this.emit('size', (0, component_1.EvSize)(newsize));
+            };
+            if (ne.type == 'mouseup' || ne.type == 'touchend') {
+                component_1.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);
+            }
+        });
+    }
+}
+exports.Popup = Popup;
+/**
+ * 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_1.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_1.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.js

@@ -1,3 +1,4 @@
+"use strict";
 /**
 *  ___   ___ __
 *  \  \_/  /  / _
@@ -22,14 +23,16 @@
 *
 * 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 {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PropertyEditor = void 0;
+const component_1 = require("./component");
+const x4_events_1 = require("./x4_events");
+const input_1 = require("./input");
+const textedit_1 = require("./textedit");
+const checkbox_1 = require("./checkbox");
+const spreadsheet_1 = require("./spreadsheet");
+const i18n_1 = require("./i18n");
+class PropertyEditor extends component_1.Component {
     m_fields;
     m_record;
     m_sheet;
@@ -42,16 +45,16 @@ export class PropertyEditor extends Component {
         this.m_record = props.record;
         this.m_fields = props.fields ?? [];
         this.m_label_w = props.labelWidth;
-        this.m_sheet = new Spreadsheet({
+        this.m_sheet = new spreadsheet_1.Spreadsheet({
             cls: '@fit',
             columns: [
                 {
-                    title: _tr.global.property,
+                    title: i18n_1._tr.global.property,
                     width: this.m_label_w > 0 ? this.m_label_w : -1,
                     cls: 'property'
                 },
                 {
-                    title: _tr.global.value,
+                    title: i18n_1._tr.global.value,
                     width: -1,
                     createEditor: (...a) => this._editCell(...a),
                     renderer: (...a) => this._renderCell(...a)
@@ -138,7 +141,7 @@ export class PropertyEditor extends Component {
         else {
             fld.value = text;
         }
-        this.emit('change', EvChange(text, fld));
+        this.emit('change', (0, x4_events_1.EvChange)(text, fld));
     }
     _renderCell(text, rec) {
         let fld = this.m_fields[rec.row];
@@ -186,21 +189,21 @@ export class PropertyEditor extends Component {
         switch (fld.type) {
             default:
             case 'string': {
-                editor = new TextEdit(props);
+                editor = new textedit_1.TextEdit(props);
                 break;
             }
             case 'number': {
-                editor = new TextEdit(props);
+                editor = new textedit_1.TextEdit(props);
                 break;
             }
             case 'password': {
                 props.type = 'password';
                 props.value = this.m_record.getField(fld.id);
-                editor = new Input(props);
+                editor = new input_1.Input(props);
                 break;
             }
             case 'boolean': {
-                editor = new CheckBox(props);
+                editor = new checkbox_1.CheckBox(props);
                 break;
             }
             case 'choice': {
@@ -245,3 +248,4 @@ export class PropertyEditor extends Component {
         return choices;
     }
 }
+exports.PropertyEditor = PropertyEditor;

package/lib/radiobtn.js

@@ -1,3 +1,4 @@
+"use strict";
 /**
 *  ___   ___ __
 *  \  \_/  /  / _
@@ -22,14 +23,16 @@
 *
 * 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 { Label } from './label';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioBtn = void 0;
+const component_1 = require("./component");
+const x4_events_1 = require("./x4_events");
+const input_1 = require("./input");
+const label_1 = require("./label");
 /**
  * Standard RadioBtn
  */
-export class RadioBtn extends Component {
+class RadioBtn extends component_1.Component {
     m_ui_input; // todo: remove that / use ref
     constructor(props) {
         super(props);
@@ -52,7 +55,7 @@ export class RadioBtn extends Component {
             this.addClass('checked');
         }
         this.setContent([
-            this.m_ui_input = new Input({
+            this.m_ui_input = new input_1.Input({
                 type: 'radio',
                 name: name,
                 tabIndex: props.tabIndex,
@@ -65,7 +68,7 @@ export class RadioBtn extends Component {
                     focus: () => this.m_ui_input.focus(),
                 }
             }),
-            new Label({
+            new label_1.Label({
                 ref: 'label',
                 icon: icon,
                 text: text,
@@ -85,12 +88,12 @@ export class RadioBtn extends Component {
         let query = '.x-input[name=' + props.name + ']';
         let nlist = document.querySelectorAll(query); //todo: document ?
         nlist.forEach((dom) => {
-            let radio = Component.getElement(dom, RadioBtn);
+            let radio = component_1.Component.getElement(dom, RadioBtn);
             radio.removeClass('checked');
         });
         let dom = this.m_ui_input.dom;
         this.setClass('checked', dom.checked);
-        this.emit('change', EvChange(true));
+        this.emit('change', (0, x4_events_1.EvChange)(true));
     }
     /**
      * @return the checked value
@@ -129,3 +132,4 @@ export class RadioBtn extends Component {
         this.itemWithRef('label').text = text;
     }
 }
+exports.RadioBtn = RadioBtn;

package/lib/rating.js

@@ -1,3 +1,4 @@
+"use strict";
 /**
 *  ___   ___ __
 *  \  \_/  /  / _
@@ -22,11 +23,13 @@
 *
 * 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 { HLayout } from './layout';
-import { Input } from './input';
-import { EvChange } from './x4_events';
-export class Rating extends HLayout {
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Rating = void 0;
+const component_1 = require("./component");
+const layout_1 = require("./layout");
+const input_1 = require("./input");
+const x4_events_1 = require("./x4_events");
+class Rating extends layout_1.HLayout {
     m_els;
     m_input;
     constructor(props) {
@@ -36,7 +39,7 @@ export class Rating extends HLayout {
     render(props) {
         let shape = props.shape ?? 'star';
         let value = props.value ?? 0;
-        this.m_input = new Input({
+        this.m_input = new input_1.Input({
             cls: '@hidden',
             name: props.name,
             value: '' + value
@@ -49,7 +52,7 @@ export class Rating extends HLayout {
             if (i + 1 <= value) {
                 cls += ' checked';
             }
-            let c = new Component({
+            let c = new component_1.Component({
                 tag: 'option',
                 cls,
                 data: { value: i + 1 }
@@ -81,13 +84,14 @@ export class Rating extends HLayout {
     _onclick(ev) {
         let on = true;
         for (let el = this.dom.firstChild; el; el = el.nextSibling) {
-            let comp = Component.getElement(el);
+            let comp = component_1.Component.getElement(el);
             comp.setClass('checked', on);
             if (el == ev.target) {
                 this.m_input.value = comp.getData('value');
                 on = false;
             }
         }
-        this.emit('change', EvChange(this.m_props.value));
+        this.emit('change', (0, x4_events_1.EvChange)(this.m_props.value));
     }
 }
+exports.Rating = Rating;

package/lib/request.js

@@ -1,3 +1,4 @@
+"use strict";
 /**
 *  ___   ___ __
 *  \  \_/  /  / _
@@ -22,6 +23,8 @@
 *
 * You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
 **/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ajax = exports.ajaxAsText = exports.ajaxAsJSON = exports.ajaxRequest = void 0;
 /**
  * TODO: use fetch api
  *
@@ -41,9 +44,9 @@ function dump( resp ) {
 getToto( dump );
 
 */
-import { isArray, isLiteralObject, isString, NetworkError } from './tools';
+const tools_1 = require("./tools");
 const DEFAULT_TIMEOUT = 10000;
-export function ajaxRequest(cfg) {
+function ajaxRequest(cfg) {
     let params, url = cfg.url, method = cfg.method || 'GET', formdata = false;
     if (cfg.params instanceof FormData) {
         params = cfg.params;
@@ -138,6 +141,7 @@ export function ajaxRequest(cfg) {
         xhr.abort();
     };
 }
+exports.ajaxRequest = ajaxRequest;
 function buildQuery(params, getMethod) {
     if (!params) {
         return '';
@@ -146,7 +150,7 @@ function buildQuery(params, getMethod) {
     for (let key in params) {
         let param = params[key];
         // array
-        if (isArray(param)) {
+        if ((0, tools_1.isArray)(param)) {
             for (let i = 0, n = param.length; i < n; i++) {
                 query.push(encodeURIComponent(key) + '[]=' + encodeURIComponent('' + param[i]));
             }
@@ -167,18 +171,20 @@ function buildQuery(params, getMethod) {
         return result;
     }
 }
-export async function ajaxAsJSON(url, init) {
+async function ajaxAsJSON(url, init) {
     let response = await ajax(url, init, 'application/json');
     return response.json();
 }
-export async function ajaxAsText(url, init) {
+exports.ajaxAsJSON = ajaxAsJSON;
+async function ajaxAsText(url, init) {
     let response = await ajax(url, init, 'text/plain');
     return response.text();
 }
+exports.ajaxAsText = ajaxAsText;
 /**
  * use encodeURIComponent for elements in url
  */
-export async function ajax(url, init, type) {
+async function ajax(url, init, type) {
     let options = {
         method: 'GET',
         headers: {
@@ -190,9 +196,9 @@ export async function ajax(url, init, type) {
     }
     if (init) {
         options = { ...options, ...init };
-        if (init.body && !isString(init.body)) {
+        if (init.body && !(0, tools_1.isString)(init.body)) {
             let cvt = false;
-            if (isLiteralObject(init.body)) {
+            if ((0, tools_1.isLiteralObject)(init.body)) {
                 cvt = true;
             }
             else if (!(init.body instanceof Blob) && !(init.body instanceof ArrayBuffer) && !(init.body instanceof FormData) &&
@@ -213,8 +219,9 @@ export async function ajax(url, init, type) {
     }
     else {
         if (!response.ok) {
-            throw new NetworkError(response);
+            throw new tools_1.NetworkError(response);
         }
         return response;
     }
 }
+exports.ajax = ajax;

package/lib/router.js

@@ -1,4 +1,7 @@
-export class Router {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Router = void 0;
+class Router {
     routes;
     constructor() {
         this.routes = [];
@@ -25,3 +28,4 @@ export class Router {
         });
     }
 }
+exports.Router = Router;