marionette-modal 1.0.0.8

data/dist/marionette.modal.theme.css

@@ -0,0 +1,324 @@
+.bbm-wrapper {
+  background: rgba(0, 0, 0, 0.75);
+  -webkit-transition: background-color 0.3s; }
+
+.bbm-modal {
+  background: white;
+  box-shadow: 0 0px 6px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.9); }
+
+/* BLOCKS */
+.bbm-modal__topbar,
+.bbm-modal__bottombar {
+  padding: 0 30px; }
+
+.bbm-modal__topbar {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  margin-bottom: 30px; }
+  .bbm-modal__topbar > ul {
+    list-style: none;
+    text-align: center;
+    padding: 0;
+    margin: 0; }
+
+.bbm-modal__tab {
+  display: inline-block;
+  padding: 15px 10px; }
+  .bbm-modal__tab a {
+    font-size: 16px;
+    font-weight: bold;
+    color: #999999; }
+    .bbm-modal__tab a:hover, .bbm-modal__tab a.active {
+      color: #222222; }
+
+.bbm-modal__title {
+  padding: 20px 0 19px;
+  margin: 0;
+  font-weight: normal;
+  font-size: 22px;
+  line-height: 1em;
+  color: #312d3a; }
+
+.bbm-modal__section {
+  padding: 0 30px;
+  margin-top: 0px;
+  font-size: 16px;
+  line-height: 26px;
+  color: #575656; }
+  .bbm-modal__section p {
+    font-size: 16px;
+    line-height: 26px;
+    color: #575656; }
+    .bbm-modal__section p:last-child {
+      padding: 0;
+      margin-bottom: 0; }
+  .bbm-modal__section a {
+    color: #ff643c; }
+  .bbm-modal__section h3 {
+    margin: 0;
+    font-size: 20px;
+    line-height: 1em; }
+
+.bbm-modal__bottombar {
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 18px;
+  text-align: right;
+  margin-top: 30px; }
+
+/* MODULES */
+.bbm-group {
+  content: "";
+  display: table;
+  clear: both; }
+
+.bbm-button {
+  display: inline-block;
+  color: rgba(49, 45, 58, 0.8);
+  text-decoration: none;
+  font-size: 14px;
+  font-weight: 500;
+  position: relative;
+  line-height: 1em;
+  padding: 10px 14px;
+  border-radius: 3px;
+  background: #fcfcfc;
+  background-image: -o-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.15) 100%);
+  background-image: -moz-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.15) 100%);
+  background-image: -webkit-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.15) 100%);
+  background-image: -ms-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.15) 100%);
+  background-image: linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.15) 100%);
+  -moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.1), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2); }
+  .bbm-button.inactive {
+    opacity: 0.5;
+    pointer-events: none; }
+  .bbm-button:active {
+    background-image: -o-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.25) 100%);
+    background-image: -moz-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.25) 100%);
+    background-image: -webkit-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.25) 100%);
+    background-image: -ms-linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.25) 100%);
+    background-image: linear-gradient(rgba(70, 30, 170, 0) 0%, rgba(65, 61, 75, 0.25) 100%);
+    -moz-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
+    -webkit-box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2);
+    box-shadow: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.5), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.2); }
+
+/* ANIMATIONS */
+/* Open modal */
+@-webkit-keyframes bbm-open {
+  0% {
+    -webkit-transform: matrix(0.99126, 0, 0, 0.99126, 0, 43.8813);
+    opacity: 0.1259; }
+
+  4% {
+    -webkit-transform: matrix(0.99295, 0, 0, 0.99295, 0, 45.06809);
+    opacity: 0.29544; }
+
+  8% {
+    -webkit-transform: matrix(0.99467, 0, 0, 0.99467, 0, 46.26922);
+    opacity: 0.46703; }
+
+  12% {
+    -webkit-transform: matrix(0.99619, 0, 0, 0.99619, 0, 47.33355);
+    opacity: 0.61908; }
+
+  16% {
+    -webkit-transform: matrix(0.99743, 0, 0, 0.99743, 0, 48.19991);
+    opacity: 0.74284; }
+
+  20% {
+    -webkit-transform: matrix(0.99837, 0, 0, 0.99837, 0, 48.86067);
+    opacity: 0.83724; }
+
+  24% {
+    -webkit-transform: matrix(0.99905, 0, 0, 0.99905, 0, 49.33658);
+    opacity: 0.90523; }
+
+  28% {
+    -webkit-transform: matrix(0.99952, 0, 0, 0.99952, 0, 49.66049);
+    opacity: 0.9515; }
+
+  32% {
+    -webkit-transform: matrix(0.99981, 0, 0, 0.99981, 0, 49.8675);
+    opacity: 0.98107; }
+
+  36% {
+    -webkit-transform: matrix(0.99999, 0, 0, 0.99999, 0, 49.98966);
+    opacity: 0.99852; }
+
+  40% {
+    -webkit-transform: matrix(1.00008, 0, 0, 1.00008, 0, 50.05361);
+    opacity: 1.00766; }
+
+  44% {
+    -webkit-transform: matrix(1.00011, 0, 0, 1.00011, 0, 50.08);
+    opacity: 1.01143; }
+
+  48% {
+    -webkit-transform: matrix(1.00012, 0, 0, 1.00012, 0, 50.08394);
+    opacity: 1.01199; }
+
+  52% {
+    -webkit-transform: matrix(1.00011, 0, 0, 1.00011, 0, 50.07589);
+    opacity: 1.01084; }
+
+  56% {
+    -webkit-transform: matrix(1.00009, 0, 0, 1.00009, 0, 50.06265);
+    opacity: 1.00895; }
+
+  60% {
+    -webkit-transform: matrix(1.00007, 0, 0, 1.00007, 0, 50.04833);
+    opacity: 1.0069; }
+
+  64% {
+    -webkit-transform: matrix(1.00005, 0, 0, 1.00005, 0, 50.03518);
+    opacity: 1.00503; }
+
+  68% {
+    -webkit-transform: matrix(1.00004, 0, 0, 1.00004, 0, 50.02421);
+    opacity: 1.00346; }
+
+  72% {
+    -webkit-transform: matrix(1.00002, 0, 0, 1.00002, 0, 50.01567);
+    opacity: 1.00224; }
+
+  76% {
+    -webkit-transform: matrix(1.00001, 0, 0, 1.00001, 0, 50.00941);
+    opacity: 1.00134; }
+
+  80% {
+    -webkit-transform: matrix(1.00001, 0, 0, 1.00001, 0, 50.00506);
+    opacity: 1.00072; }
+
+  84% {
+    -webkit-transform: matrix(1, 0, 0, 1, 0, 50.00223);
+    opacity: 1.00032; }
+
+  88% {
+    -webkit-transform: matrix(1, 0, 0, 1, 0, 50.0005);
+    opacity: 1.00007; }
+
+  92% {
+    -webkit-transform: matrix(1, 0, 0, 1, 0, 49.99956);
+    opacity: 0.99994; }
+
+  96% {
+    -webkit-transform: matrix(1, 0, 0, 1, 0, 49.99913);
+    opacity: 0.99988; }
+
+  100% {
+    -webkit-transform: matrix(1, 0, 0, 1, 0, 50);
+    opacity: 1; } }
+
+.bbm-modal--open {
+  -webkit-animation-duration: 0.3s;
+  -webkit-animation-name: bbm-open;
+  -webkit-animation-timing-function: linear;
+  -webkit-animation-fill-mode: both;
+  -webkit-transform-origin: 50% 50%;
+  -webkit-backface-visibility: hidden; }
+
+/* Open a stacked modal */
+@-webkit-keyframes bbm-stacked {
+  0% {
+    -webkit-transform: matrix(0.99874, 0, 0, 0.99874, 0, 49.1187);
+    opacity: 0.93705; }
+
+  4% {
+    -webkit-transform: matrix(0.99705, 0, 0, 0.99705, 0, 47.93192);
+    opacity: 0.85228; }
+
+  8% {
+    -webkit-transform: matrix(0.99533, 0, 0, 0.99533, 0, 46.73078);
+    opacity: 0.76648; }
+
+  12% {
+    -webkit-transform: matrix(0.99381, 0, 0, 0.99381, 0, 45.66645);
+    opacity: 0.69046; }
+
+  16% {
+    -webkit-transform: matrix(0.99257, 0, 0, 0.99257, 0, 44.80009);
+    opacity: 0.62858; }
+
+  20% {
+    -webkit-transform: matrix(0.99163, 0, 0, 0.99163, 0, 44.13933);
+    opacity: 0.58138; }
+
+  24% {
+    -webkit-transform: matrix(0.99095, 0, 0, 0.99095, 0, 43.66342);
+    opacity: 0.54739; }
+
+  28% {
+    -webkit-transform: matrix(0.99049, 0, 0, 0.99049, 0, 43.33951);
+    opacity: 0.52425; }
+
+  32% {
+    -webkit-transform: matrix(0.99019, 0, 0, 0.99019, 0, 43.1325);
+    opacity: 0.50946; }
+
+  36% {
+    -webkit-transform: matrix(0.99002, 0, 0, 0.99002, 0, 43.01034);
+    opacity: 0.50074; }
+
+  40% {
+    -webkit-transform: matrix(0.98992, 0, 0, 0.98992, 0, 42.94639);
+    opacity: 0.49617; }
+
+  44% {
+    -webkit-transform: matrix(0.98989, 0, 0, 0.98989, 0, 42.92001);
+    opacity: 0.49429; }
+
+  48% {
+    -webkit-transform: matrix(0.98988, 0, 0, 0.98988, 0, 42.91606);
+    opacity: 0.494; }
+
+  52% {
+    -webkit-transform: matrix(0.98989, 0, 0, 0.98989, 0, 42.92411);
+    opacity: 0.49458; }
+
+  56% {
+    -webkit-transform: matrix(0.98991, 0, 0, 0.98991, 0, 42.93736);
+    opacity: 0.49553; }
+
+  60% {
+    -webkit-transform: matrix(0.98993, 0, 0, 0.98993, 0, 42.95167);
+    opacity: 0.49655; }
+
+  64% {
+    -webkit-transform: matrix(0.98995, 0, 0, 0.98995, 0, 42.96482);
+    opacity: 0.49749; }
+
+  68% {
+    -webkit-transform: matrix(0.98997, 0, 0, 0.98997, 0, 42.97579);
+    opacity: 0.49827; }
+
+  72% {
+    -webkit-transform: matrix(0.98998, 0, 0, 0.98998, 0, 42.98433);
+    opacity: 0.49888; }
+
+  76% {
+    -webkit-transform: matrix(0.98999, 0, 0, 0.98999, 0, 42.99059);
+    opacity: 0.49933; }
+
+  80% {
+    -webkit-transform: matrix(0.98999, 0, 0, 0.98999, 0, 42.99494);
+    opacity: 0.49964; }
+
+  84% {
+    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 42.99777);
+    opacity: 0.49984; }
+
+  88% {
+    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 42.9995);
+    opacity: 0.49996; }
+
+  92% {
+    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43.00044);
+    opacity: 0.50003; }
+
+  96% {
+    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43.00088);
+    opacity: 0.50006; }
+
+  100% {
+    -webkit-transform: matrix(0.99, 0, 0, 0.99, 0, 43);
+    opacity: 0.5; } }

