98 lines
No EOL
3.7 KiB
Vue
98 lines
No EOL
3.7 KiB
Vue
<template>
|
|
<div class="ivu-color-picker-saturation-wrapper">
|
|
<div
|
|
class="ivu-color-picker-saturation"
|
|
:style="{background: bgColor}"
|
|
ref="container"
|
|
@mousedown="handleMouseDown">
|
|
<div class="ivu-color-picker-saturation--white"></div>
|
|
<div class="ivu-color-picker-saturation--black"></div>
|
|
<div class="ivu-color-picker-saturation-pointer" :style="{top: pointerTop, left: pointerLeft}">
|
|
<div class="ivu-color-picker-saturation-circle"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import throttle from 'lodash.throttle';
|
|
|
|
export default {
|
|
name: 'Saturation',
|
|
props: {
|
|
value: Object
|
|
},
|
|
data () {
|
|
return {};
|
|
},
|
|
computed: {
|
|
colors () {
|
|
return this.value;
|
|
},
|
|
bgColor () {
|
|
return `hsl(${this.colors.hsv.h}, 100%, 50%)`;
|
|
},
|
|
pointerTop () {
|
|
return (-(this.colors.hsv.v * 100) + 1) + 100 + '%';
|
|
},
|
|
pointerLeft () {
|
|
return this.colors.hsv.s * 100 + '%';
|
|
}
|
|
},
|
|
methods: {
|
|
throttle: throttle((fn, data) => {fn(data);}, 20,
|
|
{
|
|
'leading': true,
|
|
'trailing': false
|
|
}),
|
|
handleChange (e, skip) {
|
|
!skip && e.preventDefault();
|
|
const container = this.$refs.container;
|
|
const containerWidth = container.clientWidth;
|
|
const containerHeight = container.clientHeight;
|
|
const xOffset = container.getBoundingClientRect().left + window.pageXOffset;
|
|
const yOffset = container.getBoundingClientRect().top + window.pageYOffset;
|
|
const pageX = e.pageX || (e.touches ? e.touches[0].pageX : 0);
|
|
const pageY = e.pageY || (e.touches ? e.touches[0].pageY : 0);
|
|
let left = pageX - xOffset;
|
|
let top = pageY - yOffset;
|
|
if (left < 0) {
|
|
left = 0;
|
|
} else if (left > containerWidth) {
|
|
left = containerWidth;
|
|
} else if (top < 0) {
|
|
top = 0;
|
|
} else if (top > containerHeight) {
|
|
top = containerHeight;
|
|
}
|
|
const saturation = left / containerWidth;
|
|
let bright = -(top / containerHeight) + 1;
|
|
bright = bright > 0 ? bright : 0;
|
|
bright = bright > 1 ? 1 : bright;
|
|
this.throttle(this.onChange, {
|
|
h: this.colors.hsv.h,
|
|
s: saturation,
|
|
v: bright,
|
|
a: this.colors.hsv.a,
|
|
source: 'hsva'
|
|
});
|
|
},
|
|
onChange (param) {
|
|
this.$emit('change', param);
|
|
},
|
|
handleMouseDown () {
|
|
// this.handleChange(e, true)
|
|
window.addEventListener('mousemove', this.handleChange);
|
|
window.addEventListener('mouseup', this.handleChange);
|
|
window.addEventListener('mouseup', this.handleMouseUp);
|
|
},
|
|
handleMouseUp () {
|
|
this.unbindEventListeners();
|
|
},
|
|
unbindEventListeners () {
|
|
window.removeEventListener('mousemove', this.handleChange);
|
|
window.removeEventListener('mouseup', this.handleChange);
|
|
window.removeEventListener('mouseup', this.handleMouseUp);
|
|
}
|
|
}
|
|
};
|
|
</script> |