linuxserver/Heimdall
1
0
Fork 0
mirror of https://github.com/linuxserver/Heimdall.git synced 2026-02-21 12:10:34 +09:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat: Add basic keyboard navigation

Browse Source
This commit is contained in:
Attila Kerekes
2022-11-22 22:53:07 +01:00
committed by Attila Jozsef Kerekes
parent cc6e47372e
commit 1111bf72d6
7 changed files with 50 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
resources/assets/js/keyBindings.js vendored Normal file
View File

@@ -0,0 +1,35 @@
const focusSearch = event => {
const searchInput = document.querySelector('input[name="q"]');
if (searchInput) {
event.preventDefault();
searchInput.focus();
}
};
const openFirstNonHiddenItem = event => {
if (event.target !== document.querySelector('input[name="q"]')) {
return;
}
const item = document.querySelector('#sortable section.item-container:not([style="display: none;"]) a');
if ('href' in item) {
event.preventDefault();
window.open(item.href);
}
};
const KEY_BINDINGS = {
'/': focusSearch,
'Enter': openFirstNonHiddenItem
};
document.addEventListener('keydown', function (event) {
try {
if (event.key in KEY_BINDINGS) {
KEY_BINDINGS[event.key](event);
}
} catch (e) {
}
});

3
resources/assets/sass/_app.scss
View File

@@ -470,6 +470,9 @@ body {
z-index: 1;
padding-right: 10px;
}
.link:focus {
background-color: rgba(10,10,10,.4);
}
.title {
font-size: 16px;
}

12
resources/views/layouts/app.blade.php
View File

@@ -98,16 +98,16 @@
@if(Route::is('dash') || Route::is('tags.show'))
<a id="config-button" class="config" href=""><i class="fas fa-exchange"></i></a>
<a id="config-button" class="config" href="" title="Configuration"><i class="fas fa-exchange"></i></a>
@endif
<a id="dash" class="config" href="{{ route('dash', []) }}"><i class="fas fa-th"></i></a>
<a id="dash" class="config" href="{{ route('dash', []) }}" title="Dashboard"><i class="fas fa-th"></i></a>
@if($current_user->id === 1)
<a id="users" class="config" href="{{ route('users.index', []) }}"><i class="fas fa-user"></i></a>
<a id="users" class="config" href="{{ route('users.index', []) }}" title="Users"><i class="fas fa-user"></i></a>
@endif
<a id="items" class="config" href="{{ route('items.index', []) }}"><i class="fas fa-list"></i></a>
<a id="folder" class="config" href="{{ route('tags.index', []) }}"><i class="fas fa-tag"></i></a>
<a id="settings" class="config" href="{{ route('settings.index', []) }}"><i class="fas fa-cogs"></i></a>
<a id="items" class="config" href="{{ route('items.index', []) }}" title="Items"><i class="fas fa-list"></i></a>
<a id="folder" class="config" href="{{ route('tags.index', []) }}" title="Tags"><i class="fas fa-tag"></i></a>
<a id="settings" class="config" href="{{ route('settings.index', []) }}" title="Settings"><i class="fas fa-cogs"></i></a>
</div>
</main>