Sha256: 69e829649f75981c70159e2c220808ad08053163403dceb6da5dca824b9e5079
Contents?: true
Size: 2 KB
Versions: 46
Compression:
Stored size: 2 KB
Contents
import ApplicationController from "satis/controllers/application_controller"
/*
Usage:
<div data-controller="show-hide">
<input type="checkbox" data-show-hide-target="input" />
<div data-show-hide-showable="true" data-show-hide-value="true">
This is shown when the show-hide.input value equates to true, it is hidden otherwise
</div>
<div data-show-hide-hidable="true" data-show-hide-value="true">
This is hidden when the show-hide.input value equates to true, it is shown otherwise
</div>
</div>
*/
export default class extends ApplicationController {
static targets = ["showable", "hidable", "input"]
connect() {
this.boundUpdate = this.update.bind(this)
this.watchOn = "input"
if (this.inputTarget.type == "hidden") {
this.watchOn = "change"
}
this.inputTarget.addEventListener(this.watchOn, this.boundUpdate)
this.update()
}
disconnect() {
this.inputTarget.removeEventListener(this.watchOn, this.boundUpdate)
}
update() {
this.toggle(this.currentValue)
}
toggle(value) {
if (this.hasShowableTarget) {
this.showableTargets.forEach((element) => {
if (element.getAttribute("data-show-hide-value") == value) {
element.classList.remove("hidden")
} else {
element.classList.add("hidden")
}
})
}
if (this.hasHidableTarget) {
this.hidableTargets.forEach((element) => {
if (element.getAttribute("data-show-hide-value") == value) {
element.classList.add("hidden")
} else {
element.classList.remove("hidden")
}
})
}
}
get currentValue() {
if (this.inputTarget.type == "checkbox") {
return this.inputTarget.checked ? "true" : "false"
} else if (this.inputTarget.tagName == "SELECT" && this.data.get("attr")) {
let option = this.inputTarget.options[this.inputTarget.selectedIndex]
return option.getAttribute(this.data.get("attr"))
} else {
return this.inputTarget.value
}
}
}
Version data entries
46 entries across 46 versions & 1 rubygems