x4js 1.4.4 → 1.4.7

package/lib/datastore.js

@@ -1,3 +1,4 @@
+"use strict";
 /**
 *  ___  ___ __
 *  \  \/  /  / _
@@ -22,12 +23,14 @@
 *
 * 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 { ajaxRequest } from './request';
-import { isArray, isString } from './tools';
-import { BasicEvent, EvChange, EventSource } from './x4_events';
-import { BaseComponent } from './base_component';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataView = exports.EvViewChange = exports.DataStore = exports.DataProxy = exports.AutoRecord = exports.Record = exports.data = void 0;
+const request_1 = require("./request");
+const tools_1 = require("./tools");
+const x4_events_1 = require("./x4_events");
+const base_component_1 = require("./base_component");
 function EvDataChange(type, id) {
-    return BasicEvent({ type, id });
+    return (0, x4_events_1.BasicEvent)({ type, id });
 }
 /**
  *
@@ -66,7 +69,7 @@ function _getMetas(obj, create = true) {
     }
     return mfld;
 }
-export var data;
+var data;
 (function (data_1) {
     /**
      * define a record id
@@ -171,11 +174,11 @@ export var data;
         return data.field({ ...props, type: 'array', model: new ctor() });
     }
     data_1.array = array;
-})(data || (data = {}));
+})(data = exports.data || (exports.data = {}));
 /**
  * record model
  */
