@projektemacher/storymapjs 0.10.8 → 0.11.0

package/src/ui/LayersControl.ts

@@ -0,0 +1,302 @@
+import Dom from "../dom/Dom";
+import { DomEvent } from "../dom/DomEvent";
+import { Evented, type EventedInstance } from "../core/mixins";
+import { Language } from "../language/Language";
+
+/*	LayersControl
+	Basemap/overlay switcher panel for the menubar (show_layers_control).
+	Owns the disclosure button and the panel; the host of the layers state
+	(StoryMap, via MenuBar) supplies rows through the delegate and executes
+	toggles. Fires basemapchange/overlaychange, which MenuBar forwards.
+================================================== */
+
+export interface LayersOverlayRow {
+    kind: "overlay";
+    /** Built-layer index: malformed entries are skipped, like setOverlayVisible. */
+    index: number;
+    label: string;
+    checked: boolean;
+    locked: boolean;
+}
+
+export interface LayersBasemapRow {
+    kind: "basemap";
+    map_type: string;
+    label: string;
+    checked: boolean;
+}
+
+export type LayersRow = LayersOverlayRow | LayersBasemapRow;
+
+export interface LayersControlDelegate {
+    /** Current rows, basemaps first. Empty while there is nothing to switch. */
+    rows(): LayersRow[];
+}
+
+export interface LayersControlEvents {
+    basemapchange: { map_type: string };
+    overlaychange: { index: number; visible: boolean };
+}
+
+/** Panel id suffix: unique per control so two viewers never share one. */
+let layersPanelSeq = 0;
+
+class LayersControlBase {
+    declare "_el": {
+        container: HTMLElement;
+        button: HTMLButtonElement;
+        panel: HTMLElement;
+    };
+    declare "_menubar": HTMLElement;
+    declare "_delegate": LayersControlDelegate | null;
+    declare "_rows": LayersRow[];
+    declare "_open": boolean;
+    declare "_panel_id": string;
+    declare "_onKeyDownBound": ((e: KeyboardEvent) => void) | null;
+    declare "_onPointerDownBound": ((e: Event) => void) | null;
+    declare "fire": EventedInstance<LayersControlEvents>["fire"];
+
+    constructor(menubar: HTMLElement) {
+        this._menubar = menubar;
+        const panel_id = `vco-layers-panel-${++layersPanelSeq}`;
+        this._panel_id = panel_id;
+        this._delegate = null;
+        this._rows = [];
+        this._open = false;
+        this._onKeyDownBound = null;
+        this._onPointerDownBound = null;
+
+        const button = Dom.create(
+            "button",
+            "vco-menubar-button vco-menubar-layers",
+            menubar,
+        ) as HTMLButtonElement;
+        button.setAttribute("type", "button");
+        button.setAttribute("aria-expanded", "false");
+        button.setAttribute("aria-controls", panel_id);
+        button.textContent = Language.buttons.layers;
+        DomEvent.addListener(button, "click", this._onButtonClick, this);
+        this._el = {
+            container: menubar,
+            button,
+            panel: document.createElement("div"),
+        };
+
+        const panel = this._el.panel;
+        panel.id = panel_id;
+        panel.className = "vco-layers";
+        panel.hidden = true;
+        menubar.appendChild(panel);
+        // hidden until the first refresh() hands over rows (consent-denied
+        // tiles and mapless stories never get any)
+        button.style.display = "none";
+    }
+
+    /*	Public
+	================================================== */
+
+    /** Hand the control its state source (StoryMap wires this via MenuBar). */
+    setDelegate(delegate: LayersControlDelegate): void {
+        this._delegate = delegate;
+    }
+
+    /** Re-pull rows from the delegate and sync the panel in place. */
+    refresh(): void {
+        const rows = this._delegate?.rows() ?? [];
+        // nothing to switch (consent-denied tiles, mapless story): no
+        // control at all rather than a panel of dead rows
+        this._el.button.style.display = rows.length === 0 ? "none" : "";
+        if (rows.length === 0) {
+            this.close();
+            this._rows = rows;
+            return;
+        }
+        if (this._sameRows(rows)) {
+            this._updateRows(rows);
+        } else {
+            this._buildRows(rows);
+        }
+        this._rows = rows;
+    }
+
+    /** Re-resolve row labels (function labels repaint on language change). */
+    refreshLabels(): void {
+        this._el.button.textContent = Language.buttons.layers;
+        this.refresh();
+    }
+
+    open(): void {
+        if (this._rows.length === 0) return;
+        this._open = true;
+        this._el.panel.hidden = false;
+        this._el.button.setAttribute("aria-expanded", "true");
+        this._el.button.classList.add("vco-active");
+    }
+
+    close(): void {
+        this._open = false;
+        this._el.panel.hidden = true;
+        this._el.button.setAttribute("aria-expanded", "false");
+        this._el.button.classList.remove("vco-active");
+    }
+
+    /**
+     * Release the document listeners and drop the nodes. Called by
+     * `MenuBar.dispose()`; the control must not be used afterwards.
+     */
+    dispose(): void {
+        if (this._onKeyDownBound) {
+            document.removeEventListener("keydown", this._onKeyDownBound);
+            this._onKeyDownBound = null;
+        }
+        if (this._onPointerDownBound) {
+            document.removeEventListener("pointerdown", this._onPointerDownBound);
+            this._onPointerDownBound = null;
+        }
+        this._el.button.remove();
+        this._el.panel.remove();
+        this._delegate = null;
+    }
+
+    /*	Events
+	================================================== */
+
+    _onButtonClick(): void {
+        if (this._open) {
+            this.close();
+        } else {
+            this.open();
+        }
+    }
+
+    _onRowChange(e: Event, row: LayersRow): void {
+        const input = e.target as HTMLInputElement | null;
+        if (!input) return;
+        if (row.kind === "overlay") {
+            if (row.locked) {
+                // disabled inputs never fire from user input; a programmatic
+                // dispatch still reaches this handler, so ignore it loudly
+                // by restoring the checked state instead of toggling
+                input.checked = row.checked;
+                return;
+            }
+            this.fire("overlaychange", { index: row.index, visible: input.checked });
+        } else {
+            if (!input.checked) return;
+            this.fire("basemapchange", { map_type: row.map_type });
+        }
+    }
+
+    _onPanelKeyDown(e: KeyboardEvent): void {
+        if (e.key !== "Escape" || !this._open) return;
+        // Close from anywhere while open: Safari/WebKit does not move focus
+        // on mouse clicks, so a focus-scoped handler would strand mouse
+        // visitors. No stopPropagation — a host Escape handler may run too.
+        // Focus returns to the button only when it was inside the panel;
+        // a mouse visitor's focus (body) is left alone.
+        const inside = this._el.panel.contains(document.activeElement);
+        this.close();
+        if (inside) this._el.button.focus();
+    }
+
+    _onDocumentPointerDown(e: Event): void {
+        if (!this._open) return;
+        if (this._el.container.contains(e.target as Node | null)) return;
+        this.close();
+    }
+
+    /*	Private Methods
+	================================================== */
+
+    _sameRows(rows: LayersRow[]): boolean {
+        if (rows.length !== this._rows.length) return false;
+        return rows.every((row, i) => {
+            const prev = this._rows[i];
+            if (prev.kind !== row.kind) return false;
+            return row.kind === "overlay"
+                ? (prev as LayersOverlayRow).index === row.index
+                : (prev as LayersBasemapRow).map_type === row.map_type;
+        });
+    }
+
+    _updateRows(rows: LayersRow[]): void {
+        const inputs = this._el.panel.querySelectorAll("input");
+        rows.forEach((row, position) => {
+            const input = inputs[position] as HTMLInputElement | undefined;
+            const label = input?.closest("label");
+            if (!input || !label) return;
+            input.checked = row.checked;
+            input.disabled = row.kind === "overlay" && row.locked;
+            const text = label.querySelector(".vco-layers-label");
+            if (text) text.textContent = row.label;
+        });
+    }
+
+    _buildRows(rows: LayersRow[]): void {
+        const panel = this._el.panel;
+        panel.replaceChildren();
+        const basemaps = rows.filter((row): row is LayersBasemapRow => row.kind === "basemap");
+        const overlays = rows.filter((row): row is LayersOverlayRow => row.kind === "overlay");
+        if (basemaps.length > 0) {
+            panel.appendChild(this._buildGroup("basemap", basemaps));
+        }
+        if (overlays.length > 0) {
+            panel.appendChild(this._buildGroup("overlay", overlays));
+        }
+        if (!this._onKeyDownBound) {
+            this._onKeyDownBound = (e: KeyboardEvent) => this._onPanelKeyDown(e);
+            document.addEventListener("keydown", this._onKeyDownBound);
+        }
+        if (!this._onPointerDownBound) {
+            this._onPointerDownBound = (e: Event) => this._onDocumentPointerDown(e);
+            document.addEventListener("pointerdown", this._onPointerDownBound);
+        }
+    }
+
+    _buildGroup(kind: "basemap" | "overlay", rows: LayersRow[]): HTMLElement {
+        const group = document.createElement("fieldset");
+        group.className = "vco-layers-group";
+        const legend = document.createElement("legend");
+        legend.textContent =
+            kind === "basemap"
+                ? Language.buttons.layers_basemaps
+                : Language.buttons.layers_overlays;
+        group.appendChild(legend);
+        for (const row of rows) {
+            group.appendChild(this._buildRow(row));
+        }
+        return group;
+    }
+
+    _buildRow(row: LayersRow): HTMLElement {
+        const label = document.createElement("label");
+        const input = document.createElement("input");
+        input.setAttribute("type", row.kind === "basemap" ? "radio" : "checkbox");
+        if (row.kind === "basemap") {
+            input.setAttribute("name", "basemap");
+        }
+        input.checked = row.checked;
+        if (row.kind === "overlay" && row.locked) {
+            input.disabled = true;
+        }
+        const text = document.createElement("span");
+        text.className = "vco-layers-label";
+        text.textContent = row.label;
+        label.appendChild(input);
+        label.appendChild(text);
+        DomEvent.addListener(input, "change", (e: Event) => this._onRowChange(e, row), this);
+        return label;
+    }
+}
+
+const EventedLayersControlBase = Evented<LayersControlEvents, typeof LayersControlBase>(
+    LayersControlBase,
+);
+
+export default class LayersControl extends Evented<LayersControlEvents, typeof LayersControlBase>(
+    EventedLayersControlBase,
+) {
+    constructor(...args: ConstructorParameters<typeof LayersControlBase>) {
+        super(...args);
+    }
+}

