Package Exports

piklor.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (piklor.js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

piklor.js

A tiny JavaScript color picker library.

Usage

<script src="path/to/piklor.js"></script>
<div class="col-lg-6 picker-wrapper">
    <button class="btn btn-default">Select color</button>
    <div class="color-picker">
    </div>
</div>
<script>
window.addEventListener("load", function () {
    var pk = new Piklor(".color-picker", [
            "#1abc9c"
          , "#2ecc71"
          , "#3498db"
          , "#9b59b6"
          , "#34495e"
          , "#16a085"
          , "#27ae60"
          , "#2980b9"
          , "#8e44ad"
          , "#2c3e50"
          , "#f1c40f"
          , "#e67e22"
          , "#e74c3c"
          , "#ecf0f1"
          , "#95a5a6"
          , "#f39c12"
          , "#d35400"
          , "#c0392b"
          , "#bdc3c7"
          , "#7f8c8d"
        ], {
            open: ".picker-wrapper .btn"
        })
      , wrapperEl = pk.getElm(".picker-wrapper")
      , header = pk.getElm("header")
      , footer = pk.getElm("footer")
      ;

    pk.colorChosen(function (col) {
        wrapperEl.style.backgroundColor = col;
        header.style.backgroundColor = col;
        footer.style.backgroundColor = col;
    });
});
</script>

Documentation

`Piklor(sel, colors, options)`

Creates a new Piklor instance.

Params

String|Element sel: The element where the color picker will live.
Array colors: An array of strings representing colors.
Object options: An object containing the following fields:
open (String|Element): The HTML element or query selector which will open the picker.
openEvent (String): The open event (default: "click").
style (Object): Some style options:
- display (String): The display value when the picker is opened (default: "block").
template (String): The color item template. The {color} snippet will be replaced with the color value (default: "<div data-col=\"{color}\" style=\"background-color: {color}\"></div>").
autoclose (Boolean): If false, the color picker will not be hided by default (default: true).
closeOnBlur (Boolean): If true, the color picker will be closed when clicked outside of it (default: false).

Return

Piklor The Piklor instance.

`getElm(el)`

Finds the HTML element.

Params

String|Element el: The HTML element or query selector.

Return

HTMLElement The selected HTML element.

`render()`

Renders the colors.

`close()`

Closes the color picker.

`open()`

Opens the color picker.

`colorChosen(cb)`

Adds a new callback in the colorChosen callback buffer.

Params

Function cb: The callback function called with the selected color.

`set(c, p)`

Sets the color picker color.

Params

String c: The color to set.
Boolean p: If false, the colorChosen callbacks will not be called.

How to contribute

File an issue in the repository, using the bug tracker, describing the contribution you'd like to make. This will help us to get you started on the right foot.
Fork the project in your account and create a new branch: your-great-feature.
Commit your changes in that branch.
Open a pull request, and reference the initial issue in the pull request message.

License

See the LICENSE file.