x4js 1.4.2

package/lib/image.js

@@ -0,0 +1,149 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file image.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';
+const emptyImageSrc = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+function _isStaticImage(src) {
+    return src.substr(0, 5) == 'data:';
+}
+/**
+ * Standard image class
+ */
+export class Image extends Component {
+    m_created;
+    m_lazysrc; // expected 
+    constructor(props) {
+        super(props);
+        this.m_created = false;
+        this.m_props.lazy = props.lazy === false ? false : true;
+        this.m_props.alt = props.alt;
+        if (props.lazy !== false) {
+            this.m_lazysrc = props.src;
+            props.src = emptyImageSrc;
+        }
+        this.setDomEvent('create', () => {
+            if (props.lazy) {
+                this.setImage(this.m_lazysrc, true);
+            }
+        });
+    }
+    /** @ignore */
+    render() {
+        let mp = this.m_props;
+        const img = new Component({
+            tag: 'img',
+            attrs: {
+                draggable: false,
+                alt: mp.alt ?? '',
+                decoding: mp.lazy ? 'async' : undefined,
+            },
+            style: {
+                objectFit: mp.alignment ? mp.alignment : undefined
+            }
+        });
+        this.setContent(img);
+    }
+    /**
+     * change the image
+     * @param src - image path
+     */
+    setImage(src, force) {
+        if (!src) {
+            src = emptyImageSrc;
+        }
+        if (!this.m_props.lazy) {
+            this.m_props.src = src;
+            this.m_lazysrc = src;
+            if (this.dom) {
+                this.dom.firstChild.setAttribute('src', src);
+            }
+        }
+        else if (force || this.m_lazysrc != src) {
+            if (_isStaticImage(src)) {
+                // not to download -> direct display
+                this.m_props.src = src;
+                this.m_lazysrc = src;
+                if (this.dom) {
+                    this.dom.firstChild.setAttribute('src', this.m_props.src);
+                }
+            }
+            else {
+                // clear current image while waiting
+                this.m_props.src = emptyImageSrc;
+                if (this.dom) {
+                    this.dom.firstChild.setAttribute('src', this.m_props.src);
+                }
+                this.m_lazysrc = src;
+                if (this.dom) {
+                    this._update_image();
+                }
+            }
+        }
+    }
+    _update_image() {
+        console.assert(!!this.dom);
+        if (this.m_lazysrc && !_isStaticImage(this.m_lazysrc)) {
+            // we do not push Components in a static array...
+            Image.lazy_images_waiting.push({ dom: this.dom, src: this.m_lazysrc });
+            if (Image.lazy_image_timer === undefined) {
+                Image.lazy_image_timer = setInterval(Image.lazyWatch, 10);
+            }
+        }
+    }
+    static lazy_images_waiting = [];
+    static lazy_image_timer = undefined;
+    static lazyWatch() {
+        let newList = [];
+        let done = 0;
+        Image.lazy_images_waiting.forEach((el) => {
+            let dom = el.dom, src = el.src;
+            // skip deleted elements
+            if (!dom || !document.contains(dom)) {
+                // do not append to newList
+                return;
+            }
+            let rc = dom.getBoundingClientRect();
+            // if it is visible & inserted inside the document
+            if (!done && dom.offsetParent !== null &&
+                rc.bottom >= 0 && rc.right >= 0 &&
+                rc.top <= (window.innerHeight || document.documentElement.clientHeight) &&
+                rc.left <= (window.innerWidth || document.documentElement.clientWidth)) {
+                // ok, we load the image
+                let img = dom.firstChild;
+                img.setAttribute('src', src);
+                done++;
+            }
+            else {
+                // still not visible: may be next time
+                newList.push(el);
+            }
+        });
+        Image.lazy_images_waiting = newList;
+        // no more elements to watch...
+        if (newList.length == 0) {
+            clearInterval(Image.lazy_image_timer);
+            Image.lazy_image_timer = undefined;
+        }
+    }
+}

package/lib/index.js

@@ -0,0 +1 @@
+export * from "application"

package/lib/input.d.ts

