jssource/src_files/include/ytree/TreeView/TaskNode.js

   1 /**
   2  * The check box marks a task complete.  It is a simulated form field
   3  * with three states ...
   4  * 0=unchecked, 1=some children checked, 2=all children checked
   5  * When a task is clicked, the state of the nodes and parent and children
   6  * are updated, and this behavior cascades.
   7  *
   8  * @extends YAHOO.widget.TextNode
   9  * @constructor
  10  * @param oData    {object}  A string or object containing the data that will
  11  *                           be used to render this node.
  12  * @param oParent  {Node}    This node's parent node
  13  * @param expanded {boolean} The initial expanded/collapsed state
  14  * @param checked  {boolean} The initial checked/unchecked state
  15  */
  16 YAHOO.widget.TaskNode = function(oData, oParent, expanded, checked) {
  17
  18     if (oData) {
  19         this.init(oData, oParent, expanded);
  20         this.setUpLabel(oData);
  21         this.setUpCheck(checked);
  22     }
  23 };
  24
  25 YAHOO.widget.TaskNode.prototype = new YAHOO.widget.TextNode();
  26
  27     /**
  28      * True if checkstate is 1 (some children checked) or 2 (all children checked),
  29      * false if 0.
  30      * @type boolean
  31      */
  32 YAHOO.widget.TaskNode.prototype.checked = false;
  33
  34     /**
  35      * checkState
  36      * 0=unchecked, 1=some children checked, 2=all children checked
  37      * @type int
  38      */
  39 YAHOO.widget.TaskNode.prototype.checkState = 0;
  40
  41 /**
  42 * true if you want checking a child to cause the parent to be checked, false otherwise
  43 * @type bool
  44 */
  45 YAHOO.widget.TaskNode.prototype.cascadeUp = false;
  46
  47 YAHOO.widget.TaskNode.prototype.taskNodeParentChange = function() {
  48         /**
  49          * Custom event that is fired when the check box is clicked.  The
  50          * custom event is defined on the tree instance, so there is a single
  51          * event that handles all nodes in the tree.  The node clicked is
  52          * provided as an argument.  Note, your custom node implentation can
  53          * implement its own node specific events this way.
  54          *
  55          * @event checkClick
  56          * @for YAHOO.widget.TreeView
  57          * @param {YAHOO.widget.Node} node the node clicked
  58          */
  59         if (this.tree && !this.tree.hasEvent("checkClick")) {
  60             this.tree.createEvent("checkClick", this.tree);
  61         }
  62
  63 };
  64
  65 YAHOO.widget.TaskNode.prototype.setUpCheck = function(checked) {
  66
  67         if (checked && checked === true) {
  68             this.check();
  69         }
  70
  71         // set up the custom event on the tree
  72         this.taskNodeParentChange();
  73         this.subscribe("parentChange", this.taskNodeParentChange);
  74
  75 };
  76
  77     /**
  78      * The id of the check element
  79      * @for YAHOO.widget.TaskNode
  80      * @type string
  81      */
  82 YAHOO.widget.TaskNode.prototype.getCheckElId = function() {
  83         return "ygtvcheck" + this.index;
  84 };
  85
  86     /**
  87      * Returns the check box element
  88      * @return the check html element (img)
  89      */
  90 YAHOO.widget.TaskNode.prototype.getCheckEl = function() {
  91         return document.getElementById(this.getCheckElId());
  92 };
  93
  94     /**
  95      * The style of the check element, derived from its current state
  96      * @return {string} the css style for the current check state
  97      */
  98 YAHOO.widget.TaskNode.prototype.getCheckStyle = function() {
  99         return "ygtvcheck" + this.checkState;
 100 };
 101
 102     /**
 103      * Returns the link that will invoke this node's check toggle
 104      * @return {string} returns the link required to adjust the checkbox state
 105      */
 106 YAHOO.widget.TaskNode.prototype.getCheckLink = function() {
 107         return "YAHOO.widget.TreeView.getNode(\'" + this.tree.id + "\'," +
 108             this.index + ").checkClick()";
 109 };
 110
 111     /**
 112      * Invoked when the user clicks the check box
 113      */
 114 YAHOO.widget.TaskNode.prototype.checkClick =function() {
 115
 116         if (this.checkState === 0) {
 117             this.check();
 118         } else {
 119             this.uncheck();
 120         }
 121
 122         this.onCheckClick();
 123         this.tree.fireEvent("checkClick", this);
 124 };
 125
 126     /**
 127      * Override to get the check click event
 128      */
 129 YAHOO.widget.TaskNode.prototype.onCheckClick =function() {
 130
 131 };
 132
 133     /**
 134      * Refresh the state of this node's parent, and cascade up.
 135      */
 136 YAHOO.widget.TaskNode.prototype.updateParent = function() {
 137         var p = this.parent;
 138
 139         if (!p || !p.updateParent) {
 140             return;
 141         }
 142
 143         var somethingChecked = false;
 144         var somethingNotChecked = false;
 145
 146         for (var i=0;i< p.children.length;++i) {
 147             if (p.children[i].checked) {
 148                 somethingChecked = true;
 149                 // checkState will be 1 if the child node has unchecked children
 150                 if (p.children[i].checkState == 1) {
 151                     somethingNotChecked = true;
 152                 }
 153             } else {
 154                 somethingNotChecked = true;
 155             }
 156         }
 157
 158         if (somethingChecked) {
 159             p.setCheckState( (somethingNotChecked) ? 1 : 2 );
 160         } else {
 161             p.setCheckState(0);
 162         }
 163
 164         p.updateCheckHtml();
 165         p.updateParent();
 166 };
 167
 168     /**
 169      * If the node has been rendered, update the html to reflect the current
 170      * state of the node.
 171      */
 172 YAHOO.widget.TaskNode.prototype.updateCheckHtml = function() {
 173         if (this.parent && this.parent.childrenRendered) {
 174             this.getCheckEl().className = this.getCheckStyle();
 175         }
 176 };
 177
 178     /**
 179      * Updates the state.  The checked property is true if the state is 1 or 2
 180      *
 181      * @param the new check state
 182      */
 183 YAHOO.widget.TaskNode.prototype.setCheckState = function(state) {
 184         this.checkState = state;
 185         this.checked = (state > 0);
 186 };
 187
 188     /**
 189      * Check this node
 190      */
 191 YAHOO.widget.TaskNode.prototype.check = function() {
 192         this.setCheckState(2);
 193         for (var i=0; i<this.children.length; ++i) {
 194             this.children[i].check();
 195         }
 196         this.updateCheckHtml();
 197         if(this.cascadeUp)
 198                 this.updateParent();
 199 };
 200
 201     /**
 202      * Uncheck this node
 203      */
 204 YAHOO.widget.TaskNode.prototype.uncheck = function() {
 205         this.setCheckState(0);
 206         for (var i=0; i<this.children.length; ++i) {
 207             this.children[i].uncheck();
 208         }
 209         this.updateCheckHtml();
 210         this.updateParent();
 211 };
 212
 213     // Overrides YAHOO.widget.TextNode
 214 YAHOO.widget.TaskNode.prototype.getNodeHtml = function() {
 215         var sb = new Array();
 216
 217         sb[sb.length] = '<table border="0" cellpadding="0" cellspacing="0">';
 218         sb[sb.length] = '<tr>';
 219
 220         for (var i=0;i<this.depth;++i) {
 221             sb[sb.length] = '<td class="' + this.getDepthStyle(i) + '">&#160;</td>';
 222         }
 223
 224         sb[sb.length] = '<td';
 225         sb[sb.length] = ' id="' + this.getToggleElId() + '"';
 226         sb[sb.length] = ' class="' + this.getStyle() + '"';
 227         if (this.hasChildren(true)) {
 228             sb[sb.length] = ' onmouseover="this.className=';
 229             sb[sb.length] = 'YAHOO.widget.TreeView.getNode(\'';
 230             sb[sb.length] = this.tree.id + '\',' + this.index +  ').getHoverStyle()"';
 231             sb[sb.length] = ' onmouseout="this.className=';
 232             sb[sb.length] = 'YAHOO.widget.TreeView.getNode(\'';
 233             sb[sb.length] = this.tree.id + '\',' + this.index +  ').getStyle()"';
 234         }
 235         sb[sb.length] = ' onclick="javascript:' + this.getToggleLink() + '">&#160;';
 236         sb[sb.length] = '</td>';
 237
 238         // check box
 239         sb[sb.length] = '<td';
 240         sb[sb.length] = ' id="' + this.getCheckElId() + '"';
 241         sb[sb.length] = ' class="' + this.getCheckStyle() + '"';
 242         sb[sb.length] = ' onclick="javascript:' + this.getCheckLink() + '">';
 243         sb[sb.length] = '&#160;</td>';
 244
 245
 246         sb[sb.length] = '<td>';
 247         sb[sb.length] = '<a';
 248         sb[sb.length] = ' id="' + this.labelElId + '"';
 249         sb[sb.length] = ' class="' + this.labelStyle + '"';
 250         sb[sb.length] = ' href="' + this.href + '"';
 251         sb[sb.length] = ' target="' + this.target + '"';
 252         if (this.hasChildren(true)) {
 253             sb[sb.length] = ' onmouseover="document.getElementById(\'';
 254             sb[sb.length] = this.getToggleElId() + '\').className=';
 255             sb[sb.length] = 'YAHOO.widget.TreeView.getNode(\'';
 256             sb[sb.length] = this.tree.id + '\',' + this.index +  ').getHoverStyle()"';
 257             sb[sb.length] = ' onmouseout="document.getElementById(\'';
 258             sb[sb.length] = this.getToggleElId() + '\').className=';
 259             sb[sb.length] = 'YAHOO.widget.TreeView.getNode(\'';
 260             sb[sb.length] = this.tree.id + '\',' + this.index +  ').getStyle()"';
 261         }
 262         sb[sb.length] = ' >';
 263         sb[sb.length] = this.label;
 264         sb[sb.length] = '</a>';
 265         sb[sb.length] = '</td>';
 266         sb[sb.length] = '</tr>';
 267         sb[sb.length] = '</table>';
 268
 269         return sb.join("");
 270
 271 };
 272
 273 YAHOO.widget.TaskNode.prototype.toString = function() {
 274         return "TaskNode (" + this.index + ") " + this.label;
 275 };
 276