Almost implement tagmove

* tagmovenext will start on the last position rather than first
This commit is contained in:
Henrik Giesel 2021-06-26 01:30:51 +02:00
parent fe35573308
commit 428655a32f
3 changed files with 28 additions and 18 deletions

View file

@ -9,10 +9,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { deleteIcon } from "./icons"; import { deleteIcon } from "./icons";
export let name: string; export let name: string;
export let active: boolean;
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
let active = false;
let input: HTMLInputElement; let input: HTMLInputElement;
function checkForActivation(): void { function checkForActivation(): void {
@ -75,5 +75,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
button { button {
padding: 0; padding: 0;
&:focus,
&:active {
outline: none;
}
} }
</style> </style>

View file

@ -22,11 +22,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
let newName: string = ""; let newName: string = "";
function focusNewInput(): void { function focusNewInput(): void {
if (document.activeElement === newInput) {
// refocus
newInput.blur();
}
newInput.focus(); newInput.focus();
} }
@ -81,26 +76,33 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
return; return;
} }
const before = tags.splice(index - 1, 1)[0]; tags[index - 1].active = true;
tags.splice(index, 0, before); tags[index].active = false;
tags = tags; tags = tags;
} }
function moveToNextTag(index: number): void { function moveToNextTag(index: number): void {
if (index === tags.length - 1 || tags.length === 1) { if (index === tags.length - 1 || tags.length === 1) {
return; focusNewInput();
} }
// TODO
tags[index].active = false;
tags[index + 1].active = true;
tags = tags;
} }
function appendTag(): void { function appendTag(): boolean {
const names = tags.map(getName); const names = tags.map(getName);
let added = false;
if (!names.includes(newName) && newName.length > 0) { if (!names.includes(newName) && newName.length > 0) {
tags.push(attachId(newName)); tags.push(attachId(newName));
tags = tags; added = true;
} }
tags = tags;
newName = ""; newName = "";
return added;
} }
function joinWithLastTag(): void { function joinWithLastTag(): void {
@ -113,7 +115,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
} }
function moveToLastTag(): void { function moveToLastTag(): void {
appendTag(); const newTag = appendTag() ? tags[tags.length - 2] : tags[tags.length - 1];
newTag.active = true;
} }
</script> </script>
@ -131,8 +134,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
{#each tags as tag, index (tag.id)} {#each tags as tag, index (tag.id)}
<Tag <Tag
bind:name={tag.name} bind:name={tag.name}
on:keydown={updateAutocomplete} bind:active={tag.active}
on:blur={destroyAutocomplete} on:keydown={() => {}}
on:blur={() => {}}
on:tagupdate={() => checkForDuplicateAt(index)} on:tagupdate={() => checkForDuplicateAt(index)}
on:tagadd={() => insertTagAt(index)} on:tagadd={() => insertTagAt(index)}
on:tagdelete={() => deleteTagAt(index)} on:tagdelete={() => deleteTagAt(index)}
@ -146,8 +150,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<TagInput <TagInput
bind:input={newInput} bind:input={newInput}
bind:name={newName} bind:name={newName}
on:keydown={updateAutocomplete} on:keydown={() => {}}
on:blur={destroyAutocomplete} on:blur={() => {}}
on:tagupdate={appendTag} on:tagupdate={appendTag}
on:tagadd={appendTag} on:tagadd={appendTag}
on:tagjoinprevious={joinWithLastTag} on:tagjoinprevious={joinWithLastTag}

View file

@ -17,11 +17,12 @@ export function normalizeTagname(tagname: string): string {
interface Tag { interface Tag {
name: string; name: string;
active: boolean;
id: string; id: string;
} }
export function attachId(name: string): Tag { export function attachId(name: string): Tag {
return { name, id: Math.random().toString(36).substring(2) }; return { name, active: false, id: Math.random().toString(36).substring(2) };
} }
export function getName(tag: Tag): string { export function getName(tag: Tag): string {