The color picker has been developed treating the mobile devices as first class citizens:
- Supports touch devices
- Responsive size
- Blazing fast GPU accelerated animations
The only dependency of Angular Radial Color Picker is Propeller for rotating the knob.
Color Picker in a modal window - GitHub Pages
Barebones example - Codepen
Color Picker on npm
npm install angular-radial-color-pickerAnd in your html:
<head>
<!-- Include the css -->
<link href="path/to/angular-radial-color-picker/dist/css/color-picker.min.css" rel="stylesheet">
</head>
<body>
<!-- The actual color picker component -->
<color-picker ng-model="$ctrl.initialColor" on-select="$ctrl.onSelect(color)"></color-picker>
<!-- Angular Radial Color Picker Dependencies -->
<script src="path/to/propeller.min.js"></script>
<script src="path/to/angular/angular.min.js"></script>
<!-- Include the package -->
<script src="path/to/angular-radial-color-picker/dist/js/color-picker.min.js"></script>
</body>Once you have all the necessary assets installed, add color.picker.core as a dependency for your app:
angular.module('myApp', ['color.picker.core']);<color-picker></color-picker> component has 2 attributes:
ng-modelObject for initializing/changing the color of the picker (optional). Properties:
| Name | Type | Default | Description |
|---|---|---|---|
| red | number | 255 | An integer between 0 and 255 |
| green | number | 0 | An integer between 0 and 255 |
| blue | number | 0 | An integer between 0 and 255 |
on-selectcallback which gets triggered when a color is selected (optional, see Events). The passed function is invoked with one argument which is an object with the following properties:
| Name | Type | Description |
|---|---|---|
| hex | string | A hexidecimal string |
| rgba | object | RGBA color model |
| hsla | object | HSLA color model |
- RGBA Color model:
| Name | Type | Default | Description |
|---|---|---|---|
| red | number | 255 | An integer between 0 and 255 |
| green | number | 0 | An integer between 0 and 255 |
| blue | number | 0 | An integer between 0 and 255 |
| alpha | number | 1 | Transparency. A number between 0 and 1 |
- HSLA Color model:
| Name | Type | Default | Description |
|---|---|---|---|
| hue | number | 0 | A number between 0 and 359 |
| saturation | number | 100 | A number between 0 and 100 |
| luminosity | number | 50 | A number between 0 and 100 |
| alpha | number | 1 | A number between 0 and 1 |
For maximum flexibility the component utilizes the pub/sub pattern. For easier communication a set of events are provided that can even programatically open or close the picker without interacting with the UI. All events are published/subscribed at the $rootScope so that sibling components can subscribe to them too. All events carry the current (selected) color in the event data payload.
color-picker.show- Fires when the color picker is about to show and before any animation is started.color-picker.shown- Fires when the color picker is shown and has finished animating.color-picker.selected- Fires when a color is selected via the middle selector. Event is fired right beforehide.color-picker.hide- Fires when the color picker is about to hide and before any animation is started.color-picker.hidden- Fires when the color picker is hidden and has finished animating.
Example:
// Listening for something interesting to happen:
$rootScope.$on('color-picker.selected', function(ev, color) {
// a) using HSLA color model
vm.selectedColor = 'hsla(' + color.hsla.hue + ', ' + color.hsla.saturation + '%, ' + color.hsla.luminosity + '%, ' + color.hsla.alpha + ')';
// b) using RGB color model
vm.selectedColor = 'rgb(' + color.rgb.red + ', ' + color.rgb.green + ', ' + color.rgb.blue + ')';
// c) plain old hex
vm.selectedColor = '#' + color.hex;
});
// The good'n'tested "poke-it-with-a-stick" method:
$rootScope.$broadcast('color-picker.open');The color picker has a default width/height of 280px, but can also be sized via CSS. For example:
color-picker {
width: 350px;
height: 350px;
}TBD