1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, you can obtain one at http://mozilla.org/MPL/2.0/. */
/* globals PROTO_TREE_VIEW */
// FIXME: Wrap the whole method around the document load listener to prevent the
// undefined state of the "tree-view-table-row" element. This is due to the .mjs
// nature of the class file.
window.addEventListener("load", () => {
class TestCardRow extends customElements.get("tree-view-table-row") {
static ROW_HEIGHT = 30;
static COLUMNS = [
{
id: "testCol",
},
];
connectedCallback() {
if (this.hasConnected) {
return;
}
super.connectedCallback();
this.cell = this.appendChild(document.createElement("td"));
let container = this.cell.appendChild(document.createElement("div"));
this.threader = container.appendChild(document.createElement("button"));
this.threader.textContent = "↳";
this.threader.classList.add("tree-button-thread");
this.twisty = container.appendChild(document.createElement("div"));
this.twisty.textContent = "v";
this.twisty.classList.add("twisty");
this.d2 = container.appendChild(document.createElement("div"));
this.d2.classList.add("d2");
}
get index() {
return super.index;
}
set index(index) {
super.index = index;
this.id = this.view.getRowProperties(index);
this.classList.remove("level0", "level1", "level2");
this.classList.add(`level${this.view.getLevel(index)}`);
this.d2.textContent = this.view.getCellText(index, { id: "text" });
}
}
customElements.define("test-row", TestCardRow, { extends: "tr" });
class TreeItem {
_children = [];
constructor(id, text, open = false, level = 0) {
this._id = id;
this._text = text;
this._open = open;
this._level = level;
}
getText() {
return this._text;
}
get open() {
return this._open;
}
get level() {
return this._level;
}
get children() {
return this._children;
}
getProperties() {
return this._id;
}
addChild(treeItem) {
treeItem._parent = this;
treeItem._level = this._level + 1;
this.children.push(treeItem);
}
}
let testView = new PROTO_TREE_VIEW();
testView._rowMap.push(new TreeItem("row-1", "Item with no children"));
testView._rowMap.push(new TreeItem("row-2", "Item with children"));
testView._rowMap.push(new TreeItem("row-3", "Item with grandchildren"));
testView._rowMap[1].addChild(new TreeItem("row-2-1", "First child"));
testView._rowMap[1].addChild(new TreeItem("row-2-2", "Second child"));
testView._rowMap[2].addChild(new TreeItem("row-3-1", "First child"));
testView._rowMap[2].children[0].addChild(
new TreeItem("row-3-1-1", "First grandchild")
);
testView._rowMap[2].children[0].addChild(
new TreeItem("row-3-1-2", "Second grandchild")
);
testView.toggleOpenState(1);
testView.toggleOpenState(4);
testView.toggleOpenState(5);
let tree = document.getElementById("testTree");
tree.table.setBodyID("testBody");
tree.setAttribute("rows", "test-row");
tree.table.setColumns(TestCardRow.COLUMNS);
tree.addEventListener("select", () => {
console.log("select event, selected indices:", tree.selectedIndices);
});
tree.view = testView;
});
|
