From 7bd2e5263d9b6a2eec84856df07992473387b337 Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Thu, 5 Dec 2013 19:30:18 -0600 Subject: [PATCH] Expose an onScroll event --- dist/js/ionic-angular.js | 9 +++++ dist/js/ionic.js | 40 ++++++++++++++++---- js/ext/angular/src/directive/ionicContent.js | 9 +++++ js/ext/angular/test/content.html | 39 +++++++++++++------ js/ext/angular/test/header-hide.html | 0 js/utils/events.js | 2 +- js/views/scrollView.js | 38 +++++++++++++++---- 7 files changed, 110 insertions(+), 27 deletions(-) create mode 100644 js/ext/angular/test/header-hide.html diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js index 8eed6a70c0..8f003045ed 100644 --- a/dist/js/ionic-angular.js +++ b/dist/js/ionic-angular.js @@ -650,6 +650,7 @@ angular.module('ionic.ui.content', []) scope: { onRefresh: '&', onRefreshOpening: '&', + onScroll: '&', refreshComplete: '=', scroll: '@', hasScrollX: '@', @@ -731,6 +732,14 @@ angular.module('ionic.ui.content', []) }); } + $element.bind('scroll', function(e) { + $scope.onScroll({ + event: e, + scrollTop: e.detail.scrollTop, + scrollLeft: e.detail.scrollLeft + }); + }); + $scope.$parent.$on('scroll.refreshComplete', function(e) { sv && sv.finishPullToRefresh(); }); diff --git a/dist/js/ionic.js b/dist/js/ionic.js index 5b07177565..47ed032328 100644 --- a/dist/js/ionic.js +++ b/dist/js/ionic.js @@ -293,7 +293,7 @@ window.ionic = { // Map some convenient top-level functions for event handling ionic.on = function() { ionic.EventController.on.apply(ionic.EventController, arguments); }; ionic.off = function() { ionic.EventController.off.apply(ionic.EventController, arguments); }; - ionic.trigger = function() { ionic.EventController.trigger.apply(ionic.EventController.trigger, arguments); }; + ionic.trigger = ionic.EventController.trigger;//function() { ionic.EventController.trigger.apply(ionic.EventController.trigger, arguments); }; ionic.onGesture = function() { return ionic.EventController.onGesture.apply(ionic.EventController.onGesture, arguments); }; ionic.offGesture = function() { return ionic.EventController.offGesture.apply(ionic.EventController.offGesture, arguments); }; @@ -2316,8 +2316,9 @@ var Scroller; /** * A pure logic 'component' for 'virtual' scrolling/zooming. */ - ionic.views.Scroll = ionic.views.View.inherit({ - initialize: function(options) { +ionic.views.Scroll = ionic.views.View.inherit({ + initialize: function(options) { + var self = this; this.__container = options.el; this.__content = options.el.firstElementChild; @@ -2367,17 +2368,35 @@ var Scroller; scrollingComplete: NOOP, /** This configures the amount of change applied to deceleration when reaching boundaries **/ - penetrationDeceleration : 0.03, + penetrationDeceleration : 0.03, - /** This configures the amount of change applied to acceleration when reaching boundaries **/ - penetrationAcceleration : 0.08 + /** This configures the amount of change applied to acceleration when reaching boundaries **/ + penetrationAcceleration : 0.08, + // The ms interval for triggering scroll events + scrollEventInterval: 50 }; for (var key in options) { this.options[key] = options[key]; } + this.triggerScrollEvent = ionic.throttle(function() { + ionic.trigger('scroll', { + scrollTop: self.__scrollTop, + scrollLeft: self.__scrollLeft, + target: self.__container + }); + }, this.options.scrollEventInterval); + + this.triggerScrollEndEvent = function() { + ionic.trigger('scrollend', { + scrollTop: self.__scrollTop, + scrollLeft: self.__scrollLeft, + target: self.__container + }); + }; + // Get the render update function, initialize event handlers, // and calculate the size of the scroll container this.__callback = this.getRenderFn(); @@ -2634,6 +2653,8 @@ var Scroller; */ getRenderFn: function() { + var self = this; + var content = this.__content; var docStyle = document.documentElement.style; @@ -2663,13 +2684,15 @@ var Scroller; if (helperElem.style[perspectiveProperty] !== undef) { return function(left, top, zoom) { - content.style[transformProperty] = 'translate3d(' + (-left) + 'px,' + (-top) + 'px,0) scale(' + zoom + ')'; + content.style[transformProperty] = 'translate3d(' + (-left) + 'px,' + (-top) + 'px,0)'; + self.triggerScrollEvent(); }; } else if (helperElem.style[transformProperty] !== undef) { return function(left, top, zoom) { - content.style[transformProperty] = 'translate(' + (-left) + 'px,' + (-top) + 'px) scale(' + zoom + ')'; + content.style[transformProperty] = 'translate(' + (-left) + 'px,' + (-top) + 'px)'; + self.triggerScrollEvent(); }; } else { @@ -2678,6 +2701,7 @@ var Scroller; content.style.marginLeft = left ? (-left/zoom) + 'px' : ''; content.style.marginTop = top ? (-top/zoom) + 'px' : ''; content.style.zoom = zoom || ''; + self.triggerScrollEvent(); }; } diff --git a/js/ext/angular/src/directive/ionicContent.js b/js/ext/angular/src/directive/ionicContent.js index b5c5ce5189..600a693b01 100644 --- a/js/ext/angular/src/directive/ionicContent.js +++ b/js/ext/angular/src/directive/ionicContent.js @@ -27,6 +27,7 @@ angular.module('ionic.ui.content', []) scope: { onRefresh: '&', onRefreshOpening: '&', + onScroll: '&', refreshComplete: '=', scroll: '@', hasScrollX: '@', @@ -108,6 +109,14 @@ angular.module('ionic.ui.content', []) }); } + $element.bind('scroll', function(e) { + $scope.onScroll({ + event: e, + scrollTop: e.detail.scrollTop, + scrollLeft: e.detail.scrollLeft + }); + }); + $scope.$parent.$on('scroll.refreshComplete', function(e) { sv && sv.finishPullToRefresh(); }); diff --git a/js/ext/angular/test/content.html b/js/ext/angular/test/content.html index 764820ba7a..923f62537e 100644 --- a/js/ext/angular/test/content.html +++ b/js/ext/angular/test/content.html @@ -54,24 +54,17 @@ - + - + -
- Edit -

Scroll Me

- Delete -
-
    @@ -106,6 +99,30 @@