Merged dimensions with core

diff --git a/Makefile b/Makefile
index 3ca4c3b..05e8a42 100644 (file)
--- 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 (file)
--- a/build.xml
+++ b/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">

diff --git a/src/dimensions.js b/src/dimensions.js
new file mode 100644 (file)
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 (file)
--- 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 (file)
--- a/test/index.html
+++ b/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>

diff --git a/test/unit/dimensions.js b/test/unit/dimensions.js
new file mode 100644 (file)
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