buberdds / angular-bootstrap-colorpicker

Native AngularJS colorpicker directive. No dependency on jQuery or jQuery plugin is required.

angular-bootstrap-colorpicker

This version contains a native AngularJS directive based on bootstrap-colorpicker jQuery library.
No dependency on jQuery or jQuery plugin is required.

Demo page (Bootstrap v3.x.x)

Previous releases:

• branch 2.0 (Bootstrap v2.x.x)
• branch 1.0 if you need a functionality from the original plugin or IE<9 support

Installation

npm

$ npm install angular-bootstrap-colorpicker --save

bower

$ bower install angular-bootstrap-colorpicker --save

Copy css/colorpicker.css and js/bootstrap-colorpicker-module.js. Add a dependency to your app, for instance:

angular.module('myApp', ['colorpicker.module'])

Examples:

Hex format

<input colorpicker type="text" ng-model="your_model" />

or

<input colorpicker="hex" type="text" ng-model="your_model" />

RGB format

<input colorpicker="rgb" type="text" ng-model="your_model" />

RBGA format

<input colorpicker="rgba" type="text" ng-model="your_model" />

As non input element

<div colorpicker ng-model="your_model"></div>

The color picker template with an input element

<input colorpicker colorpicker-with-input="true" type="text" ng-model="your_model" />

Position of the color picker (top, right, bottom, left).

<input colorpicker colorpicker-position="right" type="text" ng-model="your_model" />

The color picker in a fixed element

<input colorpicker colorpicker-fixed-position="true" type="text" ng-model="your_model" />

When using fixed positioning, you can also put the picker into the parent element (this allows more styling control)

<input colorpicker colorpicker-fixed-position="true" colorpicker-parent="true" type="text" ng-model="your_model" />

The color picker in UI Bootstrap modal (the parent element position property must be set to relative)

<input colorpicker colorpicker-parent="true" type="text" ng-model="your_model" />

Binding the visibility of the color picker to a variable in the scope

<input colorpicker colorpicker-is-open="isOpen" type="text" ng-model="your_model" />

Auto hiding the color picker when a color has been selected

<input colorpicker colorpicker-close-on-select type="text" ng-model="your_model" />

Customize a size of the color picker saturation panel

<input colorpicker colorpicker-size="200" type="text" ng-model="your_model" />

Events:

Each color picker will emit the following events passing a data object in the following format:

{
	name: '',
	value: ''
}

Name is the string representation of ng-model and value is the current color.

colorpicker-selected

A global selected event, will be fired when a color is selected from the saturation, hue or alpha slider.

colorpicker-selected-saturation

Will be fired when a color is selected from the saturation slider.

colorpicker-selected-hue

Will be fired when a color is selected from the hue slider.

colorpicker-selected-alpha

Will be fired when a color is selected from the alpha slider.

colorpicker-shown

Will be fired when a color picker is opened.

colorpicker-closed

Will be fired when a color picker is closed.

angular-bootstrap-colorpicker's Issues

The selected color is always one behind when clicking in the palette

Instructions for reproducing the issue:

On your demo page, click the first text box so the color picker opens up.

Click somewhere in the top right. The selected color changes and the pointer moves to that position.

Now click somewhere in the top left. The pointer is still over in the top right.

Now click somewhere in the bottom left. The pointer now moves to where you clicked in the previous step (up in top left).

Keep clicking all around and you'll see the pointer/selected color are always one position behind.

Object [object Object] has no method 'colorpicker'

I am stumbling into this error, and I can't seem to figure out why? I guess the fault lies at my end of things, however, I hoped you had an idea why it isn't working?

