From 5cc7070c03e6427369d1395fd621e860317d1c50 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@codiqa.com>
Date: Fri, 4 Oct 2013 23:55:10 -0500
Subject: [PATCH] ANimationed action sheet!

---
 dist/ionic-angular.js                            | 16 +++++++++++-----
 dist/ionic-ios7.css                              |  3 ++-
 dist/ionic.css                                   |  5 ++++-
 dist/ionic.js                                    |  5 +++++
 js/ext/angular/src/directive/ionicActionSheet.js |  2 +-
 js/ext/angular/src/service/ionicActionSheet.js   | 14 ++++++++++----
 js/views/actionSheetView.js                      |  5 +++++
 scss/ionic/_actionSheet.scss                     |  3 +++
 scss/ionic/_animations.scss                      |  1 +
 9 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/dist/ionic-angular.js b/dist/ionic-angular.js
index b47a576f89..bff6b66e48 100644
--- a/dist/ionic-angular.js
+++ b/dist/ionic-angular.js
@@ -18,7 +18,8 @@ angular.module('ionic.service.actionSheet', ['ionic.service', 'ionic.ui.actionSh
       angular.extend(scope, opts);
 
       scope.cancel = function() {
-        scope.$destroy();
+        scope.sheet.hide();
+        //scope.$destroy();
         opts.cancel();
       }
 
@@ -26,7 +27,8 @@ angular.module('ionic.service.actionSheet', ['ionic.service', 'ionic.ui.actionSh
         // Check if the button click event returned true, which means
         // we can close the action sheet
         if((opts.buttonClicked && opts.buttonClicked(index)) === true) {
-          scope.$destroy();
+          scope.sheet.hide();
+          //scope.$destroy();
         }
       };
 
@@ -34,7 +36,8 @@ angular.module('ionic.service.actionSheet', ['ionic.service', 'ionic.ui.actionSh
         // Check if the destructive button click event returned true, which means
         // we can close the action sheet
         if((opts.destructiveButtonClicked && opts.destructiveButtonClicked()) === true) {
-          scope.$destroy();
+          scope.sheet.hide();
+          //scope.$destroy();
         }
       }
 
@@ -45,8 +48,11 @@ angular.module('ionic.service.actionSheet', ['ionic.service', 'ionic.ui.actionSh
 
       $document[0].body.appendChild(element[0]);
 
-      var sheet = ionic.views.ActionSheet({el: element[0] });
+      var sheet = new ionic.views.ActionSheet({el: element[0] });
       scope.sheet = sheet;
+
+      sheet.show();
+
       return sheet;
     }
   };
@@ -122,7 +128,7 @@ angular.module('ionic.ui.actionSheet', [])
         $element.remove();
       });
     },
-    template: '<div class="action-sheet">' +
+    template: '<div class="action-sheet slide-in-up">' +
                 '<div class="action-sheet-group">' +
                   '<div class="action-sheet-title" ng-if="titleText">{{titleText}}</div>' +
                   '<button class="button" ng-click="buttonClicked($index)" ng-repeat="button in buttons">{{button.text}}</button>' +
diff --git a/dist/ionic-ios7.css b/dist/ionic-ios7.css
index d5d72f69fb..ddc316d8ad 100644
--- a/dist/ionic-ios7.css
+++ b/dist/ionic-ios7.css
@@ -2262,7 +2262,8 @@ a.button {
   -webkit-transition: -webkit-transform 0.25s, opacity 0.25s;
   transition: -webkit-transform 0.25s, opacity 0.25s;
   -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); }
+  transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
+  -webkit-animation-fill-mode: forwards; }
 
 .slide-in-up.active {
   opacity: 1;
diff --git a/dist/ionic.css b/dist/ionic.css
index 585bb47ed9..61d06fbd1b 100644
--- a/dist/ionic.css
+++ b/dist/ionic.css
@@ -1172,6 +1172,8 @@ address {
   width: calc(100% - 30px);
   bottom: 0;
   left: 15px;
+  -webkit-transform: translate3d(0, 100%, 0);
+  transform: translate3d(0, 100%, 0);
   overflow: hidden; }
   .action-sheet .button {
     display: block;
@@ -2342,7 +2344,8 @@ a.button {
   -webkit-transition: -webkit-transform 0.25s, opacity 0.25s;
   transition: -webkit-transform 0.25s, opacity 0.25s;
   -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); }
+  transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
+  -webkit-animation-fill-mode: forwards; }
 
 .slide-in-up.active {
   opacity: 1;
diff --git a/dist/ionic.js b/dist/ionic.js
index f2f64732a3..a9382d468e 100644
--- a/dist/ionic.js
+++ b/dist/ionic.js
@@ -1743,9 +1743,14 @@ window.ionic = {
 
   ionic.views.ActionSheet.prototype = {
     show: function() {
+      // Force a reflow so the animation will actually run
+      this.el.offsetWidth;
+
       this.el.classList.add('active');
     },
     hide: function() {
+      // Force a reflow so the animation will actually run
+      this.el.offsetWidth;
       this.el.classList.remove('active');
     }
   };
diff --git a/js/ext/angular/src/directive/ionicActionSheet.js b/js/ext/angular/src/directive/ionicActionSheet.js
index 6e247d5c3e..f3cd3f5f3f 100644
--- a/js/ext/angular/src/directive/ionicActionSheet.js
+++ b/js/ext/angular/src/directive/ionicActionSheet.js
@@ -10,7 +10,7 @@ angular.module('ionic.ui.actionSheet', [])
         $element.remove();
       });
     },
