Ticket #6409: 6409.2.patch

_base/scroll.js

@@ -14 +14 @@
         // It's not enough just to scroll the menu node into view if
         // node.scrollIntoView hides part of the parent's scrollbar,
         // so just manage the parent scrollbar ourselves
+
+        // all the V/H object members below are to reuse code for both directions
+        function addPseudoAttrs(element){
+                // use border box for node since margin visibility is least important
+                // use content box for parents since we don't care about parent border and padding
+                // use HTML size instead of BODY size since that's where the scrollbars are defined
+                var parent = element.parentNode;
+                var nodeBox = dojo._getBorderBox(element);
+                if(element.tagName=="BODY"){
+                        htmlBox = dojo._getBorderBox(parent);
+                        // this varies depending on browser and DOCTYPE
+                        if(htmlBox.w < nodeBox.w){ nodeBox.w = htmlBox.w; }
+                        if(htmlBox.h < nodeBox.h){ nodeBox.h = htmlBox.h; }
+                }
+                size = { H: nodeBox.w, V: nodeBox.h };
+                var start = { H:element.offsetLeft, V:element.offsetTop };
+                // check if this node and its parent share the same offsetParent
+                element._startIsRelative = !(parent && parent.tagName && parent.offsetParent == element.offsetParent);
+                var bp = dojo._getBorderExtents(element);
+                if(element != node){ // parent = skip border
+                        start.H += bp.l;
+                        start.V += bp.t;
+                }else{ // original node = add border to size
+                        size.H += bp.w;
+                        size.V += bp.h;
+                }
+                // FIXME: _getBorderBox/FF2 workaround
+                var fudgeStart = { H:0, V:0 };
+                if(dojo.isFF == 2){
+                        var parent = element.parentNode;
+                        if(parent && parent.tagName){
+                                var bp = dojo._getBorderExtents(parent);
+                                fudgeStart.H += bp.l;
+                                fudgeStart.V += bp.t;
+                        }
+                }
+                element._size = size;
+                element._start = start;
+                element._fudgeStart = fudgeStart;
+        }
+
+        var r2l = !dojo._isBodyLtr();
+        node = dojo.byId(node);
         var parent = node.parentNode;
-        var parentBottom = parent.scrollTop + dojo.marginBox(parent).h; //PORT was getBorderBox
-        var nodeBottom = node.offsetTop + dojo.marginBox(node).h;
-        if(parentBottom < nodeBottom){
-                parent.scrollTop += (nodeBottom - parentBottom);
-        }else if(parent.scrollTop > node.offsetTop){
-                parent.scrollTop -= (parent.scrollTop - node.offsetTop);
+        addPseudoAttrs(node);
+        var xy = { V: null, H: null };
+        while(parent && parent.tagName){ // tagName check needed for IE since HTML node has a tag-less parent
+                addPseudoAttrs(parent);
+                // for both x and y directions
+                for (var dir in xy){
+                        var scrollAttr = (dir=="H")? "scrollLeft" : "scrollTop";
+                        var oldScroll = parent[scrollAttr];
+                        nodeRelativeOffset = node._start[dir] + node._fudgeStart[dir] - (node._startIsRelative? 0 : parent._start[dir]) - oldScroll;
+                        if(parent._size[dir] < node._size[dir]){ // see if the node will be clipped
+                                node._size[dir] = parent._size[dir]; // simplify calculations
+                        }
+                        var overflow = nodeRelativeOffset + node._size[dir] - parent._size[dir];
+                        var underflow = nodeRelativeOffset;
+                        var scrollAmount;
+                        // see if we should scroll forward or backward
+                        if(underflow <= 0){
+                                scrollAmount = underflow;
+                        }else if(overflow <= 0){
+                                scrollAmount = 0;
+                        }else if(underflow < overflow){
+                                scrollAmount = underflow;
+                        }else{
+                                scrollAmount = overflow;
+                        }
+                        var newScroll = scrollAmount + oldScroll;
+                        if(newScroll < 0 && r2l && dir=="H"){ // safari and IE need an adjustment since inline nodes return the wrong offsetLeft in right-to-left mode
+                                newScroll += parent.scrollWidth - parent.clientWidth;
+                        }
+                        parent[scrollAttr] = newScroll; // actually perform the scroll
+                        nodeRelativeOffset -= parent[scrollAttr] - oldScroll;
+                        parent._size[dir] = node._size[dir]; // now we only want to show this portion of the parent
+                        parent._start[dir] += nodeRelativeOffset; // the new visible portion of the parent may have tweaked coordinates
+                }
+                node = parent; // now see if the parent needs to be scrolled as well
+                parent = parent.parentNode;
         }
 };

_Widget.js

@@ -297 +297 @@
         },
 
         _onFocus: function(e){
+                dijit.scrollIntoView(this.domNode);
                 this.onFocus();
         },
 

tests/_base/test_scroll.html

@@ +1 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+                "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+        <title>Scroll Unit Test</title>
+        <style type="text/css">
+                @import "../../../dojo/resources/dojo.css";
+                @import "../css/dijitTests.css";
+        </style>
+        <script type="text/javascript" src="../../../dojo/dojo.js"
+                djConfig="isDebug: true"></script>
+        <script type="text/javascript" src="../_testCommon.js"></script>
+
+        <script type="text/javascript">
+                dojo.require("doh.runner");
+                dojo.require("dijit._base.scroll");
+
+                function scrollit(){
+                        dijit.scrollIntoView('q1');
+                }
+
+                dojo.addOnLoad(function(){
+                        doh.register("dijit._base.scroll",
+                        [
+                                function scrollIntoView(){
+                                        dojo.global.scrollTo(0,0);
+                                        var s1 = dojo.byId('s1');
+                                        s1.scrollTop = s1.scrollLeft = 0;
+                                        scrollit();
+                                        doh.is(s1.scrollLeft, 85);
+                                        doh.is(s1.scrollTop, 111);
+                                        dojo.global.scrollTo(0,2000);
+                                }
+                        ]);
+                        doh.run();
+                });
+        </script>
+</head>
+<body onclick="scrollit()">
+        <h1><center>scrollIntoView test: shows NO blue background.  Click document body to re-scroll</center></h1>
+        <img src="../../../dojo/resources/blank.gif" style="height:888px;width:1px;display:block;background-color:white;">
+        <div id="s1" style="width:650px;height:600px;overflow:scroll;background-color:blue;border:0px solid white;margin:0px;padding:0px;border-width:45px 35px 15px 25px;"
+                ><img src="../../../dojo/resources/blank.gif" style="height:111px;width:1px;display:block;"
+                ><nobr id="p1" style="display:block;border:0px;padding:0px;margin:0px;"
+                        ><img id="c1" src="../../../dojo/resources/blank.gif" style="height:1px;width:85px;display:inline;"
+                        ><img id="q1" src="../../../dojo/resources/blank.gif" style="background-color:white;width:650px;height:600px;display:inline;overflow:visible;"
+                        ><img id="c2" src="../../../dojo/resources/blank.gif" style="height:1px;width:85px;display:inline;"
+                ></nobr
+                ><img src="../../../dojo/resources/blank.gif" style="height:222px;width:1px;display:block;"
+        ></div>
+        <img src="../../../dojo/resources/blank.gif" style="height:555px;width:1px;display:block;">
+</body>
+</html>