https://grootersnet.nl/assets/satis/utility_controllers/show_hide_…f5e7cdca19664f60cb6f5e3807dec6e444826f75.js

1import ApplicationController from "satis/controllers/application_controller"
2
3/*
4  Usage:
5
6  <div data-controller="show-hide">
7    <input type="checkbox" data-show-hide-target="input" />
8    <div data-show-hide-showable="true" data-show-hide-value="true">
9      This is shown when the show-hide.input value equates to true, it is hidden otherwise
10    </div>
11    <div data-show-hide-hidable="true" data-show-hide-value="true">
12      This is hidden when the show-hide.input value equates to true, it is shown otherwise
13    </div>
14  </div>
15 */
16export default class extends ApplicationController {
17  static targets = ["showable", "hidable", "input"]
18
19  connect() {
20    this.boundUpdate = this.update.bind(this)
21
22    this.watchOn = "input"
23    if (this.inputTarget.type == "hidden") {
24      this.watchOn = "change"
25    }
26
27    // For radio buttons, we need to listen to all radio buttons with the same name
28    if (this.inputTarget.type == "radio") {
29      this.watchOn = "change"
30      const radioName = this.inputTarget.name
31      this.radioButtons = this.element.querySelectorAll(`input[type="radio"][name="${radioName}"]`)
32      this.radioButtons.forEach((radio) => {
33        radio.addEventListener(this.watchOn, this.boundUpdate)
34      })
35    } else {
36      this.inputTarget.addEventListener(this.watchOn, this.boundUpdate)
37    }
38
39    this.update()
40  }
41
42  disconnect() {
43    if (this.radioButtons) {
44      this.radioButtons.forEach((radio) => {
45        radio.removeEventListener(this.watchOn, this.boundUpdate)
46      })
47    } else {
48      this.inputTarget.removeEventListener(this.watchOn, this.boundUpdate)
49    }
50  }
51
52  update() {
53    this.toggle(this.currentValue)
54  }
55
56  toggle(value) {
57    if (this.hasShowableTarget) {
58      this.showableTargets.forEach((element) => {
59        if (element.getAttribute("data-show-hide-value") == value) {
60          element.classList.remove("hidden")
61          this.toggleDisabled(element, false)
62        } else {
63          element.classList.add("hidden")
64          this.toggleDisabled(element, true)
65        }
66      })
67    }
68    if (this.hasHidableTarget) {
69      this.hidableTargets.forEach((element) => {
70        if (element.getAttribute("data-show-hide-value") == value) {
71          element.classList.add("hidden")
72          this.toggleDisabled(element, true)
73        } else {
74          element.classList.remove("hidden")
75          this.toggleDisabled(element, false)
76        }
77      })
78    }
79  }
80
81  toggleDisabled(element, disabled) {
82    if (element.getAttribute("data-show-hide-toggle-disabled") !== "true") {
83      return
84    }
85
86    if (element.matches("input, select, textarea, button")) {
87      element.disabled = disabled
88    }
89
90    element.querySelectorAll("input, select, textarea, button").forEach((field) => {
91      field.disabled = disabled
92    })
93  }
94
95  get currentValue() {
96    if (this.inputTarget.type == "checkbox") {
97      return this.inputTarget.checked ? "true" : "false"
98    } else if (this.inputTarget.type == "radio") {
99      // Find the checked radio button in the group
100      const radioName = this.inputTarget.name
101      const checkedRadio = this.element.querySelector(`input[type="radio"][name="${radioName}"]:checked`)
102      return checkedRadio ? checkedRadio.value : ""
103    } else if (this.inputTarget.tagName == "SELECT" && this.data.get("attr")) {
104      let option = this.inputTarget.options[this.inputTarget.selectedIndex]
105      return option.getAttribute(this.data.get("attr"))
106    } else {
107      return this.inputTarget.value
108    }
109  }
110};