From a3c3c78470c03f9ee56ce796d1aca4925368b73b Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Wed, 9 Oct 2013 21:00:06 -0500
Subject: [PATCH] List demo with animations!

---
 dist/ionic-angular.js                     | 18 ++++--
 dist/ionic-ios7.css                       |  2 +-
 dist/ionic.css                            |  2 +-
 js/ext/angular/src/directive/ionicList.js | 18 ++++--
 js/ext/angular/test/list.html             | 67 ++++++++++++++---------
 scss/ionic/_listview.scss                 |  2 +-
 6 files changed, 70 insertions(+), 39 deletions(-)

diff --git a/dist/ionic-angular.js b/dist/ionic-angular.js
index b8786f532b..f568acea58 100644
--- a/dist/ionic-angular.js
+++ b/dist/ionic-angular.js
@@ -180,24 +180,27 @@ angular.module('ionic.ui.content', [])
   }
 })
 ;
-angular.module('ionic.ui.list', ['ionic.service'])
+angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
 
 .directive('listItem', function() {
   return {
     restrict: 'E',
     replace: true,
     transclude: true,
-    template:   '<li class="list-item">' +
+    template:   '<li class="list-item">' + 
                 ' <div class="list-item-edit" ng-if="item.canDelete">' +
                 '   <button class="button button-icon"><i class="icon-minus-sign"></i></button>' +
                 ' </div>' +
                 ' <div class="list-item-content" ng-transclude>' +
                 ' </div>' +
                 ' <div class="list-item-buttons" ng-if="item.canSwipe">' +
-                '   <button class="button" ng-class="button.type" ng-repeat="button in item.buttons">{{button.text}}</button>' +
+                '   <button ng-click="buttonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in item.buttons">{{button.text}}</button>' +
                 ' </div>' +
                 '</li>',
     link: function($scope, $element, $attr) {
+      $scope.buttonClicked = function(button) {
+        button.buttonClicked && button.buttonClicked($scope.item);
+      }
     }
   }
 })
@@ -209,10 +212,11 @@ angular.module('ionic.ui.list', ['ionic.service'])
     transclude: true,
     scope: {
       isEditing: '=',
-      items: '='
+      items: '=',
+      animation: '='
     },
     template: '<ul class="list" ng-class="{\'list-editing\': isEditing}">' +
-                '<list-item ng-repeat="item in items" canDelete="item.canDelete" canSwipe="item.canSwipe">' +
+                '<list-item ng-repeat="item in items | filter:{hide:\'false\'}" canDelete="item.canDelete" canSwipe="item.canSwipe" animation="my-repeat-animation">' +
                 ' {{item.text}}' +
                 ' <i class="{{item.icon}}" ng-if="item.icon"></i>' + 
                 '</list-item>' + 
@@ -221,6 +225,10 @@ angular.module('ionic.ui.list', ['ionic.service'])
       return function($scope, $element, $attr) {
         var lv = new ionic.views.List({el: $element[0]});
 
+        if(attr.animation) {
+          $element.addClass(attr.animation);
+        }
+
         $element.append(transclude($scope));
       }
     }
diff --git a/dist/ionic-ios7.css b/dist/ionic-ios7.css
index e678c6c001..f7501c1f6e 100644
--- a/dist/ionic-ios7.css
+++ b/dist/ionic-ios7.css
@@ -1073,7 +1073,7 @@ a.list-item {
   background-color: #fff;
   z-index: 1;
   padding: 15px 15px;
-  -webkit-transition: left 0.2s ease-in-out; }
+  -webkit-transition: left 0.2s ease-in-out, right 0.2s ease-in-out; }
   .list-item-content > i:last-child {
     float: right; }
 
diff --git a/dist/ionic.css b/dist/ionic.css
index 99038b4791..820af4798d 100644
--- a/dist/ionic.css
+++ b/dist/ionic.css
@@ -1161,7 +1161,7 @@ a.list-item {
   background-color: #fff;
   z-index: 1;
   padding: 15px 15px;
-  -webkit-transition: left 0.2s ease-in-out; }
+  -webkit-transition: left 0.2s ease-in-out, right 0.2s ease-in-out; }
   .list-item-content > i:last-child {
     float: right; }
 
diff --git a/js/ext/angular/src/directive/ionicList.js b/js/ext/angular/src/directive/ionicList.js
index 605028884c..49304e9cf0 100644
--- a/js/ext/angular/src/directive/ionicList.js
+++ b/js/ext/angular/src/directive/ionicList.js
@@ -1,21 +1,24 @@
-angular.module('ionic.ui.list', ['ionic.service'])
+angular.module('ionic.ui.list', ['ionic.service', 'ngAnimate'])
 
 .directive('listItem', function() {
   return {
     restrict: 'E',
     replace: true,
     transclude: true,
-    template:   '<li class="list-item">' +
+    template:   '<li class="list-item">' + 
                 ' <div class="list-item-edit" ng-if="item.canDelete">' +
                 '   <button class="button button-icon"><i class="icon-minus-sign"></i></button>' +
                 ' </div>' +
                 ' <div class="list-item-content" ng-transclude>' +
                 ' </div>' +
                 ' <div class="list-item-buttons" ng-if="item.canSwipe">' +
-                '   <button class="button" ng-class="button.type" ng-repeat="button in item.buttons">{{button.text}}</button>' +
+                '   <button ng-click="buttonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in item.buttons">{{button.text}}</button>' +
                 ' </div>' +
                 '</li>',
     link: function($scope, $element, $attr) {
+      $scope.buttonClicked = function(button) {
+        button.buttonClicked && button.buttonClicked($scope.item);
+      }
     }
   }
 })
