Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including pick-at-it with all npm packages installed. Try it out:

var pickAtIt = require("pick-at-it")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

pick-at-it v0.0.1

a browserify module that exposes a color picker as a readable stream


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.
 .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.


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>

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'.


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.




RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free