https://resources.better.org.uk/assets/controllers/centre_locator_view_switcher_controller-9221ba96.js

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4  
5  static targets = ["venueCont", "switch"];
6
7  #createSwitchElement(type) {
8    const span = document.createElement("span");
9    span.className = "material-symbols-outlined loaded";
10    span.textContent = type === "map" ? "map" : "list_alt";
11    const p = document.createElement("p");
12    p.textContent = type === "map" ? "View map of locations" : "View list of locations";
13    const container = document.createElement("div");
14    container.appendChild(span);
15    container.appendChild(p);
16    return container;
17  }
18
19  // On mobile a marker is only clickable while the map covers the list, so
20  // picking one has to bring the list (and the venue detail) back into view.
21  showList() {
22    if (!this.venueContTarget.classList.contains("open")) this.toggle();
23  }
24
25  toggle() {
26    this.venueContTarget.classList.toggle("open");
27    const type = this.venueContTarget.classList.contains("open") ? "map" : "list";
28    const el = this.#createSwitchElement(type);
29    this.switchTarget.innerHTML = "";
30    this.switchTarget.appendChild(el);
31  }
32
33}