Sorry for my english.

Thank you for your work and it's a wonderful project.

If you can i need more events for example "open" and "close"

change event not trigger on close if there's no change color.
In local i add currentEl.dispatchEvent(new Event('close', { bubbles: true })); on line 290
and currentEl.dispatchEvent(new Event('open', { bubbles: true })); on line 184

Thank you so much , Marco

Coloris picker not working with latest bootstrap 5 Modal.
And not able to focus or edit color input in bootstrap 5 Modal popup.

I tried to fix it with z-index but not able to edit input hex text.

Please help me out Sir.

For example, if you change the width to 250px, the result is:

In case of inline I don't want an input field to be visible, instead it should act as an input. Values can either be bound to a hidden input, or you simply have to listen for color picks and deal with values in the listener.

Description of the issue

When I specify the option parent, the picker is always display on top even if there is not enough space on top.

Example

<div id="test-me" class="c-color-input">
  <input type="text" data-coloris/>
</div>

if I put "test-me" in parent the positionning is not correct

Look like when turbo render a page, Coloris raise an error

Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')

I use CDN and init with turbo:load event

document.addEventListener("turbo:load", function() {
    Coloris({alpha: false})
});

I've tried to add a condition init

document.addEventListener("turbo:load", function() {
     if (document.querySelectorAll('[data-coloris]').length > 0) {
        Coloris({alpha: false})
     }
});

If the page is loaded with turbo I have the error, if i manually reload the page, it works

Anyone know where it could come from ?
Thanks

add destroy and on("change" )

When setting a RGBa value with for example $("#colorpicker").val("rgba(47, 47, 47, 0.36)")
the value in the color picker is rgba(47, 47, 47, 0.36078431372549)

is there some bug that set the alpha value with 14 decimal places or is it an issue with jquery?

Thanks

Hi, this widget is fantastic. Thanks for making this. I just added this to my project and I can't seem to get the thumbnail to appear. I don't have any CSS styling my inputs and I'm just using the default settings. Also I don't see anything in the readme on how to select between the various thumbnail styles in your examples e.g. rounded, circular, fullsize etc.

[Edit] I also just noticed it's not letting me change the defaultColor setting, however I am able to set custom swatches. I'm using this within a Vue3 app and wondering if that's creating a conflict somewhere, although I'm not seeing any JS errors anywhere.

Hello, how can i refresh the clr-open-label ?
I use the same field and i need to update him (the only thing who dont refresh is the label).

Thanks !

I put input in a center aligned flex division but clr-picker is out of my div.
when removing it's top and left style, it's in correct position but color picker not working fine and should use it's previous position to select color.

Update: I want color picker to be always visible.

In static part of the page example code transforms from:
A:

<div class="example full">
  <p>Full size thumbnail</p>
  <input type="text" class="coloris" value="#ffcc00">
</div>

To:
B:

<div class="example full">
        <p>Full size thumbnail</p>
        <div class="clr-field" style="color: rgb(255, 204, 0);">
              <button aria-labelledby="clr-open-label"></button>
              <input type="text" class="coloris" value="#ffcc00">
        </div>
</div>

In dynamic created content thumbnail stays A, but color picking tool works in both cases.

Not sure if this is a question or a feature request. Currently it seems that configuration can only be done globally. Is it possible to have different instances with a different configuration?

Hi

First of all, awesome color picker. I love the simplicity of it. We have multiple color pickers on one page with different configurations. That works almost perfect, but we found a tiny little bug. If we select a color picker that uses swatches and then switch to another color picker without swatches, then the swatches from the previously added are displayed. I digged into the code and found the error:

On line 103 (coloris.js) theres a condition that only replaces the html if there are swatches defined (if (swatches.length)). You should add an else statement that sets the innerHTML to an empty string or something like this.

Hi,
Thanks for your work, picker looks great, as the subject, would it be possible to add an option to hide the alpha slider ? I guess it would be possible to override the css, but an option is more elegant.

