Home

Awesome

Grapick

Easy configurable gradient picker, with no dependencies.

<p align="center"><img src="https://artf.github.io/grapick/assets/img/grapick.jpg" align="center"/></p>

Demo

Download

You can download the file from here (CSS), via npm i grapick or directly from the /dist folder of this repo

Usage

<link rel="stylesheet" href="path/to/grapick.min.css">
<script src="path/to/grapick.min.js"></script>

<div id="gp"></div>

<script type="text/javascript">
  const gp = new Grapick({el: '#gp'});

  // Handlers are color stops
  gp.addHandler(0, 'red');
  gp.addHandler(100, 'blue');

  // Do stuff on change of the gradient
  gp.on('change', complete => {
    document.body.style.background = gp.getSafeValue();
  })
</script>

Configurations

Add custom color picker

Grapick is color picker independent and uses the browser's native one, by default, just to make it more accessible, but you can easily switch it with one of your choices (recommended as not all browsers support properly input[type=color]).

In the example below we use spectrum color picker just as the proof of concept

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css">

<div id="gp"></div>

<script type="text/javascript">
  const gp = new Grapick({
    el: '#gp',
    colorEl: '<input id="colorpicker"/>' // I'll use this for the custom color picker
  });

  gp.setColorPicker(handler => {
    const el = handler.getEl().querySelector('#colorpicker');
    const $el = $(el);

    $el.spectrum({
        color: handler.getColor(),
        showAlpha: true,
        change(color) {
          handler.setColor(color.toRgbString());
        },
        move(color) {
          handler.setColor(color.toRgbString(), 0);
        }
    });

    // return a function in order to destroy the custom color picker
    return () => {
      $el.spectrum('destroy');
    }
  });
</script>

Events

Available events

Development

Clone the repository and enter inside the folder

$ git clone https://github.com/artf/grapick.git
$ cd grapick

Install it

$ npm i

Start the dev server

$ npm start

API

API Reference here

Testing

Run tests

$ npm test

Run and watch tests

$ npm run test:dev

License

MIT