Fixes #398 - Fx.Scroll:toBottom scrolled to the right as well. Variou…

…s code cleanups * .toLeft and toRight scroll equally fast now. The values didn't account the size of the element * cleaned up the scrollIntoView and scrollToCenter
mootools · Sep 30, 2010 · 2acb93e · 2acb93e
1 parent 8f2e0ac
commit 2acb93e
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 25 deletions.
diff --git a/Source/Fx/Fx.Scroll.js b/Source/Fx/Fx.Scroll.js
@@ -53,7 +53,7 @@ Fx.Scroll = new Class({
 
 	set: function(){
 		var now = Array.flatten(arguments);
-		if (Browser.firefox) now = [Math.round(now[0]), Math.round(now[1])];
+		if (Browser.firefox) now = [Math.round(now[0]), Math.round(now[1])]; // not needed anymore in newer firefox versions
 		this.element.scrollTo(now[0] + this.options.offset.x, now[1] + this.options.offset.y);
 	},
 
@@ -65,15 +65,18 @@ Fx.Scroll = new Class({
 
 	start: function(x, y){
 		if (!this.check(x, y)) return this;
-		var scrollSize = this.element.getScrollSize(),
-			scroll = this.element.getScroll(),
+		var element = this.element,
+			scrollSize = element.getScrollSize(),
+			scroll = element.getScroll(),
+			size = element.getSize();
 			values = {x: x, y: y};
+
 		for (var z in values){
-			var max = scrollSize[z];
-			if (values[z] != null || values[z] === 0) values[z] = (typeOf(values[z]) == 'number') ? values[z] : max;
-			else values[z] = scroll[z];
+			if (!values[z] && values[z] !== 0) values[z] = scroll[z];
+			if (typeOf(values[z]) != 'number') values[z] = scrollSize[z] - size[z];
 			values[z] += this.options.offset[z];
 		}
+
 		return this.parent([scroll.x, scroll.y], [values.x, values.y]);
 	},
 
@@ -100,24 +103,26 @@ Fx.Scroll = new Class({
 
 	scrollIntoView: function(el, axes, offset){
 		axes = axes ? Array.from(axes) : ['x','y'];
-		var to = {};
 		el = document.id(el);
-		var pos = el.getPosition(this.element);
-		var size = el.getSize();
-		var scroll = this.element.getScroll();
-		var containerSize = this.element.getSize();
-		var edge = {
-			x: pos.x + size.x,
-			y: pos.y + size.y
-		};
+		var to = {},
+			position = el.getPosition(this.element),
+			size = el.getSize(),
+			scroll = this.element.getScroll(),
+			containerSize = this.element.getSize(),
+			edge = {
+				x: position.x + size.x,
+				y: position.y + size.y
+			};
+
 		['x','y'].each(function(axis){
 			if (axes.contains(axis)){
 				if (edge[axis] > scroll[axis] + containerSize[axis]) to[axis] = edge[axis] - containerSize[axis];
-				if (pos[axis] < scroll[axis]) to[axis] = pos[axis];
+				if (position[axis] < scroll[axis]) to[axis] = position[axis];
 			}
 			if (to[axis] == null) to[axis] = scroll[axis];
 			if (offset && offset[axis]) to[axis] = to[axis] + offset[axis];
 		}, this);
+
 		if (to.x != scroll.x || to.y != scroll.y) this.start(to.x, to.y);
 		return this;
 	},
@@ -126,22 +131,19 @@ Fx.Scroll = new Class({
 		axes = axes ? Array.from(axes) : ['x', 'y'];
 		el = document.id(el);
 		var to = {},
-			pos = el.getPosition(this.element),
+			position = el.getPosition(this.element),
 			size = el.getSize(),
 			scroll = this.element.getScroll(),
-			containerSize = this.element.getSize(),
-			edge = {
-				x: pos.x + size.x,
-				y: pos.y + size.y
-			};
+			containerSize = this.element.getSize();
 
 		['x','y'].each(function(axis){
 			if (axes.contains(axis)){
-				to[axis] = pos[axis] - (containerSize[axis] - size[axis])/2;
+				to[axis] = position[axis] - (containerSize[axis] - size[axis])/2;
 			}
 			if (to[axis] == null) to[axis] = scroll[axis];
 			if (offset && offset[axis]) to[axis] = to[axis] + offset[axis];
 		}, this);
+
 		if (to.x != scroll.x || to.y != scroll.y) this.start(to.x, to.y);
 		return this;
 	}

diff --git a/Tests/Fx/Fx.Scroll_(element).html b/Tests/Fx/Fx.Scroll_(element).html
@@ -1,4 +1,4 @@
-<div id="scrollExample" style="height: 300px; overflow: auto; width: 300px; position: absolute; left: 420px; top: 10px">
+<div id="scrollExample" style="height: 300px; overflow: auto; width: 400px;">
 	<ul style="width: 500px;">
 		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
 		<li id="yellow" style="color: yellow">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>

diff --git a/Tests/Fx/Fx.Scroll_(window).html b/Tests/Fx/Fx.Scroll_(window).html
@@ -11,7 +11,7 @@
 </style>
 
 <div id="scrollExample" style="position: absolute; left: 420px; top: 10px">
-	<ul style="width: 150%;">
+	<ul style="width: 1500px;">
 		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
 		<li id="yellow" style="color: yellow">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>
 		<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget sem eget enim rhoncus pharetra. Cras est eros, suscipit eget, molestie nec, commodo quis, justo. Mauris at tellus luctus mauris.</li>