Is there any arguments that can disable the opacity selector?

Hi @mdbassit :)

Is there a way to allow us using css var function as swatches colors?

I don't use the input[type="color"] and I built the swatches through an other way. Here is the result:

Coloris({
    // some other options
    swatches: [
        'var(--poseidon-color-1)',
        'var(--poseidon-color-2)',
        'var(--poseidon-color-3)',
        'var(--poseidon-color-4)',
        'var(--poseidon-color-5)',
        'var(--poseidon-color-6)',
        'var(--poseidon-color-7)',
        'var(--poseidon-color-8, "#ffffff")',
    ],
});

It's possible to get the var's color simply thanks to: getComputedStyle(document.documentElement).getPropertyValue('--poseidon-color-1')

Do you think there is a way to hook the setColorFromStr function?

If I select on a swatch instead of picking a color, I need the input to get the variable name (var(--poseidon-color-1)) as a result.

Thanks for your feedback.
Achraf

Dependabot is key for keeping a project healthy.

When the ajax content is loaded it should callback the coloris.js. then it will work fine in ajax generated content.

Do you plan to publish on npm 👼 ?

Will the package be available through NPM?

I would like to import it instead of loading it through a script

Thanks so much for developing this tool. It's super useful, easy, and attractive. Really nice work.

An enhancement idea... A setting 'selectInput' for selecting the color value text when the popup opens. This would save extra clicks to type or paste in a color value.

In the bindFields method:

if (settings.selectInput){
    colorValue.select();
}

Thanks for making such a great color picker - it both looks amazing and is easy to customize.

However, the event doesn't trigger in this situation: 1) Change the color value, for example from '#66ff45' to #66ff86', then 2) click outside the color picker so it closes.

I've now solved this thanks to the open and close events, but if the change event worked correctly it would be a more elegant soultion.

I don't understand how it's possible to set a specified color at runtime, the only way i've found is by setting the input value, but when i open the colorpicker it show me the set value into the input box, but the previous color into the preview box, i'm italian sorry for ma bad english :)

Hello,

Thank you for share your picker.

