MarionetteLabs · jasonLaster · May 15, 2014 · May 14, 2014
diff --git a/bootstrap/modals/application/application.js b/bootstrap/modals/application/application.js
@@ -0,0 +1,19 @@
+var Application = new Marionette.Application();
+
+// Components
+Application.Modal = {};
+Application.Example = {};
+
+// Initializer
+Application.addInitializer(function () {
+  this.layout = new Application.Layout();
+  this.layout.render();
+
+  Application.Modal.controller = new Application.Modal.Controller({
+    container: this.layout.overlay
+  });
+
+  Application.Example.controller = new Application.Example.Controller({
+    container: this.layout.content
+  });
+});
diff --git a/bootstrap/modals/application/layout.js b/bootstrap/modals/application/layout.js
@@ -0,0 +1,9 @@
+Application.Layout = Marionette.Layout.extend({
+  el: '#application',
+  template: '#application-layout-template',
+
+  regions: {
+    content: '.application__content',
+    overlay: '.application__overlay'
+  }
+});
diff --git a/bootstrap/modals/example/controller.js b/bootstrap/modals/example/controller.js
@@ -0,0 +1,7 @@
+Application.Example.Controller = Marionette.Controller.extend({
+  initialize: function (options) {
+    this.container = options.container;
+    this.view = new Application.Example.View();
+    this.container.show(this.view);
+  }
+});
diff --git a/bootstrap/modals/example/modal-view.js b/bootstrap/modals/example/modal-view.js
@@ -0,0 +1,28 @@
+Application.Example.ModalView = Marionette.ItemView.extend({
+  className: 'test',
+  template: '#example-modal-template',
+
+  behaviors: {
+    Modal: {
+      behaviorClass: Application.Modal.Behavior
+    }
+  },
+
+  initialize: function (options) {
+    this.trigger('modal:open');
+  },
+
+  events: {
+    'click .btn-primary' : 'confirm',
+    'click .btn-default' : 'cancel',
+    'click .close' : 'cancel'
+  },
+
+  confirm: function () {
+    this.trigger('modal:close');
+  },
+
+  cancel: function () {
+    this.trigger('modal:close');
+  }
+});
diff --git a/bootstrap/modals/example/view.js b/bootstrap/modals/example/view.js
@@ -0,0 +1,11 @@
+Application.Example.View = Marionette.ItemView.extend({
+  template: '#example-template',
+
+  events: {
+    'click button' : 'openModal'
+  },
+
+  openModal: function () {
+    var modalView = new Application.Example.ModalView();
+  }
+});
diff --git a/bootstrap/modals/index.html b/bootstrap/modals/index.html
@@ -0,0 +1,71 @@
+<!doctype html>
+<html lang='en'>
+<head>
+  <meta charset='utf-8'>
+  <title>Marionette Examples: Rendering Lists</title>
+  <script src='../../bower_components/jquery/dist/jquery.js'></script>
+  <script src='../../bower_components/underscore/underscore.js'></script>
+  <script src='../../bower_components/backbone/backbone.js'></script>
+  <script src='../../bower_components/backbone.babysitter/lib/backbone.babysitter.js'></script>
+  <script src='../../bower_components/backbone.wreqr/lib/backbone.wreqr.js'></script>
+  <script src='../../bower_components/marionette/lib/core/backbone.marionette.js'></script>
+  <link rel='stylesheet' href='../../bower_components/bootstrap/dist/css/bootstrap.css'>
+  <script src='../../bower_components/bootstrap/dist/js/bootstrap.js'></script>
+</head>
+<body>
+
+  <div id="application"></div>
+  <script src='application/application.js'></script>
+  <script src='application/layout.js'></script>
+  <script type="text/template" id="application-layout-template">
+    <div class="application__content"></div>
+    <div class="application__overlay"></div>
+  </script>
+
+  <script src='modal/channel.js'></script>
+  <script src='modal/controller.js'></script>
+  <script src='modal/view.js'></script>
+  <script src='modal/behavior.js'></script>
+  <script type="text/template" id="modal-template">
+    <div class="modal-dialog">
+      <div class="modal-content"></div>
+    </div>
+  </script>
+
+  <script src='example/controller.js'></script>
+  <script src='example/view.js'></script>
+  <script src='example/modal-view.js'></script>
+  <script type="text/template" id="example-template">
+    <div class="container">
+      <div class="col-md-6 col-md-offset-3">
+        <div class="page-header text-center">
+          <h1>Bootstrap Modal Example</h1>
+        </div>
+        <button class="btn btn-primary btn-lg btn-block">Open Modal</button>
+      </div>
+    </div>
+  </script>
+  <script type="text/template" id="example-modal-template">
+    <div class="modal-header">
+      <button type="button" class="close" aria-hidden="true">&times;</button>
+      <h4 class="modal-title">Confirm Action</h4>
+    </div>
+
+    <div class="modal-body">
+      <p>Are you sure you want to do this?</p>
+    </div>
+
+    <div class="modal-footer">
+      <button type="button" class="btn btn-default">Cancel</button>
+      <button type="button" class="btn btn-primary">Affirmative</button>
+    </div>
+  </script>
+
+  <!-- Start up -->
+  <script type="text/javascript">
+    $(function () {
+      Application.start();
+    });
+  </script>
+</body>
+</html>
diff --git a/bootstrap/modals/modal/behavior.js b/bootstrap/modals/modal/behavior.js
@@ -0,0 +1,20 @@
+Application.Modal.Behavior = Marionette.Behavior.extend({
+  initialize: function () {
+    this.listenToOnce(this.view, 'modal:open',  this.openModal);
+  },
+
+  openModal: function (callback) {
+    Application.Modal.channel.commands.execute('open', {
+      view: this.view,
+      callback: callback
+    });
+
+    this.listenToOnce(this.view, 'modal:close', this.closeModal);
+  },
+
+  closeModal: function (callback) {
+    Application.Modal.channel.commands.execute('close', {
+      callback: callback
+    });
+  }
+});
diff --git a/bootstrap/modals/modal/channel.js b/bootstrap/modals/modal/channel.js
@@ -0,0 +1 @@
+Application.Modal.channel = new Backbone.Wreqr.Channel('modal');
diff --git a/bootstrap/modals/modal/controller.js b/bootstrap/modals/modal/controller.js
@@ -0,0 +1,19 @@
+Application.Modal.Controller = Marionette.Controller.extend({
+  initialize: function (options) {
+    this.container = options.container;
+    this.view = new Application.Modal.View();
+    this.container.show(this.view);
+
+    _.bindAll(this, 'openModal', 'closeModal');
+    Application.Modal.channel.commands.setHandler('open', this.openModal);
+    Application.Modal.channel.commands.setHandler('close', this.closeModal);
+  },
+
+  openModal: function (options) {
+    this.view.openModal(options);
+  },
+
+  closeModal: function (options) {
+    this.view.closeModal(options);
+  }
+});
diff --git a/bootstrap/modals/modal/view.js b/bootstrap/modals/modal/view.js
@@ -0,0 +1,47 @@
+Application.Modal.View = Marionette.Layout.extend({
+  template: '#modal-template',
+  className: 'modal fade',
+  attributes: {
+    'tabindex' : -1,
+    'role' : 'dialog'
+  },
+
+  regions: {
+    content: '.modal-content'
+  },
+
+  initialize: function (options) {
+    this.$el.modal({ show: false });
+  },
+
+  triggers: {
+    'show.bs.modal'   : { preventDefault: false, event: 'show:modal' },
+    'shown.bs.modal'  : { preventDefault: false, event: 'after:show:modal' },
+    'hide.bs.modal'   : { preventDefault: false, event: 'hide:modal' },
+    'hidden.bs.modal' : { preventDefault: false, event: 'after:hide:modal' }
+  },
+
+  openModal: function (options) {
+    this.once('after:show:modal', options.callback);
+    this.setupModal(options);
+    this.$el.modal('show');
+  },
+
+  closeModal: function (options) {
+    this.once('after:hide:modal', options.callback);
+    this.once('after:hide:modal', this.teardownModal);
+    this.$el.modal('hide');
+  },
+
+  setupModal: function (options) {
+    if (this.isShown) this.teardownModal();
+    this.content.show(options.view);
+    this.isShown = true;
+  },
+
+  teardownModal: function () {
+    if (!this.isShown) return;
+    this.content.close();
+    this.isShown = false;
+  }
+});
diff --git a/bower.json b/bower.json
@@ -16,7 +16,7 @@
   ],
   "devDependencies": {
     "jquery": "~2.1.0",
-    "marionette": "~1.6.4",
+    "marionette": "~1.8.5",
     "html5-reset": "~2.1.2"
   },
   "resolutions": {
@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "future-vars": "~0.2.1",
-    "backbone.wreqr-radio": "~1.2.0"
+    "backbone.wreqr-radio": "~1.2.0",
+    "bootstrap": "~3.1.1"
   }
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Application.Modal.channel = new Backbone.Wreqr.Channel('modal');