├── .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 | --------------------------------------------------------------------------------