TypeError: Object [object Object] has no method 'colorpicker'
at link (http://localhost:8000/app/scripts/designer/directives.js:74:21)
at i (http://localhost:8000/app/vendor/angular/angular.min.js:44:6)
at e (http://localhost:8000/app/vendor/angular/angular.min.js:39:307)
at e (http://localhost:8000/app/vendor/angular/angular.min.js:39:324)
at e (http://localhost:8000/app/vendor/angular/angular.min.js:39:324)
at e (http://localhost:8000/app/vendor/angular/angular.min.js:39:324)
at e (http://localhost:8000/app/vendor/angular/angular.min.js:39:324)
at e (http://localhost:8000/app/vendor/angular/angular.min.js:39:324)
at http://localhost:8000/app/vendor/angular/angular.min.js:38:372
at <error: illegal access>

Any help is much appreciated!

Position of colorpicker

This is not an issue, just a question: is there a simple way to customize the position of the colorpicker? Now it opens up below the element, but I might want it above, or left/right...

IE8 not recognising colorpicker component

IE8 doesn't like non-HTML5 custom tags:

template =
.....
' ...
' ...
' ...
' ...
.....
sliderAlpha,
sliderHue = colorpickerTemplate.find('colorpicker-hue'),
sliderSaturation = colorpickerTemplate.find('colorpicker-saturation'),
colorpickerPreview = colorpickerTemplate.find('colorpicker-preview'),
pickerColorPointers = colorpickerTemplate.find('i');

If I change into

IE8 will be okay with it, however doing colorpickerTemplate.find('div.colorpicker-hue') will not return the correct object. Is there a way to rewrite the .find() method so that using <div...> instead of <colorpicker...> won't throw any errors in IE8?

Picker is not positioned correctly when used inside a scrollable container

I have a div with max-height and overflow-y: scroll. Inside this div I have a table with colorpicker on one of its cells. The picker opens at correct position when the container is not scrolled, but if it is, the picker opens at the position where the cell would be if the container would be scrolled all the way to the top. I have tried this with colorpicker-fixed-position="true" and colorpicker-parent="true" without success.

Plugin doesn't work, no errors at the console

Hello, I have cloned your repo(I am using one of the latest Chrome releases, and have tried bot the master branch and the 1.0.0 branch).

I've copied the directory tree of your app entirely into my /lib directory, and added an inclusion of the bootstrap-colorpicker-module.js file at the bottom of my index page, as following:

<script src="js/app.js"></script>

<script src="js/services.js"></script>
 <script src="js/controllers.js"></script>
 <script src="js/filters.js"></script>
 <script src="js/directives.js"></script>
 <script src="lib/color-picker/js/bootstrap-colorpicker-module.js"></script>

my app setup looks as following:
var app = angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives', 'myApp.controllers', 'colorpicker.module', 'blueimp.fileupload', 'ui.bootstrap'])

I've tried to change the order of the dependencies and the file loading, still the color picker directive will do nothing, and there are no errors at the console.

Thanks in advance!

Creating a colorpicker box that shows the current color.

What I have to do atm:

<div
                    colorpicker
                    style="background: {{ rowCopy.backgroundColor }};"
                    class="colorpicker-box"
                    ng-model="rowCopy.backgroundColor"></div>

.colorpicker-box {
    background: #ffffff;
    border: 4px solid white;
    box-shadow: 0 0 3px rgba(0, 0, 0, .4);
    border-radius: 3px;
    cursor: pointer;
    height: 28px;
    width: 70px;
}

Model does not update in ng-repeat

I have a array of hex colors ["#a17878","#222222"] when you loop through these with a ng-repeat.

                   <li  ng-repeat="color in  colors track by $index">
                       <div style="width:60px;border:3px solid {{color}};">
                            <input colorpicker="hex" type="text" ng-model="color" />
                      </div>
                  </li>

In this case the color picker won't update the model.

Firefox bug

If you scroll window down in FF - colorpicker input crashing.

Thanks for this cool thing !

Colorpicker in bootstrap modal

using the color-picker on modal view causes the widget to misbehave.
It basically renders on the wrong z-index and relative to the wrong element.

Model updates while I'm dragging the color-picker

So basically, when using the color-picker, I do not want my model updating when I drag on the color-picker. I only want my model updated when I'm done dragging and let go.

Any ideas on how to do this?

Color picker not working properly.

I have used the colorpicker before, never faced this issue, but in my recent implementation, the color pickers just allows me to pick the "grayscale" values.

Why is this happening ?

code :

      <div class="input-group input-group-sm">
                    <input colorpicker="hex" ng-model="editSeries.color" type="text"
                           class="seriesColor" tooltip="Change Color" tooltip-placement="bottom">
      </div>

ColorPicker & Slider Issues with a Modal.

I've been trying to display the colorpicker in a modal window. It looks great but, unfortunately, it doesn't work.

This is the code I'm using to try and render the color picker. This renders things the way I want them to look.

Whenever I try to use the color picker to select a color, as soon as I click the mouse button, the color is set to "#ffffff". Once the happens, the cursor change and slider quit working.

If I try to use the slider, it jumps straight to "#ff0000".

I've noticed that if I remove the colorpicker-parent attribute from my input, then the selector will begin working but, of course, appears out of place.

No license provided

I could not find a license file (or embedded license) for this project. Can you please include whatever license you prefer so that I can use your code.

Selecting Colour with 2D slider jumps to red

The colour picker jumps to red when dragging off the left or bottom limits of the picker.

Repro steps:

1. open the picker
2. select a green hue or any other than red
3. use the 2D slider to choose the colour's saturation
4. drag the slider out of the left hand or bottom boundary

result: the hue jumps to red.

Provide a way to access $pristine and $dirty states of a non-input color-picker element

Let's assume I have this markup:

<form name="designForm">
        <div class="formLine">
            <div class="miniFieldContainerSettings">
                Background Color
            </div>
            <div class="mediumFieldContainerSettings">
                <div data-colorpicker name="bgColor" class="colorSample" ng-model="model.formData.settings.background_color" data-ng-style="{backgroundColor : model.formData.settings.background_color}"><!--CANNOT GIVE A NAME ATTRIBUTE TO A DIV-->
                </div>
                <span class="btn btn-link" data-ng-disabled="designForm.bgColor.$pristine" data-ng-click="model.setDefaultColor('bgcolor')">
                    Restore previous
                </span>
                <span class="btn btn-link" data-ng-click="model.setDefaultColor('bgcolor', true)">
                    Set default
                </span>
            </div>
        </div>
</form>

Obviously it is not a valid marup, since you cannot give a name attribute to a div tag.
How else can I access the $pristine and $dirty states of the element.

It is great that you have support for those states, but unless I am using an input element that has the hex of the color in it, It seems that I have no way of using that.

Thanks for this package BTW, it's truly a great one,
Oleg.

on-hide - Not working

on-hide does not appear to be working. I looked for relevant code:

element.colorpicker().on('hide', function(event){
scope.$apply(attrs.onHide);
})

And it appears to be gone. Has this feature been deprecated for something else?

colorpicker appearing at bottom of webpage BS 3.0.1

when i click on my input box the picker appears very far away and offscreen and the bottom of the page.
in the screenshot my mouse clicked on the pink box. (setting background-color style to the color from the color picker)

How to close colorpicker on touch screen?

Hello! This is a great Directive! I am using it in a mobile app, and it works fine except that I can't seem to close it once it's open. How would I go about it?

Change css images to base64 image urls

Since there are only 3 small images for this project I think it makes sense to simply use their base64 image url in the css rather than point to a static image. By doing this, users would still have the ability to set static image urls, but it would be even easier to use the module without having to worry about copying the images over (or fixing the image path).

Since you already have the styling in a .less file, perhaps just using an image url variable and setting them to the base64 image url would do the trick.

I will create a pull request for this if you will approve the change?

Color picker hue value changing while dragging pointer on colorpicker-saturation

Drag mouse on colorpicker-saturation, move mouse pointer out of saturation area while holding mouse click, colorpicker hue bar moves to top.

less variables not overridable

please make less variables overridable.
In my project I have include your less files in this way:

@import "../../bower_components/angular-bootstrap-colorpicker/less/variables.less";
@ColorPickerImagePath: "bower_components/angular-bootstrap-colorpicker/img";
@import "../../bower_components/angular-bootstrap-colorpicker/less/colorpicker.less";

but the @ColorPickerImagePath is not overridable because you are including the variables.less file insite the colorpicker.less file.

Position doesn't automatically changed

I have uploaded issue demo here : http://180.211.99.162/jt/omnistar/omnistar-widget/

Go to Design Accordion > Go to Button Acordion > Click on Background Color Input

This opens color picker at the very bottom of the page. Pre-computation of position affecting this one I assume.

There seem to be a styling conflict with Bootstrap dropdown styles

When I implemented the colorpicker it would at first not become visible. I tracked the problem down to the position attribute of the .dropdown class being set to relative by Bootstrap.

This is from the sass debug output:

/* line 22, ../../app/bower_components/sass-bootstrap/lib/_dropdowns.scss */
.dropdown {
    position: relative;
}

My work around was to set position:absolute!important in my own css.

(proposal) Inline colorpicker

So I needed a way to make the colorpicker inline and I thought I'd throw this up if you want it.

Inline:

<div ng-model='processCopy.color' colorpicker colorpicker-parent='true' colorpicker-template='inline'></div>

Normal:

Code:
https://gist.github.com/clouddueling/9072760
L268
L425

I'd love to make a PR but wanted to know what you thought on naming conventions and code organization.

[Question] Component ColorPicker

Is it possible to recreate the component ColorPicker you have in the demo branch of V 1.0 in the latest version (3.x.x)?

http://web.hostdmk.net/github/colorpicker/#/view1

Or do I have to need to use Branch 1.0 for this functionality?

Conflict with AngularStrap

"TypeError: Cannot read property 'color' of undefined"

1. I open a bs-popover
2. Select a color
3. Submit and close bs-popover
4. I open the same bs-popover
5. Select a color
6. Errors occur
7. It still saves.

<form ng-submit='updateProcess(); hide()'>
    <label>Name</label>
    <input
        ng-model='processCopy.name'
        type='text'>

    <label>Color</label>
    <input
        ng-model='processCopy.color'
        colorpicker='hex'
        type='text'>

    <div class="form-actions">
        <button
            type='submit'
            class="btn btn-success">
            Submit
        </button>

        <button
            type="button"
            class="btn btn-link"
            ng-click="hide()">
            Cancel
        </button>
    </div>
</form>

Stops the error

Cannot Call Method Exec of Undefined

In my setup I get this error:

TypeError: Cannot call method 'exec' of undefined
at Object.setColor (http://portal.engagement.com/js/directives/bootstrap_colorpicker_module.js:149:33)
at update (http://portal.engagement.com/js/directives/bootstrap_colorpicker_module.js:356:23)
at Object.fn (http://portal.engagement.com/js/directives/bootstrap_colorpicker_module.js:251:13)
at Object.Scope.$digest (http://portal.engagement.com/js/libs/angular.js:8097:27)
at Object.Scope.$apply (http://portal.engagement.com/js/libs/angular.js:8304:24)
at http://portal.engagement.com/js/libs/angular.js:1040:15
at Object.invoke (http://portal.engagement.com/js/libs/angular.js:2993:25)
at doBootstrap (http://portal.engagement.com/js/libs/angular.js:1038:14)
at bootstrap (http://portal.engagement.com/js/libs/angular.js:1052:12)
at angularInit (http://portal.engagement.com/js/libs/angular.js:1010:5)

Which corresponds to this line:

var match = parser.re.exec(val),

In the setColor function

Provide a way to close the colorpicker

My use case is I want to auto close the popup when a color has been selected. The implementation could be:

1/ Add an optional attribute called colorpicker-close-on-select which would close the popup when a color has been selected.

2/ Add an attribute called colorpicker-is-open="booleanValueBoundToScope" where changing booleanValueBoundToScope would show / hide the color picker, and could also be used from the parent to tell if the color picker is currently open

3/ Expose the hideColorpickerTemplate function on the directives scope so you can simply do ng-change="hideColorpickerTemplate()"

Will try to find the time to send a PR if a suitable implementation could be decided on.

Cheers!

(proposal) Add a gh-pages branch to use github pages for demo.

If you'd like I'd love to add i the github page so you don't have to update that other site.

I did it here for one of my repos:
https://github.com/clouddueling/angular-common/tree/gh-pages
http://clouddueling.github.io/angular-common/

Toggle feature

Hi!
I have 6 colorpicker inputs in the same page.
I'm wondering if it's possible to have the inputs with a toggle behavior. I mean:

• In the first click the color picker opens.
• In the second click it closes if it's the same input.
• Opens another color picker if I click in another input, just like it works now.

Is it possible?

Many thanks!

No events provided

Please provide color picker events like, onchange, onselect, onopen,onclose

unable to display hex?

Any idea why the colorpicker is showing rgb even though I am explicitly choosing hex?
http://plnkr.co/edit/GYZCOWoTBsdZ0LOlI0Z0?p=preview

Provide minified resources

Can you, please, provide minified js and css?

• js/bootstrap-colorpicker-module.min.js
• css/colorpicker.min.css

And can you, please, distribute minified resources with bower?

Thank you for your cool module.

Pointer is wrong when document is scrolled on Chrome

Test scenario to reproduce the bug:

1. use Chrome browser 30.0.1599.69 (but I think is not version dependent)
2. scroll the page a bit
3. try the color picker

I made a quick patch that make everything ok on Chrome altering sliderUpdate:

I replaced:
pointer = {
left: event.pageX,
top: event.pageY
};

with

pointer = {
left: event.clientX,
top: event.clientY
};

But it's only a workaround

Resizing Widget

Hello,

This is more of a question, or real issues with your module. In fact it has worked really nicely. However, I will be using this mainly - for now anyway - on mobile platforms. So far it has worked really well but it is small and so difficult to really control it well. I was wondering if there was a way to make the whole thing larger. I think that would solve the problem with mobile platforms. Please let me know if you have any guidance or thoughts.

Thanks for a cool project!
Nick

Update less files

• remove a variable.less file
• update notation of pseudo-elements to CSS3 two-colon syntax
• remove <b></b> from a template, move <b> css rules to a pseudo-element

Predefined colors

Cen You add predefined colors top pick with one click like in here http://bgrins.github.io/spectrum/ "Show Palette" section.

Update the releases so that the CSS is added in Bower

Can you please bump the version number so that the CSS in the bower.json is added?
I'm trying to use this, and I can't compile the CSS correctly because it's not in the 3.0.5 version.

Luminance

Recently I needed to restrict the picked colour to a certain luminance and I think It would be nice to have something like colorpicker-max-luminance, E.g. colorpicker-max-luminance="#555555", this would mean that the selected color cannot be more luminance than #555555.

I already forked the project and added this using the Digital CCIR601 formula (Y = 0.299 R + 0.587 G + 0.114 B) to calculate luminance.

Let me know if you would like me to add this to the master.

Thank you.
.

option to make colorpicker visible at all times

It would be great if there was an option to make colorpicker visible at all times rather than only when input is clicked.

Unknown provider: colorpicker.moduleProvider

As far as I know, I've installed this correctly via bower and included the css and js files in my HTML-page.
But it doesn't do the magic. ;) All I got is the following error:

Unknown provider: colorpicker.moduleProvider

So what did I do wrong? Which other information do you need, for fixing this issue?

Add the option for an on selected handler

Been using this colour picker to allow the user to select a colour for a rendered chart.

I was originally using the ng-change directive to tell the chart to re render when a colour was selected. Whilst this works, when moving dragging the cursor over the hue section (Think that is the correct name) it caused performance issues as the chart was re rendered on every mouse move event.

This option would allow the chart to be re rendered only when the colour was actually selected.

This has been implemented in pull request #82

Edit:
I apologise I did not see issue #72 when creating this. The PR may provide a solution there too.

How to make the position of the colorpicker compatible a container that has a scroll bar?

//Colorpicker exception will occur in such a situation!
<div style="height:300px;overflow:auto;">

    <div style="height:800px;">
              .....colorpickers.....
    </div>

</div>

Colors leak between colorpicker instances when model is updated from other sources

I've built a mostly stripped-down codepen example where two colorpicker-enabled inputs sit on a page. The first input is just a normal colorpicker input. The second has its model color updated every second by a $interval callback.

I can produce "bleed" issues in two different ways on this page.

First:

1. Load the page and wait for the color of the second input to change automatically.
2. Click inside the first input to open colorpicker and note that the displayed color is not "pink".
3. Click outside the input and back in again to reopen colorpicker, and note that the color changes each time this is done.

Second:

1. Click inside the first input box to open colorpicker.
2. Hold down click in the colorpicker to slowly pick a color.
3. Keeping the mouse button held down, you will notice that every second the displayed color changes.

Angular.UI Bootstrap Problem and undefined value

I user color picker with Angularjs UI (Bootstrap Project) in modal but when i try to get value of input's i get undefined. evet without using angular.js ui i get undefined but i can see value in input .

(Feature) Show selected color via background color of input or div

It would be nice if one could see the selected color instead of the hex code (not really user friendly). I hack this now via angular watch and $.css(..) here a sample image.

Thanks for this cool Plugin!

Position of colorpicker

This is not an issue, just a question: is there a simple way to customize the position of the colorpicker? Now it opens up below the element, but I might want it above, or left/right...

Cursor is still "bound" to hue selector when trying to adjust saturation

On the demo page, if I slide the hue selector up or down and then immediately go to the saturation selector and try to drag the little circle around, it just keeps moving the hue selector up and down instead. I have to explicitly click somewhere away from the little circle in order to break the "bind" from the hue selector.

The reverse is also true, if I drag the circle pointer around the saturation box and then immediately try to start sliding the hue selector, my cursor is still bound to the circle pointer, and it just jumps over to where I'm at in the hue selector.

Event should be emitted when color has been picked and picker has closed

I'm using this module in an app i'm working on and it's pretty awesome. I had to make a mod to it for my purposes, and thought i'd open it as an issue rather than a PR that might get rejected.

I wanted to persist the picked color to the server as soon as it was clear that the color was picked and finalized. My best indication of this was in the hideColorpickerTemplate function. In here I added an emit like so:

$scope.$emit('colorChange', ngModel);

Now I should go ahead and post my markup so the listener makes sense:

<div colorpicker ng-model="item.Properties.Color">Color</div>

Now in my controller I can listen for colorChange and call the server like so:

$scope.$on('colorChange', function (event, data) {
    var item= event.targetScope.item;
    myService.changeItemProperty(item.Id, "Color", item.Properties.Color).then(function () {
        $scope.reloadItem();
    });
});

Two things I don't like about all this. 1) I don't like to modify third party plugins. 2) It's not great that I need to look at the targetScope property, but I don't know any way around it given that my colorpicker model is only a property on my "real" model.