taufik-nurrohman / color-picker Goto Github PK

Consider native name attribute of a function as the hook ID instead, so we could remove the third parameter of the hook API.

function onChange() {
    alert('Hi!');
}

picker.on('change', onChange);

// Remove all hooks
picker.off('change');
// Remove `onChange` hook only
picker.off('change', onChange);

Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/name

Hello,

it would be neat if there was a CHANGELOG.md file or something similar to track breaking changes (like the target -> source change) for easier migration.

Thanks!

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

In my use case I want to always display color picker. Have it displayed on start and leave it displayed even when color is selected or I click to different place on page.

As for showing on start I suppose that cp.enter() is enough but I'm not sure what is best approach to remove exit (click?) event. I tried simply to cp.off('exit') destroy etc but no luck.

Thanks for help

This one has focus and scroll hook that will override the default focus and scroll behavior of the application if at least we have one focus and scroll hook added to the instance. We need to add this feature as a better way to disable and enable the current behavior of the color picker visibility: clicking on the source element will show the color picker pane, clicking outside the color picker pane will hide the pane.

Currently, we have to set the state.e property to false to disable both events (fake focus and blur), but actually, the original intention of state.e was to determine the way color picker will be visible. For example, if we set state.e as ['dblclick'], then the color picker pane will be visible by double-clicking on the source element.

We are missing the click-outside customizer here.

With the focus and blur concept, we could make the extensibility becomes wider. For example, to disable the default color picker pane visibility events, we could do this:

picker.on('blur', () => {}); // Disable default click-outside behavior
picker.on('focus', () => {}); // Disable default click behavior

To re-create the double-click event behavior, you could make it natively after disabling the default behavior:

picker.source.addEventListener('dblclick', () => {
    picker.enter();
}, false);

As in:

• @taufik-nurrohman/f3h
• @taufik-nurrohman/tag-picker
• @taufik-nurrohman/text-editor

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>

There is no need to change the API. Just add the alpha value to the converter result next to the blue field (default to 1, ranged from 0 to 1):

• [r, g, b, a = 1]
• [h, s, v, a = 1]
• rrggbb(aa)?

I'm attaching the the picker to the elements parent and positioning it relative to that.

document.querySelectorAll('.colorpicker').forEach(source => {
    let picker = new CP(source, { parent: source.parentElement });
    insertColorCode(picker);
});

I override the inline style with .color-picker{position:absolute;top:20px!important;left:0!important;

This works fine but it would nice to have the option to turn off the dynamic inline style positioning.

Hey @tovic , can you add a License that describes how we can use this component?

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);
});

If I call picker.enter() and the color picker opens successfully, but I then go to check the visibility of the color picker using:

CP.__instance__["myColorPickerId"].visible

In code, visible never updates to true. But if I check the value using console.log it does update?

I have an event handler for a button-click that I want to open the color picker upon first click, then the second click will save the value and close the color picker. But the visibility flag never updates, even after fetching the color picker again.

My code organization is a little different than your examples. But it should still work. Checking CP.__instance__ should already have fresh values right?

Does this have something to do with CP.__instance__[...] returning an anonymous function?

Hi!

If we init CP with 'onfocus' event, the CP doesn't closing when input is unfocusing.

Thank you for your job!

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

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.

Hello,

How do i set a default color on the picker, or change the color by putting the hexadecimal by hand?

Thanks

I noticed in all your examples, that color is changed with on('drag') but it doesn't work when you click only (both in -sv and -h).

I tried to play with different events but only one which worked was on('stop'). Problem with that one is that it is interfering with input field. I'm not able i.e. to click in middle of input field because cursor is immediately moved to the end.

I think changing color with click should be possible by default.

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?

