Skip to content

Commit 4bdc46d

Browse files
wasfi2wasfi2
committed
provided a new implementation which is more DOM based
1 parent 99b3b5e commit 4bdc46d

File tree

1 file changed

+68
-58
lines changed
  • frameworks/keyed/targetjs/src

1 file changed

+68
-58
lines changed

‎frameworks/keyed/targetjs/src/main.js

Lines changed: 68 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,120 @@
1-
import { App, TModel, $Dom } from "targetj";
1+
import { App, TModel, $Dom, Template } from "targetj";
22
import { buildData } from './data';
33

44
App(new TModel("benchmark", {
55
canHaveDom: false,
66
runButton() {
77
return new TModel('run', {
8-
onClickEvent() {
8+
onClick() {
99
const rows = this.getParent().findChild('rows');
1010
rows.removeAll();
11-
rows.activateTarget('createRows', 1000);
11+
rows.activateTarget('buildData', 1000);
12+
rows.activateTarget('createRows');
1213
}
1314
});
1415
},
1516
runAlotButton() {
1617
return new TModel('runlots', {
17-
onClickEvent() {
18+
onClick() {
1819
const rows = this.getParent().findChild('rows');
1920
rows.removeAll();
20-
rows.activateTarget('createRows', 10000);
21+
rows.activateTarget('buildData', 10000);
22+
rows.activateTarget('createRows');
2123
}
2224
});
2325
},
2426
addButton() {
2527
return new TModel('add', {
26-
onClickEvent() {
28+
onClick() {
2729
const rows = this.getParent().findChild('rows');
28-
rows.activateTarget('createRows', 1000);
30+
rows.activateTarget('buildData', 1000);
31+
rows.activateTarget('createRows');
2932
}
3033
});
3134
},
3235
updateButton() {
3336
return new TModel('update', {
34-
onClickEvent() {
37+
onClick() {
3538
const rows = this.getParent().findChild('rows');
36-
const length = rows.getChildren().length;
37-
for (let i = 0; i < length; i += 10) {
38-
rows.getChild(i).activateTarget('updateContent');
39-
};
39+
rows.activateTarget('updateEvery10thRow');
4040
}
4141
});
4242
},
4343
clearButton() {
4444
return new TModel('clear', {
45-
onClickEvent() {
45+
onClick() {
4646
this.getParent().findChild('rows').removeAll();
4747
}
4848
});
4949
},
5050
swapRows() {
5151
return new TModel('swaprows', {
52-
onClickEvent() {
52+
onClick() {
5353
const rows = this.getParent().findChild('rows');
54-
const rowChildren = rows.allChildrenList;
55-
if (rowChildren.length > 998) {
56-
rows.moveChild(rowChildren[1], 998);
57-
rows.moveChild(rowChildren[998], 1);
54+
const rowCount = rows.$dom.elementCount();
55+
if (rowCount > 998) {
56+
rows.activateTarget('swap', [1, 998]);
5857
}
5958
}
6059
});
6160
},
6261
rows() {
6362
const rows = new TModel('rows', {
6463
isVisible: true,
65-
containerOverflowMode: 'always',
66-
rectTop() { return this.$dom.getBoundingClientRect().top; },
67-
absY() { return this.val('rectTop') - $Dom.getWindowScrollTop(); },
6864
domHolder: true,
69-
onDomEvent: [ 'rectTop', 'absY' ],
70-
onWindowScrollEvent: 'absY',
71-
_createRows: {
72-
parallel: true,
73-
cycles: 4,
74-
value() {
75-
buildData(this._createRows / 5).forEach(data => {
76-
this.addChild(new TModel('row', {
77-
keepEventDefault: true,
78-
baseElement: 'tr',
79-
defaultStyling: false,
80-
excludeHeight: true,
81-
height: 36,
82-
canDeleteDom: false,
83-
textOnly: false,
84-
domHolder: true,
85-
_css() { return this._css; },
86-
onClickEvent(target) {
87-
if (target?.className?.endsWith('remove')) {
88-
rows.removeChild(this);
89-
} else {
90-
rows.val('selectedRow')?.activateTarget('css', '');
91-
rows.val('selectedRow', this);
92-
this.activateTarget('css', 'danger');
93-
}
94-
},
95-
_updateContent() {
96-
this.$dom.child(1).children[0].textContent += ' !!!';
97-
},
98-
html: `<td class="col-md-1">${data.id}</td>
99-
<td class="col-md-4"><a>${data.label}</a></td>
100-
<td class="col-md-1"><a><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
101-
<td class="col-md-6"></td>`
102-
}));
103-
});
65+
rowTemplate() {
66+
const template = document.createElement('template');
67+
template.innerHTML = `
68+
<tr>
69+
<td class="col-md-1 id-cell"></td>
70+
<td class="col-md-4 label-cell"><a></a></td>
71+
<td class="col-md-1 remove-cell"><a><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
72+
<td class="col-md-6"></td>
73+
</tr>
74+
`;
75+
return template;
76+
},
77+
_buildData() {
78+
return buildData(this._buildData);
79+
},
80+
_createRows() {
81+
const fragment = document.createDocumentFragment();
82+
this.val('buildData').forEach((data, index) => {
83+
const rowClone = this.val('rowTemplate').content.cloneNode(true);
84+
rowClone.querySelector('tr').setAttribute('data-id', `${index}`);
85+
rowClone.querySelector('.id-cell').textContent = data.id;
86+
rowClone.querySelector('.label-cell a').textContent = data.label;
87+
88+
fragment.appendChild(rowClone);
89+
});
90+
this.$dom.appendElement(fragment);
91+
},
92+
_updateEvery10thRow() {
93+
const rows = this.$dom.querySelectorAll('tr');
94+
95+
for (let i = 0; i < rows.length; i += 10) {
96+
const labelCell = rows[i].querySelector('.label-cell a');
97+
if (labelCell) {
98+
labelCell.textContent += ' !!!';
99+
}
100+
}
101+
},
102+
_swap() {
103+
const row1 = this.$dom.querySelector(`[data-id="${this._swap[0]}"]`);
104+
const row2 = this.$dom.querySelector(`[data-id="${this._swap[1]}"]`);
105+
this.$dom.swapElements(row1, row2);
106+
},
107+
onClick(target) {
108+
const rowElement = target.closest('tr');
109+
if (target?.className?.endsWith('remove')) {
110+
this.$dom.removeElement(rowElement);
111+
} else {
112+
this.val('selectedRow', rowElement);
113+
this.val('selectedRow').setAttribute('class', 'danger');
114+
this.lastVal('selectedRow')?.setAttribute('class', '');
104115
}
105-
}
116+
}
106117
});
107-
108118
return rows;
109119
},
110120
children() {

0 commit comments

Comments
 (0)