trent/fcc-challenges
1
0
Fork 0
mirror of https://github.com/TrentSPalmer/fcc-challenges.git synced 2024-11-21 11:21:30 -08:00
Code Issues Projects Releases Wiki Activity

drum-machine add notification that selectionMenu is focused

Browse Source
This commit is contained in:
Trent Palmer 2020-05-29 06:46:24 -07:00
parent 6d81e5070e
commit c17a49fbbe
3 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
drum-machine/README.md
View File

@ -10,6 +10,6 @@
### TODOS
* add tip for scrolling selectionMenuItems
* make sure metronome continues on volume, sound, or metronome BPM change
* add additional metronome speed values
* update bpm in drumpad when metronome playing

8
drum-machine/drumMachine.css
View File

@ -65,6 +65,10 @@ body {
margin-top: -10px;
}
#menuScrollTip {
padding-top: 20px;
}
#display-middle {
flex-basis: 62%;
width: 100%;
@ -348,7 +352,7 @@ i.fa-volume-up {
margin-right: auto;
}
#select-volume, #display-middle-right-f, #display-middle-right-g, #volumeTip {
#select-volume, #display-middle-right-f, #display-middle-right-g, #volumeTip, #menuScrollTip {
display: none;
}
@ -437,7 +441,7 @@ i.fa-volume-up {
margin-right: auto;
}
#select-volume, #display-middle-right-f, #display-middle-right-g, #volumeTip {
#select-volume, #display-middle-right-f, #display-middle-right-g, #volumeTip, #menuScrollTip {
display: none;
}

14
drum-machine/makeSelection.js
View File

@ -33,6 +33,7 @@ const makeMetronomeSelection = (selection) => {
metronomeMenuDisplayed = true;
showKeyMetronomeSelectionMenu();
$('#metronomeSelectionMenu').attr("tabindex",0).focus();
$('#display-top').append('<p id="menuScrollTip">scroll menu with arrow keys or PgUpDn, "esc" key to go back</p>');
} else if (padsArray.includes(selection)) {
padSelectingFor = selection;
showMetronomeMenu();
@ -41,18 +42,21 @@ const makeMetronomeSelection = (selection) => {
sessionStorage.setItem(padSelectingFor + 'isMetronome',false);
metronomeMenuDisplayed = false;
$('#display-middle-left-b').html((drumPadGrid));
$('#menuScrollTip').remove();
makeAudioControl(padSelectingFor);
} else if (selection.includes('bpm')) {
sessionStorage.setItem(padSelectingFor + 'metronomeTempo',selection);
sessionStorage.setItem(padSelectingFor + 'isMetronome',true);
metronomeMenuDisplayed = false;
$('#display-middle-left-b').html((drumPadGrid));
$('#menuScrollTip').remove();
makeAudioControl(padSelectingFor);
makeMetronomeIcons(padSelectingFor);
} else if (selection === '( cancel -- back )') {
if (padSelectingFor === '') {
metronomeMenuDisplayed = false;
$('#display-middle-left-b').html((drumPadGrid));
$('#menuScrollTip').remove();
} else {
padSelectingFor = '';
showKeyMetronomeSelectionMenu();
@ -117,6 +121,7 @@ const makeVolumeSelection = (selection) => {
volumeMenuDisplayed = true;
showKeyVolumeSelectionMenu();
$('#volumeSelectionMenu').attr("tabindex",0).focus();
$('#display-top').append('<p id="menuScrollTip">scroll menu with arrow keys or PgUpDn, "esc" key to go back</p>');
} else if (padsArray.includes(selection)) {
padSelectingFor = selection;
showVolumeMenu();
@ -125,10 +130,12 @@ const makeVolumeSelection = (selection) => {
sessionStorage.setItem((padSelectingFor + 'volume'),selection);
volumeMenuDisplayed = false;
$('#display-middle-left-b').html((drumPadGrid));
$('#menuScrollTip').remove();
} else if (selection === '( cancel -- back )') {
if (padSelectingFor === '') {
volumeMenuDisplayed = false;
$('#display-middle-left-b').html((drumPadGrid));
$('#menuScrollTip').remove();
} else {
padSelectingFor = '';
showKeyVolumeSelectionMenu();
@ -192,13 +199,16 @@ const makeSelection = (selection) => {
menuDisplayed = true;
showKeySelectionMenu();
$('#selectionMenu').attr("tabindex",0).focus();
$('#display-top').append('<p id="menuScrollTip">scroll menu with arrow keys or PgUpDn, "esc" key to go back</p>');
} else if (padsArray.includes(selection)) {
padSelectingFor = selection;
showFirstDirMenu();
$('#menuScrollTip').remove();
} else if (selection.substring(selection.length - 4) !== '.wav' && selection !== '( cancel -- back )') {
fileStringArray.push(selection);
if (fileStringArray.length === 1) {
showSecondDirMenu();
$('#display-top').append('<p id="menuScrollTip">scroll menu with arrow keys or PgUpDn, "esc" key to go back</p>');
$('#selectionMenu').attr("tabindex",0).focus();
} else if (fileStringArray.length === 2) {
showThirdDirMenu();
@ -212,20 +222,24 @@ const makeSelection = (selection) => {
sessionStorage.setItem(padSelectingFor,fileStringArray.join('/'));
menuDisplayed = false;
$('#display-middle-left-b').html((drumPadGrid));
$('#menuScrollTip').remove();
makeAudioControl(padSelectingFor);
} else if (selection === '( cancel -- back )') {
if (fileStringArray.length === 0) {
if (padSelectingFor === '') {
menuDisplayed = false;
$('#display-middle-left-b').html((drumPadGrid));
$('#menuScrollTip').remove();
} else {
padSelectingFor = '';
showKeySelectionMenu();
$('#selectionMenu').attr("tabindex",0).focus();
$('#display-top').append('<p id="menuScrollTip">scroll menu with arrow keys or PgUpDn, "esc" key to go back</p>');
}
} else if (fileStringArray.length === 1) {
fileStringArray = [];
showFirstDirMenu();
$('#menuScrollTip').remove();
} else if (fileStringArray.length === 2) {
fileStringArray.pop();
showSecondDirMenu();