├── .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 | <div class="form-group">
 27 |   <label for="color-input" class="form-control">Color:</label>
 28 |   <input
 29 |     minicolors="customSettings"
 30 |     id="color-input"
 31 |     class="form-control"
 32 |     type="text"
 33 |     ng-model="input.color">
 34 | </div>
 35 | 
 36 | <script type="text/javascript">
 37 |   //using for example these settings inside your controller
 38 |   $scope.customSettings = {
 39 |     control: 'brightness',
 40 |     theme: 'bootstrap',
 41 |     position: 'top left'
 42 |   };
 43 | 
 44 | </script>
 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 <kai.henzler@gmx.de>"
 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 <kai.henzler@gmx.de>",
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 | 


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