Andy Smith
61 lines
1.8 KiB
JavaScript
61 lines
1.8 KiB
JavaScript
import { Controller } from "@hotwired/stimulus"
|
|
|
|
// TODO: roll up this controller to one level; remove from sections
|
|
// This will involve using events to select the sections when they're clicked
|
|
|
|
export default class extends Controller {
|
|
static values = { key: String }
|
|
static targets = [ "input" ]
|
|
|
|
connect() {
|
|
this.#restoreToggle()
|
|
}
|
|
|
|
toggle() {
|
|
console.log(this.element)
|
|
if (this.element.hasAttribute("data-ignore")) {
|
|
// console.log("Don't save it!")
|
|
} else {
|
|
// console.log("Save it!")
|
|
if (this.element.open) {
|
|
localStorage.removeItem(this.#localStorageKey)
|
|
} else {
|
|
localStorage.setItem(this.#localStorageKey, this.keyValue)
|
|
}
|
|
}
|
|
}
|
|
|
|
// OK, here's the behavior we want:
|
|
// Open the dialog, and the sections are in various states of collapsed/open.
|
|
// When you filter, we open them all.
|
|
// When the filter is empty, we need to go back to the saved state.
|
|
showAll() {
|
|
console.log(this.element)
|
|
// When filtering, we open everything and don't save to local storage.
|
|
// When the filter is cleared, we restore toggles
|
|
if (this.inputTarget.value) {
|
|
for (const section of this.#sections) {
|
|
section.setAttribute("data-ignore", true)
|
|
section.setAttribute("open", true)
|
|
}
|
|
} else {
|
|
// UGH! This works in the context of the controller on the section, not from the birds-eye view of the details el.
|
|
this.#restoreToggle()
|
|
}
|
|
}
|
|
|
|
#restoreToggle() {
|
|
// console.log("RESTORE TOGGLE")
|
|
const isCollapsed = localStorage.getItem(this.#localStorageKey) != null
|
|
if (isCollapsed) this.element.open = false
|
|
}
|
|
|
|
get #localStorageKey() {
|
|
return this.keyValue
|
|
}
|
|
|
|
get #sections() {
|
|
return this.element.querySelectorAll(":scope details:not([open])")
|
|
}
|
|
}
|