dany/antos-frontend
1
0
Fork 0
mirror of https://github.com/lxsang/antos-frontend.git synced 2024-09-29 03:16:40 +02: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
parent 47e8cfca41
commit d1f953caf7
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);
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,
* 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<any>[]}
* @memberof GridRowTag
*/
data: GenericObject<any>[];
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<any>[]);
get data(): GenericObject<any>[];
/**
* 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
*
* @private
* @type {GenericObject<any>[]}
* @memberof GridRowTag
*/
data: GenericObject<any>[];
private _data: GenericObject<any>[];
/**
* 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<any>[]) {
this._data = v;
if(v)
{
this.attach(v);
}
}
get data(): GenericObject<any>[] {
return this._data;
}
/**
* Mount the tag, do nothing
*
@ -220,6 +236,7 @@ namespace OS {
set data(v: GenericObject<any>) {
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);

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

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

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

@ -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 {

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

@ -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<any>): 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,11 +656,13 @@ 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);
@ -652,7 +674,7 @@ namespace OS {
$(this)
.children()
.each(function () {
if(this.update)
if (this.update)
return this.update(d);
});
};
@ -704,7 +726,7 @@ namespace OS {
*/
export function define<T extends AFXTag>(
name: string,
cls: { new (): T }
cls: { new(): T }
): void {
try {
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
{
background-color: transparent;