diff --git a/netbox/project-static/dist/netbox.js b/netbox/project-static/dist/netbox.js index 1c7130104..742da1819 100644 Binary files a/netbox/project-static/dist/netbox.js and b/netbox/project-static/dist/netbox.js differ diff --git a/netbox/project-static/dist/netbox.js.map b/netbox/project-static/dist/netbox.js.map index 0ca4ba92c..8720570f1 100644 Binary files a/netbox/project-static/dist/netbox.js.map and b/netbox/project-static/dist/netbox.js.map differ diff --git a/netbox/project-static/src/buttons.ts b/netbox/project-static/src/buttons.ts index 3d78ad38c..0486c9db4 100644 --- a/netbox/project-static/src/buttons.ts +++ b/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('.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 = ` Show Images`; - target.setAttribute('selected', ''); - } else { - for (const elevation of getElements('.rack_elevation')) { - const images = elevation.contentDocument?.querySelectorAll('image.device-image') ?? []; - for (const image of images) { - if (image !== null) { - image.classList.remove('hidden'); - } - } - } - target.innerHTML = ` Hide Images`; - target.setAttribute('selected', 'selected'); - } - return; -} -/** - * Add onClick callback for toggling rack elevation images. - */ -function initRackElevation() { - for (const button of getElements('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, diff --git a/netbox/project-static/src/netbox.ts b/netbox/project-static/src/netbox.ts index 2b2d81979..7a5709aa9 100644 --- a/netbox/project-static/src/netbox.ts +++ b/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(); } diff --git a/netbox/project-static/src/racks.ts b/netbox/project-static/src/racks.ts new file mode 100644 index 000000000..ebf20a024 --- /dev/null +++ b/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 = ` ${text}`; +} + +/** + * Show all rack images. + */ +function showRackImages(): void { + for (const elevation of getElements('.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('.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, +): 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('button.toggle-images')) { + toggleRackImagesButton(initiallyHidden, button); + + button.addEventListener( + 'click', + event => { + handleRackImageToggle(event.currentTarget as HTMLButtonElement, rackImagesState); + }, + false, + ); + } + for (const element of getElements('.rack_elevation')) { + element.addEventListener('load', () => { + if (initiallyHidden) { + hideRackImages(); + } else if (!initiallyHidden) { + showRackImages(); + } + }); + } +} diff --git a/netbox/project-static/src/stores/index.ts b/netbox/project-static/src/stores/index.ts new file mode 100644 index 000000000..5ee4adabb --- /dev/null +++ b/netbox/project-static/src/stores/index.ts @@ -0,0 +1 @@ +export * from './rackImages'; diff --git a/netbox/project-static/src/stores/rackImages.ts b/netbox/project-static/src/stores/rackImages.ts new file mode 100644 index 000000000..beeb25bce --- /dev/null +++ b/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 }, +);