Feature request: Close callback

[Dari4sho]

Hi together,

as I tried to integrate an inline variant of this great piece of work, I noticed that currently, when you use it combined with the close button, the button does not trigger any further action (the closePicker function is sensitive to !settings.inline).

What works for me is adding a onClose setting which get's called at the end of closePicker(). So whenever the Close button is clicked, my custom onClose setting / callback is fired (and I can manually hide my inline picker).

I'd have it ready (4 lines) and could create a pull request, just let me know / grant the permission.

What do you think? Could this be useful in general as well or am I missing an existing approach? Thanks for the project

[mdbassit]

Hello, thank you for the kind words!

I'm a little confused, if you need to be able to close the color picker, why are you using in inline mode?

[Dari4sho]

In my case, the implemented positioning didn't work out (the open/close-trigger itself lies in a fixed container width overflow: hidden, which makes it hard to use the parent option for proper positioning), so I decided to rely on my own popper implementation, which loads an inline coloris instance.

Because of that approach, and as I like the clear/close buttons, I want to use the close button to send an close event to the popper instance, which I could achieve in the mentioned way.

[Dari4sho]

I needed to adjust my approach: instead of having a onClose setting, I'd need a onCloseButtonClick setting, which fires only at close button click (to prevent interfering with other closePicker() trigger situations, like clicking clear button / clicking outside of the picker).

Despite me thinking that both of the mentioned setting values could be useful for others, at this point I understand my requirement might be too custom.

[mdbassit]

In my opinion overflow: hidden is unnecessary to render that kind of floating toolbar, but maybe you have your reasons.

Anyway, if all you need is to detect click events on the close button, you just need to add an event listener on that button:

document.getElementById('clr-close').addEventListener('click', myCustomCloseHandler);

Make sure you add that after initializing the color picker.

[cbn-falias]

Hi,

I just tested your color picker the first time and I really like the implementation and ease of use. 👍 Funny enough I just wanted to request a similar feature to detect "how the picker was closed" because the user should explicitly confirm his input.

Rough ideas to solve this:

• As mentioned by OP some kind of "onCloseButtonClick"
• New button + event "confirm"
• Option that "clicking anywhere" acts like pressing ESC

[mdbassit]

Thank you for your kind words!

I think requiring the user to confirm closing a color picker is quite over the top! I will not be implementing that.

As for the "onCloseButtonClick" callback, I believe listening for a click event on the close button should achieve exactly that (see my previous comment).

I would like this color picker to stay as small as possible for my own use, so unfortunately I won't be able to implement every user request.