basic-page-dots

API Documentation

PageDots ⇐ ElementBase

Presents a set of small dots to show list item count and select list items.

You can see a live demo of this component applied to a carousel.

There will be one dot for each item, and the dot for the currently selected item will be shown selected.

Typical usage:

<basic-page-dots>
  <basic-carousel>
    ... images, etc. ...
  </basic-carousel>
</basic-page-dots>

Although the dots are quite small by default, clicking/tapping a dot will will select the corresponding list item.

Kind: global class Extends: ElementBase
Mixes: ContentFirstChildTarget , DistributedChildrenAsContent , ItemsSelection , Keyboard , ObserveContentChanges , TargetInCollective , TargetSelection

• PageDots ⇐ ElementBase
  • .applySelection(item, selected)
  • .canSelectNext : boolean
  • .canSelectPrevious : boolean
  • .content : Array.<HTMLElement>
  • "content-changed"
  • .contentChanged()
  • .itemAdded(item)
  • .items : Array.<HTMLElement>
  • .itemsChanged()
  • .keydown(event) ⇒ boolean
  • .position : number
  • "selected-index-changed"
  • "selected-item-changed"
  • .selectedIndex : number
  • .selectedIndex : number
  • .selectedItem : object
  • .selectedItem : HTMLElement
  • .selectFirst()
  • .selectionRequired : boolean
  • .selectLast()
  • .selectNext()
  • .selectPrevious()
  • .target : HTMLElement
  • .target : HTMLElement
  • .target : HTMLElement

pageDots.applySelection(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: instance method of PageDots. Defined by ItemsSelection mixin.

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

pageDots.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 PageDots. Defined by ItemsSelection mixin.

pageDots.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 PageDots. Defined by ItemsSelection mixin.

pageDots.content : Array.<HTMLElement>

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

Kind: instance property of PageDots. Defined by DistributedChildrenAsContent mixin.

"content-changed"

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

Kind: event emitted by PageDots. Defined by ObserveContentChanges mixin.

pageDots.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 PageDots. Defined by ObserveContentChanges mixin.

pageDots.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: instance method of PageDots. Defined by ItemsSelection mixin.

Param	Type	Description
item	HTMLElement	the item being added

pageDots.items : Array.<HTMLElement>

The current set of items in the list.

Kind: instance property of PageDots. Defined by TargetSelection mixin.

pageDots.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: instance method of PageDots. Defined by TargetSelection mixin.

pageDots.keydown(event) ⇒ boolean

Handle the indicated keyboard event.

The default implementation of this method does nothing. This will typically be handled by other mixins.

Kind: instance method of PageDots. Defined by Keyboard mixin. Returns: boolean - true if the event was handled

Param	Type	Description
event	KeyboardEvent	the keyboard event

pageDots.position : number

The distance the user has moved the first touchpoint since the beginning of a drag, expressed as a fraction of the element's width.

Kind: instance property of PageDots

"selected-index-changed"

Fires when the selectedIndex property changes.

Kind: event emitted by PageDots. Defined by ItemsSelection mixin.

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

"selected-item-changed"

Fires when the selectedItem property changes.

Kind: event emitted by PageDots. Defined by ItemsSelection mixin.

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

pageDots.selectedIndex : number

The index of the item which is currently selected, or -1 if there is no selection.

Kind: instance property of PageDots. Defined by TargetSelection mixin.

pageDots.selectedIndex : number

The index of the item which is currently selected, or -1 if there is no selection.

Setting the index to -1 deselects any current-selected item.

Kind: instance property of PageDots. Defined by ItemsSelection mixin.

pageDots.selectedItem : object

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

Setting this property to null deselects any currently-selected item.

Kind: instance property of PageDots. Defined by ItemsSelection mixin.

pageDots.selectedItem : HTMLElement

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

Kind: instance property of PageDots. Defined by TargetSelection mixin.

pageDots.selectFirst()

Select the first item in the list.

Kind: instance method of PageDots. Defined by ItemsSelection mixin.

pageDots.selectionRequired : boolean

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

Kind: instance property of PageDots. Defined by ItemsSelection mixin.

pageDots.selectLast()

Select the last item in the list.

Kind: instance method of PageDots. Defined by ItemsSelection mixin.

pageDots.selectNext()

Select the next item in the list.

Kind: instance method of PageDots. Defined by ItemsSelection mixin.

pageDots.selectPrevious()

Select the previous item in the list.

Kind: instance method of PageDots. Defined by ItemsSelection mixin.

pageDots.target : HTMLElement

Gets/sets the current target of the component.

Set this to point to another element. That target element will be implicitly added to the component's collective. That is, the component and its target will share responsibility for handling keyboard events.

You can set this property yourself, or you can use the ContentFirstChildTarget mixin to automatically set the target to the component's first child.

Kind: instance property of PageDots. Defined by TargetInCollective mixin.

pageDots.target : HTMLElement

Gets/sets the current target of the component.

Kind: instance property of PageDots. Defined by ContentFirstChildTarget mixin.

pageDots.target : HTMLElement

Gets/sets the target element to which this component will delegate selection actions.

Kind: instance property of PageDots. Defined by TargetSelection mixin.