r2953 commited - spinner: more code clean-up; added _widgetHtml and _buttonHtml to hold...

Revision: 2953
Author: pazu2k@gmail.com
Date: Tue Jul 21 08:31:59 2009
Log: spinner: more code clean-up; added _widgetHtml and _buttonHtml to hold
generated markup; moved currency settings to _initOptions; further
simplification of _setData code.
http://code.google.com/p/jquery-ui/source/detail?r=2953
Modified:
/branches/dev/spinner/ui/ui.spinner.js
=======================================
--- /branches/dev/spinner/ui/ui.spinner.js Mon Jul 20 02:13:08 2009
+++ /branches/dev/spinner/ui/ui.spinner.js Tue Jul 21 08:31:59 2009
@@ -22,17 +22,16 @@
 this._initOptions();
- // set value on init
- this._value(this._value() || this.options.value);
-
- // draw widget
- this._draw();
-
+ this._value(this._value() || this.options.value);
+
+ this._draw();
+
 if (this.options.hide) {
 this._hide();
 }
-
+
 this._mousewheel();
+
 },
 _initOptions: function() {
 var self = this,
@@ -61,36 +60,46 @@
 if (options.step.toString().indexOf('.') != -1 && self._precision === 0)
{
 var s = options.step.toString();
 self._precision = s.slice(s.indexOf('.')+1, s.length).length;
- }
- },
- _validChars: function() {
- var radix = parseInt(this.options.radix);
- return '\\-\\' + this.options.radixPoint + (this.options.groupSeparator
- ? '\\' + this.options.groupSeparator
- :'') + (radix < 10
- ? '0-' + radix
- : '0-9' + (radix > 10
- ? 'a-' + String.fromCharCode('a'.charCodeAt(0) + radix - 11)
- :''));
+ }
+
+ // set currency options
+ if (options.currency) {
+ this._precision = 2;
+ options.radix = 10,
+ options.groupSeparator = options.groupSeparator || ',';
+ }
 },
 _draw: function() {
 var self = this,
- options = self.options,
- dir = options.dir,
- spinnerClass = options.spinnerClass,
- spinnerBoxClass = 'ui-spinner-box',
- widgetClasses = 'ui-spinner ui-state-default ui-widget
ui-widget-content ui-corner-all ui-spinner-' + dir + (spinnerClass ? ' '+
spinnerClass: '');
+ options = self.options;
 var widget = self.element
- .addClass(spinnerBoxClass)
+ .addClass('ui-spinner-box')
 .attr('autocomplete', 'off') // switch off autocomplete in opera
- .wrap('<div role="spinbutton">')
+ .wrap(self._widgetHtml())
 .parent()
- .addClass(widgetClasses)
- .append(
- '<a class="ui-spinner-button ui-spinner-up ui-state-default
ui-corner-t'+ dir.substr(-1,1) +'">▲</a>' +
- '<a class="ui-spinner-button ui-spinner-down ui-state-default
ui-corner-b'+ dir.substr(-1,1) +'">▼</a>'
- );
+ // add buttons
+ .append(self._buttonHtml())
+ // add aria properties
+ .attr('aria-valuemin',options.min)
+ .attr('aria-valuemax',options.max)
+ .attr('aria-valuenow',options.value)
+ // add behaviours
+ .hover(function() {
+ if (!options.readOnly && !self.disabled) {
+ $(this).addClass(hover);
+ }
+ self.hovered = true;
+ if (typeof options.hide != 'boolean' && !self.focused
&& !self.disabled) {
+ self._delay(self._show, 100, 'hide', options.hide);
+ }
+ }, function() {
+ $(this).removeClass(hover);
+ self.hovered = false;
+ if (typeof options.hide != 'boolean' && !self.focused) {
+ self._delay(self._hide, 100, 'hide', options.hide);
+ }
+ });
 // TODO: need a better way to exclude IE8 without resorting to
