aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/plugins
diff options
context:
space:
mode:
authorZéro~Informatique2022-07-26 08:44:34 +0200
committerpacien2022-09-03 01:30:42 +0200
commit00510820a2794efcadbc83f7f8b54318fe198ecb (patch)
treea894d99c22a601197869c7a6928d40bb4ae2c392 /viewer/src/plugins
parent88aa098c07e067f9f737fbeba1f52a9bd5042e53 (diff)
downloadldgallery-00510820a2794efcadbc83f7f8b54318fe198ecb.tar.gz
viewer: migrate to vue 3, general refactoring and cleanup
Non-exhaustive list of fixes and improvements done at the same time: - html default background to grey (avoids white flash during init) - unified links behavior - added more theme variables - removed the flex-expand transition (it wasn't working) and replaced it with a slide - fixed LdLoading not centered on the content - title on removable tags - fixed an issue with encoded URI from vue-router - unified Item resource URLs - removed the iframe for PlainTextViewer (it wasn't working properly) and replaced it with a pre - fixed clear and search buttons tabindex - fixed the information panel bumping up during the fade animation of tag's dropdown - fixed some focus outlines not appearing correctly - moved CSS variables to the :root context - Code cleaning GitHub: closes #217 GitHub: closes #300 GitHub: closes #297 GitHub: closes #105 GitHub: closes #267 GitHub: closes #275 GitHub: closes #228 GitHub: closes #215 GitHub: closes #112
Diffstat (limited to 'viewer/src/plugins')
-rw-r--r--viewer/src/plugins/asyncLib.ts3
-rw-r--r--viewer/src/plugins/buefy.ts48
-rw-r--r--viewer/src/plugins/devServer.js53
-rw-r--r--viewer/src/plugins/dragscroll.ts23
-rw-r--r--viewer/src/plugins/fontawesome-icons.ts45
-rw-r--r--viewer/src/plugins/fontawesome.ts31
-rw-r--r--viewer/src/plugins/i18n.ts19
-rw-r--r--viewer/src/plugins/index.ts8
-rw-r--r--viewer/src/plugins/lazyimage.ts23
-rw-r--r--viewer/src/plugins/router.ts22
10 files changed, 73 insertions, 202 deletions
diff --git a/viewer/src/plugins/asyncLib.ts b/viewer/src/plugins/asyncLib.ts
new file mode 100644
index 0000000..de4f7ee
--- /dev/null
+++ b/viewer/src/plugins/asyncLib.ts
@@ -0,0 +1,3 @@
1
2export const importFaIcon = async() => (await import(/* webpackChunkName: "icons" */ '@fortawesome/vue-fontawesome')).FontAwesomeIcon;
3export const importHammer = async() => import(/* webpackChunkName: "hammer" */'hammerjs');
diff --git a/viewer/src/plugins/buefy.ts b/viewer/src/plugins/buefy.ts
deleted file mode 100644
index 4794ad9..0000000
--- a/viewer/src/plugins/buefy.ts
+++ /dev/null
@@ -1,48 +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
20import Vue from "vue";
21
22// @ts-ignore
23import Taginput from "buefy/src/components/taginput";
24// @ts-ignore
25import Loading from "buefy/src/components/loading";
26// @ts-ignore
27import Button from "buefy/src/components/button";
28// @ts-ignore
29import SnackBar from "buefy/src/components/snackbar";
30// @ts-ignore
31import Tag from "buefy/src/components/tag";
32// @ts-ignore
33import DropDown from "buefy/src/components/dropdown";
34
35import "@/assets/scss/buefy.scss";
36
37Vue.use(Taginput);
38Vue.use(Loading);
39Vue.use(Button);
40Vue.use(SnackBar);
41Vue.use(Tag);
42Vue.use(DropDown);
43
44declare module "vue/types/vue" {
45 interface Vue {
46 $buefy: any;
47 }
48}
diff --git a/viewer/src/plugins/devServer.js b/viewer/src/plugins/devServer.js
new file mode 100644
index 0000000..2cccbbb
--- /dev/null
+++ b/viewer/src/plugins/devServer.js
@@ -0,0 +1,53 @@
1/* ldgallery - A static generator which turns a collection of tagged
2-- pictures into a searchable web gallery.
3--
4-- Copyright (C) 2019-2022 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/*
21-- Create a file .env.development.local in the project to customize your DevServer
22-- VUE_APP_DEVSERVER_CONFIG_PATH=<http_url> will use the dev_proxyconfig
23-- VUE_APP_DEVSERVER_CONFIG_PATH=<fs_path> will use the dev_fsconfig
24*/
25
26const devReady = Boolean(process.env.VUE_APP_DEVSERVER_CONFIG_PATH);
27const devIsProxy = devReady && Boolean(process.env.VUE_APP_DEVSERVER_CONFIG_PATH?.match(/^https?:\/\//i));
28const devLocalpath = `^/${process.env.VUE_APP_DATA_URL}`;
29const devProxyconfig = {
30 [devLocalpath]: {
31 target: process.env.VUE_APP_DEVSERVER_CONFIG_PATH,
32 pathRewrite: { [devLocalpath]: '' },
33 },
34};
35
36function devFsConfig(middlewares, devServer) {
37 devServer.app.get(`${devLocalpath}*`, (req, res) => {
38 const fs = require('fs');
39 const url = req.url.slice(process.env.VUE_APP_DATA_URL?.length);
40 const paramIdx = url.indexOf('?');
41 const filepath = paramIdx < 0 ? url : url.substring(0, paramIdx);
42 const fullpath = `${process.env.VUE_APP_DEVSERVER_CONFIG_PATH}${decodeURIComponent(filepath)}`;
43 const file = fs.readFileSync(fullpath);
44 res.end(file);
45 });
46 return middlewares;
47}
48
49module.exports = {
50 port: process.env.VUE_APP_DEVSERVER_PORT,
51 proxy: devReady && devIsProxy ? devProxyconfig : undefined,
52 setupMiddlewares: devReady && !devIsProxy ? devFsConfig : undefined,
53};
diff --git a/viewer/src/plugins/dragscroll.ts b/viewer/src/plugins/dragscroll.ts
deleted file mode 100644
index a10b0fd..0000000
--- a/viewer/src/plugins/dragscroll.ts
+++ /dev/null
@@ -1,23 +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
20import Vue from "vue";
21import VueDragscroll from "vue-dragscroll";
22
23Vue.use(VueDragscroll);
diff --git a/viewer/src/plugins/fontawesome-icons.ts b/viewer/src/plugins/fontawesome-icons.ts
deleted file mode 100644
index 4b50641..0000000
--- a/viewer/src/plugins/fontawesome-icons.ts
+++ /dev/null
@@ -1,45 +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
20export {
21 faFolder,
22 faFolderOpen,
23 faEraser,
24 faSearch,
25 faPlus,
26 faMinus,
27 faImage,
28 faHome,
29 faArrowLeft,
30 faLevelUpAlt,
31 faAngleRight,
32 faAngleDoubleLeft,
33 faFile,
34 faFileAlt,
35 faFilePdf,
36 faFileVideo,
37 faFileAudio,
38 faFileDownload,
39 faCaretUp,
40 faCaretDown,
41 faAngleDoubleDown,
42 faSortAmountDown,
43} from "@fortawesome/free-solid-svg-icons";
44
45export { faCircle, faDotCircle } from "@fortawesome/free-regular-svg-icons";
diff --git a/viewer/src/plugins/fontawesome.ts b/viewer/src/plugins/fontawesome.ts
deleted file mode 100644
index 25ddd99..0000000
--- a/viewer/src/plugins/fontawesome.ts
+++ /dev/null
@@ -1,31 +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
20import Vue from "vue";
21
22import { library, config } from "@fortawesome/fontawesome-svg-core";
23import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
24import * as faIcons from "./fontawesome-icons";
25
26library.add(faIcons);
27
28config.autoAddCss = false;