When i use Coloris in inline mode the input text (#clr-color-value) don't trigger the change event and don't select the color entered. When the picker isn't in inline mode the change event is triggered.

An other problem, always in inline mode, i can't change the select color by code. Can you add a function to update the current color ? Like Coloris.update('#C4C4C4') ou Coloris.set({color:'#C4C4C4'}). I see in source the setColorFromStr() function but it not a public function...

@+

Hi, this color widget is awesome, thanks for making it. I used for my project and everything works great except a little details. Maybe I missed something.
When I change the input value the parent element (clr-field) color does not change.
I tried to replicate it:
https://codepen.io/b-lint-pipei/pen/xxWNmNb

I am sorry if I missed something.
Thanks
Balint

Description of the issue

When I specify the option parent, and scroll the picker follow the parent but when I then click to choose a color it's most of the time black. It's due to the fact that it register the click like if the picker was positionned when first displayed (not after the scroll). It works fine when not specifying the parent option but then the scroll doesn't work 😅

It would be nice to have the possibility to clean the color selection (null) and have a blank slate icon as well (i.e. a crossed circle/box). Could also be available as a swatch.

I want to display the colorpicker in a custom popup without any input. I used the following options:

Coloris({
  el: null,
  inline: true,
  parent: '#' + anchorId,
  autoClose: false,
  focusInput: false,
  alpha: false,
})

I reproduced the bug in this Codepen

The colorpicker opens as expected but when using the colorArea the color marker is locked to the right of the area because the x / y dimensions getting calculated are a bit off in the updatePickerPosition() function. I fixed it by using getBoundingClientRect() for the dimensions. I can provide the fix as a PR but it probably needs some testing with other use cases.

Would it be possible to add an optional clear button (or a 'x' or something) that will clear the input field? Currently when you set a color you can not remove it anymore (unless you manually tab to the original input field and delete it that way).

Summary

The color picker goes off the top of the screen when there isn't enough space for it below the input.

For example, with the configuration

Coloris({
	el: '.coloris_input',
	format: 'hex',
	selectInput: false,
	focusInput: false,
	themeMode: this.editor.lightMode ? 'light' : 'dark',
	
	swatches: [
		Color4.red.toHexString(),
		Color4.purple.toHexString(),
		Color4.blue.toHexString(),
		Color4.yellow.toHexString(),
		Color4.green.toHexString(),
		Color4.clay.toHexString(),
		Color4.black.toHexString(),
		Color4.white.toHexString(),
	],
});

I get,

and

Expected Behavior

The color picker should go below the input.

It would be useful if with a double click on a color (both of the palette or the custom colors) of the color picker, trigger the event that close the popup

Getting this error in coloris.min.js

Option to NOT focus on color value input by default because the focus automatically activates keyboard on mobiles, etc.

Also, maybe it's just me, but Option wrap=false is not working for me; result and swatch are still showing.

Thank you for your work- it's (almost) perfect!

I am developing an OctoPrint plugin that controls NeoPixels connected to a Raspberry Pi, and I am using this library as the color picker. Thank you so much for creating it.

The NeoPixels I use have a white channel, which is nearly perfectly controlled with the alpha slider. The exception is that when the slider is at 100% the hex value output is not appended with "ff". This can be seen with the screen shots included. Is there a way to keep the alpha value attached to the hex output?

Love this color picker, thanks!

Would be great to add spellcheck="false" for <input id="clr-color-value" class="clr-color" type="text" value="" aria-label="Color value field">

also if there was an option to hide the live preview now I've done it with css
.clr-preview{display:none;}

I tried to build Coloris from source, but after doing yarn install and yarn build I got this syntax error:

SyntaxError: D:\ss\varisw\Coloris\.yarn\cache\make-error-cause-npm-1.2.2-a8184cb0ea-04c3534363.zip\node_modules\make-error-cause\dist\index.js: Identifier 'makeErrorCause' has already been declared. (12:4)

  10 |     return makeError(value, _super);
  11 | }
