Scroll stuff

dist/css/ionic-ios7.css

@@ -370,6 +370,14 @@ body, .ionic-body {
   height: 100%;
   -webkit-overflow-scrolling: touch; }
 
+.scroll-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden; }
+
 .has-header {
   top: 44px; }
 
@@ -1456,6 +1464,21 @@ button.item-button-right:after {
     height: 100%;
     border: none;
     border-radius: 0; }
+    .item-drag .button .icon, .item-drag .button i {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -moz-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      -webkit-align-items: center;
+      -moz-align-items: center;
+      align-items: center;
+      font-size: 24px;
+      position: absolute;
+      top: 0;
+      height: 100%; }
 
 /**
  * The hidden right-side buttons that can be exposed under a list item

dist/css/ionic-scoped.css

@@ -1793,6 +1793,13 @@
     width: 100%;
     height: 100%;
     -webkit-overflow-scrolling: touch; }
+  .ionic .scroll-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden; }
   .ionic .has-header {
     top: 44px; }
   .ionic .has-footer {
@@ -2793,6 +2800,21 @@
       height: 100%;
       border: none;
       border-radius: 0; }
+      .ionic .item-drag .button .icon, .ionic .item-drag .button i {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -moz-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        -webkit-align-items: center;
+        -moz-align-items: center;
+        align-items: center;
+        font-size: 24px;
+        position: absolute;
+        top: 0;
+        height: 100%; }
   .ionic .item-options {
     position: absolute;
     top: 0;

dist/css/ionic.css

@@ -2201,6 +2201,14 @@ body, .ionic-body {
   height: 100%;
   -webkit-overflow-scrolling: touch; }
 
+.scroll-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden; }
+
 .has-header {
   top: 44px; }
 
@@ -3351,6 +3359,21 @@ button.item-button-right:after {
     height: 100%;
     border: none;
     border-radius: 0; }
+    .item-drag .button .icon, .item-drag .button i {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: -moz-flex;
+      display: -ms-flexbox;
+      display: flex;
+      -webkit-box-align: center;
+      -ms-flex-align: center;
+      -webkit-align-items: center;
+      -moz-align-items: center;
+      align-items: center;
+      font-size: 24px;
+      position: absolute;
+      top: 0;
+      height: 100%; }
 
 /**
  * The hidden right-side buttons that can be exposed under a list item

dist/js/ionic-angular.js

@@ -508,6 +508,9 @@ angular.module('ionic.ui.list', ['ngAnimate'])
             </div>\
             <div class="item-content slide-left" ng-transclude>\
             </div>\
+             <div class="item-drag" ng-if="canReorder && isEditing">\
+               <button data-ionic-action="reorder" class="button button-icon"><i ng-class="reorderIcon"></i></button>\
+             </div>\
             <div class="item-options" ng-if="canSwipe && !isEditing && showOptions">\
              <button ng-click="buttonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in buttons">{{button.text}}</button>\
            </div>\
@@ -588,7 +591,10 @@ angular.module('ionic.ui.list', ['ngAnimate'])
 
     compile: function(element, attr, transclude) {
       return function($scope, $element, $attr) {
-        var lv = new ionic.views.List({el: $element[0]});
+        var lv = new ionic.views.ListView({
+          el: $element[0],
+          listEl: $element[0].children[0]
+        });
 
         if(attr.animation) {
           $element.addClass(attr.animation);
@@ -916,6 +922,28 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
 (function() {
 'use strict';
 
+/**
+ * @description
+ * The scroll directive lets you enable a content area for 
+ * our custom momentum scrolling area. The benefit to a custom
+ * scroll area is configurability, and avoidance of the 
+ * buggy -webkit-overflow-scrolling: touch.
+ */
+
+angular.module('ionic.ui.scroll', [])
+
+.directive('scroll', function() {
+  return {
+    restrict: 'ECA',
+    replace: true,
+    transclude: true,
+    template: '<div class="scroll-content" ng-transclude></div>'
+  };
+});
+;
+(function() {
+'use strict';
+
 /**
  * @description
  * The sideMenuCtrl lets you quickly have a draggable side

dist/js/ionic.js

@@ -3012,13 +3012,6 @@ window.ionic = {
     // Start the drag states
     this._initDrag();
 
-    // Listen for drag and release events
-    window.ionic.onGesture('drag', function(e) {
-      _this._handleDrag(e);
-    }, this.el);
-    window.ionic.onGesture('release', function(e) {
-      _this._handleEndDrag(e);
-    }, this.el);
   };
 
   ionic.views.List.prototype = {
@@ -3053,6 +3046,8 @@ window.ionic = {
 
       this._isDragging = false;
 
+      return false;
+
       // Check if this is a reorder drag
       if(ionic.DomUtil.getParentOrSelfWithClass(e.target, 'list-item-drag') && (e.gesture.direction == 'up' || e.gesture.direction == 'down')) {
         var item = this._getItem(e.target);
@@ -3090,6 +3085,7 @@ window.ionic = {
 
     _handleEndDrag: function(e) {
       var _this = this;
+      return false;
       
       if(!this._dragOp) {
         this._initDrag();
@@ -3106,6 +3102,7 @@ window.ionic = {
      */
     _handleDrag: function(e) {
       var _this = this, content, buttons;
+      return false;
 
       if(!this._dragOp) {
         this._startDrag(e);

js/ext/angular/src/directive/ionicList.js

@@ -24,6 +24,9 @@ angular.module('ionic.ui.list', ['ngAnimate'])
             </div>\
             <div class="item-content slide-left" ng-transclude>\
             </div>\
+             <div class="item-drag" ng-if="canReorder && isEditing">\
+               <button data-ionic-action="reorder" class="button button-icon"><i ng-class="reorderIcon"></i></button>\
+             </div>\
             <div class="item-options" ng-if="canSwipe && !isEditing && showOptions">\
              <button ng-click="buttonClicked(button)" class="button" ng-class="button.type" ng-repeat="button in buttons">{{button.text}}</button>\
            </div>\
@@ -104,7 +107,10 @@ angular.module('ionic.ui.list', ['ngAnimate'])
 
     compile: function(element, attr, transclude) {
       return function($scope, $element, $attr) {
-        var lv = new ionic.views.List({el: $element[0]});
+        var lv = new ionic.views.ListView({
+          el: $element[0],
+          listEl: $element[0].children[0]
+        });
 
         if(attr.animation) {
           $element.addClass(attr.animation);

js/ext/angular/src/directive/ionicScroll.js

@@ -0,0 +1,21 @@
+(function() {
+'use strict';
+
+/**
+ * @description
+ * The scroll directive lets you enable a content area for 
+ * our custom momentum scrolling area. The benefit to a custom
+ * scroll area is configurability, and avoidance of the 
+ * buggy -webkit-overflow-scrolling: touch.
+ */
+
+angular.module('ionic.ui.scroll', [])
+
+.directive('scroll', function() {
+  return {
+    restrict: 'ECA',
+    replace: true,
+    transclude: true,
+    template: '<div class="scroll-content" ng-transclude></div>'
+  };
+});

js/ext/angular/test/list.html

@@ -63,7 +63,7 @@
   </head>
   <body>
 
-    <content ng-controller="TestCtrl" class="reveal-animation">
+    <div ng-controller="TestCtrl" class="reveal-animation scroll-content">
       <list is-editing="isEditingItems" on-refresh-holding="almostRefreshing()" on-refresh-opening="almostRefreshProjects(ratio)" on-refresh="refreshProjects()" animation="my-repeat-animation" delete-icon="icon ion-minus-circled" reorder-icon="icon ion-navicon">
         <list-refresher>
         </list-refresher>
@@ -79,7 +79,7 @@
         </list-item>
       </list>
       <button ng-click="edit()" class="button button-success">Edit</button>
-    </content>
+    </div>
 
     <script src="../../../../dist/js/ionic.js"></script>
     <script src="../../../../dist/js/ionic-angular.js"></script>
@@ -132,9 +132,10 @@
           console.log("REFRESHING");
         };
 
-        $scope.items = [
+        $scope.items = [];
-          {
+        for(var i = 0; i < 20; i++) {
-            text: 'Item 1',
+          $scope.items.push({
+            text: 'Item ' + i,
             canDelete: true,
             canSwipe: true,
             canReorder: true,
@@ -146,47 +147,9 @@
               type: 'button-danger',
               buttonClicked: removeItem,
             }]
-          },
+          });
-          {
-            text: 'Item 2',
-            canDelete: true,
-            canSwipe: true,
-            canReorder: true,
-            icon: 'icon-chevron-right',
-            deleteItem: removeItem,
-            buttons: [{
-              text: 'Kill',
-              type: 'button-danger',
-              buttonClicked: removeItem,
-            }]
-          },
-          {
-            text: 'Item 3',
-            canDelete: true,
-            canSwipe: true,
-            canReorder: true,
-            icon: 'icon-chevron-right',
-            deleteItem: removeItem,
-            buttons: [{
-              text: 'Kill',
-              type: 'button-danger',
-              buttonClicked: removeItem,
-            }]
-          },
-          {
-            text: 'Item 4',
-            canDelete: true,
-            canSwipe: true,
-            canReorder: true,
-            icon: 'icon-chevron-right',
-            deleteItem: removeItem,
-            buttons: [{
-              text: 'Kill',
-              type: 'button-danger',
-              buttonClicked: removeItem,
-            }]
         }
-        ];
+
         $scope.edit = function() {
           $scope.isEditingItems = !$scope.isEditingItems;
         }

js/views/listView.js

@@ -376,13 +376,6 @@
     // Start the drag states
     this._initDrag();
 
-    // Listen for drag and release events
-    window.ionic.onGesture('drag', function(e) {
-      _this._handleDrag(e);
-    }, this.el);
-    window.ionic.onGesture('release', function(e) {
-      _this._handleEndDrag(e);
-    }, this.el);
   };
 
   ionic.views.List.prototype = {
@@ -417,6 +410,8 @@
 
       this._isDragging = false;
 
+      return false;
+
       // Check if this is a reorder drag
       if(ionic.DomUtil.getParentOrSelfWithClass(e.target, 'list-item-drag') && (e.gesture.direction == 'up' || e.gesture.direction == 'down')) {
         var item = this._getItem(e.target);
@@ -454,6 +449,7 @@
 
     _handleEndDrag: function(e) {
       var _this = this;
+      return false;
       
       if(!this._dragOp) {
         this._initDrag();
@@ -470,6 +466,7 @@
      */
     _handleDrag: function(e) {
       var _this = this, content, buttons;
+      return false;
 
       if(!this._dragOp) {
         this._startDrag(e);

scss/ionic/_items.scss

@@ -483,6 +483,14 @@ button.item-button-right:after {
     height: 100%;
     border: none;
     border-radius: 0;
+    .icon, i {
+      @include display-flex();
+      @include align-items(center);
+      font-size: 24px;
+      position: absolute;
+      top: 0;
+      height: 100%;
+    }
   }
 }
 /**

scss/ionic/_scaffolding.scss

@@ -67,6 +67,14 @@ body, .ionic-body {
   -webkit-overflow-scrolling: touch;
 }
 
+.scroll-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+}
 // Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
 // Note: For these to work, content must come after both bars in the markup
 .has-header {

scss/ionic/_variables.scss

@@ -403,6 +403,7 @@ $card-border-radius:        2px !default;
 
 $item-border-width:            1px !default;
 $item-border-color:            #666;
+$item-border-style:            solid;
 $item-box-shadow:              inset 0 0 $item-border-width $item-border-color;
 $item-padding:                 15px !default;
 

test/biglists.html

@@ -7,11 +7,6 @@
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
     <link href="../dist/css/ionic.css" rel="stylesheet">
     <style>
-      #list {
-        height: 100%;
-        position: relative;
-        overflow: hidden;
-      }
     </style>
   </head>
   <body>
@@ -20,9 +15,10 @@
       <h1 class="title">Lists</h1>
     </header>
 
-    <main id="content" class="scroll">
+    <main class="content has-header" id="content">
 
-        <div id="list" class="list">
+        <div id="list" class="scroll">
+          <div class="list">
 
             <div class="item-divider">
               Work
@@ -36,6 +32,7 @@
             <a href="#" class="item item-icon-left">
               <i class="icon-chatbubble-working"></i>
               Call Ma
+              <input type="text" placeholder="name">
             </a>
 
             <div class="item-divider">
@@ -1265,10 +1262,11 @@
             </a>
 
           </div>
-
           <div class="padding">
             <a class="button button-secondary" href="index.html">Homepage</a>
           </div>
+        </div>
+
 
     </main>
 
@@ -1276,16 +1274,22 @@
 
     <script src="../dist/js/ionic.js"></script>
     <script>
-      var list = document.getElementById('content');
+      var list = document.getElementById('list');
+       var lv = new ionic.views.List({
+         el: list,
+       });
+
+       /*
        var lv = new ionic.views.ListView({
          el: list,
          listEl: list.children[0],
-         isVirtual: true,
+         isVirtual: false,
          itemHeight: 50,
          renderViewport: function(high, low, start, end) {
           console.log('RENDER VIEWPORT', high, low, start, end);
          }
        });
+       */
     </script>
 
   </body>