File: js/1mix.datalist.js

mixElements.append("datalist");
document.createElement("datalist");
mixElements.append("mixoption");
document.createElement("mixoption");
mix.datalist = function (elements){
	var datalist;
	if (type(elements) == "undefined"){
		datalist = $(document.createElement("datalist"));
	}else{
		datalist = $(elements).filter(function (){
			var el = this.parentNode;
			var inTemplate = false;
			while (el.nodeType == 1 && el.nodeName.toLowerCase() != "html" && el.nodeName.toLowerCase() != "template")
				el = el.parentNode;
			return (("" + this.nodeName).toLowerCase() == "datalist" 
					&& this._mixInit !== true
					&& el.nodeName.toLowerCase() != "template");
					//node name is progress and has not been initialized
		});
	}
	
	datalist.each(function (){
		this._mixInit = true;
	}).redraw().bind("mousedown", function (){
		this._focused = true;
	}).bind("keydown", mix.datalist.keyDown);
	
	$(window).resize(function (){
		datalist.redraw();
	});
	return datalist;
};
mix.datalist.keyDown = function (e){
	var el = this;
	if (type(e.data) == "element")
		el = e.data;
	if (e.keyCode == mix.keyBtn.DOWN_ARROW){ //down
		mix.datalist.selectNext(el);
	}else if (e.keyCode == mix.keyBtn.UP_ARROW){ //up
		mix.datalist.selectPrev(el);
	}else if (e.keyCode == mix.keyBtn.ENTER){ //enter
		mix.datalist.chooseCurrentSelection(el);
	}
};
mix.datalist.redraw = function (el){
	if (type(el._currentHook) != "undefined" && type(el._currentHook) == "element" && $(el).find("mixoption").size() != 0){
		if (el._currentHook.nodeType == 1 && el._currentHook.nodeName.toLowerCase() == "input"){
			$(el).addClass("hookInput");
			var left = $(el._currentHook).offset().left;
			var top = $(el._currentHook).offset().top + $(el._currentHook).outerHeight();
			var width = $(el._currentHook).outerWidth() - ($(el).outerWidth() - $(el).innerWidth());
			$(el).show().css({
				position: "absolute",
				left: left + "px",
				top: top + "px",
				width: width + "px"
			}).children().redraw();
			//must call the children to redraw otherwise they show improperly
			//e.g. progress, we must redraw it or it will show without progressbar
		}
	}else{
		$(el).removeClass("hookInput");
		$(el).hide();
	}
};
mix.datalist.unselectAll = function (el){	
	$(el).childrenTag("mixoption").each(function (){
		mix.datalist.unselect(this);
	});
};
mix.datalist.selectNext = function (el){
	var options = $(el).find("mixoption");
	var selected = options.filter(".hover");
	var next = selected.next();
	mix.datalist.unselectAll(el);
	if (selected.size() == 0 || next.size() == 0){
		mix.datalist.select(options.filter(":first"));
	}else{
		mix.datalist.select(next);
	}
};
mix.datalist.selectPrev = function (el){
	var options = $(el).find("mixoption");
	var selected = options.filter(".hover");
	var prev = selected.prev();
	mix.datalist.unselectAll(el);
	if (selected.size() == 0 || prev.size() == 0){
		mix.datalist.select(options.filter(":last"));
	}else{
		mix.datalist.select(prev);
	}
};
mix.datalist.chooseCurrentSelection = function (el){
	var options = $(el).find("mixoption");
	var selected = options.filter(".hover");
	if (selected.size() > 0){
		mix.datalist.chosenValue(el, mix.datalist.getValue(selected.get(0)));
	}
};
mix.datalist.chosenValue = function (el, value){
	if (type(el._currentHook) == "element")
		$(el._currentHook).val(value);
	mix.datalist.attr(el, "hook", "");
	el._focused = false;
};
mix.datalist.attr = function (el, name, value){
	if (type(value) == "undefined"){ //getter
		return el._currentHook;
	}
	
	if (type(el._currentHook) == "element"){ //unhook and unbind it
		$(el._currentHook).unbind("keydown", mix.datalist.keyDown);
	}
	if (type(value) == "element"){ //hook and bind it
		$(el._currentHook).bind("keydown", el, mix.datalist.keyDown);
	}
	el._currentHook = value;
	$(el).trigger("attrChange", [name, value]);
	mix.datalist.redraw(el);
	
	return value;
};
mix.datalist.getValue = function (optionEl){
	var val = $(optionEl).attr("value");
	if (type(val) == "undefined"){
		val = $(optionEl).text();
	}
	return val;
};
mix.datalist.select = function (optionEl){
	$(optionEl).addClass("hover");
};
mix.datalist.unselect = function (optionEl){
	$(optionEl).removeClass("hover");
};
mix.datalist.customAttrList = "hook".split(",");


mix.mixoption = function (elements){
	var mixoption;
	if (type(elements) == "undefined"){
		mixoption = $(document.createElement("mixoption"));
	}else{
		mixoption = $(elements).filter(function (){
			var el = this.parentNode;
			var inTemplate = false;
			while (el.nodeType == 1 && el.nodeName.toLowerCase() != "html" && el.nodeName.toLowerCase() != "template")
				el = el.parentNode;
			return (("" + this.nodeName).toLowerCase() == "mixoption" 
					&& this._mixInit !== true
					&& el.nodeName.toLowerCase() != "template");
					//node name is progress and has not been initialized
		});
	}
	
	
	mixoption.each(function (){
		this._mixInit = true;
	}).bind("mousedown", function (){
		$(this).parent().get(0)._focused = true;
	}).bind("click", function (){
		var val = mix.datalist.getValue(this);
		mix.datalist.chosenValue($(this).parent().get(0), val);
	}).bind("mouseover", function (){
		mix.datalist.unselectAll($(this).parent().get(0));
		mix.datalist.select(this);
	}).bind("mouseout", function (){
		mix.datalist.unselect(this);
	});
	
	return mixoption;
};