Skip to content

Commit 87dc07e

Browse files
author
ruhley
committed
Create angular-color-picker.js
1 parent fd4f286 commit 87dc07e

File tree

1 file changed

+202
-0
lines changed

1 file changed

+202
-0
lines changed

‎angular-color-picker.js‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
'use strict';
2+
3+
angular.module('color-picker', [])
4+
.directive('colorPicker', ['$compile', function ($compile) {
5+
return {
6+
restrict: 'E',
7+
require: '?ngModel',
8+
link: function($scope, element, attrs) {
9+
$scope.init = function() {
10+
$scope.createInput();
11+
$scope.hue = 0;
12+
$scope.saturation = 50;
13+
$scope.lightness = 50;
14+
$scope.opacity = 100;
15+
};
16+
17+
$scope.createInput = function() {
18+
var html, el, template,
19+
currentInput = element.find('.color-picker-wrapper');
20+
21+
if (currentInput.length > 0) {
22+
return currentInput;
23+
}
24+
25+
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">' +
28+
'<span class="color-picker-swatch-color" style="background-color: {{swatch}};"></span>' +
29+
'</span>' +
30+
'<div class="color-picker-panel">' +
31+
'<div class="color-picker-hue color-picker-sprite" ng-click="hueChange($event, true)" ng-mousemove="hueChange($event, false)" ng-mousedown="hueDown()" ng-mouseup="hueUp()">' +
32+
'<div class="color-picker-slider" style="top: {{huePos}}px;"></div>' +
33+
'</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()">' +
35+
'<div class="color-picker-slider" style="top: {{opacityPos}}px;"></div>' +
36+
'</div>' +
37+
'<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()">' +
38+
'<div class="color-picker-grid-inner"></div>' +
39+
'<div class="color-picker-picker" style="top: {{lightnessPos}}px; left: {{saturationPos}}px;">' +
40+
'<div></div>' +
41+
'</div>' +
42+
'</div>' +
43+
'</div>' +
44+
'</div>';
45+
46+
el = angular.element(html);
47+
template = $compile(el)($scope);
48+
element.append(template);
49+
50+
return el;
51+
};
52+
53+
$scope.focus = function() {
54+
$scope.log('color Picker: Focus Event');
55+
element.find('.color-picker-input').focus();
56+
};
57+
58+
$scope.show = function() {
59+
$scope.log('color Picker: Show Event');
60+
$scope.visible = true;
61+
};
62+
63+
$scope.hide = function() {
64+
$scope.log('color Picker: Hide Event');
65+
$scope.visible = false;
66+
};
67+
68+
$scope.update = function() {
69+
var color = tinycolor({h: $scope.hue, s: $scope.saturation, l: $scope.lightness});
70+
color.setAlpha($scope.opacity / 100);
71+
$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();
74+
};
75+
76+
$scope.$watch('ngModel', function(newValue, oldValue) {
77+
if (newValue !== undefined && newValue !== oldValue) {
78+
$scope.log('color Picker: MODEL - CHANGED', newValue);
79+
var color = tinycolor(newValue);
80+
81+
if (color.isValid()) {
82+
var hsl = color.toHsl();
83+
$scope.hue = hsl.h;
84+
$scope.saturation = hsl.s * 100;
85+
$scope.lightness = hsl.l * 100;
86+
$scope.opacity = hsl.a * 100;
87+
} else {
88+
alert('Invalid Color Format!');
89+
}
90+
}
91+
});
92+
93+
//---------------------------
94+
// HUE
95+
//---------------------------
96+
$scope.hueDown = function() {
97+
$scope.log('color Picker: HUE - MOUSE DOWN');
98+
$scope.hueMouse = true;
99+
};
100+
101+
$scope.hueUp = function() {
102+
$scope.log('color Picker: HUE - MOUSE UP');
103+
$scope.hueMouse = false;
104+
};
105+
106+
$scope.hueChange = function(evt, forceRun) {
107+
if ($scope.hueMouse || forceRun) {
108+
$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;
111+
}
112+
};
113+
114+
$scope.$watch('hue', function(newValue, oldValue) {
115+
if (newValue !== undefined) {
116+
$scope.log('color Picker: HUE - CHANGED');
117+
$scope.huePos = (1 - (newValue / 360)) * element.find('.color-picker-hue').height();
118+
$scope.grid = tinycolor({h: newValue, s: 50, l: 50}).toHslString();
119+
$scope.update();
120+
}
121+
});
122+
123+
//---------------------------
124+
// OPACITY
125+
//---------------------------
126+
$scope.opacityDown = function() {
127+
$scope.log('color Picker: OPACITY - MOUSE DOWN');
128+
$scope.opacityMouse = true;
129+
};
130+
131+
$scope.opacityUp = function() {
132+
$scope.log('color Picker: OPACITY - MOUSE UP');
133+
$scope.opacityMouse = false;
134+
};
135+
136+
$scope.opacityChange = function(evt, forceRun) {
137+
if ($scope.opacityMouse || forceRun) {
138+
$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;
141+
}
142+
};
143+
144+
$scope.$watch('opacity', function(newValue, oldValue) {
145+
if (newValue !== undefined) {
146+
$scope.log('color Picker: OPACITY - CHANGED');
147+
$scope.opacityPos = (1 - (newValue / 100)) * element.find('.color-picker-opacity').height();
148+
$scope.update();
149+
}
150+
});
151+
152+
//---------------------------
153+
// COLOR
154+
//---------------------------
155+
$scope.colorDown = function() {
156+
$scope.log('color Picker: COLOR - MOUSE DOWN');
157+
$scope.colorMouse = true;
158+
};
159+
160+
$scope.colorUp = function() {
161+
$scope.log('color Picker: COLOR - MOUSE UP');
162+
$scope.colorMouse = false;
163+
};
164+
165+
$scope.colorChange = function(evt, forceRun) {
166+
if ($scope.colorMouse || forceRun) {
167+
$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;
171+
}
172+
};
173+
174+
$scope.$watch('saturation', function(newValue, oldValue) {
175+
if (newValue !== undefined && newValue !== oldValue) {
176+
$scope.log('color Picker: SATURATION - CHANGED');
177+
$scope.saturationPos = (newValue / 100) * element.find('.color-picker-grid-inner').width();
178+
$scope.update();
179+
}
180+
});
181+
182+
$scope.$watch('lightness', function(newValue, oldValue) {
183+
if (newValue !== undefined && newValue !== oldValue) {
184+
$scope.log('color Picker: LIGHTNESS - CHANGED');
185+
$scope.lightnessPos = (1 - (newValue / 100)) * element.find('.color-picker-grid-inner').height();
186+
$scope.update();
187+
}
188+
});
189+
190+
191+
//---------------------------
192+
// HELPER FUNCTIONS
193+
//---------------------------
194+
$scope.log = function() {
195+
console.log.apply(console, arguments);
196+
};
197+
198+
199+
$scope.init();
200+
}
201+
};
202+
}]);

0 commit comments

Comments
 (0)