Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    pick-at-itpublic

    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

    Keywords

    none

    install

    npm i pick-at-it

    Downloadsweekly downloads

    1

    version

    0.0.1

    license

    none

    repository

    githubgithub

    last publish

    collaborators

    • avatar