Overview

ldcolorpicker is a Palette-aware color picker module with following features:

• Load palette on the fly
• Share palette across pickers
• vanilla JS / jQuery / AngularJS / ReactJS compatible
• highly configurable


Tiny palette




Circle Palette
Default palette

Usage

Download and include ldcp.min.js and ldcp.css file of ldcolorpicker:

<link rel="stylesheet" type="text/css" href="ldcp.css"/>
<script type="text/javascript" src="ldcp.js"></script>

Add data-toggle="ldcolorpicker" in the input box you want to apply ldcolorpicker, e.g.:

<input type="input" data-toggle="ldcolorpicker">

and initialize with following script:

<script type="text/javascript">
  ldcolorpicker.init();
</script>

then you will have a input box like this:

Different Types of Element

It's possible to trigger color picker with elements other than input box; for example, a button or link:

<button data-toggle="ldcolorpicker"> Toggle </button>
<a href="#" data-toggle="ldcolorpicker"> Toggle </a>

Here is an example of button-triggered color picker:

Configuration

It's possible to configure color picker widget with attributes of HTML tags. Let's take a look of what can be done.

Styling

Use data-classname to config color picker style:

data-classname will be applied to the class of ldcolorpicker's root element, so you can use it add your own customization to ldcolorpicker. For example:

<style type="text/css">
  .ldcolorpicker.mystyle { background: #f00 }
</style>
<input type="text" data-toggle="ldcolorpicker" data-classname="mystyle">

ldcolorpicker provides several default decorating class:

Styling Example

Here are examples you can use as a start point. First Begins with <div class="ldcolorpicker , and followed by ...

Readonly Mode

You can use data-classname="palette-only" to constrain user to only choose colors from your palette:

<input type="text data-toggle="ldcolorpicker" data-classname="palette-only">

In fact, what palette-only do is hiding some elements by CSS rules. It's possible to configure the color picker widget by overwriting its CSS rules. Check the DOM structure of the widget if you want to make your own configuration.

Share Palette

By default, every color picker shares the same palette. Change to color of palette will affect every input box that uses this palette. Try changing color in one of the input box below:

You can force input boxes to use different palettes by giving them a different context with data-context:

<input type="text" data-toggle="ldcolorpicker" data-context="palette1">
<input type="text" data-toggle="ldcolorpicker" data-context="palette2">

With above configuration, input box will have their own context. Try changing color in one of the input box below again, this time input box will not affect each other:

Sometimes it's useful to have a randomly named context; in this case, use 'random' as the context name:

<input type="text" data-toggle="ldcolorpicker" data-context="random">
<input type="text" data-toggle="ldcolorpicker" data-context="random">
<input type="text" data-toggle="ldcolorpicker" data-context="random">
<input type="text" data-toggle="ldcolorpicker" data-context="random">

Above input boxs will all have different context.

Index of Color

By default, every color picker use the first color in a palette. we can use zero-based data-idx to change default index of color:

<input type="text" data-toggle="ldcolorpicker" data-idx="2">
<input type="text" data-toggle="ldcolorpicker" data-idx="3">

the input boxes below use different slot of the palette, so changing one won't affect the other:

Predefined Palette

You can set a predefined palette by setting data-palette attribute. It can be a space-separated hex codes, an array of hex code, or an URL:

<input data-toggle="ldcolorpicker" data-palette="#ff0000 #00ff00 #0000f">
<input data-toggle="ldcolorpicker" data-palette="['#f0f000','#00f0f0','#f000f0']">
<input data-toggle="ldcolorpicker" data-palette="http://loading.io/palette/559087d71deb8c3a54548932">

will be like these:

when using URL as predefined palette source, it should point to a URL which respond with a JSON file in following format:

{
  colors: [
    {hex: "#000000"}, // represented in 6 digits hex code 
    {hex: "#000000"},
    ...
  ]
}

Note that if multiple predefined palettes are given for the same context, only one of them will be used.

Event Handling

use data-oncolorchange to handle color change event. For example, following code:

<input data-toggle="ldcolorpicker" data-oncolorchange="this.style.color=color" data-classname="shadow round">

will lead to this:

and use data-onpalettechange to handle palette change event:

<input data-toggle="ldcolorpicker" data-onpalettechange="this.style.color=color" data-classname="shadow round">

APIs

ldcolorpicker provides APIs for vanilla JS, jQuery and AngularJS.

Vanilla JS

You can also intialize specific node with ldcolorpicker directly by JS:

new ldcolorpicker(document.getElementById("#some-inputbox"),{});

the second parameter is a config object with following options:

an sample config object is like this:

{
  context: 'sample',
  class: 'round shadow',
  oncolorchange: function(color) { this.style.color = color; }
}

you can access color information by the ldcolorpicker object, or by getAttribute of the element:

var node = document.getElementById("#some-node");

/* Initialize Color Picker */
var ldcp = new ldcolorpicker(node, {});

/* Retrieve color */
var color = node.getAttribute("data-color");
color = ldcp.getHexString();

/* Retrieve index of this color in palette */
var idx = node.getAttribute("data-idx");
idx = ldcp.getIdx();

/* Retrieve Palette */
var palette = ldcp.getPalette();

listen to change event for color changing:

ldcp.on("change", function(color) {
  console.log(color);
});

Following example shows a button change its color according to the value of color picker:

<button id="btn-color">■</div>
<script type="text/javascript">
var node = document.getElementById("btn-color");
var ldcp = new ldcolorpicker(node);
ldcp.on("change",function(color) { node.style.color = ldcolor.web(color); });
</script>

Result will be like this:

For those elements initialized by data-toggle="ldcolorpicker", you can retrieve their ldcolorpicker objects via element.getColorPicker() function:

<input id="inputbox" type="text" data-toggle="ldcolorpicker">
<script type="text/javascript">
var node = document.getElementById("inputbox");
var ldcp = node.getColorPicker();
</script>

A summary of programming interface is as follow.

Host Element

ColorPicker Object