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;
}; |