x4js 1.4.2

package/lib/radiobtn.d.ts

@@ -0,0 +1,68 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file radiobtn.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';
+import { EvChange, EventCallback } from './x4_events';
+import { IconID } from './icon';
+import { Input } from './input';
+interface RadioBtnEventMap extends CEventMap {
+    change?: EvChange;
+}
+export interface RadioBtnProps extends CProps {
+    group: string;
+    value: string;
+    tabIndex?: number | boolean;
+    name?: string;
+    icon?: IconID;
+    text?: string;
+    checked?: boolean;
+    labelWidth?: number | 'flex';
+    align?: 'left' | 'right';
+    change?: EventCallback<EvChange>;
+}
+/**
+ * Standard RadioBtn
+ */
+export declare class RadioBtn extends Component<RadioBtnProps, RadioBtnEventMap> {
+    protected m_ui_input: Input;
+    constructor(props: RadioBtnProps);
+    /** @ignore */
+    render(props: RadioBtnProps): void;
+    /**
+     * check state changed
+     */
+    private _change;
+    /**
+     * @return the checked value
+     */
+    get check(): boolean;
+    /**
+     * change the checked value
+     * @param {boolean} ck new checked value
+     */
+    set check(ck: boolean);
+    get text(): string | import("./tools").HtmlString;
+    set text(text: string | import("./tools").HtmlString);
+}
+export {};

package/lib/radiobtn.js

@@ -0,0 +1,131 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file radiobtn.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 { Label } from './label';
+/**
+ * Standard RadioBtn
+ */
+export class RadioBtn extends Component {
+    m_ui_input; // todo: remove that / use ref
+    constructor(props) {
+        super(props);
+        this.mapPropEvents(props, 'change');
+    }
+    /** @ignore */
+    render(props) {
+        let text = props.text ?? '';
+        let name = props.name ?? props.group;
+        let labelWidth = props.labelWidth ?? -1;
+        let checked = props.checked ?? false;
+        let align = props.align ?? 'left';
+        let value = props.value;
+        let icon = props.icon;
+        this.addClass('@hlayout');
+        this.setProp('tag', 'label');
+        this.addClass(align);
+        this._setTabIndex(props.tabIndex);
+        if (checked) {
+            this.addClass('checked');
+        }
+        this.setContent([
+            this.m_ui_input = new Input({
+                type: 'radio',
+                name: name,
+                tabIndex: props.tabIndex,
+                value: value,
+                attrs: {
+                    checked: checked ? '' : undefined
+                },
+                dom_events: {
+                    change: () => this._change(),
+                    focus: () => this.m_ui_input.focus(),
+                }
+            }),
+            new Label({
+                ref: 'label',
+                icon: icon,
+                text: text,
+                width: labelWidth === 'flex' ? undefined : labelWidth,
+                flex: labelWidth === 'flex' ? 1 : undefined,
+                style: {
+                    order: align == 'right' ? -1 : undefined,
+                },
+            })
+        ]);
+    }
+    /**
+     * check state changed
+     */
+    _change() {
+        let props = this.m_props;
+        let query = '.x-input[name=' + props.name + ']';
+        let nlist = document.querySelectorAll(query); //todo: document ?
+        nlist.forEach((dom) => {
+            let radio = Component.getElement(dom, RadioBtn);
+            radio.removeClass('checked');
+        });
+        let dom = this.m_ui_input.dom;
+        this.setClass('checked', dom.checked);
+        this.emit('change', EvChange(true));
+    }
+    /**
+     * @return the checked value
+     */
+    get check() {
+        if (this.m_ui_input) {
+            return this.m_ui_input.dom.checked;
+        }
+        return this.m_props.checked;
+    }
+    /**
+     * change the checked value
+     * @param {boolean} ck new checked value
+     */
+    set check(ck) {
+        let dom = this.m_ui_input.dom;
+        if (ck) {
+            //this.addClass( 'checked' );
+            if (dom) {
+                dom.checked = true;
+            }
+            this.m_props.checked = true;
+        }
+        else {
+            //this.removeClass( 'checked' );
+            if (dom) {
+                dom.checked = false;
+            }
+            this.m_props.checked = false;
+        }
+    }
+    get text() {
+        return this.itemWithRef('label').text;
+    }
+    set text(text) {
+        this.itemWithRef('label').text = text;
+    }
+}

package/lib/rating.d.ts

@@ -0,0 +1,49 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file rating.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 { CProps, ContainerEventMap } from './component';
+import { HLayout } from './layout';
+import { EvChange, EventCallback } from './x4_events';
+interface RatingEventMap extends ContainerEventMap {
+    change: EvChange;
+}
+export interface RatingProps extends CProps<RatingEventMap> {
+    steps?: number;
+    value?: number;
+    shape?: string;
+    name?: string;
+    change?: EventCallback<EvChange>;
+}
+export declare class Rating extends HLayout<RatingProps, RatingEventMap> {
+    private m_els;
+    private m_input;
+    constructor(props: RatingProps);
+    render(props: RatingProps): void;
+    getValue(): number;
+    set value(v: number);
+    set steps(n: number);
+    set shape(shape: string);
+    private _onclick;
+}
+export {};

