Skip to content

Commit

Permalink
dom: Adding scrollLeft and scrollTop [#34 state:review]
Browse files Browse the repository at this point in the history
  • Loading branch information
Jake Archibald committed Aug 28, 2009
1 parent 8d7f9f9 commit 4f90ec1
Show file tree
Hide file tree
Showing 3 changed files with 295 additions and 1 deletion.
130 changes: 130 additions & 0 deletions manualtests/dom/index.html
View file
@@ -0,0 +1,130 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>glow.dom</title>
<script type="text/javascript" src="../includes/manualtests.js"></script>
<!-- loading gloader, to change the location of gloader, edit manualtests.js -->
<script type="text/javascript">// <![CDATA[
document.write(
'<script type="text/javascript" src="' + manualTests.config.gloaderPath + '"> \
gloader.use("glow", { \
$map: manualTests.config.mapPath, \
$base: manualTests.config.basePath \
}); \
<' + '/script>'
);
// ]]></script>

<script type="text/javascript">gloader.load(['glow', '@VERSION@', 'glow.data', 'glow.dom', 'glow.events'])</script>

<style type="text/css">
#scroll1 {
width: 300px;
height: 200px;
overflow: scroll;
zoom: 1;
position: relative;
background: #ccc;
}
#scroll1Inner {
width: 1000px;
height: 1000px;
}
#scroll1Test1 {
position: absolute;
width: 15px;
height: 15px;
background: green;
left: 100px;
top: 200px;
}
</style>
</head>

<body>
<h1>glow.dom</h1>

<h2>glow.dom.NodeList#scrollLeft &amp; scrollTop on an element</h2>

<p>
This is provided as a manual test to ensure the element visually scrolls
</p>

<ul>
<li><a href="#" id="scroll1Get">Get the current scroll position of the element below</a></li>
<li>It should be 'Left: 0, Top: 0' when the scrollbars are at the far left &amp; top</li>
<li><a href="#" id="scroll1Set100-200">Set the scroll position to 'Left: 100, Top: 200'</a></li>
<li>A green box should appear in the top left of the element</li>
<li>Get the scroll position again, it should read 'Left: 100, Top: 200'</li>
<li><a href="#" id="scroll1Set3000-3000">Set the scroll position to 'Left: 3000, Top: 3000'</a></li>
<li>The element should scroll to the bottom right</li>
</ul>

<div id="scroll1">
<div id="scroll1Inner"></div>
<div id="scroll1Test1"></div>
</div>

<script type="text/javascript" class="showSrc">
var scroll1 = glow.dom.get('#scroll1');

glow.events.addListener('#scroll1Get', 'click', function() {
manualTests.log( 'Left: ' + scroll1.scrollLeft() + ', Top: ' + scroll1.scrollTop() );
return false;
});

glow.events.addListener('#scroll1Set100-200', 'click', function() {
scroll1.scrollLeft(100).scrollTop(200);
return false;
});

glow.events.addListener('#scroll1Set3000-3000', 'click', function() {
scroll1.scrollLeft(3000).scrollTop(3000);
return false;
});

</script>

<h2>glow.dom.NodeList#scrollLeft &amp; scrollTop on the window</h2>

<ul>
<li><a href="#" id="scroll2AddElm">Give this window some scrollbars</a></li>
<li><a href="#" id="scroll2Get">Get the current scroll position of the window</a></li>
<li>It should be 'Left: 0, Top: 0' when the scrollbars are at the far left &amp; top</li>
<li><a href="#" id="scroll2Set100-200">Set the scroll position to 'Left: 100, Top: 200'</a></li>
<li>Get the scroll position again, it should read 'Left: 100, Top: 200'</li>
<li><a href="#" id="scroll2Set3000-3000">Set the scroll position to 'Left: 3000, Top: 3000'</a></li>
<li>The window should scroll to the bottom right</li>
</ul>

<script type="text/javascript" class="showSrc">
var win = glow.dom.get(window);

glow.events.addListener('#scroll2AddElm', 'click', function() {
glow.dom.create('<div style="width:2000px; height:1000px"></div>').appendTo(document.body);
return false;
});

glow.events.addListener('#scroll2Get', 'click', function() {
manualTests.log( 'Left: ' + win.scrollLeft() + ', Top: ' + win.scrollTop() );
return false;
});

glow.events.addListener('#scroll2Set100-200', 'click', function() {
win.scrollTop(200).scrollLeft(100);
return false;
});

glow.events.addListener('#scroll2Set3000-3000', 'click', function() {
win.scrollLeft(3000).scrollTop(3000);
return false;
});

</script>


<script type="text/javascript">manualTests.showSrc();</script>
<script type="text/javascript">manualTests.log('Logging enabled');</script>
</body>
</html>
137 changes: 137 additions & 0 deletions src/dom/dom.js
View file
Expand Up @@ -838,6 +838,55 @@

return offsetParent || null;
}

