https://www.coronabehandlung.de/lib/blocks/find-a-doctor-block/locator-map-toggle.js

1import { decorateIcons } from '../../scripts/lib-franklin.js';
2
3export default class LocatorMapToggle {
4  state = null;
5
6  parentElement = null;
7
8  constructor(state, parentElement) {
9    this.state = state;
10    this.parentElement = parentElement;
11    this.createLocatorMapToggle(parentElement);
12
13    this.state.addEventListener('selectedViewChanged', () => {
14      this.updateLocatorMapToggle();
15    });
16
17    this.state.addEventListener('toggleVisibleChanged', () => {
18      this.updateLocatorMapToggle();
19    });
20  }
21
22  createLocatorMapToggle = (parent, checked = false) => {
23    const toggleButton = document.createElement('div');
24    toggleButton.className = 'locator-map-toggle-button';
25    toggleButton.innerHTML = `
26    <div class="locator-map-toggle-btn locator-map-toggle-btn-rect">
27        <input type="checkbox" class="locator-map-toggle-checkbox" ${checked ? 'checked' : ''}/>
28        <div class="locator-map-toggle-knob">
29            <span class="locator-map-toggle-opt1"><span class="icon icon-lib-map-pin"></span>Map</span>
30            <span class="locator-map-toggle-opt2"><span class="icon icon-lib-grid"></span>Grid</span>
31        </div>
32        <div class="locator-map-toggle-btn-bg"></div>
33    </div>
34    `;
35    parent.appendChild(toggleButton);
36    decorateIcons(toggleButton);
37
38    toggleButton.querySelector('.locator-map-toggle-checkbox').addEventListener('change', (e) => {
39      this.state.selectedView = e.target.checked ? 'grid' : 'list';
40    });
41  };
42
43  updateLocatorMapToggle = () => {
44    const toggleButton = this.parentElement.querySelector('.locator-map-toggle-checkbox');
45    toggleButton.checked = this.state.selectedView === 'grid';
46    this.parentElement.querySelector('.locator-map-toggle-button').classList.toggle('hidden', !this.state.toggleVisible);
47  };
48}