ali322
5/12/2018 - 8:11 AM

finger-plugin.js

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)
  }
}