https://globalfoodandbeveragetimes.com/js/controllers/labelsDescri…?v9e91e12689728780f01d6dd9a70eb5c9bae56d64

1// JavaScript
2import { Controller } from "../stimulus.js";
3
4export default class extends Controller {
5    static targets = ["tab", "content"];
6    static classes = ["active"];
7
8    connect() {
9        // React to hash changes (back/forward)
10        this._onHashChange = () => {
11            const slug = (window.location.hash || "").slice(1).toLowerCase();
12            if (!slug) return;
13            const idx = this._findIndexBySlug(slug);
14            if (idx >= 0) this.showTab(idx);
15        };
16        window.addEventListener("hashchange", this._onHashChange);
17
18        // Initial selection from #hash
19        const slug = (window.location.hash || "").slice(1).toLowerCase();
20        if (slug) {
21            const idx = this._findIndexBySlug(slug);
22            if (idx >= 0) {
23                this.showTab(idx);
24                return;
25            }
26        }
27        this.showTab(0);
28    }
29
30    disconnect() {
31        window.removeEventListener("hashchange", this._onHashChange);
32    }
33
34    showTab(index) {
35        this.contentTargets.forEach((content) => {
36            content.classList.remove(this.activeClass);
37        });
38        if (this.contentTargets[index]) this.contentTargets[index].classList.add(this.activeClass);
39
40        this.tabTargets.forEach((tab) => {
41            tab.classList.remove(this.activeClass);
42        });
43        if (this.tabTargets[index]) this.tabTargets[index].classList.add(this.activeClass);
44    }
45
46    selectTab(event) {
47        event.preventDefault();
48        const index = this.tabTargets.indexOf(event.currentTarget);
49        this.showTab(index);
50
51        // Update URL hash to the slug of the selected tab (no page jump or extra history entries)
52        const slug = (event.currentTarget.dataset.label || "").trim().toLowerCase();
53        if (slug) history.replaceState(null, "", `#${encodeURIComponent(slug)}`);
54    }
55
56    _findIndexBySlug(slug) {
57        const lc = (v) => (v || "").toLowerCase();
58        return this.contentTargets.findIndex(
59            (el) => lc(el.dataset.label) === lc(slug)
60        );
61    }
62}