From 8537fe594ee21cf75682d180c9dfb4be2490ddd0 Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Fri, 25 Oct 2013 18:11:53 -0500 Subject: [PATCH] Mousewheel works for horiz and vert --- dist/js/ionic.js | 40 ++++++++++++++++++++++++++++------------ js/views/scrollView.js | 40 ++++++++++++++++++++++++++++------------ 2 files changed, 56 insertions(+), 24 deletions(-) diff --git a/dist/js/ionic.js b/dist/js/ionic.js index 197231f116..d0f0f01b21 100644 --- a/dist/js/ionic.js +++ b/dist/js/ionic.js @@ -2481,6 +2481,17 @@ window.ionic = { })(ionic); ; +/** + * ionic.views.Scroll. Portions adapted from the great iScroll 5, which is + * also MIT licensed. + * iScroll v5.0.5 ~ (c) 2008-2013 Matteo Spinelli ~ http://cubiq.org/license + * + * Think of ionic.views.Scroll like a Javascript version of UIScrollView or any + * 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) + */ (function(ionic) { 'use strict'; var EASING_FUNCTIONS = { @@ -2645,15 +2656,22 @@ window.ionic = { newX, newY, that = this; - var totalHeight = this.el.offsetHeight; + var totalWidth = this.el.scrollWidth; + var totalHeight = this.el.scrollHeight; + var parentWidth = this.el.parentNode.offsetWidth; var parentHeight = this.el.parentNode.offsetHeight; - var maxY = Math.max(0, totalHeight - parentHeight); - var maxX = 0; + + var maxX = Math.min(0, (-totalWidth + parentWidth)); + var maxY = Math.min(0, (-totalHeight + parentHeight)); // Execute the scrollEnd event after 400ms the wheel stopped scrolling clearTimeout(this.wheelTimeout); this.wheelTimeout = setTimeout(function () { - //that._execEvent('scrollEnd'); + ionic.trigger(this.scrollEndEventName, { + target: this.el, + scrollLeft: this.x, + scrollTop: this.y + }); }, 400); e.preventDefault(); @@ -2680,21 +2698,19 @@ window.ionic = { newX = this.x + (this.isHorizontalEnabled ? wheelDeltaX * (this.invertWheel ? -1 : 1) : 0); newY = this.y + (this.isVerticalEnabled ? wheelDeltaY * (this.invertWheel ? -1 : 1) : 0); - /* if(newX > 0) { newX = 0; - } else if (newX < this.maxScrollX) { - newX = this.maxScrollX; + } else if (newX < maxX) { + newX = maxX; } - */ if(newY > 0) { newY = 0; - } else if (newY < -maxY) { - newY = -maxY; + } else if (newY < maxY) { + newY = maxY; } - this.scrollTo(0, newY, 0); + this.scrollTo(newX, newY, 0); }, _getMomentum: function (current, start, time, lowerMargin, wrapperSize) { @@ -3001,7 +3017,7 @@ window.ionic = { // 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)) { - easing = EASING_FUNCTIONS.quadratic; + easing = EASING_FUNCTIONS.bounce; } _this.scrollTo(newX, newY, time, easing); diff --git a/js/views/scrollView.js b/js/views/scrollView.js index 166811cf92..d312b21fe3 100644 --- a/js/views/scrollView.js +++ b/js/views/scrollView.js @@ -1,3 +1,14 @@ +/** + * ionic.views.Scroll. Portions adapted from the great iScroll 5, which is + * also MIT licensed. + * iScroll v5.0.5 ~ (c) 2008-2013 Matteo Spinelli ~ http://cubiq.org/license + * + * Think of ionic.views.Scroll like a Javascript version of UIScrollView or any + * 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) + */ (function(ionic) { 'use strict'; var EASING_FUNCTIONS = { @@ -162,15 +173,22 @@ newX, newY, that = this; - var totalHeight = this.el.offsetHeight; + var totalWidth = this.el.scrollWidth; + var totalHeight = this.el.scrollHeight; + var parentWidth = this.el.parentNode.offsetWidth; var parentHeight = this.el.parentNode.offsetHeight; - var maxY = Math.max(0, totalHeight - parentHeight); - var maxX = 0; + + var maxX = Math.min(0, (-totalWidth + parentWidth)); + var maxY = Math.min(0, (-totalHeight + parentHeight)); // Execute the scrollEnd event after 400ms the wheel stopped scrolling clearTimeout(this.wheelTimeout); this.wheelTimeout = setTimeout(function () { - //that._execEvent('scrollEnd'); + ionic.trigger(this.scrollEndEventName, { + target: this.el, + scrollLeft: this.x, + scrollTop: this.y + }); }, 400); e.preventDefault(); @@ -197,21 +215,19 @@ newX = this.x + (this.isHorizontalEnabled ? wheelDeltaX * (this.invertWheel ? -1 : 1) : 0); newY = this.y + (this.isVerticalEnabled ? wheelDeltaY * (this.invertWheel ? -1 : 1) : 0); - /* if(newX > 0) { newX = 0; - } else if (newX < this.maxScrollX) { - newX = this.maxScrollX; + } else if (newX < maxX) { + newX = maxX; } - */ if(newY > 0) { newY = 0; - } else if (newY < -maxY) { - newY = -maxY; + } else if (newY < maxY) { + newY = maxY; } - this.scrollTo(0, newY, 0); + this.scrollTo(newX, newY, 0); }, _getMomentum: function (current, start, time, lowerMargin, wrapperSize) { @@ -518,7 +534,7 @@ // 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)) { - easing = EASING_FUNCTIONS.quadratic; + easing = EASING_FUNCTIONS.bounce; } _this.scrollTo(newX, newY, time, easing);