rails-backbone-forms 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
data/.gitignore ADDED
@@ -0,0 +1,4 @@
1
+ *.gem
2
+ .bundle
3
+ Gemfile.lock
4
+ pkg/*
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source 'http://rubygems.org'
2
+
3
+ # Specify your gem's dependencies in rails-backbone-forms.gemspec
4
+ gemspec
data/README.md ADDED
@@ -0,0 +1,24 @@
1
+ rails-backbone-forms
2
+ ====================
3
+
4
+ This gem wraps the [backbone-forms library](https://github.com/powmedia/backbone-forms) in the Rails asset pipeline's loving embrace. Rails 3.1 and up.
5
+
6
+ Step 1: Add it to your gemfile:
7
+
8
+ gem 'backbone-forms-rails'
9
+
10
+ Step 2: Include assets:
11
+
12
+ ```javascript
13
+ // In application.js
14
+ //= require backbone-forms-rails
15
+ ```
16
+
17
+ ```css
18
+ /* In application.css */
19
+ /*
20
+ *= require backbone-forms-rails
21
+ */
22
+ ```
23
+
24
+ Step 3: Rock and roll.
data/Rakefile ADDED
@@ -0,0 +1 @@
1
+ require "bundler/gem_tasks"
@@ -0,0 +1,9 @@
1
+ module Rails
2
+ module Backbone
3
+ module Forms
4
+ class Engine < ::Rails::Engine
5
+ # auto wire
6
+ end
7
+ end
8
+ end
9
+ end
@@ -0,0 +1,7 @@
1
+ module Rails
2
+ module Backbone
3
+ module Forms
4
+ VERSION = '0.0.1'
5
+ end
6
+ end
7
+ end
@@ -0,0 +1,9 @@
1
+ require 'rails/backbone/forms/version'
2
+ require 'rails/backbone/forms/engine'
3
+
4
+ module Rails
5
+ module Backbone
6
+ module Forms
7
+ end
8
+ end
9
+ end
@@ -0,0 +1,20 @@
1
+ # -*- encoding: utf-8 -*-
2
+ $:.push File.expand_path("../lib", __FILE__)
3
+ require 'rails/backbone/forms/version'
4
+
5
+ Gem::Specification.new do |s|
6
+ s.name = 'rails-backbone-forms'
7
+ s.version = Rails::Backbone::Forms::VERSION
8
+ s.authors = ['Aubrey Holland']
9
+ s.email = ['aubreyholland@gmail.com']
10
+ s.homepage = ""
11
+ s.summary = %q{Rails asset wrapper for backbone-forms}
12
+ s.description = %q{Use the backbone-forms library https://github.com/powmedia/backbone-forms: a "Form framework for BackboneJS with nested forms, editable lists and validation"}
13
+
14
+ s.rubyforge_project = 'rails-backbone-forms'
15
+
16
+ s.files = `git ls-files`.split("\n")
17
+ s.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
18
+ s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
19
+ s.require_paths = ["lib"]
20
+ end
@@ -0,0 +1,220 @@
1
+ /**
2
+ * Bootstrap Modal wrapper for use with Backbone.
3
+ *
4
+ * Takes care of instantiation, manages multiple modals,
5
+ * adds several options and removes the element from the DOM when closed
6
+ *
7
+ * @author Charles Davison <charlie@powmedia.co.uk>
8
+ *
9
+ * Events:
10
+ * shown: Fired when the modal has finished animating in
11
+ * hidden: Fired when the modal has finished animating out
12
+ * cancel: The user dismissed the modal
13
+ * ok: The user clicked OK
14
+ */
15
+ (function($, _, Backbone) {
16
+
17
+ //Set custom template settings
18
+ var _interpolateBackup = _.templateSettings;
19
+ _.templateSettings = {
20
+ interpolate: /\{\{(.+?)\}\}/g,
21
+ evaluate: /<%([\s\S]+?)%>/g
22
+ }
23
+
24
+ var template = _.template('\
25
+ <% if (title) { %>\
26
+ <div class="modal-header">\
27
+ <% if (allowCancel) { %>\
28
+ <a class="close">×</a>\
29
+ <% } %>\
30
+ <h3>{{title}}</h3>\
31
+ </div>\
32
+ <% } %>\
33
+ <div class="modal-body"><p>{{content}}</p></div>\
34
+ <div class="modal-footer">\
35
+ <% if (allowCancel) { %>\
36
+ <% if (cancelText) { %>\
37
+ <a href="#" class="btn cancel">{{cancelText}}</a>\
38
+ <% } %>\
39
+ <% } %>\
40
+ <a href="#" class="btn ok btn-primary">{{okText}}</a>\
41
+ </div>\
42
+ ');
43
+
44
+ //Reset to users' template settings
45
+ _.templateSettings = _interpolateBackup;
46
+
47
+
48
+ var Modal = Backbone.View.extend({
49
+
50
+ className: 'modal',
51
+
52
+ events: {
53
+ 'click .close': function(event) {
54
+ event.preventDefault();
55
+
56
+ this.trigger('cancel');
57
+ this.close();
58
+ },
59
+ 'click .cancel': function(event) {
60
+ event.preventDefault();
61
+
62
+ this.trigger('cancel');
63
+ this.close();
64
+ },
65
+ 'click .ok': function(event) {
66
+ event.preventDefault();
67
+
68
+ this.trigger('ok');
69
+ this.close();
70
+ }
71
+ },
72
+
73
+ /**
74
+ * Creates an instance of a Bootstrap Modal
75
+ *
76
+ * @see http://twitter.github.com/bootstrap/javascript.html#modals
77
+ *
78
+ * @param {Object} options
79
+ * @param {String|View} [options.content] Modal content. Default: none
80
+ * @param {String} [options.title] Title. Default: none
81
+ * @param {String} [options.okText] Text for the OK button. Default: 'OK'
82
+ * @param {String} [options.cancelText] Text for the cancel button. Default: 'Cancel'. If passed a falsey value, the button will be removed
83
+ * @param {Boolean} [options.allowCancel Whether the modal can be closed, other than by pressing OK. Default: true
84
+ * @param {Boolean} [options.escape] Whether the 'esc' key can dismiss the modal. Default: true, but false if options.cancellable is true
85
+ * @param {Boolean} [options.animate] Whether to animate in/out. Default: false
86
+ * @param {Function} [options.template] Compiled underscore template to override the default one
87
+ */
88
+ initialize: function(options) {
89
+ this.options = _.extend({
90
+ title: null,
91
+ okText: 'OK',
92
+ cancelText: 'Cancel',
93
+ allowCancel: true,
94
+ escape: true,
95
+ animate: false,
96
+ template: template
97
+ }, options);
98
+ },
99
+
100
+ /**
101
+ * Creates the DOM element
102
+ *
103
+ * @api private
104
+ */
105
+ render: function() {
106
+ var $el = this.$el,
107
+ options = this.options,
108
+ content = options.content;
109
+
110
+ //Create the modal container
111
+ $el.html(options.template(options));
112
+
113
+ var $content = this.$content = $el.find('.modal-body p')
114
+
115
+ //Insert the main content if it's a view
116
+ if (content.$el) {
117
+ $el.find('.modal-body p').html(content.render().$el);
118
+ }
119
+
120
+ if (options.animate) $el.addClass('fade');
121
+
122
+ this.isRendered = true;
123
+
124
+ return this;
125
+ },
126
+
127
+ /**
128
+ * Renders and shows the modal
129
+ */
130
+ open: function() {
131
+ if (!this.isRendered) this.render();
132
+
133
+ var self = this,
134
+ $el = this.$el;
135
+
136
+ //Create it
137
+ $el.modal({
138
+ keyboard: this.options.allowCancel,
139
+ backdrop: this.options.allowCancel ? true : 'static'
140
+ });
141
+
142
+ //Focus OK button
143
+ $el.one('shown', function() {
144
+ $el.find('.btn.ok').focus();
145
+
146
+ self.trigger('shown');
147
+ });
148
+
149
+ //Adjust the modal and backdrop z-index; for dealing with multiple modals
150
+ var numModals = Modal.count,
151
+ $backdrop = $('.modal-backdrop:eq('+numModals+')'),
152
+ backdropIndex = $backdrop.css('z-index'),
153
+ elIndex = $backdrop.css('z-index');
154
+
155
+ $backdrop.css('z-index', backdropIndex + numModals);
156
+ this.$el.css('z-index', elIndex + numModals);
157
+
158
+ Modal.count++;
159
+
160
+ return this;
161
+ },
162
+
163
+ /**
164
+ * Closes the modal
165
+ */
166
+ close: function() {
167
+ var self = this,
168
+ $el = this.$el;
169
+
170
+ //Check if the modal should stay open
171
+ if (this._preventClose) {
172
+ this._preventClose = false;
173
+ return;
174
+ }
175
+
176
+ $el.modal('hide');
177
+
178
+ $el.one('hidden', function() {
179
+ self.remove();
180
+
181
+ self.trigger('hidden');
182
+ });
183
+
184
+ Modal.count--;
185
+ },
186
+
187
+ /**
188
+ * Stop the modal from closing.
189
+ * Can be called from within a 'close' or 'ok' event listener.
190
+ */
191
+ preventClose: function() {
192
+ this._preventClose = true;
193
+ }
194
+ }, {
195
+ //STATICS
196
+
197
+ //The number of modals on display
198
+ count: 0
199
+ });
200
+
201
+
202
+ //EXPORTS
203
+ //CommonJS
204
+ if (typeof require == 'function' && module && exports) {
205
+ module.exports = Modal;
206
+ }
207
+
208
+ //AMD / RequireJS
209
+ if (typeof define === 'function' && define.amd) {
210
+ return define(function() {
211
+ return Modal;
212
+ })
213
+ }
214
+
215
+ //Regular; add to Backbone.Bootstrap.Modal
216
+ else {
217
+ Backbone.BootstrapModal = Modal;
218
+ }
219
+
220
+ })(jQuery, _, Backbone);