Fixed interialEventInterval for scrolling, added biglist test

dist/css/ionic-ios7.css

@@ -182,7 +182,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid #c0c0c0; }
+  border: 1px solid silver; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -558,7 +558,7 @@ a.subdued‎ {
     &.bar-footer {
       border-top-width: 1px;
     }*/
-  box-shadow: inset 0 0 1px #999; }
+  box-shadow: inset 0 0 1px #999999; }
   .bar.bar-clear {
     border: none;
     background: none;
@@ -1659,7 +1659,7 @@ input[type="file"] {
   line-height: 34px; }
 
 select {
-  border: 1px solid #ccc;
+  border: 1px solid #cccccc;
   background-color: white; }
 
 select[multiple],
@@ -1731,7 +1731,7 @@ input[type="checkbox"][readonly] {
   right: 20px;
   transition: 0.2s ease;
   transition-property: left, right;
-  transition-delay: 0s, .05s; }
+  transition-delay: 0s, 0.05s; }
 
 .toggle :checked + .track {
   /* When the toggle is "on" */
@@ -1746,7 +1746,7 @@ input[type="checkbox"][readonly] {
     right: 0;
     left: 20px;
     -webkit-transform: none;
-    transition-delay: .05s, 0s; }
+    transition-delay: 0.05s, 0s; }
 
 .item-radio {
   padding: 0; }
@@ -2021,7 +2021,7 @@ input[type="range"] {
     .button.button-icon:active, .button.button-icon.active {
       background: none;
       box-shadow: none;
-      text-shadow: 0px 0px 10px #fff; }
+      text-shadow: 0px 0px 10px white; }
   .button.block, .button.button-full {
     margin-top: 10px;
     margin-bottom: 10px; }
@@ -2363,9 +2363,9 @@ a.button {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin .75s linear infinite;
+  -webkit-animation: spin 0.75s linear infinite;
-  -moz-animation: spin .75s linear infinite;
+  -moz-animation: spin 0.75s linear infinite;
-  animation: spin .75s linear infinite; }
+  animation: spin 0.75s linear infinite; }
   .icon-loading:before {
     content: "\e144"; }
 
@@ -2378,9 +2378,9 @@ a.button {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin .75s linear infinite;
+  -webkit-animation: spin 0.75s linear infinite;
-  -moz-animation: spin .75s linear infinite;
+  -moz-animation: spin 0.75s linear infinite;
-  animation: spin .75s linear infinite; }
+  animation: spin 0.75s linear infinite; }
   .icon-refreshing:before {
     content: "\e144"; }
 

dist/css/ionic-scoped.css

@@ -1027,7 +1027,7 @@
   .ionic fieldset {
     margin: 0 2px;
     padding: 0.35em 0.625em 0.75em;
-    border: 1px solid #c0c0c0; }
+    border: 1px solid silver; }
   .ionic legend {
     padding: 0;
     /* 2 */
@@ -1324,7 +1324,7 @@
       &.bar-footer {
         border-top-width: 1px;
       }*/
-    box-shadow: inset 0 0 1px #999; }
+    box-shadow: inset 0 0 1px #999999; }
     .ionic .bar.bar-clear {
       border: none;
       background: none;
@@ -2315,7 +2315,7 @@
   .ionic input[type="file"] {
     line-height: 34px; }
   .ionic select {
-    border: 1px solid #ccc;
+    border: 1px solid #cccccc;
     background-color: white; }
   .ionic select[multiple],
   .ionic select[size] {
@@ -2364,7 +2364,7 @@
       border-radius: 50%;
       background: white;
       content: ' ';
-      transition: background-color .1s ease-in-out; }
+      transition: background-color 0.1s ease-in-out; }
   .ionic .checkbox input:after {
     position: absolute;
     top: 34%;
@@ -2377,7 +2377,7 @@
     border-right: 0;
     content: ' ';
     opacity: 0;
-    transition: opacity .05s ease-in-out;
+    transition: opacity 0.05s ease-in-out;
     -webkit-transform: rotate(-45deg);
     transform: rotate(-45deg); }
   .ionic .checkbox input:checked:before {
@@ -2719,7 +2719,7 @@
       .ionic .button.button-icon:active, .ionic .button.button-icon.active {
         background: none;
         box-shadow: none;
-        text-shadow: 0px 0px 10px #fff; }
+        text-shadow: 0px 0px 10px white; }
     .ionic .button.block, .ionic .button.button-full {
       margin-top: 10px;
       margin-bottom: 10px; }
@@ -2971,9 +2971,9 @@
     line-height: 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    -webkit-animation: spin .75s linear infinite;
+    -webkit-animation: spin 0.75s linear infinite;
-    -moz-animation: spin .75s linear infinite;
+    -moz-animation: spin 0.75s linear infinite;
-    animation: spin .75s linear infinite; }
+    animation: spin 0.75s linear infinite; }
     .ionic .icon-loading:before {
       content: "\e144"; }
   .ionic .icon-refreshing {
@@ -2985,9 +2985,9 @@
     line-height: 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    -webkit-animation: spin .75s linear infinite;
+    -webkit-animation: spin 0.75s linear infinite;
-    -moz-animation: spin .75s linear infinite;
+    -moz-animation: spin 0.75s linear infinite;
-    animation: spin .75s linear infinite; }
+    animation: spin 0.75s linear infinite; }
     .ionic .icon-refreshing:before {
       content: "\e144"; }
   .ionic .hidden,

