From 0d8daa36e85860a6ceb4405b690c9e79a7d054e1 Mon Sep 17 00:00:00 2001 From: DanyLE Date: Fri, 17 Feb 2023 10:57:04 +0100 Subject: [PATCH] safer way to attach element to data via getter --- d.ts/antos.d.ts | 21 ++++++++- src/core/tags/GridViewTag.ts | 24 +++++++--- src/core/tags/ListViewTag.ts | 5 +- src/core/tags/TreeViewTag.ts | 2 +- src/core/tags/tag.ts | 62 +++++++++++++++++-------- src/themes/system/afx-calendar-view.css | 1 + 6 files changed, 86 insertions(+), 29 deletions(-) diff --git a/d.ts/antos.d.ts b/d.ts/antos.d.ts index 10334e8..f70f436 100644 --- a/d.ts/antos.d.ts +++ b/d.ts/antos.d.ts @@ -3916,6 +3916,17 @@ declare namespace OS { */ set aid(v: string | number); get aid(): string | number; + /** + * Attach a data to this tag + * + * This function will define a getter `domel` + * in the attached data, this getter refers to the + * current tag + * + * @returns {void} + * @memberof AFXTag + */ + attach(data: GenericObject): void; /** * Implementation from HTMLElement interface, * this function mount the current tag hierarchy @@ -5827,10 +5838,11 @@ declare namespace OS { /** * Data placeholder for a collection of cell data * + * @private * @type {GenericObject[]} * @memberof GridRowTag */ - data: GenericObject[]; + private _data; /** * placeholder for the row select event callback * @@ -5859,6 +5871,13 @@ declare namespace OS { */ set selected(v: boolean); get selected(): boolean; + /** + * setter: set row data + * + * getter: get row data + */ + set data(v: GenericObject[]); + get data(): GenericObject[]; /** * Mount the tag, do nothing * diff --git a/src/core/tags/GridViewTag.ts b/src/core/tags/GridViewTag.ts index 84fca7a..16ffb92 100644 --- a/src/core/tags/GridViewTag.ts +++ b/src/core/tags/GridViewTag.ts @@ -35,10 +35,11 @@ namespace OS { /** * Data placeholder for a collection of cell data * + * @private * @type {GenericObject[]} * @memberof GridRowTag */ - data: GenericObject[]; + private _data: GenericObject[]; /** * placeholder for the row select event callback @@ -89,6 +90,21 @@ namespace OS { return this.hasattr("selected"); } + /** + * setter: set row data + * + * getter: get row data + */ + set data(v: GenericObject[]) { + this._data = v; + if(v) + { + this.attach(v); + } + } + get data(): GenericObject[] { + return this._data; + } /** * Mount the tag, do nothing * @@ -220,6 +236,7 @@ namespace OS { set data(v: GenericObject) { if (!v) return; this._data = v; + this.attach(v); this.ondatachange(); if (!v.selected) { return; @@ -675,7 +692,6 @@ namespace OS { )[0] as GridCellPrototype; element.uify(this.observable); element.data = item; - item.domel = element; element.oncellselect = (e) => { if (element.data.sort) { this.sort(element.data, element.data.sort); @@ -769,11 +785,9 @@ namespace OS { for (let i = 0; i < nmin; i++) { const rowel = (this.refs.grid.children[i] as GridRowTag); rowel.data = rows[i]; - rowel.data.domel = rowel; for (let celi = 0; celi < rowel.children.length; celi++) { const cel = (rowel.children[celi] as GridCellPrototype); cel.data = rows[i][celi]; - cel.data.domel = cel; } } // remove existing remaining rows @@ -917,7 +931,6 @@ namespace OS { const el = rowel[0] as GridRowTag; rowel[0].uify(this.observable); el.data = row; - row.domel = rowel[0]; for (let cell of row) { let tag = this.cellitem; @@ -925,7 +938,6 @@ namespace OS { ({ tag } = cell); } const el = $(`<${tag}>`).appendTo(rowel); - cell.domel = el[0]; const element = el[0] as GridCellPrototype; element.uify(this.observable); element.oncellselect = (e) => this.cellselect(e, false); diff --git a/src/core/tags/ListViewTag.ts b/src/core/tags/ListViewTag.ts index be576a5..b47e083 100644 --- a/src/core/tags/ListViewTag.ts +++ b/src/core/tags/ListViewTag.ts @@ -238,6 +238,10 @@ namespace OS { */ set data(v: GenericObject) { this._data = v; + if(v) + { + this.attach(v); + } this.ondatachange(); } get data(): GenericObject { @@ -973,7 +977,6 @@ namespace OS { return this.iclose(e); }; element.data = item; - item.domel = el[0]; return element; } diff --git a/src/core/tags/TreeViewTag.ts b/src/core/tags/TreeViewTag.ts index 43d3083..7479e26 100644 --- a/src/core/tags/TreeViewTag.ts +++ b/src/core/tags/TreeViewTag.ts @@ -182,7 +182,7 @@ namespace OS { this.treepath = v.path; } this.selected = v.selected; - v.domel = this; + this.attach(v); this.ondatachange(); } get data(): TreeViewDataType { diff --git a/src/core/tags/tag.ts b/src/core/tags/tag.ts index 81fdcc2..78a5eb8 100644 --- a/src/core/tags/tag.ts +++ b/src/core/tags/tag.ts @@ -66,7 +66,7 @@ interface HTMLElement { * * @meberof HTMLElement */ - enable_drag():void; + enable_drag(): void; /** * Perform DOM generation ([[afxml]]) then mount ([[sync]]) all the @@ -180,7 +180,7 @@ namespace OS { * @type {number|string} * @memberof TagLayoutType */ - width?: number|string; + width?: number | string; /** ** `data-height` of the element, not to be confused with @@ -189,7 +189,7 @@ namespace OS { * @type {number|string} * @memberof TagLayoutType */ - height?: number|string; + height?: number | string; } /** @@ -394,6 +394,25 @@ namespace OS { return $(this).attr("data-id"); } + /** + * Attach a data to this tag + * + * This function will define a getter `domel` + * in the attached data, this getter refers to the + * current tag + * + * @returns {void} + * @memberof AFXTag + */ + attach(data: GenericObject): void { + const self = this; + Object.defineProperty(data, 'domel', { + get: function () { return self }, + enumerable: false, + configurable: true + }) + } + /** * Implementation from HTMLElement interface, * this function mount the current tag hierarchy @@ -514,7 +533,7 @@ namespace OS { * @protected * @memberof AFXTag */ - protected calibrate(): void {} + protected calibrate(): void { } /** * This function parses the input layout object @@ -614,8 +633,7 @@ namespace OS { } } - HTMLElement.prototype.enable_drag = function() - { + HTMLElement.prototype.enable_drag = function () { $(this) .on("pointerdown", (evt: JQuery.MouseEventBase) => { const offset = $(this).offset(); @@ -623,12 +641,14 @@ namespace OS { offset.left = evt.clientX - offset.left; const mouse_move = ( e: JQuery.MouseEventBase - ) => { - const custom_event = new CustomEvent('dragging', { detail:{ - origin: evt, - current: e, - offset: offset - }}); + ) => { + const custom_event = new CustomEvent('dragging', { + detail: { + origin: evt, + current: e, + offset: offset + } + }); this.dispatchEvent(custom_event); }; @@ -636,23 +656,25 @@ namespace OS { $(window).off("pointermove", mouse_move); $(window).off("pointerup", mouse_up); // trigger the drop event - const custom_event = new CustomEvent('drop', { detail:{ - origin: evt, - current: e, - offset: offset - }}); + const custom_event = new CustomEvent('drop', { + detail: { + origin: evt, + current: e, + offset: offset + } + }); this.dispatchEvent(custom_event); }; $(window).on("pointermove", mouse_move); $(window).on("pointerup", mouse_up); }); - } + } HTMLElement.prototype.update = function (d): void { $(this) .children() .each(function () { - if(this.update) + if (this.update) return this.update(d); }); }; @@ -704,7 +726,7 @@ namespace OS { */ export function define( name: string, - cls: { new (): T } + cls: { new(): T } ): void { try { customElements.define(name, cls); diff --git a/src/themes/system/afx-calendar-view.css b/src/themes/system/afx-calendar-view.css index 30b90dc..d747b7c 100644 --- a/src/themes/system/afx-calendar-view.css +++ b/src/themes/system/afx-calendar-view.css @@ -1,3 +1,4 @@ +afx-calendar-view afx-grid-view afx-grid-row:nth-child(odd) afx-grid-cell, afx-calendar-view afx-grid-view afx-grid-row:nth-child(even) afx-grid-cell { background-color: transparent;