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.
8 * @extends YAHOO.widget.TextNode
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
16 YAHOO.widget.TaskNode = function(oData, oParent, expanded, checked) {
19 this.init(oData, oParent, expanded);
20 this.setUpLabel(oData);
21 this.setUpCheck(checked);
25 YAHOO.widget.TaskNode.prototype = new YAHOO.widget.TextNode();
28 * True if checkstate is 1 (some children checked) or 2 (all children checked),
32 YAHOO.widget.TaskNode.prototype.checked = false;
36 * 0=unchecked, 1=some children checked, 2=all children checked
39 YAHOO.widget.TaskNode.prototype.checkState = 0;
42 * true if you want checking a child to cause the parent to be checked, false otherwise
45 YAHOO.widget.TaskNode.prototype.cascadeUp = false;
47 YAHOO.widget.TaskNode.prototype.taskNodeParentChange = function() {
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.
56 * @for YAHOO.widget.TreeView
57 * @param {YAHOO.widget.Node} node the node clicked
59 if (this.tree && !this.tree.hasEvent("checkClick")) {
60 this.tree.createEvent("checkClick", this.tree);
65 YAHOO.widget.TaskNode.prototype.setUpCheck = function(checked) {
67 if (checked && checked === true) {
71 // set up the custom event on the tree
72 this.taskNodeParentChange();
73 this.subscribe("parentChange", this.taskNodeParentChange);
78 * The id of the check element
79 * @for YAHOO.widget.TaskNode
82 YAHOO.widget.TaskNode.prototype.getCheckElId = function() {
83 return "ygtvcheck" + this.index;
87 * Returns the check box element
88 * @return the check html element (img)
90 YAHOO.widget.TaskNode.prototype.getCheckEl = function() {
91 return document.getElementById(this.getCheckElId());
95 * The style of the check element, derived from its current state
96 * @return {string} the css style for the current check state
98 YAHOO.widget.TaskNode.prototype.getCheckStyle = function() {
99 return "ygtvcheck" + this.checkState;
103 * Returns the link that will invoke this node's check toggle
104 * @return {string} returns the link required to adjust the checkbox state
106 YAHOO.widget.TaskNode.prototype.getCheckLink = function() {
107 return "YAHOO.widget.TreeView.getNode(\'" + this.tree.id + "\'," +
108 this.index + ").checkClick()";
112 * Invoked when the user clicks the check box
114 YAHOO.widget.TaskNode.prototype.checkClick =function() {
116 if (this.checkState === 0) {
123 this.tree.fireEvent("checkClick", this);
127 * Override to get the check click event
129 YAHOO.widget.TaskNode.prototype.onCheckClick =function() {
134 * Refresh the state of this node's parent, and cascade up.
136 YAHOO.widget.TaskNode.prototype.updateParent = function() {
139 if (!p || !p.updateParent) {
143 var somethingChecked = false;
144 var somethingNotChecked = false;
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;
154 somethingNotChecked = true;
158 if (somethingChecked) {
159 p.setCheckState( (somethingNotChecked) ? 1 : 2 );
169 * If the node has been rendered, update the html to reflect the current
172 YAHOO.widget.TaskNode.prototype.updateCheckHtml = function() {
173 if (this.parent && this.parent.childrenRendered) {
174 this.getCheckEl().className = this.getCheckStyle();
179 * Updates the state. The checked property is true if the state is 1 or 2
181 * @param the new check state
183 YAHOO.widget.TaskNode.prototype.setCheckState = function(state) {
184 this.checkState = state;
185 this.checked = (state > 0);
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();
196 this.updateCheckHtml();
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();
209 this.updateCheckHtml();
213 // Overrides YAHOO.widget.TextNode
214 YAHOO.widget.TaskNode.prototype.getNodeHtml = function() {
215 var sb = new Array();
217 sb[sb.length] = '<table border="0" cellpadding="0" cellspacing="0">';
218 sb[sb.length] = '<tr>';
220 for (var i=0;i<this.depth;++i) {
221 sb[sb.length] = '<td class="' + this.getDepthStyle(i) + '"> </td>';
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()"';
235 sb[sb.length] = ' onclick="javascript:' + this.getToggleLink() + '"> ';
236 sb[sb.length] = '</td>';
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] = ' </td>';
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()"';
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>';
273 YAHOO.widget.TaskNode.prototype.toString = function() {
274 return "TaskNode (" + this.index + ") " + this.label;