From 6eba37a370cdd3c0275d49fa693ab189d8ab8ff2 Mon Sep 17 00:00:00 2001 From: Jozef Selesi Date: Thu, 19 Mar 2020 19:36:24 +0000 Subject: Add keyboard shortcuts for searching. / starts searching. Escape clears the search terms. --- app.js | 29 +++++++++++++++++++++++++++++ index.html | 2 +- 2 files changed, 30 insertions(+), 1 deletion(-) 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({ toggleMenu: function() { this.showMenu = !this.showMenu; } + }, + mounted() { + function isSmallScreen() { + return window.matchMedia('screen and (max-width: 1023px)').matches; + } + this._keyListener = function(e) { + if (e.key === '/') { + if (isSmallScreen()) { + this.showMenu = true; + } + Vue.nextTick(() => { + this.$refs.search.focus(); + }); + + e.preventDefault(); + } + if (e.key === 'Escape') { + this.filter = ''; + this.$refs.search.blur(); + if (isSmallScreen()) { + this.showMenu = false; + } + } + } + + document.addEventListener('keydown', this._keyListener.bind(this)); + }, + beforeDestroy() { + document.removeEventListener('keydown', this._keyListener); } }); diff --git a/index.html b/index.html index 9c1b531..85c9b78 100644 --- a/index.html +++ b/index.html @@ -59,7 +59,7 @@ :class="['fas', vlayout ? 'fa-list' : 'fa-columns']"> -- cgit v1.2.3