ad/packmate
1
0
Fork 0
mirror of https://github.com/Av0idD4rk/packmate.git synced 2026-10-23 16:31:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

Навигация между стримами по Arrow keys

Browse Source
This commit is contained in:
saber-nyan 2019-11-26 01:34:34 +03:00
parent 3d4cdeccc5
commit 4933cf5f41
No known key found for this signature in database
GPG Key ID: 7B069E9C295E6B4A
3 changed files with 91 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/NavbarService.vue
View File

@ -1,5 +1,6 @@
<template>
<router-link tag="li" class="nav-item text-nowrap edit-button" :to="{name:'stream', params: {servicePort: port}}">
<router-link tag="li" class="nav-item text-nowrap edit-button"
:to="{name:'stream', params: {servicePort: port}, query: this.$route.query}">
<a class="nav-link">{{name}} #{{port}}</a>
<a class="nav-link" style="cursor: pointer" @click.stop.prevent="editService">

88
src/components/Sidebar.vue
View File

@ -15,7 +15,8 @@
@click.stop.prevent="toggleHexdump">
<i :class="this.$store.state.hexdumpMode ? 'far fa-file-code' : 'fas fa-align-left'"/>
</button>
<button type="button" class="btn btn-sm btn-outline-info" style="float: right;">
<button type="button" class="btn btn-sm btn-outline-info" style="float: right;"
@click.stop.prevent="scrollUp">
<i class="fas fa-angle-double-up"/>
</button>
</div>
@ -39,6 +40,70 @@
data() {
return {
streams: [],
navigationKeysCallback: (e) => {
if (!e.ctrlKey) return;
if (e.key === 'ArrowUp') {
e.preventDefault();
const index = this.streams.findIndex(e => e.id === this.$route.params.streamId);
const newStream = this.streams[index - 1];
if (!newStream) return;
const newId = newStream.id;
this.$router.push({
name: 'stream',
params: {servicePort: this.$route.params.servicePort, streamId: newId,},
query: this.$route.query,
});
document.getElementById(`stream-${newId}`).scrollIntoView({
behavior: 'smooth',
block: 'center',
inline: 'center',
});
} else if (e.key === 'ArrowDown') {
e.preventDefault();
const index = this.streams.findIndex(e => e.id === this.$route.params.streamId);
const newStream = this.streams[index + 1];
if (!newStream) return;
const newId = newStream.id;
this.$router.push({
name: 'stream',
params: {servicePort: this.$route.params.servicePort, streamId: newId,},
query: this.$route.query,
});
document.getElementById(`stream-${newId}`).scrollIntoView({
behavior: 'smooth',
block: 'center',
inline: 'center',
});
} else if (e.key === 'Home') {
const newStream = this.streams[0];
if (!newStream) return;
const newId = newStream.id;
this.$router.push({
name: 'stream',
params: {servicePort: this.$route.params.servicePort, streamId: newId,},
query: this.$route.query,
});
document.getElementById(`stream-${newId}`).scrollIntoView({
behavior: 'smooth',
block: 'center',
inline: 'center',
});
} else if (e.key === 'End') {
const newStream = this.streams[this.streams.length - 1];
if (!newStream) return;
const newId = newStream.id;
this.$router.push({
name: 'stream',
params: {servicePort: this.$route.params.servicePort, streamId: newId,},
query: this.$route.query,
});
document.getElementById(`stream-${newId}`).scrollIntoView({
behavior: 'smooth',
block: 'center',
inline: 'center',
});
}
},
};
},
watch: {
@ -108,6 +173,27 @@
this.streams.unshift(stream);
},
scrollUp() {
const newStream = this.streams[0];
if (!newStream) return;
const newId = newStream.id;
this.$router.push({
name: 'stream',
params: {servicePort: this.$route.params.servicePort, streamId: newId,},
query: this.$route.query,
});
document.getElementById(`stream-${newId}`).scrollIntoView({
behavior: 'smooth',
block: 'center',
inline: 'center',
});
},
},
mounted() {
document.addEventListener('keydown', this.navigationKeysCallback);
},
beforeDestroy() {
document.removeEventListener('keydown', this.navigationKeysCallback);
},
components: {
SidebarStream,

4
src/components/SidebarStream.vue
View File

@ -1,7 +1,7 @@
<template>
<li class="nav-item" :class="{highlight: favorite0}" style="transition: all .5s;">
<li :id="`stream-${stream.id}`" class="nav-item" :class="{highlight: favorite0}" style="transition: all .5s;">
<router-link class="nav-link"
:to="{name: 'stream', params: {servicePort: stream.service, streamId: stream.id}}">
:to="{name: 'stream', params: {servicePort: stream.service, streamId: stream.id}, query: this.$route.query}">
<a @click.stop.prevent="toggleFavorite">
<i class="fa-star" style="color: #DC3545" :class="favorite0 ? 'fas' : 'far'"/>
</a>