Fixed #79

dist/css/ionic.css

@@ -2876,6 +2876,8 @@ a.subdued‎ {
   position: fixed;
   z-index: 10;
   top: 0;
+  opacity: 0;
+  -webkit-transform: translate3d(0, 100%, 0);
   width: 100%;
   min-height: 100%;
   overflow: hidden;
@@ -4426,69 +4428,6 @@ a.button {
   height: 100%;
   background-color: white; }
 
-.slide-in-up {
-  opacity: 0;
-  -webkit-transform: translate3d(0, 100%, 0);
-  transform: translate3d(0, 100%, 0);
-  -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-  transition: -webkit-transform 0.4s, opacity 0.1s;
-  -webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
-  transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
-  -webkit-animation-fill-mode: forwards; }
-
-.slide-in-up.active {
-  opacity: 1;
-  -webkit-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0); }
-
-@-webkit-keyframes fadeOut {
-  from {
-    opacity: 1; }
-
-  to {
-    opacity: 0; } }
-
-@keyframes fadeOut {
-  from {
-    opacity: 1; }
-
-  to {
-    opacity: 0; } }
-
-@-webkit-keyframes fadeIn {
-  from {
-    opacity: 0; }
-
-  to {
-    opacity: 1; } }
-
-@keyframes fadeIn {
-  from {
-    opacity: 0; }
-
-  to {
-    opacity: 1; } }
-
-.fade-in {
-  -webkit-animation: fadeOut 0.3s;
-  animation: fadeOut 0.3s; }
-  .fade-in.active {
-    -webkit-animation: fadeIn 0.3s;
-    animation: fadeIn 0.3s; }
-
-@-moz-keyframes spin {
-  100% {
-    -moz-transform: rotate(360deg); } }
-
-@-webkit-keyframes spin {
-  100% {
-    -webkit-transform: rotate(360deg); } }
-
-@keyframes spin {
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg); } }
-
 @-webkit-keyframes slideInLeft {
   0% {
     -webkit-transform: translate3d(100%, 0, 0); }
@@ -4561,6 +4500,106 @@ a.button {
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-name: slideInRight; }
 
+@-webkit-keyframes slideInUp {
+  0% {
+    -webkit-transform: translate3d(0, 100%, 0);
+    opacity: 0; }
+
+  100% {
+    -webkit-transform: translate3d(0, 0, 0);
+    opacity: 1; } }
+
+@-webkit-keyframes slideOutUp {
+  0% {
+    -webkit-transform: translate3d(0, 0, 0);
+    opacity: 1; }
+
+  100% {
+    -webkit-transform: translate3d(0, 100%, 0);
+    opacity: 0; } }
+
+.slide-in-up {
+  opacity: 1;
+  -webkit-transform: translate3d(0, 0%, 0); }
+  .slide-in-up.ng-enter, .slide-in-up .ng-enter {
+    opacity: 0;
+    -webkit-transform: translate3d(0, 100%, 0);
+    -webkit-animation-duration: 400ms;
+    -webkit-animation-fill-mode: both;
+    -webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); }
+  .slide-in-up.ng-enter-active, .slide-in-up .ng-enter-active {
+    -webkit-animation-name: slideInUp; }
+  .slide-in-up.ng-leave, .slide-in-up .ng-leave {
+    -webkit-animation-duration: 400ms;
+    -webkit-animation-fill-mode: both;
+    -webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); }
+  .slide-in-up.ng-leave-active, .slide-in-up .ng-leave {
+    -webkit-animation-name: slideOutUp; }
+
+.slide-in-up-add {
+  -webkit-animation-duration: 400ms;
+  -webkit-animation-fill-mode: both;
+  -webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); }
+
+.slide-in-up-add-active {
+  -webkit-animation-name: slideInUp; }
+
+.slide-in-up-remove {
+  -webkit-animation-duration: 400ms;
+  -webkit-animation-fill-mode: forwards;
+  -webkit-animation-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); }
+
+.slide-in-up-remove-active {
+  -webkit-animation-name: slideOutUp; }
+
+@-webkit-keyframes fadeOut {
+  from {
+    opacity: 1; }
+
+  to {
+    opacity: 0; } }
+
+@keyframes fadeOut {
+  from {
+    opacity: 1; }
+
+  to {
+    opacity: 0; } }
+
+@-webkit-keyframes fadeIn {
+  from {
+    opacity: 0; }
+
+  to {
+    opacity: 1; } }
+
+@keyframes fadeIn {
+  from {
+    opacity: 0; }
+
+  to {
+    opacity: 1; } }
+
+.fade-in {
+  -webkit-animation: fadeOut 0.3s;
+  animation: fadeOut 0.3s; }
+  .fade-in.active {
+    -webkit-animation: fadeIn 0.3s;
+    animation: fadeIn 0.3s; }
+
+@-moz-keyframes spin {
+  100% {
+    -moz-transform: rotate(360deg); } }
+
+@-webkit-keyframes spin {
+  100% {
+    -webkit-transform: rotate(360deg); } }
+
+@keyframes spin {
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg); } }
+
 /** 
  * Nav controllers and header bar animations
  */

