From 3f0bc6bc64325d6b97b02fa9d8cf5b5d3611450b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marian=20D=C3=B6rk?= Date: Thu, 14 Dec 2023 20:17:00 +0100 Subject: [PATCH] increase image to full size on click/tap --- js/data.js | 33 ++++++++++++++++++++++----------- 1 file changed, 22 insertions(+), 11 deletions(-) diff --git a/js/data.js b/js/data.js index 3e885cf..0db476d 100644 --- a/js/data.js +++ b/js/data.js @@ -105,18 +105,29 @@ async function updateView(){ } else { - // Calculate centering - const rect = img.getBoundingClientRect(); - const centerX = (window.innerWidth / 2) - (rect.width / 2); - const centerY = (window.innerHeight / 2) - (rect.height / 2); + // Calculate centering + const rect = img.getBoundingClientRect(); + const centerX = (window.innerWidth / 2) - (rect.width / 2); + const centerY = (window.innerHeight / 2) - (rect.height / 2); - const offsetX = centerX - rect.left; - const offsetY = centerY - rect.top; - - this.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(2)`; - - content.classList.add('enlarged'); - app.classList.add('overlay'); + const offsetX = centerX - rect.left; + const offsetY = centerY - rect.top; + + // Get the natural dimensions of the image + const naturalWidth = img.naturalWidth; + const naturalHeight = img.naturalHeight; + + // Calculate the maximum scale factor + const maxScaleX = window.innerWidth / rect.width; + const maxScaleY = window.innerHeight / rect.height; + const maxScaleNatural = Math.min(naturalWidth / rect.width, naturalHeight / rect.height); + const scale = Math.min(maxScaleX, maxScaleY, maxScaleNatural); + + // Apply the transform + this.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`; + + content.classList.add('enlarged'); + app.classList.add('overlay'); document.body.addEventListener('touchstart', preventDefault); document.body.addEventListener('wheel', preventDefault);