Add double-touch to edit for mobile support

This commit is contained in:
Webifi 2023-05-28 12:41:49 -05:00
parent ab0c0a3e6a
commit 365d3c5b9b
1 changed files with 18 additions and 4 deletions

View File

@ -34,11 +34,11 @@
noEdit = !!message.summarized noEdit = !!message.summarized
}) })
const edit = (uuid:string) => { const edit = () => {
if (noEdit) return if (noEdit) return
editing = true editing = true
setTimeout(() => { setTimeout(() => {
const el = document.getElementById(uuid) const el = document.getElementById('edit-' + message.uuid)
el && el.focus() el && el.focus()
}, 0) }, 0)
} }
@ -82,6 +82,17 @@
console.error("Can't find element with message ID", uuid) console.error("Can't find element with message ID", uuid)
} }
} }
// Double click for mobile support
let lastTap: number = 0
function editOnDoubleTap () {
const now: number = new Date().getTime()
const timesince: number = now - lastTap
if ((timesince < 400) && (timesince > 0)) {
edit()
}
lastTap = new Date().getTime()
}
</script> </script>
@ -135,12 +146,15 @@
</div> </div>
{#if editing && !noEdit} {#if editing && !noEdit}
<form class="message-edit" on:submit|preventDefault={update} on:keydown={keydown}> <form class="message-edit" on:submit|preventDefault={update} on:keydown={keydown}>
<div id={'edit-' + message.uuid} class="message-editor" bind:innerText={message.content} contenteditable on:input={update} on:blur={exit} /> <div id={'edit-' + message.uuid} class="message-editor" bind:innerText={message.content} contenteditable
on:input={update} on:blur={exit} />
</form> </form>
{:else} {:else}
<div <div
class="message-display" class="message-display"
on:dblclick|preventDefault={() => edit('edit-' + message.uuid)}
on:touchend={editOnDoubleTap}
on:dblclick|preventDefault={() => edit()}
> >
<SvelteMarkdown <SvelteMarkdown
source={message.content} source={message.content}