rails-backbone-forms 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +4 -0
- data/Gemfile +4 -0
- data/README.md +24 -0
- data/Rakefile +1 -0
- data/lib/rails/backbone/forms/engine.rb +9 -0
- data/lib/rails/backbone/forms/version.rb +7 -0
- data/lib/rails-backbone-forms.rb +9 -0
- data/rails-backbone-forms.gemspec +20 -0
- data/vendor/assets/javascripts/rails-backbone-forms/adapters/backbone.bootstrap-modal.js +220 -0
- data/vendor/assets/javascripts/rails-backbone-forms/backbone-forms.js +2309 -0
- data/vendor/assets/javascripts/rails-backbone-forms/editors/jquery-ui.js +500 -0
- data/vendor/assets/javascripts/rails-backbone-forms/editors/list.js +575 -0
- data/vendor/assets/javascripts/rails-backbone-forms/jquery-ui-editors.js +405 -0
- data/vendor/assets/javascripts/rails-backbone-forms/templates/bootstrap.js +92 -0
- data/vendor/assets/javascripts/rails-backbone-forms/templates/default.js +89 -0
- data/vendor/assets/javascripts/rails-backbone-forms.js +2 -0
- data/vendor/assets/stylesheets/rails-backbone-forms/editors/jquery-ui.css +65 -0
- data/vendor/assets/stylesheets/rails-backbone-forms/templates/bootstrap.css +43 -0
- data/vendor/assets/stylesheets/rails-backbone-forms/templates/default.css +134 -0
- data/vendor/assets/stylesheets/rails-backbone-forms.css +3 -0
- metadata +66 -0
data/.gitignore
ADDED
data/Gemfile
ADDED
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,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);
|