git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojox/form/CheckedMultiSelect.js

   1 if(!dojo._hasResource["dojox.form.CheckedMultiSelect"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
   2 dojo._hasResource["dojox.form.CheckedMultiSelect"] = true;
   3 dojo.provide("dojox.form.CheckedMultiSelect");
   4
   5 dojo.require("dijit.form.MultiSelect");
   6 dojo.require("dijit.form.CheckBox");
   7
   8 dojo.declare("dojox.form._CheckedMultiSelectItem",
   9         [dijit._Widget, dijit._Templated],
  10         {
  11         // summary:
  12         //              The individual items for a CheckedMultiSelect
  13
  14         widgetsInTemplate: true,
  15         templateString:"<div class=\"dijitReset ${baseClass}\"\n\t><input class=\"${baseClass}Box\" dojoType=\"dijit.form.CheckBox\" dojoAttachPoint=\"checkBox\" dojoAttachEvent=\"_onClick:_changeBox\" type=\"checkbox\" \n\t><div class=\"dijitInline ${baseClass}Label\" dojoAttachPoint=\"labelNode\" dojoAttachEvent=\"onmousedown:_onMouse,onmouseover:_onMouse,onmouseout:_onMouse,onclick:_onClick\">${option.innerHTML}</div\n></div>\n",
  16
  17         baseClass: "dojoxMultiSelectItem",
  18
  19         // option: Element
  20         //              The option that is associated with this item
  21         option: null,
  22         parent: null,
  23
  24         // disabled: boolean
  25         //              Whether or not this widget is disabled
  26         disabled: false,
  27
  28         _changeBox: function(){
  29                 // summary:
  30                 //              Called to force the select to match the state of the check box
  31                 //              (only on click of the checkbox)
  32                 this.option.selected = this.checkBox.getValue() && true;
  33
  34                 // fire the parent's change
  35                 this.parent._onChange();
  36
  37                 // refocus the parent
  38                 this.parent.focus();
  39         },
  40
  41         _labelClick: function(){
  42                 // summary:
  43                 //              Called when the label portion is clicked
  44                 dojo.stopEvent(e);
  45                 if(this.disabled){
  46                         return;
  47                 }
  48                 var cb = this.checkBox;
  49                 cb.setValue(!cb.getValue());
  50                 this._changeBox();
  51         },
  52
  53         _onMouse: function(e){
  54                 // summary:
  55                 //              Sets the hover state depending on mouse state (passes through
  56                 //              to the check box)
  57                 this.checkBox._onMouse(e);
  58         },
  59
  60         _onClick: function(e){
  61                 // summary:
  62                 //              Sets the click state (passes through to the check box)
  63                 this.checkBox._onClick(e);
  64         },
  65
  66         _updateBox: function(){
  67                 // summary:
  68                 //              Called to force the box to match the state of the select
  69                 this.checkBox.setValue(this.option.selected);
  70         },
  71
  72         setAttribute: function(attr, value){
  73                 // summary:
  74                 //              Disables (or enables) all the children as well
  75                 this.inherited(arguments);
  76                 switch(attr){
  77                         case "disabled":
  78                                 this.checkBox.setAttribute(attr, value);
  79                                 break;
  80                         default:
  81                                 break;
  82                 }
  83         }
  84 });
  85
  86 dojo.declare("dojox.form.CheckedMultiSelect", dijit.form.MultiSelect, {
  87         // summary:
  88         //              Extends the core dijit MultiSelect to provide a "checkbox" selector
  89
  90         templateString: "",
  91         templateString:"<div class=\"dijit dijitReset dijitInline\" dojoAttachEvent=\"onmousedown:_mouseDown,onclick:focus\"\n\t><select class=\"${baseClass}Select\" multiple=\"true\" dojoAttachPoint=\"containerNode,focusNode\" dojoAttachEvent=\"onchange: _onChange\"></select\n\t><div dojoAttachPoint=\"wrapperDiv\"></div\n></div>\n",
  92
  93         baseClass: "dojoxMultiSelect",
  94
  95         // children: dojox.form._CheckedMultiSelectItem[]
  96         //              Array of all our children (for updating them)
  97         children: [],
  98
  99         /*=====
 100         dojox.form.__SelectOption = function(){
 101                 //      value: String
 102                 //              The value of the option.  Setting to empty (or missing) will
 103                 //              place a separator at that location
 104                 //      label: String
 105                 //              The label for our option.  It can contain html tags.
 106                 this.value = value;
 107                 this.label = label;
 108         }
 109         =====*/
 110
 111         // options: dojox.form.__SelectOption[]
 112         //              our set of options
 113         options: null,
 114
 115         _mouseDown: function(e){
 116                 // summary:
 117                 //              Cancels the mousedown event to prevent others from stealing
 118                 //              focus
 119                 dojo.stopEvent(e);
 120         },
 121
 122         _updateChildren: function(){
 123                 // summary:
 124                 //              Called to update the checked states of my children to match me
 125                 dojo.forEach(this.children,function(child){
 126                         child._updateBox();
 127                 });
 128         },
 129
 130         _addChild: function(/*Element*/ option){
 131                 // summary:
 132                 //              Adds and returns a child for the given option.
 133                 var item = new dojox.form._CheckedMultiSelectItem({
 134                         option: option,
 135                         parent: this
 136                 });
 137                 this.wrapperDiv.appendChild(item.domNode);
 138                 return item;
 139         },
 140
 141         _loadChildren: function(){
 142                 // summary:
 143                 //              Reloads the children to match our box.
 144
 145                 // Destroy any existing children before loading them again
 146                 dojo.forEach(this.children, function(child){
 147                         child.destroyRecursive();
 148                 });
 149                 this.children = dojo.query("option", this.domNode).map(function(child){
 150                         return this._addChild(child);
 151                 }, this);
 152                 this.options = dojo.map(this.children, function(child){
 153                         var opt = child.option;
 154                         return { value:opt.value, label: opt.text };
 155                 });
 156                 // Update the statuses of the children
 157                 this._updateChildren();
 158         },
 159
 160         addOption: function(/* dojox.form.__SelectOption or string, optional */ value, /* string? */ label){
 161                 // summary: Adds the given option to the select
 162
 163                 var o = new Option("","");
 164                 o.value = value.value || value;
 165                 o.innerHTML = value.label || label;
 166                 this.containerNode.appendChild(o);
 167         },
 168
 169         removeOption: function(/*String*/ optionId){
 170                 dojo.query("option[value=" + optionId + "]", this.domNode).forEach(function(node){
 171                         node.parentNode.removeChild(node);
 172                 }, this);
 173         },
 174
 175         setOptionLabel: function(/*string*/ optionId, /*string*/ label){
 176                 dojo.query("option[value=" + optionId + "]", this.domNode).forEach(function(node){
 177                         node.innerHTML = label;
 178                 });
 179         },
 180
 181         addSelected: function(select){
 182                 this.inherited(arguments);
 183
 184                 // Reload my children and the children of the guy pointing to me
 185                 if(select._loadChildren){
 186                         select._loadChildren();
 187                 }
 188                 this._loadChildren();
 189         },
 190
 191         setAttribute: function(attr, value){
 192                 // summary:
 193                 //              Disable (or enable) all the children as well
 194                 this.inherited(arguments);
 195                 switch(attr){
 196                         case "disabled":
 197                                 dojo.forEach(this.children, function(node){
 198                                         if(node && node.setAttribute){
 199                                                 node.setAttribute(attr, value);
 200                                         }
 201                                 });
 202                                 break;
 203                         default:
 204                                 break;
 205                 }
 206         },
 207
 208         startup: function(){
 209                 if(this._started){ return; }
 210                 this.inherited(arguments);
 211
 212                 // Load children and make connections
 213                 this._loadChildren();
 214                 this.connect(this, "setValue", "_updateChildren");
 215                 this.connect(this, "invertSelection", "_updateChildren");
 216                 this.connect(this, "addOption", "_loadChildren");
 217                 this.connect(this, "removeOption", "_loadChildren");
 218                 this.connect(this, "setOptionLabel", "_loadChildren");
 219                 this._started = true;
 220         }
 221 });
 222
 223 }