Mirrors/gitea
0
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-02-22 15:25:05 +01:00
Code Issues Activity

refactor(shortcut): Use declarative data attributes for keyboard shortcuts

Browse Source 
Instead of having JavaScript code guess which elements exist on a page,
elements now declare their keyboard shortcuts via data-global-keyboard-shortcut
attribute. This makes it easier to add new shortcuts and follows Gitea's
existing patterns for data-global-init and data-global-click.
This commit is contained in:
micahkepe 2026-01-20 18:20:37 -08:00 committed by Micah Kepe
parent 7226ecde9a
commit 663612cdab
5 changed files with 91 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
templates/repo/home_sidebar_top.tmpl
View File

@ -1,7 +1,7 @@
<div class="repo-home-sidebar-top">
<form class="ignore-dirty tw-flex tw-flex-1" action="{{.RepoLink}}/search" method="get">
<div class="ui small action input tw-flex-1 repo-code-search-input-wrapper">
<input name="q" size="10" placeholder="{{ctx.Locale.Tr "search.code_kind"}}" class="code-search-input">
<input name="q" size="10" placeholder="{{ctx.Locale.Tr "search.code_kind"}}" class="code-search-input" data-global-keyboard-shortcut="s" data-global-init="initRepoCodeSearchShortcut">
<kbd class="repo-search-shortcut-hint">S</kbd>
{{template "shared/search/button"}}
</div>

1
web_src/js/components/RepoFileSearch.vue
View File

