├── .gitignore
├── package.json
├── scripts
    ├── types
    │   ├── Checkbox.js
    │   ├── Text.js
    │   ├── Email.js
    │   ├── Number.js
    │   ├── Select.js
    │   └── Color.js
    └── Dialog.js
├── bower.json
├── README.md
├── Gruntfile.js
├── specs
    └── DialogSpec.js
└── dist
    ├── FormDialog.min.js
    └── FormDialog.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .grunt
 2 | bower_components
 3 | node_modules
 4 | _SpecRunner.html
 5 | 
 6 | .DS_Store
 7 | .DS_Store?
 8 | ._*
 9 | .Trashes
10 | ehtumbs.db
11 | Thumbs.db
12 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "FormDialog",
 3 |   "version": "0.1.0",
 4 |   "description": "Create a form inside a bootstrap modal and return the form data as JSON",
 5 |   "devDependencies": {
 6 |     "grunt": "~0.4",
 7 |     "grunt-contrib-concat": "~0.3.0",
 8 |     "grunt-contrib-jasmine": "~0.9.0",
 9 |     "grunt-contrib-uglify": "~0.9.1"
10 |   },
11 |   "repository": {
12 |     "type":"git",
13 |     "url": ""
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/scripts/types/Checkbox.js:
--------------------------------------------------------------------------------
 1 | (function($) {
 2 | 
 3 |   FormDialog.Checkbox = {
 4 |     id: 'checkbox',
 5 |     fieldFactory: function(options) {
 6 |       var group = $('<div class="checkbox"></div>');
 7 |       var label = $('<label for="' + options.name + '"></label>');
 8 |       var field = $('<input type="checkbox" name="' + options.name + '"/>');
 9 |       label.append(field);
10 |       label.append($('<span>' + options.label + '</span>'));
11 |       group.append(label);
12 |       return group;
13 |     }
14 |   }
15 | 
16 | })(jQuery);
17 | 


--------------------------------------------------------------------------------
/scripts/types/Text.js:
--------------------------------------------------------------------------------
 1 | (function($) {
 2 | 
 3 |   FormDialog.Text = {
 4 |     id: 'text',
 5 |     fieldFactory: function(options) {
 6 |       var group = $('<div class="form-group"></div>');
 7 |       group.append($('<label for="' + options.name + '">' + options.label + '</label>'));
 8 |       var field = $('<input type="text" class="form-control" name="' + options.name + '"/>');
 9 |       if(options.hasOwnProperty('placeholder')) {
10 |         field.attr('placeholder', options.placeholder);
11 |       }
12 |       group.append(field);
13 |       return group;
14 |     }
15 |   }
16 | 
17 | })(jQuery);
18 | 


--------------------------------------------------------------------------------
/scripts/types/Email.js:
--------------------------------------------------------------------------------
 1 | (function($) {
 2 | 
 3 |   FormDialog.Email = {
 4 |     id: 'email',
 5 |     fieldFactory: function(options) {
 6 |       var group = $('<div class="form-group"></div>');
 7 |       group.append($('<label for="' + options.name + '">' + options.label + '</label>'));
 8 |       var field = $('<input type="email" class="form-control" name="' + options.name + '"/>');
 9 |       if(options.hasOwnProperty('placeholder')) {
10 |         field.attr('placeholder', options.placeholder);
11 |       }
12 |       group.append(field);
13 |       return group;
14 |     }
15 |   }
16 | 
17 | })(jQuery);
18 | 


--------------------------------------------------------------------------------
/scripts/types/Number.js:
--------------------------------------------------------------------------------
 1 | (function($) {
 2 | 
 3 |   FormDialog.Number = {
 4 |     id: 'number',
 5 |     fieldFactory: function(options) {
 6 |       var group = $('<div class="form-group"></div>');
 7 |       group.append($('<label for="' + options.name + '">' + options.label + '</label>'));
 8 |       var field = $('<input type="number" class="form-control" name="' + options.name + '"/>');
 9 |       if(options.hasOwnProperty('placeholder')) {
10 |         field.attr('placeholder', options.placeholder);
11 |       }
12 |       group.append(field);
13 |       return group;
14 |     }
15 |   }
16 | 
17 | })(jQuery);
18 | 


--------------------------------------------------------------------------------
/scripts/types/Select.js:
--------------------------------------------------------------------------------
 1 | (function($) {
 2 | 
 3 |   FormDialog.Select = {
 4 |     id: 'select',
 5 |     fieldFactory: function(options) {
 6 |       var group = $('<div class="form-group"></div>');
 7 |       group.append($('<label for="' + options.name + '">' + options.label + '</label>'));
 8 |       var field = $('<select class="form-control" name="' + options.name + '"></select>');
 9 |       for(var j = 0, l = options.options.length; j < l; j++) {
10 |         field.append($('<option value="' + options.options[j][1] + '">' + options.options[j][0] + '</option>'));
11 |       }
12 |       group.append(field);
13 |       return group;
14 |     }
15 |   }
16 | 
17 | })(jQuery);
18 | 


--------------------------------------------------------------------------------
/scripts/types/Color.js:
--------------------------------------------------------------------------------
 1 | (function($) {
 2 | 
 3 |   FormDialog.Color = {
 4 |     id: 'color',
 5 |     fieldFactory: function(options) {
 6 |       var group = $('<div class="form-group"></div>');
 7 |       group.append($('<label for="' + options.name + '">' + options.label + '</label>'));
 8 |       var field = $('<select class="form-control" name="' + options.name + '"></select>');
 9 |       for(var j = 0, l = options.options.length; j < l; j++) {
10 |         field.append($('<option value="' + options.options[j][1] + '">' + options.options[j][0] + '</option>'));
11 |       }
12 |       group.append(field);
13 |       field.simplecolorpicker({theme: 'glyphicons'});
14 |       return group;
15 |     }
16 |   }
17 | 
18 | })(jQuery);
19 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "FormDialog",
 3 |   "version": "0.1.0",
 4 |   "description": "Create a form inside a bootstrap modal and return the form data as JSON",
 5 |   "main": [
 6 |     "scripts/Dialog.js",
 7 |     "scripts/types/Checkbox.js",
 8 |     "scripts/types/Color.js",
 9 |     "scripts/types/Number.js",
10 |     "scripts/types/Select.js",
11 |     "scripts/types/Text.js"
12 |   ],
13 |   "dependencies": {
14 |     "jquery-simplecolorpicker": ">=0.3.0",
15 |     "jquery": ">=2.1.4"
16 |   },
17 |   "authors": [
18 |     "Dan Curran <dan@incidentsmart.com>"
19 |   ],
20 |   "licence": "MIT",
21 |   "ignore": [
22 |     "**/.*",
23 |     "bower_components",
24 |     "node_modules",
25 |     "dist",
26 |     "specs",
27 |     "index.html",
28 |     "_SpecRunner.html"
29 |   ]
30 | }
31 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | FormDialog
 2 | =
 3 | 
 4 | A JavaScript project that assists in creating forms inside a bootstrap modal dialog.
 5 | 
 6 | Demo Site
 7 | -
 8 | Visit [our demo site](https://stats.github.io/FormDialog) to see this project in action.
 9 | 
10 | Requirements and Dependencies
11 | -
12 | 
13 | This project requires [jQuery](http://jquery.com), [Bootstrap](http://getbootstrap.com/) to work out of the box. In order to use the color component you must have [Very simple jQuery color picker](https://github.com/tkrotoff/jquery-simplecolorpicker).
14 | 
15 | For development [Grunt](http://gruntjs.com) and [Bower](http://bower.io) will make things much easier.
16 | 
17 | Using the project
18 | -
19 | 
20 | To use this project simply download the **Raw** version of FormDialog from the **dist** folder. There is both a minified version and the full version available to download.
21 | 
22 | For Development
23 | -
24 | 
25 | 1. Clone the Repository
26 | 2. From the command line run: *npm install && bower install*
27 | 3. Start editing code
28 | 
29 | Building
30 | -
31 | 
32 | From the command line run: *grunt*
33 | 
34 | Testing
35 | -
36 | 
37 | From the command line run: *grunt jasmine*
38 | 


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
 1 | module.exports = function(grunt) {
 2 |   grunt.initConfig({
 3 |     pkg: grunt.file.readJSON('package.json'),
 4 |     concat: {
 5 |       dist: {
 6 |         src: ['scripts/**/*.js'],
 7 |         dest: 'dist/<%= pkg.name %>.js'
 8 |       }
 9 |     },
10 |     uglify: {
11 |       options: {
12 |         banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
13 |       },
14 |       dist: {
15 |         files: {
16 |           'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
17 |         }
18 |       }
19 |     },
20 |     jasmine: {
21 |       src: 'scripts/**/*.js',
22 |       options: {
23 |         specs: 'specs/**/*Spec.js',
24 |         vendor: [
25 |           "https://code.jquery.com/jquery-2.1.4.min.js",
26 |           "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js",
27 |           "bower_components/jquery-simplecolorpicker/jquery.simplecolorpicker.js"
28 |         ],
29 |         styles: [
30 |           "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css",
31 |           "bower_components/jquery-simplecolorpicker/jquery.simplecolorpicker.css"
32 |         ],
33 |         keepRunner: true
34 |       }
35 |     }
36 |   });
37 |   grunt.loadNpmTasks('grunt-contrib-concat');
38 |   grunt.loadNpmTasks('grunt-contrib-jasmine');
39 |   grunt.loadNpmTasks('grunt-contrib-uglify');
40 |   grunt.registerTask('default', ['concat']);
41 | };
42 | 


--------------------------------------------------------------------------------
/specs/DialogSpec.js:
--------------------------------------------------------------------------------
 1 | describe("Dialog Tests", function() {
 2 |   var dialog = new FormDialog({disableDefaults: true});
 3 | 
 4 |   it("Expects showing a dialog to fail", function() {
 5 |     expect(dialog.show('example')).toBe(false);
 6 |   });
 7 | 
 8 |   it("Expects serializing the form to be empty", function() {
 9 |     expect(dialog.serializeForm().length).toEqual(0);
10 |   });
11 | 
12 |   dialog.registerType(FormDialog.Select);
13 |   dialog.registerDialog('SelectExample', {
14 |     fields: [{
15 |       label: 'Select a Programming Language',
16 |       name: 'select',
17 |       type: 'select',
18 |       options: [
19 |         ['Javascript', '1'],
20 |         ['Ruby', '2'],
21 |         ['C++', '3'],
22 |         ['HTML', '4']
23 |       ]
24 |     }],
25 |     dialog_title: 'Select a Language',
26 |     submit_label: 'Select Language'
27 |   });
28 | 
29 |   it("Should show a form dialog", function() {
30 |     expect(dialog.show('SelectExample')).toBe(true);
31 |   });
32 | 
33 |   it("Should serialize the form", function() {
34 |     expect(dialog.serializeForm().length).toEqual(1);
35 | 
36 |   });
37 | 
38 |   it("Should unregister the dialog", function() {
39 |     expect(dialog.unregisterDialog('SelectExample')).toBe(true);
40 |   });
41 | 
42 |   it("Expects showing a dialog to fail", function() {
43 |     expect(dialog.show('SelectExample')).toBe(false);
44 |   });
45 | 
46 |   var dialog2 = new FormDialog();
47 |   dialog2.registerDialog('ComplexExample', {
48 |     fields: [
49 |       {
50 |         label: 'Your Name',
51 |         name: 'name',
52 |         type: 'text'
53 |       },
54 |       {
55 |         label: 'A Number',
56 |         name: 'number',
57 |         type: 'number'
58 |       },
59 |       {
60 |         label: 'Is it True?',
61 |         name: 'checkbox',
62 |         type: 'checkbox'
63 |       },
64 |       {
65 |         label: 'Select a Programming Language',
66 |         name: 'select',
67 |         type: 'select',
68 |         options: [
69 |           ['Javascript', '1'],
70 |           ['Ruby', '2'],
71 |           ['C++', '3'],
72 |           ['HTML', '4']
73 |         ]
74 |       },
75 |       {
76 |         label: 'Select a Color',
77 |         name: 'select',
78 |         type: 'color',
79 |         options: [
80 |           ['Sky Blue', '#0066cc'],
81 |           ['Gray', '#cccccc'],
82 |           ['Red', '#ff0000'],
83 |           ['Maroon', '#800000'],
84 |           ['White', '#ffffff']
85 |         ]
86 |       }
87 |     ],
88 |     dialog_title: 'Select a Language',
89 |     submit_label: 'Select Language'
90 |   });
91 | 
92 |   it("Should show a complex dialog", function() {
93 |     expect(dialog2.show('ComplexExample')).toBe(true);
94 |   });
95 | 
96 | });
97 | 


--------------------------------------------------------------------------------
/scripts/Dialog.js:
--------------------------------------------------------------------------------
  1 | var FormDialog = {};
  2 | (function($) {
  3 | 
  4 |   FormDialog = function(config) {
  5 |     if( !config ) {
  6 |       this._config = {};
  7 |     } else {
  8 |       this._config = config
  9 |     }
 10 |     this._dialog = null;
 11 | 
 12 |     this._title = null;
 13 |     this._fields = null;
 14 |     this._accept_label = null;
 15 | 
 16 |     this._dialogs = {};
 17 |     this._field_types = {};
 18 |     this._setup();
 19 |   }
 20 | 
 21 |   FormDialog.prototype = {
 22 |     _setup: function() {
 23 |       if(!this._config.hasOwnProperty('disableDefaults') || this._config['disableDefaults'] === false ){
 24 |         this._registerDefaultTypes();
 25 |       }
 26 |       this._dialog = this._createDialog();
 27 |     },
 28 |     registerType: function(type) {
 29 |       this._field_types[type.id] = type;
 30 |     },
 31 |     registerDialog: function(type, options) {
 32 |       if(this._dialogs.hasOwnProperty(type) && this._dialogs[type] != null) {
 33 |         this._dialogs[type].remove();
 34 |       }
 35 |       this._dialogs[type] = options;
 36 |     },
 37 |     unregisterDialog: function(type) {
 38 |       if( ! this._dialogs.hasOwnProperty(type) ){
 39 |         return false;
 40 |       }
 41 | 
 42 |       this._dialogs[type] = null;
 43 |       delete this._dialogs[type];
 44 |       return true;
 45 |     },
 46 |     show: function(type) {
 47 |       if( !this._dialogs.hasOwnProperty(type) || this._dialogs[type] == null){
 48 |         return false;
 49 |       }
 50 | 
 51 |       this._updateDialog(this._dialogs[type]);
 52 | 
 53 |       var self = this;
 54 |       this._accept_label.off('click tap');
 55 |       this._accept_label.on('click tap', function() {
 56 |         $(document).trigger('formdialog:' + type + ':submit', [self.serializeForm()]);
 57 |         self.hide(type);
 58 |       });
 59 |       this._dialog.modal('show');
 60 |       return true;
 61 |     },
 62 |     hide: function(type) {
 63 |       if( !this._dialogs.hasOwnProperty(type)  || this._dialogs[type] == null){
 64 |         return false;
 65 |       }
 66 |       this._dialog.modal('hide');
 67 |       return true;
 68 |     },
 69 |     serializeForm: function(type) {
 70 |       return this._dialog.find('form').serializeArray();
 71 |     },
 72 |     _registerDefaultTypes: function(){
 73 |       this.registerType(FormDialog.Select);
 74 |       this.registerType(FormDialog.Text);
 75 |       this.registerType(FormDialog.Color);
 76 |       this.registerType(FormDialog.Number);
 77 |       this.registerType(FormDialog.Checkbox);
 78 |       this.registerType(FormDialog.Email);
 79 |     },
 80 |     _updateDialog: function(options) {
 81 |       this._fields.html('');
 82 |       var opts;
 83 |       for(var i = 0, len = options.fields.length; i < len; i++) {
 84 |         opts = options.fields[i];
 85 |         if(!this._field_types.hasOwnProperty(opts.type) ){
 86 |           throw new Error("The data type [" + opts.type + "] has not been registered.")
 87 |         }
 88 |         this._fields.append(this._field_types[opts.type].fieldFactory(opts));
 89 |         this._title.html(options.dialog_title);
 90 |         this._accept_label.html(options.submit_label);
 91 | 
 92 |       }
 93 |     },
 94 |     _createDialog: function() {
 95 |       var modal = $('<div class="modal fade"></div>');
 96 |       var dialog = $('<div class="modal-dialog"></div>');
 97 |       var content = $('<div class="modal-content"></div>');
 98 |       var header = $('<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');
 99 |       this._title = $('<h4 class="modal-title"></h4>');
100 |       var body = $('<div class="modal-body"></div>');
101 |       var footer = $('<div class="modal-footer"></div>');
102 | 
103 |       this._accept_label = $('<button type="button" class="btn btn-primary"></button>');
104 |       var close = $('<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>');
105 | 
106 |       footer.append(this._accept_label);
107 |       footer.append(close);
108 | 
109 |       this._fields = $('<form class="field"></form>');
110 |       body.append(this._fields);
111 |       header.append(this._title);
112 | 
113 |       content.append(header);
114 |       content.append(body);
115 |       content.append(footer);
116 |       dialog.append(content);
117 |       modal.append(dialog);
118 |       $(document.body).append(modal);
119 |       return modal;
120 |     }
121 |   }
122 | 
123 | })(jQuery);
124 | 


--------------------------------------------------------------------------------
/dist/FormDialog.min.js:
--------------------------------------------------------------------------------
1 | /*! FormDialog 30-07-2015 */
2 | var FormDialog={};!function(a){FormDialog=function(a){a?this._config=a:this._config={},this._dialog=null,this._title=null,this._fields=null,this._accept_label=null,this._dialogs={},this._field_types={},this._setup()},FormDialog.prototype={_setup:function(){this._config.hasOwnProperty("disableDefaults")&&this._config.disableDefaults!==!1||this._registerDefaultTypes(),this._dialog=this._createDialog()},registerType:function(a){this._field_types[a.id]=a},registerDialog:function(a,b){this._dialogs.hasOwnProperty(a)&&null!=this._dialogs[a]&&this._dialogs[a].remove(),this._dialogs[a]=b},unregisterDialog:function(a){return this._dialogs.hasOwnProperty(a)?(this._dialogs[a]=null,delete this._dialogs[a],!0):!1},show:function(b){if(!this._dialogs.hasOwnProperty(b)||null==this._dialogs[b])return!1;this._updateDialog(this._dialogs[b]);var c=this;return this._accept_label.off("click tap"),this._accept_label.on("click tap",function(){a(document).trigger("formdialog:"+b+":submit",[c.serializeForm()]),c.hide(b)}),this._dialog.modal("show"),!0},hide:function(a){return this._dialogs.hasOwnProperty(a)&&null!=this._dialogs[a]?(this._dialog.modal("hide"),!0):!1},serializeForm:function(a){return this._dialog.find("form").serializeArray()},_registerDefaultTypes:function(){this.registerType(FormDialog.Select),this.registerType(FormDialog.Text),this.registerType(FormDialog.Color),this.registerType(FormDialog.Number),this.registerType(FormDialog.Checkbox),this.registerType(FormDialog.Email)},_updateDialog:function(a){this._fields.html("");for(var b,c=0,d=a.fields.length;d>c;c++){if(b=a.fields[c],!this._field_types.hasOwnProperty(b.type))throw new Error("The data type ["+b.type+"] has not been registered.");this._fields.append(this._field_types[b.type].fieldFactory(b)),this._title.html(a.dialog_title),this._accept_label.html(a.submit_label)}},_createDialog:function(){var b=a('<div class="modal fade"></div>'),c=a('<div class="modal-dialog"></div>'),d=a('<div class="modal-content"></div>'),e=a('<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');this._title=a('<h4 class="modal-title"></h4>');var f=a('<div class="modal-body"></div>'),g=a('<div class="modal-footer"></div>');this._accept_label=a('<button type="button" class="btn btn-primary"></button>');var h=a('<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>');return g.append(this._accept_label),g.append(h),this._fields=a('<form class="field"></form>'),f.append(this._fields),e.append(this._title),d.append(e),d.append(f),d.append(g),c.append(d),b.append(c),a(document.body).append(b),b}}}(jQuery),function(a){FormDialog.Checkbox={id:"checkbox",fieldFactory:function(b){var c=a('<div class="checkbox"></div>'),d=a('<label for="'+b.name+'"></label>'),e=a('<input type="checkbox" name="'+b.name+'"/>');return d.append(e),d.append(a("<span>"+b.label+"</span>")),c.append(d),c}}}(jQuery),function(a){FormDialog.Color={id:"color",fieldFactory:function(b){var c=a('<div class="form-group"></div>');c.append(a('<label for="'+b.name+'">'+b.label+"</label>"));for(var d=a('<select class="form-control" name="'+b.name+'"></select>'),e=0,f=b.options.length;f>e;e++)d.append(a('<option value="'+b.options[e][1]+'">'+b.options[e][0]+"</option>"));return c.append(d),d.simplecolorpicker({theme:"glyphicons"}),c}}}(jQuery),function(a){FormDialog.Email={id:"email",fieldFactory:function(b){var c=a('<div class="form-group"></div>');c.append(a('<label for="'+b.name+'">'+b.label+"</label>"));var d=a('<input type="email" class="form-control" name="'+b.name+'"/>');return b.hasOwnProperty("placeholder")&&d.attr("placeholder",b.placeholder),c.append(d),c}}}(jQuery),function(a){FormDialog.Number={id:"number",fieldFactory:function(b){var c=a('<div class="form-group"></div>');c.append(a('<label for="'+b.name+'">'+b.label+"</label>"));var d=a('<input type="number" class="form-control" name="'+b.name+'"/>');return b.hasOwnProperty("placeholder")&&d.attr("placeholder",b.placeholder),c.append(d),c}}}(jQuery),function(a){FormDialog.Select={id:"select",fieldFactory:function(b){var c=a('<div class="form-group"></div>');c.append(a('<label for="'+b.name+'">'+b.label+"</label>"));for(var d=a('<select class="form-control" name="'+b.name+'"></select>'),e=0,f=b.options.length;f>e;e++)d.append(a('<option value="'+b.options[e][1]+'">'+b.options[e][0]+"</option>"));return c.append(d),c}}}(jQuery),function(a){FormDialog.Text={id:"text",fieldFactory:function(b){var c=a('<div class="form-group"></div>');c.append(a('<label for="'+b.name+'">'+b.label+"</label>"));var d=a('<input type="text" class="form-control" name="'+b.name+'"/>');return b.hasOwnProperty("placeholder")&&d.attr("placeholder",b.placeholder),c.append(d),c}}}(jQuery);


--------------------------------------------------------------------------------
/dist/FormDialog.js:
--------------------------------------------------------------------------------
  1 | var FormDialog = {};
  2 | (function($) {
  3 | 
  4 |   FormDialog = function(config) {
  5 |     if( !config ) {
  6 |       this._config = {};
  7 |     } else {
  8 |       this._config = config
  9 |     }
 10 |     this._dialog = null;
 11 | 
 12 |     this._title = null;
 13 |     this._fields = null;
 14 |     this._accept_label = null;
 15 | 
 16 |     this._dialogs = {};
 17 |     this._field_types = {};
 18 |     this._setup();
 19 |   }
 20 | 
 21 |   FormDialog.prototype = {
 22 |     _setup: function() {
 23 |       if(!this._config.hasOwnProperty('disableDefaults') || this._config['disableDefaults'] === false ){
 24 |         this._registerDefaultTypes();
 25 |       }
 26 |       this._dialog = this._createDialog();
 27 |     },
 28 |     registerType: function(type) {
 29 |       this._field_types[type.id] = type;
 30 |     },
 31 |     registerDialog: function(type, options) {
 32 |       if(this._dialogs.hasOwnProperty(type) && this._dialogs[type] != null) {
 33 |         this._dialogs[type].remove();
 34 |       }
 35 |       this._dialogs[type] = options;
 36 |     },
 37 |     unregisterDialog: function(type) {
 38 |       if( ! this._dialogs.hasOwnProperty(type) ){
 39 |         return false;
 40 |       }
 41 | 
 42 |       this._dialogs[type] = null;
 43 |       delete this._dialogs[type];
 44 |       return true;
 45 |     },
 46 |     show: function(type) {
 47 |       if( !this._dialogs.hasOwnProperty(type) || this._dialogs[type] == null){
 48 |         return false;
 49 |       }
 50 | 
 51 |       this._updateDialog(this._dialogs[type]);
 52 | 
 53 |       var self = this;
 54 |       this._accept_label.off('click tap');
 55 |       this._accept_label.on('click tap', function() {
 56 |         $(document).trigger('formdialog:' + type + ':submit', [self.serializeForm()]);
 57 |         self.hide(type);
 58 |       });
 59 |       this._dialog.modal('show');
 60 |       return true;
 61 |     },
 62 |     hide: function(type) {
 63 |       if( !this._dialogs.hasOwnProperty(type)  || this._dialogs[type] == null){
 64 |         return false;
 65 |       }
 66 |       this._dialog.modal('hide');
 67 |       return true;
 68 |     },
 69 |     serializeForm: function(type) {
 70 |       return this._dialog.find('form').serializeArray();
 71 |     },
 72 |     _registerDefaultTypes: function(){
 73 |       this.registerType(FormDialog.Select);
 74 |       this.registerType(FormDialog.Text);
 75 |       this.registerType(FormDialog.Color);
 76 |       this.registerType(FormDialog.Number);
 77 |       this.registerType(FormDialog.Checkbox);
 78 |       this.registerType(FormDialog.Email);
 79 |     },
 80 |     _updateDialog: function(options) {
 81 |       this._fields.html('');
 82 |       var opts;
 83 |       for(var i = 0, len = options.fields.length; i < len; i++) {
 84 |         opts = options.fields[i];
 85 |         if(!this._field_types.hasOwnProperty(opts.type) ){
 86 |           throw new Error("The data type [" + opts.type + "] has not been registered.")
 87 |         }
 88 |         this._fields.append(this._field_types[opts.type].fieldFactory(opts));
 89 |         this._title.html(options.dialog_title);
 90 |         this._accept_label.html(options.submit_label);
 91 | 
 92 |       }
 93 |     },
 94 |     _createDialog: function() {
 95 |       var modal = $('<div class="modal fade"></div>');
 96 |       var dialog = $('<div class="modal-dialog"></div>');
 97 |       var content = $('<div class="modal-content"></div>');
 98 |       var header = $('<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>');
 99 |       this._title = $('<h4 class="modal-title"></h4>');
100 |       var body = $('<div class="modal-body"></div>');
101 |       var footer = $('<div class="modal-footer"></div>');
102 | 
103 |       this._accept_label = $('<button type="button" class="btn btn-primary"></button>');
104 |       var close = $('<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>');
105 | 
106 |       footer.append(this._accept_label);
107 |       footer.append(close);
108 | 
109 |       this._fields = $('<form class="field"></form>');
110 |       body.append(this._fields);
111 |       header.append(this._title);
112 | 
113 |       content.append(header);
114 |       content.append(body);
115 |       content.append(footer);
116 |       dialog.append(content);
117 |       modal.append(dialog);
118 |       $(document.body).append(modal);
119 |       return modal;
120 |     }
121 |   }
122 | 
123 | })(jQuery);
124 | 
125 | (function($) {
126 | 
127 |   FormDialog.Checkbox = {
128 |     id: 'checkbox',
129 |     fieldFactory: function(options) {
130 |       var group = $('<div class="checkbox"></div>');
131 |       var label = $('<label for="' + options.name + '"></label>');
132 |       var field = $('<input type="checkbox" name="' + options.name + '"/>');
133 |       label.append(field);
134 |       label.append($('<span>' + options.label + '</span>'));
135 |       group.append(label);
136 |       return group;
137 |     }
138 |   }
139 | 
140 | })(jQuery);
141 | 
142 | (function($) {
143 | 
144 |   FormDialog.Color = {
145 |     id: 'color',
146 |     fieldFactory: function(options) {
147 |       var group = $('<div class="form-group"></div>');
148 |       group.append($('<label for="' + options.name + '">' + options.label + '</label>'));
149 |       var field = $('<select class="form-control" name="' + options.name + '"></select>');
150 |       for(var j = 0, l = options.options.length; j < l; j++) {
151 |         field.append($('<option value="' + options.options[j][1] + '">' + options.options[j][0] + '</option>'));
152 |       }
153 |       group.append(field);
154 |       field.simplecolorpicker({theme: 'glyphicons'});
155 |       return group;
156 |     }
157 |   }
158 | 
159 | })(jQuery);
160 | 
161 | (function($) {
162 | 
163 |   FormDialog.Email = {
164 |     id: 'email',
165 |     fieldFactory: function(options) {
166 |       var group = $('<div class="form-group"></div>');
167 |       group.append($('<label for="' + options.name + '">' + options.label + '</label>'));
168 |       var field = $('<input type="email" class="form-control" name="' + options.name + '"/>');
169 |       if(options.hasOwnProperty('placeholder')) {
170 |         field.attr('placeholder', options.placeholder);
171 |       }
172 |       group.append(field);
173 |       return group;
174 |     }
175 |   }
176 | 
177 | })(jQuery);
178 | 
179 | (function($) {
180 | 
181 |   FormDialog.Number = {
182 |     id: 'number',
183 |     fieldFactory: function(options) {
184 |       var group = $('<div class="form-group"></div>');
185 |       group.append($('<label for="' + options.name + '">' + options.label + '</label>'));
186 |       var field = $('<input type="number" class="form-control" name="' + options.name + '"/>');
187 |       if(options.hasOwnProperty('placeholder')) {
188 |         field.attr('placeholder', options.placeholder);
189 |       }
190 |       group.append(field);
191 |       return group;
192 |     }
193 |   }
194 | 
195 | })(jQuery);
196 | 
197 | (function($) {
198 | 
199 |   FormDialog.Select = {
200 |     id: 'select',
201 |     fieldFactory: function(options) {
202 |       var group = $('<div class="form-group"></div>');
203 |       group.append($('<label for="' + options.name + '">' + options.label + '</label>'));
204 |       var field = $('<select class="form-control" name="' + options.name + '"></select>');
205 |       for(var j = 0, l = options.options.length; j < l; j++) {
206 |         field.append($('<option value="' + options.options[j][1] + '">' + options.options[j][0] + '</option>'));
207 |       }
208 |       group.append(field);
209 |       return group;
210 |     }
211 |   }
212 | 
213 | })(jQuery);
214 | 
215 | (function($) {
216 | 
217 |   FormDialog.Text = {
218 |     id: 'text',
219 |     fieldFactory: function(options) {
220 |       var group = $('<div class="form-group"></div>');
221 |       group.append($('<label for="' + options.name + '">' + options.label + '</label>'));
222 |       var field = $('<input type="text" class="form-control" name="' + options.name + '"/>');
223 |       if(options.hasOwnProperty('placeholder')) {
224 |         field.attr('placeholder', options.placeholder);
225 |       }
226 |       group.append(field);
227 |       return group;
228 |     }
229 |   }
230 | 
231 | })(jQuery);
232 | 


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