react-image-gallery - npm Package Compare versions

Comparing version 0.5.7 to 0.5.8

build/image-gallery.js

@@ -35,2 +35,3 @@ 'use strict';
     defaultImage: _react2['default'].PropTypes.string,
+    disableScrolling: _react2['default'].PropTypes.bool,
     server: _react2['default'].PropTypes.bool
@@ -50,2 +51,3 @@ },
       startIndex: 0,
+      disableScrolling: false,
       server: false
@@ -98,7 +100,6 @@ };
 
-  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
-    if (this.props.items.length !== nextProps.items.length) {
-      var startIndex = nextProps.startIndex || 0;
-      this.setState({ currentIndex: startIndex });
-    }
+  componentWillMount: function componentWillMount() {
+    this._thumbnailDelay = 300;
+    this._ghotClickDelay = 600;
+    this._preventGhostClick = false;
   },
@@ -138,3 +139,2 @@
       }
-      event.preventDefault();
     }
@@ -149,7 +149,7 @@ },
     }
-    this._intervalId = window.setInterval((function () {
+    this._intervalId = window.setInterval(function () {
       if (!_this.state.hovering) {
         _this.slideToIndex(_this.state.currentIndex + 1);
       }
-    }).bind(this), this.props.slideInterval);
+    }, this.props.slideInterval);
   },
@@ -164,2 +164,23 @@
 
