diff options
-rw-r--r-- | viewer/src/@types/scrollposition.d.ts | 20 | ||||
-rw-r--r-- | viewer/src/views/MainLayout.vue | 15 |
2 files changed, 33 insertions, 2 deletions
diff --git a/viewer/src/@types/scrollposition.d.ts b/viewer/src/@types/scrollposition.d.ts new file mode 100644 index 0000000..d4fad52 --- /dev/null +++ b/viewer/src/@types/scrollposition.d.ts | |||
@@ -0,0 +1,20 @@ | |||
1 | /* ldgallery - A static generator which turns a collection of tagged | ||
2 | -- pictures into a searchable web gallery. | ||
3 | -- | ||
4 | -- Copyright (C) 2019-2020 Guillaume FOUET | ||
5 | -- | ||
6 | -- This program is free software: you can redistribute it and/or modify | ||
7 | -- it under the terms of the GNU Affero General Public License as | ||
8 | -- published by the Free Software Foundation, either version 3 of the | ||
9 | -- License, or (at your option) any later version. | ||
10 | -- | ||
11 | -- This program is distributed in the hope that it will be useful, | ||
12 | -- but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
13 | -- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
14 | -- GNU Affero General Public License for more details. | ||
15 | -- | ||
16 | -- You should have received a copy of the GNU Affero General Public License | ||
17 | -- along with this program. If not, see <https://www.gnu.org/licenses/>. | ||
18 | */ | ||
19 | |||
20 | type ScrollPosition = { [index: string]: number } \ No newline at end of file | ||
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue index 31b0440..12388a9 100644 --- a/viewer/src/views/MainLayout.vue +++ b/viewer/src/views/MainLayout.vue | |||
@@ -21,7 +21,7 @@ | |||
21 | <div :class="{'fullscreen': $uiStore.fullscreen, 'fullwidth': $uiStore.fullWidth}"> | 21 | <div :class="{'fullscreen': $uiStore.fullscreen, 'fullwidth': $uiStore.fullWidth}"> |
22 | <panel-top v-if="!isLoading" class="layout layout-top" /> | 22 | <panel-top v-if="!isLoading" class="layout layout-top" /> |
23 | <panel-left v-if="!isLoading" class="layout layout-left" /> | 23 | <panel-left v-if="!isLoading" class="layout layout-left" /> |
24 | <router-view v-if="!isLoading" class="layout layout-content scrollbar" /> | 24 | <router-view v-if="!isLoading" ref="content" class="layout layout-content scrollbar" /> |
25 | <b-loading :active="isLoading" is-full-page /> | 25 | <b-loading :active="isLoading" is-full-page /> |
26 | <ld-key-press :keycode="27" @action="$uiStore.fullscreen=false" /> | 26 | <ld-key-press :keycode="27" @action="$uiStore.fullscreen=false" /> |
27 | 27 | ||
@@ -32,20 +32,31 @@ | |||
32 | </template> | 32 | </template> |
33 | 33 | ||
34 | <script lang="ts"> | 34 | <script lang="ts"> |
35 | import { Component, Vue } from "vue-property-decorator"; | 35 | import { Component, Vue, Ref, Watch } from "vue-property-decorator"; |
36 | import PanelLeft from "./PanelLeft.vue"; | 36 | import PanelLeft from "./PanelLeft.vue"; |
37 | import PanelTop from "./PanelTop.vue"; | 37 | import PanelTop from "./PanelTop.vue"; |
38 | import { Route } from "vue-router"; | ||
38 | 39 | ||
39 | @Component({ | 40 | @Component({ |
40 | components: { PanelLeft, PanelTop }, | 41 | components: { PanelLeft, PanelTop }, |
41 | }) | 42 | }) |
42 | export default class MainLayout extends Vue { | 43 | export default class MainLayout extends Vue { |
44 | @Ref() readonly content!: Vue; | ||
45 | |||
43 | isLoading: boolean = true; | 46 | isLoading: boolean = true; |
47 | scrollPositions: ScrollPosition = {}; | ||
44 | 48 | ||
45 | mounted() { | 49 | mounted() { |
46 | this.fetchGalleryItems(); | 50 | this.fetchGalleryItems(); |
47 | } | 51 | } |
48 | 52 | ||
53 | @Watch("$route") | ||
54 | routeChanged(newRoute: Route, oldRoute: Route) { | ||
55 | const el = this.content.$el; | ||
56 | this.scrollPositions[oldRoute.path] = el.scrollTop; | ||
57 | this.$nextTick(() => (el.scrollTop = this.scrollPositions[newRoute.path])); | ||
58 | } | ||
59 | |||
49 | fetchGalleryItems() { | 60 | fetchGalleryItems() { |
50 | this.isLoading = true; | 61 | this.isLoading = true; |
51 | this.$galleryStore | 62 | this.$galleryStore |