Is there really not a color picker input component?

Ask us anything
4

Here is the start to my final solution that is a working fix

function rgbaToHex(rgba) {
  const colorArray = rgba.match(/[.\d]+/g);
  const r = Math.round(parseFloat(colorArray[0]));
  const g = Math.round(parseFloat(colorArray[1]));
  const b = Math.round(parseFloat(colorArray[2]));

  const hex = ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0');
  return '#' + hex;
}

var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'https://cdn.jsdelivr.net/npm/@simonwep/pickr@1.8.1/dist/themes/classic.min.css';
document.head.appendChild(link);

const style = document.createElement('style');
style.innerHTML = `
  .pickr .pcr-button:before {
    width: 60px;
    height: 60px;
    border-radius: 8px;
  }
  
  
  .pickr .pcr-button {
    width: 60px;
    height: 60px;
    border-radius: 8px !important
}

  .pickr .pcr-button:after {
    width: 60px;
    height: 60px;
    border-radius: 8px !important!
}
`;
document.head.appendChild(style);


// Load JavaScript
var script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/@simonwep/pickr@1.8.1';
document.body.appendChild(script);

script.onload = function() {
  console.log('script loaded');
  var checkExist = setInterval(function() {
    console.log('checking');
    if (document.getElementById('colorpickerholder')) {
    const e = document.getElementById('colorpickerholder')
    console.log(e)
      console.log('asdf')
      clearInterval(checkExist);

      var pickr = Pickr.create({
        el: '#colorpickerholder',
        theme: 'classic', // or 'monolith', or 'nano'
        default: 'rgba(9, 162, 255, 1)',

        swatches: [
          'rgba(244, 67, 54, 1)',
          'rgba(233, 30, 99, 0.95)',
          'rgba(156, 39, 176, 0.9)',
          'rgba(103, 58, 183, 0.85)',
          'rgba(63, 81, 181, 0.8)',
          'rgba(33, 150, 243, 0.75)',
          'rgba(3, 169, 244, 0.7)',
          'rgba(0, 188, 212, 0.7)',
          'rgba(0, 150, 136, 0.75)',
          'rgba(76, 175, 80, 0.8)',
          'rgba(139, 195, 74, 0.85)',
          'rgba(205, 220, 57, 0.9)',
          'rgba(255, 235, 59, 0.95)',
          'rgba(255, 193, 7, 1)'
        ],

        components: {
          preview: true,
          opacity: true,
          hue: true,

          interaction: {
            hex: true,
            rgba: true,
            hsla: true,
            hsva: true,
            cmyk: true,
            input: true,
            clear: true,
            save: true
          }
        }
      });
      console.log(e)
      e.addEventListener('click', function() {
        console.log('hello');
        pickr.show();
        console.log(pickr);
      });
      
const link2 = document.createElement('link');
link2.type = 'text/css';
link2.classList.add('dynamic-style'); // Add a class name
link2.innerHTML = `.pickr .pcr-button:before {
  content: '';
  border-radius: 8px;
}`;
document.head.appendChild(link2);


      pickr.on('save', (color, instance) => {
        console.log(color.toRGBA().toString());
        console.log(rgbaToHex(color.toRGBA().toString()))
        window.color = color.toRGBA().toString();
        wwLib.wwVariable.updateValue('35811b4c-868c-488b-bb3d-617b91d4b84f',rgbaToHex(color.toRGBA().toString()))
        console.log(window.color)
        pickr.hide();
      });


    }
  }, 100); // check every 100ms
};

allowing me to use the wwLib.wwVariable.updateValue(UID,VALUE) value setter BUT how do i do this ray?

where do i grab the workflow id’s?

NVM! I figured it out with the help of @dorilama and the thread he shared. i’ve detailed the simple steps here to avoid having to go too deep into threads in the future for other wewebershere to keep the info more vissible

2 Likes