Implement tagjoin events

This commit is contained in:
Henrik Giesel 2021-06-25 14:50:37 +02:00
parent 2993a7b744
commit 22d5671594
3 changed files with 61 additions and 3 deletions

View file

@ -44,6 +44,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
on:focusout={() => (active = false)} on:focusout={() => (active = false)}
on:tagupdate={updateTag} on:tagupdate={updateTag}
on:tagadd on:tagadd
on:tagjoinprevious
on:tagjoinnext
on:mount={(event) => event.detail.input.focus()} on:mount={(event) => event.detail.input.focus()}
/> />
{:else} {:else}

View file

@ -45,6 +45,26 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
tags = tags; tags = tags;
} }
function joinWithPreviousTag(index: number): void {
if (index === 0) {
return;
}
const spliced = tags.splice(index - 1, 1)[0];
tags[index - 1].name = spliced.name + tags[index - 1].name;
tags = tags;
}
function joinWithNextTag(index: number): void {
if (index === tags.length - 1) {
return;
}
const spliced = tags.splice(index + 1, 1)[0];
tags[index].name = tags[index].name + spliced.name;
tags = tags;
}
function appendTag(): void { function appendTag(): void {
const names = tags.map(getName); const names = tags.map(getName);
if (!names.includes(newName) && newName.length > 0) { if (!names.includes(newName) && newName.length > 0) {
@ -54,6 +74,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
newName = ""; newName = "";
} }
function joinWithLastTag(): void {
const popped = tags.pop();
tags = tags;
if (popped) {
newName = popped.name + newName;
}
}
</script> </script>
<StickyBottom> <StickyBottom>
@ -66,6 +95,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
on:tagupdate={() => checkForDuplicateAt(index)} on:tagupdate={() => checkForDuplicateAt(index)}
on:tagadd={() => insertTagAt(index)} on:tagadd={() => insertTagAt(index)}
on:tagdelete={() => deleteTagAt(index)} on:tagdelete={() => deleteTagAt(index)}
on:tagjoinprevious={() => joinWithPreviousTag(index)}
on:tagjoinnext={() => joinWithNextTag(index)}
/> />
{/each} {/each}
@ -74,6 +105,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
bind:name={newName} bind:name={newName}
on:tagupdate={appendTag} on:tagupdate={appendTag}
on:tagadd={appendTag} on:tagadd={appendTag}
on:tagjoinprevious={joinWithLastTag}
/> />
</div> </div>
</StickyBottom> </StickyBottom>

View file

@ -27,13 +27,37 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
/* dropdown.hide(); */ /* dropdown.hide(); */
} }
function onBackspace(event: KeyboardEvent) {
if (input.selectionStart === 0 && input.selectionEnd === 0) {
dispatch("tagjoinprevious");
event.preventDefault();
} else if (name.endsWith("::")) {
name = name.slice(0, -2);
event.preventDefault();
}
}
function onDelete(event: KeyboardEvent) {
if (
input.selectionStart === input.value.length &&
input.selectionEnd === input.value.length
) {
dispatch("tagjoinnext");
event.preventDefault();
} else if (name.endsWith("::")) {
name = name.slice(0, -2);
event.preventDefault();
}
}
function onKeydown(event: KeyboardEvent): void { function onKeydown(event: KeyboardEvent): void {
if (event.code === "Space") { if (event.code === "Space") {
name += "::"; name += "::";
event.preventDefault(); event.preventDefault();
} else if (event.code === "Backspace" && name.endsWith("::")) { } else if (event.code === "Backspace") {
name = name.slice(0, -2); onBackspace(event);
event.preventDefault(); } else if (event.code === "Delete") {
onDelete(event);
} else if (event.code === "Enter") { } else if (event.code === "Enter") {
onAccept(); onAccept();
event.preventDefault(); event.preventDefault();