X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=app.js;h=e79611069f9d779d4a09e969157ec805b0c24628;hb=c424ddba7207903d31c5371a93adab492dc117fc;hp=c35e4c7da7aa1f4c8a7297434d886473657a8508;hpb=d5ef84f5a76cde0b89abf4b17525eeec95e78f35;p=github%2Fbastienwirtz%2Fhomer.git

diff --git a/app.js b/app.js
index c35e4c7..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;
@@ -20,6 +21,7 @@ const app = new Vue({
         this.checkOffline();
         try {
             this.config =  await this.getConfig();
+            document.title = this.config.title + ' | Homer';
         } catch (error) {
             this.offline = true;
         }
@@ -80,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);
     }
 });