@longlost/app-carousel - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

app-carousel.js

 /**
   * `app-carousel`
   * 
+  *   This element takes slotted elements and controls how they scroll horizontally.
   *
+  *
   * @customElement
@@ -9,3 +11,3 @@ * @polymer
   *
-  * This element takes slotted elements and controls how they scroll horizontally.
+  * 
   *
@@ -64,5 +66,4 @@ *
   *
-  */
+  **/
 
-
 import {AppElement, html} from '@longlost/app-element/app-element.js';
@@ -73,2 +74,3 @@ import {head, tail}       from '@longlost/lambda/lambda.js';
 import '@longlost/app-icons/app-icons.js';
+import '@longlost/app-shared-styles/app-shared-styles.js';
 import '@polymer/paper-icon-button/paper-icon-button.js';
@@ -206,3 +208,8 @@ import '@polymer/paper-ripple/paper-ripple.js';
         computed: '__computeSections(_debouncedItems, _sectionCount, position)'
-      }
+      },
+      // Used by container on-up/on-down handlers.
+      // If carousel was playing, stop anytime user
+      // is interacting with carousel, then resume
+      // playing once user is done.
+      _shouldResume: Boolean
 
@@ -575,3 +582,3 @@ };
     this._isPlaying = true;
-    // reset each time play is called
+    // Reset each time play is called.
     window.clearInterval(this._playTimerId); 
@@ -596,2 +603,18 @@
   }
+  // Stop playing anytime user is 
+  // manually scrolling the carousel.
+  __containerOnDown() {
+    if (this._isPlaying) {
+      this._shouldResume = true;
+      this.__stop();
+    }
+  }
+  // Resume playing when user is 
+  // done manually scrolling carousel.
+  __containerOnUp() {
+    if (this._shouldResume) {
+      this._shouldResume = false;
+      this.__play();
+    }
+  }
 
@@ -598,0 +621,0 @@

package.json

 {
   "name": "@longlost/app-carousel",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "configurable carousel with autoplay, swipe, optional nav and av buttons",
@@ -22,2 +22,3 @@ "main": "app-carousel.js",
     "@longlost/app-icons": "^1.0.0",
+    "@longlost/app-shared-styles": "^2.0.0",
     "@longlost/lambda": "^1.3.9",
@@ -28,3 +29,4 @@ "@longlost/utils": "^1.1.6",
     "@polymer/paper-ripple": "^3.0.1",
-    "@polymer/polymer": "^3.3.1"
+    "@polymer/polymer": "^3.3.1",
+    "scroll-behavior-polyfill": "^2.0.13"
   },
@@ -34,3 +36,3 @@ "devDependencies": {
     "@polymer/test-fixture": "^4.0.2",
-    "@webcomponents/webcomponentsjs": "^2.3.0",
+    "@webcomponents/webcomponentsjs": "^2.4.0",
     "chai": "^4.2.0",
@@ -37,0 +39,0 @@ "mocha": "^6.2.2",

README.md

 # \<app-carousel\>
 
+This element takes slotted elements and controls how they scroll horizontally.
 
+## Example Usage
 
+```
+<app-carousel auto-play 
+	      dots
+	      flip-time="3500"
+	      nav 
+	      position="start">
+</app-carousel>
+```
+
+## Styling
+
+### Both default to 8px.
+
+
+--carousel-dot-size
+
+--carousel-dot-spacing
+
+
+
+### Nav butons and Dots, plus Play/Stop icons.
+
+--carousel-ui-color
+
+--carousel-ui-background-color
+
+--carousel-ui-ink-color
+
+
+## Public Api
+
+### Properties:
+
+**auto-play**
+ Boolean false,   Starts player immediately.
+
+**dots**
+ Boolean false,   Section index ui dots.
+ 
+**flip-time**
+ Number  3000,    Milliseconds to wait between each flip.
+
+**nav**
+ Boolean false,   Include nav ui.
+
+**position**
+ String 'center', How carousel positions elements relative to self.
+
+
+
+### Methods:
+    
+ **animateToSection(index)**
+  Animate to a given section by index number.
+ 
+ **moveToSection(index)**
+  Instant move to a given section by index number.
+ 
+ **nextItem(direction, recycle)**
+  Animate to next slide, pass in direction and if it should wrap from last slide to begining slide.
+ 
+ **play()**
+  Start carousel flips.
+ 
+ **stop()**
+  Stop carousel flips.
+
+
+
+### Events:
+
+ **'app-carousel-centered-item-changed'**, {value: item}
+  Fired each time a new element becomes centered in the carousel.
+  
+ **'app-carousel-section-index-changed'**, {value: index}
+  Fired each time the section index changes.
+  
+ **'app-carousel-sections-changed'**,      {value: sections}
+  Fired each time items in the carousel change, thus triggering new section items creation.
+
+---
+
 ## Install the Polymer-CLI
@@ -6,0 +90,0 @@

New alerts

License Policy Violation

License

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

37049

increased by7.83%

Lines of code

707

increased by3.51%

Number of lines in readme file

106

increased by381.82%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

10

increased by25%

Dependency changes

• + Added@longlost/app-shared-styles@^2.0.0

• + Addedscroll-behavior-polyfill@^2.0.13

• + Added@longlost/app-shared-styles@2.0.15(transitive)

• + Addedscroll-behavior-polyfill@2.0.13(transitive)