alcetech/phast
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

implement dropdown wrapper to easily stylize HTML SELECT controls

Browse Source
This commit is contained in:
Michael Becker 2024-05-28 16:18:38 -04:00
parent bc40da48be
commit 18cda016bc
1 changed files with 152 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
lib/phast/client/scripts/controls/DropDown.js
View File

@ -1,7 +1,159 @@
function DropDownWrapper(parentElement) function DropDownWrapper(parentElement)
{ {
this.ParentElement = parentElement; this.ParentElement = parentElement;
this.ParentContainer = this.ParentElement.parentElement;
this.SelectElement = this.ParentElement;
this.ShowPopupMenu = function()
{
for (var i = 0; i < this.SelectElement.options.length; i++)
{
if (this.InputElement.value == "" || this.SelectElement.options[i].label.toLowerCase().indexOf(this.InputElement.value.toLowerCase()) != -1)
{
System.ClassList.Add(this.SelectElement.options[i].li, "uwt-visible");
}
else
{
System.ClassList.Remove(this.SelectElement.options[i].li, "uwt-visible");
}
}
System.ClassList.Add(this.MenuElement, "uwt-visible");
};
this.HidePopupMenu = function()
{
System.ClassList.Remove(this.MenuElement, "uwt-visible");
};
var div = document.createElement("div");
div.className = "uwt-combobox";
div.ni = this;
div.tabIndex = 0;
this.ParentElement.replaceWith(div);
div.appendChild(this.SelectElement);
var input = document.createElement("input");
input.id = this.SelectElement.id + "_input";
input.ni = this;
input.type = "text";
input.addEventListener("focus", function()
{
this.ni.InputElement._prev_value = this.ni.InputElement.value;
this.ni.InputElement.value = "";
this.ni.ShowPopupMenu();
});
input.addEventListener("blur", function()
{
this.ni.InputElement.value = this.ni.InputElement._prev_value;
if (!this.ni.SelectElement.hasAttribute("multiple"))
{
this.ni.HidePopupMenu();
}
});
input.addEventListener("keydown", function(e)
{
if (e.keyCode == KeyboardKeys.Enter)
{
this.__accepted = true;
//this.ni.SetValue(this.ni.GetHighlightedOption().value);
this.ni.HidePopupMenu();
this.parentElement.focus();
e.preventDefault();
e.stopPropagation();
return false;
}
});
input.addEventListener("keyup", function(e)
{
if (this.__accepted == true)
{
this.__accepted = false;
e.preventDefault();
e.stopPropagation();
return false;
}
if (e.keyCode == KeyboardKeys.Escape)
{
this.ni.HidePopupMenu();
}
else
{
this.ni.ShowPopupMenu();
}
});
div.appendChild(input);
this.InputElement = input;
var ul = document.createElement("ul");
this.MenuElement = ul;
ul.className = "uwt-menu uwt-popup";
for (var i = 0; i < this.SelectElement.options.length; i++)
{
var li = document.createElement("li");
li.className = "uwt-menu-item uwt-menu-item-command uwt-visible";
this.SelectElement.options[i].li = li;
var a = document.createElement("a");
a.href = "#";
var spanTitle = document.createElement("span");
spanTitle.className = "uwt-title";
spanTitle.innerHTML = this.SelectElement.options[i].label;
a.appendChild(spanTitle);
var spanDescription = document.createElement("span");
spanDescription.className = "uwt-description";
spanDescription.innerHTML = "";
a.appendChild(spanDescription);
if (this.SelectElement.options[i].hasAttribute("data-description"))
{
spanDescription.innerHTML = this.SelectElement.options[i].getAttribute("data-description");
}
a.option = this.SelectElement.options[i];
a.ni = this;
a.addEventListener("click", function()
{
this.ni.InputElement.value = this.option.label;
if (this.ni.SelectElement.hasAttribute("multiple"))
{
}
else
{
this.ni.SelectElement.value = this.option.value;
for (var j = 0; j < this.ni.MenuElement.children.length; j++)
{
if (this.ni.MenuElement.children[j].children[0] == this)
{
System.ClassList.Add(this.ni.MenuElement.children[j], "uwt-selected");
}
else
{
System.ClassList.Remove(this.ni.MenuElement.children[j], "uwt-selected");
}
}
System.ClassList.Remove(this.ni.MenuElement, "uwt-visible");
}
});
li.appendChild(a);
if (i == this.SelectElement.selectedIndex)
{
this.InputElement.value = a.option.label;
System.ClassList.Add(li, "uwt-selected");
}
ul.appendChild(li);
}
div.appendChild(ul);
this.ParentElement.style.display = "none";
} }
function DropDown(id) function DropDown(id)