search

PitPik / colorPicker

Advanced javaScript color picker and color conversion / calculation (rgb, hsv, hsl, hex, cmyk, cmy, XYZ, Lab, alpha, WCAG 2.0, ...)
http://www.dematte.at/colorPicker/
MIT License
570 stars 136 forks source link

Support webcomponents #26

Open suexID opened 8 years ago

suexID commented 8 years ago

Hi,

I've been searching for a simple, lightweight color picker written in vanilla javascript for ages and gladly I've found your colorPicker. However, no matter how hard I try I can't initalize your color picker on inputs wrapped in Google Polymer components. No errors, no output on the console.

Would you please guide me on how to bind the colorPicker to inputs in components if there's a way to do that?

7Ds7 commented 7 years ago

This seems to be the best color picker around for vanilla JS so many thanks to @PitPik. Sadly there is no web component version and it can not be used as such in a shadow dom environment as it relies on document.querySelectorAll and from there it searches the selector passed to the config.

From the documentation i did not see any other way to pass in for example a node list.

Although it can be used with Polymer as is with a few tweaks @suexID i made a small fork in which i pass in the context (ex: initialising the picker from within a component )

Now from within a component i pass in the context (ctx) for jsColor to find nodes from as document.querySelectorAll would not previous find within the shadow dom.

var colors = jsColorPicker('input.color', {
                ctx: this.$.container,
                customBG: '#000',
                readOnly: true,
               ...

Even so you might be better off with using colors.js and colorPicker.js only, and use your own implementation within your component.