Improve router experience
This commit is contained in:
parent
5a0f1c1f4e
commit
f2309c7c89
@ -134,25 +134,19 @@ export default {
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
channel(_, previousChannel) {
|
||||
this.channelChanged(previousChannel);
|
||||
channel() {
|
||||
this.channelChanged();
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.channelChanged();
|
||||
},
|
||||
methods: {
|
||||
channelChanged(previousChannel) {
|
||||
channelChanged() {
|
||||
// Triggered when active channel is set or changed
|
||||
|
||||
if (previousChannel) {
|
||||
this.$root.switchOutOfChannel(previousChannel);
|
||||
}
|
||||
|
||||
this.channel.highlight = 0;
|
||||
this.channel.unread = 0;
|
||||
|
||||
this.$store.commit("activeWindow", null);
|
||||
socket.emit("open", this.channel.id);
|
||||
|
||||
if (this.channel.usersOutdated) {
|
||||
|
@ -13,8 +13,8 @@ export default {
|
||||
},
|
||||
computed: {
|
||||
activeChannel() {
|
||||
const chan_id = parseInt(this.$route.params.pathMatch);
|
||||
const channel = this.$store.getters.findChannel(chan_id);
|
||||
const chanId = parseInt(this.$route.params.id, 10);
|
||||
const channel = this.$store.getters.findChannel(chanId);
|
||||
return channel;
|
||||
},
|
||||
},
|
||||
|
@ -22,12 +22,10 @@
|
||||
tag="button"
|
||||
active-class="active"
|
||||
:class="['icon', 'sign-in']"
|
||||
data-target="#sign-in"
|
||||
data-component="SignIn"
|
||||
aria-label="Sign in"
|
||||
role="tab"
|
||||
aria-controls="sign-in"
|
||||
:aria-selected="$store.state.activeWindow === 'SignIn'"
|
||||
:aria-selected="$route.name === 'SignIn'"
|
||||
/></span>
|
||||
<span
|
||||
class="tooltipped tooltipped-n tooltipped-no-touch"
|
||||
@ -37,12 +35,10 @@
|
||||
tag="button"
|
||||
active-class="active"
|
||||
:class="['icon', 'connect']"
|
||||
data-target="#connect"
|
||||
data-component="Connect"
|
||||
aria-label="Connect to network"
|
||||
role="tab"
|
||||
aria-controls="connect"
|
||||
:aria-selected="$store.state.activeWindow === 'Connect'"
|
||||
:aria-selected="$route.name === 'Connect'"
|
||||
/></span>
|
||||
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Settings"
|
||||
><router-link
|
||||
@ -50,13 +46,10 @@
|
||||
tag="button"
|
||||
active-class="active"
|
||||
:class="['icon', 'settings']"
|
||||
class="icon settings"
|
||||
data-target="#settings"
|
||||
data-component="Settings"
|
||||
aria-label="Settings"
|
||||
role="tab"
|
||||
aria-controls="settings"
|
||||
:aria-selected="$store.state.activeWindow === 'Settings'"
|
||||
:aria-selected="$route.name === 'Settings'"
|
||||
/></span>
|
||||
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Help"
|
||||
><router-link
|
||||
@ -64,12 +57,10 @@
|
||||
tag="button"
|
||||
active-class="active"
|
||||
:class="['icon', 'help']"
|
||||
data-target="#help"
|
||||
data-component="Help"
|
||||
aria-label="Help"
|
||||
role="tab"
|
||||
aria-controls="help"
|
||||
:aria-selected="$store.state.activeWindow === 'Help'"
|
||||
:aria-selected="$route.name === 'Help'"
|
||||
/></span>
|
||||
</footer>
|
||||
</aside>
|
||||
|
@ -2,10 +2,9 @@
|
||||
|
||||
const socket = require("../socket");
|
||||
const store = require("../store").default;
|
||||
const {switchToChannel} = require("../router");
|
||||
|
||||
exports.input = function(args) {
|
||||
const {vueApp} = require("../vue");
|
||||
|
||||
if (args.length > 0) {
|
||||
let channels = args[0];
|
||||
|
||||
@ -26,7 +25,7 @@ exports.input = function(args) {
|
||||
const chan = store.getters.findChannelOnCurrentNetwork(channels);
|
||||
|
||||
if (chan) {
|
||||
vueApp.switchToChannel(chan);
|
||||
switchToChannel(chan);
|
||||
} else {
|
||||
socket.emit("input", {
|
||||
text: `/join ${channels} ${args.length > 1 ? args[1] : ""}`,
|
||||
|
@ -7,6 +7,7 @@ const ContextMenu = require("./contextMenu");
|
||||
const contextMenuActions = [];
|
||||
const contextMenuItems = [];
|
||||
const {vueApp} = require("./vue");
|
||||
const {switchToChannel, navigate} = require("./router");
|
||||
const store = require("./store").default;
|
||||
|
||||
addDefaultItems();
|
||||
@ -51,7 +52,7 @@ function addWhoisItem() {
|
||||
const chan = store.getters.findChannelOnCurrentNetwork(itemData);
|
||||
|
||||
if (chan) {
|
||||
vueApp.switchToChannel(chan);
|
||||
switchToChannel(chan);
|
||||
}
|
||||
|
||||
socket.emit("input", {
|
||||
@ -86,7 +87,7 @@ function addQueryItem() {
|
||||
const chan = store.getters.findChannelOnCurrentNetwork(itemData);
|
||||
|
||||
if (chan) {
|
||||
vueApp.switchToChannel(chan);
|
||||
switchToChannel(chan);
|
||||
}
|
||||
|
||||
socket.emit("input", {
|
||||
@ -292,7 +293,7 @@ function addFocusItem() {
|
||||
|
||||
function addEditNetworkItem() {
|
||||
function edit(networkUuid) {
|
||||
vueApp.$router.push("/edit-network/" + networkUuid);
|
||||
navigate("NetworkEdit", {uuid: networkUuid});
|
||||
}
|
||||
|
||||
addContextMenuItem({
|
||||
|
@ -2,8 +2,8 @@
|
||||
|
||||
const $ = require("jquery");
|
||||
const Mousetrap = require("mousetrap");
|
||||
const {vueApp} = require("./vue");
|
||||
const store = require("./store").default;
|
||||
const {switchToChannel} = require("./router");
|
||||
|
||||
// Switch to the next/previous window in the channel list.
|
||||
Mousetrap.bind(["alt+up", "alt+down"], function(e, keys) {
|
||||
@ -92,7 +92,7 @@ Mousetrap.bind(["alt+a"], function() {
|
||||
}
|
||||
|
||||
if (targetchan) {
|
||||
vueApp.switchToChannel(targetchan);
|
||||
switchToChannel(targetchan);
|
||||
}
|
||||
|
||||
return false;
|
||||
|
@ -36,14 +36,13 @@ const router = new VueRouter({
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
// Disallow navigating to non-existing routes
|
||||
|
||||
if (store.state.appLoaded && !to.matched.length) {
|
||||
next(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Disallow navigating to invalid channels
|
||||
if (to.name === "RoutedChat" && !store.getters.findChannel(Number(to.params.pathMatch))) {
|
||||
if (to.name === "RoutedChat" && !store.getters.findChannel(Number(to.params.id))) {
|
||||
next(false);
|
||||
return;
|
||||
}
|
||||
@ -65,22 +64,26 @@ router.beforeEach((to, from, next) => {
|
||||
next();
|
||||
});
|
||||
|
||||
router.afterEach((to) => {
|
||||
router.afterEach(() => {
|
||||
if (store.state.appLoaded) {
|
||||
if (window.innerWidth <= constants.mobileViewportPixels) {
|
||||
store.commit("sidebarOpen", false);
|
||||
}
|
||||
}
|
||||
|
||||
if (to.name !== "RoutedChat") {
|
||||
// Navigating out of a chat window
|
||||
store.commit("activeWindow", to.name);
|
||||
if (store.state.activeChannel) {
|
||||
const channel = store.state.activeChannel.channel;
|
||||
store.commit("activeChannel", null);
|
||||
|
||||
if (store.state.activeChannel && store.state.activeChannel.channel) {
|
||||
router.app.switchOutOfChannel(store.state.activeChannel.channel);
|
||||
// When switching out of a channel, mark everything as read
|
||||
if (channel.messages.length > 0) {
|
||||
channel.firstUnread = channel.messages[channel.messages.length - 1].id;
|
||||
}
|
||||
|
||||
store.commit("activeChannel", null);
|
||||
if (channel.messages.length > 100) {
|
||||
channel.messages.splice(0, channel.messages.length - 100);
|
||||
channel.moreHistoryAvailable = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -114,13 +117,19 @@ function initialize() {
|
||||
},
|
||||
{
|
||||
name: "RoutedChat",
|
||||
path: "/chan-*",
|
||||
path: "/chan-:id",
|
||||
component: RoutedChat,
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
function navigate(routeName, params = {}) {
|
||||
router.push({name: routeName, params}).catch(() => {});
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
initialize,
|
||||
router,
|
||||
navigate,
|
||||
switchToChannel: (channel) => navigate("RoutedChat", {id: channel.id}),
|
||||
};
|
||||
|
@ -3,6 +3,7 @@
|
||||
const socket = require("../socket");
|
||||
const storage = require("../localStorage");
|
||||
const {vueApp} = require("../vue");
|
||||
const {navigate} = require("../router");
|
||||
const store = require("../store").default;
|
||||
let lastServerHash = null;
|
||||
|
||||
@ -76,7 +77,7 @@ function showSignIn() {
|
||||
}
|
||||
|
||||
if (vueApp.$route.name !== "SignIn") {
|
||||
vueApp.$router.push("/sign-in");
|
||||
navigate("SignIn");
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -5,6 +5,7 @@ const webpush = require("../webpush");
|
||||
const storage = require("../localStorage");
|
||||
const constants = require("../constants");
|
||||
const {vueApp, initChannel} = require("../vue");
|
||||
const {switchToChannel, navigate} = require("../router");
|
||||
const router = require("../router");
|
||||
const store = require("../store").default;
|
||||
|
||||
@ -49,13 +50,13 @@ socket.on("init", function(data) {
|
||||
const channel = store.getters.findChannel(data.active);
|
||||
|
||||
if (channel) {
|
||||
vueApp.switchToChannel(channel.channel);
|
||||
switchToChannel(channel.channel);
|
||||
} else if (store.state.networks.length > 0) {
|
||||
// Server is telling us to open a channel that does not exist
|
||||
// For example, it can be unset if you first open the page after server start
|
||||
vueApp.switchToChannel(store.state.networks[0].channels[0]);
|
||||
switchToChannel(store.state.networks[0].channels[0]);
|
||||
} else {
|
||||
vueApp.$router.push("/connect");
|
||||
navigate("Connect");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -1,8 +1,9 @@
|
||||
"use strict";
|
||||
|
||||
const socket = require("../socket");
|
||||
const {vueApp, initChannel} = require("../vue");
|
||||
const {initChannel} = require("../vue");
|
||||
const store = require("../store").default;
|
||||
const {switchToChannel} = require("../router");
|
||||
|
||||
socket.on("join", function(data) {
|
||||
initChannel(data.chan);
|
||||
@ -20,5 +21,5 @@ socket.on("join", function(data) {
|
||||
return;
|
||||
}
|
||||
|
||||
vueApp.switchToChannel(store.getters.findChannel(data.chan.id).channel);
|
||||
switchToChannel(store.getters.findChannel(data.chan.id).channel);
|
||||
});
|
||||
|
@ -3,8 +3,8 @@
|
||||
const socket = require("../socket");
|
||||
const cleanIrcMessage = require("../helpers/ircmessageparser/cleanIrcMessage");
|
||||
const webpush = require("../webpush");
|
||||
const {vueApp} = require("../vue");
|
||||
const store = require("../store").default;
|
||||
const {switchToChannel} = require("../router");
|
||||
|
||||
let pop;
|
||||
|
||||
@ -154,7 +154,7 @@ function notifyMessage(targetId, channel, activeChannel, msg) {
|
||||
const channelTarget = store.getters.findChannel(targetId);
|
||||
|
||||
if (channelTarget) {
|
||||
vueApp.switchToChannel(channelTarget);
|
||||
switchToChannel(channelTarget);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
@ -1,11 +1,11 @@
|
||||
"use strict";
|
||||
|
||||
const socket = require("../socket");
|
||||
const {vueApp} = require("../vue");
|
||||
const store = require("../store").default;
|
||||
const {switchToChannel} = require("../router");
|
||||
|
||||
socket.on("msg:special", function(data) {
|
||||
const channel = store.getters.findChannel(data.chan);
|
||||
channel.channel.data = data.data;
|
||||
vueApp.switchToChannel(channel.channel);
|
||||
switchToChannel(channel.channel);
|
||||
});
|
||||
|
@ -3,6 +3,7 @@
|
||||
const socket = require("../socket");
|
||||
const {vueApp, initChannel} = require("../vue");
|
||||
const store = require("../store").default;
|
||||
const {switchToChannel} = require("../router");
|
||||
|
||||
socket.on("network", function(data) {
|
||||
const network = data.networks[0];
|
||||
@ -12,7 +13,7 @@ socket.on("network", function(data) {
|
||||
network.channels.forEach(initChannel);
|
||||
|
||||
store.commit("networks", [...store.state.networks, network]);
|
||||
vueApp.switchToChannel(network.channels[0]);
|
||||
switchToChannel(network.channels[0]);
|
||||
});
|
||||
|
||||
socket.on("network:options", function(data) {
|
||||
|
@ -1,13 +1,13 @@
|
||||
"use strict";
|
||||
|
||||
const socket = require("../socket");
|
||||
const {vueApp} = require("../vue");
|
||||
const store = require("../store").default;
|
||||
const {switchToChannel} = require("../router");
|
||||
|
||||
socket.on("part", function(data) {
|
||||
// When parting from the active channel/query, jump to the network's lobby
|
||||
if (store.state.activeChannel && store.state.activeChannel.channel.id === data.chan) {
|
||||
vueApp.switchToChannel(store.state.activeChannel.network.channels[0]);
|
||||
switchToChannel(store.state.activeChannel.network.channels[0]);
|
||||
}
|
||||
|
||||
const channel = store.getters.findChannel(data.chan);
|
||||
|
@ -1,7 +1,7 @@
|
||||
"use strict";
|
||||
|
||||
const socket = require("../socket");
|
||||
const {vueApp} = require("../vue");
|
||||
const {switchToChannel, navigate} = require("../router");
|
||||
const store = require("../store").default;
|
||||
|
||||
socket.on("quit", function(data) {
|
||||
@ -17,8 +17,8 @@ socket.on("quit", function(data) {
|
||||
}
|
||||
|
||||
if (store.state.networks.length > 0) {
|
||||
vueApp.switchToChannel(store.state.networks[0].channels[0]);
|
||||
switchToChannel(store.state.networks[0].channels[0]);
|
||||
} else {
|
||||
vueApp.$router.push("/connect");
|
||||
navigate("Connect");
|
||||
}
|
||||
});
|
||||
|
@ -26,7 +26,6 @@ const store = new Vuex.Store({
|
||||
isAutoCompleting: false,
|
||||
isConnected: false,
|
||||
isFileUploadEnabled: false,
|
||||
activeWindow: null,
|
||||
networks: [],
|
||||
pushNotificationState: "unsupported",
|
||||
serverConfiguration: {},
|
||||
@ -60,9 +59,6 @@ const store = new Vuex.Store({
|
||||
isFileUploadEnabled(state, isFileUploadEnabled) {
|
||||
state.isFileUploadEnabled = isFileUploadEnabled;
|
||||
},
|
||||
activeWindow(state, payload) {
|
||||
state.activeWindow = payload;
|
||||
},
|
||||
networks(state, networks) {
|
||||
state.networks = networks;
|
||||
},
|
||||
|
@ -6,7 +6,7 @@ const store = require("./store").default;
|
||||
const App = require("../components/App.vue").default;
|
||||
const localetime = require("./helpers/localetime");
|
||||
const storage = require("./localStorage");
|
||||
const {router} = require("./router");
|
||||
const {router, navigate} = require("./router");
|
||||
const constants = require("./constants");
|
||||
|
||||
Vue.filter("localetime", localetime);
|
||||
@ -35,25 +35,7 @@ const vueApp = new Vue({
|
||||
},
|
||||
methods: {
|
||||
switchToChannel(channel) {
|
||||
if (
|
||||
this.$store.state.activeChannel &&
|
||||
this.$store.state.activeChannel.channel.id === channel.id
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$router.push("/chan-" + channel.id);
|
||||
},
|
||||
switchOutOfChannel(channel) {
|
||||
// When switching out of a channel, mark everything as read
|
||||
if (channel.messages.length > 0) {
|
||||
channel.firstUnread = channel.messages[channel.messages.length - 1].id;
|
||||
}
|
||||
|
||||
if (channel.messages.length > 100) {
|
||||
channel.messages.splice(0, channel.messages.length - 100);
|
||||
channel.moreHistoryAvailable = true;
|
||||
}
|
||||
navigate("RoutedChat", {id: channel.id});
|
||||
},
|
||||
},
|
||||
render(createElement) {
|
||||
|
@ -2,8 +2,8 @@
|
||||
|
||||
const storage = require("./localStorage");
|
||||
const socket = require("./socket");
|
||||
const vueApp = require("./vue");
|
||||
const store = require("./store").default;
|
||||
const {switchToChannel} = require("./router");
|
||||
|
||||
let clientSubscribed = null;
|
||||
let applicationServerKey;
|
||||
@ -15,7 +15,7 @@ if ("serviceWorker" in navigator) {
|
||||
const channelTarget = store.getters.findChannel(id);
|
||||
|
||||
if (channelTarget) {
|
||||
vueApp.switchToChannel(channelTarget);
|
||||
switchToChannel(channelTarget);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user