From 18cda016bcbf1c985173c0bd951de1c088fec8f4 Mon Sep 17 00:00:00 2001
From: Michael Becker <alcexhim@gmail.com>
Date: Tue, 28 May 2024 16:18:38 -0400
Subject: [PATCH] implement dropdown wrapper to easily stylize HTML SELECT
 controls

---
 lib/phast/client/scripts/controls/DropDown.js | 152 ++++++++++++++++++
 1 file changed, 152 insertions(+)

diff --git a/lib/phast/client/scripts/controls/DropDown.js b/lib/phast/client/scripts/controls/DropDown.js
index 045f90e..d423c9e 100644
--- a/lib/phast/client/scripts/controls/DropDown.js
+++ b/lib/phast/client/scripts/controls/DropDown.js
@@ -1,7 +1,159 @@
 function DropDownWrapper(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)