Skip to content
This repository has been archived by the owner on May 25, 2020. It is now read-only.
/ gpickr Public archive

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

License

Notifications You must be signed in to change notification settings

simonwep/gpickr

Repository files navigation

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

About

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

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published