├── LICENSE
├── README.md
├── angular-colorpicker-dr.css
├── angular-colorpicker-dr.js
├── bower.json
├── example.html
└── package.json


/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Daniel Reznick
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, 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,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Angular Color Picker
 2 | =====
 3 |  
 4 | Description:
 5 | =====
 6 | 
 7 | The color picker for AngularJS - Native / Simple / Cool. No other dependencies are needed at all.
 8 | 
 9 | 
10 | Features:
11 | =====
12 | 
13 | - Can extend simple input
14 | - Can replace a div (or any other container) with an inline color picker
15 | - Can replace any HTML element with a cool tiny trigger
16 | - Can color the extended input
17 | 
18 | Examples:
19 | =====
20 | 
21 | ![Angular color picker in action](../gh-pages/angular-color-picker-in-action.gif "Angular color picker in action")
22 | 
23 | 
24 | <input color-picker ng-model="colorValueInput">
25 | 
26 | <div color-picker ng-model="colorValueInline"></div>
27 | 
28 | <input color-picker tiny-trigger="true" ng-model="colorValueTinyTrigger">
29 | 
30 | <input color-picker color-me="true" ng-model="colorValueInputColor">
31 | 
32 | 
33 | Usage:
34 | =====
35 | 
36 | ```javascript
37 | angular.module('colorPickerApp', ['colorpicker-dr'])
38 |   .controller('ColorPickerCtrl', ['$scope', function($scope) {
39 |   }]);
40 | ```
41 | 
42 | 
43 | Available attributes
44 | =====
45 | 
46 | * tiny-trigger="true": replace any HTML element with a cool tiny trigger
47 | * color-me="true": color the extended input on color selection
48 | 
49 | 
50 | Contact/Social:
51 | =====
52 | If you want to ask a question you can post a question on [stackoverflow](www.stackoverflow.com)
53 | 
54 | If you like my directive, you can show your appreciation by following me on [Twitter](https://twitter.com/danielreznick) / [GitHub](https://github.com/vedmack)
55 | 
56 | 
57 | License:
58 | =====
59 | 
60 | Copyright (c) 2015 Daniel Reznick, released under the MIT license
61 | 


--------------------------------------------------------------------------------
/angular-colorpicker-dr.css:
--------------------------------------------------------------------------------
  1 | .hide {
  2 |   display:none;
  3 | }
  4 | .color-picker-wrapper {
  5 | 	z-index: 90;
  6 | 	-webkit-touch-callout: none;
  7 | 	-webkit-user-select: none;
  8 | 	-khtml-user-select: none;
  9 | 	-moz-user-select: none;
 10 | 	-ms-user-select: none;
 11 | 	user-select: none;
 12 | }
 13 | .color-picker-wrapper.body {
 14 | 	position: absolute;
 15 | }
 16 | .color-picker-row {
 17 | 	display: inline-block;
 18 | 	background-color: #DDDDDD;
 19 | }
 20 | .color-picker {
 21 | 	display: inline-block;
 22 | 	width: 20px;
 23 | 	height: 20px;
 24 | 	cursor: pointer;
 25 | 	margin: 1px 1px;
 26 |     vertical-align: middle;
 27 | }
 28 | .color-picker-wrapper.picker-icon {
 29 |     font-size: 0.1px;
 30 |     display: inline-block;
 31 |     vertical-align: text-bottom;
 32 |     margin-left: -18px;
 33 | }
 34 | .color-picker-wrapper.picker-icon.trigger {
 35 | 	vertical-align: baseline;
 36 |     margin-left: 0;
 37 | }
 38 | .color-picker-row .color-picker:first-child {
 39 | 	margin-left: 2px;
 40 | }
 41 | .color-picker-row .color-picker:last-child {
 42 | 	margin-right: 2px;
 43 | }
 44 | .color-picker-row-wrapper:first-child .color-picker {
 45 | 	margin-top: 2px;
 46 | }
 47 | .color-picker-row-wrapper:last-child .color-picker {
 48 | 	margin-bottom: 2px;
 49 | }
 50 | .color-picker-wrapper.picker-icon .color-picker {
 51 | 	width: 4px;
 52 | 	height: 4px;
 53 | 	margin: 0;
 54 | }
 55 | .color-picker {
 56 |   -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
 57 |   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
 58 |   box-sizing: border-box;
 59 | }
 60 | .color-picker:hover {
 61 | 	border: 1px solid #DDDDDD;	
 62 | }
 63 | .color-picker.navy  {
 64 | 	background-color: #001f3f;
 65 | }
 66 | .color-picker.blue {
 67 | 	background-color: #0074D9;
 68 | }
 69 | .color-picker.aqua {
 70 | 	background-color: #7FDBFF;
 71 | }
 72 | .color-picker.teal {
 73 | 	background-color: #39CCCC;
 74 | }
 75 | .color-picker.olive {
 76 | 	background-color: #3D9970;
 77 | }
 78 | .color-picker.green {
 79 | 	background-color: #2ECC40;
 80 | }
 81 | .color-picker.lime {
 82 | 	background-color: #01FF70;
 83 | }
 84 | .color-picker.yellow {
 85 | 	background-color: #FFDC00;
 86 | }
 87 | .color-picker.orange {
 88 | 	background-color: #FF851B;
 89 | }
 90 | .color-picker.red {
 91 | 	background-color: #FF4136;
 92 | }
 93 | .color-picker.maroon {
 94 | 	background-color: #85144b;
 95 | }
 96 | .color-picker.fuchia {
 97 | 	background-color: #F012BE;
 98 | }
 99 | .color-picker.purple {
100 | 	background-color: #B10DC9;
101 | }
102 | .color-picker.black {
103 | 	background-color: #111111;
104 | }
105 | .color-picker.gray {
106 | 	background-color: #AAAAAA;
107 | }
108 | .color-picker.white {
109 | 	background-color: #FFFFFF;
110 | }
111 | 


--------------------------------------------------------------------------------
/angular-colorpicker-dr.js:
--------------------------------------------------------------------------------
  1 | /*global angular*/
  2 | /*jslint plusplus: true*/
  3 | /*!
  4 | * Angular Color Picker
  5 | *
  6 | * File:        angular-colorpicker-dr.js
  7 | * Version:     0.1.0
  8 | *
  9 | * Author:      Daniel Reznick
 10 | * Info:        https://github.com/vedmack/angular-colorpicker
 11 | * Contact:     vedmack@gmail.com
 12 | * Twitter:	   @danielreznick
 13 | * Q&A		   http://stackoverflow.com
 14 | *
 15 | * Copyright 2015 Daniel Reznick, all rights reserved.
 16 | * Copyright 2015 Released under the MIT License
 17 | *
 18 | * This source file is distributed in the hope that it will be useful, but
 19 | * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
 20 | * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
 21 | */
 22 | (function () {
 23 |     'use strict';
 24 |     var directive = function ($compile, $document, $window) {
 25 |         return {
 26 | 			restrict: 'A',
 27 |             require: 'ngModel',
 28 |             scope: {
 29 |                 changeColor: "&",
 30 | 				tinyTrigger: "@",
 31 | 				colorMe: "@",
 32 | 				ngModel : '='
 33 |             },
 34 | 
 35 |             link: function (scope, element, attrs, ngModel) {
 36 |                 var content,
 37 |                     templateHidden = '<div class="color-picker-wrapper body hide">',
 38 |                     templateInline = '<div class="color-picker-wrapper">',
 39 |                     template =
 40 |                             '<div class="color-picker-row-wrapper">' +
 41 |                                 '<div class="color-picker-row">' +
 42 |                                     '<cp-color class="color-picker navy" color="#001F3F">' +
 43 |                                     '</cp-color>' +
 44 |                                     '<cp-color class="color-picker blue" color="#0074D9">' +
 45 |                                     '</cp-color>' +
 46 |                                     '<cp-color class="color-picker aqua" color="#7FDBFF">' +
 47 |                                     '</cp-color>' +
 48 |                                     '<cp-color class="color-picker teal" color="#39CCCC">' +
 49 |                                     '</cp-color>' +
 50 |                                 '</div>' +
 51 |                             '</div>' +
 52 |                             '<div class="color-picker-row-wrapper">' +
 53 |                                 '<div class="color-picker-row">' +
 54 |                                     '<cp-color class="color-picker olive" color="#3D9970">' +
 55 |                                     '</cp-color>' +
 56 |                                     '<cp-color class="color-picker green" color="#2ECC40">' +
 57 |                                     '</cp-color>' +
 58 |                                     '<cp-color class="color-picker lime" color="#01FF70">' +
 59 |                                     '</cp-color>' +
 60 |                                     '<cp-color class="color-picker yellow" color="#FFDC00">' +
 61 |                                     '</cp-color>' +
 62 |                                 '</div>' +
 63 |                             '</div>' +
 64 |                             '<div class="color-picker-row-wrapper">' +
 65 |                                 '<div class="color-picker-row">' +
 66 |                                     '<cp-color class="color-picker orange" color="#FF851B">' +
 67 |                                     '</cp-color>' +
 68 |                                     '<cp-color class="color-picker red" color="#FF4136">' +
 69 |                                     '</cp-color>' +
 70 |                                     '<cp-color class="color-picker maroon" color="#85144B">' +
 71 |                                     '</cp-color>' +
 72 |                                     '<cp-color class="color-picker fuchia" color="#F012BE">' +
 73 |                                     '</cp-color>' +
 74 |                                 '</div>' +
 75 |                             '</div>' +
 76 |                             '<div class="color-picker-row-wrapper">' +
 77 |                                 '<div class="color-picker-row">' +
 78 |                                     '<cp-color class="color-picker purple" color="#B10DC9">' +
 79 |                                     '</cp-color>' +
 80 |                                     '<cp-color class="color-picker black" color="#111111">' +
 81 |                                     '</cp-color>' +
 82 |                                     '<cp-color class="color-picker gray" color="#AAAAAA">' +
 83 |                                     '</cp-color>' +
 84 |                                     '<cp-color class="color-picker white" color="#FFFFFF">' +
 85 |                                     '</cp-color>' +
 86 |                                 '</div>' +
 87 |                             '</div>' +
 88 |                         '</div>',
 89 | 					templateTinyTrigger =
 90 | 						'<div class="color-picker-wrapper picker-icon">' +
 91 | 						'<div class="color-picker-row-wrapper">' +
 92 | 							'<div class="color-picker-row">' +
 93 | 								'<cp-color class="color-picker navy">' +
 94 | 								'</cp-color>' +
 95 | 								'<cp-color class="color-picker blue">' +
 96 | 								'</cp-color>' +
 97 | 								'<cp-color class="color-picker aqua">' +
 98 | 								'</cp-color>' +
 99 | 								'<cp-color class="color-picker teal">' +
100 | 								'</cp-color>' +
101 | 							'</div>' +
102 | 						'</div>' +
103 | 						'<div class="color-picker-row-wrapper">' +
104 | 							'<div class="color-picker-row">' +
105 | 								'<cp-color class="color-picker olive">' +
106 | 								'</cp-color>' +
107 | 								'<cp-color class="color-picker green">' +
108 | 								'</cp-color>' +
109 | 								'<cp-color class="color-picker lime">' +
110 | 								'</cp-color>' +
111 | 								'<cp-color class="color-picker yellow">' +
112 | 								'</cp-color>' +
113 | 							'</div>' +
114 | 						'</div>' +
115 | 						'<div class="color-picker-row-wrapper">' +
116 | 							'<div class="color-picker-row">' +
117 | 								'<cp-color class="color-picker orange">' +
118 | 								'</cp-color>' +
119 | 								'<cp-color class="color-picker red">' +
120 | 								'</cp-color>' +
121 | 								'<cp-color class="color-picker maroon">' +
122 | 								'</cp-color>' +
123 | 								'<cp-color class="color-picker fuchia">' +
124 | 								'</cp-color>' +
125 | 							'</div>' +
126 | 						'</div>' +
127 | 						'<div class="color-picker-row-wrapper">' +
128 | 							'<div class="color-picker-row">' +
129 | 								'<cp-color class="color-picker purple">' +
130 | 								'</cp-color>' +
131 | 								'<cp-color class="color-picker black">' +
132 | 								'</cp-color>' +
133 | 								'<cp-color class="color-picker gray">' +
134 | 								'</cp-color>' +
135 | 								'<cp-color class="color-picker white">' +
136 | 								'</cp-color>' +
137 | 							'</div>' +
138 | 						'</div>' +
139 | 						'</div>',
140 | 					elementTinyTrigger,
141 | 					elementColorPicker,
142 | 					closestFunc,
143 | 					prevFunc;
144 | 				prevFunc = function (elem) {
145 | 					if (elem.previousElementSibling) {
146 | 						return elem.previousElementSibling;
147 | 					}
148 | 					while (elem = elem.previousSibling) {
149 | 						if (elem.nodeType === 1) {
150 | 							return elem;
151 | 						}
152 | 					}
153 | 				};
154 | 				closestFunc = function (elem, cls) {
155 | 					var found = false;
156 | 					while (elem.parent() !== undefined && found === false) {
157 | 						if (elem.parent().hasClass(cls)) {
158 | 							found = true;
159 | 						}
160 | 						elem = elem.parent();
161 | 					}
162 | 					return elem;
163 | 				};
164 | 				if (scope.tinyTrigger !== undefined && scope.tinyTrigger === 'true') {
165 | 					templateTinyTrigger = templateTinyTrigger.replace('picker-icon', 'picker-icon trigger');
166 | 					elementTinyTrigger = $compile(templateTinyTrigger)(scope);
167 | 					element.replaceWith(elementTinyTrigger);
168 | 
169 | 					template = templateHidden + template;
170 | 					elementColorPicker = angular.element(template);
171 | 					elementColorPicker.find('cp-color').on('click', function (ev) {
172 | 						ngModel.$setViewValue(angular.element(ev.target).attr('color'));
173 | 					});
174 | 					angular.element(document.body).append(elementColorPicker);
175 | 
176 | 					elementTinyTrigger.bind("click", function (ev) {
177 | 						var wrapper = closestFunc(angular.element(ev.target), 'color-picker-wrapper'),
178 | 							top = wrapper[0].getBoundingClientRect().top,
179 | 							height = wrapper[0].getBoundingClientRect().height;
180 | 						top = top + $window.pageYOffset;
181 | 
182 | 						elementColorPicker.removeClass('hide');
183 | 						elementColorPicker[0].style.top = top + height + 'px';
184 | 						elementColorPicker[0].style.left = wrapper[0].getBoundingClientRect().left + 'px';
185 | 						ev.stopPropagation();
186 | 					});
187 | 
188 | 				} else {
189 | 					if (element[0].tagName === 'INPUT') {
190 | 
191 | 						template = templateHidden + template;
192 | 						elementColorPicker = angular.element(template);
193 | 						elementColorPicker.find('cp-color').on('click', function (ev) {
194 | 							var color = angular.element(ev.target).attr('color');
195 | 							ngModel.$setViewValue(color);
196 | 							if (scope.colorMe !== undefined && scope.colorMe === 'true') {
197 | 								element[0].style.backgroundColor = color;
198 | 							} else {
199 | 								element.val(color);
200 | 							}
201 | 						});
202 | 						angular.element(document.body).append(elementColorPicker);
203 | 
204 | 						element.bind("click", function (ev) {
205 | 							//show color picker beneath the input
206 | 							var top = ev.target.getBoundingClientRect().top,
207 | 								height = ev.target.getBoundingClientRect().height;
208 | 							top = top + $window.pageYOffset;
209 | 
210 | 							elementColorPicker.removeClass('hide');
211 | 							elementColorPicker[0].style.top = top + height + 'px';
212 | 							elementColorPicker[0].style.left = ev.target.getBoundingClientRect().left + 'px';
213 | 							ev.stopPropagation();
214 | 						});
215 | 
216 | 						elementTinyTrigger = $compile(templateTinyTrigger)(scope);
217 | 						element.after(elementTinyTrigger);
218 | 						elementTinyTrigger.bind("click", function (ev) {
219 | 							//show color picker beneath the input
220 | 							var $wrapper = closestFunc(angular.element(ev.target), 'color-picker-wrapper'),
221 | 								wrapperPrev = prevFunc($wrapper[0]),
222 | 								top = wrapperPrev.getBoundingClientRect().top,
223 | 								height = wrapperPrev.getBoundingClientRect().height;
224 | 							top = top + $window.pageYOffset;
225 | 
226 | 							elementColorPicker.removeClass('hide');
227 | 							elementColorPicker[0].style.top = top + height + 'px';
228 | 							elementColorPicker[0].style.left = wrapperPrev.getBoundingClientRect().left + 'px';
229 | 							ev.stopPropagation();
230 | 						});
231 | 
232 | 						$compile(content)(scope);
233 | 					} else {
234 | 						//replace element with the color picker
235 | 						template = templateInline + template;
236 | 						elementColorPicker = $compile(template)(scope);
237 | 						element.replaceWith(elementColorPicker);
238 | 						elementColorPicker.find('cp-color').on('click', function (ev) {
239 | 							ngModel.$setViewValue(angular.element(ev.target).attr('color'));
240 | 							ev.stopPropagation();
241 | 						});
242 | 					}
243 | 				}
244 | 				//when clicking somewhere on the screen / body -> hide the color picker
245 | 				$document.bind("click", function (ev) {
246 | 					var i,
247 | 						docChildren = $document.find('body').children();
248 | 					for (i = 0; i < docChildren.length; i++) {
249 | 						if (docChildren[i].getAttribute("class") && docChildren[i].getAttribute("class").indexOf('color-picker-wrapper body') !== -1) {
250 | 							angular.element(docChildren[i]).addClass('hide');
251 | 						}
252 | 					}
253 | 				});
254 | 	        }
255 |         };
256 |     };
257 |     angular.module('colorpicker-dr', []).directive('colorPicker',['$compile', '$document', '$window', directive]);
258 | }());
259 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"author": "Daniel Reznick",
 3 | 	"name": "angular-colorpicker-dr",
 4 | 	"description": "The color picker for AngularJS - Native / Simple / Cool. No other dependencies are needed at all.",
 5 | 	"version": "0.1.0",
 6 | 	"homepage": "http://vedmack.github.io/angular-colorpicker/",
 7 | 	"repository": {
 8 | 		"type": "git",
 9 | 		"url": "https://github.com/vedmack/angular-colorpicker/"
10 | 	},
11 | 	"main": [
12 | 		"angular-colorpicker-dr.js",
13 | 		"angular-colorpicker-dr.css"
14 | 	],
15 | 	"ignore": [],
16 | 	"dependencies": {
17 | 		"angular": ">=1.3.0"
18 | 	},
19 | 	"keywords": [
20 | 		"angular",
21 | 		"color-picker",
22 | 		"colorpicker",
23 | 		"directive",
24 | 		"module"
25 | 	],
26 | 	"license": "MIT"
27 | }