> 12 | var makeErrorCause;
     |     ^
  13 | (function (makeErrorCause) {
  14 |     var BaseError = (function (_super) {
  15 |         __extends(BaseError, _super);
    at instantiate (D:\ss\varisw\Coloris\.yarn\cache\@babel-parser-npm-7.18.0-77a18bef7b-253b5828bf.zip\node_modules\@babel\parser\src\parse-error\credentials.js:61:22)
    at toParseError (D:\ss\varisw\Coloris\.yarn\cache\@babel-parser-npm-7.18.0-77a18bef7b-253b5828bf.zip\node_modules\@babel\parser\src\parse-error.js:58:12)
    at Parser.raise (D:\ss\varisw\Coloris\.yarn\cache\@babel-parser-npm-7.18.0-77a18bef7b-253b5828bf.zip\node_modules\@babel\parser\src\tokenizer\index.js:1736:19)
    at ScopeHandler.checkRedeclarationInScope (D:\ss\varisw\Coloris\.yarn\cache\@babel-parser-npm-7.18.0-77a18bef7b-253b5828bf.zip\node_modules\@babel\parser\src\util\scope.js:153:19)
    at ScopeHandler.declareName (D:\ss\varisw\Coloris\.yarn\cache\@babel-parser-npm-7.18.0-77a18bef7b-253b5828bf.zip\node_modules\@babel\parser\src\util\scope.js:128:14)
    at Parser.declareNameFromIdentifier (D:\ss\varisw\Coloris\.yarn\cache\@babel-parser-npm-7.18.0-77a18bef7b-253b5828bf.zip\node_modules\@babel\parser\src\parser\lval.js:707:16)
    at Parser.checkIdentifier (D:\ss\varisw\Coloris\.yarn\cache\@babel-parser-npm-7.18.0-77a18bef7b-253b5828bf.zip\node_modules\@babel\parser\src\parser\lval.js:702:12)
    at Parser.checkLVal (D:\ss\varisw\Coloris\.yarn\cache\@babel-parser-npm-7.18.0-77a18bef7b-253b5828bf.zip\node_modules\@babel\parser\src\parser\lval.js:605:12)
    at Parser.parseVarId (D:\ss\varisw\Coloris\.yarn\cache\@babel-parser-npm-7.18.0-77a18bef7b-253b5828bf.zip\node_modules\@babel\parser\src\parser\statement.js:1254:10)
    at Parser.parseVar (D:\ss\varisw\Coloris\.yarn\cache\@babel-parser-npm-7.18.0-77a18bef7b-253b5828bf.zip\node_modules\@babel\parser\src\parser\statement.js:1220:12) {
  code: 'BABEL_PARSE_ERROR',
  reasonCode: 'VarRedeclaration',
  loc: Position { line: 12, column: 4, index: 461 },
  pos: [Getter/Setter]
}

Any clues?

Maybe you can clarify more about where's the output value, and stuffs like that. It took me quite a while to find out everything i need to know in order to use it properly.
Btw i don't know why but my themeMode isn't working, i changed themeMode to dark but it doesn't do anything.

Loving Coloris. It is small, easy to implement and works great.

There is one problem I haven't been able to solve. I update the input field with a hex value programmatically, for example:
$("#colour").val("#FFFFFF");
But the Coloris thumbnail remains the transparent chequerboard pattern. Is there a way to force the thumbnail to update its colour when I programmatically change the value in the input field? I have tried calling Coloris.close() as there is mention in the source code that it might force an update of the thumbnail but this doesn't work for me.

Thanks.

Firefox 105.x, if I render a simple page like this:

<!DOCTYPE html>
<html lang="en" xmlns:YYYY-MM-DDTHH="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/coloris.min.css">
</head>

<body>
    <div class="container">
        <input type="text" name="color1" class="coloris" value="#ff0000">
    </div>

    <script type="text/javascript" src="js/coloris.min.js"></script>
    <script>
        Coloris({
            el: '.coloris',
            theme: 'pill',
            themeMode: 'light',
            format: 'auto',
            formatToggle: true,
            alpha: 'false',
            swatches: [
                '#ff0000',
                '#ffa500',
                '#ffff00',
                '#008000',
                '#0000ff',
                '#4b0082',
                '#ee82ee',
                '#ffffff'
            ]
        });

    </script>
</body>

</html>

Coloris is rendered as expected:

But if I include the Skeleton CSS:

<link rel="stylesheet" type="text/css" href="css/skeleton.min.css">

it becomes a mess:

Is there a way to force the compatibility with Skeleton CSS (or any other CSS) ?

By the way, the alpha setting is not honored.

i cannot submit form and get value from input when use coloris

Something like how it's done in the Chrome developer tools:

Thank you for this component! It's so easy to setup and get working, it's really great!

But there's a problem: I made Coloris pickers out of my <input type="text" /> elements inside a form. When I closed the picker, the form got submitted. After inspecting, I've noticed that a button element is created, but since it has no type attribute it is assumed to be type="submit".

Can you set a default type="button" attribute, please?

Hi,
Is having an open() method (the reverse of what you have for the close() method) on your roadmap at all?
Thanks

Hello guys,

Thanks for the library.

I just started using the library and as soon I opened in Google Chrome I got this warning message:

coloris.js:928 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

Any idea to remove the warning?

I don't know if there is an option to autoclose the modal when I choose the color, if not I would like(if you want and if you can) the possibility to customize that.

@mdbassit can you add a small section to the README.MD on build instructions? I was able to do npm install but I don't see how to actually build the /dist directory with the minified script etc?