x4js 1.4.4 → 1.4.7

package/lib/layout.js

@@ -0,0 +1,271 @@
+"use strict";
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+ * @file layout.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.ScrollView = exports.TableLayout = exports.GridLayout = exports.AutoLayout = exports.VLayout = exports.HLayout = exports.AbsLayout = void 0;
+const component_1 = require("./component");
+const tools_1 = require("./tools");
+// ============================================================================
+// [ABSLAYOUT]
+// ============================================================================
+class AbsLayout extends component_1.Container {
+}
+exports.AbsLayout = AbsLayout;
+// ============================================================================
+// [HLAYOUT]
+// ============================================================================
+class HLayout extends component_1.Container {
+}
+exports.HLayout = HLayout;
+// ============================================================================
+// [VLAYOUT]
+// ============================================================================
+class VLayout extends component_1.Container {
+}
+exports.VLayout = VLayout;
+class AutoLayout extends component_1.Container {
+    constructor(props) {
+        super(props);
+        this.setDomEvent('sizechange', () => this._updateLayout());
+    }
+    componentCreated() {
+        super.componentCreated();
+        this._updateLayout();
+    }
+    _updateLayout() {
+        let horz = this.m_props.defaultLayout == 'horizontal' ? true : false;
+        if (this.m_props.switchSize <= 0 && window.screen.height > window.screen.width) {
+            horz = !horz;
+        }
+        else {
+            let rc = this.getBoundingRect();
+            if ((horz && rc.width < this.m_props.switchSize) || (!horz && rc.height < this.m_props.switchSize)) {
+                horz = !horz;
+            }
+        }
+        if (horz) {
+            this.removeClass('@vlayout');
+            this.addClass('@hlayout');
+        }
+        else {
+            this.addClass('@vlayout');
+            this.removeClass('@hlayout');
+        }
+    }
+}
+exports.AutoLayout = AutoLayout;
+class GridLayout extends component_1.Container {
+    constructor(props) {
+        /// @ts-ignore
+        // Argument of type 'GridLayoutProps' is not assignable to parameter of type 'P'.
+        // 'GridLayoutProps' is assignable to the constraint of type 'P', but 'P' could be instantiated with a different subtype of constraint 'GridLayoutProps'.
+        super(props);
+    }
+    /** @ignore */
+    render() {
+        if (this.m_props.colSizes) {
+            this.setStyleValue('grid-template-columns', this.m_props.colSizes);
+        }
+        if (this.m_props.rowSizes) {
+            this.setStyleValue('grid-template-rows', this.m_props.rowSizes);
+        }
+        if (this.m_props.colGap) {
+            this.setStyleValue('grid-gap', this.m_props.colGap);
+        }
+        if (this.m_props.template) {
+            this.setStyleValue('grid-template-areas', this.m_props.template.join('\n'));
+        }
+    }
+}
+exports.GridLayout = GridLayout;
+class TableLayout extends component_1.Container {
+    m_cells;
+    constructor(props) {
+        super(props);
+        this.setProp('tag', 'table');
+        this.m_cells = new Map();
+    }
+    _getCell(row, col, create = true) {
+        let idx = _mkid(row, col);
+        return this.m_cells.get(idx) ?? (create ? { item: undefined } : null);
+    }
+    _setCell(row, col, cell, update = false) {
+        let idx = _mkid(row, col);
+        this.m_cells.set(idx, cell);
+        if (this.dom && cell.item && update) {
+            if (cell.item instanceof component_1.Component) {
+                cell.item.update();
+            }
+            else {
+                this.enumChilds((c) => {
+                    let crow = c.getData('row');
+                    if (crow == row) {
+                        let ccol = c.getData('col');
+                        if (ccol == col) {
+                            c.setContent(cell.item);
+                            c.update();
+                            return true;
+                        }
+                    }
+                });
+            }
+        }
+    }
+    setCell(row, col, item) {
+        let cell = this._getCell(row, col);
+        cell.item = item;
+        this._setCell(row, col, cell, true);
+    }
+    merge(row, col, rowCount, colCount) {
+        let cell = this._getCell(row, col);
+        cell.rowSpan = rowCount;
+        cell.colSpan = colCount;
+        this._setCell(row, col, cell);
+    }
+    setCellWidth(row, col, width) {
+        let cell = this._getCell(row, col);
+        cell.width = width;
+        this._setCell(row, col, cell);
+    }
+    setCellHeight(row, col, height) {
+        let cell = this._getCell(row, col);
+        cell.height = height;
+        this._setCell(row, col, cell);
+    }
+    setCellClass(row, col, cls) {
+        let cell = this._getCell(row, col);
+        cell.cls = cls;
+        this._setCell(row, col, cell);
+    }
+    setColClass(col, cls) {
+        let cell = this._getCell(-1, col);
+        cell.cls = cls;
+        this._setCell(-1, col, cell);
+    }
+    setRowClass(row, cls) {
+        let cell = this._getCell(row, 999);
+        cell.cls = cls;
+        this._setCell(row, 999, cell);
+    }
+    getCell(row, col) {
+        let cell = this._getCell(row, col);
+        return cell?.item;
+    }
+    render() {
+        let rows = [];
+        let skip = [];
+        for (let r = 0; r < this.m_props.rows; r++) {
+            let cols = [];
+            for (let c = 0; c < this.m_props.columns; c++) {
+                let idx = _mkid(r, c);
+                if (skip.indexOf(idx) >= 0) {
+                    continue;
+                }
+                let cell = this.m_cells.get(idx);
+                let cdata = this.m_cells.get(_mkid(-1, c));
+                let cls = '';
+                if (cell && cell.cls) {
+                    cls = cell.cls;
+                }
+                if (cdata && cdata.cls) {
+                    cls += ' ' + cdata.cls;
+                }
+                let cc = new component_1.Component({
+                    tag: 'td',
+                    content: cell?.item,
+                    width: cell?.width,
+                    height: cell?.height,
+                    data: { row: r, col: c },
+                    cls
+                });
+                if (cell) {
+                    let rs = cell.rowSpan ?? 0, cs = cell.colSpan ?? 0;
+                    if (rs > 0) {
+                        cc.setAttribute('rowspan', rs + 1);
+                    }
+                    if (cs > 0) {
+                        cc.setAttribute('colspan', cs + 1);
+                    }
+                    if (rs || cs) {
+                        for (let sr = 0; sr <= rs; sr++) {
+                            for (let sc = 0; sc <= cs; sc++) {
+                                skip.push(_mkid(sr + r, sc + c));
+                            }
+                        }
+                    }
+                }
+                cols.push(cc);
+            }
+            let rdata = this._getCell(r, 999, false);
+            let rr = new component_1.Component({
+                tag: 'tr',
+                data: { row: r },
+                content: cols,
+                cls: rdata?.cls
+            });
+            rows.push(rr);
+        }
+        this.setContent(rows);
+    }
+}
+exports.TableLayout = TableLayout;
+/**
+ * @ignore
+ */
+function _mkid(row, col) {
+    return row * 1000 + col;
+}
+/**
+ * @ignore
+ */
+function _getid(key) {
+    return {
+        row: Math.floor(key / 1000) | 0,
+        col: (key % 1000) | 0
+    };
+}
+class ScrollView extends component_1.Component {
+    constructor(props) {
+        super(props);
+        this.setContent(props.content);
+    }
+    setContent(content) {
+        if (!content) {
+            super.setContent(null);
+        }
+        else {
+            let container;
+            if ((0, tools_1.isArray)(content)) {
+                container = new VLayout({ content });
+            }
+            else {
+                container = content;
+            }
+            container.addClass('@scroll-container');
+            super.setContent(container);
+        }
+    }
+}
+exports.ScrollView = ScrollView;

