Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@raghavendradabbir/mycolorpicker
Advanced tools
Readme
mycolorpicker 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.
npm i mycolorpicker
If you prefer a standalone dist, add prepackaged dist/mycolorpicker.js
and css/mycolorpicker.css
to your page or use AMD to load
the dependencies from src/
.
const joe = mycolorpicker.rgb(element_id_or_dom_object, initial_color_value, extras);
or
const joe = mycolorpicker.hsl(element_id_or_dom_object, initial_color_value, extras);
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.
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, mycolorpicker provides a few extras. The following example shows how to use them:
const joe = mycolorpicker.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:
mycolorpicker.registerExtra('text', (p, joe, o) => {
// attach new elements to p element here (as children that is)
// o is optional and will contain any parameters you might have
// passed to the extra using the array syntax
// optional return. these are triggered by mycolorpicker
// use this way instead of joe.on
return {
change(col) {},
done(col) {}
};
})
Now you can simply pass your text
extra amongst the others and it will just
work.
PRs are welcome!
done
fixblack
done
callback is fired for extras. Add validation to extra fields to avoid exceptions from one-color.done
correctly for alpha slider.onecolor
to package.json
so that mycolorpicker works with Browserifynpm i
npm start
serve
(or similar command) at project rootmycolorpicker is available under MIT. See LICENSE for more details.
FAQs
Scaleable color picker
The npm package @raghavendradabbir/mycolorpicker receives a total of 196 weekly downloads. As such, @raghavendradabbir/mycolorpicker popularity was classified as not popular.
We found that @raghavendradabbir/mycolorpicker demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.