-export class Record {
+class Record {
     constructor(data, id) {
         if (data !== undefined) {
             this.unSerialize(data, id);
@@ -287,7 +290,7 @@ export class Record {
                 return typeof (input) === 'number' ? input : parseInt(input);
             }
             case 'date': {
-                return isString(input) ? new Date(input) : input;
+                return (0, tools_1.isString)(input) ? new Date(input) : input;
             }
             case 'array': {
                 let result = [];
@@ -369,10 +372,11 @@ export class Record {
         this.setRaw(fld.name, value);
     }
 }
+exports.Record = Record;
 /**
  * by default, the field id is rhe first member or the record
  */
-export class AutoRecord extends Record {
+class AutoRecord extends Record {
     m_data;
     m_fid;
     constructor(data) {
@@ -405,7 +409,8 @@ export class AutoRecord extends Record {
         return new AutoRecord({ ...data });
     }
 }
-export class DataProxy extends BaseComponent {
+exports.AutoRecord = AutoRecord;
+class DataProxy extends base_component_1.BaseComponent {
     constructor(props) {
         super(props);
     }
@@ -434,22 +439,23 @@ export class DataProxy extends BaseComponent {
         }
         else {
             setTimeout(() => {
-                ajaxRequest({
+                (0, request_1.ajaxRequest)({
                     url: this.m_props.path,
                     method: 'GET',
                     params: this.m_props.params,
                     success: (data) => {
-                        this.emit('change', EvChange(data));
+                        this.emit('change', (0, x4_events_1.EvChange)(data));
                     }
                 });
             }, delay);
         }
     }
 }
+exports.DataProxy = DataProxy;
 /**
  *
  */
-export class DataStore extends EventSource {
+class DataStore extends x4_events_1.EventSource {
     m_model;
     m_fields;
     m_records;
@@ -680,7 +686,7 @@ export class DataStore extends EventSource {
                     return new Uint32Array(0);
                 }
                 let filterValue = filter.value;
-                if (isString(filterValue) && !filter.caseSensitive) {
+                if ((0, tools_1.isString)(filterValue) && !filter.caseSensitive) {
                     filterValue = filterValue.toUpperCase();
                 }
                 function _lt(recval) {
@@ -852,15 +858,17 @@ export class DataStore extends EventSource {
         this.emit('data_change', EvDataChange('change'));
     }
 }
-export function EvViewChange(action) {
-    return BasicEvent({ action });
+exports.DataStore = DataStore;
+function EvViewChange(action) {
+    return (0, x4_events_1.BasicEvent)({ action });
 }
+exports.EvViewChange = EvViewChange;
 /**
  * Dataview allow different views of the DataStore.
  * You can sort the columns & filter data
  * You can have multiple views for a single DataStore
  */
-export class DataView extends BaseComponent {
+class DataView extends base_component_1.BaseComponent {
     m_index;
     m_store;
     m_sort;
@@ -873,10 +881,10 @@ export class DataView extends BaseComponent {
         this.m_sort = null;
         this.filter(props.filter);
         if (props.order) {
-            if (isString(props.order)) {
+            if ((0, tools_1.isString)(props.order)) {
                 this.sort([{ field: props.order, ascending: true }]);
             }
-            else if (isArray(props.order)) {
+            else if ((0, tools_1.isArray)(props.order)) {
                 this.sort(props.order);
             }
             else {
@@ -984,3 +992,4 @@ export class DataView extends BaseComponent {
         });
     }
 }
+exports.DataView = DataView;

package/lib/dialog.js

@@ -1,3 +1,4 @@
+"use strict";
 /**
 *  ___  ___ __
 *  \  \/  /  / _
@@ -22,21 +23,24 @@
 *
 * 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 { Popup, EvMove } from './popup';
-import { Icon } from './icon';
-import { HLayout } from './layout';
-import { Label } from './label';
-import { Form } from './form';
-import { Component, EvSize, flyWrap } from './component';
-import { BasicEvent } from './x4_events';
-import { Rect, getMousePos, isFunction, isTouchDevice } from './tools';
-export function EvBtnClick(button) {
-    return BasicEvent({ button });
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dialog = exports.EvBtnClick = void 0;
+const popup_1 = require("./popup");
+const icon_1 = require("./icon");
+const layout_1 = require("./layout");
+const label_1 = require("./label");
+const form_1 = require("./form");
+const component_1 = require("./component");
+const x4_events_1 = require("./x4_events");
+const tools_1 = require("./tools");
+function EvBtnClick(button) {
+    return (0, x4_events_1.BasicEvent)({ button });
 }
+exports.EvBtnClick = EvBtnClick;
 /**
  * Standard dialog class
  */
-export class Dialog extends Popup {
+class Dialog extends popup_1.Popup {
     m_icon;
     m_title;
     m_form;
@@ -66,7 +70,7 @@ export class Dialog extends Popup {
         this.m_minFormSize = { width, height };
         this.enableMask(true);
         if (props.form) {
-            if (!isFunction(props.form)) {
+            if (!(0, tools_1.isFunction)(props.form)) {
                 this.m_form = props.form;
                 this.m_form.on('btnClick', (e) => this._handleClick(e));
             }
@@ -75,7 +79,7 @@ export class Dialog extends Popup {
             }
         }
         else {
-            this.m_form = new Form({
+            this.m_form = new form_1.Form({
                 content,
                 buttons: props.buttons,
                 disableSuggestions: props.disableSuggestions,
@@ -142,7 +146,7 @@ export class Dialog extends Popup {
         this.addClass('@resized');
         if (this.m_props.maximized) {
             this._maximize();
-            this.emit('size', EvSize(null));
+            this.emit('size', (0, component_1.EvSize)(null));
         }
         else {
             this.centerOnScreen();
@@ -163,12 +167,12 @@ export class Dialog extends Popup {
     setGeometry(geom) {
         if (geom.minimized && this.m_minimizable) {
             this._minimize(false);
-            this.m_rc_min = new Rect(geom.left, geom.top, geom.width, geom.height);
+            this.m_rc_min = new tools_1.Rect(geom.left, geom.top, geom.width, geom.height);
             this.displayAt(geom.left, geom.top, 'top-left');
         }
         else if (geom.maximized && this.m_maximizable) {
             this._maximize(false);
-            this.m_rc_max = new Rect(geom.left, geom.top, geom.width, geom.height);
+            this.m_rc_max = new tools_1.Rect(geom.left, geom.top, geom.width, geom.height);
         }
         else {
             this.setSize(geom.width, geom.height);
@@ -216,7 +220,7 @@ export class Dialog extends Popup {
      */
     setSize(width, height) {
         this.setStyle({ width, height });
-        this.emit('size', EvSize({ width, height }));
+        this.emit('size', (0, component_1.EvSize)({ width, height }));
     }
     /** @ignore */
     render() {
@@ -228,18 +232,18 @@ export class Dialog extends Popup {
         let hasTitle = this.m_icon !== undefined || this.m_closable || this.m_title !== undefined || this.m_movable;
         this.m_el_title = null;
         if (hasTitle) {
-            this.m_el_title = new HLayout({
+            this.m_el_title = new layout_1.HLayout({
                 cls: 'title',
                 content: [
-                    this.m_icon ? new Icon({ icon: this.m_icon }) : null,
-                    this.m_ui_title = new Label({ flex: 1, text: this.m_title }),
-                    this.m_minimizable ? new Icon({ cls: 'min-btn', icon: 'cls(far fa-window-minimize)', dom_events: { click: () => this._toggleMin() } }) : null,
-                    this.m_maximizable ? new Icon({ cls: 'max-btn', icon: 'cls(far fa-window-maximize)', dom_events: { click: () => this._toggleMax() } }) : null,
-                    this.m_closable ? new Icon({ icon: 'cls(far fa-rectangle-times)', dom_events: { click: () => this.close() } }) : null,
+                    this.m_icon ? new icon_1.Icon({ icon: this.m_icon }) : null,
+                    this.m_ui_title = new label_1.Label({ flex: 1, text: this.m_title }),
+                    this.m_minimizable ? new icon_1.Icon({ cls: 'min-btn', icon: 'cls(far fa-window-minimize)', dom_events: { click: () => this._toggleMin() } }) : null,
+                    this.m_maximizable ? new icon_1.Icon({ cls: 'max-btn', icon: 'cls(far fa-window-maximize)', dom_events: { click: () => this._toggleMax() } }) : null,
+                    this.m_closable ? new icon_1.Icon({ icon: 'cls(far fa-rectangle-times)', dom_events: { click: () => this.close() } }) : null,
                 ]
             });
             if (this.m_movable) {
-                if (isTouchDevice()) {
+                if ((0, tools_1.isTouchDevice)()) {
                     this.m_el_title.setDomEvent('touchstart', (e) => this._mouseDown(e));
                 }
                 else {
@@ -296,11 +300,11 @@ export class Dialog extends Popup {
                 height: this.m_rc_max.height,
             });
             this.m_maximized = false;
-            this.emit('size', EvSize(null, 'restore'));
+            this.emit('size', (0, component_1.EvSize)(null, 'restore'));
         }
         else {
             this._maximize();
-            this.emit('size', EvSize(null, 'maximize'));
+            this.emit('size', (0, component_1.EvSize)(null, 'maximize'));
         }
     }
     /**
@@ -319,19 +323,19 @@ export class Dialog extends Popup {
                 height: this.m_rc_min.height,
             });
             this.m_minimized = false;
-            this.emit('size', EvSize(null, 'restore'));
+            this.emit('size', (0, component_1.EvSize)(null, 'restore'));
         }
         else {
             this._minimize();
-            this.emit('size', EvSize(null, 'minimize'));
+            this.emit('size', (0, component_1.EvSize)(null, 'minimize'));
         }
     }
     /**
      *
      */
     _mouseDown(event) {
-        let { x, y } = getMousePos(event, true);
-        let wrc = flyWrap(document.body).getBoundingRect();
+        let { x, y } = (0, tools_1.getMousePos)(event, true);
+        let wrc = (0, component_1.flyWrap)(document.body).getBoundingRect();
         let rc = this.getBoundingRect(true);
         let trc = this.m_el_title.getBoundingRect();
         let dx = x - rc.left, dy = y - rc.top;
@@ -375,7 +379,7 @@ export class Dialog extends Popup {
                 top: y
             });
         };
-        Component.setCapture(this, (ev) => {
+        component_1.Component.setCapture(this, (ev) => {
             if (ev.type == 'mousemove') {
                 let mev = ev;
                 __move(mev.clientX, mev.clientY);
@@ -387,8 +391,8 @@ export class Dialog extends Popup {
                 }
             }
             else if (ev.type == 'mouseup' || ev.type == 'touchend') {
-                Component.releaseCapture();
-                this.emit('move', EvMove(null));
+                component_1.Component.releaseCapture();
+                this.emit('move', (0, popup_1.EvMove)(null));
             }
             else if (ev.type == 'mousedown' || ev.type == 'touchstart') {
             }
@@ -402,7 +406,7 @@ export class Dialog extends Popup {
             return;
         }
         this._maximize();
-        this.emit('size', EvSize(null));
+        this.emit('size', (0, component_1.EvSize)(null));
     }
     /**
      *
@@ -428,7 +432,7 @@ export class Dialog extends Popup {
             return;
         }
         this._minimize();
-        this.emit('size', EvSize(null));
+        this.emit('size', (0, component_1.EvSize)(null));
     }
     /**
      *
@@ -457,7 +461,7 @@ export class Dialog extends Popup {
     }
     itemWithName(name) {
         let result = this.dom.querySelector(`[name="${name}"]`);
-        return result ? Component.getElement(result) : null;
+        return result ? component_1.Component.getElement(result) : null;
     }
     getValues() {
         return this.m_form.getValues();
@@ -466,3 +470,4 @@ export class Dialog extends Popup {
         return this.m_form.validate();
     }
 }
+exports.Dialog = Dialog;

package/lib/dom_events.d.ts

@@ -0,0 +1,284 @@
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file dom_events.ts
+* @author Etienne Cochard
+* @copyright (c) 2022 R-libre ingenierie, all rights reserved.
+*
+**/
+export interface X4ElementEventMap extends HTMLElementEventMap {
+    "sizechange": Event;
+    "create": Event;
+}
+export interface IDOMEvents {
+    /**
+     * Fires when the user aborts the download.
+     * @param ev The event.
+     */
+    abort?: (ev: UIEvent) => any;
+    animationcancel?: (ev: AnimationEvent) => any;
+    animationend?: (ev: AnimationEvent) => any;
+    animationiteration?: (ev: AnimationEvent) => any;
+    animationstart?: (ev: AnimationEvent) => any;
+    auxclick?: (ev: MouseEvent) => any;
+    /**
+     * Fires when the object loses the input focus.
+     * @param ev The focus event.
+     */
+    blur?: (ev: FocusEvent) => any;
+    cancel?: (ev: Event) => any;
+    /**
+     * Occurs when playback is possible, but would require further buffering.
+     * @param ev The event.
+     */
+    canplay?: (ev: Event) => any;
+    canplaythrough?: (ev: Event) => any;
+    /**
+     * Fires when the contents of the object or selection have changed.
+     * @param ev The event.
+     */
+    change?: (ev: Event) => any;
+    /**
+     * Fires when the user clicks the left mouse button on the object
+     * @param ev The mouse event.
+     */
+    click?: (ev: MouseEvent) => any;
+    close?: (ev: Event) => any;
+    /**
+     * Fires when the user clicks the right mouse button in the client area, opening the context menu.
+     * @param ev The mouse event.
+     */
+    contextmenu?: (ev: MouseEvent) => any;
+    cuechange?: (ev: Event) => any;
+    /**
+     * Fires when the user double-clicks the object.
+     * @param ev The mouse event.
+     */
+    dblclick?: (ev: MouseEvent) => any;
+    /**
+     * Fires on the source object continuously during a drag operation.
+     * @param ev The event.
+     */
+    drag?: (ev: DragEvent) => any;
+    /**
+     * Fires on the source object when the user releases the mouse at the close of a drag operation.
+     * @param ev The event.
+     */
+    dragend?: (ev: DragEvent) => any;
+    /**
+     * Fires on the target element when the user drags the object to a valid drop target.
+     * @param ev The drag event.
+     */
+    dragenter?: (ev: DragEvent) => any;
+    dragexit?: (ev: Event) => any;
+    /**
+     * Fires on the target object when the user moves the mouse out of a valid drop target during a drag operation.
+     * @param ev The drag event.
+     */
+    dragleave?: (ev: DragEvent) => any;
+    /**
+     * Fires on the target element continuously while the user drags the object over a valid drop target.
+     * @param ev The event.
+     */
+    dragover?: (ev: DragEvent) => any;
+    /**
+     * Fires on the source object when the user starts to drag a text selection or selected object.
+     * @param ev The event.
+     */
+    dragstart?: (ev: DragEvent) => any;
+    drop?: (ev: DragEvent) => any;
+    /**
+     * Occurs when the duration attribute is updated.
+     * @param ev The event.
+     */
+    durationchange?: (ev: Event) => any;
+    /**
+     * Occurs when the media element is reset to its initial state.
+     * @param ev The event.
+     */
+    emptied?: (ev: Event) => any;
+    /**
+     * Occurs when the end of playback is reached.
+     * @param ev The event
+     */
+    ended?: (ev: Event) => any;
+    /**
+     * Fires when an error occurs during object loading.
+     * @param ev The event.
+     */
+    error?: OnErrorEventHandler;
+    /**
+     * Fires when the object receives focus.
+     * @param ev The event.
+     */
+    focus?: (ev: FocusEvent) => any;
+    gotpointercapture?: (ev: PointerEvent) => any;
+    input?: (ev: Event) => any;
+    invalid?: (ev: Event) => any;
+    /**
+     * Fires when the user presses a key.
+     * @param ev The keyboard event
+     */
+    keydown?: (ev: KeyboardEvent) => any;
+    /**
+     * Fires when the user presses an alphanumeric key.
+     * @param ev The event.
+     */
+    keypress?: (ev: KeyboardEvent) => any;
+    /**
+     * Fires when the user releases a key.
+     * @param ev The keyboard event
+     */
+    keyup?: (ev: KeyboardEvent) => any;
+    /**
+     * Fires immediately after the browser loads the object.
+     * @param ev The event.
+     */
+    load?: (ev: Event) => any;
+    /**
+     * Occurs when media data is loaded at the current playback position.
+     * @param ev The event.
+     */
+    loadeddata?: (ev: Event) => any;
+    /**
+     * Occurs when the duration and dimensions of the media have been determined.
+     * @param ev The event.
+     */
+    loadedmetadata?: (ev: Event) => any;
+    /**
+     * Occurs when Internet Explorer begins looking for media data.
+     * @param ev The event.
+     */
+    loadstart?: (ev: Event) => any;
+    lostpointercapture?: (ev: PointerEvent) => any;
+    /**
+     * Fires when the user clicks the object with either mouse button.
+     * @param ev The mouse event.
+     */
+    mousedown?: (ev: MouseEvent) => any;
+    mouseenter?: (ev: MouseEvent) => any;
+    mouseleave?: (ev: MouseEvent) => any;
+    /**
+     * Fires when the user moves the mouse over the object.
+     * @param ev The mouse event.
+     */
+    mousemove?: (ev: MouseEvent) => any;
+    /**
+     * Fires when the user moves the mouse pointer outside the boundaries of the object.
+     * @param ev The mouse event.
+     */
+    mouseout?: (ev: MouseEvent) => any;
+    /**
+     * Fires when the user moves the mouse pointer into the object.
+     * @param ev The mouse event.
+     */
+    mouseover?: (ev: MouseEvent) => any;
+    /**
+     * Fires when the user releases a mouse button while the mouse is over the object.
+     * @param ev The mouse event.
+     */
+    mouseup?: (ev: MouseEvent) => any;
+    /**
+     * Occurs when playback is paused.
+     * @param ev The event.
+     */
+    pause?: (ev: Event) => any;
+    /**
+     * Occurs when the play method is requested.
+     * @param ev The event.
+     */
+    play?: (ev: Event) => any;
+    /**
+     * Occurs when the audio or video has started playing.
+     * @param ev The event.
+     */
+    playing?: (ev: Event) => any;
+    pointercancel?: (ev: PointerEvent) => any;
+    pointerdown?: (ev: PointerEvent) => any;
+    pointerenter?: (ev: PointerEvent) => any;
+    pointerleave?: (ev: PointerEvent) => any;
+    pointermove?: (ev: PointerEvent) => any;
+    pointerout?: (ev: PointerEvent) => any;
+    pointerover?: (ev: PointerEvent) => any;
+    pointerup?: (ev: PointerEvent) => any;
+    /**
+     * Occurs to indicate progress while downloading media data.
+     * @param ev The event.
+     */
+    progress?: (ev: ProgressEvent) => any;
+    /**
+     * Occurs when the playback rate is increased or decreased.
+     * @param ev The event.
+     */
+    ratechange?: (ev: Event) => any;
+    /**
+     * Fires when the user resets a form.
+     * @param ev The event.
+     */
+    reset?: (ev: Event) => any;
+    /**
+     * Fires when the user repositions the scroll box in the scroll bar on the object.
+     * @param ev The event.
+     */
+    scroll?: (ev: Event) => any;
+    securitypolicyviolation?: (ev: SecurityPolicyViolationEvent) => any;
+    /**
+     * Occurs when the seek operation ends.
+     * @param ev The event.
+     */
+    seeked?: (ev: Event) => any;
+    /**
+     * Occurs when the current playback position is moved.
+     * @param ev The event.
+     */
+    seeking?: (ev: Event) => any;
+    /**
+     * Fires when the current selection changes.
+     * @param ev The event.
+     */
+    select?: (ev: Event) => any;
+    selectionchange?: (ev: Event) => any;
+    selectstart?: (ev: Event) => any;
+    /**
+     * Occurs when the download has stopped.
+     * @param ev The event.
+     */
+    stalled?: (ev: Event) => any;
+    submit?: (ev: Event) => any;
+    /**
+     * Occurs if the load operation has been intentionally halted.
+     * @param ev The event.
+     */
+    suspend?: (ev: Event) => any;
+    /**
+     * Occurs to indicate the current playback position.
+     * @param ev The event.
+     */
+    timeupdate?: (ev: Event) => any;
+    toggle?: (ev: Event) => any;
+    ontouchcancel?: (ev: TouchEvent) => any;
+    ontouchend?: (ev: TouchEvent) => any;
+    ontouchmove?: (ev: TouchEvent) => any;
+    ontouchstart?: (ev: TouchEvent) => any;
+    transitioncancel?: (ev: TransitionEvent) => any;
+    transitionend?: (ev: TransitionEvent) => any;
+    transitionrun?: (ev: TransitionEvent) => any;
+    transitionstart?: (ev: TransitionEvent) => any;
+    /**
+     * Occurs when the volume is changed, or playback is muted or unmuted.
+     * @param ev The event.
+     */
+    volumechange?: (ev: Event) => any;
+    /**
+     * Occurs when playback stops because the next frame of a video resource is not available.
+     * @param ev The event.
+     */
+    waiting?: (ev: Event) => any;
+    wheel?: (ev: WheelEvent) => any;
+    sizechange?: (ev: Event) => void;
+    create?: (ev: Event) => void;
+}

package/lib/dom_events.js

@@ -0,0 +1,14 @@
+"use strict";
+/**
+*  ___  ___ __
+*  \  \/  /  / _
+*   \    /  /_| |_
+*   /    \____   _|
+*  /__/\__\   |_|
+*
+* @file dom_events.ts
+* @author Etienne Cochard
+* @copyright (c) 2022 R-libre ingenierie, all rights reserved.
+*
+**/
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/drag_manager.js

@@ -1,3 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dragManager = void 0;
 const x_drag_cb = Symbol('x-drag-cb');
 /**
  *
@@ -115,4 +118,4 @@ class DragManager {
         }
     }
 }
-export const dragManager = new DragManager();
+exports.dragManager = new DragManager();