/**
@name glow.dom-getScrollOffset
@private
@description Get the scrollTop / scrollLeft of a particular element
@param {Element} elm Element (or window object) to get the scroll position of
@param {String} axis Must be "Top" or "Left"
*/
function getScrollOffset(elm, axis) {
var r,
scrollProp = 'scroll' + axis;

// are we dealing with the window object or the document object?
if (elm.window) {
// get the scroll of the documentElement or the pageX/Yoffset
// - some browsers use one but not the other
r = elm.document.documentElement[scrollProp]
|| (axis == 'Left' ? elm.pageXOffset : elm.pageYOffset)
|| 0;
}
else {
r = elm[scrollProp];
}
return r;
}

/**
@name glow.dom-setScrollOffset
@private
@description Set the scrollTop / scrollLeft of a particular element
@param {Element} elm Element (or window object) to get the scroll position of
@param {String} axis Must be "Top" or "Left"
@param {Number} newVal New scroll value
*/
function setScrollOffset(elm, axis, newVal) {
var axisIsLeft = (axis == 'Left');

// are we dealing with the window object or the document object?
if (elm.window) {
// we need to get whichever value we're not setting
elm.scrollTo(
axisIsLeft ? newVal : getScrollOffset(elm, 'Left'),
!axisIsLeft ? newVal : getScrollOffset(elm, 'Top')
);
}
else {
elm['scroll' + axis] = newVal;
}
}

//public
var r = {}; //object to be returned
Expand Down Expand Up @@ -2382,7 +2431,95 @@
setElmsSize(this, height, "height");
return this;
},

/**
@name glow.dom.NodeList#scrollLeft
@function
@description Gets / sets the number of pixels the element has scrolled.
Get the value by calling without parameters, set by providing a new
value.
To get / set the scroll position of the window, use this method on
a nodelist containing the window object.
@param {Number} [val] New left scroll position
@returns {glow.dom.NodeList | Number}
Current scrollLeft value, or NodeList when setting scroll position.
@example
// get the scroll left value of #myDiv
glow.dom.get("#myDiv").scrollLeft();
@example
// set the scroll left value of #myDiv to 20
glow.dom.get("#myDiv").scrollLeft(20);
@example
// get the scrollLeft of the window
glow.dom.get(window).scrollLeft()
*/
scrollLeft: function(val) {
var i = this.length,
axis = 'Left';

if (val !== undefined) {
while (i--) {
setScrollOffset(this[i], axis, val);
}
return this;
} else {
return getScrollOffset(this[0], axis);
}
},

/**
@name glow.dom.NodeList#scrollTop
@function
@description Gets / sets the number of pixels the element has scrolled.
Get the value by calling without parameters, set by providing a new
value.
To get / set the scroll position of the window, use this method on
a nodelist containing the window object.
@param {Number} [val] New top scroll position
@returns {glow.dom.NodeList | Number}
Current scrollTop value, or NodeList when setting scroll position.
@example
// get the scroll top value of #myDiv
glow.dom.get("#myDiv").scrollTop();
@example
// set the scroll top value of #myDiv to 20
glow.dom.get("#myDiv").scrollTop(20);
@example
// get the scrollTop of the window
glow.dom.get(window).scrollTop()
*/
scrollTop: function(val) {
var i = this.length,
axis = 'Top';

if (val !== undefined) {
while (i--) {
setScrollOffset(this[i], axis, val);
}
return this;
} else {
return getScrollOffset(this[0], axis);
}
},

/**
@name glow.dom.NodeList#show
@function
Expand Down
29 changes: 28 additions & 1 deletion test/glow/dom/dom.js
View file
Expand Up @@ -2222,7 +2222,34 @@ t.test("glow.dom.NodeList#position", function() {
node.destroy();
});

/*-----------------------------------------------------------------------------*/
t.test("glow.dom.NodeList#scrollLeft & scrollTop", function() {
t.expect(6);

var testElm = glow.dom.create(' \
<div style="width:300px; height:200px; overflow:scroll; zoom:1;"> \
<div style="width:2000px;height:2000px"></div> \
</div> \
').appendTo(document.body);

// set scroll positions to 0,0
// setting scrollLeft twice to test chaining
testElm.scrollLeft(10).scrollTop(0).scrollLeft(0);

t.equals( testElm.scrollTop(), 0, 'scrollTop' );
t.equals( testElm.scrollLeft(), 0, 'scrollLeft' );

testElm.scrollLeft(30);

t.equals( testElm.scrollTop(), 0, 'scrollTop' );
t.equals( testElm.scrollLeft(), 30, 'scrollLeft' );

testElm.scrollTop(50);

t.equals( testElm.scrollTop(), 50, 'scrollTop' );
t.equals( testElm.scrollLeft(), 30, 'scrollLeft' );

testElm.destroy();
});

t.module("glow.dom.NodeList#data");

Expand Down

0 comments on commit 4f90ec1

Please sign in to comment.