a11yist/app/javascript/controllers/collapse_chevron_toggler_controller.js
david e569bcb246
Some checks failed
/ Run tests (push) Successful in 1m52s
/ Run system tests (push) Failing after 2m3s
/ Build, push and deploy image (push) Successful in 1m45s
Cosmetics
2024-11-11 05:00:51 +01:00

30 lines
962 B
JavaScript

import { Controller } from "@hotwired/stimulus"
// Connects to data-controller="collapse-chevron-toggler"
export default class extends Controller {
static targets = ["icon"];
collapsible = null;
connect() {
this.collapsible = window.document.getElementById(this.element.getAttribute('href').substring(1));
this.setIcon();
this.collapsible.addEventListener('hide.bs.collapse', e => this.toggle())
this.collapsible.addEventListener('show.bs.collapse', e => this.toggle())
}
setIcon(reverted = false) {
if (this.collapsible.classList.contains('show')) {
this.iconTarget.classList.remove('bi-chevron-down')
this.iconTarget.classList.add('bi-chevron-up')
} else {
this.iconTarget.classList.remove('bi-chevron-up')
this.iconTarget.classList.add('bi-chevron-down')
}
}
toggle() {
this.iconTarget.classList.toggle('bi-chevron-down');
this.iconTarget.classList.toggle('bi-chevron-up');
}
}