simonwep / gpickr

Demo of pickr integrated into another widget. A gradient-picker.

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());
});