mirror of
https://github.com/thelounge/thelounge.git
synced 2024-06-29 10:40:35 +02:00
Some changes for vue next
This commit is contained in:
parent
2f8f7e7633
commit
b589ce1861
|
@ -13,7 +13,9 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const constants = require("../js/constants");
|
const constants = require("../js/constants");
|
||||||
|
import socket from "../js/socket";
|
||||||
import eventbus from "../js/eventbus";
|
import eventbus from "../js/eventbus";
|
||||||
|
import {navigate} from "../js/router";
|
||||||
import Mousetrap from "mousetrap";
|
import Mousetrap from "mousetrap";
|
||||||
import throttle from "lodash/throttle";
|
import throttle from "lodash/throttle";
|
||||||
import storage from "../js/localStorage";
|
import storage from "../js/localStorage";
|
||||||
|
@ -67,6 +69,8 @@ export default {
|
||||||
};
|
};
|
||||||
|
|
||||||
this.dayChangeTimeout = setTimeout(emitDayChange, this.msUntilNextDay());
|
this.dayChangeTimeout = setTimeout(emitDayChange, this.msUntilNextDay());
|
||||||
|
|
||||||
|
socket.open();
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
Mousetrap.unbind("esc", this.escapeKey);
|
Mousetrap.unbind("esc", this.escapeKey);
|
||||||
|
@ -124,6 +128,41 @@ export default {
|
||||||
|
|
||||||
this.$store.commit("userlistOpen", isUserlistOpen === "true");
|
this.$store.commit("userlistOpen", isUserlistOpen === "true");
|
||||||
},
|
},
|
||||||
|
switchToChannel(channel) {
|
||||||
|
navigate("RoutedChat", {id: channel.id});
|
||||||
|
},
|
||||||
|
closeChannel(channel) {
|
||||||
|
if (channel.type === "lobby") {
|
||||||
|
eventbus.emit(
|
||||||
|
"confirm-dialog",
|
||||||
|
{
|
||||||
|
title: "Remove network",
|
||||||
|
text: `Are you sure you want to quit and remove ${channel.name}? This cannot be undone.`,
|
||||||
|
button: "Remove network",
|
||||||
|
},
|
||||||
|
(result) => {
|
||||||
|
if (!result) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
channel.closed = true;
|
||||||
|
socket.emit("input", {
|
||||||
|
target: Number(channel.id),
|
||||||
|
text: "/quit",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
channel.closed = true;
|
||||||
|
|
||||||
|
socket.emit("input", {
|
||||||
|
target: Number(channel.id),
|
||||||
|
text: "/close",
|
||||||
|
});
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -31,27 +31,30 @@
|
||||||
<span
|
<span
|
||||||
class="tooltipped tooltipped-n tooltipped-no-touch"
|
class="tooltipped tooltipped-n tooltipped-no-touch"
|
||||||
aria-label="Connect to network"
|
aria-label="Connect to network"
|
||||||
><router-link
|
>
|
||||||
to="/connect"
|
<router-link v-slot="{navigate, isActive}" to="/connect" custom>
|
||||||
tag="button"
|
<button
|
||||||
active-class="active"
|
role="tab"
|
||||||
:class="['icon', 'connect']"
|
aria-label="Connect to network"
|
||||||
aria-label="Connect to network"
|
aria-controls="connect"
|
||||||
role="tab"
|
:class="['icon', 'connect', {active: isActive}]"
|
||||||
aria-controls="connect"
|
:aria-selected="isActive"
|
||||||
:aria-selected="$route.name === 'Connect'"
|
@click="navigate"
|
||||||
/></span>
|
></button>
|
||||||
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Settings"
|
</router-link>
|
||||||
><router-link
|
</span>
|
||||||
to="/settings"
|
<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Settings">
|
||||||
tag="button"
|
<router-link v-slot="{navigate, isActive}" to="/settings" custom>
|
||||||
active-class="active"
|
<button
|
||||||
:class="['icon', 'settings']"
|
role="tab"
|
||||||
aria-label="Settings"
|
aria-label="Settings"
|
||||||
role="tab"
|
aria-controls="settings"
|
||||||
aria-controls="settings"
|
:class="['icon', 'settings', {active: isActive}]"
|
||||||
:aria-selected="$route.name === 'Settings'"
|
:aria-selected="isActive"
|
||||||
/></span>
|
@click="navigate"
|
||||||
|
></button>
|
||||||
|
</router-link>
|
||||||
|
</span>
|
||||||
<span
|
<span
|
||||||
class="tooltipped tooltipped-n tooltipped-no-touch"
|
class="tooltipped tooltipped-n tooltipped-no-touch"
|
||||||
:aria-label="
|
:aria-label="
|
||||||
|
@ -59,20 +62,23 @@
|
||||||
? 'Help\n(update available)'
|
? 'Help\n(update available)'
|
||||||
: 'Help'
|
: 'Help'
|
||||||
"
|
"
|
||||||
><router-link
|
>
|
||||||
to="/help"
|
<router-link v-slot="{navigate, isActive}" to="/help" custom>
|
||||||
tag="button"
|
<button
|
||||||
active-class="active"
|
role="tab"
|
||||||
:class="[
|
aria-label="Help"
|
||||||
'icon',
|
aria-controls="help"
|
||||||
'help',
|
:class="[
|
||||||
{notified: $store.state.serverConfiguration.isUpdateAvailable},
|
'icon',
|
||||||
]"
|
'help',
|
||||||
aria-label="Help"
|
{active: isActive},
|
||||||
role="tab"
|
{notified: $store.state.serverConfiguration.isUpdateAvailable},
|
||||||
aria-controls="help"
|
]"
|
||||||
:aria-selected="$route.name === 'Help'"
|
:aria-selected="isActive"
|
||||||
/></span>
|
@click="navigate"
|
||||||
|
></button>
|
||||||
|
</router-link>
|
||||||
|
</span>
|
||||||
</footer>
|
</footer>
|
||||||
</aside>
|
</aside>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -554,6 +554,10 @@ p {
|
||||||
|
|
||||||
/* End icons */
|
/* End icons */
|
||||||
|
|
||||||
|
#viewport-mount {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
#viewport {
|
#viewport {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
|
@ -48,7 +48,7 @@
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body class="<%- public ? " public" : "" %>" data-transports="<%- JSON.stringify(transports) %>">
|
<body class="<%- public ? " public" : "" %>" data-transports="<%- JSON.stringify(transports) %>">
|
||||||
<div id="viewport"></div>
|
<div id="viewport-mount"></div>
|
||||||
<div id="loading">
|
<div id="loading">
|
||||||
<div class="window">
|
<div class="window">
|
||||||
<div id="loading-status-container">
|
<div id="loading-status-container">
|
||||||
|
|
|
@ -2,10 +2,7 @@
|
||||||
|
|
||||||
const constants = require("./constants");
|
const constants = require("./constants");
|
||||||
|
|
||||||
import Vue from "vue";
|
import {createRouter, createWebHashHistory} from "vue-router";
|
||||||
import VueRouter from "vue-router";
|
|
||||||
|
|
||||||
Vue.use(VueRouter);
|
|
||||||
|
|
||||||
import SignIn from "../components/Windows/SignIn.vue";
|
import SignIn from "../components/Windows/SignIn.vue";
|
||||||
import Connect from "../components/Windows/Connect.vue";
|
import Connect from "../components/Windows/Connect.vue";
|
||||||
|
@ -16,7 +13,8 @@ import NetworkEdit from "../components/Windows/NetworkEdit.vue";
|
||||||
import RoutedChat from "../components/RoutedChat.vue";
|
import RoutedChat from "../components/RoutedChat.vue";
|
||||||
import store from "./store";
|
import store from "./store";
|
||||||
|
|
||||||
const router = new VueRouter({
|
const router = createRouter({
|
||||||
|
history: createWebHashHistory(),
|
||||||
routes: [
|
routes: [
|
||||||
{
|
{
|
||||||
name: "SignIn",
|
name: "SignIn",
|
||||||
|
@ -100,6 +98,9 @@ router.beforeEach((to, from, next) => {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
next();
|
||||||
|
return; // TODO
|
||||||
|
|
||||||
// Handle closing image viewer with the browser back button
|
// Handle closing image viewer with the browser back button
|
||||||
if (!router.app.$refs.app) {
|
if (!router.app.$refs.app) {
|
||||||
next();
|
next();
|
||||||
|
@ -144,7 +145,7 @@ router.afterEach((to) => {
|
||||||
});
|
});
|
||||||
|
|
||||||
function navigate(routeName, params = {}) {
|
function navigate(routeName, params = {}) {
|
||||||
if (router.currentRoute.name) {
|
if (router.currentRoute.value.name) {
|
||||||
router.push({name: routeName, params}).catch(() => {});
|
router.push({name: routeName, params}).catch(() => {});
|
||||||
} else {
|
} else {
|
||||||
// If current route is null, replace the history entry
|
// If current route is null, replace the history entry
|
||||||
|
|
|
@ -80,7 +80,7 @@ function showSignIn() {
|
||||||
window.g_TheLoungeRemoveLoading();
|
window.g_TheLoungeRemoveLoading();
|
||||||
}
|
}
|
||||||
|
|
||||||
if (router.currentRoute.name !== "SignIn") {
|
if (router.currentRoute.value.name !== "SignIn") {
|
||||||
navigate("SignIn");
|
navigate("SignIn");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
import Vue from "vue";
|
import {nextTick} from "vue";
|
||||||
import socket from "../socket";
|
import socket from "../socket";
|
||||||
import storage from "../localStorage";
|
import storage from "../localStorage";
|
||||||
import {router, switchToChannel, navigate} from "../router";
|
import {router, switchToChannel, navigate} from "../router";
|
||||||
|
@ -25,13 +25,16 @@ socket.on("init", function (data) {
|
||||||
window.g_TheLoungeRemoveLoading();
|
window.g_TheLoungeRemoveLoading();
|
||||||
}
|
}
|
||||||
|
|
||||||
Vue.nextTick(() => {
|
nextTick(() => {
|
||||||
// If we handled query parameters like irc:// links or just general
|
// If we handled query parameters like irc:// links or just general
|
||||||
// connect parameters in public mode, then nothing to do here
|
// connect parameters in public mode, then nothing to do here
|
||||||
if (!handleQueryParams()) {
|
if (!handleQueryParams()) {
|
||||||
// If we are on an unknown route or still on SignIn component
|
// If we are on an unknown route or still on SignIn component
|
||||||
// then we can open last known channel on server, or Connect window if none
|
// then we can open last known channel on server, or Connect window if none
|
||||||
if (!router.currentRoute.name || router.currentRoute.name === "SignIn") {
|
if (
|
||||||
|
!router.currentRoute.value.name ||
|
||||||
|
router.currentRoute.value.name === "SignIn"
|
||||||
|
) {
|
||||||
const channel = store.getters.findChannel(data.active);
|
const channel = store.getters.findChannel(data.active);
|
||||||
|
|
||||||
if (channel) {
|
if (channel) {
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
import Vue from "vue";
|
import {nextTick} from "vue";
|
||||||
|
|
||||||
import socket from "../socket";
|
import socket from "../socket";
|
||||||
import store from "../store";
|
import store from "../store";
|
||||||
|
@ -16,7 +16,7 @@ socket.on("more", function (data) {
|
||||||
data.totalMessages > channel.channel.messages.length + data.messages.length;
|
data.totalMessages > channel.channel.messages.length + data.messages.length;
|
||||||
channel.channel.messages.unshift(...data.messages);
|
channel.channel.messages.unshift(...data.messages);
|
||||||
|
|
||||||
Vue.nextTick(() => {
|
nextTick(() => {
|
||||||
channel.channel.historyLoading = false;
|
channel.channel.historyLoading = false;
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,7 +1,5 @@
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
import Vue from "vue";
|
|
||||||
|
|
||||||
import socket from "../socket";
|
import socket from "../socket";
|
||||||
import store from "../store";
|
import store from "../store";
|
||||||
|
|
||||||
|
@ -16,6 +14,7 @@ socket.on("msg:preview", function (data) {
|
||||||
const previewIndex = message.previews.findIndex((m) => m.link === data.preview.link);
|
const previewIndex = message.previews.findIndex((m) => m.link === data.preview.link);
|
||||||
|
|
||||||
if (previewIndex > -1) {
|
if (previewIndex > -1) {
|
||||||
Vue.set(message.previews, previewIndex, data.preview);
|
// TODO: Does this work?
|
||||||
|
message.previews[previewIndex] = data.preview;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,7 +1,5 @@
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
import Vue from "vue";
|
|
||||||
|
|
||||||
import socket from "../socket";
|
import socket from "../socket";
|
||||||
import store from "../store";
|
import store from "../store";
|
||||||
import {switchToChannel} from "../router";
|
import {switchToChannel} from "../router";
|
||||||
|
@ -61,7 +59,8 @@ socket.on("network:info", function (data) {
|
||||||
}
|
}
|
||||||
|
|
||||||
for (const key in data) {
|
for (const key in data) {
|
||||||
Vue.set(network, key, data[key]);
|
// TODO: does this work in vue?
|
||||||
|
network[key] = data[key];
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -1,12 +1,9 @@
|
||||||
import Vue from "vue";
|
import {createStore} from "vuex";
|
||||||
import Vuex from "vuex";
|
|
||||||
import {createSettingsStore} from "./store-settings";
|
import {createSettingsStore} from "./store-settings";
|
||||||
import storage from "./localStorage";
|
import storage from "./localStorage";
|
||||||
|
|
||||||
const appName = document.title;
|
const appName = document.title;
|
||||||
|
|
||||||
Vue.use(Vuex);
|
|
||||||
|
|
||||||
function detectDesktopNotificationState() {
|
function detectDesktopNotificationState() {
|
||||||
if (!("Notification" in window)) {
|
if (!("Notification" in window)) {
|
||||||
return "unsupported";
|
return "unsupported";
|
||||||
|
@ -17,7 +14,7 @@ function detectDesktopNotificationState() {
|
||||||
return "blocked";
|
return "blocked";
|
||||||
}
|
}
|
||||||
|
|
||||||
const store = new Vuex.Store({
|
const store = createStore({
|
||||||
state: {
|
state: {
|
||||||
appLoaded: false,
|
appLoaded: false,
|
||||||
activeChannel: null,
|
activeChannel: null,
|
||||||
|
|
|
@ -3,12 +3,11 @@
|
||||||
const constants = require("./constants");
|
const constants = require("./constants");
|
||||||
|
|
||||||
import "../css/style.css";
|
import "../css/style.css";
|
||||||
import Vue from "vue";
|
import {createApp} from "vue";
|
||||||
import store from "./store";
|
import store from "./store";
|
||||||
import App from "../components/App.vue";
|
import App from "../components/App.vue";
|
||||||
import storage from "./localStorage";
|
import storage from "./localStorage";
|
||||||
import {router, navigate} from "./router";
|
import {router} from "./router";
|
||||||
import socket from "./socket";
|
|
||||||
import eventbus from "./eventbus";
|
import eventbus from "./eventbus";
|
||||||
|
|
||||||
import "./socket-events";
|
import "./socket-events";
|
||||||
|
@ -19,57 +18,10 @@ const favicon = document.getElementById("favicon");
|
||||||
const faviconNormal = favicon.getAttribute("href");
|
const faviconNormal = favicon.getAttribute("href");
|
||||||
const faviconAlerted = favicon.dataset.other;
|
const faviconAlerted = favicon.dataset.other;
|
||||||
|
|
||||||
new Vue({
|
const vueApp = createApp(App);
|
||||||
el: "#viewport",
|
vueApp.use(store);
|
||||||
router,
|
vueApp.use(router);
|
||||||
mounted() {
|
vueApp.mount("#viewport-mount");
|
||||||
socket.open();
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
switchToChannel(channel) {
|
|
||||||
navigate("RoutedChat", {id: channel.id});
|
|
||||||
},
|
|
||||||
closeChannel(channel) {
|
|
||||||
if (channel.type === "lobby") {
|
|
||||||
eventbus.emit(
|
|
||||||
"confirm-dialog",
|
|
||||||
{
|
|
||||||
title: "Remove network",
|
|
||||||
text: `Are you sure you want to quit and remove ${channel.name}? This cannot be undone.`,
|
|
||||||
button: "Remove network",
|
|
||||||
},
|
|
||||||
(result) => {
|
|
||||||
if (!result) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
channel.closed = true;
|
|
||||||
socket.emit("input", {
|
|
||||||
target: Number(channel.id),
|
|
||||||
text: "/quit",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
channel.closed = true;
|
|
||||||
|
|
||||||
socket.emit("input", {
|
|
||||||
target: Number(channel.id),
|
|
||||||
text: "/close",
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
|
||||||
render(createElement) {
|
|
||||||
return createElement(App, {
|
|
||||||
ref: "app",
|
|
||||||
props: this,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
store,
|
|
||||||
});
|
|
||||||
|
|
||||||
store.watch(
|
store.watch(
|
||||||
(state) => state.sidebarOpen,
|
(state) => state.sidebarOpen,
|
||||||
|
@ -112,7 +64,7 @@ store.watch(
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
Vue.config.errorHandler = function (e) {
|
vueApp.config.errorHandler = function (e) {
|
||||||
store.commit("currentUserVisibleError", `Vue error: ${e.message}`);
|
store.commit("currentUserVisibleError", `Vue error: ${e.message}`);
|
||||||
console.error(e); // eslint-disable-line
|
console.error(e); // eslint-disable-line
|
||||||
};
|
};
|
||||||
|
|
|
@ -87,6 +87,10 @@ const config = {
|
||||||
json3: "JSON", // socket.io uses json3.js, but we do not target any browsers that need it
|
json3: "JSON", // socket.io uses json3.js, but we do not target any browsers that need it
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
|
new webpack.DefinePlugin({
|
||||||
|
__VUE_OPTIONS_API__: true,
|
||||||
|
__VUE_PROD_DEVTOOLS__: false,
|
||||||
|
}),
|
||||||
new VueLoaderPlugin(),
|
new VueLoaderPlugin(),
|
||||||
new MiniCssExtractPlugin({
|
new MiniCssExtractPlugin({
|
||||||
filename: "css/style.css",
|
filename: "css/style.css",
|
||||||
|
|
Loading…
Reference in a new issue