dany/antos-frontend
1
0
Fork 0
mirror of https://github.com/lxsang/antos-frontend.git synced 2024-12-26 17:38:20 +01:00
Code Issues 1 Actions Projects Releases Wiki Activity

safer way to attach element to data via getter

Browse Source
This commit is contained in:
DanyLE 2023-02-17 10:57:04 +01:00 committed by Dany LE
parent d72a4c954b
commit 0d8daa36e8
6 changed files with 86 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
d.ts/antos.d.ts vendored
View File

@ -3916,6 +3916,17 @@ declare namespace OS {
*/ */
set aid(v: string | number); set aid(v: string | number);
get aid(): 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<any>): void;
/** /**
* Implementation from HTMLElement interface, * Implementation from HTMLElement interface,
* this function mount the current tag hierarchy * this function mount the current tag hierarchy
@ -5827,10 +5838,11 @@ declare namespace OS {
/** /**
* Data placeholder for a collection of cell data * Data placeholder for a collection of cell data
* *
* @private
* @type {GenericObject<any>[]} * @type {GenericObject<any>[]}
* @memberof GridRowTag * @memberof GridRowTag
*/ */
data: GenericObject<any>[]; private _data;
/** /**
* placeholder for the row select event callback * placeholder for the row select event callback
* *
@ -5859,6 +5871,13 @@ declare namespace OS {
*/ */
set selected(v: boolean); set selected(v: boolean);
get selected(): boolean; get selected(): boolean;
/**
* setter: set row data
*
* getter: get row data
*/
set data(v: GenericObject<any>[]);
get data(): GenericObject<any>[];
/** /**
* Mount the tag, do nothing * Mount the tag, do nothing
* *

24
src/core/tags/GridViewTag.ts
View File

@ -35,10 +35,11 @@ namespace OS {
/** /**
* Data placeholder for a collection of cell data * Data placeholder for a collection of cell data
* *
* @private
* @type {GenericObject<any>[]} * @type {GenericObject<any>[]}
* @memberof GridRowTag * @memberof GridRowTag
*/ */
data: GenericObject<any>[]; private _data: GenericObject<any>[];
/** /**
* placeholder for the row select event callback * placeholder for the row select event callback
@ -89,6 +90,21 @@ namespace OS {
return this.hasattr("selected"); return this.hasattr("selected");
} }
/**
* setter: set row data
*
* getter: get row data
*/
set data(v: GenericObject<any>[]) {
this._data = v;
if(v)
{
this.attach(v);
}
}
get data(): GenericObject<any>[] {
return this._data;
}
/** /**
* Mount the tag, do nothing * Mount the tag, do nothing
* *
@ -220,6 +236,7 @@ namespace OS {
set data(v: GenericObject<any>) { set data(v: GenericObject<any>) {
if (!v) return; if (!v) return;
this._data = v; this._data = v;
this.attach(v);
this.ondatachange(); this.ondatachange();
if (!v.selected) { if (!v.selected) {
return; return;
@ -675,7 +692,6 @@ namespace OS {
)[0] as GridCellPrototype; )[0] as GridCellPrototype;
element.uify(this.observable); element.uify(this.observable);
element.data = item; element.data = item;
item.domel = element;
element.oncellselect = (e) => { element.oncellselect = (e) => {
if (element.data.sort) { if (element.data.sort) {
this.sort(element.data, element.data.sort); this.sort(element.data, element.data.sort);
@ -769,11 +785,9 @@ namespace OS {
for (let i = 0; i < nmin; i++) { for (let i = 0; i < nmin; i++) {
const rowel = (this.refs.grid.children[i] as GridRowTag); const rowel = (this.refs.grid.children[i] as GridRowTag);
rowel.data = rows[i]; rowel.data = rows[i];
rowel.data.domel = rowel;
for (let celi = 0; celi < rowel.children.length; celi++) { for (let celi = 0; celi < rowel.children.length; celi++) {
const cel = (rowel.children[celi] as GridCellPrototype); const cel = (rowel.children[celi] as GridCellPrototype);
cel.data = rows[i][celi]; cel.data = rows[i][celi];
cel.data.domel = cel;
} }
} }
// remove existing remaining rows // remove existing remaining rows
@ -917,7 +931,6 @@ namespace OS {
const el = rowel[0] as GridRowTag; const el = rowel[0] as GridRowTag;
rowel[0].uify(this.observable); rowel[0].uify(this.observable);
el.data = row; el.data = row;
row.domel = rowel[0];
for (let cell of row) { for (let cell of row) {
let tag = this.cellitem; let tag = this.cellitem;
@ -925,7 +938,6 @@ namespace OS {
({ tag } = cell); ({ tag } = cell);
} }
const el = $(`<${tag}>`).appendTo(rowel); const el = $(`<${tag}>`).appendTo(rowel);
cell.domel = el[0];
const element = el[0] as GridCellPrototype; const element = el[0] as GridCellPrototype;
element.uify(this.observable); element.uify(this.observable);
element.oncellselect = (e) => this.cellselect(e, false); element.oncellselect = (e) => this.cellselect(e, false);

5
src/core/tags/ListViewTag.ts
View File

@ -238,6 +238,10 @@ namespace OS {
*/ */
set data(v: GenericObject<any>) { set data(v: GenericObject<any>) {
this._data = v; this._data = v;
if(v)
{
this.attach(v);
}
this.ondatachange(); this.ondatachange();
} }
get data(): GenericObject<any> { get data(): GenericObject<any> {
@ -973,7 +977,6 @@ namespace OS {
return this.iclose(e); return this.iclose(e);
}; };
element.data = item; element.data = item;
item.domel = el[0];
return element; return element;
} }

