Permalink
Browse files

fixed bug when setting container height by an option. several code cl…

…eanups.
  • Loading branch information...
thomd committed Apr 2, 2011
1 parent 492c993 commit 076d05f9ca5629861f3fdcc74c590e7454b60934
Showing with 120 additions and 89 deletions.
  1. +1 −1 .gitignore
  2. +1 −1 README.md
  3. +48 −22 jquery.scroll.js
  4. +22 −37 test/scroll.fixture.js
  5. +48 −28 test/scroll.test.js
View
@@ -1,4 +1,4 @@
jScrollPane.js
.later
TODO
-temp.*
+temp*
View
@@ -22,7 +22,7 @@ Running the tests:
## Documentation
-A neat [documentation][docu] is done with [dox][dox] documentation generator:
+A neat [documentation][docu] is done with the [dox][dox] documentation generator:
> npm install dox
> dox --title jquery-scroll jquery.scroll.js css/scrollbar.css > docs/jquery.scroll.html
View
@@ -67,49 +67,48 @@
//
return this.each(function(){
- var container = $(this),
+ var container = $(this)
// properties
- props = {
+ , props = {
arrows: options.arrows
};
- // set new container height if explicitly set by an option
- if(options.containerHeight){
+ // set container height explicitly if given by an option
+ if(options.containerHeight != 'auto'){
container.height(options.containerHeight);
}
-
+
// save container height in properties
props.containerHeight = container.height();
- // save inner content height in properties. This is the height of all elements within the container.
- props.contentHeight = 0;
- container.children().each(function(){
- props.contentHeight += $(this).outerHeight();
- });
+ // save content height in properties
+ props.contentHeight = $.fn.scrollbar.contentHeight(container);
// if the content height is lower than the container height, do nothing and return.
if(props.contentHeight <= props.containerHeight){
return true;
}
- // create scrollbar object
+ // create a new scrollbar object
var scrollbar = new $.fn.scrollbar.Scrollbar(container, props, options);
- // build, initialize & append events
- scrollbar.buildHtml();
- scrollbar.initHandle();
- scrollbar.appendEvents();
+ // build HTML, initialize Handle and append Events
+ scrollbar.buildHtml().initHandle().appendEvents();
});
};
- //
- // default options
+ // # default options
+ //
//
$.fn.scrollbar.defaults = {
- containerHeight: null, // height of content container. If set to null, the current height before DOM manipulation is used
+
+ // ### containerHeight `Number` or `'auto'`
+ //
+ // height of content container. If set to `'auto'`, the naturally rendered height is used
+ containerHeight: 'auto',
arrows: true, // render up- and down-arrows
handleHeight: 'auto', // height of handle [px || 'auto']. If set to 'auto', the height will be calculated proportionally to the container-content height.
@@ -234,7 +233,9 @@
this.handleArrows.css({
'position': 'absolute',
'cursor': 'pointer'
- });
+ });
+
+ return this;
},
@@ -248,7 +249,7 @@
// height of handle
this.props.handleHeight = this.opts.handleHeight == 'auto' ? Math.max(Math.ceil(this.props.containerHeight * this.props.handleContainerHeight / this.props.contentHeight), this.opts.handleMinHeight) : this.opts.handleHeight;
this.handle.height(this.props.handleHeight);
-
+
// if handle has a border (always be aware of the css box-model), we need to correct the handle height.
this.handle.height(2 * this.handle.height() - this.handle.outerHeight(true));
@@ -263,6 +264,8 @@
// initial position of handle at top
this.handle.top = 0;
+
+ return this;
},
@@ -293,6 +296,8 @@
this.handle.bind('click.scrollbar', this.preventClickBubbling);
this.handleContainer.bind('click.scrollbar', this.preventClickBubbling);
this.handleArrows.bind('click.scrollbar', this.preventClickBubbling);
+
+ return this;
},
@@ -514,9 +519,30 @@
};
+ // ----- helpers ------------------------------------------------------------------------------
- // ----- default css ---------------------------------------------------------------------
+ //
+ // determine content height
+ //
+ $.fn.scrollbar.contentHeight = function(elem){
+
+ // wrap content temporarily to meassure content height.
+ // as we have to wrap the items with an overflowed container, we set it here the same way.
+
+ // wrapper container need to have an overflow set to 'hidden' to respect margin collapsing
+ var content = elem.children();
+ var height = content.wrapAll('<div/>').parent().css({overflow:'hidden'}).height();
+
+ // unwrap as elem was passed by reference!
+ content.unwrap('<div/>');
+
+ return height;
+ };
+
+ //
+ // ----- default css ---------------------------------------------------------------------
+ //
$.fn.defaultCss = function(styles){
// 'not-defined'-values
@@ -540,11 +566,11 @@
});
};
+
//
// ----- mousewheel event ---------------------------------------------------------------------
// based on jquery.mousewheel.js from Brandon Aaron (brandon.aaron@gmail.com || http://brandonaaron.net)
//
-
$.event.special.mousewheel = {
setup: function(){
View
@@ -6,50 +6,35 @@ if (!jstestdriver) {
jstestdriver.Fixture = function() {
/*:DOC +=
- <div class="scrollbar" style="max-height:100px;">
- <p>1</p>
- <p>2</p>
- <p>3</p>
- <p>4</p>
- <p>5</p>
- <p>6</p>
- <p>7</p>
- <p>8</p>
- <p>9</p>
+ <div class="scroll" style="height:100px;">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+ <div>4</div>
+ <div>5</div>
+ <div>6</div>
+ <div>7</div>
+ <div>8</div>
+ <div>9</div>
</div>
*/
/*:DOC +=
- <div class="no-scrollbar">
- <p>1</p>
- <p>2</p>
- <p>3</p>
- <p>4</p>
- <p>5</p>
- <p>6</p>
- <p>7</p>
- <p>8</p>
- <p>9</p>
- </div>
- */
-
- /*:DOC +=
- <div class="no-arrows" style="max-height:100px;">
- <p>1</p>
- <p>2</p>
- <p>3</p>
- <p>4</p>
- <p>5</p>
- <p>6</p>
- <p>7</p>
- <p>8</p>
- <p>9</p>
+ <div class="visible">
+ <div>1</div>
+ <div>2</div>
+ <div>3</div>
+ <div>4</div>
+ <div>5</div>
+ <div>6</div>
+ <div>7</div>
+ <div>8</div>
+ <div>9</div>
</div>
*/
return {
- scrollbar: $('.scrollbar'),
- noScrollbar: $('.no-scrollbar'),
- noArrows: $('.no-arrows')
+ scroll: $('.scroll'),
+ visible: $('.visible'),
};
};
View
@@ -1,11 +1,16 @@
-
+//
+// test existence of plugin
+//
TestCase("PluginTest", {
testExistenceOfPlugin: function(){
assertTrue("scroll plugin", !!$.fn.scrollbar);
}
});
+//
+// test generation of html nodes
+//
TestCase("ScrollbarGeneratorTest", {
setUp: function(){
@@ -17,14 +22,30 @@ TestCase("ScrollbarGeneratorTest", {
},
testGenerationOfScrollbarHandle: function(){
- assertEquals(0, this.fixture.scrollbar.find('.scrollbar-handle').length);
- this.fixture.scrollbar.scrollbar();
- assertEquals(1, this.fixture.scrollbar.find('.scrollbar-handle').length);
+ assertEquals(0, this.fixture.scroll.find('.scrollbar-handle').length);
+ this.fixture.scroll.scrollbar();
+ assertEquals(1, this.fixture.scroll.find('.scrollbar-handle').length);
},
testGenerationOfNoScrollbar: function(){
- this.fixture.noScrollbar.scrollbar();
- assertEquals(0, this.fixture.noScrollbar.find('.scrollbar-handle').length);
+ this.fixture.visible.scrollbar();
+ assertEquals(0, this.fixture.visible.find('.scrollbar-handle').length);
+ },
+
+ testFullVisibleContentContainer: function(){
+ var contentHeight = $.fn.scrollbar.contentHeight(this.fixture.visible);
+ this.fixture.visible.scrollbar({
+ containerHeight: contentHeight + 1
+ });
+ assertEquals(0, this.fixture.visible.find('.scrollbar-handle').length);
+ },
+
+ testOverflowedContentContainer: function(){
+ var contentHeight = $.fn.scrollbar.contentHeight(this.fixture.visible);
+ this.fixture.visible.scrollbar({
+ containerHeight: contentHeight - 1
+ });
+ assertEquals(1, this.fixture.visible.find('.scrollbar-handle').length);
}
});
@@ -42,48 +63,47 @@ TestCase("OptionsTest", {
},
testFixedHandleHeight: function(){
- this.fixture.scrollbar.scrollbar({handleHeight:20});
- assertEquals(20, this.fixture.scrollbar.find('.scrollbar-handle').height());
+ this.fixture.scroll.scrollbar({
+ handleHeight: 20
+ });
+ assertEquals(20, this.fixture.scroll.find('.scrollbar-handle').height());
},
testMinimumHandleHeight: function(){
- this.fixture.scrollbar.scrollbar({
- handleMinHeight: 50
+ this.fixture.scroll.scrollbar({
+ handleMinHeight: 60
});
- assertEquals("Minimum height of scrollbar handle", 50, this.fixture.scrollbar.find('.scrollbar-handle').height());
+ assertEquals("Minimum height of scrollbar handle", 60, this.fixture.scroll.find('.scrollbar-handle').height());
},
testAutoHandleHeight: function(){
- this.fixture.scrollbar.scrollbar({
+ var contentHeight = $.fn.scrollbar.contentHeight(this.fixture.visible);
+ this.fixture.visible.scrollbar({
+ arrows: false,
+ containerHeight: Math.ceil(contentHeight / 2),
handleMinHeight: 0
});
- assertEquals("Actual height of scrollbar handle", 32, this.fixture.scrollbar.find('.scrollbar-handle').height());
+ var handleHeight = Math.ceil(contentHeight / 4); // if container is half of content, the handle height should be half of container height (which is a quarter of content height)
+ assertEquals("Actual height of scrollbar handle", handleHeight, this.fixture.visible.find('.scrollbar-handle').height());
},
testScrollbarWithArrows: function(){
- this.fixture.scrollbar.scrollbar({
+ this.fixture.scroll.scrollbar({
arrows: true
});
- assertEquals(1, this.fixture.scrollbar.find('.scrollbar-handle-container').length);
- assertEquals(1, this.fixture.scrollbar.find('.scrollbar-handle-up').length);
- assertEquals(1, this.fixture.scrollbar.find('.scrollbar-handle-down').length);
+ assertEquals(1, this.fixture.scroll.find('.scrollbar-handle-container').length);
+ assertEquals(1, this.fixture.scroll.find('.scrollbar-handle-up').length);
+ assertEquals(1, this.fixture.scroll.find('.scrollbar-handle-down').length);
},
testScrollbarWithoutArrows: function(){
- this.fixture.scrollbar.scrollbar({
+ this.fixture.scroll.scrollbar({
arrows: false
});
- assertEquals(1, this.fixture.scrollbar.find('.scrollbar-handle-container').length);
- assertEquals(0, this.fixture.scrollbar.find('.scrollbar-handle-up').length);
- assertEquals(0, this.fixture.scrollbar.find('.scrollbar-handle-down').length);
+ assertEquals(1, this.fixture.scroll.find('.scrollbar-handle-container').length);
+ assertEquals(0, this.fixture.scroll.find('.scrollbar-handle-up').length);
+ assertEquals(0, this.fixture.scroll.find('.scrollbar-handle-down').length);
},
-
- testScrollbarWithoutArrowsByClassAttribute: function(){
- this.fixture.noArrows.scrollbar();
- assertEquals(1, this.fixture.noArrows.find('.scrollbar-handle-container').length);
- assertEquals(0, this.fixture.noArrows.find('.scrollbar-handle-up').length);
- assertEquals(0, this.fixture.noArrows.find('.scrollbar-handle-down').length);
- }
});

0 comments on commit 076d05f

Please sign in to comment.