Skip to content

Commit

Permalink
Carousel: Adding disabled state to back & fwd buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
Jake Archibald committed Jun 11, 2010
1 parent ef45301 commit 07717d7
Show file tree
Hide file tree
Showing 5 changed files with 183 additions and 31 deletions.
66 changes: 42 additions & 24 deletions src/ui/Carousel/Carousel.css
View file
Expand Up @@ -2,28 +2,46 @@
position: relative;
}

.glowCSSVERSION-Carousel .Carousel-next,
.glowCSSVERSION-Carousel .Carousel-prev {
position: absolute;
z-index: 3;
cursor: pointer;
/* next/prev buttons */
.glowCSSVERSION-Carousel .Carousel-next,
.glowCSSVERSION-Carousel .Carousel-prev {
position: absolute;
z-index: 3;
cursor: pointer;
background: #333;
background: rgba(51, 51, 51, 0.75);
line-height: 100%;
/* nasty hack for the background, IE6 7 & 8 */
background: none\9;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF333333,endColorstr=#BF333333);
}

background: #333;
background: rgba(51, 51, 51, 0.75);
background-image: url(images/Carousel/arrows.png);
/* nasty hack for the background, IE6 7 & 8 */
background: none\9;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF333333,endColorstr=#BF333333);
}

.glowCSSVERSION-Carousel .Carousel-next {
right: 0;
}

.glowCSSVERSION-Carousel .Carousel-prev {
left: 0;
}

img {
display: block;
}
.glowCSSVERSION-Carousel .Carousel-next {
right: 0;
}

.glowCSSVERSION-Carousel .Carousel-prev {
left: 0;
}

.glowCSSVERSION-Carousel .Carousel-btnIcon {
position: absolute;
left: 50%;
top: 50%;
margin: -15px 0 0 -11px;
background: url(images/Carousel/arrows.png);
width: 23px;
height: 31px;
}

.glowCSSVERSION-Carousel .Carousel-prev .Carousel-btnIcon {
background-position: -23px 0;
}

.glowCSSVERSION-Carousel .Carousel-prev-disabled .Carousel-btnIcon {
background-position: -23px -31px;
}

.glowCSSVERSION-Carousel .Carousel-next-disabled .Carousel-btnIcon {
background-position: 0 -31px;
}
37 changes: 31 additions & 6 deletions src/ui/Carousel/Carousel.js
View file
Expand Up @@ -116,8 +116,8 @@ Glow.provide(function(glow) {
);

// enfore our minimum back/fwd button size
if (spot.offset.left < 25) {
opts.spotlight = opts.spotlightSize = spot.capacity - 1;
if (spot.offset.left < 50) {
opts.spotlight = spot.capacity - 1;
}

this._init();
Expand Down Expand Up @@ -193,19 +193,43 @@ Glow.provide(function(glow) {
});

// add next & prev buttons, autosizing them
this._prevBtn = glow('<div class="Carousel-prev"></div>').prependTo(content).css({
this._prevBtn = glow('<div class="Carousel-prev"><div class="Carousel-btnIcon"></div></div>').prependTo(content).css({
width: spot.offset.left,
height: spot.height
height: spot.height,
'line-height': spot.height
});
this._nextBtn = glow('<div class="Carousel-next"></div>').prependTo(content).css({
this._nextBtn = glow('<div class="Carousel-next"><div class="Carousel-btnIcon"></div></div>').prependTo(content).css({
width: spot.offset.right,
height: spot.height
height: spot.height,
'line-height': spot.height
});
this._titlesHolder = glow('<div class="Carousel-titles"></div>').appendTo(content);

updateButtons(this);

this._bind();
};

/**
@private
@function
@description Update the enabled / disabled state of the buttons.
*/
function updateButtons(carousel) {
// buttons are always active for a looping carousel
if (carousel._opts.loop) {
return;
}

var indexes = carousel.spotlightIndexes(),
lastIndex = indexes[indexes.length - 1],
lastItemIndex = carousel.items.length - 1;

// add or remove the disabled class from the buttons
carousel._prevBtn[ (indexes[0] === 0) ? 'addClass' : 'removeClass' ]('Carousel-prev-disabled');
carousel._nextBtn[ (lastIndex === lastItemIndex) ? 'addClass' : 'removeClass' ]('Carousel-next-disabled');
}

/**
@private
@function
Expand Down Expand Up @@ -277,6 +301,7 @@ Glow.provide(function(glow) {
*/
function paneAfterMove(event) {
if ( !this.fire('afterMove', event).defaultPrevented() ) {
updateButtons(this);
showTitles(this);
}
}
Expand Down
Binary file modified src/ui/Carousel/images/Carousel/arrows.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
43 changes: 42 additions & 1 deletion test/manual/glow/ui/Carousel/Carousel.html
View file
Expand Up @@ -22,6 +22,9 @@
margin: 0; padding: 0;
list-style: none;
}
#carousel1 img {
display: block;
}
</style>
</head>

Expand All @@ -45,12 +48,50 @@ <h2></h2>
<li><img src="../CarouselPane/images/7.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/8.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/9.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/1.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/2.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/3.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/4.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/5.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/6.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/7.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/8.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/9.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/1.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/2.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/3.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/4.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/5.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/6.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/7.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/8.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/9.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/1.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/2.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/3.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/4.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/5.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/6.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/7.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/8.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/9.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/1.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/2.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/3.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/4.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/5.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/6.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/7.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/8.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/9.jpg" alt="" width="100" height="100" /></li>
</ol>
</div>

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

Expand Down
68 changes: 68 additions & 0 deletions test/manual/glow/ui/Carousel/CarouselBug.html
View file
@@ -0,0 +1,68 @@
<!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 {
width: 550px;
}
#carousel1 {
margin: 0; padding: 0;
list-style: none;
}
#carousel1 img {
display: block;
}
</style>
</head>

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

<h2></h2>

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

<div class="testarea" id="carousel1Outer">
<ol id="carousel1">
<li><img src="../CarouselPane/images/1.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/2.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/3.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/4.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/5.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/6.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/7.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/8.jpg" alt="" width="100" height="100" /></li>
<li><img src="../CarouselPane/images/9.jpg" alt="" width="100" height="100" /></li>
</ol>
</div>

<script type="text/javascript" class="showSrc">
glow.ready(function() {
window.myCarouselPane = new glow.ui.CarouselPane('#carousel1', {
step: true
});
});
</script>


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

0 comments on commit 07717d7

Please sign in to comment.