x4js 1.4.4 → 1.4.5

package/lib/hosts/host.js

@@ -0,0 +1,73 @@
+"use strict";
+/**
+* @file host.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.host = exports.Host = void 0;
+class Host {
+    constructor() {
+        exports.host = this;
+    }
+    makePath(...els) {
+        return els.join('/');
+    }
+    readBinary(path) {
+        return Promise.reject('not imp');
+    }
+    writeBinary(path, data) {
+        return Promise.reject('not imp');
+    }
+    readUtf8(path) {
+        return Promise.reject('not imp');
+    }
+    writeUtf8(path, data) {
+        return Promise.reject('not imp');
+    }
+    compress(data) {
+        return Promise.reject('not imp');
+    }
+    decompress(data) {
+        return Promise.reject('not imp');
+    }
+    readLocalStorage(name) {
+        return localStorage.getItem(name);
+    }
+    writeLocalStorage(name, data) {
+        localStorage.setItem(name, data);
+    }
+    stat(name) {
+        throw 'not imp';
+    }
+    readDir(path) {
+        throw 'not imp';
+    }
+    require(name) {
+        throw 'not imp';
+    }
+    cwd() {
+        throw 'not imp';
+    }
+    getPath(type) {
+        throw 'not imp';
+    }
+    getPathPart(path, type) {
+        throw 'not imp';
+    }
+}
+exports.Host = Host;
+exports.host = null;

package/lib/i18n.d.ts

@@ -0,0 +1,67 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file i18n.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/>.
+**/
+/**
+ * current language
+ * FR by default
+ * @example ```typescript
+ * console.log( _tr.global.ok );
+ */
+export declare let _tr: any;
+/**
+ * check if the language is known
+ * @param name - language name to test
+ * @example ```typescript
+ * if( isLanguage('fr') ) {
+ * }
+ */
+export declare function isLanguage(name: any): boolean;
+/**
+ * select the current language
+ * @param name - language name
+ * @example ```typescript
+ * selectLanguage( 'en' );
+ */
+export declare function selectLanguage(name: any): void;
+/**
+ * define a translation
+ * you can also patch 'global' elements witch are defined by x4
+ * @param name - language name
+ * @param definition - definition of the language
+ * @example ```typescript
+ * setTranslation( 'fr', {
+ * 	this_is_an_example: 'ceci est un exemple',
+ * 	this_is: {
+ * 		another_example: 'ceci est un autre exemple'
+ *  },
+ *  global: {
+ *    ok: 'O.K.'
+ *  }
+ * });
+ * console.log( _tr.this_is_an_example ); // defined by the previous line
+ * selectLanguage( 'en' );
+ * console.log( _tr.this_is_an_example ); // 'en' do not define this, so we get 'fr' one
+ *
+ */
+export declare function extendTranslation(name: any, definition: any): void;

package/lib/i18n.js

