Added docs etc for colorpicker add-on

Author: davidlgj

README.md

@@ -110,13 +110,12 @@ sure you got the angular version you actually want.
 
 #### Additional dependecies
 
-1. If you want to use the date picker, you'll also need [jQuery](https://github.com/jquery/jquery)
-   and [pickadate.js](http://amsul.ca/pickadate.js/), see [angular-schema-form-datepicker](https://github.com/Textalk/angular-schema-form-datepicker)
-2. If you'd like to use drag-and-drop reordering of arrays, you'll also need [ui-sortable](https://github.com/angular-ui/ui-sortable) and its [jQueryUI](http://jqueryui.com/) dependencies. See the *ui-sortable* documentation for details about which parts of jQueryUI are needed. You can safely ignore these if you don't need reordering.
-3. Schema Form provides tabbed arrays through the form type `tabarray`. Tab arrays default to tabs on the left side. For these to work, you'll need to include the CSS from [bootstrap-vertical-tabs](https://github.com/dbtek/bootstrap-vertical-tabs). However, you won't need Bootstrap Vertical Tabs for horizontal tabs (the `tabType: "top"` option).
+1. If you'd like to use drag-and-drop reordering of arrays, you'll also need [ui-sortable](https://github.com/angular-ui/ui-sortable) and its [jQueryUI](http://jqueryui.com/) dependencies. See the *ui-sortable* documentation for details about which parts of jQueryUI are needed. You can safely ignore these if you don't need reordering.
+2. Schema Form provides tabbed arrays through the form type `tabarray`. Tab arrays default to tabs on the left side. For these to work, you'll need to include the CSS from [bootstrap-vertical-tabs](https://github.com/dbtek/bootstrap-vertical-tabs). However, you won't need Bootstrap Vertical Tabs for horizontal tabs (the `tabType: "top"` option).
 
 The minified files include templates - no need to load additional HTML files.
 
+
 ### Script Loading
 
 Schema form is split into two main files, `dist/schema-form.min.js` and
@@ -137,9 +136,11 @@ also needs to be loaded *before* Schema Form.
 
 Add-ons
 ------
-There is currently only one add-on, a date picker using the excellent
-[pickadate.js](http://amsul.ca/pickadate.js/). It has it's own repo and you can find it here:
-[https://github.com/Textalk/angular-schema-form-datepicker](https://github.com/Textalk/angular-schema-form-datepicker)
+There is currently two add-ons, a date picker and a colorpicker. They have their own repos and you
+can find them here with usage instructions:
+
+  * [https://github.com/Textalk/angular-schema-form-datepicker](https://github.com/Textalk/angular-schema-form-datepicker)
+  * [https://github.com/Textalk/angular-schema-form-colorpicker](https://github.com/Textalk/angular-schema-form-colorpicker)
 
 Building
 --------

bower.json

@@ -39,6 +39,7 @@
     "angular-ui-ace": "bower",
     "angular-schema-form-datepicker": ">= 0.1.0",
     "jquery": "~2.1.1",
-    "angular-mocks": ">= 1.2"
+    "angular-mocks": ">= 1.2",
+    "angular-schema-form-colorpicker": "~0.1.0"
   }
 }

examples/bootstrap-example.html

@@ -8,6 +8,8 @@
   <link rel="stylesheet" href="../bower_components/pickadate/lib/themes/classic.css">
   <link rel="stylesheet" href="../bower_components/pickadate/lib/themes/classic.date.css">
   <link rel="stylesheet" href="../bower_components/bootstrap-vertical-tabs/bootstrap.vertical-tabs.min.css">
+  <link rel="stylesheet" href="../bower_components/spectrum/spectrum.css">
+
   <style type="text/css">
 
   body,html {
@@ -65,16 +67,25 @@ <h3>Schema</h3>
 <!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script> -->
 <!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular-sanitize.min.js"></script> -->
 
+
 <script type="text/javascript" src="../bower_components/angular-ui-sortable/sortable.js"></script>
 <script type="text/javascript" src="../bower_components/angular-ui-ace/ui-ace.js"></script>
 <script type="text/javascript" src="../bower_components/objectpath/lib/ObjectPath.js"></script>
 <script type="text/javascript" src="../bower_components/pickadate/lib/picker.js"></script>
 <script type="text/javascript" src="../bower_components/pickadate/lib/picker.date.js"></script>
 <script type="text/javascript" src="../bower_components/pickadate/lib/translations/sv_SE.js"></script>
 
+<script type="text/javascript" src="../bower_components/spectrum/spectrum.js"></script>
+<script type="text/javascript" src="../bower_components/spectrum/i18n/jquery.spectrum-sv.js"></script>
+<script type="text/javascript" src="../bower_components/angular-spectrum-colorpicker/dist/angular-spectrum-colorpicker.min.js"></script>
+
+
 <script type="text/javascript" src="../dist/schema-form.min.js"></script>
 <script type="text/javascript" src="../dist/bootstrap-decorator.min.js"></script>
 <script type="text/javascript" src="../dist/bootstrap-datepicker.min.js"></script>
+
+<script type="text/javascript" src="../bower_components/angular-schema-form-colorpicker/bootstrap-colorpicker.min.js"></script>
+
 <script type="text/javascript">
 
 angular.module('test',['schemaForm','ui.ace']).controller('TestCtrl', function($scope,$http){

examples/data/sink.json

@@ -36,7 +36,9 @@
         "properties": {
           "eyecolor": {
             "type": "string",
-            "title": "Eye color"
+            "format": "color",
+            "title": "Eye color",
+            "default": "pink"
           },
           "haircolor": {
             "type": "string",

src/module.js

@@ -1,3 +1,6 @@
+// Deps is sort of a problem for us, maybe in the future we will ask the user to depend
+// on modules for add-ons
+
 var deps = ['ObjectPath'];
 try {
   //This throws an expection if module does not exist.
@@ -11,4 +14,10 @@ try {
   deps.push('ui.sortable');
 } catch (e) {}
 
+try {
+  //This throws an expection if module does not exist.
+  angular.module('angularSpectrumColorpicker');
+  deps.push('angularSpectrumColorpicker');
+} catch (e) {}
+
 angular.module('schemaForm', deps);