data/examples/1_single_view.html

@@ -0,0 +1,71 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+
+
+<head>
+  <meta content="text/html;charset=UTF-8" http-equiv="Content-Type"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
+
+  <title>Single view modal</title>
+
+  <script type="text/javascript" src="vendor/jquery-1.9.1.js"></script>
+  <script type="text/javascript" src="vendor/underscore.js"></script>
+  <script type="text/javascript" src="vendor/backbone.js"></script>
+
+  <!-- Adding Backbone.Modal extension here -->
+  <link type="text/css" rel="stylesheet" href="vendor/backbone.modal.css">
+  <link type="text/css" rel="stylesheet" href="vendor/backbone.modal.theme.css">
+  <script type="text/javascript" src="vendor/backbone.modal.js"></script>
+
+  <!-- Custom style -->
+  <link type="text/css" rel="stylesheet" href="css/style.css">
+</head>
+
+
+<body>
+  <a href="#" class="open">Open modal</a>
+
+  <div class="app"></div>
+
+  <script type="text/template" id="modal-template">
+    <div class="bbm-modal__topbar">
+      <h3 class="bbm-modal__title">Backbone.Modal</h3>
+    </div>
+    <div class="bbm-modal__section">
+      <p>With Backbone.Modal you can create a modals in a few lines of code.</p>
+      <p>Some features are:</p>
+      <ul>
+        <li>Really flexible and easy to set up.</li>
+        <li>Default behaviors like ESC or clicking outside a modal.</li>
+        <li>Some awesome animations that make them feel robust.</li>
+        <li>Responsive and usable on mobile devices.</li>
+      </ul>
+    </div>
+    <div class="bbm-modal__bottombar">
+      <a href="#" class="bbm-button">Close</a>
+    </div>
+  </script>
+
+  <script>
+    jQuery(function($) {
+
+      // Create a modal view class
+      var Modal = Backbone.Modal.extend({
+        template: _.template($('#modal-template').html()),
+        cancelEl: '.bbm-button'
+      });
+
+
+      $('.open').on('click', function(){
+
+        // Render an instance of your modal
+        var modalView = new Modal();
+        $('.app').html(modalView.render().el);
+
+      });
+
+      $('.open').click()
+    });
+  </script>
+</body>
+</html>

