colorjoe - The Scaleable Color Picker
colorjoe was somewhat inspired by
ColorJack and
RightJS Colorpicker. Unlike those it
actually scales pretty well. Essentially this means that you'll be able to
define its actual dimensions and layout using a bit of CSS. This way the widget
fits well responsive layouts.
In addition it's relatively easy to implement missing functionality (RGB fields,
whatnot) thanks to the simple API it provides.
Installation
npm i colorjoe
If you prefer a standalone dist, add prepackaged dist/colorjoe.js
and css/colorjoe.css
to your page or use AMD to load
the dependencies from src/
.
Usage
const joe = colorjoe.rgb(element_id_or_dom_object, initial_color_value, extras);
or
const joe = colorjoe.hsl(element_id_or_dom_object, initial_color_value, extras);
Event Handling
The returned joe object is an event emitter style object with change
and
done
events. The change
event is fired continuously when selecting and
done
is fired when user has stopped selecting.
joe.on("change", color => console.log("Selecting " + color.css()));
joe.on("done", color => console.log("Selected " + color.css()));
The color object is from one.color.
Given it might be nice to trigger these events immediately, there is a specific
update
method. Ie. joe.on("change", function() {...}).update() would trigger
change
immediately. This is handy for initializing your work.
Get and Set
In addition there are set
and get
methods. Ie. joe.get() would return the
current color while joe.set('#aabbcc') would set it. set
expects a parameter
that one.color default constructor would accept.
In order to make it easier to customize a picker based on your needs, colorjoe
provides a few extras. The following example shows how to use them:
const joe = colorjoe.hsl('hslPicker', 'red', [
'currentColor',
'alpha',
['fields', {space: 'HSL', limit: 255, fix: 0},
'hex'
]);
The code above would generate a HSL picker that shows in addition the currently
selected color, alpha slider, HSL input fields and a hex field.
As you can see fields
has been defined using an array. This array contains
the name of the extra and then parameters passed to inside an object. In this
case the extra accepts name of a color space (RGB, HSL, HSV or CMYK). If you
append A
to the color space, it will show a control for alpha too. In
addition it takes a limit value (defaults to 255) and a fix value
(defaults to 0). fix represents the amount of numbers shown after decimal.
hex
extra accepts optional label
. If set it will show that as the input's
label.
It is possible to implement your custom extras without having to hack the core
code. This can be done as follows:
colorjoe.registerExtra('text', (p, joe, o) => {
return {
change(col) {},
done(col) {}
};
})
Now you can simply pass your text
extra amongst the others and it will just
work.
Sites Using colorjoe
PRs are welcome!
Contributors
Hacking
npm i
npm start
serve
(or similar command) at project root
License
colorjoe is available under MIT. See LICENSE for more details.