Swipe left for list items in the works

dist/ionic.css

@@ -1124,6 +1124,9 @@ 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;
+    -webkit-transition: margin-left 0.2s ease-in-out; }
 
 .list-divider {
   padding: 5px 15px;

dist/ionic.js

@@ -177,7 +177,7 @@ window.ionic = {
   * Simple gesture controllers with some common gestures that emit
   * gesture events.
   *
-  * Ported from github.com/EightMedia/hammer.js - thanks!
+  * Ported from github.com/EightMedia/ionic.Gestures.js - thanks!
   */
 (function(ionic) {
   
@@ -265,19 +265,11 @@ window.ionic = {
     ionic.Gestures.event.determineEventTypes();
 
     // Register all gestures inside ionic.Gestures.gestures
-    if(this === this.window) {
-      // this is a window, then only allow the Tap gesture to be added
-      ionic.Gestures.detection.register(ionic.Gestures.gestures.Tap);
-      ionic.Gestures.detection.register(ionic.Gestures.gestures.Drag);
-      ionic.Gestures.detection.register(ionic.Gestures.gestures.Release);
-    } else {
-      // everything else but the window
     for(var name in ionic.Gestures.gestures) {
       if(ionic.Gestures.gestures.hasOwnProperty(name)) {
         ionic.Gestures.detection.register(ionic.Gestures.gestures[name]);
       }
     }
-    }
 
     // Add touch events on the document
     ionic.Gestures.event.onTouch(ionic.Gestures.DOCUMENT, ionic.Gestures.EVENT_MOVE, ionic.Gestures.detection.detect);
@@ -1784,6 +1776,43 @@ window.ionic = {
     }
   };
 
+})(ionic);
+;
+(function(ionic) {
+
+  ionic.views.List = function(opts) {
+    var _this = this;
+
+    this.el = opts.el;
+
+    window.ionic.onGesture('swipeleft', function(e) {
+      _this._handleSwipeLeft(e);
+    }, this.el);
+
+    window.ionic.onGesture('swiperight', function(e) {
+      _this._handleSwipeRight(e);
+    }, this.el);
+  };
+
+  ionic.views.List.prototype = {
+    _handleSwipeLeft: function(e) {
+      var item = e.target;
+      if(!item.classList.contains('list-item')) {
+        return;
+      }
+
+      item.classList.add('slide-left');
+    },
+    _handleSwipeRight: function(e) {
+      var item = e.target;
+      if(!item.classList.contains('list-item')) {
+        return;
+      }
+
+      item.classList.remove('slide-left');
+    }
+  };
+
 })(ionic);
 ;
 (function(ionic) {

js/utils/gestures.js

@@ -2,7 +2,7 @@
   * Simple gesture controllers with some common gestures that emit
   * gesture events.
   *
-  * Ported from github.com/EightMedia/hammer.js - thanks!
+  * Ported from github.com/EightMedia/ionic.Gestures.js - thanks!
   */
 (function(ionic) {
   
@@ -90,19 +90,11 @@
     ionic.Gestures.event.determineEventTypes();
 
     // Register all gestures inside ionic.Gestures.gestures
-    if(this === this.window) {
-      // this is a window, then only allow the Tap gesture to be added
-      ionic.Gestures.detection.register(ionic.Gestures.gestures.Tap);
-      ionic.Gestures.detection.register(ionic.Gestures.gestures.Drag);
-      ionic.Gestures.detection.register(ionic.Gestures.gestures.Release);
-    } else {
-      // everything else but the window
     for(var name in ionic.Gestures.gestures) {
       if(ionic.Gestures.gestures.hasOwnProperty(name)) {
         ionic.Gestures.detection.register(ionic.Gestures.gestures[name]);
       }
     }
-    }
 
     // Add touch events on the document
     ionic.Gestures.event.onTouch(ionic.Gestures.DOCUMENT, ionic.Gestures.EVENT_MOVE, ionic.Gestures.detection.detect);

js/views/listView.js

@@ -0,0 +1,36 @@
+(function(ionic) {
+
+  ionic.views.List = function(opts) {
+    var _this = this;
+
+    this.el = opts.el;
+
+    window.ionic.onGesture('swipeleft', function(e) {
+      _this._handleSwipeLeft(e);
+    }, this.el);
+
+    window.ionic.onGesture('swiperight', function(e) {
+      _this._handleSwipeRight(e);
+    }, this.el);
+  };
+
+  ionic.views.List.prototype = {
+    _handleSwipeLeft: function(e) {
+      var item = e.target;
+      if(!item.classList.contains('list-item')) {
+        return;
+      }
+
+      item.classList.add('slide-left');
+    },
+    _handleSwipeRight: function(e) {
+      var item = e.target;
+      if(!item.classList.contains('list-item')) {
+        return;
+      }
+
+      item.classList.remove('slide-left');
+    }
+  };
+
+})(ionic);

scss/ionic/_listview.scss

@@ -87,6 +87,11 @@ a.list-item {
     text-decoration: none;
     //background-color: $list-group-hover-bg;
   }
+
+  &.slide-left {
+    margin-left: -100px;
+    -webkit-transition: margin-left 0.2s ease-in-out;
+  }
 }
 
 .list-divider {

test/lists.html

@@ -16,8 +16,9 @@
         <h1 class="title">Customers</h1>
       </header>
 
-      <main class="has-header">
+      <main class="content-wrapper">
-        <ul class="list">
+        <div class="content has-header">
+          <ul id="list" class="list">
             <a href="#" class="list-item">
               Sasafras
               <i class="icon-arrow-right"></i>
@@ -73,12 +74,16 @@
             </a>
           </ul>
           <p><a class="button button-secondary" href="index.html">Homepage</a></p>
+        </div>
       </main>
 
     </section>
     
     <script src="../dist/ionic.js"></script>
-    <script src="../dist/ionic-simple.js"></script>
 
+    <script>
+      var l = document.getElementById('list');
+      var list = new ionic.views.List({el: l});
+    </script>
   </body>
 </html>