@aqua-ds/web-components
Version:
AquaDS Web Components
96 lines (92 loc) • 4.79 kB
JavaScript
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
import { e as emitEvent } from './eventEmitter.js';
import { d as defineCustomElement$1 } from './aq-checkboard2.js';
const aqAlphaCss = ".vc-alpha{position:absolute;top:0px;right:0px;bottom:0px;left:0px}.vc-alpha-checkboard-wrap{position:absolute;top:0px;right:0px;bottom:0px;left:0px;overflow:hidden}.vc-alpha-gradient{position:absolute;top:0px;right:0px;bottom:0px;left:0px}.vc-alpha-container{cursor:pointer;position:relative;z-index:2;height:100%;margin:0 3px}.vc-alpha-pointer{z-index:2;position:absolute}.vc-alpha-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 AqAlpha = /*@__PURE__*/ proxyCustomElement(class AqAlpha extends HTMLElement {
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.pointerAlpha = '';
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 xOffset = container.getBoundingClientRect().left + window.scrollX;
const pageX = (e instanceof MouseEvent) ? e.pageX : e.touches?.[0]?.pageX || 0;
const left = pageX - xOffset;
let a;
if (left < 0) {
a = 0;
}
else if (left > containerWidth) {
a = 1;
}
else {
a = Math.round((left * 100) / containerWidth) / 100;
}
if (this.value.a !== a) {
emitEvent('change', this.hostElement, { value: {
h: this.value.hsl.h,
s: this.value.hsl.s,
l: this.value.hsl.l,
a,
source: 'rgba',
} }, e);
}
this.pointerAlpha = a * 100 + '%';
}
get gradientColor() {
const { rgba } = this.value;
const rgbStr = [rgba.r, rgba.g, rgba.b].join(',');
return `linear-gradient(to right, rgba(${rgbStr}, 0) 0%, rgba(${rgbStr}, 1) 100%)`;
}
render() {
return (h("div", { key: '76b67602b4af49ac4865c5760bf215b47a7565a3', class: "vc-alpha" }, h("div", { key: 'ab7be7d52b8e64741947affc23833af732f68d82', class: "vc-alpha-checkboard-wrap" }, h("aq-checkboard", { key: '4746cc7b2e8b9158246b41f96f1072627bba4e71' })), h("div", { key: '64ca38fc7877af8411acfce57e9aaedf00573c50', class: "vc-alpha-gradient", style: { background: this.gradientColor } }), h("div", { key: 'f6ec5f8d234c44df9511b9adb18afe603ba095c7', class: "vc-alpha-container", ref: (el) => this.containerEl = el, onMouseDown: (e) => this.handleMouseDown(e), onTouchMove: (e) => this.handleChange(e), onTouchStart: (e) => this.handleChange(e) }, h("div", { key: 'ae6ec87a0da72d375b66dd7f781138d257f5012c', class: "vc-alpha-pointer", role: "presentation", style: { left: this.pointerAlpha } }, h("div", { key: '9d2813d656d6ac00edbca5968031f330b1bb30d6', class: "vc-alpha-picker" })))));
}
get hostElement() { return this; }
static get style() { return aqAlphaCss; }
}, [256, "aq-alpha", {
"value": [16],
"pointerAlpha": [32]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["aq-alpha", "aq-checkboard"];
components.forEach(tagName => { switch (tagName) {
case "aq-alpha":
if (!customElements.get(tagName)) {
customElements.define(tagName, AqAlpha);
}
break;
case "aq-checkboard":
if (!customElements.get(tagName)) {
defineCustomElement$1();
}
break;
} });
}
export { AqAlpha as A, defineCustomElement as d };