diff --git a/app/javascript/controllers/collapsible_columns_controller.js b/app/javascript/controllers/collapsible_columns_controller.js index a00c71fb5..9c4898994 100644 --- a/app/javascript/controllers/collapsible_columns_controller.js +++ b/app/javascript/controllers/collapsible_columns_controller.js @@ -4,6 +4,10 @@ export default class extends Controller { static classes = [ "collapsed" ] static targets = [ "column", "button" ] + connect() { + this.#restoreColumns() + } + toggle({ target }) { const column = target.closest('[data-collapsible-columns-target="column"]') this.#toggleColumn(column); @@ -23,6 +27,9 @@ export default class extends Controller { } else { this.#collapse(column) } + + console.log("TOGGLE") + console.log(localStorage) } #collapseAllExcept(clickedColumn) { @@ -38,16 +45,35 @@ export default class extends Controller { } #collapse(column) { + const key = this.#localStorageKeyFor(column) + this.#buttonFor(column).setAttribute("aria-expanded", "false") column.classList.add(this.collapsedClass) + localStorage.removeItem(key) } #expand(column) { + const key = this.#localStorageKeyFor(column) + this.#buttonFor(column).setAttribute("aria-expanded", "true") column.classList.remove(this.collapsedClass) + localStorage.setItem(key, true) } #buttonFor(column) { return this.buttonTargets.find(button => column.contains(button)) } + + #restoreColumns() { + this.columnTargets.forEach(column => { + const key = this.#localStorageKeyFor(column) + if (localStorage.getItem(key)) { + this.#expand(column) + } + }) + } + + #localStorageKeyFor(column) { + return `expand-${column.getAttribute("id")}` + } }