import { Controller } from "@hotwired/stimulus" export default class extends Controller { static classes = ["hide", "active", "inactive"] static values = { currentActive: String } initialize() { let url = new URL(document.location) this.currentActiveValue = url.searchParams.get("tabName") ? url.searchParams.get("tabName") : "" } connect() { if (this.currentActiveValue != "") { this.navigate() } } navigateEvent(event) { let url = new URL(document.location) this.currentActiveValue = event.currentTarget.dataset.index url.searchParams.set("tabName", event.currentTarget.dataset.index) window.history.pushState({}, "", url) this.navigate() } navigate() { let navBodies = document.querySelectorAll(".navBody") navBodies.forEach((el) => { if (!el.classList.contains(this.hideClass)) { el.classList.add(this.hideClass) } }) let navs = document.querySelectorAll(".nav") navs.forEach((nav) => { if (nav.classList.contains(...this.activeClasses)) { nav.classList.remove(...this.activeClasses) nav.classList.add(...this.inactiveClasses) } }) navs.forEach((nav) => { if (nav.dataset.index == this.currentActiveValue) { nav.classList.remove(...this.inactiveClasses) nav.classList.add(...this.activeClasses) } }) document .getElementById(this.currentActiveValue) .classList.remove(this.hideClass) } }