<NME> README.md
<BEF> # evol-colorpicker &middot; [![GitHub license](https://img.shields.io/github/license/evoluteur/colorpicker)](https://github.com/evoluteur/colorpicker/blob/master/LICENSE.md) [![npm version](https://img.shields.io/npm/v/evol-colorpicker)](https://www.npmjs.com/package/evol-colorpicker)

**evol-colorpicker** is a web color picker which looks like the one in Microsoft Office 2010.
It can be used inline or as a popup bound to a text box.
It comes with several color palettes, can track selection history and supports "transparent" color.
It is a full jQuery UI widget, supporting various configurations and themes.

![screenshot 1](https://raw.github.com/evoluteur/colorpicker/master/screenshot1.png) &nbsp; ![screenshot 2](https://raw.github.com/evoluteur/colorpicker/master/screenshot2.png) &nbsp; ![screenshot 3](https://raw.github.com/evoluteur/colorpicker/master/screenshot3.png)

Check the [online demo](https://evoluteur.github.io/colorpicker/index.html) for several examples.

### Table of Contents

1. [Installation](#Installation)
First, load [jQuery](http://jquery.com/) (v1.7 or greater), [jQuery UI](http://jqueryui.com/) (v1.8 or greater), and the plugin:

```html
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/evol.colorpicker.min.js" type="text/javascript" charset="utf-8"></script>
```

The widget requires a jQuery UI theme to be present, as well as its own included base CSS file ([evol.colorpicker.css](http://github.com/evoluteur/colorpicker/raw/master/css/evol.colorpicker.css)). Here we use the "ui-lightness" theme as an example:

```html
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/ui-lightness/jquery-ui.css">
    <link href="css/evol.colorpicker.css" rel="stylesheet" type="text/css">
```

Now, let's attach it to an existing `<input>` tag:

```html
    <script type="text/javascript">
        $(document).ready(function() {
            $("#mycolor").colorpicker();
        });
    </script>

    <input style="width:100px;" id="mycolor" />
```

This will wrap it into a "holder" `<div>` and add another `<div>` beside it for the color box:

```html
	<div style="width:128px;">
	   <input style="width:100px;" id="mycolor" class="colorPicker evo-cp0" />
	   <div class="evo-colorind" style="background-color:#8db3e2"></div>
	</div>
```

Using the same syntax, the widget can also be instanciated on a `<div>` or a `<span>` tag to show inline. In that case the generated HTML is the full palette.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/evol-colorpicker.min.js" type="text/javascript" charset="utf-8"></script>
```

The widget requires a jQuery UI theme to be present, as well as its own included base CSS file ([evol-colorpicker.css](http://github.com/evoluteur/colorpicker/raw/master/css/evol-colorpicker.css)). Here we use the "ui-lightness" theme as an example:

```html
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css">
<link href="css/evol-colorpicker.css" rel="stylesheet" type="text/css">
```

Now, let's attach it to an existing `<input>` tag:
Used to set the default color value.

```javascript
    $("#mycolor").colorpicker({
        color: "#ffffff"
    });
```

Defaults to *null*.
```

This will wrap it into a "holder" `<div>` and add another `<div>` beside it for the color box:
Used to track selection history (shared among all instances of the colorpicker).

```javascript
    $("#mycolor").colorpicker({
        history: false
    });
```

Defaults to *true*.


<a name="Theming"></a>
Used to show color value on hover and click inside the palette.

```javascript
    $("#mycolor").colorpicker({
        displayIndicator: false
    });
```

Defaults to *true*.
## Options

evol-colorpicker provides several options to customize its behaviour:

This option only takes effect when the color picker is instanciated on a textbox.

```javascript
    $("#mycolor").colorpicker({
        showOn: "button"
    });
```

Defaults to *"both"*.

Defaults to *null*.

Used to translate the widget. It is a coma separated list of all labels used in the UI. 

```javascript
    $("#mycolor").colorpicker({
        strings: "Couleurs de themes,Couleurs de base,Plus de couleurs,Moins de couleurs,Palette,Historique,Pas encore d'historique."
    });
```

Defaults to *"Theme Colors,Standard Colors,More Colors,Less Colors,Back to Palette,History,No history yet."*.

Defaults to *theme*.

### displayIndicator (Boolean)

This event is triggered when a color is selected.

```javascript
    $("#mycolor").on("change.color", function(event, color){
        $('#title').css('background-color', color);
    });
```

### mouseover.color

This event is triggered when the mouse mouves over a color box on the palette.

```javascript
    $("#mycolor").on("mouseover.color", function(event, color){
        $('#title').css('background-color', color);
    });
```


```

Defaults to *false*.
Get the currently selected color value (returned as a string).

```javascript
    $("#mycolor").colorpicker("enable");
```

### disable()
Get the currently selected color value (returned as a string).

```javascript
    $("#mycolor").colorpicker("disable");
```

### isDisabled()
Get the currently selected color value (returned as a string).

```javascript
    $("#mycolor").colorpicker("isDisabled");
```

### val([color])
Get or set the currently selected color value (as a string, ie. "#d0d0d0").

```javascript
    $("#mycolor").colorpicker("val");

    $("#mycolor").colorpicker("val", "#d0d0d0");
```

### showPalette()
Show the palette (when using the widget as a popup).

```javascript
    $("#mycolor").colorpicker("showPalette");
```

### hidePalette()
Hide the palette (when using the widget as a popup).

```javascript
    $("#mycolor").colorpicker("hidePalette");
```

## Browser Support
    strings: "Couleurs de themes,Couleurs de base,Plus de couleurs,Moins de couleurs,Palette,Historique,Pas encore d'historique."
});
```

Defaults to *"Theme Colors,Standard Colors,Web Colors,Theme Colors,Back to Palette,History,No history yet."*.

### transparentColor (Boolean)

Allow for selection of the "transparent color". The hexadecimal value for the transparent color is "#0000ffff".

```javascript
$("#mycolor").colorpicker({
    transparentColor: true
});
```

Defaults to *false*.


<a name="Methods"></a>

## Methods

### clear()
Clears the color value (and close the popup palette if opened).

```javascript
$("#mycolor").colorpicker("clear");
```

### enable()
Get the currently selected color value (returned as a string).

```javascript
$("#mycolor").colorpicker("enable");
```

### disable()
Get the currently selected color value (returned as a string).

```javascript
$("#mycolor").colorpicker("disable");
```

### isDisabled()
Get the currently selected color value (returned as a string).

```javascript
$("#mycolor").colorpicker("isDisabled");
```

### val([color])
Get or set the currently selected color value (as a string, ie. "#d0d0d0").

```javascript
var colorValue = $("#mycolor").colorpicker("val");

$("#mycolor").colorpicker("val", "#d0d0d0");
```

### showPalette()
Show the palette (when using the widget as a popup).

```javascript
$("#mycolor").colorpicker("showPalette");
```

### hidePalette()
Hide the palette (when using the widget as a popup).

```javascript
$("#mycolor").colorpicker("hidePalette");
```

<a name="Events"></a>

## Events

### change.color

This event is triggered when a color is selected.

```javascript
$("#mycolor").on("change.color", function(event, color){
    $('#title').css('background-color', color);
});
```

### mouseover.color

This event is triggered when the mouse moves over a color box on the palette.

```javascript
$("#mycolor").on("mouseover.color", function(event, color){
    $('#title').css('background-color', color);
});
```

<a name="License"></a>

## License

Copyright (c) 2022 [Olivier Giulieri](https://evoluteur.github.io/).

**evol-colorpicker** is released under the [MIT license](http://github.com/evoluteur/colorpicker/raw/master/LICENSE.md).

<MSG> Removed indentation for code samples.

<DFF> @@ -15,37 +15,37 @@ Check the [demo](http://evoluteur.github.com/colorpicker/index.html) for several
 First, load [jQuery](http://jquery.com/) (v1.7 or greater), [jQuery UI](http://jqueryui.com/) (v1.8 or greater), and the plugin:
 
 ```html
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
-    <script src="js/evol.colorpicker.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="js/evol.colorpicker.min.js" type="text/javascript" charset="utf-8"></script>
 ```
 
 The widget requires a jQuery UI theme to be present, as well as its own included base CSS file ([evol.colorpicker.css](http://github.com/evoluteur/colorpicker/raw/master/css/evol.colorpicker.css)). Here we use the "ui-lightness" theme as an example:
 
 ```html
-    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/ui-lightness/jquery-ui.css">
-    <link href="css/evol.colorpicker.css" rel="stylesheet" type="text/css">
+<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/ui-lightness/jquery-ui.css">
+<link href="css/evol.colorpicker.css" rel="stylesheet" type="text/css">
 ```
 
 Now, let's attach it to an existing `<input>` tag:
 
 ```html
-    <script type="text/javascript">
-        $(document).ready(function() {
-            $("#mycolor").colorpicker();
-        });
-    </script>
+<script type="text/javascript">
+    $(document).ready(function() {
+        $("#mycolor").colorpicker();
+    });
+</script>
 
-    <input style="width:100px;" id="mycolor" />
+<input style="width:100px;" id="mycolor" />
 ```
 
 This will wrap it into a "holder" `<div>` and add another `<div>` beside it for the color box:
 
 ```html
-	<div style="width:128px;">
-	   <input style="width:100px;" id="mycolor" class="colorPicker evo-cp0" />
-	   <div class="evo-colorind" style="background-color:#8db3e2"></div>
-	</div>
+<div style="width:128px;">
+   <input style="width:100px;" id="mycolor" class="colorPicker evo-cp0" />
+   <div class="evo-colorind" style="background-color:#8db3e2"></div>
+</div>
 ```
 
 Using the same syntax, the widget can also be instanciated on a `<div>` or a `<span>` tag to show inline. In that case the generated HTML is the full palette.
@@ -65,9 +65,9 @@ evol.colorpicker provides several options to customize its behaviour:
 Used to set the default color value.
 
 ```javascript
-    $("#mycolor").colorpicker({
-        color: "#ffffff"
-    });
+$("#mycolor").colorpicker({
+    color: "#ffffff"
+});
 ```
 
 Defaults to *null*.
@@ -77,9 +77,9 @@ Defaults to *null*.
 Used to track selection history (shared among all instances of the colorpicker).
 
 ```javascript
-    $("#mycolor").colorpicker({
-        history: false
-    });
+$("#mycolor").colorpicker({
+    history: false
+});
 ```
 
 Defaults to *true*.
@@ -89,9 +89,9 @@ Defaults to *true*.
 Used to show color value on hover and click inside the palette.
 
 ```javascript
-    $("#mycolor").colorpicker({
-        displayIndicator: false
-    });
+$("#mycolor").colorpicker({
+    displayIndicator: false
+});
 ```
 
 Defaults to *true*.
@@ -102,9 +102,9 @@ Have the colorpicker appear automatically when the field receives focus ("focus"
 This option only takes effect when the color picker is instanciated on a textbox.
 
 ```javascript
-    $("#mycolor").colorpicker({
-        showOn: "button"
-    });
+$("#mycolor").colorpicker({
+    showOn: "button"
+});
 ```
 
 Defaults to *"both"*.
@@ -114,9 +114,9 @@ Defaults to *"both"*.
 Used to translate the widget. It is a coma separated list of all labels used in the UI. 
 
 ```javascript
-    $("#mycolor").colorpicker({
-        strings: "Couleurs de themes,Couleurs de base,Plus de couleurs,Moins de couleurs,Palette,Historique,Pas encore d'historique."
-    });
+$("#mycolor").colorpicker({
+    strings: "Couleurs de themes,Couleurs de base,Plus de couleurs,Moins de couleurs,Palette,Historique,Pas encore d'historique."
+});
 ```
 
 Defaults to *"Theme Colors,Standard Colors,More Colors,Less Colors,Back to Palette,History,No history yet."*.
@@ -128,9 +128,9 @@ Defaults to *"Theme Colors,Standard Colors,More Colors,Less Colors,Back to Palet
 This event is triggered when a color is selected.
 
 ```javascript
-    $("#mycolor").on("change.color", function(event, color){
-        $('#title').css('background-color', color);
-    });
+$("#mycolor").on("change.color", function(event, color){
+    $('#title').css('background-color', color);
+});
 ```
 
 ### mouseover.color
@@ -138,9 +138,9 @@ This event is triggered when a color is selected.
 This event is triggered when the mouse mouves over a color box on the palette.
 
 ```javascript
-    $("#mycolor").on("mouseover.color", function(event, color){
-        $('#title').css('background-color', color);
-    });
+$("#mycolor").on("mouseover.color", function(event, color){
+    $('#title').css('background-color', color);
+});
 ```
 
 
@@ -150,44 +150,44 @@ This event is triggered when the mouse mouves over a color box on the palette.
 Get the currently selected color value (returned as a string).
 
 ```javascript
-    $("#mycolor").colorpicker("enable");
+$("#mycolor").colorpicker("enable");
 ```
 
 ### disable()
 Get the currently selected color value (returned as a string).
 
 ```javascript
-    $("#mycolor").colorpicker("disable");
+$("#mycolor").colorpicker("disable");
 ```
 
 ### isDisabled()
 Get the currently selected color value (returned as a string).
 
 ```javascript
-    $("#mycolor").colorpicker("isDisabled");
+$("#mycolor").colorpicker("isDisabled");
 ```
 
 ### val([color])
 Get or set the currently selected color value (as a string, ie. "#d0d0d0").
 
 ```javascript
-    $("#mycolor").colorpicker("val");
+$("#mycolor").colorpicker("val");
 
-    $("#mycolor").colorpicker("val", "#d0d0d0");
+$("#mycolor").colorpicker("val", "#d0d0d0");
 ```
 
 ### showPalette()
 Show the palette (when using the widget as a popup).
 
 ```javascript
-    $("#mycolor").colorpicker("showPalette");
+$("#mycolor").colorpicker("showPalette");
 ```
 
 ### hidePalette()
 Hide the palette (when using the widget as a popup).
 
 ```javascript
-    $("#mycolor").colorpicker("hidePalette");
+$("#mycolor").colorpicker("hidePalette");
 ```
 
 ## Browser Support

{'addition_count': 43, 'commit_subject': 'Removed indentation for code samples.', 'deletion_count': 43, 'file_extension': '.md', 'lang': 'md', 'license': 'mit', 'repo_name': 'evoluteur/colorpicker'}