aboutsummaryrefslogtreecommitdiff
path: root/viewer
diff options
context:
space:
mode:
Diffstat (limited to 'viewer')
-rw-r--r--viewer/.env6
-rw-r--r--viewer/.env.development3
-rw-r--r--viewer/public/config.json.example (renamed from viewer/public/config.json)1
-rw-r--r--viewer/readme.md4
-rw-r--r--viewer/src/@types/gallery.d.ts4
-rw-r--r--viewer/src/components/LdPicture.vue12
-rw-r--r--viewer/src/components/LdThumbnail.vue7
-rw-r--r--viewer/src/store/galleryStore.ts18
-rw-r--r--viewer/src/views/MainLayout.vue3
-rw-r--r--viewer/vue.config.js2
10 files changed, 43 insertions, 17 deletions
diff --git a/viewer/.env b/viewer/.env
index 959477b..0914292 100644
--- a/viewer/.env
+++ b/viewer/.env
@@ -1,5 +1,5 @@
1# Override with .env.development.local and .env.production.local
2
1VUE_APP_I18N_LOCALE=en 3VUE_APP_I18N_LOCALE=en
2VUE_APP_I18N_FALLBACK_LOCALE=en 4VUE_APP_I18N_FALLBACK_LOCALE=en
3VUE_APP_EXAMPLE_PROJECT=../example/out/ 5VUE_APP_DATA_URL=./
4VUE_APP_DATA_URL=gallery/
5VUE_APP_DEVSERVER_PORT=8085
diff --git a/viewer/.env.development b/viewer/.env.development
new file mode 100644
index 0000000..0d87cf4
--- /dev/null
+++ b/viewer/.env.development
@@ -0,0 +1,3 @@
1VUE_APP_DEVSERVER_PORT=8085
2VUE_APP_DEVSERVER_CONFIG_PATH=../example/
3VUE_APP_DATA_URL=~/
diff --git a/viewer/public/config.json b/viewer/public/config.json.example
index 7023edb..90c5f74 100644
--- a/viewer/public/config.json
+++ b/viewer/public/config.json.example
@@ -1,4 +1,3 @@
1{ 1{
2 "generationTimestamp": 0,
3 "galleryRoot": "gallery/" 2 "galleryRoot": "gallery/"
4} \ No newline at end of file 3} \ No newline at end of file
diff --git a/viewer/readme.md b/viewer/readme.md
index 864dcc6..3757f3e 100644
--- a/viewer/readme.md
+++ b/viewer/readme.md
@@ -8,6 +8,10 @@ npm install
8``` 8```
9 9
10### Compiles and hot-reloads for development 10### Compiles and hot-reloads for development
11
12The viewer DevServer will serve the compiled version of the example gallery by default.
13To override, create a file .env.development.local
14
11``` 15```
12npm run serve 16npm run serve
13``` 17```
diff --git a/viewer/src/@types/gallery.d.ts b/viewer/src/@types/gallery.d.ts
index 14a7ed9..03d21fc 100644
--- a/viewer/src/@types/gallery.d.ts
+++ b/viewer/src/@types/gallery.d.ts
@@ -18,6 +18,10 @@
18*/ 18*/
19 19
20declare namespace Gallery { 20declare namespace Gallery {
21 interface Config {
22 galleryRoot: string,
23 }
24
21 interface Other extends Item { 25 interface Other extends Item {
22 properties: OtherProperties, 26 properties: OtherProperties,
23 } 27 }
diff --git a/viewer/src/components/LdPicture.vue b/viewer/src/components/LdPicture.vue
index 8a9a08e..a5faeb3 100644
--- a/viewer/src/components/LdPicture.vue
+++ b/viewer/src/components/LdPicture.vue
@@ -28,7 +28,7 @@
28 @dragscrollend="dragScrollClickFix.onDragScrollEnd()" 28 @dragscrollend="dragScrollClickFix.onDragScrollEnd()"
29 > 29 >
30 <v-lazy-image 30 <v-lazy-image
31 :src="pictureSrc()" 31 :src="pictureSrc(picture.properties.resource)"
32 :class="{'slow-loading': Boolean(slowLoadingStyle)}" 32 :class="{'slow-loading': Boolean(slowLoadingStyle)}"
33 :style="slowLoadingStyle" 33 :style="slowLoadingStyle"
34 @load="clearSlowLoading" 34 @load="clearSlowLoading"
@@ -67,15 +67,17 @@ export default class LdPicture extends Vue {
67 this.loader = false; 67 this.loader = false;
68 } 68 }
69 69
70 pictureSrc() { 70 pictureSrc(resource: string) {
71 return `${process.env.VUE_APP_DATA_URL}${this.picture.properties.resource}`; 71 return `${process.env.VUE_APP_DATA_URL}${this.$galleryStore.config!.galleryRoot}${resource}`;
72 } 72 }
73 73
74 generateSlowLoadingStyle() { 74 generateSlowLoadingStyle() {
75 this.clearSlowLoading(); 75 this.clearSlowLoading();
76 this.loader = true; 76 this.loader = true;
77 if (this.picture.thumbnail) 77 if (this.picture.thumbnail) {
78 this.slowLoadingStyle = `background-image: url('${process.env.VUE_APP_DATA_URL}${this.picture.thumbnail.resource}');`; 78 const url = this.pictureSrc(this.picture.thumbnail.resource);
79 this.slowLoadingStyle = `background-image: url('${url}');`;
80 }
79 } 81 }
80} 82}
81</script> 83</script>
diff --git a/viewer/src/components/LdThumbnail.vue b/viewer/src/components/LdThumbnail.vue
index 17c7659..13468e1 100644
--- a/viewer/src/components/LdThumbnail.vue
+++ b/viewer/src/components/LdThumbnail.vue
@@ -21,7 +21,7 @@
21 <div :class="{'preload': loading}"> 21 <div :class="{'preload': loading}">
22 <v-lazy-image 22 <v-lazy-image
23 v-if="item.thumbnail" 23 v-if="item.thumbnail"
24 :src="pictureSrc()" 24 :src="pictureSrc(item.thumbnail.resource)"
25 :style="pictureStyle()" 25 :style="pictureStyle()"
26 :title="item.title" 26 :title="item.title"
27 @intersect="loading=true" 27 @intersect="loading=true"
@@ -44,9 +44,8 @@ export default class LdThumbnail extends Vue {
44 44
45 loading: boolean = false; 45 loading: boolean = false;
46 46
47 pictureSrc() { 47 pictureSrc(resource: string) {
48 const resource = this.item.thumbnail!.resource; 48 return `${process.env.VUE_APP_DATA_URL}${this.$galleryStore.config!.galleryRoot}${resource}`;
49 return `${process.env.VUE_APP_DATA_URL}${resource}`;
50 } 49 }
51 50
52 pictureStyle() { 51 pictureStyle() {
diff --git a/viewer/src/store/galleryStore.ts b/viewer/src/store/galleryStore.ts
index 5ab0c33..d774588 100644
--- a/viewer/src/store/galleryStore.ts
+++ b/viewer/src/store/galleryStore.ts
@@ -27,12 +27,17 @@ const VuexModule = createModule({
27 27
28export default class GalleryStore extends VuexModule { 28export default class GalleryStore extends VuexModule {
29 29
30 config: Gallery.Config | null = null;
30 galleryItemsRoot: Gallery.Item | null = null; 31 galleryItemsRoot: Gallery.Item | null = null;
31 tags: Tag.Index = {}; 32 tags: Tag.Index = {};
32 currentPath: string = "/"; 33 currentPath: string = "/";
33 34
34 // --- 35 // ---
35 36
37 @mutation setConfig(config: Gallery.Config) {
38 this.config = config;
39 }
40
36 @mutation setGalleryItemsRoot(galleryItemsRoot: Gallery.Item) { 41 @mutation setGalleryItemsRoot(galleryItemsRoot: Gallery.Item) {
37 this.galleryItemsRoot = galleryItemsRoot; 42 this.galleryItemsRoot = galleryItemsRoot;
38 } 43 }
@@ -59,9 +64,18 @@ export default class GalleryStore extends VuexModule {
59 64
60 // --- 65 // ---
61 66
67 // Fetches the gallery's JSON config
68 @action async fetchConfig() {
69 return fetch(`${process.env.VUE_APP_DATA_URL}config.json`, { cache: "no-cache" })
70 .then(config => config.json())
71 .then(this.setConfig);
72 }
73
62 // Fetches the gallery's JSON metadata 74 // Fetches the gallery's JSON metadata
63 @action async fetchGalleryItems(url: string) { 75 @action async fetchGalleryItems() {
64 return fetch(url) 76 const root = this.config?.galleryRoot ?? '';
77 const timestamp = this.config?.generationTimestamp ?? 0;
78 return fetch(`${process.env.VUE_APP_DATA_URL}${root}index.json`, { cache: "no-cache" })
65 .then(response => response.json()) 79 .then(response => response.json())
66 .then(this.setGalleryItemsRoot) 80 .then(this.setGalleryItemsRoot)
67 .then(this.indexTags); 81 .then(this.indexTags);
diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 12388a9..63a1b83 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -60,7 +60,8 @@ export default class MainLayout extends Vue {
60 fetchGalleryItems() { 60 fetchGalleryItems() {
61 this.isLoading = true; 61 this.isLoading = true;
62 this.$galleryStore 62 this.$galleryStore
63 .fetchGalleryItems(`${process.env.VUE_APP_DATA_URL}index.json`) 63 .fetchConfig()
64 .then(this.$galleryStore.fetchGalleryItems)
64 .finally(() => (this.isLoading = false)) 65 .finally(() => (this.isLoading = false))
65 .catch(this.displayError); 66 .catch(this.displayError);
66 } 67 }
diff --git a/viewer/vue.config.js b/viewer/vue.config.js
index 9d885bd..9b92dc2 100644
--- a/viewer/vue.config.js
+++ b/viewer/vue.config.js
@@ -43,7 +43,7 @@ module.exports = {
43 const url = req.url.slice(process.env.VUE_APP_DATA_URL.length); 43 const url = req.url.slice(process.env.VUE_APP_DATA_URL.length);
44 const paramIdx = url.indexOf('?'); 44 const paramIdx = url.indexOf('?');
45 const filepath = paramIdx < 0 ? url : url.substring(0, paramIdx); 45 const filepath = paramIdx < 0 ? url : url.substring(0, paramIdx);
46 const fullpath = `${process.env.VUE_APP_EXAMPLE_PROJECT}${decodeURIComponent(filepath)}`; 46 const fullpath = `${process.env.VUE_APP_DEVSERVER_CONFIG_PATH}${decodeURIComponent(filepath)}`;
47 const file = fs.readFileSync(fullpath); 47 const file = fs.readFileSync(fullpath);
48 res.end(file); 48 res.end(file);
49 }); 49 });