dist/css/ionic.css

@@ -1261,7 +1261,7 @@ sub {
 fieldset {
   margin: 0 2px;
   padding: 0.35em 0.625em 0.75em;
-  border: 1px solid #c0c0c0; }
+  border: 1px solid silver; }
 
 /**
  * 1. Correct `color` not being inherited in IE 8/9.
@@ -1667,7 +1667,7 @@ a.subdued‎ {
     &.bar-footer {
       border-top-width: 1px;
     }*/
-  box-shadow: inset 0 0 1px #999; }
+  box-shadow: inset 0 0 1px #999999; }
   .bar.bar-clear {
     border: none;
     background: none;
@@ -2802,7 +2802,7 @@ input[type="file"] {
   line-height: 34px; }
 
 select {
-  border: 1px solid #ccc;
+  border: 1px solid #cccccc;
   background-color: white; }
 
 select[multiple],
@@ -2857,7 +2857,7 @@ input[type="checkbox"][readonly] {
     border-radius: 50%;
     background: white;
     content: ' ';
-    transition: background-color .1s ease-in-out; }
+    transition: background-color 0.1s ease-in-out; }
 
 /* the checkmark within the box */
 .checkbox input:after {
@@ -2872,7 +2872,7 @@ input[type="checkbox"][readonly] {
   border-right: 0;
   content: ' ';
   opacity: 0;
-  transition: opacity .05s ease-in-out;
+  transition: opacity 0.05s ease-in-out;
   -webkit-transform: rotate(-45deg);
   transform: rotate(-45deg); }
 
@@ -3242,7 +3242,7 @@ input[type="range"] {
     .button.button-icon:active, .button.button-icon.active {
       background: none;
       box-shadow: none;
-      text-shadow: 0px 0px 10px #fff; }
+      text-shadow: 0px 0px 10px white; }
   .button.block, .button.button-full {
     margin-top: 10px;
     margin-bottom: 10px; }
@@ -3689,9 +3689,9 @@ a.button {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin .75s linear infinite;
+  -webkit-animation: spin 0.75s linear infinite;
-  -moz-animation: spin .75s linear infinite;
+  -moz-animation: spin 0.75s linear infinite;
-  animation: spin .75s linear infinite; }
+  animation: spin 0.75s linear infinite; }
   .icon-loading:before {
     content: "\e144"; }
 
@@ -3704,9 +3704,9 @@ a.button {
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  -webkit-animation: spin .75s linear infinite;
+  -webkit-animation: spin 0.75s linear infinite;
-  -moz-animation: spin .75s linear infinite;
+  -moz-animation: spin 0.75s linear infinite;
-  animation: spin .75s linear infinite; }
+  animation: spin 0.75s linear infinite; }
   .icon-refreshing:before {
     content: "\e144"; }
 

js/views/listViewScroll.js

@@ -362,14 +362,9 @@
    */
   ionic.views.ListView = ionic.views.Scroll.inherit({
     initialize: function(opts) {
-      ionic.views.ListView.__super__.initialize.call(this, opts);
-      /*
       var _this = this;
 
-      this.el = opts.el;
+      ionic.views.ListView.__super__.initialize.call(this, opts);
-
-      // The amount of dragging required to start sliding the element over (in pixels)
-      this.dragThresholdX = opts.dragThresholdX || 10;
 
       this.onRefresh = opts.onRefresh || function() {};
       this.onRefreshOpening = opts.onRefreshOpening || function() {};
@@ -379,6 +374,7 @@
       this._initDrag();
 
       // Listen for drag and release events
+      /*
       window.ionic.onGesture('drag', function(e) {
         _this._handleDrag(e);
       }, this.el);
@@ -397,7 +393,24 @@
     },
 
     didScroll: function(e) {
-      console.log('LIST VIEW SCROLLED', e);
+      console.log('Scrolling', Date.now());
+      /*
+      if(this.isVirtual) {
+        var itemHeight = this.itemHeight;
+        var totalItems = this.el.children.length;
+        var scrollHeight = e.target.scrollHeight
+        var scrollTop = e.scrollTop;
+        var height = this.el.parentNode.offsetHeight;
+        console.log('LIST VIEW SCROLLED', e, itemHeight, scrollHeight, height);
+
+        var itemsPerPage = Math.floor(scrollHeight / itemHeight);
+        var first = parseInt(scrollTop / itemHeight) - totalItems;
+        console.log('FITS', itemsPerPage, 'per page, starting at', first);
+
+        var nodes = Array.prototype.slice.call(this.el.children, first, itemsPerPage);
+        console.log('Showing these nodes:', nodes);
+      }
+      */
     },
 
     _initDrag: function() {
@@ -422,8 +435,9 @@
     _startDrag: function(e) {
       ionic.views.ListView.__super__._startDrag.call(this, e);
 
+      return;
+
       var _this = this;
-      /*
 
       this._isDragging = false;
 
@@ -436,9 +450,7 @@
           this._dragOp.start(e);
         }
       }
-      */
 
-      /*
       // Check if this is a "pull down" drag for pull to refresh
       else if(e.gesture.direction == 'down') {
         this._dragOp = new PullToRefreshDrag({
@@ -455,23 +467,20 @@
         });
         this._dragOp.start(e);
       } 
-      */
 
       // Or check if this is a swipe to the side drag
-      /*
       else if(e.gesture.direction == 'left' || e.gesture.direction == 'right') {
         this._dragOp = new SlideDrag({ el: this.el });
         this._dragOp.start(e);
       }
-      */
     },
 
 
     _handleEndDrag: function(e) {
       ionic.views.ListView.__super__._handleEndDrag.call(this, e);
-      /*
       var _this = this;
       
+      return;
       if(!this._dragOp) {
         this._initDrag();
         return;
@@ -480,7 +489,6 @@
       this._dragOp.end(e, function() {
         _this._initDrag();
       });
-      */
     },
 
     /**
@@ -488,16 +496,15 @@
      */
     _handleDrag: function(e) {
       ionic.views.ListView.__super__._handleDrag.call(this, e);
-      /*
       var _this = this, content, buttons;
 
+      return;
       if(!this._dragOp) {
         this._startDrag(e);
         if(!this._dragOp) { return; }
       }
 
       this._dragOp.drag(e);
-      */
     }
   });
 

js/views/scrollView.js

@@ -38,7 +38,7 @@
         resistance: 2,
         scrollEventName: 'momentumScrolled',
         scrollEndEventName: 'momentumScrollEnd',
-        intertialEventInterval: 50,
+        inertialEventInterval: 50,
         mouseWheelSpeed: 20,
         invertWheel: false,
         isVerticalEnabled: true,
@@ -47,7 +47,7 @@
         bounceTime: 600 //how long to take when bouncing back in a rubber band
       }, opts);
 
