diff --git a/dist/js/ionic.js b/dist/js/ionic.js index 769e9ee043..c49823072c 100644 --- a/dist/js/ionic.js +++ b/dist/js/ionic.js @@ -2484,30 +2484,22 @@ window.ionic = { (function(ionic) { 'use strict'; - /** - * The Scroll view is a container that suppoerts complex - * and customizable scroll behavior. - * - * This is a replacement for the buggy and shallow -webkit-overflow-scroll: touch. - * which is fine for web apps that want to have overflow scrolling containers, - * but HTML5 hybrid apps benefit from the same kind of scroll abstractions - * seen on iOS or Android. - */ ionic.views.ScrollView = function(opts) { var _this = this; // Extend the options with our defaults ionic.Utils.extend(opts, { - decelerationRate: ionic.views.Scroll.prototype.DECEL_RATE_NORMAL, + decelerationRate: ionic.views.ScrollView.prototype.DECEL_RATE_NORMAL, dragThresholdY: 10, resistance: 2, scrollEventName: 'momentumScrolled', - intertialEventInterval: 50, - showScrollBar: true + intertialEventInterval: 50 }); ionic.Utils.extend(this, opts); + this.el = opts.el; + // Listen for drag and release events ionic.onGesture('drag', function(e) { _this._handleDrag(e); @@ -2593,6 +2585,8 @@ window.ionic = { var scrollTop = parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[1]) || 0; this._drag = { + y: scrollTop, + pointY: e.gesture.touches[0].pageY, startY: scrollTop, resist: 1, startTime: +(new Date) @@ -2622,25 +2616,37 @@ window.ionic = { // Stop any default events during the drag e.preventDefault(); + var py = e.gesture.touches[0].pageY; + var deltaY = py - _this._drag.pointY; + console.log("Delta y", deltaY); + + _this._drag.pointY = py; + // Check if we should start dragging. Check if we've dragged past the threshold. if(!_this._isDragging && (Math.abs(e.gesture.deltaY) > _this.dragThresholdY)) { _this._isDragging = true; } if(_this._isDragging) { + + // We are dragging, grab the current content height + // and the height of the parent container var totalHeight = _this.el.offsetHeight; var parentHeight = _this.el.parentNode.offsetHeight; - var newY = _this._drag.startY + e.gesture.deltaY; + // Calculate the new Y point for the container + var newY = _this._drag.y + deltaY; // Check if the dragging is beyond the bottom or top if(newY > 0 || (-newY + parentHeight) > totalHeight) { // Rubber band - newY = newY + e.gesture.deltaY / (-_this.resistance); + newY = _this._drag.y + deltaY / 3;//(-_this.resistance); } // Update the new translated Y point of the container _this.el.style.webkitTransform = 'translate3d(0,' + newY + 'px, 0)'; + _this._drag.y = newY; + ionic.trigger(_this.scrollEventName, { target: _this.el, scrollTop: -newY @@ -2725,7 +2731,10 @@ window.ionic = { * Adapted from the great iScroll for Ionic. iScroll is licensed under MIT just like Ionic. * * Think of ionic.views.Scroll like a Javascript version of UIScrollView or any - * scroll container in any UI library. + * scroll container in any UI library. You could just use -webkit-overflow-scrolling: touch, + * but you lose control over scroll behavior that native developers have with things + * like UIScrollView, and you don't get events after the finger stops touching the + * device (after a flick, for example) * * iScroll v5.0.5 ~ (c) 2008-2013 Matteo Spinelli ~ http://cubiq.org/license */ @@ -2739,6 +2748,9 @@ var rAF = window.requestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }; +/** + * Utilities for calculating momentum, etc. + */ var utils = (function () { var me = {}; diff --git a/js/views/scrollView.js b/js/views/scrollView.js index 9e1a0c6136..b55ef36343 100644 --- a/js/views/scrollView.js +++ b/js/views/scrollView.js @@ -1,30 +1,22 @@ (function(ionic) { 'use strict'; - /** - * The Scroll view is a container that suppoerts complex - * and customizable scroll behavior. - * - * This is a replacement for the buggy and shallow -webkit-overflow-scroll: touch. - * which is fine for web apps that want to have overflow scrolling containers, - * but HTML5 hybrid apps benefit from the same kind of scroll abstractions - * seen on iOS or Android. - */ ionic.views.ScrollView = function(opts) { var _this = this; // Extend the options with our defaults ionic.Utils.extend(opts, { - decelerationRate: ionic.views.Scroll.prototype.DECEL_RATE_NORMAL, + decelerationRate: ionic.views.ScrollView.prototype.DECEL_RATE_NORMAL, dragThresholdY: 10, resistance: 2, scrollEventName: 'momentumScrolled', - intertialEventInterval: 50, - showScrollBar: true + intertialEventInterval: 50 }); ionic.Utils.extend(this, opts); + this.el = opts.el; + // Listen for drag and release events ionic.onGesture('drag', function(e) { _this._handleDrag(e); @@ -110,6 +102,8 @@ var scrollTop = parseFloat(this.el.style.webkitTransform.replace('translate3d(', '').split(',')[1]) || 0; this._drag = { + y: scrollTop, + pointY: e.gesture.touches[0].pageY, startY: scrollTop, resist: 1, startTime: +(new Date) @@ -139,25 +133,37 @@ // Stop any default events during the drag e.preventDefault(); + var py = e.gesture.touches[0].pageY; + var deltaY = py - _this._drag.pointY; + console.log("Delta y", deltaY); + + _this._drag.pointY = py; + // Check if we should start dragging. Check if we've dragged past the threshold. if(!_this._isDragging && (Math.abs(e.gesture.deltaY) > _this.dragThresholdY)) { _this._isDragging = true; } if(_this._isDragging) { + + // We are dragging, grab the current content height + // and the height of the parent container var totalHeight = _this.el.offsetHeight; var parentHeight = _this.el.parentNode.offsetHeight; - var newY = _this._drag.startY + e.gesture.deltaY; + // Calculate the new Y point for the container + var newY = _this._drag.y + deltaY; // Check if the dragging is beyond the bottom or top if(newY > 0 || (-newY + parentHeight) > totalHeight) { // Rubber band - newY = newY + e.gesture.deltaY / (-_this.resistance); + newY = _this._drag.y + deltaY / 3;//(-_this.resistance); } // Update the new translated Y point of the container _this.el.style.webkitTransform = 'translate3d(0,' + newY + 'px, 0)'; + _this._drag.y = newY; + ionic.trigger(_this.scrollEventName, { target: _this.el, scrollTop: -newY diff --git a/js/views/scrollerView.js b/js/views/scrollerView.js index fd5b7ba7f1..4ad28155f3 100644 --- a/js/views/scrollerView.js +++ b/js/views/scrollerView.js @@ -2,7 +2,10 @@ * Adapted from the great iScroll for Ionic. iScroll is licensed under MIT just like Ionic. * * Think of ionic.views.Scroll like a Javascript version of UIScrollView or any - * scroll container in any UI library. + * scroll container in any UI library. You could just use -webkit-overflow-scrolling: touch, + * but you lose control over scroll behavior that native developers have with things + * like UIScrollView, and you don't get events after the finger stops touching the + * device (after a flick, for example) * * iScroll v5.0.5 ~ (c) 2008-2013 Matteo Spinelli ~ http://cubiq.org/license */ @@ -16,6 +19,9 @@ var rAF = window.requestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }; +/** + * Utilities for calculating momentum, etc. + */ var utils = (function () { var me = {}; diff --git a/starters/weather/app.js b/starters/weather/app.js index a88b85c823..8132b5d413 100644 --- a/starters/weather/app.js +++ b/starters/weather/app.js @@ -18,7 +18,7 @@ angular.module('ionic.weather', ['ionic.weather.services', 'ionic.weather.direct $scope.getActiveBackgroundImage = function() { if($scope.activeBgImage) { var item = $scope.activeBgImage; - var url = "http://farm"+ item.farm +".static.flickr.com/"+ item.server +"/"+ item.id +"_"+ item.secret +"_m.jpg"; + var url = "http://farm"+ item.farm +".static.flickr.com/"+ item.server +"/"+ item.id +"_"+ item.secret +"_z.jpg"; return { 'background-image': 'url(' + url + ')' }; @@ -62,7 +62,7 @@ angular.module('ionic.weather', ['ionic.weather.services', 'ionic.weather.direct if($scope.bgImages) { $scope.activeBgImage = $scope.bgImages[$scope.activeBgImageIndex++ % $scope.bgImages.length]; } - $timeout(cycle, 10000); + //$timeout(cycle, 10000); }); }; diff --git a/starters/weather/index.html b/starters/weather/index.html index 08694ae512..c7f39ff094 100644 --- a/starters/weather/index.html +++ b/starters/weather/index.html @@ -47,7 +47,7 @@ var bgImage = document.getElementById('bg-image'); var header = document.getElementById('header'); - var scroll = new ionic.views.Scroll({ + var scroll = new ionic.views.ScrollView({ el: s, decelerationRate: 0.87, inertialEventInterval: 100 @@ -67,7 +67,7 @@ var per = 1 - (diff / 600); brightness = Math.max(0.7, per); } - bgImage.style.webkitFilter = 'brightness(' + brightness + ')'; + //bgImage.style.webkitFilter = 'brightness(' + brightness + ')'; }); }); diff --git a/starters/weather/weather.css b/starters/weather/weather.css index e436dd5223..07eeb9836d 100644 --- a/starters/weather/weather.css +++ b/starters/weather/weather.css @@ -1,5 +1,7 @@ body { } +#scroller { +} #bg-image { position: fixed; width: 120%; diff --git a/test/scroll.html b/test/scroll.html index 39db3beff3..57756a4c9b 100644 --- a/test/scroll.html +++ b/test/scroll.html @@ -14,20 +14,6 @@ .list-item { padding: 10px; } - #wrapper { - position:absolute; z-index:1; - top:0px; bottom:0px; left:0; - width:100%; - background:#aaa; - overflow:hidden; - } - #scroller { - position:absolute; z-index:1; - /* -webkit-touch-callout:none;*/ - -webkit-tap-highlight-color:rgba(0,0,0,0); - width:100%; - padding:0; - }
@@ -37,28 +23,26 @@