mirror of
https://github.com/ankitects/anki.git
synced 2025-09-25 17:26:36 -04:00
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:
parent
312fa27898
commit
6db7897601
2 changed files with 40 additions and 13 deletions
|
@ -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);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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");
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue