Исправил прокрутку

This commit is contained in:
saber-nyan 2019-05-18 11:24:27 +03:00
parent 6542e06ecd
commit c7d16103d7
No known key found for this signature in database
GPG Key ID: 7B069E9C295E6B4A
2 changed files with 23 additions and 3 deletions

View File

@ -39,6 +39,11 @@ export default {
name: 'home',
params: {servicePort: this.$props.servicePort, streamId: newId,},
});
document.getElementById(`stream-${newId}`).scrollIntoView({
behavior: 'smooth',
block: 'center',
inline: 'center',
});
} else if (e.key === 'ArrowDown') {
e.preventDefault();
const index = this.$data.streams.findIndex(e => e.id === this.$props.streamId);
@ -49,6 +54,11 @@ export default {
name: 'home',
params: {servicePort: this.$props.servicePort, streamId: newId,},
});
document.getElementById(`stream-${newId}`).scrollIntoView({
behavior: 'smooth',
block: 'center',
inline: 'center',
});
} else if (e.key === 'Home') {
const newStream = this.$data.streams[0];
if (!newStream) return;
@ -57,6 +67,11 @@ export default {
name: 'home',
params: {servicePort: this.$props.servicePort, streamId: newId,},
});
document.getElementById(`stream-${newId}`).scrollIntoView({
behavior: 'smooth',
block: 'center',
inline: 'center',
});
} else if (e.key === 'End') {
const newStream = this.$data.streams[this.$data.streams.length - 1];
if (!newStream) return;
@ -65,6 +80,11 @@ export default {
name: 'home',
params: {servicePort: this.$props.servicePort, streamId: newId,},
});
document.getElementById(`stream-${newId}`).scrollIntoView({
behavior: 'smooth',
block: 'center',
inline: 'center',
});
}
},
}
@ -127,10 +147,10 @@ export default {
},
components: {Stream, InfiniteLoading,},
mounted() {
document.addEventListener('keyup', this.$data.navigationKeysCallback);
document.addEventListener('keydown', this.$data.navigationKeysCallback);
},
beforeDestroy() {
document.removeEventListener('keyup', this.$data.navigationKeysCallback);
document.removeEventListener('keydown', this.$data.navigationKeysCallback);
},
}
</script>

View File

@ -1,5 +1,5 @@
<template>
<li class="nav-item">
<li :id="`stream-${id}`" class="nav-item">
<router-link class="nav-link" active-class="active" :to="{ name: 'home', params: { servicePort: servicePort, streamId: id}, query: $route.query }">
#{{id}} {{proto}}<br/>
{{new Date(startTime).toLocaleDateString('ru-RU', {month: '2-digit', day: '2-digit', hour:'2-digit', minute: '2-digit', second: '2-digit'})}}