package/lib/link.js

@@ -1,3 +1,4 @@
+"use strict";
 /**
 *  ___  ___ __
 *  \  \/  /  / _
@@ -22,19 +23,21 @@
 *
 * 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, isHtmlString, html } from './component';
-import { EvClick } from './x4_events';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Link = void 0;
+const component_1 = require("./component");
+const x4_events_1 = require("./x4_events");
 /**
  * Standard Link
  */
-export class Link extends Component {
+class Link extends component_1.Component {
     constructor(props) {
         super(props);
         this.setDomEvent('click', () => this._handleClick());
         this.mapPropEvents(props, 'click');
     }
     _handleClick() {
-        this.emit('click', EvClick());
+        this.emit('click', (0, x4_events_1.EvClick)());
     }
     /** @ignore */
     render(props) {
@@ -45,7 +48,7 @@ export class Link extends Component {
         this.setAttribute('href', href);
         this.setAttribute('target', props.target);
         if (text) {
-            this.setContent(isHtmlString(text) ? text : html `<span>${text}</span>`);
+            this.setContent((0, component_1.isHtmlString)(text) ? text : (0, component_1.html) `<span>${text}</span>`);
         }
     }
     set text(text) {
@@ -53,3 +56,4 @@ export class Link extends Component {
         this.update();
     }
 }
+exports.Link = Link;

package/lib/listview.js

@@ -1,3 +1,4 @@
+"use strict";
 /**
 *  ___   ___ __
 *  \  \_/  /  / _
@@ -22,27 +23,30 @@
 *
 * 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, Component, EvDblClick } from './component';
-import { HLayout, VLayout } from './layout';
-import { Popup } from './popup';
-import { isFunction } from './tools';
-import { MenuItem } from "./menu";
-import { EvContextMenu, EvSelectionChange, EvClick, BasicEvent } from "./x4_events";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopupListView = exports.EvCancel = exports.ListView = exports.ListViewItem = void 0;
+const component_1 = require("./component");
+const layout_1 = require("./layout");
+const popup_1 = require("./popup");
+const tools_1 = require("./tools");
+const menu_1 = require("./menu");
+const x4_events_1 = require("./x4_events");
 /**
  * item definition
  */
-export class ListViewItem {
+class ListViewItem {
     id;
     text; // if you need pure text
     html; // if text is html
     icon;
     data;
 }
+exports.ListViewItem = ListViewItem;
 ;
 /**
  * Standard listview class
  */
-export class ListView extends VLayout {
+class ListView extends layout_1.VLayout {
     m_selection;
     m_defer_sel;
     m_container;
@@ -115,7 +119,7 @@ export class ListView extends VLayout {
     _handleKey(ev) {
         let moveSel = (sens) => {
             let items;
-            if (isFunction(this.m_props.items)) {
+            if ((0, tools_1.isFunction)(this.m_props.items)) {
                 items = this.m_props.items();
                 this.m_props.items = items;
             }
@@ -160,11 +164,11 @@ export class ListView extends VLayout {
     _buildContent() {
         let props = this.m_props;
         if (props.virtual) {
-            this.m_container = new Container({
+            this.m_container = new component_1.Container({
                 cls: '@scroll-container',
                 content: []
             });
-            this.m_view = new Container({
+            this.m_view = new component_1.Container({
                 cls: '@scroll-view',
                 flex: 1,
                 content: this.m_container,
@@ -175,7 +179,7 @@ export class ListView extends VLayout {
             });
             this.setContent([
                 this.m_view,
-                props.gadgets ? new HLayout({
+                props.gadgets ? new layout_1.HLayout({
                     cls: 'gadgets',
                     content: props.gadgets
                 }) : null,
@@ -183,7 +187,7 @@ export class ListView extends VLayout {
         }
         else {
             this.m_view = undefined;
-            this.m_container = new VLayout({
+            this.m_container = new layout_1.VLayout({
                 cls: '@scroll-container',
                 content: []
             });
@@ -219,7 +223,7 @@ export class ListView extends VLayout {
         let props = this.m_props;
         let items = [];
         let list_items = props.items;
-        if (isFunction(list_items)) {
+        if ((0, tools_1.isFunction)(list_items)) {
             list_items = list_items();
         }
         let selId = this.m_selection?.item.id;
@@ -305,7 +309,7 @@ export class ListView extends VLayout {
             return this.m_props.renderItem(item);
         }
         else {
-            return new HLayout({ content: item.text });
+            return new layout_1.HLayout({ content: item.text });
         }
     }
     /** @ignore */
@@ -313,18 +317,18 @@ export class ListView extends VLayout {
         let dom = e.target, self = this.dom, list_items = this.m_props.items; // already created by build
         // go up until we find something interesting
         while (dom && dom != self) {
-            let itm = Component.getElement(dom), id = itm?.getData('item-id');
+            let itm = component_1.Component.getElement(dom), id = itm?.getData('item-id');
             if (id !== undefined) {
                 // find the element
                 let item = list_items.find((item) => item.id == id);
                 if (item) {
                     let event;
                     if (e.type == 'click') {
-                        event = EvClick(item);
+                        event = (0, x4_events_1.EvClick)(item);
                         this.emit('click', event);
                     }
                     else {
-                        event = EvDblClick(item);
+                        event = (0, component_1.EvDblClick)(item);
                         this.emit('dblClick', event);
                     }
                     if (!event.defaultPrevented) {
@@ -345,19 +349,19 @@ export class ListView extends VLayout {
         e.preventDefault();
         let dom = e.target, self = this.dom, list_items = this.m_props.items; // already created by build;
         while (dom && dom != self) {
-            let itm = Component.getElement(dom), id = itm?.getData('item-id');
+            let itm = component_1.Component.getElement(dom), id = itm?.getData('item-id');
             if (id) {
                 // find the element
                 let item = list_items.find((item) => item.id == id);
                 if (item) {
                     this._selectItem(item, itm);
-                    this.emit('contextMenu', EvContextMenu(e, item));
+                    this.emit('contextMenu', (0, x4_events_1.EvContextMenu)(e, item));
                 }
                 return;
             }
             dom = dom.parentElement;
         }
-        this.emit('contextMenu', EvContextMenu(e, null));
+        this.emit('contextMenu', (0, x4_events_1.EvContextMenu)(e, null));
     }
     /**
      * @ignore
@@ -375,7 +379,7 @@ export class ListView extends VLayout {
             this.m_selection.citem.addClass('@selected');
         }
         if (notify) {
-            this.emit('selectionChange', EvSelectionChange(item));
+            this.emit('selectionChange', (0, x4_events_1.EvSelectionChange)(item));
         }
     }
     /**
@@ -389,7 +393,7 @@ export class ListView extends VLayout {
             this._selectItem(null, null);
         }
         else {
-            if (isFunction(this.m_props.items)) {
+            if ((0, tools_1.isFunction)(this.m_props.items)) {
                 this.m_defer_sel = id;
             }
             else {
@@ -470,13 +474,15 @@ export class ListView extends VLayout {
         }
     }
 }
-export function EvCancel(context = null) {
-    return BasicEvent({ context });
+exports.ListView = ListView;
+function EvCancel(context = null) {
+    return (0, x4_events_1.BasicEvent)({ context });
 }
+exports.EvCancel = EvCancel;
 /**
  *
  */
-export class PopupListView extends Popup {
+class PopupListView extends popup_1.Popup {
     m_list;
     constructor(props) {
         super({ tabIndex: false });
@@ -502,7 +508,7 @@ export class PopupListView extends Popup {
             return;
         }
         // menu: ok
-        let dest = Component.getElement(newfocus, MenuItem);
+        let dest = component_1.Component.getElement(newfocus, menu_1.MenuItem);
         if (dest) {
             return;
         }
@@ -530,3 +536,4 @@ export class PopupListView extends Popup {
         this.m_list.selection = itemId;
     }
 }
+exports.PopupListView = PopupListView;

package/lib/md5.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.Md5 = void 0;
 /*
 TypeScript Md5
 ==============
@@ -48,7 +51,7 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 */
-export class Md5 {
+class Md5 {
     static hashStr(str, raw = false) {
         return this.onePassHasher
             .start()
@@ -390,6 +393,7 @@ export class Md5 {
         return raw ? this._state : Md5._hex(this._state);
     }
 }
+exports.Md5 = Md5;
 /*
 if (Md5.hashStr('hello') !== '5d41402abc4b2a76b9719d911017c592') {
     console.error('Md5 self test failed.');

package/lib/menu.d.ts

@@ -0,0 +1,122 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @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 { CEventMap, Component, CProps } from './component';
+import { EvClick, EventCallback } from './x4_events';
+import { Popup, PopupProps } from './popup';
+import { IconID } from './icon';
+import { Label } from './label';
+import { HLayout } from './layout';
+export declare class MenuSeparator extends Component {
+}
+export declare class MenuTitle extends Label {
+}
+/**
+ * Standard Menu
+ */
+export declare type MenuOrSep = MenuItem | MenuSeparator | MenuTitle;
+export interface MenuProps extends PopupProps {
+    items?: MenuOrSep[];
+}
+export declare class Menu extends Popup<MenuProps> {
+    private static watchCount;
+    private static rootMenu;
+    protected m_subMenu: Menu;
+    protected m_opener: MenuItem;
+    protected m_virtual: boolean;
+    protected m_lock: number;
+    constructor(props: MenuProps, opener?: MenuItem);
+    lock(yes: boolean): void;
+    setVirtual(): void;
+    setSubMenu(menu: Menu): void;
+    hideSubMenu(): void;
+    /** @ignore */
+    render(props: MenuProps): void;
+    /**
+    *
+    */
+    show(): void;
+    /**
+     *
+    */
+    close(): void;
+    /**
+     *
+     */
+    clear(): void;
+    /**
+    * @internal
+    */
+    static _addMenu(menu: any): void;
+    static _removeMenu(): void;
+    private static _mouseWatcher;
+    /**
+    * hide all the visible menus
+    */
+    static _discardAll(): void;
+    displayAt(ev: UIEvent): void;
+    displayAt(x: number, y?: number, align?: string, offset?: {
+        x: any;
+        y: any;
+    }): void;
+}
+/**
+ * MENU ITEM
+ */
+interface MenuItemEventMap extends CEventMap {
+    click: EvClick;
+}
+export interface MenuItemProps extends CProps {
+    itemId?: any;
+    text?: string;
+    icon?: IconID;
+    items?: MenuOrSep[];
+    checked?: boolean;
+    cls?: string;
+    click?: EventCallback<EvClick>;
+}
+export declare class MenuItem extends Component<MenuItemProps, MenuItemEventMap> {
+    private m_menu;
+    private m_isOpen;
+    constructor(text: string, click: EventCallback<EvClick>);
+    constructor(props: MenuItemProps);
+    /** @ignore */
+    render(props: MenuItemProps): void;
+    get id(): any;
+    get text(): string;
+    get isPopup(): boolean;
+    _close(): void;
+    protected _click(ev: MouseEvent): void;
+    protected _mousedown(ev: MouseEvent): void;
+}
+/**
+ *
+ */
+export declare class MenuBar extends HLayout {
+    protected m_items: MenuOrSep[];
+    constructor(props: MenuProps, opener?: MenuItem);
+    /** @ignore */
+    render(): void;
+}
+export {};