Theodor-Springmann-Stiftung/kgpz_web
1
0
Fork 0
mirror of https://github.com/Theodor-Springmann-Stiftung/kgpz_web.git synced 2025-10-29 17:15:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Scroll whell in zoom mode

Browse Source
This commit is contained in:
Simon Martens
2025-09-23 12:27:51 +02:00
parent b5a905e107
commit 0dd99439a8
3 changed files with 51 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
views/assets/scripts.js
View File

@@ -424,8 +424,12 @@ class B extends HTMLElement {
} }
// Update image transform based on zoom and pan // Update image transform based on zoom and pan
updateImageTransform() { updateImageTransform() {
const e = this.querySelector("#single-page-image"); const e = this.querySelector("#single-page-image"), t = this.querySelector("#image-container");
e.style.transform = `scale(${this.zoomLevel}) translate3d(${this.panX / this.zoomLevel}px, ${this.panY / this.zoomLevel}px, 0)`; if (e.style.transform = `scale(${this.zoomLevel}) translate3d(${this.panX / this.zoomLevel}px, ${this.panY / this.zoomLevel}px, 0)`, this.zoomLevel > 1) {
const i = window.innerWidth, n = window.innerHeight, o = i * this.zoomLevel * 1.5, r = n * this.zoomLevel * 1.5;
t.style.width = `${o}px`, t.style.height = `${r}px`, t.style.minWidth = `${o}px`, t.style.minHeight = `${r}px`, console.log(`Zoom ${this.zoomLevel}: Container size set to ${o}x${r}`);
} else
t.style.width = "", t.style.height = "", t.style.minWidth = "", t.style.minHeight = "";
} }
// Update cursor based on zoom state // Update cursor based on zoom state
updateCursor() { updateCursor() {
@@ -440,7 +444,7 @@ class B extends HTMLElement {
// Update scroll behavior based on zoom level // Update scroll behavior based on zoom level
updateScrollBehavior() { updateScrollBehavior() {
const e = this.querySelector(".flex-1.bg-slate-50.overflow-auto"), t = this.querySelector("#image-scroll-container"); const e = this.querySelector(".flex-1.bg-slate-50.overflow-auto"), t = this.querySelector("#image-scroll-container");
!e || !t || (this.zoomLevel > 1 ? (e.style.overflow = "hidden", t.style.height = "100vh", t.style.overflow = "hidden") : (e.style.overflow = "auto", t.style.height = "", t.style.overflow = "auto")); !e || !t || (this.zoomLevel > 1 ? (e.style.overflow = "hidden", t.style.height = "100vh", t.style.overflow = "auto", t.style.alignItems = "flex-start", t.style.justifyContent = "flex-start") : (e.style.overflow = "auto", t.style.height = "", t.style.overflow = "auto", t.style.alignItems = "center", t.style.justifyContent = "center"));
} }
// Reset zoom state when showing new image // Reset zoom state when showing new image
resetZoom() { resetZoom() {
@@ -744,7 +748,7 @@ customElements.define("inhaltsverzeichnis-scrollspy", q);
window.currentPageContainers = window.currentPageContainers || []; window.currentPageContainers = window.currentPageContainers || [];
window.currentActiveIndex = window.currentActiveIndex || 0; window.currentActiveIndex = window.currentActiveIndex || 0;
window.pageObserver = window.pageObserver || null; window.pageObserver = window.pageObserver || null;
function M(s, e, t, i = null) { function z(s, e, t, i = null) {
let n = document.querySelector("single-page-viewer"); let n = document.querySelector("single-page-viewer");
n || (n = document.createElement("single-page-viewer"), document.body.appendChild(n)); n || (n = document.createElement("single-page-viewer"), document.body.appendChild(n));
const o = s.closest('[data-beilage="true"]') !== null, r = window.templateData && window.templateData.targetPage ? window.templateData.targetPage : 0, a = s.closest(".newspaper-page-container, .piece-page-container"); const o = s.closest('[data-beilage="true"]') !== null, r = window.templateData && window.templateData.targetPage ? window.templateData.targetPage : 0, a = s.closest(".newspaper-page-container, .piece-page-container");
@@ -762,7 +766,7 @@ function M(s, e, t, i = null) {
function C() { function C() {
document.getElementById("pageModal").classList.add("hidden"); document.getElementById("pageModal").classList.add("hidden");
} }
function z() { function M() {
if (window.pageObserver && (window.pageObserver.disconnect(), window.pageObserver = null), window.currentPageContainers = Array.from(document.querySelectorAll(".newspaper-page-container")), window.currentActiveIndex = 0, b(), document.querySelector(".newspaper-page-container")) { if (window.pageObserver && (window.pageObserver.disconnect(), window.pageObserver = null), window.currentPageContainers = Array.from(document.querySelectorAll(".newspaper-page-container")), window.currentActiveIndex = 0, b(), document.querySelector(".newspaper-page-container")) {
let e = /* @__PURE__ */ new Set(); let e = /* @__PURE__ */ new Set();
window.pageObserver = new IntersectionObserver( window.pageObserver = new IntersectionObserver(
@@ -1007,7 +1011,7 @@ function O(s, e) {
} }
} }
function P() { function P() {
z(), window.addEventListener("scroll", function() { M(), window.addEventListener("scroll", function() {
clearTimeout(window.scrollTimeout), window.scrollTimeout = setTimeout(() => { clearTimeout(window.scrollTimeout), window.scrollTimeout = setTimeout(() => {
b(); b();
}, 50); }, 50);
@@ -1058,7 +1062,7 @@ function Y() {
} }
} }
} }
window.enlargePage = M; window.enlargePage = z;
window.closeModal = C; window.closeModal = C;
window.scrollToPreviousPage = N; window.scrollToPreviousPage = N;
window.scrollToNextPage = $; window.scrollToNextPage = $;

2
views/assets/style.css
View File

File diff suppressed because one or more lines are too long

45
views/transform/single-page-viewer.js
View File

@@ -585,8 +585,34 @@ export class SinglePageViewer extends HTMLElement {
// Update image transform based on zoom and pan // Update image transform based on zoom and pan
updateImageTransform() { updateImageTransform() {
const img = this.querySelector('#single-page-image'); const img = this.querySelector('#single-page-image');
const imageContainer = this.querySelector('#image-container');
// Use translate3d for hardware acceleration and better performance // Use translate3d for hardware acceleration and better performance
img.style.transform = `scale(${this.zoomLevel}) translate3d(${this.panX / this.zoomLevel}px, ${this.panY / this.zoomLevel}px, 0)`; img.style.transform = `scale(${this.zoomLevel}) translate3d(${this.panX / this.zoomLevel}px, ${this.panY / this.zoomLevel}px, 0)`;
// Make the container grow with the zoom level to provide scrollable area
if (this.zoomLevel > 1.0) {
// Use viewport dimensions as base and scale them up
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
// Make container much larger than viewport to ensure scrollable area
const containerWidth = viewportWidth * this.zoomLevel * 1.5;
const containerHeight = viewportHeight * this.zoomLevel * 1.5;
imageContainer.style.width = `${containerWidth}px`;
imageContainer.style.height = `${containerHeight}px`;
imageContainer.style.minWidth = `${containerWidth}px`;
imageContainer.style.minHeight = `${containerHeight}px`;
console.log(`Zoom ${this.zoomLevel}: Container size set to ${containerWidth}x${containerHeight}`);
} else {
// Reset container size at 100% zoom
imageContainer.style.width = '';
imageContainer.style.height = '';
imageContainer.style.minWidth = '';
imageContainer.style.minHeight = '';
}
} }
@@ -637,20 +663,27 @@ export class SinglePageViewer extends HTMLElement {
// Update scroll behavior based on zoom level // Update scroll behavior based on zoom level
updateScrollBehavior() { updateScrollBehavior() {
const mainContainer = this.querySelector('.flex-1.bg-slate-50.overflow-auto'); const mainContainer = this.querySelector('.flex-1.bg-slate-50.overflow-auto');
const imageContainer = this.querySelector('#image-scroll-container'); const imageScrollContainer = this.querySelector('#image-scroll-container');
if (!mainContainer || !imageContainer) return; if (!mainContainer || !imageScrollContainer) return;
if (this.zoomLevel > 1.0) { if (this.zoomLevel > 1.0) {
// Disable scrolling on main container and make image container full height // Disable scrolling on main container and make image container full height
mainContainer.style.overflow = 'hidden'; mainContainer.style.overflow = 'hidden';
imageContainer.style.height = '100vh'; imageScrollContainer.style.height = '100vh';
imageContainer.style.overflow = 'hidden'; // Allow overflow in both directions for panning with scroll wheel/two fingers
imageScrollContainer.style.overflow = 'auto';
// Remove the centering behavior when zoomed to allow full scrolling
imageScrollContainer.style.alignItems = 'flex-start';
imageScrollContainer.style.justifyContent = 'flex-start';
} else { } else {
// Reset to normal scrolling behavior // Reset to normal scrolling behavior
mainContainer.style.overflow = 'auto'; mainContainer.style.overflow = 'auto';
imageContainer.style.height = ''; imageScrollContainer.style.height = '';
imageContainer.style.overflow = 'auto'; imageScrollContainer.style.overflow = 'auto';
// Restore centering at 100% zoom
imageScrollContainer.style.alignItems = 'center';
imageScrollContainer.style.justifyContent = 'center';
} }
} }