From 3247841c2d33be40a6a404d567f7eb8cd73ca3ef Mon Sep 17 00:00:00 2001 From: Jorge Manrubia Date: Thu, 20 Nov 2025 13:00:59 +0100 Subject: [PATCH] Expanding columns and selection working --- .../collapsible_columns_controller.js | 9 +++--- .../controllers/navigable_list_controller.js | 32 ++++++++----------- app/views/boards/show/_closed.html.erb | 2 +- app/views/boards/show/_column.html.erb | 2 +- app/views/boards/show/_columns.html.erb | 2 +- app/views/boards/show/_not_now.html.erb | 2 +- app/views/boards/show/_stream.html.erb | 2 +- 7 files changed, 22 insertions(+), 29 deletions(-) diff --git a/app/javascript/controllers/collapsible_columns_controller.js b/app/javascript/controllers/collapsible_columns_controller.js index e37ae963c..2c97fcd09 100644 --- a/app/javascript/controllers/collapsible_columns_controller.js +++ b/app/javascript/controllers/collapsible_columns_controller.js @@ -40,11 +40,10 @@ export default class extends Controller { await this.#restoreColumnsDisablingTransitions() } - focusOnColumn(event) { - const column = event.target - if (this.#isCollapsed(column)) { - this.#collapseAllExcept(column) - this.#expand(column) + focusOnColumn({ target }) { + if (this.#isCollapsed(target)) { + this.#collapseAllExcept(target) + this.#expand(target) } } diff --git a/app/javascript/controllers/navigable_list_controller.js b/app/javascript/controllers/navigable_list_controller.js index 9667f5290..5c3f1a618 100644 --- a/app/javascript/controllers/navigable_list_controller.js +++ b/app/javascript/controllers/navigable_list_controller.js @@ -20,6 +20,7 @@ export default class extends Controller { if (this.autoSelectValue) { this.reset() } else { + console.debug("CALLED", this.element); this.#activateManualSelection() } } @@ -35,14 +36,12 @@ export default class extends Controller { } navigate(event) { - console.debug("PRESSED", this.element); this.#keyHandlers[event.key]?.call(this, event) const parentNavigableList = this.element.parentElement?.closest('[data-controller~="navigable-list"]') if (parentNavigableList) { const parentController = this.application.getControllerForElementAndIdentifier(parentNavigableList, "navigable-list") if (parentController) { - console.debug("CALLED!"); parentNavigableList.focus() parentController.navigate(event) } @@ -50,7 +49,7 @@ export default class extends Controller { } select({ target }) { - this.#setCurrentFrom(target) + this.#selectItem(target, true) } selectCurrentOrReset(event) { @@ -99,29 +98,18 @@ export default class extends Controller { } } - async #selectItem(item) { + async #selectItem(item, skipFocus = false) { this.#clearSelection() item.setAttribute(this.selectionAttributeValue, "true") this.currentItem = item + this.#refreshActiveDescendant() await nextFrame() - this.#scrollAndFocusOnSelectedItem() - } - - #scrollAndFocusOnSelectedItem() { - const id = this.currentItem?.getAttribute("id") this.currentItem.scrollIntoView({ block: "nearest", inline: "nearest" }) - console.debug("this.currentItem", this.currentItem); - if (this.hasNestedNavigationValue) { - this.#activateNestedNavigableList() - } - - if (this.focusOnSelectionValue) { this.currentItem.focus() } - if (this.hasInputTarget && id) { - this.inputTarget.setAttribute("aria-activedescendant", id) - } + if (this.hasNestedNavigationValue) { this.#activateNestedNavigableList() } + if (!skipFocus && this.focusOnSelectionValue) { this.currentItem.focus() } } #clearSelection() { @@ -130,6 +118,13 @@ export default class extends Controller { } } + #refreshActiveDescendant() { + const id = this.currentItem?.getAttribute("id") + if (this.hasInputTarget && id) { + this.inputTarget.setAttribute("aria-activedescendant", id) + } + } + #activateManualSelection() { const preselectedItem = this.itemTargets.find(item => item.hasAttribute(this.selectionAttributeValue)) if (preselectedItem) { @@ -171,7 +166,6 @@ export default class extends Controller { #activateNestedNavigableList() { const nestedController = this.#findNestedNavigableListController() if (nestedController) { - console.debug("CALLED!", this.element); nestedController.reset() return true } diff --git a/app/views/boards/show/_closed.html.erb b/app/views/boards/show/_closed.html.erb index f2c315e5a..5572b5258 100644 --- a/app/views/boards/show/_closed.html.erb +++ b/app/views/boards/show/_closed.html.erb @@ -5,7 +5,7 @@ data-collapsible-columns-target="column" data-navigable-list-target="item" data-column-name="Done" - data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle focus->collapsible-columns#focusOnColumn" + data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle focus->collapsible-columns#focusOnColumn focus->navigable-list#select" data-drag-and-drop-url="<%= columns_card_drops_closure_path("__id__") %>" >
diff --git a/app/views/boards/show/_column.html.erb b/app/views/boards/show/_column.html.erb index e1b26a751..11ea6bcc0 100644 --- a/app/views/boards/show/_column.html.erb +++ b/app/views/boards/show/_column.html.erb @@ -7,7 +7,7 @@ data-navigable-list-target="item" data-controller="clicker" data-column-name="<%= column.name %>" - data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle turbo:before-stream-render@document->collapsible-columns#restoreState focus->collapsible-columns#focusOnColumn" + data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle turbo:before-stream-render@document->collapsible-columns#restoreState focus->collapsible-columns#focusOnColumn focus->navigable-list#select" data-drag-and-drop-url="<%= columns_card_drops_column_path("__id__", column_id: column.id) %>" >
diff --git a/app/views/boards/show/_columns.html.erb b/app/views/boards/show/_columns.html.erb index ae3e5d140..5f44bc4df 100644 --- a/app/views/boards/show/_columns.html.erb +++ b/app/views/boards/show/_columns.html.erb @@ -1,4 +1,4 @@ -<%= tag.div class: "card-columns", tabindex: "0", data: { +<%= tag.div class: "card-columns", data: { controller: "collapsible-columns drag-and-drop drag-and-strum navigable-list", drag_and_drop_dragged_item_class: "drag-and-drop__dragged-item", drag_and_drop_hover_container_class: "drag-and-drop__hover-container", diff --git a/app/views/boards/show/_not_now.html.erb b/app/views/boards/show/_not_now.html.erb index 2470dcdae..b18c777a0 100644 --- a/app/views/boards/show/_not_now.html.erb +++ b/app/views/boards/show/_not_now.html.erb @@ -5,7 +5,7 @@ data-drag-and-strum-target="container" data-navigable-list-target="item" data-column-name="Not Now" - data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle focus->collapsible-columns#focusOnColumn" + data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle focus->collapsible-columns#focusOnColumn focus->navigable-list#select" data-drag-and-drop-url="<%= columns_card_drops_not_now_path("__id__") %>" >
diff --git a/app/views/boards/show/_stream.html.erb b/app/views/boards/show/_stream.html.erb index 036e18868..a151bcbdf 100644 --- a/app/views/boards/show/_stream.html.erb +++ b/app/views/boards/show/_stream.html.erb @@ -3,7 +3,7 @@ data-drag-and-drop-target="container" data-navigable-list-target="item" data-column-name="Maybe?" - data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle" + data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle focus->navigable-list#select" data-drag-and-drop-url="<%= columns_card_drops_stream_path("__id__") %>" aria-selected="true">