supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor title to rely on Vuex state reactivity

Browse Source
This commit is contained in:
Tim Miller-Williams 2019-11-07 23:53:04 +00:00 committed by Pavel Djundik
parent 6a15fd95f0
commit 16f8304c4e
2 changed files with 15 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/js/store.js
View File

@ -3,6 +3,7 @@ import Vuex from "vuex";
import {createSettingsStore} from "./store-settings"; import {createSettingsStore} from "./store-settings";
const storage = require("./localStorage"); const storage = require("./localStorage");
const appName = document.title;
Vue.use(Vuex); Vue.use(Vuex);
@ -139,6 +140,13 @@ const store = new Vuex.Store({
return null; return null;
}, },
title(state, getters) {
const alertEventCount = getters.highlightCount ? `(${getters.highlightCount}) ` : "";
const channelname = state.activeChannel ? `${state.activeChannel.channel.name} — ` : "";
return alertEventCount + channelname + appName;
},
}, },
}); });

37
client/js/vue.js
View File

@ -11,16 +11,10 @@ const constants = require("./constants");
Vue.filter("localetime", localetime); Vue.filter("localetime", localetime);
const appName = document.title;
const vueApp = new Vue({ const vueApp = new Vue({
el: "#viewport", el: "#viewport",
router, router,
mounted() { mounted() {
document.addEventListener("visibilitychange", this.synchronizeNotifiedState);
document.addEventListener("focus", this.synchronizeNotifiedState);
document.addEventListener("click", this.synchronizeNotifiedState);
// TODO: Hackfix because socket-events require vueApp somewhere // TODO: Hackfix because socket-events require vueApp somewhere
// and that breaks due to cyclical depenency as by this point vue.js // and that breaks due to cyclical depenency as by this point vue.js
// does not export anything yet. // does not export anything yet.
@ -58,8 +52,6 @@ const vueApp = new Vue({
} }
}, },
synchronizeNotifiedState() { synchronizeNotifiedState() {
this.updateTitle();
let hasAnyHighlights = false; let hasAnyHighlights = false;
for (const network of this.$store.state.networks) { for (const network of this.$store.state.networks) {
@ -73,28 +65,6 @@ const vueApp = new Vue({
this.toggleNotificationMarkers(hasAnyHighlights); this.toggleNotificationMarkers(hasAnyHighlights);
}, },
updateTitle() {
let title = appName;
if (this.$store.state.activeChannel) {
title = `${this.$store.state.activeChannel.channel.name} — ${title}`;
}
// add highlight count to title
let alertEventCount = 0;
for (const network of this.$store.state.networks) {
for (const channel of network.channels) {
alertEventCount += channel.highlight;
}
}
if (alertEventCount > 0) {
title = `(${alertEventCount}) ${title}`;
}
document.title = title;
},
toggleNotificationMarkers(newState) { toggleNotificationMarkers(newState) {
if (this.$store.state.isNotified !== newState) { if (this.$store.state.isNotified !== newState) {
// Toggles a dot on the menu icon when there are unread notifications // Toggles a dot on the menu icon when there are unread notifications
@ -136,6 +106,13 @@ store.watch(
} }
); );
store.watch(
(_, getters) => getters.title,
(title) => {
document.title = title;
}
);
Vue.config.errorHandler = function(e) { Vue.config.errorHandler = function(e) {
store.commit("currentUserVisibleError", `Vue error: ${e.message}`); store.commit("currentUserVisibleError", `Vue error: ${e.message}`);
console.error(e); // eslint-disable-line console.error(e); // eslint-disable-line