md-color-picker v0.2.6

md-color-picker

Angular-Material based color picker with no jQuery or other DOM/utility library dependencies.

Demo

Try out the demo here: GitHub Page

Install

NPM

1. Download tinycolor.js 1.2.1 or higher. Other versions may work, though 1.2.1 was used to develop this.
2. Install md-color-picker.

npm install md-color-picker

Bower (includes tinycolor.js):

bower install md-color-picker

Angular dependencies

• Angular Material
• ngCookies (optional)

Other dependencies

The only other dependency is tinycolor.js which is an exceptional color manipulation library.

Usage

• Include the css.

<link href="path/to/md-color-picker/dist/mdColorPicker.min.css" rel="stylesheet" />

• Include the javascript.

<script src="path/to/tinycolor/dist/tinycolor-min.js"></script>
<script src="path/to/md-color-picker/dist/mdColorPicker.min.js"></script>

• Add dependencies to your application (ngCookies is optional)

var app = angular.module('myApp', ['ngMaterial','ngCookies', 'mdColorPicker']);

• Place the directive wherever it is needed. note: this breaks the old version 0.1 as it now uses ng-model instead of value

<div md-color-picker ng-model="valueObj"></div>

Options

Options may be set either by an options object on the md-color-picker attribute and/or using attributes. If an option is present on both the options object and as an attribute, the attribute will take precedence.

Setting options by scope object

// Controller
$scope.scopeVariable.options = {
    label: "Choose a color",
    icon: "brush",
    default: "#f00",
    genericPalette: false,
    history: false
};

<div md-color-picker="scopeVariable.options" ng-model="scopeVariable.color"></div>

Setting options by attribute

<div
    md-color-picker
    ng-model="scopeVariable.color"
    label="Choose a color"
    icon="brush"
    default="#f00"
    md-color-generic-palette="false"
    md-color-history="false"
></div>

Disclaimer

This is still in a very early beta, and is rapidly changing (3 versions before initial commit). I am open to any and all help anyone is willing to put in. Will update as we go.

Known issues / TODO

• Prevent focus from opening color picker on window/tab activation.
• Focus on preview input when user starts typing.
• Clean up code.
  • Javascript
  • CSS / LESS
  • Build script cleaned up and static server integrated for development