From ea0ce45c975318886dc2638694c8e97fbf06874a Mon Sep 17 00:00:00 2001
From: Ca-Phun Ung <pazu2k@gmail.com>
Date: Tue, 26 Aug 2008 07:28:14 +0000
Subject: [PATCH] spinner: Included support for generic objects - currently
 only supports <ul>. See visual test (#s4) for example usage. Needs more
 work...

---
 tests/visual/spinner.html | 50 +++++++++++++++++++++++++++++++++++----
 ui/ui.spinner.js          | 29 ++++++++++++++++++++---
 2 files changed, 72 insertions(+), 7 deletions(-)

diff --git a/tests/visual/spinner.html b/tests/visual/spinner.html
index b3002ec0f..f119d3d95 100644
--- a/tests/visual/spinner.html
+++ b/tests/visual/spinner.html
@@ -14,18 +14,19 @@ $(function(){
 	var opts = {
 		's1': {},
 		's2': {stepping: 0.25},
-		's3': {currency: '$'}
+		's3': {currency: '$'},
+		's4': {}
 	};
-	
+
 	for (var n in opts)
 		$("#"+n).spinner(opts[n]);
-	
+
 	$("button").click(function(e){
 		var ns = $(this).attr('id').match(/(s\d)\-(\w+)$/);
 		if (ns != null)
 			$('#'+ns[1]).spinner( (ns[2] == 'create') ? opts[ns[1]] : ns[2]);
 	});
-	
+
 });
 </script>
 
@@ -55,6 +56,7 @@ label {
 
 .ui-spinner-disabled {
 	background: #F4F4F4;
+	color: #CCC;
 }
 
 .ui-spinner-box {
@@ -67,6 +69,12 @@ label {
 	padding: 0;
 }
 
+ul.ui-spinner-box {
+	height: 1.2em;
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
 .ui-spinner-up,
 .ui-spinner-down {
 	width: 10%;
@@ -139,5 +147,39 @@ label {
 
 <hr />
 
+<p><label for="s4">Data List: </label>
+<ul id="s4">
+	<li>item 1</li>
+	<li>item 2</li>
+	<li>item 3</li>
+	<li>item 4</li>
+	<li>item 5</li>
+	<li>item 6</li>
+	<li>item 7</li>
+	<li>item 8</li>
+	<li>item 9</li>
+	<li>item 10</li>
+	<li>item 11</li>
+	<li>item 12</li>
+	<li>item 13</li>
+	<li>item 14</li>
+	<li>item 15</li>
+	<li>item 16</li>
+	<li>item 17</li>
+	<li>item 18</li>
+	<li>item 19</li>
+	<li>item 20</li>
+</ul>
+
+<p>
+<button id="s4-disable">disable</button>
+<button id="s4-enable">enable</button>
+<button id="s4-destroy">destroy</button>
+<button id="s4-create">create</button>
+</p>
+
+<hr />
+
+
 </body>
 </html>
\ No newline at end of file
diff --git a/ui/ui.spinner.js b/ui/ui.spinner.js
index 18071b399..f55e0dcd9 100644
--- a/ui/ui.spinner.js
+++ b/ui/ui.spinner.js
@@ -14,6 +14,8 @@
 
 $.widget('ui.spinner', {
 	_init: function() {
+		// terminate initialization if spinner already applied to current element
+		if($.data(this.element[0], 'spinner')) return;
 		
 		// check for decimals in steppinng and set _decimals as internal (needs cleaning up)
 		this._decimals = 0;
@@ -22,6 +24,13 @@ $.widget('ui.spinner', {
 			this._decimals = s.slice(s.indexOf('.')+1, s.length).length;
 		}
 		
+		// data list: set contraints to object length and step size
+		if (this.element.is('ul')) {
+			this.options.stepping = 1;
+			this.options.min = 0;
+			this.options.max = $('li', this.element).length-1;
+		}
+
 		//Initialize needed constants
 		var self = this;
 		this.element
@@ -111,6 +120,11 @@ $.widget('ui.spinner', {
 				})
 			.end();
 		
+		// data list: fix height of data list spinner
+		if (this.element.is('ul')) {
+			this.element.parent().css('height', this.element.outerHeight());
+		}
+		
 		this.element
 		.bind('keydown.spinner', function(e) {
 			if(!self.counter) self.counter = 1;
@@ -144,10 +158,10 @@ $.widget('ui.spinner', {
 		
 		if(isNaN(this._getValue())) this._setValue(this.options.start);
 		this._setValue(this._getValue() + (d == 'up' ? 1:-1) * (this.options.incremental && this.counter > 100 ? (this.counter > 200 ? 100 : 10) : 1) * this.options.stepping);
+		this._animate(d);
 		this._constrain();
 		if(this.counter) this.counter++;
 		this._propagate('spin', e);
-
 	},
 	_down: function(e) {
 		this._spin('down', e);
@@ -191,16 +205,24 @@ $.widget('ui.spinner', {
 		e.preventDefault();
 	},
 	_getValue: function() {
-		return parseFloat(this.element[0].value.replace(/[^0-9\-\.]/g, ''));
+		return parseFloat(this.element.val().replace(/[^0-9\-\.]/g, ''));
 	},
 	_setValue: function(newVal) {
 		if(isNaN(newVal)) newVal = this.options.start;
-		this.element[0].value = (
+		this.element.val(
 			this.options.currency ? 
 				$.ui.spinner.format.currency(newVal, this.options.currency) : 
 				$.ui.spinner.format.number(newVal, this._decimals)
 		);
 	},
+	_animate: function(d) {
+		if (this.element.is('ul') && ((d == 'up' && this._getValue() <= this.options.max) || (d == 'down' && this._getValue() >= this.options.min)) ) {
+			this.element.animate({marginTop: '-' + this._getValue() * this.element.outerHeight() }, {
+				duration: 'fast', 
+				queue: false
+			});
+		}
+	},
 	
 	
 	plugins: {},
@@ -223,6 +245,7 @@ $.widget('ui.spinner', {
 		this.element
 			.removeClass('ui-spinner-box')
 			.removeAttr('disabled')
+			.removeAttr('autocomplete')
 			.removeData('spinner')
 			.unbind('.spinner')
 			.siblings()