GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-18 22:12:21 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Add addMenu and updateMenu, avoid using {buttons,menus}Promise outside of class

Browse source
This commit is contained in:
Henrik Giesel 2021-04-24 01:08:55 +02:00
parent 1f05ebbcf7
commit 53bb8c7b28
3 changed files with 49 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
ts/editor-toolbar/index.ts
View file

@ -1,6 +1,5 @@
// Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import type { SvelteComponentDev } from "svelte/internal";
import type { ToolbarItem, IterableToolbarItem } from "./types";
import type { Identifier } from "./identifiable";
@ -17,16 +16,16 @@ let buttonsResolve: (value: Writable<IterableToolbarItem[]>) => void;
let menusResolve: (value: Writable<ToolbarItem[]>) => void;
export class EditorToolbar extends HTMLElement {
component?: SvelteComponentDev;
buttonsPromise: Promise<Writable<IterableToolbarItem[]>> = new Promise(
private buttonsPromise: Promise<Writable<IterableToolbarItem[]>> = new Promise(
(resolve) => {
buttonsResolve = resolve;
}
);
menusPromise: Promise<Writable<ToolbarItem[]>> = new Promise((resolve): void => {
menusResolve = resolve;
});
private menusPromise: Promise<Writable<ToolbarItem[]>> = new Promise(
(resolve): void => {
menusResolve = resolve;
}
);
connectedCallback(): void {
globalThis.$editorToolbar = this;
@ -34,7 +33,7 @@ export class EditorToolbar extends HTMLElement {
const buttons = writable([]);
const menus = writable([]);
this.component = new EditorToolbarSvelte({
new EditorToolbarSvelte({
target: this,
props: {
buttons,
@ -59,7 +58,7 @@ export class EditorToolbar extends HTMLElement {
(items: IterableToolbarItem[]): IterableToolbarItem[] =>
updateRecursive(
update,
{ component: EditorToolbarSvelte, items },
({ items } as unknown) as ToolbarItem,
...identifiers
).items as IterableToolbarItem[]
);
@ -101,6 +100,36 @@ export class EditorToolbar extends HTMLElement {
...initIdentifiers
);
}
updateMenu(
update: (component: ToolbarItem) => ToolbarItem,
...identifiers: Identifier[]
): void {
this.menusPromise.then(
(menus: Writable<ToolbarItem[]>): Writable<ToolbarItem[]> => {
menus.update(
(items: ToolbarItem[]): ToolbarItem[] =>
updateRecursive(
update,
({ items } as unknown) as ToolbarItem,
...identifiers
).items as ToolbarItem[]
);
return menus;
}
);
}
addMenu(newMenu: ToolbarItem, ...identifiers: Identifier[]): void {
const initIdentifiers = identifiers.slice(0, -1);
const lastIdentifier = identifiers[identifiers.length - 1];
this.updateMenu(
(component: ToolbarItem) =>
add(component as IterableToolbarItem, newMenu, lastIdentifier),
...initIdentifiers
);
}
}
customElements.define("anki-editor-toolbar", EditorToolbar);

1
ts/editor/addons.ts
View file

@ -9,7 +9,6 @@ import {
iconButton,
commandIconButton,
selectButton,
dropdownMenu,
dropdownItem,
buttonDropdown,

37
ts/editor/toolbar.ts
View file

@ -1,8 +1,5 @@
// Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import type { ToolbarItem, IterableToolbarItem } from "editor-toolbar/types";
import type { Writable } from "svelte/store";
import { getNotetypeGroup } from "./notetype";
import { getFormatInlineGroup } from "./formatInline";
import { getFormatBlockGroup, getFormatBlockMenus } from "./formatBlock";
@ -12,30 +9,18 @@ import { getTemplateGroup, getTemplateMenus } from "./template";
export function initToolbar(i18n: Promise<void>): void {
document.addEventListener("DOMContentLoaded", () => {
i18n.then(() => {
globalThis.$editorToolbar.buttonsPromise.then(
(
buttons: Writable<IterableToolbarItem[]>
): Writable<IterableToolbarItem[]> => {
buttons.update(() => [
getNotetypeGroup(),
getFormatInlineGroup(),
getFormatBlockGroup(),
getColorGroup(),
getTemplateGroup(),
]);
return buttons;
}
);
const buttons = [
getNotetypeGroup(),
getFormatInlineGroup(),
getFormatBlockGroup(),
getColorGroup(),
getTemplateGroup(),
];
globalThis.$editorToolbar.menusPromise.then(
(menus: Writable<ToolbarItem[]>): Writable<ToolbarItem[]> => {
menus.update(() => [
...getFormatBlockMenus(),
...getTemplateMenus(),
]);
return menus;
}
);
const menus = [...getFormatBlockMenus(), ...getTemplateMenus()];
globalThis.$editorToolbar.updateButton(() => ({ items: buttons }));
globalThis.$editorToolbar.updateMenu(() => ({ items: menus }));
});
});
}