# md-rainbow
**This is a fork of the awesome [md-color-picker project](https://github.com/brianpkelley/md-color-picker) by [Brian Kelley](https://github.com/brianpkelley).**

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

![preview](https://raw.githubusercontent.com/hayzey/md-rainbow/master/md-color-picker-2.png)


## Install
#### NPM
1. Download [tinycolor.js](https://github.com/bgrins/TinyColor) 1.2.1 or higher. Other versions may work, though 1.2.1 was used to develop this.
2. Install `md-rainbow`.
```bash
npm install md-rainbow
```

## Angular dependencies
- [Angular Material](https://material.angularjs.org)
- [ngCookies](https://docs.angularjs.org/api/ngCookies) (optional)

## Other dependencies
The only other dependency is [tinycolor.js](https://github.com/bgrins/TinyColor) which is an exceptional color manipulation library.

## Usage
- Include the css.
````html
<link href="path/to/md-rainbow/dist/mdRainbow.min.css" rel="stylesheet" />
````
- Include the javascript.
````html
<script src="path/to/tinycolor/dist/tinycolor-min.js"></script>
<script src="path/to/md-rainbow/dist/mdRainbow.min.js"></script>
````
- Add dependencies to your application (ngCookies is optional)
````javascript
var app = angular.module('myApp', ['ngMaterial','ngCookies', 'mdRainbow']);
````

- Place the directive wherever it is needed.  _note:_ this breaks the old version 0.1 as it now uses _ng-model_ instead of _value_
````html
<div md-rainbow ng-model="valueObj"></div>
````

## Options

Options may be set either by an options object on the `md-rainbow` 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**
```js
// Controller
$scope.scopeVariable.options = {
    label: "Choose a color",
    icon: "brush",
    default: "#f00",
    genericPalette: false,
    history: false
};
```
```html
<div md-rainbow="scopeVariable.options" ng-model="scopeVariable.color"></div>
```

**Setting options by attribute**
```html
<div
    md-rainbow
    ng-model="scopeVariable.color"
    label="Choose a color"
    icon="brush"
    default="#f00"
    md-color-generic-palette="false"
    md-color-history="false"
></div>
```

| Option Object name  	| Attribute Option name     	| Type        	| Default            	| Description                                                                                                                                                                                                                                          	|
|---------------------	|---------------------------	|-------------	|--------------------	|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------	|
| type                	| type                      	| Int         	| 0                  	| Default output type. 0: hex, 1: rgb, 2: hsl                                                                                                                                                                                                          	|
| label               	| label                     	| String      	| ""                 	| The lable for the input.                                                                                                                                                                                                                             	|
| icon                	| icon                      	| String      	| ""                 	| Material Icon name. https://design.google.com/icons/                                                                                                                                                                                                 	|
| random              	| random                    	| Boolean     	| false              	| Select a random color on open                                                                                                                                                                                                                        	|
| default             	| default                   	| Color       	| "rgb(255,255,255)" 	| Default color                                                                                                                                                                                                                                        	|
| openOnInput         	| open-on-input             	| Boolean     	| true               	| Open color picker when user clicks on the input field. If disabled, color picker will only open when clicking on the preview.                                                                                                                        	|
| hasBackdrop         	| has-backdrop              	| Boolean     	| true               	| Dialog Backdrop. https://material.angularjs.org/latest/api/service/$mdDialog                                                                                                                                                                         	|
| clickOutsideToClose 	| click-outside-to-close    	| Boolean     	| true               	| Dialog click outside to close. https://material.angularjs.org/latest/api/service/$mdDialog                                                                                                                                                           	|
| skipHide            	| skip-hide                 	| Boolean     	| true               	| Allows for opening multiple dialogs. https://github.com/angular/material/issues/7262                                                                                                                                                                 	|
| preserveScope       	| preserve-scope            	| Boolean     	| true               	| Dialog preserveScope. https://material.angularjs.org/latest/api/service/$mdDialog                                                                                                                                                                    	|
| okText            	| ok-text                   	| String     	| Select               	| Label for ok button.                         |
| cancelText        	| cancel-text               	| String     	| Cancel               	| Label for cancel button.                     | 
| clearButton         	| md-color-clear-button     	| Boolean     	| true               	| Show the "clear" button inside of the input.                                                                                                                                                                                                         	|
| preview             	| md-color-preview          	| Boolean     	| true               	| Show the color preview circle next to the input.                                                                                                                                                                                                     	|
| alphaChannel        	| md-color-alpha-channel    	| Boolean     	| true               	| Enable alpha channel.                                                                                                                                                                                                                                	|
| spectrum            	| md-color-spectrum         	| Boolean     	| true               	| Show the spectrum tab.                                                                                                                                                                                                                               	|
| sliders             	| md-color-sliders          	| Boolean     	| true               	| Show the sliders tab.                                                                                                                                                                                                                                	|
| genericPalette      	| md-color-generic-palette  	| Boolean     	| true               	| Show the generic palette tab.                                                                                                                                                                                                                        	|
| materialPalette     	| md-color-material-palette 	| Boolean     	| true               	| Show the material colors palette tab.                                                                                                                                                                                                                	|
| history             	| md-color-history          	| Boolean     	| true               	| Show the history tab.                                                                                                                                                                                                                                	|
| hex             	| md-color-hex          	| Boolean     	| true               	| Show the HEX values tab.                                                                                                                                                                                                                                	|
| rgb             	| md-color-rgb          	| Boolean     	| true               	| Show the RGB values tab.                                                                                                                                                                                                                                	|
| hsl             	| md-color-hsl          	| Boolean     	| true               	| Show the HSL values tab.                                                                                                                                                                                                                                	|
| defaultTab          	| md-color-default-tab      	| String, Int 	| "spectrum"         	| Which tab should be selected when opening.  Can either be a string or index.  If the value is an index, do not count hidden/disabled tabs. <ul><li>spectrum</li><li>sliders</li><li>genericPalette</li><li>materialPalette</li><li>history</li></ul> 	|