https://filmhubnorth.org.uk/assets/controllers/backend/filter_controller-200925cf.js

1import { Controller } from "@hotwired/stimulus"
2
3export default class extends Controller {
4  static targets = [ "clear" ]
5
6  connect() {
7    this.update = this.update.bind(this)
8    this.changeListener = this.element.addEventListener("change", this.update)
9    this.update()
10  }
11
12  disconnect() {
13    this.element.removeEventListener("change", this.changeListener)
14  }
15
16  update() {
17    if (this.hasClearTarget) { this.#updateClear() }
18
19    this.element.querySelectorAll("[data-filter-option]").forEach((op) => this.#updateOption(op))
20  }
21
22  select(event) {
23    let option = event.target.closest("[data-filter-option]");
24
25    if (option) {
26      option.querySelectorAll("[data-filter-choice]").forEach((el) => el.checked = true);
27      this.update();
28    }
29  }
30
31  #anyAreChecked() {
32    return this.element.querySelectorAll("input:checked").length > 0
33  }
34
35  #clearIsChecked() {
36    return this.hasClearTarget && this.clearTarget.querySelectorAll("input:checked").length > 0
37  }
38
39  #updateClear() {
40    if (this.#anyAreChecked() && !this.#clearIsChecked()) {
41      this.clearTarget.classList.remove("hidden")
42    } else {
43      this.clearTarget.classList.add("hidden")
44    }
45  }
46
47  #updateOption(option) {
48    if (option.querySelector("[data-filter-choice]:checked")) {
49      option.querySelectorAll("[data-filter-input]").forEach((el) => { el.classList.remove("opacity-30") })
50    } else {
51      option.querySelectorAll("[data-filter-input]").forEach((el) => { el.classList.add("opacity-30") })
52    }
53  }
54}