x4js 1.4.17 → 1.4.21

package/lib/drag_manager.js

@@ -1,6 +1,35 @@
 "use strict";
+/**
+*  ___   ___ __
+*  \  \_/  /  / _
+*   \     /  /_| |_
+*   /  _  \____   _|
+*  /__/ \__\   |_|
+*
+* @file drag_manager.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.
+**/
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.dragManager = void 0;
+const x4dom_1 = require("./x4dom");
 const x_drag_cb = Symbol('x-drag-cb');
 /**
  *
@@ -19,7 +48,7 @@ class DragManager {
             this.dragSource = el;
             this.dragGhost = el.dom.cloneNode(true);
             this.dragGhost.classList.add('dragged');
-            document.body.appendChild(this.dragGhost);
+            x4dom_1.x4document.body.appendChild(this.dragGhost);
             el.addClass('dragging');
             ev.dataTransfer.setData('text/string', '1');
             ev.dataTransfer.setDragImage(new Image(), 0, 0);

package/lib/fileupload.js

@@ -29,6 +29,7 @@
 **/
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.saveFile = exports.openFile = exports.ImageUpload = exports.FileUpload = void 0;
+const x4dom_1 = require("./x4dom");
 const component_1 = require("./component");
 const layout_1 = require("./layout");
 const input_1 = require("./input");
@@ -125,7 +126,7 @@ function _createFileInput() {
             }
         });
         // ajoute un input type:file caché pour pouvoir choir un fichier a ouvrir
-        document.body.appendChild(g_file_input._build());
+        x4dom_1.x4document.body.appendChild(g_file_input._build());
     }
     g_file_input.clearDomEvent('change');
     return g_file_input;

package/lib/form.d.ts

@@ -30,7 +30,7 @@ import { Component, Container, CProps, ContainerEventMap, ComponentContent } fro
 import { HLayout, VLayout } from './layout';
 import { Button } from './button';
 import { RequestProps } from './request';
-import { EventCallback } from './x4_events';
+import { EventCallback } from './x4events';
 import { EvBtnClick } from './dialog';
 export declare type FormBtn = 'ok' | 'cancel' | 'ignore' | 'yes' | 'no' | 'close' | 'save' | 'dontsave';
 export declare type FormButtons = (FormBtn | Button | Component)[];

package/lib/gridview.d.ts

@@ -26,16 +26,12 @@
 * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
-/**
- * todo: sizable column
- * todo: button in a column
- */
 import { VLayout } from './layout';
 import { Component, ContainerEventMap, EvDblClick, CProps, HtmlString } from './component';
 import { Label } from './label';
 import * as Formatters from './formatters';
 import { DataView, DataStore, Record } from './datastore';
