mirrors/copyparty
1
0
Fork 0
mirror of https://github.com/9001/copyparty.git synced 2025-08-17 17:12:13 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

bbox: add fullscreen for images too

Browse source
This commit is contained in:
ed 2022-07-05 19:06:02 +02:00
parent b580953dcd
commit a772b8c3f2
1 changed files with 23 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
copyparty/web/baguettebox.js
View file

@ -21,7 +21,7 @@ window.baguetteBox = (function () {
afterHide: null, afterHide: null,
onChange: null, onChange: null,
}, },
overlay, slider, btnPrev, btnNext, btnHelp, btnAnim, btnRotL, btnRotR, btnSel, btnVmode, btnClose, overlay, slider, btnPrev, btnNext, btnHelp, btnAnim, btnRotL, btnRotR, btnSel, btnFull, btnVmode, btnClose,
currentGallery = [], currentGallery = [],
currentIndex = 0, currentIndex = 0,
isOverlayVisible = false, isOverlayVisible = false,
@ -182,6 +182,7 @@ 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-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>'
@ -198,6 +199,7 @@ window.baguetteBox = (function () {
btnRotL = ebi('bbox-rotl'); btnRotL = ebi('bbox-rotl');
btnRotR = ebi('bbox-rotr'); btnRotR = ebi('bbox-rotr');
btnSel = ebi('bbox-tsel'); btnSel = ebi('bbox-tsel');
btnFull = ebi('bbox-full');
btnVmode = ebi('bbox-vmode'); btnVmode = ebi('bbox-vmode');
btnClose = ebi('bbox-close'); btnClose = ebi('bbox-close');
bindEvents(); bindEvents();
@ -215,6 +217,7 @@ window.baguetteBox = (function () {
['home', 'first file'], ['home', 'first file'],
['end', 'last file'], ['end', 'last file'],
['R', 'rotate (shift=ccw)'], ['R', 'rotate (shift=ccw)'],
['F', 'toggle fullscreen'],
['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'],
@ -222,7 +225,6 @@ window.baguetteBox = (function () {
['M', 'video: toggle mute'], ['M', 'video: toggle mute'],
['V', 'video: toggle loop'], ['V', 'video: toggle loop'],
['C', 'video: toggle auto-next'], ['C', 'video: toggle auto-next'],
['F', 'video: toggle fullscreen'],
], ],
d = mknod('table'), d = mknod('table'),
html = ['<tbody>']; html = ['<tbody>'];
@ -273,13 +275,7 @@ window.baguetteBox = (function () {
setVmode(); setVmode();
} }
else if (k == "KeyF") else if (k == "KeyF")
try { tglfull();
if (isFullscreen)
document.exitFullscreen();
else
v.requestFullscreen();
}
catch (ex) { }
else if (k == "KeyS") else if (k == "KeyS")
tglsel(); tglsel();
else if (k == "KeyR") else if (k == "KeyR")
@ -354,6 +350,16 @@ window.baguetteBox = (function () {
return [name, a, files, ebi(files[a].id)]; return [name, a, files, ebi(files[a].id)];
} }
function tglfull() {
try {
if (isFullscreen)
document.exitFullscreen();
else
(vid() || ebi('bbox-overlay')).requestFullscreen();
}
catch (ex) { alert(ex); }
}
function tglsel() { function tglsel() {
var o = findfile()[3]; var o = findfile()[3];
clmod(o.closest('tr'), 'sel', 't'); clmod(o.closest('tr'), 'sel', 't');
@ -429,6 +435,7 @@ window.baguetteBox = (function () {
bind(btnRotL, 'click', rotl); bind(btnRotL, 'click', rotl);
bind(btnRotR, 'click', rotr); bind(btnRotR, 'click', rotr);
bind(btnSel, 'click', tglsel); bind(btnSel, 'click', tglsel);
bind(btnFull, 'click', tglfull);
bind(slider, 'contextmenu', contextmenuHandler); bind(slider, 'contextmenu', contextmenuHandler);
bind(overlay, 'touchstart', touchstartHandler, nonPassiveEvent); bind(overlay, 'touchstart', touchstartHandler, nonPassiveEvent);
bind(overlay, 'touchmove', touchmoveHandler, passiveEvent); bind(overlay, 'touchmove', touchmoveHandler, passiveEvent);
@ -450,6 +457,7 @@ window.baguetteBox = (function () {
unbind(btnRotL, 'click', rotl); unbind(btnRotL, 'click', rotl);
unbind(btnRotR, 'click', rotr); unbind(btnRotR, 'click', rotr);
unbind(btnSel, 'click', tglsel); unbind(btnSel, 'click', tglsel);
unbind(btnFull, 'click', tglfull);
unbind(slider, 'contextmenu', contextmenuHandler); unbind(slider, 'contextmenu', contextmenuHandler);
unbind(overlay, 'touchstart', touchstartHandler, nonPassiveEvent); unbind(overlay, 'touchstart', touchstartHandler, nonPassiveEvent);
unbind(overlay, 'touchmove', touchmoveHandler, passiveEvent); unbind(overlay, 'touchmove', touchmoveHandler, passiveEvent);
@ -558,6 +566,12 @@ window.baguetteBox = (function () {
sethash(''); sethash('');
unbindEvents(); unbindEvents();
try {
document.exitFullscreen();
isFullscreen = false;
}
catch (ex) { }
// Fade out and hide the overlay // Fade out and hide the overlay
overlay.className = ''; overlay.className = '';
setTimeout(function () { setTimeout(function () {