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.
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.
Set the displayed mode to 'hsl' or 'slh'.
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.
MIT