Merge pull request #109 from flesler/window-scroll-alt

2.0.0

LICENSE

@@ -1,6 +1,6 @@
 (The MIT License)
 
-Copyright (c) 2007-2014 Ariel Flesler <aflesler@gmail.com>
+Copyright (c) 2007-2015 Ariel Flesler <aflesler@gmail.com>
 
 Permission is hereby granted, free of charge, to any person obtaining
 a copy of this software and associated documentation files (the

README.md

@@ -29,6 +29,11 @@ CDN provided by [cdnjs](https://cdnjs.com/libraries/jquery-scrollTo)
 
 If you want the latest stable version, get the latest release from the [releases page](https://github.com/flesler/jquery.scrollTo/releases).
 
+## 2.0
+
+Version 2.0 has been recently released. It is mostly backwards compatible, if you have any issue first check [this link](https://github.com/flesler/jquery.scrollTo/wiki/Migrating-to-2.0).
+If your problem is not solved then go ahead and [report the issue](https://github.com/flesler/jquery.scrollTo/issues/new).
+
 ## Notes
 
 * Apart from the target and duration, the plugin can receive a hash of settings. Documentation and examples are included in the source file.

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "jquery.scrollTo",
-  "version": "1.4.14",
+  "version": "2.0.0",
   "description": "Easy element scrolling using jQuery.",
   "homepage": "https://github.com/flesler/jquery.scrollTo",
   "main": [
@@ -16,7 +16,7 @@
     "scrollTo.jquery.json"
   ],
   "dependencies": {
-    "jquery": ">=1.4"
+    "jquery": ">=1.8"
   },
   "keywords": [
     "browser", "animated", "animation", "jquery",

changes.txt

@@ -1,3 +1,17 @@
+2.0.0
+[Feature]
+- All settings are passed to jQuery.animate() meaning it now supports even more settings
+[Enhancement]
+- $(window)._scrollable() is no longer needed, the element is always the window
+- Delegating to jQuery the get/set of element/window scroll positions.
+[Compat]
+- Dropped support for $.scrollTo.window() and $(window)._scrollable()
+[Fix]
+- Now works consistenly on Chrome 40
+- Now works correctly on Windows Phone
+- Now works correctly on Android Browsers
+- Now works correctly on iOS Browsers
+
 1.4.14
 [Misc]
 - Internal both() function will handle nulls correctly

composer.json

@@ -17,7 +17,7 @@
         }
     ],
     "require": {
-        "components/jquery": ">=1.4"
+        "components/jquery": ">=1.8"
     },
     "extra": {
         "component": {

jquery.scrollTo.js

@@ -1,11 +1,11 @@
 /*!
  * jQuery.scrollTo
- * Copyright (c) 2007-2014 Ariel Flesler - aflesler<a>gmail<d>com | http://flesler.blogspot.com
+ * Copyright (c) 2007-2015 Ariel Flesler - aflesler<a>gmail<d>com | http://flesler.blogspot.com
  * Licensed under MIT
  * http://flesler.blogspot.com/2007/10/jqueryscrollto.html
  * @projectDescription Easy element scrolling using jQuery.
  * @author Ariel Flesler
- * @version 1.4.14
+ * @version 2.0.0
  */
 ;(function(define) {
 	'use strict';
@@ -21,30 +21,10 @@
 			limit:true
 		};
 
-		// Returns the element that needs to be animated to scroll the window.
-		// Kept for backwards compatibility (specially for localScroll & serialScroll)
-		$scrollTo.window = function() {
-			return $(window)._scrollable();
-		};
-
-		// Hack, hack, hack :)
-		// Returns the real elements to scroll (supports window/iframes, documents and regular nodes)
-		$.fn._scrollable = function() {
-			return this.map(function() {
-				var elem = this,
-					isWin = !elem.nodeName || $.inArray(elem.nodeName.toLowerCase(), ['iframe','#document','html','body']) !== -1;
-
-				if (!isWin) {
-					return elem;
-				}
-
-				var doc = (elem.contentWindow || elem).document || elem.ownerDocument || elem;
-
-				return /webkit/i.test(navigator.userAgent) || doc.compatMode === 'BackCompat' ?
-					doc.body :
-					doc.documentElement;
-			});
-		};
+		function isWin(elem) {
+			return !elem.nodeName ||
+				$.inArray(elem.nodeName.toLowerCase(), ['iframe','#document','html','body']) !== -1;
+		}		
 
 		$.fn.scrollTo = function(target, duration, settings) {
 			if (typeof duration === 'object') {
@@ -71,14 +51,16 @@
 			settings.offset = both(settings.offset);
 			settings.over = both(settings.over);
 
-			return this._scrollable().each(function() {
+			return this.each(function() {
 				// Null target yields nothing, just like jQuery does
 				if (target === null) return;
 
-				var elem = this,
+				var win = isWin(this),
+					elem = win ? this.contentWindow || window : this,
 					$elem = $(elem),
-					targ = target, toff, attr = {},
-					win = $elem.is('html,body');
+					targ = target, 
+					attr = {},
+					toff;
 
 				switch (typeof targ) {
 					// A number will pass the regex
@@ -89,8 +71,8 @@
 							// We are done
 							break;
 						}
-						// Relative/Absolute selector, no break!
-						targ = win ? $(targ) : $(targ, this);
+						// Relative/Absolute selector
+						targ = win ? $(targ) : $(targ, elem);
 						if (!targ.length) return;
 						/* falls through */
 					case 'object':
@@ -107,11 +89,11 @@
 					var Pos	= axis === 'x' ? 'Left' : 'Top',
 						pos = Pos.toLowerCase(),
 						key = 'scroll' + Pos,
-						old = elem[key],
+						prev = $(elem)[key](),
 						max = $scrollTo.max(elem, axis);
 
 					if (toff) {// jQuery / DOMElement
-						attr[key] = toff[pos] + (win ? 0 : old - $elem.offset()[pos]);
+						attr[key] = toff[pos] + (win ? 0 : prev - $elem.offset()[pos]);
 
 						// If it's a dom element, reduce the margin
 						if (settings.margin) {
@@ -142,23 +124,27 @@
 					// Queueing axes
 					if (!i && settings.queue) {
 						// Don't waste time animating, if there's no need.
-						if (old !== attr[key]) {
+						if (prev !== attr[key]) {
 							// Intermediate animation
 							animate(settings.onAfterFirst);
 						}
 						// Don't animate this axis again in the next iteration.
-						delete attr[key];
+						attr = {};
 					}
 				});
 
 				animate(settings.onAfter);
 
 				function animate(callback) {
-					$elem.animate(attr, duration, settings.easing, callback && function() {
-						callback.call(this, targ, settings);
+					var opts = $.extend({}, settings, {
+						duration: duration,
+						complete: callback && function() {
+							callback.call(elem, targ, settings);
+						}
 					});
+					$elem.animate(attr, opts);
 				}
-			}).end();
+			});
 		};
 
 		// Max scrolling position, works on quirks mode
@@ -167,12 +153,13 @@
 			var Dim = axis === 'x' ? 'Width' : 'Height',
 				scroll = 'scroll'+Dim;
 
-			if (!$(elem).is('html,body'))
+			if (!isWin(elem))
 				return elem[scroll] - $(elem)[Dim.toLowerCase()]();
 
 			var size = 'client' + Dim,
-				html = elem.ownerDocument.documentElement,
-				body = elem.ownerDocument.body;
+				doc = elem.ownerDocument || elem.document,
+				html = doc.documentElement,
+				body = doc.body;
 
 			return Math.max(html[scroll], body[scroll]) - Math.min(html[size], body[size]);
 		};
@@ -181,6 +168,20 @@
 			return $.isFunction(val) || $.isPlainObject(val) ? val : { top:val, left:val };
 		}
 
+		// Add special hooks so that window scroll properties can be animated
+		$.Tween.propHooks.scrollLeft = 
+		$.Tween.propHooks.scrollTop = {
+			get: function(t) {
+				return $(t.elem)[t.prop]();
+			},
+			set: function(t) {
+				var v = Math.round(t.now);
+				if (this.get(t) !== v) {
+					$(t.elem)[t.prop](v);
+				}
+			}
+		};
+
 		// AMD requirement
 		return $scrollTo;
 	});

package.json

@@ -1,11 +1,11 @@
 {
   "name": "jquery.scrollto",
-  "version": "1.4.14",
+  "version": "2.0.0",
   "description": "Easy element scrolling using jQuery.",
   "main": "jquery.scrollTo.js",
   "license": "MIT",
   "ignore": ["**/.*","demo","tests","changes.txt","composer.json","bower.json","scrollTo.jquery.json"],
-  "dependencies": { "jquery": ">=1.4" },
+  "dependencies": { "jquery": ">=1.8" },
   "homepage": "https://github.com/flesler/jquery.scrollTo/",
   "bugs": "https://github.com/flesler/jquery.scrollTo/issues",
   "repository": "git://github.com/flesler/jquery.scrollTo",

tests/ElemMaxY-compat.html

@@ -11,7 +11,7 @@
 	<h1>jQuery.scrollTo - Test Element MaxY - Compat Mode</h1>
 
 	<div id="viewport" style="width:600px;height:500px;overflow: auto">
-		<div style="height:1500px; width:500px; padding:0 40px; background-color:#AAA">
+		<div id="ua" style="height:1500px; width:500px; padding:0 40px; background-color:#AAA">
 			&nbsp;
 		</div>
 	</div>

tests/ElemMaxY-quirks.html

@@ -10,7 +10,7 @@
 	<h1>jQuery.scrollTo - Test Element MaxY - Quirks Mode</h1>
 
 	<div id="viewport" style="width:600px;height:500px;overflow: auto">
-		<div style="height:1500px; width:500px; padding:0 40px; background-color:#AAA">
+		<div id="ua" style="height:1500px; width:500px; padding:0 40px; background-color:#AAA">
 			&nbsp;
 		</div>
 	</div>

tests/WinMaxY-compat.html

@@ -10,7 +10,7 @@
 <body>
 	<h1>jQuery.scrollTo - Test Window MaxY - Compat Mode</h1>
 
-	<div style="height:1500px; width:500px; padding:0 50px; background-color:#AAA">
+	<div id="ua" style="height:1500px; width:500px; padding:0 50px; background-color:#AAA">
 		&nbsp;
 	</div>
 	<script type="text/javascript">

tests/WinMaxY-quirks.html

@@ -9,7 +9,7 @@
 <body>
 	<h1>jQuery.scrollTo - Test Window MaxY - Quirks Mode</h1>
 
-	<div style="height:1500px; width:500px; padding:0 50px; background-color:#AAA">
+	<div id="ua" style="height:1500px; width:500px; padding:0 50px; background-color:#AAA">
 		&nbsp;
 	</div>
 	<script type="text/javascript">

tests/WinMaxY-with-iframe-compat.html

@@ -2,10 +2,10 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
-	<title>jQuery.scrollTo - Test Window MaxY - Compat Mode</title>
+	<title>jQuery.scrollTo - Test Window MaxY with Iframe - Compat Mode</title>
 </head>
 <body>
-	<h1>jQuery.scrollTo - Test Window MaxY - Compat Mode</h1>
+	<h1>jQuery.scrollTo - Test Window MaxY with Iframe - Compat Mode</h1>
 
 	<iframe src="WinMaxY-compat.html" />
 </html>

tests/test.js

@@ -1,60 +1,21 @@
 $.fn.test = function(){
-	if( location.search == '?notest' )
+	// Hide title on iframes
+	if (window.self !== window.top) {
+		$('h1').hide();
+	}
+
+	if (location.search === '?notest') {
 		return this;
+	}
 
-	testScrollable();
-
 	$.scrollTo.defaults.axis = 'xy';
 
-	this._scrollable().find('div').html(
+	var root = this.is('iframe') ? this.contents() : $('body');
+	root.find('#ua').html(
 		navigator.userAgent +
 		'<br />' +
-		'document.compatMode is "' + document.compatMode + '"' +
-		'<br />' +
-		'scrolling the ' + this._scrollable().prop('nodeName')
+		'document.compatMode is "' + document.compatMode + '"'
 	);
 
-		/*var orig = [ $(window).scrollLeft(), $(window).scrollTop() ];
-		
-		scrollTo(0,1);
-		var elem = document.documentElement.scrollTop ? document.documentElement : document.body;
-		scrollTo(0,9e9);
-		var max = $(window).scrollTop();			
-		scrollTo(orig[0],orig[1]);
-		
-		setTimeout(function(){
-			alert( elem.nodeName + ' ' + max );
-		}, 1000 );*/
-	return this.scrollTo('max', 1000).scrollTo(0, 1000)
+	return this.scrollTo('max', 1000).scrollTo(0, 1000);
 };
-
-function assert( bool, message ){
-	if( !bool ){
-		alert('FAIL: ' + message);
-		throw new Error();
-	}
-};
-
-function f( name ){
-	return $(name)[0];
-}
-
-function testScrollable(){
-
-	$.each([ window, document, f('body'), f('html') ], function(i, elem){
-		var s = $(elem)._scrollable();
-		assert( s.length == 1, 'scrollable must always return exactly 1 element' );
-		assert( s.is('html,body'), 'scrollable must either html or body for window scrolling' );
-	});
-
-	$('body :not(iframe)').each(function(){
-		var s = $(this)._scrollable();
-		assert( s.length == 1, 'scrollable must always return exactly 1 element' );
-		assert( s[0] == this, 'scrollable must return the same element for normal element scrolling' );
-	});
-};
-
-$(function(){
-	if( location.search == '?notest' )
-		$('h1').hide();
-});