butter/keanu-weblite
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Improve navigation

Browse source
This commit is contained in:
N-Pex 2021-01-11 17:42:58 +01:00
parent d5945d675e
commit 6a22d99c17
12 changed files with 198 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

61
package-lock.json generated
View file

@ -23,7 +23,8 @@
"vue-resize": "^0.5.0",
"vue-router": "^3.2.0",
"vuetify": "^2.2.11",
"vuex": "^3.5.1"
"vuex": "^3.5.1",
"vuex-persist": "^3.1.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
@ -2753,9 +2754,9 @@
"integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA=="
},
"node_modules/axios": {
"version": "0.21.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.21.0.tgz",
"integrity": "sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==",
"version": "0.21.1",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
"integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
"dependencies": {
"follow-redirects": "^1.10.0"
}
@ -13580,6 +13581,31 @@
"vue": "^2.0.0"
}
},
"node_modules/vuex-persist": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/vuex-persist/-/vuex-persist-3.1.3.tgz",
"integrity": "sha512-QWOpP4SxmJDC5Y1+0+Yl/F4n7z27syd1St/oP+IYCGe0X0GFio0Zan6kngZFufdIhJm+5dFGDo3VG5kdkCGeRQ==",
"dependencies": {
"deepmerge": "^4.2.2",
"flatted": "^3.0.5"
},
"peerDependencies": {
"vuex": ">=2.5"
}
},
"node_modules/vuex-persist/node_modules/deepmerge": {
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
"integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==",
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/vuex-persist/node_modules/flatted": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.1.0.tgz",
"integrity": "sha512-tW+UkmtNg/jv9CSofAKvgVcO7c2URjhTdW1ZTkcAritblu8tajiYy7YisnIflEwtKssCtOxpnBRoCB7iap0/TA=="
},
"node_modules/watchpack": {
"version": "1.7.5",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
@ -17011,9 +17037,9 @@
"integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA=="
},
"axios": {
"version": "0.21.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.21.0.tgz",
"integrity": "sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==",
"version": "0.21.1",
"resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz",
"integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==",
"requires": {
"follow-redirects": "^1.10.0"
}
@ -25728,6 +25754,27 @@
"integrity": "sha512-W74OO2vCJPs9/YjNjW8lLbj+jzT24waTo2KShI8jLvJW8OaIkgb3wuAMA7D+ZiUxDOx3ubwSZTaJBip9G8a3aQ==",
"requires": {}
},
"vuex-persist": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/vuex-persist/-/vuex-persist-3.1.3.tgz",
"integrity": "sha512-QWOpP4SxmJDC5Y1+0+Yl/F4n7z27syd1St/oP+IYCGe0X0GFio0Zan6kngZFufdIhJm+5dFGDo3VG5kdkCGeRQ==",
"requires": {
"deepmerge": "^4.2.2",
"flatted": "^3.0.5"
},
"dependencies": {
"deepmerge": {
"version": "4.2.2",
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
"integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
},
"flatted": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.1.0.tgz",
"integrity": "sha512-tW+UkmtNg/jv9CSofAKvgVcO7c2URjhTdW1ZTkcAritblu8tajiYy7YisnIflEwtKssCtOxpnBRoCB7iap0/TA=="
}
}
},
"watchpack": {
"version": "1.7.5",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",

3
package.json
View file

@ -24,7 +24,8 @@
"vue-resize": "^0.5.0",
"vue-router": "^3.2.0",
"vuetify": "^2.2.11",
"vuex": "^3.5.1"
"vuex": "^3.5.1",
"vuex-persist": "^3.1.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",

2
src/App.vue
View file

@ -69,7 +69,7 @@ export default {
},
logOut() {
this.$store.dispatch("auth/logout");
this.$navigation.push("/login", true);
this.$navigation.push("/login", -1);
},
},
computed: {

82
src/components/Chat.vue
View file

@ -8,7 +8,7 @@
v-on:scroll="onScroll"
@click.prevent="closeContextMenuIfOpen"
>
<div class="message-operations-strut">
<div ref="messageOperationsStrut" class="message-operations-strut">
<message-operations
:style="opStyle"
v-on:close="showContextMenu = false"
@ -261,6 +261,8 @@ export default {
editedEvent: null,
replyToEvent: null,
showContextMenu: false,
showContextMenuAnchor: null,
/**
* Current chat container size. We need to keep track of this so that if and when
* a soft keyboard is shown/hidden we can restore the scroll position correctly.
@ -287,14 +289,14 @@ export default {
},
computed: {
currentUser() {
return this.$store.state.auth.user;
},
room() {
return this.$matrix.currentRoom;
},
roomId() {
if (!this.room) {
return null;
}
return this.room.roomId;
return this.$matrix.currentRoomId;
},
attachButtonDisabled() {
return this.editedEvent != null || this.replyToEvent != null || this.currentInput.length > 0;
@ -316,11 +318,17 @@ export default {
// Calculate where to show the context menu.
//
const ref = this.selectedEvent && this.$refs[this.selectedEvent.getId()];
var top = 0;
var left = 0;
if (ref && ref[0]) {
const offset = ref[0].offsetTop - this.scrollPosition.node.offsetTop;
return "top:" + offset + "px";
if (this.showContextMenuAnchor) {
var rectAnchor = this.showContextMenuAnchor.getBoundingClientRect();
var rectChat = this.$refs.messageOperationsStrut.getBoundingClientRect();
top = rectAnchor.top - rectChat.top;
left = rectAnchor.left - rectChat.left;
}
}
return "top:0px";
return "top:" + top + "px;left:" + left + "px";
}
},
@ -337,25 +345,57 @@ export default {
this.typingMembers = [];
if (!room) {
// Public room?
if (this.roomId && this.roomId.startsWith('#')) {
this.onRoomNotJoined();
}
return; // no room
}
this.timelineWindow = new TimelineWindow(
this.$matrix.matrixClient,
this.room.getUnfilteredTimelineSet(),
{}
);
this.timelineWindow.load(null, 20).then(() => {
this.events = this.timelineWindow.getEvents();
this.$nextTick(() => {
this.paginateBackIfNeeded();
});
});
// Joined?
if (room.hasMembershipState(this.currentUser.user_id, "join")) {
// Yes, load everything
this.onRoomJoined();
} else {
this.onRoomNotJoined();
}
// this.$matrix
// .getPublicRoomInfo(this.roomId)
// .then((room) => {
// console.log("Found room:", room);
// this.roomName = room.name;
// this.roomAvatar = room.avatar;
// this.waitingForInfo = false;
// })
// .catch((err) => {
// console.log("Could not find room info", err);
// this.waitingForInfo = false;
// });
// },
}
},
},
methods: {
onRoomJoined() {
this.timelineWindow = new TimelineWindow(
this.$matrix.matrixClient,
this.room.getUnfilteredTimelineSet(),
{}
);
this.timelineWindow.load(null, 20).then(() => {
this.events = this.timelineWindow.getEvents();
this.$nextTick(() => {
this.paginateBackIfNeeded();
});
});
},
onRoomNotJoined() {
this.$navigation.push({ name: "Join", hash: this.roomId }, 0);
},
touchX(event) {
if (event.type.indexOf("mouse") !== -1) {
return event.clientX;
@ -721,13 +761,15 @@ export default {
});
},
showContextMenuForEvent(event) {
showContextMenuForEvent(e) {
const event = e.event;
const ref = this.$refs[event.getId()];
if (ref) {
console.log("Got the ref", ref);
}
this.selectedEvent = event;
this.showContextMenu = true;
this.showContextMenuAnchor = e.anchor;
},
closeContextMenuIfOpen(e) {

6
src/components/ChatHeader.vue
View file

@ -66,7 +66,11 @@ export default {
},
updateMemberCount() {
this.memberCount = this.room.getJoinedMemberCount();
if (!this.room) {
this.memberCount = 0;
} else {
this.memberCount = this.room.getJoinedMemberCount();
}
},
showRoomInfo() {

13
src/components/Home.vue Normal file
View file

@ -0,0 +1,13 @@
<template>
<div>
HOME
</div>
</template>
<script>
export default {
};
</script>
<style lang="scss">
</style>

29
src/components/Join.vue
View file

@ -7,6 +7,7 @@
small
@click.stop="handleLogin"
:loading="loading"
v-if="!currentUser"
>Login</v-btn
>
@ -37,8 +38,18 @@
block
@click.stop="handleJoin"
:loading="loading"
v-if="!currentUser"
>Join as guest</v-btn
>
<v-btn
class="btn-dark"
large
block
@click.stop="handleJoin"
:loading="loading"
v-else
>Join room</v-btn
>
<div class="join-privacy">
Enhance your physical privacy. <a href="#">Learn how</a>
@ -75,16 +86,14 @@ export default {
this.$matrix
.getMatrixClient(this.currentUser)
.then(() => {
const room = self.$matrix.getRoom(self.roomId);
if (room) {
self.$matrix.setCurrentRoom(room); // Go to this room, now or when joined.
self.$matrix.setCurrentRoomId(self.roomId); // Go to this room, now or when joined.
// Already joined?
if (room.hasMembershipState(self.currentUser.user_id, "join")) {
const room = self.$matrix.getRoom(self.roomId);
if (room && room.hasMembershipState(self.currentUser.user_id, "join")) {
// Yes, go to room
self.$navigation.push({ name: "Chat" }, true);
self.$navigation.push({ name: "Chat" }, -1);
return;
}
}
this.waitingForMembership = false;
})
@ -113,7 +122,7 @@ export default {
},
methods: {
handleLogin() {
this.$navigation.push({ name: "Login" }, false);
this.$navigation.push({ name: "Login" }, 1);
},
handleOpenApp() {
@ -135,10 +144,12 @@ export default {
return this.$matrix.matrixClient.joinRoom(this.roomId);
})
.then((room) => {
this.$matrix.setCurrentRoom(room);
this.$matrix.setCurrentRoomId(room.roomId);
this.loading = false;
this.loadingMessage = null;
this.$navigation.push({ name: "Chat" }, true);
this.$nextTick(() => {
this.$navigation.push({ name: "Chat" }, -1);
});
})
.catch((err) => {
// TODO - handle error

7
src/components/Login.vue
View file

@ -70,12 +70,12 @@ export default {
return this.$store.state.auth.user;
},
showBackArrow() {
return this.$navigation.canPop();
return this.$navigation && this.$navigation.canPop();
}
},
created() {
if (this.loggedIn) {
this.$navigation.push({name: "Chat"}, true);
this.$navigation.push({name: "Chat"}, -1);
}
},
watch: {
@ -110,12 +110,11 @@ export default {
},
methods: {
handleLogin() {
this.$navigation.push({name: "Chat"}, true);
if (this.user.username && this.user.password) {
this.loading = true;
this.$store.dispatch("auth/login", this.user).then(
() => {
this.$navigation.push({name: "Chat"}, true);
this.$navigation.push({name: "Chat"}, -1);
},
(error) => {
this.loading = false;

6
src/main.js
View file

@ -30,12 +30,12 @@ Vue.use((Vue) => {
};
});
Vue.use(navigation, router);
new Vue({
vuetify,
router,
store,
matrix,
render: h => h(App)
}).$mount('#app')
Vue.use(navigation, router);
}).$mount('#app');

19
src/router/index.js
View file

@ -1,5 +1,6 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
//import Home from '../components/Home.vue'
import Chat from '../components/Chat.vue'
import Login from '../components/Login.vue'
@ -8,6 +9,11 @@ Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Chat
},
{
path: '/room/',
name: 'Chat',
component: Chat
},
@ -25,6 +31,7 @@ const routes = [
},
{
path: '/join/',
name: 'Join',
component: () => import('../components/Join.vue'),
props: true
},
@ -32,13 +39,21 @@ const routes = [
const router = new VueRouter({
routes
})
});
router.beforeEach((to, from, next) => {
const publicPages = ['/login'];
const authRequired = !publicPages.includes(to.path) && !to.path.startsWith('/join/');
var authRequired = !publicPages.includes(to.path) && !to.path.startsWith('/join');
const loggedIn = localStorage.getItem('user');
if (to.path.startsWith('/room/')) {
if (to.hash && to.hash.startsWith('#')) {
//Invite to public room
router.app.$matrix.setCurrentRoomId(to.hash);
authRequired = false;
}
}
// trying to access a restricted page + not logged in
// redirect to login page
if (authRequired && !loggedIn) {

14
src/services/matrix.service.js
View file

@ -125,7 +125,6 @@ export default {
initClient() {
this.reloadRooms();
this.matrixClientReady = true;
this.currentRoom = null;
this.currentRoom = this.getRoom(this.currentRoomId);
this.matrixClient.emit('Matrix.initialized', this.matrixClient);
},
@ -250,15 +249,10 @@ export default {
this.rooms.forEach(room => {
Vue.set(room, "avatar", room.getAvatarUrl(this.matrixClient.getHomeserverUrl(), 80, 80, "scale", true));
});
},
setCurrentRoom(room) {
// If we don't know about this room yet (e.g. we just joined)
// add it to our list.
if (!this.getRoom(room.roomId)) {
this.rooms.push(room);
if (this.currentRoom == null && this.currentRoomId) {
// Try to set it!
this.currentRoom = this.getRoom(this.currentRoomId);
}
this.setCurrentRoomId(room.roomId);
},
setCurrentRoomId(roomId) {
@ -278,7 +272,7 @@ export default {
if (!room && this.matrixClient) {
room = this.matrixClient.getRoom(roomId);
}
return room;
return room || null;
},
on(event, handler) {

28
src/services/navigation.service.js
View file

@ -3,12 +3,6 @@ export default {
var routes = [];
var zeroIndex = undefined;
// window.addEventListener('popstate', () => {
// if (routes.length > 1) {
// routes.splice(routes.length - 1);
// }
// });
router.beforeResolve((to, ignoredfrom, next) => {
if (!zeroIndex) {
routes = [to];
@ -32,21 +26,27 @@ export default {
})
const navigationService = {
push(route, asRoot) {
asRoot = asRoot || false;
//var resolved = router.resolve(route);
//resolved.route.meta = route.meta || {};
if (asRoot) {
const i = routes.length - 1; // window.history.length - zeroIndex;
/***
* @param mode Mode of operation. -1 = push as root, 0 = replace, 1 = normal push
*/
push(route, mode) {
if (mode === undefined) {
mode = 1;
}
if (mode == -1) {
const i = routes.length - 1;
routes = [route];
//resolved.route.meta.index = 0;
if (i > 0) {
router.go(-i);
} else {
router.replace(route).catch((ignoredErr) => {});
}
} else if (mode == 0) {
// Replace
routes.pop()
routes.push(route);
router.replace(route).catch((ignoredErr) => {});
} else {
//resolved.route.meta.index = routes.length;
routes.push(route);
router.push(route).catch((ignoredErr) => {});
}