www.spaceplanner.app

commit e072a3967b78cf8f909a957a3d8aed59eeb9979e
parent 87f86b45727e6e6f824cdd25a716daf1e537d3fc
Author: Jacob R. Edwards <jacob@jacobedwards.org>
Date:   Thu,  8 Aug 2024 00:54:33 -0700

Update & refactor ui's toggle interface

Instead of two buttons and their functions, it now takes two objects
(containing a button and function) and some options. The options
allow you to easily swap inputs or have the buttons initialized by
calling one of the functions.

Diffstat:
M
files/floorplans/main.js
 | 
23
++++++++++++++---------
M
files/lib/ui.js
 | 
38
++++++++++++++++++++++++--------------

2 files changed, 38 insertions(+), 23 deletions(-)
diff --git a/files/floorplans/main.js b/files/floorplans/main.js
@@ -13,13 +13,16 @@ function init() {
 	if (!display_button) {
 		throw new Error("Expected #display_method")
 	}
-	gridview()
-	display_button.replaceWith(
-		ui.toggle(
-			ui.button("List", "Switch to list view", "list"), listview,
-			ui.button("Grid", "Switch to grid view", "grid"), gridview,
-		)
-	)
+
+	let list = { button: ui.button("List", "Switch to list view", "list"), func: listview }
+	let grid = { button: ui.button("Grid", "Switch to grid view", "grid"), func: gridview }
+	let toggle
+	if (localStorage.getItem("fp_gridview")) {
+		toggle = ui.toggle(list, grid, { init: true })
+	} else {
+		toggle = ui.toggle(grid, list, { init: true })
+	}
+	display_button.replaceWith(toggle)
 
 	api.fetch("GET", "floorplans/" + etc.url_literal(localStorage.getItem("username")))
 		.then(show_floorplans)
@@ -27,10 +30,12 @@ function init() {
 
 function listview() {
 	document.getElementById("floorplans").removeAttribute("class")
+	localStorage.removeItem("fp_gridview")
 }
 
 function gridview() {
 	document.getElementById("floorplans").setAttribute("class", "grid")
+	localStorage.setItem("fp_gridview", "list")
 }
 
 function commit_editable_floorplan_func(element, data) {
@@ -209,8 +214,8 @@ function create_floorplan(floorplan) {
 	if (floorplan) {
 		aside.append(
 			ui.toggle(
-				ui.button("Edit", "Edit floorplan", "create"), editable_floorplan_func(root, floorplan),
-				ui.button("Save", "Save floorplan", "save"), commit_editable_floorplan_func(root, floorplan),
+				{ button: ui.button("Edit", "Edit floorplan", "create"), func: editable_floorplan_func(root, floorplan) },
+				{ button: ui.button("Save", "Save floorplan", "save"), func: commit_editable_floorplan_func(root, floorplan) },
 			)
 		)
 		aside.append(ui.button("Delete", "Delete floorplan", "trash", delete_floorplan_func(root, floorplan)))
diff --git a/files/lib/ui.js b/files/lib/ui.js
@@ -11,22 +11,32 @@ export function button(name, memo, icon, func) {
 	return button
 }
 
-export function toggle(a, afunc, b, bfunc) {
-	a.addEventListener("click", function() {
-		let r = afunc()
-		if (r && typeof r.then == "function") {
-			r.then(function() { a.replaceWith(b) })
-		} else {
-			a.replaceWith(b)
-		}
-	}, false)
-	b.addEventListener("click", function() {
-		let r = bfunc()
+export function toggle(a, b, options) {
+	if (!options) {
+		options = {}
+	}
+	if (options.swap) {
+		let t = a
+		a = b
+		b = t
+	}
+	if (options.init) {
+		// Should this be run like in the event listener, handling .then methods?
+		b.func()
+	}
+	toggle_setup_button(a, b)
+	toggle_setup_button(b, a)
+	return a.button
+}
+
+function toggle_setup_button(a, b) {
+	a.button.addEventListener("click", function() {
+		let swap = function() { a.button.replaceWith(b.button) }
+		let r = a.func()
 		if (r && typeof r.then == "function") {
-			r.then(function() { b.replaceWith(a) })
+			r.then(swap)
 		} else {
-			b.replaceWith(a)
+			swap()
 		}
 	}, false)
-	return a
 }