]>
git.wh0rd.org - tt-rss.git/blob - lib/CheckBoxTree.js
1 //dojo.provide("lib.CheckBoxTree");
2 //dojo.provide("lib.CheckBoxStoreModel");
4 // THIS WIDGET IS BASED ON DOJO/DIJIT 1.4.0 AND WILL NOT WORK WITH PREVIOUS VERSIONS
6 // Release date: 02/05/2010
9 //dojo.require("dijit.Tree");
10 //dojo.require("dijit.form.CheckBox");
12 require(["dojo/_base/declare", "dijit/tree/TreeStoreModel"], function (declare
) {
14 return declare( "lib.CheckBoxStoreModel", dijit
.tree
.TreeStoreModel
,
16 // checkboxAll: Boolean
17 // If true, every node in the tree will receive a checkbox regardless if the 'checkbox' attribute
18 // is specified in the dojo.data.
21 // checkboxState: Boolean
22 // The default state applied to every checkbox unless otherwise specified in the dojo.data.
23 // (see also: checkboxIdent)
26 // checkboxRoot: Boolean
27 // If true, the root node will receive a checkbox eventhough it's not a true entry in the store.
28 // This attribute is independent of the showRoot attribute of the tree itself. If the tree
29 // attribute 'showRoot' is set to false to checkbox for the root will not show either.
32 // checkboxStrict: Boolean
33 // If true, a strict parent-child checkbox relation is maintained. For example, if all children
34 // are checked the parent will automatically be checked or if any of the children are unchecked
35 // the parent will be unchecked.
38 // checkboxIdent: String
39 // The attribute name (attribute of the dojo.data.item) that specifies that items checkbox initial
40 // state. Example: { name:'Egypt', type:'country', checkbox: true }
41 // If a dojo.data.item has no 'checkbox' attribute specified it will depend on the attribute
42 // 'checkboxAll' if one will be created automatically and if so what the initial state will be as
43 // specified by 'checkboxState'.
44 checkboxIdent
: "checkbox",
46 updateCheckbox: function(/*dojo.data.Item*/ storeItem
, /*Boolean*/ newState
) {
48 // Update the checkbox state (true/false) for the item and the associated parent and
49 // child checkboxes if any.
51 // Update a single checkbox state (true/false) for the item and the associated parent
52 // and child checkboxes if any. This function is called from the tree if a user checked
53 // or unchecked a checkbox on the tree. The parent and child tree nodes are updated to
54 // maintain consistency if 'checkboxStrict' is set to true.
56 // The item in the dojo.data.store whos checkbox state needs updating.
58 // The new state of the checkbox: true or false
60 // | model.updateCheckboxState(item, true);
63 this._setCheckboxState( storeItem
, newState
);
64 //if( this.checkboxStrict ) { I don't need all this 1-1 stuff, only parent -> child (fox)
65 this._updateChildCheckbox( storeItem
, newState
);
66 //this._updateParentCheckbox( storeItem, newState );
69 setAllChecked: function(checked
) {
70 var items
= this.store
._arrayOfAllItems
;
71 this.setCheckboxState(items
, checked
);
73 setCheckboxState: function(items
, checked
) {
74 for (var i
= 0; i
< items
.length
; i
++) {
75 this._setCheckboxState(items
[i
], checked
);
78 getCheckedItems: function() {
79 var items
= this.store
._arrayOfAllItems
;
82 for (var i
= 0; i
< items
.length
; i
++) {
83 if (this.store
.getValue(items
[i
], 'checkbox'))
84 result
.push(items
[i
]);
90 getCheckboxState: function(/*dojo.data.Item*/ storeItem
) {
92 // Get the current checkbox state from the dojo.data.store.
94 // Get the current checkbox state from the dojo.data store. A checkbox can have three
95 // different states: true, false or undefined. Undefined in this context means no
96 // checkbox identifier (checkboxIdent) was found in the dojo.data store. Depending on
97 // the checkbox attributes as specified above the following will take place:
98 // a) If the current checkbox state is undefined and the checkbox attribute 'checkboxAll' or
99 // 'checkboxRoot' is true one will be created and the default state 'checkboxState' will
101 // b) If the current state is undefined and 'checkboxAll' is false the state undefined remains
102 // unchanged and is returned. This will prevent any tree node from creating a checkbox.
105 // The item in the dojo.data.store whos checkbox state is returned.
107 // | var currState = model.getCheckboxState(item);
109 var currState
= undefined;
111 // Special handling required for the 'fake' root entry (the root is NOT a dojo.data.item).
112 // this stuff is only relevant for Forest store -fox
113 /* if ( storeItem == this.root ) {
114 if( typeof(storeItem.checkbox) == "undefined" ) {
115 this.root.checkbox = undefined; // create a new checbox reference as undefined.
116 if( this.checkboxRoot ) {
117 currState = this.root.checkbox = this.checkboxState;
120 currState = this.root.checkbox;
122 } else { // a valid dojo.store.item
123 currState = this.store.getValue(storeItem, this.checkboxIdent);
124 if( currState == undefined && this.checkboxAll) {
125 this._setCheckboxState( storeItem, this.checkboxState );
126 currState = this.checkboxState;
130 currState
= this.store
.getValue(storeItem
, this.checkboxIdent
);
131 if( currState
== undefined && this.checkboxAll
) {
132 this._setCheckboxState( storeItem
, this.checkboxState
);
133 currState
= this.checkboxState
;
136 return currState
; // the current state of the checkbox (true/false or undefined)
139 _setCheckboxState: function(/*dojo.data.Item*/ storeItem
, /*Boolean*/ newState
) {
141 // Set/update the checkbox state on the dojo.data store.
143 // Set/update the checkbox state on the dojo.data.store. Retreive the current
144 // state of the checkbox and validate if an update is required, this will keep
145 // update events to a minimum. On completion a 'onCheckboxChange' event is
147 // If the current state is undefined (ie: no checkbox attribute specified for
148 // this dojo.data.item) the 'checkboxAll' attribute is checked to see if one
149 // needs to be created. In case of the root the 'checkboxRoot' attribute is checked.
150 // NOTE: the store.setValue function will create the 'checkbox' attribute for the
151 // item if none exists.
153 // The item in the dojo.data.store whos checkbox state is updated.
155 // The new state of the checkbox: true or false
157 // | model.setCheckboxState(item, true);
159 var stateChanged
= true;
161 if( storeItem
!= this.root
) {
162 var currState
= this.store
.getValue(storeItem
, this.checkboxIdent
);
163 if( currState
!= newState
&& ( currState
!== undefined || this.checkboxAll
) ) {
164 this.store
.setValue(storeItem
, this.checkboxIdent
, newState
);
166 stateChanged
= false; // No changes to the checkbox
168 } else { // Tree root instance
169 if( this.root
.checkbox
!= newState
&& ( this.root
.checkbox
!== undefined || this.checkboxRoot
) ) {
170 this.root
.checkbox
= newState
;
172 stateChanged
= false;
175 if( stateChanged
) { // In case of any changes trigger the update event.
176 this.onCheckboxChange(storeItem
);
181 _updateChildCheckbox: function(/*dojo.data.Item*/ parentItem
, /*Boolean*/ newState
) {
183 // Set all child checkboxes to true/false depending on the parent checkbox state.
185 // If a parent checkbox changes state, all child and grandchild checkboxes will be
186 // updated to reflect the change. For example, if the parent state is set to true,
187 // all child and grandchild checkboxes will receive that same 'true' state.
188 // If a child checkbox changes state and has multiple parent, all of its parents
189 // need to be re-evaluated.
191 // The parent dojo.data.item whos child/grandchild checkboxes require updating.
193 // The new state of the checkbox: true or false
196 if( this.mayHaveChildren( parentItem
)) {
197 this.getChildren( parentItem
, dojo
.hitch( this,
198 function( children
) {
199 dojo
.forEach( children
, function(child
) {
200 if( this._setCheckboxState(child
, newState
) ) {
201 var parents
= this._getParentsItem(child
);
202 if( parents
.length
> 1 ) {
203 this._updateParentCheckbox( child
, newState
);
206 if( this.mayHaveChildren( child
)) {
207 this._updateChildCheckbox( child
, newState
);
212 console
.error(this, ": updating child checkboxes: ", err
);
218 _updateParentCheckbox: function(/*dojo.data.Item*/ storeItem
, /*Boolean*/ newState
) {
220 // Update the parent checkbox state depending on the state of all child checkboxes.
222 // Update the parent checkbox state depending on the state of all child checkboxes.
223 // The parent checkbox automatically changes state if ALL child checkboxes are true
224 // or false. If, as a result, the parent checkbox changes state, we will check if
225 // its parent needs to be updated as well all the way upto the root.
227 // The dojo.data.item whos parent checkboxes require updating.
229 // The new state of the checkbox: true or false
231 var parents
= this._getParentsItem(storeItem
);
232 dojo
.forEach( parents
, function( parentItem
) {
233 if( newState
) { // new state = true (checked)
234 this.getChildren( parentItem
, dojo
.hitch( this,
236 var allChecked
= true;
237 dojo
.some( siblings
, function(sibling
) {
238 siblState
= this.getCheckboxState(sibling
);
239 if( siblState
!== undefined && allChecked
)
240 allChecked
= siblState
;
241 return !(allChecked
);
244 this._setCheckboxState( parentItem
, true );
245 this._updateParentCheckbox( parentItem
, true );
249 console
.error(this, ": updating parent checkboxes: ", err
);
252 } else { // new state = false (unchecked)
253 if( this._setCheckboxState( parentItem
, false ) ) {
254 this._updateParentCheckbox( parentItem
, false );
260 _getParentsItem: function(/*dojo.data.Item*/ storeItem
) {
262 // Get the parent(s) of a dojo.data item.
264 // Get the parent(s) of a dojo.data item. The '_reverseRefMap' entry of the item is
265 // used to identify the parent(s). A child will have a parent reference if the parent
266 // specified the '_reference' attribute.
267 // For example: children:[{_reference:'Mexico'}, {_reference:'Canada'}, ...
269 // The dojo.data.item whos parent(s) will be returned.
273 if( storeItem
!= this.root
) {
274 var references
= storeItem
[this.store
._reverseRefMap
];
275 for(itemId
in references
) {
276 parents
.push(this.store
._itemsByIdentity
[itemId
]);
278 if (!parents
.length
) {
279 parents
.push(this.root
);
282 return parents
; // parent(s) of a dojo.data.item (Array of dojo.data.items)
285 validateData: function(/*dojo.data.Item*/ storeItem
, /*thisObject*/ scope
) {
287 // Validate/normalize the parent(s) checkbox data in the dojo.data store.
289 // Validate/normalize the parent-child checkbox relationship if the attribute
290 // 'checkboxStrict' is set to true. This function is called as part of the post
291 // creation of the Tree instance. All parent checkboxes are set to the appropriate
292 // state according to the actual state(s) of their children.
293 // This will potentionally overwrite whatever was specified for the parent in the
294 // dojo.data store. This will garantee the tree is in a consistent state after startup.
296 // The element to start traversing the dojo.data.store, typically model.root
298 // The scope to use when this method executes.
300 // | this.model.validateData(this.model.root, this.model);
302 if( !scope
.checkboxStrict
) {
305 scope
.getChildren( storeItem
, dojo
.hitch( scope
,
307 var allChecked
= true;
309 dojo
.forEach( children
, function( child
) {
310 if( this.mayHaveChildren( child
)) {
311 this.validateData( child
, this );
313 childState
= this.getCheckboxState( child
);
314 if( childState
!== undefined && allChecked
)
315 allChecked
= childState
;
318 if ( this._setCheckboxState( storeItem
, allChecked
) ) {
319 this._updateParentCheckbox( storeItem
, allChecked
);
323 console
.error(this, ": validating checkbox data: ", err
);
328 onCheckboxChange: function(/*dojo.data.Item*/ storeItem
) {
330 // Callback whenever a checkbox state has changed state, so that
331 // the Tree can update the checkbox. This callback is generally
332 // triggered by the '_setCheckboxState' function.
341 require(["dojo/_base/declare", "dojo/dom-construct", "dijit/Tree"], function (declare
, domConstruct
) {
343 return declare("lib._CheckBoxTreeNode", dijit
._TreeNode
,
345 // _checkbox: [protected] dojo.doc.element
346 // Local reference to the dojo.doc.element of type 'checkbox'
349 _createCheckbox: function () {
351 // Create a checkbox on the CheckBoxTreeNode
353 // Create a checkbox on the CheckBoxTreeNode. The checkbox is ONLY created if a
354 // valid reference was found in the dojo.data store or the attribute 'checkboxAll'
355 // is set to true. If the current state is 'undefined' no reference was found and
356 // 'checkboxAll' is set to false.
357 // Note: the attribute 'checkboxAll' is validated by the getCheckboxState function
358 // therefore no need to do that here. (see getCheckboxState for details).
360 var currState
= this.tree
.model
.getCheckboxState(this.item
);
361 if (currState
!== undefined) {
362 this._checkbox
= new dijit
.form
.CheckBox();
363 //this._checkbox = dojo.doc.createElement('input');
364 this._checkbox
.type
= 'checkbox';
365 this._checkbox
.attr('checked', currState
);
366 domConstruct
.place(this._checkbox
.domNode
, this.expandoNode
, 'after');
370 postCreate: function () {
372 // Handle the creation of the checkbox after the CheckBoxTreeNode has been instanciated.
374 // Handle the creation of the checkbox after the CheckBoxTreeNode has been instanciated.
375 this._createCheckbox();
376 this.inherited(arguments
);
382 require(["dojo/_base/declare", "dijit/Tree"], function (declare
) {
384 return declare( "lib.CheckBoxTree", dijit
.Tree
,
387 onNodeChecked: function(/*dojo.data.Item*/ storeItem
, /*treeNode*/ treeNode
) {
389 // Callback when a checkbox tree node is checked
394 onNodeUnchecked: function(/*dojo.data.Item*/ storeItem
, /* treeNode */ treeNode
) {
396 // Callback when a checkbox tree node is unchecked
401 _onClick: function(/*TreeNode*/ nodeWidget
, /*Event*/ e
) {
403 // Translates click events into commands for the controller to process
405 // the _onClick function is called whenever a 'click' is detected. This
406 // instance of _onClick only handles the click events associated with
407 // the checkbox whos DOM name is INPUT.
409 var domElement
= e
.target
;
411 // Only handle checkbox clicks here
412 if(domElement
.type
!= 'checkbox') {
413 return this.inherited( arguments
);
416 this._publish("execute", { item
: nodeWidget
.item
, node
: nodeWidget
} );
417 // Go tell the model to update the checkbox state
419 this.model
.updateCheckbox( nodeWidget
.item
, nodeWidget
._checkbox
.checked
);
420 // Generate some additional events
421 //this.onClick( nodeWidget.item, nodeWidget, e );
422 if(nodeWidget
._checkbox
.checked
) {
423 this.onNodeChecked( nodeWidget
.item
, nodeWidget
);
425 this.onNodeUnchecked( nodeWidget
.item
, nodeWidget
);
427 this.focusNode(nodeWidget
);
430 _onCheckboxChange: function(/*dojo.data.Item*/ storeItem
) {
432 // Processes notification of a change to a checkbox state (triggered by the model).
434 // Whenever the model changes the state of a checkbox in the dojo.data.store it will
435 // trigger the 'onCheckboxChange' event allowing the Tree to make the same changes
436 // on the tree Node. There are several conditions why a tree node or checkbox does not
438 // a) The node has not been created yet (the user has not expanded the tree node yet).
439 // b) The checkbox may be null if condition (a) exists or no 'checkbox' attribute was
440 // specified for the associated dojo.data.item and the attribute 'checkboxAll' is
444 var model
= this.model
,
445 identity
= model
.getIdentity(storeItem
),
446 nodes
= this._itemNodesMap
[identity
];
448 // As of dijit.Tree 1.4 multiple references (parents) are supported, therefore we may have
449 // to update multiple nodes which are all associated with the same dojo.data.item.
451 dojo
.forEach( nodes
, function(node
) {
452 if( node
._checkbox
!= null ) {
453 node
._checkbox
.attr('checked', this.model
.getCheckboxState( storeItem
));
459 postCreate: function() {
461 // Handle any specifics related to the tree and model after the instanciation of the Tree.
463 // Validate if we have a 'write' store first. Subscribe to the 'onCheckboxChange' event
464 // (triggered by the model) and kickoff the initial checkbox data validation.
466 var store
= this.model
.store
;
467 if(!store
.getFeatures()['dojo.data.api.Write']){
468 throw new Error("lib.CheckboxTree: store must support dojo.data.Write");
470 this.connect(this.model
, "onCheckboxChange", "_onCheckboxChange");
471 this.model
.validateData( this.model
.root
, this.model
);
472 this.inherited(arguments
);
475 _createTreeNode: function( args
) {
477 // Create a new CheckboxTreeNode instance.
479 // Create a new CheckboxTreeNode instance.
480 return new lib
._CheckBoxTreeNode(args
);