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                 var widget_type = widget.attr('type');
  74                 if (!(widget_type == 'checkbox' || widget_type == 'radio') || widget.is(':checked')) {
  75                     formData[field.name] = widget.val();
  76                 }
  77             });
  78
  79             this.trigger('execute', {
  80                 formData: formData,
  81                 success: function() { view.actionsDisabled = false; view.close(); },
  82                 error: function() { view.actionsDisabled = false; view.close(); },
  83             });
  84         },
  85         onCancel: function() {
  86             this.trigger('cancel');
  87             this.close();
  88         },
  89         close: function(e) {
  90             if(e) {
  91                 e.preventDefault();
  92             }
  93             if(!this.actionsDisabled) {
  94                 this.$el.modal('hide');
  95                 this.$el.remove();
  96             }
  97             this.trigger('close');
  98         },
  99         toggleButtons: function(toggle) {
 100             this.$('.btn, button').toggleClass('disabled', !toggle);
 101             this.$('textarea').attr('disabled', !toggle);
 102             this.actionsDisabled = !toggle;
 103         },
 104         setContentView: function(view) {
 105             var body = this.$('.modal-body');
 106             body.append(view);
 107         }
 108     });
 109
 110     return {
 111         create: function(config) {
 112             return new DialogView(config);
 113         }
 114     };
 115
 116 });