Package Exports

angular-radial-color-picker

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (angular-radial-color-picker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Angular Radial Color Picker

Material design(ish) color picker with some animations sprinkled on top.

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.

Demos

Color Picker in a modal window - GitHub Pages

Barebones example - Codepen

Install

NPM

Color Picker on npm

npm install angular-radial-color-picker

And 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']);

API

<color-picker></color-picker> component has 2 attributes:

ng-model Object 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-select callback 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

Events

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 before hide.
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');

Styling/sizing

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;
}

Contributing

TBD