nuka-carousel - npm Package Compare versions

Comparing version 0.0.9 to 0.0.10

lib/carousel.js

@@ -75,2 +75,3 @@ 'use strict';
     speed: _React2['default'].PropTypes.number,
+    vertical: _React2['default'].PropTypes.bool,
     width: _React2['default'].PropTypes.string
@@ -93,2 +94,3 @@ },
       speed: 500,
+      vertical: false,
       width: '100%'
@@ -104,2 +106,3 @@ };
       left: 0,
+      top: 0,
       slideCount: 0,
@@ -190,3 +193,4 @@ slideWidth: 0
         self.setState({
-          left: (self.state.slideWidth * self.state.currentSlide + self.touchObject.length * self.touchObject.direction) * -1
+          left: self.props.vertical ? 0 : (self.state.slideWidth * self.state.currentSlide + self.touchObject.length * self.touchObject.direction) * -1,
+          top: self.props.vertical ? (self.state.slideWidth * self.state.currentSlide + self.touchObject.length * self.touchObject.direction) * -1 : 0
         });
@@ -234,2 +238,4 @@ },
 
+        var length = self.props.vertical ? Math.round(Math.sqrt(Math.pow(e.clientY - self.touchObject.startY, 2))) : Math.round(Math.sqrt(Math.pow(e.clientX - self.touchObject.startX, 2)));
+
         self.touchObject = {
@@ -240,3 +246,3 @@ startX: self.touchObject.startX,
           endY: e.clientY,
-          length: Math.round(Math.sqrt(Math.pow(e.clientX - self.touchObject.startX, 2))),
+          length: length,
           direction: direction
@@ -246,3 +252,4 @@ };
         self.setState({
-          left: self.getTargetLeft(self.touchObject.length * self.touchObject.direction)
+          left: self.props.vertical ? 0 : self.getTargetLeft(self.touchObject.length * self.touchObject.direction),
+          top: self.props.vertical ? self.getTargetLeft(self.touchObject.length * self.touchObject.direction) : 0
         });
@@ -328,2 +335,9 @@ },
     }
+    if (this.props.vertical === true) {
+      if (swipeAngle >= 35 && swipeAngle <= 135) {
+        return 1;
+      } else {
+        return -1;
+      }
+    }
     return 0;
