mirror of
https://github.com/zen-browser/pdf.js.git
synced 2025-07-07 17:05:38 +02:00
[Editor] Utilize Fluent "better" when localizing the resizer DOM-elements
Currently we manually localize and update the DOM-elements of the editor-resizers, and it seems nicer to utilize Fluent for that task. This can be achieved by updating the l10n-strings to directly target the `aria-label` and then just setting the `data-l10n-id` on the DOM-elements.
This commit is contained in:
parent
b58c24ab09
commit
ac75a05cd4
2 changed files with 33 additions and 27 deletions
|
@ -379,14 +379,22 @@ pdfjs-editor-alt-text-textarea =
|
||||||
## Editor resizers
|
## Editor resizers
|
||||||
## This is used in an aria label to help to understand the role of the resizer.
|
## This is used in an aria label to help to understand the role of the resizer.
|
||||||
|
|
||||||
pdfjs-editor-resizer-label-top-left = Top left corner — resize
|
pdfjs-editor-resizer-top-left =
|
||||||
pdfjs-editor-resizer-label-top-middle = Top middle — resize
|
.aria-label = Top left corner — resize
|
||||||
pdfjs-editor-resizer-label-top-right = Top right corner — resize
|
pdfjs-editor-resizer-top-middle =
|
||||||
pdfjs-editor-resizer-label-middle-right = Middle right — resize
|
.aria-label = Top middle — resize
|
||||||
pdfjs-editor-resizer-label-bottom-right = Bottom right corner — resize
|
pdfjs-editor-resizer-top-right =
|
||||||
pdfjs-editor-resizer-label-bottom-middle = Bottom middle — resize
|
.aria-label = Top right corner — resize
|
||||||
pdfjs-editor-resizer-label-bottom-left = Bottom left corner — resize
|
pdfjs-editor-resizer-middle-right =
|
||||||
pdfjs-editor-resizer-label-middle-left = Middle left — resize
|
.aria-label = Middle right — resize
|
||||||
|
pdfjs-editor-resizer-bottom-right =
|
||||||
|
.aria-label = Bottom right corner — resize
|
||||||
|
pdfjs-editor-resizer-bottom-middle =
|
||||||
|
.aria-label = Bottom middle — resize
|
||||||
|
pdfjs-editor-resizer-bottom-left =
|
||||||
|
.aria-label = Bottom left corner — resize
|
||||||
|
pdfjs-editor-resizer-middle-left =
|
||||||
|
.aria-label = Middle left — resize
|
||||||
|
|
||||||
## Color picker
|
## Color picker
|
||||||
|
|
||||||
|
|
|
@ -86,7 +86,9 @@ class AnnotationEditor {
|
||||||
|
|
||||||
_focusEventsAllowed = true;
|
_focusEventsAllowed = true;
|
||||||
|
|
||||||
_l10nPromise = null;
|
static _l10nPromise = null;
|
||||||
|
|
||||||
|
static _l10nResizer = null;
|
||||||
|
|
||||||
#isDraggable = false;
|
#isDraggable = false;
|
||||||
|
|
||||||
|
@ -206,6 +208,17 @@ class AnnotationEditor {
|
||||||
* @param {Object} l10n
|
* @param {Object} l10n
|
||||||
*/
|
*/
|
||||||
static initialize(l10n, _uiManager, options) {
|
static initialize(l10n, _uiManager, options) {
|
||||||
|
AnnotationEditor._l10nResizer ||= Object.freeze({
|
||||||
|
topLeft: "pdfjs-editor-resizer-top-left",
|
||||||
|
topMiddle: "pdfjs-editor-resizer-top-middle",
|
||||||
|
topRight: "pdfjs-editor-resizer-top-right",
|
||||||
|
middleRight: "pdfjs-editor-resizer-middle-right",
|
||||||
|
bottomRight: "pdfjs-editor-resizer-bottom-right",
|
||||||
|
bottomMiddle: "pdfjs-editor-resizer-bottom-middle",
|
||||||
|
bottomLeft: "pdfjs-editor-resizer-bottom-left",
|
||||||
|
middleLeft: "pdfjs-editor-resizer-middle-left",
|
||||||
|
});
|
||||||
|
|
||||||
AnnotationEditor._l10nPromise ||= new Map(
|
AnnotationEditor._l10nPromise ||= new Map(
|
||||||
[
|
[
|
||||||
"pdfjs-editor-alt-text-button-label",
|
"pdfjs-editor-alt-text-button-label",
|
||||||
|
@ -214,18 +227,7 @@ class AnnotationEditor {
|
||||||
"pdfjs-editor-new-alt-text-added-button-label",
|
"pdfjs-editor-new-alt-text-added-button-label",
|
||||||
"pdfjs-editor-new-alt-text-missing-button-label",
|
"pdfjs-editor-new-alt-text-missing-button-label",
|
||||||
"pdfjs-editor-new-alt-text-to-review-button-label",
|
"pdfjs-editor-new-alt-text-to-review-button-label",
|
||||||
"pdfjs-editor-resizer-label-topLeft",
|
].map(str => [str, l10n.get(str)])
|
||||||
"pdfjs-editor-resizer-label-topMiddle",
|
|
||||||
"pdfjs-editor-resizer-label-topRight",
|
|
||||||
"pdfjs-editor-resizer-label-middleRight",
|
|
||||||
"pdfjs-editor-resizer-label-bottomRight",
|
|
||||||
"pdfjs-editor-resizer-label-bottomMiddle",
|
|
||||||
"pdfjs-editor-resizer-label-bottomLeft",
|
|
||||||
"pdfjs-editor-resizer-label-middleLeft",
|
|
||||||
].map(str => [
|
|
||||||
str,
|
|
||||||
l10n.get(str.replaceAll(/([A-Z])/g, c => `-${c.toLowerCase()}`)),
|
|
||||||
])
|
|
||||||
);
|
);
|
||||||
|
|
||||||
// The string isn't in the above list because the string has a parameter
|
// The string isn't in the above list because the string has a parameter
|
||||||
|
@ -1480,9 +1482,7 @@ class AnnotationEditor {
|
||||||
div.addEventListener("focus", this.#resizerFocus.bind(this, name), {
|
div.addEventListener("focus", this.#resizerFocus.bind(this, name), {
|
||||||
signal,
|
signal,
|
||||||
});
|
});
|
||||||
AnnotationEditor._l10nPromise
|
div.setAttribute("data-l10n-id", AnnotationEditor._l10nResizer[name]);
|
||||||
.get(`pdfjs-editor-resizer-label-${name}`)
|
|
||||||
.then(msg => div.setAttribute("aria-label", msg));
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1517,9 +1517,7 @@ class AnnotationEditor {
|
||||||
for (const child of children) {
|
for (const child of children) {
|
||||||
const div = this.#allResizerDivs[i++];
|
const div = this.#allResizerDivs[i++];
|
||||||
const name = div.getAttribute("data-resizer-name");
|
const name = div.getAttribute("data-resizer-name");
|
||||||
AnnotationEditor._l10nPromise
|
child.setAttribute("data-l10n-id", AnnotationEditor._l10nResizer[name]);
|
||||||
.get(`pdfjs-editor-resizer-label-${name}`)
|
|
||||||
.then(msg => child.setAttribute("aria-label", msg));
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue