Comments (12)
Hi
I’m voting for the acceptance of Node as a parent.
I’m developing a component that can be built into a ready application. My challenge is that I operate in an environment where I cannot control the CSS, and third-party CSS could potentially interfere with my component’s styles. Therefore, I want to encapsulate my component within a shadow DOM. Unfortunately, Coloris does not currently support this feature. It would be ideal if I could pass the shadow DOM root as the parent.
from coloris.
Coloris now also accepts a Node
for the parent
option, and a Node
or array of nodes for the el
option.
NodeList
and HTMLCollection
must be converted to an array before passing it to el
:
Coloris({
el: Array.from(document.getElementsByClassName('my-class')),
parent: document.getElementById('my-parent')
});
from coloris.
I've managed to switch to https://github.com/web-padawan/vanilla-colorful. It's certainly a bit more effort with manual creation of popover and previous square, so likely not for everyone.
from coloris.
Excellent work @mdbassit the Typescript version of 0.24.0 is now in NPMJS.
from coloris.
These options only accepting selectors is problemantic when multiple matching elements are present on the page and one wants to use different coloris options per element.
Using different options for different color fields is exactly what virtual instances are for. Check out the demo page for examples.
It would be nice if these options would also accept
Node
orNodeList
directly.
I'm not opposed to adding support for both if necessary, but I fail to see how CSS selectors are insufficient. Would you mind explaining?
from coloris.
Using different options for different color fields is exactly what virtual instances are for. Check out the demo page for examples.
I see, the root of the problem is the single shared global instance. I thought that calling Coloris
would create a fresh instance bound only to el
. Altering this global instance during click
seems too much of a hack for me, this setInstance
looks better, but overall I think it should be made possible to create separate independent instances.
I'm not opposed to adding support for both if necessary, but I fail to see how CSS selectors are insufficient. Would you mind explaining?
With selectors, there is a race condition where content on the page changes between the time the selector string is passed to Coloris and when Coloris runs querySelectorAll
. Also, my code has to run that same querySelectorAll
as well before initialization so it's inefficient to run it twice when I could just pass the result to Coloris.
from coloris.
but overall I think it should be made possible to create separate independent instances.
Unfortunately, that goes again the main reason Coloris was created in the first place. It is being used on a web app with dozens of other widgets and was designed to use the least amount of DOM elements and event listeners possible.
With selectors, there is a race condition where content on the page changes between the time the selector string is passed to Coloris and when Coloris runs
querySelectorAll
.
Could you tell me more about that race condition? How can I reproduce it? I'd be happy to fix it if it's a bug.
from coloris.
Unfortunately, that goes again the main reason Coloris was created in the first place. It is being used on a web app with dozens of other widgets and was designed to use the least amount of DOM elements and event listeners possible.
Yeah I see and this is probably not an issue, but I can easily see that complex applications this shared global instance becomes a problem, especially the limitation of having only one picker open is problematic. Does not matter for my current use case, thought.
Could you tell me more about that race condition? How can I reproduce it? I'd be happy to fix it if it's a bug.
Fundamentally I would expect a lib like this to not use document.querySelectorAll
at all. It's a slow function that gets slower the more elements are in the DOM. It's much better to let the consumer decide to run it and pass the results to Coloris, because they likely have more efficient means.
For example, if you have 5k elements in the DOM and run this function and it takes 100ms, there is a time window of these 100ms that if the DOM changes and targeted elements are removed from DOM, the lib would not find any. This problem amplifies on slower devices.
from coloris.
Yes, Shadow DOM is a big use case that won't work with document.querySelectorAll
as by design it can not reach into Shadow DOM which acts as a CSS boundary.
There are likely more such boundaries like<iframe>
. basically everywhere where node.ownerDocument !== document
holds true.
from coloris.
especially the limitation of having only one picker open is problematic.
That limitation is intentional and will not change. There are other open source color pickers out there that support multiple real instances.
Fundamentally I would expect a lib like this to not use document.querySelectorAll at all. It's a slow function that gets slower the more elements are in the DOM.
I'm aware of the performance overhead of querySelectorAll
, but I judged that it was fast enough for this use case considering the benefit of handling complex CSS selectors.
It's important to note that his tool is NOT design to be a general purpose color picker that could cover every use case, it's designed to be a simple and fast color input field alternative.
Again, I'm not opposed to accepting a Node
or a NodeList
for the el
and parent
options. I will look into it, and if it doesn't interfere with my own use case, I will add it.
I will not however be spending any time supporting what I judge as exotic use cases like shadow DOM or iframes. Feel free to fork this project and take in your own preferred direction if you disagree.
from coloris.
Sure, keep it your way if it fits your use case and probably that of many others. Myself, I will be looking for alternatives that are better suited for my use cases.
from coloris.
Glad you found a color picker that works for you.
I'll keep this open to remind myself about the Node
and NodeList
support request.
from coloris.
Related Issues (20)
- Materializecss compatibility HOT 2
- Popup Input Issue HOT 3
- Mouse does not lineup on palette after scrolling in scrollable container HOT 3
- Include SCSS file with variables HOT 10
- Add support for CSS custom properties (variables) HOT 1
- Colorpicker wraps all input fields on page load HOT 6
- I would like to contribute sass/scss to the repository HOT 4
- ARIA: issue with Inline `#clr-color-marker` HOT 6
- Incorrect output value of alpha channel in 8-digit Hex Code HOT 8
- The color picker doesn't stick to the input it scrolls along HOT 2
- Option to not style the input element HOT 8
- colorArea doesn't handle right mouse button HOT 2
- Feature Request: Add Eyedropper HOT 2
- Missing info in docs about setting up thumbnails HOT 4
- Not showing in absolute positioned div HOT 2
- Alpha channel loses information HOT 5
- colorArea issue with CSS zoom HOT 1
- Coloris does not call the onChange event if the mouse is released outside the colorArea HOT 2
- Bug: problem with inline mode HOT 4
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.