aboutsummaryrefslogtreecommitdiff
path: root/includes/js/dijit/form/_FormWidget.js
diff options
context:
space:
mode:
authormensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f>2008-11-13 09:49:11 +0000
committermensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f>2008-11-13 09:49:11 +0000
commite44a7e37b6c7b5961adaffc62b9042b8d442938e (patch)
tree95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dijit/form/_FormWidget.js
parenta62b9742ee5e28bcec6872d88f50f25b820914f6 (diff)
downloadsemanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz
semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.bz2
New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit
git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f
Diffstat (limited to 'includes/js/dijit/form/_FormWidget.js')
-rw-r--r--includes/js/dijit/form/_FormWidget.js340
1 files changed, 340 insertions, 0 deletions
diff --git a/includes/js/dijit/form/_FormWidget.js b/includes/js/dijit/form/_FormWidget.js
new file mode 100644
index 0000000..5f29df2
--- /dev/null
+++ b/includes/js/dijit/form/_FormWidget.js
@@ -0,0 +1,340 @@
+if(!dojo._hasResource["dijit.form._FormWidget"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dijit.form._FormWidget"] = true;
+dojo.provide("dijit.form._FormWidget");
+
+dojo.require("dijit._Widget");
+dojo.require("dijit._Templated");
+
+dojo.declare("dijit.form._FormWidget", [dijit._Widget, dijit._Templated],
+{
+ /*
+ Summary:
+ _FormWidget's correspond to native HTML elements such as <checkbox> or <button>.
+ Each _FormWidget represents a single HTML element.
+
+ All these widgets should have these attributes just like native HTML input elements.
+ You can set them during widget construction.
+
+ They also share some common methods.
+ */
+
+ // baseClass: String
+ // Root CSS class of the widget (ex: dijitTextBox), used to add CSS classes of widget
+ // (ex: "dijitTextBox dijitTextBoxInvalid dijitTextBoxFocused dijitTextBoxInvalidFocused")
+ // See _setStateClass().
+ baseClass: "",
+
+ // name: String
+ // Name used when submitting form; same as "name" attribute or plain HTML elements
+ name: "",
+
+ // alt: String
+ // Corresponds to the native HTML <input> element's attribute.
+ alt: "",
+
+ // value: String
+ // Corresponds to the native HTML <input> element's attribute.
+ value: "",
+
+ // type: String
+ // Corresponds to the native HTML <input> element's attribute.
+ type: "text",
+
+ // tabIndex: Integer
+ // Order fields are traversed when user hits the tab key
+ tabIndex: "0",
+
+ // disabled: Boolean
+ // Should this widget respond to user input?
+ // In markup, this is specified as "disabled='disabled'", or just "disabled".
+ disabled: false,
+
+ // 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,
+
+ // intermediateChanges: Boolean
+ // Fires onChange for each value change or only on demand
+ intermediateChanges: false,
+
+ // These mixins assume that the focus node is an INPUT, as many but not all _FormWidgets are.
+ // Don't attempt to mixin the 'type', 'name' attributes here programatically -- they must be declared
+ // directly in the template as read by the parser in order to function. IE is known to specifically
+ // require the 'name' attribute at element creation time.
+ attributeMap: dojo.mixin(dojo.clone(dijit._Widget.prototype.attributeMap),
+ {value:"focusNode", disabled:"focusNode", readOnly:"focusNode", id:"focusNode", tabIndex:"focusNode", alt:"focusNode"}),
+
+ setAttribute: function(/*String*/ attr, /*anything*/ value){
+ this.inherited(arguments);
+ switch(attr){
+ case "disabled":
+ var tabIndexNode = this[this.attributeMap['tabIndex']||'domNode'];
+ if(value){
+ //reset those, because after the domNode is disabled, we can no longer receive
+ //mouse related events, see #4200
+ this._hovering = false;
+ this._active = false;
+ // remove the tabIndex, especially for FF
+ tabIndexNode.removeAttribute('tabIndex');
+ }else{
+ tabIndexNode.setAttribute('tabIndex', this.tabIndex);
+ }
+ dijit.setWaiState(this[this.attributeMap['disabled']||'domNode'], "disabled", value);
+ this._setStateClass();
+ }
+ },
+
+ setDisabled: function(/*Boolean*/ disabled){
+ // summary:
+ // Set disabled state of widget (Deprecated).
+ dojo.deprecated("setDisabled("+disabled+") is deprecated. Use setAttribute('disabled',"+disabled+") instead.", "", "2.0");
+ this.setAttribute('disabled', disabled);
+ },
+
+
+ _onMouse : function(/*Event*/ event){
+ // summary:
+ // Sets _hovering, _active, and stateModifier properties depending on mouse state,
+ // then calls setStateClass() to set appropriate CSS classes for this.domNode.
+ //
+ // To get a different CSS class for hover, send onmouseover and onmouseout events to this method.
+ // To get a different CSS class while mouse button is depressed, send onmousedown to this method.
+
+ var mouseNode = event.currentTarget;
+ if(mouseNode && mouseNode.getAttribute){
+ this.stateModifier = mouseNode.getAttribute("stateModifier") || "";
+ }
+
+ if(!this.disabled){
+ switch(event.type){
+ case "mouseenter":
+ case "mouseover":
+ this._hovering = true;
+ this._active = this._mouseDown;
+ break;
+
+ case "mouseout":
+ case "mouseleave":
+ this._hovering = false;
+ this._active = false;
+ break;
+
+ case "mousedown" :
+ this._active = true;
+ this._mouseDown = true;
+ // set a global event to handle mouseup, so it fires properly
+ // even if the cursor leaves the button
+ var mouseUpConnector = this.connect(dojo.body(), "onmouseup", function(){
+ this._active = false;
+ this._mouseDown = false;
+ this._setStateClass();
+ this.disconnect(mouseUpConnector);
+ });
+ if(this.isFocusable()){ this.focus(); }
+ break;
+ }
+ this._setStateClass();
+ }
+ },
+
+ isFocusable: function(){
+ return !this.disabled && !this.readOnly && this.focusNode && (dojo.style(this.domNode, "display") != "none");
+ },
+
+ focus: function(){
+ setTimeout(dojo.hitch(this, dijit.focus, this.focusNode), 0); // cannot call focus() from an event handler directly
+ },
+
+ _setStateClass: function(){
+ // summary
+ // Update the visual state of the widget by setting the css classes on this.domNode
+ // (or this.stateNode if defined) by combining this.baseClass with
+ // various suffixes that represent the current widget state(s).
+ //
+ // In the case where a widget has multiple
+ // states, it sets the class based on all possible
+ // combinations. For example, an invalid form widget that is being hovered
+ // will be "dijitInput dijitInputInvalid dijitInputHover dijitInputInvalidHover".
+ //
+ // For complex widgets with multiple regions, there can be various hover/active states,
+ // such as "Hover" or "CloseButtonHover" (for tab buttons).
+ // This is controlled by a stateModifier="CloseButton" attribute on the close button node.
+ //
+ // The widget may have one or more of the following states, determined
+ // by this.state, this.checked, this.valid, and this.selected:
+ // Error - ValidationTextBox sets this.state to "Error" if the current input value is invalid
+ // Checked - ex: a checkmark or a ToggleButton in a checked state, will have this.checked==true
+ // Selected - ex: currently selected tab will have this.selected==true
+ //
+ // In addition, it may have one or more of the following states,
+ // based on this.disabled and flags set in _onMouse (this._active, this._hovering, this._focused):
+ // Disabled - if the widget is disabled
+ // Active - if the mouse (or space/enter key?) is being pressed down
+ // Focused - if the widget has focus
+ // Hover - if the mouse is over the widget
+
+ // Get original (non state related, non baseClass related) class specified in template
+ if(!("staticClass" in this)){
+ this.staticClass = (this.stateNode||this.domNode).className;
+ }
+
+ // Compute new set of classes
+ var classes = [ this.baseClass ];
+
+ function multiply(modifier){
+ classes=classes.concat(dojo.map(classes, function(c){ return c+modifier; }), "dijit"+modifier);
+ }
+
+ if(this.checked){
+ multiply("Checked");
+ }
+ if(this.state){
+ multiply(this.state);
+ }
+ if(this.selected){
+ multiply("Selected");
+ }
+
+ if(this.disabled){
+ multiply("Disabled");
+ }else if(this.readOnly){
+ multiply("ReadOnly");
+ }else if(this._active){
+ multiply(this.stateModifier+"Active");
+ }else{
+ if(this._focused){
+ multiply("Focused");
+ }
+ if(this._hovering){
+ multiply(this.stateModifier+"Hover");
+ }
+ }
+
+ (this.stateNode || this.domNode).className = this.staticClass + " " + classes.join(" ");
+ },
+
+ onChange: function(newValue){
+ // summary: callback when value is changed
+ },
+
+ _onChangeMonitor: 'value',
+ _onChangeActive: false,
+
+ _handleOnChange: function(/*anything*/ newValue, /*Boolean, optional*/ priorityChange){
+ // summary: set the value of the widget.
+ this._lastValue = newValue;
+ if(this._lastValueReported == undefined && (priorityChange === null || !this._onChangeActive)){
+ this._resetValue = this._lastValueReported = newValue;
+ }
+ if((this.intermediateChanges || priorityChange || priorityChange === undefined) &&
+ ((newValue && newValue.toString)?newValue.toString():newValue) !== ((this._lastValueReported && this._lastValueReported.toString)?this._lastValueReported.toString():this._lastValueReported)){
+ this._lastValueReported = newValue;
+ if(this._onChangeActive){ this.onChange(newValue); }
+ }
+ },
+
+ reset: function(){
+ this._hasBeenBlurred = false;
+ if(this.setValue && !this._getValueDeprecated){
+ this.setValue(this._resetValue, true);
+ }else if(this._onChangeMonitor){
+ this.setAttribute(this._onChangeMonitor, (this._resetValue !== undefined && this._resetValue !== null)? this._resetValue : '');
+ }
+ },
+
+ create: function(){
+ this.inherited(arguments);
+ this._onChangeActive = true;
+ this._setStateClass();
+ },
+
+ destroy: function(){
+ if(this._layoutHackHandle){
+ clearTimeout(this._layoutHackHandle);
+ }
+ this.inherited(arguments);
+ },
+
+ setValue: function(/*String*/ value){
+ dojo.deprecated("dijit.form._FormWidget:setValue("+value+") is deprecated. Use setAttribute('value',"+value+") instead.", "", "2.0");
+ this.setAttribute('value', value);
+ },
+
+ _getValueDeprecated: true, // Form uses this, remove when getValue is removed
+ getValue: function(){
+ dojo.deprecated("dijit.form._FormWidget:getValue() is deprecated. Use widget.value instead.", "", "2.0");
+ return this.value;
+ },
+
+ _layoutHack: function(){
+ // summary: work around table sizing bugs on FF2 by forcing redraw
+ if(dojo.isFF == 2){
+ var node=this.domNode;
+ var old = node.style.opacity;
+ node.style.opacity = "0.999";
+ this._layoutHackHandle = setTimeout(dojo.hitch(this, function(){
+ this._layoutHackHandle = null;
+ node.style.opacity = old;
+ }), 0);
+ }
+ }
+});
+
+dojo.declare("dijit.form._FormValueWidget", dijit.form._FormWidget,
+{
+ /*
+ Summary:
+ _FormValueWidget's correspond to native HTML elements such as <input> or <select> that have user changeable values.
+ Each _ValueWidget represents a single input value, and has a (possibly hidden) <input> element,
+ to which it serializes its input value, so that form submission (either normal submission or via FormBind?)
+ works as expected.
+ */
+
+ attributeMap: dojo.mixin(dojo.clone(dijit.form._FormWidget.prototype.attributeMap),
+ {value:""}),
+
+ postCreate: function(){
+ this.setValue(this.value, null);
+ },
+
+ setValue: function(/*anything*/ newValue, /*Boolean, optional*/ priorityChange){
+ // summary: set the value of the widget.
+ this.value = newValue;
+ this._handleOnChange(newValue, priorityChange);
+ },
+
+ _getValueDeprecated: false, // remove when _FormWidget:getValue is removed
+ getValue: function(){
+ // summary: get the value of the widget.
+ return this._lastValue;
+ },
+
+ undo: function(){
+ // summary: restore the value to the last value passed to onChange
+ this.setValue(this._lastValueReported, false);
+ },
+
+ _valueChanged: function(){
+ var v = this.getValue();
+ var lv = this._lastValueReported;
+ // Equality comparison of objects such as dates are done by reference so
+ // two distinct objects are != even if they have the same data. So use
+ // toStrings in case the values are objects.
+ return ((v !== null && (v !== undefined) && v.toString)?v.toString():'') !== ((lv !== null && (lv !== undefined) && lv.toString)?lv.toString():'');
+ },
+
+ _onKeyPress: function(e){
+ if(e.keyCode == dojo.keys.ESCAPE && !e.shiftKey && !e.ctrlKey && !e.altKey){
+ if(this._valueChanged()){
+ this.undo();
+ dojo.stopEvent(e);
+ return false;
+ }
+ }
+ return true;
+ }
+});
+
+}