--------------------------------------------------------------------------------
/example.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html ng-app="colorPickerApp">
  3 | 
  4 |   <head>
  5 | 	<title>Angular Color Picker by Daniel Reznick</title>
  6 | 	<link id="favicon" rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
  7 |     <script data-require="angular.js@1.3.9" data-semver="1.3.9" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.9/angular.min.js"></script>
  8 |     <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
  9 |     <link rel="stylesheet" href="angular-colorpicker-dr.css" />
 10 |     <script src="angular-colorpicker-dr.js"></script>
 11 | 
 12 | 	<script>
 13 | 		angular.module('colorPickerApp', ['colorpicker-dr']).controller('ColorPickerCtrl', ['$scope', function($scope) {
 14 | 		}]);
 15 | 	</script>
 16 | 	<style>
 17 | 		body {
 18 | 			font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
 19 | 			font-size: 14px;
 20 | 			line-height: 1.42857143;
 21 | 			color: #333;
 22 | 			background-color: #fff
 23 | 		}
 24 | 		.main-container {
 25 | 			margin: 25px auto;
 26 | 			max-width: 700px;
 27 | 		}
 28 | 		.main-container-title {
 29 | 			text-align: center;
 30 | 			background-color: #eeeeee;
 31 | 		}
 32 | 		.desc_p {
 33 | 			font-size: 18px;
 34 | 			font-weight: 200;
 35 | 			text-align: left;
 36 | 			line-height: 30px;
 37 | 		}
 38 | 		.sample-container {
 39 | 			border-top: 1px solid;
 40 | 			margin-top: 25px;
 41 | 		}
 42 | 		#footer {
 43 | 			margin-top: 100px;
 44 | 			text-align: center;
 45 | 		}
 46 | 		#download_btn_wrapper {
 47 | 			text-align: center;
 48 | 			padding-bottom: 10px;
 49 | 		}
 50 | 		.some_btn {
 51 | 			margin-bottom: 0;
 52 | 			font-weight: 400;
 53 | 			text-align: center;
 54 | 			vertical-align: middle;
 55 | 			cursor: pointer;
 56 | 			background-image: none;
 57 | 			border: 1px solid transparent;
 58 | 			white-space: nowrap;
 59 | 			padding: 6px 12px;
 60 | 			font-size: 14px;
 61 | 			line-height: 1.42857143;
 62 | 			border-radius: 4px;
 63 | 			-webkit-user-select: none;
 64 | 			-moz-user-select: none;
 65 | 			-ms-user-select: none;
 66 | 			text-decoration: none;
 67 | 			margin-top: 10px;
 68 | 		}
 69 | 		.some_btn.download_btn {
 70 | 			color: #fff;
 71 | 			background-color: #428bca;
 72 | 			border-color: #357ebd;
 73 | 			display: inline-block;
 74 | 		}
 75 | 		.inline-sample .color-picker-wrapper {
 76 | 			display: inline-block;
 77 | 			vertical-align: middle;
 78 | 		}
 79 | 		.value-wrapper {
 80 | 			display: inline-block;
 81 | 			vertical-align: middle;
 82 | 			margin-left: 50px;
 83 | 		}
 84 | 		.social_buttons {
 85 | 			margin: 25px auto;
 86 | 			text-align: center;
 87 | 		}
 88 | 	</style>
 89 |   </head>
 90 | 
 91 |   <body>
 92 | 	<div class="social_buttons">
 93 | 		<iframe src="http://ghbtns.com/github-btn.html?user=vedmack&repo=yadcf&type=watch&count=true"
 94 | 			allowtransparency="true" frameborder="0" scrolling="0" width="150" height="30" style="vertical-align: middle"></iframe>
 95 | 			
 96 | 				
 97 | 		<a href="https://twitter.com/share" class="twitter-share-button" data-via="danielreznick" data-count="none">Tweet</a>
 98 | 		<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
 99 | 								 