@@ -0,0 +1,175 @@
+"use strict";
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file i18n.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.extendTranslation = exports.selectLanguage = exports.isLanguage = exports._tr = void 0;
+/**
+ * language definition
+ * x4 specific strings
+ */
+let fr = {
+    global: {
+        ok: 'OK',
+        cancel: 'Annuler',
+        ignore: 'Ignorer',
+        yes: 'Oui',
+        no: 'Non',
+        open: 'Ouvrir',
+        new: 'Nouveau',
+        delete: 'Supprimer',
+        close: 'Fermer',
+        save: 'Enregistrer',
+        search: 'Rechercher',
+        search_tip: 'Saisissez le texte à rechercher. <b>Enter</b> pour lancer la recherche. <b>Esc</b> pour annuler.',
+        required_field: "information requise",
+        invalid_format: "format invalide",
+        invalid_email: 'adresse mail invalide',
+        invalid_number: 'valeur numérique invalide',
+        diff_date_seconds: '{0} seconds',
+        diff_date_minutes: '{0} minutes',
+        diff_date_hours: '{0} hours',
+        invalid_date: 'Date non reconnue ({0})',
+        empty_list: 'Liste vide',
+        date_input_formats: 'd/m/y|d.m.y|d m y|d-m-y|dmy',
+        date_format: 'D/M/Y',
+        day_short: ['dim', 'lun', 'mar', 'mer', 'jeu', 'ven', 'sam'],
+        day_long: ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'],
+        month_short: ['jan', 'fév', 'mar', 'avr', 'mai', 'jun', 'jui', 'aoû', 'sep', 'oct', 'nov', 'déc'],
+        month_long: ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'],
+        property: 'Propriété',
+        value: 'Valeur',
+        err_403: `Vous n'avez pas les droits suffisants pour effectuer cette action`,
+        copy: 'Copier',
+        cut: 'Couper',
+        paste: 'Coller'
+    }
+};
+/** @ignore */
+let en = {
+    global: {
+        ok: 'OK',
+        cancel: 'Cancel',
+        ignore: 'Ignore',
+        yes: 'Yes',
+        no: 'No',
+        required_field: "required field",
+        invalid_format: "invalid format",
+        diff_date_seconds: '{0} seconds',
+        diff_date_minutes: '{0} minutes',
+        diff_date_hours: '{0} hours',
+        invalid_date: 'Bad date format {0}',
+        copy: 'Copy',
+        cut: 'Cut',
+        paste: 'Paste'
+    }
+};
+/** @ignore */
+let all_langs = {
+    'fr': fr,
+    'en': _mk_proxy(_patch({}, en))
+};
+/**
+ * current language
+ * FR by default
+ * @example ```typescript
+ * console.log( _tr.global.ok );
+ */
+exports._tr = all_langs['fr'];
+/**
+ * check if the language is known
+ * @param name - language name to test
+ * @example ```typescript
+ * if( isLanguage('fr') ) {
+ * }
+ */
+function isLanguage(name) {
+    return all_langs[name] !== undefined;
+}
+exports.isLanguage = isLanguage;
+/**
+ * select the current language
+ * @param name - language name
+ * @example ```typescript
+ * selectLanguage( 'en' );
+ */
+function selectLanguage(name) {
+    if (!isLanguage(name)) {
+        return;
+    }
+    exports._tr = all_langs[name];
+}
+exports.selectLanguage = selectLanguage;
+/**
+ * define a translation
+ * you can also patch 'global' elements witch are defined by x4
+ * @param name - language name
+ * @param definition - definition of the language
+ * @example ```typescript
+ * setTranslation( 'fr', {
+ * 	this_is_an_example: 'ceci est un exemple',
+ * 	this_is: {
+ * 		another_example: 'ceci est un autre exemple'
+ *  },
+ *  global: {
+ *    ok: 'O.K.'
+ *  }
+ * });
+ * console.log( _tr.this_is_an_example ); // defined by the previous line
+ * selectLanguage( 'en' );
+ * console.log( _tr.this_is_an_example ); // 'en' do not define this, so we get 'fr' one
+ *
+ */
+function extendTranslation(name, definition) {
+    if (!isLanguage(name)) {
+        return;
+    }
+    _patch(all_langs[name], definition);
+}
+exports.extendTranslation = extendTranslation;
+function _patch(obj, by) {
+    for (let n in by) {
+        if (obj[n] instanceof Object) {
+            _patch(obj[n], by[n]);
+        }
+        else {
+            obj[n] = by[n];
+            if (obj[n] instanceof Object) {
+                obj[n] = _mk_proxy(obj[n]);
+            }
+        }
+    }
+    return obj;
+}
+function _mk_proxy(obj) {
+    return new Proxy(obj, {
+        get: function (target, prop, receiver) {
+            let value = target[prop];
+            if (value === undefined) {
+                return fr[prop];
+            }
+            return value;
+        }
+    });
+}

package/lib/icon.d.ts

@@ -0,0 +1,56 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file icon.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 { BasicEvent } from './x4_events';
+export declare type IconID = string | number;
+export interface IconProps extends CProps {
+    icon: IconID;
+    size?: number;
+}
+export interface EvLoaded extends BasicEvent {
+    url: string;
+    svg: string;
+}
+export declare function EvLoaded(url: string, svg: string, context?: any): EvLoaded;
+/**
+ * standard icon
+ */
+export declare class Icon extends Component<IconProps> {
+    private m_icon;
+    private m_iconName;
+    constructor(props: IconProps);
+    private _setIcon;
+    /**
+     * change the icon
+     * @param icon - new icon
+     */
+    set icon(icon: IconID);
+    get icon(): IconID;
+    private _setSVG;
+    /**
+     *
+     */
+    private static icon_cache;
+}

package/lib/icon.js