$.browser.version
 // fix inline-block issues for IE. Since IE8 supports inline-block we
need to exclude it.
@@ -98,42 +107,58 @@
 widget.css('display', 'inline');
 }
- // force width if passed through options
- if (options.width) {
- self.element.width(options.width);
- }
-
- // Give the spinner casing a unique id only if one exists in original
input
- // - this should aid targetted customisations if a page contains
multiple instances
- self.element.attr('id', function(){
- if (this.id) {
- widget.attr('id', 'ui-spinner-'+ this.id);
- }
- });
-
- widget
- // add aria properties
- .attr('aria-valuemin',options.min)
- .attr('aria-valuemax',options.max)
- .attr('aria-valuenow',options.value)
-
- // add behaviours
- .hover(function() {
- if (!options.readOnly && !self.disabled) {
- $(this).addClass(hover);
- }
- self.hovered = true;
- if (typeof options.hide != 'boolean' && !self.focused
&& !self.disabled) {
+ // element bindings
+ this.element
+ // Give the spinner casing a unique id only if one exists in original
input
+ // - this should aid targetted customisations if a page contains
multiple instances
+ .attr('id', function(){
+ if (this.id) {
+ widget.attr('id', 'ui-spinner-'+ this.id);
+ }
+ })
+ .bind('keydown'+namespace, function(event) {
+ self._start(event);
+ })
+ .bind('keypress'+namespace, function(event) {
+ return self._keydown(event);
+ })
+ .bind('keyup'+namespace, function(event) {
+ self._stop(event);
+ self._change(event);
+ })
+ .bind('focus'+namespace, function() {
+ if (options.readOnly) {
+ self.element.blur();
+ return false;
+ }
+ widget.addClass(active);
+ self.focused = true;
+ if (!self.hovered && typeof options.hide != 'boolean'
&& !self.disabled) {
 self._delay(self._show, 100, 'hide', options.hide);
 }
- }, function() {
- $(this).removeClass(hover);
- self.hovered = false;
- if (typeof options.hide != 'boolean' && !self.focused) {
+ })
+ .bind('blur'+namespace, function(event) {
+ if (!self.hovered) {
+ widget.removeClass(active);
+ }
+ self.focused = false;
+ if (!self.hovered && typeof options.hide != 'boolean') {
 self._delay(self._hide, 100, 'hide', options.hide);
 }
- });
-
+ self._cleanUp();
+ });
+
+ // force width if passed through options
+ if (options.width) {
+ this.element.width(options.width);
+ }
+
+ // disable spinner if element was already disabled
+ if (this.element.attr("disabled")) {
+ this.disable();
+ }
+
+ // button bindings
 this.buttons = widget.find('.ui-spinner-button')
 .bind('mousedown', function(event) {
 self._start(event);
@@ -176,47 +201,21 @@
 self._stop(event);
 }
 });
-
- this.element
- .bind('keydown'+namespace, function(event) {
- self._start(event);
- })
- .bind('keypress'+namespace, function(event) {
- return self._keydown(event);
- })
- .bind('keyup'+namespace, function(event) {
- self._stop(event);
- self._change(event);
- })
- .bind('focus'+namespace, function() {
- if (options.readOnly) {
- self.element.blur();
- return false;
- }
- widget.addClass(active);
- self.focused = true;
- if (!self.hovered && typeof options.hide != 'boolean'
&& !self.disabled) {
- self._delay(self._show, 100, 'hide', options.hide);
- }
- })
- .bind('blur'+namespace, function(event) {
- if (!self.hovered) {
- widget.removeClass(active);
- }
- self.focused = false;
- if (!self.hovered && typeof options.hide != 'boolean') {
- self._delay(self._hide, 100, 'hide', options.hide);
- }
- self._cleanUp();
- });
-
- // disable spinner if element was already disabled
- if (this.element.attr("disabled")) {
- this.disable();
- }
 self.widget = widget;
 },
