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