www.spaceplanner.app

commit 623223f34f972f95f787d391b8850a6edd550ff4
parent 7b6f479fd371e69b33175637ef475ab79bdcdd2e
Author: Jacob R. Edwards <jacob@jacobedwards.org>
Date:   Tue, 15 Oct 2024 23:04:28 -0700

Use select tag in selector function

This solution should be better on more varied devices since <select>
and <option>s are just an interface to selecting options rather
than a list of buttons to be displayed only one way.

Furthermore the CSS for the previous solution wasn't looking great
on some devices.

Diffstat:
M
files/floorplans/floorplan/main.css
 | 
25
-------------------------
M
files/floorplans/floorplan/main.js
 | 
29
+++++++++--------------------

2 files changed, 9 insertions(+), 45 deletions(-)
diff --git a/files/floorplans/floorplan/main.css b/files/floorplans/floorplan/main.css
@@ -49,31 +49,6 @@ svg {
 	background-color: white;
 }
 
-.selection > ul {
-	display: inline;
-	padding: 0;
-	list-style: none;
-}
-
-.selection > ul > li {
-	display: inline;
-}
-
-.selector {
-	margin: .25em;
-	background: none;
-	border: none;
-	border-bottom: medium solid lightgrey;
-}
-
-.selector:hover {
-	border-color: grey;
-}
-
-.selector.selected {
-	border-color: blue;
-}
-
 aside.terminal {
 	position: absolute;
 	bottom: 5vh;
diff --git a/files/floorplans/floorplan/main.js b/files/floorplans/floorplan/main.js
@@ -417,36 +417,25 @@ function selector(things, select, options) {
 	form.classList.add("selection")
 
 	if (options.text) {
-		form.appendChild(document.createTextNode(options.text))
+		form.appendChild(document.createTextNode(options.text + " "))
 	}
 
-	let list = form.appendChild(document.createElement("ul"))
+	let list = form.appendChild(document.createElement("select"))
+	list.addEventListener("change", function(event) { select(event.target.value) })
+
 	let isArray = Array.isArray(things)
 	for (let thing in things) {
 		if (isArray) {
 			thing = things[thing]
 		}
+
 		console.debug("selector", options.text ?? "something", thing)
-		let item = list.appendChild(document.createElement("li"))
-		let selector = item
-			.appendChild(ui.input(thing, "Select " + thing, {
-				attributes: { type: "button", value: thing },
-				handlers: { click: function(event) {
-					select(event.target.name)
-					event.target.parentNode.parentNode
-						.querySelectorAll("li > .selected")
-						.forEach(function(sel) {
-							sel.classList.remove("selected")
-						})
-					event.target.classList.add("selected")
-				}}
-			}))
-		selector.classList.add("selector")
-		if (thing == options.current) {
-			selector.classList.add("selected")
-		}
+		list.appendChild(document.createElement("option"))
+			.appendChild(document.createTextNode(thing))
 	}
 
+	list.value = options.current
+
 	return form
 }