Today I made sure the left and right arrows could be used to advance the animation forwards or backwards by the current increment. I also highlighted the increment on the buttons used to set it.
I also learned that the slider’s oninput method calls the associated function after every change while its onchange method calls the associated function only after the mouse move is complete. Even using the slider’s oninput method, however, the added keypress processing is needed to make moving the slider with the arrow keys do anything.
Also, the arrow keys work to update the slider position and animation whether the slider has focus or not. That could turn out to be a problem is multiple items might be affected by the arrow keys, or if elements that might themselves respond to the arrow keys fail to absorb them when they have focus.
This code processes the arrow keys.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
document.onkeydown = checkKey; function checkKey(e) { e = e || window.event; //up 38 down 40 if (e.keyCode == '37') { //left arrow if (animationStep > 0) { animationStep -= Math.abs(animationIncrement); if (animationStep < 0) { animationStep = 0; } doSomeStuff(animationStep); bcUpdateSlider(animationStep); } } else if (e.keyCode == '39') { //right arrow if (animationStep < bcFinalActivity) { animationStep += Math.abs(animationIncrement); if (animationStep > bcFinalActivity) { animationStep = bcFinalActivity; } doSomeStuff(animationStep); bcUpdateSlider(animationStep); } } } |
This noodleage updates the highlighting on the speed buttons.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
var spdBtn1 = document.getElementById("speed_button_1"); var spdBtn2 = document.getElementById("speed_button_2"); var spdBtn3 = document.getElementById("speed_button_3"); var spdBtn4 = document.getElementById("speed_button_4"); function highlightIncrementButton(border) { switch (Math.abs(animationIncrement)) { case 1: spdBtn1.style.border = border; break; case 2: spdBtn2.style.border = border; break; case 3: spdBtn3.style.border = border; break; case 4: spdBtn4.style.border = border; break; default : alert("this shouldn't happpen"); } } highlightIncrementButton("1px solid black"); function setSpeed(speed) { highlightIncrementButton("0px"); var mult = 1; if (animationIncrement < 0) { mult = -1; } animationIncrement = speed * mult; highlightIncrementButton("1px solid black"); } |
Here is the relevant HTML. Note that using the span allows the border to be placed around the button text and not the entire button.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!--input type="range" id="animationSlider" min="0" onchange="doSomeStuffSetStep(this.value)"/--> <input type="range" id="animationSlider" min="0" oninput="doSomeStuffSetStep(this.value)"/> <button class="animation_button" onclick="rerunClick()" >Rerun the Animation</button> <button class="animation_button" onclick="backwardsClick()" >Run the Animation Backwards</button> <button class="animation_button" onclick="pauseClick()" >Pause the Animation</button> <button class="animation_button" onclick="continueClick()" >Continue the Animation</button> <div class="speed_buttons"> <p class="speedLabel">Animation Speed:</p> <button class="speed_button" onclick="setSpeed(1)" ><span id="speed_button_1"> 1 </span></button> <button class="speed_button" onclick="setSpeed(2)" ><span id="speed_button_2"> 2 </span></button> <button class="speed_button" onclick="setSpeed(3)" ><span id="speed_button_3"> 3 </span></button> <button class="speed_button" onclick="setSpeed(4)" ><span id="speed_button_4"> 4 </span></button> </div> |
Just for kicks and giggles, I’ve placed the same animation in twice (in separate frames) to get an idea of the scope of processing arrow key inputs. It turns out that processing of keys is limited to each frame individually, so a) the state of each frame is independent and b) a frame has to have focus in order to process keystrokes. The animations also pause and continue independently depending on whether they are visible or have been scrolled out of view.