author | Giulio Cesare Solaroli <giulio.cesare@clipperz.com> | 2011-10-02 23:56:18 (UTC) |
---|---|---|
committer | Giulio Cesare Solaroli <giulio.cesare@clipperz.com> | 2011-10-02 23:56:18 (UTC) |
commit | ef68436ac04da078ffdcacd7e1f785473a303d45 (patch) (unidiff) | |
tree | c403752d66a2c4775f00affd4fa8431b29c5b68c /frontend/beta/js/YUI-extensions/tree/TreeNodeUI.js | |
parent | 597ecfbc0249d83e1b856cbd558340c01237a360 (diff) | |
download | clipperz-ef68436ac04da078ffdcacd7e1f785473a303d45.zip clipperz-ef68436ac04da078ffdcacd7e1f785473a303d45.tar.gz clipperz-ef68436ac04da078ffdcacd7e1f785473a303d45.tar.bz2 |
First version of the newly restructured repository
Diffstat (limited to 'frontend/beta/js/YUI-extensions/tree/TreeNodeUI.js') (more/less context) (ignore whitespace changes)
-rw-r--r-- | frontend/beta/js/YUI-extensions/tree/TreeNodeUI.js | 452 |
1 files changed, 452 insertions, 0 deletions
diff --git a/frontend/beta/js/YUI-extensions/tree/TreeNodeUI.js b/frontend/beta/js/YUI-extensions/tree/TreeNodeUI.js new file mode 100644 index 0000000..80927f4 --- a/dev/null +++ b/frontend/beta/js/YUI-extensions/tree/TreeNodeUI.js | |||
@@ -0,0 +1,452 @@ | |||
1 | /** | ||
2 | * The TreeNode UI implementation is separate from the | ||
3 | * tree implementation. Unless you are customizing the tree UI, | ||
4 | * you should never have to use this directly. | ||
5 | */ | ||
6 | YAHOO.ext.tree.TreeNodeUI = function(node){ | ||
7 | this.node = node; | ||
8 | this.rendered = false; | ||
9 | this.animating = false; | ||
10 | }; | ||
11 | |||
12 | YAHOO.ext.tree.TreeNodeUI.prototype = { | ||
13 | emptyIcon : Ext.BLANK_IMAGE_URL, | ||
14 | |||
15 | removeChild : function(node){ | ||
16 | if(this.rendered){ | ||
17 | this.ctNode.removeChild(node.ui.getEl()); | ||
18 | } | ||
19 | }, | ||
20 | |||
21 | beforeLoad : function(){ | ||
22 | YAHOO.util.Dom.addClass(this.elNode, 'ytree-node-loading'); | ||
23 | }, | ||
24 | |||
25 | afterLoad : function(){ | ||
26 | YAHOO.util.Dom.removeClass(this.elNode, 'ytree-node-loading'); | ||
27 | }, | ||
28 | |||
29 | onTextChange : function(node, text, oldText){ | ||
30 | if(this.rendered){ | ||
31 | this.textNode.innerHTML = text; | ||
32 | } | ||
33 | }, | ||
34 | |||
35 | onDisableChange : function(node, state){ | ||
36 | this.disabled = state; | ||
37 | if(state){ | ||
38 | YAHOO.util.Dom.addClass(this.elNode, 'ytree-node-disabled'); | ||
39 | }else{ | ||
40 | YAHOO.util.Dom.removeClass(this.elNode, 'ytree-node-disabled'); | ||
41 | } | ||
42 | }, | ||
43 | |||
44 | onSelectedChange : function(state){ | ||
45 | if(state){ | ||
46 | this.focus(); | ||
47 | YAHOO.util.Dom.addClass(this.elNode, 'ytree-selected'); | ||
48 | }else{ | ||
49 | this.blur(); | ||
50 | YAHOO.util.Dom.removeClass(this.elNode, 'ytree-selected'); | ||
51 | } | ||
52 | }, | ||
53 | |||
54 | onMove : function(tree, node, oldParent, newParent, index, refNode){ | ||
55 | this.childIndent = null; | ||
56 | if(this.rendered){ | ||
57 | var targetNode = newParent.ui.getContainer(); | ||
58 | if(!targetNode){//target not rendered | ||
59 | this.holder = document.createElement('div'); | ||
60 | this.holder.appendChild(this.wrap); | ||
61 | return; | ||
62 | } | ||
63 | var insertBefore = refNode ? refNode.ui.getEl() : null; | ||
64 | if(insertBefore){ | ||
65 | targetNode.insertBefore(this.wrap, insertBefore); | ||
66 | }else{ | ||
67 | targetNode.appendChild(this.wrap); | ||
68 | } | ||
69 | this.node.renderIndent(true); | ||
70 | } | ||
71 | }, | ||
72 | |||
73 | remove : function(){ | ||
74 | if(this.rendered){ | ||
75 | this.holder = document.createElement('div'); | ||
76 | this.holder.appendChild(this.wrap); | ||
77 | } | ||
78 | }, | ||
79 | |||
80 | fireEvent : function(){ | ||
81 | this.node.fireEvent.apply(this.node, arguments); | ||
82 | }, | ||
83 | |||
84 | initEvents : function(){ | ||
85 | this.node.on('move', this.onMove, this, true); | ||
86 | //this.node.on('hiddenchange', this.onHiddenChange, this, true); | ||
87 | |||
88 | // these were optimized out but a custom UI could use them | ||
89 | //this.node.on('remove', this.onChildRemoved, this, true); | ||
90 | //this.node.on('selectedstatechange', this.onSelectedChange, this, true); | ||
91 | //this.node.on('disabledchange', this.onDisableChange, this, true); | ||
92 | //this.node.on('textchange', this.onTextChange, this, true); | ||
93 | |||
94 | var E = YAHOO.util.Event; | ||
95 | var a = this.anchor; | ||
96 | |||
97 | var el = YAHOO.ext.Element.fly(a); | ||
98 | |||
99 | if(YAHOO.ext.util.Browser.isOpera){ // opera render bug ignores the CSS | ||
100 | el.setStyle('text-decoration', 'none'); | ||
101 | } | ||
102 | |||
103 | el.mon('click', this.onClick, this, true); | ||
104 | el.mon('dblclick', this.onDblClick, this, true); | ||
105 | el.mon('contextmenu', this.onContextMenu, this, true); | ||
106 | |||
107 | //el.on('focus', function(){ | ||
108 | // this.node.getOwnerTree().getSelectionModel().select(this.node); | ||
109 | //}, this, true); | ||
110 | |||
111 | var icon = YAHOO.ext.Element.fly(this.iconNode); | ||
112 | icon.mon('click', this.onClick, this, true); | ||
113 | icon.mon('dblclick', this.onDblClick, this, true); | ||
114 | icon.mon('contextmenu', this.onContextMenu, this, true); | ||
115 | E.on(this.ecNode, 'click', this.ecClick, this, true); | ||
116 | |||
117 | if(this.node.disabled){ | ||
118 | YAHOO.util.Dom.addClass(this.elNode, 'ytree-node-disabled'); | ||
119 | } | ||
120 | if(this.node.hidden){ | ||
121 | YAHOO.util.Dom.addClass(this.elNode, 'ytree-node-disabled'); | ||
122 | } | ||
123 | var dd = this.node.ownerTree.enableDD || this.node.ownerTree.enableDrag || this.node.ownerTree.enableDrop; | ||
124 | if(dd && (!this.node.isRoot || this.node.ownerTree.rootVisible)){ | ||
125 | YAHOO.ext.dd.Registry.register(this.elNode, { | ||
126 | node: this.node, | ||
127 | handles: [this.iconNode, this.textNode], | ||
128 | isHandle: false | ||
129 | }); | ||
130 | } | ||
131 | }, | ||
132 | |||
133 | hide : function(){ | ||
134 | if(this.rendered){ | ||
135 | this.wrap.style.display = 'none'; | ||
136 | } | ||
137 | }, | ||
138 | |||
139 | show : function(){ | ||
140 | if(this.rendered){ | ||
141 | this.wrap.style.display = ''; | ||
142 | } | ||
143 | }, | ||
144 | |||
145 | onContextMenu : function(e){ | ||
146 | e.preventDefault(); | ||
147 | this.focus(); | ||
148 | this.fireEvent('contextmenu', this.node, e); | ||
149 | }, | ||
150 | |||
151 | onClick : function(e){ | ||
152 | if(this.dropping){ | ||
153 | return; | ||
154 | } | ||
155 | if(this.fireEvent('beforeclick', this.node, e) !== false){ | ||
156 | if(!this.disabled && this.node.attributes.href){ | ||
157 | this.focus(); | ||
158 | this.fireEvent('click', this.node, e); | ||
159 | return; | ||
160 | } | ||
161 | e.preventDefault(); | ||
162 | if(this.disabled){ | ||
163 | return; | ||
164 | } | ||
165 | this.focus(); | ||
166 | this.fireEvent('click', this.node, e); | ||
167 | }else{ | ||
168 | e.stopEvent(); | ||
169 | } | ||
170 | }, | ||
171 | |||
172 | onDblClick : function(e){ | ||
173 | e.preventDefault(); | ||
174 | if(this.disabled){ | ||
175 | return; | ||
176 | } | ||
177 | if(!this.animating && this.node.hasChildNodes()){ | ||
178 | this.node.toggle(); | ||
179 | } | ||
180 | this.fireEvent('dblclick', this.node, e); | ||
181 | }, | ||
182 | |||
183 | ecClick : function(e){ | ||
184 | if(!this.animating && this.node.hasChildNodes()){ | ||
185 | this.node.toggle(); | ||
186 | } | ||
187 | }, | ||
188 | |||
189 | startDrop : function(){ | ||
190 | this.dropping = true; | ||
191 | }, | ||
192 | |||
193 | // delayed drop so the click event doesn't get fired on a drop | ||
194 | endDrop : function(){ | ||
195 | setTimeout(function(){ | ||
196 | this.dropping = false; | ||
197 | }.createDelegate(this), 50); | ||
198 | }, | ||
199 | |||
200 | expand : function(){ | ||
201 | this.updateExpandIcon(); | ||
202 | this.ctNode.style.display = ''; | ||
203 | }, | ||
204 | |||
205 | focus : function(){ | ||
206 | try{ | ||
207 | this.anchor.focus(); | ||
208 | }catch(e){} | ||
209 | }, | ||
210 | |||
211 | blur : function(){ | ||
212 | try{ | ||
213 | this.anchor.blur(); | ||
214 | }catch(e){} | ||
215 | }, | ||
216 | |||
217 | animExpand : function(callback){ | ||
218 | if(this.animating && this.anim){ | ||
219 | this.anim.stop(); | ||
220 | } | ||
221 | this.animating = true; | ||
222 | this.updateExpandIcon(); | ||
223 | var ct = this.ctNode; | ||
224 | var cs = ct.style; | ||
225 | cs.position = 'absolute'; | ||
226 | cs.visibility = 'hidden'; | ||
227 | cs.display = ''; | ||
228 | var h = ct.clientHeight; | ||
229 | cs.overflow = 'hidden'; | ||
230 | cs.height = '1px'; | ||
231 | cs.position = ''; | ||
232 | cs.visibility = ''; | ||
233 | var anim = new YAHOO.util.Anim(ct, { | ||
234 | height: {to: h} | ||
235 | }, this.node.ownerTree.duration || .25, YAHOO.util.Easing.easeOut); | ||
236 | anim.onComplete.subscribe(function(){ | ||
237 | cs.overflow = ''; | ||
238 | cs.height = ''; | ||
239 | this.animating = false; | ||
240 | this.anim = null; | ||
241 | if(typeof callback == 'function'){ | ||
242 | callback(); | ||
243 | } | ||
244 | }, this, true); | ||
245 | this.anim = anim; | ||
246 | anim.animate(); | ||
247 | }, | ||
248 | |||
249 | highlight : function(){ | ||
250 | var tree = this.node.getOwnerTree(); | ||
251 | var hlColor = tree.hlColor || 'C3DAF9'; | ||
252 | var hlBaseColor = tree.hlBaseColor || 'FFFFFF'; | ||
253 | var anim = new YAHOO.util.ColorAnim(this.wrap, { | ||
254 | backgroundColor: {from: hlColor, to: hlBaseColor} | ||
255 | }, .75, YAHOO.util.Easing.easeNone); | ||
256 | anim.onComplete.subscribe(function(){ | ||
257 | YAHOO.util.Dom.setStyle(this.wrap, 'background-color', ''); | ||
258 | }, this, true); | ||
259 | anim.animate(); | ||
260 | }, | ||
261 | |||
262 | collapse : function(){ | ||
263 | this.updateExpandIcon(); | ||
264 | this.ctNode.style.display = 'none'; | ||
265 | }, | ||
266 | |||
267 | animCollapse : function(callback){ | ||
268 | if(this.animating && this.anim){ | ||
269 | this.anim.stop(); | ||
270 | } | ||
271 | this.animating = true; | ||
272 | this.updateExpandIcon(); | ||
273 | var ct = this.ctNode; | ||
274 | var cs = ct.style; | ||
275 | cs.height = ct.offsetHeight +'px'; | ||
276 | cs.overflow = 'hidden'; | ||
277 | var anim = new YAHOO.util.Anim(ct, { | ||
278 | height: {to: 1} | ||
279 | }, this.node.ownerTree.duration || .25, YAHOO.util.Easing.easeOut); | ||
280 | anim.onComplete.subscribe(function(){ | ||
281 | cs.display = 'none'; | ||
282 | cs.overflow = ''; | ||
283 | cs.height = ''; | ||
284 | this.animating = false; | ||
285 | this.anim = null; | ||
286 | if(typeof callback == 'function'){ | ||
287 | callback(); | ||
288 | } | ||
289 | }, this, true); | ||
290 | this.anim = anim; | ||
291 | anim.animate(); | ||
292 | }, | ||
293 | |||
294 | getContainer : function(){ | ||
295 | return this.ctNode; | ||
296 | }, | ||
297 | |||
298 | getEl : function(){ | ||
299 | return this.wrap; | ||
300 | }, | ||
301 | |||
302 | appendDDGhost : function(ghostNode){ | ||
303 | ghostNode.appendChild(this.elNode.cloneNode(true)); | ||
304 | }, | ||
305 | |||
306 | getDDRepairXY : function(){ | ||
307 | return YAHOO.util.Dom.getXY(this.iconNode); | ||
308 | }, | ||
309 | |||
310 | onRender : function(){ | ||
311 | this.render(); | ||
312 | }, | ||
313 | |||
314 | render : function(bulkRender){ | ||
315 | var n = this.node; | ||
316 | var targetNode = n.parentNode ? | ||
317 | n.parentNode.ui.getContainer() : n.ownerTree.container.dom; | ||
318 | if(!this.rendered){ | ||
319 | this.rendered = true; | ||
320 | var a = n.attributes; | ||
321 | |||
322 | // add some indent caching, this helps performance when rendering a large tree | ||
323 | this.indentMarkup = ''; | ||
324 | if(n.parentNode){ | ||
325 | this.indentMarkup = n.parentNode.ui.getChildIndent(); | ||
326 | } | ||
327 | |||
328 | var buf = ['<li class="ytree-node"><div class="ytree-node-el ', n.attributes.cls,'">', | ||
329 | '<span class="ytree-node-indent">',this.indentMarkup,'</span>', | ||
330 | '<img src="', this.emptyIcon, '" class="ytree-ec-icon">', | ||
331 | '<img src="', a.icon || this.emptyIcon, '" class="ytree-node-icon',(a.icon ? ' ytree-node-inline-icon' : ''),'" unselectable="on">', | ||
332 | '<a href="',a.href ? a.href : '#','" tabIndex="1" ', | ||
333 | a.hrefTarget ? ' target="'+a.hrefTarget+'"' : '','><span unselectable="on">',n.text,'</span></a></div>', | ||
334 | '<ul class="ytree-node-ct" style="display:none;"></ul>', | ||
335 | '</li>']; | ||
336 | |||
337 | if(bulkRender !== true && n.nextSibling && n.nextSibling.ui.getEl()){ | ||
338 | this.wrap = YAHOO.ext.DomHelper.insertHtml('beforeBegin', | ||
339 | n.nextSibling.ui.getEl(), buf.join('')); | ||
340 | }else{ | ||
341 | this.wrap = YAHOO.ext.DomHelper.insertHtml('beforeEnd', targetNode, buf.join('')); | ||
342 | } | ||
343 | this.elNode = this.wrap.childNodes[0]; | ||
344 | this.ctNode = this.wrap.childNodes[1]; | ||
345 | var cs = this.elNode.childNodes; | ||
346 | this.indentNode = cs[0]; | ||
347 | this.ecNode = cs[1]; | ||
348 | this.iconNode = cs[2]; | ||
349 | this.anchor = cs[3]; | ||
350 | this.textNode = cs[3].firstChild; | ||
351 | if(a.qtip){ | ||
352 | if(this.textNode.setAttributeNS){ | ||
353 | this.textNode.setAttributeNS('y', 'qtip', a.qtip); | ||
354 | if(a.qtipTitle){ | ||
355 | this.textNode.setAttributeNS('y', 'qtitle', a.qtipTitle); | ||
356 | } | ||
357 | }else{ | ||
358 | this.textNode.setAttribute('y:qtip', a.qtip); | ||
359 | if(a.qtipTitle){ | ||
360 | this.textNode.setAttribute('y:qtitle', a.qtipTitle); | ||
361 | } | ||
362 | } | ||
363 | } | ||
364 | this.initEvents(); | ||
365 | //this.renderIndent(); cached above now instead call updateExpandIcon | ||
366 | this.updateExpandIcon(); | ||
367 | }else{ | ||
368 | if(bulkRender === true) { | ||
369 | targetNode.appendChild(this.wrap); | ||
370 | } | ||
371 | } | ||
372 | }, | ||
373 | |||
374 | getAnchor : function(){ | ||
375 | return this.anchor; | ||
376 | }, | ||
377 | |||
378 | getTextEl : function(){ | ||
379 | return this.textNode; | ||
380 | }, | ||
381 | |||
382 | getIconEl : function(){ | ||
383 | return this.iconNode; | ||
384 | }, | ||
385 | |||
386 | updateExpandIcon : function(){ | ||
387 | if(this.rendered){ | ||
388 | var n = this.node; | ||
389 | var cls = n.isLast() ? "ytree-elbow-end" : "ytree-elbow"; | ||
390 | var hasChild = n.hasChildNodes(); | ||
391 | if(hasChild){ | ||
392 | cls += n.expanded ? '-minus' : '-plus'; | ||
393 | var c1 = n.expanded ? 'ytree-node-collapsed' : 'ytree-node-expanded'; | ||
394 | var c2 = n.expanded ? 'ytree-node-expanded' : 'ytree-node-collapsed'; | ||
395 | YAHOO.util.Dom.removeClass(this.elNode, 'ytree-node-leaf'); | ||
396 | YAHOO.util.Dom.replaceClass(this.elNode, c1, c2); | ||
397 | }else{ | ||
398 | YAHOO.util.Dom.replaceClass(this.elNode, 'ytree-node-expanded', 'ytree-node-leaf'); | ||
399 | } | ||
400 | this.ecNode.className = 'ytree-ec-icon '+cls; | ||
401 | } | ||
402 | }, | ||
403 | |||
404 | getChildIndent : function(){ | ||
405 | if(!this.childIndent){ | ||
406 | var buf = []; | ||
407 | var p = this.node; | ||
408 | while(p){ | ||
409 | if(!p.isRoot || (p.isRoot && p.ownerTree.rootVisible)){ | ||
410 | if(!p.isLast()) { | ||
411 | buf.unshift('<img src="'+this.emptyIcon+'" class="ytree-elbow-line">'); | ||
412 | } else { | ||
413 | buf.unshift('<img src="'+this.emptyIcon+'" class="ytree-icon">'); | ||
414 | } | ||
415 | } | ||
416 | p = p.parentNode; | ||
417 | } | ||
418 | this.childIndent = buf.join(''); | ||
419 | } | ||
420 | return this.childIndent; | ||
421 | }, | ||
422 | |||
423 | renderIndent : function(){ | ||
424 | if(this.rendered){ | ||
425 | var indent = ''; | ||
426 | var p = this.node.parentNode; | ||
427 | if(p){ | ||
428 | indent = p.ui.getChildIndent(); | ||
429 | } | ||
430 | if(this.indentMarkup != indent){ // don't rerender if not required | ||
431 | this.indentNode.innerHTML = indent; | ||
432 | this.indentMarkup = indent; | ||
433 | } | ||
434 | this.updateExpandIcon(); | ||
435 | } | ||
436 | } | ||
437 | }; | ||
438 | |||
439 | YAHOO.ext.tree.RootTreeNodeUI = function(){ | ||
440 | YAHOO.ext.tree.RootTreeNodeUI.superclass.constructor.apply(this, arguments); | ||
441 | }; | ||
442 | YAHOO.extendX(YAHOO.ext.tree.RootTreeNodeUI, YAHOO.ext.tree.TreeNodeUI); | ||
443 | YAHOO.ext.tree.RootTreeNodeUI.prototype.render = function(){ | ||
444 | if(!this.rendered){ | ||
445 | var targetNode = this.node.ownerTree.container.dom; | ||
446 | this.node.expanded = true; | ||
447 | targetNode.innerHTML = '<div class="ytree-root-node"></div>'; | ||
448 | this.wrap = this.ctNode = targetNode.firstChild; | ||
449 | } | ||
450 | }; | ||
451 | YAHOO.ext.tree.RootTreeNodeUI.prototype.collapse = function(){ | ||
452 | }; | ||