04d8f74a953724eb21472d9b4c032d5f29a31ce7
[fnpeditor.git] / src / editor / views / dialog / dialog.js
1 define(function(require) {
2
3     /* globals gettext */
4     'use strict';
5
6     var _ = require('libs/underscore'),
7         Backbone = require('libs/backbone'),
8         dialogTemplate = require('libs/text!./dialog.html'),
9         fieldTemplates = {};
10         fieldTemplates.checkbox = require('libs/text!./templates/checkbox.html');
11         fieldTemplates.select = require('libs/text!./templates/select.html');
12         fieldTemplates.textarea = require('libs/text!./templates/textarea.html');
13         fieldTemplates.input = require('libs/text!./templates/input.html');
14
15
16
17     var DialogView = Backbone.View.extend({
18         template: _.template(dialogTemplate),
19         events: {
20             'click .execute-btn': 'onExecute',
21             'click .cancel-btn': 'onCancel',
22             'click .close': 'close'
23         },
24         initialize: function() {
25             _.bindAll(this);
26             this.actionsDisabled = false;
27         },
28         show: function() {
29             this.setElement(this.template(_.extend({
30                 executeButtonText: gettext('Submit'),
31                 cancelButtonText: gettext('Cancel')
32             }, this.options)));
33
34             var body = this.$('.modal-body');
35             (this.options.fields || []).forEach(function(field) {
36                 var template = fieldTemplates[field.type];
37                 if(!template) {
38                     throw new Error('Field type {type} not recognized.'.replace('{type}', field.type));
39                 }
40                 body.append(
41                     _.template(template)(_.extend({description: '', initialValue: ''}, field))
42                 );
43             });
44
45             if(this.options.text) {
46                 body.append('<p>' + this.options.text + '</p>');
47             }
48
49             this.$el.modal({backdrop: 'static'});
50             this.$el.modal('show');
51             this.$('textarea, input').first().focus();
52         },
53         onExecute: function(e) {
54             e.preventDefault();
55             var view = this,
56                 formData = {};
57
58             (this.options.fields || []).forEach(function(field) {
59                 var widget = view.$('[name=' + field.name +']');
60                 formData[field.name] = widget.val();
61             });
62
63             this.trigger('execute', {
64                 formData: formData,
65                 success: function() { view.actionsDisabled = false; view.close(); },
66                 error: function() { view.actionsDisabled = false; view.close(); },
67             });
68         },
69         onCancel: function() {
70             this.trigger('cancel');
71             this.close();
72         },
73         close: function(e) {
74             if(e) {
75                 e.preventDefault();
76             }
77             if(!this.actionsDisabled) {
78                 this.$el.modal('hide');
79                 this.$el.remove();
80             }
81             this.trigger('close');
82         },
83         toggleButtons: function(toggle) {
84             this.$('.btn, button').toggleClass('disabled', !toggle);
85             this.$('textarea').attr('disabled', !toggle);
86             this.actionsDisabled = !toggle;
87         }
88     });
89
90     return {
91         create: function(config) {
92             return new DialogView(config);
93         }
94     };
95
96 });