react-image-gallery - npm Package Compare versions

Comparing version 0.7.9 to 0.7.10

build/image-gallery.js

@@ -31,3 +31,2 @@ 'use strict';
 
-var MIN_INTERVAL = 500;
 var screenChangeEvents = ['fullscreenchange', 'msfullscreenchange', 'mozfullscreenchange', 'webkitfullscreenchange'];
@@ -53,2 +52,6 @@
     };
+
+    if (props.lazyLoad) {
+      _this._lazyLoaded = [];
+    }
     return _this;
@@ -67,2 +70,6 @@ }
       }
+
+      if (nextProps.lazyLoad && (!this.props.lazyLoad || this.props.items !== nextProps.items)) {
+        this._lazyLoaded = [];
+      }
     }
@@ -83,2 +90,7 @@ }, {
       }
+
+      if (prevProps.slideDuration !== this.props.slideDuration) {
+        this._slideLeft = (0, _lodash2.default)(this._unthrottledSlideLeft, this.props.slideDuration, { trailing: false });
+        this._slideRight = (0, _lodash2.default)(this._unthrottledSlideRight, this.props.slideDuration, { trailing: false });
+      }
     }
@@ -88,5 +100,11 @@ }, {
     value: function componentWillMount() {
-      this._slideLeft = (0, _lodash2.default)(this._slideLeft.bind(this), MIN_INTERVAL, true);
-      this._slideRight = (0, _lodash2.default)(this._slideRight.bind(this), MIN_INTERVAL, true);
-      this._handleResize = (0, _lodash2.default)(this._handleResize.bind(this), MIN_INTERVAL, true);
+      // Used to update the throttle if slideDuration changes
+      this._unthrottledSlideLeft = this._slideLeft.bind(this);
+      this._unthrottledSlideRight = this._slideRight.bind(this);
+
+      this._slideLeft = (0, _lodash2.default)(this._unthrottledSlideLeft, this.props.slideDuration, { trailing: false });
+
+      this._slideRight = (0, _lodash2.default)(this._unthrottledSlideRight, this.props.slideDuration, { trailing: false });
+
+      this._handleResize = this._handleResize.bind(this);
       this._handleScreenChange = this._handleScreenChange.bind(this);
@@ -132,5 +150,7 @@ this._handleKeyDown = this._handleKeyDown.bind(this);
       if (!this._intervalId) {
+        var _props = this.props;
+        var slideInterval = _props.slideInterval;
+        var slideDuration = _props.slideDuration;
+
         this.setState({ isPlaying: true });
-        var slideInterval = this.props.slideInterval;
-
         this._intervalId = window.setInterval(function () {
@@ -144,3 +164,3 @@ if (!_this2.state.hovering) {
           }
-        }, slideInterval > MIN_INTERVAL ? slideInterval : MIN_INTERVAL);
+        }, Math.max(slideInterval, slideDuration));
 
@@ -240,3 +260,3 @@ if (this.props.onPlay && callback) {
         style: {
-          transition: 'transform .45s ease-out'
+          transition: 'transform ' + this.props.slideDuration + 'ms ease-out'
         }
@@ -606,5 +626,5 @@ });
       var offsetPercentage = _state3.offsetPercentage;
-      var _props = this.props;
-      var infinite = _props.infinite;
-      var items = _props.items;
+      var _props2 = this.props;
+      var infinite = _props2.infinite;
+      var items = _props2.items;
 
