Merged dimensions with core

Makefile

@@ -13,7 +13,8 @@ BASE_FILES = ${SRC_DIR}/core.js\
 	${SRC_DIR}/event.js\
 	${SRC_DIR}/ajax.js\
 	${SRC_DIR}/fx.js\
-	${SRC_DIR}/offset.js
+	${SRC_DIR}/offset.js\
+	${SRC_DIR}/dimensions.js
 
 PLUGINS = ${PLUG_DIR}/button/*\
 	${PLUG_DIR}/center/*\

build.xml

@@ -40,6 +40,7 @@
             <fileset dir="${SRC_DIR}" includes="ajax.js" />
             <fileset dir="${SRC_DIR}" includes="fx.js" />
             <fileset dir="${SRC_DIR}" includes="offset.js" />
+            <fileset dir="${SRC_DIR}" includes="dimensions.js" />
             <fileset dir="${SRC_DIR}" includes="outro.js" />
         </concat>
     	<java jar="${JAR}" fork="true">

src/dimensions.js

@@ -0,0 +1,28 @@
+// Create innerHeight, innerWidth, outerHeight and outerWidth methods
+jQuery.each([ "Height", "Width" ], function(i, name){
+
+	var tl = name == "Height" ? "Top"    : "Left",  // top or left
+		br = name == "Height" ? "Bottom" : "Right"; // bottom or right
+	
+	// innerHeight and innerWidth
+	jQuery.fn["inner" + name] = function(){
+		return this[ name.toLowerCase() ]() + 
+			num(this, "padding" + tl) + 
+			num(this, "padding" + br);
+	};
+	
+	// outerHeight and outerWidth
+	jQuery.fn["outer" + name] = function(margin) {
+		return this["inner" + name]() + 
+			num(this, "border" + tl + "Width") +
+			num(this, "border" + br + "Width") +
+			(!!margin ? 
+				num(this, "margin" + tl) + num(this, "margin" + br) : 0);
+	};
+	
+});
+
+function num(elem, prop) {
+	elem = elem.jquery ? elem[0] : elem;
+	return elem && parseInt( jQuery.curCSS(elem, prop, true) ) || 0;
+}

src/offset.js

@@ -98,31 +98,68 @@ jQuery.fn.offset = function() {
 	return results;
 };
 
-// Create innerHeight, innerWidth, outerHeight and outerWidth methods
-jQuery.each(["Height", "Width"], function(i, name){
 
-	var tl = name == "Height" ? "Top"    : "Left",  // top or left
+jQuery.fn.extend({
-		br = name == "Height" ? "Bottom" : "Right"; // bottom or right
+	position: function() {
-	
+		var left = 0, top = 0, elem = this[0], offset, parentOffset, offsetParent, results;
-	// innerHeight and innerWidth
+		
-	jQuery.fn["inner" + name] = function(){
+		if (elem) {
-		return this[ name.toLowerCase() ]() + 
+			// Get *real* offsetParent
-			num(this, "padding" + tl) + 
+			offsetParent = this.offsetParent();
-			num(this, "padding" + br);
+			
-	};
+			// Get correct offsets
-	
+			offset       = this.offset();
-	// outerHeight and outerWidth
+			parentOffset = offsetParent.offset();
-	jQuery.fn["outer" + name] = function(margin) {
+			
-		return this["inner" + name]() + 
+			// Subtract element margins
-			num(this, "border" + tl + "Width") +
+			offset.top  -= parseInt( jQuery.curCSS(elem, 'marginTop', true) ) || 0;
-			num(this, "border" + br + "Width") +
+			offset.left -= parseInt( jQuery.curCSS(elem, 'marginLeft', true) ) || 0;
-			(!!margin ? 
+			
-				num(this, "margin" + tl) + num(this, "margin" + br) : 0);
+			// Add offsetParent borders
-	};
+			parentOffset.top  += parseInt( jQuery.curCSS(offsetParent[0], 'borderTopWidth', true) ) || 0;
+			parentOffset.left += parseInt( jQuery.curCSS(offsetParent[0], 'borderLeftWidth', true) ) || 0;
+			
+			// Subtract the two offsets
+			results = {
+				top:  offset.top  - parentOffset.top,
+				left: offset.left - parentOffset.left
+			};
+		}
+		
+		return results;
+	},
 	
+	offsetParent: function() {
+		var offsetParent = this[0].offsetParent;
+		while ( offsetParent && (!/^body|html$/i.test(offsetParent.tagName) && jQuery.css(offsetParent, 'position') == 'static') )
+			offsetParent = offsetParent.offsetParent;
+		return jQuery(offsetParent);
+	}
 });
 
-function num(elem, prop) {
+
-	elem = elem.jquery ? elem[0] : elem;
+// Create scrollLeft and scrollTop methods
-	return elem && parseInt( jQuery.curCSS(elem, prop, true) ) || 0;
+jQuery.each( ['Left', 'Top'], function(i, name) {
-}
+	jQuery.fn[ 'scroll' + name ] = function(val) {
+		if (!this[0]) return;
+		
+		return val != undefined ?
+		
+			// Set the scroll offset
+			this.each(function() {
+				this == window || this == document ?
+					window.scrollTo( 
+						name == 'Left' ? val : jQuery(window)[ 'scrollLeft' ](),
+						name == 'Top'  ? val : jQuery(window)[ 'scrollTop'  ]()
+					) :
+					this[ 'scroll' + name ] = val;
+			}) :
+			
+			// Return the scroll offset
+			this[0] == window || this[0] == document ?
+				self[ (name == 'Left' ? 'pageXOffset' : 'pageYOffset') ] ||
+					jQuery.boxModel && document.documentElement[ 'scroll' + name ] ||
+					document.body[ 'scroll' + name ] :
+				this[0][ 'scroll' + name ];
+	};
+});

test/index.html

@@ -8,6 +8,7 @@
 	<script type="text/javascript" src="../dist/jquery.js"></script>
 	<script type="text/javascript" src="data/testrunner.js"></script>
 	<script type="text/javascript" src="unit/core.js"></script>
+	<script type="text/javascript" src="unit/dimensions.js"></script>
 	<script type="text/javascript" src="unit/selector.js"></script>
 	<script type="text/javascript" src="unit/event.js"></script>
 	<script type="text/javascript" src="unit/ajax.js"></script>

test/unit/dimensions.js

@@ -0,0 +1,85 @@
+module("dimensions");
+
+test("innerWidth()", function() {
+	expect(3);
+
+	var $div = $("#nothiddendiv");
+	// set styles
+	$div.css({
+		margin: 10,
+		border: "2px solid #fff",
+		width: 30
+	});
+	
+	equals($div.innerWidth(), 30, "Test with margin and border");
+	$div.css("padding", "20px");
+	equals($div.innerWidth(), 70, "Test with margin, border and padding");
+	$div.hide();
+	equals($div.innerWidth(), 70, "Test hidden div");
+	
+	// reset styles
+	$div.css({ display: "", border: "", padding: "", width: "", height: "" });
+});
+
+test("innerHeight()", function() {
+	expect(3);
+	
+	var $div = $("#nothiddendiv");
+	// set styles
+	$div.css({
+		margin: 10,
+		border: "2px solid #fff",
+		height: 30
+	});
+	
+	equals($div.innerHeight(), 30, "Test with margin and border");
+	$div.css("padding", "20px");
+	equals($div.innerHeight(), 70, "Test with margin, border and padding");
+	$div.hide();
+	equals($div.innerHeight(), 70, "Test hidden div");
+	
+	// reset styles
+	$div.css({ display: "", border: "", padding: "", width: "", height: "" });
+});
+
+test("outerWidth()", function() {
+	expect(6);
+	
+	var $div = $("#nothiddendiv");
+	$div.css("width", 30);
+	
+	equals($div.outerWidth(), 30, "Test with only width set");
+	$div.css("padding", "20px");
+	equals($div.outerWidth(), 70, "Test with padding");
+	$div.css("border", "2px solid #fff");
+	equals($div.outerWidth(), 74, "Test with padding and border");
+	$div.css("margin", "10px");
+	equals($div.outerWidth(), 74, "Test with padding, border and margin without margin option");
+	equals($div.outerWidth(true), 94, "Test with padding, border and margin with margin option");
+	$div.hide();
+	equals($div.outerWidth(true), 94, "Test hidden div with padding, border and margin with margin option");
+	
+	// reset styles
+	$div.css({ display: "", border: "", padding: "", width: "", height: "" });
+});
+
+test("outerHeight()", function() {
+	expect(6);
+	
+	var $div = $("#nothiddendiv");
+	$div.css("height", 30);
+	
+	equals($div.outerHeight(), 30, "Test with only width set");
+	$div.css("padding", "20px");
+	equals($div.outerHeight(), 70, "Test with padding");
+	$div.css("border", "2px solid #fff");
+	equals($div.outerHeight(), 74, "Test with padding and border");
+	$div.css("margin", "10px");
+	equals($div.outerHeight(), 74, "Test with padding, border and margin without margin option");
+	equals($div.outerHeight(true), 94, "Test with padding, border and margin with margin option");
+	$div.hide();
+	equals($div.outerHeight(true), 94, "Test hidden div with padding, border and margin with margin option");
+	
+	// reset styles
+	$div.css({ display: "", border: "", padding: "", width: "", height: "" });
+});