Package Exports

pick-at-it

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 (pick-at-it) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

pick-at-it

Streamable color picker for browserify.

var color = require('onecolor')
  , picker = require('pick-at-it')
  , domnode = require('domnode-dom')
  , through = require('through')

var e = document.getElementById('content')
  , o = document.getElementById('color')

var c = color('#FF00FF')
  , p = picker(e, c, 'hsl')
  , toHTML

toHTML = through(function(color) {
  this.emit('data', div(color))
})

// turn color objects into HTML
// then shove them into the DOM.
p.pipe(toHTML)
 .pipe(domnode.createWriteStream(o, 'text/html'))

NB: Any color library that provides the same interface as onecolor will work -- and you must provide an initial color to the picker.

API

picker(element, color, 'hsl' | 'slh') -> p

Given a native DOM element, default color, and default mode, initialize the color picker.

<!-- example html

assuming that you pass document.getElementById('target') into
picker(), your html should look something like this:

 -->
<div id="target">
    <div name="primary"></div>
    <div name="secondary"></div>
</div>

Picker will use el.querySelector to search for two elements, [name=primary] and [name=secondary], and create a fffield instance for each (which implies that it will create a new div.cursor element in each matching element).

Picker is a readable and writable stream.

Picker will use CSS3 background gradients to create the desired color fields.

p.set_mode('hsl' | 'slh') -> undefined

Set the displayed mode to 'hsl' or 'slh'.

Testing

npm test will run the tests in a jsdom environment.

You may use browservefy to quickly test out changes to the code in a browser:

$ npm install -g browservefy
$ git clone <this repo>
$ cd <this repo>
$ browservefy test/example.js 8998 -- -d
# now open http://localhost:8998/test/index.html to play with
# the picker.

License

MIT