package/src/ui/MenuBar.ts

@@ -4,8 +4,10 @@ import Dom from "../dom/Dom";
 import { easeInOutQuint } from "../animation/easings";
 
 import { DomEvent } from "../dom/DomEvent";
+import { PROGRESSBAR_STYLES } from "../types";
 import { Browser } from "../core/Browser";
 import { Language, currentLocale } from "../language/Language";
+import LayersControl, { type LayersControlDelegate } from "./LayersControl";
 
 /*	MenuBar
 	Buttons, progress and distance display for the storymap
@@ -20,13 +22,30 @@ interface MenuBarOptions {
     [key: string]: unknown;
 }
 
+export interface MenuBarEvents {
+    overview: Event;
+    back_to_start: Event;
+    fullscreen: Event;
+    autoplay_toggle: undefined;
+    progress_go: { slide: number };
+    collapse: { y: number; collapsed: boolean };
+    basemapchange: { map_type: string };
+    overlaychange: { index: number; visible: boolean };
+    loaded: undefined;
+    added: undefined;
+    removed: undefined;
+}
+
 class MenuBarBase {
     declare "_el": Record<string, HTMLElement>;
     declare "collapsed": boolean;
     declare "options": MenuBarOptions;
     declare "animator": Record<string, unknown>;
-    declare "fire": EventedInstance["fire"];
+    declare "fire": EventedInstance<MenuBarEvents>["fire"];
     _fullscreenActive = false;
+    _autoplayStopped = false;
+    /** The layer switcher, if `show_layers_control` is on. */
+    declare "_layersControl": LayersControl | null;
 
     /*	Constructor
 	================================================== */
