www.spaceplanner.app

commit 6a34d5c135a643200864d2d8dab592e1b8883026
parent 024f7f8fb66aa7c25342f03f6c9c5f15009a2284
Author: Jacob R. Edwards <jacob@jacobedwards.org>
Date:   Sat, 17 Aug 2024 13:31:46 -0700

Make mode selector function more general purpose

Diffstat:
M
files/floorplans/floorplan/main.css
 | 
10
+++++-----
M
files/floorplans/floorplan/main.js
 | 
42
+++++++++++++++++++++++++++---------------

2 files changed, 32 insertions(+), 20 deletions(-)
diff --git a/files/floorplans/floorplan/main.css b/files/floorplans/floorplan/main.css
@@ -38,28 +38,28 @@ svg {
 	background-color: white;
 }
 
-.modes_selector > ul {
+.selection > ul {
 	display: inline;
 	padding: 0;
 	list-style: none;
 }
 
-.modes_selector > ul > li {
+.selection > ul > li {
 	display: inline;
 }
 
-.mode_selector {
+.selector {
 	margin: .25em;
 	background: none;
 	border: none;
 	border-bottom: medium solid lightgrey;
 }
 
-.mode_selector:hover {
+.selector:hover {
 	border-color: grey;
 }
 
-.mode_selector.selected {
+.selector.selected {
 	border-color: blue;
 }
 
diff --git a/files/floorplans/floorplan/main.js b/files/floorplans/floorplan/main.js
@@ -72,28 +72,34 @@ function init() {
 	toolbar.classList.add("toolbar")
 
 	toolbar.append(pushpull)
-
-	let li = document.createElement("li")
-	li.append(modesSelector(editor, "Modes:"))
-	toolbar.append(li)
+	toolbar.append(item(
+		selector(editor, editor.modes, function(mode) { editor.useMode(mode) },
+			{ current: editor.mode, text: "Modes:" }
+		)
+	))
 
 	editor.backend.pull()
 }
 
-function modesSelector(editor, text) {
+function selector(editor, things, select, options) {
+	options = options ?? {}
+
 	let form = document.createElement("form")
-	form.classList.add("modes_selector")
-	if (text) {
-		form.appendChild(document.createTextNode(text))
+	form.classList.add("selection")
+
+	if (options.text) {
+		form.appendChild(document.createTextNode(options.text))
 	}
 
 	let list = form.appendChild(document.createElement("ul"))
-	for (let mode in editor.modes) {
-		let selector = list.appendChild(document.createElement("li"))
-			.appendChild(ui.input(mode, "Switch to " + mode + " mode", {
-				attributes: { type: "button", value: mode },
+	for (let thing in things) {
+		console.log("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) {
-					editor.useMode(event.target.name)
+					select(event.target.name)
 					event.target.parentNode.parentNode
 						.querySelectorAll("li > .selected")
 						.forEach(function(sel) {
@@ -102,8 +108,8 @@ function modesSelector(editor, text) {
 					event.target.classList.add("selected")
 				}}
 			}))
-		selector.classList.add("mode_selector")
-		if (mode == editor.mode) {
+		selector.classList.add("selector")
+		if (thing == options.current) {
 			selector.classList.add("selected")
 		}
 	}
@@ -174,4 +180,10 @@ function notify(message, id) {
 	setTimeout(function() { e.remove() }, messageTimeout)
 }
 
+function item(node) {
+	let i = document.createElement("li")
+	i.append(node)
+	return i
+}
+
 window.onload = init