Forecast data

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, { detail: data });
-      var event = new CustomEvent(eventType, 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
+          });
         }
       });
     },

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, { detail: data });
-      var event = new CustomEvent(eventType, 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

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
+          });
         }
       });
     },

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;
+    });
   });
 });

starters/weather/index.html

@@ -30,7 +30,7 @@
     <div id="scroller" class="scroll padding" style="margin-top:44px">
       <small-weather>
         <h5>{{current.weather}}</h5>
-        <h5>H: {{current.high}} L: {{current.low}}</h5>
+        <h5>H: {{forecast.forecastday[0].high.fahrenheit}} L: {{forecast.forecastday[0].low.fahrenheit}}</h5>
         <h1 class="current-temp">{{current.temp_f | int}}&deg;</h1>
       </small-weather>
       <weather-box title="Forecast" style="height: 400px">
@@ -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
+    });
   </script>
 </html>

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;
 

test/scroll.html

@@ -43,6 +43,7 @@
       var scroll = new ionic.views.Scroll({
         el: s
       });
+
     </script>
   </body>
 </html>