78 lines
2.5 KiB
JavaScript
78 lines
2.5 KiB
JavaScript
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;
|
|
},
|
|
},
|
|
};
|