Add double-touch to edit for mobile support
This commit is contained in:
parent
ab0c0a3e6a
commit
365d3c5b9b
|
@ -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)
|
||||||
}
|
}
|
||||||
|
@ -83,6 +83,17 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 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>
|
||||||
|
|
||||||
{#key message.uuid}
|
{#key message.uuid}
|
||||||
|
@ -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}
|
||||||
|
|
Loading…
Reference in New Issue