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

disabledKey => fieldFocusedKey

Browse Source
This commit is contained in:
Henrik Giesel 2021-07-05 18:15:03 +02:00
parent 9cc0d0a01c
commit adfe6597a5
15 changed files with 48 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ts/components/IconButton.svelte
View File

@ -14,7 +14,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export let tooltip: string | undefined = undefined;
export let active = false;
export let disabled = false;
export const disables = false; /* unused */
export let tabbable = false;
export let iconSize: number = 75;

10
ts/components/LabelButton.svelte
View File

@ -3,9 +3,8 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="typescript">
import type { Readable } from "svelte/store";
import { onMount, createEventDispatcher, getContext } from "svelte";
import { disabledKey, nightModeKey, dropdownKey } from "./context-keys";
import { nightModeKey, dropdownKey } from "./context-keys";
import type { DropdownProps } from "./dropdown";
export let id: string | undefined = undefined;
@ -19,12 +18,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export let tooltip: string | undefined = undefined;
export let active = false;
export let disables = true;
export let disabled = false;
export let tabbable = false;
const disabled = getContext<Readable<boolean>>(disabledKey);
$: _disabled = disables && $disabled;
const nightMode = getContext<boolean>(nightModeKey);
const dropdownProps = getContext<DropdownProps>(dropdownKey) ?? { dropdown: false };
@ -44,7 +40,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
class:btn-night={theme === "anki" && nightMode}
title={tooltip}
{...dropdownProps}
disabled={_disabled}
{disabled}
tabindex={tabbable ? 0 : -1}
on:click
on:mousedown|preventDefault

10
ts/components/SelectButton.svelte
View File

@ -3,21 +3,17 @@ Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="typescript">
import type { Readable } from "svelte/store";
import { onMount, createEventDispatcher, getContext } from "svelte";
import { disabledKey, nightModeKey } from "./context-keys";
import { nightModeKey } from "./context-keys";
export let id: string | undefined = undefined;
let className = "";
export { className as class };
export let tooltip: string | undefined = undefined;
export let disables = true;
export let disabled = false;
const nightMode = getContext<boolean>(nightModeKey);
const disabled = getContext<Readable<boolean>>(disabledKey);
$: _disabled = disables && $disabled;
let buttonRef: HTMLSelectElement;
@ -30,8 +26,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<select
tabindex="-1"
bind:this={buttonRef}
disabled={_disabled}
{id}
{disabled}
class="{className} form-select"
class:btn-day={!nightMode}
class:btn-night={nightMode}

1
ts/components/context-keys.ts
View File

@ -2,7 +2,6 @@
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export const nightModeKey = Symbol("nightMode");
export const touchDeviceKey = Symbol("touchDevice");
export const disabledKey = Symbol("disabled");
export const sectionKey = Symbol("section");
export const buttonGroupKey = Symbol("buttonGroup");

26
ts/editor/ClozeButton.svelte
View File

@ -4,12 +4,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="typescript">
import * as tr from "lib/i18n";
import { disabledKey } from "components/context-keys";
import { inCodableKey } from "./context-keys";
import IconButton from "components/IconButton.svelte";
import WithShortcut from "components/WithShortcut.svelte";
import WithContext from "components/WithContext.svelte";
import OnlyEditable from "./OnlyEditable.svelte";
import { ellipseIcon } from "./icons";
import { forEditorField } from ".";
@ -45,16 +43,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script>
<WithShortcut shortcut={"Control+Alt?+Shift+C"} let:createShortcut let:shortcutLabel>
<WithContext key={disabledKey} let:context={disabled}>
<WithContext key={inCodableKey} let:context={inCodable}>
<IconButton
tooltip={`${tr.editingClozeDeletion()} (${shortcutLabel})`}
disabled={inCodable || disabled}
on:click={onCloze}
on:mount={createShortcut}
>
{@html ellipseIcon}
</IconButton>
</WithContext>
</WithContext>
<OnlyEditable let:disabled>
<IconButton
tooltip={`${tr.editingClozeDeletion()} (${shortcutLabel})`}
{disabled}
on:click={onCloze}
on:mount={createShortcut}
>
{@html ellipseIcon}
</IconButton>
</OnlyEditable>
</WithShortcut>

