✨ Favicon > Add favicon with notification

2017-09-07 14:11:22 +02:00
parent 833ff06835
commit 066a71e4d0
10 changed files with 115 additions and 22 deletions
@@ -3,6 +3,7 @@
    <head>
        <meta charset="utf-8">
        <title>Keppler</title>
+        <link class="favicon" rel="icon" type="image/png" href="" />
    </head>
    <body>
        <div id="app"></div>
@@ -1,6 +1,7 @@
 import Connexion from '@/components/connexion'
 import ProjectsHub from '@/components/projects-hub'
 import Project from '@/components/project'
+import Favicon from '@/components/favicon'

 export default
 {
@@ -10,7 +11,8 @@ export default
    {
        Connexion,
        ProjectsHub,
-        Project
+        Project,
+        Favicon
    },

    computed:
@@ -2,6 +2,9 @@
    <!-- Connexion -->
    <connexion></connexion>

+    <!-- Favicon -->
+    <favicon></favicon>
+
    <!-- Header -->
    <a class="application-header" href="#" @click.prevent="onHeaderClick">
        <img class="element background" src="../../../static/svg/header-background.svg" alt="">
@@ -6,8 +6,7 @@ export default
    {
        return {
            userName: '',
-            messageText: '',
-            unreadCount: 0
+            messageText: ''
        }
    },

@@ -36,6 +35,11 @@ export default
        scrollbarWidth()
        {
            return this.$store.state.scrollbarWidth
+        },
+
+        unreadCount()
+        {
+            return this.$store.state.chat.unreadCount
        }
    },

@@ -48,11 +52,6 @@ export default

        messages()
        {
-            if(!this.atBottom || !this.open)
-            {
-                this.unreadCount++
-            }
-
            window.requestAnimationFrame(() =>
            {
                if(this.atBottom)
@@ -107,12 +106,6 @@ export default
        onHeaderClick()
        {
            this.$store.commit('toggleChat')
-
-            // Reset unread count
-            if(this.open)
-            {
-                this.unreadCount = 0
-            }
        },

        onUserNameChange()
@@ -167,12 +160,6 @@ export default
        onMessagesScroll()
        {
            this.atBottom = this.$messages.scrollTop + this.$messages.offsetHeight >= this.$innerMessages.offsetHeight - 15
-
-            // Reset unread count
-            if(this.atBottom)
-            {
-                this.unreadCount = 0
-            }
        },

        onQuestionRemoveClick()
@@ -204,7 +191,7 @@ export default

        scrollToBottom()
        {
-            this.$messages.scrollTop = this.$innerMessages.offsetHeight - this.$messages.offsetHeight + 10
+            this.$messages.scrollTop = this.$innerMessages.offsetHeight - this.$messages.offsetHeight + 15
        },

        formatMinutes(time)
@@ -0,0 +1,3 @@
+<template src="./template.html"></template>
+<script src="./script.js"></script>
+<style src="./style.styl" lang="stylus" scoped></style>
@@ -0,0 +1,85 @@
+export default
+{
+    name: 'favicon',
+
+    computed:
+    {
+
+        chatUnreadCount()
+        {
+            return this.$store.state.chat.unreadCount
+        }
+    },
+
+    watch:
+    {
+        chatUnreadCount: 'onChatUnreadCountChange'
+    },
+
+    created()
+    {
+        this.$favicon = document.querySelector('.favicon')
+
+        this.size = 16 * window.devicePixelRatio
+        this.notifSize = 0.2
+
+        this.canvas = document.createElement('canvas')
+        this.canvas.width = this.size
+        this.canvas.height = this.size
+
+        this.context = this.canvas.getContext('2d')
+
+        this.image = new Image()
+
+        this.image.addEventListener('load', () =>
+        {
+            this.updateFavicon()
+        })
+
+        this.image.src = require('../../../static/images/favicon-32x32.png')
+    },
+
+    methods:
+    {
+        onChatUnreadCountChange()
+        {
+            this.updateFavicon()
+        },
+
+        updateFavicon()
+        {
+            // Clear
+            this.context.clearRect(0, 0, this.size, this.size)
+
+            // Draw image
+            this.context.drawImage(this.image, 0, 0, this.size, this.size)
+
+            // // Draw file notif
+            // this.context.beginPath()
+            // this.context.arc(this.size * (1 - this.notifSize), this.size * (1 - this.notifSize), this.size * this.notifSize, 0, Math.PI * 2)
+
+            // this.context.fillStyle = '#9B52F5'
+            // this.context.fill()
+
+            // this.context.strokeStyle = '#360079'
+            // this.context.stroke()
+
+            // Draw chat notif
+            if(this.chatUnreadCount > 0)
+            {
+                this.context.beginPath()
+                this.context.arc(this.size * (1 - this.notifSize), this.size * (1 - this.notifSize), this.size * this.notifSize, 0, Math.PI * 2)
+                // this.context.arc(this.size * (1 - this.notifSize * 2.25), this.size * (1 - this.notifSize), this.size * this.notifSize, 0, Math.PI * 2)
+
+                this.context.fillStyle = '#ff763d'
+                this.context.fill()
+
+                this.context.strokeStyle = '#ad1d3c'
+                this.context.stroke()
+            }
+
+            // Add to DOM
+            this.$favicon.setAttribute('href', this.canvas.toDataURL())
+        }
+    }
+}
@@ -0,0 +1,2 @@
+<div>
+</div>
@@ -7,7 +7,8 @@ export default {
        messages: [],
        pendingMessage: null,
        pendingAlert: null,
-        question: null
+        question: null,
+        unreadCount: 0
    },

    mutations:
@@ -16,6 +17,13 @@ export default {
        {
            state.messages.push(data)

+            // Add to unread count if not open or document is hidden (tab not active)
+            if(!state.open || document.hidden)
+            {
+                state.unreadCount++
+            }
+
+            // Clamp
            if(state.messages.length > 100)
            {
                state.messages.splice(0, state.messages.length - 100)
@@ -50,6 +58,7 @@ export default {

        openChat(state)
        {
+            state.unreadCount = 0
            state.open = true
        },

@@ -60,6 +69,7 @@ export default {

        toggleChat(state)
        {
+            state.unreadCount = 0
            state.open = !state.open
        }
    }