search

mdbassit / Coloris

A lightweight and elegant JavaScript color picker. Written in vanilla ES6, no dependencies. Accessible.
https://coloris.js.org/examples.html
MIT License
443 stars 58 forks source link

Missing info in docs about setting up thumbnails #146

Closed demiavaliani closed 3 months ago

demiavaliani commented 3 months ago

I had too look in past issues to find out that thumbnail is not set up out of the box. I think it should be added in the docs that input and button elements should be wrapped inside a parent element with class clr-field.

<div class="clr-field">
    <button type="button" />
    <input data-coloris />
</div>

Great library tho, thanks for your effort.

mdbassit commented 3 months ago

The thumbnail IS set up out of the box. You do not need to manually wrap the input field. If you are using a custom selector for the el option, make sure the wrap option is not set to false (or don't set it at all). If that is not the case for you, then there is something else interfering with it.

demiavaliani commented 3 months ago

The thumbnail IS set up out of the box. You do not need to manually wrap the input field. If you are using a custom selector for the el option, make sure the wrap option is not set to false (or don't set it at all). If that is not the case for you, then there is something else interfering with it.

I am using custom selector for el, and wrap set to true, but display: none does not change on the #clr-picker element. With clr-field wrapper, I can see that clr-open class is being appended on input click, which is not the case when without wrapper.

I'll try to reproduce it somewhere.

demiavaliani commented 3 months ago

@mdbassit never mind the previous comment, could not reproduce it, so it's an issue on my side. But I managed to reproduce the thumbnail issue.

Additionally, you can observe that even if I'm setting custom parent element, the color picker is still appended to the end of body.

https://codesandbox.io/p/devbox/suspicious-colden-c2cfq2?file=%2Fsrc%2FApp.vue%3A10%2C65

mdbassit commented 3 months ago

@mdbassit never mind the previous comment, could not reproduce it, so it's an issue on my side. But I managed to reproduce the thumbnail issue.

Your input field is not yet in the DOM when Coloris is initialized, so it doesn't get wrapped. You will have to wrap it manually:

Coloris.wrap('.color-picker__input');

Additionally, you can observe that even if I'm setting custom parent element, the color picker is still appended to the end of body.

Your selector doesn't appear to be the right one. It should be .color-picker I believe.

I'm converting this into a discussion.