41 lines
1.1 KiB
JavaScript
41 lines
1.1 KiB
JavaScript
// controllers/toggle_controller.js
|
|
import { Controller } from "@hotwired/stimulus"
|
|
|
|
export default class extends Controller {
|
|
static targets = ["label", "dot", "background"]
|
|
|
|
connect() {
|
|
this.state = true
|
|
this.update()
|
|
}
|
|
|
|
toggle() {
|
|
this.state = !this.state
|
|
this.update()
|
|
}
|
|
|
|
update() {
|
|
if (this.state) {
|
|
this.labelTarget.textContent = "ON"
|
|
this.labelTarget.classList.add("text-notice")
|
|
this.labelTarget.classList.remove("text-gray-400")
|
|
|
|
this.dotTarget.classList.add("bg-notice")
|
|
this.dotTarget.classList.remove("bg-gray-400")
|
|
|
|
// this.backgroundTarget.classList.add("bg-on-content")
|
|
// this.backgroundTarget.classList.remove("bg-off-content")
|
|
} else {
|
|
this.labelTarget.textContent = "OFF"
|
|
this.labelTarget.classList.add("text-gray-400")
|
|
this.labelTarget.classList.remove("text-notice")
|
|
|
|
this.dotTarget.classList.add("bg-gray-400")
|
|
this.dotTarget.classList.remove("bg-notice")
|
|
|
|
// this.backgroundTarget.classList.add("bg-off-content")
|
|
// this.backgroundTarget.classList.remove("bg-on-content")
|
|
}
|
|
}
|
|
}
|