X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=app.js;h=e79611069f9d779d4a09e969157ec805b0c24628;hb=55e0df5386b60935c3db568a94b70d4d6c0f0f49;hp=21bdbb995f47392582a9849f83d55c51cffbaa30;hpb=b4de52de8977f21fef7468c1a9c706b33c1b2dd5;p=github%2Fbastienwirtz%2Fhomer.git diff --git a/app.js b/app.js index 21bdbb9..e796110 100644 --- a/app.js +++ b/app.js @@ -5,7 +5,8 @@ const app = new Vue({ offline: false, filter: '', vlayout: true, - isDark: null + isDark: null, + showMenu: false }, created: async function () { let that = this; @@ -81,6 +82,58 @@ const app = new Vue({ this.vlayout = !this.vlayout; localStorage.vlayout = this.vlayout; }, + toggleMenu: function() { + this.showMenu = !this.showMenu; + }, + matchesFilter: function(item) { + return (item.name.toLowerCase().includes(this.filter.toLowerCase()) + || (item.tag && item.tag.toLowerCase().includes(this.filter.toLowerCase()))) + }, + firstMatchingService: function() { + for (group of this.config.services) { + for (item of group.items) { + if (this.matchesFilter(item)) { + return item; + } + } + } + return null; + }, + navigateToFirstService: function(target) { + service = this.firstMatchingService(); + if (service) { + window.open(service.url, target || service.target || '_self'); + } + } + }, + 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); } });