Hi! For now color-picker not support ng-init value. So i can not use update functionality. Can u fix it? Thx.

Happens when setting opacity to 0

Hi,

I discovered a strange issue where removing a color-picker from a page somehow disables bootstrap dropdown menus. I've reproduced in simple form in this Plunker:

http://plnkr.co/edit/OUvnsyHTTSYf7uJP1DhU?p=preview

Reproduction Steps:

1. Click the nav dropdown menu to ensure it's working
2. Click the Remove button to remove one of the pickers
   from the page
3. Click the nav dropdown again and observe that it no
   longer expands

Thanks in advance for your attention.

-Jeff

I used

bower install angularjs-color-picker --save

after installation was finished I found that folder
dist/themes
is empty, so

<!-- only include if you use bootstrap -->
<link rel="stylesheet" href="bower_components/angular-color-picker/dist/themes/angularjs-color-picker-bootstrap.min.css" />

can't be used

I want to show only color box and want to hide text box. Can you provide this one?

Motivation

Hi!

I'm in the process of refactoring an app to support modern JS tooling like NPM-only, Webpack & ES6.

Code Change

A small change is needed to support CommonJS.

/* commonjs package manager support (eg componentjs) */
if (typeof module !== "undefined" && typeof exports !== "undefined" && module.exports === exports){
  module.exports = 'angular-md5';
}

• Source: ui-router release
• Or: UMD (Universal Module Definition)

Working Examples

I have done other PRs for some of my dependencies:

• wix-incubator/angular-tree-control#152
• PatrickJS/angular-md5#8
  • PatrickJS/angular-md5#9
• muratcorlu/angular-urlify#1
• tarkanlar/Angular-Urlify#1

Sources

• Using Angular 1.x With ES6 and Webpack by Jesus Rodriguez
• Webpack & Angular by Shawn McKay
• Angular and Webpack for Modular Applications by @kentcdodds
• NPM for Everything

Lots of people are creating forks to remove bootstrap. I don't want the library to assume people want something that they don't want.

We have a problem of numerous $rootScope.$digest calls that results of calling all watchers of all scopes.
This happens because we have several instances of color picker on the same page, each one of them adding an event handler for all clicks on the whole document:

$document.on('click', function (evt) {
    if ($scope.find(evt.target).length === 0) {
        $scope.log('Color Picker: Document Hide Event');
        $scope.hide();
    }
});
$scope.hide = function (apply) {
    $scope.log('Color Picker: Hide Event');
    $scope.visible = false;

    if (apply !== false) {
        $scope.$apply();
    }
};

What I see that could be improved:

• check if $scope.visible is true and exit early otherwise,
• rewrite $scope.contains to use native contains method. Check for performance test
• get rid of calling $scope.$apply()?
• handle $destroy event to remove click event listeners,
• store references to all instances and call event handler only once?

Thank you.

Thank you very much for fixing the issues I reported yesterday so quickly! However, wiredep still does not work and I just figured out why: the files referenced in the main property of bower.json do not exist. bower.json references angular-color-picker.js but the filename is actually angularjs-color-picker.js. The same applies to the css file.

On your demo site, the color-picker-swatch-only="true" shows only the swatch, but when I use the latest version, the text label remains visible
tested on version 0.6.6

angular(js)-color-picker depends on angularjs instead of just angular. I am not sure how this even works because the bower.io search does not return a package named angularjs. The main problem however is, that every other angular related package I have used so far depends on angular which results in two (possibly different) angular versions as dependencies. This is especially an issue if you use tools like wiredep to automatically inject dependencies. If there is no reason to use angularjs I would appreciate it, if the dependency was changed to angular instead.

Hi Ruhley,
when you select color via drag&drop, event is fired. But after that when you just click to select color, it is not. I think, that problem is in first if statement in mouseUp function.
Bye, Vlada

Hi Ruhley,

Selecting color is not working in mobile devices and only that issue is there as I investigated. it is really fantastic, If you can change it to work in mobile devices as well.

Thanks in advance.

Regards,
Lilan

Hello,

When I'm exploring the colors it is retreiving "TypeError: e[0].$setDirty is not a function" many times I move arround pallete.

Thanks

Hello, is there a way to get transparency with hex format ?

Currently I can get that, by using color-picker-format="rgb" and color-picker-alpha="true", however I would like to keep an hex format ?

Thanks !

Hi, This is not working in IE 11

Thanks for creating this directive!

Can you give some guidance on how to cleanly change the size of the color swatch? that remains on the page?

Hi,

I am experiencing an issue within nw.js (node webkit) where the picker control sometimes does not close after the mouse has been clicked out side of it. In that case there is now other way of getting this done other than closing the window or destroying the element.

Did this occur before, any idea what might cause this? I suspect some internal event handling issue.

