x4js 1.4.2

package/lib/application.d.ts

@@ -0,0 +1,95 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file application.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 { EvMessage } from './x4_events';
+import { BaseComponent, BaseComponentEventMap, BaseComponentProps } from './base_component';
+import { Component } from './component';
+import { Settings } from './settings';
+interface ApplicationEventMap extends BaseComponentEventMap {
+    message: EvMessage;
+    global: EvMessage;
+}
+/**
+ *
+ */
+export interface ApplicationProps extends BaseComponentProps<ApplicationEventMap> {
+    app_name: string;
+    app_version: string;
+    app_uid: string;
+    locale: string;
+}
+/**
+ * Represents an x4 application, which is typically a single page app.
+ * You should inherit Application to define yours.
+ * Application derives from BaseComponent so you can use that to implement a global messaging system.
+ * @example ```ts
+ *
+ * // in yout main caode
+ * let app = new Application( );
+ *
+ * app.events.close.on( ( ev ) => {
+ * 	... do something
+ * });
+ *
+ * // somewhere else in the source
+ * function xxx( ) {
+ * 	let app = Application.instance( );
+ * 	app.events.close.emit( new Events.close() );
+ * }
+ */
+export declare class Application<P extends ApplicationProps = ApplicationProps, E extends ApplicationEventMap = ApplicationEventMap> extends BaseComponent<P, E> {
+    private static self;
+    /**
+     * the application singleton
+     */
+    static instance(): Application;
+    private m_mainView;
+    private m_app_name;
+    private m_app_version;
+    private m_app_uid;
+    private m_local_storage;
+    private m_user_data;
+    constructor(props: P);
+    ApplicationCreated(): void;
+    get app_name(): string;
+    get app_uid(): string;
+    get app_version(): string;
+    get local_storage(): Settings;
+    get user_data(): any;
+    get history(): any;
+    /**
+     * define the application root object (MainView)
+     * @example ```ts
+     *
+     * let myApp = new Application( ... );
+     * let mainView = new VLayout( ... );
+     * myApp.setMainView( mainView  );
+     */
+    set mainView(root: Component);
+    get mainView(): Component;
+    setTitle(title: string): void;
+    disableZoomWheel(): void;
+    enterModal(enter: boolean): void;
+}
+export {};

package/lib/application.js

@@ -0,0 +1,137 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file application.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 { BaseComponent } from './base_component';
+import { Settings } from './settings';
+import { deferCall } from './tools';
+/**
+ * Represents an x4 application, which is typically a single page app.
+ * You should inherit Application to define yours.
+ * Application derives from BaseComponent so you can use that to implement a global messaging system.
+ * @example ```ts
+ *
+ * // in yout main caode
+ * let app = new Application( );
+ *
+ * app.events.close.on( ( ev ) => {
+ * 	... do something
+ * });
+ *
+ * // somewhere else in the source
+ * function xxx( ) {
+ * 	let app = Application.instance( );
+ * 	app.events.close.emit( new Events.close() );
+ * }
+ */
+export class Application extends BaseComponent {
+    static self = null;
+    /**
+     * the application singleton
+     */
+    static instance() {
+        return Application.self;
+    }
+    m_mainView;
+    m_app_name;
+    m_app_version;
+    m_app_uid;
+    m_local_storage;
+    m_user_data;
+    constructor(props) {
+        console.assert(Application.self === null, 'application is a singleton');
+        super(props);
+        this.m_app_name = props.app_name ?? 'application';
+        this.m_app_version = props.app_version ?? '1.0';
+        this.m_app_uid = props.app_uid ?? 'application';
+        let settings_name = `${this.m_app_name}.${this.m_app_version}.settings`;
+        this.m_local_storage = new Settings(settings_name);
+        this.m_user_data = {};
+        Application.self = this;
+        if ('onload' in globalThis) {
+            globalThis.addEventListener('load', () => {
+                this.ApplicationCreated();
+            });
+        }
+        else {
+            this.ApplicationCreated();
+        }
+    }
+    ApplicationCreated() {
+    }
+    get app_name() {
+        return this.m_app_name;
+    }
+    get app_uid() {
+        return this.m_app_uid;
+    }
+    get app_version() {
+        return this.m_app_version;
+    }
+    get local_storage() {
+        return this.m_local_storage;
+    }
+    get user_data() {
+        return this.m_user_data;
+    }
+    get history() {
+        //if( !this.m_history ) {
+        //	this.m_history = new NavigationHistory( );
+        //}
+        //
+        //return this.m_history;
+        debugger;
+        return null;
+    }
+    /**
+     * define the application root object (MainView)
+     * @example ```ts
+     *
+     * let myApp = new Application( ... );
+     * let mainView = new VLayout( ... );
+     * myApp.setMainView( mainView  );
+     */
+    set mainView(root) {
+        this.m_mainView = root;
+        deferCall(() => {
+            document.body.appendChild(root._build());
+        });
+    }
+    get mainView() {
+        return this.m_mainView;
+    }
+    setTitle(title) {
+        document.title = this.m_app_name + ' > ' + title;
+    }
+    disableZoomWheel() {
+        window.addEventListener('wheel', function (ev) {
+            if (ev.ctrlKey) {
+                ev.preventDefault();
+                //ev.stopPropagation( );
+            }
+        }, { passive: false, capture: true });
+    }
+    enterModal(enter) {
+    }
+}
+;

