1import { rackImagesState, RackViewSelection } from './stores'; 2import { getElements } from './util'; 3 4import type { StateManager } from './state'; 5 6export type RackViewState = { view: RackViewSelection }; 7 8/** 9 * Show or hide images and labels to build the desired rack view. 10 */ 11function 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-image-label', elevation); 19 break; 20 } 21 case 'images-only': { 22 showRackElements('image.device-image', elevation); 23 hideRackElements('text.device-image-label', elevation); 24 break; 25 } 26 case 'labels-only': { 27 hideRackElements('image.device-image', elevation); 28 hideRackElements('text.device-image-label', elevation); 29 break; 30 } 31 } 32} 33 34function showRackElements( 35 selector: string, 36 elevation: HTMLObjectElement, 37): void { 38 const elements = elevation.contentDocument?.querySelectorAll(selector) ?? []; 39 for (const element of elements) { 40 element.classList.remove('hidden'); 41 } 42} 43 44function hideRackElements( 45 selector: string, 46 elevation: HTMLObjectElement, 47): void { 48 const elements = elevation.contentDocument?.querySelectorAll(selector) ?? []; 49 for (const element of elements) { 50 element.classList.add('hidden'); 51 } 52} 53 54/** 55 * Change the visibility of all racks in response to selection. 56 */ 57function handleRackViewSelect( 58 newView: RackViewSelection, 59 state: StateManager<RackViewState>, 60): void { 61 state.set('view', newView); 62 for (const elevation of getElements<HTMLObjectElement>('.rack_elevation')) { 63 setRackView(newView, elevation); 64 } 65} 66 67/** 68 * Add change callback for selecting rack elevation images, and set 69 * initial state of select and the images themselves 70 */ 71export function initRackElevation(): void { 72 const initialView = rackImagesState.get('view'); 73 74 for (const control of getElements<HTMLSelectElement>('select.rack-view')) { 75 control.selectedIndex = [...control.options].findIndex(o => o.value == initialView); 76 control.addEventListener( 77 'change', 78 event => { 79 handleRackViewSelect((event.currentTarget as any).value as RackViewSelection, rackImagesState); 80 }, 81 false, 82 ); 83 } 84 85 for (const element of getElements<HTMLObjectElement>('.rack_elevation')) { 86 element.addEventListener('load', () => { 87 setRackView(initialView, element); 88 }); 89 } 90} 91