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

Keyboard arrow through pins and notifications

Browse Source
This commit is contained in:
Jason Zimdars
2025-07-30 16:07:55 -05:00
parent d3287adba3
commit 6227cf9a8b
12 changed files with 118 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/controllers/navigable_list_controller.js
+9 -4
View File
@@ -7,7 +7,8 @@ export default class extends Controller {
reverseOrder: { type: Boolean, default: false },
selectionAttribute: { type: String, default: "aria-selected" },
focusOnSelection: { type: Boolean, default: true },
actionableItems: { type: Boolean, default: false }
actionableItems: { type: Boolean, default: false },
reverseNavigation: { type: Boolean, default: false }
}
connect() {
@@ -51,7 +52,9 @@ export default class extends Controller {
// Private
get #visibleItems() {
return this.itemTargets.filter(item => !item.hidden)
return this.itemTargets.filter(item => {
return item.checkVisibility() && !item.hidden
})
}
#selectPrevious() {
@@ -113,10 +116,12 @@ export default class extends Controller {
#keyHandlers = {
ArrowDown(event) {
this.#handleArrowKey(event, this.#selectNext.bind(this))
const selectMethod = this.reverseNavigationValue ? this.#selectPrevious.bind(this) : this.#selectNext.bind(this)
this.#handleArrowKey(event, selectMethod)
},
ArrowUp(event) {
this.#handleArrowKey(event, this.#selectPrevious.bind(this))
const selectMethod = this.reverseNavigationValue ? this.#selectNext.bind(this) : this.#selectPrevious.bind(this)
this.#handleArrowKey(event, selectMethod)
},
ArrowRight(event) {
this.#handleArrowKey(event, this.#selectNext.bind(this), false)