data/examples/2_tab_based.html

@@ -0,0 +1,104 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+
+
+<head>
+  <meta content="text/html;charset=UTF-8" http-equiv="Content-Type"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
+
+  <title>Tab based modal</title>
+
+  <script type="text/javascript" src="vendor/jquery-1.9.1.js"></script>
+  <script type="text/javascript" src="vendor/underscore.js"></script>
+  <script type="text/javascript" src="vendor/backbone.js"></script>
+
+  <!-- Adding Backbone.Modal extension here -->
+  <link type="text/css" rel="stylesheet" href="vendor/backbone.modal.css">
+  <link type="text/css" rel="stylesheet" href="vendor/backbone.modal.theme.css">
+  <script type="text/javascript" src="vendor/backbone.modal.js"></script>
+
+  <!-- Custom style -->
+  <link type="text/css" rel="stylesheet" href="css/style.css">
+
+
+</head>
+
+<body>
+  <a href="#" class="open">Open modal</a>
+
+  <div class="app"></div>
+
+  <!-- The modal structure, with an container element that will contain all tabs -->
+  <script type="text/template" id="modal-template">
+    <div class="bbm-modal__topbar">
+      <ul>
+        <li class="bbm-modal__tab"><a href="#" id="tab1" class="active">General</a></li>
+        <li class="bbm-modal__tab"><a href="#" id="tab2">Account</a></li>
+      </ul>
+    </div>
+
+    <div class="my-container"></div>
+    <div class="bbm-modal__bottombar">
+      <a href="#" class="bbm-button">Done</a>
+    </div>
+  </script>
+
+  <!-- Tab 1 -->
+  <script type="text/template" id="modal-view1-template">
+    <div class="bbm-modal__section">
+      <h3>Tab based example</h3>
+      <p>It's also really easy to create a modal, with seperate views that you can control using tabs.</p>
+      <p>We're also using a default style, but you can overwrite anything you want.</p>
+    </div>
+  </script>
+
+  <!-- Tab 2 -->
+  <script type="text/template" id="modal-view2-template">
+    <div class="bbm-modal__section">
+      Your account details
+    </div>
+  </script>
+
+  <script>
+    jQuery(function($) {
+
+      // Create a modal view class
+      var Modal = Backbone.Modal.extend({
+        template: _.template($('#modal-template').html()),
+
+        viewContainer: '.my-container',
+        submitEl: '.bbm-button',
+
+        views: {
+          'click #tab1': {
+            name: 'tab1',
+            view: _.template($('#modal-view1-template').html()),
+            onActive: 'setActive'
+          },
+          'click #tab2': {
+            name: 'tab2',
+            view: _.template($('#modal-view2-template').html()),
+            onActive: 'setActive'
+          }
+        },
+
+        setActive: function(options) {
+          this.$('.bbm-modal__tab a').removeClass('active');
+          this.$('#'+options.name).addClass('active');
+        }
+      });
+
+      $('.open').on('click', function(){
+
+        // Render an instance of your modal
+        var modalView = new Modal();
+        $('.app').html(modalView.render().el);
+
+      });
+
+      $('.open').click()
+
+    });
+  </script>
+</body>
+</html>

