├── .gitignore
├── img
├── hue.png
├── alpha.png
└── saturation.png
├── .travis.yml
├── bower.json
├── .jshintrc
├── test
├── karma.conf.js
├── unit
│ └── colorpickerSpec.js
└── libs
│ └── jquery-1.10.1.min.js
├── CHANGELOG.md
├── MIT-LICENSE.txt
├── package.json
├── gulpfile.js
├── less
└── colorpicker.less
├── README.md
├── js
├── bootstrap-colorpicker-module.min.js
└── bootstrap-colorpicker-module.js
└── css
├── colorpicker.min.css
└── colorpicker.css
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea/
2 | node_modules/
3 | test/coverage
4 |
--------------------------------------------------------------------------------
/img/hue.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/buberdds/angular-bootstrap-colorpicker/HEAD/img/hue.png
--------------------------------------------------------------------------------
/img/alpha.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/buberdds/angular-bootstrap-colorpicker/HEAD/img/alpha.png
--------------------------------------------------------------------------------
/img/saturation.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/buberdds/angular-bootstrap-colorpicker/HEAD/img/saturation.png
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - "0.10"
4 | script: node_modules/karma/bin/karma start test/karma.conf.js --single-run
5 | before_install:
6 | - export DISPLAY=:99.0
7 | - sh -e /etc/init.d/xvfb start
8 | before_script:
9 | - npm install
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-bootstrap-colorpicker",
3 | "version": "3.0.32",
4 | "main": [
5 | "js/bootstrap-colorpicker-module.js",
6 | "css/colorpicker.css"
7 | ],
8 | "ignore": [
9 | "node_modules",
10 | "components",
11 | "bower_components",
12 | "test",
13 | "tests"
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
1 | {
2 | "curly": true,
3 | "immed": true,
4 | "newcap": true,
5 | "noarg": true,
6 | "sub": true,
7 | "boss": true,
8 | "eqnull": true,
9 | "quotmark": "single",
10 | "undef": true,
11 | "indent": 2,
12 | "strict": true,
13 | "globalstrict": true,
14 | "browser": true,
15 | "globals": {
16 | "angular": false,
17 | "$": true,
18 | // For Jasmine
19 | "after" : false,
20 | "afterEach" : false,
21 | "before" : false,
22 | "beforeEach" : false,
23 | "describe" : false,
24 | "expect" : false,
25 | "jasmine" : false,
26 | "module" : false,
27 | "spyOn" : false,
28 | "inject" : false,
29 | "it" : false
30 | }
31 | }
--------------------------------------------------------------------------------
/test/karma.conf.js:
--------------------------------------------------------------------------------
1 | module.exports = function(config){
2 | config.set({
3 | basePath : '../',
4 | files : [
5 | 'test/libs/jquery-1.10.1.min.js',
6 | 'test/libs/angular.min.js',
7 | 'test/libs/angular-mocks.js',
8 | 'js/**/bootstrap-colorpicker-module.js',
9 | 'test/unit/**/*.js'
10 | ],
11 | singleRun: true,
12 | frameworks: ['jasmine'],
13 | browsers : ['Firefox'],
14 | plugins : [
15 | 'karma-chrome-launcher',
16 | 'karma-firefox-launcher',
17 | 'karma-jasmine',
18 | 'karma-coverage'
19 | ],
20 | reporters: ['dots', 'coverage'],
21 | coverageReporter: {
22 | type: 'html',
23 | dir: 'test/coverage/'
24 | },
25 | preprocessors: {
26 | 'js/bootstrap-colorpicker-module.js': 'coverage'
27 | }
28 | });
29 | };
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | v3.0.23 - 18 Dec 2015 2015 (JuanHB)
2 | ---------------------------------------
3 |
4 | - [c9c745e8bb43f31d680f88590983c5089d057c0e] Solution for Exception when using non-input elements
5 |
6 | v3.0.14 - Mon, 21 Apr 2015 (jakubsikora)
7 | ---------------------------------------
8 |
9 | - [37faabf62b55962f28959981085662cb407f2a48] scrolling fix
10 |
11 | v3.0.13 - Fri, 27 Mar 2015 (ste2425)
12 | ---------------------------------------
13 |
14 | - [738bff892714513551d1379254d8d71aa7197ae5] extended existing events for on select etc
15 |
16 | v3.0.12 - Mon, 16 Feb 2015 (mattlewis92)
17 | ---------------------------------------
18 |
19 | - [986eb8c651f5d38b429b5c698cc8c92043fa0579] Add a colorpicker-is-open attribute for controlling the visibility of the popover
20 |
21 | v3.0.11 - Thu, 22 Dec 2014
22 | ---------------------------------------
23 |
24 | - [28956c7ce9] min versions / gulp
25 |
26 | v3.0.10 - Thu, 18 Dec 2014
27 | ---------------------------------------
28 |
29 | - [4c62f5d, e1f5021, de84abb, 993d509]) Bugfix initial input val
30 |
--------------------------------------------------------------------------------
/MIT-LICENSE.txt:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2013 Michal Zielenkiewicz
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
6 | this software and associated documentation files (the "Software"), to deal in
7 | the Software without restriction, including without limitation the rights to
8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-bootstrap-colorpicker",
3 | "version": "3.0.32",
4 | "description": "Native AngularJS colorpicker directive",
5 | "main": "js/bootstrap-colorpicker-module.js",
6 | "directories": {
7 | "test": "test"
8 | },
9 | "devDependencies": {
10 | "gulp": "^3.9.0",
11 | "gulp-jshint": "^1.11.2",
12 | "gulp-less": "^3.0.3",
13 | "gulp-minify-css": "^1.2.1",
14 | "gulp-rename": "^1.2.2",
15 | "gulp-uglify": "^1.4.0",
16 | "jasmine-core": "^2.3.4",
17 | "karma": "^0.13.9",
18 | "karma-chrome-launcher": "^0.2.0",
19 | "karma-cli": "0.1.0",
20 | "karma-coverage": "^0.5.1",
21 | "karma-firefox-launcher": "^0.1.6",
22 | "karma-jasmine": "^0.3.6"
23 | },
24 | "scripts": {
25 | "test": "karma start test/karma.conf.js"
26 | },
27 | "repository": {
28 | "type": "git",
29 | "url": "https://github.com/buberdds/angular-bootstrap-colorpicker"
30 | },
31 | "keywords": [
32 | "angular",
33 | "color picker",
34 | "bootstrap"
35 | ],
36 | "author": "Michal Zielenkiewicz",
37 | "license": "MIT",
38 | "bugs": {
39 | "url": "https://github.com/buberdds/angular-bootstrap-colorpicker/issues"
40 | },
41 | "homepage": "https://github.com/buberdds/angular-bootstrap-colorpicker"
42 | }
43 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 | var rename = require('gulp-rename');
3 | var less = require('gulp-less');
4 | var minifyCss = require('gulp-minify-css');
5 | var jshint = require('gulp-jshint');
6 | var uglify = require('gulp-uglify');
7 | var karma = require('karma').server;
8 |
9 | gulp.task('default', ['css', 'jshint', 'test', 'compress']);
10 |
11 | gulp.task('less', function() {
12 | return gulp.src('./less/*.less')
13 | .pipe(less())
14 | .pipe(gulp.dest('./css'));
15 | });
16 |
17 | gulp.task('css', ['less'], function() {
18 | return gulp.src('./css/colorpicker.css')
19 | .pipe(minifyCss())
20 | .pipe(rename('colorpicker.min.css'))
21 | .pipe(gulp.dest('./css'));
22 | });
23 |
24 | gulp.task('jshint', function () {
25 | return gulp.src(['js/*.js', 'test/unit/*.js', '!js/bootstrap-colorpicker-module.min.js'])
26 | .pipe(jshint('.jshintrc'))
27 | .pipe(jshint.reporter('default'));
28 | });
29 |
30 | gulp.task('compress', function() {
31 | gulp.src('./js/bootstrap-colorpicker-module.js')
32 | .pipe(uglify())
33 | .pipe(rename('bootstrap-colorpicker-module.min.js'))
34 | .pipe(gulp.dest('./js'))
35 | });
36 |
37 | gulp.task('test', function (done) {
38 | karma.start({
39 | configFile: __dirname + '/test/karma.conf.js',
40 | singleRun: true
41 | }, done);
42 | });
--------------------------------------------------------------------------------
/less/colorpicker.less:
--------------------------------------------------------------------------------
1 | @colorpicker-path: '..';
2 |
3 | .colorpicker-visible,
4 | .colorpicker-visible .dropdown-menu {
5 | display: block !important;
6 | }
7 |
8 | colorpicker-saturation {
9 | display: block;
10 | width: 100px;
11 | height: 100px;
12 | background-image: data-uri('@{colorpicker-path}/img/saturation.png');
13 | background-size: contain;
14 | cursor: crosshair;
15 | float: left;
16 | i {
17 | display: block;
18 | height: 7px;
19 | width: 7px;
20 | border: 1px solid #000;
21 | border-radius: 5px;
22 | position: absolute;
23 | top: 0;
24 | left: 0;
25 | margin: -4px 0 0 -4px;
26 | &::after {
27 | content: '';
28 | display: block;
29 | height: 7px;
30 | width: 7px;
31 | border: 1px solid #fff;
32 | border-radius: 5px;
33 | }
34 | }
35 | }
36 |
37 | colorpicker-hue,
38 | colorpicker-alpha {
39 | width: 15px;
40 | height: 100px;
41 | float: left;
42 | cursor: row-resize;
43 | margin-left: 4px;
44 | margin-bottom: 4px;
45 | i {
46 | display: block;
47 | height: 2px;
48 | background: #000;
49 | border-top: 1px solid #fff;
50 | position: absolute;
51 | top: 0;
52 | left: 0;
53 | width: 100%;
54 | margin-top: -1px;
55 | }
56 | }
57 |
58 | colorpicker-hue {
59 | background-image: data-uri('@{colorpicker-path}/img/hue.png');
60 | background-size: contain;
61 | }
62 |
63 | colorpicker-alpha {
64 | display: none;
65 | }
66 |
67 | colorpicker-alpha,
68 | .colorpicker-color {
69 | background-image: data-uri('@{colorpicker-path}/img/alpha.png');
70 | background-size: 10px 100%;
71 | }
72 |
73 | .colorpicker {
74 | top: 0;
75 | left: 0;
76 | z-index: 99999;
77 | display: none;
78 | colorpicker-hue,
79 | colorpicker-alpha,
80 | colorpicker-saturation {
81 | position: relative;
82 | }
83 | input {
84 | width: 100px;
85 | font-size: 11px;
86 | color: #000;
87 | background-color: #fff;
88 | }
89 | &.alpha {
90 | min-width: 140px;
91 | colorpicker-alpha {
92 | display: block;
93 | }
94 | }
95 | &.dropdown {
96 | position: absolute;
97 | }
98 | &.colorpicker-fixed-position {
99 | position: fixed;
100 | }
101 | .dropdown-menu {
102 | &::after,
103 | &::before {
104 | content: '';
105 | display: inline-block;
106 | position: absolute;
107 | }
108 | &::after {
109 | clear: both;
110 | border: 6px solid transparent;
111 | top: -5px;
112 | left: 7px;
113 | }
114 | &::before {
115 | border: 7px solid transparent;
116 | top: -6px;
117 | left: 6px;
118 | }
119 | }
120 | .dropdown-menu {
121 | position: static;
122 | top: 0;
123 | left: 0;
124 | min-width: 129px;
125 | padding: 4px;
126 | margin-top: 0;
127 | }
128 | }
129 |
130 | .colorpicker-position-top {
131 | .dropdown-menu {
132 | &::after {
133 | border-top: 6px solid #fff;
134 | border-bottom: 0;
135 | top: auto;
136 | bottom: -5px;
137 | }
138 | &::before {
139 | border-top: 7px solid rgba(0, 0, 0, 0.2);
140 | border-bottom: 0;
141 | top: auto;
142 | bottom: -6px;
143 | }
144 | }
145 | }
146 |
147 | .colorpicker-position-right {
148 | .dropdown-menu {
149 | &::after {
150 | border-right: 6px solid #fff;
151 | border-left: 0;
152 | top: 11px;
153 | left: -5px;
154 | }
155 | &::before {
156 | border-right: 7px solid rgba(0, 0, 0, 0.2);
157 | border-left: 0;
158 | top: 10px;
159 | left: -6px;
160 | }
161 | }
162 | }
163 |
164 | .colorpicker-position-bottom {
165 | .dropdown-menu {
166 | &::after {
167 | border-bottom: 6px solid #fff;
168 | border-top: 0;
169 | }
170 | &::before {
171 | border-bottom: 7px solid rgba(0, 0, 0, 0.2);
172 | border-top: 0;
173 | }
174 | }
175 | }
176 |
177 | .colorpicker-position-left {
178 | .dropdown-menu {
179 | &::after {
180 | border-left: 6px solid #fff;
181 | border-right: 0;
182 | top: 11px;
183 | left: auto;
184 | right: -5px;
185 | }
186 | &::before {
187 | border-left: 7px solid rgba(0, 0, 0, 0.2);
188 | border-right: 0;
189 | top: 10px;
190 | left: auto;
191 | right: -6px;
192 | }
193 | }
194 | }
195 |
196 | colorpicker-preview {
197 | display: block;
198 | height: 10px;
199 | margin: 5px 0 3px 0;
200 | clear: both;
201 | background-position: 0 100%;
202 | }
203 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | [](https://david-dm.org/buberdds/angular-bootstrap-colorpicker#info=devDependencies)
2 | [](https://travis-ci.org/buberdds/angular-bootstrap-colorpicker)
3 |
4 | angular-bootstrap-colorpicker
5 | =============================
6 |
7 | This version contains a native AngularJS directive based on bootstrap-colorpicker jQuery library.
8 | No dependency on jQuery or jQuery plugin is required.
9 |
10 | Demo page (Bootstrap v3.x.x)
11 |
12 | Previous releases:
13 | - branch 2.0 (Bootstrap v2.x.x)
14 | - branch 1.0 if you need a functionality from the original plugin or IE<9 support
15 |
16 | Installation
17 | ===============================
18 |
19 | #### npm
20 | ```shell
21 | $ npm install angular-bootstrap-colorpicker --save
22 | ```
23 |
24 | #### bower
25 | ```shell
26 | $ bower install angular-bootstrap-colorpicker --save
27 | ```
28 |
29 | Copy `css/colorpicker.css` and `js/bootstrap-colorpicker-module.js`.
30 | Add a dependency to your app, for instance:
31 |
32 | angular.module('myApp', ['colorpicker.module'])
33 |
34 | Examples:
35 | ===============================
36 |
37 | Hex format
38 | ```html
39 |
40 | ```
41 | or
42 | ```html
43 |
44 | ```
45 |
46 | RGB format
47 | ```html
48 |
49 | ```
50 |
51 | RBGA format
52 | ```html
53 |
54 | ```
55 |
56 | As non input element
57 | ```html
58 |
| t |