2
ts/editor/NoteTypeButtons.svelte
View File

@ -17,7 +17,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<ButtonGroup {api}>
<ButtonGroupItem>
<LabelButton
disables={false}
tooltip={tr.editingCustomizeFields()}
on:click={() => bridgeCommand("fields")}
>
@ -28,7 +27,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<ButtonGroupItem>
<WithShortcut shortcut={"Control+L"} let:createShortcut let:shortcutLabel>
<LabelButton
disables={false}
tooltip={`${tr.editingCustomizeCardTemplates()} (${shortcutLabel})`}
on:click={() => bridgeCommand("cards")}
on:mount={createShortcut}

7
ts/editor/OnlyEditable.svelte
View File

@ -4,12 +4,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="typescript">
import WithContext from "components/WithContext.svelte";
import { disabledKey } from "components/context-keys";
import { inCodableKey } from "./context-keys";
import { fieldFocusedKey, inCodableKey } from "./context-keys";
</script>
<WithContext key={disabledKey} let:context={disabled}>
<WithContext key={fieldFocusedKey} let:context={fieldFocused}>
<WithContext key={inCodableKey} let:context={inCodable}>
<slot disabled={disabled || inCodable} />
<slot disabled={!fieldFocused || inCodable} />
</WithContext>
</WithContext>

1
ts/editor/PreviewButton.svelte
View File

@ -13,7 +13,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<WithShortcut shortcut={"Control+Shift+P"} let:createShortcut let:shortcutLabel>
<LabelButton
tooltip={tr.browsingPreviewSelectedCard({ val: shortcutLabel })}
disables={false}
on:click={() => bridgeCommand("preview")}
on:mount={createShortcut}
>

27
ts/editor/TemplateButtons.svelte
View File

@ -5,8 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<script lang="typescript">
import * as tr from "lib/i18n";
import { bridgeCommand } from "lib/bridgecommand";
import { disabledKey } from "components/context-keys";
import { inCodableKey } from "./context-keys";
import { fieldFocusedKey, inCodableKey } from "./context-keys";
import ButtonGroup from "components/ButtonGroup.svelte";
import ButtonGroupItem from "components/ButtonGroupItem.svelte";
@ -89,16 +88,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<ButtonGroupItem>
<WithDropdown let:createDropdown>
<WithContext key={disabledKey} let:context={disabled}>
<OnlyEditable let:disabled={inCodable}>
<IconButton
disabled={disabled || inCodable}
on:mount={(event) => createDropdown(event.detail.button)}
>
{@html functionIcon}
</IconButton>
</OnlyEditable>
</WithContext>
<OnlyEditable let:disabled>
<IconButton
{disabled}
on:mount={(event) => createDropdown(event.detail.button)}
>
{@html functionIcon}
</IconButton>
</OnlyEditable>
<DropdownMenu>
<WithShortcut
@ -189,7 +186,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</ButtonGroupItem>
<ButtonGroupItem>
<WithContext key={disabledKey} let:context={disabled}>
<WithContext key={fieldFocusedKey} let:context={fieldFocused}>
<WithContext key={inCodableKey} let:context={inCodable}>
<WithShortcut
shortcut={"Control+Shift+X"}
@ -202,8 +199,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
shortcutLabel
)}
iconSize={70}
active={!disabled && inCodable}
{disabled}
active={inCodable}
disabled={!fieldFocused}
on:click={onHtmlEdit}
on:mount={createShortcut}
>

4
ts/editor/codable.ts
View File

