From 09f0cb7ae970097397b80771f88720847ab4e5cf Mon Sep 17 00:00:00 2001
From: Warren <warren@momentry.ddns.net>
Date: Sun, 17 May 2026 05:37:49 +0800
Subject: [PATCH] feat: Add zoom in/out controls for image preview
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Features:
1. Zoom Controls
   - 🔍− button: zoom out (20% step)
   - 1:1 button: reset to 100%
   - 🔍+ button: zoom in (20% step)
   - Zoom level display: 100%, 120%, etc.

2. Zoom Range
   - Minimum: 20% (0.2x)
   - Maximum: 500% (5x)
   - Default: 100% (1x)

3. Auto-reset
   - Reset zoom to 100% when navigating photos
   - Reset when opening new image

4. Layout
   - Zoom buttons at top
   - Photo in scrollable container
   - Left/right arrows for navigation

Implementation:
- CSS transform: scale() for smooth zoom
- Remove max-width/max-height at high zoom
- Zoom level indicator updates dynamically

Files:
- src/page.html (zoomPhoto function, zoom UI)
---
 data/auth.sqlite | Bin 73728 -> 73728 bytes
 src/page.html    |  46 +++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/data/auth.sqlite b/data/auth.sqlite
index 6c03a00d900a411ef16aed87a240a3f48f33434e..a65c49e428c549ece64b1ce198228d9499554f44 100644
GIT binary patch
delta 187
zcmZoTz|wGlWr8$g`a~IL#`KK|Q)L<5C;Q7TVtc%@QK8Xe@;teDAf{2H=VT}O4NQ+$
zZvG<woL}+;FS9IDZhmfRUP)0U!*Nb#QKppC+<b<Uo4@FP;1@W-%FM~caGZgG1<b%H
y>VJx#(RuRzcw?r=t2Td${}1GC{*rIl4-{1Ue+Df0A0)W_3qRw3eqLt=Bme;2%0W{A

delta 187
zcmZoTz|wGlWr8$g>_i!7#@LMsQ)L+)C;Q7TVte$qQK8Xk@;teDAf{2H^JFLa4NQ;T
zZvG<woL}+~FS9IDZhmfRUP)0U!$D4FQKppC+<b<^o4@FP;1@W=%FM~caFBt41<b%H
t>VJwKXx;vJW3a*T|AD;CU-Aw6fr4uP&wvI0g9NvK;b;8M&+Ev51OPbILOK8d

diff --git a/src/page.html b/src/page.html
index c7db741..b179b86 100644
--- a/src/page.html
+++ b/src/page.html
@@ -796,10 +796,22 @@ function showDetail(fuuid){
         }else if(isDocPdf){
             h+="<iframe sandbox='allow-same-origin' src='"+src+"' style='width:100%;height:400px;border:none;border-radius:8px;background:#fff'></iframe>";
         }else{
+            h+="<div style='display:flex;flex-direction:column;align-items:center;width:100%'>";
+            h+="<div style='display:flex;gap:8px;margin-bottom:8px'>";
+            h+="<button onclick='zoomPhoto(-0.2)' style='background:#1e293b;border:1px solid #334155;color:#94a3b8;font-size:18px;padding:6px 12px;border-radius:6px;cursor:pointer'>🔍−</button>";
+            h+="<button onclick='zoomPhoto(0)' style='background:#1e293b;border:1px solid #334155;color:#94a3b8;font-size:18px;padding:6px 12px;border-radius:6px;cursor:pointer'>1:1</button>";
+            h+="<button onclick='zoomPhoto(0.2)' style='background:#1e293b;border:1px solid #334155;color:#94a3b8;font-size:18px;padding:6px 12px;border-radius:6px;cursor:pointer'>🔍+</button>";
+            h+="<span id=mb-zoom-level style='color:#94a3b8;font-size:14px;padding:4px 8px'>100%</span>";
+            h+="</div>";
+            h+="<div style='position:relative;display:flex;align-items:center;gap:8px'>";
             h+="<button id=mb-prev-btn onclick=navigatePhoto('prev') style='background:#1e293b;border:1px solid #334155;color:#94a3b8;font-size:24px;padding:8px 14px;border-radius:6px;cursor:pointer'>◀</button>";
-            h+="<img id=mb-preview-img src='"+src+"' style='max-width:100%;max-height:400px;min-height:100px;min-width:100px;border-radius:8px;background:#0f172a' onerror=\"this.onerror=null;this.alt='No preview'\">";
+            h+="<div style='overflow:auto;max-width:100%;max-height:400px;border-radius:8px;background:#0f172a'>";
+            h+="<img id=mb-preview-img src='"+src+"' style='min-height:100px;min-width:100px;border-radius:8px;background:#0f172a;transform-origin:center center' onerror=\"this.onerror=null;this.alt='No preview'\">";
+            h+="</div>";
             h+="<button id=mb-next-btn onclick=navigatePhoto('next') style='background:#1e293b;border:1px solid #334155;color:#94a3b8;font-size:24px;padding:8px 14px;border-radius:6px;cursor:pointer'>▶</button>";
             h+="<span id=mb-photo-pos style='position:absolute;bottom:8px;right:50px;background:rgba(0,0,0,.7);color:#94a3b8;padding:2px 8px;border-radius:4px;font-size:11px'>1/1</span>";
+            h+="</div>";
+            h+="</div>";
         }
         h+="</div>";
         b.innerHTML=h;
@@ -852,7 +864,27 @@ function closeDetail(){
 }
 
 // PHOTO NAVIGATION
-var _photoUuid=null,_photoList=[];
+var _photoUuid=null,_photoList=[],_photoZoom=1;
+
+function zoomPhoto(delta){
+    var img=document.getElementById("mb-preview-img");
+    if(!img)return;
+    
+    if(delta==0){
+        _photoZoom=1;
+    }else{
+        _photoZoom+=delta;
+        if(_photoZoom<0.2)_photoZoom=0.2;
+        if(_photoZoom>5)_photoZoom=5;
+    }
+    
+    img.style.transform="scale("+_photoZoom+")";
+    img.style.maxWidth=_photoZoom>=1?"none":"100%";
+    img.style.maxHeight=_photoZoom>=1?"none":"400px";
+    
+    var level=document.getElementById("mb-zoom-level");
+    if(level)level.textContent=Math.round(_photoZoom*100)+"%";
+}
 
 function setupPhotoNav(fuuid){
     if(!_td) return;
@@ -882,8 +914,16 @@ function navigatePhoto(dir){
     if(dir=="prev"&&idx>0)idx--;else if(dir=="next"&&idx<_photoList.length-1)idx++;
     if(idx>=0&&idx<_photoList.length){
         _photoUuid=_photoList[idx];
+        _photoZoom=1;
         var img=document.getElementById("mb-preview-img");
-        if(img)img.src="/api/v2/files/"+userId+"/"+_photoUuid+"/stream?_="+Date.now();
+        if(img){
+            img.src="/api/v2/files/"+userId+"/"+_photoUuid+"/stream?_="+Date.now();
+            img.style.transform="scale(1)";
+            img.style.maxWidth="100%";
+            img.style.maxHeight="400px";
+        }
+        var level=document.getElementById("mb-zoom-level");
+        if(level)level.textContent="100%";
         updatePhotoPos(_photoUuid);
     }
 }