One more bit of info: I am using the picker tool within UI-bootstrap accordions.

Thanks a lot.

As mentioned in the bower.json specification, you should not include minified files in the main property. This also seems to affect wiredep in a way that it won't inject any dependencies of angular(js)-color-picker at all. I used the following override to make it work:

"overrides": {
  "angularjs-color-picker": {
    "main": [
      "angularjs-color-picker.js",
      "angularjs-color-picker.css"
    ]
  }
}

In bower.json it is common to mark the unminified sources as main entries. See for example bower-material and bower-angular.

This way plugins like bower-main-files pick up the unminified sources, which can be useful for debugging. It is a common workflow to bundle all external plugins into a single vendor.js, which can be minified at once.

I was not able to find tiny.js file after cloning the file.

e.g. red box border

Not an issue!! Just a Suggestion...

in REAME file change bower install angularjs-color-picker --save-dev to bower install angularjs-color-picker --save.

--save-dev includes dependency as dev-dependency in bower.json which causes problem in automating flow with wiredep like tools.

Thanks,
Cheers and great work !!!

Hi,
When you change color in color-picker, model dirty flag isn't updated.
Maybe adding the following line in ngModel watch would correct the problem :
if($scope.isValid)
control[0].$setDirty()

Cheers,
Nathan

Hi, I really like your implementation and the fact that it doesn't depend on jQuery, as an alternative to buberdds/angular-bootstrap-colorpicker

Since I use bootstrap a lot I would like to have the same look-and-feel for all my controls, therefore I would like to use an addOn component with the color, as shown here (2nd example).

Is it currently possible?

Hi, Apparently the two way binding is broken.
What I mean is that typing in the input does not properly change the selected color.

jsFiddle example : http://jsfiddle.net/xnq6fhr2/

It comes from the if ($scope.isValid) which returns false when there are 5 hex characters and someone's typing the 6th.

Update README.md to include NPM (CommonJS) Installation Instructions (after #33)

Any chance I could get you to add a "main": "./path/to/angular-color-picker.js" in the package.json? This would then allow import for ES6 modules. Packages should typically have a main anyway, so its a good idea regardless.

To be clear also point the main to the uncompressed file as in the user/devs build process he'll be compiling the modules for output and will need it in the uncompressed state.

Hi,

There seems to be a problem when you want to choose for example #fffff (top-left corner). Its always close like #FBFBFB. Same applies to all 4 corners. You can try this at your own demo page at http://ruhley.github.io/angular-color-picker/

Using examples/01-simple.html and setting format to rgb. When deleting the last two parts with parenthesis (255, 255)), on adding new values like 3,2 the closing parenthesis is automatically added and the cursors is placed behind. This can be annoying if your color value is more than one digit.

When setting the ng-model to certain colors the model value is changed for instance #FAFCFC becomes #34FCFC. This issue also shows up when moving the color picker around the left edge of the color palette. You can see the issue on your demo page by trying to select colors close to the left edge or bottom of the palette.

I fixed this by changing line 95 to

                    var color = tinycolor({h: $scope.hue, s: $scope.saturation/100, v: $scope.lightness/100}),

Not sure if this is a good solution as it seems like the picker has issues on the bottom and far right this way.

You can see the fixed code at, and the fork shows it before it was fixed.
http://plnkr.co/edit/8ZMOABpjn7nEs9c3Z483?p=preview

Hi,

First of all, thanks for this amazing module, it is (and was even before v1) better solution than anything else I could have found for Angular.

I have two colour picker fields glued together with Bootstrap input-group and ui-bootstrap dropdowns to select the colour format.

Everything works just fine, but there's an Angular Non-Assignable Expression error in the console. The weird thing is, it only occurs when you select "hex" value from the dropdown. It does not throw any errors on the other two settings.

angular.min.js:107 Error: [$compile:nonassign] http://errors.angularjs.org/1.4.9/$compile/nonassign?p0=undefined&p1=colorPicker

I made a stripped down Plunker demo to aid investigation:
https://plnkr.co/edit/uc7cVQKeg5cCXVVsBmeG?p=preview

I've also tried to bind color-picker-swatch-pos and color-picker-swatch-bootstrap attributes to variables in a controller rather than using inline 'right' and false. Same thing.

Any clue why does that happen? Am I misunderstanding something?

Chrome 50 & Chrome Canary 52, OS X 10.11.4

Cheers!

Hi there,
is there an onChange event available in the directive? I could not find one. If not do you have any plan to introduce one?
regards
Ari

I am trying to change the color format but it is taking the default value.

• minification
• testing
• jshint

Really like this project but not the color selection and swatch match. After choosing a color, the swatch colour seems slightly lighter than what you have selected. Has anyone else noticed this? Or if its just my eyes then let me know.

