Skip to content

Commit 36f943b

Browse files
ruhleyruhley
committed
bowerifying
1 parent bf03858 commit 36f943b

File tree

8 files changed

+187
-1310
lines changed

8 files changed

+187
-1310
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
bower_components

‎README.md‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,15 @@ angular-colour-picker
33

44
AngularJS Colour Picker Directive
55

6+
Requirements
7+
=====
8+
* tinycolor.js - looking at removing in future versions
9+
NO requirement for jQuery!
10+
611
Installation
712
=====
8-
* Include the js and css files.
9-
* Add the module line
13+
* Include tinycolor.js, angular-color-picker.js and angular-color-picker.css
14+
* Add the module line
1015
```javascript
1116
angular.module('app', [
1217
'color-picker'
@@ -21,4 +26,4 @@ angular.module('app', [
2126
Inspiration and code taken from projects like
2227
* http://kaihenzler.github.io/angular-minicolors/
2328
* http://mjolnic.github.io/bootstrap-colorpicker/
24-
* https://github.com/buberdds/angular-bootstrap-colorpicker
29+
* https://github.com/buberdds/angular-bootstrap-colorpicker/

‎angular-color-picker.css‎

Lines changed: 3 additions & 175 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎angular-color-picker.js‎

Lines changed: 95 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,11 @@
33
angular.module('color-picker', [])
44
.directive('colorPicker', ['$compile', function ($compile) {
55
return {
6-
restrict: 'E',
6+
restrict: 'A',
77
require: '?ngModel',
8+
scope: {
9+
format: '='
10+
},
811
link: function($scope, element, attrs) {
912
$scope.init = function() {
1013
$scope.createInput();
@@ -16,22 +19,22 @@ angular.module('color-picker', [])
1619

1720
$scope.createInput = function() {
1821
var html, el, template,
19-
currentInput = element.find('.color-picker-wrapper');
22+
currentInput = $scope.find('.color-picker-wrapper');
2023

2124
if (currentInput.length > 0) {
2225
return currentInput;
2326
}
2427

2528
html = '<div class="color-picker-wrapper" ng-class="{\'color-picker-focus\': visible}">' +
26-
'<input class="color-picker-input form-control" type="text" ng-model="ngModel" size="7" ng-focus="show()">' +
27-
'<span class="color-picker-swatch">' +
29+
'<input class="color-picker-input form-control" type="text" ng-model="ngModel" size="7" ng-focus="show()" ng-blur="hide()">' +
30+
'<span class="color-picker-swatch" ng-click="focus()">' +
2831
'<span class="color-picker-swatch-color" style="background-color: {{swatch}};"></span>' +
2932
'</span>' +
3033
'<div class="color-picker-panel">' +
3134
'<div class="color-picker-hue color-picker-sprite" ng-click="hueChange($event, true)" ng-mousemove="hueChange($event, false)" ng-mousedown="hueDown()" ng-mouseup="hueUp()">' +
3235
'<div class="color-picker-slider" style="top: {{huePos}}px;"></div>' +
3336
'</div>' +
34-
'<div class="color-picker-opacity color-picker-sprite" ng-click="opacityChange($event, true)" ng-mousemove="opacityChange($event, false)" ng-mousedown="opacityDown()" ng-mouseup="opacityUp()">' +
37+
'<div class="color-picker-opacity color-picker-sprite" ng-class="{\'color-picker-hidden\': alpha}" ng-click="opacityChange($event, true)" ng-mousemove="opacityChange($event, false)" ng-mousedown="opacityDown()" ng-mouseup="opacityUp()">' +
3538
'<div class="color-picker-slider" style="top: {{opacityPos}}px;"></div>' +
3639
'</div>' +
3740
'<div class="color-picker-grid color-picker-sprite" style="background-color: {{grid}};" ng-click="colorChange($event, true)" ng-mousemove="colorChange($event, false)" ng-mousedown="colorDown()" ng-mouseup="colorUp()">' +
@@ -45,19 +48,26 @@ angular.module('color-picker', [])
4548

4649
el = angular.element(html);
4750
template = $compile(el)($scope);
48-
element.append(template);
51+
//element.append(template);
52+
element.after(template);
53+
element.hide();
54+
55+
$scope.wrapper = el;
4956

5057
return el;
5158
};
5259

5360
$scope.focus = function() {
5461
$scope.log('color Picker: Focus Event');
55-
element.find('.color-picker-input').focus();
62+
$scope.find('.color-picker-input').focus();
5663
};
5764

5865
$scope.show = function() {
5966
$scope.log('color Picker: Show Event');
6067
$scope.visible = true;
68+
$scope.hueMouse = false;
69+
$scope.opacityMouse = true;
70+
$scope.colorMouse = false;
6171
};
6272

6373
$scope.hide = function() {
@@ -69,8 +79,28 @@ angular.module('color-picker', [])
6979
var color = tinycolor({h: $scope.hue, s: $scope.saturation, l: $scope.lightness});
7080
color.setAlpha($scope.opacity / 100);
7181
$scope.log('color Picker: COLOR CHANGED TO ', color, $scope.hue, $scope.saturation, $scope.lightness, $scope.opacity);
72-
$scope.swatch = color.toHslString();
73-
$scope.ngModel = color.toHslString();
82+
83+
switch ($scope.format) {
84+
case 'rgb':
85+
$scope.swatch = color.toRgbString();
86+
$scope.ngModel = color.toRgbString();
87+
break;
88+
89+
case 'hex':
90+
$scope.swatch = color.toHexString();
91+
$scope.ngModel = color.toHexString();
92+
break;
93+
94+
case 'hsv':
95+
$scope.swatch = color.toHsvString();
96+
$scope.ngModel = color.toHsvString();
97+
break;
98+
99+
default:
100+
$scope.swatch = color.toHslString();
101+
$scope.ngModel = color.toHslString();
102+
break;
103+
}
74104
};
75105

76106
$scope.$watch('ngModel', function(newValue, oldValue) {
@@ -90,6 +120,12 @@ angular.module('color-picker', [])
90120
}
91121
});
92122

123+
$scope.$watch('format', function(newValue, oldValue) {
124+
if (newValue !== undefined && newValue !== oldValue) {
125+
$scope.update();
126+
}
127+
});
128+
93129
//---------------------------
94130
// HUE
95131
//---------------------------
@@ -106,15 +142,15 @@ angular.module('color-picker', [])
106142
$scope.hueChange = function(evt, forceRun) {
107143
if ($scope.hueMouse || forceRun) {
108144
$scope.log('color Picker: HUE - MOUSE CHANGE');
109-
var el = element.find('.color-picker-hue');
110-
$scope.hue = (1 - ((evt.pageY - el.offset().top) / el.height())) * 360;
145+
var el = $scope.find('.color-picker-hue');
146+
$scope.hue = (1 - ((evt.pageY - $scope.offset(el, 'top')) / el.prop('offsetHeight'))) * 360;
111147
}
112148
};
113149

114150
$scope.$watch('hue', function(newValue, oldValue) {
115151
if (newValue !== undefined) {
116152
$scope.log('color Picker: HUE - CHANGED');
117-
$scope.huePos = (1 - (newValue / 360)) * element.find('.color-picker-hue').height();
153+
$scope.huePos = (1 - (newValue / 360)) * $scope.find('.color-picker-hue').prop('offsetHeight');
118154
$scope.grid = tinycolor({h: newValue, s: 50, l: 50}).toHslString();
119155
$scope.update();
120156
}
@@ -136,15 +172,15 @@ angular.module('color-picker', [])
136172
$scope.opacityChange = function(evt, forceRun) {
137173
if ($scope.opacityMouse || forceRun) {
138174
$scope.log('color Picker: OPACITY - MOUSE CHANGE');
139-
var el = element.find('.color-picker-opacity');
140-
$scope.opacity = (1 - ((evt.pageY - el.offset().top) / el.height())) * 100;
175+
var el = $scope.find('.color-picker-opacity');
176+
$scope.opacity = (1 - ((evt.pageY - $scope.offset(el, 'top')) / el.prop('offsetHeight'))) * 100;
141177
}
142178
};
143179

144180
$scope.$watch('opacity', function(newValue, oldValue) {
145181
if (newValue !== undefined) {
146182
$scope.log('color Picker: OPACITY - CHANGED');
147-
$scope.opacityPos = (1 - (newValue / 100)) * element.find('.color-picker-opacity').height();
183+
$scope.opacityPos = (1 - (newValue / 100)) * $scope.find('.color-picker-opacity').prop('offsetHeight');
148184
$scope.update();
149185
}
150186
});
@@ -165,24 +201,24 @@ angular.module('color-picker', [])
165201
$scope.colorChange = function(evt, forceRun) {
166202
if ($scope.colorMouse || forceRun) {
167203
$scope.log('color Picker: COLOR - MOUSE CHANGE');
168-
var el = element.find('.color-picker-grid-inner');
169-
$scope.saturation = ((evt.pageX - el.offset().left) / el.width()) * 100;
170-
$scope.lightness = (1 - ((evt.pageY - el.offset().top) / el.height())) * 100;
204+
var el = $scope.find('.color-picker-grid-inner');
205+
$scope.saturation = ((evt.pageX - $scope.offset(el, 'left')) / el.prop('offsetWidth')) * 100;
206+
$scope.lightness = (1 - ((evt.pageY - $scope.offset(el, 'top')) / el.prop('offsetHeight'))) * 100;
171207
}
172208
};
173209

174210
$scope.$watch('saturation', function(newValue, oldValue) {
175211
if (newValue !== undefined && newValue !== oldValue) {
176212
$scope.log('color Picker: SATURATION - CHANGED');
177-
$scope.saturationPos = (newValue / 100) * element.find('.color-picker-grid-inner').width();
213+
$scope.saturationPos = (newValue / 100) * $scope.find('.color-picker-grid-inner').prop('offsetWidth');
178214
$scope.update();
179215
}
180216
});
181217

182218
$scope.$watch('lightness', function(newValue, oldValue) {
183219
if (newValue !== undefined && newValue !== oldValue) {
184220
$scope.log('color Picker: LIGHTNESS - CHANGED');
185-
$scope.lightnessPos = (1 - (newValue / 100)) * element.find('.color-picker-grid-inner').height();
221+
$scope.lightnessPos = (1 - (newValue / 100)) * $scope.find('.color-picker-grid-inner').prop('offsetHeight');
186222
$scope.update();
187223
}
188224
});
@@ -195,6 +231,45 @@ angular.module('color-picker', [])
195231
console.log.apply(console, arguments);
196232
};
197233

234+
$scope.find = function(selector) {
235+
var el = $scope.wrapper ? $scope.wrapper[0] : element[0];
236+
237+
if (selector.indexOf('.') === 0) {
238+
return angular.element(el.getElementsByClassName(selector.replace('.', '')));
239+
}
240+
};
241+
242+
$scope.offset = function(el, type) {
243+
var offset = null;
244+
// try the jQuery way if possible
245+
try {
246+
offset = el.offset();
247+
} catch(e) {}
248+
249+
if (offset === null) {
250+
if (el.length === 0) {
251+
return null;
252+
}
253+
254+
var rawDom = el[0];
255+
var _x = 0;
256+
var _y = 0;
257+
var body = document.documentElement || document.body;
258+
var scrollX = window.pageXOffset || body.scrollLeft;
259+
var scrollY = window.pageYOffset || body.scrollTop;
260+
_x = rawDom.getBoundingClientRect().left + scrollX;
261+
_y = rawDom.getBoundingClientRect().top + scrollY;
262+
263+
offset = {left: _x, top:_y};
264+
}
265+
266+
if (type !== undefined) {
267+
return offset[type];
268+
}
269+
270+
return offset;
271+
};
272+
198273

199274
$scope.init();
200275
}

‎bower.json‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"name": "angular-color-picker",
3+
"main": "angular-color-picker.js",
4+
"version": "0.0.1",
5+
"homepage": "https://github.com/ruhley/angular-color-picker",
6+
"authors": [
7+
"ruhley <[email protected]>"
8+
],
9+
"description": "Color Picker Directive For AngularJS",
10+
"keywords": [
11+
"Color",
12+
"Color Picker",
13+
"Directive",
14+
"Angular",
15+
"AngularJS"
16+
],
17+
"license": "MIT",
18+
"ignore": [
19+
"**/.*",
20+
"node_modules",
21+
"bower_components",
22+
"examples"
23+
],
24+
"dependencies": {
25+
"tinycolor": "~1.1.0",
26+
"bootstrap": "~3.3.1"
27+
}
28+
}

‎examples/01-simple.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<html>
2+
<head>
3+
<title>Example 1 - Simple</title>
4+
5+
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css" />
6+
7+
<link rel="stylesheet" href="../angular-color-picker.css" />
8+
9+
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
10+
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
11+
<script src="../bower_components/angularjs/angular.min.js"></script>
12+
<script src="../bower_components/tinycolor/tinycolor.js"></script>
13+
14+
<script src="app.js"></script>
15+
<script src="../angular-color-picker.js"></script>
16+
</head>
17+
<body ng-app="app" ng-controller="AppCtrl">
18+
{{title}}
19+
20+
<div class="col-sm-12">
21+
<div class="row">
22+
<label class="control-label">Format</label>
23+
<select ng-model="format" class="form-control">
24+
<option value="hsl">HSL</option>
25+
<option value="rgb">RGB</option>
26+
<option value="hex">HEX</option>
27+
</select>
28+
</div>
29+
30+
<div class="row">
31+
<label class="control-label">Alpha</label>
32+
<select ng-model="alpha" class="form-control">
33+
<option value="true">Yes</option>
34+
<option value="false">No</option>
35+
</select>
36+
</div>
37+
38+
<div class="row">
39+
<label class="control-label">Color</label>
40+
<input type="text" class="form-control" color-picker format="format" alpha="alpha">
41+
</div>
42+
</div>
43+
</body>
44+
</html>

‎examples/app.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
app = angular
2+
.module('app', ['color-picker'])
3+
.controller('AppCtrl', function($scope) {
4+
$scope.title = 'Hello World';
5+
$scope.format = 'hsl';
6+
$scope.alpha = 'true';
7+
});

0 commit comments

Comments
 (0)