diff --git a/dist/js/ionic.js b/dist/js/ionic.js index 8f6c0b386b..6ddc414296 100644 --- a/dist/js/ionic.js +++ b/dist/js/ionic.js @@ -115,8 +115,7 @@ window.ionic = { // Trigger a new event trigger: function(eventType, data) { - // TODO: Do we need to use the old-school createEvent stuff? - var event = new CustomEvent(eventType, data); + var event = new CustomEvent(eventType, { detail: data }); // Make sure to trigger the event on the given target, or dispatch it from // the window if we don't have an event target @@ -2492,13 +2491,17 @@ window.ionic = { ionic.Utils.extend(opts, { decelerationRate: ionic.views.Scroll.prototype.DECEL_RATE_NORMAL, dragThresholdY: 10, - resistance: 2 + resistance: 2, + scrollEventName: 'momentumScrolled', + intertialEventInterval: 50 }); this.el = opts.el; this.decelerationRate = opts.decelerationRate; this.dragThresholdY = opts.dragThresholdY; this.resistance = opts.resistance; + this.scrollEventName = opts.scrollEventName; + this.inertialEventInterval = opts.inertialEventInterval; // Listen for drag and release events ionic.onGesture('drag', function(e) { @@ -2528,6 +2531,8 @@ window.ionic = { * @param {easing} the animation function to use for easing */ scrollTo: function(x, y, time, easing) { + var _this = this; + easing = easing || 'cubic-bezier(0.1, 0.57, 0.1, 1)'; var el = this.el; @@ -2535,6 +2540,22 @@ window.ionic = { el.style.webkitTransitionTimingFunction = easing; el.style.webkitTransitionDuration = time; el.style.webkitTransform = 'translate3d(0,' + y + 'px, 0)'; + + // 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. + this._momentumStepTimeout = setTimeout(function eventNotify() { + var scrollTop = parseFloat(_this.el.style.webkitTransform.replace('translate3d(', '').split(',')[1]) || 0; + ionic.trigger(_this.scrollEventName, { + target: _this.el, + scrollTop: -scrollTop + }); + + if(_this._isDragging) { + _this._momentumStepTimeout = setTimeout(eventNotify, _this.inertialEventInterval); + } + }, this.inertialEventInterval) + console.log('TRANSITION ADDED!'); }, @@ -2551,6 +2572,8 @@ window.ionic = { console.log('REMOVING TRANSITION'); this.el.style.webkitTransitionDuration = '0'; + + clearTimeout(this._momentumStepTimeout) }, /** @@ -2580,6 +2603,7 @@ window.ionic = { window.requestAnimationFrame(function() { var content; + // The drag stopped already, don't process this one if(_this._isStopped) { _this._initDrag(); return; @@ -2611,6 +2635,11 @@ window.ionic = { } // Update the new translated Y point of the container _this.el.style.webkitTransform = 'translate3d(0,' + newY + 'px, 0)'; + + ionic.trigger(_this.scrollEventName, { + target: _this.el, + scrollTop: -newY + }); } }); }, diff --git a/js/utils/events.js b/js/utils/events.js index b1fd5ef149..cf045ddca4 100644 --- a/js/utils/events.js +++ b/js/utils/events.js @@ -16,8 +16,7 @@ // Trigger a new event trigger: function(eventType, data) { - // TODO: Do we need to use the old-school createEvent stuff? - var event = new CustomEvent(eventType, data); + var event = new CustomEvent(eventType, { detail: data }); // Make sure to trigger the event on the given target, or dispatch it from // the window if we don't have an event target diff --git a/js/views/scrollView.js b/js/views/scrollView.js index c0ec47bc5b..379ecf986b 100644 --- a/js/views/scrollView.js +++ b/js/views/scrollView.js @@ -8,13 +8,17 @@ ionic.Utils.extend(opts, { decelerationRate: ionic.views.Scroll.prototype.DECEL_RATE_NORMAL, dragThresholdY: 10, - resistance: 2 + resistance: 2, + scrollEventName: 'momentumScrolled', + intertialEventInterval: 50 }); this.el = opts.el; this.decelerationRate = opts.decelerationRate; this.dragThresholdY = opts.dragThresholdY; this.resistance = opts.resistance; + this.scrollEventName = opts.scrollEventName; + this.inertialEventInterval = opts.inertialEventInterval; // Listen for drag and release events ionic.onGesture('drag', function(e) { @@ -44,6 +48,8 @@ * @param {easing} the animation function to use for easing */ scrollTo: function(x, y, time, easing) { + var _this = this; + easing = easing || 'cubic-bezier(0.1, 0.57, 0.1, 1)'; var el = this.el; @@ -51,6 +57,22 @@ el.style.webkitTransitionTimingFunction = easing; el.style.webkitTransitionDuration = time; el.style.webkitTransform = 'translate3d(0,' + y + 'px, 0)'; + + // 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. + this._momentumStepTimeout = setTimeout(function eventNotify() { + var scrollTop = parseFloat(_this.el.style.webkitTransform.replace('translate3d(', '').split(',')[1]) || 0; + ionic.trigger(_this.scrollEventName, { + target: _this.el, + scrollTop: -scrollTop + }); + + if(_this._isDragging) { + _this._momentumStepTimeout = setTimeout(eventNotify, _this.inertialEventInterval); + } + }, this.inertialEventInterval) + console.log('TRANSITION ADDED!'); }, @@ -67,6 +89,8 @@ console.log('REMOVING TRANSITION'); this.el.style.webkitTransitionDuration = '0'; + + clearTimeout(this._momentumStepTimeout) }, /** @@ -96,6 +120,7 @@ window.requestAnimationFrame(function() { var content; + // The drag stopped already, don't process this one if(_this._isStopped) { _this._initDrag(); return; @@ -127,6 +152,11 @@ } // Update the new translated Y point of the container _this.el.style.webkitTransform = 'translate3d(0,' + newY + 'px, 0)'; + + ionic.trigger(_this.scrollEventName, { + target: _this.el, + scrollTop: -newY + }); } }); }, diff --git a/starters/weather/app.js b/starters/weather/app.js index 18080f301d..5c561aa201 100644 --- a/starters/weather/app.js +++ b/starters/weather/app.js @@ -12,5 +12,9 @@ angular.module('ionic.weather', ['ionic.weather.services', 'ionic.weather.direct Weather.getAtCurrentLocation(function(resp) { $scope.current = resp.current_observation; + Weather.getForecast(resp.location.lat, resp.location.lon, function(resp) { + console.log('Forecast', resp); + $scope.forecast = resp.forecast.simpleforecast; + }); }); }); diff --git a/starters/weather/index.html b/starters/weather/index.html index 31454366e4..b11ed44fbf 100644 --- a/starters/weather/index.html +++ b/starters/weather/index.html @@ -30,7 +30,7 @@
{{current.weather}}
-
H: {{current.high}} L: {{current.low}}
+
H: {{forecast.forecastday[0].high.fahrenheit}} L: {{forecast.forecastday[0].low.fahrenheit}}

{{current.temp_f | int}}°

@@ -46,5 +46,11 @@ el: s, decelerationRate: 0.87 }); + + var height = window.innerHeight; + s.addEventListener('momentumScrolled', function(e) { + // here you might add a nice blur or header fade effect + // based on how far the scrolling has gone up + }); diff --git a/starters/weather/services.js b/starters/weather/services.js index 2110cad041..36f3f41c24 100644 --- a/starters/weather/services.js +++ b/starters/weather/services.js @@ -10,7 +10,22 @@ angular.module('ionic.weather.services', ['ngResource']) method: 'JSONP' } }); + + var forecastResource = $resource(baseUrl + '/forecast/q/:coords.json', { + callback: 'JSON_CALLBACK' + }, { + get: { + method: 'JSONP' + } + }); + return { + getForecast: function(lat, lng, cb) { + forecastResource.get({ + coords: lat + ',' + lng + }, cb); + }, + getAtCurrentLocation: function(cb) { var _this = this; diff --git a/test/scroll.html b/test/scroll.html index dd8fe5c30b..fcd8535fad 100644 --- a/test/scroll.html +++ b/test/scroll.html @@ -43,6 +43,7 @@ var scroll = new ionic.views.Scroll({ el: s }); +