Spinner: new options: format, items & decimals (r728).

items: accepts a array of objects which will be converted to a list of items by the spinner.

format: printf style formatting of each item - accepts named arguments.

2 files changed, 44 insertions, 4 deletions

diff --git a/tests/visual/spinner.html b/tests/visual/spinner.html
index de05b6d25..f5b441e26 100644
--- a/tests/visual/spinner.html
+++ b/tests/visual/spinner.html
@@ -32,11 +32,19 @@ $(function(){
 		's3': {currency: '$'},
 		's4': {},
 		's5': {
+			//
+			// Two methods of adding external items to the spinner
+			//
+			// method 1: on initalisation call the add method directly and format html manually
 			init: function(ui) {
 				for (var i=0; i<itemList.length; i++) {
-					ui.add(itemList[i].title +' <a href="'+ itemList[i].url +'" target="_blank">&raquo;</a>');
+					ui.add('<a href="'+ itemList[i].url +'" target="_blank">'+ itemList[i].title +'</a>');
 				}
-			}
+			},
+			
+			// method 2: use the format and items options in combination
+			format: '%(title) <a href="%(url)" target="_blank">&raquo;</a>',
+			items: itemList
 		}
 	};
 
diff --git a/ui/ui.spinner.js b/ui/ui.spinner.js
index 98d10811d..572611b5d 100644
--- a/ui/ui.spinner.js
+++ b/ui/ui.spinner.js
@@ -22,6 +22,14 @@ $.widget('ui.spinner', {
 			this.options.init(this.ui(null));
 		}
 		
+		// perform data bind on generic objects
+		if (typeof this.options.items[0] == 'object' && !this.element.is('input')) {
+			var data = this.options.items;
+			for (var i=0; i<data.length; i++) {
+				this._addItem(data[i]);
+			}
+		}
+		
 		// check for decimals in steppinng and set _decimals as internal
 		this._decimals = parseInt(this.options.decimals);
 		if (this.options.stepping.toString().indexOf('.') != -1) {
@@ -127,6 +135,8 @@ $.widget('ui.spinner', {
 			.css('height', this.element.outerHeight()/this._items)
 			.children()
 				.addClass('ui-spinner-listitem')
+				.css('height', this.element.outerHeight())
+				.css('overflow', 'hidden')
 			.end()
 			.parent()
 				.css('height', this.element.outerHeight())
@@ -234,12 +244,31 @@ $.widget('ui.spinner', {
 			});
 		}
 	},
-	_addItem: function(html) {
+	_addItem: function(obj, fmt) {
 		if (!this.element.is('input')) {
 			var wrapper = 'div';
 			if (this.element.is('ol') || this.element.is('ul')) {
 				wrapper = 'li';
 			}
+			var html = obj; // string or object set it to html first
+			
+			if (typeof obj == 'object') {
+				var format = (fmt != undefined) ? fmt : this.options.format;
+				
+				html = format.replace(/%(\(([^)]+)\))?/g, 
+					(function(data){
+						return function(match, a, lbl) { 
+							if (!lbl) {
+								for (var itm in data) {
+									return data[itm]; // return the first item only
+								}
+							} else {
+								return data[lbl];
+							}
+						}
+					})(obj)
+				);
+			}
 			this.element.append('<'+ wrapper +' class="ui-spinner-dyn">'+ html + '</'+ wrapper +'>');
 		}
 	},
@@ -307,7 +336,9 @@ $.extend($.ui.spinner, {
 		stepping: 1,
 		start: 0,
 		incremental: true,
-		currency: false
+		currency: false,
+		format: '%',
+		items: []
 	},
 	format: {
 		number: function(num, dec) {
@@ -329,4 +360,5 @@ $.extend($.ui.spinner, {
 	}
 });
 
+
 })(jQuery);