In your fix for color pickers within absolute positioned containers (#29) you read the x and y properties of the return value of getBoundingClientRect(). These do not exist in Internet Explorer or Microsoft Edge. That's why I used left and top instead in my proposed solution (#29 (comment)).

Hello! Thank you for the Color Picker Plugin!

Is there any way change color when I type/paste color code in an input.

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.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Hello @taufik-nurrohman,

I hope you can help me. I need the color picker to fire on change, only. And stay quiet on page load.

For other functions, I've used addEventListener with bind, in order to keep if from firing on page load. But in the case of color-picker, it looks like we can't do that.

Or can we? Am I missing something?

Thanks in advance!

I'm using Static Color Picker implementation as you proposed in #3

Problem is that when I move color picker panel from body to different element, destroy method is not working anymore:

    // move color picker panel from 'body' to 'colorpicker' element
    cpicker.on('enter', () => {
        document.getElementById('colorpicker').appendChild(cpicker.picker)
    })

Problem is on line 308 in color-picker.js:

        if (picker.parentNode) b.removeChild(picker);

as picker is no longer in b I got js error. I "fixed" this for me with following

        if (picker.parentNode) picker.parentNode.removeChild(picker);

Not sending PR because I'm not sure if this is correct approach.

When I try to use this package via NPM, I install it and then import with an ECMAScript style import like:

import { CP } from 'c-p';

I can see all the CP static functions on a global CP object when investigating in Chrome's DevTools and I can call them and they work (e.g. CP.HEX2HSV), but when I try to call:

let picker = new CP(...);

I get an error message saying "Uncaught TypeError: CP is not a constructor". If I just move the color-picker.min.js file into my project, don't import and just use it as a global, everything works fine.

Any ideas?

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

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.

After adding tachyons framework stylesheets, color picker breaks.

To reproduce simply add tachyons css to header (i.e. in color-picker.noob.html)

<link rel="stylesheet" href="https://npmcdn.com/[email protected]/css/tachyons.css">

Looks like there is some incompatibility with tachyons resets or something similar. Problem is probably with .color-picker-sv

i am facing an issue that my picker is attached to body while i have the trigger in a container inside with overflow. the picker gets its x and y positions on initialization and position itself according to body but not the container that i need. so once i scroll down, the picker looks like it's fixed but it is actually absolute.

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?

In Chrome I'm not able to position cursor in input field with mouse click. Trying on: https://rawgit.com/tovic/color-picker/master/color-picker.static.html but it is same on all examples.

Every time I click into input field, cursor is moved to the end of field. Moving with arrows on keyboard works without any problem.

In Firefox it works without any problem.

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.

Color picker with input element to show the actual color code, so that you can copy from or paste to the color code.

https://jsfiddle.net/tovic/hnbe8sm5

Hey, nice plugin, thanks for that.
i got a question:
is it possible to call a js-function when clicking on "ok" (after i choose a color)?

thanks for everyone who get's interested and taking time to help.

Stefan

Tolong di perbaiki, terima kasih kang tovic. ^_^

Hey tovic,

I came across some behavior that may be potentially undesirable. I noticed that every time a user clicks on the color input then a new event listener is automatically created, which is good, unless the user keeps clicking on the same input. Closing the color picker only removes the last event listener.

Here is a demonstration in Chrome:

https://i.imgur.com/E8QdStm.gif

I made an attempt to try and fix this behavior by preventing it in the first place.

Here is some code I added to your create() function inside color-picker.js, and a new function to query the color picker.

// create
function create(first, bucket) {
  // ...
  // ...
  if (first) {
    .style.left = self.style.top = '-9999px';
      function click(e) {
      var t = e.target,
      is_source = t === source || closest(t, source) === source;
        if (is_source) {
          if (colorPickerExists())        // <--- ADDED THIS
            return;
          else
            create(), trigger("enter");
        } else {
          $.exit();
        }
      }
  // ...
  // ...
}

// new method
function colorPickerExists() {
  const colorPicker = document.querySelector('.color-picker');
  return colorPicker;
}

I think I'm supposed to do a pull request but I'm still figuring out how github works 😂

Color picker pane should not be dissapeared when the mouse-up events occurs from the .color-picker scope.

Desktop

Mobile

I'm using multiple color pickers om my page. On opening one opens the picker on the others too. Is there any way to avoid this?

Would be great, if you could release the current version on npm too. I'm currently referencing a specific tag in my package.json (which is not that great ;-))

Hello,
Great work, well done!
Currently, your color-picker offers among 16 million colors. I would like to use it to control the color of a system that has only 256 colors. Is it possible to choose the number of colors to display?
Thank you.

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

Wrap the javascript with UMD for users who wanted to use bundler.

also, if i trigger change event manually of input with jquery also not working

Hi bro @tovic .. What do you think about this logo? if you like it, i'll sent to you.

Best Regard. :)

I'm using the color picker and it's great. One thing I can't figure out on my own is how to remove the "#" from inputs value.

Obviously I did this:
this.source.value = color;
instead of
this.source.value = "#" + color;

And that works just fine, there is no "#" left in the input and the picker works as expected. The thing that's broken is being able to manually enter or paste a HEX value into the input.

I didn't have any success fixing this so my only hope is you man :(

When holding down the mouse button on a color and dragging the cursor outside the color-picker container then releasing the mouse results in the color picker closing.

Is it possible to only close the color picker on 'click' outside of container instead of on 'mouseup'?

Having issues with getting predefined alpha channel. I'm pulling rgba value from one of the values from an array and although it shows up for a moment it gets replaced by rgb(255, 0, 0).

      $html .= '<script>';
      $html .= '
      var picker = document.querySelectorAll(\'.picker\'),
          alpha = document.createElement(\'input\');

          picker_0 = new CP(picker[0]),
          picker_1 = new CP(picker[1]),
          picker_2 = new CP(picker[2]),
          picker_3 = new CP(picker[3]);
          picker_4 = new CP(picker[4]);

          alpha.type = \'range\';
          alpha.min = 0;
          alpha.max = 1;
          alpha.step = .01;
          alpha.value = 1;
          alpha.onchange = change;
          alpha.oninput = change;
          picker_4.self.appendChild(alpha);

          function change() {
              var v = CP._HSV2RGB(picker_4.set());
              v = this.value == 1 ? \'rgb(\' + v.join(\', \') + \')\' : \'rgba(\' + v.join(\', \') + \', \' + this.value.replace(/^0\./, \'.\') + \')\';
              picker_4.source.value = v;
          }

          picker_0.on("change", function(color) {
            this.source.value = \'#\' + color;
          });
          picker_1.on("change", function(color) {
            this.source.value = \'#\' + color;
          });
          picker_2.on("change", function(color) {
            this.source.value = \'#\' + color;
          });
          picker_3.on("change", function(color) {
            this.source.value = \'#\' + color;
          });
          picker_4.on("change", function(color) {
            this.source.value = alpha.value == 1 ? \'rgb(\' + CP.HEX2RGB(color).join(\', \') + \')\' : \'rgba(\' + CP.HEX2RGB(color).join(\', \') + \', \' + alpha.value.replace(/^0\./, \'.\') + \')\';
          });
      ';
      $html .='</script>';

whats the issue?

In your last commit some garbage got into color-picker.js:

348d29b#diff-a7fc59f63d629f5332a3d4a8be8af3a5R459

this line at the end of file shouldn't be present:

  };r;

js error:

color-picker.js:461 Uncaught SyntaxError: Unexpected token }
popup.js:529 Showing cpicker
popup.js:546 Uncaught ReferenceError: CP is not defined

Whats interesting is that minified version works ok.

Greetings, Taufik!
Sorry that the question is about my poor knowledge of Javascript, rather than about your plugin.
I make Color Picker draggable, see http://geekpic.net/pm-2V8CLM.html
On screen resize it appears at the beginning of the screen though, see http://geekpic.net/pm-I27H4B.html
That's because function fit() doesn't understand it changes position.
How can I turn off that function?
I understand I can edit the js file or set a hook, but can I just write in my scripts something like
CP.fit = function () {}; or window.CP.fit = function () {};?
I tried these but that doesn't work.
Thank you.

By the way, I can add my variation to your examples of usage of color-picker - draggable and with customizable palette.

Is this package available in npm?

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.