Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
basic-carousel
Advanced tools
basic-carousel - npm Package Compare versions
Comparing version 0.7.6 to 0.8.0
| { | ||
| "name": "basic-carousel", | ||
| "version": "0.7.6", | ||
| "version": "0.8.0", | ||
| "description": "Lets the user navigate laterally through a sequence of child elements.", | ||
@@ -15,5 +15,5 @@ "homepage": "https://component.kitchen", | ||
| "dependencies": { | ||
| "basic-element-base": "^0.7.6", | ||
| "basic-component-mixins": "^0.7.6", | ||
| "basic-sliding-viewport": "^0.7.6" | ||
| "basic-element-base": "^0.8.0", | ||
| "basic-component-mixins": "^0.8.0", | ||
| "basic-sliding-viewport": "^0.8.0" | ||
| }, | ||
@@ -20,0 +20,0 @@ "browserify": { |
219
README.md
| # API Documentation | ||
| <a name="Carousel"></a> | ||
| ## Carousel ⇐ <code>ElementBase</code> | ||
@@ -15,6 +14,7 @@ Lets the user navigate laterally through a sequence of child elements. | ||
| You can also view demos with optional | ||
| [arrows](http://basicwebcomponents.org/basic-web-components/packages/basic-carousel/carouselWithArrows.html), | ||
| [dots](http://basicwebcomponents.org/basic-web-components/packages/basic-carousel/carouselWithDots.html), | ||
| or both [arrows and dots](http://basicwebcomponents.org/basic-web-components/packages/basic-carousel/carouselWithArrowsAndDots.html). | ||
| The above demo adds the optional | ||
| [basic-arrow-selection](../basic-arrow-selection) and | ||
| [basic-page-dots](../basic-page-dots) components. You can also view a | ||
| [plain demo](http://basicwebcomponents.org/basic-web-components/packages/basic-carousel/plain.html) | ||
| demo. | ||
@@ -76,7 +76,11 @@ basic-carousel uses its children as the elements the user will navigate | ||
| * [basic-arrow-selection](http://github.com/basic-web-components/basic-web-components/packages/basic-arrow-selection). | ||
| * [basic-arrow-selection](../basic-arrow-selection). | ||
| This adds prominent left and right arrow buttons on the side of the carousel. | ||
| * [basic-page-dots](http://github.com/basic-web-components/basic-web-components/packages/basic-page-dots). | ||
| * [basic-page-dots](../basic-page-dots). | ||
| This adds a series of small dots below the carousel to indicate the user's | ||
| current position in the sequence. | ||
| * [basic-slideshow-timer](../basic-slideshow-timer). | ||
| Advances to the next item on a timer. | ||
| * [basic-tab-strip](../basic-tab-strip). | ||
| Adds a strip of traditional tab buttons. | ||
@@ -104,2 +108,3 @@ See those components for more details, but in general you can construct a | ||
| , <code>[DistributedChildrenAsContent](../basic-component-mixins/docs/DistributedChildrenAsContent.md)</code> | ||
| , <code>[FractionalSelection](../basic-component-mixins/docs/FractionalSelection.md)</code> | ||
| , <code>[Generic](../basic-component-mixins/docs/Generic.md)</code> | ||
@@ -110,5 +115,7 @@ , <code>[ItemsSelection](../basic-component-mixins/docs/ItemsSelection.md)</code> | ||
| , <code>[ObserveContentChanges](../basic-component-mixins/docs/ObserveContentChanges.md)</code> | ||
| , <code>[SelectionAnimation](../basic-component-mixins/docs/SelectionAnimation.md)</code> | ||
| , <code>[SelectionAriaActive](../basic-component-mixins/docs/SelectionAriaActive.md)</code> | ||
| , <code>[SwipeDirection](../basic-component-mixins/docs/SwipeDirection.md)</code> | ||
| , <code>[TargetInCollective](../basic-component-mixins/docs/TargetInCollective.md)</code> | ||
| , <code>[TargetSelection](../basic-component-mixins/docs/TargetSelection.md)</code> | ||
| , <code>[TrackpadDirection](../basic-component-mixins/docs/TrackpadDirection.md)</code> | ||
@@ -129,13 +136,15 @@ | ||
| * [.goLeft()](#TrackpadDirection+goLeft) | ||
| * [.goLeft()](#SwipeDirection+goLeft) | ||
| * [.goLeft()](#KeyboardDirection+goLeft) | ||
| * [.goLeft()](#SwipeDirection+goLeft) | ||
| * [.goRight()](#TrackpadDirection+goRight) | ||
| * [.goRight()](#SwipeDirection+goRight) | ||
| * [.goRight()](#KeyboardDirection+goRight) | ||
| * [.goRight()](#SwipeDirection+goRight) | ||
| * [.goStart()](#KeyboardDirection+goStart) | ||
| * [.goUp()](#KeyboardDirection+goUp) | ||
| * [.itemAdded(item)](#ItemsSelection+itemAdded) | ||
| * [.itemAdded(item)](#ContentAsItems+itemAdded) | ||
| * [.itemAdded(item)](#ItemsSelection+itemAdded) | ||
| * [.items](#TargetSelection+items) : <code>Array.<HTMLElement></code> | ||
| * [.items](#ContentAsItems+items) : <code>Array.<HTMLElement></code> | ||
| * ["items-changed"](#ContentAsItems.event_items-changed) | ||
| * [.itemsChanged()](#TargetSelection+itemsChanged) | ||
| * [.itemsChanged()](#ContentAsItems+itemsChanged) | ||
@@ -146,11 +155,19 @@ * [.keydown(event)](#Keyboard+keydown) ⇒ <code>boolean</code> | ||
| * ["selected-item-changed"](#ItemsSelection.event_selected-item-changed) | ||
| * [.selectedFraction](#SelectionAnimation+selectedFraction) : <code>number</code> | ||
| * [.selectedFraction](#FractionalSelection+selectedFraction) : <code>number</code> | ||
| * [.selectedIndex](#ItemsSelection+selectedIndex) : <code>number</code> | ||
| * [.selectedItem](#ItemsSelection+selectedItem) : <code>object</code> | ||
| * [.selectedItem](#TargetSelection+selectedItem) : <code>HTMLElement</code> | ||
| * [.selectFirst()](#ItemsSelection+selectFirst) | ||
| * [.selectionAnimationDuration](#SelectionAnimation+selectionAnimationDuration) : <code>number</code> | ||
| * [.selectionAnimationEffect](#SelectionAnimation+selectionAnimationEffect) : <code>string</code> | ||
| * [.selectionAnimationKeyframes](#SelectionAnimation+selectionAnimationKeyframes) : <code>Array.<cssRules></code> | ||
| * [.selectionRequired](#ItemsSelection+selectionRequired) : <code>boolean</code> | ||
| * [.selectionWraps](#ItemsSelection+selectionWraps) : <code>boolean</code> | ||
| * [.selectionWraps](#TargetSelection+selectionWraps) : <code>boolean</code> | ||
| * [.selectLast()](#ItemsSelection+selectLast) | ||
| * [.selectNext()](#ItemsSelection+selectNext) | ||
| * [.selectPrevious()](#ItemsSelection+selectPrevious) | ||
| * [.showTransition](#Carousel+showTransition) : <code>boolean</code> | ||
| * [.showTransition](#SelectionAnimation+showTransition) : <code>boolean</code> | ||
| * [.target](#TargetSelection+target) : <code>HTMLElement</code> | ||
| * [.target](#TargetInCollective+target) : <code>HTMLElement</code> | ||
@@ -161,3 +178,2 @@ * [.travelFraction](#SwipeDirection+travelFraction) : <code>number</code> | ||
| <a name="ContentAsItems+applySelection"></a> | ||
| ### carousel.applySelection(item, selected) | ||
@@ -178,3 +194,2 @@ Apply the selection state to a single item. | ||
| <a name="ItemsSelection+applySelection"></a> | ||
| ### carousel.applySelection(item, selected) | ||
@@ -194,3 +209,2 @@ Apply the indicate selection state to the item. | ||
| <a name="ItemsSelection+canSelectNext"></a> | ||
| ### carousel.canSelectNext : <code>boolean</code> | ||
@@ -202,3 +216,2 @@ True if the selection can be moved to the next item, false if not (the | ||
| <a name="ItemsSelection+canSelectPrevious"></a> | ||
| ### carousel.canSelectPrevious : <code>boolean</code> | ||
@@ -210,3 +223,2 @@ True if the selection can be moved to the previous item, false if not | ||
| <a name="DistributedChildrenAsContent+content"></a> | ||
| ### carousel.content : <code>Array.<HTMLElement></code> | ||
@@ -218,3 +230,2 @@ The content of this component, defined to be the flattened array of | ||
| <a name="ObserveContentChanges.event_content-changed"></a> | ||
| ### "content-changed" | ||
@@ -226,3 +237,2 @@ This event is raised when the component's contents (including distributed | ||
| <a name="ObserveContentChanges+contentChanged"></a> | ||
| ### carousel.contentChanged() | ||
@@ -238,3 +248,2 @@ Invoked when the contents of the component (including distributed | ||
| <a name="Generic+generic"></a> | ||
| ### carousel.generic : <code>Boolean</code> | ||
@@ -250,3 +259,2 @@ True if the component would like to receive generic styling. | ||
| <a name="KeyboardDirection+goDown"></a> | ||
| ### carousel.goDown() | ||
@@ -258,3 +266,2 @@ Invoked when the user wants to go/navigate down. | ||
| <a name="KeyboardDirection+goEnd"></a> | ||
| ### carousel.goEnd() | ||
@@ -266,3 +273,2 @@ Invoked when the user wants to go/navigate to the end (e.g., of a list). | ||
| <a name="TrackpadDirection+goLeft"></a> | ||
| ### carousel.goLeft() | ||
@@ -273,4 +279,3 @@ Invoked when the user wants to go/navigate left. | ||
| **Kind**: instance method of <code>[Carousel](#Carousel)</code>. Defined by <code>[TrackpadDirection](../basic-component-mixins/docs/TrackpadDirection.md)</code> mixin. | ||
| <a name="KeyboardDirection+goLeft"></a> | ||
| <a name="SwipeDirection+goLeft"></a> | ||
| ### carousel.goLeft() | ||
@@ -280,5 +285,4 @@ Invoked when the user wants to go/navigate left. | ||
| **Kind**: instance method of <code>[Carousel](#Carousel)</code>. Defined by <code>[KeyboardDirection](../basic-component-mixins/docs/KeyboardDirection.md)</code> mixin. | ||
| <a name="SwipeDirection+goLeft"></a> | ||
| **Kind**: instance method of <code>[Carousel](#Carousel)</code>. Defined by <code>[SwipeDirection](../basic-component-mixins/docs/SwipeDirection.md)</code> mixin. | ||
| <a name="KeyboardDirection+goLeft"></a> | ||
| ### carousel.goLeft() | ||
@@ -288,5 +292,4 @@ Invoked when the user wants to go/navigate left. | ||
| **Kind**: instance method of <code>[Carousel](#Carousel)</code>. Defined by <code>[SwipeDirection](../basic-component-mixins/docs/SwipeDirection.md)</code> mixin. | ||
| **Kind**: instance method of <code>[Carousel](#Carousel)</code>. Defined by <code>[KeyboardDirection](../basic-component-mixins/docs/KeyboardDirection.md)</code> mixin. | ||
| <a name="TrackpadDirection+goRight"></a> | ||
| ### carousel.goRight() | ||
@@ -297,4 +300,3 @@ Invoked when the user wants to go/navigate right. | ||
| **Kind**: instance method of <code>[Carousel](#Carousel)</code>. Defined by <code>[TrackpadDirection](../basic-component-mixins/docs/TrackpadDirection.md)</code> mixin. | ||
| <a name="KeyboardDirection+goRight"></a> | ||
| <a name="SwipeDirection+goRight"></a> | ||
| ### carousel.goRight() | ||
@@ -304,5 +306,4 @@ Invoked when the user wants to go/navigate right. | ||
| **Kind**: instance method of <code>[Carousel](#Carousel)</code>. Defined by <code>[KeyboardDirection](../basic-component-mixins/docs/KeyboardDirection.md)</code> mixin. | ||
| <a name="SwipeDirection+goRight"></a> | ||
| **Kind**: instance method of <code>[Carousel](#Carousel)</code>. Defined by <code>[SwipeDirection](../basic-component-mixins/docs/SwipeDirection.md)</code> mixin. | ||
| <a name="KeyboardDirection+goRight"></a> | ||
| ### carousel.goRight() | ||
@@ -312,5 +313,4 @@ Invoked when the user wants to go/navigate right. | ||
| **Kind**: instance method of <code>[Carousel](#Carousel)</code>. Defined by <code>[SwipeDirection](../basic-component-mixins/docs/SwipeDirection.md)</code> mixin. | ||
| **Kind**: instance method of <code>[Carousel](#Carousel)</code>. Defined by <code>[KeyboardDirection](../basic-component-mixins/docs/KeyboardDirection.md)</code> mixin. | ||
| <a name="KeyboardDirection+goStart"></a> | ||
| ### carousel.goStart() | ||
@@ -322,3 +322,2 @@ Invoked when the user wants to go/navigate to the start (e.g., of a | ||
| <a name="KeyboardDirection+goUp"></a> | ||
| ### carousel.goUp() | ||
@@ -329,4 +328,16 @@ Invoked when the user wants to go/navigate up. | ||
| **Kind**: instance method of <code>[Carousel](#Carousel)</code>. Defined by <code>[KeyboardDirection](../basic-component-mixins/docs/KeyboardDirection.md)</code> mixin. | ||
| <a name="ItemsSelection+itemAdded"></a> | ||
| ### carousel.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 <code>[Carousel](#Carousel)</code>. Defined by <code>[ItemsSelection](../basic-component-mixins/docs/ItemsSelection.md)</code> mixin. | ||
| | Param | Type | Description | | ||
| | --- | --- | --- | | ||
| | item | <code>HTMLElement</code> | the item being added | | ||
| <a name="ContentAsItems+itemAdded"></a> | ||
| ### carousel.itemAdded(item) | ||
@@ -344,18 +355,8 @@ This method is invoked whenever a new item is added to the list. | ||
| <a name="ItemsSelection+itemAdded"></a> | ||
| <a name="TargetSelection+items"></a> | ||
| ### carousel.items : <code>Array.<HTMLElement></code> | ||
| The current set of items in the list. | ||
| ### carousel.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 <code>[Carousel](#Carousel)</code>. Defined by <code>[ItemsSelection](../basic-component-mixins/docs/ItemsSelection.md)</code> mixin. | ||
| | Param | Type | Description | | ||
| | --- | --- | --- | | ||
| | item | <code>HTMLElement</code> | the item being added | | ||
| **Kind**: instance property of <code>[Carousel](#Carousel)</code>. Defined by <code>[TargetSelection](../basic-component-mixins/docs/TargetSelection.md)</code> mixin. | ||
| <a name="ContentAsItems+items"></a> | ||
| ### carousel.items : <code>Array.<HTMLElement></code> | ||
@@ -367,3 +368,2 @@ The current set of items in the list. See the top-level documentation for | ||
| <a name="ContentAsItems.event_items-changed"></a> | ||
| ### "items-changed" | ||
@@ -373,4 +373,10 @@ Fires when the items in the list change. | ||
| **Kind**: event emitted by <code>[Carousel](#Carousel)</code>. Defined by <code>[ContentAsItems](../basic-component-mixins/docs/ContentAsItems.md)</code> mixin. | ||
| <a name="TargetSelection+itemsChanged"></a> | ||
| ### carousel.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 <code>[Carousel](#Carousel)</code>. Defined by <code>[TargetSelection](../basic-component-mixins/docs/TargetSelection.md)</code> mixin. | ||
| <a name="ContentAsItems+itemsChanged"></a> | ||
| ### carousel.itemsChanged() | ||
@@ -383,3 +389,2 @@ This method is invoked when the underlying contents change. It is also | ||
| <a name="Keyboard+keydown"></a> | ||
| ### carousel.keydown(event) ⇒ <code>boolean</code> | ||
@@ -399,3 +404,2 @@ Handle the indicated keyboard event. | ||
| <a name="KeyboardDirection+navigationAxis"></a> | ||
| ### carousel.navigationAxis : <code>string</code> | ||
@@ -411,3 +415,2 @@ Indicates the direction of permitted navigation with the keyboard. | ||
| <a name="ItemsSelection.event_selected-index-changed"></a> | ||
| ### "selected-index-changed" | ||
@@ -423,3 +426,2 @@ Fires when the selectedIndex property changes. | ||
| <a name="ItemsSelection.event_selected-item-changed"></a> | ||
| ### "selected-item-changed" | ||
@@ -435,4 +437,20 @@ Fires when the selectedItem property changes. | ||
| <a name="SelectionAnimation+selectedFraction"></a> | ||
| ### carousel.selectedFraction : <code>number</code> | ||
| 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. | ||
| For more details, see the [FractionalSelection](FractionalSelection.md) | ||
| mixin. | ||
| **Kind**: instance property of <code>[Carousel](#Carousel)</code>. Defined by <code>[SelectionAnimation](../basic-component-mixins/docs/SelectionAnimation.md)</code> mixin. | ||
| <a name="FractionalSelection+selectedFraction"></a> | ||
| ### carousel.selectedFraction : <code>number</code> | ||
| 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 <code>[Carousel](#Carousel)</code>. Defined by <code>[FractionalSelection](../basic-component-mixins/docs/FractionalSelection.md)</code> mixin. | ||
| <a name="ItemsSelection+selectedIndex"></a> | ||
| ### carousel.selectedIndex : <code>number</code> | ||
@@ -447,3 +465,2 @@ The index of the item which is currently selected. | ||
| <a name="ItemsSelection+selectedItem"></a> | ||
| ### carousel.selectedItem : <code>object</code> | ||
@@ -455,4 +472,8 @@ The currently selected item, or null if there is no selection. | ||
| **Kind**: instance property of <code>[Carousel](#Carousel)</code>. Defined by <code>[ItemsSelection](../basic-component-mixins/docs/ItemsSelection.md)</code> mixin. | ||
| <a name="TargetSelection+selectedItem"></a> | ||
| ### carousel.selectedItem : <code>HTMLElement</code> | ||
| The currently selected item, or null if there is no selection. | ||
| **Kind**: instance property of <code>[Carousel](#Carousel)</code>. Defined by <code>[TargetSelection](../basic-component-mixins/docs/TargetSelection.md)</code> mixin. | ||
| <a name="ItemsSelection+selectFirst"></a> | ||
| ### carousel.selectFirst() | ||
@@ -462,4 +483,53 @@ Select the first item in the list. | ||
| **Kind**: instance method of <code>[Carousel](#Carousel)</code>. Defined by <code>[ItemsSelection](../basic-component-mixins/docs/ItemsSelection.md)</code> mixin. | ||
| <a name="SelectionAnimation+selectionAnimationDuration"></a> | ||
| ### carousel.selectionAnimationDuration : <code>number</code> | ||
| The duration of a selection animation in milliseconds. | ||
| This measures the amount of time required for a selection animation to | ||
| complete. This number remains constant, even if the number of items being | ||
| animated increases. | ||
| The default value is 250 milliseconds (a quarter a second). | ||
| **Kind**: instance property of <code>[Carousel](#Carousel)</code>. Defined by <code>[SelectionAnimation](../basic-component-mixins/docs/SelectionAnimation.md)</code> mixin. | ||
| **Default**: <code>250</code> | ||
| <a name="SelectionAnimation+selectionAnimationEffect"></a> | ||
| ### carousel.selectionAnimationEffect : <code>string</code> | ||
| The name of a standard selection animation effect. | ||
| This is a shorthand for setting the `selectionAnimationKeyframes` | ||
| property to standard keyframes. Supported string values: | ||
| * "crossfade" | ||
| * "reveal" | ||
| * "revealWithFade" | ||
| * "showAdjacent" | ||
| * "slide" | ||
| * "slideWithGap" | ||
| **Kind**: instance property of <code>[Carousel](#Carousel)</code>. Defined by <code>[SelectionAnimation](../basic-component-mixins/docs/SelectionAnimation.md)</code> mixin. | ||
| **Default**: <code>"\"slide\""</code> | ||
| <a name="SelectionAnimation+selectionAnimationKeyframes"></a> | ||
| ### carousel.selectionAnimationKeyframes : <code>Array.<cssRules></code> | ||
| The keyframes that define an animation that plays for an item when moving | ||
| forward in the sequence. | ||
| This is an array of CSS rules that will be applied. These are used as | ||
| [keyframes](http://w3c.github.io/web-animations/#keyframes-section) | ||
| to animate the item with the | ||
| [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/animation). | ||
| The animation represents the state of the next item as it moves from | ||
| completely unselected (offstage, usually right), to selected (center | ||
| stage), to completely unselected (offstage, usually left). The center time | ||
| of the animation should correspond to the item's quiscent selected state, | ||
| typically in the center of the stage and at the item's largest size. | ||
| The default forward animation is a smooth slide at full size from right to | ||
| left. | ||
| When moving the selection backward, this animation is played in reverse. | ||
| **Kind**: instance property of <code>[Carousel](#Carousel)</code>. Defined by <code>[SelectionAnimation](../basic-component-mixins/docs/SelectionAnimation.md)</code> mixin. | ||
| <a name="ItemsSelection+selectionRequired"></a> | ||
| ### carousel.selectionRequired : <code>boolean</code> | ||
@@ -469,11 +539,16 @@ True if the list should always have a selection (if it has items). | ||
| **Kind**: instance property of <code>[Carousel](#Carousel)</code>. Defined by <code>[ItemsSelection](../basic-component-mixins/docs/ItemsSelection.md)</code> mixin. | ||
| **Default**: <code>false</code> | ||
| <a name="ItemsSelection+selectionWraps"></a> | ||
| ### carousel.selectionWraps : <code>boolean</code> | ||
| True if selection navigations wrap from last to first, and vice versa. | ||
| **Kind**: instance property of <code>[Carousel](#Carousel)</code>. Defined by <code>[ItemsSelection](../basic-component-mixins/docs/ItemsSelection.md)</code> mixin. | ||
| **Default**: <code>false</code> | ||
| <a name="TargetSelection+selectionWraps"></a> | ||
| ### carousel.selectionWraps : <code>boolean</code> | ||
| True if selection navigations wrap from last to first, and vice versa. | ||
| **Kind**: instance property of <code>[Carousel](#Carousel)</code>. Defined by <code>[ItemsSelection](../basic-component-mixins/docs/ItemsSelection.md)</code> mixin. | ||
| **Kind**: instance property of <code>[Carousel](#Carousel)</code>. Defined by <code>[TargetSelection](../basic-component-mixins/docs/TargetSelection.md)</code> mixin. | ||
| **Default**: <code>{false}</code> | ||
| <a name="ItemsSelection+selectLast"></a> | ||
| ### carousel.selectLast() | ||
@@ -484,3 +559,2 @@ Select the last item in the list. | ||
| <a name="ItemsSelection+selectNext"></a> | ||
| ### carousel.selectNext() | ||
@@ -491,3 +565,2 @@ Select the next item in the list. | ||
| <a name="ItemsSelection+selectPrevious"></a> | ||
| ### carousel.selectPrevious() | ||
@@ -497,4 +570,3 @@ Select the previous item in the list. | ||
| **Kind**: instance method of <code>[Carousel](#Carousel)</code>. Defined by <code>[ItemsSelection](../basic-component-mixins/docs/ItemsSelection.md)</code> mixin. | ||
| <a name="Carousel+showTransition"></a> | ||
| <a name="SelectionAnimation+showTransition"></a> | ||
| ### carousel.showTransition : <code>boolean</code> | ||
@@ -515,5 +587,10 @@ Determine whether a transition should be shown during selection. | ||
| **Kind**: instance property of <code>[Carousel](#Carousel)</code> | ||
| **Kind**: instance property of <code>[Carousel](#Carousel)</code>. Defined by <code>[SelectionAnimation](../basic-component-mixins/docs/SelectionAnimation.md)</code> mixin. | ||
| <a name="TargetSelection+target"></a> | ||
| ### carousel.target : <code>HTMLElement</code> | ||
| Gets/sets the target element to which this component will delegate | ||
| selection actions. | ||
| **Kind**: instance property of <code>[Carousel](#Carousel)</code>. Defined by <code>[TargetSelection](../basic-component-mixins/docs/TargetSelection.md)</code> mixin. | ||
| <a name="TargetInCollective+target"></a> | ||
| ### carousel.target : <code>HTMLElement</code> | ||
@@ -532,3 +609,2 @@ Gets/sets the current target of the component. | ||
| <a name="SwipeDirection+travelFraction"></a> | ||
| ### carousel.travelFraction : <code>number</code> | ||
@@ -540,3 +616,2 @@ The distance the first touchpoint has traveled since the beginning of a | ||
| <a name="TrackpadDirection+travelFraction"></a> | ||
| ### carousel.travelFraction : <code>number</code> | ||
@@ -543,0 +618,0 @@ The distance the user has moved the first touchpoint since the beginning |
| import ElementBase from '../../basic-element-base/src/ElementBase'; | ||
| import ContentAsItems from '../../basic-component-mixins/src/ContentAsItems'; | ||
| import DirectionSelection from '../../basic-component-mixins/src/DirectionSelection'; | ||
| import DistributedChildrenAsContent from '../../basic-component-mixins/src/DistributedChildrenAsContent'; | ||
| import FractionalSelection from '../../basic-component-mixins/src/FractionalSelection'; | ||
| import Generic from '../../basic-component-mixins/src/Generic'; | ||
@@ -11,3 +13,3 @@ import ItemsSelection from '../../basic-component-mixins/src/ItemsSelection'; | ||
| import SelectionAriaActive from '../../basic-component-mixins/src/SelectionAriaActive'; | ||
| import SlidingViewport from '../../basic-sliding-viewport/src/SlidingViewport'; // jshint ignore:line | ||
| import SelectionAnimation from '../../basic-component-mixins/src/SelectionAnimation'; | ||
| import SwipeDirection from '../../basic-component-mixins/src/SwipeDirection'; | ||
@@ -17,2 +19,3 @@ import TargetInCollective from '../../basic-component-mixins/src/TargetInCollective'; | ||
| let base = ElementBase.compose( | ||
@@ -22,2 +25,3 @@ ContentAsItems, | ||
| DistributedChildrenAsContent, | ||
| FractionalSelection, | ||
| Generic, | ||
@@ -28,2 +32,3 @@ ItemsSelection, | ||
| ObserveContentChanges, | ||
| SelectionAnimation, | ||
| SelectionAriaActive, | ||
@@ -47,6 +52,7 @@ SwipeDirection, | ||
| * | ||
| * You can also view demos with optional | ||
| * [arrows](http://basicwebcomponents.org/basic-web-components/packages/basic-carousel/carouselWithArrows.html), | ||
| * [dots](http://basicwebcomponents.org/basic-web-components/packages/basic-carousel/carouselWithDots.html), | ||
| * or both [arrows and dots](http://basicwebcomponents.org/basic-web-components/packages/basic-carousel/carouselWithArrowsAndDots.html). | ||
| * The above demo adds the optional | ||
| * [basic-arrow-selection](../basic-arrow-selection) and | ||
| * [basic-page-dots](../basic-page-dots) components. You can also view a | ||
| * [plain demo](http://basicwebcomponents.org/basic-web-components/packages/basic-carousel/plain.html) | ||
| * demo. | ||
| * | ||
@@ -108,7 +114,11 @@ * basic-carousel uses its children as the elements the user will navigate | ||
| * | ||
| * * [basic-arrow-selection](http://github.com/basic-web-components/basic-web-components/packages/basic-arrow-selection). | ||
| * * [basic-arrow-selection](../basic-arrow-selection). | ||
| * This adds prominent left and right arrow buttons on the side of the carousel. | ||
| * * [basic-page-dots](http://github.com/basic-web-components/basic-web-components/packages/basic-page-dots). | ||
| * * [basic-page-dots](../basic-page-dots). | ||
| * This adds a series of small dots below the carousel to indicate the user's | ||
| * current position in the sequence. | ||
| * * [basic-slideshow-timer](../basic-slideshow-timer). | ||
| * Advances to the next item on a timer. | ||
| * * [basic-tab-strip](../basic-tab-strip). | ||
| * Adds a strip of traditional tab buttons. | ||
| * | ||
@@ -135,2 +145,3 @@ * See those components for more details, but in general you can construct a | ||
| * @mixes DistributedChildrenAsContent | ||
| * @mixes FractionalSelection | ||
| * @mixes Generic | ||
@@ -141,5 +152,7 @@ * @mixes ItemsSelection | ||
| * @mixes ObserveContentChanges | ||
| * @mixes SelectionAnimation | ||
| * @mixes SelectionAriaActive | ||
| * @mixes SwipeDirection | ||
| * @mixes TargetInCollective | ||
| * @mixes TargetSelection | ||
| * @mixes TrackpadDirection | ||
@@ -149,66 +162,10 @@ */ | ||
| attachedCallback() { | ||
| if (super.attachedCallback) { super.attachedCallback(); } | ||
| // HACK | ||
| this.itemsChanged(); | ||
| this.selectionRequired = true; | ||
| get defaults() { | ||
| let defaults = super.defaults || {}; | ||
| defaults.navigationAxis = 'horizontal'; | ||
| defaults.selectionAnimationEffect = 'slideWithGap'; | ||
| defaults.selectionRequired = true; | ||
| return defaults; | ||
| } | ||
| createdCallback() { | ||
| if (super.createdCallback) { super.createdCallback(); } | ||
| this.navigationAxis = 'horizontal'; | ||
| } | ||
| get selectedFraction() { | ||
| return this.$.viewport.selectedFraction; | ||
| } | ||
| set selectedFraction(value) { | ||
| if ('selectedFraction' in base.prototype) { super.selectedFraction = value; } | ||
| this.$.viewport.selectedFraction = value; | ||
| let event = new CustomEvent('selection-fraction-changed'); | ||
| this.dispatchEvent(event); | ||
| } | ||
| get selectedIndex() { | ||
| return super.selectedIndex; | ||
| } | ||
| set selectedIndex(value) { | ||
| if ('selectedIndex' in base.prototype) { super.selectedIndex = value; } | ||
| this.$.viewport.selectedIndex = value; | ||
| } | ||
| get selectedItem() { | ||
| return super.selectedItem; | ||
| } | ||
| set selectedItem(item) { | ||
| if ('selectedItem' in base.prototype) { super.selectedItem = item; } | ||
| this.$.viewport.selectedItem = item; | ||
| } | ||
| /** | ||
| * Determine whether a transition should be shown during selection. | ||
| * | ||
| * Components like carousels often define animated CSS transitions for | ||
| * sliding effects. Such a transition should usually *not* be applied while | ||
| * the user is dragging, because a CSS animation will introduce a lag that | ||
| * makes the swipe feel sluggish. Instead, as long as the user is dragging | ||
| * with their finger down, the transition should be suppressed. When the | ||
| * user releases their finger, the transition can be restored, allowing the | ||
| * animation to show the carousel sliding into its final position. | ||
| * | ||
| * Note: This property is only intended to let a component cooperate with | ||
| * mixins that may be applied to it, and is not intended to let someone | ||
| * using component permanently enable or disable transition effects. | ||
| * | ||
| * @type {boolean} true if a component-provided transition should be shown, | ||
| * false if not. | ||
| */ | ||
| get showTransition() { | ||
| return super.showTransition || this.$.viewport.showTransition; | ||
| } | ||
| set showTransition(value) { | ||
| if ('showTransition' in base.prototype) { super.showTransition = value; } | ||
| this.$.viewport.showTransition = value; | ||
| } | ||
| get template() { | ||
@@ -218,19 +175,21 @@ return ` | ||
| :host { | ||
| display: -webkit-flex; | ||
| display: flex; | ||
| overflow: hidden; | ||
| position: relative; | ||
| } | ||
| basic-sliding-viewport { | ||
| display: -webkit-flex; | ||
| display: flex; | ||
| -webkit-flex: 1; | ||
| flex: 1; | ||
| #container ::content > * { | ||
| height: 100%; | ||
| object-fit: contain; | ||
| position: absolute; | ||
| width: 100%; | ||
| will-change: transform; | ||
| } | ||
| </style> | ||
| <basic-sliding-viewport id="viewport"> | ||
| <div id="container"> | ||
| <slot></slot> | ||
| </basic-sliding-viewport> | ||
| </div> | ||
| `; | ||
| } | ||
| } | ||
@@ -237,0 +196,0 @@ |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by19.82%
490899
- Lines of code
- increased by16.02%
5142
- Number of lines in readme file
- increased by14.85%
580
Worsened metrics
- Number of package files
- decreased by-25%
6
Dependency changes
+ Addedbasic-component-mixins@0.8.0(transitive)
+ Addedbasic-element-base@0.8.0(transitive)
+ Addedbasic-sliding-viewport@0.8.0(transitive)
+ Addedbasic-spread-items@0.8.0(transitive)
- Removedbasic-component-mixins@0.7.6(transitive)
- Removedbasic-element-base@0.7.6(transitive)
- Removedbasic-sliding-viewport@0.7.6(transitive)
- Removedbasic-spread-items@0.7.6(transitive)
Updatedbasic-element-base@^0.8.0