@@ -27,10 +30,11 @@ angular.module('ionic.ui.list', ['ionic.service'])
     transclude: true,
     scope: {
       isEditing: '=',
-      items: '='
+      items: '=',
+      animation: '='
     },
     template: '<ul class="list" ng-class="{\'list-editing\': isEditing}">' +
-                '<list-item ng-repeat="item in items" canDelete="item.canDelete" canSwipe="item.canSwipe">' +
+                '<list-item ng-repeat="item in items | filter:{hide:\'false\'}" canDelete="item.canDelete" canSwipe="item.canSwipe" animation="my-repeat-animation">' +
                 ' {{item.text}}' +
                 ' <i class="{{item.icon}}" ng-if="item.icon"></i>' + 
                 '</list-item>' + 
@@ -39,6 +43,10 @@ angular.module('ionic.ui.list', ['ionic.service'])
       return function($scope, $element, $attr) {
         var lv = new ionic.views.List({el: $element[0]});
 
+        if(attr.animation) {
+          $element.addClass(attr.animation);
+        }
+
         $element.append(transclude($scope));
       }
     }
diff --git a/js/ext/angular/test/list.html b/js/ext/angular/test/list.html
index f278d85add..844ccb5a82 100644
--- a/js/ext/angular/test/list.html
+++ b/js/ext/angular/test/list.html
@@ -11,30 +11,39 @@
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-touch.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.js"></script>
     <style>
-      .reveal-animation {
-        /*
-        -webkit-transform: translate3d(0%, 0, 0);
-                transform: translate3d(0%, 0, 0);
+.my-repeat-animation > .ng-enter, 
+.my-repeat-animation > .ng-leave, 
+.my-repeat-animation > .ng-move {
+  -webkit-transition: 0.2s linear all;
+  transition: 0.2s linear all;
+  position:relative;
+}
+
+.my-repeat-animation > .ng-enter {
+  left:-10px;
+  opacity:0;
+}
+.my-repeat-animation > .ng-enter.ng-enter-active {
+  left:0;
+  opacity:1;
+}
+
+.my-repeat-animation > .ng-leave {
+  left:0;
+  opacity:1;
+}
+.my-repeat-animation > .ng-leave.ng-leave-active {
+  left:-10px;
+  opacity:0;
+}
+
+.my-repeat-animation > .ng-move {
+  opacity:0.5;
+}
+.my-repeat-animation > .ng-move.ng-move-active {
+  opacity:1;
+}
 
-       -webkit-transition: -webkit-transform 1s ease-in-out;
-               transition:         transform 1s ease-in-out;
-        */
-      }
-      .reveal-animation.ng-enter {
-        -webkit-transition: .2s ease-in-out all;
-        -webkit-transform:translate3d(100%,0,0) ;
-      }
-      .reveal-animation.ng-enter-active {
-        -webkit-transform:translate3d(0,0,0) ;
-      }
-      .reveal-animation.ng-leave {
-        -webkit-transition: .2s ease-in-out all;
-        -webkit-transform:translate3d(0%,0,0);
-      }
-      .reveal-animation.ng-leave-active {
-        -webkit-transition: .2s ease-in-out all;
-        -webkit-transform:translate3d(-100%,0,0);
-      }
     </style>
 
   </head>
@@ -73,7 +82,7 @@
           </div>
         </li>
       </list>
-      <list items="items" is-editing="isEditingItems">
+      <list items="items" is-editing="isEditingItems" animation="my-repeat-animation">
       </list>
       <button ng-click="edit()" class="button button-success">Edit</button>
     </content>
@@ -81,7 +90,7 @@
     <script src="../../../../dist/ionic.js"></script>
     <script src="../../../../dist/ionic-angular.js"></script>
     <script>
-      angular.module('navTest', ['ionic.ui.list'])
+      angular.module('navTest', ['ionic.ui.list', 'ngAnimate'])
 
       .controller('TestCtrl', function($scope) {
         $scope.items = [
@@ -90,9 +99,15 @@
             canDelete: true,
             canSwipe: true,
             icon: 'icon-chevron-right',
+            hide: false,
             buttons: [{
               text: 'Kill',
-              type: 'button-danger'
+              type: 'button-danger',
+              buttonClicked: function(item) {
+                // Remove ourselves
+                //$scope.items.splice($scope.items.indexOf(item), 1);
+                item.hide = true;
+              }
             }]
           },
           {
diff --git a/scss/ionic/_listview.scss b/scss/ionic/_listview.scss
index 3c8470bd8a..7f6081acad 100644
--- a/scss/ionic/_listview.scss
+++ b/scss/ionic/_listview.scss
@@ -107,7 +107,7 @@ a.list-item {
 
   padding: 15px 15px;
 
-  -webkit-transition: left 0.2s ease-in-out;
+  -webkit-transition: left 0.2s ease-in-out, right 0.2s ease-in-out;
 
   // Align icons to the right
   > i:last-child {