mirror of
https://github.com/SuperBFG7/ympd
synced 2024-12-24 18:10:26 +00:00
Fix: improve keyboard navigation of main menu
This commit is contained in:
parent
db8b0a1d24
commit
a70ab4e48c
20
dist/htdocs/js/bootstrap-native-v4.js
vendored
20
dist/htdocs/js/bootstrap-native-v4.js
vendored
@ -826,9 +826,17 @@
|
||||
menuItems = (function(){
|
||||
var set = menu[children], newSet = [];
|
||||
for ( var i=0; i<set[length]; i++ ){
|
||||
set[i][children][length] && (set[i][children][0].tagName === 'A' && newSet[push](set[i][children][0]));
|
||||
//set[i][children][length] && (set[i][children][0].tagName === 'A' && newSet[push](set[i][children][0]));
|
||||
//start patch: push all child elements, not only first
|
||||
if (set[i][children][length]){
|
||||
for ( var j=0; j<set[i][children][length]; j++ ){
|
||||
set[i][children][j].tagName === 'A' && newSet[push](set[i][children][j]);
|
||||
}
|
||||
}
|
||||
//end patch
|
||||
set[i].tagName === 'A' && newSet[push](set[i]);
|
||||
}
|
||||
console.log(newSet);
|
||||
return newSet;
|
||||
})(),
|
||||
|
||||
@ -874,9 +882,17 @@
|
||||
isMenuItem = activeItem[parentNode] === menu || activeItem[parentNode][parentNode] === menu;
|
||||
|
||||
if ( isMenuItem || isSameElement ) { // navigate up | down
|
||||
idx = isSameElement ? 0
|
||||
/* idx = isSameElement ? 0
|
||||
: key === 38 ? (idx>1?idx-1:0)
|
||||
: key === 40 ? (idx<menuItems[length]-1?idx+1:idx) : idx;
|
||||
*/
|
||||
//start patch: skip hidden elements
|
||||
do {
|
||||
idx = isSameElement ? 0
|
||||
: key === 38 ? (idx>1?idx-1:0)
|
||||
: key === 40 ? (idx<menuItems[length]-1?idx+1:idx) : idx;
|
||||
} while ( !menuItems[idx].offsetHeight )
|
||||
//end patch
|
||||
menuItems[idx] && setFocus(menuItems[idx]);
|
||||
}
|
||||
if ( (menuItems[length] && isMenuItem // menu has items
|
||||
|
@ -19,10 +19,10 @@
|
||||
<header>
|
||||
<nav class="navbar navbar-expand navbar-dark fixed-top bg-dark">
|
||||
<div class="dropdown col-auto mr-auto pl-0">
|
||||
<a class="dropdown-toggle navbar-brand" data-toggle="dropdown" href="#" id="mainMenu">
|
||||
<a class="dropdown-toggle navbar-brand" href="#" id="mainMenu">
|
||||
<span class="material-icons header-logo">play_circle_outline</span>myMPD
|
||||
</a>
|
||||
<div class="dropdown-menu bg-dark">
|
||||
<div class="dropdown-menu bg-dark" id="mainMenuDropdown">
|
||||
<a class="dropdown-item text-light bg-dark" href="#" data-href='{"cmd": "showAddToPlaylist", "options": ["stream"]}'>Add Stream</a>
|
||||
<a id="navDBupdate" class="dropdown-item text-light bg-dark" data-toggle="collapse" href="#menu-dbupdate"><span class="material-icons material-icons-left">keyboard_arrow_right</span>Update</a>
|
||||
<div class="collapse" id="menu-dbupdate">
|
||||
|
@ -94,7 +94,7 @@ var modalUpdateDB = new Modal(document.getElementById('modalUpdateDB'));
|
||||
var modalSaveSmartPlaylist = new Modal(document.getElementById('modalSaveSmartPlaylist'));
|
||||
var modalDeletePlaylist = new Modal(document.getElementById('modalDeletePlaylist'));
|
||||
|
||||
var dropdownMainMenu = new Dropdown(document.getElementById('mainMenu'));
|
||||
var dropdownMainMenu;// = new Dropdown(document.getElementById('mainMenu'));
|
||||
var dropdownVolumeMenu = new Dropdown(document.getElementById('volumeMenu'));
|
||||
|
||||
var collapseDBupdate = new Collapse(document.getElementById('navDBupdate'));
|
||||
@ -329,7 +329,7 @@ function appInit() {
|
||||
icon.innerText = 'keyboard_arrow_right';
|
||||
}, false);
|
||||
|
||||
document.addEventListener('keyup', function(event) {
|
||||
/* document.addEventListener('keyup', function(event) {
|
||||
if (event.which != 13)
|
||||
return;
|
||||
if (event.target.nodeName == 'A') {
|
||||
@ -338,7 +338,7 @@ function appInit() {
|
||||
event.target.click();
|
||||
}
|
||||
}, false);
|
||||
|
||||
*/
|
||||
document.getElementById('volumeMenu').parentNode.addEventListener('show.bs.dropdown', function () {
|
||||
sendAPI({"cmd": "MPD_API_PLAYER_OUTPUT_LIST"}, parseOutputs);
|
||||
});
|
||||
@ -643,12 +643,14 @@ function appInit() {
|
||||
cmd = keymap.key[event.which];
|
||||
|
||||
if (cmd && typeof window[cmd.cmd] === 'function') {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
if (cmd.cmd == 'sendAPI')
|
||||
sendAPI(... cmd.options);
|
||||
else
|
||||
window[cmd.cmd](... cmd.options);
|
||||
window[cmd.cmd](... cmd.options);
|
||||
}
|
||||
event.preventDefault();
|
||||
|
||||
}, false);
|
||||
|
||||
if ('serviceWorker' in navigator && document.URL.substring(0, 5) == 'https') {
|
||||
@ -1137,18 +1139,21 @@ function parseSettings(obj) {
|
||||
app.apps.Browse.tabs.Database.views[settings.tags[i]] = { "state": "0/-/", "scrollPos": 0 };
|
||||
|
||||
if (settings.featSyscmds) {
|
||||
var mainMenuDropdown = document.getElementById('mainMenuDropdown');
|
||||
var syscmdsList = '';
|
||||
var syscmdsListLen = settings.syscmds.length;
|
||||
if (syscmdsListLen > 0) {
|
||||
syscmdsList = '<div class="dropdown-divider"></div>';
|
||||
for (var i = 0; i < syscmdsListLen; i++)
|
||||
for (var i = 0; i < syscmdsListLen; i++) {
|
||||
syscmdsList += '<a class="dropdown-item text-light bg-dark" href="#" data-href=\'{"cmd": "execSyscmd", "options": ["' +
|
||||
settings.syscmds[i] + '"]}\'>' + settings.syscmds[i] + '</a>';
|
||||
}
|
||||
}
|
||||
document.getElementById('syscmds').innerHTML = syscmdsList;
|
||||
}
|
||||
else
|
||||
document.getElementById('syscmds').innerHTML = '';
|
||||
dropdownMainMenu = new Dropdown(document.getElementById('mainMenu'));
|
||||
|
||||
setCols('Queue');
|
||||
setCols('Search');
|
||||
|
Loading…
Reference in New Issue
Block a user