aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--app.js29
-rw-r--r--index.html2
2 files changed, 30 insertions, 1 deletions
diff --git a/app.js b/app.js
index 6c83074..36508ab 100644
--- a/app.js
+++ b/app.js
@@ -85,6 +85,35 @@ const app = new Vue({
85 toggleMenu: function() { 85 toggleMenu: function() {
86 this.showMenu = !this.showMenu; 86 this.showMenu = !this.showMenu;
87 } 87 }
88 },
89 mounted() {
90 function isSmallScreen() {
91 return window.matchMedia('screen and (max-width: 1023px)').matches;
92 }
93 this._keyListener = function(e) {
94 if (e.key === '/') {
95 if (isSmallScreen()) {
96 this.showMenu = true;
97 }
98 Vue.nextTick(() => {
99 this.$refs.search.focus();
100 });
101
102 e.preventDefault();
103 }
104 if (e.key === 'Escape') {
105 this.filter = '';
106 this.$refs.search.blur();
107 if (isSmallScreen()) {
108 this.showMenu = false;
109 }
110 }
111 }
112
113 document.addEventListener('keydown', this._keyListener.bind(this));
114 },
115 beforeDestroy() {
116 document.removeEventListener('keydown', this._keyListener);
88 } 117 }
89}); 118});
90 119
diff --git a/index.html b/index.html
index 9c1b531..85c9b78 100644
--- a/index.html
+++ b/index.html
@@ -59,7 +59,7 @@
59 :class="['fas', vlayout ? 'fa-list' : 'fa-columns']"></i></a> 59 :class="['fas', vlayout ? 'fa-list' : 'fa-columns']"></i></a>
60 <div class="search-bar"> 60 <div class="search-bar">
61 <label for="search" class="search-label"></label> 61 <label for="search" class="search-label"></label>
62 <input type="text" id="search" v-model="filter" /> 62 <input type="text" id="search" ref="search" v-model="filter" />
63 </div> 63 </div>
64 </div> 64 </div>
65 </div> 65 </div>