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 });