Permalink
Browse files

Solved keypress stuff for alg practice

This was kindof difficult, and in the end I'm not terribly happy with
the solution, but in the end it does the trick.

Basically, the idea is to attach/detach a global keydown handler when
the alg practice component is shown/hidden. Since the component is being
shown/hidden via `v-show`, and vue doesn't have any event to watch for
when that changes, I decided to instead make a `show` prop that will
both show/hide the component (so I also moved the `div` with `v-show`
inside the component) and can be watched for changes. When changes
occur, I can simply check if the new value was true/false, and
attach/detach a keydown handler accordingly.

It's one of those solutions that I don't really worry about in terms of
robustness, but feels really roundabout and therefor hacky. However, it
gets the job done, and it's relatively straightforward.
  • Loading branch information...
ferris
ferris committed Jun 20, 2016
1 parent c77faf4 commit e0ecdd764eb3b5e39f45566a81816fea52f193cd
Showing with 43 additions and 25 deletions.
  1. +2 −6 src/App.vue
  2. +37 −17 src/components/AlgorithmPractice.vue
  3. +2 −1 src/components/OllPractice.vue
  4. +2 −1 src/components/PllPractice.vue
@@ -23,13 +23,9 @@
<hr />
<div v-show="currentView === 'oll-practice'">
<oll-practice></oll-practice>
</div>
<oll-practice :show="currentView === 'oll-practice'"></oll-practice>
<div v-show="currentView === 'pll-practice'">
<pll-practice></pll-practice>
</div>
<pll-practice :show="currentView === 'pll-practice'"></pll-practice>
<div v-show="currentView === 'algorithms'">
<algorithms></algorithms>
@@ -1,20 +1,22 @@
<template>
<div class="row">
<div class="twelve columns">
<div align="center">
<!--img *ngIf="currentAlgorithm" width="228" height="228" src="images/{{currentAlgorithm?.imageFileName}}" style="-ms-interpolation-mode: nearest-neighbor; image-rendering: -webkit-optimize-contrast; image-rendering: -webkit-crisp-edges; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: pixelated;" /-->
<div v-if="!currentAlgorithm" style="display: inline-block; width: 228px; height: 228px"></div>
<div v-show="show">
<div class="row">
<div class="twelve columns">
<div align="center">
<!--img *ngIf="currentAlgorithm" width="228" height="228" src="images/{{currentAlgorithm?.imageFileName}}" style="-ms-interpolation-mode: nearest-neighbor; image-rendering: -webkit-optimize-contrast; image-rendering: -webkit-crisp-edges; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: pixelated;" /-->
<div v-if="!currentAlgorithm" style="display: inline-block; width: 228px; height: 228px"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="twelve columns">
<div align="center">
<h4>{{displayValue}}</h4>
</div>
<div class="row">
<div class="twelve columns">
<div align="center">
<h4>{{displayValue}}</h4>
</div>
<!--algorithm v-if="showAlgorithm" :algorithm="currentAlgorithm"></algorithm-->
<!--algorithm v-if="showAlgorithm" :algorithm="currentAlgorithm"></algorithm-->
</div>
</div>
</div>
</template>
@@ -27,7 +29,7 @@ export default {
components: {
Algorithm
},
props: ["algorithmType"],
props: ["algorithmType", "show"],
data() {
return {
algorithms: algorithms.filter(
@@ -42,10 +44,28 @@ export default {
interval: 0
}
},
ready() {
console.log("alg practice ready");
console.log(" this.algorithms: " + JSON.stringify(this.algorithms));
console.log(" this.algorithmType: " + this.algorithmType);
methods: {
space() {
console.log("space");
},
keydown(e) {
if (e.keyCode === 32) {
this.space();
}
}
},
watch: {
"show": function(val, oldVal) {
if (val === oldVal) {
return;
}
if (val) {
window.addEventListener("keydown", this.keydown);
} else {
window.removeEventListener("keydown", this.keydown);
}
}
}
}
</script>
@@ -1,5 +1,5 @@
<template>
<algorithm-practice :algorithm-type="Oll"></algorithm-practice>
<algorithm-practice :algorithm-type="oll" :show="show"></algorithm-practice>
</template>
<script>
@@ -9,6 +9,7 @@ export default {
components: {
AlgorithmPractice
},
props: ["show"],
data() {
return {
}
@@ -1,5 +1,5 @@
<template>
<algorithm-practice :algorithm-type="Pll"></algorithm-practice>
<algorithm-practice :algorithm-type="pll" :show="show"></algorithm-practice>
</template>
<script>
@@ -9,6 +9,7 @@ export default {
components: {
AlgorithmPractice
},
props: ["show"],
data() {
return {
}

0 comments on commit e0ecdd7

Please sign in to comment.