Giter VIP home page Giter VIP logo

Comments (6)

mdbassit avatar mdbassit commented on September 22, 2024

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?

from coloris.

Dari4sho avatar Dari4sho commented on September 22, 2024

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.

image

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.

from coloris.

Dari4sho avatar Dari4sho commented on September 22, 2024

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.

from coloris.

mdbassit avatar mdbassit commented on September 22, 2024

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.

from coloris.

cbn-falias avatar cbn-falias commented on September 22, 2024

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

from coloris.

mdbassit avatar mdbassit commented on September 22, 2024

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.

from coloris.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.