avoids duplicate event handlers from directive
parent
b2dc169a28
commit
9856ad8ed1
@ -0,0 +1,40 @@
|
||||
import Vue from 'vue'
|
||||
import { randomId } from './lib'
|
||||
|
||||
const eventHandlers: { [key: string]: () => void } = {}
|
||||
|
||||
Vue.directive('editable', (el, { value, arg }, vnode) => {
|
||||
const keypressHandler = (event: KeyboardEvent) => {
|
||||
console.log('keypress', event.code)
|
||||
// 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)
|
||||
}
|
||||
})
|
Loading…
Reference in New Issue