x4js 1.4.51 → 1.4.53

package/lib/esm/i18n.js

@@ -0,0 +1,257 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file i18n.ts
+* @author Etienne Cochard
+*
+* Copyright (c) 2019-2022 R-libre ingenierie
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy
+* of this software and associated documentation files (the "Software"), to deal
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+* of the Software, and to permit persons to whom the Software is furnished to do so,
+* subject to the following conditions:
+* The above copyright notice and this permission notice shall be included in all copies
+* or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 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.
+**/
+const sym_lang = Symbol("i18n");
+let languages = {};
+/**
+ * create a new language
+ * @param name language name (code)
+ * @param base base language (code)
+ * @example:
+ * ```js
+ * createLanguage( 'en', 'fr' );
+ * ```
+ */
+export function createLanguage(name, base) {
+    languages[name] = {
+        name,
+        base,
+        src_translations: {},
+        translations: {}
+    };
+}
+/**
+ * check if the given language is known
+ * @param name language name (code)
+ */
+export function isLanguage(name) {
+    return languages[name] !== undefined;
+}
+/**
+ * build the language with given fragments
+ * @param name language name (code)
+ * @param parts misc elements that make the language
+ * @example:
+ * ```js
+ * createLanguage( 'en', 'fr' );
+ * const app = {
+ * 	clients: {
+ * 		translation1: "hello",
+ *  }
+ * }
+ * addTranslation( 'en', app );
+ * ```
+  */
+export function addTranslation(name, ...parts) {
+    if (!isLanguage(name)) {
+        return;
+    }
+    const lang = languages[name];
+    parts.forEach(p => {
+        _patch(lang.src_translations, p, lang.base);
+    });
+    lang.translations = _mk_proxy(lang.src_translations, lang.base, true);
+}
+/**
+ *
+ */
+function _patch(obj, by, def) {
+    for (let n in by) {
+        if (obj[n] instanceof Object) {
+            _patch(obj[n], by[n], def);
+        }
+        else {
+            obj[n] = by[n];
+            obj[n] = _mk_proxy(obj[n], def, false);
+        }
+    }
+    return obj;
+}
+/**
+ * when we ask for _tr.xxx
+ * reqpath is set to [xxx]
+ *
+ * then when we try to get _tr.xxx.yyy
+ * reqpath is [xxx,yyy]
+ * if yyy is not found, we try with base langage for the full reqpath
+ * until no base found
+ */
+let req_path;
+/**
+ *
+ */
+function _findBaseTrans(base) {
+    while (base) {
+        const lang = languages[base];
+        let trans = lang.translations;
+        let value;
+        for (const p of req_path) {
+            value = trans[p];
+            if (value === undefined) {
+                break;
+            }
+            trans = value;
+        }
+        if (value !== undefined) {
+            return trans;
+        }
+        base = lang.base;
+    }
+    console.error("I18N error: unable to find", '_tr.' + req_path.join('.'));
+    return undefined;
+}
+/**
+ *
+ */
+function _mk_proxy(obj, base, root) {
+    return new Proxy(obj, {
+        get: (target, prop) => {
+            if (root) {
+                req_path = [prop];
+            }
+            else {
+                req_path.push(prop);
+            }
+            let value = target[prop];
+            if (value === undefined && base) {
+                value = _findBaseTrans(base);
+                // keep it for later
+                target[prop] = value;
+            }
+            return value;
+        }
+    });
+}
+export let _tr = {};
+/**
+ * select the given language as current
+ * @param name laguage name (code)
+ */
+export function selectLanguage(name) {
+    if (!isLanguage(name)) {
+        return;
+    }
+    _tr = languages[name].translations;
+    _tr[sym_lang] = name;
+}
+/**
+ *
+ */
+export function getCurrentLanguage() {
+    return _tr[sym_lang];
+}
+/**
+ *
+ */
+export function getAvailableLanguages() {
+    return Object.keys(languages);
+}
+/**
+ * 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} secondes',
+        diff_date_minutes: '{0} minutes',
+        diff_date_hours: '{0} heures',
+        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',
+        open: 'Open',
+        new: 'New',
+        delete: 'Delete',
+        close: 'Close',
+        save: 'Save',
+        search: 'Search',
+        search_tip: 'Type in the text to search. <b>Enter</b> to start the search. <b>Esc</b> to cancel.',
+        required_field: "missing information",
+        invalid_format: "invalid format",
+        invalid_email: 'invalid email address',
+        invalid_number: 'bad numeric value',
+        diff_date_seconds: '{0} seconds',
+        diff_date_minutes: '{0} minutes',
+        diff_date_hours: '{0} hours',
+        invalid_date: 'Unrecognized date({0})',
+        empty_list: 'Empty list',
+        date_input_formats: 'm/d/y|m.d.y|m d y|m-d-y|mdy',
+        date_format: 'M/D/Y',
+        day_short: ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
+        day_long: ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'],
+        month_short: ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jui', 'aug', 'sep', 'oct', 'nov', 'dec'],
+        month_long: ['january', 'february', 'march', 'april', 'mau', 'june', 'jully', 'august', 'september', 'october', 'november', 'december'],
+        property: 'Property',
+        value: 'Value',
+        err_403: `You do not have sufficient rights to do that action`,
+        copy: 'Copy',
+        cut: 'Cut',
+        paste: 'Paste'
+    }
+};
+createLanguage('fr', null);
+addTranslation('fr', fr);
+createLanguage('en', 'fr');
+addTranslation('en', en);
+selectLanguage('fr'); // by default

package/lib/esm/icon.js

@@ -0,0 +1,256 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file icon.ts
+* @author Etienne Cochard
+*
+* Copyright (c) 2019-2022 R-libre ingenierie
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy
+* of this software and associated documentation files (the "Software"), to deal
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+* of the Software, and to permit persons to whom the Software is furnished to do so,
+* subject to the following conditions:
+* The above copyright notice and this permission notice shall be included in all copies
+* or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 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.
+**/
+import { Component } from './component';
+import { Stylesheet } from './styles';
+import { HtmlString, isString } from './tools';
+import { BasicEvent, EventSource } from './x4events';
+export function EvLoaded(url, svg, context = null) {
+    return BasicEvent({ url, svg, context });
+}
+function trimQuotes(str) {
+    const l = str.length;
+    if (str[0] == '"' && str[l - 1] == '"') {
+        str = str.substring(1, l - 1);
+        str = str.replaceAll('\\"', "'");
+        return str;
+    }
+    return str;
+}
+class Loader extends 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) => {
+                // shortcut
+                if (url.substring(0, 24) == "data:image/svg+xml;utf8,") {
+                    const svg = url.substring(24);
+                    this.svgs.set(url, svg);
+                    this.signal('loaded', EvLoaded(url, svg));
+                }
+                else {
+                    const r = await fetch(url);
+                    if (r.ok) {
+                        const svg = await r.text();
+                        // check response, must be svg
+                        //TODO: find better
+                        if (!svg.startsWith("<svg") && !svg.startsWith('<?xml')) {
+                            console.error("svg loading error: ", svg);
+                            this.signal('loaded', EvLoaded(url, ""));
+                        }
+                        else {
+                            this.svgs.set(url, svg);
+                            this.signal('loaded', EvLoaded(url, svg));
+                        }
+                    }
+                }
+            };
+            _load(url);
+        }
+    }
+}
+const svgLoader = new Loader();
+/**
+ * standard icon
+ */
+export class Icon extends Component {
+    m_icon;
+    m_iconName;
+    constructor(props) {
+        if (isString(props)) {
+            super({ icon: props });
+        }
+        else {
+            super(props);
+        }
+        this._setIcon(this.m_props.icon, false);
+        if (this.m_props.size) {
+            this.setStyleValue('fontSize', this.m_props.size);
+        }
+    }
+    _setIcon(icon, remove_old) {
+        if (!icon) {
+            this.m_iconName = '';
+            return;
+        }
+        this.removeClass('@svg');
+        //	todo: deprecated
+        let name, url;
+        if (typeof (icon) === 'number') {
+            icon = icon.toString(16);
+            name = icon;
+            console.error("deprecation error: invalid icon name");
+        }
+        else {
+            // var( <var-name> )
+            //	
+            //	in the .css
+            //  --------------------------
+            //	:root {
+            //		--chevron-up: data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96z"/></svg>';
+            //	}
+            //
+            //	var( "--chevron-up" )
+            const reVar = /\s*var\s*\(\s*(.+)\s*\)\s*/gi;
+            let match_var = reVar.exec(icon);
+            while (match_var) {
+                const varname = match_var[1].trim();
+                icon = Stylesheet.getVar(varname).trim();
+                if (icon == '' || icon === undefined) {
+                    console.error(`icon: unable to find variable named '${varname}'`);
+                    return;
+                }
+                else {
+                    icon = trimQuotes(icon);
+                }
+                match_var = reVar.exec(icon);
+            }
+            //	svg( <svg-filename> )	-> 	svg( "mysvgfile.svg" )	
+            //	<svg-filename>.svg 		->  "mysvgfile.svg"
+            const reSvg = /\s*svg\s*\(\s*(.+)\s*\)\s*/gi;
+            const reSvg2 = /(.*\.svg)$/gi;
+            let match_svg = reSvg.exec(icon) || reSvg2.exec(icon);
+            if (match_svg) {
+                const url = match_svg[1].trim();
+                this._setSVG(url);
+                return;
+            }
+            //	data( <direct> )
+            //	data( "data:image/svg+xml;utf8,<svg...></svg>" )
+            const reSvg4 = /^\s*(data\:image\/.+)\s*$/gi;
+            let match_dta = reSvg4.exec(icon);
+            if (match_dta) {
+                this._setSVG(match_dta[1]);
+                return;
+            }
+            //	cls( "fas fa-angle-up" )
+            //
+            const reCls = /\s*cls\s*\(\s*(.+)\s*\)\s*/gi;
+            let match_cls = reCls.exec(icon);
+            if (match_cls) {
+                const classes = match_cls[1].trim();
+                this.addClass(classes);
+                return;
+            }
+            //	url( "www.google.com" )
+            //
+            const reUrl = /\s*url\s*\(\s*(.+)\s*\)\s*/gi;
+            let match_url = reUrl.exec(icon);
+            if (match_url) {
+                url = trimQuotes(match_url[1].trim());
+                // this value is escaped				
+                url = url.replaceAll("\\", "");
+                this._setSVG(url);
+                return;
+            }
+            else {
+                // todo: deprecated
+                console.error("deprecation error: invalid icon name");
+                name = icon;
+                icon = Stylesheet.getVar('icon-' + icon);
+                if (icon == '' || icon === undefined) {
+                    // name your icon 'icon-xxx'
+                    // ex:
+                    // :root { --icon-zoom-p: f00e; }
+                    icon = '0';
+                }
+            }
+        }
+        this.m_iconName = name;
+        if (this.m_icon === icon) {
+            return;
+        }
+        let css = 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(HtmlString.from(ev.svg), false);
+                svgLoader.off('loaded', set);
+            }
+        };
+        svgLoader.on('loaded', set);
+        svgLoader.load(url);
+    }
+    /**
+     * todo: try to extract viewbox
+     */
+    _setSVGPath(pth) {
+        this.addClass('@svg-icon');
+        this.setContent(HtmlString.from(`<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="${pth}/></svg>`), false);
+    }
+    /**
+     *
+     */
+    static icon_cache = [];
+}

package/lib/esm/image.js

@@ -0,0 +1,154 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file image.ts
+* @author Etienne Cochard
+*
+* Copyright (c) 2019-2022 R-libre ingenierie
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy
+* of this software and associated documentation files (the "Software"), to deal
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+* of the Software, and to permit persons to whom the Software is furnished to do so,
+* subject to the following conditions:
+* The above copyright notice and this permission notice shall be included in all copies
+* or substantial portions of the Software.
+*
+* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+* INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+* PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 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.
+**/
+import { x4document } from './x4dom';
+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 || dom.offsetParent === null) {
+                // 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 || x4document.documentElement.clientHeight) &&
+                rc.left <= (window.innerWidth || x4document.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;
+        }
+    }
+}