From c9ac0c75d9273d3df86e66f2dad830146b7b1008 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Thu, 1 Jul 2021 20:19:47 +0200
Subject: viewer: Upgraded dependencies for Vue 2
Removed obsolete deps core-js ; resize-observer-polyfill
---
viewer/src/services/ldzoom.ts | 2 --
1 file changed, 2 deletions(-)
(limited to 'viewer/src/services/ldzoom.ts')
diff --git a/viewer/src/services/ldzoom.ts b/viewer/src/services/ldzoom.ts
index 22d4699..0fb0848 100644
--- a/viewer/src/services/ldzoom.ts
+++ b/viewer/src/services/ldzoom.ts
@@ -17,8 +17,6 @@
-- along with this program. If not, see .
*/
-// polyfill still required for IE and Safari, see https://caniuse.com/#feat=resizeobserver
-import ResizeObserver from "resize-observer-polyfill";
import "hammerjs";
/**
--
cgit v1.2.3
From 9165cc1efcf7791f78b61b2c51a9de651b1b09aa Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Fri, 2 Jul 2021 22:53:16 +0200
Subject: viewer: types normalization - gallery.d.ts
GitHub: closes #301
---
viewer/src/services/ldzoom.ts | 7 ++++---
1 file changed, 4 insertions(+), 3 deletions(-)
(limited to 'viewer/src/services/ldzoom.ts')
diff --git a/viewer/src/services/ldzoom.ts b/viewer/src/services/ldzoom.ts
index 0fb0848..33a64c8 100644
--- a/viewer/src/services/ldzoom.ts
+++ b/viewer/src/services/ldzoom.ts
@@ -17,6 +17,7 @@
-- along with this program. If not, see .
*/
+import { PictureProperties, Resolution } from "@/@types/gallery";
import "hammerjs";
/**
@@ -25,7 +26,7 @@ import "hammerjs";
export default class LdZoom {
readonly containerElement: HTMLDivElement;
readonly imageElement: HTMLImageElement;
- readonly pictureProperties: Gallery.PictureProperties;
+ readonly pictureProperties: PictureProperties;
readonly maxScaleFactor: number;
readonly scrollZoomSpeed: number;
scaleFactor: number = 0.0;
@@ -33,7 +34,7 @@ export default class LdZoom {
constructor(
containerElement: HTMLDivElement,
imageElement: HTMLImageElement,
- pictureProperties: Gallery.PictureProperties,
+ pictureProperties: PictureProperties,
maxScaleFactor: number,
scrollZoomSpeed: number
) {
@@ -83,7 +84,7 @@ export default class LdZoom {
/**
* Returns the picture resolution as it should be displayed.
*/
- private getDisplayResolution(): Gallery.Resolution {
+ private getDisplayResolution(): Resolution {
return {
width: this.pictureProperties.resolution.width * this.scaleFactor,
height: this.pictureProperties.resolution.height * this.scaleFactor,
--
cgit v1.2.3
From 00510820a2794efcadbc83f7f8b54318fe198ecb Mon Sep 17 00:00:00 2001
From: Zéro~Informatique
Date: Tue, 26 Jul 2022 08:44:34 +0200
Subject: 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
---
viewer/src/services/ldzoom.ts | 135 ------------------------------------------
1 file changed, 135 deletions(-)
delete mode 100644 viewer/src/services/ldzoom.ts
(limited to 'viewer/src/services/ldzoom.ts')
diff --git a/viewer/src/services/ldzoom.ts b/viewer/src/services/ldzoom.ts
deleted file mode 100644
index 33a64c8..0000000
--- a/viewer/src/services/ldzoom.ts
+++ /dev/null
@@ -1,135 +0,0 @@
-/* ldgallery - A static generator which turns a collection of tagged
--- pictures into a searchable web gallery.
---
--- Copyright (C) 2020 Pacien TRAN-GIRARD
---
--- 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 { PictureProperties, Resolution } from "@/@types/gallery";
-import "hammerjs";
-
-/**
- * Mousewheel and pinch zoom handler.
- */
-export default class LdZoom {
- readonly containerElement: HTMLDivElement;
- readonly imageElement: HTMLImageElement;
- readonly pictureProperties: PictureProperties;
- readonly maxScaleFactor: number;
- readonly scrollZoomSpeed: number;
- scaleFactor: number = 0.0;
-
- constructor(
- containerElement: HTMLDivElement,
- imageElement: HTMLImageElement,
- pictureProperties: PictureProperties,
- maxScaleFactor: number,
- scrollZoomSpeed: number
- ) {
- this.containerElement = containerElement;
- this.imageElement = imageElement;
- this.pictureProperties = pictureProperties;
- this.maxScaleFactor = maxScaleFactor;
- this.scrollZoomSpeed = scrollZoomSpeed;
- }
-
- /**
- * Register event listeners.
- */
- public install() {
- this.updateImageScale(this.scaleFactor);
-
- new ResizeObserver(() => {
- this.updateImageScale(this.scaleFactor);
- }).observe(this.containerElement);
-
- this.containerElement.addEventListener("wheel", wheelEvent => {
- wheelEvent.preventDefault();
- const scaleFactor = this.scaleFactor - Math.sign(wheelEvent.deltaY) * this.scrollZoomSpeed;
- this.zoom(wheelEvent.offsetX, wheelEvent.offsetY, scaleFactor);
- });
-
- const pinchListener = new Hammer(this.containerElement);
- pinchListener.get("pinch").set({ enable: true });
- this.installPinchHandler(pinchListener);
- }
-
- private installPinchHandler(pinchListener: HammerManager) {
- let startScaleFactor = 0.0;
-
- pinchListener.on("pinchstart", (pinchEvent: HammerInput) => {
- startScaleFactor = this.scaleFactor;
- });
-
- pinchListener.on("pinchmove", (pinchEvent: HammerInput) => {
- const focusX = pinchEvent.center.x + this.containerElement.scrollLeft;
- const focusY = pinchEvent.center.y + this.containerElement.scrollTop;
- const scaleFactor = pinchEvent.scale * startScaleFactor;
- this.zoom(focusX, focusY, scaleFactor);
- });
- }
-
- /**
- * Returns the picture resolution as it should be displayed.
- */
- private getDisplayResolution(): Resolution {
- return {
- width: this.pictureProperties.resolution.width * this.scaleFactor,
- height: this.pictureProperties.resolution.height * this.scaleFactor,
- };
- }
-
- /**
- * Applies scaling to the DOM image element.
- * To call after internal intermediate computations because DOM properties aren't stable.
- */
- private resizeImageElement() {
- const imageDim = this.getDisplayResolution();
- this.imageElement.width = imageDim.width;
- this.imageElement.height = imageDim.height;
- }
-
- /**
- * Centers the image element inside its container if it fits, or stick to the top and left borders otherwise.
- * It's depressingly hard to do in pure CSS…
- */
- private recenterImageElement() {
- const imageDim = this.getDisplayResolution();
- const marginLeft = Math.max((this.containerElement.clientWidth - imageDim.width) / 2, 0);
- const marginTop = Math.max((this.containerElement.clientHeight - imageDim.height) / 2, 0);
- this.imageElement.style.marginLeft = `${marginLeft}px`;
- this.imageElement.style.marginTop = `${marginTop}px`;
- }
-
- private zoom(focusX: number, focusY: number, scaleFactor: number) {
- const imageDim = this.getDisplayResolution();
- const ratioX = focusX / imageDim.width;
- const ratioY = focusY / imageDim.height;
- this.updateImageScale(Math.min(scaleFactor, this.maxScaleFactor));
-
- const newImageDim = this.getDisplayResolution();
- this.containerElement.scrollLeft -= focusX - ratioX * newImageDim.width;
- this.containerElement.scrollTop -= focusY - ratioY * newImageDim.height;
- }
-
- private updateImageScale(newScaleFactor: number) {
- const horizontalFillRatio = this.containerElement.clientWidth / this.pictureProperties.resolution.width;
- const verticalFillRatio = this.containerElement.clientHeight / this.pictureProperties.resolution.height;
- const minScaleFactor = Math.min(horizontalFillRatio, verticalFillRatio, 1.0);
- this.scaleFactor = Math.max(newScaleFactor, minScaleFactor);
- this.resizeImageElement();
- this.recenterImageElement();
- }
-}
--
cgit v1.2.3