├── .gitignore
├── .jshintrc
├── LICENSE
├── README.md
├── angular-minicolors.js
├── bower.json
└── package.json
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | bower_components
--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
1 | {
2 | "camelcase": true,
3 | "curly": true,
4 | "eqeqeq": true,
5 | "indent": 2,
6 | "latedef": true,
7 | "quotmark": "single",
8 | "undef": true,
9 | "unused": true,
10 | "strict": true,
11 | "trailing": true,
12 | "smarttabs": true,
13 | "globals": {
14 | "angular": true,
15 | "console": true,
16 | "require": true,
17 | "io": true
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2013 Kai Henzler
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 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | angular-minicolors
2 | ==================
3 |
4 | ## General
5 |
6 | My first try of wrtiting a wrapper-directive around JQuery MiniColors by [Cory LaViska ](https://github.com/claviska) [https://github.com/claviska/jquery-minicolors](https://github.com/claviska/jquery-minicolors)
7 |
8 | Works with Bootstrap 3 and works fine with mobile browsers such as Safari on iPad.
9 |
10 | ##[DEMO and API](https://kaihenzler.github.io/angular-minicolors)
11 |
12 | ## How To Install
13 |
14 | 1. Install by typing `bower install angular-minicolors` consider using the `--save` option to save the dependency to your own bower.json file
15 |
16 | ## How To Use
17 |
18 | 1. Include the JQuery MiniColors Files from the bower_components folder (bower_components/jquery-minicolors/) in your project.
19 | The files you need are: `jquery-minicolors.js` `jquery-minicolors.css` and `jquery-minicolors.png` and of course JQuery itself
20 |
21 | 2. Add the dependency to your app definition `angular.module('myApp', ['minicolors'])`
22 |
23 | 3. Append `minicolors` attribute to any input-field. If you want to pass in a settings object, do it like this: `minicolors="MySettingsObject"`. Below you can see a usage example with bootstrap classes. The directive should be wrapped inside a div to preserve correct styling.
24 |
25 | ```html
26 |
27 |
28 |
34 |
35 |
36 |
45 | ```
46 |
47 | angular-minicolors is planned to be API compatible with: [http://labs.abeautifulsite.net/jquery-minicolors/](http://labs.abeautifulsite.net/jquery-minicolors/)
48 |
49 | keep in mind, that this is my first public angular-directive and it is by far not finished.
50 |
51 | ## default config
52 |
53 | the default config is as follows:
54 |
55 | ```js
56 | theme: 'bootstrap',
57 | position: 'top left',
58 | defaultValue: '',
59 | animationSpeed: 50,
60 | animationEasing: 'swing',
61 | change: null,
62 | changeDelay: 0,
63 | control: 'hue',
64 | hide: null,
65 | hideSpeed: 100,
66 | inline: false,
67 | letterCase: 'lowercase',
68 | opacity: false,
69 | show: null,
70 | showSpeed: 100
71 | ```
72 |
73 |
74 | ## app-wide config
75 |
76 | a Provider is now exposed and you can edit the global config like this:
77 |
78 | ```js
79 | angular.module('my-app').config(function (minicolorsProvider) {
80 | angular.extend(minicolorsProvider.defaults, {
81 | control: 'hue',
82 | position: 'top left'
83 | });
84 | });
85 | ```
86 |
87 | ## TODO
88 |
89 | - wrap the original events in angular events
90 | - add protection against false color values
91 |
92 | ## Found an issue?
93 |
94 | Please report the issue and feel free to submit a pull request
95 |
96 | ## Copyright and license
97 |
98 | The MIT License (MIT)
99 |
100 | Copyright (c) 2013 Kai Henzler
101 |
102 | Permission is hereby granted, free of charge, to any person obtaining a copy of
103 | this software and associated documentation files (the "Software"), to deal in
104 | the Software without restriction, including without limitation the rights to
105 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
106 | the Software, and to permit persons to whom the Software is furnished to do so,
107 | subject to the following conditions:
108 |
109 | The above copyright notice and this permission notice shall be included in all
110 | copies or substantial portions of the Software.
111 |
112 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
113 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
114 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
115 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
116 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
117 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--------------------------------------------------------------------------------
/angular-minicolors.js:
--------------------------------------------------------------------------------
1 | 'format cjs';
2 | 'use strict';
3 |
4 | (function(root, factory) {
5 | if (typeof define === 'function' && define.amd) {
6 | define(['angular', 'jquery-minicolors'], factory);
7 | } else if (typeof exports === 'object') {
8 | module.exports = factory(require('angular'), require('jquery-minicolors'));
9 | module.exports = 'minicolors';
10 | } else {
11 | root.angularMinicolors = factory(root.angular, root.jqueryMinicolors);
12 | }
13 | })(this, function(angular) {
14 |
15 | angular.module('minicolors', []);
16 |
17 | angular.module('minicolors').provider('minicolors', function() {
18 | this.defaults = {
19 | theme: 'bootstrap',
20 | position: 'top left',
21 | defaultValue: '',
22 | animationSpeed: 50,
23 | animationEasing: 'swing',
24 | change: null,
25 | changeDelay: 0,
26 | control: 'hue',
27 | hide: null,
28 | hideSpeed: 100,
29 | inline: false,
30 | letterCase: 'lowercase',
31 | opacity: false,
32 | show: null,
33 | showSpeed: 100
34 | };
35 |
36 | this.$get = function() {
37 | return this;
38 | };
39 |
40 | });
41 |
42 | angular.module('minicolors').directive('minicolors', ['minicolors', '$timeout', function(minicolors, $timeout) {
43 | return {
44 | require: '?ngModel',
45 | restrict: 'A',
46 | priority: 1, //since we bind on an input element, we have to set a higher priority than angular-default input
47 | link: function(scope, element, attrs, ngModel) {
48 |
49 | var inititalized = false;
50 |
51 | //gets the settings object
52 | var getSettings = function() {
53 | var config = angular.extend({}, minicolors.defaults, scope.$eval(attrs.minicolors));
54 | return config;
55 | };
56 |
57 | /**
58 | * check if value is valid color value
59 | * e.g.#fff000 or #fff
60 | * @param color
61 | */
62 | function isValidColor(color) {
63 | return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color);
64 | }
65 |
66 | function canSetValue() {
67 | return (element.data('minicolors-settings') != null)
68 | }
69 |
70 | /**
71 | * set color value as minicolors internal color value
72 | * @param color
73 | */
74 | function setMinicolorsValue(color) {
75 | if (isValidColor(color) && canSetValue()) {
76 | element.minicolors('value', color);
77 | }
78 | }
79 |
80 | //what to do if the value changed
81 | ngModel.$render = function() {
82 |
83 |
84 | //we are in digest or apply, and therefore call a timeout function
85 | $timeout(function() {
86 | var color = ngModel.$viewValue;
87 | setMinicolorsValue(color);
88 | }, 0, false);
89 | };
90 |
91 | //init method
92 | var initMinicolors = function() {
93 |
94 | if (!ngModel) {
95 | return;
96 | }
97 | var settings = getSettings();
98 | settings.change = function(hex) {
99 | scope.$apply(function() {
100 | if (isValidColor(hex))
101 | ngModel.$setViewValue(hex);
102 | });
103 | };
104 |
105 | //destroy the old colorpicker if one already exists
106 | if (element.hasClass('minicolors-input')) {
107 | element.minicolors('destroy');
108 | element.off('blur', onBlur);
109 | }
110 |
111 | // Create the new minicolors widget
112 | element.minicolors(settings);
113 |
114 | // hook up into the jquery-minicolors onBlur event.
115 | element.on('blur', onBlur);
116 |
117 | // are we inititalized yet ?
118 | //needs to be wrapped in $timeout, to prevent $apply / $digest errors
119 | //$scope.$apply will be called by $timeout, so we don't have to handle that case
120 | if (!inititalized) {
121 | $timeout(function() {
122 | var color = ngModel.$viewValue;
123 | setMinicolorsValue(color);
124 | }, 0);
125 | inititalized = true;
126 | return;
127 | }
128 |
129 | function onBlur(e) {
130 | scope.$apply(function() {
131 | var color = element.minicolors('value');
132 | if (isValidColor(color))
133 | ngModel.$setViewValue(color);
134 | });
135 | }
136 | };
137 |
138 | initMinicolors();
139 | //initital call
140 |
141 | // Watch for changes to the directives options and then call init method again
142 | var unbindWatch = scope.$watch(getSettings, initMinicolors, true);
143 |
144 | scope.$on('$destroy', function () {
145 | if (element.hasClass('minicolors-input')) {
146 | element.minicolors('destroy');
147 | element.remove();
148 | }
149 | if (unbindWatch) unbindWatch();
150 | });
151 |
152 | }
153 | };
154 | }]);
155 | });
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-minicolors",
3 | "version": "0.0.11",
4 | "homepage": "https://github.com/kaihenzler/angular-minicolors",
5 | "authors": [
6 | "Kai Henzler "
7 | ],
8 | "description": "A wrapper around JQuery MiniColors by Cory LaViska",
9 | "keywords": [
10 | "angular",
11 | "minicolors",
12 | "colorpicker",
13 | "color-picker",
14 | "color",
15 | "picker"
16 | ],
17 | "main": "angular-minicolors.js",
18 | "dependencies": {
19 | "jquery-minicolors": "2.1.7"
20 | },
21 | "license": "MIT",
22 | "ignore": [
23 | "**/.*",
24 | "node_modules",
25 | "bower_components",
26 | "test",
27 | "tests"
28 | ]
29 | }
30 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-minicolors",
3 | "version": "0.0.11",
4 | "description": "A wrapper around JQuery MiniColors by Cory LaViska",
5 | "main": "angular-minicolors.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "repository": {
10 | "type": "git",
11 | "url": "git+https://github.com/kaihenzler/angular-minicolors.git"
12 | },
13 | "keywords": [
14 | "angular",
15 | "minicolors",
16 | "colorpicker",
17 | "color-picker",
18 | "color",
19 | "picker"
20 | ],
21 | "author": "Kai Henzler ",
22 | "license": "MIT",
23 | "bugs": {
24 | "url": "https://github.com/kaihenzler/angular-minicolors/issues"
25 | },
26 | "homepage": "https://github.com/kaihenzler/angular-minicolors#readme",
27 | "peerDependencies": {
28 | "jquery-minicolors": "^2.1.10",
29 | "angular": "^1.4.0"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------