nuka-carousel - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

demo/app.js

@@ -11,2 +11,5 @@ 'use strict';
   mixins: [Carousel.ControllerMixin],
+
+  getInitialState() { return { slideIndex: 0 }; },
+
   render() {
@@ -17,3 +20,5 @@ return (
           ref="carousel"
-          data={this.setCarouselData.bind(this, 'carousel')}>
+          data={this.setCarouselData.bind(this, 'carousel')}
+          slideIndex={this.state.slideIndex}
+          afterSlide={newSlideIndex => this.setState({ slideIndex: newSlideIndex })}>
           <img src="http://placehold.it/1000x400&text=slide1"/>
@@ -26,2 +31,8 @@ <img src="http://placehold.it/1000x400&text=slide2"/>
         </Carousel>
+        <button onClick={() => this.setState({ slideIndex: 0 })}>1</button>
+        <button onClick={() => this.setState({ slideIndex: 1 })}>2</button>
+        <button onClick={() => this.setState({ slideIndex: 2 })}>3</button>
+        <button onClick={() => this.setState({ slideIndex: 3 })}>4</button>
+        <button onClick={() => this.setState({ slideIndex: 4 })}>5</button>
+        <button onClick={() => this.setState({ slideIndex: 5 })}>6</button>
       </div>
@@ -35,2 +46,1 @@ )
 ReactDom.render(<App/>, content)
-

lib/carousel.js

@@ -67,2 +67,4 @@ 'use strict';
   propTypes: {
+    afterSlide: _react2['default'].PropTypes.func,
+    beforeSlide: _react2['default'].PropTypes.func,
     cellAlign: _react2['default'].PropTypes.oneOf(['left', 'center', 'right']),
@@ -82,2 +84,3 @@ cellSpacing: _react2['default'].PropTypes.number,
     initialSlideWidth: _react2['default'].PropTypes.number,
+    slideIndex: _react2['default'].PropTypes.number,
     slidesToShow: _react2['default'].PropTypes.number,
@@ -88,5 +91,3 @@ slidesToScroll: _react2['default'].PropTypes.oneOfType([_react2['default'].PropTypes.number, _react2['default'].PropTypes.oneOf(['auto'])]),
     vertical: _react2['default'].PropTypes.bool,
-    width: _react2['default'].PropTypes.string,
-    beforeSlide: _react2['default'].PropTypes.func,
-    afterSlide: _react2['default'].PropTypes.func
+    width: _react2['default'].PropTypes.string
   },
@@ -96,2 +97,4 @@
     return {
+      afterSlide: function afterSlide() {},
+      beforeSlide: function beforeSlide() {},
       cellAlign: 'left',
@@ -105,10 +108,9 @@ cellSpacing: 0,
       framePadding: '0px',
+      slideIndex: 0,
+      slidesToScroll: 1,
       slidesToShow: 1,
-      slidesToScroll: 1,
       slideWidth: 1,
       speed: 500,
       vertical: false,
-      width: '100%',
-      beforeSlide: function beforeSlide() {},
-      afterSlide: function afterSlide() {}
+      width: '100%'
     };
@@ -119,10 +121,10 @@ },
     return {
-      currentSlide: 0,
+      currentSlide: this.props.slideIndex,
       dragging: false,
       frameWidth: 0,
       left: 0,
-      top: 0,
       slideCount: 0,
+      slidesToScroll: this.props.slidesToScroll,
       slideWidth: 0,
-      slidesToScroll: this.props.slidesToScroll
+      top: 0
     };
@@ -143,2 +145,5 @@ },
     this.setDimensions();
+    if (nextProps.slideIndex !== this.state.currentSlide) {
+      this.goToSlide(nextProps.slideIndex);
+    }
   },
@@ -224,4 +229,4 @@
         self.setState({
-          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
+          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
         });
@@ -306,3 +311,6 @@ },
       e.stopPropagation();
-      e.nativeEvent.stopPropagation();
+
+      if (e.nativeEvent) {
+        e.nativeEvent.stopPropagation();
+      }
     }
