diff options
Diffstat (limited to 'viewer/src/views')
-rw-r--r-- | viewer/src/views/GalleryDirectory.vue | 14 | ||||
-rw-r--r-- | viewer/src/views/GalleryNavigation.vue | 63 | ||||
-rw-r--r-- | viewer/src/views/GallerySearch.vue | 36 | ||||
-rw-r--r-- | viewer/src/views/MainGallery.vue | 110 | ||||
-rw-r--r-- | viewer/src/views/MainLayout.vue | 4 | ||||
-rw-r--r-- | viewer/src/views/PanelLeft.vue | 34 | ||||
-rw-r--r-- | viewer/src/views/PanelTop.vue | 7 |
7 files changed, 129 insertions, 139 deletions
diff --git a/viewer/src/views/GalleryDirectory.vue b/viewer/src/views/GalleryDirectory.vue index 162ef6e..6e68578 100644 --- a/viewer/src/views/GalleryDirectory.vue +++ b/viewer/src/views/GalleryDirectory.vue | |||
@@ -18,18 +18,12 @@ | |||
18 | --> | 18 | --> |
19 | 19 | ||
20 | <template> | 20 | <template> |
21 | <div class="thumbnail-tiles"> | 21 | <ld-gallery :items="orderedItems()" :noresult="$t('directory.no-results')" /> |
22 | <div v-for="(item) in orderedItems" :key="item.path"> | ||
23 | <router-link :to="item.path"> | ||
24 | <ld-thumbnail :item="item" /> | ||
25 | </router-link> | ||
26 | </div> | ||
27 | </div> | ||
28 | </template> | 22 | </template> |
29 | 23 | ||
30 | <script lang="ts"> | 24 | <script lang="ts"> |
31 | import { Component, Vue, Prop } from "vue-property-decorator"; | 25 | import { Component, Vue, Prop } from "vue-property-decorator"; |
32 | import Tools from "@/tools"; | 26 | import Navigation from "@/services/navigation"; |
33 | 27 | ||
34 | @Component | 28 | @Component |
35 | export default class GalleryDirectory extends Vue { | 29 | export default class GalleryDirectory extends Vue { |
@@ -39,8 +33,8 @@ export default class GalleryDirectory extends Vue { | |||
39 | this.$uiStore.fullscreen = false; | 33 | this.$uiStore.fullscreen = false; |
40 | } | 34 | } |
41 | 35 | ||
42 | get orderedItems() { | 36 | orderedItems() { |
43 | return Tools.directoriesFirst(this.directory.properties.items); | 37 | return Navigation.directoriesFirst(this.directory.properties.items); |
44 | } | 38 | } |
45 | } | 39 | } |
46 | </script> | 40 | </script> |
diff --git a/viewer/src/views/GalleryNavigation.vue b/viewer/src/views/GalleryNavigation.vue new file mode 100644 index 0000000..e09b292 --- /dev/null +++ b/viewer/src/views/GalleryNavigation.vue | |||
@@ -0,0 +1,63 @@ | |||
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 | <template> | ||
21 | <div> | ||
22 | <gallery-search v-if="query.length" :path="path" :query="query" /> | ||
23 | <gallery-directory v-else-if="checkType('directory')" :directory="$galleryStore.currentItem" /> | ||
24 | <ld-picture v-else-if="checkType('picture')" :picture="$galleryStore.currentItem" /> | ||
25 | <div v-else>{{$t("gallery.unknowntype")}}</div> | ||
26 | </div> | ||
27 | </template> | ||
28 | |||
29 | <script lang="ts"> | ||
30 | import { Component, Vue, Prop, Watch } from "vue-property-decorator"; | ||
31 | import { Operation } from "@/@types/Operation"; | ||
32 | import Navigation from "@/services/navigation"; | ||
33 | import GalleryDirectory from "./GalleryDirectory.vue"; | ||
34 | import GallerySearch from "@/views/GallerySearch.vue"; | ||
35 | |||
36 | @Component({ | ||
37 | components: { | ||
38 | GalleryDirectory, | ||
39 | GallerySearch, | ||
40 | }, | ||
41 | }) | ||
42 | export default class GalleryNavigation extends Vue { | ||
43 | @Prop(String) readonly path!: string; | ||
44 | @Prop(Array) readonly query!: string[]; | ||
45 | |||
46 | mounted() { | ||
47 | this.pathChanged(); | ||
48 | } | ||
49 | |||
50 | @Watch("path") | ||
51 | pathChanged() { | ||
52 | console.log("Path: ", this.path); | ||
53 | this.$galleryStore.setCurrentPath(this.path); | ||
54 | } | ||
55 | |||
56 | private checkType(type: Gallery.ItemType): boolean { | ||
57 | return Navigation.checkType(this.$galleryStore.currentItem, type); | ||
58 | } | ||
59 | } | ||
60 | </script> | ||
61 | |||
62 | <style lang="scss"> | ||
63 | </style> | ||
diff --git a/viewer/src/views/GallerySearch.vue b/viewer/src/views/GallerySearch.vue index 97c5c66..eacbcdd 100644 --- a/viewer/src/views/GallerySearch.vue +++ b/viewer/src/views/GallerySearch.vue | |||
@@ -18,25 +18,41 @@ | |||
18 | --> | 18 | --> |
19 | 19 | ||
20 | <template> | 20 | <template> |
21 | <div class="thumbnail-tiles"> | 21 | <ld-gallery :items="items()" :noresult="$t('search.no-results')" /> |
22 | <div v-for="(item) in items" :key="item.path"> | ||
23 | <router-link :to="item.path" @click.native="$uiStore.setModeNavigation()"> | ||
24 | <ld-thumbnail :item="item" /> | ||
25 | </router-link> | ||
26 | </div> | ||
27 | <div v-if="items.length===0">{{$t('search.no-results')}}</div> | ||
28 | </div> | ||
29 | </template> | 22 | </template> |
30 | 23 | ||
31 | <script lang="ts"> | 24 | <script lang="ts"> |
32 | import { Component, Vue, Prop } from "vue-property-decorator"; | 25 | import { Component, Vue, Prop, Watch } from "vue-property-decorator"; |
26 | import { Operation } from "@/@types/Operation"; | ||
27 | import IndexSearch from "@/services/indexsearch"; | ||
28 | import IndexFactory from "../services/indexfactory"; | ||
33 | 29 | ||
34 | @Component | 30 | @Component |
35 | export default class GalleryPicture extends Vue { | 31 | export default class GalleryPicture extends Vue { |
36 | @Prop({ required: true }) readonly items!: Gallery.Item[]; | 32 | @Prop(String) readonly path!: string; |
33 | @Prop(Array) readonly query!: string[]; | ||
34 | |||
35 | currentSearch: Tag.Search[] = []; | ||
37 | 36 | ||
38 | mounted() { | 37 | mounted() { |
39 | this.$uiStore.fullscreen = false; | 38 | this.$uiStore.fullscreen = false; |
39 | this.$uiStore.searchMode = true; | ||
40 | this.restoreSearchFilters(); | ||
41 | } | ||
42 | |||
43 | destroyed() { | ||
44 | this.$uiStore.searchMode = false; | ||
45 | } | ||
46 | |||
47 | items() { | ||
48 | return IndexSearch.search(this.currentSearch, this.path); | ||
49 | } | ||
50 | |||
51 | @Watch("query") | ||
52 | restoreSearchFilters() { | ||
53 | const tagsIndex = this.$galleryStore.tagsIndex; | ||
54 | this.currentSearch = this.query.flatMap(filter => IndexFactory.searchTags(tagsIndex, filter)); | ||
55 | this.$uiStore.searchFilters = [...this.currentSearch]; | ||
40 | } | 56 | } |
41 | } | 57 | } |
42 | </script> | 58 | </script> |
diff --git a/viewer/src/views/MainGallery.vue b/viewer/src/views/MainGallery.vue deleted file mode 100644 index 5767cce..0000000 --- a/viewer/src/views/MainGallery.vue +++ /dev/null | |||
@@ -1,110 +0,0 @@ | |||
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 | <template> | ||
21 | <div> | ||
22 | <gallery-search v-if="$uiStore.isModeSearch" :items="currentSearch" /> | ||
23 | <gallery-directory v-else-if="checkType('directory')" :directory="$galleryStore.currentItem" /> | ||
24 | <ld-picture v-else-if="checkType('picture')" :picture="$galleryStore.currentItem" /> | ||
25 | <div v-else>{{$t("gallery.unknowntype")}}</div> | ||
26 | </div> | ||
27 | </template> | ||
28 | |||
29 | <script lang="ts"> | ||
30 | import { Component, Vue, Prop, Watch } from "vue-property-decorator"; | ||
31 | import { Operation } from "@/@types/Operation"; | ||
32 | import Tools from "@/tools"; | ||
33 | import GallerySearch from "./GallerySearch.vue"; | ||
34 | import GalleryDirectory from "./GalleryDirectory.vue"; | ||
35 | |||
36 | @Component({ | ||
37 | components: { | ||
38 | GallerySearch, | ||
39 | GalleryDirectory, | ||
40 | }, | ||
41 | }) | ||
42 | export default class Gallery extends Vue { | ||
43 | @Prop(String) readonly pathMatch!: string; | ||
44 | |||
45 | mounted() { | ||
46 | this.pathChanged(); | ||
47 | } | ||
48 | |||
49 | @Watch("pathMatch") | ||
50 | pathChanged() { | ||
51 | console.log("Path: ", this.pathMatch); | ||
52 | this.$galleryStore.setCurrentPath(this.pathMatch); | ||
53 | } | ||
54 | |||
55 | // Results of the search (by tags) | ||
56 | get currentSearch(): Gallery.Item[] { | ||
57 | const byOperation = this.extractTagsByOperation(this.$uiStore.currentTags); | ||
58 | const intersection = this.extractIntersection(byOperation); | ||
59 | const substraction = this.extractSubstraction(byOperation); | ||
60 | return this.aggregateAll(byOperation, intersection, substraction); | ||
61 |