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

I'm trying to use the color picker inside a Bootstrap popover, but when I do this, the color picker doesn't use the correct cursor position when selecting a color. It behaves as if the color picker and the cursor were in the upper left of the screen. You can see this behavior by clicking on any of the color swatches on this page. Is there any way I can get the color picker to use the correct cursor position?

Hi

How can I initialize the color picker instance with the one set in target element https://jsfiddle.net/Greggg/916wwx1h/

Any help would be appreciated

Thanks for a great tool! It's the very best approach - to keep it simple to use and to extend.

My only inconvenience is that it uses rectangle of saturation * brightness, plus a slider of hue.

That approach is good to fine-tune colors of a given hue, but it's not the best way to quickly select different colors.

Maybe that's OK for heavy duty things like Photoshop, but for simple web applications it seems to me it would be more convenient to have a large rectangle of hue * saturation, and a stripe slider of brightness.

Then it's like choosing a color on a large palette, and then maybe adjusting brightness.

I tried both approaches in different color pickers and I'm pretty sure.

My JS skills are rudimentary, so I'd like to ask you, respected professionals: is it possible to make a control "hue on X, saturation on Y" + brightness?

Thank you again ;).

PS. I often want to choose several colors of the same brightness, rather than of the same hue; so fro me it is brightness that should go into a separate slider.

Hello,

I tried updating your library from 1.4.0 to 1.4.1 and noticed the picker is no longer passed into events which causes issues if multiple pickers are used in the same page. We use it like this (sorry for CoffeeScript):

class Abc
  constructor: ->
    for input in @inputs
      $input = $(input)
      picker = new CP(input)
      $input.data('picker', picker)
      picker.on('change', this._handlePickerChange)

  _handlePickerChange: (color, picker) => # <-- picker is undefined in 1.4.1
    color  = "##{color}"
    $input = $(picker.source)
    # ... do other stuff

Is this fixable or should we do things differently?

Thank you, Ollie

Anyone know why picker.on("change", function(color) {...}); fires on page load?

Ideally I would like to only have it fire if the color picker is interacted with but for some reason it fires even if I never use the color picker.

Basic example:

<script>

    var source = document.querySelector('input'),
        picker = new CP(source);

    // prevent showing native color picker panel
    source.onclick = function(e) {
        e.preventDefault();
    };

    picker.on("change", function(color) {
        alert('fire');
        this.source.value = '#' + color;
    });

</script>

Because of my issues with visibility not updating, I'm having to manually manage my own visibility flag using the enter and exit hooks. This works pretty good except if I open the color picker manually with another button using:

CP.__instance__.someColorPicker.enter()

The enter hook doesn't get fired. This would be expected behavior no? As then I could put all my flag management code in one place - the enter and exit hooks versus having to add code wherever I call enter().

Strangely, calling the above with exit() does indeed fire the exit hook.

This can be reproduced easily by putting a console.log in the picker.on('enter') {}, create a new color picker instance, then in Chrome's console call CP.__instance__.someColorPicker.enter(). It won't fire the enter hook. However, it will fire if you manually click the color picker to enter it.

Is there any way to disable the way the color-picker "auto fits" to the visible screen area?

This is happening in my app and the color picker gets moved to an area that covers up my UI and leaves the user unable to click the necessary buttons to choose a color or close the color picker.

Could I add a PR to pass this as a setting parameter when initiating? Or would this be something easy you could do?

EDIT: I see there's a fit hook that gets called when the color picker gets auto fitted, but there doesn't seem to be any easy way to "undo" or cancel the auto fit using that hook.

When I install color-picker with npm, the following error occurs when I try to import the package:

Module build failed: Error: ENOENT: no such file or directory, open '.../node_modules/emitter/dist/emit

When I install the package with npm install --save emitter, the error seems to disappear in the terminal but a new one occurs in Chrome:

Uncaught (in promise) TypeError: Emitter is not a function

If you inspect the file index.js in node_modules, this seems to come from:

/**
 * Mixin Emitter.
 */

Emitter(ColorPicker.prototype);

For the first issue, I suggest you add this package as a module dependency in package.json. For the second one, I don't have any answer.

Hi Taufik, I found your color-picker widget a few weeks ago and decided to use it for a few projects that I have. I neede da basic color picker and love that yours (in comparison ot many others outthere) is light in size, dependency free and not bloated with too many extra feature. What I found to be missing (for me :) ) is a package.json, which allows folks to use package managers (ex. npm) and (most important), that it provides support for use with module patterns, so that the glboal window space is not automtically poluted with the CP namespace...

With this contribution, I am providing:

• A package.json file
• Changes to color-picker.js to wrap the library in an UMD declaration.

This will enable your library to be used with packge manager, as well as modern module loaders (ex. ES2015 import or AMD or CommonJS.

Thanks for your work on this and for sharing it on GitHub.

/Paul

Hi guys, I have a weird issue the change hook is running on plugin initializing, here is the test i did:

// Initialization
let picker = new CP(element);

// change hook listener
picker.on('change', function(r, g, b, a) {
    // firing immediately 
    console.log(1);
});

In react error click <input name="thename" type="text" value="#0f0" onclick={(new CP(document.querySelector(input[name="thename"]))) error Cannot read properties of null (reading 'append')

I would like to make it possible, in custom javascript, to move the selected round point in color-picker:sv element - using e.g. the up, down, left and right arrows (and/or using the I, M, J and L keys) on the keyboard. And I would like to make it so the selected point moves n points in a given direction on each press of the arrow - where the value of n is in relation to how many points there are in total horisontally (and vertically).

How do i get number of points in the color-picker:sv element - horisontally and vertically? How do I move the selected point n points up, right, left or down - and trigger the same events that are triggered when I left click to select a color?

Hi, it seems that if I have a data-color="#276895" , numeric only hex number, it does not work, and returns black as fallback. Also, is it ok for the "change" event to fire after init? Thanks.

This is a solution for #29. The easiest way was to force the placement of the picker to be placed at root child, and adjust origins from there, losing the custom container/bucket feature.

Cursor: crosshair allows precise selecting of the color more easily than "ns-resize". Semantically it is also correct: rather than "regulating hue" we usually try to select the point of the necessary color.