Browse Source

Increment day only when selection not focused

Manual increment will be done only if the selection element is not
focused, otherwise it would be incremented by two days.
master
Schneider 7 years ago
parent
commit
32e40891f4
  1. 28
      src/App.vue

28
src/App.vue

@ -6,7 +6,7 @@
<option v-for="mensa in mensen" :value="mensa.url">{{mensa.name}}</option>
</select>
Wann? <select v-model="when">
Wann? <select v-model="when" id="selWhen">
<option v-for="day in days" :value="day" :key="day">{{dayOfWeek[day]}}</option>
</select>
<router-view></router-view>
@ -30,7 +30,7 @@ export default {
name: 'app',
data() {
return {
menu: {},
selWhen: {},
mensen: Mensen,
days: [1, 2, 3, 4, 5, 6],
dayOfWeek: {
@ -45,10 +45,10 @@ export default {
},
methods: {
previousDay() {
this.when === 1 ? this.when = 6 : this.when--
this.when === 1 ? (this.when = 6) : this.when--
},
nextDay() {
this.when === 6 ? this.when = 1 : this.when++
this.when === 6 ? (this.when = 1) : this.when++
}
},
filters: {
@ -86,26 +86,38 @@ export default {
where: this.where
})
let vm = this
document.onkeydown = (evt) => {
document.onkeydown = evt => {
evt = evt || window.event
switch (evt.keyCode) {
case 37:
if (vm.selWhen !== document.activeElement) {
// increment only if selection is not focused, avoid double execution
vm.previousDay()
}
break
case 39:
if (vm.selWhen !== document.activeElement) {
// increment only if selection is not focused, avoid double execution
vm.nextDay()
break
}
}
}
},
mounted() {
this.selWhen = document.getElementById('selWhen')
}
}
</script>
<style src="./assets/base.css"></style>
<style src="./assets/links.css"></style>
<style src="./assets/base.css">
</style>
<style src="./assets/links.css">
</style>
<style>
#app {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;

Loading…
Cancel
Save