marionette-modal 1.0.0.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (51) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +36 -0
  3. data/Gemfile +4 -0
  4. data/Gruntfile.coffee +111 -0
  5. data/LICENSE +22 -0
  6. data/README.md +42 -0
  7. data/Rakefile +1 -0
  8. data/dist/backbone.marionette.modals-min.js +1 -0
  9. data/dist/backbone.marionette.modals.js +104 -0
  10. data/dist/backbone.modal-min.js +1 -0
  11. data/dist/backbone.modal.js +382 -0
  12. data/dist/marionette.modal-bundled-min.js +1 -0
  13. data/dist/marionette.modal-bundled.js +858 -0
  14. data/dist/marionette.modal-min.js +1 -0
  15. data/dist/marionette.modal.css +24 -0
  16. data/dist/marionette.modal.js +370 -0
  17. data/dist/marionette.modal.theme.css +324 -0
  18. data/examples/1_single_view.html +71 -0
  19. data/examples/2_tab_based.html +104 -0
  20. data/examples/3_stacked_modal_with_marionette.html +105 -0
  21. data/examples/4_wizard.html +132 -0
  22. data/examples/css/style.css +45 -0
  23. data/examples/img/tab-icons.png +0 -0
  24. data/examples/style.css +35 -0
  25. data/examples/vendor/backbone.js +1591 -0
  26. data/examples/vendor/backbone.marionette.modals.js +104 -0
  27. data/examples/vendor/backbone.modal.css +24 -0
  28. data/examples/vendor/backbone.modal.js +382 -0
  29. data/examples/vendor/backbone.modal.theme.css +324 -0
  30. data/examples/vendor/jquery-1.9.1.js +9597 -0
  31. data/examples/vendor/marionette.js +2466 -0
  32. data/examples/vendor/marionette.modal.css +24 -0
  33. data/examples/vendor/marionette.modal.js +370 -0
  34. data/examples/vendor/marionette.modal.theme.css +324 -0
  35. data/examples/vendor/underscore.js +1314 -0
  36. data/lib/marionette-modal/version.rb +3 -0
  37. data/lib/marionette-modal.rb +22 -0
  38. data/marionette-modal.gemspec +23 -0
  39. data/package.json +19 -0
  40. data/src/backbone.marionette.modals.coffee +67 -0
  41. data/src/backbone.modal.coffee +253 -0
  42. data/src/marionette.modal.coffee +248 -0
  43. data/src/marionette.modal.sass +26 -0
  44. data/src/marionette.modal.theme.sass +486 -0
  45. data/src/style.sass +48 -0
  46. data/test/spec/backbone.marionette.modals.spec.js +120 -0
  47. data/test/spec/backbone.modal.spec.js +224 -0
  48. data/test/spec.html +41 -0
  49. data/test/src/backbone.marionette.modals.spec.coffee +56 -0
  50. data/test/src/backbone.modal.spec.coffee +139 -0
  51. metadata +128 -0
@@ -0,0 +1,104 @@
1
+ (function() {
2
+ var _ref,
3
+ __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; },
4
+ __hasProp = {}.hasOwnProperty,
5
+ __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; };
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.Marionette.Modals = (function(_super) {
12
+ __extends(Modals, _super);
13
+
14
+ function Modals() {
15
+ this.close = __bind(this.close, this);
16
+ _ref = Modals.__super__.constructor.apply(this, arguments);
17
+ return _ref;
18
+ }
19
+
20
+ Modals.prototype.modals = [];
21
+
22
+ Modals.prototype.zIndex = 0;
23
+
24
+ Modals.prototype.show = function(modal, options) {
25
+ var lastModal, m, secondLastModal, _i, _len, _ref1;
26
+ if (options == null) {
27
+ options = {};
28
+ }
29
+ this.ensureEl();
30
+ if (this.modals.length > 0) {
31
+ lastModal = _.last(this.modals);
32
+ lastModal.modalEl.addClass("" + lastModal.prefix + "-modal--stacked");
33
+ secondLastModal = this.modals[this.modals.length - 1];
34
+ if (secondLastModal != null) {
35
+ secondLastModal.modalEl.removeClass("" + secondLastModal.prefix + "-modal--stacked-reverse");
36
+ }
37
+ }
38
+ modal.render();
39
+ modal.regionEnabled = true;
40
+ this.$el.show();
41
+ this.$el.append(modal.el);
42
+ if (this.modals.length > 0) {
43
+ modal.$el.css({
44
+ background: 'none'
45
+ });
46
+ }
47
+ Marionette.triggerMethod.call(modal, "show");
48
+ Marionette.triggerMethod.call(this, "show", modal);
49
+ this.currentView = modal;
50
+ _ref1 = this.modals;
51
+ for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
52
+ m = _ref1[_i];
53
+ m.undelegateModalEvents();
54
+ }
55
+ modal.on('modal:close', this.close);
56
+ this.modals.push(modal);
57
+ return this.zIndex++;
58
+ };
59
+
60
+ Modals.prototype.close = function() {
61
+ var lastModal, modal,
62
+ _this = this;
63
+ modal = this.currentView;
64
+ if (!modal || modal.isClosed) {
65
+ return;
66
+ }
67
+ if (modal.close) {
68
+ modal.close();
69
+ } else if (modal.remove) {
70
+ modal.remove();
71
+ }
72
+ modal.off('modal:close', this.close);
73
+ this.modals.splice(_.indexOf(this.modals, modal), 1);
74
+ this.zIndex--;
75
+ this.currentView = this.modals[this.zIndex - 1];
76
+ lastModal = _.last(this.modals);
77
+ if (lastModal) {
78
+ lastModal.modalEl.addClass("" + lastModal.prefix + "-modal--stacked-reverse");
79
+ _.delay(function() {
80
+ return lastModal.modalEl.removeClass("" + lastModal.prefix + "-modal--stacked");
81
+ }, 300);
82
+ if (this.zIndex !== 0) {
83
+ lastModal.delegateModalEvents();
84
+ }
85
+ }
86
+ return Marionette.triggerMethod.call(this, "close");
87
+ };
88
+
89
+ Modals.prototype.closeAll = function() {
90
+ var modal, _i, _len, _ref1, _results;
91
+ _ref1 = this.modals;
92
+ _results = [];
93
+ for (_i = 0, _len = _ref1.length; _i < _len; _i++) {
94
+ modal = _ref1[_i];
95
+ _results.push(this.close());
96
+ }
97
+ return _results;
98
+ };
99
+
100
+ return Modals;
101
+
102
+ })(Backbone.Marionette.Region);
103
+
104
+ }).call(this);
@@ -0,0 +1,24 @@
1
+ /* Modal positioning */
2
+ .bbm-wrapper {
3
+ box-sizing: border-box;
4
+ position: absolute;
5
+ left: 0;
6
+ top: 0;
7
+ width: 100%;
8
+ height: 100%;
9
+ z-index: 100;
10
+ padding: 50px 10px;
11
+ overflow-x: auto;
12
+ overflow-y: scroll; }
13
+ .bbm-wrapper * {
14
+ box-sizing: border-box; }
15
+
16
+ .bbm-modal {
17
+ border-radius: 3px;
18
+ margin: auto;
19
+ width: auto;
20
+ max-width: 550px; }
21
+
22
+ .bbm-views {
23
+ width: 100%;
24
+ box-sizing: border-box; }
@@ -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);