← Back to branch summary

~caneypuggies/reformedchurcheslocator/couchapp-backbone

« back to all changes in this revision

Viewing changes to _attachments/js/vendor/backgrid/src/extensions/text-cell/backgrid-text-cell.js

  • Committer: Tim Black
  • Date: 2013-09-16 22:50:16 UTC
  • Revision ID: tim@alwaysreformed.com-20130916225016-zk8jiba25z33ew7h
Versioned Bower vendor directory

Show diffs side-by-side

added added

removed removed

Lines of Context:
_attachments/js/vendor/backgrid/src/extensions/text-cell/backgrid-text-cell.js
 
1
/*
 
2
  backgrid-text-cell
 
3
  http://github.com/wyuenho/backgrid
 
4
 
 
5
  Copyright (c) 2013 Jimmy Yuen Ho Wong and contributors
 
6
  Licensed under the MIT @license.
 
7
*/
 
8
 
 
9
(function (window, $, _, Backbone, Backgrid)  {
 
10
 
 
11
  /**
 
12
     Renders a form with a text area and a save button in a modal dialog.
 
13
 
 
14
     @class Backgrid.Extension.TextareaEditor
 
15
     @extends Backgrid.CellEditor
 
16
  */
 
17
  var TextareaEditor = Backgrid.Extension.TextareaEditor = Backgrid.CellEditor.extend({
 
18
 
 
19
    /** @property */
 
20
    tagName: "div",
 
21
 
 
22
    /** @property */
 
23
    className: "modal hide fade",
 
24
 
 
25
    /** @property {function(Object, ?Object=): string} template */
 
26
    template: _.template('<form><div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button><h3><%- column.get("label") %></h3></div><div class="modal-body"><textarea cols="<%= cols %>" rows="<%= rows %>"><%- content %></textarea></div><div class="modal-footer"><input class="btn" type="submit" value="Save"/></div></form>'),
 
27
 
 
28
    /** @property */
 
29
    cols: 80,
 
30
 
 
31
    /** @property */
 
32
    rows: 10,
 
33
 
 
34
    /** @property */
 
35
    events: {
 
36
      "keydown textarea": "clearError",
 
37
      "submit": "saveOrCancel",
 
38
      "hide": "saveOrCancel",
 
39
      "hidden": "close",
 
40
      "shown": "focus"
 
41
    },
 
42
 
 
43
    /**
 
44
       @property {Object} modalOptions The options passed to Bootstrap's modal
 
45
       plugin.
 
46
    */
 
47
    modalOptions: {
 
48
      backdrop: false
 
49
    },
 
50
 
 
51
    /**
 
52
       Renders a modal form dialog with a textarea, submit button and a close button.
 
53
    */
 
54
    render: function () {
 
55
      this.$el.html($(this.template({
 
56
        column: this.column,
 
57
        cols: this.cols,
 
58
        rows: this.rows,
 
59
        content: this.formatter.fromRaw(this.model.get(this.column.get("name")))
 
60
      })));
 
61
 
 
62
      this.delegateEvents();
 
63
 
 
64
      this.$el.modal(this.modalOptions);
 
65
 
 
66
      return this;
 
67
    },
 
68
 
 
69
    /**
 
70
       Event handler. Saves the text in the text area to the model when
 
71
       submitting. When cancelling, if the text area is dirty, a confirmation
 
72
       dialog will pop up. If the user clicks confirm, the text will be saved to
 
73
       the model.
 
74
 
 
75
       Triggers a Backbone `backgrid:error` event from the model along with the
 
76
       model, column and the existing value as the parameters if the value
 
77
       cannot be converted.
 
78
 
 
79
       @param {Event} e
 
80
    */
 
81
    saveOrCancel: function (e) {
 
82
      if (e && e.type == "submit") {
 
83
        e.preventDefault();
 
84
        e.stopPropagation();
 
85
      }
 
86
 
 
87
      var model = this.model;
 
88
      var column = this.column;
 
89
      var val = this.$el.find("textarea").val();
 
90
      var newValue = this.formatter.toRaw(val);
 
91
 
 
92
      if (_.isUndefined(newValue)) {
 
93
        model.trigger("backgrid:error", model, column, val);
 
94
 
 
95
        if (e) {
 
96
          e.preventDefault();
 
97
          e.stopPropagation();
 
98
        }
 
99
      }
 
100
      else if (!e || e.type == "submit" ||
 
101
               (e.type == "hide" &&
 
102
                newValue !== (this.model.get(this.column.get("name")) || '').replace(/\r/g, '') &&
 
103
                window.confirm("Would you like to save your changes?"))) {
 
104
 
 
105
        model.set(column.get("name"), newValue);
 
106
        this.$el.modal("hide");
 
107
      }
 
108
      else if (e.type != "hide") this.$el.modal("hide");
 
109
    },
 
110
 
 
111
    /**
 
112
       Clears the error class on the parent cell.
 
113
     */
 
114
    clearError: _.debounce(function () {
 
115
      if (!_.isUndefined(this.formatter.toRaw(this.$el.find("textarea").val()))) {
 
116
        this.$el.parent().removeClass("error");
 
117
      }
 
118
    }, 150),
 
119
 
 
120
    /**
 
121
       Triggers a `backgrid:edited` event along with the cell editor as the
 
122
       parameter after the modal is hidden.
 
123
 
 
124
       @param {Event} e
 
125
    */
 
126
    close: function (e) {
 
127
      var model = this.model;
 
128
      model.trigger("backgrid:edited", model, this.column,
 
129
                    new Backgrid.Command(e));
 
130
    },
 
131
 
 
132
    /**
 
133
       Focuses the textarea when the modal is shown.
 
134
    */
 
135
    focus: function () {
 
136
      this.$el.find("textarea").focus();
 
137
    }
 
138
 
 
139
  });
 
140
 
 
141
  /**
 
142
     TextCell is a string cell type that renders a form with a text area in a
 
143
     modal dialog instead of an input box editor. It is best suited for entering
 
144
     a large body of text.
 
145
 
 
146
     @class Backgrid.Extension.TextCell
 
147
     @extends Backgrid.StringCell
 
148
  */
 
149
  var TextCell = Backgrid.Extension.TextCell = Backgrid.StringCell.extend({
 
150
 
 
151
    /** @property */
 
152
    className: "text-cell",
 
153
 
 
154
    /** @property  */
 
155
    editor: TextareaEditor
 
156
 
 
157
  });
 
158
 
 
159
}(window, jQuery, _, Backbone, Backgrid));