|
1 | | -import { rackImagesState } from './stores'; |
| 1 | +import { rackImagesState, RackViewSelection } from './stores'; |
2 | 2 | import { getElements } from './util'; |
3 | 3 |
|
4 | 4 | import type { StateManager } from './state'; |
5 | 5 |
|
6 | | -type RackToggleState = { hidden: boolean }; |
| 6 | +export type RackViewState = { view: RackViewSelection }; |
7 | 7 |
|
8 | 8 | /** |
9 | | - * Toggle the Rack Image button to reflect the current state. If the current state is hidden and |
10 | | - * the images are therefore hidden, the button should say "Show Images". Likewise, if the current |
11 | | - * state is *not* hidden, and therefore the images are shown, the button should say "Hide Images". |
12 | | - * |
13 | | - * @param hidden Current State - `true` if images are hidden, `false` otherwise. |
14 | | - * @param button Button element. |
| 9 | + * Show or hide images and labels to build the desired rack view. |
15 | 10 | */ |
16 | | -function toggleRackImagesButton(hidden: boolean, button: HTMLButtonElement): void { |
17 | | - const text = hidden ? 'Show Images' : 'Hide Images'; |
18 | | - const selected = hidden ? '' : 'selected'; |
19 | | - button.setAttribute('selected', selected); |
20 | | - button.innerHTML = `<i class="mdi mdi-file-image-outline"></i> ${text}`; |
| 11 | +function setRackView( |
| 12 | + view: RackViewSelection, |
| 13 | + elevation: HTMLObjectElement, |
| 14 | +): void { |
| 15 | + switch(view) { |
| 16 | + case 'images-and-labels': { |
| 17 | + showRackElements('image.device-image', elevation); |
| 18 | + showRackElements('text.device-label-image', elevation); |
| 19 | + showRackElements('text.device-label-noimage', elevation); |
| 20 | + break; |
| 21 | + } |
| 22 | + case 'images-or-labels': { |
| 23 | + showRackElements('image.device-image', elevation); |
| 24 | + hideRackElements('text.device-label-image', elevation); |
| 25 | + showRackElements('text.device-label-noimage', elevation); |
| 26 | + break; |
| 27 | + } |
| 28 | + case 'images-only': { |
| 29 | + showRackElements('image.device-image', elevation); |
| 30 | + hideRackElements('text.device-label-image', elevation); |
| 31 | + hideRackElements('text.device-label-noimage', elevation); |
| 32 | + break; |
| 33 | + } |
| 34 | + case 'labels-only': { |
| 35 | + hideRackElements('image.device-image', elevation); |
| 36 | + showRackElements('text.device-label-image', elevation); |
| 37 | + showRackElements('text.device-label-noimage', elevation); |
| 38 | + break; |
| 39 | + } |
| 40 | + } |
21 | 41 | } |
22 | 42 |
|
23 | | -/** |
24 | | - * Show all rack images. |
25 | | - */ |
26 | | -function showRackImages(): void { |
27 | | - for (const elevation of getElements<HTMLObjectElement>('.rack_elevation')) { |
28 | | - const images = elevation.contentDocument?.querySelectorAll('image.device-image') ?? []; |
29 | | - for (const image of images) { |
30 | | - image.classList.remove('hidden'); |
31 | | - } |
| 43 | +function showRackElements( |
| 44 | + selector: string, |
| 45 | + elevation: HTMLObjectElement, |
| 46 | +): void { |
| 47 | + const elements = elevation.contentDocument?.querySelectorAll(selector) ?? []; |
| 48 | + for (const element of elements) { |
| 49 | + element.classList.remove('hidden'); |
32 | 50 | } |
33 | 51 | } |
34 | 52 |
|
35 | | -/** |
36 | | - * Hide all rack images. |
37 | | - */ |
38 | | -function hideRackImages(): void { |
39 | | - for (const elevation of getElements<HTMLObjectElement>('.rack_elevation')) { |
40 | | - const images = elevation.contentDocument?.querySelectorAll('image.device-image') ?? []; |
41 | | - for (const image of images) { |
42 | | - image.classList.add('hidden'); |
43 | | - } |
| 53 | +function hideRackElements( |
| 54 | + selector: string, |
| 55 | + elevation: HTMLObjectElement, |
| 56 | +): void { |
| 57 | + const elements = elevation.contentDocument?.querySelectorAll(selector) ?? []; |
| 58 | + for (const element of elements) { |
| 59 | + element.classList.add('hidden'); |
44 | 60 | } |
45 | 61 | } |
46 | 62 |
|
47 | 63 | /** |
48 | | - * Toggle the visibility of device images and update the toggle button style. |
| 64 | + * Change the visibility of all racks in response to selection. |
49 | 65 | */ |
50 | | -function handleRackImageToggle( |
51 | | - target: HTMLButtonElement, |
52 | | - state: StateManager<RackToggleState>, |
| 66 | +function handleRackViewSelect( |
| 67 | + newView: RackViewSelection, |
| 68 | + state: StateManager<RackViewState>, |
53 | 69 | ): void { |
54 | | - const initiallyHidden = state.get('hidden'); |
55 | | - state.set('hidden', !initiallyHidden); |
56 | | - const hidden = state.get('hidden'); |
57 | | - |
58 | | - if (hidden) { |
59 | | - hideRackImages(); |
60 | | - } else { |
61 | | - showRackImages(); |
| 70 | + state.set('view', newView); |
| 71 | + for (const elevation of getElements<HTMLObjectElement>('.rack_elevation')) { |
| 72 | + setRackView(newView, elevation); |
62 | 73 | } |
63 | | - toggleRackImagesButton(hidden, target); |
64 | 74 | } |
65 | 75 |
|
66 | 76 | /** |
67 | | - * Add onClick callback for toggling rack elevation images. Synchronize the image toggle button |
68 | | - * text and display state of images with the local state. |
| 77 | + * Add change callback for selecting rack elevation images, and set |
| 78 | + * initial state of select and the images themselves |
69 | 79 | */ |
70 | 80 | export function initRackElevation() { |
71 | | - const initiallyHidden = rackImagesState.get('hidden'); |
72 | | - for (const button of getElements<HTMLButtonElement>('button.toggle-images')) { |
73 | | - toggleRackImagesButton(initiallyHidden, button); |
| 81 | + const initialView = rackImagesState.get('view'); |
74 | 82 |
|
75 | | - button.addEventListener( |
76 | | - 'click', |
| 83 | + for (const control of getElements<HTMLSelectElement>('select.rack-view')) { |
| 84 | + control.selectedIndex = [...control.options].findIndex(o => o.value == initialView); |
| 85 | + control.addEventListener( |
| 86 | + 'change', |
77 | 87 | event => { |
78 | | - handleRackImageToggle(event.currentTarget as HTMLButtonElement, rackImagesState); |
| 88 | + handleRackViewSelect((event.currentTarget as any).value as RackViewSelection, rackImagesState); |
79 | 89 | }, |
80 | 90 | false, |
81 | 91 | ); |
82 | 92 | } |
| 93 | + |
83 | 94 | for (const element of getElements<HTMLObjectElement>('.rack_elevation')) { |
84 | 95 | element.addEventListener('load', () => { |
85 | | - if (initiallyHidden) { |
86 | | - hideRackImages(); |
87 | | - } else if (!initiallyHidden) { |
88 | | - showRackImages(); |
89 | | - } |
| 96 | + setRackView(initialView, element); |
90 | 97 | }); |
91 | 98 | } |
92 | 99 | } |
0 commit comments