From e80e6ff34bfd4be1bcd4062d0e12094b67295b46 Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Sat, 26 Jun 2021 16:15:56 +0200 Subject: [PATCH] Try to remove special handling of last tag / inputNew --- ts/editor/TagEditor.svelte | 134 +++++++++++++++++-------------------- ts/editor/TagInput.svelte | 6 -- ts/editor/tags.ts | 4 +- 3 files changed, 63 insertions(+), 81 deletions(-) diff --git a/ts/editor/TagEditor.svelte b/ts/editor/TagEditor.svelte index e20ee8cad..91e3559db 100644 --- a/ts/editor/TagEditor.svelte +++ b/ts/editor/TagEditor.svelte @@ -10,7 +10,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import Tag from "./Tag.svelte"; import TagAutocomplete from "./TagAutocomplete.svelte"; import ButtonToolbar from "components/ButtonToolbar.svelte"; - import TagInput from "./TagInput.svelte"; import { attachId, getName } from "./tags"; export let initialNames = ["en::foobar", "test", "def"]; @@ -18,15 +17,32 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html export let size = isApplePlatform() ? 1.6 : 2.0; - let tags = initialNames.map(attachId); - let newInput: HTMLInputElement; - let newName: string = ""; + let tags = initialNames.map((name) => attachId(name)); - function focusNewInput(): void { - newInput.focus(); + function addEmptyTag(): void { + if (tags[tags.length - 1].name.length === 0) { + tags[tags.length - 1].active = true; + return; + } + + tags.push(attachId("", true)); + tags = tags; } - function checkIfContains(newName: string, names: string[]): boolean { + function insertEmptyTagAt(index: number): void { + tags.splice(index, 0, attachId("", true)); + tags = tags; + } + + function appendEmptyTagAt(index: number): void { + tags.splice(index + 1, 0, attachId("", true)); + tags = tags; + } + + function checkIfContainsNameAt(index: number): boolean { + const names = tags.map(getName); + const newName = names.splice(index, 1, "")[0]; + const contained = names.indexOf(newName); if (contained >= 0) { tags[contained].blink = true; @@ -36,20 +52,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html return false; } - function checkIfContainsName(newName: string): boolean { - const names = tags.map(getName); - return checkIfContains(newName, names); - } - - function checkIfContainsNameAt(index: number): boolean { - const names = tags.map(getName); - const newName = names.splice(index, 1, "")[0]; - return checkIfContains(newName, names); - } - - function checkForDuplicateNameAt(index: number): void { + function addTagAt(index: number): void { if (checkIfContainsNameAt(index)) { deleteTagAt(index); + insertEmptyTagAt(index); + } else { + appendEmptyTagAt(index); } } @@ -111,7 +119,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html tags = tags; await tick(); - focusNewInput(); + /* focusNewInput(); */ } tags[index].active = false; @@ -121,40 +129,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html await tick(); (document.activeElement as HTMLInputElement).setSelectionRange(0, 0); } - - function appendTag(): boolean { - let added = false; - - if (!checkIfContainsName(newName)) { - tags.push(attachId(newName)); - added = true; - } - - tags = tags; - newName = ""; - - return added; - } - - function joinWithLastTag(): void { - const popped = tags.pop(); - tags = tags; - - if (popped) { - newName = popped.name + newName; - } - } - - async function moveToLastTag(): Promise { - const newTag = appendTag() ? tags[tags.length - 2] : tags[tags.length - 1]; - newTag.active = true; - }
- + {#each tags as tag, index (tag.id)} - {}} - on:blur={() => {}} - on:tagupdate={() => checkForDuplicateNameAt(index)} - on:tagadd={() => insertTagAt(index)} - on:tagdelete={() => deleteTagAt(index)} - on:tagjoinprevious={() => joinWithPreviousTag(index)} - on:tagjoinnext={() => joinWithNextTag(index)} - on:tagmoveprevious={() => moveToPreviousTag(index)} - on:tagmovenext={() => moveToNextTag(index)} - /> + {#if index !== tags.length - 1} + addTagAt(index)} + on:tagadd={() => insertTagAt(index)} + on:tagdelete={() => deleteTagAt(index)} + on:tagjoinprevious={() => joinWithPreviousTag(index)} + on:tagjoinnext={() => joinWithNextTag(index)} + on:tagmoveprevious={() => moveToPreviousTag(index)} + on:tagmovenext={() => moveToNextTag(index)} + /> + {:else} + addTagAt(index)} + on:tagadd={() => insertTagAt(index)} + on:tagjoinprevious={() => joinWithPreviousTag(index)} + on:tagmoveprevious={() => moveToPreviousTag(index)} + on:tagmovenext={() => moveToNextTag(index)} + /> + {/if} {/each} - @@ -199,4 +183,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html .row-gap > :global(.d-flex > *) { margin-bottom: 2px; } + + .tag-spacer { + cursor: text; + } diff --git a/ts/editor/TagInput.svelte b/ts/editor/TagInput.svelte index 236e6e95e..87a2a2265 100644 --- a/ts/editor/TagInput.svelte +++ b/ts/editor/TagInput.svelte @@ -171,12 +171,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html display: inline-grid; height: 100%; - cursor: text; - - &:focus-within { - cursor: default; - } - &::after, input { color: var(--text-fg); diff --git a/ts/editor/tags.ts b/ts/editor/tags.ts index 2d86d582f..460471555 100644 --- a/ts/editor/tags.ts +++ b/ts/editor/tags.ts @@ -22,10 +22,10 @@ interface Tag { id: string; } -export function attachId(name: string): Tag { +export function attachId(name: string, active = false): Tag { return { name, - active: false, + active, blink: false, id: Math.random().toString(36).substring(2), };