npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

basic-arrow-selection

v0.8.0

Published

Mixin used to add prominent left and right arrow buttons to a wrapped child. Clicking the left/right buttons selects the previous/next item.

Downloads

7

Readme

API Documentation

ArrowSelection ⇐ ElementBase

Component which adds prominent left and right arrow buttons to a wrapped child such as a carousel.

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

Clicking the left/right buttons selects the previous/next item.

Typical usage:

<basic-arrow-selection>
  <basic-carousel>
    ... images, etc. ...
  </basic-carousel>
</basic-arrow-selection>

By default, the arrow buttons are shown on devices with a mouse or mouse-like point device. They are not shown on a touch-capable device unless mouse movement is detected. To cause the buttons to always appear, apply the 'showArrows' CSS class.

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

arrowSelection.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 ArrowSelection. 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 |

arrowSelection.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 ArrowSelection. Defined by ItemsSelection mixin.

arrowSelection.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 ArrowSelection. Defined by ItemsSelection mixin.

arrowSelection.content : Array.<HTMLElement>

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

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

arrowSelection.goDown()

Invoked when the user wants to go/navigate down. The default implementation of this method does nothing.

Kind: instance method of ArrowSelection. Defined by KeyboardDirection mixin.

arrowSelection.goEnd()

Invoked when the user wants to go/navigate to the end (e.g., of a list). The default implementation of this method does nothing.

Kind: instance method of ArrowSelection. Defined by KeyboardDirection mixin.

arrowSelection.goLeft()

Invoked when the user wants to go/navigate left. The default implementation of this method does nothing.

Kind: instance method of ArrowSelection. Defined by KeyboardDirection mixin.

arrowSelection.goRight()

Invoked when the user wants to go/navigate right. The default implementation of this method does nothing.

Kind: instance method of ArrowSelection. Defined by KeyboardDirection mixin.

arrowSelection.goStart()

Invoked when the user wants to go/navigate to the start (e.g., of a list). The default implementation of this method does nothing.

Kind: instance method of ArrowSelection. Defined by KeyboardDirection mixin.

arrowSelection.goUp()

Invoked when the user wants to go/navigate up. The default implementation of this method does nothing.

Kind: instance method of ArrowSelection. Defined by KeyboardDirection mixin.

arrowSelection.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 ArrowSelection. Defined by ItemsSelection mixin.

| Param | Type | Description | | --- | --- | --- | | item | HTMLElement | the item being added |

arrowSelection.items : Array.<HTMLElement>

The current set of items in the list.

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

arrowSelection.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 ArrowSelection. Defined by TargetSelection mixin.

arrowSelection.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 ArrowSelection. Defined by Keyboard mixin. Returns: boolean - true if the event was handled

| Param | Type | Description | | --- | --- | --- | | event | KeyboardEvent | the keyboard event |

arrowSelection.navigationAxis : string

Indicates the direction of permitted navigation with the keyboard.

Accepted values are "horizontal", "vertical", or "both" (the default). If this property is "horizontal", the Up Arrow and Down Arrow keys will be ignored. Conversely, if this is "vertical", the Left Arrow and Right Arrow keys will be ignored.

Kind: instance property of ArrowSelection. Defined by KeyboardDirection mixin.

"selected-index-changed"

Fires when the selectedIndex property changes.

Kind: event emitted by ArrowSelection. 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 ArrowSelection. Defined by ItemsSelection mixin.

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

arrowSelection.selectedIndex : number

The index of the item which is currently selected.

If selectionWraps is false, the index is -1 if there is no selection. In that case, setting the index to -1 will deselect any currently-selected item.

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

arrowSelection.selectedItem : HTMLElement

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

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

arrowSelection.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 ArrowSelection. Defined by ItemsSelection mixin.

arrowSelection.selectFirst()

Select the first item in the list.

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

arrowSelection.selectionRequired : boolean

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

Kind: instance property of ArrowSelection. Defined by ItemsSelection mixin. Default: false

arrowSelection.selectionWraps : boolean

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

Kind: instance property of ArrowSelection. Defined by TargetSelection mixin. Default: {false}

arrowSelection.selectionWraps : boolean

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

Kind: instance property of ArrowSelection. Defined by ItemsSelection mixin. Default: false

arrowSelection.selectLast()

Select the last item in the list.

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

arrowSelection.selectNext()

Select the next item in the list.

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

arrowSelection.selectPrevious()

Select the previous item in the list.

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

arrowSelection.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 ArrowSelection. Defined by TargetInCollective mixin.

arrowSelection.target : HTMLElement

Gets/sets the current target of the component.

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

arrowSelection.target : HTMLElement

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

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