@ -9,7 +9,7 @@ import "codemirror/addon/fold/xml-fold";
import "codemirror/addon/edit/matchtags.js";
import "codemirror/addon/edit/closetag.js";
import { setCodableButtons } from "./toolbar";
import { inCodable } from "./toolbar";
const codeMirrorOptions = {
mode: "htmlmixed",
@ -67,7 +67,7 @@ export class Codable extends HTMLTextAreaElement {
focus(): void {
this.codeMirror.focus();
setCodableButtons();
inCodable.set(true);
}
caretToEnd(): void {

1
ts/editor/context-keys.ts
View File

@ -1,4 +1,5 @@
// Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export const fieldFocusedKey = Symbol("fieldFocused");
export const inCodableKey = Symbol("inCodable");

4
ts/editor/editable.ts
View File

@ -3,7 +3,7 @@
import { bridgeCommand } from "./lib";
import { nodeIsInline, caretToEnd, getBlockElement } from "./helpers";
import { setEditableButtons } from "./toolbar";
import { inCodable } from "./toolbar";
import { wrap } from "./wrap";
function containsInlineContent(field: Element): boolean {
@ -42,7 +42,7 @@ export class Editable extends HTMLElement {
focus(): void {
super.focus();
setEditableButtons();
inCodable.set(false);
}
caretToEnd(): void {

6
ts/editor/focus-handlers.ts
View File

@ -5,7 +5,7 @@
@typescript-eslint/no-non-null-assertion: "off",
*/
import { enableButtons, disableButtons } from "./toolbar";
import { fieldFocused } from "./toolbar";
import type { EditingArea } from "./editing-area";
import { saveField } from "./change-timer";
@ -21,7 +21,7 @@ export function onFocus(evt: FocusEvent): void {
}
bridgeCommand(`focus:${currentField.ord}`);
enableButtons();
fieldFocused.set(true);
}
export function onBlur(evt: FocusEvent): void {
@ -29,5 +29,5 @@ export function onBlur(evt: FocusEvent): void {
const currentFieldUnchanged = previousFocus === document.activeElement;
saveField(previousFocus, currentFieldUnchanged ? "key" : "blur");
disableButtons();
fieldFocused.set(false);
}

6
ts/editor/index.ts
View File

@ -6,7 +6,7 @@
*/
import { filterHTML } from "html-filter";
import { updateActiveButtons, disableButtons } from "./toolbar";
import { updateActiveButtons } from "./toolbar";
import { setupI18n, ModuleName } from "lib/i18n";
import { registerShortcut } from "lib/shortcuts";
import { bridgeCommand } from "./lib";
@ -20,7 +20,7 @@ import { LabelContainer } from "./label-container";
import { EditingArea } from "./editing-area";
import { Editable } from "./editable";
import { Codable } from "./codable";
import { initToolbar } from "./toolbar";
import { initToolbar, fieldFocused } from "./toolbar";
export { setNoteId, getNoteId } from "./note-id";
export { saveNow } from "./change-timer";
@ -140,7 +140,7 @@ export function setFields(fields: [string, string][]): void {
if (!getCurrentField()) {
// when initial focus of the window is not on editor (e.g. browser)
disableButtons();
fieldFocused.set(false);
}
}

26
ts/editor/toolbar.ts
View File

@ -6,15 +6,15 @@
@typescript-eslint/no-explicit-any: "off",
*/
import { disabledKey, nightModeKey } from "components/context-keys";
import { inCodableKey } from "./context-keys";
import { nightModeKey } from "components/context-keys";
import { fieldFocusedKey, inCodableKey } from "./context-keys";
import { writable } from "svelte/store";
import EditorToolbar from "./EditorToolbar.svelte";
import "./bootstrap.css";
const disabled = writable(false);
const inCodable = writable(false);
export const fieldFocused = writable(false);
export const inCodable = writable(false);
export function initToolbar(i18n: Promise<void>): Promise<EditorToolbar> {
let toolbarResolve: (value: EditorToolbar) => void;
@ -28,7 +28,7 @@ export function initToolbar(i18n: Promise<void>): Promise<EditorToolbar> {
const anchor = document.getElementById("fields")!;
const context = new Map();
context.set(disabledKey, disabled);
context.set(fieldFocusedKey, fieldFocused);
context.set(inCodableKey, inCodable);
context.set(
nightModeKey,
@ -42,22 +42,6 @@ export function initToolbar(i18n: Promise<void>): Promise<EditorToolbar> {
return toolbarPromise;
}
export function enableButtons(): void {
disabled.set(false);
}
export function disableButtons(): void {
disabled.set(true);
}
export function setCodableButtons(): void {
inCodable.set(true);
}
export function setEditableButtons(): void {
inCodable.set(false);
}
export {
updateActiveButtons,
clearActiveButtons,