@@ -0,0 +1,86 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file input.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, CProps, CEventMap } from './component';
+export declare type EditType = 'text' | 'number' | 'email' | 'date' | 'password' | 'file' | 'checkbox' | 'radio';
+export interface ValueHook {
+    get(): any;
+    set(v: any): void;
+}
+export interface InputEventMap extends CEventMap {
+}
+export interface InputProps<P extends InputEventMap = InputEventMap> extends CProps<P> {
+    value?: string;
+    name?: string;
+    type?: EditType;
+    placeHolder?: string;
+    autoFocus?: boolean;
+    readOnly?: boolean;
+    tabIndex?: number | boolean;
+    pattern?: string;
+    uppercase?: boolean;
+    spellcheck?: boolean;
+    value_hook?: ValueHook;
+    min?: number;
+    max?: number;
+}
+/**
+ * base class for elements implementing an input
+ * CARE derived classes must set this.ui.input
+ */
+export declare class Input extends Component<InputProps, InputEventMap> {
+    constructor(props: InputProps);
+    /** @ignore */
+    render(props: InputProps): void;
+    getType(): EditType;
+    /**
+     * return the current editor value
+     */
+    get value(): string;
+    /**
+     * Change the editor value
+     * @param value - new value to set
+     */
+    set value(value: string);
+    getStoreValue(): any;
+    setStoreValue(v: any): void;
+    set readOnly(ro: boolean);
+    /**
+     * select all the text
+     */
+    selectAll(): void;
+    /**
+     * select a part of the text
+     * @param start
+     * @param length
+     */
+    select(start: number, length?: number): void;
+    /**
+     * get the selection as { start, length }
+     */
+    getSelection(): {
+        start: number;
+        length: number;
+    };
+}

package/lib/input.js

@@ -0,0 +1,172 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file input.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';
+/**
+ * base class for elements implementing an input
+ * CARE derived classes must set this.ui.input
+ */
+export class Input extends Component {
+    constructor(props) {
+        super(props);
+    }
+    /** @ignore */
+    render(props) {
+        this.setProp('tag', 'input');
+        this._setTabIndex(props.tabIndex);
+        this.setAttributes({
+            value: props.value,
+            type: props.type || 'text',
+            name: props.name,
+            placeholder: props.placeHolder,
+            autofocus: props.autoFocus,
+            readonly: props.readOnly,
+            autocomplete: 'new-password',
+            tabindex: props.tabIndex,
+            spellcheck: props.spellcheck === false ? 'false' : undefined,
+            min: props.min,
+            max: props.max,
+            ...props.attrs
+        });
+        if (props.uppercase) {
+            this.setStyleValue('textTransform', 'uppercase');
+        }
+    }
+    getType() {
+        return this.m_props.type;
+    }
+    /**
+     * return the current editor value
+     */
+    get value() {
+        if (this.dom) {
+            this.m_props.value = this.dom.value;
+        }
+        if (this.m_props.uppercase) {
+            let upper = this.m_props.value.toUpperCase(); // todo: locale ?
+            if (this.dom && upper != this.m_props.value) {
+                this.dom.value = upper; // update the input
+            }
+            this.m_props.value = upper;
+        }
+        return this.m_props.value;
+    }
+    /**
+     * Change the editor value
+     * @param value - new value to set
+     */
+    set value(value) {
+        this.m_props.value = value;
+        if (this.dom) {
+            this.dom.value = value;
+        }
+    }
+    getStoreValue() {
+        if (this.m_props.value_hook) {
+            return this.m_props.value_hook.get();
+        }
+        else {
+            let type = this.getAttribute('type');
+            if (type) {
+                type = type.toLowerCase();
+            }
+            let value, dom = this.dom;
+            if (type === "file") {
+                value = [];
+                let files = dom.files;
+                for (let file = 0; file < files.length; file++) {
+                    value.push(files[file].name);
+                }
+            }
+            else if (type === 'checkbox') {
+                if (dom.checked) {
+                    value = 1;
+                }
+                else {
+                    value = 0;
+                }
+            }
+            else if (type === 'radio') {
+                if (dom.checked) {
+                    value = this.value;
+                }
+            }
+            else if (type === 'date') {
+                debugger;
+            }
+            else {
+                value = this.value;
+            }
+            return value;
+        }
+    }
+    setStoreValue(v) {
+        if (this.m_props.value_hook) {
+            return this.m_props.value_hook.set(v);
+        }
+        else {
+            let type = this.getAttribute('type'), dom = this.dom;
+            if (type) {
+                type = type.toLowerCase();
+            }
+            if (type === 'checkbox') {
+                let newval = v !== null && v !== '0' && v !== 0 && v !== false;
+                if (newval !== dom.checked) {
+                    dom.setAttribute('checked', '' + newval);
+                    dom.dispatchEvent(new Event('change'));
+                }
+            }
+            else {
+                this.value = v;
+            }
+        }
+    }
+    set readOnly(ro) {
+        this.setAttribute('readonly', ro);
+    }
+    /**
+     * select all the text
+     */
+    selectAll() {
+        this.dom.select();
+    }
+    /**
+     * select a part of the text
+     * @param start
+     * @param length
+     */
+    select(start, length = 9999) {
+        this.dom.setSelectionRange(start, start + length);
+    }
+    /**
+     * get the selection as { start, length }
+     */
+    getSelection() {
+        let idom = this.dom;
+        return {
+            start: idom.selectionStart,
+            length: idom.selectionEnd - idom.selectionStart,
+        };
+    }
+}

package/lib/label.d.ts

