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

baguettebox: RTL support

Browse source
This commit is contained in:
AppleTheGolden 2025-10-02 17:06:21 +02:00
parent a8f53d5ef0
commit 8786c63c4e
No known key found for this signature in database
GPG key ID: F6AC8A62154C42AA
2 changed files with 81 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

99
copyparty/web/baguettebox.js
View file

@ -22,8 +22,9 @@ window.baguetteBox = (function () {
afterHide: null, afterHide: null,
duringHide: null, duringHide: null,
onChange: null, onChange: null,
readDirRtl: false,
}, },
overlay, slider, btnPrev, btnNext, btnHelp, btnAnim, btnRotL, btnRotR, btnSel, btnFull, btnVmode, btnClose, overlay, slider, btnPrev, btnNext, btnHelp, btnAnim, btnRotL, btnRotR, btnSel, btnFull, btnVmode, btnReadDir, btnClose,
currentGallery = [], currentGallery = [],
currentIndex = 0, currentIndex = 0,
isOverlayVisible = false, isOverlayVisible = false,
@ -73,10 +74,10 @@ window.baguetteBox = (function () {
var touchEvent = e.touches[0] || e.changedTouches[0]; var touchEvent = e.touches[0] || e.changedTouches[0];
if (touchEvent.pageX - touch.startX > 40) { if (touchEvent.pageX - touch.startX > 40) {
touchFlag = true; touchFlag = true;
showPreviousImage(); showLeftImage();
} else if (touchEvent.pageX - touch.startX < -40) { } else if (touchEvent.pageX - touch.startX < -40) {
touchFlag = true; touchFlag = true;
showNextImage(); showRightImage();
} else if (touch.startY - touchEvent.pageY > 100) { } else if (touch.startY - touchEvent.pageY > 100) {
hideOverlay(); hideOverlay();
} }
@ -114,9 +115,9 @@ window.baguetteBox = (function () {
scrollTimer = Date.now(); scrollTimer = Date.now();
if (d > 0) if (d > 0)
showNextImage(); showNextImageIgnoreReadDir();
else else
showPreviousImage(); showPreviousImageIgnoreReadDir();
}; };
var trapFocusInsideOverlay = function (e) { var trapFocusInsideOverlay = function (e) {
@ -212,6 +213,7 @@ window.baguetteBox = (function () {
'<div id="bbox-btns">' + '<div id="bbox-btns">' +
'<button id="bbox-help" type="button">?</button>' + '<button id="bbox-help" type="button">?</button>' +
'<button id="bbox-anim" type="button" tt="a">-</button>' + '<button id="bbox-anim" type="button" tt="a">-</button>' +
'<button id="bbox-readdir" type="button" tt="a">ltr</button>' +
'<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>' +
@ -229,6 +231,7 @@ window.baguetteBox = (function () {
btnNext = ebi('bbox-next'); btnNext = ebi('bbox-next');
btnHelp = ebi('bbox-help'); btnHelp = ebi('bbox-help');
btnAnim = ebi('bbox-anim'); btnAnim = ebi('bbox-anim');
btnReadDir = ebi('bbox-readdir')
btnRotL = ebi('bbox-rotl'); btnRotL = ebi('bbox-rotl');
btnRotR = ebi('bbox-rotr'); btnRotR = ebi('bbox-rotr');
btnSel = ebi('bbox-tsel'); btnSel = ebi('bbox-tsel');
@ -301,9 +304,9 @@ window.baguetteBox = (function () {
else if (e.shiftKey && kl != "r") else if (e.shiftKey && kl != "r")
return; return;
else if (k == "ArrowLeft" || k == "Left" || kl == "j") else if (k == "ArrowLeft" || k == "Left" || kl == "j")
showPreviousImage(); showLeftImage();
else if (k == "ArrowRight" || k == "Right" || kl == "l") else if (k == "ArrowRight" || k == "Right" || kl == "l")
showNextImage(); showRightImage();
else if (k == "Escape" || k == "Esc") else if (k == "Escape" || k == "Esc")
hideOverlay(); hideOverlay();
else if (k == "Home") else if (k == "Home")
@ -353,6 +356,26 @@ window.baguetteBox = (function () {
tt.show.call(this); tt.show.call(this);
} }
function toggleReadDir() {
var o = options;
var next;
if (options.readDirRtl) {
next = "ltr"
} else {
next = "rtl"
}
swrite('greaddir', next);
slider.className = "no-transition";
options = {};
setOptions(o);
updateOffset(true);
window.getComputedStyle(slider).opacity; // force a restyle
slider.className = "";
if (tt.en)
tt.show.call(this);
}
function setVmode() { function setVmode() {
var v = vid(); var v = vid();
ebi('bbox-vmode').style.display = v ? '' : 'none'; ebi('bbox-vmode').style.display = v ? '' : 'none';
@ -492,12 +515,13 @@ window.baguetteBox = (function () {
bind(document, 'fullscreenchange', onFSC); bind(document, 'fullscreenchange', onFSC);
bind(overlay, 'click', overlayClickHandler); bind(overlay, 'click', overlayClickHandler);
bind(overlay, 'wheel', overlayWheelHandler); bind(overlay, 'wheel', overlayWheelHandler);
bind(btnPrev, 'click', showPreviousImage); bind(btnPrev, 'click', showLeftImage);
bind(btnNext, 'click', showNextImage); bind(btnNext, 'click', showRightImage);
bind(btnClose, 'click', hideOverlay); bind(btnClose, 'click', hideOverlay);
bind(btnVmode, 'click', tglVmode); bind(btnVmode, 'click', tglVmode);
bind(btnHelp, 'click', halp); bind(btnHelp, 'click', halp);
bind(btnAnim, 'click', anim); bind(btnAnim, 'click', anim);
bind(btnReadDir, 'click', toggleReadDir);
bind(btnRotL, 'click', rotl); bind(btnRotL, 'click', rotl);
bind(btnRotR, 'click', rotr); bind(btnRotR, 'click', rotr);
bind(btnSel, 'click', tglsel); bind(btnSel, 'click', tglsel);
@ -515,12 +539,13 @@ window.baguetteBox = (function () {
unbind(document, 'fullscreenchange', onFSC); unbind(document, 'fullscreenchange', onFSC);
unbind(overlay, 'click', overlayClickHandler); unbind(overlay, 'click', overlayClickHandler);
unbind(overlay, 'wheel', overlayWheelHandler); unbind(overlay, 'wheel', overlayWheelHandler);
unbind(btnPrev, 'click', showPreviousImage); unbind(btnPrev, 'click', showLeftImage);
unbind(btnNext, 'click', showNextImage); unbind(btnNext, 'click', showRightImage);
unbind(btnClose, 'click', hideOverlay); unbind(btnClose, 'click', hideOverlay);
unbind(btnVmode, 'click', tglVmode); unbind(btnVmode, 'click', tglVmode);
unbind(btnHelp, 'click', halp); unbind(btnHelp, 'click', halp);
unbind(btnAnim, 'click', anim); unbind(btnAnim, 'click', anim);
unbind(btnReadDir, 'click', toggleReadDir);
unbind(btnRotL, 'click', rotl); unbind(btnRotL, 'click', rotl);
unbind(btnRotR, 'click', rotr); unbind(btnRotR, 'click', rotr);
unbind(btnSel, 'click', tglsel); unbind(btnSel, 'click', tglsel);
@ -571,6 +596,21 @@ window.baguetteBox = (function () {
btnAnim.textContent = ['⇄', '⮺', '⚡'][anims.indexOf(an)]; btnAnim.textContent = ['⇄', '⮺', '⚡'][anims.indexOf(an)];
btnAnim.setAttribute('tt', 'animation: ' + an); btnAnim.setAttribute('tt', 'animation: ' + an);
options.readDirRtl = sread('greaddir') === "rtl";
var msg;
if (options.readDirRtl) {
btnReadDir.innerText = "rtl";
msg = "browse from right to left";
slider.style.flexDirection = "row-reverse";
} else {
btnReadDir.innerText = "ltr";
msg = "browse from left to right";
slider.style.flexDirection = "row";
}
btnReadDir.setAttribute("tt", msg);
btnReadDir.setAttribute("aria-label", msg);
slider.style.transition = (options.animation === 'fadeIn' ? 'opacity .3s ease' : slider.style.transition = (options.animation === 'fadeIn' ? 'opacity .3s ease' :
options.animation === 'slideIn' ? '' : 'none'); options.animation === 'slideIn' ? '' : 'none');
@ -815,12 +855,24 @@ window.baguetteBox = (function () {
show_buttons(this.paused ? 1 : 0); show_buttons(this.paused ? 1 : 0);
} }
function showNextImage(e) { function showRightImage(e) {
ev(e);
var dir = options.readDirRtl ? -1 : 1;
return show(currentIndex + dir);
}
function showLeftImage(e) {
ev(e);
var dir = options.readDirRtl ? 1 : -1;
return show(currentIndex + dir);
}
function showNextImageIgnoreReadDir(e) {
ev(e); ev(e);
return show(currentIndex + 1); return show(currentIndex + 1);
} }
function showPreviousImage(e) { function showPreviousImageIgnoreReadDir(e) {
ev(e); ev(e);
return show(currentIndex - 1); return show(currentIndex - 1);
} }
@ -848,10 +900,10 @@ window.baguetteBox = (function () {
} }
if (index < 0) if (index < 0)
return bounceAnimation('left'); return bounceAnimation(options.readDirRtl ? 'right' : 'left');
if (index >= imagesElements.length) if (index >= imagesElements.length)
return bounceAnimation('right'); return bounceAnimation(options.readDirRtl ? 'left' : 'right');
try { try {
vid().pause(); vid().pause();
@ -1005,7 +1057,7 @@ window.baguetteBox = (function () {
function vidEnd() { function vidEnd() {
if (this == vid() && vnext) if (this == vid() && vnext)
showNextImage(); showNextImageIgnoreReadDir();
} }
function setloop(side) { function setloop(side) {
@ -1066,11 +1118,12 @@ window.baguetteBox = (function () {
return false; return false;
} }
function updateOffset() { function updateOffset(noTransition) {
var offset = -currentIndex * 100 + '%', var dir = options.readDirRtl ? 1 : -1;
var offset = dir * currentIndex * 100 + '%',
xform = slider.style.perspective !== undefined; xform = slider.style.perspective !== undefined;
if (options.animation === 'fadeIn') { if (options.animation === 'fadeIn' && !noTransition) {
slider.style.opacity = 0; slider.style.opacity = 0;
setTimeout(function () { setTimeout(function () {
xform ? xform ?
@ -1116,10 +1169,10 @@ window.baguetteBox = (function () {
fx = x / (rc.right - rc.left); fx = x / (rc.right - rc.left);
if (fx < 0.3) if (fx < 0.3)
return showPreviousImage(); return showLeftImage();
if (fx > 0.7) if (fx > 0.7)
return showNextImage(); return showRightImage();
show_buttons('t'); show_buttons('t');
@ -1175,8 +1228,8 @@ window.baguetteBox = (function () {
return { return {
run: run, run: run,
show: show, show: show,
showNext: showNextImage, showNext: showRightImage,
showPrevious: showPreviousImage, showPrevious: showLeftImage,
relseek: relseek, relseek: relseek,
urltime: urltime, urltime: urltime,
playpause: playpause, playpause: playpause,

5
copyparty/web/browser.css
View file

@ -2140,6 +2140,7 @@ html.noscroll .sbar::-webkit-scrollbar {
width: 100%; width: 100%;
height: 100%; height: 100%;
text-align: center; text-align: center;
flex: none;
} }
.full-image figure { .full-image figure {
display: inline; display: inline;
@ -2203,6 +2204,7 @@ html.y #bbox-overlay figcaption a {
margin-right: -1px; margin-right: -1px;
} }
#bbox-slider { #bbox-slider {
display: flex;
position: fixed; position: fixed;
left: 0; left: 0;
top: 0; top: 0;
@ -2334,6 +2336,9 @@ html.y #bbox-overlay figcaption a {
0%, 100% {transform: scale(0)} 0%, 100% {transform: scale(0)}
50% {transform: scale(1)} 50% {transform: scale(1)}
} }
.no-transition {
transition: none !important;
}