🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.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
No alert changes
Improved metrics
- Total package byte prevSize
490899
19.82%- Lines of code
5142
16.02%- Number of lines in readme file
580
14.85%Worsened metrics
- Number of package files
6
-25%Dependency changes
+ Added
basic-component-mixins@0.8.0(transitive)+ Added
basic-element-base@0.8.0(transitive)+ Added
basic-sliding-viewport@0.8.0(transitive)+ Added
basic-spread-items@0.8.0(transitive)- Removed
basic-component-mixins@0.7.6(transitive)- Removed
basic-element-base@0.7.6(transitive)- Removed
basic-sliding-viewport@0.7.6(transitive)- Removed
basic-spread-items@0.7.6(transitive)Updated
basic-element-base@^0.8.0