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)) {
+  for (const query of key) {
-    if (element !== null) {
+    for (const element of document.querySelectorAll(query)) {
-      yield element;
+      if (element !== null) {
+        yield element;
+      }
     }
   }
 }

netbox/templates/dcim/rack.html

@@ -18,29 +18,17 @@
   <li class="breadcrumb-item">{{ object }}</li>
 {% endblock %}
 
-{% block buttons %}
+{% block extra_controls %}
-  <a {% if prev_rack %}href="{% url 'dcim:rack' pk=prev_rack.pk %}"{% else %}disabled="disabled"{% endif %} class="btn btn-primary">
+  <button class="btn btn-sm btn-outline-primary m-1 toggle-images" selected="selected">
-    <span class="mdi mdi-chevron-left" aria-hidden="true"></span> Previous Rack
+    <i class="bi bi-file-image"></i> 
-  </a>
+    Hide Images
-  <a {% if next_rack %}href="{% url 'dcim:rack' pk=next_rack.pk %}"{% else %}disabled="disabled"{% endif %} class="btn btn-primary">
-    <span class="mdi mdi-chevron-right" aria-hidden="true"></span> Next Rack
-  </a>
-  {% if perms.dcim.add_rack %}
-    {% clone_button object %}
-  {% endif %}
-  {% if perms.dcim.change_rack %}
-    {% edit_button object %}
-  {% endif %}
-  {% if perms.dcim.delete_rack %}
-    {% delete_button object %}
-  {% endif %}
-{% endblock %}
-
-{% block tab_buttons %}
-  <button class="btn btn-sm btn-default toggle-images" selected="selected">
-    <span class="mdi mdi-checkbox-marked-circle-outline" aria-hidden="true"></span> Show Images
   </button>
-  {{ block.super }}
+  <a {% if prev_rack %}href="{% url 'dcim:rack' pk=prev_rack.pk %}"{% else %}disabled="disabled"{% endif %} class="btn btn-sm btn-primary m-1">
+    <i class="mdi mdi-chevron-left" aria-hidden="true"></i> Previous Rack
+  </a>
+  <a {% if next_rack %}href="{% url 'dcim:rack' pk=next_rack.pk %}"{% else %}disabled="disabled"{% endif %} class="btn btn-sm btn-primary m-1">
+    <i class="mdi mdi-chevron-right" aria-hidden="true"></i> Next Rack
+  </a>
 {% endblock %}
 
 {% block content %}
@@ -389,7 +377,3 @@
     </div>
 </div>
 {% endblock %}
-
-{% block javascript %}
-<script src="{% static 'js/rack_elevations.js' %}?v{{ settings.VERSION }}"></script>
-{% endblock %}

netbox/templates/generic/object.html

@@ -63,10 +63,10 @@
 </ul>
 {% endblock %}
 
-{% block content %}{% endblock %}
+{% block content %}{% block tab_buttons %}{% endblock %}{% endblock %}
 {% block components %}{% endblock %}
 
-{% block header %}
+{% comment %} {% block header %}
   <div class="row noprint">
     <div class="col-sm-8 col-md-9">
       <nav aria-label="breadcrumb">
@@ -89,7 +89,7 @@
       </form>
     </div>
   </div>
-  {% comment %} <div class="pull-right noprint">
+  <div class="pull-right noprint">
     {% plugin_buttons object %}
     {% block buttons %}
       {% if request.user|can_add:object %}
@@ -104,7 +104,7 @@
     {% endblock %}
   </div>
   <h1>{% block title %}{{ object }}{% endblock %}</h1>
-  {% endcomment %}
+  
   {% include 'inc/created_updated.html' %}
   <div class="float-end noprint">
     {% block tab_buttons %}
@@ -112,4 +112,4 @@
     {% endblock %}
   </div>
   
-{% endblock %}
+{% endblock %} {% endcomment %}