+  _wrapClick: function _wrapClick(func) {
+    var _this2 = this;
+
+    return function (event) {
+      if (_this2._preventGhostClick === true) {
+        return;
+      }
+      func(event);
+    };
+  },
+
+  _touchEnd: function _touchEnd(event) {
+    var _this3 = this;
+
+    this._preventGhostClick = true;
+    this._preventGhostClickTimer = window.setTimeout(function () {
+      _this3._preventGhostClick = false;
+      _this3._preventGhostClickTimer = null;
+    }, this._ghotClickDelay);
+  },
+
   _setThumbnailsTranslateX: function _setThumbnailsTranslateX(x) {
@@ -174,2 +195,5 @@ this.setState({ thumbnailsTranslateX: x });
   _getScrollX: function _getScrollX(indexDifference) {
+    if (this.props.disableScrolling) {
+      return 0;
+    }
     if (this._thumbnails) {
@@ -192,2 +216,27 @@ if (this._thumbnails.scrollWidth <= this.state.containerWidth) {
 
+  _handleMouseOverThumbnails: function _handleMouseOverThumbnails(index, event) {
+    var _this4 = this;
+
+    this.setState({ hovering: true });
+    if (this._thumbnailTimer) {
+      window.clearTimeout(this._thumbnailTimer);
+      this._thumbnailTimer = null;
+    }
+    this._thumbnailTimer = window.setTimeout(function () {
+      _this4.slideToIndex(index);
+      _this4.pause();
+    }, this._thumbnailDelay);
+  },
+
+  _handleMouseLeaveThumbnails: function _handleMouseLeaveThumbnails() {
+    if (this._thumbnailTimer) {
+      window.clearTimeout(this._thumbnailTimer);
+      this._thumbnailTimer = null;
+      if (this.props.autoPlay == true) {
+        this.play();
+      }
+    }
+    this.setState({ hovering: false });
+  },
+
   _handleMouseOver: function _handleMouseOver() {
@@ -242,3 +291,3 @@ this.setState({ hovering: true });
   render: function render() {
-    var _this2 = this;
+    var _this5 = this;
 
@@ -259,3 +308,3 @@ var currentIndex = this.state.currentIndex;
     this.props.items.map(function (item, index) {
-      var alignment = _this2._getAlignmentClassName(index);
+      var alignment = _this5._getAlignmentClassName(index);
       var originalClass = item.originalClass ? ' ' + item.originalClass : '';
@@ -269,14 +318,15 @@ var thumbnailClass = item.thumbnailClass ? ' ' + item.thumbnailClass : '';
           className: 'image-gallery-slide' + alignment + originalClass,
-          onClick: _this2.props.onClick,
-          onTouchStart: _this2.props.onClick },
+          onClick: _this5._wrapClick(_this5.props.onClick),
+          onTouchStart: _this5.props.onClick,
+          onTouchEnd: _this5._touchEnd },
         _react2['default'].createElement('img', {
-          className: _this2.props.server && 'loaded',
+          className: _this5.props.server && 'loaded',
           src: item.original,
           alt: item.originalAlt,
-          onLoad: _this2._handleImageLoad,
-          onError: _this2._handleImageError }),
+          onLoad: _this5._handleImageLoad,
+          onError: _this5._handleImageError }),
         item.description
       );
 
-      if (_this2.props.lazyLoad) {
+      if (_this5.props.lazyLoad) {
         if (alignment) {
@@ -289,19 +339,21 @@ slides.push(slide);
 
-      if (_this2.props.showThumbnails) {
+      if (_this5.props.showThumbnails) {
         thumbnails.push(_react2['default'].createElement(
           'a',
-          {
+          { onMouseOver: _this5._handleMouseOverThumbnails.bind(_this5, index),
+            onMouseLeave: _this5._handleMouseLeaveThumbnails.bind(_this5, index),
             key: index,
             className: 'image-gallery-thumbnail' + (currentIndex === index ? ' active' : '') + thumbnailClass,
 
-            onTouchStart: _this2.slideToIndex.bind(_this2, index),
-            onClick: _this2.slideToIndex.bind(_this2, index) },
+            onTouchStart: _this5.slideToIndex.bind(_this5, index),
+            onTouchEnd: _this5._touchEnd,
+            onClick: _this5._wrapClick(_this5.slideToIndex.bind(_this5, index)) },
           _react2['default'].createElement('img', {
             src: item.thumbnail,
             alt: item.thumbnailAlt,
-            onError: _this2._handleImageError })
+            onError: _this5._handleImageError })
         ));
       }
 
-      if (_this2.props.showBullets) {
+      if (_this5.props.showBullets) {
         bullets.push(_react2['default'].createElement('li', {
@@ -311,4 +363,5 @@ key: index,
 
-          onTouchStart: _this2.slideToIndex.bind(_this2, index),
-          onClick: _this2.slideToIndex.bind(_this2, index) }));
+          onTouchStart: _this5.slideToIndex.bind(_this5, index),
+          onTouchEnd: _this5._touchEnd,
+          onClick: _this5._wrapClick(_this5.slideToIndex.bind(_this5, index)) }));
       }
@@ -320,7 +373,6 @@ });
     var itemsTotal = this.props.items.length;
-
     return _react2['default'].createElement(
       'section',
       { ref: function (i) {
-          return _this2._imageGallery = i;
+          return _this5._imageGallery = i;
         }, className: 'image-gallery' },
@@ -337,7 +389,9 @@ _react2['default'].createElement(
           onTouchStart: swipePrev,
-          onClick: swipePrev }), _react2['default'].createElement('a', {
+          onTouchEnd: this._touchEnd,
+          onClick: this._wrapClick(swipePrev) }), _react2['default'].createElement('a', {
           key: 'rightNav',
           className: 'image-gallery-right-nav',
           onTouchStart: swipeNext,
-          onClick: swipeNext })], _react2['default'].createElement(
+          onTouchEnd: this._touchEnd,
+          onClick: this._wrapClick(swipeNext) })], _react2['default'].createElement(
           _reactSwipeable2['default'],
@@ -394,3 +448,3 @@ {
             ref: function (t) {
-              return _this2._thumbnails = t;
+              return _this5._thumbnails = t;
             },
@@ -397,0 +451,0 @@ className: 'image-gallery-thumbnails-container',

package.json

 {
   "name": "react-image-gallery",
-  "version": "0.5.7",
+  "version": "0.5.8",
   "description": "Image gallery component for React.JS",
@@ -5,0 +5,0 @@ "main": "./build/image-gallery",

README.md

@@ -102,2 +102,3 @@ # react-image-gallery
 * `defaultImage`: String, default `undefined`
+* `disableScrolling`: Boolean, default `false`
 * `onSlide`: Function, `callback(index)`
@@ -104,0 +105,0 @@ * `onClick`: Function, `callback(event)`

src/ImageGallery.react.jsx

@@ -1,6 +0,4 @@
-'use strict';
+import React from 'react'
+import Swipeable from 'react-swipeable'
 
-import React from 'react';
-import Swipeable from 'react-swipeable';
-
 const ImageGallery = React.createClass({
@@ -24,2 +22,3 @@
     defaultImage: React.PropTypes.string,
+    disableScrolling: React.PropTypes.bool,
     server: React.PropTypes.bool
@@ -39,4 +38,5 @@ },
       startIndex: 0,
+      disableScrolling: false,
       server: false
-    };
+    }
   },
@@ -49,3 +49,3 @@
       containerWidth: 0
-    };
+    }
   },
