88 lines
1.9 KiB
Svelte
88 lines
1.9 KiB
Svelte
<script>
|
|
import { activeField } from './field_sync.svelte.js';
|
|
import { t } from '../translations.svelte.js';
|
|
|
|
let {
|
|
editable = false,
|
|
onclick = evt => { startEdit() },
|
|
onSet = newVal => {return true;},
|
|
type = 'div',
|
|
value = $bindable(null)
|
|
} = $props();
|
|
|
|
let editing = $state(false);
|
|
let editValue = value;
|
|
let start = 0;
|
|
|
|
async function applyEdit(){
|
|
let success = await onSet(editValue);
|
|
if (success) value = editValue;
|
|
editing=false;
|
|
}
|
|
|
|
function resetEdit(){
|
|
editing = false;
|
|
editValue = value;
|
|
}
|
|
|
|
function startEdit(){
|
|
activeField.update((n) => n+1);
|
|
editing = editable;
|
|
}
|
|
|
|
function typed(ev){
|
|
if (ev.keyCode == 13) applyEdit();
|
|
if (ev.keyCode == 27) resetEdit();
|
|
}
|
|
|
|
function measured(evt,duration){
|
|
if (duration < 500){
|
|
onclick(evt);
|
|
} else {
|
|
startEdit();
|
|
}
|
|
}
|
|
|
|
function onmousedown(evt){
|
|
evt.preventDefault();
|
|
start = evt.timeStamp;
|
|
}
|
|
|
|
function onmouseup(evt){
|
|
evt.preventDefault();
|
|
measured(evt, evt.timeStamp - start);
|
|
}
|
|
|
|
function ontouchstart(evt){
|
|
evt.preventDefault();
|
|
start = evt.timeStamp;
|
|
}
|
|
|
|
function ontouchend(evt){
|
|
evt.preventDefault();
|
|
measured(evt, evt.timeStamp - start);
|
|
}
|
|
|
|
activeField.subscribe((val) => resetEdit());
|
|
</script>
|
|
|
|
<style>
|
|
input{
|
|
min-width: 40px;
|
|
min-height: 20px;
|
|
}
|
|
div{
|
|
min-width: 40px;
|
|
min-height: 20px;
|
|
}
|
|
.editable:hover{
|
|
border: 1px dotted;
|
|
}
|
|
</style>
|
|
|
|
{#if editable && editing}
|
|
<input bind:value={editValue} onkeyup={typed} autofocus />
|
|
{:else}
|
|
<svelte:element this={type} href="#" {onclick} {onmousedown} {onmouseup} {ontouchstart} {ontouchend} class={{editable}} title={t('long_click_to_edit')} >{value}</svelte:element>
|
|
{/if}
|