mirror of
https://github.com/cheeaun/phanpy.git
synced 2024-11-21 16:55:25 +03:00
Add [ and ] to focus columns
This commit is contained in:
Lim Chee Aun
parent
d7732cbf47
commit
50136fb8c8
4 changed files with 98 additions and 45 deletions
|
|
@ -12,9 +12,16 @@ import Notifications from '../pages/notifications';
|
||||||
import Public from '../pages/public';
|
import Public from '../pages/public';
|
||||||
import Search from '../pages/search';
|
import Search from '../pages/search';
|
||||||
import Trending from '../pages/trending';
|
import Trending from '../pages/trending';
|
||||||
|
import isRTL from '../utils/is-rtl';
|
||||||
import states from '../utils/states';
|
import states from '../utils/states';
|
||||||
import useTitle from '../utils/useTitle';
|
import useTitle from '../utils/useTitle';
|
||||||
|
|
||||||
|
const scrollIntoViewOptions = {
|
||||||
|
block: 'nearest',
|
||||||
|
inline: 'nearest',
|
||||||
|
behavior: 'smooth',
|
||||||
|
};
|
||||||
|
|
||||||
function Columns() {
|
function Columns() {
|
||||||
useTitle(t`Home`, '/');
|
useTitle(t`Home`, '/');
|
||||||
const snapStates = useSnapshot(states);
|
const snapStates = useSnapshot(states);
|
||||||
|
|
@ -50,12 +57,42 @@ function Columns() {
|
||||||
useHotkeys(['1', '2', '3', '4', '5', '6', '7', '8', '9'], (e, handler) => {
|
useHotkeys(['1', '2', '3', '4', '5', '6', '7', '8', '9'], (e, handler) => {
|
||||||
try {
|
try {
|
||||||
const index = parseInt(handler.keys[0], 10) - 1;
|
const index = parseInt(handler.keys[0], 10) - 1;
|
||||||
document.querySelectorAll('#columns > *')[index].focus();
|
const $column = document.querySelectorAll('#columns > *')[index];
|
||||||
|
if ($column) {
|
||||||
|
$column.focus();
|
||||||
|
$column.scrollIntoView(scrollIntoViewOptions);
|
||||||
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error(e);
|
console.error(e);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
useHotkeys(['[', ']'], (e, handler) => {
|
||||||
|
const key = handler.keys[0];
|
||||||
|
const currentFocusedColumn = document.activeElement.closest('#columns > *');
|
||||||
|
|
||||||
|
const rtl = isRTL();
|
||||||
|
const prevColKey = rtl ? ']' : '[';
|
||||||
|
const nextColKey = rtl ? '[' : ']';
|
||||||
|
let $column;
|
||||||
|
|
||||||
|
if (key === prevColKey) {
|
||||||
|
// If [, focus on left of focused column, else first column
|
||||||
|
$column = currentFocusedColumn
|
||||||
|
? currentFocusedColumn.previousElementSibling
|
||||||
|
: document.querySelectorAll('#columns > *')[0];
|
||||||
|
} else if (key === nextColKey) {
|
||||||
|
// If ], focus on right of focused column, else 2nd column
|
||||||
|
$column = currentFocusedColumn
|
||||||
|
? currentFocusedColumn.nextElementSibling
|
||||||
|
: document.querySelectorAll('#columns > *')[1];
|
||||||
|
}
|
||||||
|
if ($column) {
|
||||||
|
$column.focus();
|
||||||
|
$column.scrollIntoView(scrollIntoViewOptions);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
id="columns"
|
id="columns"
|
||||||
|
|
|
||||||
|
|
@ -113,6 +113,14 @@ export default memo(function KeyboardShortcutsHelp() {
|
||||||
</Trans>
|
</Trans>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
action: t`Focus next column in multi-column mode`,
|
||||||
|
keys: <kbd>]</kbd>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
action: t`Focus previous column in multi-column mode`,
|
||||||
|
keys: <kbd>[</kbd>,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
action: t`Compose new post`,
|
action: t`Compose new post`,
|
||||||
keys: <kbd>c</kbd>,
|
keys: <kbd>c</kbd>,
|
||||||
|
|
|
||||||
94
src/locales/en.po
generated
94
src/locales/en.po
generated
|
|
@ -98,8 +98,8 @@ msgstr "Following"
|
||||||
#: src/components/account-info.jsx:419
|
#: src/components/account-info.jsx:419
|
||||||
#: src/components/account-info.jsx:776
|
#: src/components/account-info.jsx:776
|
||||||
#: src/pages/account-statuses.jsx:484
|
#: src/pages/account-statuses.jsx:484
|
||||||
#: src/pages/search.jsx:237
|
#: src/pages/search.jsx:312
|
||||||
#: src/pages/search.jsx:384
|
#: src/pages/search.jsx:459
|
||||||
msgid "Posts"
|
msgid "Posts"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
|
|
@ -524,7 +524,7 @@ msgstr ""
|
||||||
msgid "Cloak mode enabled"
|
msgid "Cloak mode enabled"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: src/components/columns.jsx:19
|
#: src/components/columns.jsx:26
|
||||||
#: src/components/nav-menu.jsx:184
|
#: src/components/nav-menu.jsx:184
|
||||||
#: src/components/shortcuts-settings.jsx:139
|
#: src/components/shortcuts-settings.jsx:139
|
||||||
#: src/components/timeline.jsx:437
|
#: src/components/timeline.jsx:437
|
||||||
|
|
@ -674,7 +674,7 @@ msgid "Add custom emoji"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: src/components/compose.jsx:1504
|
#: src/components/compose.jsx:1504
|
||||||
#: src/components/keyboard-shortcuts-help.jsx:143
|
#: src/components/keyboard-shortcuts-help.jsx:151
|
||||||
#: src/components/status.jsx:913
|
#: src/components/status.jsx:913
|
||||||
#: src/components/status.jsx:1701
|
#: src/components/status.jsx:1701
|
||||||
#: src/components/status.jsx:1702
|
#: src/components/status.jsx:1702
|
||||||
|
|
@ -957,8 +957,8 @@ msgstr ""
|
||||||
#: src/components/generic-accounts.jsx:145
|
#: src/components/generic-accounts.jsx:145
|
||||||
#: src/components/notification.jsx:438
|
#: src/components/notification.jsx:438
|
||||||
#: src/pages/accounts.jsx:41
|
#: src/pages/accounts.jsx:41
|
||||||
#: src/pages/search.jsx:227
|
#: src/pages/search.jsx:302
|
||||||
#: src/pages/search.jsx:260
|
#: src/pages/search.jsx:335
|
||||||
msgid "Accounts"
|
msgid "Accounts"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
|
|
@ -966,14 +966,14 @@ msgstr ""
|
||||||
#: src/components/timeline.jsx:519
|
#: src/components/timeline.jsx:519
|
||||||
#: src/pages/list.jsx:293
|
#: src/pages/list.jsx:293
|
||||||
#: src/pages/notifications.jsx:848
|
#: src/pages/notifications.jsx:848
|
||||||
#: src/pages/search.jsx:454
|
#: src/pages/search.jsx:529
|
||||||
#: src/pages/status.jsx:1327
|
#: src/pages/status.jsx:1327
|
||||||
msgid "Show more…"
|
msgid "Show more…"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: src/components/generic-accounts.jsx:210
|
#: src/components/generic-accounts.jsx:210
|
||||||
#: src/components/timeline.jsx:524
|
#: src/components/timeline.jsx:524
|
||||||
#: src/pages/search.jsx:459
|
#: src/pages/search.jsx:534
|
||||||
msgid "The end."
|
msgid "The end."
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
|
|
@ -1047,52 +1047,60 @@ msgid "<0>1</0> to <1>9</1>"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: src/components/keyboard-shortcuts-help.jsx:117
|
#: src/components/keyboard-shortcuts-help.jsx:117
|
||||||
|
msgid "Focus next column in multi-column mode"
|
||||||
|
msgstr "Focus next column in multi-column mode"
|
||||||
|
|
||||||
|
#: src/components/keyboard-shortcuts-help.jsx:121
|
||||||
|
msgid "Focus previous column in multi-column mode"
|
||||||
|
msgstr "Focus previous column in multi-column mode"
|
||||||
|
|
||||||
|
#: src/components/keyboard-shortcuts-help.jsx:125
|
||||||
msgid "Compose new post"
|
msgid "Compose new post"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: src/components/keyboard-shortcuts-help.jsx:121
|
#: src/components/keyboard-shortcuts-help.jsx:129
|
||||||
msgid "Compose new post (new window)"
|
msgid "Compose new post (new window)"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: src/components/keyboard-shortcuts-help.jsx:124
|
#: src/components/keyboard-shortcuts-help.jsx:132
|
||||||
msgid "<0>Shift</0> + <1>c</1>"
|
msgid "<0>Shift</0> + <1>c</1>"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: src/components/keyboard-shortcuts-help.jsx:130
|
#: src/components/keyboard-shortcuts-help.jsx:138
|
||||||
msgid "Send post"
|
msgid "Send post"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: src/components/keyboard-shortcuts-help.jsx:132
|
#: src/components/keyboard-shortcuts-help.jsx:140
|
||||||
msgid "<0>Ctrl</0> + <1>Enter</1> or <2>⌘</2> + <3>Enter</3>"
|
msgid "<0>Ctrl</0> + <1>Enter</1> or <2>⌘</2> + <3>Enter</3>"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: src/components/keyboard-shortcuts-help.jsx:139
|
#: src/components/keyboard-shortcuts-help.jsx:147
|
||||||
#: src/components/nav-menu.jsx:374
|
#: src/components/nav-menu.jsx:374
|
||||||
#: src/components/search-form.jsx:72
|
#: src/components/search-form.jsx:72
|
||||||
#: src/components/shortcuts-settings.jsx:52
|
#: src/components/shortcuts-settings.jsx:52
|
||||||
#: src/components/shortcuts-settings.jsx:179
|
#: src/components/shortcuts-settings.jsx:179
|
||||||
#: src/pages/search.jsx:39
|
#: src/pages/search.jsx:45
|
||||||
#: src/pages/search.jsx:209
|
#: src/pages/search.jsx:284
|
||||||
msgid "Search"
|
msgid "Search"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: src/components/keyboard-shortcuts-help.jsx:147
|
#: src/components/keyboard-shortcuts-help.jsx:155
|
||||||
msgid "Reply (new window)"
|
msgid "Reply (new window)"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: src/components/keyboard-shortcuts-help.jsx:150
|
#: src/components/keyboard-shortcuts-help.jsx:158
|
||||||
msgid "<0>Shift</0> + <1>r</1>"
|
msgid "<0>Shift</0> + <1>r</1>"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: src/components/keyboard-shortcuts-help.jsx:156
|
#: src/components/keyboard-shortcuts-help.jsx:164
|
||||||
msgid "Like (favourite)"
|
msgid "Like (favourite)"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: src/components/keyboard-shortcuts-help.jsx:158
|
#: src/components/keyboard-shortcuts-help.jsx:166
|
||||||
msgid "<0>l</0> or <1>f</1>"
|
msgid "<0>l</0> or <1>f</1>"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: src/components/keyboard-shortcuts-help.jsx:164
|
#: src/components/keyboard-shortcuts-help.jsx:172
|
||||||
#: src/components/status.jsx:921
|
#: src/components/status.jsx:921
|
||||||
#: src/components/status.jsx:2396
|
#: src/components/status.jsx:2396
|
||||||
#: src/components/status.jsx:2428
|
#: src/components/status.jsx:2428
|
||||||
|
|
@ -1100,22 +1108,22 @@ msgstr ""
|
||||||
msgid "Boost"
|
msgid "Boost"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: src/components/keyboard-shortcuts-help.jsx:166
|
#: src/components/keyboard-shortcuts-help.jsx:174
|
||||||
msgid "<0>Shift</0> + <1>b</1>"
|
msgid "<0>Shift</0> + <1>b</1>"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: src/components/keyboard-shortcuts-help.jsx:172
|
#: src/components/keyboard-shortcuts-help.jsx:180
|
||||||
#: src/components/status.jsx:1006
|
#: src/components/status.jsx:1006
|
||||||
#: src/components/status.jsx:2453
|
#: src/components/status.jsx:2453
|
||||||
#: src/components/status.jsx:2454
|
#: src/components/status.jsx:2454
|
||||||
msgid "Bookmark"
|
msgid "Bookmark"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: src/components/keyboard-shortcuts-help.jsx:176
|
#: src/components/keyboard-shortcuts-help.jsx:184
|
||||||
msgid "Toggle Cloak mode"
|
msgid "Toggle Cloak mode"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: src/components/keyboard-shortcuts-help.jsx:178
|
#: src/components/keyboard-shortcuts-help.jsx:186
|
||||||
msgid "<0>Shift</0> + <1>Alt</1> + <2>k</2>"
|
msgid "<0>Shift</0> + <1>Alt</1> + <2>k</2>"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
|
|
@ -1298,7 +1306,7 @@ msgid "Lists"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: src/components/nav-menu.jsx:249
|
#: src/components/nav-menu.jsx:249
|
||||||
#: src/components/shortcuts.jsx:209
|
#: src/components/shortcuts.jsx:215
|
||||||
#: src/pages/list.jsx:133
|
#: src/pages/list.jsx:133
|
||||||
msgid "All Lists"
|
msgid "All Lists"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
@ -1780,7 +1788,7 @@ msgid "Media only"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: src/components/shortcuts-settings.jsx:235
|
#: src/components/shortcuts-settings.jsx:235
|
||||||
#: src/components/shortcuts.jsx:186
|
#: src/components/shortcuts.jsx:192
|
||||||
msgid "Shortcuts"
|
msgid "Shortcuts"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
|
|
@ -2690,7 +2698,7 @@ msgstr ""
|
||||||
|
|
||||||
#: src/pages/catchup.jsx:1316
|
#: src/pages/catchup.jsx:1316
|
||||||
#: src/pages/mentions.jsx:147
|
#: src/pages/mentions.jsx:147
|
||||||
#: src/pages/search.jsx:222
|
#: src/pages/search.jsx:297
|
||||||
msgid "All"
|
msgid "All"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
|
|
@ -3273,58 +3281,58 @@ msgstr ""
|
||||||
msgid "Switch to Local"
|
msgid "Switch to Local"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: src/pages/search.jsx:43
|
#: src/pages/search.jsx:49
|
||||||
msgid "Search: {q} (Posts)"
|
msgid "Search: {q} (Posts)"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: src/pages/search.jsx:46
|
#: src/pages/search.jsx:52
|
||||||
msgid "Search: {q} (Accounts)"
|
msgid "Search: {q} (Accounts)"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: src/pages/search.jsx:49
|
#: src/pages/search.jsx:55
|
||||||
msgid "Search: {q} (Hashtags)"
|
msgid "Search: {q} (Hashtags)"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: src/pages/search.jsx:52
|
#: src/pages/search.jsx:58
|
||||||
msgid "Search: {q}"
|
msgid "Search: {q}"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: src/pages/search.jsx:232
|
#: src/pages/search.jsx:307
|
||||||
#: src/pages/search.jsx:314
|
#: src/pages/search.jsx:389
|
||||||
msgid "Hashtags"
|
msgid "Hashtags"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: src/pages/search.jsx:264
|
#: src/pages/search.jsx:339
|
||||||
#: src/pages/search.jsx:318
|
#: src/pages/search.jsx:393
|
||||||
#: src/pages/search.jsx:388
|
#: src/pages/search.jsx:463
|
||||||
msgid "See more"
|
msgid "See more"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: src/pages/search.jsx:290
|
#: src/pages/search.jsx:365
|
||||||
msgid "See more accounts"
|
msgid "See more accounts"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: src/pages/search.jsx:304
|
#: src/pages/search.jsx:379
|
||||||
msgid "No accounts found."
|
msgid "No accounts found."
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: src/pages/search.jsx:360
|
#: src/pages/search.jsx:435
|
||||||
msgid "See more hashtags"
|
msgid "See more hashtags"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: src/pages/search.jsx:374
|
#: src/pages/search.jsx:449
|
||||||
msgid "No hashtags found."
|
msgid "No hashtags found."
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: src/pages/search.jsx:418
|
#: src/pages/search.jsx:493
|
||||||
msgid "See more posts"
|
msgid "See more posts"
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: src/pages/search.jsx:432
|
#: src/pages/search.jsx:507
|
||||||
msgid "No posts found."
|
msgid "No posts found."
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
#: src/pages/search.jsx:476
|
#: src/pages/search.jsx:551
|
||||||
msgid "Enter your search term or paste a URL above to get started."
|
msgid "Enter your search term or paste a URL above to get started."
|
||||||
msgstr ""
|
msgstr ""
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ const focusDeck = () => {
|
||||||
const columns = document.getElementById('columns');
|
const columns = document.getElementById('columns');
|
||||||
if (columns) {
|
if (columns) {
|
||||||
// Focus first column
|
// Focus first column
|
||||||
// columns.querySelector('.deck-container')?.focus?.();
|
columns.querySelector('.deck-container')?.focus?.();
|
||||||
} else {
|
} else {
|
||||||
const modals = document.querySelectorAll('#modal-container > *');
|
const modals = document.querySelectorAll('#modal-container > *');
|
||||||
if (modals?.length) {
|
if (modals?.length) {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue