@aqua-ds/web-components
Version:
AquaDS Web Components
150 lines (146 loc) • 6.89 kB
JavaScript
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { e as emitEvent } from './eventEmitter.js';
const aqHueCss = ".vc-hue{position:absolute;top:0px;right:0px;bottom:0px;left:0px;border-radius:2px}.vc-hue--horizontal{background:-webkit-gradient(linear, left top, right top, from(#f00), color-stop(17%, #ff0), color-stop(33%, #0f0), color-stop(50%, #0ff), color-stop(67%, #00f), color-stop(83%, #f0f), to(#f00));background:linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)}.vc-hue--vertical{background:-webkit-gradient(linear, left bottom, left top, from(#f00), color-stop(17%, #ff0), color-stop(33%, #0f0), color-stop(50%, #0ff), color-stop(67%, #00f), color-stop(83%, #f0f), to(#f00));background:linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)}.vc-hue-container{cursor:pointer;margin:0 2px;position:relative;height:100%}.vc-hue-pointer{z-index:2;position:absolute}.vc-hue-picker{cursor:pointer;height:12px;-webkit-box-shadow:0 0 2px rgba(0, 0, 0, 0.6);box-shadow:0 0 2px rgba(0, 0, 0, 0.6);background:#fff;width:2px;margin-top:0px;border-radius:0px;-webkit-transform:translateX(-1px);transform:translateX(-1px)}";
const AqHue = /*@__PURE__*/ proxyCustomElement(class AqHue extends HTMLElement {
get colors() {
const { h } = this.value.hsl;
if (h !== 0 && h - this.oldHue > 0)
this.pullDirection = 'right';
if (h !== 0 && h - this.oldHue < 0)
this.pullDirection = 'left';
this.oldHue = h;
return this.value;
}
directionClass() {
return {
'vc-hue': true,
'vc-hue--horizontal': this.direction === 'horizontal',
'vc-hue--vertical': this.direction === 'vertical',
};
}
constructor(registerHost) {
super();
if (registerHost !== false) {
this.__registerHost();
}
this.value = { hsv: { h: 0, s: 0, v: 0, a: 0 }, hsl: { h: 0, s: 0, l: 0, a: 0 }, rgba: { r: 0, g: 0, b: 0, a: 0 }, hex: '', hex8: '', a: 0 };
this.direction = 'horizontal';
this.pullDirection = 'right';
this.oldHue = 0;
this.boundHandleChange = this.handleChange.bind(this);
this.boundHandleMouseUp = this.handleMouseUp.bind(this);
}
handleMouseDown(event) {
this.handleChange(event, true);
document.addEventListener('mousemove', this.boundHandleChange);
document.addEventListener('mouseup', this.boundHandleMouseUp);
}
handleMouseUp() {
this.unbindEventListeners();
}
unbindEventListeners() {
document.removeEventListener('mousemove', this.boundHandleChange);
document.removeEventListener('mouseup', this.boundHandleMouseUp);
}
handleChange(e, skip = false) {
if (!skip)
e.preventDefault();
const container = this.containerEl;
if (!container) {
return;
}
const containerWidth = container.clientWidth;
const containerHeight = container.clientHeight;
const xOffset = container.getBoundingClientRect().left + window.scrollX;
const yOffset = container.getBoundingClientRect().top + window.scrollY;
const pageX = (e instanceof MouseEvent) ? e.pageX : e.touches?.[0]?.pageX || 0;
const pageY = (e instanceof MouseEvent) ? e.pageY : e.touches?.[0]?.pageY || 0;
const left = pageX - xOffset;
const top = pageY - yOffset;
let h;
let percent;
if (this.direction === 'vertical') {
if (top < 0) {
h = 360;
}
else if (top > containerHeight) {
h = 0;
}
else {
percent = -((top * 100) / containerHeight) + 100;
h = (360 * percent) / 100;
}
if (this.colors.hsl.h !== h) {
emitEvent('change', this.hostElement, { value: {
h,
s: this.colors.hsl.s,
l: this.colors.hsl.l,
a: this.colors.hsl.a,
source: 'hsl',
} }, e);
}
}
else {
if (left < 0) {
h = 0;
}
else if (left > containerWidth) {
h = 360;
}
else {
percent = (left * 100) / containerWidth;
h = (360 * percent) / 100;
}
if (this.colors.hsl.h !== h) {
emitEvent('change', this.hostElement, { value: {
h,
s: this.colors.hsl.s,
l: this.colors.hsl.l,
a: this.colors.hsl.a,
source: 'hsl',
} }, e);
}
}
}
get pointerTop() {
if (this.direction === 'vertical') {
if (this.colors.hsl.h === 0 && this.pullDirection === 'right')
return 0;
return `${-((this.colors.hsl.h * 100) / 360) + 100}%`;
}
return 0;
}
get pointerLeft() {
if (this.direction === 'vertical') {
return 0;
}
if (this.colors.hsl.h === 0 && this.pullDirection === 'right')
return '100%';
return `${(this.colors.hsl.h * 100) / 360}%`;
}
render() {
const directionClass = this.directionClass();
return (h(Host, { key: '1d22b098b03cb34f4841d0066e7ccf57f67f74c7', class: directionClass }, h("div", { key: 'e83fa3f487255603ee26a6e3c23b0e4dd85d9218', class: "vc-hue-container", role: "slider", "aria-valuemin": "0", "aria-valuemax": "360", "aria-valuenow": this.value.hsl.h, ref: (el) => this.containerEl = el, onMouseDown: (e) => this.handleMouseDown(e), onTouchMove: (e) => this.handleChange(e), onTouchStart: (e) => this.handleChange(e) }, h("div", { key: 'dcea45e6fdc6ef5f68ba0d55ab1ad842b8befe4a', class: "vc-hue-pointer", style: { top: `${this.pointerTop}`, left: `${this.pointerLeft}` }, role: "presentation" }, h("div", { key: '02b91d1c104f70419b7e44fce2faadf200f123ec', class: "vc-hue-picker" })))));
}
get hostElement() { return this; }
static get style() { return aqHueCss; }
}, [256, "aq-hue", {
"value": [16],
"direction": [1],
"pullDirection": [32],
"oldHue": [32]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-hue"];
components.forEach(tagName => { switch (tagName) {
case "aq-hue":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqHue);
}
break;
} });
}
export { AqHue as A, defineCustomElement as d };