Refactor sidebar behaviour to no longer use methods in root Vue instance
This commit is contained in:
parent
1adbbdda2a
commit
dd9efad23c
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div id="viewport" :class="viewportClasses" role="tablist">
|
||||
<Sidebar :overlay="$refs.overlay" />
|
||||
<div id="sidebar-overlay" ref="overlay" @click="$root.setSidebar(false)" />
|
||||
<div id="sidebar-overlay" ref="overlay" @click="$store.commit('sidebarOpen', false)" />
|
||||
<article id="windows">
|
||||
<router-view ref="window"></router-view>
|
||||
</article>
|
||||
|
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<button class="lt" aria-label="Toggle channel list" @click="$root.toggleSidebar" />
|
||||
<button class="lt" aria-label="Toggle channel list" @click="$store.commit('toggleSidebar')" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
@ -13,6 +13,7 @@ const Help = require("../components/Windows/Help.vue").default;
|
||||
const Changelog = require("../components/Windows/Changelog.vue").default;
|
||||
const NetworkEdit = require("../components/Windows/NetworkEdit.vue").default;
|
||||
const RoutedChat = require("../components/RoutedChat.vue").default;
|
||||
const constants = require("./constants");
|
||||
|
||||
const router = new VueRouter({
|
||||
routes: [
|
||||
@ -66,7 +67,9 @@ router.beforeEach((to, from, next) => {
|
||||
|
||||
router.afterEach((to) => {
|
||||
if (store.state.appLoaded) {
|
||||
router.app.closeSidebarIfNeeded();
|
||||
if (window.innerWidth <= constants.mobileViewportPixels) {
|
||||
store.commit("sidebarOpen", false);
|
||||
}
|
||||
}
|
||||
|
||||
if (to.name !== "RoutedChat") {
|
||||
|
@ -29,7 +29,7 @@ socket.on("init", function(data) {
|
||||
let isUserlistOpen = storage.get("thelounge.state.userlist");
|
||||
|
||||
if (viewportWidth > constants.mobileViewportPixels) {
|
||||
vueApp.setSidebar(storage.get("thelounge.state.sidebar") !== "false");
|
||||
store.commit("sidebarOpen", storage.get("thelounge.state.sidebar") !== "false");
|
||||
}
|
||||
|
||||
// If The Lounge is opened on a small screen (less than 1024px), and we don't have stored
|
||||
|
@ -93,6 +93,9 @@ const store = new Vuex.Store({
|
||||
sidebarDragging(state, payload) {
|
||||
state.sidebarDragging = payload;
|
||||
},
|
||||
toggleSidebar(state) {
|
||||
state.sidebarOpen = !state.sidebarOpen;
|
||||
},
|
||||
userlistOpen(state, payload) {
|
||||
state.userlistOpen = payload;
|
||||
},
|
||||
|
@ -36,23 +36,6 @@ const vueApp = new Vue({
|
||||
}, 1);
|
||||
},
|
||||
methods: {
|
||||
setSidebar(state) {
|
||||
this.$store.commit("sidebarOpen", state);
|
||||
|
||||
if (window.outerWidth > constants.mobileViewportPixels) {
|
||||
storage.set("thelounge.state.sidebar", state);
|
||||
}
|
||||
|
||||
this.$emit("resize");
|
||||
},
|
||||
toggleSidebar() {
|
||||
this.setSidebar(!this.$store.state.sidebarOpen);
|
||||
},
|
||||
closeSidebarIfNeeded() {
|
||||
if (window.innerWidth <= constants.mobileViewportPixels) {
|
||||
this.setSidebar(false);
|
||||
}
|
||||
},
|
||||
setUserlist(state) {
|
||||
storage.set("thelounge.state.userlist", state);
|
||||
this.$store.commit("userlistOpen", state);
|
||||
@ -142,6 +125,17 @@ const vueApp = new Vue({
|
||||
store,
|
||||
});
|
||||
|
||||
store.watch(
|
||||
(state) => state.sidebarOpen,
|
||||
(sidebarOpen) => {
|
||||
if (window.outerWidth > constants.mobileViewportPixels) {
|
||||
storage.set("thelounge.state.sidebar", sidebarOpen);
|
||||
}
|
||||
|
||||
vueApp.$emit("resize");
|
||||
}
|
||||
);
|
||||
|
||||
Vue.config.errorHandler = function(e) {
|
||||
store.commit("currentUserVisibleError", `Vue error: ${e.message}`);
|
||||
console.error(e); // eslint-disable-line
|
||||
|
Loading…
Reference in New Issue
Block a user