https://littlebirdelectronics.com.au/assets/controllers/curriculum/syllabus_toggle_controller-841d0f56.js

1import { Controller } from "@hotwired/stimulus"
2
3// Toggles between the 2023 and 2017 NSW syllabus outcome panels on the teacher
4// dashboard. Tabs have data-version="2023|2017"; panels have the same attribute.
5// The handler is delegated from the controller element, so existing markup
6// doesn't need explicit data-action attributes on each tab button.
7export default class extends Controller {
8  static targets = ["tab", "panel"]
9
10  initialize() {
11    this._handleClick = (e) => {
12      const tab = e.target.closest('[data-curriculum--syllabus-toggle-target="tab"]')
13      if (tab && this.element.contains(tab)) this.show(tab.dataset.version)
14    }
15  }
16
17  connect() {
18    this.element.addEventListener("click", this._handleClick)
19    this.show(this.activeVersion() || (this.tabTargets[0] && this.tabTargets[0].dataset.version))
20  }
21
22  disconnect() {
23    this.element.removeEventListener("click", this._handleClick)
24  }
25
26  show(version) {
27    if (!version) return
28    this.tabTargets.forEach((tab) => {
29      const active = tab.dataset.version === version
30      tab.setAttribute("aria-selected", active ? "true" : "false")
31      tab.classList.toggle("bg-brand-600", active)
32      tab.classList.toggle("text-white", active)
33      tab.classList.toggle("ring-brand-600", active)
34      tab.classList.toggle("bg-white", !active)
35      tab.classList.toggle("dark:bg-gray-900", !active)
36      tab.classList.toggle("text-gray-700", !active)
37      tab.classList.toggle("dark:text-gray-200", !active)
38      tab.classList.toggle("ring-gray-300", !active)
39      tab.classList.toggle("dark:ring-gray-700", !active)
40    })
41    this.panelTargets.forEach((panel) => {
42      panel.classList.toggle("hidden", panel.dataset.version !== version)
43    })
44  }
45
46  activeVersion() {
47    const active = this.tabTargets.find((t) => t.getAttribute("aria-selected") === "true")
48    return active && active.dataset.version
49  }
50}