2
src/core/tags/TreeViewTag.ts
View File

@ -182,7 +182,7 @@ namespace OS {
this.treepath = v.path; this.treepath = v.path;
} }
this.selected = v.selected; this.selected = v.selected;
v.domel = this; this.attach(v);
this.ondatachange(); this.ondatachange();
} }
get data(): TreeViewDataType { get data(): TreeViewDataType {

60
src/core/tags/tag.ts
View File

@ -66,7 +66,7 @@ interface HTMLElement {
* *
* @meberof HTMLElement * @meberof HTMLElement
*/ */
enable_drag():void; enable_drag(): void;
/** /**
* Perform DOM generation ([[afxml]]) then mount ([[sync]]) all the * Perform DOM generation ([[afxml]]) then mount ([[sync]]) all the
@ -180,7 +180,7 @@ namespace OS {
* @type {number|string} * @type {number|string}
* @memberof TagLayoutType * @memberof TagLayoutType
*/ */
width?: number|string; width?: number | string;
/** /**
** `data-height` of the element, not to be confused with ** `data-height` of the element, not to be confused with
@ -189,7 +189,7 @@ namespace OS {
* @type {number|string} * @type {number|string}
* @memberof TagLayoutType * @memberof TagLayoutType
*/ */
height?: number|string; height?: number | string;
} }
/** /**
@ -394,6 +394,25 @@ namespace OS {
return $(this).attr("data-id"); 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<any>): void {
const self = this;
Object.defineProperty(data, 'domel', {
get: function () { return self },
enumerable: false,
configurable: true
})
}
/** /**
* Implementation from HTMLElement interface, * Implementation from HTMLElement interface,
* this function mount the current tag hierarchy * this function mount the current tag hierarchy
@ -514,7 +533,7 @@ namespace OS {
* @protected * @protected
* @memberof AFXTag * @memberof AFXTag
*/ */
protected calibrate(): void {} protected calibrate(): void { }
/** /**
* This function parses the input layout object * This function parses the input layout object
@ -614,8 +633,7 @@ namespace OS {
} }
} }
HTMLElement.prototype.enable_drag = function() HTMLElement.prototype.enable_drag = function () {
{
$(this) $(this)
.on("pointerdown", (evt: JQuery.MouseEventBase) => { .on("pointerdown", (evt: JQuery.MouseEventBase) => {
const offset = $(this).offset(); const offset = $(this).offset();
@ -623,12 +641,14 @@ namespace OS {
offset.left = evt.clientX - offset.left; offset.left = evt.clientX - offset.left;
const mouse_move = ( const mouse_move = (
e: JQuery.MouseEventBase e: JQuery.MouseEventBase
) => { ) => {
const custom_event = new CustomEvent('dragging', { detail:{ const custom_event = new CustomEvent('dragging', {
origin: evt, detail: {
current: e, origin: evt,
offset: offset current: e,
}}); offset: offset
}
});
this.dispatchEvent(custom_event); this.dispatchEvent(custom_event);
}; };
@ -636,11 +656,13 @@ namespace OS {
$(window).off("pointermove", mouse_move); $(window).off("pointermove", mouse_move);
$(window).off("pointerup", mouse_up); $(window).off("pointerup", mouse_up);
// trigger the drop event // trigger the drop event
const custom_event = new CustomEvent('drop', { detail:{ const custom_event = new CustomEvent('drop', {
origin: evt, detail: {
current: e, origin: evt,
offset: offset current: e,
}}); offset: offset
}
});
this.dispatchEvent(custom_event); this.dispatchEvent(custom_event);
}; };
$(window).on("pointermove", mouse_move); $(window).on("pointermove", mouse_move);
@ -652,7 +674,7 @@ namespace OS {
$(this) $(this)
.children() .children()
.each(function () { .each(function () {
if(this.update) if (this.update)
return this.update(d); return this.update(d);
}); });
}; };
@ -704,7 +726,7 @@ namespace OS {
*/ */
export function define<T extends AFXTag>( export function define<T extends AFXTag>(
name: string, name: string,
cls: { new (): T } cls: { new(): T }
): void { ): void {
try { try {
customElements.define(name, cls); customElements.define(name, cls);

1
src/themes/system/afx-calendar-view.css
View File

@ -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 afx-calendar-view afx-grid-view afx-grid-row:nth-child(even) afx-grid-cell
{ {
background-color: transparent; background-color: transparent;