2022-05-03 04:50:13 +02:00
|
|
|
import constants from "./constants";
|
2019-12-17 23:10:50 +01:00
|
|
|
|
2020-01-22 17:42:31 +01:00
|
|
|
import "../css/style.css";
|
2019-11-16 18:24:03 +01:00
|
|
|
import Vue from "vue";
|
|
|
|
import store from "./store";
|
|
|
|
import App from "../components/App.vue";
|
|
|
|
import storage from "./localStorage";
|
|
|
|
import {router, navigate} from "./router";
|
|
|
|
import socket from "./socket";
|
2020-03-16 18:58:40 +01:00
|
|
|
import eventbus from "./eventbus";
|
2018-07-06 20:15:15 +02:00
|
|
|
|
2019-11-16 18:24:03 +01:00
|
|
|
import "./socket-events";
|
|
|
|
import "./webpush";
|
|
|
|
import "./keybinds";
|
2022-05-15 00:18:06 +02:00
|
|
|
import {ClientChan} from "./types";
|
2019-11-12 16:51:40 +01:00
|
|
|
|
2019-11-08 01:03:41 +01:00
|
|
|
const favicon = document.getElementById("favicon");
|
2022-05-02 07:56:38 +02:00
|
|
|
const faviconNormal = favicon?.getAttribute("href") || "";
|
|
|
|
const faviconAlerted = favicon?.dataset.other || "";
|
2019-11-08 01:03:41 +01:00
|
|
|
|
2022-05-15 00:18:06 +02:00
|
|
|
type Data = {};
|
|
|
|
export type Methods = {
|
|
|
|
switchToChannel: (channel: ClientChan) => void;
|
|
|
|
closeChannel: (channel: ClientChan) => void;
|
|
|
|
};
|
|
|
|
type Computed = {};
|
|
|
|
type Props = {};
|
|
|
|
|
|
|
|
new Vue<Data, Methods, Computed, Props>({
|
2018-07-06 20:15:15 +02:00
|
|
|
el: "#viewport",
|
2019-10-17 18:56:44 +02:00
|
|
|
router,
|
2018-07-10 11:40:55 +02:00
|
|
|
mounted() {
|
2019-11-12 16:51:40 +01:00
|
|
|
socket.open();
|
2018-07-10 11:40:55 +02:00
|
|
|
},
|
2019-04-13 22:44:04 +02:00
|
|
|
methods: {
|
2022-05-15 00:18:06 +02:00
|
|
|
switchToChannel(channel: ClientChan) {
|
2019-11-11 20:18:55 +01:00
|
|
|
navigate("RoutedChat", {id: channel.id});
|
2019-10-17 18:56:44 +02:00
|
|
|
},
|
2022-05-15 00:18:06 +02:00
|
|
|
closeChannel(channel: ClientChan) {
|
2019-11-23 20:53:33 +01:00
|
|
|
if (channel.type === "lobby") {
|
2020-03-16 18:58:40 +01:00
|
|
|
eventbus.emit(
|
2020-02-25 10:16:05 +01:00
|
|
|
"confirm-dialog",
|
|
|
|
{
|
|
|
|
title: "Remove network",
|
|
|
|
text: `Are you sure you want to quit and remove ${channel.name}? This cannot be undone.`,
|
|
|
|
button: "Remove network",
|
|
|
|
},
|
2022-05-02 07:56:38 +02:00
|
|
|
(result: boolean) => {
|
2020-02-25 10:16:05 +01:00
|
|
|
if (!result) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
channel.closed = true;
|
|
|
|
socket.emit("input", {
|
|
|
|
target: Number(channel.id),
|
|
|
|
text: "/quit",
|
|
|
|
});
|
|
|
|
}
|
2019-11-23 20:53:33 +01:00
|
|
|
);
|
|
|
|
|
|
|
|
return;
|
2019-11-23 17:44:23 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
channel.closed = true;
|
|
|
|
|
|
|
|
socket.emit("input", {
|
|
|
|
target: Number(channel.id),
|
2019-11-23 20:53:33 +01:00
|
|
|
text: "/close",
|
2019-11-23 17:44:23 +01:00
|
|
|
});
|
|
|
|
},
|
2019-04-13 22:44:04 +02:00
|
|
|
},
|
2018-07-06 20:15:15 +02:00
|
|
|
render(createElement) {
|
|
|
|
return createElement(App, {
|
2019-02-18 10:18:32 +01:00
|
|
|
ref: "app",
|
2018-07-06 20:15:15 +02:00
|
|
|
props: this,
|
|
|
|
});
|
|
|
|
},
|
2019-02-26 21:23:41 +01:00
|
|
|
store,
|
2018-07-06 20:15:15 +02:00
|
|
|
});
|
|
|
|
|
2019-11-08 00:47:45 +01:00
|
|
|
store.watch(
|
|
|
|
(state) => state.sidebarOpen,
|
|
|
|
(sidebarOpen) => {
|
2019-12-01 19:20:37 +01:00
|
|
|
if (window.innerWidth > constants.mobileViewportPixels) {
|
2022-05-02 07:56:38 +02:00
|
|
|
storage.set("thelounge.state.sidebar", sidebarOpen.toString());
|
2020-03-16 18:58:40 +01:00
|
|
|
eventbus.emit("resize");
|
2019-11-08 00:47:45 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
);
|
|
|
|
|
2019-11-08 00:50:51 +01:00
|
|
|
store.watch(
|
|
|
|
(state) => state.userlistOpen,
|
|
|
|
(userlistOpen) => {
|
2022-05-02 07:56:38 +02:00
|
|
|
storage.set("thelounge.state.userlist", userlistOpen.toString());
|
2020-03-16 18:58:40 +01:00
|
|
|
eventbus.emit("resize");
|
2019-11-08 00:50:51 +01:00
|
|
|
}
|
|
|
|
);
|
|
|
|
|
2019-11-08 00:53:04 +01:00
|
|
|
store.watch(
|
|
|
|
(_, getters) => getters.title,
|
|
|
|
(title) => {
|
|
|
|
document.title = title;
|
|
|
|
}
|
|
|
|
);
|
|
|
|
|
2019-11-08 01:03:41 +01:00
|
|
|
// Toggles the favicon to red when there are unread notifications
|
|
|
|
store.watch(
|
|
|
|
(_, getters) => getters.highlightCount,
|
|
|
|
(highlightCount) => {
|
2022-05-02 07:56:38 +02:00
|
|
|
favicon?.setAttribute("href", highlightCount > 0 ? faviconAlerted : faviconNormal);
|
2020-04-22 13:16:39 +02:00
|
|
|
|
2022-05-02 07:56:38 +02:00
|
|
|
// TODO: investigate types
|
|
|
|
const nav = navigate as any;
|
2022-05-03 08:50:59 +02:00
|
|
|
|
2022-05-02 07:56:38 +02:00
|
|
|
if (nav.setAppBadge) {
|
2020-04-22 13:16:39 +02:00
|
|
|
if (highlightCount > 0) {
|
2022-05-02 07:56:38 +02:00
|
|
|
nav.setAppBadge(highlightCount);
|
2020-04-22 13:16:39 +02:00
|
|
|
} else {
|
2022-05-02 07:56:38 +02:00
|
|
|
nav.clearAppBadge();
|
2020-04-22 13:16:39 +02:00
|
|
|
}
|
|
|
|
}
|
2019-11-08 01:03:41 +01:00
|
|
|
}
|
|
|
|
);
|
|
|
|
|
2020-03-21 21:55:36 +01:00
|
|
|
Vue.config.errorHandler = function (e) {
|
2019-11-02 20:40:59 +01:00
|
|
|
store.commit("currentUserVisibleError", `Vue error: ${e.message}`);
|
2018-09-14 17:44:26 +02:00
|
|
|
console.error(e); // eslint-disable-line
|
|
|
|
};
|