Navigation Menu

Skip to content

Commit

Permalink
Carousel: Finishing pageNav
Browse files Browse the repository at this point in the history
  • Loading branch information
Jake Archibald committed Jun 11, 2010
1 parent 07717d7 commit 95c6cee
Show file tree
Hide file tree
Showing 5 changed files with 175 additions and 87 deletions.
50 changes: 50 additions & 0 deletions src/ui/Carousel/Carousel.css
View file
Expand Up @@ -44,4 +44,54 @@

.glowCSSVERSION-Carousel .Carousel-next-disabled .Carousel-btnIcon {
background-position: 0 -31px;
}

/* Page nav */
.glowCSSVERSION-Carousel .Carousel-pageNav {
height: 8px;
margin: 4px 0;
}
.glowCSSVERSION-Carousel .Carousel-pageNav div {
display: inline-block;
height: 8px;
width: 8px;
overflow: hidden;
color: #ccc;
background: #ccc;
margin: 0 0 0 4px;
cursor: pointer;
font-size: medium;
vertical-align: top;
/* inline-block for IE */
*display: inline;
zoom: 1;
}

.glowCSSVERSION-Carousel .Carousel-pageNav div.active {
color: #333;
background: #333;
}

.glowCSSVERSION-Carousel .Carousel-pageNavNumbers {
margin: 4px 0;
color: #333;
}

.glowCSSVERSION-Carousel .Carousel-pageNavNumbers div {
display: inline;
cursor: pointer;
font-size: medium;
margin: 0 0 0 4px;
}

