-
Notifications
You must be signed in to change notification settings - Fork 51
/
angular-minicolors.js
155 lines (130 loc) · 4.37 KB
/
angular-minicolors.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
'format cjs';
'use strict';
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
define(['angular', 'jquery-minicolors'], factory);
} else if (typeof exports === 'object') {
module.exports = factory(require('angular'), require('jquery-minicolors'));
module.exports = 'minicolors';
} else {
root.angularMinicolors = factory(root.angular, root.jqueryMinicolors);
}
})(this, function(angular) {
angular.module('minicolors', []);
angular.module('minicolors').provider('minicolors', function() {
this.defaults = {
theme: 'bootstrap',
position: 'top left',
defaultValue: '',
animationSpeed: 50,
animationEasing: 'swing',
change: null,
changeDelay: 0,
control: 'hue',
hide: null,
hideSpeed: 100,
inline: false,
letterCase: 'lowercase',
opacity: false,
show: null,
showSpeed: 100
};
this.$get = function() {
return this;
};
});
angular.module('minicolors').directive('minicolors', ['minicolors', '$timeout', function(minicolors, $timeout) {
return {
require: '?ngModel',
restrict: 'A',
priority: 1, //since we bind on an input element, we have to set a higher priority than angular-default input
link: function(scope, element, attrs, ngModel) {
var inititalized = false;
//gets the settings object
var getSettings = function() {
var config = angular.extend({}, minicolors.defaults, scope.$eval(attrs.minicolors));
return config;
};
/**
* check if value is valid color value
* e.g.#fff000 or #fff
* @param color
*/
function isValidColor(color) {
return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color);
}
function canSetValue() {
return (element.data('minicolors-settings') != null)
}
/**
* set color value as minicolors internal color value
* @param color
*/
function setMinicolorsValue(color) {
if (isValidColor(color) && canSetValue()) {
element.minicolors('value', color);
}
}
//what to do if the value changed
ngModel.$render = function() {
//we are in digest or apply, and therefore call a timeout function
$timeout(function() {
var color = ngModel.$viewValue;
setMinicolorsValue(color);
}, 0, false);
};
//init method
var initMinicolors = function() {
if (!ngModel) {
return;
}
var settings = getSettings();
settings.change = function(hex) {
scope.$apply(function() {
if (isValidColor(hex))
ngModel.$setViewValue(hex);
});
};
//destroy the old colorpicker if one already exists
if (element.hasClass('minicolors-input')) {
element.minicolors('destroy');
element.off('blur', onBlur);
}
// Create the new minicolors widget
element.minicolors(settings);
// hook up into the jquery-minicolors onBlur event.
element.on('blur', onBlur);
// are we inititalized yet ?
//needs to be wrapped in $timeout, to prevent $apply / $digest errors
//$scope.$apply will be called by $timeout, so we don't have to handle that case
if (!inititalized) {
$timeout(function() {
var color = ngModel.$viewValue;
setMinicolorsValue(color);
}, 0);
inititalized = true;
return;
}
function onBlur(e) {
scope.$apply(function() {
var color = element.minicolors('value');
if (isValidColor(color))
ngModel.$setViewValue(color);
});
}
};
initMinicolors();
//initital call
// Watch for changes to the directives options and then call init method again
var unbindWatch = scope.$watch(getSettings, initMinicolors, true);
scope.$on('$destroy', function () {
if (element.hasClass('minicolors-input')) {
element.minicolors('destroy');
element.remove();
}
if (unbindWatch) unbindWatch();
});
}
};
}]);
});