Skip to content

basic-sliding-viewport

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History
 
 

basic-sliding-viewport

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
dist
dist
 
 
src
src
 
 
README.md
README.md
 
 
globals.js
globals.js
 
 
index.html
index.html
 
 
package.json
package.json
 
 

README.md

API Documentation

SlidingViewport ⇐ ElementBase

Presents list items in a viewport such that only a single item is visible at a time.

Navigating between items will be represented with a horizontal visual sliding effect. For more complex visual effects, see basic-animation-stage, which takes advantage of the Web Animations API.

This component handles the rendering responsibilities for the basic-carousel component.

This component currently requires that you explicitly apply a size to it.

Kind: global class Extends: ElementBase
Mixes: ContentItemsMixin , DistributedChildrenContentMixin , FractionalSelectionMixin , SelectionAriaActiveMixin , SingleSelectionMixin

slidingViewport.canSelectNext : boolean

True if the selection can be moved to the next item, false if not (the selected item is the last item in the list).

Kind: instance property of SlidingViewport. Defined by SingleSelection mixin.

slidingViewport.canSelectPrevious : boolean

True if the selection can be moved to the previous item, false if not (the selected item is the first one in the list).

Kind: instance property of SlidingViewport. Defined by SingleSelection mixin.

slidingViewport.content : Array.<HTMLElement>

The content of this component, defined to be the flattened array of children distributed to the component.

Kind: instance property of SlidingViewport. Defined by DistributedChildrenContent mixin.

"content-changed"

This event is raised when the component's contents (including distributed children) have changed.

Kind: event emitted by SlidingViewport. Defined by DistributedChildrenContent mixin.

slidingViewport.contentChanged()

Invoked when the contents of the component (including distributed children) have changed.

This method is also invoked when a component is first instantiated; the contents have essentially "changed" from being nothing. This allows the component to perform initial processing of its children.

Kind: instance method of SlidingViewport. Defined by DistributedChildrenContent mixin.

SlidingViewport.itemAdded(item)

This method is invoked whenever a new item is added to the list.

The default implementation of this method does nothing. You can override this to perform per-item initialization.

Kind: static method of SlidingViewport. Defined by ContentItems#symbols mixin.

Param Type Description
item HTMLElement The item that was added.

SlidingViewport.itemAdded(item)

Handle a new item being added to the list.

The default implementation of this method simply sets the item's selection state to false.

Kind: static method of SlidingViewport. Defined by SingleSelection#symbols mixin.

Param Type Description
item HTMLElement the item being added

slidingViewport.items : Array.<HTMLElement>

The current set of items in the list. See the top-level documentation for mixin for a description of how items differ from plain content.

Kind: instance property of SlidingViewport. Defined by ContentItems mixin.

"items-changed"

Fires when the items in the list change.

Kind: event emitted by SlidingViewport. Defined by ContentItems mixin.

SlidingViewport.itemsChanged()

This method is invoked when the underlying contents change. It is also invoked on component initialization – since the items have "changed" from being nothing.

Kind: static method of SlidingViewport. Defined by ContentItems#symbols mixin.

SlidingViewport.itemSelected(item, selected)

Apply the indicate selection state to the item.

The default implementation of this method does nothing. User-visible effects will typically be handled by other mixins.

Kind: static method of SlidingViewport. Defined by SingleSelection#symbols mixin.

Param Type Description
item HTMLElement the item being selected/deselected
selected boolean true if the item is selected, false if not

SlidingViewport.itemSelected(item, selected)

The selection state for a single item has changed.

Invoke this method to signal that the selected state of the indicated item has changed. By default, this applies a selected CSS class if the item is selected, and removed it if not selected.

Kind: static method of SlidingViewport. Defined by ContentItems#symbols mixin.

Param Type Description
item HTMLElement The item whose selection state has changed.
selected boolean True if the item is selected, false if not.

"selected-index-changed"

Fires when the selectedIndex property changes.

Kind: event emitted by SlidingViewport. Defined by SingleSelection mixin.

Param Type Description
detail.selectedIndex number The new selected index.

"selected-item-changed"

Fires when the selectedItem property changes.

Kind: event emitted by SlidingViewport. Defined by SingleSelection mixin.

Param Type Description
detail.selectedItem HTMLElement The new selected item.
detail.previousItem HTMLElement The previously selected item.

slidingViewport.selectedFraction : number

A fractional value indicating how far the user has currently advanced to the next/previous item. E.g., a selectedFraction of 3.5 indicates the user is halfway between items 3 and 4.

Kind: instance property of SlidingViewport. Defined by FractionalSelection mixin.

slidingViewport.selectedIndex : number

The index of the item which is currently selected.

A selectedIndex of -1 indicates there is no selection. Setting this property to -1 will remove any existing selection.

Kind: instance property of SlidingViewport. Defined by SingleSelection mixin.

slidingViewport.selectedItem : object

The currently selected item, or null if there is no selection.

Setting this property to null deselects any currently-selected item. Setting this property to an object that is not in the list has no effect.

TODO: Even if selectionRequired, can still explicitly set selectedItem to null. TODO: If selectionRequired, leave selection alone?

Kind: instance property of SlidingViewport. Defined by SingleSelection mixin.

slidingViewport.selectFirst()

Select the first item in the list.

Kind: instance method of SlidingViewport. Defined by SingleSelection mixin.

slidingViewport.selectionRequired : boolean

True if the list should always have a selection (if it has items).

Kind: instance property of SlidingViewport. Defined by SingleSelection mixin. Default: false

slidingViewport.selectionWraps : boolean

True if selection navigations wrap from last to first, and vice versa.

Kind: instance property of SlidingViewport. Defined by SingleSelection mixin. Default: false

slidingViewport.selectLast()

Select the last item in the list.

Kind: instance method of SlidingViewport. Defined by SingleSelection mixin.

slidingViewport.selectNext()

Select the next item in the list.

Kind: instance method of SlidingViewport. Defined by SingleSelection mixin.

slidingViewport.selectPrevious()

Select the previous item in the list.

If the list has no selection, the last item will be selected.

Kind: instance method of SlidingViewport. Defined by SingleSelection mixin.