diff --git a/ts/editor-toolbar/LabelButton.svelte b/ts/editor-toolbar/LabelButton.svelte index 6f801a8fc..8bc6cab64 100644 --- a/ts/editor-toolbar/LabelButton.svelte +++ b/ts/editor-toolbar/LabelButton.svelte @@ -7,6 +7,7 @@ export let props: Record = {}; export let label: string; + export let title: string; export let onClick: (event: ClickEvent) => void; export let disables = true; @@ -58,6 +59,7 @@ class={extendClassName(className)} {...props} on:click={onClick} - on:mousedown|preventDefault> + on:mousedown|preventDefault + {title}> {label} diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts index 10213412d..dca3b97b5 100644 --- a/ts/editor-toolbar/index.ts +++ b/ts/editor-toolbar/index.ts @@ -1,7 +1,8 @@ import type { SvelteComponent } from "svelte"; import { checkNightMode } from "anki/nightmode"; -import { setupI18n, ModuleName } from "anki/i18n"; +import { setupI18n, ModuleName, i18n } from "anki/i18n"; +import * as tr from "anki/i18n"; import EditorToolbarSvelte from "./EditorToolbar.svelte"; @@ -70,19 +71,19 @@ class EditorToolbar extends HTMLElement { connectedCallback(): void { this.disabled = writable(false); - setupI18n({ modules: [ModuleName.STATISTICS, ModuleName.SCHEDULING] }).then( - () => { - this.component = new EditorToolbarSvelte({ - target: this, - props: { - menus: defaultMenus, - buttons: defaultButtons, - nightMode: checkNightMode(), - disabled: this.disabled, - }, - }); - } - ); + setupI18n({ modules: [ModuleName.EDITING] }).then(() => { + console.log(i18n, tr); + + this.component = new EditorToolbarSvelte({ + target: this, + props: { + menus: defaultMenus, + buttons: defaultButtons, + nightMode: checkNightMode(), + disabled: this.disabled, + }, + }); + }); } enableButtons(): void { diff --git a/ts/editor-toolbar/notetype.ts b/ts/editor-toolbar/notetype.ts index 4298cb016..815b00568 100644 --- a/ts/editor-toolbar/notetype.ts +++ b/ts/editor-toolbar/notetype.ts @@ -1,15 +1,26 @@ import { bridgeCommand } from "anki/bridgecommand"; +import { lazyLoaded } from "anki/lazy"; +import * as tr from "anki/i18n"; import LabelButton from "./LabelButton.svelte"; export const fieldsButton = { component: LabelButton, - label: "Fields...", onClick: () => bridgeCommand("fields"), disables: false, }; + +lazyLoaded(fieldsButton, { + label: () => `${tr.editingFields()}...`, + title: tr.editingCustomizeFields, +}); + export const cardsButton = { component: LabelButton, - label: "Cards...", onClick: () => bridgeCommand("cards"), disables: false, }; + +lazyLoaded(cardsButton, { + label: () => `${tr.editingCards()}...`, + title: tr.editingCustomizeCardTemplatesCtrlandl, +}); diff --git a/ts/lib/lazy.ts b/ts/lib/lazy.ts new file mode 100644 index 000000000..9dd4b6760 --- /dev/null +++ b/ts/lib/lazy.ts @@ -0,0 +1,25 @@ +export function lazyLoaded( + object: Record, + properties: Record unknown> +): void { + const propertyDescriptorMap = Object.entries(properties) + .map(([name, getter]: [string, () => unknown]): [ + string, + PropertyDescriptor + ] => [ + name, + { + get: getter, + enumerable: true, + }, + ]) + .reduce( + ( + accumulator: PropertyDescriptorMap, + [name, property] + ): PropertyDescriptorMap => ((accumulator[name] = property), accumulator), + {} + ); + + Object.defineProperties(object, propertyDescriptorMap); +}