data/examples/3_stacked_modal_with_marionette.html

@@ -0,0 +1,105 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
+<head>
+    <meta content="text/html;charset=UTF-8" http-equiv="Content-Type"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
+    <title>Stacked modal with Marionette</title>
+
+    <script type="text/javascript" src="vendor/jquery-1.9.1.js"></script>
+    <script type="text/javascript" src="vendor/underscore.js"></script>
+    <script type="text/javascript" src="vendor/backbone.js"></script>
+    <script type="text/javascript" src="vendor/marionette.js"></script>
+
+    <!-- Adding Backbone.Modal extension here -->
+    <link type="text/css" rel="stylesheet" href="vendor/backbone.modal.css">
+    <link type="text/css" rel="stylesheet" href="vendor/backbone.modal.theme.css">
+
+    <script type="text/javascript" src="vendor/backbone.modal.js"></script>
+    <script type="text/javascript" src="vendor/backbone.marionette.modals.js"></script>
+
+    <!-- Custom style -->
+    <link type="text/css" rel="stylesheet" href="css/style.css">
+
+</head>
+<body>
+  <a href="#" class="open-1">Open modal</a>
+
+  <div class="app"></div>
+
+  <!-- Region container -->
+  <script type="text/template" id="modals-template">
+    <div class="modals-container"></div>
+  </script>
+
+  <!-- Modal templates  -->
+  <script type="text/template" id="modal-template1">
+    <div class="bbm-modal__topbar">
+      <h3 class="bbm-modal__title">Stacked modals with Backbone.Marionette</h3>
+    </div>
+    <div class="bbm-modal__section">
+      <p>Go ahead and open the <a href="#" class="open-2">second modal</a>.</p>
+    </div>
+    <div class="bbm-modal__bottombar">
+      <a href="#" class="bbm-button">Done</a>
+    </div>
+  </script>
+
+  <script type="text/template" id="modal-template2">
+    <div class="bbm-modal__topbar">
+      <h3 class="bbm-modal__title">The stacked modal</h3>
+    </div>
+    <div class="bbm-modal__section">
+      <p>By using Backbone.Marionette, your code stays simple and clean. So now we can create stacked modals, without doing any complex work.</p>
+    </div>
+    <div class="bbm-modal__bottombar">
+      <a href="#" class="bbm-button">Done</a>
+    </div>
+  </script>
+
+  <script>
+    jQuery(function($) {
+
+      // Create a layout class
+      var Layout = Backbone.Marionette.Layout.extend({
+        template: _.template($('#modals-template').html()),
+        regions: {
+          modals: {
+            selector:   '.modals-container',
+            regionType: Backbone.Marionette.Modals
+          }
+        }
+      });
+
+      // Create a modal view class
+      var Modal1 = Backbone.Modal.extend({
+        template: _.template($('#modal-template1').html()),
+        submitEl: '.bbm-button',
+        events: {
+          'click .open-2': 'openModal'
+        },
+        openModal: function(e) {
+          e.preventDefault();
+           myLayout.modals.show(new Modal2());
+        }
+      });
+
+      var Modal2 = Backbone.Modal.extend({
+        template: _.template($('#modal-template2').html()),
+        submitEl: '.bbm-button'
+      });
+
+      // Render the layout
+      var myLayout = new Layout();
+      $('body').append(myLayout.render().el);
+
+      // Render modals on click
+      $('body').on('click', '.open-1', function(){
+         myLayout.modals.show(new Modal1());
+      });
+
+      $('.open-1').click()
+
+    });
+  </script>
+</body>
+</html>