src/editor/modules/data/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 .save-btn': 'onSave',
  20             'click .cancel-btn': 'close',
  21             'click .close': 'close'
  22         },
  23         initialize: function() {
  24             _.bindAll(this);
  25             this.actionsDisabled = false;
  26         },
  27         show: function() {
  28             this.setElement(this.template(this.options));
  29
  30             var body = this.$('.modal-body');
  31             this.options.fields.forEach(function(field) {
  32                 var template = fieldTemplates[field.type];
  33                 if(!template) {
  34                     throw new Error('Field type {type} not recognized.'.replace('{type}', field.type));
  35                 }
  36                 body.append(
  37                     _.template(template)(_.extend({description: ''}, field))
  38                 );
  39             });
  40
  41             this.$el.modal({backdrop: 'static'});
  42             this.$el.modal('show');
  43             this.$('textarea').focus();
  44         },
  45         onSave: function(e) {
  46             e.preventDefault();
  47             var view = this,
  48                 formData = {};
  49
  50             this.options.fields.forEach(function(field) {
  51                 var widget = view.$('[name=' + field.name +']');
  52                 formData[field.name] = widget.val();
  53             });
  54
  55             this.trigger('save', {
  56                 formData: formData,
  57                 success: function() { view.actionsDisabled = false; view.close(); },
  58                 error: function() { view.actionsDisabled = false; view.close(); },
  59             });
  60         },
  61         close: function(e) {
  62             if(e) {
  63                 e.preventDefault();
  64             }
  65             if(!this.actionsDisabled) {
  66                 this.$el.modal('hide');
  67                 this.$el.remove();
  68             }
  69         },
  70         toggleButtons: function(toggle) {
  71             this.$('.btn, button').toggleClass('disabled', !toggle);
  72             this.$('textarea').attr('disabled', !toggle);
  73             this.actionsDisabled = !toggle;
  74         }
  75     });
  76
  77     return {
  78         create: function(config) {
  79             return new DialogView(config);
  80         }
  81     };
  82
  83 });