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 +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);
|