valvin
/
ttrss
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

enable checking of child checkboxes

This commit is contained in:
Andrew Dolgov 2011-11-10 16:16:38 +04:00
parent 227cdb7222
commit bd4dfcae6e
1 changed files with 61 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
lib/CheckBoxTree.js
View File

@ -9,10 +9,10 @@ dojo.provide("lib.CheckBoxStoreModel");
dojo.require("dijit.Tree"); dojo.require("dijit.Tree");
dojo.require("dijit.form.CheckBox"); dojo.require("dijit.form.CheckBox");
dojo.declare( "lib.CheckBoxStoreModel", dijit.tree.TreeStoreModel, dojo.declare( "lib.CheckBoxStoreModel", dijit.tree.TreeStoreModel,
{ {
// checkboxAll: Boolean // checkboxAll: Boolean
// If true, every node in the tree will receive a checkbox regardless if the 'checkbox' attribute // If true, every node in the tree will receive a checkbox regardless if the 'checkbox' attribute
// is specified in the dojo.data. // is specified in the dojo.data.
checkboxAll: true, checkboxAll: true,
@ -24,13 +24,13 @@ dojo.declare( "lib.CheckBoxStoreModel", dijit.tree.TreeStoreModel,
// checkboxRoot: Boolean // checkboxRoot: Boolean
// If true, the root node will receive a checkbox eventhough it's not a true entry in the store. // If true, the root node will receive a checkbox eventhough it's not a true entry in the store.
// This attribute is independent of the showRoot attribute of the tree itself. If the tree // This attribute is independent of the showRoot attribute of the tree itself. If the tree
// attribute 'showRoot' is set to false to checkbox for the root will not show either. // attribute 'showRoot' is set to false to checkbox for the root will not show either.
checkboxRoot: false, checkboxRoot: false,
// checkboxStrict: Boolean // checkboxStrict: Boolean
// If true, a strict parent-child checkbox relation is maintained. For example, if all children // If true, a strict parent-child checkbox relation is maintained. For example, if all children
// are checked the parent will automatically be checked or if any of the children are unchecked // are checked the parent will automatically be checked or if any of the children are unchecked
// the parent will be unchecked. // the parent will be unchecked.
checkboxStrict: true, checkboxStrict: true,
// checkboxIdent: String // checkboxIdent: String
@ -38,17 +38,17 @@ dojo.declare( "lib.CheckBoxStoreModel", dijit.tree.TreeStoreModel,
// state. Example: { name:'Egypt', type:'country', checkbox: true } // state. Example: { name:'Egypt', type:'country', checkbox: true }
// If a dojo.data.item has no 'checkbox' attribute specified it will depend on the attribute // If a dojo.data.item has no 'checkbox' attribute specified it will depend on the attribute
// 'checkboxAll' if one will be created automatically and if so what the initial state will be as // 'checkboxAll' if one will be created automatically and if so what the initial state will be as
// specified by 'checkboxState'. // specified by 'checkboxState'.
checkboxIdent: "checkbox", checkboxIdent: "checkbox",
updateCheckbox: function(/*dojo.data.Item*/ storeItem, /*Boolean*/ newState ) { updateCheckbox: function(/*dojo.data.Item*/ storeItem, /*Boolean*/ newState ) {
// summary: // summary:
// Update the checkbox state (true/false) for the item and the associated parent and // Update the checkbox state (true/false) for the item and the associated parent and
// child checkboxes if any. // child checkboxes if any.
// description: // description:
// Update a single checkbox state (true/false) for the item and the associated parent // Update a single checkbox state (true/false) for the item and the associated parent
// and child checkboxes if any. This function is called from the tree if a user checked // and child checkboxes if any. This function is called from the tree if a user checked
// or unchecked a checkbox on the tree. The parent and child tree nodes are updated to // or unchecked a checkbox on the tree. The parent and child tree nodes are updated to
// maintain consistency if 'checkboxStrict' is set to true. // maintain consistency if 'checkboxStrict' is set to true.
// storeItem: // storeItem:
// The item in the dojo.data.store whos checkbox state needs updating. // The item in the dojo.data.store whos checkbox state needs updating.
@ -57,11 +57,12 @@ dojo.declare( "lib.CheckBoxStoreModel", dijit.tree.TreeStoreModel,
// example: // example:
// | model.updateCheckboxState(item, true); // | model.updateCheckboxState(item, true);
// //
this._setCheckboxState( storeItem, newState ); this._setCheckboxState( storeItem, newState );
if( this.checkboxStrict ) { //if( this.checkboxStrict ) { I don't need all this 1-1 stuff, only parent -> child (fox)
this._updateChildCheckbox( storeItem, newState ); this._updateChildCheckbox( storeItem, newState );
this._updateParentCheckbox( storeItem, newState ); //this._updateParentCheckbox( storeItem, newState );
} //}
}, },
setAllChecked: function(checked) { setAllChecked: function(checked) {
var items = this.store._arrayOfAllItems; var items = this.store._arrayOfAllItems;
@ -77,7 +78,7 @@ dojo.declare( "lib.CheckBoxStoreModel", dijit.tree.TreeStoreModel,
var result = []; var result = [];
for (var i = 0; i < items.length; i++) { for (var i = 0; i < items.length; i++) {
if (this.store.getValue(items[i], 'checkbox')) if (this.store.getValue(items[i], 'checkbox'))
result.push(items[i]); result.push(items[i]);
} }
@ -102,9 +103,9 @@ dojo.declare( "lib.CheckBoxStoreModel", dijit.tree.TreeStoreModel,
// The item in the dojo.data.store whos checkbox state is returned. // The item in the dojo.data.store whos checkbox state is returned.
// example: // example:
// | var currState = model.getCheckboxState(item); // | var currState = model.getCheckboxState(item);
// //
var currState = undefined; var currState = undefined;
// Special handling required for the 'fake' root entry (the root is NOT a dojo.data.item). // Special handling required for the 'fake' root entry (the root is NOT a dojo.data.item).
// this stuff is only relevant for Forest store -fox // this stuff is only relevant for Forest store -fox
/* if ( storeItem == this.root ) { /* if ( storeItem == this.root ) {
@ -138,14 +139,14 @@ dojo.declare( "lib.CheckBoxStoreModel", dijit.tree.TreeStoreModel,
// Set/update the checkbox state on the dojo.data store. // Set/update the checkbox state on the dojo.data store.
// description: // description:
// Set/update the checkbox state on the dojo.data.store. Retreive the current // Set/update the checkbox state on the dojo.data.store. Retreive the current
// state of the checkbox and validate if an update is required, this will keep // state of the checkbox and validate if an update is required, this will keep
// update events to a minimum. On completion a 'onCheckboxChange' event is // update events to a minimum. On completion a 'onCheckboxChange' event is
// triggered. // triggered.
// If the current state is undefined (ie: no checkbox attribute specified for // If the current state is undefined (ie: no checkbox attribute specified for
// this dojo.data.item) the 'checkboxAll' attribute is checked to see if one // this dojo.data.item) the 'checkboxAll' attribute is checked to see if one
// needs to be created. In case of the root the 'checkboxRoot' attribute is checked. // needs to be created. In case of the root the 'checkboxRoot' attribute is checked.
// NOTE: the store.setValue function will create the 'checkbox' attribute for the // NOTE: the store.setValue function will create the 'checkbox' attribute for the
// item if none exists. // item if none exists.
// storeItem: // storeItem:
// The item in the dojo.data.store whos checkbox state is updated. // The item in the dojo.data.store whos checkbox state is updated.
// newState: // newState:
@ -154,7 +155,7 @@ dojo.declare( "lib.CheckBoxStoreModel", dijit.tree.TreeStoreModel,
// | model.setCheckboxState(item, true); // | model.setCheckboxState(item, true);
// //
var stateChanged = true; var stateChanged = true;
if( storeItem != this.root ) { if( storeItem != this.root ) {
var currState = this.store.getValue(storeItem, this.checkboxIdent); var currState = this.store.getValue(storeItem, this.checkboxIdent);
if( currState != newState && ( currState !== undefined || this.checkboxAll ) ) { if( currState != newState && ( currState !== undefined || this.checkboxAll ) ) {
@ -174,13 +175,13 @@ dojo.declare( "lib.CheckBoxStoreModel", dijit.tree.TreeStoreModel,
} }
return stateChanged; return stateChanged;
}, },
_updateChildCheckbox: function(/*dojo.data.Item*/ parentItem, /*Boolean*/ newState ) { _updateChildCheckbox: function(/*dojo.data.Item*/ parentItem, /*Boolean*/ newState ) {
// summary: // summary:
// Set all child checkboxes to true/false depending on the parent checkbox state. // Set all child checkboxes to true/false depending on the parent checkbox state.
// description: // description:
// If a parent checkbox changes state, all child and grandchild checkboxes will be // If a parent checkbox changes state, all child and grandchild checkboxes will be
// updated to reflect the change. For example, if the parent state is set to true, // updated to reflect the change. For example, if the parent state is set to true,
// all child and grandchild checkboxes will receive that same 'true' state. // all child and grandchild checkboxes will receive that same 'true' state.
// If a child checkbox changes state and has multiple parent, all of its parents // If a child checkbox changes state and has multiple parent, all of its parents
// need to be re-evaluated. // need to be re-evaluated.
@ -189,11 +190,12 @@ dojo.declare( "lib.CheckBoxStoreModel", dijit.tree.TreeStoreModel,
// newState: // newState:
// The new state of the checkbox: true or false // The new state of the checkbox: true or false
// //
if( this.mayHaveChildren( parentItem )) { if( this.mayHaveChildren( parentItem )) {
this.getChildren( parentItem, dojo.hitch( this, this.getChildren( parentItem, dojo.hitch( this,
function( children ) { function( children ) {
dojo.forEach( children, function(child) { dojo.forEach( children, function(child) {
if( this._setCheckboxState(child, newState) ) { if( this._setCheckboxState(child, newState) ) {
var parents = this._getParentsItem(child); var parents = this._getParentsItem(child);
if( parents.length > 1 ) { if( parents.length > 1 ) {
this._updateParentCheckbox( child, newState ); this._updateParentCheckbox( child, newState );
@ -206,7 +208,7 @@ dojo.declare( "lib.CheckBoxStoreModel", dijit.tree.TreeStoreModel,
}), }),
function(err) { function(err) {
console.error(this, ": updating child checkboxes: ", err); console.error(this, ": updating child checkboxes: ", err);
} }
); );
} }
}, },
@ -217,7 +219,7 @@ dojo.declare( "lib.CheckBoxStoreModel", dijit.tree.TreeStoreModel,
// description: // description:
// Update the parent checkbox state depending on the state of all child checkboxes. // Update the parent checkbox state depending on the state of all child checkboxes.
// The parent checkbox automatically changes state if ALL child checkboxes are true // The parent checkbox automatically changes state if ALL child checkboxes are true
// or false. If, as a result, the parent checkbox changes state, we will check if // or false. If, as a result, the parent checkbox changes state, we will check if
// its parent needs to be updated as well all the way upto the root. // its parent needs to be updated as well all the way upto the root.
// storeItem: // storeItem:
// The dojo.data.item whos parent checkboxes require updating. // The dojo.data.item whos parent checkboxes require updating.
@ -229,11 +231,11 @@ dojo.declare( "lib.CheckBoxStoreModel", dijit.tree.TreeStoreModel,
if( newState ) { // new state = true (checked) if( newState ) { // new state = true (checked)
this.getChildren( parentItem, dojo.hitch( this, this.getChildren( parentItem, dojo.hitch( this,
function(siblings) { function(siblings) {
var allChecked = true; var allChecked = true;
dojo.some( siblings, function(sibling) { dojo.some( siblings, function(sibling) {
siblState = this.getCheckboxState(sibling); siblState = this.getCheckboxState(sibling);
if( siblState !== undefined && allChecked ) if( siblState !== undefined && allChecked )
allChecked = siblState; allChecked = siblState;
return !(allChecked); return !(allChecked);
}, this ); }, this );
if( allChecked ) { if( allChecked ) {
@ -252,14 +254,14 @@ dojo.declare( "lib.CheckBoxStoreModel", dijit.tree.TreeStoreModel,
} }
}, this ); }, this );
}, },
_getParentsItem: function(/*dojo.data.Item*/ storeItem ) { _getParentsItem: function(/*dojo.data.Item*/ storeItem ) {
// summary: // summary:
// Get the parent(s) of a dojo.data item. // Get the parent(s) of a dojo.data item.
// description: // description:
// Get the parent(s) of a dojo.data item. The '_reverseRefMap' entry of the item is // Get the parent(s) of a dojo.data item. The '_reverseRefMap' entry of the item is
// used to identify the parent(s). A child will have a parent reference if the parent // used to identify the parent(s). A child will have a parent reference if the parent
// specified the '_reference' attribute. // specified the '_reference' attribute.
// For example: children:[{_reference:'Mexico'}, {_reference:'Canada'}, ... // For example: children:[{_reference:'Mexico'}, {_reference:'Canada'}, ...
// storeItem: // storeItem:
// The dojo.data.item whos parent(s) will be returned. // The dojo.data.item whos parent(s) will be returned.
@ -283,9 +285,9 @@ dojo.declare( "lib.CheckBoxStoreModel", dijit.tree.TreeStoreModel,
// Validate/normalize the parent(s) checkbox data in the dojo.data store. // Validate/normalize the parent(s) checkbox data in the dojo.data store.
// description: // description:
// Validate/normalize the parent-child checkbox relationship if the attribute // Validate/normalize the parent-child checkbox relationship if the attribute
// 'checkboxStrict' is set to true. This function is called as part of the post // 'checkboxStrict' is set to true. This function is called as part of the post
// creation of the Tree instance. All parent checkboxes are set to the appropriate // creation of the Tree instance. All parent checkboxes are set to the appropriate
// state according to the actual state(s) of their children. // state according to the actual state(s) of their children.
// This will potentionally overwrite whatever was specified for the parent in the // This will potentionally overwrite whatever was specified for the parent in the
// dojo.data store. This will garantee the tree is in a consistent state after startup. // dojo.data store. This will garantee the tree is in a consistent state after startup.
// storeItem: // storeItem:
@ -308,7 +310,7 @@ dojo.declare( "lib.CheckBoxStoreModel", dijit.tree.TreeStoreModel,
} }
childState = this.getCheckboxState( child ); childState = this.getCheckboxState( child );
if( childState !== undefined && allChecked ) if( childState !== undefined && allChecked )
allChecked = childState; allChecked = childState;
}, this); }, this);
if ( this._setCheckboxState( storeItem, allChecked) ) { if ( this._setCheckboxState( storeItem, allChecked) ) {
@ -317,19 +319,19 @@ dojo.declare( "lib.CheckBoxStoreModel", dijit.tree.TreeStoreModel,
}), }),
function(err) { function(err) {
console.error(this, ": validating checkbox data: ", err); console.error(this, ": validating checkbox data: ", err);
} }
); );
}, },
onCheckboxChange: function(/*dojo.data.Item*/ storeItem ) { onCheckboxChange: function(/*dojo.data.Item*/ storeItem ) {
// summary: // summary:
// Callback whenever a checkbox state has changed state, so that // Callback whenever a checkbox state has changed state, so that
// the Tree can update the checkbox. This callback is generally // the Tree can update the checkbox. This callback is generally
// triggered by the '_setCheckboxState' function. // triggered by the '_setCheckboxState' function.
// tags: // tags:
// callback // callback
} }
}); });
dojo.declare( "lib._CheckBoxTreeNode", dijit._TreeNode, dojo.declare( "lib._CheckBoxTreeNode", dijit._TreeNode,
@ -344,11 +346,11 @@ dojo.declare( "lib._CheckBoxTreeNode", dijit._TreeNode,
// description: // description:
// Create a checkbox on the CheckBoxTreeNode. The checkbox is ONLY created if a // Create a checkbox on the CheckBoxTreeNode. The checkbox is ONLY created if a
// valid reference was found in the dojo.data store or the attribute 'checkboxAll' // valid reference was found in the dojo.data store or the attribute 'checkboxAll'
// is set to true. If the current state is 'undefined' no reference was found and // is set to true. If the current state is 'undefined' no reference was found and
// 'checkboxAll' is set to false. // 'checkboxAll' is set to false.
// Note: the attribute 'checkboxAll' is validated by the getCheckboxState function // Note: the attribute 'checkboxAll' is validated by the getCheckboxState function
// therefore no need to do that here. (see getCheckboxState for details). // therefore no need to do that here. (see getCheckboxState for details).
// //
var currState = this.tree.model.getCheckboxState( this.item ); var currState = this.tree.model.getCheckboxState( this.item );
if( currState !== undefined ) { if( currState !== undefined ) {
this._checkbox = new dijit.form.CheckBox(); this._checkbox = new dijit.form.CheckBox();
@ -358,7 +360,7 @@ dojo.declare( "lib._CheckBoxTreeNode", dijit._TreeNode,
dojo.place(this._checkbox.domNode, this.expandoNode, 'after'); dojo.place(this._checkbox.domNode, this.expandoNode, 'after');
} }
}, },
postCreate: function() { postCreate: function() {
// summary: // summary:
// Handle the creation of the checkbox after the CheckBoxTreeNode has been instanciated. // Handle the creation of the checkbox after the CheckBoxTreeNode has been instanciated.
@ -372,21 +374,21 @@ dojo.declare( "lib._CheckBoxTreeNode", dijit._TreeNode,
dojo.declare( "lib.CheckBoxTree", dijit.Tree, dojo.declare( "lib.CheckBoxTree", dijit.Tree,
{ {
onNodeChecked: function(/*dojo.data.Item*/ storeItem, /*treeNode*/ treeNode) { onNodeChecked: function(/*dojo.data.Item*/ storeItem, /*treeNode*/ treeNode) {
// summary: // summary:
// Callback when a checkbox tree node is checked // Callback when a checkbox tree node is checked
// tags: // tags:
// callback // callback
}, },
onNodeUnchecked: function(/*dojo.data.Item*/ storeItem, /* treeNode */ treeNode) { onNodeUnchecked: function(/*dojo.data.Item*/ storeItem, /* treeNode */ treeNode) {
// summary: // summary:
// Callback when a checkbox tree node is unchecked // Callback when a checkbox tree node is unchecked
// tags: // tags:
// callback // callback
}, },
_onClick: function(/*TreeNode*/ nodeWidget, /*Event*/ e) { _onClick: function(/*TreeNode*/ nodeWidget, /*Event*/ e) {
// summary: // summary:
// Translates click events into commands for the controller to process // Translates click events into commands for the controller to process
@ -394,7 +396,7 @@ dojo.declare( "lib.CheckBoxTree", dijit.Tree,
// the _onClick function is called whenever a 'click' is detected. This // the _onClick function is called whenever a 'click' is detected. This
// instance of _onClick only handles the click events associated with // instance of _onClick only handles the click events associated with
// the checkbox whos DOM name is INPUT. // the checkbox whos DOM name is INPUT.
// //
var domElement = e.target; var domElement = e.target;
// Only handle checkbox clicks here // Only handle checkbox clicks here
@ -404,8 +406,8 @@ dojo.declare( "lib.CheckBoxTree", dijit.Tree,
this._publish("execute", { item: nodeWidget.item, node: nodeWidget} ); this._publish("execute", { item: nodeWidget.item, node: nodeWidget} );
// Go tell the model to update the checkbox state // Go tell the model to update the checkbox state
this.model.updateCheckbox( nodeWidget.item, nodeWidget._checkbox.checked ); this.model.updateCheckbox( nodeWidget.item, nodeWidget._checkbox.checked );
// Generate some additional events // Generate some additional events
//this.onClick( nodeWidget.item, nodeWidget, e ); //this.onClick( nodeWidget.item, nodeWidget, e );
if(nodeWidget._checkbox.checked) { if(nodeWidget._checkbox.checked) {
@ -415,19 +417,19 @@ dojo.declare( "lib.CheckBoxTree", dijit.Tree,
} }
this.focusNode(nodeWidget); this.focusNode(nodeWidget);
}, },
_onCheckboxChange: function(/*dojo.data.Item*/ storeItem ) { _onCheckboxChange: function(/*dojo.data.Item*/ storeItem ) {
// summary: // summary:
// Processes notification of a change to a checkbox state (triggered by the model). // Processes notification of a change to a checkbox state (triggered by the model).
// description: // description:
// Whenever the model changes the state of a checkbox in the dojo.data.store it will // Whenever the model changes the state of a checkbox in the dojo.data.store it will
// trigger the 'onCheckboxChange' event allowing the Tree to make the same changes // trigger the 'onCheckboxChange' event allowing the Tree to make the same changes
// on the tree Node. There are several conditions why a tree node or checkbox does not // on the tree Node. There are several conditions why a tree node or checkbox does not
// exists: // exists:
// a) The node has not been created yet (the user has not expanded the tree node yet). // a) The node has not been created yet (the user has not expanded the tree node yet).
// b) The checkbox may be null if condition (a) exists or no 'checkbox' attribute was // b) The checkbox may be null if condition (a) exists or no 'checkbox' attribute was
// specified for the associated dojo.data.item and the attribute 'checkboxAll' is // specified for the associated dojo.data.item and the attribute 'checkboxAll' is
// set to false. // set to false.
// tags: // tags:
// callback // callback
var model = this.model, var model = this.model,
@ -443,13 +445,13 @@ dojo.declare( "lib.CheckBoxTree", dijit.Tree,
} }
}, this ); }, this );
} }
}, },
postCreate: function() { postCreate: function() {
// summary: // summary:
// Handle any specifics related to the tree and model after the instanciation of the Tree. // Handle any specifics related to the tree and model after the instanciation of the Tree.
// description: // description:
// Validate if we have a 'write' store first. Subscribe to the 'onCheckboxChange' event // Validate if we have a 'write' store first. Subscribe to the 'onCheckboxChange' event
// (triggered by the model) and kickoff the initial checkbox data validation. // (triggered by the model) and kickoff the initial checkbox data validation.
// //
var store = this.model.store; var store = this.model.store;