@@ -64,3 +64,3 @@
         -this._getScrollX(this.state.currentIndex > 0 ? 1 : 0) *
-        this.state.currentIndex);
+        this.state.currentIndex)
 
@@ -73,3 +73,3 @@ }
       if (this.props.onSlide) {
-        this.props.onSlide(this.state.currentIndex);
+        this.props.onSlide(this.state.currentIndex)
       }
@@ -79,14 +79,14 @@
       if (this.state.currentIndex === 0) {
-        this._setThumbnailsTranslateX(0);
+        this._setThumbnailsTranslateX(0)
       } else {
         let indexDifference = Math.abs(
-          prevState.currentIndex - this.state.currentIndex);
-        let scrollX = this._getScrollX(indexDifference);
+          prevState.currentIndex - this.state.currentIndex)
+        let scrollX = this._getScrollX(indexDifference)
         if (scrollX > 0) {
           if (prevState.currentIndex < this.state.currentIndex) {
             this._setThumbnailsTranslateX(
-              this.state.thumbnailsTranslateX - scrollX);
+              this.state.thumbnailsTranslateX - scrollX)
           } else if (prevState.currentIndex > this.state.currentIndex) {
             this._setThumbnailsTranslateX(
-              this.state.thumbnailsTranslateX + scrollX);
+              this.state.thumbnailsTranslateX + scrollX)
           }
@@ -99,22 +99,21 @@ }
 
-  componentWillReceiveProps(nextProps) {
-    if (this.props.items.length !== nextProps.items.length) {
-      const startIndex = nextProps.startIndex || 0;
-      this.setState({ currentIndex: startIndex });
-    }
+  componentWillMount() {
+    this._thumbnailDelay = 300
+    this._ghotClickDelay = 600
+    this._preventGhostClick = false
   },
 
   componentDidMount() {
-    this._handleResize();
+    this._handleResize()
     if (this.props.autoPlay) {
-      this.play();
+      this.play()
     }
-    window.addEventListener('resize', this._handleResize);
+    window.addEventListener('resize', this._handleResize)
   },
 
   componentWillUnmount() {
-    window.removeEventListener('resize', this._handleResize);
+    window.removeEventListener('resize', this._handleResize)
     if (this._intervalId) {
-      window.clearInterval(this._intervalId);
-      this._intervalId = null;
+      window.clearInterval(this._intervalId)
+      this._intervalId = null
     }
@@ -124,10 +123,10 @@ },
   slideToIndex(index, event) {
-    let slideCount = this.props.items.length - 1;
+    let slideCount = this.props.items.length - 1
 
     if (index < 0) {
-      this.setState({currentIndex: slideCount});
+      this.setState({currentIndex: slideCount})
     } else if (index > slideCount) {
-      this.setState({currentIndex: 0});
+      this.setState({currentIndex: 0})
     } else {
-      this.setState({currentIndex: index});
+      this.setState({currentIndex: index})
     }
@@ -137,6 +136,5 @@ if (event) {
         // user event, reset interval
-        this.pause();
-        this.play();
+        this.pause()
+        this.play()
       }
-      event.preventDefault();
     }
@@ -147,9 +145,9 @@ },
     if (this._intervalId) {
-      return;
+      return
     }
     this._intervalId = window.setInterval(() => {
       if (!this.state.hovering) {
-        this.slideToIndex(this.state.currentIndex + 1);
+        this.slideToIndex(this.state.currentIndex + 1)
       }
-    }.bind(this), this.props.slideInterval);
+    }, this.props.slideInterval)
   },
@@ -159,54 +157,97 @@
     if (this._intervalId) {
-      window.clearInterval(this._intervalId);
-      this._intervalId = null;
+      window.clearInterval(this._intervalId)
+      this._intervalId = null
     }
   },
 
