hardlounge/client/components/App.vue

93 lines
2.6 KiB
Vue
Raw Normal View History

<template>
2019-08-03 19:03:45 +00:00
<div id="viewport" :class="viewportClasses" role="tablist">
2019-08-05 14:35:53 +00:00
<Sidebar :networks="networks" :active-channel="activeChannel" :overlay="$refs.overlay" />
<div id="sidebar-overlay" ref="overlay" @click="$root.setSidebar(false)" />
<article id="windows">
2018-07-08 13:42:54 +00:00
<Chat
v-if="activeChannel"
:network="activeChannel.network"
2019-03-01 14:18:16 +00:00
:channel="activeChannel.channel"
/>
2019-08-03 19:03:45 +00:00
<component :is="$store.state.activeWindow" ref="window" />
</article>
2019-09-20 18:10:48 +00:00
<ImageViewer ref="imageViewer" />
</div>
</template>
<script>
const throttle = require("lodash/throttle");
2019-02-22 14:21:32 +00:00
import Sidebar from "./Sidebar.vue";
import NetworkList from "./NetworkList.vue";
import Chat from "./Chat.vue";
2019-09-20 18:10:48 +00:00
import ImageViewer from "./ImageViewer.vue";
2019-02-18 09:18:32 +00:00
import SignIn from "./Windows/SignIn.vue";
2019-02-20 09:10:18 +00:00
import Settings from "./Windows/Settings.vue";
import NetworkEdit from "./Windows/NetworkEdit.vue";
import Connect from "./Windows/Connect.vue";
2019-02-20 15:01:33 +00:00
import Help from "./Windows/Help.vue";
2019-02-20 15:09:44 +00:00
import Changelog from "./Windows/Changelog.vue";
export default {
name: "App",
components: {
2019-02-22 14:21:32 +00:00
Sidebar,
NetworkList,
2019-09-20 18:10:48 +00:00
ImageViewer,
Chat,
2019-02-18 09:18:32 +00:00
SignIn,
2019-02-20 09:10:18 +00:00
Settings,
NetworkEdit,
Connect,
2019-02-20 15:01:33 +00:00
Help,
2019-02-20 15:09:44 +00:00
Changelog,
},
props: {
2019-02-18 09:18:32 +00:00
activeWindow: String,
activeChannel: Object,
networks: Array,
},
computed: {
viewportClasses() {
return {
2019-08-03 19:03:45 +00:00
notified: this.$store.state.isNotified,
"menu-open": this.$store.state.sidebarOpen,
2019-08-05 12:24:44 +00:00
"menu-dragging": this.$store.state.sidebarDragging,
"userlist-open": this.$store.state.userlistOpen,
};
},
},
mounted() {
// Make a single throttled resize listener available to all components
this.debouncedResize = throttle(() => {
this.$root.$emit("resize");
}, 100);
window.addEventListener("resize", this.debouncedResize, {passive: true});
// Emit a daychange event every time the day changes so date markers know when to update themselves
const emitDayChange = () => {
this.$root.$emit("daychange");
// This should always be 24h later but re-computing exact value just in case
this.dayChangeTimeout = setTimeout(emitDayChange, this.msUntilNextDay());
};
this.dayChangeTimeout = setTimeout(emitDayChange, this.msUntilNextDay());
},
beforeDestroy() {
window.removeEventListener("resize", this.debouncedResize);
clearTimeout(this.dayChangeTimeout);
},
methods: {
isPublic: () => document.body.classList.contains("public"),
msUntilNextDay() {
// Compute how many milliseconds are remaining until the next day starts
const today = new Date();
const tommorow = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
return tommorow - today;
},
},
};
</script>