diff --git a/dist/js/ionic.js b/dist/js/ionic.js index d221228ab3..8f6c0b386b 100644 --- a/dist/js/ionic.js +++ b/dist/js/ionic.js @@ -2501,17 +2501,21 @@ window.ionic = { this.resistance = opts.resistance; // Listen for drag and release events - window.ionic.onGesture('drag', function(e) { + ionic.onGesture('drag', function(e) { _this._handleDrag(e); }, this.el); - window.ionic.onGesture('release', function(e) { + ionic.onGesture('release', function(e) { _this._handleEndDrag(e); }, this.el); + ionic.on('webkitTransitionEnd', function(e) { + _this._endTransition(); + }); }; ionic.views.Scroll.prototype = { DECEL_RATE_NORMAL: 0.998, DECEL_RATE_FAST: 0.99, + DECEL_RATE_SLOW: 0.996, /** * Scroll to the given X and Y point, taking @@ -2531,15 +2535,22 @@ window.ionic = { el.style.webkitTransitionTimingFunction = easing; el.style.webkitTransitionDuration = time; el.style.webkitTransform = 'translate3d(0,' + y + 'px, 0)'; + console.log('TRANSITION ADDED!'); }, _initDrag: function() { + this._endTransition(); + this._isStopped = false; + }, + + _endTransition: function() { this._isDragging = false; this._drag = null; this.el.classList.remove('scroll-scrolling'); - this.el.style.webkitTransitionDuration = '0'; + console.log('REMOVING TRANSITION'); + this.el.style.webkitTransitionDuration = '0'; }, /** @@ -2569,6 +2580,11 @@ window.ionic = { window.requestAnimationFrame(function() { var content; + if(_this._isStopped) { + _this._initDrag(); + return; + } + // We really aren't dragging if(!_this._drag) { _this._startDrag(e); @@ -2600,18 +2616,18 @@ window.ionic = { }, _handleEndDrag: function(e) { - var _this = this; - // We didn't have a drag, so just init and leave - if(!_this._drag) { - _this._initDrag(); + if(!this._drag) { + this._initDrag(); return; } + // Set a flag in case we don't cleanup completely after the + // drag animation so we can cleanup the next time a drag starts + this._isStopped = true; + // Animate to the finishing point - _this._animateToStop(e); - // Cleanup - _this._initDrag(); + this._animateToStop(e); }, diff --git a/js/views/scrollView.js b/js/views/scrollView.js index 73a3532758..c0ec47bc5b 100644 --- a/js/views/scrollView.js +++ b/js/views/scrollView.js @@ -17,17 +17,21 @@ this.resistance = opts.resistance; // Listen for drag and release events - window.ionic.onGesture('drag', function(e) { + ionic.onGesture('drag', function(e) { _this._handleDrag(e); }, this.el); - window.ionic.onGesture('release', function(e) { + ionic.onGesture('release', function(e) { _this._handleEndDrag(e); }, this.el); + ionic.on('webkitTransitionEnd', function(e) { + _this._endTransition(); + }); }; ionic.views.Scroll.prototype = { DECEL_RATE_NORMAL: 0.998, DECEL_RATE_FAST: 0.99, + DECEL_RATE_SLOW: 0.996, /** * Scroll to the given X and Y point, taking @@ -47,15 +51,22 @@ el.style.webkitTransitionTimingFunction = easing; el.style.webkitTransitionDuration = time; el.style.webkitTransform = 'translate3d(0,' + y + 'px, 0)'; + console.log('TRANSITION ADDED!'); }, _initDrag: function() { + this._endTransition(); + this._isStopped = false; + }, + + _endTransition: function() { this._isDragging = false; this._drag = null; this.el.classList.remove('scroll-scrolling'); - this.el.style.webkitTransitionDuration = '0'; + console.log('REMOVING TRANSITION'); + this.el.style.webkitTransitionDuration = '0'; }, /** @@ -85,6 +96,11 @@ window.requestAnimationFrame(function() { var content; + if(_this._isStopped) { + _this._initDrag(); + return; + } + // We really aren't dragging if(!_this._drag) { _this._startDrag(e); @@ -116,18 +132,18 @@ }, _handleEndDrag: function(e) { - var _this = this; - // We didn't have a drag, so just init and leave - if(!_this._drag) { - _this._initDrag(); + if(!this._drag) { + this._initDrag(); return; } + // Set a flag in case we don't cleanup completely after the + // drag animation so we can cleanup the next time a drag starts + this._isStopped = true; + // Animate to the finishing point - _this._animateToStop(e); - // Cleanup - _this._initDrag(); + this._animateToStop(e); }, diff --git a/starters/weather/app.js b/starters/weather/app.js new file mode 100644 index 0000000000..18080f301d --- /dev/null +++ b/starters/weather/app.js @@ -0,0 +1,16 @@ +angular.module('ionic.weather', ['ionic.weather.services', 'ionic.weather.directives']) + +.constant('API_KEY', '1cc2d3de40fa5af0') + +.filter('int', function() { + return function(v) { + return parseInt(v) || ''; + }; +}) + +.controller('WeatherCtrl', function($scope, Weather) { + + Weather.getAtCurrentLocation(function(resp) { + $scope.current = resp.current_observation; + }); +}); diff --git a/starters/weather/directives.js b/starters/weather/directives.js new file mode 100644 index 0000000000..99886b8103 --- /dev/null +++ b/starters/weather/directives.js @@ -0,0 +1,58 @@ +angular.module('ionic.weather.directives', []) + +.directive('currentTime', function($timeout, $filter) { + return { + restrict: 'E', + replace: true, + template: '{{currentTime}}', + scope: { + localtz: '=', + localTime: '=' + }, + link: function($scope, $element, $attr) { + $timeout(function checkTime() { + if($scope.localTime && $scope.localtz) { + $scope.currentTime = $filter('date')(parseInt($scope.localTime), 'h:mm') + $scope.localtz; + } + $timeout(checkTime, 500); + }); + } + } + }) + +.directive('smallWeather', function($timeout) { + return { + restrict: 'E', + replace: true, + transclude: true, + template: '
', + link: function($scope, $element, $attr) { + + // Delay so we are in the DOM and can calculate sizes + $timeout(function() { + var windowHeight = window.innerHeight; + var thisHeight = $element[0].offsetHeight; + var headerHeight = document.querySelector('#header').offsetHeight; + $element[0].style.marginTop = (windowHeight - thisHeight) + 'px'; + angular.element(document.querySelector('.content')).css('-webkit-overflow-scrolling', 'auto'); + $timeout(function() { + angular.element(document.querySelector('.content')).css('-webkit-overflow-scrolling', 'touch'); + }, 50); + }); + } + } +}) + +.directive('weatherBox', function($timeout) { + return { + restrict: 'E', + replace: true, + transclude: true, + scope: { + title: '@' + }, + template: '

{{title}}

', + link: function($scope, $element, $attr) { + } + } +}) diff --git a/starters/weather/index.html b/starters/weather/index.html index 9a352f6361..31454366e4 100644 --- a/starters/weather/index.html +++ b/starters/weather/index.html @@ -1,4 +1,4 @@ - + Weather @@ -12,101 +12,39 @@ + + + + + - +
-
{{current.cover}}
+
{{current.weather}}
H: {{current.high}} L: {{current.low}}
-

{{current.temp}}°

+

{{current.temp_f | int}}°

- +
diff --git a/starters/weather/madison3.jpg b/starters/weather/madison3.jpg new file mode 100644 index 0000000000..e6e2c71cea Binary files /dev/null and b/starters/weather/madison3.jpg differ diff --git a/starters/weather/madison4.jpg b/starters/weather/madison4.jpg new file mode 100644 index 0000000000..6be72f4b40 Binary files /dev/null and b/starters/weather/madison4.jpg differ diff --git a/starters/weather/services.js b/starters/weather/services.js new file mode 100644 index 0000000000..2110cad041 --- /dev/null +++ b/starters/weather/services.js @@ -0,0 +1,30 @@ +angular.module('ionic.weather.services', ['ngResource']) + +.factory('Weather', function($resource, API_KEY) { + var baseUrl = 'http://api.wunderground.com/api/' + API_KEY; + + var locationResource = $resource(baseUrl + '/geolookup/conditions/q/:coords.json', { + callback: 'JSON_CALLBACK' + }, { + get: { + method: 'JSONP' + } + }); + return { + getAtCurrentLocation: function(cb) { + var _this = this; + + navigator.geolocation.getCurrentPosition(function(position) { + _this.getAtLocation(position.coords.latitude, position.coords.longitude, cb); + }, function(error) { + alert('Unable to get current location: ' + error); + }); + + }, + getAtLocation: function(lat,lng, cb) { + locationResource.get({ + coords: lat + ',' + lng + }, cb); + } + } +}) diff --git a/starters/weather/weather.css b/starters/weather/weather.css index da54b146b2..abe4979990 100644 --- a/starters/weather/weather.css +++ b/starters/weather/weather.css @@ -1,5 +1,5 @@ body { - background: url('madison2.jpg') no-repeat transparent; + background: url('madison3.jpg') no-repeat transparent; background-size: cover; } h1,h2,h3,h4,h5 { @@ -11,6 +11,9 @@ h1,h2,h3,h4,h5 { font-size: 12px; line-height: 20px; } +#header .title .city { + font-size: 16px; +} #main-content { color: #fff; } diff --git a/starters/weather/wunderground.png b/starters/weather/wunderground.png new file mode 100644 index 0000000000..0d666fbd6a Binary files /dev/null and b/starters/weather/wunderground.png differ diff --git a/test/scroll.html b/test/scroll.html index c78f77a1a5..dd8fe5c30b 100644 --- a/test/scroll.html +++ b/test/scroll.html @@ -11,6 +11,9 @@ border-top: 10px solid red; border-bottom: 10px solid red; } + .list-item { + padding: 10px; + }