package/lib/base64.d.ts

@@ -0,0 +1,31 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file base64.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/>.
+**/
+export declare class Base64 {
+    lookup: any;
+    static encode(s: string | Uint8Array): string;
+    static decode(s: string): string;
+    private static _toUtf8;
+    private static _fromUtf8;
+}

package/lib/base64.js

@@ -0,0 +1,135 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file base64.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/>.
+**/
+const _alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
+let _lookup = null;
+export class Base64 {
+    lookup = null;
+    static encode(s) {
+        let buffer;
+        if (s instanceof Uint8Array) {
+            buffer = [];
+            s.forEach((v) => {
+                buffer.push(v);
+            });
+        }
+        else {
+            buffer = Base64._toUtf8(s);
+        }
+        let position = -1;
+        let len = buffer.length;
+        let nan1, nan2;
+        let enc = [, , ,];
+        let result = '';
+        while (++position < len) {
+            nan1 = buffer[position + 1], nan2 = buffer[position + 2];
+            enc[0] = buffer[position] >> 2;
+            enc[1] = ((buffer[position] & 3) << 4) | (buffer[++position] >> 4);
+            if (isNaN(nan1)) {
+                enc[2] = enc[3] = 64;
+            }
+            else {
+                enc[2] = ((buffer[position] & 15) << 2) | (buffer[++position] >> 6);
+                enc[3] = (isNaN(nan2)) ? 64 : buffer[position] & 63;
+            }
+            result += _alphabet[enc[0]] + _alphabet[enc[1]] + _alphabet[enc[2]] + _alphabet[enc[3]];
+        }
+        return result;
+    }
+    static decode(s) {
+        let buffer = Base64._fromUtf8(s);
+        let position = 0;
+        let len = buffer.length;
+        let result = '';
+        while (position < len) {
+            if (buffer[position] < 128) {
+                result += String.fromCharCode(buffer[position++]);
+            }
+            else if (buffer[position] > 191 && buffer[position] < 224) {
+                result += String.fromCharCode(((buffer[position++] & 31) << 6) | (buffer[position++] & 63));
+            }
+            else {
+                result += String.fromCharCode(((buffer[position++] & 15) << 12) | ((buffer[position++] & 63) << 6) | (buffer[position++] & 63));
+            }
+        }
+        return result;
+    }
+    static _toUtf8(s) {
+        let position = -1;
+        let len = s.length;
+        let chr;
+        let buffer = [];
+        if (/^[\x00-\x7f]*$/.test(s)) {
+            while (++position < len) {
+                buffer.push(s.charCodeAt(position));
+            }
+        }
+        else {
+            while (++position < len) {
+                chr = s.charCodeAt(position);
+                if (chr < 128) {
+                    buffer.push(chr);
+                }
+                else if (chr < 2048) {
+                    buffer.push((chr >> 6) | 192, (chr & 63) | 128);
+                }
+                else {
+                    buffer.push((chr >> 12) | 224, ((chr >> 6) & 63) | 128, (chr & 63) | 128);
+                }
+            }
+        }
+        return buffer;
+    }
+    static _fromUtf8(s) {
+        let position = -1;
+        let len;
+        let buffer = [];
+        let enc = [, , ,];
+        if (!_lookup) {
+            len = _alphabet.length;
+            _lookup = {};
+            while (++position < len) {
+                _lookup[_alphabet[position]] = position;
+            }
+            position = -1;
+        }
+        len = s.length;
+        while (position < len) {
+            enc[0] = _lookup[s.charAt(++position)];
+            enc[1] = _lookup[s.charAt(++position)];
+            buffer.push((enc[0] << 2) | (enc[1] >> 4));
+            enc[2] = _lookup[s.charAt(++position)];
+            if (enc[2] == 64) {
+                break;
+            }
+            buffer.push(((enc[1] & 15) << 4) | (enc[2] >> 2));
+            enc[3] = _lookup[s.charAt(++position)];
+            if (enc[3] == 64) {
+                break;
+            }
+            buffer.push(((enc[2] & 3) << 6) | enc[3]);
+        }
+        return buffer;
+    }
+}

