Improve focus handling

* Ported from #1046:

* disabling buttons will clear button highlight
* enabling button will set button highlight
* move caret to end executed before enabling buttons (so button highlight will be for actual position of caret)
* move caret to end will also be executed if previousActiveElement is null, which will only be the case before the first onBlur was executed:
  * so that caret will be moved to end on opening editor
This commit is contained in:
Henrik Giesel 2021-03-08 14:20:06 +01:00
parent 312fa27898
commit 6db7897601
2 changed files with 40 additions and 13 deletions

View file

@ -16,9 +16,14 @@ function caretToEnd(currentField: EditingArea): void {
selection.addRange(range); selection.addRange(range);
} }
function focusField(field: EditingArea) { function focusField(field: EditingArea, moveCaretToEnd: boolean): void {
field.focusEditable(); field.focusEditable();
bridgeCommand(`focus:${field.ord}`); bridgeCommand(`focus:${field.ord}`);
if (moveCaretToEnd) {
caretToEnd(field);
}
enableButtons(); enableButtons();
} }
@ -33,11 +38,10 @@ export function onFocus(evt: FocusEvent): void {
!(previousFocus instanceof EditingArea) || !(previousFocus instanceof EditingArea) ||
previousFocus === previousActiveElement previousFocus === previousActiveElement
) { ) {
focusField(currentField); const moveCaretToEnd =
Boolean(previousFocus) || !Boolean(previousActiveElement);
if (previousFocus) { focusField(currentField, moveCaretToEnd);
caretToEnd(currentField);
}
} }
} }

View file

@ -1,9 +1,10 @@
/* Copyright: Ankitects Pty Ltd and contributors /* Copyright: Ankitects Pty Ltd and contributors
* License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */ * License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html */
const highlightButtons = ["bold", "italic", "underline", "superscript", "subscript"];
export function updateButtonState(): void { export function updateButtonState(): void {
const buts = ["bold", "italic", "underline", "superscript", "subscript"]; for (const name of highlightButtons) {
for (const name of buts) {
const elem = document.querySelector(`#${name}`) as HTMLElement; const elem = document.querySelector(`#${name}`) as HTMLElement;
elem.classList.toggle("highlighted", document.queryCommandState(name)); elem.classList.toggle("highlighted", document.queryCommandState(name));
} }
@ -12,6 +13,13 @@ export function updateButtonState(): void {
// 'col': document.queryCommandValue("forecolor") // 'col': document.queryCommandValue("forecolor")
} }
function clearButtonHighlight(): void {
for (const name of highlightButtons) {
const elem = document.querySelector(`#${name}`) as HTMLElement;
elem.classList.remove("highlighted");
}
}
export function preventButtonFocus(): void { export function preventButtonFocus(): void {
for (const element of document.querySelectorAll("button.linkb")) { for (const element of document.querySelectorAll("button.linkb")) {
element.addEventListener("mousedown", (evt: Event) => { element.addEventListener("mousedown", (evt: Event) => {
@ -20,19 +28,34 @@ export function preventButtonFocus(): void {
} }
} }
export function disableButtons(): void { export function enableButtons(): void {
$("button.linkb:not(.perm)").prop("disabled", true); const buttons = document.querySelectorAll(
"button.linkb"
) as NodeListOf<HTMLButtonElement>;
buttons.forEach((elem: HTMLButtonElement): void => {
elem.disabled = false;
});
updateButtonState();
} }
export function enableButtons(): void { export function disableButtons(): void {
$("button.linkb").prop("disabled", false); const buttons = document.querySelectorAll(
"button.linkb:not(.perm)"
) as NodeListOf<HTMLButtonElement>;
buttons.forEach((elem: HTMLButtonElement): void => {
elem.disabled = true;
});
clearButtonHighlight();
} }
export function setFGButton(col: string): void { export function setFGButton(col: string): void {
document.getElementById("forecolor")!.style.backgroundColor = col; document.getElementById("forecolor")!.style.backgroundColor = col;
} }
export function toggleEditorButton(buttonid: string): void { export function toggleEditorButton(buttonOrId: string | HTMLElement): void {
const button = $(buttonid)[0]; const button =
typeof buttonOrId === "string"
? (document.getElementById(buttonOrId) as HTMLElement)
: buttonOrId;
button.classList.toggle("highlighted"); button.classList.toggle("highlighted");
} }