X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=app.js;h=e79611069f9d779d4a09e969157ec805b0c24628;hb=5861f0f89911f07872b452307a0b22ce7eb849b9;hp=a404314df8f8911597fb9dd72c1d7e1056f04fd7;hpb=5323df4a32ca9b81fa598c0ca988596d93afe713;p=github%2Fbastienwirtz%2Fhomer.git

diff --git a/app.js b/app.js
index a404314..e796110 100644
--- a/app.js
+++ b/app.js
@@ -5,17 +5,38 @@ const app = new Vue({
         offline: false,
         filter: '',
         vlayout: true,
-        overrideDark: null
+        isDark: null,
+        showMenu: false
     },
-    created: function () {
+    created: async function () {
         let that = this;
 
+        this.isDark = 'overrideDark' in localStorage ?
+            JSON.parse(localStorage.overrideDark) : matchMedia("(prefers-color-scheme: dark)").matches;
+
+        if ('vlayout' in localStorage) {
+            this.vlayout = JSON.parse(localStorage.vlayout)
+        }
+
         this.checkOffline();
-        that.getConfig().then(function (config) {
-            that.config = config;
-        }).catch(function () {
-            that.offline = true;
-        });
+        try {
+            this.config =  await this.getConfig();
+            document.title = this.config.title + ' | Homer';
+        } catch (error) {
+            this.offline = true;
+        }
+
+        // Look for a new message if an endpoint is provided.
+        if (this.config.message && this.config.message.url) {
+            this.getMessage(this.config.message.url).then(function(message){
+                // keep the original config value if no value is provided by the endpoint
+                for (const prop of ['title','style','content']) {
+                    if (prop in message && message[prop] !== null) {
+                        that.config.message[prop] = message[prop];
+                    }    
+                }
+            });
+        }
 
         document.addEventListener('visibilitychange', function () {
             if (document.visibilityState == "visible") {
@@ -23,13 +44,6 @@ const app = new Vue({
             }
         }, false);
     },
-    computed: {
-        isDark: function() {
-            return this.overrideDark !== null
-                ? this.overrideDark
-                : matchMedia("(prefers-color-scheme: dark)").matches;
-        }
-      },
     methods: {
         checkOffline: function () {
             let that = this;
@@ -52,9 +66,74 @@ const app = new Vue({
                 });
             });
         },
+        getMessage: function (url) {
+            return fetch(url).then(function (response) {
+                if (response.status != 200) {
+                    return;
+                }
+                return response.json();
+            });
+        },
         toggleTheme: function() {
-            this.overrideDark = !this.isDark;
+            this.isDark = !this.isDark;
+            localStorage.overrideDark = this.isDark; 
+        }, 
+        toggleLayout: function() {
+            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);
     }
 });
 
@@ -62,7 +141,7 @@ Vue.component('service', {
     props: ['item'],
     template: `<div>
     <div class="card">
-        <a :href="item.url">
+        <a :href="item.url" :target="item.target">
             <div class="card-content">
                 <div class="media">
                     <div v-if="item.logo" class="media-left">
@@ -80,7 +159,9 @@ Vue.component('service', {
                         <p class="subtitle is-6">{{ item.subtitle }}</p>
                     </div>
                 </div>
-                <strong class="tag" v-if="item.tag">#{{ item.tag }}</strong>
+                <div class="tag" :class="item.tagstyle" v-if="item.tag">
+                    <strong class="tag-text">#{{ item.tag }}</strong>
+                </div>
             </div>
         </a>
     </div></div>`
@@ -88,6 +169,6 @@ Vue.component('service', {
 
 if ('serviceWorker' in navigator) {
     window.addEventListener('load', function () {
-        navigator.serviceWorker.register('/worker.js');
+        navigator.serviceWorker.register('worker.js');
     });
 }