I'm setting the alpha property to true and it will allow me to adjust the alpha value and it display properly initially, however, when I load the value back from local storage (which it is storing correctly), it looses the alpha property. Wanted to see if you knew of something I might not have set correctly before I started digging into the code and debugging.

Oh, also, whenever I try to assign something like settings.backgroundColor against the ng-model property of the color-picker directive, it won't work. I have to reassign all my settings.xxx to straight backgroundColor type variables. So it looks like there is an issue when the ngModel is referencing a property of an object.

In Safari 9.1 on Mac OS X the color picker does not open when using the color picker in 'swatch only'-mode.

Reproduction scenario: open the demo page and set 'Swatch Only (swatch-only)' to Yes. Then try to open the color picker by clicking on the swatch.

After investigating the issue it seems that elements do not receive focus in Safari if either the width or the height of the element is 0. In my current project I have resolved the issue as follows:

.color-picker-wrapper.color-picker-swatch-only .color-picker-input {
    width: 1px;
    height: 1px;
}

TypeError: Cannot read property 'length' of null
at Object.fn (angularjs-color-picker.js:155)
at Scope.$digest (angular.js:14394)
at Scope.$apply (angular.js:14657)
at done (angular.js:9734)
at completeRequest (angular.js:9924)
at XMLHttpRequest.requestLoaded (angular.js:9865)(anonymous function) @ angular.js:11707(anonymous function) @ angular.js:8628Scope.$digest @ angular.js:14412Scope.$apply @ angular.js:14657done @ angular.js:9734completeRequest @ angular.js:9924requestLoaded @ angular.js:9865

In the code:

$scope.$watch('ngModel', function (newValue, oldValue) {
  if (newValue !== undefined && newValue !== oldValue && newValue.length > 4) {
    ...
  }
}

Needs to be replaced by the following snippet to not crash for null value of the model:

$scope.$watch('ngModel', function (newValue, oldValue) {
  if (newValue !== undefined && newValue !== null && newValue !== oldValue && newValue.length > 4) {
    ...
  }
}

I will make a pull request

Great plugin!!!

How can I set the initial color value (by default it is white eg. rgb(255, 255, 255)).?
I'm also using alpha.

Till I tried ng-init="TextColor='rgb(35, 16, 16)'" & data-ng-init="TextColor='rgb(35, 16, 16)'", but that didn't work.

When using a Content Security Policy (CSP, docs at MDN) without unsafe-inline for style-src the color picker does not work. This is because of the various ng-attr-style properties in the template.

The solution to this issue would be to remove the ng-attr-style attributes from the template and apply the styling using JS in the link function using .css(properties).

If you want I can try to make a PR to resolve this issue.

For now used:

  "main": [
    "angularjs-color-picker.js",
    "angularjs-color-picker.css"
  ]

source

For properly work with, for example, browserify
should be:

  "main": "angularjs-color-picker.js"

https://docs.npmjs.com/files/package.json#main

Do you need a pull request for it?

How to config requireJS to load tinycolor.js and angularjs-color-picker.js.Thanks

Hi @ruhley.
Thanks for your share your awesome work! ;)

I'm working with your module to create an html editor. and I'm trying to pass a default color to the color picker.

I tried

var color = "#FF0000"; // I get the color element by Jquery
$scope.ngModel = color // does nothing.
$scope.myColor = color; // only sets the color when I click on edit the color, but when show the modal is set as #FFFFFF

I have an example on https://plnkr.co/edit/HycbM4zEOENvreXfsFPj?p=preview

You have to click in one of the html modules.

Can you give me some orientation?

Thanks for your help.
Javier

Nitpicking really, but when alpha mode is available, main panel width should be increased to 194px from the default 173px. This isn't done automatically due the usage of absolute positioning.

You can see that easily due to the box-shadow and dev tools highlight.

Workaround for now:
<color-picker ng-class="{ 'acp-67': modal.colorFormat !== 'hex' }">
.acp-67 .color-picker-wrapper .color-picker-panel { width: 194px; }

I just made a fork with minimal changes:

• Moved from absolute top/left to relative with float:left and 1px padding around
• Shifted order of the elements in the template, since they're floated to left now
• Removed my hacky width:194px from example-65 (the issue I submitted recently)

Tested it with my setup (same as on #65) and all 4 positions (top left, top right, etc.) on Chrome 52 - seems ok, but I would appreciate a proper test anyway, it's entirely possible I broke something, but there are no tests in grunt config.

I have only committed source files, I'll leave the grunt build, version bump, etc. to you.

See PR #68

example http://plnkr.co/edit/FznZuypDfawYP6CWcTqv?p=preview

Hey,
what's the licensing of this great directive?

I assume it is: https://github.com/bgrins/TinyColor

Which needs to be installed with: npm install tinycolor2

doing the not-too-wild-a-guess npm install tinycolor will give the wrong package I presume.