commit 5261a3f3c075bc6f8e475074e062af202e992479
parent 30098218a60d82870cce5b8b674d1b713446a9c1
Author: Jacob R. Edwards <jacob@jacobedwards.org>
Date: Tue, 6 Aug 2024 16:50:11 -0700
Add ui library with button helper functions
- The button function creates a button with an icon
- The toggle function takes two buttons and switches them out each
time one of them is pressed
One issue with this toggle implementation is that it uses replaceWith
on the button it's replacing, which (in my browser at least)
re-renders the page without the element for an instant before
re-rendering it again with it, causing things to move around.
Diffstat:
3 files changed, 41 insertions(+), 47 deletions(-)
diff --git a/files/floorplans/index.html b/files/floorplans/index.html
@@ -8,7 +8,7 @@
<html>
<h1>Floorplans</h1>
- <input type="image" value="list" class="icon" id="display_method"/>
+ <input type="image" id="display_method"/>
<hr>
diff --git a/files/floorplans/main.js b/files/floorplans/main.js
@@ -1,5 +1,6 @@
import * as api from "/lib/api.js"
import * as etc from "/lib/etc.js"
+import * as ui from "/lib/ui.js"
function init() {
etc.authorize()
@@ -9,39 +10,23 @@ function init() {
if (!display_button) {
throw new Error("Expected #display_method")
}
- set_display_method(display_button, "grid")
-
- display_button.addEventListener("click", toggle_display_method_func(display_button), false)
+ display_button.replaceWith(
+ ui.toggle(
+ ui.button("List", "Switch to list view", "list"),
+ function() {
+ document.getElementById("floorplans").removeAttribute("class")
+ },
+ ui.button("Grid", "Switch to grid view", "grid"),
+ function() {
+ document.getElementById("floorplans").setAttribute("class", "grid")
+ }
+ )
+ )
api.fetch("GET", "floorplans/" + localStorage.getItem("username"))
.then(show_floorplans)
}
-function toggle_display_method_func(button) {
- return function() {
- set_display_method(button, button.value)
- }
-}
-
-function set_display_method(button, method) {
- let floorplans = document.getElementById("floorplans")
- if (!floorplans) {
- throw new Error("expected #floorplans")
- }
- if (method === "list") {
- floorplans.removeAttribute("class")
- var other = "grid"
- } else if (method === "grid") {
- floorplans.setAttribute("class", "grid")
- var other = "list"
- } else {
- throw new Error("Invalid method")
- }
- button.value = other
- button.src = "/icons/" + other + "-outline.svg"
- button.setAttribute("title", "Switch to " + other + " layout")
-}
-
function edit_floorplan_func(item, floorplan) {
return function() {
etc.error("Edit not implemented", item)
@@ -65,24 +50,8 @@ function create_floorplan(floorplan) {
root.setAttribute("class", "floorplan")
let aside = document.createElement("aside")
-
- let button = document.createElement("input")
- button.addEventListener("click", edit_floorplan_func(root, floorplan), false)
- button.type = "image"
- button.src = "/icons/create-outline.svg"
- button.alt = "Edit"
- button.setAttribute("title", "Edit floorplan")
- button.setAttribute("class", "icon")
- aside.append(button)
-
- button = document.createElement("input")
- button.addEventListener("click", delete_floorplan_func(root, floorplan), false)
- button.type = "image"
- button.src = "/icons/trash-outline.svg"
- button.alt = "Delete"
- button.setAttribute("title", "Delete floorplan")
- button.setAttribute("class", "icon")
- aside.append(button)
+ aside.append(ui.button("Edit", "Edit floorplan", "create", edit_floorplan_func(root, floorplan)))
+ aside.append(ui.button("Delete", "Delete floorplan", "trash", delete_floorplan_func(root, floorplan)))
root.append(aside)
diff --git a/files/lib/ui.js b/files/lib/ui.js
@@ -0,0 +1,24 @@
+export function button(name, memo, icon, func) {
+ let button = document.createElement("input")
+ button.alt = name
+ button.type = "image"
+ button.src = "/icons/" + icon + "-outline.svg"
+ if (func) {
+ button.addEventListener("click", func, false)
+ }
+ button.setAttribute("title", memo)
+ button.setAttribute("class", "icon")
+ return button
+}
+
+export function toggle(a, afunc, b, bfunc) {
+ a.addEventListener("click", function() {
+ afunc()
+ a.replaceWith(b)
+ }, false)
+ b.addEventListener("click", function() {
+ bfunc()
+ b.replaceWith(a)
+ }, false)
+ return a
+}
+\ No newline at end of file