-import { EvContextMenu, EvSelectionChange, BasicEvent, EventDisposer } from "./x4_events";
+import { EvContextMenu, EvSelectionChange, BasicEvent, EventDisposer } from "./x4events";
 export interface EvGridCheck extends BasicEvent {
     rec: Record;
     chk: boolean;

package/lib/gridview.js

@@ -34,16 +34,17 @@ const T_UPDATE = Symbol('update');
  * todo: sizable column
  * todo: button in a column
  */
+const x4dom_1 = require("./x4dom");
 const layout_1 = require("./layout");
 const component_1 = require("./component");
 const label_1 = require("./label");
 const i18n_1 = require("./i18n");
 const tools_1 = require("./tools");
 const datastore_1 = require("./datastore");
-const x4_events_1 = require("./x4_events");
+const x4events_1 = require("./x4events");
 const icon_js_1 = require("./icon.js");
 function EvGridCheck(rec, chk) {
-    return (0, x4_events_1.BasicEvent)({ rec, chk });
+    return (0, x4events_1.BasicEvent)({ rec, chk });
 }
 exports.EvGridCheck = EvGridCheck;
 class ColHeader extends component_1.Component {
@@ -449,9 +450,9 @@ class GridView extends layout_1.VLayout {
      *
      */
     _computeItemHeight() {
-        let gr = document.createElement('div');
+        let gr = x4dom_1.x4document.createElement('div');
         gr.classList.add('x-row');
-        let gv = document.createElement('div');
+        let gv = x4dom_1.x4document.createElement('div');
         gv.classList.add('x-grid-view');
         gv.style.position = 'absolute';
         gv.style.top = '-1000px';
@@ -743,17 +744,17 @@ class GridView extends layout_1.VLayout {
                 dom_item.addClass('@selected');
             }
             let rec = this.m_dataview.getById(item);
-            this.emit('selectionChange', (0, x4_events_1.EvSelectionChange)(rec));
+            this.emit('selectionChange', (0, x4events_1.EvSelectionChange)(rec));
         }
         else {
-            this.emit('selectionChange', (0, x4_events_1.EvSelectionChange)(null));
+            this.emit('selectionChange', (0, x4events_1.EvSelectionChange)(null));
         }
     }
     /**
      *
      */
     _showItemContextMenu(event, item) {
-        this.emit('contextMenu', (0, x4_events_1.EvContextMenu)(event, item));
+        this.emit('contextMenu', (0, x4events_1.EvContextMenu)(event, item));
     }
     /**
      *

package/lib/i18n.d.ts

@@ -27,45 +27,47 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 /**
- * current language
- * FR by default
- * @example ```typescript
- * console.log( _tr.global.ok );
+ * create a new language
+ * @param name language name (code)
+ * @param base base language (code)
+ * @example:
+ * ```js
+ * createLanguage( 'en', 'fr' );
+ * ```
  */
-export declare let _tr: any;
+export declare function createLanguage(name: string, base: string): void;
+/**
+ * check if the given language is known
+ * @param name language name (code)
+ */
+export declare function isLanguage(name: string): boolean;
 /**
- * check if the language is known
- * @param name - language name to test
- * @example ```typescript
- * if( isLanguage('fr') ) {
+ * 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 declare function addTranslation(name: any, ...parts: any[]): void;
+export declare let _tr: any;
+/**
+ * select the given language as current
+ * @param name laguage name (code)
  */
-export declare function isLanguage(name: any): boolean;
+export declare function selectLanguage(name: string): void;
 /**
- * select the current language
- * @param name - language name
- * @example ```typescript
- * selectLanguage( 'en' );
+ *
  */
-export declare function selectLanguage(name: any): void;
+export declare function getCurrentLanguage(): string;
 /**
- * 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;
+export declare function getAvailableLanguages(): string[];

package/lib/i18n.js

@@ -28,7 +28,158 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.extendTranslation = exports.selectLanguage = exports.isLanguage = exports._tr = void 0;
+exports.getAvailableLanguages = exports.getCurrentLanguage = exports.selectLanguage = exports._tr = exports.addTranslation = exports.isLanguage = exports.createLanguage = void 0;
+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' );
+ * ```
+ */
+function createLanguage(name, base) {
+    languages[name] = {
+        name,
+        base,
+        src_translations: {},
+        translations: {}
+    };
+}
+exports.createLanguage = createLanguage;
+/**
+ * check if the given language is known
+ * @param name language name (code)
+ */
+function isLanguage(name) {
+    return languages[name] !== undefined;
+}
+exports.isLanguage = isLanguage;
+/**
+ * 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 );
+ * ```
+  */
+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);
+}
+exports.addTranslation = addTranslation;
+/**
+ *
+ */
+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;
+        }
+    });
+}
+exports._tr = {};
+/**
+ * select the given language as current
+ * @param name laguage name (code)
+ */
+function selectLanguage(name) {
+    if (!isLanguage(name)) {
+        return;
+    }
+    exports._tr = languages[name].translations;
+    exports._tr[sym_lang] = name;
+}
+exports.selectLanguage = selectLanguage;
+/**
+ *
+ */
+function getCurrentLanguage() {
+    return exports._tr[sym_lang];
+}
+exports.getCurrentLanguage = getCurrentLanguage;
+/**
+ *
+ */
+function getAvailableLanguages() {
+    return Object.keys(languages);
+}
+exports.getAvailableLanguages = getAvailableLanguages;
 /**
  * language definition
  * x4 specific strings
@@ -51,9 +202,9 @@ let fr = {
         invalid_format: "format invalide",
         invalid_email: 'adresse mail invalide',
         invalid_number: 'valeur numérique invalide',
-        diff_date_seconds: '{0} seconds',
+        diff_date_seconds: '{0} secondes',
         diff_date_minutes: '{0} minutes',
-        diff_date_hours: '{0} hours',
+        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',
@@ -78,102 +229,38 @@ let en = {
         ignore: 'Ignore',
         yes: 'Yes',
         no: 'No',
-        required_field: "required field",
+        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: 'Bad date format {0}',
+        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'
     }
 };
-/** @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;
-        }
-    });
-}
+createLanguage('fr', null);
+addTranslation('fr', fr);
+createLanguage('en', 'fr');
+addTranslation('en', en);
+selectLanguage('fr'); // by default

package/lib/icon.d.ts

@@ -27,7 +27,7 @@
 * SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 **/
 import { Component, CProps } from './component';
