38 lines
1.0 KiB
JavaScript
38 lines
1.0 KiB
JavaScript
import { Controller } from '@hotwired/stimulus'
|
|
|
|
export default class extends Controller {
|
|
|
|
static classes = [ 'buttonActive' ]
|
|
|
|
static targets = [ 'button', 'tab' ]
|
|
|
|
static values = { activeTab: Number }
|
|
|
|
select({ params: { tab } }) {
|
|
let selectedTab = tab
|
|
this.activeTabValue = selectedTab
|
|
this.element.dispatchEvent(new CustomEvent('select', {
|
|
detail: {
|
|
tab: selectedTab
|
|
}
|
|
}))
|
|
}
|
|
|
|
activeTabValueChanged(activeTab) {
|
|
this.tabTargets.forEach((element, index) => {
|
|
element.classList.toggle('hidden', activeTab !== index)
|
|
})
|
|
|
|
this.buttonTargets.forEach((element, index) => {
|
|
if (false === this.hasButtonActiveClass) {
|
|
return
|
|
}
|
|
if (activeTab === index) {
|
|
element.classList.add(...this.buttonActiveClasses)
|
|
} else {
|
|
element.classList.remove(...this.buttonActiveClasses)
|
|
}
|
|
})
|
|
}
|
|
}
|