<commit_before># HtmlPalette 

An HTML5 color picker designed to be intuitive and easy to use. Comes in square and radial versions.

[Live demo](https://stevenvergenz.github.io/html-palette/) [Minified](./build/html-palette.min.js) [Uncompressed](./build/html-palette.js)

![Square picker](./docs/palette-square.png) ![Radial picker](./docs/palette-radial.png)


## Examples

### Vanilla JS

```javascript
var trigger = document.getElementById('picker');
var palette = new HtmlPalette(trigger, {
	initialColor: '49cc29',
	colorCallback: function(color){
		trigger.style['background-color'] = '#'+color.hex;
	}
});
```

### jQuery

```javascript
$('#picker').HtmlPalette({
	initialColor: {h:0, s:0.8, v:0.8},
	colorCallback: function(color){
		this.triggerElem.style['background-color'] = '#'+color.hex;
	}
});
```

### Angular.js

```javascript
angular.module('myApp', ['html-palette'])
	.controller('MyController', function($scope){
		$scope.color = {r: 0.8, g: 0.3, b: 1.0};
	});
```

```html
<div ng-app='myApp'>
	<div ng-controller='MyController'>
		<html-palette rgb-color='color'></html-color>
	</div>
</div>
```

## Usage

Include the script on your page, and you're ready to go.

```html
<script type='text/javascript' src='html-palette.min.js'></script>
```

The constructor for HtmlPalette has three forms, depending on what library you want to use for your workflow. They all take two things though: a trigger element and an options object. When the trigger element's `click` event is fired, the color picker will appear next to it. The available options are detailed in the Options section below.

* **Vanilla Javascript**:

	```
	var palette = new HtmlPalette(trigger, options);
	```

* **jQuery**:
	
	```
	$(trigger).HtmlPalette(options);
	```

* **Angular.js**:

	The picker takes the form of a directive, so you can add it straight into your HTML, no Javascript required. The scope variable referred to by one of the attributes `hsv-color`, `rgb-color`, or `hex-color` (use only one) is bi-directionally bound to the picker's selected color, in the format specified by the attribute. Additional attributes are mapped to options in the usual Angular fashion: hyphenated to camel-case.

	```
	<html-palette hex-color='myColor'></html-palette>
	```

## Color Representations

This library uses three different representations for colors:

* 24-bit hexidecimal, e.g. `ffcc00`
* RGB object, with channel values in interval [0,1], e.g. `{r:1, b:0.75, g:0}`
* HSV object, with channel values in interval [0,1], e.g. `{h:0, s:0.75, v:0.8}`<commit_msg>Minor readme clarifications<commit_after># HtmlPalette 

An HTML5 color picker designed to be intuitive and easy to use. Comes in square and radial versions.

[Live demo](https://stevenvergenz.github.io/html-palette/) [Minified](https://raw.githubusercontent.com/stevenvergenz/html-palette/master/build/html-palette.min.js) [Uncompressed](https://raw.githubusercontent.com/stevenvergenz/html-palette/master/build/html-palette.js)

![Square picker](./docs/palette-square.png) ![Radial picker](./docs/palette-radial.png)


## Examples

### Vanilla JS

```javascript
var trigger = document.getElementById('picker');
var palette = new HtmlPalette(trigger, {
	initialColor: '49cc29',
	colorCallback: function(color){
		trigger.style['background-color'] = '#'+color.hex;
	}
});
```

### jQuery

```javascript
$('#picker').HtmlPalette({
	initialColor: {h:0, s:0.8, v:0.8},
	colorCallback: function(color){
		this.triggerElem.style['background-color'] = '#'+color.hex;
	}
});
```

### Angular.js

```javascript
angular.module('myApp', ['html-palette'])
	.controller('MyController', function($scope){
		$scope.color = {r: 0.8, g: 0.3, b: 1.0};
	});
```

```html
<div ng-app='myApp'>
	<div ng-controller='MyController'>
		<html-palette rgb-color='color'></html-color>
	</div>
</div>
```

## Usage

Include the script on your page, and you're ready to go.

```html
<script type='text/javascript' src='html-palette.min.js'></script>
```

The constructor for HtmlPalette has three forms, depending on what library you want to use for your workflow. They all take two things though: a trigger element and an options object. When the trigger element's `click` event is fired, the color picker will appear next to it. The available options are detailed in the Options section below.

* **Vanilla Javascript**:

	Construct an instance, and interact with it directly.

	```javascript
	var palette = new HtmlPalette(trigger, options);
	palette.destroy();
	```

* **jQuery**:

	Initialize and interact using the jQuery extension.

	```javascript
	$(trigger).HtmlPalette(options);
	$(trigger).HtmlPalette('radial', true);
	$(trigger).HtmlPalette('destroy');
	```

* **Angular.js**:

	The picker takes the form of a directive, so you can add it straight into your HTML, no Javascript required. The scope variable referred to by one of the attributes `hsv-color`, `rgb-color`, or `hex-color` (use only one) is bi-directionally bound to the picker's selected color, in the format specified by the attribute. Additional attributes are mapped to options in the usual Angular fashion: hyphenated to camel-case.

	```html
	<html-palette hex-color='myColor' popup-edge='nw'></html-palette>
	```

## Color Representations

This library uses three different representations for colors:

* 24-bit hexidecimal string, e.g. `'ffcc00'`
* RGB object, with channel values in interval [0,1], e.g. `{r:1, b:0.75, g:0}`
* HSV object, with channel values in interval [0,1], e.g. `{h:0, s:0.75, v:0.8}`
{'fraction_non_alphanumeric': 0.15473817720601557, 'fraction_numerical': 0.012683457148034065, 'mean_word_length': 4.835095137420719, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 23, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1230303', 'n_tokens_mistral': 1875, 'n_tokens_neox': 1762, 'n_words': 559}