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..c864655a4 100644 --- a/app/assets/stylesheets/popup.css +++ b/app/assets/stylesheets/popup.css @@ -46,7 +46,8 @@ /* Hide lists when all the items within are hidden */ .popup__section { - &:has(.popup__section-title:only-child), + &:not(:has(.popup__list)), + &:not(:has(.popup__list > *)), &:has(.popup__item[hidden]):not(:has(.popup__item:not([hidden]))) { display: none; } diff --git a/app/helpers/filters_helper.rb b/app/helpers/filters_helper.rb index 797682c51..8b33a23b1 100644 --- a/app/helpers/filters_helper.rb +++ b/app/helpers/filters_helper.rb @@ -35,8 +35,8 @@ module FiltersHelper }, &block end - def filter_collapsible_section(title, &block) - tag.details class: "popup__section", open: true do + def collapsible_nav_section(title, &block) + tag.details class: "popup__section", data: { 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 new file mode 100644 index 000000000..d0db6e014 --- /dev/null +++ b/app/javascript/controllers/nav_section_expander_controller.js @@ -0,0 +1,49 @@ +import { Controller } from "@hotwired/stimulus" + +export default class extends Controller { + static values = { key: String } + static targets = [ "input", "section" ] + + sectionTargetConnected() { + this.#restoreToggles() + } + + toggle(event) { + const section = event.target + if (section.hasAttribute("data-is-filtering")) return + + const key = this.#localStorageKeyFor(section) + if (section.open) { + localStorage.removeItem(key) + } else { + localStorage.setItem(key, true) + } + } + + showWhileFiltering() { + if (this.inputTarget.value) { + this.#expandAll(); + } else { + this.#restoreToggles() + } + } + + #expandAll() { + this.sectionTargets.forEach(section => { + section.setAttribute("data-is-filtering", true) + section.open = true + }) + } + + #restoreToggles() { + this.sectionTargets.forEach(section => { + const key = this.#localStorageKeyFor(section) + section.open = !localStorage.getItem(key) + section.removeAttribute("data-is-filtering") + }) + } + + #localStorageKeyFor(section) { + return section.getAttribute("data-nav-section-expander-key-value") + } +} diff --git a/app/views/filters/_menu.html.erb b/app/views/filters/_menu.html.erb index 42079fe05..7b84cdd60 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#showWhileFiltering 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/filters/menu/_collections.html.erb b/app/views/filters/menu/_collections.html.erb index c43ce3f23..c9298093e 100644 --- a/app/views/filters/menu/_collections.html.erb +++ b/app/views/filters/menu/_collections.html.erb @@ -2,7 +2,7 @@ <%= form_with url: user_filtering.self_filter_path(script_name: Account.sole.slug), method: :get, class: "display-contents", data: { controller: "form" } do |form| %> <% if user_filtering.collections.any? %> - <%= filter_collapsible_section "Collections" do %> + <%= collapsible_nav_section "Collections" do %> <%= render "filters/menu/collections/all_option", form: form, user_filtering: user_filtering %> <%= render partial: "filters/menu/collections/collection", collection: user_filtering.collections, as: :collection, locals: { form: form, user_filtering: user_filtering } %> <% end %> diff --git a/app/views/filters/menu/_custom.html.erb b/app/views/filters/menu/_custom.html.erb index e9e061345..2de2cae1d 100644 --- a/app/views/filters/menu/_custom.html.erb +++ b/app/views/filters/menu/_custom.html.erb @@ -1,4 +1,4 @@ -<%= filter_collapsible_section "Saved filters" do %> +<%= collapsible_nav_section "Saved filters" do %> <%= form_with url: cards_path, method: :get, data: { controller: "form" } do |form| %> <%= render "filters/menu/custom/create" %> <%= render partial: "filters/menu/custom/filter", collection: user_filtering.filters, as: :filter, locals: { user_filtering: user_filtering } %> diff --git a/app/views/filters/menu/_places.html.erb b/app/views/filters/menu/_places.html.erb index 0bf30d8e4..26a05b2be 100644 --- a/app/views/filters/menu/_places.html.erb +++ b/app/views/filters/menu/_places.html.erb @@ -1,4 +1,4 @@ -<%= filter_collapsible_section "Jump to…" do %> +<%= collapsible_nav_section "Jump to…" do %> <%= filter_place_menu_item account_settings_path, "Account Settings", "settings" %> <%= filter_place_menu_item user_path(Current.user), "My Profile", "person" %> <%= filter_place_menu_item notifications_path, "Notifications", "bell" %> diff --git a/app/views/filters/menu/_tags.html.erb b/app/views/filters/menu/_tags.html.erb index 1b2c27c86..104d6f29f 100644 --- a/app/views/filters/menu/_tags.html.erb +++ b/app/views/filters/menu/_tags.html.erb @@ -1,3 +1,3 @@ -<%= filter_collapsible_section "Tags" do %> +<%= collapsible_nav_section "Tags" do %> <%= render partial: "filters/menu/tags/tag", collection: user_filtering.tags, as: :tag %> <% end %> diff --git a/app/views/filters/menu/_users.html.erb b/app/views/filters/menu/_users.html.erb index cbc88ce98..fc2dff5ee 100644 --- a/app/views/filters/menu/_users.html.erb +++ b/app/views/filters/menu/_users.html.erb @@ -1,3 +1,3 @@ -<%= filter_collapsible_section "People" do %> +<%= collapsible_nav_section "People" do %> <%= render partial: "filters/menu/users/user", collection: user_filtering.users, as: :user %> <% end %> 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" } %>