@spriteful/spriteful-carousel - npm Package Compare versions

Comparing version 1.1.5 to 2.0.0

package.json

 {
   "name": "@spriteful/spriteful-carousel",
-  "version": "1.1.5",
-  "description": "configurable image carousel with autoplay as well as mouse/touch swipe and button interactivity",
+  "version": "2.0.0",
+  "description": "configurable image carousel with autoplay, swipe, optional nav and av buttons",
   "main": "spriteful-carousel.js",
@@ -20,7 +20,7 @@ "scripts": {
   "dependencies": {
-    "@polymer/iron-icon": "^3.0.0-pre.25",
-    "@polymer/paper-icon-button": "^3.0.0-pre.25",
+    "@polymer/iron-icon": "^3.0.1",
+    "@polymer/paper-icon-button": "^3.0.1",
+    "@polymer/paper-ripple": "^3.0.1",
     "@polymer/polymer": "^3.0.5",
     "@spriteful/spriteful-icons": "^1.0.6",
-    "@spriteful/spriteful-image-container": "^1.0.0",
     "@spriteful/spriteful-mixin": "^1.0.4",
@@ -27,0 +27,0 @@ "@spriteful/template": "^1.0.0",

polymer.json

@@ -0,0 +0,0 @@ {

README.md

@@ -0,0 +0,0 @@ # \<spriteful-carousel\>

spriteful-carousel.js

@@ -13,3 +13,14 @@ /**
   *   
-  *   --spriteful-carousel-height: defaulted to 100% container  
+  *   --spriteful-carousel-height, 
+  *   --spriteful-carousel-width: defaulted to 100%
+  * 
+  *   --spriteful-carousel-overflow-x, 
+  *   --spriteful-carousel-overflow-y: default to hidden
+  *
+  *   --spriteful-carousel-dot-size: default 8px
+  *   --spriteful-carousel-dot-spacing: default 8px
+  * 
+  *   --spriteful-carousel-ui-color, 
+  *   --spriteful-carousel-ui-background-color,
+  *   --spriteful-carousel-ui-ink-color: nav btns, av btns and dots
   *   
@@ -28,3 +39,2 @@ *
   *     nav            <Boolean> false,   include nav ui
-  *     size           <String>  'cover', css background-size, can also be 'contain'
   *     visible-images <Number>  1,       number of images to display in the carousel at one time
@@ -51,8 +61,7 @@ *
   *
-  *     'spriteful-carousel-image-clicked' fired when user clicks an image
-  *                                        event.detail === {
-  *                                          node: clicked element, 
-  *                                          index: array index, 
-  *                                          data: {capture, url, orientation}
-  *                                        }
+  *     'spriteful-carousel-lazy-load' fired after transitioning to a new section (sections can have multiple images)
+  *                                    event.detail === {
+  *                                       currentIndex: section index, 
+  *                                       nextIndex:    upcoming section index,
+  *                                    }
   *
@@ -63,3 +72,3 @@ *
 
-import {PolymerElement}  from '@polymer/polymer/polymer-element.js';
+import {PolymerElement}        from '@polymer/polymer/polymer-element.js';
 import {GestureEventListeners} from '@polymer/polymer/lib/mixins/gesture-event-listeners.js';
@@ -69,9 +78,8 @@ import {SpritefulMixin}        from '@spriteful/spriteful-mixin/spriteful-mixin.js';
 import {
-  listen, 
-  schedule, 
-  unlisten, 
+  listen,
+  listenOnce,
+  schedule,
   wait
 }                              from '@spriteful/utils/utils.js';
 import htmlString              from './spriteful-carousel.html';
-import '@spriteful/spriteful-image-container/spriteful-image-container.js';
 import '@spriteful/spriteful-icons/spriteful-icons.js';
@@ -103,4 +111,2 @@ import '@polymer/paper-icon-button/paper-icon-button.js';
       dots: Boolean,
-      // carousel images array [{capture, url, orientation}]
-      images: Array,
       // true to have clickable navigation arrows
@@ -113,7 +119,2 @@ nav: Boolean,
       },
-      // css background size of image
-      size: {
-        type: String,
-        value: 'cover' // or 'contain'
-      },
       // configureable number of images shown at one time
@@ -129,6 +130,6 @@ visibleImages: {
       },
-      // window resize event unlisten key
-      _resizeUnlistenKey: String,
 
       _cancelFlick: Boolean,
+      // the repeated slot elements contained in the carousel
+      _carouselViews: Array,
       // a section can include more than one image
@@ -171,9 +172,4 @@ _currentSectionIndex: {
       _imagesContainerWidth: Number,
-      // number of images in the images array
-      _imageCount: {
-        type: Number,
-        computed: '__computeImageCount(images)'
-      },
-      // template dom-repeat rendered-item-count
-      _renderedItems: Number,
+      // number of slotted image dom nodes
+      _imageCount: Number,
       // if currently playing, cancel play during user interaction and 
@@ -196,3 +192,3 @@ // resume playing after user interation
       '__autoPlayChanged(autoPlay)',
-      '__renderedItemsChanged(_renderedItems)'
+      '__imageCountChanged(_imageCount)'
     ];
@@ -206,3 +202,5 @@ }
     // dynamically resize images and containers
-    this._resizeUnlistenKey = listen(window, 'resize', this.__setImageSize.bind(this));
+    listen(window,      'resize',     this.__setImageSize.bind(this));
+    listen(this.$.slot, 'slotchange', this.__slotChangedHandler.bind(this));
+    this.__updateImageCount();
     await schedule();
@@ -215,9 +213,2 @@ this.style.opacity = '1';
 
-  disconnectedCallback() {
-    super.disconnected();
-
-    unlisten(this._resizeUnlistenKey);
-  }
-
-
   __computeFullSection(maskWidth, visibleImages) {
@@ -246,14 +237,5 @@ if (maskWidth === undefined || visibleImages === undefined) { return; }
 
-
-  __computeImageCount(array) {
-    if (!array) { return; }
-    if (!Array.isArray(array)) { return; }
-
-    return array.length;
-  }
-
   // move selected class to currently visible dot
   __computeDotsArray(count, index) {
     const array = [];
-
     for (let i = 0; i <= count; i += 1) {
@@ -264,6 +246,4 @@ const obj = {selected: ''};
       }
-
       array.push(obj);
     }
-
     return array;
@@ -273,2 +253,21 @@ }
 
+  __updateImageCount() {
+    const nodes    = this.slotNodes('#slot');
+    this._carouselViews = nodes.filter(node => 
+      node.tagName !== undefined && node.tagName !== 'DOM-REPEAT');
+    this._imageCount = this._carouselViews.length;
+  }
+
+
+  __slotChangedHandler() {
+    this.__updateImageCount();
+  }
+
+  // remeasure each time the repeater adds/removes items asynchronously
+  __imageCountChanged(num) {
+    if (!num) { return; }
+    this.__setImageSize();
+  }
+
+
   __measureImageContainerWidth() {
@@ -302,8 +301,7 @@ return this.$.imagesContainer.getBoundingClientRect().width;
       const delta = x - min;
-      return min - (Math.abs(delta / rate));
+      return min - Math.abs(delta / rate);
     } else if (x > max) {
       const delta = x - max;
-      return max + (Math.abs(delta / rate));
+      return max + Math.abs(delta / rate);
     }
-
     return x;
@@ -333,3 +331,2 @@ }
           const newX = getNewX(this._sectionCount);
-          // return {x: newX, index: this._sectionCount - 1}; off by 1 error?
           return {x: newX, index: this._sectionCount};
@@ -372,3 +369,3 @@ }
       remove('same-direction-slide-transition', 'reverse-direction-slide-transition');
-    this.__translateImageContainer(this._currentX);    
+    this.__translateImageContainer(this._currentX); 
   }
@@ -381,6 +378,5 @@
     this._imageWidth      = width / this.visibleImages;
-    
-    this.updateStyles({
-      '--spriteful-image-container-height': `${height}px`,
-      '--spriteful-image-container-width':  `${this._imageWidth}px`
+    this._carouselViews.forEach(element => {
+      element.style.height = `${height}px`;
+      element.style.width  = `${this._imageWidth}px`;
     });
@@ -394,2 +390,9 @@ // wait for new layout after updateStyles
 
+  async __fireLazyLoadEvent() {
+    await listenOnce(this.$.imagesContainer, 'transitionend');
+    const index = this._currentSectionIndex * this.visibleImages;
+    this.fire('spriteful-carousel-lazy-load', {currentIndex: index, nextIndex: index + 1});
+  }
+
+
   __translateImageContainer(x) {
@@ -401,6 +404,9 @@ const clampedX = this.__getSoftClampedX(x, this._minX, 0, this.overScroll);
 
-  __animateImageContainer(x, direction = 'same') {
-    const cssString = direction === 'reverse' ? 
-                        'reverse-direction-slide-transition' : 'same-direction-slide-transition';
+  async __animateImageContainer(x, direction = 'same') {
+    const cssString = 
+      direction === 'reverse' ? 
+      'reverse-direction-slide-transition' : 
+      'same-direction-slide-transition';
     this.$.imagesContainer.classList.add(cssString);
+    this.__fireLazyLoadEvent();
     this.__translateImageContainer(x);
@@ -502,10 +508,3 @@ }
 
-  // remeasure each time the repeater adds/removes items asynchronously
-  __renderedItemsChanged(num) {
-    if (!num) { return; }
 
-    this.__setImageSize();
-  }
-
-
   async __leftNavArrowClicked() {
@@ -550,14 +549,2 @@ try {
 
-  async __imageClicked(event) {
-    try {
-      await this.clicked();
-      const {children, image, index } = event.model;
-      const node = children.find(child => 
-                     child.nodeName === 'SPRITEFUL-IMAGE-CONTAINER'); 
-      this.fire('spriteful-carousel-image-clicked', {image, index, node});
-    }
-    catch (_) {}
-  }
-
-
   async __showAvIcon(type) {
@@ -564,0 +551,0 @@ const icon = type === 'play' ? this.$.playIcon : this.$.stopIcon;

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

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

38754

decreased by-6.13%

Lines of code

513

decreased by-0.97%

Dependency changes

• + Added@polymer/paper-ripple@^3.0.1

• - Removed@spriteful/spriteful-image-container@^1.0.0

• - Removed@spriteful/spriteful-background-image-mixin@1.0.2(transitive)

• - Removed@spriteful/spriteful-image-container@1.0.0(transitive)

• Updated@polymer/iron-icon@^3.0.1

• Updated@polymer/paper-icon-button@^3.0.1