+  _wrapClick(func) {
+    return event => {
+      if (this._preventGhostClick === true) {
+        return
+      }
+      func(event)
+    }
+  },
+
+  _touchEnd(event) {
+    this._preventGhostClick = true
+    this._preventGhostClickTimer = window.setTimeout(() => {
+      this._preventGhostClick = false
+      this._preventGhostClickTimer = null
+    }, this._ghotClickDelay)
+  },
+
   _setThumbnailsTranslateX(x) {
-    this.setState({thumbnailsTranslateX: x});
+    this.setState({thumbnailsTranslateX: x})
   },
 
   _handleResize() {
-    this.setState({containerWidth: this._imageGallery.offsetWidth});
+    this.setState({containerWidth: this._imageGallery.offsetWidth})
   },
 
   _getScrollX(indexDifference) {
+    if (this.props.disableScrolling) {
+      return 0
+    }
     if (this._thumbnails) {
       if (this._thumbnails.scrollWidth <= this.state.containerWidth) {
-        return 0;
+        return 0
       }
 
-      let totalThumbnails = this._thumbnails.children.length;
+      let totalThumbnails = this._thumbnails.children.length
 
       // total scroll-x required to see the last thumbnail
-      let totalScrollX = this._thumbnails.scrollWidth - this.state.containerWidth;
+      let totalScrollX = this._thumbnails.scrollWidth - this.state.containerWidth
 
       // scroll-x required per index change
-      let perIndexScrollX = totalScrollX / (totalThumbnails - 1);
+      let perIndexScrollX = totalScrollX / (totalThumbnails - 1)
 
-      return indexDifference * perIndexScrollX;
+      return indexDifference * perIndexScrollX
     }
   },
 
+  _handleMouseOverThumbnails(index, event) {
+    this.setState({hovering: true})
+    if (this._thumbnailTimer) {
+      window.clearTimeout(this._thumbnailTimer)
+      this._thumbnailTimer = null
+    }
+    this._thumbnailTimer = window.setTimeout(() => {
+      this.slideToIndex(index)
+      this.pause()
+    }, this._thumbnailDelay)
+  },
+
+  _handleMouseLeaveThumbnails() {
+    if (this._thumbnailTimer) {
+      window.clearTimeout(this._thumbnailTimer)
+      this._thumbnailTimer = null
+      if (this.props.autoPlay == true) {
+        this.play()
+      }
+    }
+    this.setState({hovering: false})
+  },
+
   _handleMouseOver() {
-    this.setState({hovering: true});
+    this.setState({hovering: true})
   },
 
   _handleMouseLeave() {
-    this.setState({hovering: false});
+    this.setState({hovering: false})
   },
 
   _getAlignmentClassName(index) {
-    let currentIndex = this.state.currentIndex;
-    let alignment = '';
+    let currentIndex = this.state.currentIndex
+    let alignment = ''
     switch (index) {
       case (currentIndex - 1):
-        alignment = ' left';
-        break;
+        alignment = ' left'
+        break
       case (currentIndex):
-        alignment = ' center';
-        break;
+        alignment = ' center'
+        break
       case (currentIndex + 1):
-        alignment = ' right';
-        break;
+        alignment = ' right'
+        break
     }
@@ -217,10 +258,10 @@
         // set first slide as right slide if were sliding right from last slide
-        alignment = ' right';
+        alignment = ' right'
       } else if (index === this.props.items.length - 1 && currentIndex === 0) {
         // set last slide as left slide if were sliding left from first slide
-        alignment = ' left';
+        alignment = ' left'
       }
     }
 
-    return alignment;
+    return alignment
   },
@@ -230,3 +271,3 @@
     if (event.target.className.indexOf('loaded') === -1) {
-      event.target.className += ' loaded';
+      event.target.className += ' loaded'
     }
@@ -237,3 +278,3 @@ },
     if (this.props.defaultImage && event.target.src.indexOf(this.props.defaultImage) === -1) {
-      event.target.src = this.props.defaultImage;
+      event.target.src = this.props.defaultImage
     }
