r2588 - Spinner: Changed autoHide to hide, which can be true, false, or an animation speed for au...
Author: btburnett3
Date: Mon May 18 17:27:16 2009
New Revision: 2588
Modified:
branches/dev/spinner/demos/spinner/autohide.html
branches/dev/spinner/ui/ui.spinner.js
Log:
Spinner: Changed autoHide to hide, which can be true, false, or an
animation speed for auto. Renamed hideButtons and showButtons to show and
hide, which now take an animation speed. Renamed start option to value to
agree with HTML. Now load HTML5 attributes for min, max, and step if not
specified in options.
Modified: branches/dev/spinner/demos/spinner/autohide.html
==============================================================================
--- branches/dev/spinner/demos/spinner/autohide.html (original)
+++ branches/dev/spinner/demos/spinner/autohide.html Mon May 18 17:27:16
2009
@@ -10,18 +10,29 @@
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
- $("#s1, #s2").spinner({autoHide: true});
+ function getSpeed() {
+ var speed = $("#speed").val();
+ var i = parseInt(speed);
+ return isNaN(i) ? speed : i;
+ }
+
+ $("#s1, #s2").spinner({hide: 'fast'});
$("#autohide").toggle(function() {
- $("#s1, #s2").spinner("option", "autoHide", false);
+ $("#s1, #s2").spinner("option", "hide", false);
+ $("#speedp").css("display", "none");
}, function() {
- $("#s1, #s2").spinner("option", "autoHide", true);
+ $("#s1, #s2").spinner("option", "hide", getSpeed());
+ $("#speedp").css("display", "block");
});
$("#hide").click(function() {
- $("#s1, #s2").spinner("hideButtons");
+ $("#s1, #s2").spinner("hide", getSpeed());
});
$("#show").click(function() {
- $("#s1, #s2").spinner("showButtons");
+ $("#s1, #s2").spinner("show", getSpeed());
+ });
+ $("#speed").change(function() {
+ $("#s1, #s2").spinner("option", "hide", getSpeed());
});
});
</script>
@@ -40,6 +51,24 @@
<button id="autohide" class="ui-button ui-state-default
ui-corner-all">Toggle auto hide</button>
<button id="hide" class="ui-button ui-state-default ui-corner-all">Hide
buttons</button>
<button id="show" class="ui-button ui-state-default ui-corner-all">Show
buttons</button>
+
+
+<p id="speedp"><label for="speed">Select show/hide speed:</label>
+<select id="speed">
+ <option value="0">0</option>
+ <option value="50">50</option>
+ <option value="100">100</option>
+ <option value="150">150</option>
+ <option value="fast" selected="selected">200 - Fast</option>
+ <option value="250">250</option>
+ <option value="300">300</option>
+ <option value="350">350</option>
+ <option value="400">400</option>
+ <option value="450">450</option>
+ <option value="500">500</option>
+ <option value="550">550</option>
+ <option value="slow">600 - Slow</option>
+</select>
</div><!-- End demo -->
Modified: branches/dev/spinner/ui/ui.spinner.js
==============================================================================
--- branches/dev/spinner/ui/ui.spinner.js (original)
+++ branches/dev/spinner/ui/ui.spinner.js Mon May 18 17:27:16 2009
@@ -22,8 +22,10 @@
var self = this,
validChars;
- function parse(val) {
- if ((val != null) && (typeof val == 'string'))
+ function parse(val, ifNull) {
+ if (val == null)
+ val = ifNull;
+ if (typeof val == 'string')
val = self._parseValue(val, self.options.radix,
self.options.groupSeparator, self.options.radixPoint);
return isNaN(val) ? null : val;
}
@@ -57,10 +59,10 @@
}
self.validChars = validChars;
- // Parse min, max, step, and pageStep for strings based on radix
- self.options.min = parse(self.options.min);
- self.options.max = parse(self.options.max);
- self.options.step = parse(self.options.step);
+ // Parse min, max, step, and pageStep for strings based on radix, apply
HTML5 attributes if they are null
+ self.options.min = parse(self.options.min, self.element.attr('min'));
+ self.options.max = parse(self.options.max, self.element.attr('max'));
+ self.options.step = parse(self.options.step, self.element.attr('step')) |
| 1;
self.options.pageStep = parse(self.options.pageStep);
// check for precision in steppinng and set _precision as internal
@@ -76,7 +78,7 @@
.attr('autocomplete', 'off') // switch off autocomplete in opera
.width(self.options.width);
- self._setValue( isNaN(self._getValue()) ? self.options.start :
self._getValue() );
+ self._setValue( isNaN(self._getValue()) ? self.options.value :
self._getValue() );
var widget = self.element
.wrap('<div>')
@@ -138,12 +140,12 @@
.end()
.hover(function() {
self.hovered = true;
- if (self.options.autoHide && !self.focused && !self.disabled)
- self._delay(self.showButtons, 100, 'hide');
+ if (typeof self.options.hide != 'boolean' && !self.focused
&& !self.disabled)
+ self._delay(self.show, 100, 'hide', self.options.hide);
}, function() {
self.hovered = false;
- if (self.options.autoHide && !self.focused)
- self._delay(self.hideButtons, 100, 'hide');
+ if (typeof self.options.hide != 'boolean' && !self.focused)
+ self._delay(self.hide, 100, 'hide', self.options.hide);
});
self.buttons = widget.find('button')
@@ -155,8 +157,8 @@
self._mouseup(event);
}
});
- if (self.options.autoHide)
- self.hideButtons(true);
+ if (self.options.hide)
+ self.hide();
// 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
@@ -202,13 +204,13 @@
})
.bind('focus'+namespace, function() {
self.focused = true;
- if (!self.hovered && self.options.autoHide && !self.disabled)
- self._delay(self.showButtons, 100, 'hide');
+ if (!self.hovered && typeof self.options.hide != 'boolean'
&& !self.disabled)
+ self._delay(self.show, 100, 'hide', self.options.hide);
})
.bind('blur'+namespace, function(event) {
self.focused = false;
- if (!self.hovered && self.options.autoHide)
- self._delay(self.hideButtons, 100, 'hide');
+ if (!self.hovered && typeof self.options.hide != 'boolean')
+ self._delay(self.hide, 100, 'hide', self.options.hide);
self._cleanUp();
});
@@ -241,7 +243,7 @@
var value = this._getValue();
if (isNaN(value)) {
- value = this.options.start;
+ value = this.options.value;
}
this._setValue(value + (d == 'up' ? 1:-1) *(this.options.incremental &&
this.counter > 100 ? (this.counter > 200 ? 100 : 10) : 1) * step);
this._animate(d);
@@ -287,10 +289,10 @@
var KEYS = $.ui.keyCode;
if (event.keyCode == KEYS.UP) {
- this._up(this.options.step, event);
+ this._up(this.options[event.shiftKey ? 'pageStep' : 'step'], event);
}
if (event.keyCode == KEYS.DOWN) {
- this._down(this.options.step, event);
+ this._down(this.options[event.shiftKey ? 'pageStep' : 'step'], event);
}
if (event.keyCode == KEYS.PAGE_UP) {
this._up(this.options.pageStep, event);
@@ -299,8 +301,8 @@
this._down(this.options.pageStep, event);
}
if (event.keyCode == KEYS.HOME) {
- //Home key goes to min, if defined, else to start
- this._setValue(this.options.min || this.options.start);
+ //Home key goes to min, if defined, else to options.value
+ this._setValue(this.options.min || this.options.value);
}
if (event.keyCode == KEYS.END && this.options.max != null) {
//End key goes to maximum
@@ -346,7 +348,7 @@
},
_setValue: function(newVal) {
if (isNaN(newVal)) {
- newVal = this.options.start;
+ newVal = this.options.value;
}
this.element.val(
this.options.currency ?
@@ -416,11 +418,15 @@
_setData: function(key, value) {
if ((key == 'mouseWheel') && (value != this.options.mouseWheel) &&
$.fn.mousewheel)
this.element[value ? 'mousewheel' : 'unmousewheel'](this._mousewheel);
- else if (key == 'autoHide') {
- if (!value)
- this.showButtons(true);
- else if (!this.hovered && !this.focused)
- this.hideButtons(true);
+ else if (key == 'hide') {
+ if (typeof value != 'boolean') {
+ if (!this.hovered && !this.focused)
+ this.hide();
+ }
+ else if (value)
+ this.hide();
+ else
+ this.show();
}
$.widget.prototype._setData.call(this, key, value);
@@ -492,22 +498,22 @@
this._setValue(newVal);
return this;
},
- showButtons: function(immediate) {
+ show: function(speed) {
var buttons = this.buttons.stop();
- if (immediate)
+ if (!speed)
buttons.css('opacity', 1);
else
- buttons.fadeTo('fast', 1);
+ buttons.fadeTo(speed, 1);
return this;
},
- hideButtons: function(immediate) {
+ hide: function(speed) {
// also removeClass(hover) in case it was left despite losing mouse hover
var buttons = this.buttons.stop().removeClass(hover);
- if (immediate)
+ if (!speed)
buttons.css('opacity', 0);
else
- buttons.fadeTo('fast', 0);
+ buttons.fadeTo(speed, 0);
return this;
}
});
@@ -521,9 +527,10 @@
max: null,
min: null,
- step: 1,
+ // null defaults to 1 in _init. We use null so that we can detect if
passed value should override HTML5 attribute
+ step: null,
pageStep: 5,
- start: 0,
+ value: 0,
incremental: true,
mouseWheel: true,
@@ -535,7 +542,7 @@
items: null,
width: 'auto',
- autoHide: false
+ hide: false
},
format: {
currency: function(num, sym, group, pt) {