+ _widgetHtml: function() {
+ return '<div role="spinbutton" class="ui-spinner ui-state-default
ui-widget ui-widget-content ui-corner-all ' +
+ (this.options.spinnerClass || '') +
+ ' ui-spinner-' + this.options.dir +
+ '"></div>';
+ },
+ _buttonHtml: function() {
+ return '<a class="ui-spinner-button ui-spinner-up ui-state-default
ui-corner-t' + this.options.dir.substr(-1,1) +
+ '">▲</a>' +
+ '<a class="ui-spinner-button ui-spinner-down ui-state-default
ui-corner-b' + this.options.dir.substr(-1,1) +
+ '">▼</a>';
+ },
 _constrain: function() {
 var value = this._value();
 if (value < this.options.min) {
@@ -248,7 +247,13 @@
 if (!this.counter) {
 this.counter = 1;
 }
- this._value(this._value() + (this.options.incremental && this.counter >
100 ? (this.counter > 200 ? 100 : 10) : 1) * step);
+
+ this._value(this._value() + step * (this.options.incremental &&
this.counter > 100
+ ? this.counter > 200
+ ? 100
+ : 10
+ : 1));
+
 this._constrain();
 this.counter++;
@@ -397,35 +402,45 @@
 return;
 }
- // write attributes back to element if original exist
- if ($.inArray(key, ['min','max','step']) != -1 && this.element.attr(key)
&& this.options[key] != null) {
- this.element.attr(key, value);
- return;
- }
-
- // aria properties
- if (key == 'min') {
- this.element.parent().attr('aria-valuemin', value);
+ if (/min|max|step/.test(key) && this.options[key] != null) {
+ // write attributes back to element if original exist
+ if (this.element.attr(key)) {
+ this.element.attr(key, value);
+ }
+
+ // add aria properties
+ if (/min|max/.test(key)) {
+ this.element.parent().attr('aria-value'+key, value);
+ }
+
 return;
- }
- if (key == 'max') {
- this.element.parent().attr('aria-valuemax', value);
- return;
- }
+ }
+ },
+ _validChars: function() {
+ var radix = parseInt(this.options.radix);
+ return '\\-\\' + this.options.radixPoint + (this.options.groupSeparator
+ ? '\\' + this.options.groupSeparator
+ :'') + (radix < 10
+ ? '0-' + radix
+ : '0-9' + (radix > 10
+ ? 'a-' + String.fromCharCode('a'.charCodeAt(0) + radix - 11)
+ :''));
 },
 _parse: function(val) {
 if (typeof val == 'string') {
+ console.log('before: '+ val);
 if (this.options.groupSeparator) {
 val = val.replace(new
RegExp('\\'+this.options.groupSeparator,'g'), '');
 }
 val = val.replace(new RegExp('[^' + this._validChars()
+ ']', 'gi'), '').split(this.options.radixPoint);
-
 result = parseInt(val[0], this.options.radix);
+ console.log(val);
 if (val.length > 1) {
 result += parseInt(val[1], this.options.radix) /
Math.pow(this.options.radix, val[1].length) *
 // must test first character of val[0] for minus sign because -0 is
parsed as 0 in result
 (val[0][0] == '-' ? -1 : 1);
 }
+ console.log('after: ' + result);
 val = result;
 }
 return isNaN(val) ? null : val;
@@ -433,10 +448,10 @@
 _format: function(num) {
 var regex = /(\d+)(\d{3})/,
 options = this.options,
- sym = options.currency ? options.currency : '',
- dec = options.currency ? 2 : this._precision,
- radix = options.currency ? 10 : options.radix,
- group = options.currency ? (options.groupSeparator || ',') :
options.groupSeparator,
+ sym = options.currency || '',
+ dec = this._precision,
+ radix = options.radix,
+ group = options.groupSeparator,
 pt = options.radixPoint;
 for (