ElementTouchDetect.vue 3.13 KB
Newer Older
1
<script>
2
// Third party
3 4
import Hammer from 'hammerjs'

5
// Utils
6 7
import getSelection from '../js/get-selection.js'
import getData from '../js/get-data.js'
8

9 10
export default {
  props: {
11
    element: {
12
      type: [String, Node],
13 14
    },
    elementParent: {
15
      type: Node,
16
    },
17 18 19
    options: {
      type: [Object, Function],
    },
20
    onConstruct: { type: Function },
21
    parentData: { type: Object },
22 23
  },
  methods: {
24
    getSelection: getSelection,
25
    getData: getData,
26

27
    selectElement () {
28 29 30 31
      return this.getSelection({
        fallback: this.$el,
        selection: this.element,
        ancestor: this.elementParent,
32 33 34 35
        isMultiple: false
      })
    },

36
    construct () {
37 38 39 40
      const options = {
              selectIsAllowed: true,
              ...this.getData(this.options, this.api),
            },
41 42 43 44 45
            eventCallbacks = [options.onPan, options.onPinch, options.onPress, options.onRotate, options.onSwipe, options.onTap]

      eventCallbacks.forEach(callback => delete options[callback])

      const instance = new this.hammer(this.selectedElement, options)
46 47 48 49

      eventCallbacks.forEach((callback, index) => {
        const event = ['pan', 'pinch', 'press', 'rotate', 'swipe', 'tap'][index]
        if (callback !== undefined) {
50
          instance.on(event, (evt) => callback(evt))
51 52 53
        }
      })

54 55 56
      // TODO: support turning this back on after turning off
      if (options.selectIsAllowed) delete this.hammer.defaults.cssProps.userSelect

57
      if (this.onConstruct !== undefined) this.onConstruct(instance, this.api)
58

59
      return instance
60 61 62 63 64 65 66 67 68 69 70 71
    },

    // Third party
    on () {
      this.instance.on(...arguments)
    },
    off () {
      this.instance.off(...arguments)
    },
    touchEmit () {
      this.instance.emit(...arguments)
    },
72 73
  },
  created () {
74
    this.hammer = Hammer
75

76 77
    this.api = {
      emit: (event, payload) => this.$emit(event, payload),
78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94
      constants: {
        direction: {
          none:	1,
          left:	2,
          right:	4,
          up:	8,
          down:	16,
          horizontal:	6,
          vertical:	24,
          all: 30,
        },
        input: {
          start: 1,
          move: 2,
          end: 4,
          cancel: 8,
        }
95 96 97 98
      }
    }
  },
  mounted () {
99
    this.api.el = this.$el
100
    this.selectedElement = this.selectElement()
101
    this.instance = this.construct()
102 103
  },
  beforeDestroy () {
104
    this.instance.destroy()
105
  },
106 107 108 109 110
  watch: {
    element () {
      this.selectedElement = this.selectElement()
      this.instance = this.construct()
    },
111
    ancestor () {
112 113 114 115 116 117 118
      this.selectedElement = this.selectElement()
      this.instance = this.construct()
    },
    options () {
      this.instance = this.construct()
    }
  },
119 120 121
  render () {
    if (this.$scopedSlots.default !== undefined) {
      return this.$scopedSlots.default({
122 123 124 125 126 127
        on: this.on,
        off: this.off,
        touchEmit: this.touchEmit,

        el: () => this.$el,
        emit: (event, payload) => this.$emit(event, payload),
128
        parentData: this.parentData
129 130 131 132 133 134 135 136 137
      })
    } else if (this.$slots.default !== undefined) {
      return this.$slots.default[0]
    } else {
      return null
    }
  },
}
</script>