@@ -0,0 +1,178 @@
+"use strict";
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file icon.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.Icon = exports.EvLoaded = void 0;
+const component_1 = require("./component");
+const styles_1 = require("./styles");
+const tools_1 = require("./tools");
+const x4_events_1 = require("./x4_events");
+function EvLoaded(url, svg, context = null) {
+    return (0, x4_events_1.BasicEvent)({ url, svg, context });
+}
+exports.EvLoaded = EvLoaded;
+class Loader extends x4_events_1.EventSource {
+    svgs;
+    constructor() {
+        super();
+        this.svgs = new Map();
+    }
+    load(url) {
+        if (this.svgs.has(url)) {
+            const svg = this.svgs.get(url);
+            if (svg) {
+                //console.log( 'cached=', url );
+                this.signal('loaded', EvLoaded(url, svg));
+            }
+        }
+        else {
+            // mark it as loading
+            this.svgs.set(url, null);
+            // then start loading
+            const _load = async (url) => {
+                const r = await fetch(url);
+                if (r.ok) {
+                    const svg = await r.text();
+                    this.svgs.set(url, svg);
+                    //console.log( 'signal=', url );
+                    this.signal('loaded', EvLoaded(url, svg));
+                }
+            };
+            _load(url);
+        }
+    }
+}
+const svgLoader = new Loader();
+/**
+ * standard icon
+ */
+class Icon extends component_1.Component {
+    m_icon;
+    m_iconName;
+    constructor(props) {
+        super(props);
+        this._setIcon(props.icon, false);
+        if (props.size) {
+            this.setStyleValue('fontSize', props.size);
+        }
+    }
+    _setIcon(icon, remove_old) {
+        const reUrl = /\s*url\s*\(\s*(.+)\s*\)\s*/gi;
+        const reSvg = /\s*svg\s*\(\s*(.+)\s*\)\s*/gi;
+        const reSvg2 = /(.*\.svg)$/gi;
+        const reCls = /\s*cls\s*\(\s*(.+)\s*\)\s*/gi;
+        if (!icon) {
+            this.m_iconName = '';
+            return;
+        }
+        this.removeClass('@svg');
+        let name, url;
+        if (typeof (icon) === 'number') {
+            icon = icon.toString(16);
+            name = icon;
+        }
+        else {
+            let match_svg = reSvg.exec(icon) || reSvg2.exec(icon);
+            if (match_svg) {
+                const url = match_svg[1].trim();
+                this._setSVG(url);
+                return;
+            }
+            let match_cls = reCls.exec(icon);
+            if (match_cls) {
+                const classes = match_cls[1].trim();
+                this.addClass(classes);
+                return;
+            }
+            let match_url = reUrl.exec(icon);
+            if (match_url) {
+                url = match_url[1].trim();
+                name = url.replace(/[/\\\.\* ]/g, '_');
+            }
+            else {
+                name = icon;
+                icon = styles_1.Stylesheet.getVar('icon-' + icon);
+                if (icon == '' || icon === undefined) {
+                    // name your icon 'icon-xxx'
+                    // ex:
+                    // :root { --icon-zoom-p: f00e; }
+                    console.assert(false);
+                    icon = '0';
+                }
+            }
+        }
+        this.m_iconName = name;
+        if (this.m_icon === icon) {
+            return;
+        }
+        let css = component_1.Component.getCss(), rulename;
+        if (remove_old && this.m_icon) {
+            rulename = 'icon-' + name;
+            this.removeClass(rulename);
+        }
+        // generate dynamic css icon rule
+        rulename = 'icon-' + name;
+        if (Icon.icon_cache[rulename] === undefined) {
+            Icon.icon_cache[rulename] = true;
+            let rule;
+            if (url) {
+                rule = `display: block; content: ' '; background-image: url(${url}); background-size: contain; width: 100%; height: 100%; background-repeat: no-repeat; color: white;`;
+            }
+            else {
+                rule = `content: "\\${icon}";`;
+            }
+            css.setRule(rulename, `.${rulename}::before {${rule}}`);
+        }
+        this.addClass(rulename);
+        this.m_icon = icon;
+    }
+    /**
+     * change the icon
+     * @param icon - new icon
+     */
+    set icon(icon) {
+        this._setIcon(icon, true);
+    }
+    get icon() {
+        return this.m_iconName;
+    }
+    _setSVG(url) {
+        const set = (ev) => {
+            //console.log( 'set=', ev.url, 'url=', url );
+            if (ev.url == url) {
+                this.addClass('@svg-icon');
+                this.setContent(tools_1.HtmlString.from(ev.svg), false);
+                svgLoader.off('loaded', set);
+            }
+        };
+        svgLoader.on('loaded', set);
+        svgLoader.load(url);
+    }
+    /**
+     *
+     */
+    static icon_cache = [];
+}
+exports.Icon = Icon;

package/lib/image.js

@@ -1,3 +1,4 @@
+"use strict";
 /**
 *  ___  ___ __
 *  \  \/  /  / _
@@ -22,7 +23,9 @@
 *
 * 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';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Image = void 0;
+const component_1 = require("./component");
 const emptyImageSrc = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
 function _isStaticImage(src) {
     return src.substr(0, 5) == 'data:';
@@ -30,7 +33,7 @@ function _isStaticImage(src) {
 /**
  * Standard image class
  */
-export class Image extends Component {
+class Image extends component_1.Component {
     m_created;
     m_lazysrc; // expected 
     constructor(props) {
@@ -51,7 +54,7 @@ export class Image extends Component {
     /** @ignore */
     render() {
         let mp = this.m_props;
-        const img = new Component({
+        const img = new component_1.Component({
             tag: 'img',
             attrs: {
                 draggable: false,
@@ -147,3 +150,4 @@ export class Image extends Component {
         }
     }
 }
+exports.Image = Image;