source: contrib/Dms/js/TreeMenu.js @ 3526

Revision 3526, 15.1 KB checked in by afernandes, 13 years ago (diff)

Ticket #1416 - Disponibilizado modulos Timesheet e DMS para a comunidade.
  • Property svn:executable set to *
  • Property svn:mime-type set to text/plain
Line 
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.
38var autostyles = new Array('tmenu0text', 'tmenu1text', 'tmenu2text', 'tmenu3text');
39
40function 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
70function 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*/
84function 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*/
106function 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
258function 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*/
289function 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*/
307function doesMenu()
308{
309  return (is_ie5up || is_nav6up || is_gecko);
310}
311
312/**
313* Can the browser handle save the branch status
314*/
315function doesPersistence()
316{
317  return is_ie5up;
318}
319
320/**
321* Returns the appropriate layer accessor
322*/
323function 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*/
335function 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*/
344function 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*/
357function 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*/
381function 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*/
407function 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
431function 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
456function 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
471function 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}
Note: See TracBrowser for help on using the repository browser.