A whole lotta shit

js/views/listView.js

@@ -1,5 +1,7 @@
 (function(ionic) {
 'use strict';
+
+
   var DragOp = function() {};
   DragOp.prototype = {
     start: function(e) {
@@ -10,11 +12,25 @@
     }
   };
 
+
+  /**
+   * The Pull To Refresh drag operation handles the well-known
+   * "pull to refresh" concept seen on various apps. This lets
+   * the user indicate they want to refresh a given list by dragging
+   * down.
+   *
+   * @param {object} opts the options for the pull to refresh drag.
+   */
   var PullToRefreshDrag = function(opts) {
     this.dragThresholdY = opts.dragThresholdY || 10;
+    this.onRefreshOpening = opts.onRefreshOpening || function() {};
+    this.onRefresh = opts.onRefresh || function() {};
+    this.onRefreshHolding = opts.onRefreshHolding || function() {};
     this.el = opts.el;
   };
+
   PullToRefreshDrag.prototype = new DragOp();
+
   PullToRefreshDrag.prototype.start = function(e) {
     var content, refresher;
 
@@ -27,17 +43,23 @@
       refresher = this._injectRefresher();
     }
 
+    // Disable animations while dragging
+    refresher.classList.remove('list-refreshing');
+
     this._currentDrag = {
       refresher: refresher,
-      content: content
+      content: content,
+      isHolding: false
     };
   };
+
   PullToRefreshDrag.prototype._injectRefresher = function() {
     var refresher = document.createElement('div');
     refresher.className = 'list-refresher';
     this.el.insertBefore(refresher, this.el.firstChild);
     return refresher;
   };
+
   PullToRefreshDrag.prototype.drag = function(e) {
     var _this = this;
 
@@ -54,21 +76,59 @@
       }
 
       if(_this._isDragging) {
-        var currentHeight = parseFloat(_this._currentDrag.refresher.style.height);
-        _this._currentDrag.refresher.style.height = e.gesture.deltaY + 'px';
+        var refresher = _this._currentDrag.refresher;
 
-        var newHeight = parseFloat(_this._currentDrag.refresher.style.height = e.gesture.deltaY);
-        var firstChildHeight = parseFloat(_this._currentDrag.refresher.firstElementChild.style.height);
-        console.log('New Height must pass', firstChildHeight);
-        if(newHeight > firstChildHeight) {
-          console.log('PASSED', firstChildHeight);
+        var currentHeight = parseFloat(refresher.style.height);
+        refresher.style.height = e.gesture.deltaY + 'px';
+
+        var newHeight = parseFloat(refresher.style.height);
+        var firstChildHeight = parseFloat(refresher.firstElementChild.offsetHeight);
+
+        if(newHeight > firstChildHeight && !_this._currentDrag.isHolding) {
+          // The user is holding the refresh but hasn't let go of it
+          _this._currentDrag.isHolding = true;
+          _this.onRefreshHolding && _this.onRefreshHolding();
+        } else {
+          // Indicate what ratio of opening the list refresh drag is
+          var ratio = Math.min(1, newHeight / firstChildHeight);
+          _this.onRefreshOpening && _this.onRefreshOpening(ratio);
         }
       }
     });
   };
-  PullToRefreshDrag.prototype.end = function(e) {
+
+  PullToRefreshDrag.prototype.end = function(e, doneCallback) {
+    var _this = this;
+
+    // There is no drag, just end immediately
+    if(!this._currentDrag) {
+      return;
+    }
+
+    var refresher = this._currentDrag.refresher;
+
+    var currentHeight = parseFloat(refresher.style.height);
+    refresher.style.height = e.gesture.deltaY + 'px';
+
+    var firstChildHeight = parseFloat(refresher.firstElementChild.offsetHeight);
+
+    if(currentHeight > firstChildHeight) {
+      //this.refreshing();
+      refresher.classList.add('list-refreshing');
+      refresher.style.height = firstChildHeight + 'px';
+      this.onRefresh && _this.onRefresh();
+    } else {
+      // Enable animations
+      refresher.classList.add('list-refreshing');
+      refresher.style.height = '0px';
+      this.onRefresh && _this.onRefresh();
+    }
+
+    this._currentDrag = null;
+    doneCallback && doneCallback();
   };
 
+
   var SlideDrag = function(opts) {
     this.dragThresholdX = opts.dragThresholdX || 10;
     this.el = opts.el;
@@ -308,6 +368,10 @@
 
     // 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() {};
+    this.onRefreshHolding = opts.onRefreshHolding || function() {};
       
     // Start the drag states
     this._initDrag();
@@ -322,6 +386,14 @@
   };
 
   ionic.views.List.prototype = {
+    /**
+     * Called to tell the list to stop refreshing. This is useful
+     * if you are refreshing the list and are done with refreshing.
+     */
+    stopRefreshing: function() {
+      var refresher = this.el.querySelector('.list-refresher');
+      refresher.style.height = '0px';
+    },
 
     _initDrag: function() {
       this._isDragging = false;
@@ -341,6 +413,8 @@
 
 
     _startDrag: function(e) {
+      var _this = this;
+
       this._isDragging = false;
 
       // Check if this is a reorder drag
@@ -355,7 +429,18 @@
       
       // Check if this is a "pull down" drag for pull to refresh
       else if(e.gesture.direction == 'down') {
-        this._dragOp = new PullToRefreshDrag({ el: this.el });
+        this._dragOp = new PullToRefreshDrag({
+          el: this.el,
+          onRefresh: function() {
+            _this.onRefresh && _this.onRefresh();
+          },
+          onRefreshHolding: function() {
+            _this.onRefreshHolding && _this.onRefreshHolding();
+          },
+          onRefreshOpening: function(ratio) {
+            _this.onRefreshOpening && _this.onRefreshOpening(ratio);
+          }
+        });
         this._dragOp.start(e);
       } 
 
@@ -388,6 +473,7 @@
 
       if(!this._dragOp) {
         this._startDrag(e);
+        if(!this._dragOp) { return; }
       }
 
       this._dragOp.drag(e);