@@ -376,3 +390,3 @@ },
   animateSlide: function animateSlide(easing, duration, endValue) {
-    this.tweenState('left', {
+    this.tweenState(this.props.vertical ? 'top' : 'left', {
       easing: easing || _tweenState2['default'].easingTypes[this.props.easing],
@@ -407,2 +421,6 @@ duration: duration || this.props.speed,
 
+    if (this.props.vertical) {
+      offset = offset / 2;
+    }
+
     offset -= touchOffset || 0;
@@ -449,5 +467,11 @@
         slideWidth,
-        frame;
+        firstSlide,
+        frame,
+        frameHeight,
+        slideHeight;
 
     frame = _React2['default'].findDOMNode(this.refs.frame);
+    firstSlide = frame.childNodes[0].childNodes[0];
+    firstSlide.style.height = 'auto';
+    slideHeight = firstSlide.offsetHeight * this.props.slidesToShow;
 
@@ -457,9 +481,17 @@ if (typeof this.props.slideWidth !== 'number') {
     } else {
-      slideWidth = frame.offsetWidth / this.props.slidesToShow * this.props.slideWidth;
+      if (this.props.vertical) {
+        slideWidth = slideHeight / this.props.slidesToShow * this.props.slideWidth;
+      } else {
+        slideWidth = frame.offsetWidth / this.props.slidesToShow * this.props.slideWidth;
+      }
     }
 
-    slideWidth -= this.props.cellSpacing * ((100 - 100 / this.props.slidesToShow) / 100);
+    if (!this.props.vertical) {
+      slideWidth -= this.props.cellSpacing * ((100 - 100 / this.props.slidesToShow) / 100);
+    }
 
+    frameHeight = slideHeight + this.props.cellSpacing / 2 * (this.props.slidesToShow - 1);
+
     this.setState({
-      frameWidth: frame.offsetWidth,
+      frameWidth: this.props.vertical ? frameHeight : frame.offsetWidth,
       slideCount: this.props.children.length,
@@ -475,3 +507,4 @@ slideWidth: slideWidth
     this.setState({
-      left: this.getTargetLeft()
+      left: this.props.vertical ? 0 : this.getTargetLeft(),
+      top: this.props.vertical ? this.getTargetLeft() : 0
     });
@@ -496,7 +529,8 @@ },
       display: 'block',
-      top: 0,
+      top: this.getTweeningValue('top'),
       left: this.getTweeningValue('left'),
-      margin: '0px ' + this.props.cellSpacing / 2 * -1 + 'px',
+      margin: this.props.vertical ? this.props.cellSpacing / 2 * -1 + 'px 0px' : '0px ' + this.props.cellSpacing / 2 * -1 + 'px',
       padding: 0,
-      width: listWidth + spacingOffset,
+      height: this.props.vertical ? listWidth + spacingOffset : 'auto',
+      width: this.props.vertical ? 'auto' : listWidth + spacingOffset,
       cursor: this.state.dragging === true ? 'pointer' : 'inherit',
@@ -515,2 +549,3 @@ transform: 'translate3d(0, 0, 0)',
       overflow: 'hidden',
+      height: this.props.vertical ? this.state.frameWidth || 'initial' : 'auto',
       margin: this.props.framePadding,
@@ -527,10 +562,13 @@ padding: 0,
     return {
-      display: 'inline-block',
+      display: this.props.vertical ? 'block' : 'inline-block',
       listStyleType: 'none',
       verticalAlign: 'top',
-      width: this.state.slideWidth,
+      width: this.props.vertical ? '100%' : this.state.slideWidth,
+      height: 'auto',
       boxSizing: 'border-box',
       MozBoxSizing: 'border-box',
-      marginLeft: this.props.cellSpacing / 2,
-      marginRight: this.props.cellSpacing / 2
+      marginLeft: this.props.vertical ? 'auto' : this.props.cellSpacing / 2,
+      marginRight: this.props.vertical ? 'auto' : this.props.cellSpacing / 2,
+      marginTop: this.props.vertical ? this.props.cellSpacing / 2 : 'auto',
+      marginBottom: this.props.vertical ? this.props.cellSpacing / 2 : 'auto'
     };
@@ -544,2 +582,3 @@ },
       width: this.props.width,
+      height: 'auto',
       boxSizing: 'border-box',
@@ -551,3 +590,3 @@ MozBoxSizing: 'border-box'
   getStyleTagStyles: function getStyleTagStyles() {
-    return '.slider-slide > img {width: 100%;}';
+    return '.slider-slide > img {width: 100%; display: block;}';
   },
@@ -554,0 +593,0 @@

package.json

 {
   "name": "nuka-carousel",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "Pure React Carousel",
@@ -5,0 +5,0 @@ "main": "index.js",

src/carousel.js

@@ -57,2 +57,3 @@ 'use strict';
     speed: React.PropTypes.number,
+    vertical: React.PropTypes.bool,
     width: React.PropTypes.string
@@ -75,2 +76,3 @@ },
       speed: 500,
+      vertical: false,
       width: '100%'
@@ -86,2 +88,3 @@ }
       left: 0,
+      top: 0,
       slideCount: 0,
@@ -176,3 +179,4 @@ slideWidth: 0
         self.setState({
-          left: (self.state.slideWidth * self.state.currentSlide + (self.touchObject.length * self.touchObject.direction)) * -1
+          left: self.props.vertical ? 0 : (self.state.slideWidth * self.state.currentSlide + (self.touchObject.length * self.touchObject.direction)) * -1,
+          top: self.props.vertical ? (self.state.slideWidth * self.state.currentSlide + (self.touchObject.length * self.touchObject.direction)) * -1 : 0
         });
@@ -225,2 +229,5 @@ },
 
+        var length = self.props.vertical ? Math.round(Math.sqrt(Math.pow(e.clientY - self.touchObject.startY, 2)))
+                                         : Math.round(Math.sqrt(Math.pow(e.clientX - self.touchObject.startX, 2)))
+
         self.touchObject = {
@@ -231,3 +238,3 @@ startX: self.touchObject.startX,
           endY: e.clientY,
-          length: Math.round(Math.sqrt(Math.pow(e.clientX - self.touchObject.startX, 2))),
+          length: length,
           direction: direction
@@ -237,3 +244,4 @@ };
         self.setState({
-          left: self.getTargetLeft(self.touchObject.length * self.touchObject.direction)
+          left: self.props.vertical ? 0 : self.getTargetLeft(self.touchObject.length * self.touchObject.direction),
+          top: self.props.vertical ? self.getTargetLeft(self.touchObject.length * self.touchObject.direction) : 0
         });
@@ -319,2 +327,9 @@ },
     }
+    if (this.props.vertical === true) {
+      if ((swipeAngle >= 35) && (swipeAngle <= 135)) {
+          return 1;
+      } else {
+          return -1;
+      }
+    }
     return 0;
@@ -368,3 +383,3 @@
   animateSlide(easing, duration, endValue) {
-    this.tweenState('left', {
+    this.tweenState(this.props.vertical ? 'top' : 'left', {
       easing: easing || tweenState.easingTypes[this.props.easing],
@@ -396,2 +411,6 @@ duration: duration || this.props.speed,
 
+    if (this.props.vertical) {
+      offset = offset / 2;
+    }
+
     offset -= touchOffset || 0;
@@ -432,5 +451,8 @@
   setDimensions() {
-    var self = this, slideWidth, frame;
+    var self = this, slideWidth, firstSlide, frame, frameHeight, slideHeight;
 
     frame = React.findDOMNode(this.refs.frame);
+    firstSlide = frame.childNodes[0].childNodes[0];
+    firstSlide.style.height = 'auto';
+    slideHeight = firstSlide.offsetHeight * this.props.slidesToShow;
 
@@ -440,9 +462,17 @@ if (typeof this.props.slideWidth !== 'number') {
     } else {
-      slideWidth = (frame.offsetWidth / this.props.slidesToShow) * this.props.slideWidth;
+      if (this.props.vertical) {
+        slideWidth = (slideHeight / this.props.slidesToShow) * this.props.slideWidth;
+      } else {
+        slideWidth = (frame.offsetWidth / this.props.slidesToShow) * this.props.slideWidth;
+      }
     }
 
-    slideWidth -= this.props.cellSpacing * ((100 - (100 / this.props.slidesToShow)) / 100);
+    if (!this.props.vertical) {
+      slideWidth -= this.props.cellSpacing * ((100 - (100 / this.props.slidesToShow)) / 100);
+    }
 
+    frameHeight = slideHeight + ((this.props.cellSpacing / 2) * (this.props.slidesToShow - 1));
+
     this.setState({
-      frameWidth: frame.offsetWidth,
+      frameWidth: this.props.vertical ? frameHeight : frame.offsetWidth,
       slideCount: this.props.children.length,
@@ -458,3 +488,4 @@ slideWidth: slideWidth
     this.setState({
-      left: this.getTargetLeft()
+      left: this.props.vertical ? 0 : this.getTargetLeft(),
+      top: this.props.vertical ? this.getTargetLeft() : 0
     })
@@ -479,7 +510,9 @@ },
       display: 'block',
-      top: 0,
+      top: this.getTweeningValue('top'),
       left: this.getTweeningValue('left'),
-      margin: '0px ' + (this.props.cellSpacing / 2) * -1 + 'px',
+      margin: this.props.vertical ? (this.props.cellSpacing / 2) * -1 + 'px 0px'
+                                  : '0px ' + (this.props.cellSpacing / 2) * -1 + 'px',
       padding: 0,
-      width: listWidth + spacingOffset,
+      height: this.props.vertical ? listWidth + spacingOffset : 'auto',
+      width: this.props.vertical ? 'auto' : listWidth + spacingOffset,
       cursor: this.state.dragging === true ? 'pointer' : 'inherit',
@@ -498,2 +531,3 @@ transform: 'translate3d(0, 0, 0)',
       overflow: 'hidden',
+      height: this.props.vertical ? this.state.frameWidth || 'initial' : 'auto',
       margin: this.props.framePadding,
@@ -510,10 +544,13 @@ padding: 0,
     return {
-      display: 'inline-block',
+      display: this.props.vertical ? 'block' : 'inline-block',
       listStyleType: 'none',
       verticalAlign: 'top',
-      width: this.state.slideWidth,
+      width: this.props.vertical ? '100%' : this.state.slideWidth,
+      height: 'auto',
       boxSizing: 'border-box',
       MozBoxSizing: 'border-box',
-      marginLeft: this.props.cellSpacing / 2,
-      marginRight: this.props.cellSpacing / 2
+      marginLeft: this.props.vertical ? 'auto' : this.props.cellSpacing / 2,
+      marginRight: this.props.vertical ? 'auto' : this.props.cellSpacing / 2,
+      marginTop: this.props.vertical ? this.props.cellSpacing / 2 : 'auto',
+      marginBottom: this.props.vertical ? this.props.cellSpacing / 2 : 'auto'
     }
@@ -527,2 +564,3 @@ },
       width: this.props.width,
+      height: 'auto',
       boxSizing: 'border-box',
@@ -534,3 +572,3 @@ MozBoxSizing: 'border-box'
   getStyleTagStyles() {
-    return '.slider-slide > img {width: 100%;}'
+    return '.slider-slide > img {width: 100%; display: block;}'
   },
@@ -537,0 +575,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

Improved metrics

Total package byte prevSize

77395

increased by5.58%

Lines of code

2155

increased by3.41%

No dependency changes