home *** CD-ROM | disk | FTP | other *** search
/ Chip 2005 August (Alt) / CHIP 2005-08.1.iso / program / freeware / MediaMan2.2_Setup.exe / Help / MediaMan_Help.chm / js / webfxcheckboxtreeitem.js < prev    next >
Encoding:
JavaScript  |  2005-06-04  |  3.9 KB  |  90 lines
  1. /*
  2.  *    Sub class that adds a check box in front of the tree item icon
  3.  *
  4.  *    Created by Erik Arvidsson (http://webfx.eae.net/contact.html#erik)
  5.  *
  6.  *    Disclaimer:    This is not any official WebFX component. It was created due to
  7.  *                demand and is just a quick and dirty implementation. If you are
  8.  *                interested in this functionality the contact us
  9.  *                http://webfx.eae.net/contact.html
  10.  *
  11.  *    Notice that you'll need to add a css rule the sets the size of the input box.
  12.  *    Something like this will do fairly good in both Moz and IE
  13.  *    
  14.  *    input.tree-check-box {
  15.  *        width:        auto;
  16.  *        margin:        0;
  17.  *        padding:    0;
  18.  *        height:        14px;
  19.  *        vertical-align:    middle;
  20.  *    }
  21.  *
  22.  */
  23.  
  24. function WebFXCheckBoxTreeItem(sText, sAction, bChecked, eParent, sIcon, sOpenIcon) {
  25.     this.base = WebFXTreeItem;
  26.     this.base(sText, sAction, eParent, sIcon, sOpenIcon);
  27.     
  28.     this._checked = bChecked;
  29. }
  30.  
  31. WebFXCheckBoxTreeItem.prototype = new WebFXTreeItem;
  32.  
  33. WebFXCheckBoxTreeItem.prototype.toString = function (nItem, nItemCount) {
  34.     var foo = this.parentNode;
  35.     var indent = '';
  36.     if (nItem + 1 == nItemCount) { this.parentNode._last = true; }
  37.     var i = 0;
  38.     while (foo.parentNode) {
  39.         foo = foo.parentNode;
  40.         indent = "<img id=\"" + this.id + "-indent-" + i + "\" src=\"" + ((foo._last)?webFXTreeConfig.blankIcon:webFXTreeConfig.iIcon) + "\">" + indent;
  41.         i++;
  42.     }
  43.     this._level = i;
  44.     if (this.childNodes.length) { this.folder = 1; }
  45.     else { this.open = false; }
  46.     if ((this.folder) || (webFXTreeHandler.behavior != 'classic')) {
  47.         if (!this.icon) { this.icon = webFXTreeConfig.folderIcon; }
  48.         if (!this.openIcon) { this.openIcon = webFXTreeConfig.openFolderIcon; }
  49.     }
  50.     else if (!this.icon) { this.icon = webFXTreeConfig.fileIcon; }
  51.     var label = this.text.replace(/</g, '<').replace(/>/g, '>');
  52.     var str = "<div id=\"" + this.id + "\" ondblclick=\"webFXTreeHandler.toggle(this);\" class=\"webfx-tree-item\" onkeydown=\"return webFXTreeHandler.keydown(this, event)\">";
  53.     str += indent;
  54.     str += "<img id=\"" + this.id + "-plus\" src=\"" + ((this.folder)?((this.open)?((this.parentNode._last)?webFXTreeConfig.lMinusIcon:webFXTreeConfig.tMinusIcon):((this.parentNode._last)?webFXTreeConfig.lPlusIcon:webFXTreeConfig.tPlusIcon)):((this.parentNode._last)?webFXTreeConfig.lIcon:webFXTreeConfig.tIcon)) + "\" onclick=\"webFXTreeHandler.toggle(this);\">"
  55.     
  56.     // insert check box
  57.     str += "<input type=\"checkbox\"" +
  58.         " class=\"tree-check-box\"" +
  59.         (this._checked ? " checked=\"checked\"" : "") +
  60.         " onclick=\"webFXTreeHandler.all[this.parentNode.id].setChecked(this.checked)\"" +
  61.         " />";
  62.     // end insert checkbox
  63.     
  64.     str += "<img id=\"" + this.id + "-icon\" class=\"webfx-tree-icon\" src=\"" + ((webFXTreeHandler.behavior == 'classic' && this.open)?this.openIcon:this.icon) + "\" onclick=\"webFXTreeHandler.select(this);\"><a href=\"" + this.action + "\" id=\"" + this.id + "-anchor\" onfocus=\"webFXTreeHandler.focus(this);\" onblur=\"webFXTreeHandler.blur(this);\">" + label + "</a></div>";
  65.     str += "<div id=\"" + this.id + "-cont\" class=\"webfx-tree-container\" style=\"display: " + ((this.open)?'block':'none') + ";\">";
  66.     for (var i = 0; i < this.childNodes.length; i++) {
  67.         str += this.childNodes[i].toString(i,this.childNodes.length);
  68.     }
  69.     str += "</div>";
  70.     this.plusIcon = ((this.parentNode._last)?webFXTreeConfig.lPlusIcon:webFXTreeConfig.tPlusIcon);
  71.     this.minusIcon = ((this.parentNode._last)?webFXTreeConfig.lMinusIcon:webFXTreeConfig.tMinusIcon);
  72.     return str;
  73. }
  74.  
  75. WebFXCheckBoxTreeItem.prototype.getChecked = function () {
  76.     var divEl = document.getElementById(this.id);
  77.     var inputEl = divEl.getElementsByTagName("INPUT")[0];
  78.     return this._checked = inputEl.checked;
  79. };
  80.  
  81. WebFXCheckBoxTreeItem.prototype.setChecked = function (bChecked) {
  82.     if (bChecked != this.getChecked()) {
  83.         var divEl = document.getElementById(this.id);
  84.         var inputEl = divEl.getElementsByTagName("INPUT")[0];
  85.         this._checked = inputEl.checked = bChecked;
  86.         
  87.         if (typeof this.onchange == "function")
  88.             this.onchange();
  89.     }
  90. };