204 lines
6.6 KiB
JavaScript
204 lines
6.6 KiB
JavaScript
/*
|
|
Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved.
|
|
Available via Academic Free License >= 2.1 OR the modified BSD license.
|
|
see: http://dojotoolkit.org/license for details
|
|
*/
|
|
|
|
|
|
if(!dojo._hasResource["dijit.form.CheckBox"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
|
|
dojo._hasResource["dijit.form.CheckBox"] = true;
|
|
dojo.provide("dijit.form.CheckBox");
|
|
dojo.require("dijit.form.ToggleButton");
|
|
|
|
|
|
dojo.declare(
|
|
"dijit.form.CheckBox",
|
|
dijit.form.ToggleButton,
|
|
{
|
|
// summary:
|
|
// Same as an HTML checkbox, but with fancy styling.
|
|
//
|
|
// description:
|
|
// User interacts with real html inputs.
|
|
// On onclick (which occurs by mouse click, space-bar, or
|
|
// using the arrow keys to switch the selected radio button),
|
|
// we update the state of the checkbox/radio.
|
|
//
|
|
// There are two modes:
|
|
// 1. High contrast mode
|
|
// 2. Normal mode
|
|
//
|
|
// In case 1, the regular html inputs are shown and used by the user.
|
|
// In case 2, the regular html inputs are invisible but still used by
|
|
// the user. They are turned quasi-invisible and overlay the background-image.
|
|
|
|
templateString: dojo.cache("dijit.form", "templates/CheckBox.html", "<div class=\"dijit dijitReset dijitInline\" role=\"presentation\"\n\t><input\n\t \t${!nameAttrSetting} type=\"${type}\" ${checkedAttrSetting}\n\t\tclass=\"dijitReset dijitCheckBoxInput\"\n\t\tdojoAttachPoint=\"focusNode\"\n\t \tdojoAttachEvent=\"onclick:_onClick\"\n/></div>\n"),
|
|
|
|
baseClass: "dijitCheckBox",
|
|
|
|
// type: [private] String
|
|
// type attribute on <input> node.
|
|
// Overrides `dijit.form.Button.type`. Users should not change this value.
|
|
type: "checkbox",
|
|
|
|
// value: String
|
|
// As an initialization parameter, equivalent to value field on normal checkbox
|
|
// (if checked, the value is passed as the value when form is submitted).
|
|
//
|
|
// However, get('value') will return either the string or false depending on
|
|
// whether or not the checkbox is checked.
|
|
//
|
|
// set('value', string) will check the checkbox and change the value to the
|
|
// specified string
|
|
//
|
|
// set('value', boolean) will change the checked state.
|
|
value: "on",
|
|
|
|
// readOnly: Boolean
|
|
// Should this widget respond to user input?
|
|
// In markup, this is specified as "readOnly".
|
|
// Similar to disabled except readOnly form values are submitted.
|
|
readOnly: false,
|
|
|
|
// the attributeMap should inherit from dijit.form._FormWidget.prototype.attributeMap
|
|
// instead of ToggleButton as the icon mapping has no meaning for a CheckBox
|
|
attributeMap: dojo.delegate(dijit.form._FormWidget.prototype.attributeMap, {
|
|
readOnly: "focusNode"
|
|
}),
|
|
|
|
_setReadOnlyAttr: function(/*Boolean*/ value){
|
|
this._set("readOnly", value);
|
|
dojo.attr(this.focusNode, 'readOnly', value);
|
|
dijit.setWaiState(this.focusNode, "readonly", value);
|
|
},
|
|
|
|
_setValueAttr: function(/*String|Boolean*/ newValue, /*Boolean*/ priorityChange){
|
|
// summary:
|
|
// Handler for value= attribute to constructor, and also calls to
|
|
// set('value', val).
|
|
// description:
|
|
// During initialization, just saves as attribute to the <input type=checkbox>.
|
|
//
|
|
// After initialization,
|
|
// when passed a boolean, controls whether or not the CheckBox is checked.
|
|
// If passed a string, changes the value attribute of the CheckBox (the one
|
|
// specified as "value" when the CheckBox was constructed (ex: <input
|
|
// dojoType="dijit.CheckBox" value="chicken">)
|
|
if(typeof newValue == "string"){
|
|
this._set("value", newValue);
|
|
dojo.attr(this.focusNode, 'value', newValue);
|
|
newValue = true;
|
|
}
|
|
if(this._created){
|
|
this.set('checked', newValue, priorityChange);
|
|
}
|
|
},
|
|
_getValueAttr: function(){
|
|
// summary:
|
|
// Hook so get('value') works.
|
|
// description:
|
|
// If the CheckBox is checked, returns the value attribute.
|
|
// Otherwise returns false.
|
|
return (this.checked ? this.value : false);
|
|
},
|
|
|
|
// Override dijit.form.Button._setLabelAttr() since we don't even have a containerNode.
|
|
// Normally users won't try to set label, except when CheckBox or RadioButton is the child of a dojox.layout.TabContainer
|
|
_setLabelAttr: undefined,
|
|
|
|
postMixInProperties: function(){
|
|
if(this.value == ""){
|
|
this.value = "on";
|
|
}
|
|
|
|
// Need to set initial checked state as part of template, so that form submit works.
|
|
// dojo.attr(node, "checked", bool) doesn't work on IEuntil node has been attached
|
|
// to <body>, see #8666
|
|
this.checkedAttrSetting = this.checked ? "checked" : "";
|
|
|
|
this.inherited(arguments);
|
|
},
|
|
|
|
_fillContent: function(/*DomNode*/ source){
|
|
// Override Button::_fillContent() since it doesn't make sense for CheckBox,
|
|
// since CheckBox doesn't even have a container
|
|
},
|
|
|
|
reset: function(){
|
|
// Override ToggleButton.reset()
|
|
|
|
this._hasBeenBlurred = false;
|
|
|
|
this.set('checked', this.params.checked || false);
|
|
|
|
// Handle unlikely event that the <input type=checkbox> value attribute has changed
|
|
this._set("value", this.params.value || "on");
|
|
dojo.attr(this.focusNode, 'value', this.value);
|
|
},
|
|
|
|
_onFocus: function(){
|
|
if(this.id){
|
|
dojo.query("label[for='"+this.id+"']").addClass("dijitFocusedLabel");
|
|
}
|
|
this.inherited(arguments);
|
|
},
|
|
|
|
_onBlur: function(){
|
|
if(this.id){
|
|
dojo.query("label[for='"+this.id+"']").removeClass("dijitFocusedLabel");
|
|
}
|
|
this.inherited(arguments);
|
|
},
|
|
|
|
_onClick: function(/*Event*/ e){
|
|
// summary:
|
|
// Internal function to handle click actions - need to check
|
|
// readOnly, since button no longer does that check.
|
|
if(this.readOnly){
|
|
dojo.stopEvent(e);
|
|
return false;
|
|
}
|
|
return this.inherited(arguments);
|
|
}
|
|
}
|
|
);
|
|
|
|
dojo.declare(
|
|
"dijit.form.RadioButton",
|
|
dijit.form.CheckBox,
|
|
{
|
|
// summary:
|
|
// Same as an HTML radio, but with fancy styling.
|
|
|
|
type: "radio",
|
|
baseClass: "dijitRadio",
|
|
|
|
_setCheckedAttr: function(/*Boolean*/ value){
|
|
// If I am being checked then have to deselect currently checked radio button
|
|
this.inherited(arguments);
|
|
if(!this._created){ return; }
|
|
if(value){
|
|
var _this = this;
|
|
// search for radio buttons with the same name that need to be unchecked
|
|
dojo.query("INPUT[type=radio]", this.focusNode.form || dojo.doc).forEach( // can't use name= since dojo.query doesn't support [] in the name
|
|
function(inputNode){
|
|
if(inputNode.name == _this.name && inputNode != _this.focusNode && inputNode.form == _this.focusNode.form){
|
|
var widget = dijit.getEnclosingWidget(inputNode);
|
|
if(widget && widget.checked){
|
|
widget.set('checked', false);
|
|
}
|
|
}
|
|
}
|
|
);
|
|
}
|
|
},
|
|
|
|
_clicked: function(/*Event*/ e){
|
|
if(!this.checked){
|
|
this.set('checked', true);
|
|
}
|
|
}
|
|
}
|
|
);
|
|
|
|
}
|