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

baguettebox: RTL support (#881)

Browse source
This commit is contained in:
AppleTheGolden 2025-10-04 11:12:02 +02:00 committed by GitHub
parent 31f1b535b2
commit dacc64dd2e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
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,
duringHide: 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 = [],
currentIndex = 0,
isOverlayVisible = false,
@ -73,10 +74,10 @@ window.baguetteBox = (function () {
var touchEvent = e.touches[0] || e.changedTouches[0];
if (touchEvent.pageX - touch.startX > 40) {
touchFlag = true;
showPreviousImage();
showLeftImage();
} else if (touchEvent.pageX - touch.startX < -40) {
touchFlag = true;
showNextImage();
showRightImage();
} else if (touch.startY - touchEvent.pageY > 100) {
hideOverlay();
}
@ -114,9 +115,9 @@ window.baguetteBox = (function () {
scrollTimer = Date.now();
if (d > 0)
showNextImage();
showNextImageIgnoreReadDir();
else
showPreviousImage();
showPreviousImageIgnoreReadDir();
};
var trapFocusInsideOverlay = function (e) {
@ -212,6 +213,7 @@ window.baguetteBox = (function () {
'<div id="bbox-btns">' +
'<button id="bbox-help" type="button">?</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-rotr" type="button">↷</button>' +
'<button id="bbox-tsel" type="button">sel</button>' +
@ -229,6 +231,7 @@ window.baguetteBox = (function () {
btnNext = ebi('bbox-next');
btnHelp = ebi('bbox-help');
btnAnim = ebi('bbox-anim');
btnReadDir = ebi('bbox-readdir')
btnRotL = ebi('bbox-rotl');
btnRotR = ebi('bbox-rotr');
btnSel = ebi('bbox-tsel');
@ -301,9 +304,9 @@ window.baguetteBox = (function () {
else if (e.shiftKey && kl != "r")
return;
else if (k == "ArrowLeft" || k == "Left" || kl == "j")
showPreviousImage();
showLeftImage();
else if (k == "ArrowRight" || k == "Right" || kl == "l")
showNextImage();
showRightImage();
else if (k == "Escape" || k == "Esc")
hideOverlay();
else if (k == "Home")
@ -353,6 +356,26 @@ window.baguetteBox = (function () {
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() {
var v = vid();
ebi('bbox-vmode').style.display = v ? '' : 'none';
@ -492,12 +515,13 @@ window.baguetteBox = (function () {
bind(document, 'fullscreenchange', onFSC);
bind(overlay, 'click', overlayClickHandler);
bind(overlay, 'wheel', overlayWheelHandler);
bind(btnPrev, 'click', showPreviousImage);
bind(btnNext, 'click', showNextImage);
bind(btnPrev, 'click', showLeftImage);
bind(btnNext, 'click', showRightImage);
bind(btnClose, 'click', hideOverlay);
bind(btnVmode, 'click', tglVmode);
bind(btnHelp, 'click', halp);
bind(btnAnim, 'click', anim);
bind(btnReadDir, 'click', toggleReadDir);
bind(btnRotL, 'click', rotl);
bind(btnRotR, 'click', rotr);
bind(btnSel, 'click', tglsel);
@ -515,12 +539,13 @@ window.baguetteBox = (function () {
unbind(document, 'fullscreenchange', onFSC);
unbind(overlay, 'click', overlayClickHandler);
unbind(overlay, 'wheel', overlayWheelHandler);
unbind(btnPrev, 'click', showPreviousImage);
unbind(btnNext, 'click', showNextImage);
unbind(btnPrev, 'click', showLeftImage);
unbind(btnNext, 'click', showRightImage);
unbind(btnClose, 'click', hideOverlay);
unbind(btnVmode, 'click', tglVmode);
unbind(btnHelp, 'click', halp);
unbind(btnAnim, 'click', anim);
unbind(btnReadDir, 'click', toggleReadDir);
unbind(btnRotL, 'click', rotl);
unbind(btnRotR, 'click', rotr);
unbind(btnSel, 'click', tglsel);
@ -571,6 +596,21 @@ window.baguetteBox = (function () {
btnAnim.textContent = ['⇄', '⮺', '⚡'][anims.indexOf(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' :
options.animation === 'slideIn' ? '' : 'none');
@ -815,12 +855,24 @@ window.baguetteBox = (function () {
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);
return show(currentIndex + 1);
}
function showPreviousImage(e) {
function showPreviousImageIgnoreReadDir(e) {
ev(e);
return show(currentIndex - 1);
}
@ -848,10 +900,10 @@ window.baguetteBox = (function () {
}
if (index < 0)
return bounceAnimation('left');
return bounceAnimation(options.readDirRtl ? 'right' : 'left');
if (index >= imagesElements.length)
return bounceAnimation('right');
return bounceAnimation(options.readDirRtl ? 'left' : 'right');
try {
vid().pause();
@ -1005,7 +1057,7 @@ window.baguetteBox = (function () {
function vidEnd() {
if (this == vid() && vnext)
showNextImage();
showNextImageIgnoreReadDir();
}
function setloop(side) {
@ -1066,11 +1118,12 @@ window.baguetteBox = (function () {
return false;
}
function updateOffset() {
var offset = -currentIndex * 100 + '%',
function updateOffset(noTransition) {
var dir = options.readDirRtl ? 1 : -1;
var offset = dir * currentIndex * 100 + '%',
xform = slider.style.perspective !== undefined;
if (options.animation === 'fadeIn') {
if (options.animation === 'fadeIn' && !noTransition) {
slider.style.opacity = 0;
setTimeout(function () {
xform ?
@ -1116,10 +1169,10 @@ window.baguetteBox = (function () {
fx = x / (rc.right - rc.left);
if (fx < 0.3)
return showPreviousImage();
return showLeftImage();
if (fx > 0.7)
return showNextImage();
return showRightImage();
show_buttons('t');
@ -1175,8 +1228,8 @@ window.baguetteBox = (function () {
return {
run: run,
show: show,
showNext: showNextImage,
showPrevious: showPreviousImage,
showNext: showRightImage,
showPrevious: showLeftImage,
relseek: relseek,
urltime: urltime,
playpause: playpause,

5
copyparty/web/browser.css
View file

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