diff --git a/dist/js/ionic.js b/dist/js/ionic.js index 9737ddf48a..cfe41b351d 100644 --- a/dist/js/ionic.js +++ b/dist/js/ionic.js @@ -2758,6 +2758,10 @@ window.ionic = { refresher.style.height = '0px'; }, + didScroll: function(e) { + console.log('LIST VIEW SCROLLED', e); + }, + _initDrag: function() { ionic.views.ListView.__super__._initDrag.call(this); @@ -3028,7 +3032,11 @@ window.ionic = { * 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) + * device (after a flick, for example). + * + * Some people are afraid of using Javascript powered scrolling, but + * with today's devices, Javascript is probably the best solution for + * scrolling in hybrid apps. */ (function(ionic) { 'use strict'; @@ -3132,9 +3140,18 @@ window.ionic = { // 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; + var trans = _this.el.style.webkitTransform.replace('translate3d(', '').split(','); + var scrollLeft = parseFloat(trans[0] || 0); + var scrollTop = parseFloat(trans[1] || 0); + + _this.didScroll && _this.didScroll({ + target: _this.el, + scrollLeft: -scrollLeft, + scrollTop: -scrollTop + }); ionic.trigger(_this.scrollEventName, { target: _this.el, + scrollLeft: -scrollLeft, scrollTop: -scrollTop }); @@ -3142,8 +3159,6 @@ window.ionic = { _this._momentumStepTimeout = setTimeout(eventNotify, _this.inertialEventInterval); } }, this.inertialEventInterval) - - console.log('TRANSITION ADDED!'); }, /** @@ -3264,17 +3279,14 @@ window.ionic = { destination = wrapperSize ? lowerMargin - ( wrapperSize / 2.5 * ( speed / 8 ) ) : lowerMargin; distance = Math.abs(destination - current); duration = distance / speed; - console.log("MOMENTUM TOO FAR DOWN", destination); } else if ( destination > 0 ) { // We have dragged too far up, snap back to 0 destination = wrapperSize ? wrapperSize / 2.5 * ( speed / 8 ) : 0; distance = Math.abs(current) + destination; duration = distance / speed; - console.log("MOMENTUM TOO FAR UP", destination); } - console.log('Momentum: time:', time, 'speed:',speed, 'dest:',destination, 'dur:',duration); return { destination: Math.round(destination), duration: duration @@ -3312,7 +3324,6 @@ window.ionic = { this._drag = null; this.el.classList.remove('scroll-scrolling'); - console.log('REMOVING TRANSITION'); this.el.style.webkitTransitionDuration = '0'; clearTimeout(this._momentumStepTimeout) @@ -3398,9 +3409,6 @@ window.ionic = { var deltaX = px - _this._drag.pointX; var deltaY = py - _this._drag.pointY; - //console.log("Delta x", deltaX); - //console.log("Delta y", deltaY); - _this._drag.pointX = px; _this._drag.pointY = py; @@ -3458,17 +3466,20 @@ window.ionic = { _this.x = newX; _this.y = newY; - console.log('Moving to', newX, newY); - // Check if we need to reset the drag initial states if we've // been dragging for a bit if(timestamp - drag.startTime > 300) { - console.log('Resetting timer'); drag.startTime = timestamp; drag.startX = _this.x; drag.startY = _this.y; } + _this.didScroll && _this.didScroll({ + target: _this.el, + scrollLeft: -newX, + scrollTop: -newY + }); + // Trigger a scroll event ionic.trigger(_this.scrollEventName, { target: _this.el, @@ -3546,8 +3557,6 @@ window.ionic = { // If we've moved, we will need to scroll if(newX != _this.x || newY != _this.y) { - console.trace("SCROLL FROM", _this.x, _this.y, "TO", newX, newY); - // If the end position is out of bounds, change the function we use for easing // to get a different animation for the rubber banding if ( newX > 0 || newX < (-totalWidth + parentWidth) || newY > 0 || newY < (-totalHeight + parentHeight)) { diff --git a/js/views/listViewScroll.js b/js/views/listViewScroll.js index 3b21138610..3dc9b2170f 100644 --- a/js/views/listViewScroll.js +++ b/js/views/listViewScroll.js @@ -396,6 +396,10 @@ refresher.style.height = '0px'; }, + didScroll: function(e) { + console.log('LIST VIEW SCROLLED', e); + }, + _initDrag: function() { ionic.views.ListView.__super__._initDrag.call(this); diff --git a/js/views/scrollView.js b/js/views/scrollView.js index 6f016b31e6..91fdf9ec67 100644 --- a/js/views/scrollView.js +++ b/js/views/scrollView.js @@ -7,7 +7,11 @@ * 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) + * device (after a flick, for example). + * + * Some people are afraid of using Javascript powered scrolling, but + * with today's devices, Javascript is probably the best solution for + * scrolling in hybrid apps. */ (function(ionic) { 'use strict'; @@ -111,9 +115,18 @@ // 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; + var trans = _this.el.style.webkitTransform.replace('translate3d(', '').split(','); + var scrollLeft = parseFloat(trans[0] || 0); + var scrollTop = parseFloat(trans[1] || 0); + + _this.didScroll && _this.didScroll({ + target: _this.el, + scrollLeft: -scrollLeft, + scrollTop: -scrollTop + }); ionic.trigger(_this.scrollEventName, { target: _this.el, + scrollLeft: -scrollLeft, scrollTop: -scrollTop }); @@ -121,8 +134,6 @@ _this._momentumStepTimeout = setTimeout(eventNotify, _this.inertialEventInterval); } }, this.inertialEventInterval) - - console.log('TRANSITION ADDED!'); }, /** @@ -243,17 +254,14 @@ destination = wrapperSize ? lowerMargin - ( wrapperSize / 2.5 * ( speed / 8 ) ) : lowerMargin; distance = Math.abs(destination - current); duration = distance / speed; - console.log("MOMENTUM TOO FAR DOWN", destination); } else if ( destination > 0 ) { // We have dragged too far up, snap back to 0 destination = wrapperSize ? wrapperSize / 2.5 * ( speed / 8 ) : 0; distance = Math.abs(current) + destination; duration = distance / speed; - console.log("MOMENTUM TOO FAR UP", destination); } - console.log('Momentum: time:', time, 'speed:',speed, 'dest:',destination, 'dur:',duration); return { destination: Math.round(destination), duration: duration @@ -291,7 +299,6 @@ this._drag = null; this.el.classList.remove('scroll-scrolling'); - console.log('REMOVING TRANSITION'); this.el.style.webkitTransitionDuration = '0'; clearTimeout(this._momentumStepTimeout) @@ -377,9 +384,6 @@ var deltaX = px - _this._drag.pointX; var deltaY = py - _this._drag.pointY; - //console.log("Delta x", deltaX); - //console.log("Delta y", deltaY); - _this._drag.pointX = px; _this._drag.pointY = py; @@ -437,17 +441,20 @@ _this.x = newX; _this.y = newY; - console.log('Moving to', newX, newY); - // Check if we need to reset the drag initial states if we've // been dragging for a bit if(timestamp - drag.startTime > 300) { - console.log('Resetting timer'); drag.startTime = timestamp; drag.startX = _this.x; drag.startY = _this.y; } + _this.didScroll && _this.didScroll({ + target: _this.el, + scrollLeft: -newX, + scrollTop: -newY + }); + // Trigger a scroll event ionic.trigger(_this.scrollEventName, { target: _this.el, @@ -525,8 +532,6 @@ // If we've moved, we will need to scroll if(newX != _this.x || newY != _this.y) { - console.trace("SCROLL FROM", _this.x, _this.y, "TO", newX, newY); - // If the end position is out of bounds, change the function we use for easing // to get a different animation for the rubber banding if ( newX > 0 || newX < (-totalWidth + parentWidth) || newY > 0 || newY < (-totalHeight + parentHeight)) {