diff --git a/app/assets/stylesheets/filters.css b/app/assets/stylesheets/filters.css index d0680c86a..8ce52d66c 100644 --- a/app/assets/stylesheets/filters.css +++ b/app/assets/stylesheets/filters.css @@ -11,7 +11,6 @@ } .filters { - .btn { --btn-border-color: var(--color-ink-medium); --input-background: var(--color-canvas); diff --git a/app/assets/stylesheets/popup.css b/app/assets/stylesheets/popup.css index c6035dedd..ba5be2a54 100644 --- a/app/assets/stylesheets/popup.css +++ b/app/assets/stylesheets/popup.css @@ -45,11 +45,23 @@ } /* Hide lists when all the items within are hidden */ - .popup__section { + /* .popup__section { &:has(.popup__section-title:only-child), &:has(.popup__item[hidden]):not(:has(.popup__item:not([hidden]))) { display: none; } + } */ + + .popup__section { + .popup__section-title { + background: orange; + } + + &[open] { + .popup__section-title { + background: lime; + } + } } .popup__section-title { diff --git a/app/helpers/filters_helper.rb b/app/helpers/filters_helper.rb index 13ff3ec4d..337c7e2d4 100644 --- a/app/helpers/filters_helper.rb +++ b/app/helpers/filters_helper.rb @@ -36,7 +36,7 @@ module FiltersHelper end def collapsible_nav_section(title, &block) - tag.details class: "popup__section", data: { controller: "nav-section-expander", action: "toggle->nav-section-expander#toggle", nav_section_expander_key_value: title.parameterize }, open: true do + tag.details class: "popup__section", data: { controller: "nav-section-expander", action: "toggle->nav-section-expander#toggle", nav_section_expander_target: "section", nav_section_expander_key_value: title.parameterize }, open: true do concat(tag.summary(class: "popup__section-title") do concat title concat icon_tag "caret-down" diff --git a/app/javascript/controllers/filter_controller.js b/app/javascript/controllers/filter_controller.js index 688c46155..7f3770a8e 100644 --- a/app/javascript/controllers/filter_controller.js +++ b/app/javascript/controllers/filter_controller.js @@ -11,7 +11,7 @@ export default class extends Controller { filter() { this.itemTargets.forEach(item => { - if (filterMatches(item.innerText, this.inputTarget.value)) { + if (filterMatches(item.textContent, this.inputTarget.value)) { item.removeAttribute("hidden") } else { item.toggleAttribute("hidden", true) diff --git a/app/javascript/controllers/nav_section_expander_controller.js b/app/javascript/controllers/nav_section_expander_controller.js index 930b8760e..c1642fcb2 100644 --- a/app/javascript/controllers/nav_section_expander_controller.js +++ b/app/javascript/controllers/nav_section_expander_controller.js @@ -1,21 +1,51 @@ 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() { - if (this.element.open) { - localStorage.removeItem(this.#localStorageKey) + console.log(this.element) + if (this.element.hasAttribute("data-ignore")) { + // console.log("Don't save it!") } else { - localStorage.setItem(this.#localStorageKey, this.keyValue) + // 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 } @@ -23,4 +53,8 @@ export default class extends Controller { get #localStorageKey() { return this.keyValue } + + get #sections() { + return this.element.querySelectorAll(":scope details:not([open])") + } } diff --git a/app/views/filters/_menu.html.erb b/app/views/filters/_menu.html.erb index 42079fe05..95c4b29dc 100644 --- a/app/views/filters/_menu.html.erb +++ b/app/views/filters/_menu.html.erb @@ -3,8 +3,8 @@ <%= tag.dialog class: "fizzy-menu filter popup popup--animated panel margin-block-start-half", data: { - action: "turbo:before-cache@document->dialog#close keydown->navigable-list#navigate filter:changed->navigable-list#reset toggle->filter#filter", - controller: "filter navigable-list", + action: "turbo:before-cache@document->dialog#close keydown->navigable-list#navigate filter:changed->navigable-list#reset filter:changed->nav-section-expander#showAll toggle->filter#filter", + controller: "filter navigable-list nav-section-expander", dialog_target: "dialog", navigable_list_focus_on_selection_value: false, navigable_list_actionable_items_value: true } do %> diff --git a/app/views/my/menus/show.html.erb b/app/views/my/menus/show.html.erb index 05a50c290..90a784ce3 100644 --- a/app/views/my/menus/show.html.erb +++ b/app/views/my/menus/show.html.erb @@ -12,6 +12,7 @@ data: { "1p-ignore": "true", filter_target: "input", + nav_section_expander_target: "input", navigable_list_target: "input", action: "input->filter#filter" } %>