diff options
Diffstat (limited to 'app.js')
-rw-r--r-- | app.js | 29 |
1 files changed, 29 insertions, 0 deletions
@@ -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 | ||