@@ -243,3 +284,3 @@ },
   render() {
-    let currentIndex = this.state.currentIndex;
+    let currentIndex = this.state.currentIndex
     let thumbnailStyle = {
@@ -251,12 +292,12 @@ MozTransform: 'translate3d(' + this.state.thumbnailsTranslateX + 'px, 0, 0)',
       transform: 'translate3d(' + this.state.thumbnailsTranslateX + 'px, 0, 0)'
-    };
+    }
 
-    let slides = [];
-    let thumbnails = [];
-    let bullets = [];
+    let slides = []
+    let thumbnails = []
+    let bullets = []
 
     this.props.items.map((item, index) => {
-      let alignment = this._getAlignmentClassName(index);
-      let originalClass = item.originalClass ? ' ' + item.originalClass : '';
-      let thumbnailClass = item.thumbnailClass ? ' ' + item.thumbnailClass : '';
+      let alignment = this._getAlignmentClassName(index)
+      let originalClass = item.originalClass ? ' ' + item.originalClass : ''
+      let thumbnailClass = item.thumbnailClass ? ' ' + item.thumbnailClass : ''
 
@@ -267,4 +308,5 @@ let slide = (
           className={'image-gallery-slide' + alignment + originalClass}
-          onClick={this.props.onClick}
-          onTouchStart={this.props.onClick}>
+          onClick={this._wrapClick(this.props.onClick)}
+          onTouchStart={this.props.onClick}
+          onTouchEnd={this._touchEnd} >
             <img
@@ -278,10 +320,10 @@ className={(this.props.server && 'loaded')}
         </div>
-      );
+      )
 
       if (this.props.lazyLoad) {
         if (alignment) {
-          slides.push(slide);
+          slides.push(slide)
         }
       } else {
-        slides.push(slide);
+        slides.push(slide)
       }
@@ -291,3 +333,4 @@
         thumbnails.push(
-          <a
+          <a onMouseOver={this._handleMouseOverThumbnails.bind(this, index)}
+             onMouseLeave={this._handleMouseLeaveThumbnails.bind(this, index)}
             key={index}
@@ -301,3 +344,4 @@ className={
             onTouchStart={this.slideToIndex.bind(this, index)}
-            onClick={this.slideToIndex.bind(this, index)}>
+            onTouchEnd={this._touchEnd}
+            onClick={this._wrapClick(this.slideToIndex.bind(this, index))}>
 
@@ -309,3 +353,3 @@ <img
           </a>
-        );
+        )
       }
@@ -322,12 +366,12 @@
             onTouchStart={this.slideToIndex.bind(this, index)}
-            onClick={this.slideToIndex.bind(this, index)}>
+            onTouchEnd={this._touchEnd}
+            onClick={this._wrapClick(this.slideToIndex.bind(this, index))}>
           </li>
-        );
+        )
       }
-    });
+    })
 
-    let swipePrev = this.slideToIndex.bind(this, currentIndex - 1);
-    let swipeNext = this.slideToIndex.bind(this, currentIndex + 1);
-    let itemsTotal = this.props.items.length;
-
+    let swipePrev = this.slideToIndex.bind(this, currentIndex - 1)
+    let swipeNext = this.slideToIndex.bind(this, currentIndex + 1)
+    let itemsTotal = this.props.items.length
     return (
@@ -348,3 +392,4 @@ <section ref={(i) => this._imageGallery = i} className='image-gallery'>
                       onTouchStart={swipePrev}
-                      onClick={swipePrev}/>,
+                      onTouchEnd={this._touchEnd}
+                      onClick={this._wrapClick(swipePrev)}/>,
                     <a
@@ -354,3 +399,4 @@ key='rightNav'
                       onTouchStart={swipeNext}
-                      onClick={swipeNext}/>
+                      onTouchEnd={this._touchEnd}
+                      onClick={this._wrapClick(swipeNext)}/>
                   ],
@@ -407,8 +453,8 @@ <Swipeable
       </section>
-    );
+    )
 
   }
 
-});
+})
 
-export default ImageGallery;
+export default ImageGallery

No alert changes

Improved metrics

Total package byte prevSize

283720

increased by1.5%

Lines of code

2039

increased by4.73%

Number of lines in readme file

120

increased by0.84%

No dependency changes