Class glow.ui.CarouselPane

Extends glow.ui.Widget.

Defined in: ui.js.

Class Summary
Constructor Attributes	Constructor Name and Description
	glow.ui.CarouselPane(container, opts) Create a pane of elements that scroll from one to another.

Field Summary
Field Attributes	Field Name and Description
	items Carousel items.
	stage The container passed in to the constructor for glow.ui.CarouselPane.

Fields borrowed from class glow.ui.Widget:: container, content, phase

Method Summary
Method Attributes	Method Name and Description
	destroy() Remove listeners and added HTML Elements from this instance.
	moveBy(amount) Move by a number of items.
	moveStart(backwards) Start moving the carousel in a particular direction.
	moveStop() Stop moving the carousel.
	moveTo(itemIndex, opts) Move the items so a given index is the leftmost active item.
	moveToggle(backwards) If this CarouselPane is currently moving via moveStart, will call moveStop, otherwise will call moveStart.
	next() Move forward by the step.
	prev() Move backward by the step.
	spotlightIndexes() Gets an array of spotlighted indexes.
	spotlightItems() Get the currently spotlighted items.

Methods borrowed from class glow.ui.Widget:: disabled
Methods borrowed from class glow.events.Target:: detach, fire, on

Event Summary
Event Attributes	Event Name and Description
	afterMove(e) Fires when the carousel has finished moving.
	move(e) Fires when the carousel is about to move.
	select(event) Fires when a carousel item is selected.

Events borrowed from class glow.ui.Widget:: destroy, disable

Class Detail

glow.ui.CarouselPane(container, opts)

Create a pane of elements that scroll from one to another. This is a component of Carousel.

			new glow.ui.CarouselPane('#carouselItems', {
				duration: 0.4,
				step: 2,
				loop: true
			});

Parameters:
{glow.NodeList|selector|HTMLElement} container: Container of the carousel items. The direct children of this item will be treated as carousel items. They will be positioned next to each other horizontally. Each item takes up the same horizontal space, equal to the width of the largest item (including padding and border) + the largest of its horizontal margins (as set in CSS). The height of the container will be equal to the height of the largest item (including padding and border) + the total of its vertical margins.
{object} opts Optional: Options
{number} opts.duration Optional, Default: 0.2: Duration of scrolling animations in seconds.
{string|function} opts.tween Optional, Default: 'easeBoth': Tween to use for animations. This can be a property name of glow.tweens or a tweening function.
{boolean | number} opts.step Optional, Default: 1: Number of items to move at a time. If true, the step will be the same size as the spotlight.
{boolean} opts.loop Optional, Default: false: Loop the carousel from the last item to the first.
{boolean} opts.page Optional, Default: false: Keep pages in sync by adding space to the end of the carousel. Spaces don't exist as physical HTML elements, but simply a gap from the last item to the end.
{number} opts.spotlight Optional: The number of items to treat as main spotlighted items. A carousel may be wide enough to display 2 whole items, but setting this to 1 will result in the spotlight item sitting in the middle, with half of the previous item appearing before, and half the next item appearing after. By default, this is the largest number of whole items that can exist in the width of the container. Any remaining width will be used to partially show the previous/next item.

Field Detail

{glow.NodeList} items

Carousel items. This is the same as `myCarouselPane.stage.children()`

{glow.NodeList} stage

The container passed in to the constructor for glow.ui.CarouselPane.

Method Detail

destroy()

Remove listeners and added HTML Elements from this instance. CarouselPane items will not be destroyed.

Returns:: undefined

moveBy(amount)

Move by a number of items.

Parameters:
{number} amount: Amount and direction to move. Negative numbers will move backwards, positive number will move forwards. This method respects the carousel's limits and its step. If it's not possible to move the item so it's the leftmost item of the spotlight, it will be placed as close to the left as possible.

Returns:: this

moveStart(backwards)

Start moving the carousel in a particular direction.

			nextBtn.on('mousedown', function() {
				myCarouselPane.moveStart();
			}).on('mouseup', function() {
				myCarouselPane.moveStop();
			});

Parameters:
{boolean} backwards Optional, Default: false: True to move backwards, otherwise move forwards.

Returns:: this

See:: glow.ui.CarouselPane#moveStop

moveStop()

Stop moving the carousel. The current animation will end, leaving the carousel in step. Note that this is asynchronous: expect this method to return before the carousel actually stops.

Returns:: this

moveTo(itemIndex, opts)

Move the items so a given index is the leftmost active item. This method respects the carousel's limits and its step. If it's not possible to move the item so it's the leftmost item of the spotlight, it will be placed as close to the left as possible.

Parameters:
{number} itemIndex: Item index to move to.
opts
{undefined|string} opts.tween: If undefined, use the default animation, if empty string then no animation, if non-empty string then use the named tween.

Returns:: this

moveToggle(backwards)

If this CarouselPane is currently moving via moveStart, will call moveStop, otherwise will call moveStart.

Parameters:
{boolean} backwards Optional, Default: false: When calling moveStart, move backwards?

Returns:: this

next()

Move forward by the step.

Returns:: this

prev()

Move backward by the step.

Returns:: this

{number[]} spotlightIndexes()

Gets an array of spotlighted indexes. These are the indexes of the nodes within glow.ui.CarouselPane#items. Only item indexes currently visible in the spotlight will be included.

Returns:: {number[]}

{glow.NodeList} spotlightItems()

Get the currently spotlighted items. Only items currently visible in the spotlight will be included.

Returns:: {glow.NodeList}

Event Detail

afterMove(e)

Fires when the carousel has finished moving. Canceling this event prevents the carousel from moving. This will not fire for repeated move actions. Ie, after #start is called this will not fire until the carousel reached an end point or when it comes to rest after #stop is called.

			// double the amount a carousel will move by
			myCarouselPane.on('afterMove', function(e) {
				// show content related to this.spotlightItems()[0]
			});

Parameters:
{glow.events.Event} e: Event Object
{number} e.currentIndex: Index of the current leftmost item.

move(e)

Fires when the carousel is about to move. Canceling this event prevents the carousel from moving. This will fire for repeated move actions. Ie, this will fire many times after #start is called.

			// double the amount a carousel will move by
			myCarouselPane.on('move', function(e) {
				e.moveBy *= 2;
			});

Parameters:
{glow.events.Event} e: Event Object
{number} e.currentIndex: Index of the current leftmost item.
{number} e.moveBy: The number of items the Carousel will move by. This is undefined for 'sliding' moves where the destination isn't known. This value can be overwritten, resulting in the carousel moving a different amount. The carousel step will still be respected.

select(event)

Fires when a carousel item is selected. Items are selected by clicking, or pressing enter when a child is in the spotlight. Canceling this event prevents the default click/key action.

Parameters:
{glow.events.Event} event: Event Object
{glow.NodeList} event.item: Item selected
{number} event.itemIndex: The index of the selected item in glow.ui.CarouselPane#items.

Classes

Class glow.ui.CarouselPane