Wix Forum Logo
  • Community Forum

  • Support

  • Members

  • Groups List

  • Blog

  • More

    Use tab to navigate through the menu items.
    To see this working, head to your live site.
    • Categories
    • All Posts
    • My Posts
    cajavij348
    Jul 22

    How do I extract the input from a color picker custom element using Wix Velo?

    in Forum Discussions

    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

    0 comments
    0
    Comments

    Share Your ThoughtsSign up to leave a comment.

    0 comments
    Similar Posts
    • how i can use adsence with wix?
    • Can't see "add user input elements" in editor.wix.com. I am new to wix. Am I missing something?
    • How do I add products that are hidden from the main store but available to customers with the password?

    WIX FORUM

    Create an online community right on your site with Wix Forum. Your visitors can become members, join conversations, follow posts, leave comments and more. Plus, you can choose from beautiful layouts and customize to get the look you love. And it’s completely free! 

     

    © 2006 - 2020 Wix.com, Inc 

    COMPANY

    About Wix

    Terms of Use

    Privacy Policy

    SUPPORT

    Help Center

    Contact Us

    ​

    • Black Facebook Icon
    • Black Twitter Icon
    • Black YouTube Icon
    • Black Pinterest Icon
    • Black Instagram Icon
    • Black LinkedIn Icon