100 | 	</div>	
101 | 
102 | 	<div class="main-container">
103 | 		<div class="main-container-title">
104 | 			<h1>Angular Color Picker</h1>
105 | 			<h3>The color picker for AngularJS - Native / Simple / Cool</h3>
106 | 			<h3>version 0.1.0<h3>
107 | 			<div id="download_btn_wrapper">
108 | 				<a href="https://github.com/vedmack/yadcf/releases" class="some_btn download_btn">
109 | 					Download
110 | 				</a>
111 | 			</div>
112 | 		</div>
113 | 		
114 | 		<div ng-controller="ColorPickerCtrl">
115 | 				
116 | 			<div class="sample-container">
117 | 				<p class="desc_p">Using with an input</p>
118 | 				<input color-picker ng-model="colorValueInput">
119 | 				
120 | 				<pre class="prettyprint">
121 | 
122 | &lt;input color-picker ng-model=&quot;colorValueInput&quot;&gt;
123 | 				</pre>
124 | 			</div>
125 | 
126 | 			<div class="sample-container inline-sample">
127 | 				<p class="desc_p">Replacing a div (or any other container) with an inline color picker</p>
128 | 				<div color-picker ng-model="colorValueInline"></div>
129 | 				<span class="value-wrapper">value : {{colorValueInline}}</span>
130 | 			
131 | 				<pre class="prettyprint">
132 | 
133 | &lt;div color-picker ng-model=&quot;colorValueInline&quot;&gt;&lt;/div&gt;
134 | 				</pre>
135 | 			</div>
136 | 
137 | 			<div class="sample-container">
138 | 				<p class="desc_p">Replacing any HTML element with a cool tiny trigger (click on the little colored square)</p>
139 | 				<input color-picker tiny-trigger="true" ng-model="colorValueTinyTrigger">
140 | 				<span class="value-wrapper">value : {{colorValueTinyTrigger}}</span>
141 | 
142 | 				<pre class="prettyprint">
143 | 
144 | &lt;input color-picker tiny-trigger=&quot;true&quot; ng-model=&quot;colorValueTinyTrigger&quot;&gt;
145 | 				</pre>
146 | 			</div>
147 | 			
148 | 			<div class="sample-container">
149 | 				<p class="desc_p">Coloring the input with the selected color</p>
150 | 				<input color-picker color-me="true" ng-model="colorValueInputColor">
151 | 				
152 | 				<pre class="prettyprint">
153 | 
154 | &lt;input color-picker color-me=&quot;true&quot; ng-model=&quot;colorValueInputColor&quot;&gt;
155 | 				</pre>
156 | 			</div>
157 | 			
158 | 		</div>
159 |     </div>
160 | 	<div id="footer">
161 | 		Created by <a target="_blank" href="https://github.com/vedmack">Daniel Reznick</a>, inspired by: <a target="_blank" href="http://clrs.cc/">nicer color palette for the web</a> by: <a target="_blank" href="http://mrmrs.io/">MRMRS</a>
162 | 	</div>
163 | 	<div class="social_buttons">
164 | 		  	<a href="https://twitter.com/danielreznick" class="twitter-follow-button" data-show-count="false" >Follow @danielreznick</a>
165 | 			<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
166 | 	</div>
167 |   </body>
168 | </html>
169 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-colorpicker-dr",
 3 |   "version": "0.1.0",
 4 |   "author": {
 5 |     "name": "Daniel Reznick",
 6 |     "url": "https://github.com/vedmack"
 7 |   },
 8 |   "license": "MIT"
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/vedmack/angular-colorpicker.git"
12 |   },
13 |   "homepage": "http://vedmack.github.io/angular-colorpicker/",
14 |   "bugs": {
15 |     "url": "https://github.com/vedmack/angular-colorpicker/issues"
16 |   },
17 |   "main": "jquery.dataTables.yadcf.js",
18 |   "files": [
19 |     "angular-colorpicker-dr.js",
20 |     "angular-colorpicker-dr.css"
21 |   ],
22 |   "description": "The color picker for AngularJS - Native / Simple / Cool. No other dependencies are needed at all.",
23 |   "keywords": [
24 |     "angular",
25 |     "color-picker",
26 |     "colorpicker",
27 |     "directive",
28 |     "module"
29 |   ],
30 |   "dependencies": {
31 |     "angular": ">=1.3.0"
32 |   },
33 | }
34 | 


--------------------------------------------------------------------------------