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

Widen image viewer and place name and controls in footer

Browse Source
This commit is contained in:
Pigway
2026-10-08 20:41:54 +08:00
parent cb9f1cd44a
commit 68af4698e3
2 changed files with 14 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pigway_frame_flow/web/app.js
+6 -2
View File
@@ -47,9 +47,13 @@ function showModal(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);
const toolbar=document.createElement('div');toolbar.className='actions image-viewer-toolbar';
const fit=document.createElement('button'),original=document.createElement('button');fit.textContent=t('fitScreen');original.textContent=t('actualSize');
fit.type=original.type='button';fit.setAttribute('aria-pressed','true');original.setAttribute('aria-pressed','false');toolbar.append(fit,original);viewport.before(toolbar);
fit.type=original.type='button';fit.setAttribute('aria-pressed','true');original.setAttribute('aria-pressed','false');
const footer=document.createElement('div');footer.className='image-viewer-footer';
const title=content.querySelector('h2');if(title){title.classList.add('image-viewer-name');footer.append(title);}
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 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);
}