Text input inside picker combined with multiple instances

[asacarter]

Do you have a demo of the text input inside the color picker combined with multiple instances?

https://taufik-nurrohman.js.org/color-picker/color-picker.picker.html
https://taufik-nurrohman.js.org/color-picker/color-picker.picker-view-code.html

I've tried to get it working but changing the value in the text input doesn't get the correct instance of the picker.

I created a demo here but you might need to run it in debug mode to get it to work.

https://codepen.io/asa-carter/pen/YzWLZOb

[taufik-nurrohman]

Let me update the demo script so that you can have reusable function to be attached to every instance next time. Something like this:

function addColorInputTo(picker) { /* ... */ }

let picker1 = new CP(/* ... */);

addColorInputTo(picker1);
addColorInputTo(picker2);
addColorInputTo(picker3);

[asacarter]

Could you create a demo that would work with an unlimited number of instances?

I did try creating an array of instances but couldn't get that working either.

It did work in V1 but not V2.

[taufik-nurrohman]

A reusable function insertColorCode() is now available in the demo page. You can use it in multiple instances like this:

document.querySelectorAll('input').forEach(source => {
    let picker = new CP(source);
    insertColorCode(picker);
});

[taufik-nurrohman]

In your case:

document.querySelectorAll('.js-colorpicker').forEach(source => {
    let picker = new CP(source);
    insertColorCode(picker);
});

[asacarter]

Thanks for the update :)

Your demo is working fine but for some reason setting the colour state is not working in my own code.

I'm not sure if it's because I'm using it with Vue and it's doing something weird.

I'll set up a demo and try and figure it out.

[asacarter]

I think I've figured out the issue...

When using data-color, It doesn't update the value of the current colour.

If you select a colour, then close the picker, then reopen it, the original colour is the default one.

Should it do this internally or do I need to code that in the custom function?

It doesn't seem to update in the change method though either.

https://codepen.io/asa-carter/pen/zYBjXKz

Thanks :)

[taufik-nurrohman]

When using CP.HEX(), be sure to check the returned value before assigning it to a property. Also, this.color is a function, not a color string.

// Color Pickers
function insertColorCode(picker) {
  let input = document.createElement("input");
  input.pattern = "^#([a-fA-F\\d]{3}){1,2}$";
  input.type = "text";
  picker.self.appendChild(input);
  picker.on("change", function (r, g, b) {
    this.source.value = this.color(r, g, b, 1);
    this.source.style.backgroundColor = this.color(r, g, b, 1);
    input.value = this.color(r, g, b, 1);
    this.source.setAttribute('data-color', this.color(r, g, b, 1)); // this is string
  });
  function onChange() {
    if (this.value.length) {
      var color = CP.HEX(this.value); // return array
      picker.set.apply(picker, color);
      picker.source.value = this.value;
      picker.source.setAttribute('data-color', this.value);
    }
  }
  ["cut", "input", "keyup", "paste"].forEach((e) => {
    input.addEventListener(e, onChange);
  });
}

document.querySelectorAll(".js-colorpicker").forEach((source) => {
  let picker = new CP(source);
  insertColorCode(picker);
});

[asacarter]

Perfect thanks, that has resolved it.

[taufik-nurrohman]

I will close this. You can make another question in a new issue 👍