ENHANCEMENT: adding focus

This commit is contained in:
Jeroen De Meerleer 2021-12-30 16:34:03 +01:00
parent 8ae179876a
commit 3bd684a99f
2 changed files with 16070 additions and 23 deletions

16080
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -31,9 +31,9 @@
<img src="joker.png" alt="joker"> <img src="joker.png" alt="joker">
</p> </p>
</div> </div>
<button v-on:click="restartTimer" class="timerBtn"><span class="timerBtn-inner"></span></button> <button v-on:click="restartTimer()" v-on:keyup.space="restartTimer" v-on:keyup.enter="restartTimer" ref="timerBtn" class="timerBtn"><span class="timerBtn-inner"></span></button>
<div class="timer-item"> <div class="timer-item">
<p v-if="warning == false" v-bind:class="{ danger: danger == true }" class="timeleft">{{ countDown.toString() }}</p> <p v-if="warning == false" v-bind:class="{ danger: danger == true }" class="timeleft">{{ countDown.toString() }}</p>
<p v-if="warning == true || (typeof warning == 'undefined')" class="timeout"> <p v-if="warning == true || (typeof warning == 'undefined')" class="timeout">
<img src="joker.png" alt="joker"> <img src="joker.png" alt="joker">
<img src="joker.png" alt="joker"> <img src="joker.png" alt="joker">
@ -84,6 +84,9 @@ export default {
sfxNext: this.playsound ? new Audio('sfx/next.wav') : null, sfxNext: this.playsound ? new Audio('sfx/next.wav') : null,
} }
}, },
mounted: function() {
this.$refs['timerBtn'].focus();
},
methods: { methods: {
resetTime: function() { resetTime: function() {
clearInterval(this.interval); clearInterval(this.interval);
@ -92,11 +95,6 @@ export default {
timeleft: function(){ timeleft: function(){
this.countDown--; this.countDown--;
switch (this.countDown) { switch (this.countDown) {
case 6:
if(this.playsound) {
this.sfxWarning = new Audio('sfx/warning.wav');
}
break;
case 5: case 5:
if(this.playsound) { if(this.playsound) {
this.sfxWarning.play(); this.sfxWarning.play();
@ -132,6 +130,7 @@ export default {
clearInterval(this.interval); clearInterval(this.interval);
break; break;
} }
this.$refs['timerBtn'].focus();
}, },
restartTimer: function() { restartTimer: function() {
if(this.wakeLock == null && 'wakeLock' in navigator) { if(this.wakeLock == null && 'wakeLock' in navigator) {