1
2
3
4
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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
| import Emitter from '../../mixins/emitter';
| import handleEscapeMixin from './handleEscapeMixin';
| import {getTouches} from './utils';
| import { on, off } from '../../utils/dom';
|
| 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);
| // window.addEventListener('mousemove', this.handleChange, false);
| // window.addEventListener('mouseup', this.handleMouseUp, false);
| on(window, 'mousemove', this.handleChange);
| on(window, 'mouseup', this.handleMouseUp);
| },
| handleMouseUp() {
| this.unbindEventListeners();
| },
| unbindEventListeners() {
| // window.removeEventListener('mousemove', this.handleChange);
| // window.removeEventListener('mouseup', this.handleMouseUp);
| off(window, 'mousemove', this.handleChange);
| off(window, 'mouseup', this.handleMouseUp);
| // 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;
| },
| },
| };
|
|
