mirror of
https://github.com/thelounge/thelounge
synced 2024-11-22 20:13:07 +00:00
Refactor title to rely on Vuex state reactivity
This commit is contained in:
parent
6a15fd95f0
commit
16f8304c4e
2 changed files with 15 additions and 30 deletions
|
@ -3,6 +3,7 @@ import Vuex from "vuex";
|
|||
import {createSettingsStore} from "./store-settings";
|
||||
|
||||
const storage = require("./localStorage");
|
||||
const appName = document.title;
|
||||
|
||||
Vue.use(Vuex);
|
||||
|
||||
|
@ -139,6 +140,13 @@ const store = new Vuex.Store({
|
|||
|
||||
return null;
|
||||
},
|
||||
title(state, getters) {
|
||||
const alertEventCount = getters.highlightCount ? `(${getters.highlightCount}) ` : "";
|
||||
|
||||
const channelname = state.activeChannel ? `${state.activeChannel.channel.name} — ` : "";
|
||||
|
||||
return alertEventCount + channelname + appName;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
@ -11,16 +11,10 @@ const constants = require("./constants");
|
|||
|
||||
Vue.filter("localetime", localetime);
|
||||
|
||||
const appName = document.title;
|
||||
|
||||
const vueApp = new Vue({
|
||||
el: "#viewport",
|
||||
router,
|
||||
mounted() {
|
||||
document.addEventListener("visibilitychange", this.synchronizeNotifiedState);
|
||||
document.addEventListener("focus", this.synchronizeNotifiedState);
|
||||
document.addEventListener("click", this.synchronizeNotifiedState);
|
||||
|
||||
// TODO: Hackfix because socket-events require vueApp somewhere
|
||||
// and that breaks due to cyclical depenency as by this point vue.js
|
||||
// does not export anything yet.
|
||||
|
@ -58,8 +52,6 @@ const vueApp = new Vue({
|
|||
}
|
||||
},
|
||||
synchronizeNotifiedState() {
|
||||
this.updateTitle();
|
||||
|
||||
let hasAnyHighlights = false;
|
||||
|
||||
for (const network of this.$store.state.networks) {
|
||||
|
@ -73,28 +65,6 @@ const vueApp = new Vue({
|
|||
|
||||
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) {
|
||||
if (this.$store.state.isNotified !== newState) {
|
||||
// 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) {
|
||||
store.commit("currentUserVisibleError", `Vue error: ${e.message}`);
|
||||
console.error(e); // eslint-disable-line
|
||||
|
|
Loading…
Reference in a new issue