From 7c4a37e56a16420882b31f254b692f7d973fbe5d Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Fri, 8 Nov 2013 15:44:22 -0600 Subject: [PATCH] On refresh opening --- dist/js/ionic-angular.js | 3 + dist/js/ionic.js | 72 ++++++++++---------- js/ext/angular/src/directive/ionicContent.js | 3 + js/ext/angular/test/content.html | 5 +- js/utils/utils.js | 28 ++++++++ js/views/scrollView.js | 44 +++--------- 6 files changed, 84 insertions(+), 71 deletions(-) diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js index 00b29efbcc..2388f85179 100644 --- a/dist/js/ionic-angular.js +++ b/dist/js/ionic-angular.js @@ -516,6 +516,9 @@ angular.module('ionic.ui.content', []) el: $element[0].firstElementChild, onRefresh: function() { $scope.onRefresh && $scope.onRefresh(); + }, + onRefreshOpening: function(amt) { + $scope.onRefreshOpening && $scope.onRefreshOpening({amount: amt}); } }); // Let child scopes access this diff --git a/dist/js/ionic.js b/dist/js/ionic.js index 9b74cf85bf..35fe939966 100644 --- a/dist/js/ionic.js +++ b/dist/js/ionic.js @@ -1836,6 +1836,33 @@ window.ionic = { (function(ionic) { ionic.Utils = { + throttle: function(func, wait, options) { + var context, args, result; + var timeout = null; + var previous = 0; + options || (options = {}); + var later = function() { + previous = options.leading === false ? 0 : Date.now(); + timeout = null; + result = func.apply(context, args); + }; + return function() { + var now = Date.now(); + if (!previous && options.leading === false) previous = now; + var remaining = wait - (now - previous); + context = this; + args = arguments; + if (remaining <= 0) { + clearTimeout(timeout); + timeout = null; + previous = now; + result = func.apply(context, args); + } else if (!timeout && options.trailing !== false) { + timeout = setTimeout(later, remaining); + } + return result; + }; + }, // Borrowed from Backbone.js's extend // Helper function to correctly set up the prototype chain, for subclasses. // Similar to `goog.inherits`, but uses a hash of prototype properties and @@ -1890,6 +1917,7 @@ window.ionic = { ionic.inherit = ionic.Utils.inherit; ionic.extend = ionic.Utils.extend; + ionic.throttle = ionic.Utils.throttle; })(window.ionic); ; @@ -1938,40 +1966,6 @@ window.ionic = { toiletSeat: 'cubic-bezier(0.05, 0.60, 0.05, 0.60)' }; - /** - * 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.end = function(e, doneCallback) { - - if(currentHeight > firstChildHeight) { - //this.refreshing(); - } else { - // Enable animations - refresher.classList.add('list-refreshing'); - refresher.style.height = '0px'; - this.onRefresh && _this.onRefresh(); - } - - this._currentDrag = null; - doneCallback && doneCallback(); - }; - */ - - ionic.views.Scroll = ionic.views.View.inherit({ initialize: function(opts) { @@ -1998,6 +1992,7 @@ window.ionic = { refreshEasing: EASING_FUNCTIONS.bounce, // ms transition time refreshEasingTime: 400, + refreshOpeningInterval: 100, // How frequently to fire scroll events in the case of // a flick or momentum scroll where the finger is no longer @@ -2034,6 +2029,13 @@ window.ionic = { this.y = 0; this.x = 0; + // Create a throttled pull to refresh "opening" function + // which will get called as the refresh "opens" from drag + var refreshOpening = _this.onRefreshOpening; + _this.onRefreshOpening = ionic.throttle(function(ratio) { + refreshOpening && refreshOpening(ratio); + }, 100); + // Listen for drag and release events ionic.onGesture('drag', function(e) { _this._handleDrag(e); @@ -2533,7 +2535,7 @@ window.ionic = { } else { // Trigger refresh open amount var ratio = Math.min(1, newY / _this._refresherHeight); - _this.onRefreshOpening && _this.onRefreshOpening(ratio); + _this.onRefreshOpening(ratio); } // Update the new translated Y point of the container diff --git a/js/ext/angular/src/directive/ionicContent.js b/js/ext/angular/src/directive/ionicContent.js index 7800d3e2df..aba621dd40 100644 --- a/js/ext/angular/src/directive/ionicContent.js +++ b/js/ext/angular/src/directive/ionicContent.js @@ -49,6 +49,9 @@ angular.module('ionic.ui.content', []) el: $element[0].firstElementChild, onRefresh: function() { $scope.onRefresh && $scope.onRefresh(); + }, + onRefreshOpening: function(amt) { + $scope.onRefreshOpening && $scope.onRefreshOpening({amount: amt}); } }); // Let child scopes access this diff --git a/js/ext/angular/test/content.html b/js/ext/angular/test/content.html index 326492a0c5..9c3cdb1709 100644 --- a/js/ext/angular/test/content.html +++ b/js/ext/angular/test/content.html @@ -55,7 +55,7 @@
- +
@@ -81,6 +81,9 @@ $scope.onRefresh = function() { console.log('On refresh'); } + $scope.onRefreshOpening = function(amt) { + console.log('On refresh opening', amt); + } }) diff --git a/js/utils/utils.js b/js/utils/utils.js index 7ec799d2b4..6d571eceb9 100644 --- a/js/utils/utils.js +++ b/js/utils/utils.js @@ -1,6 +1,33 @@ (function(ionic) { ionic.Utils = { + throttle: function(func, wait, options) { + var context, args, result; + var timeout = null; + var previous = 0; + options || (options = {}); + var later = function() { + previous = options.leading === false ? 0 : Date.now(); + timeout = null; + result = func.apply(context, args); + }; + return function() { + var now = Date.now(); + if (!previous && options.leading === false) previous = now; + var remaining = wait - (now - previous); + context = this; + args = arguments; + if (remaining <= 0) { + clearTimeout(timeout); + timeout = null; + previous = now; + result = func.apply(context, args); + } else if (!timeout && options.trailing !== false) { + timeout = setTimeout(later, remaining); + } + return result; + }; + }, // Borrowed from Backbone.js's extend // Helper function to correctly set up the prototype chain, for subclasses. // Similar to `goog.inherits`, but uses a hash of prototype properties and @@ -55,5 +82,6 @@ ionic.inherit = ionic.Utils.inherit; ionic.extend = ionic.Utils.extend; + ionic.throttle = ionic.Utils.throttle; })(window.ionic); diff --git a/js/views/scrollView.js b/js/views/scrollView.js index 12e2bafa2e..ecf4c02efb 100644 --- a/js/views/scrollView.js +++ b/js/views/scrollView.js @@ -29,40 +29,6 @@ toiletSeat: 'cubic-bezier(0.05, 0.60, 0.05, 0.60)' }; - /** - * 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.end = function(e, doneCallback) { - - if(currentHeight > firstChildHeight) { - //this.refreshing(); - } else { - // Enable animations - refresher.classList.add('list-refreshing'); - refresher.style.height = '0px'; - this.onRefresh && _this.onRefresh(); - } - - this._currentDrag = null; - doneCallback && doneCallback(); - }; - */ - - ionic.views.Scroll = ionic.views.View.inherit({ initialize: function(opts) { @@ -89,6 +55,7 @@ refreshEasing: EASING_FUNCTIONS.bounce, // ms transition time refreshEasingTime: 400, + refreshOpeningInterval: 100, // How frequently to fire scroll events in the case of // a flick or momentum scroll where the finger is no longer @@ -125,6 +92,13 @@ this.y = 0; this.x = 0; + // Create a throttled pull to refresh "opening" function + // which will get called as the refresh "opens" from drag + var refreshOpening = _this.onRefreshOpening; + _this.onRefreshOpening = ionic.throttle(function(ratio) { + refreshOpening && refreshOpening(ratio); + }, 100); + // Listen for drag and release events ionic.onGesture('drag', function(e) { _this._handleDrag(e); @@ -624,7 +598,7 @@ } else { // Trigger refresh open amount var ratio = Math.min(1, newY / _this._refresherHeight); - _this.onRefreshOpening && _this.onRefreshOpening(ratio); + _this.onRefreshOpening(ratio); } // Update the new translated Y point of the container