@@ -320,3 +328,3 @@ },
       if (this.touchObject.direction === 1) {
-        if (this.state.currentSlide >= _react2['default'].Children.count(this.props.children) - this.state.slidesToScroll) {
+        if (this.state.currentSlide >= _react2['default'].Children.count(this.props.children) - this.props.slidesToShow) {
           this.animateSlide(_reactTweenState2['default'].easingTypes[this.props.edgeEasing]);
@@ -395,17 +403,16 @@ } else {
   nextSlide: function nextSlide() {
-    var self = this;
-    if (this.state.currentSlide + this.state.slidesToScroll >= _react2['default'].Children.count(this.props.children)) {
+    var childrenCount = _react2['default'].Children.count(this.props.children);
+    if (this.state.currentSlide >= childrenCount - this.props.slidesToShow) {
       return;
     }
 
-    this.goToSlide(this.state.currentSlide + this.state.slidesToScroll);
+    this.goToSlide(Math.min(this.state.currentSlide + this.state.slidesToScroll, childrenCount - this.props.slidesToShow));
   },
 
   previousSlide: function previousSlide() {
-    var self = this;
-    if (this.state.currentSlide - this.state.slidesToScroll < 0) {
+    if (this.state.currentSlide <= 0) {
       return;
     }
 
-    this.goToSlide(this.state.currentSlide - this.state.slidesToScroll);
+    this.goToSlide(Math.max(0, this.state.currentSlide - this.state.slidesToScroll));
   },
@@ -524,3 +531,3 @@
     slidesToScroll = this.props.slidesToScroll;
-    frame = _reactDom2['default'].findDOMNode(this.refs.frame);
+    frame = this.refs.frame;
     firstSlide = frame.childNodes[0].childNodes[0];
@@ -527,0 +534,0 @@ if (firstSlide) {

lib/decorators.js

@@ -22,6 +22,10 @@ 'use strict';
           style: this.getButtonStyles(this.props.currentSlide === 0),
-          onClick: this.props.previousSlide },
+          onClick: this.handleClick },
         'PREV'
       );
     },
+    handleClick: function handleClick(e) {
+      e.preventDefault();
+      this.props.previousSlide();
+    },
     getButtonStyles: function getButtonStyles(disabled) {
@@ -49,6 +53,10 @@ return {
           style: this.getButtonStyles(this.props.currentSlide + this.props.slidesToScroll >= this.props.slideCount),
-          onClick: this.props.nextSlide },
+          onClick: this.handleClick },
         'NEXT'
       );
     },