-import { BasicEvent } from './x4_events';
+import { BasicEvent } from './x4events';
 export declare type IconID = string | number;
 export interface IconProps extends CProps {
     icon: IconID;

package/lib/icon.js

@@ -32,9 +32,9 @@ 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");
+const x4events_1 = require("./x4events");
 function EvLoaded(url, svg, context = null) {
-    return (0, x4_events_1.BasicEvent)({ url, svg, context });
+    return (0, x4events_1.BasicEvent)({ url, svg, context });
 }
 exports.EvLoaded = EvLoaded;
 function trimQuotes(str) {
@@ -46,7 +46,7 @@ function trimQuotes(str) {
     }
     return str;
 }
-class Loader extends x4_events_1.EventSource {
+class Loader extends x4events_1.EventSource {
     svgs;
     constructor() {
         super();
@@ -75,9 +75,15 @@ class Loader extends x4_events_1.EventSource {
                     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));
+                        // check response, must be svg
+                        if (!svg.startsWith("<svg")) {
+                            console.error("svg loading error: ", svg);
+                            this.signal('loaded', EvLoaded(url, ""));
+                        }
+                        else {
+                            this.svgs.set(url, svg);
+                            this.signal('loaded', EvLoaded(url, svg));
+                        }
                     }
                 }
             };
@@ -115,6 +121,7 @@ class Icon extends component_1.Component {
         if (typeof (icon) === 'number') {
             icon = icon.toString(16);
             name = icon;
+            console.error("deprecation error: invalid icon name");
         }
         else {
             // var( <var-name> )
@@ -122,7 +129,7 @@ class Icon extends component_1.Component {
             //	in the .css
             //  --------------------------
             //	:root {
-            //		--chevron-up: svgpath( "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" );
+            //		--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" )
@@ -150,14 +157,6 @@ class Icon extends component_1.Component {
                 this._setSVG(url);
                 return;
             }
-            //	svgpath( <svg-path> )
-            //	svgpath( "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" )
-            const reSvg3 = /\s*svgpath\s*\(\s*(.+)\s*\)\s*/gi;
-            let match_pth = reSvg3.exec(icon);
-            if (match_pth) {
-                const pth = this._setSVGPath(match_pth[1].trim());
-                return;
-            }
             //	data( <direct> )
             //	data( "data:image/svg+xml;utf8,<svg...></svg>" )
             const reSvg4 = /^\s*(data\:image\/.+)\s*$/gi;
@@ -166,6 +165,8 @@ class Icon extends component_1.Component {
                 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) {
@@ -173,6 +174,8 @@ class Icon extends component_1.Component {
                 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) {
@@ -187,13 +190,13 @@ class Icon extends component_1.Component {
             }
             else {
                 // todo: deprecated
+                console.error("deprecation error: invalid icon name");
                 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';
                 }
             }

package/lib/image.js

@@ -29,6 +29,7 @@
 **/
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Image = void 0;
+const x4dom_1 = require("./x4dom");
 const component_1 = require("./component");
 const emptyImageSrc = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
 function _isStaticImage(src) {
@@ -126,7 +127,7 @@ class Image extends component_1.Component {
         Image.lazy_images_waiting.forEach((el) => {
             let dom = el.dom, src = el.src;
             // skip deleted elements
-            if (!dom || !document.contains(dom)) {
+            if (!dom || dom.offsetParent === null) {
                 // do not append to newList
                 return;
             }
@@ -134,8 +135,8 @@ class Image extends component_1.Component {
             // 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)) {
+                rc.top <= (window.innerHeight || x4dom_1.x4document.documentElement.clientHeight) &&
+                rc.left <= (window.innerWidth || x4dom_1.x4document.documentElement.clientWidth)) {
                 // ok, we load the image
                 let img = dom.firstChild;
                 img.setAttribute('src', src);