src/editor/views/dialog/dialog.js

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