function $(elementid)
{
return document.getElementById(elementid);
}
function bind(toObject, methodName)
{
return function(e){toObject[methodName](e)}
}
function listen(object, hevent, hfunc)
{
if (object.addEventListener)
object.addEventListener(hevent,hfunc,false);
else if (object.attachEvent)
object.attachEvent('on'+hevent,hfunc);
}
function listenex(object, hevent, lobject, lfunc)
{
listen(object, hevent, bind(lobject, lfunc));
}
function UserList(listid, assocform)
{
//Getting list
this.ulist = $(listid);
this.usubm = document.createElement("input");
//Submit values
this.usubm_values = Array();
//Options
this.multi = true;
//Associated form
this.uform = $(assocform);
//Initializer
this.Setup = function(ismulti, fixedheight, setwidth, setheight)
{
//Setting class name
this.ulist.className = "userlist";
//Setting size
if (setwidth != null)
this.ulist.style.width = setwidth + "px";
else
this.ulist.style.width = "150px";
if (setheight != null)
this.ulist.style.height = setheight + "px";
//Setting options
if (ismulti != null) this.multi = ismulti;
if (fixedheight != null && fixedheight != false) this.ulist.className += " fixedsize";
//Settings to submitting
this.usubm.type = "hidden";
this.usubm.name = this.ulist.id;
this.ulist.parentNode.appendChild(this.usubm);
//Getting all elements in the list
var ulistelements = this.ulist.getElementsByTagName("li");
//Specciyng the elements
for (var i = 0; i < ulistelements.length; i++)
{
listenex(ulistelements[i], "mouseover", this, "handler_mouseover");
listenex(ulistelements[i], "mouseout", this, "handler_mouseout");
listenex(ulistelements[i], "click", this, "handler_click");
if (i+1 == ulistelements.length)
{
ulistelements[i].className += " lastelement";
}
}
//Setting listener element
listenex(this.uform, "submit", this, "handler_submitting");
}
//Getting current selection
this.SetSelect = function(element, state)
{
element.setAttribute("uselist_is_selected", state.toString());
this.SetSubmitting(element, state);
}
//Get selected value
this.IsSelected = function(element)
{
if (element.getAttribute("uselist_is_selected") == null ||
element.getAttribute("uselist_is_selected") == "false")
return false;
else
return true;
}
//Getting callable
this.GetElementByEvent = function(handler_event)
{
if (!handler_event) handler_event = window.event;
return handler_event.srcElement ? handler_event.srcElement : handler_event.target;
}
//Unselecting all
this.UnselectAll = function()
{
var ulistelements = this.ulist.getElementsByTagName("li");
for (var i = 0; i < ulistelements.length; i++)
{
this.SetSelect(ulistelements[i], false);
ulistelements[i].className = ulistelements[i].className.replace("selected", "").replace("active", "");
this.SetSubmitting(ulistelements[i], false);
}
}
//Submitting variables
this.SetSubmitting = function(element, state)
{
this.usubm_values[element.value] = state;
}
//Handlers
//Submitting entire form
this.handler_submitting = function()
{
var submit_string = "";
for (entry in this.usubm_values)
{
if (this.usubm_values[entry] == true)
submit_string += entry + " ";
}
this.usubm.value = submit_string;
}
//Creating styling — on mouse over element
this.handler_mouseover = function(e)
{
e = this.GetElementByEvent(e);
if (!this.IsSelected(e))
e.className += " active";
}
//Creating styling — on mouse out element
this.handler_mouseout = function(e)
{
e = this.GetElementByEvent(e);
if (!this.IsSelected(e))
e.className = e.className.replace("active", "");
}
//Creating action — on mouse click
this.handler_click = function(e)
{
e = this.GetElementByEvent(e);
//if uniselectable we should clear selection
if (!this.multi) this.UnselectAll();
if (!this.IsSelected(e))
{
this.SetSelect(e, true);
e.className += " selected";
}
else
{
this.SetSelect(e, false);
e.className = e.className.replace("selected", "");
}
}
}
//Использование
var ulist1 = new UserList("place", "listtest");
ulist1.Setup();
var ulist2 = new UserList("set", "listtest");
ulist2.Setup(false);
var ulist3 = new UserList("line", "listtest");
ulist3.Setup(false, true, 150, 150);