replace rack elevation logic

netbox/project-static/js/rack_elevations.js

@@ -1,13 +0,0 @@
-// Toggle the display of device images within an SVG rack elevation
-$('button.toggle-images').click(function() {
-    var selected = $(this).attr('selected');
-    var rack_elevation = $(".rack_elevation");
-    if (selected) {
-        $('.device-image', rack_elevation.contents()).addClass('hidden');
-    } else {
-        $('.device-image', rack_elevation.contents()).removeClass('hidden');
-    }
-    $(this).attr('selected', !selected);
-    $(this).children('span').toggleClass('mdi-checkbox-marked-circle-outline mdi-checkbox-blank-circle-outline');
-    return false;
-});

netbox/project-static/src/buttons.ts

@@ -0,0 +1,42 @@
+import { isTruthy, getElements } from './util';
+
+/**
+ * Add onClick callback for toggling rack elevation images.
+ */
+export function initRackElevation() {
+  for (const button of getElements('button.toggle-images')) {
+    /**
+     * Toggle the visibility of device images and update the toggle button style.
+     */
+    function handleClick(event: Event) {
+      const target = event.target as HTMLButtonElement;
+      const selected = target.getAttribute('selected');
+
+      if (isTruthy(selected)) {
+        target.innerHTML = `<i class="bi bi-file-image"></i> Show Images`;
+
+        for (const elevation of getElements<HTMLObjectElement>('.rack_elevation')) {
+          const images = elevation.contentDocument?.querySelectorAll('image.device-image') ?? [];
+          for (const image of images) {
+            if (!image.classList.contains('hidden')) {
+              image && image.classList.add('hidden');
+            }
+          }
+        }
+        target.setAttribute('selected', '');
+      } else {
+        target.innerHTML = `<i class="bi bi-file-image"></i> Hide Images`;
+
+        for (const elevation of getElements<HTMLObjectElement>('.rack_elevation')) {
+          const images = elevation.contentDocument?.querySelectorAll('image.device-image') ?? [];
+          for (const image of images) {
+            image && image.classList.remove('hidden');
+          }
+        }
+
+        target.setAttribute('selected', 'selected');
+      }
+    }
+    button.addEventListener('click', handleClick);
+  }
+}

netbox/project-static/src/netbox.ts

@@ -4,6 +4,7 @@ import { initApiSelect, initStaticSelect, initColorSelect } from './select';
 import { initDateSelector } from './dateSelector';
 import { initMessageToasts } from './toast';
 import { initSpeedSelector, initForms } from './forms';
+import { initRackElevation } from './buttons';
 import { initSearchBar } from './search';
 import { getElements } from './util';
 
@@ -16,6 +17,7 @@ const INITIALIZERS = [
   initDateSelector,
   initSpeedSelector,
   initColorSelect,
+  initRackElevation,
 ] as (() => void)[];
 
 /**

netbox/project-static/src/util.ts

@@ -49,18 +49,20 @@ export async function getApiData<T extends APIObjectBase>(
 }
 
 export function getElements<K extends keyof SVGElementTagNameMap>(
-  key: K,
+  ...key: K[]
 ): Generator<SVGElementTagNameMap[K]>;
 export function getElements<K extends keyof HTMLElementTagNameMap>(
-  key: K,
+  ...key: K[]
 ): Generator<HTMLElementTagNameMap[K]>;
-export function getElements<E extends Element>(key: string): Generator<E>;
+export function getElements<E extends Element>(...key: string[]): Generator<E>;
 export function* getElements(
-  key: string | keyof HTMLElementTagNameMap | keyof SVGElementTagNameMap,
+  ...key: (string | keyof HTMLElementTagNameMap | keyof SVGElementTagNameMap)[]
 ) {
-  for (const element of document.querySelectorAll(key)) {
-    if (element !== null) {
-      yield element;
+  for (const query of key) {
+    for (const element of document.querySelectorAll(query)) {
+      if (element !== null) {
+        yield element;
+      }
     }
   }
 }