From aea452f1624df811c8b0b2916bfb22213d153f9d Mon Sep 17 00:00:00 2001 From: Brandon Aaron Date: Tue, 29 Apr 2008 03:26:06 +0000 Subject: [PATCH] Merged dimensions with core --- Makefile | 3 +- build.xml | 1 + src/dimensions.js | 28 ++++++++++++++++ src/offset.js | 85 ++++++++++++++++++++++++++++++++++------------- test/index.html | 1 + test/unit/dimensions.js | 85 +++++++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 178 insertions(+), 25 deletions(-) create mode 100644 src/dimensions.js create mode 100644 test/unit/dimensions.js diff --git a/Makefile b/Makefile index 3ca4c3b..05e8a42 100644 --- a/Makefile +++ b/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/*\ diff --git a/build.xml b/build.xml index ddc23bf..6ccb0af 100644 --- a/build.xml +++ b/build.xml @@ -40,6 +40,7 @@ + diff --git a/src/dimensions.js b/src/dimensions.js new file mode 100644 index 0000000..e707f83 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/offset.js b/src/offset.js index 045a580..23923c3 100644 --- a/src/offset.js +++ b/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 - 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); - }; +jQuery.fn.extend({ + position: function() { + var left = 0, top = 0, elem = this[0], offset, parentOffset, offsetParent, results; + + if (elem) { + // Get *real* offsetParent + offsetParent = this.offsetParent(); + + // Get correct offsets + offset = this.offset(); + parentOffset = offsetParent.offset(); + + // Subtract element margins + offset.top -= parseInt( jQuery.curCSS(elem, 'marginTop', true) ) || 0; + offset.left -= parseInt( jQuery.curCSS(elem, 'marginLeft', true) ) || 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; - return elem && parseInt( jQuery.curCSS(elem, prop, true) ) || 0; -} \ No newline at end of file + +// Create scrollLeft and scrollTop methods +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 ]; + }; +}); \ No newline at end of file diff --git a/test/index.html b/test/index.html index bca5f5b..ce0d248 100644 --- a/test/index.html +++ b/test/index.html @@ -8,6 +8,7 @@ + diff --git a/test/unit/dimensions.js b/test/unit/dimensions.js new file mode 100644 index 0000000..af35850 --- /dev/null +++ b/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: "" }); +}); \ No newline at end of file -- 1.7.10.4