1 | // +-----------------------------------------------------------------------+
|
---|
2 | // | Copyright (c) 2002, Richard Heyes, Harald Radi |
|
---|
3 | // | All rights reserved. |
|
---|
4 | // | |
|
---|
5 | // | Redistribution and use in source and binary forms, with or without |
|
---|
6 | // | modification, are permitted provided that the following conditions |
|
---|
7 | // | are met: |
|
---|
8 | // | |
|
---|
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 |
|
---|
16 | // | permission. |
|
---|
17 | // | |
|
---|
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. |
|
---|
29 | // | |
|
---|
30 | // +-----------------------------------------------------------------------+
|
---|
31 | // | Author: Richard Heyes <richard@phpguru.org> |
|
---|
32 | // | Harald Radi <harald.radi@nme.at> |
|
---|
33 | // +-----------------------------------------------------------------------+
|
---|
34 | //
|
---|
35 | // $Id: TreeMenu.js,v 1.6 2002/07/27 12:43:15 richard Exp $
|
---|
36 |
|
---|
37 | // cc 2002-10-29, default style classes for use in tree text.
|
---|
38 | var autostyles = new Array('tmenu0text', 'tmenu1text', 'tmenu2text', 'tmenu3text');
|
---|
39 |
|
---|
40 | function TreeMenu(layer, iconpath, myname, linkTarget)
|
---|
41 | {
|
---|
42 | // Properties
|
---|
43 | this.layer = layer;
|
---|
44 | this.iconpath = iconpath;
|
---|
45 | this.myname = myname;
|
---|
46 | this.linkTarget = linkTarget;
|
---|
47 | this.n = new Array();
|
---|
48 |
|
---|
49 | this.branches = new Array();
|
---|
50 | this.branchStatus = new Array();
|
---|
51 | this.layerRelations = new Array();
|
---|
52 | this.childParents = new Array();
|
---|
53 |
|
---|
54 | // Methods
|
---|
55 | this.preloadImages = preloadImages;
|
---|
56 | this.drawMenu = drawMenu;
|
---|
57 | this.toggleBranch = toggleBranch;
|
---|
58 | this.swapImage = swapImage;
|
---|
59 | this.doesMenu = doesMenu;
|
---|
60 | this.doesPersistence = doesPersistence;
|
---|
61 | this.getLayer = getLayer;
|
---|
62 | this.saveExpandedStatus = saveExpandedStatus;
|
---|
63 | this.loadExpandedStatus = loadExpandedStatus;
|
---|
64 | this.resetBranches = resetBranches;
|
---|
65 | this.checkParentVisibility = checkParentVisibility;
|
---|
66 |
|
---|
67 | this.preloadImages();
|
---|
68 | }
|
---|
69 |
|
---|
70 | function TreeNode(title, icon, link, expanded, isDynamic)
|
---|
71 | {
|
---|
72 | this.title = title;
|
---|
73 | this.icon = icon;
|
---|
74 | this.link = link;
|
---|
75 | this.expanded = expanded;
|
---|
76 | this.isDynamic = isDynamic;
|
---|
77 | this.n = new Array();
|
---|
78 | this.style = false; // cc 2002-10-29
|
---|
79 | }
|
---|
80 |
|
---|
81 | /**
|
---|
82 | * Preload images hack for CrapZilla
|
---|
83 | */
|
---|
84 | function preloadImages()
|
---|
85 | {
|
---|
86 | var plustop = new Image; plustop.src = this.iconpath + '/plustop.gif';
|
---|
87 | var plusbottom = new Image; plusbottom.src = this.iconpath + '/plusbottom.gif';
|
---|
88 | var plus = new Image; plus.src = this.iconpath + '/plus.gif';
|
---|
89 |
|
---|
90 | var minustop = new Image; minustop.src = this.iconpath + '/minustop.gif';
|
---|
91 | var minusbottom = new Image; minusbottom.src = this.iconpath + '/minusbottom.gif';
|
---|
92 | var minus = new Image; minus.src = this.iconpath + '/minus.gif';
|
---|
93 |
|
---|
94 | var branchtop = new Image; branchtop.src = this.iconpath + '/branchtop.gif';
|
---|
95 | var branchbottom = new Image; branchbottom.src = this.iconpath + '/branchbottom.gif';
|
---|
96 | var branch = new Image; branch.src = this.iconpath + '/branch.gif';
|
---|
97 |
|
---|
98 | var linebottom = new Image; linebottom.src = this.iconpath + '/linebottom.gif';
|
---|
99 | var line = new Image; line.src = this.iconpath + '/line.gif';
|
---|
100 | }
|
---|
101 |
|
---|
102 | /**
|
---|
103 | * Main function that draws the menu and assigns it
|
---|
104 | * to the layer (or document.write()s it)
|
---|
105 | */
|
---|
106 | function drawMenu()// OPTIONAL ARGS: nodes = [], level = [], prepend = '', expanded = false, visbility = 'inline', parentLayerID = null
|
---|
107 | {
|
---|
108 | /**
|
---|
109 | * Necessary variables
|
---|
110 | */
|
---|
111 | var output = '';
|
---|
112 | var modifier = '';
|
---|
113 | var layerID = 'mydmstreebox';
|
---|
114 | var parentLayerID = '';
|
---|
115 |
|
---|
116 | /**
|
---|
117 | * Parse any optional arguments
|
---|
118 | */
|
---|
119 | var nodes = arguments[0] ? arguments[0] : this.n
|
---|
120 | var level = arguments[1] ? arguments[1] : [];
|
---|
121 | var prepend = arguments[2] ? arguments[2] : '';
|
---|
122 | var expanded = arguments[3] ? arguments[3] : false;
|
---|
123 | var visibility = arguments[4] ? arguments[4] : 'inline';
|
---|
124 | var parentLayerID = arguments[5] ? arguments[5] : null;
|
---|
125 |
|
---|
126 | var currentlevel = level.length;
|
---|
127 |
|
---|
128 | for (var i=0; i<nodes.length; i++) {
|
---|
129 |
|
---|
130 | level[currentlevel] = i+1;
|
---|
131 | layerID = this.layer + '_' + 'node_' + implode('_', level);
|
---|
132 |
|
---|
133 | /**
|
---|
134 | * Store the child/parent relationship
|
---|
135 | */
|
---|
136 | this.childParents[layerID] = parentLayerID;
|
---|
137 |
|
---|
138 | /**
|
---|
139 | * Gif modifier
|
---|
140 | */
|
---|
141 | if (i == 0 && parentLayerID == null) {
|
---|
142 | modifier = nodes.length > 1 ? "top" : 'single';
|
---|
143 | } else if(i == (nodes.length-1)) {
|
---|
144 | modifier = "bottom";
|
---|
145 | } else {
|
---|
146 | modifier = "";
|
---|
147 | }
|
---|
148 |
|
---|
149 | /**
|
---|
150 | * Single root branch is always expanded
|
---|
151 | */
|
---|
152 | if (!doesMenu() || (parentLayerID == null && nodes.length == 1)) {
|
---|
153 | expanded = true;
|
---|
154 |
|
---|
155 | } else if (nodes[i].expanded) {
|
---|
156 | expanded = true;
|
---|
157 |
|
---|
158 | } else {
|
---|
159 | expanded = false;
|
---|
160 | }
|
---|
161 | /**
|
---|
162 | * Setup branch status and build an indexed array
|
---|
163 | * of branch layer ids
|
---|
164 | */
|
---|
165 | if (nodes[i].n.length > 0) {
|
---|
166 | this.branchStatus[layerID] = expanded;
|
---|
167 | this.branches[this.branches.length] = layerID;
|
---|
168 | }
|
---|
169 |
|
---|
170 | /**
|
---|
171 | * Setup toggle relationship
|
---|
172 | */
|
---|
173 | if (!this.layerRelations[parentLayerID]) {
|
---|
174 | this.layerRelations[parentLayerID] = new Array();
|
---|
175 | }
|
---|
176 | this.layerRelations[parentLayerID][this.layerRelations[parentLayerID].length] = layerID;
|
---|
177 |
|
---|
178 | /**
|
---|
179 | * Branch images
|
---|
180 | */
|
---|
181 | var gifname = nodes[i].n.length && this.doesMenu() && nodes[i].isDynamic ? (expanded ? 'minus' : 'plus') : 'branch';
|
---|
182 | var iconimg = nodes[i].icon ? sprintf('<img src="%s/%s" width="20" height="20" align="top">', this.iconpath, nodes[i].icon) : '';
|
---|
183 |
|
---|
184 |
|
---|
185 | /**
|
---|
186 | * Build the html to write to the document
|
---|
187 | */
|
---|
188 | var divTag = sprintf('<div id="%s" style="display: %s; behavior: url(#default#userdata)">', layerID, visibility);
|
---|
189 | var onMDown = doesMenu() && nodes[i].n.length && nodes[i].isDynamic ? sprintf('onmousedown="%s.toggleBranch(\'%s\', true)" style="cursor: pointer; cursor: hand"', this.myname, layerID) : '';
|
---|
190 | var imgTag = sprintf('<img src="%s/%s%s.gif" width="20" height="20" align="top" border="0" name="img_%s" %s />', this.iconpath, gifname, modifier, layerID, onMDown);
|
---|
191 | var linkStart = nodes[i].link ? sprintf('<a href="%s" target="%s">', nodes[i].link, this.linkTarget) : '';
|
---|
192 | var linkEnd = nodes[i].link ? '</a>' : '';
|
---|
193 |
|
---|
194 | // cc 2002-10-29
|
---|
195 | var titleString = nodes[i].title;
|
---|
196 | var styleStart = '';
|
---|
197 | var styleEnd = '';
|
---|
198 | if (nodes[i].style == 'auto') {
|
---|
199 | styleInx = Math.min(currentlevel, autostyles.length-1);
|
---|
200 | styleStart = "<span class='"+autostyles[styleInx]+"'>"
|
---|
201 | styleEnd = '</span>';
|
---|
202 | }
|
---|
203 |
|
---|
204 | output = sprintf('%s<nobr>%s%s%s%s%s%s%s%s</nobr><br></div>',
|
---|
205 | divTag,
|
---|
206 | styleStart,
|
---|
207 | prepend,
|
---|
208 | parentLayerID == null && nodes.length == 1 ? '' : imgTag,
|
---|
209 | iconimg,
|
---|
210 | linkStart,
|
---|
211 | titleString, // cc 2002-10-29
|
---|
212 | linkEnd,
|
---|
213 | styleEnd);
|
---|
214 |
|
---|
215 | /**
|
---|
216 | * Write out the HTML. Uses document.write for speed over layers and
|
---|
217 | * innerHTML. This however means no dynamic adding/removing nodes on
|
---|
218 | * the client side. This could be conditional I guess if dynamic
|
---|
219 | * adding/removing is required.
|
---|
220 | */
|
---|
221 | if (this.doesMenu()) {
|
---|
222 | //this.getLayer(this.layer).innerHTML += output
|
---|
223 | document.write(output);
|
---|
224 |
|
---|
225 | } else {
|
---|
226 | document.write(output);
|
---|
227 | }
|
---|
228 |
|
---|
229 | /**
|
---|
230 | * Traverse sub nodes ?
|
---|
231 | */
|
---|
232 | if (nodes[i].n.length) {
|
---|
233 | /**
|
---|
234 | * Determine what to prepend. If there is only one root
|
---|
235 | * node then the prepend to pass to children is nothing.
|
---|
236 | * Otherwise it depends on where we are in the tree.
|
---|
237 | */
|
---|
238 | if (parentLayerID == null && nodes.length == 1) {
|
---|
239 | var newPrepend = '';
|
---|
240 |
|
---|
241 | } else if (i < (nodes.length - 1)) {
|
---|
242 | var newPrepend = prepend + sprintf('<img src="%s/line.gif" width="20" height="20" align="top">', this.iconpath);
|
---|
243 |
|
---|
244 | } else {
|
---|
245 | var newPrepend = prepend + sprintf('<img src="%s/linebottom.gif" width="20" height="20" align="top">', this.iconpath);
|
---|
246 | }
|
---|
247 |
|
---|
248 | this.drawMenu(nodes[i].n,
|
---|
249 | explode('_', implode('_', level)), // Seemingly necessary to enforce passing by value
|
---|
250 | newPrepend,
|
---|
251 | nodes[i].expanded,
|
---|
252 | expanded ? 'inline' : 'none',
|
---|
253 | layerID);
|
---|
254 | }
|
---|
255 | }
|
---|
256 | }
|
---|
257 |
|
---|
258 | function toggleBranch(layerID, updateStatus) // OPTIONAL ARGS: noSave = false
|
---|
259 | {
|
---|
260 | var currentDisplay = this.getLayer(layerID).style.display;
|
---|
261 | var newDisplay = (this.branchStatus[layerID] && currentDisplay == 'inline') ? 'none' : 'inline'
|
---|
262 |
|
---|
263 | for (var i=0; i<this.layerRelations[layerID].length; i++) {
|
---|
264 | if (this.branchStatus[this.layerRelations[layerID][i]]) {
|
---|
265 | this.toggleBranch(this.layerRelations[layerID][i], false);
|
---|
266 | }
|
---|
267 |
|
---|
268 | this.getLayer(this.layerRelations[layerID][i]).style.display = newDisplay;
|
---|
269 | }
|
---|
270 |
|
---|
271 | if (updateStatus) {
|
---|
272 | this.branchStatus[layerID] = !this.branchStatus[layerID];
|
---|
273 |
|
---|
274 | /**
|
---|
275 | * Persistence
|
---|
276 | */
|
---|
277 | if (this.doesPersistence() && !arguments[2]) {
|
---|
278 | this.saveExpandedStatus(layerID, this.branchStatus[layerID]);
|
---|
279 | }
|
---|
280 |
|
---|
281 | // Swap image
|
---|
282 | this.swapImage(layerID);
|
---|
283 | }
|
---|
284 | }
|
---|
285 |
|
---|
286 | /**
|
---|
287 | * Swaps the plus/minus branch images
|
---|
288 | */
|
---|
289 | function swapImage(layerID)
|
---|
290 | {
|
---|
291 | imgSrc = document.images['img_' + layerID].src;
|
---|
292 |
|
---|
293 | re = /^(.*)(plus|minus)(bottom|top|single)?.gif$/
|
---|
294 | if (matches = imgSrc.match(re)) {
|
---|
295 |
|
---|
296 | document.images['img_' + layerID].src = sprintf('%s%s%s%s',
|
---|
297 | matches[1],
|
---|
298 | matches[2] == 'plus' ? 'minus' : 'plus',
|
---|
299 | matches[3] ? matches[3] : '',
|
---|
300 | '.gif');
|
---|
301 | }
|
---|
302 | }
|
---|
303 |
|
---|
304 | /**
|
---|
305 | * Can the browser handle the dynamic menu?
|
---|
306 | */
|
---|
307 | function doesMenu()
|
---|
308 | {
|
---|
309 | return (is_ie5up || is_nav6up || is_gecko);
|
---|
310 | }
|
---|
311 |
|
---|
312 | /**
|
---|
313 | * Can the browser handle save the branch status
|
---|
314 | */
|
---|
315 | function doesPersistence()
|
---|
316 | {
|
---|
317 | return is_ie5up;
|
---|
318 | }
|
---|
319 |
|
---|
320 | /**
|
---|
321 | * Returns the appropriate layer accessor
|
---|
322 | */
|
---|
323 | function getLayer(layerID)
|
---|
324 | {
|
---|
325 | if (document.getElementById(layerID)) {
|
---|
326 | return document.getElementById(layerID);
|
---|
327 | } else if (document.all(layerID)) {
|
---|
328 | return document.all(layerID);
|
---|
329 | }
|
---|
330 | }
|
---|
331 |
|
---|
332 | /**
|
---|
333 | * Save the status of the layer
|
---|
334 | */
|
---|
335 | function saveExpandedStatus(layerID, expanded)
|
---|
336 | {
|
---|
337 | document.all(layerID).setAttribute("expandedStatus", expanded);
|
---|
338 | document.all(layerID).save(layerID);
|
---|
339 | }
|
---|
340 |
|
---|
341 | /**
|
---|
342 | * Load the status of the layer
|
---|
343 | */
|
---|
344 | function loadExpandedStatus(layerID)
|
---|
345 | {
|
---|
346 | document.all(layerID).load(layerID);
|
---|
347 | if (val = document.all(layerID).getAttribute("expandedStatus")) {
|
---|
348 | return val;
|
---|
349 | } else {
|
---|
350 | return null;
|
---|
351 | }
|
---|
352 | }
|
---|
353 |
|
---|
354 | /**
|
---|
355 | * Reset branch status
|
---|
356 | */
|
---|
357 | function resetBranches()
|
---|
358 | {
|
---|
359 | if (!this.doesPersistence()) {
|
---|
360 | return false;
|
---|
361 | }
|
---|
362 |
|
---|
363 | for (var i=0; i<this.branches.length; i++) {
|
---|
364 | var status = this.loadExpandedStatus(this.branches[i]);
|
---|
365 | // Only update if it's supposed to be expanded and it's not already
|
---|
366 | if (status == 'true' && this.branchStatus[this.branches[i]] != true) {
|
---|
367 | if (this.checkParentVisibility(this.branches[i])) {
|
---|
368 | this.toggleBranch(this.branches[i], true, true);
|
---|
369 | } else {
|
---|
370 | this.branchStatus[this.branches[i]] = true;
|
---|
371 | this.swapImage(this.branches[i]);
|
---|
372 | }
|
---|
373 | }
|
---|
374 | }
|
---|
375 | }
|
---|
376 |
|
---|
377 | /**
|
---|
378 | * Checks whether a branch should be open
|
---|
379 | * or not based on its parents' status
|
---|
380 | */
|
---|
381 | function checkParentVisibility(layerID)
|
---|
382 | {
|
---|
383 | if (in_array(this.childParents[layerID], this.branches)
|
---|
384 | && this.branchStatus[this.childParents[layerID]]
|
---|
385 | && this.checkParentVisibility(this.childParents[layerID]) ) {
|
---|
386 |
|
---|
387 | return true;
|
---|
388 |
|
---|
389 | } else if (this.childParents[layerID] == null) {
|
---|
390 | return true;
|
---|
391 | }
|
---|
392 |
|
---|
393 | return false;
|
---|
394 |
|
---|
395 | /*
|
---|
396 | if (this.childParents[layerID] == null) {
|
---|
397 | return this.branchStatus[layerID];
|
---|
398 | } else {
|
---|
399 | return this.branchStatus && this.checkVisibility(this.childParents[layerID]);
|
---|
400 | }
|
---|
401 | */
|
---|
402 | }
|
---|
403 |
|
---|
404 | /**
|
---|
405 | * Javascript mini implementation of sprintf()
|
---|
406 | */
|
---|
407 | function sprintf(strInput)
|
---|
408 | {
|
---|
409 | var strOutput = '';
|
---|
410 | var currentArg = 1;
|
---|
411 |
|
---|
412 | for (var i=0; i<strInput.length; i++) {
|
---|
413 | if (strInput.charAt(i) == '%' && i != (strInput.length - 1) && typeof(arguments[currentArg]) != 'undefined') {
|
---|
414 | switch (strInput.charAt(++i)) {
|
---|
415 | case 's':
|
---|
416 | strOutput += arguments[currentArg];
|
---|
417 | break;
|
---|
418 | case '%':
|
---|
419 | strOutput += '%';
|
---|
420 | break;
|
---|
421 | }
|
---|
422 | currentArg++;
|
---|
423 | } else {
|
---|
424 | strOutput += strInput.charAt(i);
|
---|
425 | }
|
---|
426 | }
|
---|
427 |
|
---|
428 | return strOutput;
|
---|
429 | }
|
---|
430 |
|
---|
431 | function explode(seperator, input)
|
---|
432 | {
|
---|
433 | var output = [];
|
---|
434 | var tmp = '';
|
---|
435 | skipEmpty = arguments[2] ? true : false;
|
---|
436 |
|
---|
437 | for (var i=0; i<input.length; i++) {
|
---|
438 | if (input.charAt(i) == seperator) {
|
---|
439 | if (tmp == '' && skipEmpty) {
|
---|
440 | continue;
|
---|
441 | } else {
|
---|
442 | output[output.length] = tmp;
|
---|
443 | tmp = '';
|
---|
444 | }
|
---|
445 | } else {
|
---|
446 | tmp += input.charAt(i);
|
---|
447 | }
|
---|
448 | }
|
---|
449 | if (tmp != '' || !skipEmpty) {
|
---|
450 | output[output.length] = tmp;
|
---|
451 | }
|
---|
452 |
|
---|
453 | return output;
|
---|
454 | }
|
---|
455 |
|
---|
456 | function implode(seperator, input)
|
---|
457 | {
|
---|
458 | var output = '';
|
---|
459 |
|
---|
460 | for (var i=0; i<input.length; i++) {
|
---|
461 | if (i == 0) {
|
---|
462 | output += input[i];
|
---|
463 | } else {
|
---|
464 | output += seperator + input[i];
|
---|
465 | }
|
---|
466 | }
|
---|
467 |
|
---|
468 | return output;
|
---|
469 | }
|
---|
470 |
|
---|
471 | function in_array(item, arr)
|
---|
472 | {
|
---|
473 | for (var i=0; i<arr.length; i++) {
|
---|
474 | if (arr[i] == item) {
|
---|
475 | return true;
|
---|
476 | }
|
---|
477 | }
|
---|
478 |
|
---|
479 | return false;
|
---|
480 | } |
---|