/ittf/site/docs/t/_js/widgets/treeNode.js.ittf (primary)
edit
1 $group
2 #
3 # dependencies
4 # . g/js/wz/core.js.ittf
5 # . g/js/wz/contextMenu.js.ittf
6 # params
7 # { item
8 # string name
9 # boolean isFolder
10 # boolean expanded
11 # date loadedAt
12 # [ children
13 # { treeView
14 # func emit
15 # func populate
16 # func handleContextMenu
17 # func rename
18 class TreeNode
19 ctor
20 param item
21 param treeView
22 set this.item = item
23 set this.treeView = treeView
24 set this.parent = null
25 set this.rendered = false
26 set this.children = []
27 if item.children && item.children.length > 0
28 foreach child in item.children
29 _ this.addItem
30 @ child
31 m getRoot
32 return this.parent ? this.parent.getRoot() : this
33 m getTreeview
34 return this.getRoot().treeView
35 m addItem
36 param item
37 var node = new TreeNode(item)
38 set node.parent = this
39 _ this.children.push
40 @ node
41 if this.rendered
42 var childLeaf = node.render()
43 if !this.childrenEl
44 set this.childrenEl = document.createElement('div')
45 _ this.childrenEl.setAttribute('class', 'tree-child-leaves')
46 _ this.el.appendChild(this.childrenEl)
47 _ this.childrenEl.appendChild(childLeaf)
48 return node
49 m replace
50 param populatedItem
51 # populatedItem is the same object of item (the parent has not been changed)
52 set this.item = populatedItem
53 set this.rendered = false
54 foreach child in populatedItem.children
55 _ this.addItem
56 @ child
57 var oldEl = this.el
58 var newEl
59 _ this.render
60 # log 'replace', newEl, this.el
61 _ oldEl.parentNode.replaceChild(newEl, oldEl)
62 m render
63 set this.rendered = true
64 var item = this.item
65 set this.el = document.createElement('div')
66 _ this.el.setAttribute('class', 'tree-node')
67 set this.contentEl = document.createElement('div')
68 _ this.contentEl.setAttribute('class', 'tree-node-content')
69 var itemEl
70 _ this.getItemEl
71 @ item
72 _ this.contentEl.appendChild(itemEl)
73 _ this.el.appendChild(this.contentEl)
74 if this.children.length > 0
75 set this.childrenEl = document.createElement('div')
76 _ this.childrenEl.setAttribute('class', 'tree-child-leaves')
77 foreach child in this.children
78 var childLeaf = child.render()
79 _ this.childrenEl.appendChild(childLeaf)
80 if !item.expanded
81 _ this.childrenEl.classList.add('hidden')
82 _ this.el.appendChild(this.childrenEl)
83 var clickThis
84 =>
85 param event
86 log 'clickThis', 'expanded', this.item.expanded, 'needs populate', this.children.length == 0 && !this.item.loadedAt && this.item.isFolder
87 var selectThis
88 =>
89 if this.item.isFolder
90 if this.item.expanded
91 _ this.collapse(this.childrenEl)
92 else
93 _ this.expand(this.childrenEl)
94 else
95 if this.getTreeview().selectedItemEl
96 _ wz.removeClass
97 @ this.getTreeview().selectedItemEl
98 @ 'selected'
99 _ wz.addClass
100 @ itemEl
101 @ 'selected'
102 set this.getTreeview().selectedItemEl = itemEl
103 _ this.getTreeview().selectTreeNode
104 @ this
105 if this.children.length == 0 && !this.item.loadedAt && this.item.isFolder
106 _ this.getTreeview().populate
107 @ this
108 _ selectThis
109 _ wz.click
110 @ this.contentEl
111 @ clickThis
112 var contextmenu
113 =>
114 param event
115 _ wz.addClass
116 @ this.contentEl
117 @ 'tree-node-context-menu-on'
118 _ this.getTreeview().handleContextMenu
119 {
120 @ target event
121 @ treeNode this
122 @ data this.item
123 _ wz.contextmenu
124 @ this.contentEl
125 @ contextmenu
126 return this.el
127 m expand
128 param skipEmit
129 _ svg['folder-opened']
130 @ this.svg
131 log 'expand', this.children.length
132 if this.children.length > 0
133 var childrenEl = this.el.querySelector('.tree-child-leaves')
134 _ childrenEl.classList.remove('hidden')
135 set this.item.expanded = true
136 if skipEmit
137 return
138 _ this.getTreeview().emit
139 @ 'expand'
140 {
141 @ treeNode this
142 m collapse
143 param skipEmit
144 _ svg['folder-closed']
145 @ this.svg
146 log 'collapse', this.children.length
147 if this.children.length > 0
148 var childrenEl = this.el.querySelector('.tree-child-leaves')
149 _ childrenEl.classList.add('hidden')
150 set this.item.expanded = false
151 if skipEmit
152 return
153 _ this.getTreeview().emit
154 @ 'collapse'
155 {
156 @ treeNode this
157 m renameStart
158 log 'renameStart', this
159 if !this.input
160 set this.input = document.createElement('input')
161 _ this.input.setAttribute('style', 'margin: 1px 4px;')
162 _ wz.value
163 @ this.input
164 @ this.item.name
165 _ this.input.setSelectionRange(0, this.input.value.length)
166 _ this.text.parentNode.replaceChild
167 @ this.input
168 @ this.text
169 var editOnInputKeyPress
170 =>
171 param event
172 # log 'keypress', event.keyCode
173 if event.keyCode == 13
174 _ editOnDocumentClick
175 {
176 @ target null
177 var editOnDocumentClick
178 =>
179 param event
180 if event.target != this.input
181 _ wz.unkeypress
182 @ document
183 @ editOnInputKeyPress
184 _ wz.unclick
185 @ document
186 @ editOnDocumentClick
187 _ this.renameFinish
188 _ window.setTimeout
189 =>
190 _ wz.keypress
191 @ this.input
192 @ editOnInputKeyPress
193 _ wz.click
194 @ document
195 @ editOnDocumentClick
196 _ this.input.focus()
197 @ 100
198 m renameFinish
199 var newName
200 _ wz.value
201 @ this.input
202 log 'renameFinish', newName, this.item.name
203 if newName !== this.item.name
204 _ this.getTreeview().rename
205 @ this
206 @ newName
207 a_cb_throw( result )
208 _ itemUtils.rename
209 @ this.item
210 @ newName
211 set this.text.textContent = newName
212 _ this.input.parentNode.replaceChild
213 @ this.text
214 @ this.input
215 _ this.getTreeview().emit
216 @ 'select'
217 @ this
218 @ event
219 else
220 _ this.getTreeview().emit
221 @ 'select'
222 @ this
223 @ event
224 m copyCutStart
225 param oper
226 log 'copyCutStart', oper, this
227 _ wz.addClass
228 @ this.el
229 @ oper === 'copy' ? 'copying' : 'cutting'
230 m copyCutFinish
231 log 'copyCutFinish', this
232 _ wz.removeClass
233 @ this.el
234 @ 'copying'
235 _ wz.removeClass
236 @ this.el
237 @ 'cutting'
238 m remove
239 _ wz.node.remove
240 @ this
241 _ this.el.parentNode.removeChild(this.el)
242 m getItemEl
243 param item
244 var kind
245 # log 'getItemEl', item
246 if item.isFolder
247 set kind = item.expanded ? 'folder-opened' : 'folder-closed'
248 else
249 set kind = isImage(item.mime) ? 'image' : 'document'
250 var itemEl = document.createElement('div')
251 set itemEl.className = 'icon-item-group'
252 var itemTextEl = document.createElement('span')
253 set itemTextEl.className = 'item-name'
254 set itemTextEl.textContent = item.name
255 set this.svg = svg.getSvg()
256 _ itemEl.appendChild
257 _ svg[kind]
258 @ this.svg
259 _ itemEl.appendChild(itemTextEl)
260 set this.text = itemTextEl
261 return itemEl
262 var svg
263 {
264 @ 'folder-closed'
265 function
266 param svgEl
267 while svgEl.firstChild
268 _ svgEl.removeChild(svgEl.firstChild)
269 var pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path")
270 _ pathEl.setAttribute('d', "M7.25,4 L7.5,4 L7.5,3 L7,3.5 L7,2 L15,2 L15,4 L7.25,4 Z M6.75,4 L5,4 L7,2 L7,3.5 L6.5,4 L6.75,4 Z M1,4 L15,4 L15,14 L1,14 L1,4 Z M7.5,3 L7.5,4 L14,4 L14,3 L7.5,3 Z")
271 _ svgEl.appendChild(pathEl)
272 return svgEl
273 @ 'folder-opened'
274 function
275 param svgEl
276 while svgEl.firstChild
277 _ svgEl.removeChild(svgEl.firstChild)
278 var gEl = document.createElementNS("http://www.w3.org/2000/svg", "g")
279 var pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path")
280 _ pathEl.setAttribute('d', "M7.5,5 L2,5 L2,13 L7.75,13 L14,13 L14,4 L15,4 L15,14 L1,14 L1,4 L6.5,4 L5.5,5 L7.5,5 L7.5,4.5 L7.5,5 Z M14,4 L14,3 L7.5,3 L7.5,3.5 L7.5,3 L7,3.5 L7,2 L15,2 L15,4 L14,4 Z M6.5,4 L5,4 L7,2 L7,3.5 L6.5,4 Z")
281 var polyEl = document.createElementNS("http://www.w3.org/2000/svg", "polygon")
282 _ polyEl.setAttribute('points', "0 7 13 7 14 14 1 14")
283 _ gEl.appendChild(pathEl)
284 _ gEl.appendChild(polyEl)
285 _ svgEl.appendChild(gEl)
286 return svgEl
287 @ 'document'
288 function
289 param svgEl
290 while svgEl.firstChild
291 _ svgEl.removeChild(svgEl.firstChild)
292 var pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path")
293 _ pathEl.setAttribute('d', "M3,2 L13,2 L13,14 L3,14 L3,2 Z M9,2 L13,6 L13,2 L9,2 Z M9,6 L9,2 L8,2 L8,7 L13,7 L13,6 L9,6 Z")
294 _ svgEl.appendChild(pathEl)
295 return svgEl
296 @ 'image'
297 function
298 param svgEl
299 while svgEl.firstChild
300 _ svgEl.removeChild(svgEl.firstChild)
301 var gEl = document.createElementNS("http://www.w3.org/2000/svg", "g")
302 var circleEl = document.createElementNS("http://www.w3.org/2000/svg", "circle")
303 _ circleEl.setAttribute('cx', "5")
304 _ circleEl.setAttribute('cy', "5")
305 _ circleEl.setAttribute('r', "1")
306 var polyEl = document.createElementNS("http://www.w3.org/2000/svg", "polygon")
307 _ polyEl.setAttribute('points', "5.71428571 8.41176471 8 11.2352941 10.8571429 7 14 13 2 13")
308 var pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path")
309 _ pathEl.setAttribute('d', "M3,3 L3,13 L13,13 L13,3 L3,3 Z M3,2 L13,2 C13.5522847,2 14,2.44771525 14,3 L14,13 C14,13.5522847 13.5522847,14 13,14 L3,14 C2.44771525,14 2,13.5522847 2,13 L2,3 C2,2.44771525 2.44771525,2 3,2 Z")
310 _ gEl.appendChild(circleEl)
311 _ gEl.appendChild(polyEl)
312 _ gEl.appendChild(pathEl)
313 _ svgEl.appendChild(gEl)
314 return svgEl
315 @ getSvg
316 function
317 var svgEl = document.createElementNS("http://www.w3.org/2000/svg", "svg")
318 _ svgEl.setAttribute('class', 'fl-icon')
319 _ svgEl.setAttribute('viewBox', '0 0 16 16')
320 return svgEl
321 function isImage
322 param mime
323 return /\.(bmp|jpg|jpeg|png|gif|svg)$/.test(mime)