react-image-gallery - npm Package Compare versions

Comparing version 0.3.4 to 0.4.0

build/image-gallery.js

@@ -27,3 +27,3 @@ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.ImageGallery = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
       slideInterval: 4000
-    }
+    };
   },
@@ -34,3 +34,3 @@
       currentIndex: 0,
-      thumbnailTranslateX: 0,
+      thumbnailsTranslateX: 0,
       containerWidth: 0
@@ -41,16 +41,17 @@ };
   componentDidUpdate: function(prevProps, prevState) {
-    if (prevState.containerWidth != this.state.containerWidth ||
-        prevProps.showThumbnails != this.props.showThumbnails) {
-      // indexDifference should always be 1 unless its the initial index
-      var indexDifference = this.state.currentIndex > 0 ? 1 : 0;
+    if (prevState.containerWidth !== this.state.containerWidth ||
+        prevProps.showThumbnails !== this.props.showThumbnails) {
 
-      // when the container resizes, thumbnailTranslateX
+      // adjust thumbnail container when window width is adjusted
+      // when the container resizes, thumbnailsTranslateX
       // should always be negative (moving right),
       // if container fits all thumbnails its set to 0
-      this.setState({
-        thumbnailTranslateX: -this._getScrollX(indexDifference) * this.state.currentIndex
-      });
+
+      this._setThumbnailsTranslateX(
+        -this._getScrollX(this.state.currentIndex > 0 ? 1 : 0) *
+        this.state.currentIndex);
+
     }
 
-    if (prevState.currentIndex != this.state.currentIndex) {
+    if (prevState.currentIndex !== this.state.currentIndex) {
 
@@ -64,11 +65,14 @@ // call back function if provided
       if (this.state.currentIndex === 0) {
-        this.setState({thumbnailTranslateX: 0});
+        this._setThumbnailsTranslateX(0);
       } else {
-        var indexDifference = Math.abs(prevState.currentIndex - this.state.currentIndex);
+        var indexDifference = Math.abs(
+          prevState.currentIndex - this.state.currentIndex);
         var scrollX = this._getScrollX(indexDifference);
         if (scrollX > 0) {
           if (prevState.currentIndex < this.state.currentIndex) {
-            this.setState({thumbnailTranslateX: this.state.thumbnailTranslateX - scrollX});
+            this._setThumbnailsTranslateX(
+              this.state.thumbnailsTranslateX - scrollX);
           } else if (prevState.currentIndex > this.state.currentIndex) {
-            this.setState({thumbnailTranslateX: this.state.thumbnailTranslateX + scrollX});
+            this._setThumbnailsTranslateX(
+              this.state.thumbnailsTranslateX + scrollX);
           }
@@ -82,3 +86,3 @@ }
   componentDidMount: function() {
-    this.setState({containerWidth: this.getDOMNode().offsetWidth});
+    this._handleResize();
     if (this.props.autoPlay) {
@@ -115,3 +119,5 @@ this.play();
   play: function() {
-    if (this._intervalId) return;
+    if (this._intervalId) {
+      return;
+    }
     this._intervalId = window.setInterval(function() {
@@ -131,2 +137,6 @@ if (!this.state.hovering) {
 
+  _setThumbnailsTranslateX: function(x) {
+    this.setState({thumbnailsTranslateX: x});
+  },
+
   _handleResize: function() {
@@ -171,5 +181,2 @@ this.setState({containerWidth: this.getDOMNode().offsetWidth});
         alignment = 'center';
-        if (this.props.items.length <= 3) {
-          alignment += ' relative';
-        }
         break;
@@ -196,8 +203,8 @@ case (currentIndex + 1):
     var currentIndex = this.state.currentIndex;
-    var ThumbnailStyle = {
-      MozTransform: 'translate3d(' + this.state.thumbnailTranslateX + 'px, 0, 0)',
-      WebkitTransform: 'translate3d(' + this.state.thumbnailTranslateX + 'px, 0, 0)',
-      OTransform: 'translate3d(' + this.state.thumbnailTranslateX + 'px, 0, 0)',
-      msTransform: 'translate3d(' + this.state.thumbnailTranslateX + 'px, 0, 0)',
-      transform: 'translate3d(' + this.state.thumbnailTranslateX + 'px, 0, 0)'
+    var thumbnailStyle = {
+      MozTransform: 'translate3d(' + this.state.thumbnailsTranslateX + 'px, 0, 0)',
+      WebkitTransform: 'translate3d(' + this.state.thumbnailsTranslateX + 'px, 0, 0)',
+      OTransform: 'translate3d(' + this.state.thumbnailsTranslateX + 'px, 0, 0)',
+      msTransform: 'translate3d(' + this.state.thumbnailsTranslateX + 'px, 0, 0)',
+      transform: 'translate3d(' + this.state.thumbnailsTranslateX + 'px, 0, 0)'
     };
@@ -211,9 +218,11 @@
       var alignment = this._getAlignment(index);
-      slides.push(
-        React.createElement("div", {
-          key: index, 
-          className: 'ImageGallery_content_slides_slide ' + alignment}, 
-          React.createElement("img", {src: item.original})
-        )
-      );
+      if (alignment) {
+        slides.push(
+          React.createElement("div", {
+            key: index, 
+            className: 'image-gallery-slide ' + alignment}, 
+            React.createElement("img", {src: item.original})
+          )
+        );
+      }
 
@@ -224,5 +233,9 @@ if (this.props.showThumbnails) {
             key: index, 
-            className: 'ImageGallery_thumbnail_container_thumbnails_thumbnail ' + (currentIndex === index ? 'active' : ''), 
+            className: 
+              'image-gallery-thumbnail ' + (
+                currentIndex === index ? 'active' : ''), 
+
             onTouchStart: this.slideToIndex.bind(this, index), 
             onClick: this.slideToIndex.bind(this, index)}, 
+
             React.createElement("img", {src: item.thumbnail})
@@ -237,3 +250,6 @@ )
             key: index, 
-            className: 'ImageGallery_bullet_container_bullets_bullet ' + (currentIndex === index ? 'active' : ''), 
+            className: 
+              'image-gallery-bullet ' + (
+                currentIndex === index ? 'active' : ''), 
+
             onTouchStart: this.slideToIndex.bind(this, index), 
@@ -247,9 +263,9 @@ onClick: this.slideToIndex.bind(this, index)}
     return (
-      React.createElement("section", {className: "ImageGallery"}, 
+      React.createElement("section", {className: "image-gallery"}, 
         React.createElement("div", {
           onMouseOver: this._handleMouseOver, 
           onMouseLeave: this._handleMouseLeave, 
-          className: "ImageGallery_content"}, 
+          className: "image-gallery-content"}, 
 
-          React.createElement("a", {className: "ImageGallery_content_left_nav", 
+          React.createElement("a", {className: "image-gallery-left-nav", 
             onTouchStart: this.slideToIndex.bind(this, currentIndex - 1), 
@@ -259,7 +275,7 @@ onClick: this.slideToIndex.bind(this, currentIndex - 1)}),
 
-          React.createElement("a", {className: "ImageGallery_content_right_nav", 
+          React.createElement("a", {className: "image-gallery-right-nav", 
             onTouchStart: this.slideToIndex.bind(this, currentIndex + 1), 
             onClick: this.slideToIndex.bind(this, currentIndex + 1)}), 
 
-          React.createElement("div", {className: "ImageGallery_content_slides"}, 
+          React.createElement("div", {className: "image-gallery-slides"}, 
             slides
@@ -270,4 +286,4 @@ ),
             this.props.showBullets &&
-              React.createElement("div", {className: "ImageGallery_bullet_container"}, 
-                React.createElement("ul", {className: "ImageGallery_bullet_container_bullets"}, 
+              React.createElement("div", {className: "image-gallery-bullets"}, 
+                React.createElement("ul", {className: "image-gallery-bullets-container"}, 
                   bullets
@@ -281,7 +297,7 @@ )
           this.props.showThumbnails &&
-            React.createElement("div", {className: "ImageGallery_thumbnail_container"}, 
+            React.createElement("div", {className: "image-gallery-thumbnails"}, 
               React.createElement("div", {
                 ref: "thumbnails", 
-                className: "ImageGallery_thumbnail_container_thumbnails", 
-                style: ThumbnailStyle}, 
+                className: "image-gallery-thumbnails-container", 
+                style: thumbnailStyle}, 
                 thumbnails
@@ -288,0 +304,0 @@ )

example/app.js

@@ -12,4 +12,3 @@ 'use strict';
     return {
-      isPaused: false,
-      isPlaying: true,
+      isPlaying: false,
       slideInterval: 4000,
@@ -23,3 +22,3 @@ showThumbnails: true,
   componentDidUpdate: function(prevProps, prevState) {
-    if (this.state.slideInterval != prevState.slideInterval) {
+    if (this.state.slideInterval !== prevState.slideInterval) {
       // refresh setInterval
@@ -34,3 +33,3 @@ this._pauseSlider();
       this.refs.imageGallery.pause();
-      this.setState({isPaused: true, isPlaying: false});
+      this.setState({isPlaying: false});
     }
@@ -42,3 +41,3 @@ },
       this.refs.imageGallery.play();
-      this.setState({isPaused: false, isPlaying: true});
+      this.setState({isPlaying: true});
     }
@@ -80,3 +79,3 @@ },
         thumbnail: 'http://lorempixel.com/250/150/nature/7/'
-      },
+      }
     ];
@@ -86,3 +85,3 @@
 
-      <section className='App'>
+      <section className='app'>
         <ImageGallery
@@ -94,7 +93,7 @@ ref='imageGallery'
           slideInterval={parseInt(this.state.slideInterval)}
-          autoPlay={true}
+          autoPlay={this.state.isPlaying}
           onSlide={this._handleSlide}
         />
 
-        <div className='App_sandbox'>
+        <div className='app-sandbox'>
 
@@ -106,3 +105,3 @@ <h2> Playground </h2>
               <a
-                className={'App_button ' + (this.state.isPlaying ? 'active' : '')}
+                className={'app-button ' + (this.state.isPlaying ? 'active' : '')}
                 onClick={this._playSlider}>
@@ -113,4 +112,4 @@ Play
             <li>
-            <a 
-              className={'App_button ' + (this.state.isPaused ? 'active' : '')}
+            <a
+              className={'app-button ' + (!this.state.isPlaying ? 'active' : '')}
               onClick={this._pauseSlider}>
@@ -117,0 +116,0 @@ Pause

gulpfile.js

@@ -63,3 +63,3 @@ 'use strict';
   livereload.listen();
-  gulp.watch(['src/*.scss',], ['sass']);
+  gulp.watch(['src/*.scss'], ['sass']);
   gulp.watch(['src/*.jsx', 'example/app.js'], ['scripts']);
@@ -66,0 +66,0 @@ });

package.json

 {
   "name": "react-image-gallery",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "description": "Image gallery component for React.JS",
@@ -36,3 +36,3 @@ "main": "./build/image-gallery",
     "gulp-sass": "^1.3.3",
-    "reactify": "^1.0.0",
+    "reactify": "^1.1.1",
     "vinyl-source-stream": "^1.0.0",
@@ -39,0 +39,0 @@ "watchify": "^2.4.0"

src/ImageGallery.react.jsx

@@ -26,3 +26,3 @@ 'use strict';
       slideInterval: 4000
-    }
+    };
   },
@@ -33,3 +33,3 @@
       currentIndex: 0,
-      thumbnailTranslateX: 0,
+      thumbnailsTranslateX: 0,
       containerWidth: 0
@@ -40,16 +40,17 @@ };
   componentDidUpdate: function(prevProps, prevState) {
-    if (prevState.containerWidth != this.state.containerWidth ||
-        prevProps.showThumbnails != this.props.showThumbnails) {
-      // indexDifference should always be 1 unless its the initial index
-      var indexDifference = this.state.currentIndex > 0 ? 1 : 0;
+    if (prevState.containerWidth !== this.state.containerWidth ||
+        prevProps.showThumbnails !== this.props.showThumbnails) {
 
-      // when the container resizes, thumbnailTranslateX
+      // adjust thumbnail container when window width is adjusted
+      // when the container resizes, thumbnailsTranslateX
       // should always be negative (moving right),
       // if container fits all thumbnails its set to 0
-      this.setState({
-        thumbnailTranslateX: -this._getScrollX(indexDifference) * this.state.currentIndex
-      });
+
+      this._setThumbnailsTranslateX(
+        -this._getScrollX(this.state.currentIndex > 0 ? 1 : 0) *
+        this.state.currentIndex);
+
     }
 
-    if (prevState.currentIndex != this.state.currentIndex) {
+    if (prevState.currentIndex !== this.state.currentIndex) {
 
@@ -63,11 +64,14 @@ // call back function if provided
       if (this.state.currentIndex === 0) {
-        this.setState({thumbnailTranslateX: 0});
+        this._setThumbnailsTranslateX(0);
       } else {
-        var indexDifference = Math.abs(prevState.currentIndex - this.state.currentIndex);
+        var indexDifference = Math.abs(
+          prevState.currentIndex - this.state.currentIndex);
         var scrollX = this._getScrollX(indexDifference);
         if (scrollX > 0) {
           if (prevState.currentIndex < this.state.currentIndex) {
-            this.setState({thumbnailTranslateX: this.state.thumbnailTranslateX - scrollX});
+            this._setThumbnailsTranslateX(
+              this.state.thumbnailsTranslateX - scrollX);
           } else if (prevState.currentIndex > this.state.currentIndex) {
-            this.setState({thumbnailTranslateX: this.state.thumbnailTranslateX + scrollX});
+            this._setThumbnailsTranslateX(
+              this.state.thumbnailsTranslateX + scrollX);
           }
@@ -81,3 +85,3 @@ }
   componentDidMount: function() {
-    this.setState({containerWidth: this.getDOMNode().offsetWidth});
+    this._handleResize();
     if (this.props.autoPlay) {
@@ -114,3 +118,5 @@ this.play();
   play: function() {
-    if (this._intervalId) return;
+    if (this._intervalId) {
+      return;
+    }
     this._intervalId = window.setInterval(function() {
@@ -130,2 +136,6 @@ if (!this.state.hovering) {
 
+  _setThumbnailsTranslateX: function(x) {
+    this.setState({thumbnailsTranslateX: x});
+  },
+
   _handleResize: function() {
@@ -170,5 +180,2 @@ this.setState({containerWidth: this.getDOMNode().offsetWidth});
         alignment = 'center';
-        if (this.props.items.length <= 3) {
-          alignment += ' relative';
-        }
         break;
@@ -195,8 +202,8 @@ case (currentIndex + 1):
     var currentIndex = this.state.currentIndex;
-    var ThumbnailStyle = {
-      MozTransform: 'translate3d(' + this.state.thumbnailTranslateX + 'px, 0, 0)',
-      WebkitTransform: 'translate3d(' + this.state.thumbnailTranslateX + 'px, 0, 0)',
-      OTransform: 'translate3d(' + this.state.thumbnailTranslateX + 'px, 0, 0)',
-      msTransform: 'translate3d(' + this.state.thumbnailTranslateX + 'px, 0, 0)',
-      transform: 'translate3d(' + this.state.thumbnailTranslateX + 'px, 0, 0)'
+    var thumbnailStyle = {
+      MozTransform: 'translate3d(' + this.state.thumbnailsTranslateX + 'px, 0, 0)',
+      WebkitTransform: 'translate3d(' + this.state.thumbnailsTranslateX + 'px, 0, 0)',
+      OTransform: 'translate3d(' + this.state.thumbnailsTranslateX + 'px, 0, 0)',
+      msTransform: 'translate3d(' + this.state.thumbnailsTranslateX + 'px, 0, 0)',
+      transform: 'translate3d(' + this.state.thumbnailsTranslateX + 'px, 0, 0)'
     };
@@ -210,9 +217,11 @@
       var alignment = this._getAlignment(index);
-      slides.push(
-        <div
-          key={index}
-          className={'ImageGallery_content_slides_slide ' + alignment}>
-          <img src={item.original}/>
-        </div>
-      );
+      if (alignment) {
+        slides.push(
+          <div
+            key={index}
+            className={'image-gallery-slide ' + alignment}>
+            <img src={item.original}/>
+          </div>
+        );
+      }
 
@@ -223,5 +232,9 @@ if (this.props.showThumbnails) {
             key={index}
-            className={'ImageGallery_thumbnail_container_thumbnails_thumbnail ' + (currentIndex === index ? 'active' : '')}
+            className={
+              'image-gallery-thumbnail ' + (
+                currentIndex === index ? 'active' : '')}
+
             onTouchStart={this.slideToIndex.bind(this, index)}
             onClick={this.slideToIndex.bind(this, index)}>
+
             <img src={item.thumbnail}/>
@@ -236,3 +249,6 @@ </a>
             key={index}
-            className={'ImageGallery_bullet_container_bullets_bullet ' + (currentIndex === index ? 'active' : '')}
+            className={
+              'image-gallery-bullet ' + (
+                currentIndex === index ? 'active' : '')}
+
             onTouchStart={this.slideToIndex.bind(this, index)}
@@ -246,9 +262,9 @@ onClick={this.slideToIndex.bind(this, index)}>
     return (
-      <section className='ImageGallery'>
+      <section className='image-gallery'>
         <div
           onMouseOver={this._handleMouseOver}
           onMouseLeave={this._handleMouseLeave}
-          className='ImageGallery_content'>
+          className='image-gallery-content'>
 
-          <a className='ImageGallery_content_left_nav'
+          <a className='image-gallery-left-nav'
             onTouchStart={this.slideToIndex.bind(this, currentIndex - 1)}
@@ -258,7 +274,7 @@ onClick={this.slideToIndex.bind(this, currentIndex - 1)}/>
 
-          <a className='ImageGallery_content_right_nav'
+          <a className='image-gallery-right-nav'
             onTouchStart={this.slideToIndex.bind(this, currentIndex + 1)}
             onClick={this.slideToIndex.bind(this, currentIndex + 1)}/>
 
-          <div className='ImageGallery_content_slides'>
+          <div className='image-gallery-slides'>
             {slides}
@@ -269,4 +285,4 @@ </div>
             this.props.showBullets &&
-              <div className='ImageGallery_bullet_container'>
-                <ul className='ImageGallery_bullet_container_bullets'>
+              <div className='image-gallery-bullets'>
+                <ul className='image-gallery-bullets-container'>
                   {bullets}
@@ -280,7 +296,7 @@ </ul>
           this.props.showThumbnails &&
-            <div className='ImageGallery_thumbnail_container'>
+            <div className='image-gallery-thumbnails'>
               <div
                 ref='thumbnails'
-                className='ImageGallery_thumbnail_container_thumbnails'
-                style={ThumbnailStyle}>
+                className='image-gallery-thumbnails-container'
+                style={thumbnailStyle}>
                 {thumbnails}
@@ -287,0 +303,0 @@ </div>

No alert changes

Improved metrics

Lines of code

848

increased by1.56%

Worsened metrics

Total package byte prevSize

34651

decreased by-10.45%

No dependency changes