finger-plugin.js
import Finger from './finger'
export default {
install(Vue) {
const EVENTMAP = {
'touch-start': 'touchStart',
'touch-move': 'touchMove',
'touch-end': 'touchEnd',
'touch-cancel': 'touchCancel',
'multipoint-start': 'multipointStart',
'multipoint-end': 'multipointEnd',
tap: 'tap',
'double-tap': 'doubleTap',
'long-tap': 'longTap',
'single-tap': 'singleTap',
rotate: 'rotate',
pinch: 'pinch',
'press-move': 'pressMove',
swipe: 'swipe'
}
const caches = []
// get the index for elem in CACHE
const getElemCacheIndex = function(elem) {
for (var i = 0, len = caches.length; i < len; i++) {
if (caches[i].elem === elem) {
return i
}
}
return null
}
// do on or off handler
const doOnOrOff = function(cacheObj, options) {
const eventName = options.eventName
const elem = options.elem
const func = options.func
const oldFunc = options.oldFunc
if (cacheObj && cacheObj.finger) {
if (cacheObj.finger.off && oldFunc) {
cacheObj.finger.off(eventName, oldFunc)
}
if (cacheObj.finger.on && func) {
cacheObj.finger.on(eventName, func)
}
} else {
options = {}
options[eventName] = func
caches.push({
elem: elem,
finger: new Finger(elem, options)
})
}
}
// for bind the event
const doBindEvent = function(elem, binding) {
const func = binding.value
const oldFunc = binding.oldValue
let eventName = binding.arg
eventName = EVENTMAP[eventName]
const cacheObj = caches[getElemCacheIndex(elem)]
doOnOrOff(cacheObj, {
elem: elem,
func: func,
oldFunc: oldFunc,
eventName: eventName
})
}
// for bind the event
const doUnbindEvent = function(elem) {
const index = getElemCacheIndex(elem)
if (!isNaN(index)) {
const delArr = caches.splice(index, 1)
if (delArr.length && delArr[0] && delArr[0].finger.destroy) {
delArr[0].finger.destroy()
}
}
}
const directiveOpts = {
bind: doBindEvent,
update: doBindEvent,
unbind: doUnbindEvent
}
Vue.directive('finger', directiveOpts)
}
}