https://github.com/ruhley/angular-color-picker
Vanilla AngularJS Color Picker Directive with no requirement on jQuery
https://github.com/ruhley/angular-color-picker
angularjs color-picker javascript
Last synced: 6 months ago
JSON representation
Vanilla AngularJS Color Picker Directive with no requirement on jQuery
- Host: GitHub
- URL: https://github.com/ruhley/angular-color-picker
- Owner: ruhley
- License: mit
- Created: 2014-11-07T03:38:25.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2018-12-02T22:18:07.000Z (almost 7 years ago)
- Last Synced: 2025-03-30T22:19:21.526Z (6 months ago)
- Topics: angularjs, color-picker, javascript
- Language: JavaScript
- Homepage: http://ruhley.github.io/angular-color-picker/
- Size: 5.21 MB
- Stars: 163
- Watchers: 9
- Forks: 78
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Angular Color Picker
Vanilla AngularJS Color Picker Directive with no requirement on jQuery
[](https://travis-ci.org/ruhley/angular-color-picker)
[](https://lima.codeclimate.com/github/ruhley/angular-color-picker)
## Demo
https://ruhley.github.io/angular-color-picker/
## Installation
#### Bower
```shell
bower install angularjs-color-picker --save
```
#### Npm
```shell
npm install angularjs-color-picker --save
```
#### Usage
* Include files
* Bower
```html
```
* Node
```html
```
* Add the module to your app
```javascript
angular.module('app', ['color.picker']);
```
* Include in your view
```html
```
## Options
HTML - Only ```ng-model``` is required. If supplying an api it must be a unique object per color picker. However the event api can be shared among color pickers.
```html
```
Javascript
```js
$scope.color = '#FF0000';
// options - if a list is given then choose one of the items. The first item in the list will be the default
$scope.options = {
// html attributes
required: [false, true],
disabled: [false, true],
placeholder: '',
inputClass: '',
id: undefined,
name: undefined,
// validation
restrictToFormat: [false, true],
preserveInputFormat: [false, true],
allowEmpty: [false, true],
// color
format: ['hsl', 'hsv', 'rgb', 'hex', 'hexString', 'hex8', 'hex8String', 'raw'],
case: ['upper', 'lower'],
// sliders
hue: [true, false],
saturation: [false, true],
lightness: [false, true], // Note: In the square mode this is HSV and in round mode this is HSL
alpha: [true, false],
dynamicHue: [true, false],
dynamicSaturation: [true, false],
dynamicLightness: [true, false],
dynamicAlpha: [true, false],
// swatch
swatch: [true, false],
swatchPos: ['left', 'right'],
swatchBootstrap: [true, false],
swatchOnly: [true, false],
// popup
round: [false, true],
pos: ['bottom left', 'bottom right', 'top left', 'top right'],
inline: [false, true],
horizontal: [false, true],
// show/hide
show: {
swatch: [true, false],
focus: [true, false],
},
hide: {
blur: [true, false],
escape: [true, false],
click: [true, false],
},
// buttons
close: {
show: [false, true],
label: 'Close',
class: '',
},
clear: {
show: [false, true],
label: 'Clear',
class: '',
},
reset: {
show: [false, true],
label: 'Reset',
class: '',
},
};
// exposed api functions
$scope.api.open(); // opens the popup
$scope.api.close(); // closes the popup
$scope.api.clear(); // removes value
$scope.api.reset(); // resets color value to original value
$scope.api.getElement(); // returns the wrapping element
$scope.api.getScope(); // returns the color picker $scope
// api event handlers
$scope.eventApi = {
onChange: function(api, color, $event) {},
onBlur: function(api, color, $event) {},
onOpen: function(api, color, $event) {},
onClose: function(api, color, $event) {},
onClear: function(api, color, $event) {},
onReset: function(api, color, $event) {},
onDestroy: function(api, color) {},
};
// decorator - all variables in options can be globally overridden here
angular
.module('app', ['color.picker'])
.config(function($provide) {
$provide.decorator('ColorPickerOptions', function($delegate) {
var options = angular.copy($delegate);
options.round = true;
options.alpha = false;
options.format = 'hex';
return options;
});
});
```
## Requirements
* angularjs (v1.3 and higher)
* tinycolor.js (18.8 KB minified)
NO requirement for jQuery!
## Inspiration
Inspiration and code taken from projects like
* http://kaihenzler.github.io/angular-minicolors/
* http://mjolnic.github.io/bootstrap-colorpicker/
* https://github.com/buberdds/angular-bootstrap-colorpicker/