aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/views/MainLayout.vue
diff options
context:
space:
mode:
authorpacien2020-05-02 04:11:24 +0200
committerpacien2020-05-02 04:11:24 +0200
commit8e3ac8fe44bebb38e1882ca7f06b8100078ad88d (patch)
treea748fa1e639cb3b5e1f24a8150e89dbb28c980cb /viewer/src/views/MainLayout.vue
parent7042ffc06326fa8ffe70f5a59747709250166c16 (diff)
parent0e0b5b0ae44da7c1d67983dedd8f8d8d3516236f (diff)
downloadldgallery-8e3ac8fe44bebb38e1882ca7f06b8100078ad88d.tar.gz
Merge branch 'develop': release v1.0v1.0
Diffstat (limited to 'viewer/src/views/MainLayout.vue')
-rw-r--r--viewer/src/views/MainLayout.vue71
1 files changed, 60 insertions, 11 deletions
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 5308205..bcd2249 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -18,34 +18,56 @@
18--> 18-->
19 19
20<template> 20<template>
21 <div :class="{fullscreen: $uiStore.fullscreen}"> 21 <div :class="{'fullscreen': $uiStore.fullscreen, 'fullwidth': $uiStore.fullWidth}">
22 <panel-top class="layout layout-top" /> 22 <ld-title
23 <panel-left class="layout layout-left" /> 23 :gallery-title="$galleryStore.galleryTitle"
24 <router-view class="layout layout-content" /> 24 :current-item="$galleryStore.currentItem"
25 <ld-button-fullscreen /> 25 />
26 <panel-top v-if="!isLoading" class="layout layout-top" />
27 <panel-left v-if="!isLoading" class="layout layout-left" />
28 <router-view v-if="!isLoading" ref="content" class="layout layout-content scrollbar" />
26 <b-loading :active="isLoading" is-full-page /> 29 <b-loading :active="isLoading" is-full-page />
30 <ld-key-press :keycode="27" @action="$uiStore.toggleFullscreen(false)" />
27 </div> 31 </div>
28</template> 32</template>
29 33
30<script lang="ts"> 34<script lang="ts">
31import { Component, Vue } from "vue-property-decorator"; 35import { Component, Vue, Ref, Watch } from "vue-property-decorator";
32import PanelLeft from "./PanelLeft.vue"; 36import PanelLeft from "./PanelLeft.vue";
33import PanelTop from "./PanelTop.vue"; 37import PanelTop from "./PanelTop.vue";
38import { Route } from "vue-router";
34 39
35@Component({ 40@Component({
36 components: { PanelLeft, PanelTop }, 41 components: { PanelLeft, PanelTop },
37}) 42})
38export default class MainLayout extends Vue { 43export default class MainLayout extends Vue {
39 isLoading: boolean = false; 44 @Ref() readonly content!: Vue;
45
46 isLoading: boolean = true;
47 scrollPositions: ScrollPosition = {};
40 48
41 mounted() { 49 mounted() {
50 history.replaceState({ ldgallery: "ENTRYPOINT" }, "");
42 this.fetchGalleryItems(); 51 this.fetchGalleryItems();
52 document.body.addEventListener("fullscreenchange", this.onFullscreenChange);
53 }
54
55 destroyed() {
56 document.body.removeEventListener("fullscreenchange", this.onFullscreenChange);
57 }
58
59 @Watch("$route")
60 routeChanged(newRoute: Route, oldRoute: Route) {
61 const el = this.content.$el;
62 this.scrollPositions[oldRoute.path] = el.scrollTop;
63 this.$nextTick(() => (el.scrollTop = this.scrollPositions[newRoute.path]));
43 } 64 }
44 65
45 fetchGalleryItems() { 66 fetchGalleryItems() {
46 this.isLoading = true; 67 this.isLoading = true;
47 this.$galleryStore 68 this.$galleryStore
48 .fetchGalleryItems(`${process.env.VUE_APP_DATA_URL}/index.json`) 69 .fetchConfig()
70 .then(this.$galleryStore.fetchGalleryItems)
49 .finally(() => (this.isLoading = false)) 71 .finally(() => (this.isLoading = false))
50 .catch(this.displayError); 72 .catch(this.displayError);
51 } 73 }
@@ -60,16 +82,28 @@ export default class MainLayout extends Vue {
60 onAction: this.fetchGalleryItems, 82 onAction: this.fetchGalleryItems,
61 }); 83 });
62 } 84 }
85
86 @Watch("$uiStore.fullscreen")
87 applyFullscreen(fullscreen: boolean) {
88 if (fullscreen && !document.fullscreen) document.body.requestFullscreen();
89 else if (document.fullscreen) document.exitFullscreen();
90 }
91
92 onFullscreenChange() {
93 this.$uiStore.toggleFullscreen(document.fullscreen);
94 }
63} 95}
64</script> 96</script>
65 97
66<style lang="scss"> 98<style lang="scss">
67@import "@/assets/scss/theme.scss"; 99@import "~@/assets/scss/theme.scss";
68 100
69body, 101body,
70html { 102html {
71 height: 100%; 103 height: 100%;
72 overflow: hidden; 104 overflow: hidden;
105 touch-action: none;
106 background-color: $content-bgcolor;
73 --layout-top: #{$layout-top}; 107 --layout-top: #{$layout-top};
74 --layout-left: #{$layout-left}; 108 --layout-left: #{$layout-left};
75} 109}
@@ -93,11 +127,15 @@ html {
93 top: var(--layout-top); 127 top: var(--layout-top);
94 left: var(--layout-left); 128 left: var(--layout-left);
95 z-index: 3; 129 z-index: 3;
130 overflow-x: hidden;
96 } 131 }
97} 132}
98.fullscreen { 133.fullscreen {
99 --layout-left: 0px;
100 --layout-top: 0px; 134 --layout-top: 0px;
135 @extend .fullwidth;
136}
137.fullwidth {
138 --layout-left: 0px;
101 .layout { 139 .layout {
102 &.layout-left { 140 &.layout-left {
103 transform: translate(-$layout-left, 0); 141 transform: translate(-$layout-left, 0);
@@ -118,4 +156,15 @@ html {
118 background-color: $content-bgcolor; 156 background-color: $content-bgcolor;
119 } 157 }
120} 158}
121</style> \ No newline at end of file 159
160// TODO: Remove when #21 (remove explicit navigation/search modes) is resolved
161// Forced at the bottom right corner so we can continue working on the sidebar without interference
162.tmp-mode-selector {
163 position: absolute;
164 bottom: 0;
165 right: 0;
166 z-index: 100;
167 opacity: 0.75;
168}
169// =====
170</style>