-    template: '<div class="action-sheet">' +
+    template: '<div class="action-sheet slide-in-up">' +
                 '<div class="action-sheet-group">' +
                   '<div class="action-sheet-title" ng-if="titleText">{{titleText}}</div>' +
                   '<button class="button" ng-click="buttonClicked($index)" ng-repeat="button in buttons">{{button.text}}</button>' +
diff --git a/js/ext/angular/src/service/ionicActionSheet.js b/js/ext/angular/src/service/ionicActionSheet.js
index cc8d101e90..e0f684740d 100644
--- a/js/ext/angular/src/service/ionicActionSheet.js
+++ b/js/ext/angular/src/service/ionicActionSheet.js
@@ -16,7 +16,8 @@ angular.module('ionic.service.actionSheet', ['ionic.service', 'ionic.ui.actionSh
       angular.extend(scope, opts);
 
       scope.cancel = function() {
-        scope.$destroy();
+        scope.sheet.hide();
+        //scope.$destroy();
         opts.cancel();
       }
 
@@ -24,7 +25,8 @@ angular.module('ionic.service.actionSheet', ['ionic.service', 'ionic.ui.actionSh
         // Check if the button click event returned true, which means
         // we can close the action sheet
         if((opts.buttonClicked && opts.buttonClicked(index)) === true) {
-          scope.$destroy();
+          scope.sheet.hide();
+          //scope.$destroy();
         }
       };
 
@@ -32,7 +34,8 @@ angular.module('ionic.service.actionSheet', ['ionic.service', 'ionic.ui.actionSh
         // Check if the destructive button click event returned true, which means
         // we can close the action sheet
         if((opts.destructiveButtonClicked && opts.destructiveButtonClicked()) === true) {
-          scope.$destroy();
+          scope.sheet.hide();
+          //scope.$destroy();
         }
       }
 
@@ -43,8 +46,11 @@ angular.module('ionic.service.actionSheet', ['ionic.service', 'ionic.ui.actionSh
 
       $document[0].body.appendChild(element[0]);
 
-      var sheet = ionic.views.ActionSheet({el: element[0] });
+      var sheet = new ionic.views.ActionSheet({el: element[0] });
       scope.sheet = sheet;
+
+      sheet.show();
+
       return sheet;
     }
   };
diff --git a/js/views/actionSheetView.js b/js/views/actionSheetView.js
index 75900ba3d3..9b0a9c5039 100644
--- a/js/views/actionSheetView.js
+++ b/js/views/actionSheetView.js
@@ -11,9 +11,14 @@
 
   ionic.views.ActionSheet.prototype = {
     show: function() {
+      // Force a reflow so the animation will actually run
+      this.el.offsetWidth;
+
       this.el.classList.add('active');
     },
     hide: function() {
+      // Force a reflow so the animation will actually run
+      this.el.offsetWidth;
       this.el.classList.remove('active');
     }
   };
diff --git a/scss/ionic/_actionSheet.scss b/scss/ionic/_actionSheet.scss
index 7ed3129a61..1b50351f4f 100644
--- a/scss/ionic/_actionSheet.scss
+++ b/scss/ionic/_actionSheet.scss
@@ -8,6 +8,9 @@
   bottom: 0;
   left: 15px;
 
+ -webkit-transform: translate3d(0, 100%, 0);
+  transform: translate3d(0, 100%, 0);
+
   overflow: hidden;
 
 
diff --git a/scss/ionic/_animations.scss b/scss/ionic/_animations.scss
index 78b3856820..c138f0e2f1 100644
--- a/scss/ionic/_animations.scss
+++ b/scss/ionic/_animations.scss
@@ -10,6 +10,7 @@ $bezier-function: cubic-bezier(.1, .7, .1, 1);
   transition: -webkit-transform 0.25s, opacity 0.25s;
   -webkit-transition-timing-function: $bezier-function;
   transition-timing-function: $bezier-function;
+  -webkit-animation-fill-mode: forwards;
 }
 
 .slide-in-up.active {