langfingaz/anki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update setFonts and setBackgrounds

Browse Source
This commit is contained in:
Henrik Giesel 2021-01-28 18:37:38 +01:00
parent db0c776210
commit bec709c7a9
1 changed files with 47 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
qt/aqt/data/web/js/editor.ts
View File

@ -60,28 +60,23 @@ function onKey(evt: KeyboardEvent): void {
if (evt.code === "Enter" && !inListItem()) { if (evt.code === "Enter" && !inListItem()) {
evt.preventDefault(); evt.preventDefault();
document.execCommand("insertLineBreak"); document.execCommand("insertLineBreak");
return;
} }
// fix Ctrl+right/left handling in RTL fields // // fix Ctrl+right/left handling in RTL fields
if (currentField.dir === "rtl") { if (currentField.isRightToLeft()) {
const selection = window.getSelection(); const selection = currentField.getSelection();
let granularity = "character"; const granularity = evt.ctrlKey ? "word" : "character";
let alter = "move"; const alter = evt.shiftKey ? "extend" : "move";
if (evt.ctrlKey) {
granularity = "word"; switch (evt.code) {
} case "ArrowRight":
if (evt.shiftKey) { selection.modify(alter, "right", granularity);
alter = "extend"; evt.preventDefault();
} return;
if (evt.code === "ArrowRight") { case "ArrowLeft":
selection.modify(alter, "right", granularity); selection.modify(alter, "left", granularity);
evt.preventDefault(); evt.preventDefault();
return; return;
} else if (evt.code === "ArrowLeft") {
selection.modify(alter, "left", granularity);
evt.preventDefault();
return;
} }
} }
@ -441,6 +436,12 @@ class EditingArea extends HTMLElement {
this.style.color = color; this.style.color = color;
} }
setBaseStyling(fontFamily: string, fontSize: string, direction: string): void {
this.style.fontFamily = fontFamily;
this.style.fontSize = fontSize;
this.style.direction = direction;
}
set fieldHTML(content: string) { set fieldHTML(content: string) {
this.innerHTML = content; this.innerHTML = content;
@ -491,6 +492,14 @@ class EditingContainer extends HTMLDivElement {
this.editingArea.fieldHTML = content; this.editingArea.fieldHTML = content;
} }
setBaseStyling(fontFamily: string, fontSize: string, direction: string): void {
this.editingArea.setBaseStyling(fontFamily, fontSize, direction);
}
isRightToLeft(): boolean {
return this.editingArea.style.direction === "rtl";
}
getSelection(): Selection { getSelection(): Selection {
return this.editingShadow.getSelection(); return this.editingShadow.getSelection();
} }
@ -528,6 +537,10 @@ class EditorField extends HTMLDivElement {
this.label.innerText = label; this.label.innerText = label;
this.editingContainer.initialize(index, color, content); this.editingContainer.initialize(index, color, content);
} }
setBaseStyling(fontFamily: string, fontSize: string, direction: string): void {
this.editingContainer.setBaseStyling(fontFamily, fontSize, direction);
}
} }
customElements.define("editor-field", EditorField, { extends: "div" }); customElements.define("editor-field", EditorField, { extends: "div" });
@ -546,6 +559,15 @@ function adjustFieldAmount(amount: number): void {
} }
} }
function forField<T>(values: T[], func: (value: T, field: EditorField, index: number) => void): void {
const fieldContainer = document.getElementById("fields");
const fields = [...fieldContainer.children] as EditorField[];
for (const [index, field] of fields.entries()) {
func(values[index], field, index)
}
}
function setFields(fields: [string, string][]): void { function setFields(fields: [string, string][]): void {
// webengine will include the variable after enter+backspace // webengine will include the variable after enter+backspace
// if we don't convert it to a literal colour // if we don't convert it to a literal colour
@ -554,30 +576,19 @@ function setFields(fields: [string, string][]): void {
.getPropertyValue("--text-fg"); .getPropertyValue("--text-fg");
adjustFieldAmount(fields.length); adjustFieldAmount(fields.length);
forField(fields, ([name, fieldContent], field, index) => field.initialize(index, name, color, fieldContent));
const fieldsContainer = document.getElementById("fields");
const children = [...fieldsContainer.children] as EditorField[];
for (const [index, child] of children.entries()) {
const [name, fieldContent] = fields[index];
child.initialize(index, name, color, fieldContent);
}
maybeDisableButtons(); maybeDisableButtons();
} }
function setBackgrounds(cols: "dupe"[]) { function setBackgrounds(cols: "dupe"[]) {
for (let i = 0; i < cols.length; i++) { forField(cols, (value, field) => field.classList.toggle("dupe", value === "dupe"));
const element = document.querySelector(`#f${i}`);
element.classList.toggle("dupe", cols[i] === "dupe");
}
} }
function setFonts(fonts: [string, number, boolean][]): void { function setFonts(fonts: [string, number, boolean][]): void {
for (let i = 0; i < fonts.length; i++) { forField(fonts, ([fontFamily, fontSize, isRtl], field) => {
const n = $(`#f${i}`); field.setBaseStyling(fontFamily, `${fontSize}px`, isRtl ? "rtl" : "ltr");
n.css("font-family", fonts[i][0]).css("font-size", fonts[i][1]); });
n[0].dir = fonts[i][2] ? "rtl" : "ltr";
}
} }
function setNoteId(id: number): void { function setNoteId(id: number): void {