marionette.modal 1.0.0
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.
- checksums.yaml +7 -0
- data/.gitignore +36 -0
- data/Gemfile +4 -0
- data/Gruntfile.coffee +109 -0
- data/LICENSE +22 -0
- data/README.md +42 -0
- data/Rakefile +1 -0
- data/backbone.marionette.modals-min.js +1 -0
- data/backbone.marionette.modals.js +104 -0
- data/backbone.modal-min.js +1 -0
- data/backbone.modal.js +382 -0
- data/examples/1_single_view.html +71 -0
- data/examples/2_tab_based.html +104 -0
- data/examples/3_stacked_modal_with_marionette.html +105 -0
- data/examples/4_wizard.html +132 -0
- data/examples/css/style.css +45 -0
- data/examples/img/tab-icons.png +0 -0
- data/examples/style.css +35 -0
- data/examples/vendor/backbone.js +1571 -0
- data/examples/vendor/backbone.marionette.modals.js +104 -0
- data/examples/vendor/backbone.modal.css +24 -0
- data/examples/vendor/backbone.modal.js +382 -0
- data/examples/vendor/backbone.modal.theme.css +324 -0
- data/examples/vendor/jquery-1.9.1.js +9597 -0
- data/examples/vendor/marionette.js +2340 -0
- data/examples/vendor/marionette.modal.css +24 -0
- data/examples/vendor/marionette.modal.js +370 -0
- data/examples/vendor/marionette.modal.theme.css +324 -0
- data/examples/vendor/underscore.js +1227 -0
- data/lib/marionette.modal/version.rb +3 -0
- data/lib/marionette.modal.rb +5 -0
- data/marionette.modal-bundled-min.js +1 -0
- data/marionette.modal-bundled.js +858 -0
- data/marionette.modal-min.js +1 -0
- data/marionette.modal.css +24 -0
- data/marionette.modal.gemspec +23 -0
- data/marionette.modal.js +370 -0
- data/marionette.modal.theme.css +324 -0
- data/package.json +18 -0
- data/src/backbone.marionette.modals.coffee +67 -0
- data/src/backbone.modal.coffee +253 -0
- data/src/marionette.modal.coffee +248 -0
- data/src/marionette.modal.sass +26 -0
- data/src/marionette.modal.theme.sass +486 -0
- data/src/style.sass +48 -0
- data/test/spec/backbone.marionette.modals.spec.js +87 -0
- data/test/spec/backbone.modal.spec.js +224 -0
- data/test/spec.html +41 -0
- data/test/src/backbone.marionette.modals.spec.coffee +47 -0
- data/test/src/backbone.modal.spec.coffee +139 -0
- metadata +128 -0
data/backbone.modal.js
ADDED
@@ -0,0 +1,382 @@
|
|
1
|
+
(function() {
|
2
|
+
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
|
3
|
+
__hasProp = {}.hasOwnProperty,
|
4
|
+
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
|
5
|
+
__indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
|
6
|
+
|
7
|
+
if (typeof Backbone === "undefined" || Backbone === null) {
|
8
|
+
throw new Error("Backbone is not defined. Please include the latest version from http://documentcloud.github.com/backbone/backbone.js");
|
9
|
+
}
|
10
|
+
|
11
|
+
Backbone.Modal = (function(_super) {
|
12
|
+
__extends(Modal, _super);
|
13
|
+
|
14
|
+
Modal.prototype.prefix = 'bbm';
|
15
|
+
|
16
|
+
function Modal() {
|
17
|
+
this.triggerCancel = __bind(this.triggerCancel, this);
|
18
|
+
this.triggerSubmit = __bind(this.triggerSubmit, this);
|
19
|
+
this.triggerView = __bind(this.triggerView, this);
|
20
|
+
this.clickOutside = __bind(this.clickOutside, this);
|
21
|
+
this.checkKey = __bind(this.checkKey, this);
|
22
|
+
this.args = Array.prototype.slice.apply(arguments);
|
23
|
+
Backbone.View.prototype.constructor.apply(this, this.args);
|
24
|
+
this.setUIElements();
|
25
|
+
this.delegateModalEvents();
|
26
|
+
}
|
27
|
+
|
28
|
+
Modal.prototype.render = function(options) {
|
29
|
+
var data, _ref,
|
30
|
+
_this = this;
|
31
|
+
if (options == null) {
|
32
|
+
options = {};
|
33
|
+
}
|
34
|
+
data = this.serializeData();
|
35
|
+
this.$el.addClass("" + this.prefix + "-wrapper");
|
36
|
+
this.modalEl = Backbone.$('<div />').addClass("" + this.prefix + "-modal");
|
37
|
+
if (this.template) {
|
38
|
+
this.modalEl.html(this.template(data));
|
39
|
+
}
|
40
|
+
this.$el.html(this.modalEl);
|
41
|
+
Backbone.$('body').on('keyup', this.checkKey);
|
42
|
+
Backbone.$('body').on('click', this.clickOutside);
|
43
|
+
if (this.viewContainer) {
|
44
|
+
this.viewContainerEl = this.modalEl.find(this.viewContainer);
|
45
|
+
this.viewContainerEl.addClass("" + this.prefix + "-modal__views");
|
46
|
+
} else {
|
47
|
+
this.viewContainerEl = this.modalEl;
|
48
|
+
}
|
49
|
+
this.$el.show();
|
50
|
+
if (((_ref = this.views) != null ? _ref.length : void 0) > 0) {
|
51
|
+
this.openAt(0);
|
52
|
+
}
|
53
|
+
if (typeof this.onRender === "function") {
|
54
|
+
this.onRender();
|
55
|
+
}
|
56
|
+
this.modalEl.css({
|
57
|
+
opacity: 0
|
58
|
+
});
|
59
|
+
this.$el.fadeIn({
|
60
|
+
duration: 100,
|
61
|
+
complete: function() {
|
62
|
+
return _this.modalEl.css({
|
63
|
+
opacity: 1
|
64
|
+
}).addClass("" + _this.prefix + "-modal--open");
|
65
|
+
}
|
66
|
+
});
|
67
|
+
return this;
|
68
|
+
};
|
69
|
+
|
70
|
+
Modal.prototype.setUIElements = function() {
|
71
|
+
var _ref;
|
72
|
+
this.template = this.getOption('template');
|
73
|
+
this.views = this.getOption('views');
|
74
|
+
if ((_ref = this.views) != null) {
|
75
|
+
_ref.length = _.size(this.views);
|
76
|
+
}
|
77
|
+
this.viewContainer = this.getOption('viewContainer');
|
78
|
+
this.$el.hide();
|
79
|
+
if (_.isUndefined(this.template) && _.isUndefined(this.views)) {
|
80
|
+
throw new Error('No template or views defined for Backbone.Modal');
|
81
|
+
}
|
82
|
+
if (this.template && this.views && _.isUndefined(this.viewContainer)) {
|
83
|
+
throw new Error('No viewContainer defined for Backbone.Modal');
|
84
|
+
}
|
85
|
+
};
|
86
|
+
|
87
|
+
Modal.prototype.getOption = function(option) {
|
88
|
+
if (!option) {
|
89
|
+
return;
|
90
|
+
}
|
91
|
+
if (this.options && __indexOf.call(this.options, option) >= 0 && (this.options[option] != null)) {
|
92
|
+
return this.options[option];
|
93
|
+
} else {
|
94
|
+
return this[option];
|
95
|
+
}
|
96
|
+
};
|
97
|
+
|
98
|
+
Modal.prototype.serializeData = function() {
|
99
|
+
var data;
|
100
|
+
data = {};
|
101
|
+
if (this.model) {
|
102
|
+
data = _.extend(data, this.model.toJSON());
|
103
|
+
}
|
104
|
+
if (this.collection) {
|
105
|
+
data = _.extend(data, {
|
106
|
+
items: this.collection.toJSON()
|
107
|
+
});
|
108
|
+
}
|
109
|
+
return data;
|
110
|
+
};
|
111
|
+
|
112
|
+
Modal.prototype.delegateModalEvents = function() {
|
113
|
+
var cancelEl, key, match, selector, submitEl, trigger, _results;
|
114
|
+
this.active = true;
|
115
|
+
cancelEl = this.getOption('cancelEl');
|
116
|
+
submitEl = this.getOption('submitEl');
|
117
|
+
if (submitEl) {
|
118
|
+
this.$el.on('click', submitEl, this.triggerSubmit);
|
119
|
+
}
|
120
|
+
if (cancelEl) {
|
121
|
+
this.$el.on('click', cancelEl, this.triggerCancel);
|
122
|
+
}
|
123
|
+
_results = [];
|
124
|
+
for (key in this.views) {
|
125
|
+
if (key !== 'length') {
|
126
|
+
match = key.match(/^(\S+)\s*(.*)$/);
|
127
|
+
trigger = match[1];
|
128
|
+
selector = match[2];
|
129
|
+
_results.push(this.$el.on(trigger, selector, this.views[key], this.triggerView));
|
130
|
+
} else {
|
131
|
+
_results.push(void 0);
|
132
|
+
}
|
133
|
+
}
|
134
|
+
return _results;
|
135
|
+
};
|
136
|
+
|
137
|
+
Modal.prototype.undelegateModalEvents = function() {
|
138
|
+
var cancelEl, key, match, selector, submitEl, trigger, _results;
|
139
|
+
this.active = false;
|
140
|
+
cancelEl = this.getOption('cancelEl');
|
141
|
+
submitEl = this.getOption('submitEl');
|
142
|
+
if (submitEl) {
|
143
|
+
this.$el.off('click', submitEl, this.triggerSubmit);
|
144
|
+
}
|
145
|
+
if (cancelEl) {
|
146
|
+
this.$el.off('click', cancelEl, this.triggerCancel);
|
147
|
+
}
|
148
|
+
_results = [];
|
149
|
+
for (key in this.views) {
|
150
|
+
if (key !== 'length') {
|
151
|
+
match = key.match(/^(\S+)\s*(.*)$/);
|
152
|
+
trigger = match[1];
|
153
|
+
selector = match[2];
|
154
|
+
_results.push(this.$el.off(trigger, selector, this.views[key], this.triggerView));
|
155
|
+
} else {
|
156
|
+
_results.push(void 0);
|
157
|
+
}
|
158
|
+
}
|
159
|
+
return _results;
|
160
|
+
};
|
161
|
+
|
162
|
+
Modal.prototype.checkKey = function(e) {
|
163
|
+
if (this.active) {
|
164
|
+
switch (e.keyCode) {
|
165
|
+
case 27:
|
166
|
+
return this.triggerCancel();
|
167
|
+
case 13:
|
168
|
+
return this.triggerSubmit();
|
169
|
+
}
|
170
|
+
}
|
171
|
+
};
|
172
|
+
|
173
|
+
Modal.prototype.clickOutside = function(e) {
|
174
|
+
if (Backbone.$(e.target).hasClass("" + this.prefix + "-wrapper") && this.active) {
|
175
|
+
return this.triggerCancel(null, true);
|
176
|
+
}
|
177
|
+
};
|
178
|
+
|
179
|
+
Modal.prototype.buildView = function(viewType) {
|
180
|
+
var view;
|
181
|
+
if (!viewType) {
|
182
|
+
return;
|
183
|
+
}
|
184
|
+
if (_.isFunction(viewType)) {
|
185
|
+
view = new viewType(this.args[0]);
|
186
|
+
if (view instanceof Backbone.View) {
|
187
|
+
return {
|
188
|
+
el: view.render().$el,
|
189
|
+
view: view
|
190
|
+
};
|
191
|
+
} else {
|
192
|
+
return {
|
193
|
+
el: viewType(this.args[0])
|
194
|
+
};
|
195
|
+
}
|
196
|
+
}
|
197
|
+
return {
|
198
|
+
view: viewType,
|
199
|
+
el: viewType.$el
|
200
|
+
};
|
201
|
+
};
|
202
|
+
|
203
|
+
Modal.prototype.triggerView = function(e) {
|
204
|
+
var index, instance, key, options;
|
205
|
+
if (e != null) {
|
206
|
+
if (typeof e.preventDefault === "function") {
|
207
|
+
e.preventDefault();
|
208
|
+
}
|
209
|
+
}
|
210
|
+
options = e.data;
|
211
|
+
instance = this.buildView(options.view);
|
212
|
+
if (this.currentView) {
|
213
|
+
this.previousView = this.currentView;
|
214
|
+
}
|
215
|
+
this.currentView = instance.view || instance.el;
|
216
|
+
index = 0;
|
217
|
+
for (key in this.views) {
|
218
|
+
if (options.view === this.views[key].view) {
|
219
|
+
this.currentIndex = index;
|
220
|
+
}
|
221
|
+
index++;
|
222
|
+
}
|
223
|
+
if (options.onActive) {
|
224
|
+
if (_.isFunction(options.onActive)) {
|
225
|
+
options.onActive(this);
|
226
|
+
} else if (_.isString(options.onActive)) {
|
227
|
+
this[options.onActive].call(this, options);
|
228
|
+
}
|
229
|
+
}
|
230
|
+
if (this.shouldAnimate) {
|
231
|
+
return this.animateToView(instance.el);
|
232
|
+
} else {
|
233
|
+
this.shouldAnimate = true;
|
234
|
+
return this.$(this.viewContainerEl).html(instance.el);
|
235
|
+
}
|
236
|
+
};
|
237
|
+
|
238
|
+
Modal.prototype.animateToView = function(view) {
|
239
|
+
var container, newHeight, previousHeight, style, tester, _ref,
|
240
|
+
_this = this;
|
241
|
+
style = {
|
242
|
+
position: 'relative',
|
243
|
+
top: -9999,
|
244
|
+
left: -9999
|
245
|
+
};
|
246
|
+
tester = Backbone.$('<tester/>').css(style);
|
247
|
+
tester.html(this.$el.clone().css(style));
|
248
|
+
if (Backbone.$('tester').length !== 0) {
|
249
|
+
Backbone.$('tester').replaceWith(tester);
|
250
|
+
} else {
|
251
|
+
Backbone.$('body').append(tester);
|
252
|
+
}
|
253
|
+
if (this.viewContainer) {
|
254
|
+
container = tester.find(this.viewContainer);
|
255
|
+
} else {
|
256
|
+
container = tester.find("." + this.prefix + "-modal");
|
257
|
+
}
|
258
|
+
container.removeAttr('style');
|
259
|
+
previousHeight = container.outerHeight();
|
260
|
+
container.html(view);
|
261
|
+
newHeight = container.outerHeight();
|
262
|
+
if (previousHeight === newHeight) {
|
263
|
+
this.$(this.viewContainerEl).html(view);
|
264
|
+
return (_ref = this.previousView) != null ? typeof _ref.close === "function" ? _ref.close() : void 0 : void 0;
|
265
|
+
} else {
|
266
|
+
this.$(this.viewContainerEl).css({
|
267
|
+
opacity: 0
|
268
|
+
});
|
269
|
+
return this.$(this.viewContainerEl).animate({
|
270
|
+
height: newHeight
|
271
|
+
}, 100, function() {
|
272
|
+
var _ref1;
|
273
|
+
_this.$(_this.viewContainerEl).css({
|
274
|
+
opacity: 1
|
275
|
+
}).removeAttr('style');
|
276
|
+
_this.$(_this.viewContainerEl).html(view);
|
277
|
+
return (_ref1 = _this.previousView) != null ? typeof _ref1.close === "function" ? _ref1.close() : void 0 : void 0;
|
278
|
+
});
|
279
|
+
}
|
280
|
+
};
|
281
|
+
|
282
|
+
Modal.prototype.triggerSubmit = function(e) {
|
283
|
+
if (!e) {
|
284
|
+
return;
|
285
|
+
}
|
286
|
+
if (e != null) {
|
287
|
+
e.preventDefault();
|
288
|
+
}
|
289
|
+
if (this.beforeSubmit) {
|
290
|
+
if (this.beforeSubmit() === false) {
|
291
|
+
return;
|
292
|
+
}
|
293
|
+
}
|
294
|
+
if (typeof this.submit === "function") {
|
295
|
+
this.submit();
|
296
|
+
}
|
297
|
+
if (this.regionEnabled) {
|
298
|
+
return this.trigger('modal:close');
|
299
|
+
} else {
|
300
|
+
return this.close();
|
301
|
+
}
|
302
|
+
};
|
303
|
+
|
304
|
+
Modal.prototype.triggerCancel = function(e) {
|
305
|
+
if (e != null) {
|
306
|
+
e.preventDefault();
|
307
|
+
}
|
308
|
+
if (this.beforeCancel) {
|
309
|
+
if (this.beforeCancel() === false) {
|
310
|
+
return;
|
311
|
+
}
|
312
|
+
}
|
313
|
+
if (typeof this.cancel === "function") {
|
314
|
+
this.cancel();
|
315
|
+
}
|
316
|
+
if (this.regionEnabled) {
|
317
|
+
return this.trigger('modal:close');
|
318
|
+
} else {
|
319
|
+
return this.close();
|
320
|
+
}
|
321
|
+
};
|
322
|
+
|
323
|
+
Modal.prototype.close = function() {
|
324
|
+
var _this = this;
|
325
|
+
Backbone.$('body').off('keyup', this.checkKey);
|
326
|
+
Backbone.$('body').off('click', this.clickOutside);
|
327
|
+
if (typeof this.onClose === "function") {
|
328
|
+
this.onClose();
|
329
|
+
}
|
330
|
+
this.shouldAnimate = false;
|
331
|
+
this.modalEl.addClass("" + this.prefix + "-modal--close");
|
332
|
+
this.$el.fadeOut({
|
333
|
+
duration: 200
|
334
|
+
});
|
335
|
+
return _.delay(function() {
|
336
|
+
var _ref;
|
337
|
+
if ((_ref = _this.currentView) != null) {
|
338
|
+
if (typeof _ref.remove === "function") {
|
339
|
+
_ref.remove();
|
340
|
+
}
|
341
|
+
}
|
342
|
+
return _this.remove();
|
343
|
+
}, 200);
|
344
|
+
};
|
345
|
+
|
346
|
+
Modal.prototype.openAt = function(index) {
|
347
|
+
var i, key, view;
|
348
|
+
i = 0;
|
349
|
+
for (key in this.views) {
|
350
|
+
if (key !== 'length') {
|
351
|
+
if (i === index) {
|
352
|
+
view = this.views[key];
|
353
|
+
}
|
354
|
+
i++;
|
355
|
+
}
|
356
|
+
}
|
357
|
+
if (view) {
|
358
|
+
this.currentIndex = index;
|
359
|
+
this.triggerView({
|
360
|
+
data: view
|
361
|
+
});
|
362
|
+
}
|
363
|
+
return this;
|
364
|
+
};
|
365
|
+
|
366
|
+
Modal.prototype.next = function() {
|
367
|
+
if (this.currentIndex + 1 < this.views.length) {
|
368
|
+
return this.openAt(this.currentIndex + 1);
|
369
|
+
}
|
370
|
+
};
|
371
|
+
|
372
|
+
Modal.prototype.previous = function() {
|
373
|
+
if (this.currentIndex - 1 < this.views.length - 1) {
|
374
|
+
return this.openAt(this.currentIndex - 1);
|
375
|
+
}
|
376
|
+
};
|
377
|
+
|
378
|
+
return Modal;
|
379
|
+
|
380
|
+
})(Backbone.View);
|
381
|
+
|
382
|
+
}).call(this);
|
@@ -0,0 +1,71 @@
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
2
|
+
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
3
|
+
|
4
|
+
|
5
|
+
<head>
|
6
|
+
<meta content="text/html;charset=UTF-8" http-equiv="Content-Type"/>
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
|
8
|
+
|
9
|
+
<title>Single view modal</title>
|
10
|
+
|
11
|
+
<script type="text/javascript" src="vendor/jquery-1.9.1.js"></script>
|
12
|
+
<script type="text/javascript" src="vendor/underscore.js"></script>
|
13
|
+
<script type="text/javascript" src="vendor/backbone.js"></script>
|
14
|
+
|
15
|
+
<!-- Adding Backbone.Modal extension here -->
|
16
|
+
<link type="text/css" rel="stylesheet" href="vendor/backbone.modal.css">
|
17
|
+
<link type="text/css" rel="stylesheet" href="vendor/backbone.modal.theme.css">
|
18
|
+
<script type="text/javascript" src="vendor/backbone.modal.js"></script>
|
19
|
+
|
20
|
+
<!-- Custom style -->
|
21
|
+
<link type="text/css" rel="stylesheet" href="css/style.css">
|
22
|
+
</head>
|
23
|
+
|
24
|
+
|
25
|
+
<body>
|
26
|
+
<a href="#" class="open">Open modal</a>
|
27
|
+
|
28
|
+
<div class="app"></div>
|
29
|
+
|
30
|
+
<script type="text/template" id="modal-template">
|
31
|
+
<div class="bbm-modal__topbar">
|
32
|
+
<h3 class="bbm-modal__title">Backbone.Modal</h3>
|
33
|
+
</div>
|
34
|
+
<div class="bbm-modal__section">
|
35
|
+
<p>With Backbone.Modal you can create a modals in a few lines of code.</p>
|
36
|
+
<p>Some features are:</p>
|
37
|
+
<ul>
|
38
|
+
<li>Really flexible and easy to set up.</li>
|
39
|
+
<li>Default behaviors like ESC or clicking outside a modal.</li>
|
40
|
+
<li>Some awesome animations that make them feel robust.</li>
|
41
|
+
<li>Responsive and usable on mobile devices.</li>
|
42
|
+
</ul>
|
43
|
+
</div>
|
44
|
+
<div class="bbm-modal__bottombar">
|
45
|
+
<a href="#" class="bbm-button">Close</a>
|
46
|
+
</div>
|
47
|
+
</script>
|
48
|
+
|
49
|
+
<script>
|
50
|
+
jQuery(function($) {
|
51
|
+
|
52
|
+
// Create a modal view class
|
53
|
+
var Modal = Backbone.Modal.extend({
|
54
|
+
template: _.template($('#modal-template').html()),
|
55
|
+
cancelEl: '.bbm-button'
|
56
|
+
});
|
57
|
+
|
58
|
+
|
59
|
+
$('.open').on('click', function(){
|
60
|
+
|
61
|
+
// Render an instance of your modal
|
62
|
+
var modalView = new Modal();
|
63
|
+
$('.app').html(modalView.render().el);
|
64
|
+
|
65
|
+
});
|
66
|
+
|
67
|
+
$('.open').click()
|
68
|
+
});
|
69
|
+
</script>
|
70
|
+
</body>
|
71
|
+
</html>
|
@@ -0,0 +1,104 @@
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
2
|
+
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
3
|
+
|
4
|
+
|
5
|
+
<head>
|
6
|
+
<meta content="text/html;charset=UTF-8" http-equiv="Content-Type"/>
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
|
8
|
+
|
9
|
+
<title>Tab based modal</title>
|
10
|
+
|
11
|
+
<script type="text/javascript" src="vendor/jquery-1.9.1.js"></script>
|
12
|
+
<script type="text/javascript" src="vendor/underscore.js"></script>
|
13
|
+
<script type="text/javascript" src="vendor/backbone.js"></script>
|
14
|
+
|
15
|
+
<!-- Adding Backbone.Modal extension here -->
|
16
|
+
<link type="text/css" rel="stylesheet" href="vendor/backbone.modal.css">
|
17
|
+
<link type="text/css" rel="stylesheet" href="vendor/backbone.modal.theme.css">
|
18
|
+
<script type="text/javascript" src="vendor/backbone.modal.js"></script>
|
19
|
+
|
20
|
+
<!-- Custom style -->
|
21
|
+
<link type="text/css" rel="stylesheet" href="css/style.css">
|
22
|
+
|
23
|
+
|
24
|
+
</head>
|
25
|
+
|
26
|
+
<body>
|
27
|
+
<a href="#" class="open">Open modal</a>
|
28
|
+
|
29
|
+
<div class="app"></div>
|
30
|
+
|
31
|
+
<!-- The modal structure, with an container element that will contain all tabs -->
|
32
|
+
<script type="text/template" id="modal-template">
|
33
|
+
<div class="bbm-modal__topbar">
|
34
|
+
<ul>
|
35
|
+
<li class="bbm-modal__tab"><a href="#" id="tab1" class="active">General</a></li>
|
36
|
+
<li class="bbm-modal__tab"><a href="#" id="tab2">Account</a></li>
|
37
|
+
</ul>
|
38
|
+
</div>
|
39
|
+
|
40
|
+
<div class="my-container"></div>
|
41
|
+
<div class="bbm-modal__bottombar">
|
42
|
+
<a href="#" class="bbm-button">Done</a>
|
43
|
+
</div>
|
44
|
+
</script>
|
45
|
+
|
46
|
+
<!-- Tab 1 -->
|
47
|
+
<script type="text/template" id="modal-view1-template">
|
48
|
+
<div class="bbm-modal__section">
|
49
|
+
<h3>Tab based example</h3>
|
50
|
+
<p>It's also really easy to create a modal, with seperate views that you can control using tabs.</p>
|
51
|
+
<p>We're also using a default style, but you can overwrite anything you want.</p>
|
52
|
+
</div>
|
53
|
+
</script>
|
54
|
+
|
55
|
+
<!-- Tab 2 -->
|
56
|
+
<script type="text/template" id="modal-view2-template">
|
57
|
+
<div class="bbm-modal__section">
|
58
|
+
Your account details
|
59
|
+
</div>
|
60
|
+
</script>
|
61
|
+
|
62
|
+
<script>
|
63
|
+
jQuery(function($) {
|
64
|
+
|
65
|
+
// Create a modal view class
|
66
|
+
var Modal = Backbone.Modal.extend({
|
67
|
+
template: _.template($('#modal-template').html()),
|
68
|
+
|
69
|
+
viewContainer: '.my-container',
|
70
|
+
submitEl: '.bbm-button',
|
71
|
+
|
72
|
+
views: {
|
73
|
+
'click #tab1': {
|
74
|
+
name: 'tab1',
|
75
|
+
view: _.template($('#modal-view1-template').html()),
|
76
|
+
onActive: 'setActive'
|
77
|
+
},
|
78
|
+
'click #tab2': {
|
79
|
+
name: 'tab2',
|
80
|
+
view: _.template($('#modal-view2-template').html()),
|
81
|
+
onActive: 'setActive'
|
82
|
+
}
|
83
|
+
},
|
84
|
+
|
85
|
+
setActive: function(options) {
|
86
|
+
this.$('.bbm-modal__tab a').removeClass('active');
|
87
|
+
this.$('#'+options.name).addClass('active');
|
88
|
+
}
|
89
|
+
});
|
90
|
+
|
91
|
+
$('.open').on('click', function(){
|
92
|
+
|
93
|
+
// Render an instance of your modal
|
94
|
+
var modalView = new Modal();
|
95
|
+
$('.app').html(modalView.render().el);
|
96
|
+
|
97
|
+
});
|
98
|
+
|
99
|
+
$('.open').click()
|
100
|
+
|
101
|
+
});
|
102
|
+
</script>
|
103
|
+
</body>
|
104
|
+
</html>
|
@@ -0,0 +1,105 @@
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
2
|
+
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
3
|
+
<head>
|
4
|
+
<meta content="text/html;charset=UTF-8" http-equiv="Content-Type"/>
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
|
6
|
+
<title>Stacked modal with Marionette</title>
|
7
|
+
|
8
|
+
<script type="text/javascript" src="vendor/jquery-1.9.1.js"></script>
|
9
|
+
<script type="text/javascript" src="vendor/underscore.js"></script>
|
10
|
+
<script type="text/javascript" src="vendor/backbone.js"></script>
|
11
|
+
<script type="text/javascript" src="vendor/marionette.js"></script>
|
12
|
+
|
13
|
+
<!-- Adding Backbone.Modal extension here -->
|
14
|
+
<link type="text/css" rel="stylesheet" href="vendor/backbone.modal.css">
|
15
|
+
<link type="text/css" rel="stylesheet" href="vendor/backbone.modal.theme.css">
|
16
|
+
|
17
|
+
<script type="text/javascript" src="vendor/backbone.modal.js"></script>
|
18
|
+
<script type="text/javascript" src="vendor/backbone.marionette.modals.js"></script>
|
19
|
+
|
20
|
+
<!-- Custom style -->
|
21
|
+
<link type="text/css" rel="stylesheet" href="css/style.css">
|
22
|
+
|
23
|
+
</head>
|
24
|
+
<body>
|
25
|
+
<a href="#" class="open-1">Open modal</a>
|
26
|
+
|
27
|
+
<div class="app"></div>
|
28
|
+
|
29
|
+
<!-- Region container -->
|
30
|
+
<script type="text/template" id="modals-template">
|
31
|
+
<div class="modals-container"></div>
|
32
|
+
</script>
|
33
|
+
|
34
|
+
<!-- Modal templates -->
|
35
|
+
<script type="text/template" id="modal-template1">
|
36
|
+
<div class="bbm-modal__topbar">
|
37
|
+
<h3 class="bbm-modal__title">Stacked modals with Backbone.Marionette</h3>
|
38
|
+
</div>
|
39
|
+
<div class="bbm-modal__section">
|
40
|
+
<p>Go ahead and open the <a href="#" class="open-2">second modal</a>.</p>
|
41
|
+
</div>
|
42
|
+
<div class="bbm-modal__bottombar">
|
43
|
+
<a href="#" class="bbm-button">Done</a>
|
44
|
+
</div>
|
45
|
+
</script>
|
46
|
+
|
47
|
+
<script type="text/template" id="modal-template2">
|
48
|
+
<div class="bbm-modal__topbar">
|
49
|
+
<h3 class="bbm-modal__title">The stacked modal</h3>
|
50
|
+
</div>
|
51
|
+
<div class="bbm-modal__section">
|
52
|
+
<p>By using Backbone.Marionette, your code stays simple and clean. So now we can create stacked modals, without doing any complex work.</p>
|
53
|
+
</div>
|
54
|
+
<div class="bbm-modal__bottombar">
|
55
|
+
<a href="#" class="bbm-button">Done</a>
|
56
|
+
</div>
|
57
|
+
</script>
|
58
|
+
|
59
|
+
<script>
|
60
|
+
jQuery(function($) {
|
61
|
+
|
62
|
+
// Create a layout class
|
63
|
+
var Layout = Backbone.Marionette.Layout.extend({
|
64
|
+
template: _.template($('#modals-template').html()),
|
65
|
+
regions: {
|
66
|
+
modals: {
|
67
|
+
selector: '.modals-container',
|
68
|
+
regionType: Backbone.Marionette.Modals
|
69
|
+
}
|
70
|
+
}
|
71
|
+
});
|
72
|
+
|
73
|
+
// Create a modal view class
|
74
|
+
var Modal1 = Backbone.Modal.extend({
|
75
|
+
template: _.template($('#modal-template1').html()),
|
76
|
+
submitEl: '.bbm-button',
|
77
|
+
events: {
|
78
|
+
'click .open-2': 'openModal'
|
79
|
+
},
|
80
|
+
openModal: function(e) {
|
81
|
+
e.preventDefault();
|
82
|
+
myLayout.modals.show(new Modal2());
|
83
|
+
}
|
84
|
+
});
|
85
|
+
|
86
|
+
var Modal2 = Backbone.Modal.extend({
|
87
|
+
template: _.template($('#modal-template2').html()),
|
88
|
+
submitEl: '.bbm-button'
|
89
|
+
});
|
90
|
+
|
91
|
+
// Render the layout
|
92
|
+
var myLayout = new Layout();
|
93
|
+
$('body').append(myLayout.render().el);
|
94
|
+
|
95
|
+
// Render modals on click
|
96
|
+
$('body').on('click', '.open-1', function(){
|
97
|
+
myLayout.modals.show(new Modal1());
|
98
|
+
});
|
99
|
+
|
100
|
+
$('.open-1').click()
|
101
|
+
|
102
|
+
});
|
103
|
+
</script>
|
104
|
+
</body>
|
105
|
+
</html>
|