@@ -0,0 +1,54 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file label.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, CProps } from './component';
+import { HtmlString } from './tools';
+import { IconID } from './icon';
+export interface LabelProps extends CProps {
+    text: string | HtmlString;
+    icon?: IconID;
+    align?: 'left' | 'right' | 'center';
+    multiline?: boolean;
+}
+/**
+ * Standard label
+ */
+export declare class Label extends Component<LabelProps> {
+    /**
+     * double constructor, from string/html or as usual
+     */
+    constructor(props: LabelProps);
+    constructor(text: string | HtmlString);
+    /** @ignore */
+    render(props: LabelProps): void;
+    /**
+     * change the displayed text
+     * @param text - new text
+     */
+    set text(txt: string | HtmlString);
+    /**
+     *
+     */
+    get text(): string | HtmlString;
+}

package/lib/label.js

@@ -0,0 +1,86 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file label.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 { HtmlString } from './tools';
+import { Icon } from './icon';
+/**
+ * Standard label
+ */
+export class Label extends Component {
+    constructor(param) {
+        if (typeof (param) === 'string' || param instanceof HtmlString) {
+            super({ text: param });
+        }
+        else {
+            super(param);
+        }
+    }
+    /** @ignore */
+    render(props) {
+        let text = this.m_props.text;
+        if (this.m_props.multiline && !(text instanceof HtmlString)) {
+            text = new HtmlString(text.replace(/\n/g, '<br/>'));
+        }
+        if (!props.icon) {
+            this.setContent(text);
+        }
+        else {
+            this.setProp('tag', 'span');
+            this.addClass('@hlayout');
+            this.setContent([
+                new Icon({ icon: props.icon }),
+                new Component({ content: text, ref: 'text' })
+            ]);
+        }
+        this.addClass(props.align ?? 'left');
+    }
+    /**
+     * change the displayed text
+     * @param text - new text
+     */
+    set text(txt) {
+        let props = this.m_props;
+        if (props.text !== txt) {
+            props.text = txt;
+            let text = this.m_props.text;
+            if (this.m_props.multiline && !(text instanceof HtmlString)) {
+                text = new HtmlString(text.replace('/\n/g', '<br/>'));
+            }
+            if (this.dom) {
+                let comp = this;
+                if (this.m_props.icon) {
+                    comp = this.itemWithRef('text');
+                }
+                comp.setContent(text);
+            }
+        }
+    }
+    /**
+     *
+     */
+    get text() {
+        return this.m_props.text;
+    }
+}

package/lib/layout.d.ts

@@ -0,0 +1,77 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+ * @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/>..
+ */
+import { Component, CProps, ComponentContent, Container, ContainerProps, ContainerEventMap } from './component';
+export declare class AbsLayout<P extends ContainerProps = ContainerProps, E extends ContainerEventMap = ContainerEventMap> extends Container<P, E> {
+}
+export declare class HLayout<P extends ContainerProps = ContainerProps, E extends ContainerEventMap = ContainerEventMap> extends Container<P, E> {
+}
+export declare class VLayout<P extends ContainerProps = ContainerProps, E extends ContainerEventMap = ContainerEventMap> extends Container<P, E> {
+}
+interface AutoLayoutProps extends CProps {
+    defaultLayout: 'horizontal' | 'vertical';
+    switchSize: number;
+}
+export declare class AutoLayout extends Container<AutoLayoutProps> {
+    constructor(props: AutoLayoutProps);
+    componentCreated(): void;
+    private _updateLayout;
+}
+export interface GridLayoutProps extends ContainerProps {
+    colSizes?: string;
+    rowSizes?: string;
+    colGap?: number;
+    template?: string[];
+}
+export declare class GridLayout<P extends GridLayoutProps = GridLayoutProps> extends Container<P> {
+    constructor(props: GridLayoutProps);
+    /** @ignore */
+    render(): void;
+}
+export interface TableLayoutProps extends CProps {
+    rows: number;
+    columns: number;
+}
+export declare class TableLayout extends Container<TableLayoutProps> {
+    private m_cells;
+    constructor(props: TableLayoutProps);
+    private _getCell;
+    private _setCell;
+    setCell(row: number, col: number, item: ComponentContent): void;
+    merge(row: number, col: number, rowCount: number, colCount: number): void;
+    setCellWidth(row: number, col: number, width?: number): void;
+    setCellHeight(row: number, col: number, height?: number): void;
+    setCellClass(row: number, col: number, cls: string): void;
+    setColClass(col: any, cls: any): void;
+    setRowClass(row: any, cls: any): void;
+    getCell(row: any, col: any): ComponentContent;
+    render(): void;
+}
+interface ScrollViewProps extends CProps {
+}
+export declare class ScrollView extends Component<ScrollViewProps> {
+    constructor(props: ScrollViewProps);
+    setContent(content: ComponentContent): void;
+}
+export {};