aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/components/LdPicture.vue
diff options
context:
space:
mode:
authorNotkea2020-02-02 20:39:36 +0100
committerGitHub2020-02-02 20:39:36 +0100
commitbd7b62e97ac3fc89be4df9f3bb15af6b3e6c2724 (patch)
treeeb664b38fefc4a8088ae5c10366f52542e021ff5 /viewer/src/components/LdPicture.vue
parentce2f0262768bc3d56dd9a776a075c6ccf10a7ae3 (diff)
parent73e2dc5b39a5cd12c52b99ee076c1a1ad86a2ace (diff)
downloadldgallery-bd7b62e97ac3fc89be4df9f3bb15af6b3e6c2724.tar.gz
Merge pull request #74 from pacien/feature-thumbnail-resolution-index
Add thumbnail size to index
Diffstat (limited to 'viewer/src/components/LdPicture.vue')
-rw-r--r--viewer/src/components/LdPicture.vue18
1 files changed, 11 insertions, 7 deletions
diff --git a/viewer/src/components/LdPicture.vue b/viewer/src/components/LdPicture.vue
index 5425a00..154c4bd 100644
--- a/viewer/src/components/LdPicture.vue
+++ b/viewer/src/components/LdPicture.vue
@@ -29,9 +29,9 @@
29 :src="pictureSrc()" 29 :src="pictureSrc()"
30 :class="{'slow-loading': Boolean(slowLoadingStyle)}" 30 :class="{'slow-loading': Boolean(slowLoadingStyle)}"
31 :style="slowLoadingStyle" 31 :style="slowLoadingStyle"
32 @load="clearTimer" 32 @load="clearSlowLoading"
33 /> 33 />
34 <b-loading :active="Boolean(slowLoadingStyle)" :is-full-page="false" class="ld-picture-loader" /> 34 <b-loading :active="loader" :is-full-page="false" class="ld-picture-loader" />
35 </div> 35 </div>
36</template> 36</template>
37 37
@@ -46,20 +46,22 @@ export default class LdPicture extends Vue {
46 46
47 dragging: boolean = false; 47 dragging: boolean = false;
48 slowLoadingStyle: string | null = null; 48 slowLoadingStyle: string | null = null;
49 loader: boolean = false;
49 timer: NodeJS.Timeout | null = null; 50 timer: NodeJS.Timeout | null = null;
50 51
51 mounted() { 52 mounted() {
52 if (this.picture.thumbnail) this.timer = setTimeout(this.generateSlowLoadingStyle, this.SLOW_LOADING_TIMEOUT_MS); 53 this.timer = setTimeout(this.generateSlowLoadingStyle, this.SLOW_LOADING_TIMEOUT_MS);
53 } 54 }
54 55
55 destroyed() { 56 destroyed() {
56 this.clearTimer(); 57 this.clearSlowLoading();
57 } 58 }
58 59
59 clearTimer() { 60 clearSlowLoading() {
60 if (this.timer) clearTimeout(this.timer); 61 if (this.timer) clearTimeout(this.timer);
61 this.timer = null; 62 this.timer = null;
62 this.slowLoadingStyle = null; 63 this.slowLoadingStyle = null;
64 this.loader = false;
63 } 65 }
64 66
65 pictureSrc() { 67 pictureSrc() {
@@ -67,8 +69,10 @@ export default class LdPicture extends Vue {
67 } 69 }
68 70
69 generateSlowLoadingStyle() { 71 generateSlowLoadingStyle() {
70 this.clearTimer(); 72 this.clearSlowLoading();
71 this.slowLoadingStyle = `background-image: url('${process.env.VUE_APP_DATA_URL}${this.picture.thumbnail}');`; 73 this.loader = true;
74 if (this.picture.thumbnail)
75 this.slowLoadingStyle = `background-image: url('${process.env.VUE_APP_DATA_URL}${this.picture.thumbnail.resource}');`;
72 } 76 }
73 77
74 onClick() { 78 onClick() {