diff --git a/app/javascript/controllers/collapsible_columns_controller.js b/app/javascript/controllers/collapsible_columns_controller.js index 6655e5adf..9a542ce34 100644 --- a/app/javascript/controllers/collapsible_columns_controller.js +++ b/app/javascript/controllers/collapsible_columns_controller.js @@ -2,22 +2,13 @@ import { Controller } from "@hotwired/stimulus" export default class extends Controller { static classes = [ "collapsed" ] - static targets = [ "column" ] + static targets = [ "column", "button" ] - toggle(event) { - const clickedColumn = event.target.closest('[data-collapsible-columns-target="column"]') + toggle({ target }) { + const clickedColumn = target.closest('[data-collapsible-columns-target="column"]') if (!clickedColumn) return - - const isCurrentlyCollapsed = clickedColumn.classList.contains(this.collapsedClass) - - this.columnTargets.forEach(column => { - column.classList.add(this.collapsedClass) - }) - - if (isCurrentlyCollapsed) { - clickedColumn.classList.remove(this.collapsedClass) - } + this.#expandOnly(clickedColumn); } preventToggle(event) { @@ -25,4 +16,36 @@ export default class extends Controller { event.preventDefault() } } + + // Private methods + + #expandOnly(clickedColumn) { + const wasCollapsed = this.#isCollapsed(clickedColumn) + + this.columnTargets.forEach(column => { + this.#collapse(column) + }) + + if (wasCollapsed) { + this.#expand(clickedColumn) + } + } + + #isCollapsed(column) { + return column.classList.contains(this.collapsedClass) + } + + #collapse(column) { + this.#buttonFor(column).setAttribute("aria-expanded", "false") + column.classList.add(this.collapsedClass) + } + + #expand(column) { + this.#buttonFor(column).setAttribute("aria-expanded", "true") + column.classList.remove(this.collapsedClass) + } + + #buttonFor(column) { + return this.buttonTargets.find(button => column.contains(button)) + } } diff --git a/app/views/collections/show/_closed.html.erb b/app/views/collections/show/_closed.html.erb index 443d8ce0d..8d7f41a43 100644 --- a/app/views/collections/show/_closed.html.erb +++ b/app/views/collections/show/_closed.html.erb @@ -6,7 +6,7 @@ data-drag-and-drop-url="<%= columns_card_drops_closure_path("__id__") %>" > - <%= render "collections/show/expander", title: "Done", count: collection.cards.closed.count %> + <%= render "collections/show/expander", title: "Done", count: collection.cards.closed.count, column_id: "closed-cards" %> <%= column_frame_tag :closed_column, src: collection_columns_closed_path(collection) %> diff --git a/app/views/collections/show/_column.html.erb b/app/views/collections/show/_column.html.erb index 421343d58..147593c6d 100644 --- a/app/views/collections/show/_column.html.erb +++ b/app/views/collections/show/_column.html.erb @@ -7,7 +7,7 @@ data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle" data-drag-and-drop-url="<%= columns_card_drops_column_path("__id__", column_id: column.id) %>" > - <%= render "collections/show/expander", title: column.name, count: column.cards.active.count do %> + <%= render "collections/show/expander", title: column.name, count: column.cards.active.count, column_id: dom_id(column) do %> <%= render "collections/show/menu/column", column: column %> <% end %> diff --git a/app/views/collections/show/_expander.html.erb b/app/views/collections/show/_expander.html.erb index 75bcd69db..11c4c5ec7 100644 --- a/app/views/collections/show/_expander.html.erb +++ b/app/views/collections/show/_expander.html.erb @@ -1,5 +1,6 @@