Skip to content

Commit

Permalink
Carousel: Fixing maths for deciding how many pages there are
Browse files Browse the repository at this point in the history
  • Loading branch information
Jake Archibald committed Jun 11, 2010
1 parent fa9a9ad commit cecf714
Show file tree
Hide file tree
Showing 4 changed files with 202 additions and 20 deletions.
5 changes: 3 additions & 2 deletions src/ui/Carousel/Carousel.js
View file
Expand Up @@ -290,7 +290,7 @@ Glow.provide(function(glow) {
var pane = this._pane;

if ( !this.fire('move', event).defaultPrevented() ) {
this._updateNav( (pane.index + event.moveBy) / pane._step );
this._updateNav( (pane._index + event.moveBy) % this.items.length / pane._step );
hideTitles(this);
}
}
Expand Down Expand Up @@ -491,7 +491,8 @@ Glow.provide(function(glow) {
@returns undefined
*/
CarouselProto.destroy = function() {
// TODO: Ensure the carousel items are not destroyed
// Move the pane outside our widget
this._pane.container.insertBefore(this.container);
WidgetProto.destroy.call(this);
};

Expand Down
28 changes: 23 additions & 5 deletions src/ui/Carousel/pageNav.js
View file
Expand Up @@ -83,6 +83,27 @@ Glow.provide(function(glow) {
this.moveTo(targetPage);
}

/**
@private
@function
@description Calculate the number of pages this carousel has
*/
function getNumberOfPages(carousel) {
var pane = carousel._pane,
itemsLength = carousel.items.length,
step = pane._step;

if (carousel._opts.loop) {
r = Math.ceil( itemsLength / step );
}
else {
r = 1 + Math.ceil( (itemsLength - pane._spot.capacity) / step );
}

// this can be less than one if there's less than 1 page worth or items
return Math.max(r, 0);
}

/**
@private
@function
Expand All @@ -95,13 +116,10 @@ Glow.provide(function(glow) {
positionY = position.slice(0,5),
positionX = position.slice(5),
pane = carousel._pane,
numberOfPages = 1 + Math.ceil( (carousel.items.length - pane._spot.capacity) / pane._step ),
numberOfPages = getNumberOfPages(carousel),
htmlStr = '',
itemTitles = carousel._itemTitles;

// this can be less than one if there's less than 1 page worth or items
numberOfPages = Math.max(numberOfPages, 0);

// either append or prepend the page nav, depending on option
carousel.container[ (positionY === 'below') ? 'append' : 'prepend' ](pageNav);

Expand All @@ -124,7 +142,7 @@ Glow.provide(function(glow) {
} while (--numberOfPages);

pageNav.html(htmlStr);
carousel._updateNav( pane.index / pane._step );
carousel._updateNav( pane._index / pane._step );
}

/**
Expand Down
39 changes: 26 additions & 13 deletions test/manual/glow/ui/Carousel/Carousel.html
View file
Expand Up @@ -15,34 +15,37 @@
</script>

<style type="text/css">
#carousel1Outer, #carousel2Outer {
#carousel1Outer {
width: 550px;
font-size: small;
}
#carousel1, #carousel2 {
#carousel1 {
margin: 0; padding: 0;
list-style: none;

}
#carousel1 img,
#carousel2 img {

img {
display: block;
}
.itemTitle {
padding: 5px 0;
background: #ccc;
font-size: small;
}
</style>
</head>

<body>
<h1>glow.ui.Carousel</h1>

<h2>Basic carousel</h2>
<h2>Carousel with titles and page nav</h2>

<ol>
<li>Below should be a carousel showing 4 items, with one image partially visible behind the next (right) button.</li>
<li>Below each of the 4 fully visible images should be a title.</li>
<li>Below should be a carousel showing 3 items, with one image partially visible behind the next (right) button.</li>
<li>Below each of the 4 fully visible images should be a title beneath each.</li>
<li>Clicking the left and right arrows should move the carousel one step at a time</li>
<li>Page naviagation should be shown below the last item in the carousel</li>
<li>Clicking the page naviagtion should move the carousel to that page</li>
<li>The page navigation block representing the active page should be a darker grey than the others.</li>
</ol>

<div class="testarea" id="carousel1Outer">
Expand Down Expand Up @@ -90,11 +93,17 @@ <h2>Basic carousel</h2>
glow.ready(function() {
window.myCarousel = new glow.ui.Carousel('#carousel1', {
itemTitles: '.itemTitle'
});
}).addPageNav();
});
</script>

<div class="testarea" id="carousel2Outer">
<h2>Carousel with titles and page nav</h2>

<ol>
<li></li>
</ol>

<div class="testarea" style="width:800px">
<ol id="carousel2">
<li>
<img src="../CarouselPane/images/1.jpg" alt="" width="150" height="150" />
Expand Down Expand Up @@ -137,7 +146,11 @@ <h2>Basic carousel</h2>

<script type="text/javascript" class="showSrc">
glow.ready(function() {
window.myCarousel2 = new glow.ui.Carousel('#carousel2');
window.myCarousel2 = new glow.ui.Carousel('#carousel2', {
itemTitles: '.itemTitle',
spotlight: 4,
loop: true
}).addPageNav('belowNext');
});
</script>

Expand All @@ -147,4 +160,4 @@ <h2>Basic carousel</h2>
manualTests.showSrc();
</script>
</body>
</html>
</html>
150 changes: 150 additions & 0 deletions test/manual/glow/ui/Carousel/CarouselAnimTest.html
View file
@@ -0,0 +1,150 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Manual Test: glow.ui.Carousel</title>

<script type="text/javascript" src="../../../lib/manualtest.js"></script>
<link type="text/css" rel="stylesheet" media="screen" href="../../../lib/style.css" />
<script src="../../../../unit/lib/testhelper.js?base=../../../../../" type="text/javascript"></script>

<script type="text/javascript">
testHelper.addScript('core.js');
testHelper.addScript('ui.js');
testHelper.addCss('ui.css');
</script>

<style type="text/css">
#carousel1Outer, #carousel2Outer {
width: 550px;
font-size: small;
}
#carousel1, #carousel2 {
margin: 0; padding: 0;
list-style: none;

}
#carousel1 img,
#carousel2 img {
display: block;
}
.itemTitle {
padding: 5px 0;
background: #ccc;
}
</style>
</head>

<body>
<h1>glow.ui.Carousel</h1>

<h2>Basic carousel</h2>

<ol>
<li>Below should be a carousel showing 4 items, with one image partially visible behind the next (right) button.</li>
<li>Below each of the 4 fully visible images should be a title.</li>
</ol>

<div class="testarea" id="carousel1Outer">
<ol id="carousel1">
<li>
<img src="../CarouselPane/images/1.jpg" alt="" width="150" height="150" />
<div class="itemTitle">Leonardo</div>
</li>
<li>
<img src="../CarouselPane/images/2.jpg" alt="" width="150" height="150" />
<div class="itemTitle">Michelangelo</div>
</li>
<li>
<img src="../CarouselPane/images/3.jpg" alt="" width="150" height="150" />
<div class="itemTitle">Donatello</div>
</li>
<li>
<img src="../CarouselPane/images/4.jpg" alt="" width="150" height="150" />
<div class="itemTitle">Raphael</div>
</li>
<li>
<img src="../CarouselPane/images/5.jpg" alt="" width="150" height="150" />
<div class="itemTitle">Master Splinter</div>
</li>
<li>
<img src="../CarouselPane/images/6.jpg" alt="" width="150" height="150" />
<div class="itemTitle">Shredder</div>
</li>
<li>
<img src="../CarouselPane/images/7.jpg" alt="" width="150" height="150" />
<div class="itemTitle">April O'Neil</div>
</li>
<li>
<img src="../CarouselPane/images/8.jpg" alt="" width="150" height="150" />
<div class="itemTitle">Krang</div>
</li>
<li>
<img src="../CarouselPane/images/9.jpg" alt="" width="150" height="150" />
<div class="itemTitle">Technodrome</div>
</li>
</ol>
</div>

<script type="text/javascript" class="showSrc">
glow.ready(function() {
window.myCarousel = new glow.ui.Carousel('#carousel1', {
itemTitles: '.itemTitle'
});
});
</script>

<div class="testarea" id="carousel2Outer">
<ol id="carousel2">
<li>
<img src="../CarouselPane/images/1.jpg" alt="" width="150" height="150" />
<div class="itemTitle">Leonardo</div>
</li>
<li>
<img src="../CarouselPane/images/2.jpg" alt="" width="150" height="150" />
<div class="itemTitle">Michelangelo</div>
</li>
<li>
<img src="../CarouselPane/images/3.jpg" alt="" width="150" height="150" />
<div class="itemTitle">Donatello</div>
</li>
<li>
<img src="../CarouselPane/images/4.jpg" alt="" width="150" height="150" />
<div class="itemTitle">Raphael</div>
</li>
<li>
<img src="../CarouselPane/images/5.jpg" alt="" width="150" height="150" />
<div class="itemTitle">Master Splinter</div>
</li>
<li>
<img src="../CarouselPane/images/6.jpg" alt="" width="150" height="150" />
<div class="itemTitle">Shredder</div>
</li>
<li>
<img src="../CarouselPane/images/7.jpg" alt="" width="150" height="150" />
<div class="itemTitle">April O'Neil</div>
</li>
<li>
<img src="../CarouselPane/images/8.jpg" alt="" width="150" height="150" />
<div class="itemTitle">Krang</div>
</li>
<li>
<img src="../CarouselPane/images/9.jpg" alt="" width="150" height="150" />
<div class="itemTitle">Technodrome</div>
</li>
</ol>
</div>

<script type="text/javascript" class="showSrc">
glow.ready(function() {
window.myCarousel2 = new glow.ui.Carousel('#carousel2');
});
</script>


<script type="text/javascript">
// make scripts visible in the page...
manualTests.showSrc();
</script>
</body>
</html>

0 comments on commit cecf714

Please sign in to comment.