WIP

sky.controls.js

@@ -6,7 +6,6 @@
 		nullable: true,
 		
 		lookup: function(pattern,response){}
-
 	};
 
 	class SkySelect {
@@ -35,6 +34,7 @@
 					self.update();
 				} );
 
+			this.wrap.addClass("skyselect-wrapper");
 
 			this.type = SKY.type(this.options.type);
 
@@ -44,6 +44,15 @@
 		}
 		html(){ return this.wrap; }
 
+		value(item){
+			if (arguments.length)
+			{
+				this.select(item);
+				return this;
+			}
+			return this.selectedItem;
+		}
+
 		open(){ this.popup.slideDown(); this.isOpen = true; return this; }
 		close(){
 			if (this.isOpen)
@@ -52,27 +61,30 @@
 
 				this.popup.hide();
 				this.isOpen = false;
-				
+
-				if (this.options.nullable && (this.element.val()==""))
-				{
-					this.selectedItem = null;
-				} else {
-					this.element.val(
-						this.selectedItem ? this.options.render(this.selectedItem) : ""
-						);
-				}
 				this.activeItem = null;
 			}
 			return this;
 		}
 
+		restoreSelection(){
+			if (this.options.nullable && (this.element.val()==""))
+			{
+				this.selectedItem = null;
+			} else {
+				this.element.val(
+					this.selectedItem ? this.options.render(this.selectedItem) : ""
+					);
+			}
+		}
+
 		markCurrentSelected(){
 			var self = this;
-			var currentSelectedIdentity = self.options.type.identity(self.selectedItem);
+			var currentSelectedIdentity = self.options.identity(self.selectedItem);
 			this.popup.children(".skyselect-item").each(function(){
 				var li = $(this);
-				var item = li.data("skyselect-item");
+				var item = li.data("skyselectItem");
-				if (self.options.type.identity(item) == currentSelectedIdentity)
+				if (self.options.identity(item) == currentSelectedIdentity)
 					li.addClass("selected");
 				else
 					li.removeClass("selected");
@@ -81,13 +93,13 @@
 
 		markActive(item){
 			var self = this;
-			var currentActiveIdentity = self.options.type.identity(item);
+			var currentActiveIdentity = self.type.identity(item);
 			self.activeItem = item;
 
 			this.popup.children(".skyselect-item").each(function(){
 				var li = $(this);
-				var item = li.data("skyselect-item");
+				var item = li.data("skyselectItem");
-				if (self.options.type.identity(item) == currentActiveIdentity)
+				if (self.type.identity(item) == currentActiveIdentity)
 					li.addClass("active");
 				else
 					li.removeClass("active");
@@ -97,7 +109,7 @@
 		select(item){
 			this.close();
 			this.selectedItem = item;
-			this.element.val(this.options.type.render(item));
+			this.element.val(this.type.render(item));
 			this.markCurrentSelected();
 		}
 
@@ -116,26 +128,38 @@
 			this.popup.empty();
 			$.each( items, function(){
 				var item = this;
+				var identity = self.type.identity(item);
 				var li = $("<div></div>")
 				.addClass("skyselect-item")
-				.append(self.options.type.render(this))
+				.append(self.type.render(this))
 				.appendTo(self.popup)
-				.data("skyselect-item", this)
+				.data("skyselectItem", item)
 				.on("click", function(ev){ 
 					self.select( item ); 
 				} )
-				.on("hover", function(ev){
+				.on("mouseover", function(ev){
 					self.markActive(item);
 				});
+				if (self.currentActiveIdentity == identity)
+					li.addClass("active");
 			})
 			this.markCurrentSelected();
 		}
 
+		valid(){
+			return true;
+		}
+
 		onKeyDown(ev){
 			var self = this;
 
 			switch (ev.which)
 			{
+				case 13:	// RETURN
+					if (this.isOpen){
+
+					}
+					break;
 				case 27:	// ESC
 					this.close();
 					break;
@@ -143,14 +167,15 @@
 					if (this.isOpen){
 						var currentActiveLi = $(".skyselect-item.active", this.popup);
 						if (currentActiveLi.length){
-							var nextLi = currentActiveLi.next(".skyselect-item");
+							var prevLi = currentActiveLi.prev(".skyselect-item");
-							if (nextLi.length)
+							if (prevLi.length)
 							{
+								this.markActive(prevLi.data("skyselectItem"));
 							}
 						} else {
-							var firstLi = this.popup.first("skyselect-item");
+							var firstLi = $(this.popup.children(".skyselect-item").get(0));
 							if (firstLi.length)
-								this.markActive(firstLi.data("skyselect-item"));
+								this.markActive(firstLi.data("skyselectItem"));
 						}
 					}
 					break;
@@ -161,11 +186,13 @@
 							var nextLi = currentActiveLi.next(".skyselect-item");
 							if (nextLi.length)
 							{
+								this.markActive(nextLi.data("skyselectItem"));
 							}
 						} else {
-							var firstLi = this.popup.first(".skyselect-item");
+							var firstLi = $(this.popup.children(".skyselect-item").get(0));
-							if (firstLi.length)
+							if (firstLi.length){
-								this.markActive(firstLi.data("skyselect-item"));
+								this.markActive(firstLi.data("skyselectItem"));
+							}
 						}
 					} else {
 						this.open();
@@ -193,19 +220,31 @@
 		onFocusOut(ev){
 			var self = this;
 			setTimeout( function(){ self.close(); }, 100 );
+			this.restoreSelection();
 		}
 
 	}
 
 	$.fn.skySelect = function(options){
-		$.each( this, function(index,item){
+/*		$.each( this, function(index,item){
 			var skySelect = $(item).data("skySelect");
 			if (!skySelect)
 				skySelect = new SkySelect(item,options);
 		});
-		if (this.length == 1)
+
-			return $(this).data("skySelect");
+		var me = $(this.get(0));
-		return this;
+		if (me.hasClass("skyselect-wrapper"))
+			return me;
+		return me.parents(".skyselect-wrapper").data("skySelect");
+		*/
+		var me = $(this.get(0));
+		var skySelect = me.data("skySelect");
+		if (skySelect && options){
+			throw "skySelect() must not be called with options when already initiaized";
+		}
+		if (!skySelect)
+			skySelect = new SkySelect(me,options);
+		return skySelect;
 	}
 
 }( SKY, jQuery ));

sky.types.reference.js

@@ -48,6 +48,27 @@
                 });
 */
             this.html( html );
+            this.lastSelectedItem = null;
+        }
+
+        valid(){
+            this.html().skySelect().valid();
+        }
+        changed(){
+            var skySelect = this.html().skySelect();
+            return (skySelect.value() != this.lastSelectedItem);
+        }
+
+        value(val){
+            var skySelect = this.html().skySelect();
+
+            if (arguments.length)
+            {
+                this.lastSelectedItem = val;
+                skySelect.value(val);
+                return this;
+            }
+            return skySelect.value();
         }