trent
/
fcc-challenges
mirror of https://github.com/TrentSPalmer/fcc-challenges.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
drum-machine/README.md
View File

@ -10,7 +10,6 @@
### TODOS ### TODOS
* add focus() to selectionMenuItems so that you can immediately begin scrolling with arrow keys
* add tip for scrolling selectionMenuItems * add tip for scrolling selectionMenuItems
* make sure metronome continues on volume, sound, or metronome BPM change * make sure metronome continues on volume, sound, or metronome BPM change
* add additional metronome speed values * 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'); drumPadGrid = document.getElementById('drum-pad-grid');
metronomeMenuDisplayed = true; metronomeMenuDisplayed = true;
showKeyMetronomeSelectionMenu(); showKeyMetronomeSelectionMenu();
$('#metronomeSelectionMenu').attr("tabindex",0).focus();
} else if (padsArray.includes(selection)) { } else if (padsArray.includes(selection)) {
padSelectingFor = selection; padSelectingFor = selection;
showMetronomeMenu(); showMetronomeMenu();
$('#metronomeSelectionMenu').attr("tabindex",0).focus();
} else if (selection === 'Metronome Off') { } else if (selection === 'Metronome Off') {
sessionStorage.setItem(padSelectingFor + 'isMetronome',false); sessionStorage.setItem(padSelectingFor + 'isMetronome',false);
metronomeMenuDisplayed = false; metronomeMenuDisplayed = false;
@ -54,6 +56,7 @@ const makeMetronomeSelection = (selection) => {
} else { } else {
padSelectingFor = ''; padSelectingFor = '';
showKeyMetronomeSelectionMenu(); showKeyMetronomeSelectionMenu();
$('#metronomeSelectionMenu').attr("tabindex",0).focus();
} }
} }
}; };
@ -113,9 +116,11 @@ const makeVolumeSelection = (selection) => {
drumPadGrid = document.getElementById('drum-pad-grid'); drumPadGrid = document.getElementById('drum-pad-grid');
volumeMenuDisplayed = true; volumeMenuDisplayed = true;
showKeyVolumeSelectionMenu(); showKeyVolumeSelectionMenu();
$('#volumeSelectionMenu').attr("tabindex",0).focus();
} else if (padsArray.includes(selection)) { } else if (padsArray.includes(selection)) {
padSelectingFor = selection; padSelectingFor = selection;
showVolumeMenu(); showVolumeMenu();
$('#volumeSelectionMenu').attr("tabindex",0).focus();
} else if (volumeMenuArray.includes(selection)) { } else if (volumeMenuArray.includes(selection)) {
sessionStorage.setItem((padSelectingFor + 'volume'),selection); sessionStorage.setItem((padSelectingFor + 'volume'),selection);
volumeMenuDisplayed = false; volumeMenuDisplayed = false;
@ -127,6 +132,7 @@ const makeVolumeSelection = (selection) => {
} else { } else {
padSelectingFor = ''; padSelectingFor = '';
showKeyVolumeSelectionMenu(); showKeyVolumeSelectionMenu();
$('#volumeSelectionMenu').attr("tabindex",0).focus();
} }
} }
}; };
@ -185,6 +191,7 @@ const makeSelection = (selection) => {
drumPadGrid = document.getElementById('drum-pad-grid'); drumPadGrid = document.getElementById('drum-pad-grid');
menuDisplayed = true; menuDisplayed = true;
showKeySelectionMenu(); showKeySelectionMenu();
$('#selectionMenu').attr("tabindex",0).focus();
} else if (padsArray.includes(selection)) { } else if (padsArray.includes(selection)) {
padSelectingFor = selection; padSelectingFor = selection;
showFirstDirMenu(); showFirstDirMenu();
@ -192,10 +199,13 @@ const makeSelection = (selection) => {
fileStringArray.push(selection); fileStringArray.push(selection);
if (fileStringArray.length === 1) { if (fileStringArray.length === 1) {
showSecondDirMenu(); showSecondDirMenu();
$('#selectionMenu').attr("tabindex",0).focus();
} else if (fileStringArray.length === 2) { } else if (fileStringArray.length === 2) {
showThirdDirMenu(); showThirdDirMenu();
$('#selectionMenu').attr("tabindex",0).focus();
} else { } else {
showFourthDirMenu(); showFourthDirMenu();
$('#selectionMenu').attr("tabindex",0).focus();
} }
} else if (selection.substring(selection.length - 4) === '.wav') { } else if (selection.substring(selection.length - 4) === '.wav') {
fileStringArray.push(selection); fileStringArray.push(selection);
@ -211,6 +221,7 @@ const makeSelection = (selection) => {
} else { } else {
padSelectingFor = ''; padSelectingFor = '';
showKeySelectionMenu(); showKeySelectionMenu();
$('#selectionMenu').attr("tabindex",0).focus();
} }
} else if (fileStringArray.length === 1) { } else if (fileStringArray.length === 1) {
fileStringArray = []; fileStringArray = [];
@ -218,9 +229,11 @@ const makeSelection = (selection) => {
} else if (fileStringArray.length === 2) { } else if (fileStringArray.length === 2) {
fileStringArray.pop(); fileStringArray.pop();
showSecondDirMenu(); showSecondDirMenu();
$('#selectionMenu').attr("tabindex",0).focus();
} else if (fileStringArray.length === 3) { } else if (fileStringArray.length === 3) {
fileStringArray.pop(); fileStringArray.pop();
showThirdDirMenu(); showThirdDirMenu();
$('#selectionMenu').attr("tabindex",0).focus();
} }
} }
}; };