1 // +-----------------------------------------------------------------------+
2 // | Copyright (c) 2002-2003, Richard Heyes, Harald Radi |
3 // | All rights reserved. |
5 // | Redistribution and use in source and binary forms, with or without |
6 // | modification, are permitted provided that the following conditions |
9 // | o Redistributions of source code must retain the above copyright |
10 // | notice, this list of conditions and the following disclaimer. |
11 // | o Redistributions in binary form must reproduce the above copyright |
12 // | notice, this list of conditions and the following disclaimer in the |
13 // | documentation and/or other materials provided with the distribution.|
14 // | o The names of the authors may not be used to endorse or promote |
15 // | products derived from this software without specific prior written |
18 // | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS |
19 // | "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT |
20 // | LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR |
21 // | A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT |
22 // | OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, |
23 // | SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT |
24 // | LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, |
25 // | DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY |
26 // | THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
27 // | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE |
28 // | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
30 // +-----------------------------------------------------------------------+
31 // | Author: Richard Heyes <richard@phpguru.org> |
32 // | Harald Radi <harald.radi@nme.at> |
33 // +-----------------------------------------------------------------------+
38 * Function to create copies of objects which are
39 * normally passed around by references (Arrays for example)
41 function arrayCopy(input
)
43 var output
= new Array(input
.length
);
46 if (typeof(input
[i
]) == 'array') {
47 output
[i
] = arrayCopy(input
[i
]);
59 function TreeMenu(iconpath
, myname
, linkTarget
, defaultClass
, usePersistence
, noTopLevelImages
)
62 this.iconpath
= iconpath
;
64 this.linkTarget
= linkTarget
;
65 this.defaultClass
= defaultClass
;
66 this.usePersistence
= usePersistence
;
67 this.noTopLevelImages
= noTopLevelImages
;
71 this.nodeRefs
= new Array();
72 this.branches
= new Array();
73 this.branchStatus
= new Array();
74 this.layerRelations
= new Array();
75 this.childParents
= new Array();
76 this.cookieStatuses
= new Array();
82 * Adds a node to the tree
84 TreeMenu
.prototype.addItem = function (newNode
)
86 newIndex
= this.n
.length
;
87 this.n
[newIndex
] = newNode
;
89 return this.n
[newIndex
];
93 * Preload images hack for Mozilla
95 TreeMenu
.prototype.preloadImages = function ()
97 var plustop
= new Image
; plustop
.src
= this.iconpath
+ '/plustop.gif';
98 var plusbottom
= new Image
; plusbottom
.src
= this.iconpath
+ '/plusbottom.gif';
99 var plus
= new Image
; plus
.src
= this.iconpath
+ '/plus.gif';
101 var minustop
= new Image
; minustop
.src
= this.iconpath
+ '/minustop.gif';
102 var minusbottom
= new Image
; minusbottom
.src
= this.iconpath
+ '/minusbottom.gif';
103 var minus
= new Image
; minus
.src
= this.iconpath
+ '/minus.gif';
105 var branchtop
= new Image
; branchtop
.src
= this.iconpath
+ '/branchtop.gif';
106 var branchbottom
= new Image
; branchbottom
.src
= this.iconpath
+ '/branchbottom.gif';
107 var branch
= new Image
; branch
.src
= this.iconpath
+ '/branch.gif';
109 var linebottom
= new Image
; linebottom
.src
= this.iconpath
+ '/linebottom.gif';
110 var line
= new Image
; line
.src
= this.iconpath
+ '/line.gif';
114 * Main function that draws the menu and assigns it
115 * to the layer (or document.write()s it)
117 TreeMenu
.prototype.drawMenu = function ()// OPTIONAL ARGS: nodes = [], level = [], prepend = '', expanded = false, visbility = 'inline', parentLayerID = null
120 * Necessary variables
125 var parentLayerID
= '';
128 * Parse any optional arguments
130 var nodes
= arguments
[0] ? arguments
[0] : this.n
131 var level
= arguments
[1] ? arguments
[1] : [];
132 var prepend
= arguments
[2] ? arguments
[2] : '';
133 var expanded
= arguments
[3] ? arguments
[3] : false;
134 var visibility
= arguments
[4] ? arguments
[4] : 'inline';
135 var parentLayerID
= arguments
[5] ? arguments
[5] : null;
137 var currentlevel
= level
.length
;
139 for (var i
=0; i
<nodes
.length
; i
++) {
141 level
[currentlevel
] = i
+1;
142 layerID
= this.myname
+ '_' + 'node_' + this.implode('_', level
);
145 * Store this object in the nodeRefs array
147 this.nodeRefs
[layerID
] = nodes
[i
];
150 * Store the child/parent relationship
152 this.childParents
[layerID
] = parentLayerID
;
157 if (i
== 0 && parentLayerID
== null) {
158 modifier
= nodes
.length
> 1 ? "top" : 'single';
159 } else if(i
== (nodes
.length
-1)) {
166 * Single root branch is always expanded
168 if (!this.doesMenu() || (parentLayerID
== null && (nodes
.length
== 1 || this.noTopLevelImages
))) {
171 } else if (nodes
[i
].expanded
) {
179 * Make sure visibility is correct based on parent status
181 visibility
= this.checkParentVisibility(layerID
) ? visibility
: 'none';
184 * Setup branch status and build an indexed array
185 * of branch layer ids
187 if (nodes
[i
].n
.length
> 0) {
188 this.branchStatus
[layerID
] = expanded
;
189 this.branches
[this.branches
.length
] = layerID
;
193 * Setup toggle relationship
195 if (!this.layerRelations
[parentLayerID
]) {
196 this.layerRelations
[parentLayerID
] = new Array();
198 this.layerRelations
[parentLayerID
][this.layerRelations
[parentLayerID
].length
] = layerID
;
203 var gifname
= nodes
[i
].n
.length
&& this.doesMenu() && nodes
[i
].isDynamic
? (expanded
? 'minus' : 'plus') : 'branch';
204 var iconName
= expanded
&& nodes
[i
].expandedIcon
? nodes
[i
].expandedIcon
: nodes
[i
].icon
;
205 var iconimg
= nodes
[i
].icon
? this.stringFormat('<img src="{0}/{1}" width="20" height="20" align="top" id="icon_{2}">', this.iconpath
, iconName
, layerID
) : '';
210 var eventHandlers
= "";
211 for (j
in nodes
[i
].events
) {
212 eventHandlers
+= this.stringFormat('{0}="{1}" ', j
, nodes
[i
].events
[j
]);
216 * Build the html to write to the document
218 * document.write()ing the string: '<div style="display:...' will screw up nn4.x
220 var layerTag
= this.doesMenu() ? this.stringFormat('<div id="{0}" style="display: {1}" class="{2}">', layerID
, visibility
, (nodes
[i
].cssClass
? nodes
[i
].cssClass
: this.defaultClass
)) : this.stringFormat('<div class="{0}">', nodes
[i
].cssClass
? nodes
[i
].cssClass
: this.defaultClass
);
221 var onMDown
= this.doesMenu() && nodes
[i
].n
.length
&& nodes
[i
].isDynamic
? this.stringFormat('onmousedown="{0}.toggleBranch(\'{1}\', true)" style="cursor: pointer; cursor: hand"', this.myname
, layerID
) : '';
222 var imgTag
= this.stringFormat('<img src="{0}/{1}{2}.gif" width="20" height="20" align="top" border="0" name="img_{3}" {4}>', this.iconpath
, gifname
, modifier
, layerID
, onMDown
);
223 var linkTarget
= nodes
[i
].linkTarget
? nodes
[i
].linkTarget
: this.linkTarget
;
224 var linkStart
= nodes
[i
].link
? this.stringFormat('<a href="{0}" target="{1}">', nodes
[i
].link
, linkTarget
) : '';
225 var linkEnd
= '</a>';
227 this.output
+= this.stringFormat('{0}<nobr>{1}{2}{3}{4}<span {5}>{6}</span>{7}</nobr><br></div>',
230 parentLayerID
== null && (nodes
.length
== 1 || this.noTopLevelImages
) ? '' : imgTag
,
238 * Traverse sub nodes ?
240 if (nodes
[i
].n
.length
) {
242 * Determine what to prepend. If there is only one root
243 * node then the prepend to pass to children is nothing.
244 * Otherwise it depends on where we are in the tree.
246 if (parentLayerID
== null && (nodes
.length
== 1 || this.noTopLevelImages
)) {
249 } else if (i
< (nodes
.length
- 1)) {
250 var newPrepend
= prepend
+ this.stringFormat('<img src="{0}/line.gif" width="20" height="20" align="top">', this.iconpath
);
253 var newPrepend
= prepend
+ this.stringFormat('<img src="{0}/linebottom.gif" width="20" height="20" align="top">', this.iconpath
);
256 this.drawMenu(nodes
[i
].n
,
260 expanded
? 'inline' : 'none',
267 * Writes the output generated by drawMenu() to the page
269 TreeMenu
.prototype.writeOutput = function ()
271 document
.write(this.output
);
275 * Toggles a branches visible status. Called from resetBranches()
276 * and also when a +/- graphic is clicked.
278 TreeMenu
.prototype.toggleBranch = function (layerID
, updateStatus
) // OPTIONAL ARGS: fireEvents = true
280 var currentDisplay
= this.getLayer(layerID
).style
.display
;
281 var newDisplay
= (this.branchStatus
[layerID
] && currentDisplay
== 'inline') ? 'none' : 'inline';
282 var fireEvents
= arguments
[2] != null ? arguments
[2] : true;
284 for (var i
=0; i
<this.layerRelations
[layerID
].length
; i
++) {
286 if (this.branchStatus
[this.layerRelations
[layerID
][i
]]) {
287 this.toggleBranch(this.layerRelations
[layerID
][i
], false);
290 this.getLayer(this.layerRelations
[layerID
][i
]).style
.display
= newDisplay
;
294 this.branchStatus
[layerID
] = !this.branchStatus
[layerID
];
299 if (this.doesPersistence() && !arguments
[2] && this.usePersistence
) {
300 this.setExpandedStatusForCookie(layerID
, this.branchStatus
[layerID
]);
307 nodeObject
= this.nodeRefs
[layerID
];
309 if (nodeObject
.ontoggle
!= null) {
310 eval(nodeObject
.ontoggle
);
313 if (newDisplay
== 'none' && nodeObject
.oncollapse
!= null) {
314 eval(nodeObject
.oncollapse
);
315 } else if (newDisplay
== 'inline' && nodeObject
.onexpand
!= null){
316 eval(nodeObject
.onexpand
);
321 this.swapImage(layerID
);
325 this.swapIcon(layerID
);
329 * Swaps the plus/minus branch images
331 TreeMenu
.prototype.swapImage = function (layerID
)
333 var imgSrc
= document
.images
['img_' + layerID
].src
;
335 var re
= /^(.*)(plus|minus)(bottom|top|single)?.gif$/
336 if (matches
= imgSrc
.match(re
)) {
338 document
.images
['img_' + layerID
].src
= this.stringFormat('{0}{1}{2}{3}',
340 matches
[2] == 'plus' ? 'minus' : 'plus',
341 matches
[3] ? matches
[3] : '',
347 * Swaps the icon for the expanded icon if one
350 TreeMenu
.prototype.swapIcon = function (layerID
)
352 if (document
.images
['icon_' + layerID
]) {
353 var imgSrc
= document
.images
['icon_' + layerID
].src
;
355 if (this.nodeRefs
[layerID
].icon
&& this.nodeRefs
[layerID
].expandedIcon
) {
356 var newSrc
= (imgSrc
.indexOf(this.nodeRefs
[layerID
].expandedIcon
) == -1 ? this.nodeRefs
[layerID
].expandedIcon
: this.nodeRefs
[layerID
].icon
);
358 document
.images
['icon_' + layerID
].src
= this.iconpath
+ '/' + newSrc
;
364 * Can the browser handle the dynamic menu?
366 TreeMenu
.prototype.doesMenu = function ()
368 return (is_ie4up
|| is_nav6up
|| is_gecko
|| is_opera7
);
372 * Can the browser handle save the branch status
374 TreeMenu
.prototype.doesPersistence = function ()
376 return (is_ie4up
|| is_gecko
|| is_nav6up
|| is_opera7
);
380 * Returns the appropriate layer accessor
382 TreeMenu
.prototype.getLayer = function (layerID
)
385 return document
.all(layerID
);
387 } else if (document
.getElementById(layerID
)) {
388 return document
.getElementById(layerID
);
390 } else if (document
.all(layerID
)) {
391 return document
.all(layerID
);
396 * Save the status of the layer
398 TreeMenu
.prototype.setExpandedStatusForCookie = function (layerID
, expanded
)
400 this.cookieStatuses
[layerID
] = expanded
;
405 * Load the status of the layer
407 TreeMenu
.prototype.getExpandedStatusFromCookie = function (layerID
)
409 if (this.cookieStatuses
[layerID
]) {
410 return this.cookieStatuses
[layerID
];
417 * Saves the cookie that holds which branches are expanded.
418 * Only saves the details of the branches which are expanded.
420 TreeMenu
.prototype.saveCookie = function ()
422 var cookieString
= new Array();
424 for (var i
in this.cookieStatuses
) {
425 if (this.cookieStatuses
[i
] == true) {
426 cookieString
[cookieString
.length
] = i
;
430 document
.cookie
= 'TreeMenuBranchStatus=' + cookieString
.join(':');
434 * Reads cookie parses it for status info and
435 * stores that info in the class member.
437 TreeMenu
.prototype.loadCookie = function ()
439 var cookie
= document
.cookie
.split('; ');
441 for (var i
=0; i
< cookie
.length
; i
++) {
442 var crumb
= cookie
[i
].split('=');
443 if ('TreeMenuBranchStatus' == crumb
[0] && crumb
[1]) {
444 var expandedBranches
= crumb
[1].split(':');
445 for (var j
=0; j
<expandedBranches
.length
; j
++) {
446 this.cookieStatuses
[expandedBranches
[j
]] = true;
453 * Reset branch status
455 TreeMenu
.prototype.resetBranches = function ()
457 if (!this.doesPersistence()) {
463 for (var i
=0; i
<this.branches
.length
; i
++) {
464 var status
= this.getExpandedStatusFromCookie(this.branches
[i
]);
465 // Only update if it's supposed to be expanded and it's not already
466 if (status
== true && this.branchStatus
[this.branches
[i
]] != true) {
467 if (this.checkParentVisibility(this.branches
[i
])) {
468 this.toggleBranch(this.branches
[i
], true, false);
470 this.branchStatus
[this.branches
[i
]] = true;
471 this.swapImage(this.branches
[i
]);
478 * Collapse all branches
480 TreeMenu
.prototype.collapseAll = function ()
483 if (!this.doesPersistence()) {
489 for (var i
=0; i
<this.branches
.length
; i
++) {
490 var status
= this.getExpandedStatusFromCookie(this.branches
[i
]);
491 // Only update if it's supposed to be expanded and it is
492 if (status
== true && this.branchStatus
[this.branches
[i
]] == true) {
493 if (this.checkParentVisibility(this.branches
[i
])) {
494 this.toggleBranch(this.branches
[i
], true, false);
496 this.branchStatus
[this.branches
[i
]] = true;
497 this.swapImage(this.branches
[i
]);
508 * Checks whether a branch should be open
509 * or not based on its parents' status
511 TreeMenu
.prototype.checkParentVisibility = function (layerID
)
513 if (this.in_array(this.childParents
[layerID
], this.branches
)
514 && this.branchStatus
[this.childParents
[layerID
]]
515 && this.checkParentVisibility(this.childParents
[layerID
]) ) {
519 } else if (this.childParents
[layerID
] == null) {
527 * New C# style string formatter
529 TreeMenu
.prototype.stringFormat = function (strInput
)
533 for (var i
=1; i
<arguments
.length
; i
++) {
534 while ((idx
= strInput
.indexOf('{' + (i
- 1) + '}', idx
)) != -1) {
535 strInput
= strInput
.substring(0, idx
) + arguments
[i
] + strInput
.substr(idx
+ 3);
543 * Also much adored, the PHP implode() function
545 TreeMenu
.prototype.implode = function (seperator
, input
)
549 for (var i
=0; i
<input
.length
; i
++) {
553 output
+= seperator
+ input
[i
];
561 * Aah, all the old favourites are coming out...
563 TreeMenu
.prototype.in_array = function (item
, arr
)
565 for (var i
=0; i
<arr
.length
; i
++) {
566 if (arr
[i
] == item
) {
577 function TreeNode(title
, icon
, link
, expanded
, isDynamic
, cssClass
, linkTarget
, expandedIcon
)
581 this.expandedIcon
= expandedIcon
;
583 this.expanded
= expanded
;
584 this.isDynamic
= isDynamic
;
585 this.cssClass
= cssClass
;
586 this.linkTarget
= linkTarget
;
587 this.n
= new Array();
588 this.events
= new Array();
589 this.handlers
= null;
590 this.oncollapse
= null;
591 this.onexpand
= null;
592 this.ontoggle
= null;
596 * Adds a node to an already existing node
598 TreeNode
.prototype.addItem = function (newNode
)
600 newIndex
= this.n
.length
;
601 this.n
[newIndex
] = newNode
;
603 return this.n
[newIndex
];
607 * Sets an event for this particular node
609 TreeNode
.prototype.setEvent = function (eventName
, eventHandler
)
611 switch (eventName
.toLowerCase()) {
613 this.onexpand
= eventHandler
;
617 this.oncollapse
= eventHandler
;
621 this.ontoggle
= eventHandler
;
625 this.events
[eventName
] = eventHandler
;
630 * That's the end of the tree classes. What follows is
631 * the browser detection code.
636 // Ultimate client-side JavaScript client sniff. Version 3.03
637 // (C) Netscape Communications 1999-2001. Permission granted to reuse and distribute.
638 // Revised 17 May 99 to add is_nav5up and is_ie5up (see below).
639 // Revised 20 Dec 00 to add is_gecko and change is_nav5up to is_nav6up
640 // also added support for IE5.5 Opera4&5 HotJava3 AOLTV
641 // Revised 22 Feb 01 to correct Javascript Detection for IE 5.x, Opera 4,
642 // correct Opera 5 detection
643 // add support for winME and win2k
644 // synch with browser-type-oo.js
645 // Revised 26 Mar 01 to correct Opera detection
646 // Revised 02 Oct 01 to add IE6 detection
648 // Everything you always wanted to know about your JavaScript client
649 // but were afraid to ask. Creates "is_" variables indicating:
650 // (1) browser vendor:
651 // is_nav, is_ie, is_opera, is_hotjava, is_webtv, is_TVNavigator, is_AOLTV
652 // (2) browser version number:
653 // is_major (integer indicating major version number: 2, 3, 4 ...)
654 // is_minor (float indicating full version number: 2.02, 3.01, 4.04 ...)
655 // (3) browser vendor AND major version number
656 // is_nav2, is_nav3, is_nav4, is_nav4up, is_nav6, is_nav6up, is_gecko, is_ie3,
657 // is_ie4, is_ie4up, is_ie5, is_ie5up, is_ie5_5, is_ie5_5up, is_ie6, is_ie6up, is_hotjava3, is_hotjava3up,
658 // is_opera2, is_opera3, is_opera4, is_opera5, is_opera5up
659 // (4) JavaScript version number:
660 // is_js (float indicating full JavaScript version number: 1, 1.1, 1.2 ...)
661 // (5) OS platform and version:
662 // is_win, is_win16, is_win32, is_win31, is_win95, is_winnt, is_win98, is_winme, is_win2k
664 // is_mac, is_mac68k, is_macppc
666 // is_sun, is_sun4, is_sun5, is_suni86
667 // is_irix, is_irix5, is_irix6
668 // is_hpux, is_hpux9, is_hpux10
669 // is_aix, is_aix1, is_aix2, is_aix3, is_aix4
670 // is_linux, is_sco, is_unixware, is_mpras, is_reliant
671 // is_dec, is_sinix, is_freebsd, is_bsd
674 // See http://www.it97.de/JavaScript/JS_tutorial/bstat/navobj.html and
675 // http://www.it97.de/JavaScript/JS_tutorial/bstat/Browseraol.html
676 // for detailed lists of userAgent strings.
678 // Note: you don't want your Nav4 or IE4 code to "turn off" or
679 // stop working when new versions of browsers are released, so
680 // in conditional code forks, use is_ie5up ("IE 5.0 or greater")
681 // is_opera5up ("Opera 5.0 or greater") instead of is_ie5 or is_opera5
682 // to check version in code which you want to work on future
686 * Severly curtailed all this as only certain elements
687 * are required by TreeMenu, specifically:
693 // convert all characters to lowercase to simplify testing
694 var agt
=navigator
.userAgent
.toLowerCase();
696 // *** BROWSER VERSION ***
697 // Note: On IE5, these return 4, so use is_ie5up to detect IE5.
698 var is_major
= parseInt(navigator
.appVersion
);
699 var is_minor
= parseFloat(navigator
.appVersion
);
701 // Note: Opera and WebTV spoof Navigator. We do strict client detection.
702 // If you want to allow spoofing, take out the tests for opera and webtv.
703 var is_nav
= ((agt
.indexOf('mozilla')!=-1) && (agt
.indexOf('spoofer')==-1)
704 && (agt
.indexOf('compatible') == -1) && (agt
.indexOf('opera')==-1)
705 && (agt
.indexOf('webtv')==-1) && (agt
.indexOf('hotjava')==-1));
706 var is_nav6up
= (is_nav
&& (is_major
>= 5));
707 var is_gecko
= (agt
.indexOf('gecko') != -1);
710 var is_ie
= ((agt
.indexOf("msie") != -1) && (agt
.indexOf("opera") == -1));
711 var is_ie4
= (is_ie
&& (is_major
== 4) && (agt
.indexOf("msie 4")!=-1) );
712 var is_ie4up
= (is_ie
&& (is_major
>= 4));
714 var is_opera
= (agt
.indexOf("opera") != -1);
715 var is_opera7
= is_opera
&& (agt
.indexOf("opera 7") != -1);
717 // Patch from Harald Fielker
718 if (agt
.indexOf('konqueror') != -1) {
720 var is_nav6up
= false;
721 var is_gecko
= false;
726 //--> end hide JavaScript