FreakU
/
Retrospring
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Navigate between traversable elements regardless of parent element

This commit is contained in:
Karina Kwiatek 2023-03-05 19:20:08 +01:00
parent 0eb9a4d089
commit e307204375
2 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/stylesheets/components/_hotkey.scss
View File

@ -1,5 +1,5 @@
.js-hotkey-navigating {
[data-navigation-target="current"] {
.js-hotkey-current-selection {
outline: var(--primary) solid 4px;
}
}

26
app/javascript/retrospring/controllers/navigation_controller.ts
View File

@ -10,28 +10,42 @@ export default class extends Controller {
declare readonly traversableTargets: HTMLElement[];
traversableTargetConnected(target: HTMLElement) {
if (!("navigationIndex" in target.dataset)) {
target.dataset.navigationIndex = this.traversableTargets.indexOf(target).toString();
}
if (!this.hasCurrentTarget) {
const first = this.traversableTargets[0];
first.dataset.navigationTarget = "current";
first.dataset.navigationTarget += " current";
}
}
currentTargetConnected(target: HTMLElement) {
target.classList.add("js-hotkey-current-selection");
target.querySelectorAll<HTMLElement>("[data-selection-hotkey]")
.forEach(el => install(el, el.dataset.selectionHotkey))
.forEach(el => install(el, el.dataset.selectionHotkey));
}
currentTargetDisconnected(target: HTMLElement) {
target.classList.remove("js-hotkey-current-selection");
target.querySelectorAll<HTMLElement>("[data-selection-hotkey]")
.forEach(el => uninstall(el))
.forEach(el => uninstall(el));
}
up(): void {
this.navigate(this.currentTarget.previousElementSibling as HTMLElement);
const prevIndex = this.traversableTargets.indexOf(this.currentTarget) - 1;
if (prevIndex == -1) return;
this.navigate(this.traversableTargets[prevIndex]);
}
down(): void {
this.navigate(this.currentTarget.nextElementSibling as HTMLElement);
const nextIndex = this.traversableTargets.indexOf(this.currentTarget) + 1;
if (nextIndex == this.traversableTargets.length) return;
this.navigate(this.traversableTargets[nextIndex]);
}
navigate(target: HTMLElement): void {
@ -41,7 +55,7 @@ export default class extends Controller {
if (target.dataset.navigationTarget == "traversable") {
this.currentTarget.dataset.navigationTarget = "traversable";
target.dataset.navigationTarget = "current";
target.dataset.navigationTarget = "traversable current";
target.scrollIntoView(false);
}
}