package/lib/base_component.d.ts

@@ -0,0 +1,64 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file base_component.ts
+* @author Etienne Cochard
+* @copyright (c) 2022 R-libre ingenierie, all rights reserved.
+*
+**/
+import { EventMap, MapEvents, EventSource, EvTimer } from './x4_events';
+/**
+ * Timer Callback
+ * @see EvTimer, startTimer, stopTimer
+ */
+interface TimerCallback {
+    (name: string, time: number): void;
+}
+/**
+ * BaseComponent EventMap
+ */
+export interface BaseComponentEventMap extends EventMap {
+    timer: EvTimer;
+}
+/**
+ * BaseCompoment Properties
+ */
+export interface BaseComponentProps<T = BaseComponentEventMap> {
+    events?: MapEvents<T>;
+}
+/**
+ * BaseComponent class
+ */
+export declare class BaseComponent<P extends BaseComponentProps<BaseComponentEventMap>, E extends BaseComponentEventMap> extends EventSource<E> {
+    #private;
+    protected m_props: P;
+    constructor(props: P);
+    /**
+     * start a new timer
+     * @param name timer name
+     * @param timeout time out in ms
+     * @param repeat if true this is an auto repeat timer
+     * @param callback if !null, the callback to call else a EvTimer is fired
+     */
+    startTimer(name: string, timeout: number, repeat?: boolean, callback?: TimerCallback): void;
+    /**
+     * stop the given timer
+     * @param name
+     */
+    stopTimer(name: string): void;
+    /**
+     * stop all timers
+     */
+    disposeTimers(): void;
+    /**
+     *
+     * @param callback
+     * @param timeout
+     */
+    singleShot(callback: TimerCallback, timeout?: number): void;
+}
+export {};

package/lib/base_component.js

@@ -0,0 +1,77 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file base_component.ts
+* @author Etienne Cochard
+* @copyright (c) 2022 R-libre ingenierie, all rights reserved.
+*
+**/
+import { EventSource, EvTimer } from './x4_events';
+/**
+ * BaseComponent class
+ */
+export class BaseComponent extends EventSource {
+    m_props;
+    #m_timers;
+    constructor(props) {
+        super();
+        //this.m_props = { ...props };
+        this.m_props = props;
+        if (props.events) {
+            this.listen(props.events);
+        }
+    }
+    /**
+     * start a new timer
+     * @param name timer name
+     * @param timeout time out in ms
+     * @param repeat if true this is an auto repeat timer
+     * @param callback if !null, the callback to call else a EvTimer is fired
+     */
+    startTimer(name, timeout, repeat = true, callback = null) {
+        if (!this.#m_timers) {
+            this.#m_timers = new Map();
+        }
+        else {
+            this.stopTimer(name);
+        }
+        const id = (repeat ? setInterval : setTimeout)((tm) => {
+            if (callback) {
+                callback(name, tm);
+            }
+            else {
+                this.emit('timer', EvTimer(name, tm));
+            }
+        }, timeout);
+        this.#m_timers.set(name, () => { (repeat ? clearInterval : clearTimeout)(id); });
+    }
+    /**
+     * stop the given timer
+     * @param name
+     */
+    stopTimer(name) {
+        const clear = this.#m_timers.get(name);
+        if (clear) {
+            clear();
+        }
+    }
+    /**
+     * stop all timers
+     */
+    disposeTimers() {
+        this.#m_timers?.forEach(v => v());
+        this.#m_timers = undefined;
+    }
+    /**
+     *
+     * @param callback
+     * @param timeout
+     */
+    singleShot(callback, timeout = 0) {
+        setTimeout(callback, timeout);
+    }
+}

package/lib/button.d.ts

@@ -0,0 +1,145 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file button.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, HtmlString } from './component';
+import { EventCallback, EvClick, EvChange } from './x4_events';
+import { IconID } from './icon';
+import { MenuItem, MenuOrSep } from './menu';
+/**
+ * Button events
+ */
+interface ButtonEventMap extends CEventMap {
+    click: EvClick;
+}
+declare type MenuCallBack = () => MenuOrSep[];
+/**
+ * Button properties
+ */
+interface ButtonProps<E extends ButtonEventMap = ButtonEventMap> extends CProps<E> {
+    text?: string | HtmlString;
+    icon?: IconID;
+    rightIcon?: IconID;
+    align?: 'center' | 'left' | 'right';
+    autoRepeat?: number;
+    menu?: MenuOrSep[] | MenuCallBack;
+    click?: EventCallback<EvClick>;
+}
+/**
+ * Base button
+ */
+export declare class BaseButton<P extends ButtonProps = ButtonProps, E extends ButtonEventMap = ButtonEventMap> extends Component<P, E> {
+    constructor(props: P);
+    render(props: ButtonProps): void;
+    /**
+     * starts/stops the autorepeat
+     */
+    private _startAutoRep;
+    /**
+     *
+     */
+    protected _handleKeyDown(ev: KeyboardEvent): void;
+    /**
+     * called by the system on click event
+     */
+    protected _handleClick(ev: MouseEvent): void;
+    /**
+     * sends a click to the observers
+     */
+    protected _sendClick(): void;
+    /**
+     * change the button text
+     * @example
+     * ```ts
+     * let btn = new Button( {
+     * 	text: 'hello'
+     * });
+     *
+     * btn.text = 'world';
+     * ```
+     */
+    set text(text: string | HtmlString);
+    get text(): string | HtmlString;
+    /**
+     * change the button icon
+     * todo: do nothing if no icon defined at startup
+     *
+     * @example
+     * ```ts
+     * let btn = new Button( {
+     * 	text: 'hello',
+     *  icon: 'close'
+     * });
+     * btn.setIcon( 'open' );
+     * ```
+     */
+    set icon(icon: IconID);
+    get icon(): IconID;
+    /**
+     * change the button right icon
+     * todo: do nothing if no icon defined at startup
+     *
+     * @example
+     * ```ts
+     * let btn = new Button( {
+     * 	text: 'hello',
+     *  icon: 'close'
+     * });
+     * btn.setIcon( 'open' );
+     * ```
+     */
+    set rightIcon(icon: IconID);
+    get rightIcon(): IconID;
+    /**
+     *
+     */
+    set menu(items: MenuItem[]);
+}
+/**
+ *
+ */
+export declare class Button extends BaseButton<ButtonProps> {
+}
+interface ToggleButtonEventMap extends ButtonEventMap {
+    change: EvChange;
+}
+interface ToggleButtonProps extends ButtonProps<ToggleButtonEventMap> {
+    checked: boolean;
+    checkedIcon?: IconID;
+}
+/**
+ *
+ */
+export declare class ToggleButton extends BaseButton<ToggleButtonProps, ToggleButtonEventMap> {
+    constructor(props: ToggleButtonProps);
+    /**
+     *
+     */
+    render(props: ToggleButtonProps): void;
+    /**
+     *
+     */
+    protected _sendClick(): void;
+    private _updateIcon;
+}
+export {};