way/pigway-frame-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 29 Wiki Activity

Revert "fix: fit image viewer dialog width to its image"

Browse Source 
This reverts commit db0b408680.
This commit is contained in:
渡口浪人
2026-10-18 15:46:53 +08:00
parent db0b408680
commit 7393325b6e
2 changed files with 3 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pigway_frame_flow/web/app.js
+2 -11
View File
@@ -85,7 +85,7 @@ function clientUUID(){if(typeof crypto.randomUUID==='function')return crypto.ran
async function accepted(path,payload){const key='web-'+clientUUID();const result=await api(path,{method:'POST',body:payload,headers:{'Idempotency-Key':key}});toast(t('accepted'));return result.operation_id;}
async function waitOperation(id){for(let n=0;n<120;n++){const operation=await api('/api/v1/operations/'+id);if(operation.status==='COMPLETED')return operation;if(['FAILED','UNKNOWN'].includes(operation.status))throw new Error(operation.status==='UNKNOWN'?t('unknown'):operationErrorMessage(operation.error));await new Promise(resolve=>setTimeout(resolve,2000));}throw new Error(t('syncing'));}
function showModal(html){
const dialog=$('#modal'),content=$('#modal-content');dialog.style.removeProperty('width');content.innerHTML=html;
const dialog=$('#modal'),content=$('#modal-content');content.innerHTML=html;
const image=content.querySelector('img');dialog.classList.toggle('image-viewer',!!image);document.body.classList.toggle('image-viewer-open',!!image);dialog.onclose=()=>document.body.classList.remove('image-viewer-open');
if(image){
const viewport=document.createElement('div');viewport.className='image-viewer-viewport';image.before(viewport);viewport.append(image);
@@ -96,16 +96,7 @@ function showModal(html){
const actions=content.querySelector('.modal-actions')||document.createElement('div');actions.classList.add('modal-actions','image-viewer-actions');
const cancel=actions.querySelector('#modal-cancel');if(cancel){cancel.before(fit,original);actions.append(cancel);}else{actions.append(fit,original);}
footer.append(actions);content.append(footer);
const sizeToImage=()=>{
if(!dialog.open||!image.naturalWidth)return;
const style=getComputedStyle(dialog),chrome=parseFloat(style.paddingLeft)+parseFloat(style.paddingRight)+parseFloat(style.borderLeftWidth)+parseFloat(style.borderRightWidth);
const scale=viewport.classList.contains('actual-size')?1:Math.min(1,viewport.clientHeight/image.naturalHeight);
dialog.style.width=Math.min(innerWidth-(innerWidth<=600?16:24),Math.max(360,image.naturalWidth*scale+chrome))+'px';
};
image.addEventListener('load',sizeToImage);
window.addEventListener('resize',sizeToImage);
dialog.onclose=()=>{window.removeEventListener('resize',sizeToImage);dialog.style.removeProperty('width');document.body.classList.remove('image-viewer-open');};
const setSize=actual=>{viewport.classList.toggle('actual-size',actual);fit.setAttribute('aria-pressed',String(!actual));original.setAttribute('aria-pressed',String(actual));sizeToImage();};
const setSize=actual=>{viewport.classList.toggle('actual-size',actual);fit.setAttribute('aria-pressed',String(!actual));original.setAttribute('aria-pressed',String(actual));};
fit.onclick=()=>setSize(false);original.onclick=()=>setSize(true);
}
dialog.showModal();bind('modal-cancel',()=>dialog.close());