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