+    handleClick: function handleClick(e) {
+      e.preventDefault();
+      this.props.nextSlide();
+    },
     getButtonStyles: function getButtonStyles(disabled) {
@@ -55,0 +63,0 @@ return {

package.json

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

README.md

@@ -40,4 +40,25 @@ #nuka-carousel
 
+###Running demo locally
+
+The demo can be launched on local machine via `webpack-dev-server`. Run the following:
+
+```javascript
+// if webpack-dev-server is not installed globally
+./node_modules/.bin/webpack-dev-server
+
+```
+Now, you can access the application on  your localhost at following url: <a href="http://localhost:8080/demo" target="_blank">Demo</a>
+
 ###Props
 
+####afterSlide
+`React.PropTypes.func`
+
+Hook to be called after a slide is changed.
+
+####beforeSlide
+`React.PropTypes.func`
+
+Hook to be called before a slide is changed.
+
 ####cellAlign
@@ -92,2 +113,7 @@ `React.PropTypes.oneOf(['left', 'center', 'right'])`
 
+####easing
+`React.PropTypes.string`
+
+Animation easing function. See valid easings here: [https://github.com/chenglou/tween-functions](https://github.com/chenglou/tween-functions)
+
 ####framePadding
@@ -100,7 +126,2 @@ `React.PropTypes.string`
 
-####easing
-`React.PropTypes.string`
-
-Animation easing function. See valid easings here: [https://github.com/chenglou/tween-functions](https://github.com/chenglou/tween-functions)
-
 ####edgeEasing
@@ -111,2 +132,17 @@ `React.PropTypes.string`
 
+####initialSlideHeight
+`React.PropTypes.number`
+
+Initial height of the slides in pixels.
+
+####initialSlideWidth
+`React.PropTypes.number`
+
+Initial width of the slides in pixels.
+
+####slideIndex
+`React.PropTypes.number`
+
+Manually set the index of the slide to be shown.
+
 ####slidesToShow
@@ -138,3 +174,8 @@ `React.PropTypes.number`
 
-###width
+####vertical
+`React.PropTypes.bool`
+
+Enable the slides to transition vertically.
+
+####width
 `React.PropTypes.string`
@@ -141,0 +182,0 @@

src/carousel.js

@@ -19,3 +19,3 @@ 'use strict';
   } else {
-    elem['on'+type] = eventHandle;
+    elem['on' + type] = eventHandle;
   }
@@ -33,3 +33,3 @@ };
   } else {
-    elem['on'+type] = null;
+    elem['on' + type] = null;
   }
@@ -44,2 +44,4 @@ };
   propTypes: {
+    afterSlide: React.PropTypes.func,
+    beforeSlide: React.PropTypes.func,
     cellAlign: React.PropTypes.oneOf(['left', 'center', 'right']),
@@ -71,2 +73,3 @@ cellSpacing: React.PropTypes.number,
     initialSlideWidth: React.PropTypes.number,
+    slideIndex: React.PropTypes.number,
     slidesToShow: React.PropTypes.number,
@@ -83,5 +86,3 @@ slidesToScroll: React.PropTypes.oneOfType([
     vertical: React.PropTypes.bool,
-    width: React.PropTypes.string,
-    beforeSlide: React.PropTypes.func,
-    afterSlide: React.PropTypes.func
+    width: React.PropTypes.string
   },
@@ -91,2 +92,4 @@
     return {
+      afterSlide: function() { },
+      beforeSlide: function() { },
       cellAlign: 'left',
@@ -100,10 +103,9 @@ cellSpacing: 0,
       framePadding: '0px',
+      slideIndex: 0,
+      slidesToScroll: 1,
       slidesToShow: 1,
-      slidesToScroll: 1,
       slideWidth: 1,
       speed: 500,
       vertical: false,
-      width: '100%',
-      beforeSlide: function(){},
-      afterSlide: function(){}
+      width: '100%'
     }
@@ -114,10 +116,10 @@ },
     return {
-      currentSlide: 0,
+      currentSlide: this.props.slideIndex,
       dragging: false,
       frameWidth: 0,
       left: 0,
-      top: 0,
       slideCount: 0,
+      slidesToScroll: this.props.slidesToScroll,
       slideWidth: 0,
-      slidesToScroll: this.props.slidesToScroll
+      top: 0
     }
@@ -138,2 +140,5 @@ },
     this.setDimensions();
+    if (nextProps.slideIndex !== this.state.currentSlide) {
+      this.goToSlide(nextProps.slideIndex);
+    }
   },
@@ -223,4 +228,4 @@
         self.setState({
-          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
+          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
         });
@@ -249,4 +254,4 @@ },
         self.touchObject = {
-            startX: e.clientX,
-            startY: e.clientY
+          startX: e.clientX,
+          startY: e.clientY
         };
@@ -312,3 +317,6 @@
       e.stopPropagation();
-      e.nativeEvent.stopPropagation();
+
+      if (e.nativeEvent) {
+        e.nativeEvent.stopPropagation();
+      }
     }
