AMD / CommonJS / bower

README.md

@@ -24,21 +24,14 @@ Supported color spaces are: rgb, hsv(b), hsl, HEX
 </script>
 ```
 
-## AMD wrapper
+## AMD / CommonJS wrapper
-tinyColorPicker now supports AMD (thanks to [Munawwar](https://github.com/Munawwar)). Both files colors.js and jqColorPicker.js return their constructors so that it is easy to wrap them inside colors-amd-wrapper.js and jqColorPicker-amd-wrapper.js. So, if you want to use require.js or other module loaders just follow the instructions inside those 2 files. (Maybe someone of you wants to write a grunt task to automate this ;o)
+tinyColorPicker now supports AMD and CommonJS import (thanks to [Munawwar](https://github.com/Munawwar)).
 
-If you don't want to use AMD but would like to store the constructor `Colors` on a different name space you can change this in color.js where you find:
+## bower support
-```javascript
+tinyColorPicker can be received by bower:
-window.Colors = (function...
-// change this to what you want
-window.myNameSpace.ColorTool = (function...
-```
-If you do so you also need to change this reference in jqColorPicker.js at the very end:
 
 ```javascript
-})(window, jQuery, Colors);
+bower install tinyColorPicker
-// changes to
-})(window, jQuery, myNameSpace.ColorTool);
 ```
 
 ##jqColorPicker.js

bower.json

@@ -3,7 +3,7 @@
   "description": "Tiny jQuery color picker for mobile and desktop with alpha channel",
   "main": "jqColorPicker.min.js",
   "authors": [
-    "peterd <peter@dematte.at>"
+    "Peter Dematté <peter@dematte.at>"
   ],
   "license": "MIT",
   "keywords": [
@@ -18,7 +18,9 @@
   ],
   "homepage": "https://github.com/PitPik/tinyColorPicker",
   "moduleType": [
-    "globals"
+    "amd",
+    "globals",
+    "node"
   ],
   "ignore": [
     "**/.*",

colors.js

@@ -1,4 +1,14 @@
-window.Colors = (function(window, undefined){
+(function (root, factory) {
+	if (typeof exports === 'object') {
+		module.exports = factory(root);
+	} else if (typeof define === 'function' && define.amd) {
+		define([], function () {
+			return factory(root);
+		});
+	} else {
+		root.Colors = factory(root);
+	}
+}(this, function(window, undefined) {
 	"use strict"
 
 	var _valueRanges = {
@@ -417,4 +427,4 @@ window.Colors = (function(window, undefined){
 	}
 
 	return Colors;
-})(window);
+}));

jqColorPicker.js

@@ -1,4 +1,14 @@
-(function(window, $, Colors, undefined){
+(function (root, factory) {
+    if (typeof exports === 'object') {
+        module.exports = factory(root, require('jquery'), require('colors'));
+    } else if (typeof define === 'function' && define.amd) {
+        define(['jquery', 'colors'], function (jQuery, Colors) {
+            return factory(root, jQuery, Colors);
+        });
+    } else {
+        factory(root, root.jQuery, root.Colors);
+    }
+}(this, function(window, $, Colors, undefined){
     'use strict';
 
     var $document = $(document),
@@ -328,4 +338,4 @@
 
     return $;
 
-})(window, jQuery, Colors);
+}));

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinyColorPicker",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "repository": {
     "type": "git",
     "url": "http://github.com/PitPik/tinyColorPicker.git"