You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import Vue from 'vue'
|
|
import { randomId } from './lib'
|
|
|
|
const eventHandlers: { [key: string]: () => void } = {}
|
|
|
|
Vue.directive('editable', (el, { value, arg }, vnode) => {
|
|
const keypressHandler = (event: KeyboardEvent) => {
|
|
// allow line break via Shift + Enter
|
|
if (event.keyCode === 13 && !event.shiftKey) {
|
|
event.preventDefault()
|
|
console.log('edit event on enter', el.innerText)
|
|
if (!vnode.context) return
|
|
vnode.context.$emit('edit', { param: arg, value: el.innerText })
|
|
}
|
|
}
|
|
|
|
const blurHandler = () => {
|
|
console.log('edit event on blur', el.innerText)
|
|
if (!vnode.context) return
|
|
vnode.context.$emit('edit', { param: arg, value: el.innerText })
|
|
}
|
|
|
|
// remove old event listeners
|
|
if (el.dataset.__evtid) {
|
|
eventHandlers[el.dataset.__evtid]()
|
|
}
|
|
|
|
el.contentEditable = value ? 'true' : 'false'
|
|
el.addEventListener('keypress', keypressHandler)
|
|
el.addEventListener('blur', blurHandler)
|
|
|
|
// TODO: is there a better way to avoid multiple event handlers?
|
|
const id = randomId()
|
|
el.dataset.__evtid = id
|
|
eventHandlers[id] = () => {
|
|
el.removeEventListener('keypress', keypressHandler)
|
|
el.removeEventListener('blur', blurHandler)
|
|
}
|
|
})
|