@@ -326,3 +334,3 @@ },
       if (this.touchObject.direction === 1) {
-        if (this.state.currentSlide >= React.Children.count(this.props.children) - this.state.slidesToScroll) {
+        if (this.state.currentSlide >= React.Children.count(this.props.children) - this.props.slidesToShow) {
           this.animateSlide(tweenState.easingTypes[this.props.edgeEasing]);
@@ -402,17 +410,16 @@ } else {
   nextSlide() {
-    var self = this;
-    if ((this.state.currentSlide + this.state.slidesToScroll) >= React.Children.count(this.props.children)) {
+    var childrenCount = React.Children.count(this.props.children);
+    if (this.state.currentSlide >= childrenCount - this.props.slidesToShow) {
       return;
     }
 
-    this.goToSlide(this.state.currentSlide + this.state.slidesToScroll);
+    this.goToSlide(Math.min(this.state.currentSlide + this.state.slidesToScroll, childrenCount - this.props.slidesToShow));
   },
 
   previousSlide() {
-    var self = this;
-    if ((this.state.currentSlide - this.state.slidesToScroll) < 0) {
+    if (this.state.currentSlide <= 0) {
       return;
     }
 
-    this.goToSlide(this.state.currentSlide - this.state.slidesToScroll);
+    this.goToSlide(Math.max(0, this.state.currentSlide - this.state.slidesToScroll));
   },
@@ -433,18 +440,18 @@
     switch (this.props.cellAlign) {
-      case 'left': {
-        offset = 0;
-        offset -= this.props.cellSpacing * (this.state.currentSlide);
-        break;
-      }
-      case 'center': {
-        offset = (this.state.frameWidth - this.state.slideWidth) / 2;
-        offset -= this.props.cellSpacing * (this.state.currentSlide);
-        break;
-      }
-      case 'right': {
-        offset = this.state.frameWidth - this.state.slideWidth;
-        offset -= this.props.cellSpacing * (this.state.currentSlide);
-        break;
-      }
+    case 'left': {
+      offset = 0;
+      offset -= this.props.cellSpacing * (this.state.currentSlide);
+      break;
     }
+    case 'center': {
+      offset = (this.state.frameWidth - this.state.slideWidth) / 2;
+      offset -= this.props.cellSpacing * (this.state.currentSlide);
+      break;
+    }
+    case 'right': {
+      offset = this.state.frameWidth - this.state.slideWidth;
+      offset -= this.props.cellSpacing * (this.state.currentSlide);
+      break;
+    }
+    }
 
@@ -522,3 +529,3 @@ if (this.props.vertical) {
     slidesToScroll = this.props.slidesToScroll;
-    frame = ReactDom.findDOMNode(this.refs.frame);
+    frame = this.refs.frame;
     firstSlide = frame.childNodes[0].childNodes[0];
@@ -652,83 +659,83 @@ if (firstSlide) {
     switch (position) {
-      case 'TopLeft': {
-        return {
-          position: 'absolute',
-          top: 0,
-          left: 0
-        }
+    case 'TopLeft': {
+      return {
+        position: 'absolute',
+        top: 0,
+        left: 0
       }
-      case 'TopCenter': {
-        return {
-          position: 'absolute',
-          top: 0,
-          left: '50%',
-          transform: 'translateX(-50%)',
-          WebkitTransform: 'translateX(-50%)'
-        }
+    }
+    case 'TopCenter': {
+      return {
+        position: 'absolute',
+        top: 0,
+        left: '50%',
+        transform: 'translateX(-50%)',
+        WebkitTransform: 'translateX(-50%)'
       }
-      case 'TopRight': {
-        return {
-          position: 'absolute',
-          top: 0,
-          right: 0
-        }
+    }
+    case 'TopRight': {
+      return {
+        position: 'absolute',
+        top: 0,
+        right: 0
       }
-      case 'CenterLeft': {
-        return {
-          position: 'absolute',
-          top: '50%',
-          left: 0,
-          transform: 'translateY(-50%)',
-          WebkitTransform: 'translateY(-50%)'
-        }
+    }
+    case 'CenterLeft': {
+      return {
+        position: 'absolute',
+        top: '50%',
+        left: 0,
+        transform: 'translateY(-50%)',
+        WebkitTransform: 'translateY(-50%)'
       }
-      case 'CenterCenter': {
-        return {
-          position: 'absolute',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%,-50%)',
-          WebkitTransform: 'translate(-50%, -50%)'
-        }
+    }
+    case 'CenterCenter': {
+      return {
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%,-50%)',
+        WebkitTransform: 'translate(-50%, -50%)'
       }
-      case 'CenterRight': {
-        return {
-          position: 'absolute',
-          top: '50%',
-          right: 0,
-          transform: 'translateY(-50%)',
-          WebkitTransform: 'translateY(-50%)'
-        }
+    }
+    case 'CenterRight': {
+      return {
+        position: 'absolute',
+        top: '50%',
+        right: 0,
+        transform: 'translateY(-50%)',
+        WebkitTransform: 'translateY(-50%)'
       }
-      case 'BottomLeft': {
-        return {
-          position: 'absolute',
-          bottom: 0,
-          left: 0
-        }
+    }
+    case 'BottomLeft': {
+      return {
+        position: 'absolute',
+        bottom: 0,
+        left: 0
       }
-      case 'BottomCenter': {
-        return {
-          position: 'absolute',
-          bottom: 0,
-          left: '50%',
-          transform: 'translateX(-50%)',
-          WebkitTransform: 'translateX(-50%)'
-        }
+    }
+    case 'BottomCenter': {
+      return {
+        position: 'absolute',
+        bottom: 0,
+        left: '50%',
+        transform: 'translateX(-50%)',
+        WebkitTransform: 'translateX(-50%)'
       }
-      case 'BottomRight': {
-        return {
-          position: 'absolute',
-          bottom: 0,
-          right: 0
-        }
+    }
+    case 'BottomRight': {
+      return {
+        position: 'absolute',
+        bottom: 0,
+        right: 0
       }
-      default: {
-        return {
-          position: 'absolute',
-          top: 0,
-          left: 0
-        }
+    }
+    default: {
+      return {
+        position: 'absolute',
+        top: 0,
+        left: 0
       }
     }
+    }
   }
@@ -735,0 +742,0 @@

src/decorators.js

@@ -12,5 +12,9 @@ 'use strict';
             style={this.getButtonStyles(this.props.currentSlide === 0)}
-            onClick={this.props.previousSlide}>PREV</button>
+            onClick={this.handleClick}>PREV</button>
         )
       },
+      handleClick(e) {
+        e.preventDefault();
+        this.props.previousSlide();
+      },
       getButtonStyles(disabled) {
@@ -36,5 +40,9 @@ return {
             style={this.getButtonStyles(this.props.currentSlide + this.props.slidesToScroll >= this.props.slideCount)}
-            onClick={this.props.nextSlide}>NEXT</button>
+            onClick={this.handleClick}>NEXT</button>
         )
       },
+      handleClick(e) {
+        e.preventDefault();
+        this.props.nextSlide();
+      },
       getButtonStyles(disabled) {
@@ -41,0 +49,0 @@ return {

test/specs/carousel.spec.js

@@ -11,7 +11,17 @@ 'use strict';
 
+  function setup() {
+    carousel = require('carousel');
+    container = document.createElement('DIV');
+    document.body.appendChild(container);
+  }
+  function teardown() {
+    ReactDOM.unmountComponentAtNode(container);
+    document.body.removeChild(container);
+    container = null;
+  }
+
   describe('Mounting', function() {
 
     beforeEach(function() {
-      carousel = require('carousel');
-      container = document.body;
+      setup();
       component = ReactDOM.render(
@@ -28,3 +38,3 @@ React.createElement(carousel, {},
     afterEach(function() {
-      ReactDOM.unmountComponentAtNode(container);
+      teardown();
     });
@@ -41,8 +51,7 @@
     beforeEach(function() {
-      carousel = require('carousel');
-      container = document.body;
+      setup();
     });
 
     afterEach(function() {
-      ReactDOM.unmountComponentAtNode(container);
+      teardown();
     });
@@ -145,8 +154,7 @@
     beforeEach(function() {
-      carousel = require('carousel');
-      container = document.body;
+      setup();
     });
 
     afterEach(function() {
-      ReactDOM.unmountComponentAtNode(container);
+      teardown();
     });
@@ -391,3 +399,3 @@
 
-    it('should have currentSlide equal 2 if slidesToScroll is 2 and it advances', function() {
+    it('should have currentSlide equal 2 for 4 slides if slidesToShow is 2, slidesToScroll is 2, and it advances', function() {
         component = ReactDOM.render(
@@ -397,3 +405,4 @@ React.createElement(carousel, {slidesToShow: 2, slidesToScroll: 2},
             React.createElement('p', null, 'Slide 2'),
-            React.createElement('p', null, 'Slide 3')
+            React.createElement('p', null, 'Slide 3'),
+            React.createElement('p', null, 'Slide 4')
           ),
@@ -408,2 +417,17 @@ container
 
+    it('should have currentSlide equal 1 for 3 slides if slidesToShow is 2, slidesToScroll is 2, and it advances', function() {
+        component = ReactDOM.render(
+          React.createElement(carousel, {slidesToShow: 2, slidesToScroll: 2},
+            React.createElement('p', null, 'Slide 1'),
+            React.createElement('p', null, 'Slide 2'),
+            React.createElement('p', null, 'Slide 3')
+          ),
+          container
+        );
+
+        component.nextSlide();
+
+        expect(component.state.currentSlide).to.equal(1);
+    });
+
     it('should set slidesToScroll to passed in slidesToScroll', function() {
@@ -473,8 +497,7 @@ component = ReactDOM.render(
     beforeEach(function() {
-      carousel = require('carousel');
-      container = document.body;
+      setup();
     });
 
     afterEach(function() {
-      ReactDOM.unmountComponentAtNode(container);
+      teardown();
     });
@@ -481,0 +504,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

88235

increased by3.05%

Lines of code

2382

increased by2.41%

Number of lines in readme file

221

increased by22.78%

No dependency changes