pressing enter makes new paragraph after image/video
[fnpeditor.git] / src / editor / views / dialog / dialog.js
1 define(function(require) {
2
3     'use strict';
4
5     var $ = require('libs/jquery'),
6         _ = 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: null,
31                 cancelButtonText: null,
32                 cssClass: ''
33             }, this.options)));
34
35             var body = this.$('.modal-body');
36             (this.options.fields || []).forEach(function(field) {
37                 var template = fieldTemplates[field.type];
38                 if(!template) {
39                     throw new Error('Field type {type} not recognized.'.replace('{type}', field.type));
40                 }
41                 var widget = $(_.template(template)(_.extend({description: '', initialValue: ''}, field)));
42
43                 body.append(widget);
44
45                 if(_.isFunction(field.prePasteHandler) && field.type === 'input') { // TODO: extract this out to widget specific impl.
46                     widget.find('input').on('paste', function(e) {
47                         var clipboardData = e.originalEvent.clipboardData;
48                         if(!clipboardData || !clipboardData.getData) {
49                             return;
50                         }
51                         e.preventDefault();
52                         var text = clipboardData.getData('text/plain').replace(/\r?\n|\r/g, ' ');
53                         $(e.target).val(field.prePasteHandler(text));
54                     });
55                 }
56             });
57
58             if(this.options.text) {
59                 body.append('<p>' + this.options.text + '</p>');
60             }
61
62             this.$el.modal({backdrop: 'static'});
63             this.$el.modal('show');
64             this.$('textarea, input').first().focus();
65         },
66         onExecute: function(e) {
67             e.preventDefault();
68             var view = this,
69                 formData = {};
70
71             (this.options.fields || []).forEach(function(field) {
72                 var widget = view.$('[name=' + field.name +']');
73                 formData[field.name] = widget.val();
74             });
75
76             this.trigger('execute', {
77                 formData: formData,
78                 success: function() { view.actionsDisabled = false; view.close(); },
79                 error: function() { view.actionsDisabled = false; view.close(); },
80             });
81         },
82         onCancel: function() {
83             this.trigger('cancel');
84             this.close();
85         },
86         close: function(e) {
87             if(e) {
88                 e.preventDefault();
89             }
90             if(!this.actionsDisabled) {
91                 this.$el.modal('hide');
92                 this.$el.remove();
93             }
94             this.trigger('close');
95         },
96         toggleButtons: function(toggle) {
97             this.$('.btn, button').toggleClass('disabled', !toggle);
98             this.$('textarea').attr('disabled', !toggle);
99             this.actionsDisabled = !toggle;
100         },
101         setContentView: function(view) {
102             var body = this.$('.modal-body');
103             body.append(view);
104         }
105     });
106
107     return {
108         create: function(config) {
109             return new DialogView(config);
110         }
111     };
112
113 });