dist/js/ionic-angular.js

@@ -154,7 +154,35 @@ angular.module('ionic.service.loading', ['ionic.ui.loading'])
 angular.module('ionic.service.modal', ['ionic.service.templateLoad'])
 
 
-.factory('Modal', ['$rootScope', '$document', '$compile', 'TemplateLoader', function($rootScope, $document, $compile, TemplateLoader) {
+.factory('Modal', ['$rootScope', '$document', '$compile', '$animate', 'TemplateLoader', function($rootScope, $document, $compile, $animate, TemplateLoader) {
+  var ModalView = ionic.views.Modal.inherit({
+    initialize: function(opts) {
+      ionic.views.Modal.prototype.initialize.call(this, opts);
+      this.animation = opts.animation;
+    },
+    // Show the modal
+    show: function() {
+      var element = angular.element(this.el);
+      if(!element.parent().length) {
+        $animate.enter(element, angular.element($document[0].body));
+      } 
+      $animate.addClass(element, this.animation);
+    },
+    // Hide the modal
+    hide: function() {
+      var element = angular.element(this.el);
+      $animate.removeClass(element, this.animation);
+    },
+
+    // Remove and destroy the modal scope
+    remove: function() {
+      var element = angular.element(this.el);
+      $animate.leave(angular.element(this.el), function() {
+        scope.$destroy();
+      });
+    }
+  });
+
   return {
     /**
      * Load a modal with the given template string.
@@ -162,33 +190,34 @@ angular.module('ionic.service.modal', ['ionic.service.templateLoad'])
      * A new isolated scope will be created for the 
      * modal and the new element will be appended into the body.
      */
-    fromTemplate: function(templateString, $scope) {
-      // Create a new isolated scope for the modal
-      var scope = $scope && $scope.$new() || $rootScope.$new(true);
+    fromTemplate: function(templateString, options) {
+      options = options || {};
+      // Create a new scope for the modal
+      var scope = options.scope && options.scope.$new() || $rootScope.$new(true);
 
       // Compile the template
       var element = $compile(templateString)(scope);
-      $document[0].body.appendChild(element[0]);
 
-      var modal = new ionic.views.Modal({el: element[0] });
-      scope.modal = modal;
+      options.el = element[0];
+      var modal = new ModalView(options);
       return modal;
     },
-    fromTemplateUrl: function(url, cb, $scope) {
+    fromTemplateUrl: function(url, cb, options) {
       TemplateLoader.load(url).then(function(templateString) {
-        // Create a new isolated scope for the modal
-        var scope = $scope && $scope.$new() || $rootScope.$new(true);
+        options = options || {};
+
+        // Create a new scope for the modal
+        var scope = options.scope && options.scope.$new() || $rootScope.$new(true);
 
         // Compile the template
         var element = $compile(templateString)(scope);
-        $document[0].body.appendChild(element[0]);
 
-        var modal = new ionic.views.Modal({ el: element[0] });
-        scope.modal = modal;
+        options.el = element[0];
+        var modal = new ModalView(options);
 
         cb(modal);
       });
-    }
+    },
   };
 }]);
 ;

dist/js/ionic.js

@@ -3724,18 +3724,18 @@ window.ionic = {
 ;
 (function(ionic) {
 'use strict';
-  ionic.views.Modal = function(opts) {
-    this.el = opts.el;
-  };
 
-  ionic.views.Modal.prototype = {
+  ionic.views.Modal = ionic.views.View.inherit({
+    initialize: function(opts) {
+      this.el = opts.el;
+    },
     show: function() {
       this.el.classList.add('active');
     },
     hide: function() {
       this.el.classList.remove('active');
     }
-  };
+  });
 
 })(ionic);
 ;

js/ext/angular/src/service/ionicModal.js

@@ -1,7 +1,35 @@
 angular.module('ionic.service.modal', ['ionic.service.templateLoad'])
 
 
-.factory('Modal', ['$rootScope', '$document', '$compile', 'TemplateLoader', function($rootScope, $document, $compile, TemplateLoader) {
+.factory('Modal', ['$rootScope', '$document', '$compile', '$animate', 'TemplateLoader', function($rootScope, $document, $compile, $animate, TemplateLoader) {
+  var ModalView = ionic.views.Modal.inherit({
+    initialize: function(opts) {
+      ionic.views.Modal.prototype.initialize.call(this, opts);
+      this.animation = opts.animation;
+    },
+    // Show the modal
+    show: function() {
+      var element = angular.element(this.el);
+      if(!element.parent().length) {
+        $animate.enter(element, angular.element($document[0].body));
+      } 
+      $animate.addClass(element, this.animation);
+    },
+    // Hide the modal
+    hide: function() {
+      var element = angular.element(this.el);
+      $animate.removeClass(element, this.animation);
+    },
+
+    // Remove and destroy the modal scope
+    remove: function() {
+      var element = angular.element(this.el);
+      $animate.leave(angular.element(this.el), function() {
+        scope.$destroy();
+      });
+    }
+  });
+
   return {
     /**
      * Load a modal with the given template string.
@@ -9,32 +37,33 @@ angular.module('ionic.service.modal', ['ionic.service.templateLoad'])
      * A new isolated scope will be created for the 
      * modal and the new element will be appended into the body.
      */
-    fromTemplate: function(templateString, $scope) {
-      // Create a new isolated scope for the modal
-      var scope = $scope && $scope.$new() || $rootScope.$new(true);
+    fromTemplate: function(templateString, options) {
+      options = options || {};
+      // Create a new scope for the modal
+      var scope = options.scope && options.scope.$new() || $rootScope.$new(true);
 
       // Compile the template
       var element = $compile(templateString)(scope);
-      $document[0].body.appendChild(element[0]);
 
-      var modal = new ionic.views.Modal({el: element[0] });
-      scope.modal = modal;
+      options.el = element[0];
+      var modal = new ModalView(options);
       return modal;
     },
-    fromTemplateUrl: function(url, cb, $scope) {
+    fromTemplateUrl: function(url, cb, options) {
       TemplateLoader.load(url).then(function(templateString) {
-        // Create a new isolated scope for the modal
-        var scope = $scope && $scope.$new() || $rootScope.$new(true);
+        options = options || {};
+
+        // Create a new scope for the modal
+        var scope = options.scope && options.scope.$new() || $rootScope.$new(true);
 
         // Compile the template
         var element = $compile(templateString)(scope);
-        $document[0].body.appendChild(element[0]);
 
-        var modal = new ionic.views.Modal({ el: element[0] });
-        scope.modal = modal;
+        options.el = element[0];
+        var modal = new ModalView(options);
 
         cb(modal);
       });
-    }
+    },
   };
 }]);

js/ext/angular/test/modal.html

@@ -0,0 +1,55 @@
+<html ng-app="modalTest">
+  <head>
+    <meta charset="utf-8">
+    <title>Modal</title>
+
+    <!-- Sets initial viewport load and disables zooming  -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
+    <link rel="stylesheet" href="../../../../dist/css/ionic.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-touch.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-animate.js"></script>
+  </head>
+  <body>
+    <content has-header="true" ng-controller="ModalCtrl">
+      <button class="button button-primary" ng-click="openModal()">Open</button>
+    </content>
+
+    <script id="modal.html" type="text/ng-template">
+      <div class="modal">
+        <header class="bar bar-header bar-secondary">
+          <h1 class="title">Modal</h1>
+          <button class="button button-clear button-primary" ng-click="closeModal()">Cancel</button>
+        </header>
+        <content has-header="true">
+          Realllllyyy long content
+          <div style="height: 2000px; background-color: red;"></div>
+        </content>
+      </div>
+    </script>
+
+    <script src="../../../../dist/js/ionic.js"></script>
+    <script src="../../../../dist/js/ionic-angular.js"></script>
+    <script>
+      angular.module('modalTest', ['ionic', 'ngAnimate'])
+
+      .controller('ModalCtrl', function($scope, Modal) {
+        Modal.fromTemplateUrl('modal.html', function(modal) {
+          $scope.modal = modal;
+        }, {
+          scope: $scope,
+          animation: 'slide-in-up'
+        });
+
+        $scope.openModal = function() {
+          $scope.modal.show();
+        };
+        $scope.closeModal = function() {
+          $scope.modal.hide();
+        };
+      });
+    </script>
+  </body>
+</html>
+

js/views/modalView.js

@@ -1,16 +1,16 @@
 (function(ionic) {
 'use strict';
-  ionic.views.Modal = function(opts) {
-    this.el = opts.el;
-  };
 
-  ionic.views.Modal.prototype = {
+  ionic.views.Modal = ionic.views.View.inherit({
+    initialize: function(opts) {
+      this.el = opts.el;
+    },
     show: function() {
       this.el.classList.add('active');
     },
     hide: function() {
       this.el.classList.remove('active');
     }
-  };
+  });
 
 })(ionic);

scss/ionic/_animations.scss

@@ -1,63 +0,0 @@
-$bezier-function: cubic-bezier(.1, .7, .1, 1);
- 
-.slide-in-up {
-  // Start hidden
-  opacity: 0;
-  // Start it down low
- -webkit-transform: translate3d(0, 100%, 0);
-  transform: translate3d(0, 100%, 0);
-
-  -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-  transition: -webkit-transform 0.4s, opacity 0.1s;
-
-  -webkit-transition-timing-function: $bezier-function;
-  transition-timing-function: $bezier-function;
-  
-  -webkit-animation-fill-mode: forwards;
-}
-
-.slide-in-up.active {
-    opacity: 1;
-   -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-}
-
-@-webkit-keyframes fadeOut {
-  from { opacity: 1; }
-  to { opacity: 0; }
-}
-@keyframes fadeOut {
-  from { opacity: 1; }
-  to { opacity: 0; }
-}
-
-@-webkit-keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-.fade-in {
-  -webkit-animation: fadeOut 0.3s;
-  animation: fadeOut 0.3s;
-  &.active {
-    -webkit-animation: fadeIn 0.3s;
-    animation: fadeIn 0.3s;
-  }
-}
-
-@-moz-keyframes spin { 
-  100% { -moz-transform: rotate(360deg); } 
-}
-@-webkit-keyframes spin { 
-  100% { -webkit-transform: rotate(360deg); } 
-}
-@keyframes spin { 
-  100% { 
-    -webkit-transform: rotate(360deg); 
-    transform:rotate(360deg); 
-  } 
-}

scss/ionic/_modal.scss

@@ -9,6 +9,9 @@
 
   top: 0;
 
+  opacity: 0;
+  -webkit-transform: translate3d(0,100%,0);
+
   width: 100%;
   min-height: 100%;
 

scss/ionic/animations/_simple.scss

@@ -94,3 +94,114 @@
     -webkit-animation-name: slideInRight;
   }
 }
+
+$slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
+@-webkit-keyframes slideInUp {
+  0% {
+    -webkit-transform: translate3d(0, 100%, 0);
+    opacity: 0;
+  }
+  100% {
+    -webkit-transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+@-webkit-keyframes slideOutUp {
+  0% {
+    -webkit-transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  100% {
+    -webkit-transform: translate3d(0, 100%, 0);
+    opacity: 0;
+  }
+}
+
+.slide-in-up {
+  opacity: 1;
+  // Start it down low
+  -webkit-transform: translate3d(0, 0%, 0);
+
+  &.ng-enter, .ng-enter {
+    // Start hidden
+    opacity: 0;
+    // Start it down low
+    -webkit-transform: translate3d(0, 100%, 0);
+
+    -webkit-animation-duration: 400ms;
+    -webkit-animation-fill-mode: both;
+    -webkit-animation-timing-function: $slide-in-up-function;
+  }
+
+  &.ng-enter-active, .ng-enter-active {
+    -webkit-animation-name: slideInUp;
+  }
+
+  &.ng-leave, .ng-leave {
+    -webkit-animation-duration: 400ms;
+    -webkit-animation-fill-mode: both;
+    -webkit-animation-timing-function: $slide-in-up-function;
+  }
+
+  &.ng-leave-active, .ng-leave {
+    -webkit-animation-name: slideOutUp;
+  }
+}
+
+.slide-in-up-add {
+  -webkit-animation-duration: 400ms;
+  -webkit-animation-fill-mode: both;
+  -webkit-animation-timing-function: $slide-in-up-function;
+}
+.slide-in-up-add-active {
+  -webkit-animation-name: slideInUp;
+}
+
+.slide-in-up-remove {
+  -webkit-animation-duration: 400ms;
+  -webkit-animation-fill-mode: forwards;
+  -webkit-animation-timing-function: $slide-in-up-function;
+}
+.slide-in-up-remove-active {
+  -webkit-animation-name: slideOutUp;
+}
+
+@-webkit-keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+@-webkit-keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.fade-in {
+  -webkit-animation: fadeOut 0.3s;
+  animation: fadeOut 0.3s;
+  &.active {
+    -webkit-animation: fadeIn 0.3s;
+    animation: fadeIn 0.3s;
+  }
+}
+
+@-moz-keyframes spin { 
+  100% { -moz-transform: rotate(360deg); } 
+}
+@-webkit-keyframes spin { 
+  100% { -webkit-transform: rotate(360deg); } 
+}
+@keyframes spin { 
+  100% { 
+    -webkit-transform: rotate(360deg); 
+    transform:rotate(360deg); 
+  } 
+}

scss/ionic/ionic.scss

@@ -54,9 +54,7 @@
   "nav",
 
   // Animations
-  "animations",
-
-  "animations/_simple",
+  "animations/simple",
   "animations/bar_ios7",
 
   // Util

test/modals.html

@@ -5,8 +5,7 @@
 
     <!-- Sets initial viewport load and disables zooming  -->
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
-    <link href="../dist/ionicons.css" rel="stylesheet">
-    <link href="../dist/ionic.css" rel="stylesheet">
+    <link href="../dist/css/ionic.css" rel="stylesheet">
   </head>
   <body>
 
@@ -58,7 +57,6 @@
       }, closer);
     </script>
     
-    <script src="../dist/ionic.js"></script>
-    <script src="../dist/ionic-simple.js"></script>
+    <script src="../dist/js/ionic.js"></script>
   </body>
 </html>