mirrors/copyparty
1
0
Fork 0
mirror of https://github.com/9001/copyparty.git synced 2025-10-31 04:32:20 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

bbox: zoom to fit; closes #905

Browse source
This commit is contained in:
ed 2025-10-14 21:45:41 +00:00
parent 740d22d3ba
commit 66dc8b5c9f
2 changed files with 32 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
copyparty/web/baguettebox.js
View file

@ -24,7 +24,7 @@ window.baguetteBox = (function () {
onChange: null, onChange: null,
readDirRtl: false, readDirRtl: false,
}, },
overlay, slider, btnPrev, btnNext, btnHelp, btnAnim, btnRotL, btnRotR, btnSel, btnFull, btnVmode, btnReadDir, btnClose, overlay, slider, btnPrev, btnNext, btnHelp, btnAnim, btnRotL, btnRotR, btnSel, btnFull, btnZoom, btnVmode, btnReadDir, btnClose,
currentGallery = [], currentGallery = [],
currentIndex = 0, currentIndex = 0,
isOverlayVisible = false, isOverlayVisible = false,
@ -301,7 +301,8 @@ window.baguetteBox = (function () {
'<button id="bbox-rotl" type="button">↶</button>' + '<button id="bbox-rotl" type="button">↶</button>' +
'<button id="bbox-rotr" type="button">↷</button>' + '<button id="bbox-rotr" type="button">↷</button>' +
'<button id="bbox-tsel" type="button">sel</button>' + '<button id="bbox-tsel" type="button">sel</button>' +
'<button id="bbox-full" type="button">⛶</button>' + '<button id="bbox-full" type="button" tt="full-screen">⛶</button>' +
'<button id="bbzoom" type="button" tt="zoom/stretch">z</button>' +
'<button id="bbox-vmode" type="button" tt="a"></button>' + '<button id="bbox-vmode" type="button" tt="a"></button>' +
'<button id="bbox-close" type="button" aria-label="Close">X</button>' + '<button id="bbox-close" type="button" aria-label="Close">X</button>' +
'</div></div>' '</div></div>'
@ -320,8 +321,12 @@ window.baguetteBox = (function () {
btnRotR = ebi('bbox-rotr'); btnRotR = ebi('bbox-rotr');
btnSel = ebi('bbox-tsel'); btnSel = ebi('bbox-tsel');
btnFull = ebi('bbox-full'); btnFull = ebi('bbox-full');
btnZoom = ebi('bbzoom');
btnVmode = ebi('bbox-vmode'); btnVmode = ebi('bbox-vmode');
btnClose = ebi('bbox-close'); btnClose = ebi('bbox-close');
bcfg_bind(options, 'bbzoom', 'bbzoom', false, setzoom);
setzoom();
} }
function halp() { function halp() {
@ -337,6 +342,7 @@ window.baguetteBox = (function () {
['end', 'last file'], ['end', 'last file'],
['R', 'rotate (shift=ccw)'], ['R', 'rotate (shift=ccw)'],
['F', 'toggle fullscreen'], ['F', 'toggle fullscreen'],
['Z', 'toggle zoom/stretch'],
['S', 'toggle file selection'], ['S', 'toggle file selection'],
['space, P, K', 'video: play / pause'], ['space, P, K', 'video: play / pause'],
['U', 'video: seek 10sec back'], ['U', 'video: seek 10sec back'],
@ -419,6 +425,8 @@ window.baguetteBox = (function () {
} }
else if (kl == "f") else if (kl == "f")
tglfull(); tglfull();
else if (kl == "z")
btnZoom.click();
else if (kl == "s") else if (kl == "s")
tglsel(); tglsel();
else if (kl == "r") else if (kl == "r")
@ -526,6 +534,12 @@ window.baguetteBox = (function () {
} }
} }
function setzoom() {
var sel = clgot(btnZoom, 'on')
clmod(ebi('bbox-overlay'), 'fill', sel);
btnState(btnZoom, sel);
}
function tglsel() { function tglsel() {
var o = findfile()[3]; var o = findfile()[3];
clmod(o.closest('tr'), 'sel', 't'); clmod(o.closest('tr'), 'sel', 't');
@ -553,10 +567,14 @@ window.baguetteBox = (function () {
'rgba(153,34,85,0.7)' : ''; 'rgba(153,34,85,0.7)' : '';
img.style.borderRadius = sel ? '1em' : ''; img.style.borderRadius = sel ? '1em' : '';
btnSel.style.color = sel ? '#fff' : ''; btnState(btnSel, sel);
btnSel.style.background = sel ? '#d48' : ''; }
btnSel.style.textShadow = sel ? '1px 1px 0 #b38' : '';
btnSel.style.boxShadow = sel ? '.15em .15em 0 #502' : ''; function btnState(btn, sel) {
btn.style.color = sel ? '#fff' : '';
btn.style.background = sel ? '#d48' : '';
btn.style.textShadow = sel ? '1px 1px 0 #b38' : '';
btn.style.boxShadow = sel ? '.15em .15em 0 #502' : '';
} }
function keyUpHandler(e) { function keyUpHandler(e) {
@ -733,7 +751,7 @@ window.baguetteBox = (function () {
overlay.style.display = 'block'; overlay.style.display = 'block';
// Fade in overlay // Fade in overlay
setTimeout(function () { setTimeout(function () {
overlay.className = 'visible'; clmod(overlay, 'visible', 1);
if (options.bodyClass && document.body.classList) if (options.bodyClass && document.body.classList)
document.body.classList.add(options.bodyClass); document.body.classList.add(options.bodyClass);
@ -779,7 +797,7 @@ window.baguetteBox = (function () {
unbindEvents(); unbindEvents();
// Fade out and hide the overlay // Fade out and hide the overlay
overlay.className = ''; clmod(overlay, 'visible');
setTimeout(function () { setTimeout(function () {
overlay.style.display = 'none'; overlay.style.display = 'none';
if (options.bodyClass && document.body.classList) if (options.bodyClass && document.body.classList)

6
copyparty/web/browser.css
View file

@ -2165,6 +2165,12 @@ html.noscroll .sbar::-webkit-scrollbar {
vertical-align: middle; vertical-align: middle;
transition: transform .23s, left .23s, top .23s, width .23s, height .23s; transition: transform .23s, left .23s, top .23s, width .23s, height .23s;
} }
#bbox-overlay.fill .full-image img,
#bbox-overlay.fill .full-image video {
width: 100%;
height: 100%;
object-fit: contain;
}
html.bb_fsc .full-image img, html.bb_fsc .full-image img,
html.bb_fsc .full-image video { html.bb_fsc .full-image video {
max-height: 100%; max-height: 100%;