@@ -745,4 +765,5 @@ var baseTranslateX = -100 * currentIndex;
         if (_this7.props.lazyLoad) {
-          if (alignment) {
+          if (alignment || _this7._lazyLoaded[index]) {
             slides.push(slide);
+            _this7._lazyLoaded[index] = true;
           }
@@ -803,24 +824,9 @@ } else {
         this.props.renderCustomControls && this.props.renderCustomControls(),
-        this.props.showFullscreenButton && _react2.default.createElement('a', {
-          className: 'image-gallery-fullscreen-button' + (isFullscreen ? ' active' : ''),
-          onClick: this._toggleFullScreen.bind(this) }),
-        this.props.showPlayButton && _react2.default.createElement('a', {
-          ref: function ref(p) {
-            return _this7._playButton = p;
-          },
-          className: 'image-gallery-play-button' + (isPlaying ? ' active' : ''),
-          onClick: this._togglePlay.bind(this) }),
+        this.props.showFullscreenButton && this.props.renderFullscreenButton(this._toggleFullScreen.bind(this), isFullscreen),
+        this.props.showPlayButton && this.props.renderPlayPauseButton(this._togglePlay.bind(this), isPlaying),
         this._canNavigate() ? [this.props.showNav && _react2.default.createElement(
           'span',
           { key: 'navigation' },
-          _react2.default.createElement('button', {
-            type: 'button',
-            className: 'image-gallery-left-nav',
-            disabled: !this._canSlideLeft(),
-            onClick: slideLeft }),
-          _react2.default.createElement('button', {
-            type: 'button',
-            className: 'image-gallery-right-nav',
-            disabled: !this._canSlideRight(),
-            onClick: slideRight })
+          this.props.renderLeftNav(slideLeft, !this._canSlideLeft()),
+          this.props.renderRightNav(slideRight, !this._canSlideRight())
         ), this.props.disableSwipe ? _react2.default.createElement(
@@ -950,2 +956,3 @@ 'div',
   startIndex: _react2.default.PropTypes.number,
+  slideDuration: _react2.default.PropTypes.number,
   slideInterval: _react2.default.PropTypes.number,
@@ -961,2 +968,6 @@ onSlide: _react2.default.PropTypes.func,
   renderCustomControls: _react2.default.PropTypes.func,
+  renderLeftNav: _react2.default.PropTypes.func,
+  renderRightNav: _react2.default.PropTypes.func,
+  renderPlayPauseButton: _react2.default.PropTypes.func,
+  renderFullscreenButton: _react2.default.PropTypes.func,
   renderItem: _react2.default.PropTypes.func
@@ -982,4 +993,35 @@ };
   startIndex: 0,
-  slideInterval: 3000
+  slideDuration: 450,
+  slideInterval: 3000,
+  renderLeftNav: function renderLeftNav(onClick, disabled) {
+    return _react2.default.createElement('button', {
+      type: 'button',
+      className: 'image-gallery-left-nav',
+      disabled: disabled,
+      onClick: onClick
+    });
+  },
+  renderRightNav: function renderRightNav(onClick, disabled) {
+    return _react2.default.createElement('button', {
+      type: 'button',
+      className: 'image-gallery-right-nav',
+      disabled: disabled,
+      onClick: onClick
+    });
+  },
+  renderPlayPauseButton: function renderPlayPauseButton(onClick, isPlaying) {
+    return _react2.default.createElement('button', {
+      type: 'button',
+      className: 'image-gallery-play-button' + (isPlaying ? ' active' : ''),
+      onClick: onClick
+    });
+  },
+  renderFullscreenButton: function renderFullscreenButton(onClick, isFullscreen) {
+    return _react2.default.createElement('button', {
+      type: 'button',
+      className: 'image-gallery-fullscreen-button' + (isFullscreen ? ' active' : ''),
+      onClick: onClick
+    });
+  }
 };
 exports.default = ImageGallery;

gulpfile.js

@@ -37,2 +37,10 @@ var babel = require('gulp-babel');
 
+gulp.task('sass-no-icon', function () {
+  gulp.src('./styles/scss/image-gallery-no-icon.scss')
+    .pipe(sass())
+    .pipe(rename('image-gallery-no-icon.css'))
+    .pipe(gulp.dest('./styles/css/'))
+    .pipe(livereload());
+});
+
 gulp.task('scripts', function() {
@@ -84,3 +92,3 @@ watchify(browserify({
 gulp.task('dev', ['watch', 'scripts', 'sass', 'server']);
-gulp.task('build', ['source-js', 'sass']);
+gulp.task('build', ['source-js', 'sass', 'sass-no-icon']);
 gulp.task('demo', ['demo-src']);

package.json

 {
   "name": "react-image-gallery",
-  "version": "0.7.9",
+  "version": "0.7.10",
   "description": "Responsive and flexible carousel component with thumbnail support",
@@ -8,3 +8,4 @@ "main": "./build/image-gallery",
     "start": "gulp dev",
-    "build": "gulp build"
+    "build": "gulp build",
+    "lint": "eslint --ext .js,.jsx src"
   },
@@ -11,0 +12,0 @@ "repository": {

README.md

@@ -31,6 +31,6 @@ React Image Gallery
 # SCSS
-@import "../node_modules/react-image-gallery/styles/scss/image-gallery.scss";
+@import "node_modules/react-image-gallery/styles/scss/image-gallery.scss";
 
 # CSS
-@import "../node_modules/react-image-gallery/styles/css/image-gallery.css";
+@import "node_modules/react-image-gallery/styles/css/image-gallery.css";
 
@@ -40,2 +40,5 @@ # Webpack
 
+# Stylesheet with no icons
+node_modules/react-image-gallery/styles/scss/image-gallery-no-icon.scss
+node_modules/react-image-gallery/styles/css/image-gallery-no-icon.css
 ```
@@ -61,10 +64,2 @@
         thumbnail: 'http://lorempixel.com/250/150/nature/1/',
-        originalClass: 'featured-slide',
-        thumbnailClass: 'featured-thumb',
-        originalAlt: 'original-alt',
-        thumbnailAlt: 'thumbnail-alt',
-        thumbnailLabel: 'Optional',
-        description: 'Optional description...',
-        srcSet: 'Optional srcset (responsive images src)',
-        sizes: 'Optional sizes (image sizes relative to the breakpoint)'
       },
@@ -83,3 +78,2 @@ {
       <ImageGallery
-        ref={i => this._imageGallery = i}
         items={images}
@@ -97,2 +91,13 @@ slideInterval={2000}
 * `items`: (required) Array of objects, see example above,
+  * Available Properties
+    * `original` - image src url
+    * `thumbnail` - image thumbnail src url
+    * `originalClass` - custom image class
+    * `thumbnailClass` - custom thumbnail class
+    * `originalAlt` - image alt
+    * `thumbnailAlt` - thumbnail image alt
+    * `thumbnailLabel` - label for thumbnail
+    * `description` - description for image
+    * `srcSet` - image srcSet
+    * `sizes` - image sizes
 * `infinite`: Boolean, default `true`
@@ -124,2 +129,4 @@ * infinite sliding
 * `indexSeparator`: String, default `' / '`, ignored if `showIndex` is false
+* `slideDuration`: Integer, default `450`
+  * transition duration during image slide in milliseconds
 * `slideInterval`: Integer, default `3000`
@@ -167,2 +174,58 @@ * `startIndex`: Integer, default `0`
     ```
+* `renderLeftNav`: Function, custom left nav component
+  * Use this to render a custom left nav control
+  * Passes `onClick` callback that will slide to the previous item and `disabled` argument for when to disable the nav
+  ```javascript
+    renderLeftNav(onClick, disabled) {
+      return (
+        <button
+          className='image-gallery-custom-left-nav'
+          disabled={disabled}
+          onClick={onClick}/>
+      )
+    }
+  ```
+* `renderRightNav`: Function, custom right nav component
+  * Use this to render a custom right nav control
+  * Passes `onClick` callback that will slide to the next item and `disabled` argument for when to disable the nav
+  ```javascript
+    renderRightNav(onClick, disabled) {
+      return (
+        <button
+          className='image-gallery-custom-right-nav'
+          disabled={disabled}
+          onClick={onClick}/>
+      )
+    }
+  ```
+* `renderPlayPauseButton`: Function, play pause button component
+  * Use this to render a custom play pause button
+  * Passes `onClick` callback that will toggle play/pause and `isPlaying` argument for when gallery is playing
+  ```javascript
+    renderPlayPauseButton: (onClick, isPlaying) => {
+      return (
+        <button
+          type='button'
+          className={
+            `image-gallery-play-button${isPlaying ? ' active' : ''}`}
+          onClick={onClick}
+        />
+      );
+    }
+  ```
+* `renderFullscreenButton`: Function, custom fullscreen button component
+  * Use this to render a custom fullscreen button
+  * Passes `onClick` callback that will toggle fullscreen and `isFullscreen` argument for when fullscreen is active
+  ```javascript
+    renderFullscreenButton: (onClick, isFullscreen) => {
+      return (
+        <button
+          type='button'
+          className={
+            `image-gallery-fullscreen-button${isFullscreen ? ' active' : ''}`}
+          onClick={onClick}
+        />
+      );
+    },
+  ```
 
@@ -169,0 +232,0 @@

src/ImageGallery.jsx

@@ -5,3 +5,2 @@ import React from 'react';
 
-const MIN_INTERVAL = 500;
 const screenChangeEvents = [
@@ -14,3 +13,2 @@ 'fullscreenchange',
 
-
 export default class ImageGallery extends React.Component {
@@ -30,2 +28,6 @@
     };
+
+    if (props.lazyLoad) {
+      this._lazyLoaded = [];
+    }
   }
@@ -52,2 +54,3 @@
     startIndex: React.PropTypes.number,
+    slideDuration: React.PropTypes.number,
     slideInterval: React.PropTypes.number,
@@ -63,2 +66,6 @@ onSlide: React.PropTypes.func,
     renderCustomControls: React.PropTypes.func,
+    renderLeftNav: React.PropTypes.func,
+    renderRightNav: React.PropTypes.func,
+    renderPlayPauseButton: React.PropTypes.func,
+    renderFullscreenButton: React.PropTypes.func,
     renderItem: React.PropTypes.func,
@@ -85,3 +92,44 @@ };
     startIndex: 0,
+    slideDuration: 450,
     slideInterval: 3000,
+    renderLeftNav: (onClick, disabled) => {
+      return (
+        <button
+          type='button'
+          className='image-gallery-left-nav'
+          disabled={disabled}
+          onClick={onClick}
+        />
+      );
+    },
+    renderRightNav: (onClick, disabled) => {
+      return (
+        <button
+          type='button'
+          className='image-gallery-right-nav'
+          disabled={disabled}
+          onClick={onClick}
+        />
+      );
+    },
+    renderPlayPauseButton: (onClick, isPlaying) => {
+      return (
+        <button
+          type='button'
+          className={
+            `image-gallery-play-button${isPlaying ? ' active' : ''}`}
+          onClick={onClick}
+        />
+      );
+    },
+    renderFullscreenButton: (onClick, isFullscreen) => {
+      return (
+        <button
+          type='button'
+          className={
+            `image-gallery-fullscreen-button${isFullscreen ? ' active' : ''}`}
+          onClick={onClick}
+        />
+      );
+    },
   };
@@ -97,2 +145,7 @@
     }
+
+    if (nextProps.lazyLoad &&
+      (!this.props.lazyLoad || this.props.items !== nextProps.items)) {
+      this._lazyLoaded = [];
+    }
   }
@@ -115,8 +168,27 @@
     }
+
+    if (prevProps.slideDuration !== this.props.slideDuration) {
+      this._slideLeft = throttle(this._unthrottledSlideLeft,
+                                 this.props.slideDuration,
+                                 {trailing: false});
+      this._slideRight = throttle(this._unthrottledSlideRight,
+                                  this.props.slideDuration,
+                                  {trailing: false});
+    }
   }
 
   componentWillMount() {
-    this._slideLeft = throttle(this._slideLeft.bind(this), MIN_INTERVAL, true);
-    this._slideRight = throttle(this._slideRight.bind(this), MIN_INTERVAL, true);
-    this._handleResize = throttle(this._handleResize.bind(this), MIN_INTERVAL, true);
+    // Used to update the throttle if slideDuration changes
+    this._unthrottledSlideLeft = this._slideLeft.bind(this);
+    this._unthrottledSlideRight = this._slideRight.bind(this);
+
+    this._slideLeft = throttle(this._unthrottledSlideLeft,
+                               this.props.slideDuration,
+                               {trailing: false});
+
+    this._slideRight = throttle(this._unthrottledSlideRight,
+                                this.props.slideDuration,
+                                {trailing: false});
+
+    this._handleResize = this._handleResize.bind(this);
     this._handleScreenChange = this._handleScreenChange.bind(this);
@@ -155,4 +227,4 @@ this._handleKeyDown = this._handleKeyDown.bind(this);
     if (!this._intervalId) {
+      const {slideInterval, slideDuration} = this.props;
       this.setState({isPlaying: true});
-      const {slideInterval} = this.props;
       this._intervalId = window.setInterval(() => {
@@ -166,3 +238,3 @@ if (!this.state.hovering) {
         }
-      }, slideInterval > MIN_INTERVAL ? slideInterval : MIN_INTERVAL);
+      }, Math.max(slideInterval, slideDuration));
 
@@ -259,3 +331,3 @@ if (this.props.onPlay && callback) {
       style: {
-        transition: 'transform .45s ease-out'
+        transition: `transform ${this.props.slideDuration}ms ease-out`
       }
@@ -728,4 +800,5 @@ });
       if (this.props.lazyLoad) {
-        if (alignment) {
+        if (alignment || this._lazyLoaded[index]) {
           slides.push(slide);
+          this._lazyLoaded[index] = true;
         }
@@ -790,6 +863,3 @@ } else {
           this.props.showFullscreenButton &&
-            <a
-              className={
-                `image-gallery-fullscreen-button${isFullscreen ? ' active' : ''}`}
-              onClick={this._toggleFullScreen.bind(this)}/>
+            this.props.renderFullscreenButton(this._toggleFullScreen.bind(this), isFullscreen)
         }
@@ -799,7 +869,3 @@
           this.props.showPlayButton &&
-            <a
-              ref={p => this._playButton = p}
-              className={
-                `image-gallery-play-button${isPlaying ? ' active' : ''}`}
-              onClick={this._togglePlay.bind(this)}/>
+            this.props.renderPlayPauseButton(this._togglePlay.bind(this), isPlaying)
         }
@@ -812,13 +878,4 @@
                 <span key='navigation'>
-                  <button
-                    type='button'
-                    className='image-gallery-left-nav'
-                    disabled={!this._canSlideLeft()}
-                    onClick={slideLeft}/>
-
-                  <button
-                    type='button'
-                    className='image-gallery-right-nav'
-                    disabled={!this._canSlideRight()}
-                    onClick={slideRight}/>
+                  {this.props.renderLeftNav(slideLeft, !this._canSlideLeft())}
+                  {this.props.renderRightNav(slideRight, !this._canSlideRight())}
                 </span>,
@@ -825,0 +882,0 @@

No alert changes

Improved metrics

Total package byte prevSize

110682

increased by19.21%

Number of package files

16

increased by14.29%

Lines of code

2487

increased by14.66%

Number of lines in readme file

253

increased by33.16%

No dependency changes