diff --git a/client/index.html.tpl b/client/index.html.tpl index fb61c72c..754e64d4 100644 --- a/client/index.html.tpl +++ b/client/index.html.tpl @@ -19,7 +19,7 @@ The Lounge - + diff --git a/client/js/lounge.js b/client/js/lounge.js index 88635efc..549e2457 100644 --- a/client/js/lounge.js +++ b/client/js/lounge.js @@ -132,21 +132,6 @@ window.vueMounted = () => { socket.emit("open", channel ? channel.channel.id : null); - let hasAnyHighlights = false; - - for (const network of vueApp.networks) { - for (const chan of network.channels) { - if (chan.highlight > 0) { - hasAnyHighlights = true; - break; - } - } - } - - if (!hasAnyHighlights) { - utils.toggleNotificationMarkers(false); - } - if (!keepSidebarOpen && $(window).outerWidth() <= utils.mobileViewportPixels) { slideoutMenu.toggle(false); } @@ -161,7 +146,7 @@ window.vueMounted = () => { .addClass("active") .trigger("show"); - utils.updateTitle(); + utils.synchronizeNotifiedState(); if (self.hasClass("chan")) { vueApp.$nextTick(() => $("#chat-container").addClass("active")); @@ -223,15 +208,7 @@ window.vueMounted = () => { }); $(document).on("visibilitychange focus click", () => { - for (const network of vueApp.networks) { - for (const channel of network.channels) { - if (channel.highlight > 0) { - return; - } - } - } - - utils.toggleNotificationMarkers(false); + utils.synchronizeNotifiedState(); }); // Compute how many milliseconds are remaining until the next day starts diff --git a/client/js/socket-events/init.js b/client/js/socket-events/init.js index aed8bf65..ce7cba16 100644 --- a/client/js/socket-events/init.js +++ b/client/js/socket-events/init.js @@ -98,16 +98,7 @@ socket.on("init", function(data) { vueApp.$nextTick(() => openCorrectChannel(previousActive, data.active)); utils.confirmExit(); - - for (const network of vueApp.networks) { - for (const channel of network.channels) { - if (channel.highlight > 0) { - utils.updateTitle(); - utils.toggleNotificationMarkers(true); - return; - } - } - } + utils.synchronizeNotifiedState(); }); function openCorrectChannel(clientActive, serverActive) { diff --git a/client/js/socket-events/msg.js b/client/js/socket-events/msg.js index 3c9b7721..f5340abd 100644 --- a/client/js/socket-events/msg.js +++ b/client/js/socket-events/msg.js @@ -32,7 +32,7 @@ socket.on("msg", function(data) { } if (data.msg.self || data.msg.highlight) { - utils.updateTitle(); + utils.synchronizeNotifiedState(); } // Display received notices and errors in currently active channel. @@ -89,8 +89,6 @@ function notifyMessage(targetId, channel, activeChannel, msg) { } } - utils.toggleNotificationMarkers(true); - if (options.settings.desktopNotifications && ("Notification" in window) && Notification.permission === "granted") { let title; let body; diff --git a/client/js/socket-events/open.js b/client/js/socket-events/open.js index 428a3d28..7e2548a3 100644 --- a/client/js/socket-events/open.js +++ b/client/js/socket-events/open.js @@ -27,5 +27,5 @@ socket.on("open", function(id) { } } - utils.updateTitle(); + utils.synchronizeNotifiedState(); }); diff --git a/client/js/socket-events/part.js b/client/js/socket-events/part.js index 9dcf555c..488c7cdd 100644 --- a/client/js/socket-events/part.js +++ b/client/js/socket-events/part.js @@ -2,6 +2,7 @@ const $ = require("jquery"); const socket = require("../socket"); +const utils = require("../utils"); const {vueApp, findChannel} = require("../vue"); socket.on("part", function(data) { @@ -18,4 +19,6 @@ socket.on("part", function(data) { if (channel) { channel.network.channels.splice(channel.network.channels.findIndex((c) => c.id === data.chan), 1); } + + utils.synchronizeNotifiedState(); }); diff --git a/client/js/utils.js b/client/js/utils.js index 1bbbd997..015ab6f5 100644 --- a/client/js/utils.js +++ b/client/js/utils.js @@ -17,8 +17,7 @@ module.exports = { hasRoleInChannel, move, closeChan, - toggleNotificationMarkers, - updateTitle, + synchronizeNotifiedState, togglePasswordField, requestIdleCallback, }; @@ -51,13 +50,31 @@ function scrollIntoViewNicely(el) { const favicon = $("#favicon"); +function synchronizeNotifiedState() { + updateTitle(); + + let hasAnyHighlights = false; + + for (const network of vueApp.networks) { + for (const chan of network.channels) { + if (chan.highlight > 0) { + hasAnyHighlights = true; + break; + } + } + } + + toggleNotificationMarkers(hasAnyHighlights); +} + function toggleNotificationMarkers(newState) { // Toggles the favicon to red when there are unread notifications - if (favicon.data("toggled") !== newState) { + if (vueApp.isNotified !== newState) { + vueApp.isNotified = newState; + const old = favicon.prop("href"); favicon.prop("href", favicon.data("other")); favicon.data("other", old); - favicon.data("toggled", newState); } // Toggles a dot on the menu icon when there are unread notifications diff --git a/client/js/vue.js b/client/js/vue.js index beb31374..2f843a71 100644 --- a/client/js/vue.js +++ b/client/js/vue.js @@ -25,6 +25,7 @@ const vueApp = new Vue({ connected: false, connectionError: false, fileUploadEnabled: false, + isNotified: false, appName: document.title, activeChannel: null, networks: [],