summaryrefslogtreecommitdiff
path: root/frontend/beta/js/YUI-extensions/tree/TreeNodeUI.js
Unidiff
Diffstat (limited to 'frontend/beta/js/YUI-extensions/tree/TreeNodeUI.js') (more/less context) (show whitespace changes)
-rw-r--r--frontend/beta/js/YUI-extensions/tree/TreeNodeUI.js452
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 */
6YAHOO.ext.tree.TreeNodeUI = function(node){
7 this.node = node;
8 this.rendered = false;
9 this.animating = false;
10};
11
12YAHOO.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
439YAHOO.ext.tree.RootTreeNodeUI = function(){
440 YAHOO.ext.tree.RootTreeNodeUI.superclass.constructor.apply(this, arguments);
441};
442YAHOO.extendX(YAHOO.ext.tree.RootTreeNodeUI, YAHOO.ext.tree.TreeNodeUI);
443YAHOO.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};
451YAHOO.ext.tree.RootTreeNodeUI.prototype.collapse = function(){
452};