Package Exports

grapick

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (grapick) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Grapick

Easy configurable gradient picker, with no dependencies.

Demo

Download

Download the file from here (CSS), via npm i grapick or get it directly from the /dist folder

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
  gp.on('change', complete => {
    document.body.style.background = gp.getSafeValue();
  })
</script>

Extend color picker

Grapick uses the browser's native color picker by default

Events

Available events

change - Gradient is changed
handler:drag:start - Started dragging the handler
handler:drag - Dragging the handler
handler:drag:end - Stopped dragging the handler
handler:select - Handler selected
handler:deselect - Handler deselected
handler:add - New handler added
handler:remove - Handler removed
handler:color:change - The color of the handler is changed
handler:position:change - The position of the handler is changed

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