Blame view

src/components/color-picker/hsaMixin.js 2.49 KB
f2bcd4ad   Graham Fairweather   Color keyboard co...
1
2
3
  import Emitter from '../../mixins/emitter';
  import handleEscapeMixin from './handleEscapeMixin';
  import {getTouches} from './utils';
4cccdf1f   梁灏   fixed SSR
4
  import { on, off } from '../../utils/dom';
f2bcd4ad   Graham Fairweather   Color keyboard co...
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
  
  export default {
      mixins: [Emitter, handleEscapeMixin],
  
      props: {
          focused: {
              type: Boolean,
              default: false,
          },
          value: {
              type: Object,
              default: undefined,
          },
      },
  
      beforeDestroy() {
          this.unbindEventListeners();
      },
  
      created() {
          if (this.focused) {
              setTimeout(() => this.$el.focus(), 1);
          }
      },
  
      methods: {
          handleLeft(e) {
              this.handleSlide(e, this.left, 'left');
          },
          handleRight(e) {
              this.handleSlide(e, this.right, 'right');
          },
          handleUp(e) {
              this.handleSlide(e, this.up, 'up');
          },
          handleDown(e) {
              this.handleSlide(e, this.down, 'down');
          },
          handleMouseDown(e) {
              this.dispatch('ColorPicker', 'on-dragging', true);
              this.handleChange(e, true);
4cccdf1f   梁灏   fixed SSR
46
47
48
49
              // window.addEventListener('mousemove', this.handleChange, false);
              // window.addEventListener('mouseup', this.handleMouseUp, false);
              on(window, 'mousemove', this.handleChange);
              on(window, 'mouseup', this.handleMouseUp);
f2bcd4ad   Graham Fairweather   Color keyboard co...
50
51
52
53
54
          },
          handleMouseUp() {
              this.unbindEventListeners();
          },
          unbindEventListeners() {
4cccdf1f   梁灏   fixed SSR
55
56
57
58
              // window.removeEventListener('mousemove', this.handleChange);
              // window.removeEventListener('mouseup', this.handleMouseUp);
              off(window, 'mousemove', this.handleChange);
              off(window, 'mouseup', this.handleMouseUp);
f2bcd4ad   Graham Fairweather   Color keyboard co...
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
              // This timeout is required so that the click handler for click-outside
              // has the chance to run before the mouseup removes the dragging flag.
              setTimeout(() => this.dispatch('ColorPicker', 'on-dragging', false), 1);
          },
          getLeft(e) {
              const {container} = this.$refs;
              const xOffset = container.getBoundingClientRect().left + window.pageXOffset;
              const pageX = e.pageX || getTouches(e, 'PageX');
  
              return pageX - xOffset;
          },
          getTop(e) {
              const {container} = this.$refs;
              const yOffset = container.getBoundingClientRect().top + window.pageYOffset;
              const pageY = e.pageY || getTouches(e, 'PageY');
  
              return pageY - yOffset;
          },
      },
  };