-      ionic.Utils.extend(this, opts);
+      ionic.extend(this, opts);
 
       this.el = opts.el;
 
@@ -111,6 +111,7 @@
       el.style.webkitTransitionDuration = time;
       el.style.webkitTransform = 'translate3d(' + x + 'px,' + y + 'px, 0)';
 
+      clearTimeout(this._momentumStepTimeout);
       // Start triggering events as the element scrolls from inertia.
       // This is important because we need to receive scroll events
       // even after a "flick" and adjust, etc.
@@ -136,6 +137,28 @@
       }, this.inertialEventInterval)
     },
 
+    needsWrapping: function() {
+      var _this = this;
+
+      var totalWidth = this.el.scrollWidth;
+      var totalHeight = this.el.scrollHeight;
+      var parentWidth = this.el.parentNode.offsetWidth;
+      var parentHeight = this.el.parentNode.offsetHeight;
+
+      var maxX = Math.min(0, (-totalWidth + parentWidth));
+      var maxY = Math.min(0, (-totalHeight + parentHeight));
+
+      if (this.isHorizontalEnabled && (this.x > 0 || this.x < maxX)) {
+        return true;
+      }
+      
+      if (this.isVerticalEnabled && (this.y > 0 || this.y < maxY)) {
+        return true;
+      }
+
+      return false;
+    },
+
     /**
      * If the scroll position is outside the current bounds,
      * animate it back.
@@ -275,13 +298,22 @@
         return;
       }
 
+      var needsWrapping = this.needsWrapping();
+
       // Triggered to end scroll, once the final animation has ended
-      if(this._didEndScroll) {
+      if(needsWrapping && this._didEndScroll) {
         this._didEndScroll = false;
-        ionic.trigger(_this.scrollEndEventName, {
+        ionic.trigger(this.scrollEndEventName, {
-          target: _this.el,
+          target: this.el,
-          scrollLeft: _this.x,
+          scrollLeft: this.x,
-          scrollTop: _this.y
+          scrollTop: this.y
+        });
+      } else if(!needsWrapping) {
+        this._didEndScroll = false;
+        ionic.trigger(this.scrollEndEventName, {
+          target: this.el,
+          scrollLeft: this.x,
+          scrollTop: this.y
         });
       }
 

test/lists.html

@@ -450,7 +450,6 @@
 
 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
-    <!--<script src="../dist/js/ionic.js"></script>-->
     <script>
       $("#btn-test-left").click(function(){
 
@@ -494,10 +493,6 @@
 
         return false;
       }); 
-      //var list = document.getElementById('content');
-      // var lv = new ionic.views.ListView({
-      //   el: list
-      // });
     </script>
 
   </body>