Skip to content

Commit 01a0815

Browse files
fazzledevfazzledev
committed
Setup keyboard navigation between dates
1 parent dfc2f74 commit 01a0815

File tree

4 files changed

+45
-9
lines changed

4 files changed

+45
-9
lines changed

‎app/javascript/controllers/keyboard_navigation_controller.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { Controller } from "stimulus"
2+
3+
export default class extends Controller {
4+
5+
static targets = [
6+
'right', 'left',
7+
'altRight', 'altLeft',
8+
'shiftRight', 'shiftLeft',
9+
'period'
10+
]
11+
12+
connect() {}
13+
14+
navigate(event) {
15+
if (event.target != this.element) return
16+
17+
if (event.key == 'ArrowRight') {
18+
if (event.altKey) this.altRightTarget.click()
19+
else if (event.shiftKey) this.shiftRightTarget.click()
20+
else this.rightTarget.click()
21+
}
22+
23+
if (event.key == 'ArrowLeft') {
24+
if (event.altKey) this.altLeftTarget.click()
25+
else if (event.shiftKey) this.shiftLeftTarget.click()
26+
else this.leftTarget.click()
27+
}
28+
29+
if (event.key == '.') {
30+
this.periodTarget.click()
31+
}
32+
}
33+
}

‎app/views/layouts/application.html.erb‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,10 @@
44
<%= render 'shared/head' %>
55
</head>
66

7-
<body>
7+
<body
8+
data-controller="keyboard-navigation"
9+
data-action="keyup->keyboard-navigation#navigate"
10+
>
811
<%= render 'shared/navbar' %>
912
<%= render 'shared/notices' %>
1013

‎app/views/shared/_navbar.html.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
<nav class="navbar navbar-expand-md navbar-light bg-light">
99
<div class="container">
10-
<%= link_to Rails.configuration.application_name, root_path, class: "navbar-brand" %>
10+
<%= link_to Rails.configuration.application_name, root_path, class: "navbar-brand", data: { target: 'keyboard-navigation.period' } %>
1111

1212
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMain" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
1313
<span class="navbar-toggler-icon"></span>

‎app/views/todos/_date_nav.html.erb‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,27 +8,27 @@
88
<%= link_to date_path(date: date - 3.months), id: 'prev-quarter', style: 'color: transparent;', data: { target: 'revealable.colorable' } do %>
99
<%= render 'icons/chevron_double_left' %>
1010
<% end %>
11-
<%= link_to date_path(date: date - 1.month), id: 'prev-month', style: 'color: transparent;', data: { target: 'revealable.colorable' } do %>
11+
<%= link_to date_path(date: date - 1.month), id: 'prev-month', style: 'color: transparent;', data: { target: 'revealable.colorable keyboard-navigation.shiftLeft' } do %>
1212
<%= render 'icons/chevron_left' %>
1313
<% end %>
14-
<%= link_to date_path(date: date - 1.week), id: 'prev-week', style: 'color: transparent;', data: { target: 'revealable.colorable' } do %>
14+
<%= link_to date_path(date: date - 1.week), id: 'prev-week', style: 'color: transparent;', data: { target: 'revealable.colorable keyboard-navigation.altLeft' } do %>
1515
<%= render 'icons/chevron_double_left' %>
1616
<% end %>
17-
<%= link_to date_path(date: date.prev_day), id: 'prev-day', style: 'color: transparent;', data: { target: 'revealable.colorable' } do %>
17+
<%= link_to date_path(date: date.prev_day), id: 'prev-day', style: 'color: transparent;', data: { target: 'revealable.colorable keyboard-navigation.left' } do %>
1818
<%= render 'icons/chevron_left' %>
1919
<% end %>
2020

2121
<span id="this-month"><%= date.strftime('%b') %></span>
2222
<span id="this-day"><%= date.strftime('%e %a') %></span>
2323
<span id="this-year"><%= date.strftime('%Y') %></span>
2424

25-
<%= link_to date_path(date: date.next_day), id: 'next-day', style: 'color: transparent;', data: { target: 'revealable.colorable' } do %>
25+
<%= link_to date_path(date: date.next_day), id: 'next-day', style: 'color: transparent;', data: { target: 'revealable.colorable keyboard-navigation.right' } do %>
2626
<%= render 'icons/chevron_right' %>
2727
<% end %>
28-
<%= link_to date_path(date: date + 1.week), id: 'next-week', style: 'color: transparent;', data: { target: 'revealable.colorable' } do %>
28+
<%= link_to date_path(date: date + 1.week), id: 'next-week', style: 'color: transparent;', data: { target: 'revealable.colorable keyboard-navigation.altRight' } do %>
2929
<%= render 'icons/chevron_double_right' %>
3030
<% end %>
31-
<%= link_to date_path(date: date + 1.month), id: 'next-month', style: 'color: transparent;', data: { target: 'revealable.colorable' } do %>
31+
<%= link_to date_path(date: date + 1.month), id: 'next-month', style: 'color: transparent;', data: { target: 'revealable.colorable keyboard-navigation.shiftRight' } do %>
3232
<%= render 'icons/chevron_right' %>
3333
<% end %>
3434
<%= link_to date_path(date: date + 3.months), id: 'next-quarter', style: 'color: transparent;', data: { target: 'revealable.colorable' } do %>
@@ -40,4 +40,4 @@
4040
<%= link_to date_path(date: date + 10.years), id: 'next-decade', style: 'color: transparent;', data: { target: 'revealable.colorable' } do %>
4141
<%= render 'icons/chevron_double_right' %>
4242
<% end %>
43-
</div>
43+
</div>

0 commit comments

Comments
 (0)