trent/fcc-challenges
1
0
Fork 0
mirror of https://github.com/TrentSPalmer/fcc-challenges.git synced 2025-11-03 19:58:24 -08:00
Code Issues Projects Releases Wiki Activity

drum-machine add focus() to selectionMenuItems so you can immediately scroll with arrow keys

Browse Source
This commit is contained in:
Trent Palmer
2020-05-27 17:14:27 -07:00
parent 53ecad662b
commit 6d81e5070e
2 changed files with 13 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
drum-machine/README.md
View File

@@ -10,7 +10,6 @@
### TODOS
* add focus() to selectionMenuItems so that you can immediately begin scrolling with arrow keys
* add tip for scrolling selectionMenuItems
* make sure metronome continues on volume, sound, or metronome BPM change
* add additional metronome speed values

13
drum-machine/makeSelection.js
View File

@@ -32,9 +32,11 @@ const makeMetronomeSelection = (selection) => {
drumPadGrid = document.getElementById('drum-pad-grid');
metronomeMenuDisplayed = true;
showKeyMetronomeSelectionMenu();
$('#metronomeSelectionMenu').attr("tabindex",0).focus();
} else if (padsArray.includes(selection)) {
padSelectingFor = selection;
showMetronomeMenu();
$('#metronomeSelectionMenu').attr("tabindex",0).focus();
} else if (selection === 'Metronome Off') {
sessionStorage.setItem(padSelectingFor + 'isMetronome',false);
metronomeMenuDisplayed = false;
@@ -54,6 +56,7 @@ const makeMetronomeSelection = (selection) => {
} else {
padSelectingFor = '';
showKeyMetronomeSelectionMenu();
$('#metronomeSelectionMenu').attr("tabindex",0).focus();
}
}
};
@@ -113,9 +116,11 @@ const makeVolumeSelection = (selection) => {
drumPadGrid = document.getElementById('drum-pad-grid');
volumeMenuDisplayed = true;
showKeyVolumeSelectionMenu();
$('#volumeSelectionMenu').attr("tabindex",0).focus();
} else if (padsArray.includes(selection)) {
padSelectingFor = selection;
showVolumeMenu();
$('#volumeSelectionMenu').attr("tabindex",0).focus();
} else if (volumeMenuArray.includes(selection)) {
sessionStorage.setItem((padSelectingFor + 'volume'),selection);
volumeMenuDisplayed = false;
@@ -127,6 +132,7 @@ const makeVolumeSelection = (selection) => {
} else {
padSelectingFor = '';
showKeyVolumeSelectionMenu();
$('#volumeSelectionMenu').attr("tabindex",0).focus();
}
}
};
@@ -185,6 +191,7 @@ const makeSelection = (selection) => {
drumPadGrid = document.getElementById('drum-pad-grid');
menuDisplayed = true;
showKeySelectionMenu();
$('#selectionMenu').attr("tabindex",0).focus();
} else if (padsArray.includes(selection)) {
padSelectingFor = selection;
showFirstDirMenu();
@@ -192,10 +199,13 @@ const makeSelection = (selection) => {
fileStringArray.push(selection);
if (fileStringArray.length === 1) {
showSecondDirMenu();
$('#selectionMenu').attr("tabindex",0).focus();
} else if (fileStringArray.length === 2) {
showThirdDirMenu();
$('#selectionMenu').attr("tabindex",0).focus();
} else {
showFourthDirMenu();
$('#selectionMenu').attr("tabindex",0).focus();
}
} else if (selection.substring(selection.length - 4) === '.wav') {
fileStringArray.push(selection);
@@ -211,6 +221,7 @@ const makeSelection = (selection) => {
} else {
padSelectingFor = '';
showKeySelectionMenu();
$('#selectionMenu').attr("tabindex",0).focus();
}
} else if (fileStringArray.length === 1) {
fileStringArray = [];
@@ -218,9 +229,11 @@ const makeSelection = (selection) => {
} else if (fileStringArray.length === 2) {
fileStringArray.pop();
showSecondDirMenu();
$('#selectionMenu').attr("tabindex",0).focus();
} else if (fileStringArray.length === 3) {
fileStringArray.pop();
showThirdDirMenu();
$('#selectionMenu').attr("tabindex",0).focus();
}
}
};