Skip to content
Demo of pickr integrated into another widget. A gradient-picker.
JavaScript CSS HTML
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src Apply default positions on linear and radial gradient Aug 20, 2019
st Add radial controls Jul 18, 2019
.babelrc Setup bare construct; Add gradient-preview and render function Jul 14, 2019
.editorconfig Initial commit Jul 14, 2019
.eslintrc Visually show active radial-gradient position Aug 20, 2019
.gitignore Move mode-toggle button into preview Jul 15, 2019
LICENSE Initial commit Jul 14, 2019
README.md Add setRadialPosition and setLinearAngle functions Aug 20, 2019
index.html Add stops option; Add README; Add dist files Jul 15, 2019
package-lock.json Update dependencies Aug 18, 2019
package.json Update dependencies Aug 18, 2019
webpack.config.js Setup bare construct; Add gradient-preview and render function Jul 14, 2019

README.md

Demo: https://simonwep.github.io/gpickr

This is a demo of how pickr could be implemented / integrated in other scenarios.

Usage

const gpickr = new GPickr({
    el: '.gradient-pickr',
    
    // Pre-defined stops. These are the default since at least two should be defined
    stops: [
        ['rgb(255,132,109)', 0],
        ['rgb(255,136,230)', 1]
    ]
})

GPickr Instance / static props

  • gpickr.Pickr - Pickr.
  • gpickr.addStop(color:String, loc:Number) - Add a color-stop.
  • gpickr.removeStop(v:String|Number|Stop) - Remove a color stop by color, location or stop-instance.
  • gpickr.getGradient() - Returns the current gradient as css string.
  • gpickr.getStops() - Array of stop objects with each a location between 0 and 1 as well as an rgba color value. The toString function is overridden and returns the array ready-to-use as comma seperated list, useful if a custom direcation / angle want to be used.
  • gpickr.getLinearAngle() - Returns the current selected angle. -1 if currently in radial-mode
  • gpickr.setLinearAngle(angle:Number) - Applies a new angle to the current linear gradient.
  • gpickr.getRadialPosition() - Returns the current chosen direction. null if currently in linear-mode
  • gpickr.setRadialPosition(position:String) - Sets a new position for the current radial-gradient.
  • gpickr.on(event:String, cb:Function) - Appends an event listener to the given corresponding event-name (see section Events), returns the gpickr instance so it can be chained.
  • gpickr.off(event:String, cb:Function) - Removes an event listener from the given corresponding event-name (see section Events), returns the gpickr instance so it can be chained.

Events

Event Description
init Initialization done - gpickr can be used
change User changed the gradient

Example:

gpickr.on('init', instance => {
    console.log('init', instance);
}).on('change', instance => {
    console.log('change', instance.getGradient());
});
You can’t perform that action at this time.