mirror of
https://github.com/netbox-community/netbox.git
synced 2024-05-10 07:54:54 +00:00
replace rack elevation logic
This commit is contained in:
42
netbox/project-static/src/buttons.ts
Normal file
42
netbox/project-static/src/buttons.ts
Normal file
@ -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);
|
||||
}
|
||||
}
|
@ -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)[];
|
||||
|
||||
/**
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user