-
-
-
-
-
diff --git a/viewer/src/components/LdPicture.vue b/viewer/src/components/LdPicture.vue
index a5faeb3..1cfcc8b 100644
--- a/viewer/src/components/LdPicture.vue
+++ b/viewer/src/components/LdPicture.vue
@@ -39,7 +39,7 @@
diff --git a/viewer/src/components/LdTagInput.vue b/viewer/src/components/LdTagInput.vue
index eff02e6..982abe4 100644
--- a/viewer/src/components/LdTagInput.vue
+++ b/viewer/src/components/LdTagInput.vue
@@ -19,7 +19,7 @@
{{displayOption(props.option)}}
{{$t('tagInput.nomatch')}}
@@ -39,80 +37,25 @@
diff --git a/viewer/src/dragscrollclickfix.ts b/viewer/src/dragscrollclickfix.ts
deleted file mode 100644
index 38eb106..0000000
--- a/viewer/src/dragscrollclickfix.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-/* ldgallery - A static generator which turns a collection of tagged
--- pictures into a searchable web gallery.
---
--- Copyright (C) 2019-2020 Guillaume FOUET
---
--- This program is free software: you can redistribute it and/or modify
--- it under the terms of the GNU Affero General Public License as
--- published by the Free Software Foundation, either version 3 of the
--- License, or (at your option) any later version.
---
--- This program is distributed in the hope that it will be useful,
--- but WITHOUT ANY WARRANTY; without even the implied warranty of
--- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
--- GNU Affero General Public License for more details.
---
--- You should have received a copy of the GNU Affero General Public License
--- along with this program. If not, see .
-*/
-
-// https://github.com/donmbelembe/vue-dragscroll/issues/61
-export default class DragScrollClickFix {
-
- readonly DRAG_DELAY = 250; // This is the minimal delay to consider a click to be a drag, mostly usefull for touch devices
-
- timer: NodeJS.Timeout | null = null;
- dragging: boolean = false;
-
- onDragScrollStart() {
- this.timer = setTimeout(() => this.onTimer(), this.DRAG_DELAY);
- }
-
- onTimer() {
- this.timer = null;
- this.dragging = true;
- }
-
- onDragScrollEnd() {
- if (this.timer) {
- clearTimeout(this.timer);
- this.timer = null;
- }
- setTimeout(() => this.dragging = false);
- }
-
- onClickCapture(e: MouseEvent) {
- if (this.dragging) {
- this.dragging = false;
- e.preventDefault();
- e.stopPropagation();
- }
- }
-}
diff --git a/viewer/src/locales/en.json b/viewer/src/locales/en.json
index 9440103..878204e 100644
--- a/viewer/src/locales/en.json
+++ b/viewer/src/locales/en.json
@@ -1,8 +1,6 @@
{
"tagInput.placeholder": "Filters",
"tagInput.nomatch": "No match",
- "mode.navigation": "Navigation",
- "mode.search": "Search",
"search.no-results": "No results",
"panelLeft.propositions": "Related filters",
"tag-propositions.substraction": "Exclude items with this tag",
@@ -11,7 +9,9 @@
"tag-propositions.item-count": "Item count",
"gallery.unknowntype": "Unknown item type",
"command.search": "Open/close search panel",
- "command.home": "Go to gallery home",
+ "command.search.clear": "Clear",
+ "command.search.search": "Search",
"command.back": "Go back",
- "command.parent": "Go to parent directory"
-}
\ No newline at end of file
+ "command.parent": "Go to parent directory",
+ "directory.no-results": "Empty directory"
+}
diff --git a/viewer/src/plugins/buefy.ts b/viewer/src/plugins/buefy.ts
index 74b6176..ebdf64e 100644
--- a/viewer/src/plugins/buefy.ts
+++ b/viewer/src/plugins/buefy.ts
@@ -24,7 +24,7 @@ import Taginput from 'buefy/src/components/taginput';
// @ts-ignore
import Loading from 'buefy/src/components/loading';
// @ts-ignore
-import Radio from 'buefy/src/components/radio';
+import Button from 'buefy/src/components/button';
// @ts-ignore
import SnackBar from 'buefy/src/components/snackbar';
@@ -32,7 +32,7 @@ import "@/assets/scss/buefy.scss";
Vue.use(Taginput);
Vue.use(Loading);
-Vue.use(Radio);
+Vue.use(Button);
Vue.use(SnackBar);
declare module 'vue/types/vue' {
diff --git a/viewer/src/plugins/fontawesome.ts b/viewer/src/plugins/fontawesome.ts
index e8848f9..cc8b7ab 100644
--- a/viewer/src/plugins/fontawesome.ts
+++ b/viewer/src/plugins/fontawesome.ts
@@ -23,6 +23,7 @@ import { library, config } from "@fortawesome/fontawesome-svg-core";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import {
faFolder,
+ faEraser,
faSearch,
faPlus,
faMinus,
@@ -37,6 +38,7 @@ import {
library.add(
faFolder,
+ faEraser,
faSearch,
faPlus,
faMinus,
diff --git a/viewer/src/plugins/router.ts b/viewer/src/plugins/router.ts
index 8b4a8dc..00979c9 100644
--- a/viewer/src/plugins/router.ts
+++ b/viewer/src/plugins/router.ts
@@ -18,19 +18,20 @@
*/
import Vue from "vue";
-import VueRouter from "vue-router";
-import MainGallery from "@/views/MainGallery.vue";
+import VueRouter, { RouteConfig } from "vue-router";
+import GalleryNavigation from "@/views/GalleryNavigation.vue";
Vue.use(VueRouter);
-// async way : component: () => import(/* webpackChunkName: "MainGallery" */ "@/views/MainGallery.vue"),
-
-const routes = [
+const routes: RouteConfig[] = [
{
path: "*",
- name: "MainGallery",
- component: MainGallery,
- props: true
+ name: "GalleryNavigation",
+ component: GalleryNavigation,
+ props: (route) => ({
+ path: route.params.pathMatch,
+ query: Object.keys(route.query),
+ }),
},
];
diff --git a/viewer/src/services/dragscrollclickfix.ts b/viewer/src/services/dragscrollclickfix.ts
new file mode 100644
index 0000000..38eb106
--- /dev/null
+++ b/viewer/src/services/dragscrollclickfix.ts
@@ -0,0 +1,52 @@
+/* ldgallery - A static generator which turns a collection of tagged
+-- pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2020 Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program. If not, see .
+*/
+
+// https://github.com/donmbelembe/vue-dragscroll/issues/61
+export default class DragScrollClickFix {
+
+ readonly DRAG_DELAY = 250; // This is the minimal delay to consider a click to be a drag, mostly usefull for touch devices
+
+ timer: NodeJS.Timeout | null = null;
+ dragging: boolean = false;
+
+ onDragScrollStart() {
+ this.timer = setTimeout(() => this.onTimer(), this.DRAG_DELAY);
+ }
+
+ onTimer() {
+ this.timer = null;
+ this.dragging = true;
+ }
+
+ onDragScrollEnd() {
+ if (this.timer) {
+ clearTimeout(this.timer);
+ this.timer = null;
+ }
+ setTimeout(() => this.dragging = false);
+ }
+
+ onClickCapture(e: MouseEvent) {
+ if (this.dragging) {
+ this.dragging = false;
+ e.preventDefault();
+ e.stopPropagation();
+ }
+ }
+}
diff --git a/viewer/src/services/indexfactory.ts b/viewer/src/services/indexfactory.ts
new file mode 100644
index 0000000..a6bc865
--- /dev/null
+++ b/viewer/src/services/indexfactory.ts
@@ -0,0 +1,101 @@
+/* ldgallery - A static generator which turns a collection of tagged
+-- pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2020 Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program. If not, see .
+*/
+
+import { Operation } from '@/@types/Operation';
+import Navigation from '@/services/navigation';
+
+export default class IndexFactory {
+
+ public static generateTags(root: Gallery.Item | null): Tag.Index {
+ let tagsIndex: Tag.Index = {};
+ if (root) IndexFactory.pushTagsForItem(tagsIndex, root);
+ return tagsIndex;
+ }
+
+ // Pushes all tags for a root item (and its children) to the index
+ private static pushTagsForItem(tagsIndex: Tag.Index, item: Gallery.Item): void {
+ console.log("IndexingTagsFor: ", item.path);
+ if (item.properties.type === "directory") {
+ item.properties.items.forEach(item => this.pushTagsForItem(tagsIndex, item));
+ return; // Directories are not indexed
+ }
+ for (const tag of item.tags) {
+ const parts = tag.split('.');
+ let lastPart: string | null = null;
+ for (const part of parts) {
+ if (!tagsIndex[part]) tagsIndex[part] = { tag: part, tagfiltered: Navigation.normalize(part), items: [], children: {} };
+ if (!tagsIndex[part].items.includes(item)) tagsIndex[part].items.push(item);
+ if (lastPart) tagsIndex[lastPart].children[part] = tagsIndex[part];
+ lastPart = part;
+ }
+ }
+ }
+
+ // ---
+
+
+ public static searchTags(tagsIndex: Tag.Index, filter: string): Tag.Search[] {
+ let search: Tag.Search[] = [];
+ if (tagsIndex && filter) {
+ const operation = IndexFactory.extractOperation(filter);
+ if (operation !== Operation.INTERSECTION) filter = filter.slice(1);
+ if (filter.includes(":")) {
+ const filterParts = filter.split(":");
+ search = this.searchTagsFromFilterWithCategory(tagsIndex, operation, filterParts[0], filterParts[1]);
+ } else {
+ search = this.searchTagsFromFilter(tagsIndex, operation, filter);
+ }
+ }
+ return search;
+ }
+
+ private static extractOperation(filter: string): Operation {
+ const first = filter.slice(0, 1);
+ switch (first) {
+ case Operation.ADDITION:
+ case Operation.SUBSTRACTION:
+ return first;
+ default:
+ return Operation.INTERSECTION;
+ }
+ }
+
+ private static searchTagsFromFilterWithCategory(
+ tagsIndex: Tag.Index,
+ operation: Operation,
+ category: string,
+ disambiguation: string
+ ): Tag.Search[] {
+ disambiguation = Navigation.normalize(disambiguation);
+ return Object.values(tagsIndex)
+ .filter(node => node.tag.includes(category))
+ .flatMap(node =>
+ Object.values(node.children)
+ .filter(child => child.tagfiltered.includes(disambiguation))
+ .map(child => ({ ...child, parent: node, operation, display: `${operation}${node.tag}:${child.tag}` }))
+ );
+ }
+
+ private static searchTagsFromFilter(tagsIndex: Tag.Index, operation: Operation, filter: string): Tag.Search[] {
+ filter = Navigation.normalize(filter);
+ return Object.values(tagsIndex)
+ .filter(node => node.tagfiltered.includes(filter))
+ .map(node => ({ ...node, operation, display: `${operation}${node.tag}` }));
+ }
+}
diff --git a/viewer/src/services/indexsearch.ts b/viewer/src/services/indexsearch.ts
new file mode 100644
index 0000000..3e73fb1
--- /dev/null
+++ b/viewer/src/services/indexsearch.ts
@@ -0,0 +1,70 @@
+/* ldgallery - A static generator which turns a collection of tagged
+-- pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2020 Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program. If not, see .
+*/
+
+import { Operation } from '@/@types/Operation';
+
+export default class IndexSearch {
+
+ // Results of the search (by tags)
+ public static search(searchTags: Tag.Search[], rootPath: string): Gallery.Item[] {
+ const byOperation = this.extractTagsByOperation(searchTags);
+ const intersection = this.extractIntersection(byOperation);
+ const substraction = this.extractSubstraction(byOperation);
+ return this.aggregateAll(byOperation, intersection, substraction)
+ .filter(item => item.path.startsWith(rootPath));
+ }
+
+ private static extractTagsByOperation(searchTags: Tag.Search[]): Tag.SearchByOperation {
+ let byOperation: Tag.SearchByOperation = {};
+ Object.values(Operation).forEach(
+ operation => (byOperation[operation] = searchTags.filter(tag => tag.operation === operation))
+ );
+ return byOperation;
+ }
+
+ private static extractIntersection(byOperation: Tag.SearchByOperation): Set {
+ let intersection = new Set();
+ if (byOperation[Operation.INTERSECTION].length > 0) {
+ byOperation[Operation.INTERSECTION]
+ .map(tag => tag.items)
+ .reduce((a, b) => a.filter(c => b.includes(c)))
+ .flatMap(items => items)
+ .forEach(item => intersection.add(item));
+ }
+ return intersection;
+ }
+
+ private static extractSubstraction(byOperation: Tag.SearchByOperation): Set {
+ let substraction = new Set();
+ if (byOperation[Operation.SUBSTRACTION].length > 0) {
+ byOperation[Operation.SUBSTRACTION].flatMap(tag => tag.items).forEach(item => substraction.add(item));
+ }
+ return substraction;
+ }
+
+ private static aggregateAll(
+ byOperation: Tag.SearchByOperation,
+ intersection: Set,
+ substraction: Set
+ ): Gallery.Item[] {
+ byOperation[Operation.ADDITION].flatMap(tag => tag.items).forEach(item => intersection.add(item));
+ substraction.forEach(item => intersection.delete(item));
+ return [...intersection];
+ }
+}
diff --git a/viewer/src/services/navigation.ts b/viewer/src/services/navigation.ts
new file mode 100644
index 0000000..77fa47a
--- /dev/null
+++ b/viewer/src/services/navigation.ts
@@ -0,0 +1,71 @@
+/* ldgallery - A static generator which turns a collection of tagged
+-- pictures into a searchable web gallery.
+--
+-- Copyright (C) 2019-2020 Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program. If not, see .
+*/
+
+export default class Navigation {
+
+ // Searches for an item by path from a root item (navigation)
+ public static searchCurrentItemPath(root: Gallery.Item, path: string): Gallery.Item[] {
+ if (path === root.path) return [root];
+ if (root.properties.type === "directory" && path.startsWith(root.path)) {
+ const itemChain = root.properties.items
+ .map(item => this.searchCurrentItemPath(item, path))
+ .find(itemChain => itemChain.length > 0);
+ if (itemChain) return [root, ...itemChain];
+ }
+ return [];
+ }
+
+
+ // Normalize a string to lowercase, no-accents
+ public static normalize(value: string) {
+ return value
+ .normalize("NFD")
+ .replace(/[\u0300-\u036f]/g, "")
+ .toLowerCase();
+ }
+
+
+ public static checkType(item: Gallery.Item | null, type: Gallery.ItemType): boolean {
+ return item?.properties.type === type ?? false;
+ }
+
+ public static directoriesFirst(items: Gallery.Item[]) {
+ return [
+ ...items
+ .filter(child => Navigation.checkType(child, "directory"))
+ .sort((a, b) => a.title.localeCompare(b.title)),
+
+ ...items
+ .filter(child => !Navigation.checkType(child, "directory")),
+ ];
+ }
+
+ public static getIcon(item: Gallery.Item): string {
+ if (item.path.length <= 1) return "home";
+ switch (item.properties.type) {
+ case "picture":
+ return "image";
+ case "directory":
+ return "folder";
+ case "other":
+ default:
+ return "file";
+ }
+ }
+}
diff --git a/viewer/src/store/galleryStore.ts b/viewer/src/store/galleryStore.ts
index e7d70f8..d2b28dd 100644
--- a/viewer/src/store/galleryStore.ts
+++ b/viewer/src/store/galleryStore.ts
@@ -18,7 +18,8 @@
*/
import { createModule, mutation, action } from "vuex-class-component";
-import Tools from '@/tools';
+import IndexFactory from '@/services/indexfactory';
+import Navigation from '@/services/navigation';
const VuexModule = createModule({
namespaced: "galleryStore",
@@ -29,7 +30,7 @@ export default class GalleryStore extends VuexModule {
config: Gallery.Config | null = null;
galleryItemsRoot: Gallery.Item | null = null;
- tags: Tag.Index = {};
+ tagsIndex: Tag.Index = {};
currentPath: string = "/";
// ---
@@ -42,8 +43,8 @@ export default class GalleryStore extends VuexModule {
this.galleryItemsRoot = galleryItemsRoot;
}
- @mutation private setTags(tags: Tag.Index) {
- this.tags = tags;
+ @mutation private setTagsIndex(tagsIndex: Tag.Index) {
+ this.tagsIndex = tagsIndex;
}
@mutation setCurrentPath(currentPath: string) {
@@ -53,7 +54,7 @@ export default class GalleryStore extends VuexModule {
get currentItemPath(): Gallery.Item[] {
const root = this.galleryItemsRoot;
if (root)
- return GalleryStore.searchCurrentItemPath(root, this.currentPath);
+ return Navigation.searchCurrentItemPath(root, this.currentPath);
return [];
}
@@ -67,7 +68,7 @@ export default class GalleryStore extends VuexModule {
// Fetches the gallery's JSON config
@action async fetchConfig() {
return fetch(`${process.env.VUE_APP_DATA_URL}config.json`, { cache: "no-cache" })
- .then(config => config.json())
+ .then(response => response.json())
.then(this.setConfig);
}
@@ -82,43 +83,7 @@ export default class GalleryStore extends VuexModule {
// Indexes the gallery
@action async indexTags() {
- const root = this.galleryItemsRoot;
- let index = {};
- if (root) GalleryStore.pushTagsForItem(index, root);
- console.log("Index: ", index);
- this.setTags(index);
- }
-
- // ---
-
- // Pushes all tags for a root item (and its children) to the index
- private static pushTagsForItem(index: Tag.Index, item: Gallery.Item) {
- console.log("IndexingTagsFor: ", item.path);
- if (item.properties.type === "directory") {
- item.properties.items.forEach(item => this.pushTagsForItem(index, item));
- return; // Directories are not indexed
- }
- for (const tag of item.tags) {
- const parts = tag.split('.');
- let lastPart: string | null = null;
- for (const part of parts) {
- if (!index[part]) index[part] = { tag: part, tagfiltered: Tools.normalize(part), items: [], children: {} };
- if (!index[part].items.includes(item)) index[part].items.push(item);
- if (lastPart) index[lastPart].children[part] = index[part];
- lastPart = part;
- }
- }
+ this.setTagsIndex(IndexFactory.generateTags(this.galleryItemsRoot));
}
- // Searches for an item by path from a root item (navigation)
- private static searchCurrentItemPath(item: Gallery.Item, path: string): Gallery.Item[] {
- if (path === item.path) return [item];
- if (item.properties.type === "directory" && path.startsWith(item.path)) {
- const itemChain = item.properties.items
- .map(item => this.searchCurrentItemPath(item, path))
- .find(itemChain => itemChain.length > 0);
- if (itemChain) return [item, ...itemChain];
- }
- return [];
- }
}
diff --git a/viewer/src/store/uiStore.ts b/viewer/src/store/uiStore.ts
index f7484de..5b6e1ca 100644
--- a/viewer/src/store/uiStore.ts
+++ b/viewer/src/store/uiStore.ts
@@ -28,18 +28,8 @@ export default class UIStore extends VuexModule {
fullscreen: boolean = false;
fullWidth: boolean = true;
- mode: "navigation" | "search" = "navigation";
- currentTags: Tag.Search[] = [];
-
- // ---
-
- get isModeSearch() {
- return this.mode === "search";
- }
-
- get isModeNavigation() {
- return this.mode === "navigation";
- }
+ searchMode: boolean = false;
+ searchFilters: Tag.Search[] = [];
// ---
@@ -50,12 +40,4 @@ export default class UIStore extends VuexModule {
@mutation toggleFullWidth() {
this.fullWidth = !this.fullWidth;
}
-
- @mutation setModeNavigation() {
- this.mode = "navigation";
- }
-
- @mutation setModeSearch() {
- this.mode = "search";
- }
}
diff --git a/viewer/src/tools.ts b/viewer/src/tools.ts
deleted file mode 100644
index 80a7ef0..0000000
--- a/viewer/src/tools.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-/* ldgallery - A static generator which turns a collection of tagged
--- pictures into a searchable web gallery.
---
--- Copyright (C) 2019-2020 Guillaume FOUET
---
--- This program is free software: you can redistribute it and/or modify
--- it under the terms of the GNU Affero General Public License as
--- published by the Free Software Foundation, either version 3 of the
--- License, or (at your option) any later version.
---
--- This program is distributed in the hope that it will be useful,
--- but WITHOUT ANY WARRANTY; without even the implied warranty of
--- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
--- GNU Affero General Public License for more details.
---
--- You should have received a copy of the GNU Affero General Public License
--- along with this program. If not, see .
-*/
-
-export default class Tools {
-
- // Normalize a string to lowercase, no-accents
- public static normalize(value: string) {
- return value
- .normalize("NFD")
- .replace(/[\u0300-\u036f]/g, "")
- .toLowerCase();
- }
-
-
- public static checkType(item: Gallery.Item | null, type: Gallery.ItemType): boolean {
- return item?.properties.type === type ?? false;
- }
-
- public static directoriesFirst(items: Gallery.Item[]) {
- return [
- ...items
- .filter(child => Tools.checkType(child, "directory"))
- .sort((a, b) => a.title.localeCompare(b.title)),
-
- ...items
- .filter(child => !Tools.checkType(child, "directory")),
- ];
- }
-
- public static getIcon(item: Gallery.Item): string {
- if (item.path.length <= 1) return "home";
- switch (item.properties.type) {
- case "picture":
- return "image";
- case "directory":
- return "folder";
- case "other":
- default:
- return "file";
- }
- }
-
-}
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 @@
-->
-