I'm trying to get a colorpicker to work for a test project. I've made it so that end users are able to set the color picker value, but I'm unable to get the value of the color picker box from outside of the custom element. I've tried various ways to get the value but it doesn't print in Velo
This is the value I'm trying to capture:
https://i.stack.imgur.com/qWqUd.pngtax
This is the code for the custom element:
const createScript = () => {
const scriptElement = document.createElement('script');
scriptElement.src = "https://unpkg.com/vanilla-colorful?module";
scriptElement.defer = true;
scriptElement.async = true;
return scriptElement;
}
const createScript1 = () => {
const scriptElement1 = document.createElement('script');
scriptElement1.src = "https://cdn.skypack.dev/vanilla-colorful/rgba-color-picker.js";
scriptElement1.type = "module";
scriptElement1.defer = true;
scriptElement1.async = true;
return scriptElement1;
}
const createScript2 = () => {
const scriptElement2 = document.createElement('script');
scriptElement2.src = 'https://cdn.skypack.dev/vanilla-colorful';
scriptElement2.type = "module";
scriptElement2.defer = true;
scriptElement2.async = true;
return scriptElement2;
}
const createScript3 = () => {
const scriptElement3 = document.createElement('script');
scriptElement3.src = 'https://cdn.skypack.dev/vanilla-colorful/hex-input.js';
scriptElement3.type = "module";
scriptElement3.defer = true;
scriptElement3.async = true;
return scriptElement3;
}
class ColorfulImp extends HTMLElement {
constructor() {
const template = document.createElement('template');
template.innerHTML = `
<style>
body {
margin: 0;
padding: 50px;
font: normal 16px/1.4 "PT Mono", monospace;
}
hex-input::part(input) {
display: block;
box-sizing: border-box;
width: 90px;
margin: 20px 55px 0;
padding: 6px;
border: 1px solid #ddd;
border-radius: 4px;
background: #eee;
outline: none;
font: inherit;
text-transform: uppercase;
text-align: center;
}
hex-input::part(input):focus {
border-color: #4298ef;
}
</style>
<section>
<hex-color-picker id="colorPick"class="custom-pointers"></hex-color-picker>
<hex-input id="colorInput"></hex-input>
</section>
`
super(); // always call super() first in the constructor.var script = document.createElement('script');
script.innerHTML = `<script src="https://unpkg.com/vanilla-colorful?module"></script>;`;
document.body.appendChild(script);
//this.attachShadow({mode: 'open'});this.appendChild(createScript());
this.appendChild(createScript1());
this.appendChild(createScript2());
this.appendChild(createScript3());
this.appendChild(template.content.cloneNode(true));
this.num = this.querySelector('hex-color-picker');
this.num1 = this.querySelector('hex-input');
//this.querySelector('hex-input').color = "fcba03";//this.num = input.color;// create custom eventsconst colorFound = new CustomEvent('color-found', {
detail: {
name: 'color'
}
});
}
connectedCallback() {
const picker = this.querySelector('hex-color-picker');
const input = this.querySelector('hex-input');
//input.color = "fcba03";
picker.addEventListener('color-changed', (event) => {
input.color = event.detail.value;
//input.color = num
});
input.addEventListener('color-changed', (event) => {
picker.color = event.detail.value;
//picker.color = num1
});
input.addEventListener('color-found', (e) => console.log(e.detail.value));
input.dispatchEvent('color-changed');
}
get num() { return this.querySelector('hex-color-picker').color }
set num(val) {this.querySelector('hex-color-picker').color = val }
get num1() { return this.querySelector('hex-input').color; }
set num1(val) { this.querySelector('hex-input').color = val; }
static get observedAttributes() {
return ['num','num1'];
}
attributeChangedCallback(attr, oldVal, newVal) {
if (oldVal === newVal) return; // nothing to do, no change
switch (attr) {
case 'num': this.num = newVal ?? 0; break;
case 'num1': this.num = newVal ?? 1; break;
}
this.getElementById("colorPick").color = num
this.getElementById("colorInput").color = num1
}
}
window.customElements.define('color-ful-03', ColorfulImp);
and this is the code I put on the plain page in Velo:
$w('#colorPicker').on('color-changed', (event) => {
console.log('The event triggered successfully.')
});
Any help is appreciated, this issue has me stumped