package/lib/rating.js

@@ -0,0 +1,93 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file rating.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 { HLayout } from './layout';
+import { Input } from './input';
+import { EvChange } from './x4_events';
+export class Rating extends HLayout {
+    m_els;
+    m_input;
+    constructor(props) {
+        super(props);
+        props.steps = props.steps ?? 5;
+    }
+    render(props) {
+        let shape = props.shape ?? 'star';
+        let value = props.value ?? 0;
+        this.m_input = new Input({
+            cls: '@hidden',
+            name: props.name,
+            value: '' + value
+        });
+        this.addClass(shape);
+        this.setDomEvent('click', (e) => this._onclick(e));
+        this.m_els = [];
+        for (let i = 0; i < props.steps; i++) {
+            let cls = 'item';
+            if (i + 1 <= value) {
+                cls += ' checked';
+            }
+            let c = new Component({
+                tag: 'option',
+                cls,
+                data: { value: i + 1 }
+            });
+            this.m_els.push(c);
+        }
+        this.m_els.push(this.m_input);
+        this.setContent(this.m_els);
+    }
+    getValue() {
+        return this.m_props.value ?? 0;
+    }
+    set value(v) {
+        this.m_props.value = v;
+        for (let c = 0; c < this.m_props.steps; c++) {
+            this.m_els[c].setClass('checked', this.m_els[c].getData('value') <= v);
+        }
+        this.m_input.value = '' + this.m_props.value;
+    }
+    set steps(n) {
+        this.m_props.steps = n;
+        this.update();
+    }
+    set shape(shape) {
+        this.removeClass(this.m_props.shape);
+        this.m_props.shape = shape;
+        this.addClass(this.m_props.shape);
+    }
+    _onclick(ev) {
+        let on = true;
+        for (let el = this.dom.firstChild; el; el = el.nextSibling) {
+            let comp = 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));
+    }
+}

package/lib/request.d.ts

@@ -0,0 +1,48 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file request.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 interface RequestProps {
+    url: string;
+    method?: 'GET' | 'POST';
+    headers?: string[];
+    params?: any;
+    timeout?: number;
+    responseType?: 'text' | 'json' | 'arraybuffer';
+    userData?: any;
+    success: (data: any, userData: any) => void;
+    failure?: (status: number, statusText: string, userData: any) => void;
+    progress?: (length: number, total: number, display: string) => void;
+}
+export declare function ajaxRequest(cfg: RequestProps): Function;
+interface AjaxRequestInit extends Omit<RequestInit, 'body'> {
+    body?: BodyInit | null | object;
+    noGenX?: boolean;
+}
+export declare function ajaxAsJSON(url: string, init?: AjaxRequestInit): Promise<any>;
+export declare function ajaxAsText(url: string, init?: AjaxRequestInit): Promise<any>;
+/**
+ * use encodeURIComponent for elements in url
+ */
+export declare function ajax(url: string, init?: AjaxRequestInit, type?: string): Promise<Response>;
+export {};

package/lib/request.js

