zyll / yacp

Yet Another Colors Picker. Workflow: choose a predefined color or add a new one to your preset.

Backbone Yacp

Usage

Your not from the past :

npm install zyll/yacp

yacp deps :

jquery, backbone and underscore should be resolved via require

Exemple

  <p id="color">
    <span class='color'></span>
    <input placeholder='Color...'/>
  </p>

  require('backbone.yacp')
  var users = [];
  var $el = $('#color');
  var color = new Yacp.Input({
    el: $el,
    users: users,
    input: $el.find('input'),
    color: $el.find('.color'),
    minicolors: {
      opacity: true
    }
  });
  color.render();
  color.on('select', function(color) {
    $('#myColor').css('background-color', color).text(color);
  });

Developers

Dependencies

• node
• grunt

custom ui color picker fallback on jquery minicolors.

Install

Run npm install && npm test

Testing

Run grunt to transpile and execute the specs.

You can watch for file modfication with grunt watch.

Credits

Copyright (c) 2013 af83

Released under the MIT license

yacp's Issues

style should be in a dedicated file

Extract css from the exemple file. Add a notice in the readme to include style.

preview the current color when custom mode

when custom in current mode, selecting a color is a blind process. A preview zone should display the current color.

I18N

There is some words here and there. Need some docs/exemple on how to config them.
May be some fix will be needed.

Applying a yacp should be easyer

For now we need too much line to instanciate a yacp on an input (see index.hmtl). Providing a one line method will simplify user apps code.

test is low.

Need more tests on cutoms choice path.

open yacp on visual feedback element clicking

Same behaviour when clicking on input element.

minicolors options and mentions

• Mentions minicolors in README.
• Minicolors has some config, it could be great to expose a way to customize it.

default color

Starting Yacp with a color isn't possible. Input always start with an empty field.

Get out without any choice.

I want to stop selecting a color and keep the current one.
We need a cancel button at the 2 stages.