Swipe left swipe right yo!

dist/ionic-ios7.css

@@ -1036,10 +1036,24 @@ a.list-item {
   text-decoration: none; }
   a.list-item:hover, a.list-item:focus {
     text-decoration: none; }
-  a.list-item.slide-left {
+
-    margin-left: -100px;
+.list-item-content {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  background-color: white; }
+  .list-item-content.slide-left {
     -webkit-transition: margin-left 0.2s ease-in-out; }
 
+.list-item-buttons {
+  position: absolute;
+  z-index: 0;
+  right: 0;
+  top: 0; }
+
 .list-divider {
   padding: 5px 15px;
   background-color: whitesmoke;

dist/ionic.css

@@ -1124,10 +1124,24 @@ a.list-item {
   text-decoration: none; }
   a.list-item:hover, a.list-item:focus {
     text-decoration: none; }
-  a.list-item.slide-left {
+
-    margin-left: -100px;
+.list-item-content {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  background-color: white; }
+  .list-item-content.slide-left {
     -webkit-transition: margin-left 0.2s ease-in-out; }
 
+.list-item-buttons {
+  position: absolute;
+  z-index: 0;
+  right: 0;
+  top: 0; }
+
 .list-divider {
   padding: 5px 15px;
   background-color: whitesmoke;

dist/ionic.js

@@ -1797,20 +1797,48 @@ window.ionic = {
   ionic.views.List.prototype = {
     _handleSwipeLeft: function(e) {
       var item = e.target;
-      if(!item.classList.contains('list-item')) {
+      var cl = item.classList;
-        return;
+      var content;
-      }
+      var buttons;
+      var buttonsWidth;
 
-      item.classList.add('slide-left');
+      window.requestAnimationFrame(function() {
+        // Grab the content item
+        if(cl.contains('list-item')) {
+          content = item.querySelector('.list-item-content');
+        } else if(cl.contains('list-item-content')) {
+          content = item;
+        }
+
+        // Grab the buttons
+        buttons = content.parentNode.querySelector('.list-item-buttons');
+        if(buttons) {
+          buttonsWidth = buttons.offsetWidth;
+
+          // Slide the content over left by the button width
+          content.style.right = buttonsWidth + 'px';
+          content.style.left = -buttonsWidth + 'px';
+          content.classList.add('slide-left');
+        }
+      });
     },
     _handleSwipeRight: function(e) {
       var item = e.target;
-      if(!item.classList.contains('list-item')) {
-        return;
-      }
 
-      item.classList.remove('slide-left');
+      window.requestAnimationFrame(function() {
-    }
+        var cl = item.classList;
+
+        if(cl.contains('list-item')) {
+          content = item.querySelector('.list-item-content');
+        } else if(cl.contains('list-item-content')) {
+          content = item;
+        }
+
+        content.classList.remove('slide-left');
+        content.style.right = 0;
+        content.style.left = 0;
+      });
+    },
   };
 
 })(ionic);

js/views/listView.js

@@ -17,20 +17,48 @@
   ionic.views.List.prototype = {
     _handleSwipeLeft: function(e) {
       var item = e.target;
-      if(!item.classList.contains('list-item')) {
+      var cl = item.classList;
-        return;
+      var content;
-      }
+      var buttons;
+      var buttonsWidth;
 
-      item.classList.add('slide-left');
+      window.requestAnimationFrame(function() {
+        // Grab the content item
+        if(cl.contains('list-item')) {
+          content = item.querySelector('.list-item-content');
+        } else if(cl.contains('list-item-content')) {
+          content = item;
+        }
+
+        // Grab the buttons
+        buttons = content.parentNode.querySelector('.list-item-buttons');
+        if(buttons) {
+          buttonsWidth = buttons.offsetWidth;
+
+          // Slide the content over left by the button width
+          content.style.right = buttonsWidth + 'px';
+          content.style.left = -buttonsWidth + 'px';
+          content.classList.add('slide-left');
+        }
+      });
     },
     _handleSwipeRight: function(e) {
       var item = e.target;
-      if(!item.classList.contains('list-item')) {
-        return;
-      }
 
-      item.classList.remove('slide-left');
+      window.requestAnimationFrame(function() {
-    }
+        var cl = item.classList;
+
+        if(cl.contains('list-item')) {
+          content = item.querySelector('.list-item-content');
+        } else if(cl.contains('list-item-content')) {
+          content = item;
+        }
+
+        content.classList.remove('slide-left');
+        content.style.right = 0;
+        content.style.left = 0;
+      });
+    },
   };
 
 })(ionic);

scss/ionic/_listview.scss

@@ -87,12 +87,29 @@ a.list-item {
     text-decoration: none;
     //background-color: $list-group-hover-bg;
   }
+}
+
+.list-item-content {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+
+  background-color: white;
 
   &.slide-left {
-    margin-left: -100px;
     -webkit-transition: margin-left 0.2s ease-in-out;
   }
 }
+.list-item-buttons {
+  position: absolute;
+  z-index: 0;
+  right: 0;
+  top: 0;
+}
+
 
 .list-divider {
   padding: 5px 15px;

test/lists.html

@@ -20,8 +20,13 @@
         <div class="content has-header">
           <ul id="list" class="list">
             <a href="#" class="list-item">
-              Sasafras
+              <div class="list-item-content">
-              <i class="icon-arrow-right"></i>
+                Sasafras
+                <i class="icon-arrow-right"></i>
+              </div>
+              <div class="list-item-buttons">
+                <button class="button button-danger">Delete</button>
+              </div>
             </a>
             <a href="#" class="list-item">
               Candy