Comments (6)
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.
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.
from coloris.
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.
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.
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.
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)
- When used in modal dialog-tag, color picker is displayed behind the modal HOT 5
- close dialog box with keyboard HOT 1
- No way to access the current element? HOT 2
- Manually clearing color has unexpected behavior HOT 3
- Enhancement: mirror cursor position/selection when picker is opened with focusInput: true HOT 4
- Allow el configuration property to be the dom element HOT 4
- How do you add a custom input?
- Dragging hue and alpha markers doesn't work on iOS HOT 4
- Reading option with attributes HOT 1
- How to programmatically change the thumbnail color?
- 能增加一个onClose事件监听吗? HOT 1
- Firefox accessing colorAreaDims before initialization HOT 18
- NaN values when inline color picker HOT 7
- Open method HOT 3
- clr-open-label not initialized on osX HOT 4
- Feature Request: Pipette / Eye Dropper HOT 2
- custom element HOT 4
- Display Value color after refresh page HOT 1
- passive event handler HOT 11
- mousemove event not removed when i release mouse on iFrame HOT 8
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from coloris.