DGNum/Stirling-PDF
15
0
Fork 0
Code Issues 4 Pull requests 1 Projects Releases Packages Wiki Activity

fix RTL language directions

Browse source 
The positioning of the insert pdf buttons and the direction icon of the move page buttons are tied to the language direction, to fix this we retrieve the language direction from the document and use this to reverse some logic/elements for RTL languages.
This commit is contained in:
jordy 2023-04-22 19:29:21 +02:00
parent a44fc62fee
commit e048fc6653
1 changed files with 29 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/main/resources/templates/multi-tool.html
View file

@ -65,11 +65,14 @@
* *
*/ */
const pagesContainer = document.getElementById("pages-container"); const pagesContainer = document.getElementById("pages-container");
const pagesContainerWrapper = document.getElementById("pages-container-wrapper")
const pageDirection = getComputedStyle(document.body).direction;
var scrollDelta = 0; // variable to store the accumulated scroll delta var scrollDelta = 0; // variable to store the accumulated scroll delta
var isScrolling = false; // variable to track if scroll is already in progress var isScrolling = false; // variable to track if scroll is already in progress
pagesContainer.addEventListener("wheel", function(e) { pagesContainerWrapper.addEventListener("wheel", function(e) {
e.preventDefault(); // prevent default mousewheel behavior e.preventDefault(); // prevent default mousewheel behavior
// Accumulate the horizontal scroll delta // Accumulate the horizontal scroll delta
@ -237,18 +240,21 @@
/** /**
* Rendering the various buttons to manipulate and move pdf pages * Rendering the various buttons to manipulate and move pdf pages
*/ */
const leftDirection = pageDirection === 'rtl' ? 'right' : 'left'
const rightDirection = pageDirection === 'rtl' ? 'left' : 'right'
const buttonContainer = document.createElement('div'); const buttonContainer = document.createElement('div');
buttonContainer.classList.add("button-container"); buttonContainer.classList.add("button-container");
const moveUp = document.createElement('button'); const moveUp = document.createElement('button');
moveUp.classList.add("move-left-button","btn", "btn-secondary"); moveUp.classList.add("move-left-button","btn", "btn-secondary");
moveUp.innerHTML = '<i class="bi bi-arrow-left-short"></i>'; moveUp.innerHTML = `<i class="bi bi-arrow-${leftDirection}-short"></i>`;
moveUp.onclick = moveUpButtonCallback; moveUp.onclick = moveUpButtonCallback;
buttonContainer.appendChild(moveUp); buttonContainer.appendChild(moveUp);
const moveDown = document.createElement('button'); const moveDown = document.createElement('button');
moveDown.classList.add("move-right-button","btn", "btn-secondary"); moveDown.classList.add("move-right-button","btn", "btn-secondary");
moveDown.innerHTML = '<i class="bi bi-arrow-right-short"></i>'; moveDown.innerHTML = `<i class="bi bi-arrow-${rightDirection}-short"></i>`;
moveDown.onclick = moveDownButtonCallback; moveDown.onclick = moveDownButtonCallback;
buttonContainer.appendChild(moveDown); buttonContainer.appendChild(moveDown);
@ -282,7 +288,11 @@
div.appendChild(buttonContainer); div.appendChild(buttonContainer);
const insertFileButtonContainer = document.createElement('div'); const insertFileButtonContainer = document.createElement('div');
insertFileButtonContainer.classList.add("insert-file-button-container","left", "align-center-left");
insertFileButtonContainer.classList.add(
"insert-file-button-container",
leftDirection,
`align-center-${leftDirection}`);
const insertFileButton = document.createElement('button'); const insertFileButton = document.createElement('button');
insertFileButton.classList.add("btn", "btn-primary", "insert-file-button"); insertFileButton.classList.add("btn", "btn-primary", "insert-file-button");
@ -297,7 +307,10 @@
// add this button to every element, but only show it on the last one :D // add this button to every element, but only show it on the last one :D
const insertFileButtonRightContainer = document.createElement('div'); const insertFileButtonRightContainer = document.createElement('div');
insertFileButtonRightContainer.classList.add("insert-file-button-container","right", "align-center-right"); insertFileButtonRightContainer.classList.add(
"insert-file-button-container",
rightDirection,
`align-center-${rightDirection}`);
const insertFileButtonRight = document.createElement('button'); const insertFileButtonRight = document.createElement('button');
insertFileButtonRight.classList.add("btn", "btn-primary", "insert-file-button"); insertFileButtonRight.classList.add("btn", "btn-primary", "insert-file-button");
@ -557,7 +570,11 @@
right: -20px; right: -20px;
} }
.insert-file-button-container.align-center-right { html[lang-direction=ltr] .insert-file-button-container.right {
display:none;
}
html[lang-direction=rtl] .insert-file-button-container.left {
display:none; display:none;
} }
@ -571,7 +588,12 @@
translate: 0 -50%; translate: 0 -50%;
} }
.page-container:last-child > .insert-file-button-container.right { html[lang-direction=ltr] .page-container:last-child > .insert-file-button-container.right {
display: block;
}
html[lang-direction=rtl] .page-container:last-child > .insert-file-button-container.left {
display: block; display: block;
} }