@@ -76,6 +95,8 @@ class MenuBarBase {
         // Animation
         this.animator = {};
 
+        this._layersControl = null;
+
         // Merge Data and Options
         mergeData(this.options, options);
 
@@ -116,18 +137,24 @@ class MenuBarBase {
             this._el.button_fullscreen.innerHTML = `<span class='${icon}'></span>`;
         } else {
             const label = active ? Language.buttons.exit_fullscreen : Language.buttons.fullscreen;
-            this._el.button_fullscreen.innerHTML = `${label} <span class='${icon}'></span>`;
+            this._el.button_fullscreen.innerHTML = `${label}<span class='${icon}'></span>`;
         }
     }
 
     /**
      * Repaint the overview button label. An image map has no interactive
-     * overview, so it gets the shorter wording.
+     * overview, so it gets the shorter wording. Icon-only on mobile.
      */
     _renderOverviewLabel(): void {
-        this._el.button_overview.innerHTML = this.options.map_as_image
+        const label = this.options.map_as_image
             ? Language.buttons.overview
             : Language.buttons.map_overview;
+        if (Browser.mobile) {
+            this._el.button_overview.innerHTML = "<span class='vco-icon-mappin'></span>";
+            this._el.button_overview.setAttribute("aria-label", label);
+        } else {
+            this._el.button_overview.innerHTML = `${label}<span class='vco-icon-mappin'></span>`;
+        }
     }
 
     /**
@@ -136,7 +163,7 @@ class MenuBarBase {
     _renderBackToStartLabel(): void {
         this._el.button_backtostart.innerHTML = Browser.mobile
             ? "<span class='vco-icon-goback'></span>"
-            : Language.buttons.backtostart + " <span class='vco-icon-goback'></span>";
+            : Language.buttons.backtostart + "<span class='vco-icon-goback'></span>";
     }
 
     /**
@@ -150,38 +177,177 @@ class MenuBarBase {
             const text = collapsed
                 ? Language.buttons.uncollapse_toggle
                 : Language.buttons.collapse_toggle;
-            this._el.button_collapse_toggle.innerHTML = `${text} <span class='vco-icon-${arrow}'></span>`;
+            this._el.button_collapse_toggle.innerHTML = `${text}<span class='vco-icon-${arrow}'></span>`;
+        }
+    }
+
+    /**
+     * Reflect the autoplay state in the toggle label.
+     */
+    setAutoplayState(stopped: boolean): void {
+        this._autoplayStopped = stopped;
+        if (!this._el.button_autoplay) return;
+        const label = stopped ? Language.buttons.autoplay_play : Language.buttons.autoplay_pause;
+        if (Browser.mobile) {
+            this._el.button_autoplay.setAttribute("aria-label", label);
+        } else {
+            this._el.button_autoplay.textContent = label;
         }
+        this._el.button_autoplay.setAttribute("aria-pressed", String(!stopped));
     }
 
     /**
      * Repaint every text label from the active language (see `setLanguage`).
-     * Icon-only mobile buttons carry no text and are left untouched.
+     * Icon-only mobile buttons carry text via aria-label instead.
      */
     refreshLabels(): void {
+        // panel rows are always text, so the control repaints even where
+        // the buttons below go icon-only
+        this._layersControl?.refreshLabels();
         if (Browser.mobile) {
+            this._renderMobileLabels();
             return;
         }
         this._renderOverviewLabel();
         this._renderBackToStartLabel();
         this.setFullscreenState(this._fullscreenActive);
+        this.setAutoplayState(this._autoplayStopped);
         this._renderCollapseLabel(this.collapsed);
     }
 
     /**
-     * Update the progress indicator (issue #247); no-op when disabled.
+     * Icon-only mobile buttons expose their labels to assistive tech since
+     * the visible text is icon glyphs.
+     */
+    _renderMobileLabels(): void {
+        const labels: [string, string][] = [
+            [
+                "button_overview",
+                this.options.map_as_image
+                    ? Language.buttons.overview
+                    : Language.buttons.map_overview,
+            ],
+            ["button_backtostart", Language.buttons.backtostart],
+            [
+                "button_collapse_toggle",
+                this.collapsed
+                    ? Language.buttons.uncollapse_toggle
+                    : Language.buttons.collapse_toggle,
+            ],
+            [
+                "button_fullscreen",
+                this._fullscreenActive
+                    ? Language.buttons.exit_fullscreen
+                    : Language.buttons.fullscreen,
+            ],
+            [
+                "button_autoplay",
+                this._autoplayStopped
+                    ? Language.buttons.autoplay_play
+                    : Language.buttons.autoplay_pause,
+            ],
+        ];
+        for (const [key, label] of labels) {
+            this._el[key]?.setAttribute("aria-label", label);
+        }
+    }
+
+    /** Hand the layer switcher its state source (StoryMap wires this). */
+    setLayersDelegate(delegate: LayersControlDelegate): void {
+        this._layersControl?.setDelegate(delegate);
+    }
+
+    /** Re-pull the switcher rows (overlays, basemaps, consent state). */
+    refreshLayers(): void {
+        this._layersControl?.refresh();
+    }
+
+    /**
+     * Update the progress indicator; no-op when disabled. The `progressbar`
+     * option selects the style (slideshow `progressbar`): the classic fill
+     * `bar` (default), height variants `block`/`thinblock`, or per-slide
+     * `dots`/`squares` buttons that jump to their slide.
      */
     setProgress(current: number, total: number): void {
-        if (!this.options.show_progress || !this._el.progress_fill) {
+        const style = this._progressStyle();
+        if (style === "off" || !this._el.progress) {
+            return;
+        }
+        if (style === "dots" || style === "squares") {
+            this._renderProgressSteps(style, current, total);
+            return;
+        }
+        if (!this._el.progress_fill) {
+            return;
+        }
+        // a single slide (or none) is fully read by definition, but a
+        // progressbar over zero slides is invalid ARIA — clear it instead
+        if (!(total > 1)) {
+            this._el.progress_fill.style.width = "100%";
+            this._el.progress.removeAttribute("role");
+            this._el.progress.removeAttribute("aria-valuenow");
+            this._el.progress.removeAttribute("aria-valuemin");
+            this._el.progress.removeAttribute("aria-valuemax");
+            this._el.progress.setAttribute("aria-label", "1 / 1");
             return;
         }
-        const percent = total > 1 ? Math.round((current / (total - 1)) * 100) : 100;
+        const percent = Math.round((Math.min(current, total - 1) / (total - 1)) * 100);
         this._el.progress_fill.style.width = percent + "%";
         this._el.progress.setAttribute("role", "progressbar");
-        this._el.progress.setAttribute("aria-valuenow", String(current + 1));
+        this._el.progress.setAttribute("aria-valuenow", String(Math.min(current, total - 1) + 1));
         this._el.progress.setAttribute("aria-valuemin", "1");
         this._el.progress.setAttribute("aria-valuemax", String(total));
-        this._el.progress.setAttribute("aria-label", `${current + 1} / ${total}`);
+        this._el.progress.setAttribute(
+            "aria-label",
+            `${Math.min(current, total - 1) + 1} / ${total}`,
+        );
+    }
+
+    /** The resolved progress style: `progressbar` wins, `show_progress` decides the default. */
+    _progressStyle(): "off" | "bar" | "dots" | "squares" | "block" | "thinblock" {
+        const raw = this.options.progressbar as string | boolean | undefined;
+        if (raw === false || raw === "off") return "off";
+        if (typeof raw === "string" && (PROGRESSBAR_STYLES as readonly string[]).includes(raw)) {
+            return raw as "bar" | "dots" | "squares" | "block" | "thinblock";
+        }
+        return this.options.show_progress ? "bar" : "off";
+    }
+
+    /** Per-slide progress buttons for the `dots`/`squares` styles. */
+    _renderProgressSteps(style: "dots" | "squares", current: number, total: number): void {
+        const container = this._el.progress;
+        if (!(total > 0)) {
+            container.innerHTML = "";
+            container.removeAttribute("role");
+            container.setAttribute("aria-label", "No slides");
+            return;
+        }
+        const built = Number(container.getAttribute("data-steps") ?? "0");
+        if (built !== total) {
+            container.innerHTML = "";
+            container.setAttribute("role", "tablist");
+            container.setAttribute("aria-label", `Slides 1 / ${total}`);
+            for (let i = 0; i < total; i++) {
+                const step = document.createElement("button");
+                step.setAttribute("type", "button");
+                step.className = `vco-menubar-progress-step vco-menubar-progress-${style}`;
+                step.setAttribute("role", "tab");
+                step.setAttribute("aria-label", `Slide ${i + 1} / ${total}`);
+                step.setAttribute("data-slide", String(i));
+                step.addEventListener("click", () => {
+                    this.fire("progress_go", { slide: i });
+                });
+                container.appendChild(step);
+            }
+            container.setAttribute("data-steps", String(total));
+        }
+        const steps = container.querySelectorAll("[data-slide]");
+        steps.forEach((entry, index) => {
+            const el = entry as HTMLElement;
+            el.setAttribute("aria-selected", String(index === current));
+            el.classList.toggle("vco-active", index === current);
+            el.classList.toggle("vco-past", index < current);
+        });
     }
 
     /**
@@ -226,6 +392,18 @@ class MenuBarBase {
         this.fire("fullscreen", e);
     }
 
+    _onButtonAutoplay() {
+        this.fire("autoplay_toggle");
+    }
+
+    _onLayersBasemap(e: { map_type: string }) {
+        this.fire("basemapchange", { map_type: e.map_type });
+    }
+
+    _onLayersOverlay(e: { index: number; visible: boolean }) {
+        this.fire("overlaychange", { index: e.index, visible: e.visible });
+    }
+
     _onButtonCollapseMap(e: Event) {
         if (this.collapsed) {
             this.collapsed = false;
@@ -283,6 +461,19 @@ class MenuBarBase {
             this._el.button_fullscreen.style.display = "none";
         }
 
+        // Autoplay pause/resume toggle (only when the story auto-advances)
+        if (typeof this.options.autoplay === "number" && this.options.autoplay > 0) {
+            this._el.button_autoplay = Dom.create(
+                "button",
+                "vco-menubar-button vco-menubar-autoplay",
+                this._el.container,
+            );
+            this._el.button_autoplay.setAttribute("type", "button");
+            this._el.button_autoplay.setAttribute("aria-pressed", "true");
+            DomEvent.addListener(this._el.button_autoplay, "click", this._onButtonAutoplay, this);
+            this.setAutoplayState(false);
+        }
+
         this._el.button_collapse_toggle = Dom.create(
             "button",
             "vco-menubar-button",
@@ -296,15 +487,15 @@ class MenuBarBase {
             this,
         );
 
-        if (this.options.map_as_image) {
-            this._el.button_overview.innerHTML = Language.buttons.overview;
-        } else {
-            this._el.button_overview.innerHTML = Language.buttons.map_overview;
-        }
+        this._renderOverviewLabel();
 
-        // Progress indicator (issue #247)
-        if (this.options.show_progress) {
+        // Progress indicator (issue #247; dots/squares/block/thinblock via progressbar)
+        if (this._progressStyle() !== "off") {
             this._el.progress = Dom.create("span", "vco-menubar-progress", this._el.container);
+            const style = this._progressStyle();
+            if (style !== "bar") {
+                this._el.progress.classList.add(`vco-menubar-progress-${style}`);
+            }
             this._el.progress_fill = Dom.create(
                 "span",
                 "vco-menubar-progress-fill",
@@ -326,7 +517,7 @@ class MenuBarBase {
             this._renderBackToStartLabel();
             this._renderCollapseLabel(this.collapsed);
             this._el.button_fullscreen.innerHTML =
-                Language.buttons.fullscreen + " <span class='vco-icon-resize-full'></span>";
+                Language.buttons.fullscreen + "<span class='vco-icon-resize-full'></span>";
         }
 
         if (this.options.layout === "landscape" || this.options.map_type === "none") {
@@ -335,6 +526,15 @@ class MenuBarBase {
             // on screen changes.
             this._el.button_collapse_toggle.style.display = "none";
         }
+
+        // Layer switcher (opt-in): the control renders nothing until a
+        // delegate hands it rows, so consent-denied and mapless stories
+        // show no button at all
+        if (this.options.show_layers_control) {
+            this._layersControl = new LayersControl(this._el.container);
+            this._layersControl.on("basemapchange", this._onLayersBasemap, this);
+            this._layersControl.on("overlaychange", this._onLayersOverlay, this);
+        }
     }
 
     // Update Display
@@ -356,6 +556,7 @@ class MenuBarBase {
             ["button_overview", this._onButtonOverview as EventListener],
             ["button_backtostart", this._onButtonBackToStart as EventListener],
             ["button_fullscreen", this._onButtonFullscreen as EventListener],
+            ["button_autoplay", this._onButtonAutoplay as EventListener],
             ["button_collapse_toggle", this._onButtonCollapseMap as EventListener],
         ];
         for (const [key, handler] of buttons) {
@@ -364,12 +565,22 @@ class MenuBarBase {
                 DomEvent.removeListener(el, "click", handler, this);
             }
         }
+        if (this._layersControl) {
+            this._layersControl.off("basemapchange", this._onLayersBasemap, this);
+            this._layersControl.off("overlaychange", this._onLayersOverlay, this);
+            this._layersControl.dispose();
+            this._layersControl = null;
+        }
         this._el.container?.getAnimations?.().forEach((a) => a.cancel());
         this._el.container?.remove();
     }
 }
 
-export default class MenuBar extends DomMixed(Evented(MenuBarBase)) {
+const EventedMenuBarBase = Evented<MenuBarEvents, typeof MenuBarBase>(MenuBarBase);
+
+export default class MenuBar extends DomMixed<MenuBarEvents, typeof EventedMenuBarBase>(
+    EventedMenuBarBase,
+) {
     constructor(...args: ConstructorParameters<typeof MenuBarBase>) {
         super(...args);
     }