@ -150,6 +150,7 @@ watch([searchQuery, filteredFiles], async () => {
<input
ref="searchInput" :placeholder="placeholder" autocomplete="off"
role="combobox" aria-autocomplete="list" :aria-expanded="searchQuery ? 'true' : 'false'"
data-global-keyboard-shortcut="t"
@input="handleSearchInput" @keydown="handleKeyDown"
@focus="isInputFocused = true" @blur="isInputFocused = false"
>

99
web_src/js/features/repo-shortcuts.test.ts
View File

@ -1,97 +1,34 @@
// Copyright 2026 The Gitea Authors. All rights reserved.
// SPDX-License-Identifier: MIT
import {initRepoShortcuts} from './repo-shortcuts.ts';
import {initRepoCodeSearchShortcut} from './repo-shortcuts.ts';
describe('Repository Keyboard Shortcuts', () => {
let fileSearchInput: HTMLInputElement;
describe('Repository Code Search Shortcut Hint', () => {
let codeSearchInput: HTMLInputElement;
let codeSearchHint: HTMLElement;
beforeEach(() => {
// Set up DOM structure
// Set up DOM structure for code search
document.body.innerHTML = `
<div class="repo-file-search-container">
<div class="repo-file-search-input-wrapper">
<input type="text" placeholder="Go to file">
<kbd class="repo-search-shortcut-hint">T</kbd>
</div>
</div>
<div class="repo-home-sidebar-top">
<div class="repo-code-search-input-wrapper">
<input name="q" class="code-search-input" placeholder="Search code">
<input name="q" class="code-search-input" placeholder="Search code" data-global-keyboard-shortcut="s" data-global-init="initRepoCodeSearchShortcut">
<kbd class="repo-search-shortcut-hint">S</kbd>
</div>
</div>
`;
fileSearchInput = document.querySelector('.repo-file-search-container input')!;
codeSearchInput = document.querySelector('.code-search-input')!;
codeSearchHint = document.querySelector('.repo-code-search-input-wrapper .repo-search-shortcut-hint')!;
initRepoShortcuts();
// Initialize the shortcut hint functionality directly
initRepoCodeSearchShortcut(codeSearchInput);
});
afterEach(() => {
document.body.innerHTML = '';
});
test('T key focuses file search input', () => {
const event = new KeyboardEvent('keydown', {key: 't', bubbles: true});
document.dispatchEvent(event);
expect(document.activeElement).toBe(fileSearchInput);
});
test('Shift+T (uppercase T) focuses file search input', () => {
const event = new KeyboardEvent('keydown', {key: 'T', bubbles: true});
document.dispatchEvent(event);
expect(document.activeElement).toBe(fileSearchInput);
});
test('S key focuses code search input', () => {
const event = new KeyboardEvent('keydown', {key: 's', bubbles: true});
document.dispatchEvent(event);
expect(document.activeElement).toBe(codeSearchInput);
});
test('Shortcuts do not trigger when typing in input', () => {
// Focus on an input field first
const otherInput = document.createElement('input');
document.body.append(otherInput);
otherInput.focus();
const event = new KeyboardEvent('keydown', {key: 't', bubbles: true});
Object.defineProperty(event, 'target', {value: otherInput});
document.dispatchEvent(event);
// File search should not be focused because we're already in an input
expect(document.activeElement).toBe(otherInput);
});
test('Shortcuts do not trigger with Ctrl modifier', () => {
const event = new KeyboardEvent('keydown', {key: 't', ctrlKey: true, bubbles: true});
document.dispatchEvent(event);
expect(document.activeElement).not.toBe(fileSearchInput);
});
test('Shortcuts do not trigger with Meta modifier', () => {
const event = new KeyboardEvent('keydown', {key: 's', metaKey: true, bubbles: true});
document.dispatchEvent(event);
expect(document.activeElement).not.toBe(codeSearchInput);
});
test('Shortcuts do not trigger with Alt modifier', () => {
const event = new KeyboardEvent('keydown', {key: 't', altKey: true, bubbles: true});
document.dispatchEvent(event);
expect(document.activeElement).not.toBe(fileSearchInput);
});
test('Code search hint hides when input has value', () => {
// Initially visible
expect(codeSearchHint.style.display).toBe('');
@ -118,16 +55,20 @@ describe('Repository Keyboard Shortcuts', () => {
expect(codeSearchHint.style.display).toBe('');
});
test('Escape key blurs code search input', () => {
// Focus the code search input first
test('Escape key clears and blurs code search input', () => {
// Set a value and focus the input
codeSearchInput.value = 'test';
codeSearchInput.dispatchEvent(new Event('input'));
codeSearchInput.focus();
expect(document.activeElement).toBe(codeSearchInput);
expect(codeSearchInput.value).toBe('test');
// Press Escape directly on the input (the input has its own keydown handler)
// Press Escape directly on the input
const event = new KeyboardEvent('keydown', {key: 'Escape', bubbles: true});
codeSearchInput.dispatchEvent(event);
// Should no longer be focused
// Value should be cleared and input should be blurred
expect(codeSearchInput.value).toBe('');
expect(document.activeElement).not.toBe(codeSearchInput);
});
@ -149,4 +90,16 @@ describe('Repository Keyboard Shortcuts', () => {
// Should be visible again
expect(codeSearchHint.style.display).toBe('');
});
test('Change event also updates hint visibility', () => {
// Initially visible
expect(codeSearchHint.style.display).toBe('');
// Set value via change event (e.g., browser autofill)
codeSearchInput.value = 'autofilled';
codeSearchInput.dispatchEvent(new Event('change'));
// Should be hidden
expect(codeSearchHint.style.display).toBe('none');
});
});

99
web_src/js/features/repo-shortcuts.ts
View File

@ -1,76 +1,47 @@
// Copyright 2026 The Gitea Authors. All rights reserved.
// SPDX-License-Identifier: MIT
import {registerGlobalInitFunc} from '../modules/observer.ts';
/**
* Initialize global keyboard shortcuts for repository pages.
* - 'T' key: Focus the "Go to file" search input
* - 'S' key: Focus the "Search code" input
*
* Shortcuts are disabled when the user is typing in an input field,
* textarea, or contenteditable element.
* Initialize the code search input with shortcut hint visibility management.
* The shortcut hint is hidden when the input has a value or is focused.
* Pressing Escape clears the input and blurs it.
*/
export function initRepoShortcuts(): void {
// Initialize keyboard shortcut listeners
document.addEventListener('keydown', (e: KeyboardEvent) => {
// Don't trigger shortcuts when typing in input fields
const target = e.target as HTMLElement;
if (target instanceof HTMLElement && target.matches('input, textarea, select, [contenteditable="true"]')) {
return;
}
export function initRepoCodeSearchShortcut(el: HTMLInputElement): void {
const shortcutHint = el.parentElement?.querySelector<HTMLElement>('.repo-search-shortcut-hint');
if (!shortcutHint) return;
// Don't trigger shortcuts when modifier keys are pressed
if (e.ctrlKey || e.metaKey || e.altKey) {
return;
}
let isFocused = false;
if (e.key === 't' || e.key === 'T') {
const fileSearchInput = document.querySelector<HTMLInputElement>('.repo-file-search-container input');
if (fileSearchInput) {
e.preventDefault();
fileSearchInput.focus();
}
} else if (e.key === 's' || e.key === 'S') {
const codeSearchInput = document.querySelector<HTMLInputElement>('.repo-home-sidebar-top input[name="q"], .code-search-input');
if (codeSearchInput) {
e.preventDefault();
codeSearchInput.focus();
}
}
const updateHintVisibility = () => {
shortcutHint.style.display = (el.value || isFocused) ? 'none' : '';
};
// Check initial value (e.g., from browser autofill or back navigation)
updateHintVisibility();
el.addEventListener('input', updateHintVisibility);
el.addEventListener('change', updateHintVisibility);
el.addEventListener('focus', () => {
isFocused = true;
updateHintVisibility();
});
el.addEventListener('blur', () => {
isFocused = false;
updateHintVisibility();
});
// Toggle shortcut hint visibility for code search input based on input value and focus state
const codeSearchInput = document.querySelector<HTMLInputElement>('.code-search-input');
if (codeSearchInput) {
const shortcutHint = codeSearchInput.parentElement?.querySelector<HTMLElement>('.repo-search-shortcut-hint');
if (shortcutHint) {
let isFocused = false;
const updateHintVisibility = () => {
shortcutHint.style.display = (codeSearchInput.value || isFocused) ? 'none' : '';
};
// Check initial value (e.g., from browser autofill or back navigation)
// Handle Escape key to clear and blur the code search input
el.addEventListener('keydown', (e: KeyboardEvent) => {
if (e.key === 'Escape') {
el.value = '';
updateHintVisibility();
codeSearchInput.addEventListener('input', updateHintVisibility);
codeSearchInput.addEventListener('change', updateHintVisibility);
codeSearchInput.addEventListener('focus', () => {
isFocused = true;
updateHintVisibility();
});
codeSearchInput.addEventListener('blur', () => {
isFocused = false;
updateHintVisibility();
});
// Handle Escape key to clear and blur the code search input
codeSearchInput.addEventListener('keydown', (e: KeyboardEvent) => {
if (e.key === 'Escape') {
codeSearchInput.value = '';
updateHintVisibility();
codeSearchInput.blur();
}
});
el.blur();
}
}
});
}
export function initRepoShortcuts(): void {
registerGlobalInitFunc('initRepoCodeSearchShortcut', initRepoCodeSearchShortcut);
}

28
web_src/js/modules/observer.ts
View File

@ -64,6 +64,34 @@ function attachGlobalEvents() {
if (!func) throw new Error(`Global event function "click:${funcName}" not found`);
func(elem, e);
});
// add global "[data-global-keyboard-shortcut]" event handler
// Elements declare their keyboard shortcuts via data-global-keyboard-shortcut attribute.
// When a matching key is pressed, the element is focused (for inputs) or clicked (for buttons/links).
document.addEventListener('keydown', (e: KeyboardEvent) => {
// Don't trigger shortcuts when typing in input fields
const target = e.target as HTMLElement;
if (target.matches('input, textarea, select, [contenteditable="true"]')) {
return;
}
// Don't trigger shortcuts when modifier keys are pressed
if (e.ctrlKey || e.metaKey || e.altKey) {
return;
}
// Find element with matching shortcut (case-insensitive)
const key = e.key.toLowerCase();
const elem = document.querySelector<HTMLElement>(`[data-global-keyboard-shortcut="${key}"]`);
if (!elem) return;
e.preventDefault();
if (elem.matches('input, textarea, select')) {
elem.focus();
} else {
elem.click();
}
});
}
export function initGlobalSelectorObserver(perfTracer: InitPerformanceTracer | null): void {