@@ -0,0 +1,220 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file request.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/>.
+**/
+/**
+ * TODO: use fetch api
+ *
+
+async function xx( resp, cb ) {
+    cb( await resp.json() );
+}
+
+async function getToto( cb ) {
+    fetch('home/toto', { method: 'GET' }).then( (resp) => { xx(resp,cb); } );
+}
+
+function dump( resp ) {
+    console.log( resp );
+}
+
+getToto( dump );
+
+*/
+import { isArray, isLiteralObject, isString, NetworkError } from './tools';
+const DEFAULT_TIMEOUT = 10000;
+export function ajaxRequest(cfg) {
+    let params, url = cfg.url, method = cfg.method || 'GET', formdata = false;
+    if (cfg.params instanceof FormData) {
+        params = cfg.params;
+        formdata = true;
+    }
+    else if (method == 'POST') {
+        params = buildQuery(cfg.params, false);
+    }
+    else {
+        url += buildQuery(cfg.params, true);
+    }
+    url = encodeURI(url);
+    let xhr = new XMLHttpRequest();
+    xhr.open(method, url);
+    xhr.upload.addEventListener('progress', progress, false);
+    xhr.addEventListener('timeout', failure);
+    xhr.addEventListener('error', failure);
+    xhr.addEventListener('load', success);
+    if (!formdata) {
+        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=UTF-8");
+    }
+    if (method != 'POST') {
+        xhr.responseType = cfg.responseType || 'json';
+        xhr.timeout = cfg.timeout || DEFAULT_TIMEOUT;
+    }
+    if (cfg.headers) {
+        for (let h in cfg.headers) {
+            this.xhr.setRequestHeader(h, cfg.headers[h]);
+        }
+    }
+    function progress(ev) {
+        console.log(ev);
+        if (cfg.progress) {
+            try {
+                if (ev.lengthComputable) {
+                    let disp = humanSize(ev.loaded) + ' / ' + humanSize(ev.total);
+                    cfg.progress(ev.loaded, ev.total, disp);
+                }
+            }
+            catch (e) {
+                console.error('unhandled exception:', e);
+            }
+        }
+    }
+    function humanSize(bytes) {
+        let unit, value;
+        if (bytes >= 1e9) {
+            unit = 'Gb';
+            value = bytes / 1e9;
+        }
+        else if (bytes >= 1e6) {
+            unit = 'Mb';
+            value = bytes / 1e6;
+        }
+        else if (bytes >= 1e3) {
+            unit = 'Kb';
+            value = bytes / 1e3;
+        }
+        else {
+            unit = 'bytes';
+            value = bytes;
+        }
+        return value.toFixed(2) + unit;
+    }
+    function failure() {
+        if (cfg.failure) {
+            cfg.failure(xhr.status, xhr.statusText, cfg.userData);
+        }
+    }
+    function success() {
+        if (xhr.status >= 200 && xhr.status < 300) {
+            if (cfg.success) {
+                try {
+                    cfg.success(xhr.response, cfg.userData);
+                }
+                catch (e) {
+                    console.error('unhandled exception:', e);
+                }
+            }
+        }
+        else {
+            failure();
+        }
+    }
+    if (formdata || method == 'POST') {
+        xhr.send(params);
+    }
+    else {
+        xhr.send();
+    }
+    return function () {
+        xhr.abort();
+    };
+}
+function buildQuery(params, getMethod) {
+    if (!params) {
+        return '';
+    }
+    let query = [];
+    for (let key in params) {
+        let param = params[key];
+        // array
+        if (isArray(param)) {
+            for (let i = 0, n = param.length; i < n; i++) {
+                query.push(encodeURIComponent(key) + '[]=' + encodeURIComponent('' + param[i]));
+            }
+        }
+        // simple string ...
+        else {
+            if (param === undefined) {
+                param = '';
+            }
+            query.push(encodeURIComponent(key) + '=' + encodeURIComponent('' + param));
+        }
+    }
+    let result = query.join('&');
+    if (getMethod) {
+        return '?' + result;
+    }
+    else {
+        return result;
+    }
+}
+export async function ajaxAsJSON(url, init) {
+    let response = await ajax(url, init, 'application/json');
+    return response.json();
+}
+export async function ajaxAsText(url, init) {
+    let response = await ajax(url, init, 'text/plain');
+    return response.text();
+}
+/**
+ * use encodeURIComponent for elements in url
+ */
+export async function ajax(url, init, type) {
+    let options = {
+        method: 'GET',
+        headers: {
+            'X-Requested-With': 'XMLHttpRequest'
+        }
+    };
+    if (type) {
+        options.headers['Content-Type'] = type;
+    }
+    if (init) {
+        options = { ...options, ...init };
+        if (init.body && !isString(init.body)) {
+            let cvt = false;
+            if (isLiteralObject(init.body)) {
+                cvt = true;
+            }
+            else if (!(init.body instanceof Blob) && !(init.body instanceof ArrayBuffer) && !(init.body instanceof FormData) &&
+                !(init.body instanceof URLSearchParams) && !(init.body instanceof ReadableStream)) {
+                cvt = true;
+            }
+            if (cvt) {
+                options.body = JSON.stringify(init.body);
+            }
+            else {
+                options.body = init.body;
+            }
+        }
+    }
+    let response = await fetch(url, options);
+    if (init && init.noGenX) {
+        return response;
+    }
+    else {
+        if (!response.ok) {
+            throw new NetworkError(response);
+        }
+        return response;
+    }
+}

package/lib/router.d.ts

@@ -0,0 +1,13 @@
+declare type Callback = (request: {
+    path: string;
+}) => void;
+interface Route {
+    uri: string;
+    callback: Callback;
+}
+declare class Router {
+    private routes;
+    constructor();
+    get(uri: any, callback: any): void;
+    init(): void;
+}

package/lib/router.js

@@ -0,0 +1,27 @@
+class Router {
+    routes;
+    constructor() {
+        this.routes = [];
+    }
+    get(uri, callback) {
+        // throw an error if the route uri already exists to avoid confilicting routes
+        this.routes.forEach(route => {
+            if (route.uri === uri) {
+                throw new Error(`the uri ${route.uri} already exists`);
+            }
+        });
+        this.routes.push({
+            uri,
+            callback
+        });
+    }
+    init() {
+        this.routes.some(route => {
+            let regEx = new RegExp(`^${route.uri}$`);
+            let path = window.location.pathname;
+            if (path.match(regEx)) {
+                return route.callback({ path });
+            }
+        });
+    }
+}

package/lib/settings.d.ts

@@ -0,0 +1,33 @@
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file local_storage.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 Settings {
+    private m_data;
+    private m_name;
+    constructor(name?: string);
+    set(name: string, value: any): void;
+    get(name: string, defValue?: any): any;
+    private _save;
+    private _load;
+}