.glowCSSVERSION-Carousel .Carousel-pageNavNumbers div.active {
font-weight: bold;
}
/* item titles */
.glowCSSVERSION-Carousel .Carousel-titles {
position: relative;
}
.glowCSSVERSION-Carousel .Carousel-title {
position: absolute;
background: #ccc;
}
66 changes: 39 additions & 27 deletions src/ui/Carousel/Carousel.js
View file
Expand Up @@ -99,8 +99,8 @@ Glow.provide(function(glow) {

opts = this._opts;

// convert the options for CarouselPane
if (opts.page) {
// todo: need to work out how to make step the same as resulting spotlight
opts.step = opts.page;
opts.page = true;
}
Expand Down Expand Up @@ -142,7 +142,7 @@ Glow.provide(function(glow) {
@description Element acting as next button
*/
/**
@name glow.ui.Carousel#_itemTiles
@name glow.ui.Carousel#_itemTitles
@type glow.NodeList
@description Item title boxes, one per item.
If any items don't have a title box, an empty div will be created.
Expand All @@ -153,7 +153,7 @@ Glow.provide(function(glow) {
@name glow.ui.Carousel#_titlesHolder
@type glow.NodeList
@description Container of item titles.
Items from _itemTiles will be added & removed to/from this element.
Items from _itemTitles will be added & removed to/from this element.
*/

/**
Expand All @@ -175,37 +175,48 @@ Glow.provide(function(glow) {
};

CarouselProto._build = function () {
// TODO: check the size of the wings, if they're too small reduce the spotlight accordingly

var content,
titleBoxes = this._titleBoxes = getItemTitles(this),
pane = this._pane = new glow.ui.CarouselPane(this.itemContainer, this._opts),
spot = pane._spot;
itemContainer = this.itemContainer,
itemTitles,
titlesHolder,
pane,
items,
spot;

WidgetProto._build.call( this, itemContainer.wrap('<div></div>').parent() );
content = this.content;

WidgetProto._build.call( this, pane.container.wrap('<div></div>').parent() );
// add titles item
titlesHolder = this._titlesHolder = glow('<div class="Carousel-titles"></div>').appendTo(content);
// get titles and remove them from their items
itemTitles = this._itemTitles = getItemTitles(this);
// set the holder to the same height as the items
titlesHolder.height( itemTitles[0].style.height );

content = this.content;
this.items = pane.items;
pane = this._pane = new glow.ui.CarouselPane(itemContainer, this._opts);
spot = pane._spot
items = this.items = pane.items;
this.itemContainer = pane.itemContainer;

// set the item titles to be the same size as the items
itemTitles.width( items.width() );

pane.moveTo(0, {
tween: null
});

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

updateButtons(this);
showTitles(this);

this._bind();
};
Expand Down Expand Up @@ -275,10 +286,11 @@ Glow.provide(function(glow) {
@description Listener for CarouselPane's 'move' event.
'this' is the Carousel
*/
function paneMove(event) {
function paneMove(event) {
var pane = this._pane;

if ( !this.fire('move', event).defaultPrevented() ) {
// TODO: pick the right page to activate
this._updateNav(0);
this._updateNav( (pane.index + event.moveBy) / pane._step );
hideTitles(this);
}
}
Expand All @@ -290,7 +302,7 @@ Glow.provide(function(glow) {
*/
function hideTitles(carousel) {
var currentTitles = carousel._titlesHolder.children();
currentTitles.fadeOut(carousel._opts.duration);
currentTitles.fadeOut(carousel._pane._opts.duration);
}

/**
Expand All @@ -302,7 +314,7 @@ Glow.provide(function(glow) {
function paneAfterMove(event) {
if ( !this.fire('afterMove', event).defaultPrevented() ) {
updateButtons(this);
showTitles(this);
showTitles(this, true);
}
}

Expand All @@ -311,13 +323,13 @@ Glow.provide(function(glow) {
@function
@description Show the titles for the currently displayed items
*/
function showTitles(carousel) {
function showTitles(carousel, animate) {
// bail if no item titles
if (!carousel._itemTiles) { return; }
if (!carousel._itemTitles) { return; }

var indexes = carousel.spotlightIndexes(),
carouselItems = carousel.spotlightItems(),
itemTitles = carousel._itemTiles,
itemTitles = carousel._itemTitles,
titlesHolder = carousel._titlesHolder.empty(),
titlesHolderOffset = titlesHolder.offset().left,
titlesToShow = glow();
Expand All @@ -329,11 +341,11 @@ Glow.provide(function(glow) {
// add it to the holder
.appendTo(titlesHolder)
// position it
.css( 'left', titlesHolderOffset - carouselItems.item(i).offset().left )
.css( 'left', carouselItems.item(i).offset().left - titlesHolderOffset )
);
}

titlesToShow.fadeIn(carousel._opts.duration);
titlesToShow.css('opacity', 0).fadeIn(carousel._pane._opts.duration * !!animate);
}

/**
Expand Down Expand Up @@ -444,7 +456,7 @@ Glow.provide(function(glow) {
*/
function prevNext(direction) {
return function() {
this._pane.moveBy(this._opts.step * direction);
this._pane.moveBy(this._pane._step * direction);
return this;
}
}
Expand Down
25 changes: 17 additions & 8 deletions src/ui/Carousel/pageNav.js
View file
Expand Up @@ -56,12 +56,20 @@ Glow.provide(function(glow) {
position: 'belowLast'
}, opts);

this._pageNav = glow('<div class="carousel-pageNav"></div>')
var className = 'Carousel-pageNav';

if (opts.useNumbers) {
className += 'Numbers';
}

this._pageNav = glow('<div class="' + className + '"></div>')
.delegate('click', 'div', pageNavClick, this);

this._pageNavOpts = opts;

positionPageNav(this);
initPageNav(this);

return this;
};

/**
Expand All @@ -71,7 +79,6 @@ Glow.provide(function(glow) {
'this' is the carousel
*/
function pageNavClick(event) {
// TODO: event.attachedTo - does this give us the inner div or the page nav?
var targetPage = Number( glow(event.attachedTo).text() ) - 1;
this.moveTo(targetPage);
}
Expand All @@ -87,10 +94,13 @@ Glow.provide(function(glow) {
position = carousel._pageNavOpts.position,
positionY = position.slice(0,5),
positionX = position.slice(5),
// TODO: get this number from somewhere
numberOfPages = 5,
pane = carousel._pane,
numberOfPages = 1 + Math.ceil( (carousel.items.length - pane._spot.capacity) / pane._step ),
htmlStr = '';

// 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 @@ -104,7 +114,7 @@ Glow.provide(function(glow) {
}
// move it under the last item for *Last positions
else if (positionX === 'Last') {
pageNav.css( 'margin-left', carousel._nextBtn.width() )
pageNav.css( 'margin-right', carousel._nextBtn.width() )
}

// build the html string
Expand All @@ -113,8 +123,7 @@ Glow.provide(function(glow) {
} while (--numberOfPages);

pageNav.html(htmlStr);
// TODO: pick the right page to activate
updatePageNav(carousel, 0);
carousel._updateNav( pane.index / pane._step );
}

/**
Expand Down
90 changes: 41 additions & 49 deletions test/manual/glow/ui/Carousel/Carousel.html
View file
Expand Up @@ -31,66 +31,58 @@
<body>
<h1>glow.ui.Carousel</h1>

<h2></h2>
<h2>Basic carousel</h2>

<ol>
<li>...</li>
<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="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>
<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" />
<div>Title 0</div>
</li>
<li>
<img src="../CarouselPane/images/2.jpg" alt="" width="100" height="100" />
<div>Title 1</div>
</li>
<li>
<img src="../CarouselPane/images/3.jpg" alt="" width="100" height="100" />
<div>Title 2</div>
</li>
<li>
<img src="../CarouselPane/images/4.jpg" alt="" width="100" height="100" />
<div>Title 3</div>
</li>
<li>
<img src="../CarouselPane/images/5.jpg" alt="" width="100" height="100" />
<div>Title 4</div>
</li>
<li>
<img src="../CarouselPane/images/6.jpg" alt="" width="100" height="100" />
<div>Title 5</div>
</li>
<li>
<img src="../CarouselPane/images/7.jpg" alt="" width="100" height="100" />
<div>Title 6</div>
</li>
<li>
<img src="../CarouselPane/images/8.jpg" alt="" width="100" height="100" />
<div>Title 7</div>
</li>
<li>
<img src="../CarouselPane/images/9.jpg" alt="" width="100" height="100" />
<div>Title 8</div>
</li>
</ol>
</div>

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

0 comments on commit 95c6cee

Please sign in to comment.