bterkuile/fizzy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Things more or less working

Browse Source
This commit is contained in:
Jorge Manrubia
2025-11-20 11:29:09 +01:00
parent 3bfab09795
commit 0726da2708
8 changed files with 65 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/card-columns.css
+1 -2
View File
@@ -3,8 +3,7 @@
/* ------------------------------------------------------------------------ */
/* DEBUG: Remove this when done debugging keyboard navigation */
.card-columns:focus,
.cards:focus {
.card-columns :focus {
outline: 3px solid purple !important;
}
app/javascript/controllers/navigable_list_controller.js
+55 -6
View File
@@ -11,11 +11,17 @@ export default class extends Controller {
reverseNavigation: { type: Boolean, default: false },
supportHorizontalNavigation: { type: Boolean, default: true },
supportVerticalNavigation: { type: Boolean, default: true },
hasNestedNavigation: { type: Boolean, default: false }
hasNestedNavigation: { type: Boolean, default: false },
preventHandledKeys: { type: Boolean, default: false },
autoSelect: { type: Boolean, default: true }
}
connect() {
this.reset()
if (this.autoSelectValue) {
this.reset()
} else {
this.#activateManualSelection()
}
}
// Actions
@@ -29,7 +35,18 @@ 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)
}
}
}
select({ target }) {
@@ -95,6 +112,11 @@ export default class extends Controller {
#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)
@@ -108,10 +130,19 @@ export default class extends Controller {
}
}
#handleArrowKey(event, fn, preventDefault = true) {
#activateManualSelection() {
const preselectedItem = this.itemTargets.find(item => item.hasAttribute(this.selectionAttributeValue))
if (preselectedItem) {
this.#setCurrentFrom(preselectedItem)
}
}
#handleArrowKey(event, fn) {
if (event.shiftKey || event.metaKey || event.ctrlKey) { return }
fn.call()
if (preventDefault) { event.preventDefault() }
if (this.preventHandledKeysValue) {
event.preventDefault()
}
}
#clickCurrentItem(event) {
@@ -137,6 +168,24 @@ export default class extends Controller {
}
}
#activateNestedNavigableList() {
const nestedController = this.#findNestedNavigableListController()
if (nestedController) {
console.debug("CALLED!", this.element);
nestedController.reset()
return true
}
return false
}
#findNestedNavigableListController() {
const nestedElement = this.currentItem?.querySelector('[data-controller~="navigable-list"]')
if (nestedElement) {
return this.application.getControllerForElementAndIdentifier(nestedElement, "navigable-list")
}
return null
}
#keyHandlers = {
ArrowDown(event) {
if (this.supportVerticalNavigationValue) {
@@ -152,12 +201,12 @@ export default class extends Controller {
},
ArrowRight(event) {
if (this.supportHorizontalNavigationValue) {
this.#handleArrowKey(event, this.#selectNext.bind(this), false)
this.#handleArrowKey(event, this.#selectNext.bind(this))
}
},
ArrowLeft(event) {
if (this.supportHorizontalNavigationValue) {
this.#handleArrowKey(event, this.#selectPrevious.bind(this), false)
this.#handleArrowKey(event, this.#selectPrevious.bind(this))
}
},
Enter(event) {
app/views/boards/show/_closed.html.erb
+1 -2
View File
@@ -4,12 +4,11 @@
data-drag-and-strum-target="container"
data-collapsible-columns-target="column"
data-navigable-list-target="item"
data-navigable-list-support-horizontal-navigation-value="false"
data-column-name="Done"
data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle focus->collapsible-columns#focusOnColumn"
data-drag-and-drop-url="<%= columns_card_drops_closure_path("__id__") %>"
>
<div class="cards__transition-container">
<div class="cards__transition-container" data-controller="navigable-list" data-navigable-list-support-horizontal-navigation-value="false" data-navigable-list-prevent-handled-keys-value="true" data-navigable-list-auto-select-value="false" data-action="keydown->navigable-list#navigate">
<header class="cards__header">
<%= render "boards/show/expander", title: "Done", count: board.cards.closed.count, column_id: "closed-cards" %>
<%= render "boards/show/menu/maximize", column_path: board_columns_closed_path(board) %>
app/views/boards/show/_column.html.erb
+1 -2
View File
@@ -5,13 +5,12 @@
data-drag-and-strum-target="container"
data-collapsible-columns-target="column"
data-navigable-list-target="item"
data-navigable-list-support-horizontal-navigation-value="false"
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-drag-and-drop-url="<%= columns_card_drops_column_path("__id__", column_id: column.id) %>"
>
<div class="cards__transition-container">
<div class="cards__transition-container" data-controller="navigable-list" data-navigable-list-support-horizontal-navigation-value="false" data-navigable-list-prevent-handled-keys-value="true" data-navigable-list-auto-select-value="false" data-action="keydown->navigable-list#navigate">
<header class="cards__header">
<%= render "boards/show/menu/column", column: column %>
<%= render "boards/show/expander", title: column.name, count: column.cards.active.count, column_id: dom_id(column) %>
app/views/boards/show/_columns.html.erb
+2
View File
@@ -8,6 +8,8 @@
collapsible_columns_title_not_visible_class: "is-off-screen",
navigable_list_support_vertical_navigation_value: false,
navigable_list_has_nested_navigation_value: true,
navigable_list_prevent_handled_keys_value: true,
navigable_list_auto_select_value: false,
action: "
keydown->navigable-list#navigate
dragstart->drag-and-drop#dragStart
app/views/boards/show/_not_now.html.erb
+1 -2
View File
@@ -4,12 +4,11 @@
data-drag-and-drop-target="container"
data-drag-and-strum-target="container"
data-navigable-list-target="item"
data-navigable-list-support-horizontal-navigation-value="false"
data-column-name="Not Now"
data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle focus->collapsible-columns#focusOnColumn"
data-drag-and-drop-url="<%= columns_card_drops_not_now_path("__id__") %>"
>
<div class="cards__transition-container">
<div class="cards__transition-container" data-controller="navigable-list" data-navigable-list-support-horizontal-navigation-value="false" data-navigable-list-prevent-handled-keys-value="true" data-navigable-list-auto-select-value="false" data-action="keydown->navigable-list#navigate">
<header class="cards__header">
<%= render "boards/show/expander", title: "Not Now", count: board.cards.postponed.count, column_id: "not-now" %>
<%= render "boards/show/menu/maximize", column_path: board_columns_not_now_path(board) %>
app/views/boards/show/_stream.html.erb
+3 -3
View File
@@ -2,11 +2,11 @@
tabindex="0"
data-drag-and-drop-target="container"
data-navigable-list-target="item"
data-navigable-list-support-horizontal-navigation-value="false"
data-column-name="Maybe?"
data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle"
data-drag-and-drop-url="<%= columns_card_drops_stream_path("__id__") %>">
<div class="cards__transition-container">
data-drag-and-drop-url="<%= columns_card_drops_stream_path("__id__") %>"
aria-selected="true">
<div class="cards__transition-container" data-controller="navigable-list" data-navigable-list-support-horizontal-navigation-value="false" data-navigable-list-prevent-handled-keys-value="true" data-navigable-list-auto-select-value="false" data-action="keydown->navigable-list#navigate">
<header class="cards__header">
<div class="cards__expander">
<h2 class="cards__expander-title" data-collapsible-columns-target="title">Maybe?</h2>
app/views/cards/display/_preview.html.erb
+1 -1
View File
@@ -1,6 +1,6 @@
<% draggable = local_assigns.fetch(:draggable, false) && card.published? %>
<%= card_article_tag card, class: "card", draggable: draggable, data: { id: card.number, drag_and_drop_target: "item" } do %>
<%= card_article_tag card, class: "card", draggable: draggable, data: { id: card.number, drag_and_drop_target: "item", navigable_list_target: "item" }, tabindex: 0 do %>
<div class="flex flex-column flex-item-grow max-inline-size">
<header class="card__header">
<%= render "cards/display/preview/board", card: card %>