#5203: Persist Show/Hide Images state in rack view

netbox/project-static/src/buttons.ts

@@ -10,47 +10,6 @@ import {
   findFirstAdjacent,
 } from './util';
 
-/**
- * Toggle the visibility of device images and update the toggle button style.
- */
-function handleRackImageToggle(event: Event) {
-  const target = event.target as HTMLButtonElement;
-  const selected = target.getAttribute('selected');
-
-  if (isTruthy(selected)) {
-    for (const elevation of getElements<HTMLObjectElement>('.rack_elevation')) {
-      const images = elevation.contentDocument?.querySelectorAll('image.device-image') ?? [];
-      for (const image of images) {
-        if (image !== null && !image.classList.contains('hidden')) {
-          image.classList.add('hidden');
-        }
-      }
-    }
-    target.innerHTML = `<i class="mdi mdi-file-image-outline"></i>&nbsp;Show Images`;
-    target.setAttribute('selected', '');
-  } else {
-    for (const elevation of getElements<HTMLObjectElement>('.rack_elevation')) {
-      const images = elevation.contentDocument?.querySelectorAll('image.device-image') ?? [];
-      for (const image of images) {
-        if (image !== null) {
-          image.classList.remove('hidden');
-        }
-      }
-    }
-    target.innerHTML = `<i class="mdi mdi-file-image-outline"></i>&nbsp;Hide Images`;
-    target.setAttribute('selected', 'selected');
-  }
-  return;
-}
-/**
- * Add onClick callback for toggling rack elevation images.
- */
-function initRackElevation() {
-  for (const button of getElements<HTMLButtonElement>('button.toggle-images')) {
-    button.addEventListener('click', handleRackImageToggle);
-  }
-}
-
 /**
  * When the toggle button is clicked, swap the connection status via the API and toggle CSS
  * classes to reflect the connection status.
@@ -280,7 +239,6 @@ function initPerPage() {
 
 export function initButtons() {
   for (const func of [
-    initRackElevation,
     initConnectionToggle,
     initReslug,
     initSelectAll,

netbox/project-static/src/netbox.ts

@@ -10,6 +10,7 @@ import { initDateSelector } from './dateSelector';
 import { initTableConfig } from './tableConfig';
 import { initInterfaceTable } from './tables';
 import { initSideNav } from './sidenav';
+import { initRackElevation } from './racks';
 
 function init() {
   for (const init of [
@@ -25,6 +26,7 @@ function init() {
     initTableConfig,
     initInterfaceTable,
     initSideNav,
+    initRackElevation,
   ]) {
     init();
   }

netbox/project-static/src/racks.ts

@@ -0,0 +1,92 @@
+import { rackImagesState } from './stores';
+import { getElements } from './util';
+
+import type { StateManager } from './state';
+
+type RackToggleState = { hidden: boolean };
+
+/**
+ * Toggle the Rack Image button to reflect the current state. If the current state is hidden and
+ * the images are therefore hidden, the button should say "Show Images". Likewise, if the current
+ * state is *not* hidden, and therefore the images are shown, the button should say "Hide Images".
+ *
+ * @param hidden Current State - `true` if images are hidden, `false` otherwise.
+ * @param button Button element.
+ */
+function toggleRackImagesButton(hidden: boolean, button: HTMLButtonElement): void {
+  const text = hidden ? 'Show Images' : 'Hide Images';
+  const selected = hidden ? '' : 'selected';
+  button.setAttribute('selected', selected);
+  button.innerHTML = `<i class="mdi mdi-file-image-outline"></i>&nbsp;${text}`;
+}
+
+/**
+ * Show all rack images.
+ */
+function showRackImages(): void {
+  for (const elevation of getElements<HTMLObjectElement>('.rack_elevation')) {
+    const images = elevation.contentDocument?.querySelectorAll('image.device-image') ?? [];
+    for (const image of images) {
+      image.classList.remove('hidden');
+    }
+  }
+}
+
+/**
+ * Hide all rack images.
+ */
+function hideRackImages(): void {
+  for (const elevation of getElements<HTMLObjectElement>('.rack_elevation')) {
+    const images = elevation.contentDocument?.querySelectorAll('image.device-image') ?? [];
+    for (const image of images) {
+      image.classList.add('hidden');
+    }
+  }
+}
+
+/**
+ * Toggle the visibility of device images and update the toggle button style.
+ */
+function handleRackImageToggle(
+  target: HTMLButtonElement,
+  state: StateManager<RackToggleState>,
+): void {
+  const initiallyHidden = state.get('hidden');
+  state.set('hidden', !initiallyHidden);
+  const hidden = state.get('hidden');
+
+  if (hidden) {
+    hideRackImages();
+  } else {
+    showRackImages();
+  }
+  toggleRackImagesButton(hidden, target);
+}
+
+/**
+ * Add onClick callback for toggling rack elevation images. Synchronize the image toggle button
+ * text and display state of images with the local state.
+ */
+export function initRackElevation() {
+  const initiallyHidden = rackImagesState.get('hidden');
+  for (const button of getElements<HTMLButtonElement>('button.toggle-images')) {
+    toggleRackImagesButton(initiallyHidden, button);
+
+    button.addEventListener(
+      'click',
+      event => {
+        handleRackImageToggle(event.currentTarget as HTMLButtonElement, rackImagesState);
+      },
+      false,
+    );
+  }
+  for (const element of getElements<HTMLObjectElement>('.rack_elevation')) {
+    element.addEventListener('load', () => {
+      if (initiallyHidden) {
+        hideRackImages();
+      } else if (!initiallyHidden) {
+        showRackImages();
+      }
+    });
+  }
+}

netbox/project-static/src/stores/index.ts

@@ -0,0 +1 @@
+export * from './rackImages';

netbox/project-static/src/stores/rackImages.ts

@@ -0,0 +1,6 @@
+import { createState } from '../state';
+
+export const rackImagesState = createState<{ hidden: boolean }>(
+  { hidden: false },
+  { persist: true },
+);