disabledKey => fieldFocusedKey

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

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 tooltip: string | undefined = undefined;
export let active = false; export let active = false;
export let disabled = false; export let disabled = false;
export const disables = false; /* unused */
export let tabbable = false; export let tabbable = false;
export let iconSize: number = 75; export let iconSize: number = 75;

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

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

View File

@ -2,7 +2,6 @@
// 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
export const nightModeKey = Symbol("nightMode"); export const nightModeKey = Symbol("nightMode");
export const touchDeviceKey = Symbol("touchDevice"); export const touchDeviceKey = Symbol("touchDevice");
export const disabledKey = Symbol("disabled");
export const sectionKey = Symbol("section"); export const sectionKey = Symbol("section");
export const buttonGroupKey = Symbol("buttonGroup"); export const buttonGroupKey = Symbol("buttonGroup");

View File

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

View File

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

View File

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

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> <WithShortcut shortcut={"Control+Shift+P"} let:createShortcut let:shortcutLabel>
<LabelButton <LabelButton
tooltip={tr.browsingPreviewSelectedCard({ val: shortcutLabel })} tooltip={tr.browsingPreviewSelectedCard({ val: shortcutLabel })}
disables={false}
on:click={() => bridgeCommand("preview")} on:click={() => bridgeCommand("preview")}
on:mount={createShortcut} on:mount={createShortcut}
> >

View File

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

View File

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

View File

@ -1,4 +1,5 @@
// 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
export const fieldFocusedKey = Symbol("fieldFocused");
export const inCodableKey = Symbol("inCodable"); export const inCodableKey = Symbol("inCodable");

View File

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

View File

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

View File

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

View File

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