react-image-gallery - npm Package Compare versions

Comparing version 0.8.4 to 0.8.5

build/image-gallery.js

@@ -49,6 +49,41 @@ 'use strict';
 
+    _this.slideToIndex = function (index, event) {
+      var _this$state = _this.state;
+      var currentIndex = _this$state.currentIndex;
+      var isTransitioning = _this$state.isTransitioning;
+
+
+      if (!isTransitioning) {
+        if (event) {
+          if (_this._intervalId) {
+            // user triggered event while ImageGallery is playing, reset interval
+            _this.pause(false);
+            _this.play(false);
+          }
+        }
+
+        var slideCount = _this.props.items.length - 1;
+        var nextIndex = index;
+
+        if (index < 0) {
+          nextIndex = slideCount;
+        } else if (index > slideCount) {
+          nextIndex = 0;
+        }
+
+        _this.setState({
+          previousIndex: currentIndex,
+          currentIndex: nextIndex,
+          isTransitioning: nextIndex !== currentIndex,
+          offsetPercentage: 0,
+          style: {
+            transition: 'all ' + _this.props.slideDuration + 'ms ease-out'
+          }
+        }, _this._onSliding);
+      }
+    };
+
     _this._onSliding = function () {
       var isTransitioning = _this.state.isTransitioning;
 
-
       window.setTimeout(function () {
@@ -61,2 +96,184 @@ if (isTransitioning) {
 
+    _this._handleScreenChange = function () {
+      /*
+        handles screen change events that the browser triggers e.g. esc key
+      */
+      var fullScreenElement = document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
+
+      if (_this.props.onScreenChange) {
+        _this.props.onScreenChange(fullScreenElement);
+      }
+
+      _this.setState({ isFullscreen: !!fullScreenElement });
+    };
+
+    _this._toggleFullScreen = function () {
+      if (_this.state.isFullscreen) {
+        _this.exitFullScreen();
+      } else {
+        _this.fullScreen();
+      }
+    };
+
+    _this._togglePlay = function () {
+      if (_this._intervalId) {
+        _this.pause();
+      } else {
+        _this.play();
+      }
+    };
+
+    _this._handleResize = function () {
+      // delay initial resize to get the accurate this._imageGallery height/width
+      _this._resizeTimer = window.setTimeout(function () {
+        if (_this._imageGallery) {
+          _this.setState({
+            galleryWidth: _this._imageGallery.offsetWidth
+          });
+        }
+
+        // adjust thumbnail container when thumbnail width or height is adjusted
+        _this._setThumbsTranslate(-_this._getThumbsTranslate(_this.state.currentIndex > 0 ? 1 : 0) * _this.state.currentIndex);
+
+        if (_this._imageGallerySlideWrapper) {
+          _this.setState({
+            gallerySlideWrapperHeight: _this._imageGallerySlideWrapper.offsetHeight
+          });
+        }
+
+        if (_this._thumbnailsWrapper) {
+          if (_this._isThumbnailHorizontal()) {
+            _this.setState({ thumbnailsWrapperHeight: _this._thumbnailsWrapper.offsetHeight });
+          } else {
+            _this.setState({ thumbnailsWrapperWidth: _this._thumbnailsWrapper.offsetWidth });
+          }
+        }
+      }, 50);
+    };
+
+    _this._handleKeyDown = function (event) {
+      var LEFT_ARROW = 37;
+      var RIGHT_ARROW = 39;
+      var ESC_KEY = 27;
+      var key = parseInt(event.keyCode || event.which || 0);
+
+      switch (key) {
+        case LEFT_ARROW:
+          if (_this._canSlideLeft() && !_this._intervalId) {
+            _this._slideLeft();
+          }
+          break;
+        case RIGHT_ARROW:
+          if (_this._canSlideRight() && !_this._intervalId) {
+            _this._slideRight();
+          }
+          break;
+        case ESC_KEY:
+          if (_this.state.isFullscreen && !_this.props.useBrowserFullscreen) {
+            _this.exitFullScreen();
+          }
+      }
+    };
+
+    _this._handleMouseLeaveThumbnails = function () {
+      if (_this._thumbnailTimer) {
+        window.clearTimeout(_this._thumbnailTimer);
+        _this._thumbnailTimer = null;
+        if (_this.props.autoPlay === true) {
+          _this.play(false);
+        }
+      }
+      _this.setState({ hovering: false });
+    };
+
+    _this._handleImageError = function (event) {
+      if (_this.props.defaultImage && event.target.src.indexOf(_this.props.defaultImage) === -1) {
+        event.target.src = _this.props.defaultImage;
+      }
+    };
+
+    _this._handleOnSwiped = function (e, deltaX, deltaY, isFlick) {
+      // swiped left vs right
+      var side = deltaX > 0 ? 1 : -1;
+      // this.setState({isFlick: isFlick});
+      _this._handleOnSwipedTo(side, isFlick);
+    };
+
+    _this._handleSwiping = function (e, deltaX, deltaY, delta) {
+      var _this$state2 = _this.state;
+      var galleryWidth = _this$state2.galleryWidth;
+      var isTransitioning = _this$state2.isTransitioning;
+      var swipingTransitionDuration = _this.props.swipingTransitionDuration;
+
+      if (!isTransitioning) {
+        // swiping left vs right
+        var side = deltaX > 0 ? -1 : 1;
+
+        var offsetPercentage = delta / galleryWidth * 100;
+        if (Math.abs(offsetPercentage) >= 100) {
+          offsetPercentage = 100;
+        }
+
+        var swipingTransition = {
+          transition: 'transform ' + swipingTransitionDuration + 'ms ease-out'
+        };
+
+        _this.setState({
+          offsetPercentage: side * offsetPercentage,
+          style: swipingTransition
+        });
+      }
+    };
+
+    _this._slideLeft = function (event) {
+      _this.slideToIndex(_this.state.currentIndex - 1, event);
+    };
+
+    _this._slideRight = function (event) {
+      _this.slideToIndex(_this.state.currentIndex + 1, event);
+    };
+
+    _this._renderItem = function (item) {
+      var onImageError = _this.props.onImageError || _this._handleImageError;
+
+      return _react2.default.createElement(
+        'div',
+        { className: 'image-gallery-image' },
+        _react2.default.createElement('img', {
+          src: item.original,
+          alt: item.originalAlt,
+          srcSet: item.srcSet,
+          sizes: item.sizes,
+          title: item.originalTitle,
+          onLoad: _this.props.onImageLoad,
+          onError: onImageError
+        }),
+        item.description && _react2.default.createElement(
+          'span',
+          { className: 'image-gallery-description' },
+          item.description
+        )
+      );
+    };
+
+    _this._renderThumbInner = function (item) {
+      var onThumbnailError = _this.props.onThumbnailError || _this._handleImageError;
+
+      return _react2.default.createElement(
+        'div',
+        null,
+        _react2.default.createElement('img', {
+          src: item.thumbnail,
+          alt: item.thumbnailAlt,
+          title: item.thumbnailTitle,
+          onError: onThumbnailError
+        }),
+        _react2.default.createElement(
+          'div',
+          { className: 'image-gallery-thumbnail-label' },
+          item.thumbnailLabel
+        )
+      );
+    };
+
     _this.state = {
@@ -121,9 +338,8 @@ currentIndex: props.startIndex,
       // Used to update the throttle if slideDuration changes
-      this._unthrottledSlideToIndex = this.slideToIndex.bind(this);
+      this._unthrottledSlideToIndex = this.slideToIndex;
       this.slideToIndex = (0, _lodash2.default)(this._unthrottledSlideToIndex, this.props.slideDuration, { trailing: false });
 
-      this._handleResize = this._handleResize.bind(this);
+      this._handleResize = this._handleResize;
       this._debounceResize = (0, _lodash4.default)(this._handleResize, 500);
-      this._handleScreenChange = this._handleScreenChange.bind(this);
-      this._handleKeyDown = this._handleKeyDown.bind(this);
+      this._handleScreenChange = this._handleScreenChange;
       this._thumbnailDelay = 300;
@@ -269,36 +485,2 @@ }
   }, {
-    key: 'slideToIndex',
-    value: function slideToIndex(index, event) {
-      var currentIndex = this.state.currentIndex;
-
-
-      if (event) {
-        if (this._intervalId) {
-          // user triggered event while ImageGallery is playing, reset interval
-          this.pause(false);
-          this.play(false);
-        }
-      }
-
-      var slideCount = this.props.items.length - 1;
-      var nextIndex = index;
-
-      if (index < 0) {
-        nextIndex = slideCount;
-      } else if (index > slideCount) {
-        nextIndex = 0;
-      }
-
-      this.setState({
-        previousIndex: currentIndex,
-        currentIndex: nextIndex,
-        isFlick: false, // reset isFlick state after slide
-        isTransitioning: currentIndex !== nextIndex,
-        offsetPercentage: 0,
-        style: {
-          transition: 'all ' + this.props.slideDuration + 'ms ease-out'
-        }
-      }, this._onSliding);
-    }
-  }, {
     key: 'getCurrentIndex',
@@ -309,16 +491,2 @@ value: function getCurrentIndex() {
   }, {
-    key: '_handleScreenChange',
-    value: function _handleScreenChange() {
-      /*
-        handles screen change events that the browser triggers e.g. esc key
-      */
-      var fullScreenElement = document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
-
-      if (this.props.onScreenChange) {
-        this.props.onScreenChange(fullScreenElement);
-      }
-
-      this.setState({ isFullscreen: !!fullScreenElement });
-    }
-  }, {
     key: '_onScreenChangeEvent',
@@ -342,51 +510,2 @@ value: function _onScreenChangeEvent() {
   }, {
-    key: '_toggleFullScreen',
-    value: function _toggleFullScreen() {
-      if (this.state.isFullscreen) {
-        this.exitFullScreen();
-      } else {
-        this.fullScreen();
-      }
-    }
-  }, {
-    key: '_togglePlay',
-    value: function _togglePlay() {
-      if (this._intervalId) {
-        this.pause();
-      } else {
-        this.play();
-      }
-    }
-  }, {
-    key: '_handleResize',
-    value: function _handleResize() {
-      var _this5 = this;
-
-      // delay initial resize to get the accurate this._imageGallery height/width
-      this._resizeTimer = window.setTimeout(function () {
-        if (_this5._imageGallery) {
-          _this5.setState({
-            galleryWidth: _this5._imageGallery.offsetWidth
-          });
-        }
-
-        // adjust thumbnail container when thumbnail width or height is adjusted
-        _this5._setThumbsTranslate(-_this5._getThumbsTranslate(_this5.state.currentIndex > 0 ? 1 : 0) * _this5.state.currentIndex);
-
-        if (_this5._imageGallerySlideWrapper) {
-          _this5.setState({
-            gallerySlideWrapperHeight: _this5._imageGallerySlideWrapper.offsetHeight
-          });
-        }
-
-        if (_this5._thumbnailsWrapper) {
-          if (_this5._isThumbnailHorizontal()) {
-            _this5.setState({ thumbnailsWrapperHeight: _this5._thumbnailsWrapper.offsetHeight });
-          } else {
-            _this5.setState({ thumbnailsWrapperWidth: _this5._thumbnailsWrapper.offsetWidth });
-          }
-        }
-      }, 50);
-    }
-  }, {
     key: '_isThumbnailHorizontal',
@@ -399,30 +518,5 @@ value: function _isThumbnailHorizontal() {
   }, {
-    key: '_handleKeyDown',
-    value: function _handleKeyDown(event) {
-      var LEFT_ARROW = 37;
-      var RIGHT_ARROW = 39;
-      var ESC_KEY = 27;
-      var key = parseInt(event.keyCode || event.which || 0);
-
-      switch (key) {
-        case LEFT_ARROW:
-          if (this._canSlideLeft() && !this._intervalId) {
-            this._slideLeft();
-          }
-          break;
-        case RIGHT_ARROW:
-          if (this._canSlideRight() && !this._intervalId) {
-            this._slideRight();
-          }
-          break;
-        case ESC_KEY:
-          if (this.state.isFullscreen && !this.props.useBrowserFullscreen) {
-            this.exitFullScreen();
-          }
-      }
-    }
-  }, {
     key: '_handleMouseOverThumbnails',
     value: function _handleMouseOverThumbnails(index) {
-      var _this6 = this;
+      var _this5 = this;
 
@@ -436,3 +530,3 @@ if (this.props.slideOnThumbnailHover) {
         this._thumbnailTimer = window.setTimeout(function () {
-          _this6.slideToIndex(index);
+          _this5.slideToIndex(index);
         }, this._thumbnailDelay);
@@ -442,51 +536,21 @@ }
   }, {
-    key: '_handleMouseLeaveThumbnails',
-    value: function _handleMouseLeaveThumbnails() {
-      if (this._thumbnailTimer) {
-        window.clearTimeout(this._thumbnailTimer);
-        this._thumbnailTimer = null;
-        if (this.props.autoPlay === true) {
-          this.play(false);
-        }
-      }
-      this.setState({ hovering: false });
-    }
-  }, {
-    key: '_handleImageError',
-    value: function _handleImageError(event) {
-      if (this.props.defaultImage && event.target.src.indexOf(this.props.defaultImage) === -1) {
-        event.target.src = this.props.defaultImage;
-      }
-    }
-  }, {
-    key: '_handleOnSwiped',
-    value: function _handleOnSwiped(ev, x, y, isFlick) {
-      this.setState({ isFlick: isFlick });
-    }
-  }, {
-    key: '_sufficientSwipeOffset',
-    value: function _sufficientSwipeOffset() {
-      return Math.abs(this.state.offsetPercentage) > this.props.swipeThreshold;
-    }
-  }, {
-    key: '_shouldSlideOnSwipe',
-    value: function _shouldSlideOnSwipe() {
-      return this._sufficientSwipeOffset() || this.state.isFlick;
-    }
-  }, {
     key: '_handleOnSwipedTo',
-    value: function _handleOnSwipedTo(index) {
-      var slideTo = this.state.currentIndex;
+    value: function _handleOnSwipedTo(side, isFlick) {
+      var _state = this.state;
+      var currentIndex = _state.currentIndex;
+      var isTransitioning = _state.isTransitioning;
 
-      if (this._shouldSlideOnSwipe()) {
-        slideTo += index;
+      var slideTo = currentIndex;
+
+      if ((this._sufficientSwipeOffset() || isFlick) && !isTransitioning) {
+        slideTo += side;
       }
 
-      if (index < 0) {
+      if (side < 0) {
         if (!this._canSlideLeft()) {
-          slideTo = this.state.currentIndex;
+          slideTo = currentIndex;
         }
       } else {
         if (!this._canSlideRight()) {
-          slideTo = this.state.currentIndex;
+          slideTo = currentIndex;
         }
@@ -498,27 +562,14 @@ }
   }, {
-    key: '_handleSwiping',
-    value: function _handleSwiping(index, _, delta) {
-      var swipingTransitionDuration = this.props.swipingTransitionDuration;
-      var _state = this.state;
-      var galleryWidth = _state.galleryWidth;
-      var isTransitioning = _state.isTransitioning;
-
-
-      var offsetPercentage = index * (delta / galleryWidth * 100);
-      if (Math.abs(offsetPercentage) >= 100) {
-        offsetPercentage = index * 100;
-      }
-
-      var swipingTransition = {
-        transition: 'transform ' + swipingTransitionDuration + 'ms ease-out'
-      };
-
-      if (!isTransitioning) {
-        this.setState({
-          offsetPercentage: offsetPercentage,
-          style: swipingTransition
-        });
-      }
+    key: '_sufficientSwipeOffset',
+    value: function _sufficientSwipeOffset() {
+      return Math.abs(this.state.offsetPercentage) > this.props.swipeThreshold;
     }
   }, {
+    key: '_onSwipingNoOp',
+    value: function _onSwipingNoOp() {
+      /*
+      Do nothing, only defined so preventDefaultTouchmoveEvent works
+      */
+    }
+  }, {
     key: '_canNavigate',
@@ -821,63 +872,5 @@ value: function _canNavigate() {
   }, {
-    key: '_slideLeft',
-    value: function _slideLeft(event) {
-      this.slideToIndex(this.state.currentIndex - 1, event);
-    }
-  }, {
-    key: '_slideRight',
-    value: function _slideRight(event) {
-      this.slideToIndex(this.state.currentIndex + 1, event);
-    }
-  }, {
-    key: '_renderItem',
-    value: function _renderItem(item) {
-      var onImageError = this.props.onImageError || this._handleImageError;
-
-      return _react2.default.createElement(
-        'div',
-        { className: 'image-gallery-image' },
-        _react2.default.createElement('img', {
-          src: item.original,
-          alt: item.originalAlt,
-          srcSet: item.srcSet,
-          sizes: item.sizes,
-          title: item.originalTitle,
-          onLoad: this.props.onImageLoad,
-          onError: onImageError.bind(this)
-        }),
-        item.description && _react2.default.createElement(
-          'span',
-          { className: 'image-gallery-description' },
-          item.description
-        )
-      );
-    }
-  }, {
-    key: '_renderThumbInner',
-    value: function _renderThumbInner(item) {
-      var onThumbnailError = this._handleImageError;
-      if (this.props.onThumbnailError) {
-        onThumbnailError = this.props.onThumbnailError;
-      }
-
-      return _react2.default.createElement(
-        'div',
-        null,
-        _react2.default.createElement('img', {
-          src: item.thumbnail,
-          alt: item.thumbnailAlt,
-          title: item.thumbnailTitle,
-          onError: onThumbnailError.bind(this)
-        }),
-        _react2.default.createElement(
-          'div',
-          { className: 'image-gallery-thumbnail-label' },
-          item.thumbnailLabel
-        )
-      );
-    }
-  }, {
     key: 'render',
     value: function render() {
-      var _this7 = this;
+      var _this6 = this;
 
@@ -895,4 +888,4 @@ var _state9 = this.state;
 
-      var slideLeft = this._slideLeft.bind(this);
-      var slideRight = this._slideRight.bind(this);
+      var slideLeft = this._slideLeft;
+      var slideRight = this._slideRight;
 
@@ -904,16 +897,17 @@ var slides = [];
       this.props.items.map(function (item, index) {
-        var alignment = _this7._getAlignmentClassName(index);
+        var alignment = _this6._getAlignmentClassName(index);
         var originalClass = item.originalClass ? ' ' + item.originalClass : '';
         var thumbnailClass = item.thumbnailClass ? ' ' + item.thumbnailClass : '';
 
-        var renderItem = item.renderItem || _this7.props.renderItem || _this7._renderItem.bind(_this7);
+        var renderItem = item.renderItem || _this6.props.renderItem || _this6._renderItem;
 
-        var renderThumbInner = item.renderThumbInner || _this7.props.renderThumbInner || _this7._renderThumbInner.bind(_this7);
+        var renderThumbInner = item.renderThumbInner || _this6.props.renderThumbInner || _this6._renderThumbInner;
 
-        var showItem = !_this7.props.lazyLoad || alignment || _this7._lazyLoaded[index];
-        if (showItem && _this7.props.lazyLoad) {
-          _this7._lazyLoaded[index] = true;
+        var showItem = !_this6.props.lazyLoad || alignment || _this6._lazyLoaded[index];
+        if (showItem && _this6.props.lazyLoad) {
+          _this6._lazyLoaded[index] = true;
         }
 
-        var slideStyle = _this7._getSlideStyle(index);
+        var slideStyle = _this6._getSlideStyle(index);
+
         var slide = _react2.default.createElement(
@@ -924,7 +918,7 @@ 'div',
             className: 'image-gallery-slide' + alignment + originalClass,
-            style: _extends(slideStyle, _this7.state.style),
-            onClick: _this7.props.onClick,
-            onTouchMove: _this7.props.onTouchMove,
-            onTouchEnd: _this7.props.onTouchEnd,
-            onTouchStart: _this7.props.onTouchStart
+            style: _extends(slideStyle, _this6.state.style),
+            onClick: _this6.props.onClick,
+            onTouchMove: _this6.props.onTouchMove,
+            onTouchEnd: _this6.props.onTouchEnd,
+            onTouchStart: _this6.props.onTouchStart
           },
@@ -936,3 +930,3 @@ showItem ? renderItem(item) : _react2.default.createElement('div', { style: { height: '100%' } })
           // don't add some slides while transitioning to avoid background transitions
-          if (_this7._shouldPushSlideOnInfiniteMode(index)) {
+          if (_this6._shouldPushSlideOnInfiniteMode(index)) {
             slides.push(slide);
@@ -944,8 +938,8 @@ }
 
-        if (_this7.props.showThumbnails) {
+        if (_this6.props.showThumbnails) {
           thumbnails.push(_react2.default.createElement(
             'a',
             {
-              onMouseOver: _this7._handleMouseOverThumbnails.bind(_this7, index),
-              onMouseLeave: _this7._handleMouseLeaveThumbnails.bind(_this7, index),
+              onMouseOver: _this6._handleMouseOverThumbnails.bind(_this6, index),
+              onMouseLeave: _this6._handleMouseLeaveThumbnails,
               key: index,
@@ -957,5 +951,5 @@ role: 'button',
               onClick: function onClick(event) {
-                _this7.slideToIndex.call(_this7, index, event);
-                if (_this7.props.onThumbnailClick) {
-                  _this7.props.onThumbnailClick(event, index);
+                _this6.slideToIndex.call(_this6, index, event);
+                if (_this6.props.onThumbnailClick) {
+                  _this6.props.onThumbnailClick(event, index);
                 }
@@ -968,3 +962,3 @@ }
 
-        if (_this7.props.showBullets) {
+        if (_this6.props.showBullets) {
           bullets.push(_react2.default.createElement('button', {
@@ -976,3 +970,3 @@ key: index,
             onClick: function onClick(event) {
-              return _this7.slideToIndex.call(_this7, index, event);
+              return _this6.slideToIndex.call(_this6, index, event);
             },
@@ -989,3 +983,3 @@ 'aria-pressed': currentIndex === index ? 'true' : 'false',
           ref: function ref(i) {
-            return _this7._imageGallerySlideWrapper = i;
+            return _this6._imageGallerySlideWrapper = i;
           },
@@ -995,4 +989,4 @@ className: 'image-gallery-slide-wrapper ' + thumbnailPosition
         this.props.renderCustomControls && this.props.renderCustomControls(),
-        this.props.showFullscreenButton && this.props.renderFullscreenButton(this._toggleFullScreen.bind(this), isFullscreen),
-        this.props.showPlayButton && this.props.renderPlayPauseButton(this._togglePlay.bind(this), isPlaying),
+        this.props.showFullscreenButton && this.props.renderFullscreenButton(this._toggleFullScreen, isFullscreen),
+        this.props.showPlayButton && this.props.renderPlayPauseButton(this._togglePlay, isPlaying),
         this._canNavigate() ? [this.props.showNav && _react2.default.createElement(
@@ -1012,10 +1006,10 @@ 'span',
             key: 'swipeable',
-            delta: 1,
-            onSwipingLeft: this._handleSwiping.bind(this, -1),
-            onSwipingRight: this._handleSwiping.bind(this, 1),
-            onSwiped: this._handleOnSwiped.bind(this),
-            onSwipedLeft: this._handleOnSwipedTo.bind(this, 1),
-            onSwipedRight: this._handleOnSwipedTo.bind(this, -1),
-            onSwipedDown: this._handleOnSwipedTo.bind(this, 0),
-            onSwipedUp: this._handleOnSwipedTo.bind(this, 0),
+            delta: 0,
+            flickThreshold: this.props.flickThreshold,
+            onSwiping: this._handleSwiping,
+            onSwipingLeft: this._onSwipingNoOp,
+            onSwipingRight: this._onSwipingNoOp,
+            onSwipingUp: this._onSwipingNoOp,
+            onSwipingDown: this._onSwipingNoOp,
+            onSwiped: this._handleOnSwiped,
             stopPropagation: this.props.stopPropagation,
@@ -1072,3 +1066,3 @@ preventDefaultTouchmoveEvent: this.props.preventDefaultTouchmoveEvent
           ref: function ref(i) {
-            return _this7._imageGallery = i;
+            return _this6._imageGallery = i;
           },
@@ -1095,3 +1089,3 @@ className: 'image-gallery' + (modalFullscreen ? ' fullscreen-modal' : ''),
                 ref: function ref(i) {
-                  return _this7._thumbnailsWrapper = i;
+                  return _this6._thumbnailsWrapper = i;
                 }
@@ -1103,3 +1097,3 @@ },
                   ref: function ref(t) {
-                    return _this7._thumbnails = t;
+                    return _this6._thumbnails = t;
                   },
@@ -1124,2 +1118,3 @@ className: 'image-gallery-thumbnails-container',
 ImageGallery.propTypes = {
+  flickThreshold: _propTypes2.default.number,
   items: _propTypes2.default.array.isRequired,
@@ -1186,2 +1181,4 @@ showNav: _propTypes2.default.bool,
   preventDefaultTouchmoveEvent: false,
+  flickThreshold: 0.4,
+  stopPropagation: false,
   indexSeparator: ' / ',
@@ -1188,0 +1185,0 @@ thumbnailPosition: 'bottom',

package.json

 {
   "name": "react-image-gallery",
-  "version": "0.8.4",
+  "version": "0.8.5",
   "description": "Responsive and flexible carousel component with thumbnail support",
@@ -5,0 +5,0 @@ "main": "./build/image-gallery",

README.md

@@ -126,8 +126,10 @@ React Carousel Image Gallery
 * `indexSeparator`: String, default `' / '`, ignored if `showIndex` is false
-* `slideDuration`: Integer, default `450`
+* `slideDuration`: Number, default `450`
   * transition duration during image slide in milliseconds
-* `swipingTransitionDuration`: Integer, default `0`
+* `swipingTransitionDuration`: Number, default `0`
   * transition duration while swiping in milliseconds
-* `slideInterval`: Integer, default `3000`
-* `swipeThreshold`: Integer, default `30`
+* `slideInterval`: Number, default `3000`
+* `flickThreshold`: Number (float), default `0.4`
+  * Determines the max velocity of a swipe before it's considered a flick (lower = more sensitive)
+* `swipeThreshold`: Number, default `30`
   * A percentage of how far the offset of the current slide is swiped to trigger a slide event.
@@ -139,3 +141,3 @@ e.g. If the current slide is swiped less than 30% to the left or right, it will not trigger a slide event.
     * An option to prevent the browser's touchmove event (stops the gallery from scrolling up or down when swiping)
-* `startIndex`: Integer, default `0`
+* `startIndex`: Number, default `0`
 * `onImageError`: Function, `callback(event)`
@@ -142,0 +144,0 @@ * overrides defaultImage

src/ImageGallery.jsx

@@ -35,2 +35,3 @@ import React from 'react';
   static propTypes = {
+    flickThreshold: PropTypes.number,
     items: PropTypes.array.isRequired,
@@ -98,2 +99,4 @@ showNav: PropTypes.bool,
     preventDefaultTouchmoveEvent: false,
+    flickThreshold: 0.4,
+    stopPropagation: false,
     indexSeparator: ' / ',
@@ -196,3 +199,3 @@ thumbnailPosition: 'bottom',
     // Used to update the throttle if slideDuration changes
-    this._unthrottledSlideToIndex = this.slideToIndex.bind(this);
+    this._unthrottledSlideToIndex = this.slideToIndex;
     this.slideToIndex = throttle(this._unthrottledSlideToIndex,
@@ -202,6 +205,5 @@ this.props.slideDuration,
 
-    this._handleResize = this._handleResize.bind(this);
+    this._handleResize = this._handleResize;
     this._debounceResize = debounce(this._handleResize, 500);
-    this._handleScreenChange = this._handleScreenChange.bind(this);
-    this._handleKeyDown = this._handleKeyDown.bind(this);
+    this._handleScreenChange = this._handleScreenChange;
     this._thumbnailDelay = 300;
@@ -334,39 +336,37 @@ }
 
-  slideToIndex(index, event) {
-    const {currentIndex} = this.state;
+  slideToIndex = (index, event) => {
+    const {currentIndex, isTransitioning} = this.state;
 
-
-    if (event) {
-      if (this._intervalId) {
-        // user triggered event while ImageGallery is playing, reset interval
-        this.pause(false);
-        this.play(false);
+    if (!isTransitioning) {
+      if (event) {
+        if (this._intervalId) {
+          // user triggered event while ImageGallery is playing, reset interval
+          this.pause(false);
+          this.play(false);
+        }
       }
-    }
 
-    let slideCount = this.props.items.length - 1;
-    let nextIndex = index;
+      let slideCount = this.props.items.length - 1;
+      let nextIndex = index;
 
-    if (index < 0) {
-      nextIndex = slideCount;
-    } else if (index > slideCount) {
-      nextIndex = 0;
-    }
-
-    this.setState({
-      previousIndex: currentIndex,
-      currentIndex: nextIndex,
-      isFlick: false, // reset isFlick state after slide
-      isTransitioning: currentIndex !== nextIndex,
-      offsetPercentage: 0,
-      style: {
-        transition: `all ${this.props.slideDuration}ms ease-out`
+      if (index < 0) {
+        nextIndex = slideCount;
+      } else if (index > slideCount) {
+        nextIndex = 0;
       }
-    }, this._onSliding);
 
-  }
+      this.setState({
+        previousIndex: currentIndex,
+        currentIndex: nextIndex,
+        isTransitioning: nextIndex !== currentIndex,
+        offsetPercentage: 0,
+        style: {
+          transition: `all ${this.props.slideDuration}ms ease-out`
+        }
+      }, this._onSliding);
+    }
+  };
 
   _onSliding = () => {
     const { isTransitioning } = this.state;
-
     window.setTimeout(() => {
@@ -383,3 +383,3 @@ if (isTransitioning) {
 
-  _handleScreenChange() {
+  _handleScreenChange = () => {
     /*
@@ -398,3 +398,3 @@ handles screen change events that the browser triggers e.g. esc key
     this.setState({isFullscreen: !!fullScreenElement});
-  }
+  };
 
@@ -413,3 +413,3 @@ _onScreenChangeEvent() {
 
-  _toggleFullScreen() {
+  _toggleFullScreen = () => {
     if (this.state.isFullscreen) {
@@ -420,5 +420,5 @@ this.exitFullScreen();
     }
-  }
+  };
 
-  _togglePlay() {
+  _togglePlay = () => {
     if (this._intervalId) {
@@ -429,5 +429,5 @@ this.pause();
     }
-  }
+  };
 
-  _handleResize() {
+  _handleResize = () => {
     // delay initial resize to get the accurate this._imageGallery height/width
@@ -460,3 +460,3 @@ this._resizeTimer = window.setTimeout(() => {
     }, 50);
-  }
+  };
 
@@ -468,3 +468,3 @@ _isThumbnailHorizontal() {
 
-  _handleKeyDown(event) {
+  _handleKeyDown = (event) => {
     const LEFT_ARROW = 37;
@@ -491,3 +491,3 @@ const RIGHT_ARROW = 39;
     }
-  }
+  };
 
@@ -507,3 +507,3 @@ _handleMouseOverThumbnails(index) {
 
-  _handleMouseLeaveThumbnails() {
+  _handleMouseLeaveThumbnails = () => {
     if (this._thumbnailTimer) {
@@ -517,5 +517,5 @@ window.clearTimeout(this._thumbnailTimer);
     this.setState({hovering: false});
-  }
+  };
 
-  _handleImageError(event) {
+  _handleImageError = (event) => {
     if (this.props.defaultImage &&
@@ -525,30 +525,26 @@ event.target.src.indexOf(this.props.defaultImage) === -1) {
     }
-  }
+  };
 
-  _handleOnSwiped(ev, x, y, isFlick) {
-    this.setState({isFlick: isFlick});
-  }
+  _handleOnSwiped = (e, deltaX, deltaY, isFlick) => {
+    // swiped left vs right
+    const side = deltaX > 0 ? 1 : -1;
+    // this.setState({isFlick: isFlick});
+    this._handleOnSwipedTo(side, isFlick);
+  };
 
-  _sufficientSwipeOffset() {
-    return Math.abs(this.state.offsetPercentage) > this.props.swipeThreshold;
-  }
+  _handleOnSwipedTo(side, isFlick) {
+    const { currentIndex, isTransitioning } = this.state;
+    let slideTo = currentIndex;
 
-  _shouldSlideOnSwipe() {
-    return this._sufficientSwipeOffset() || this.state.isFlick;
-  }
-
-  _handleOnSwipedTo(index) {
-    let slideTo = this.state.currentIndex;
-
-    if (this._shouldSlideOnSwipe()) {
-      slideTo += index;
+    if ((this._sufficientSwipeOffset() || isFlick) && !isTransitioning) {
+      slideTo += side;
     }
 
-    if (index < 0) {
+    if (side < 0) {
       if (!this._canSlideLeft()) {
-        slideTo = this.state.currentIndex;
+        slideTo = currentIndex;
       }
     } else {
       if (!this._canSlideRight()) {
-        slideTo = this.state.currentIndex;
+        slideTo = currentIndex;
       }
@@ -560,22 +556,34 @@ }
 
-  _handleSwiping(index, _, delta) {
+  _sufficientSwipeOffset() {
+    return Math.abs(this.state.offsetPercentage) > this.props.swipeThreshold;
+  }
+
+  _onSwipingNoOp() {
+    /*
+    Do nothing, only defined so preventDefaultTouchmoveEvent works
+    */
+  }
+
+  _handleSwiping = (e, deltaX, deltaY, delta) => {
+    const { galleryWidth, isTransitioning } = this.state;
     const { swipingTransitionDuration } = this.props;
-    const { galleryWidth, isTransitioning } = this.state;
+    if (!isTransitioning) {
+      // swiping left vs right
+      const side = deltaX > 0 ? -1 : 1;
 
-    let offsetPercentage = index * (delta / galleryWidth * 100);
-    if (Math.abs(offsetPercentage) >= 100) {
-      offsetPercentage = index * 100;
-    }
+      let offsetPercentage = (delta / galleryWidth * 100);
+      if (Math.abs(offsetPercentage) >= 100) {
+        offsetPercentage = 100;
+      }
 
-    const swipingTransition = {
-      transition: `transform ${swipingTransitionDuration}ms ease-out`
-    };
+      const swipingTransition = {
+        transition: `transform ${swipingTransitionDuration}ms ease-out`
+      };
 
-    if (!isTransitioning) {
       this.setState({
-        offsetPercentage: offsetPercentage,
+        offsetPercentage: side * offsetPercentage,
         style: swipingTransition,
       });
     }
-  }
+  };
 
@@ -849,11 +857,11 @@ _canNavigate() {
 
-  _slideLeft(event) {
+  _slideLeft = (event) => {
     this.slideToIndex(this.state.currentIndex - 1, event);
-  }
+  };
 
-  _slideRight(event) {
+  _slideRight = (event) => {
     this.slideToIndex(this.state.currentIndex + 1, event);
-  }
+  };
 
-  _renderItem(item) {
+  _renderItem = (item) => {
     const onImageError = this.props.onImageError || this._handleImageError;
@@ -870,3 +878,3 @@
             onLoad={this.props.onImageLoad}
-            onError={onImageError.bind(this)}
+            onError={onImageError}
         />
@@ -881,9 +889,6 @@ {
     );
-  }
+  };
 
-  _renderThumbInner(item) {
-    let onThumbnailError = this._handleImageError;
-    if (this.props.onThumbnailError) {
-      onThumbnailError = this.props.onThumbnailError;
-    }
+  _renderThumbInner = (item) => {
+    let onThumbnailError = this.props.onThumbnailError || this._handleImageError;
 
@@ -896,3 +901,3 @@ return (
           title={item.thumbnailTitle}
-          onError={onThumbnailError.bind(this)}
+          onError={onThumbnailError}
         />
@@ -904,3 +909,3 @@ <div className='image-gallery-thumbnail-label'>
     );
-  }
+  };
 
@@ -920,4 +925,4 @@ render() {
 
-    const slideLeft = this._slideLeft.bind(this);
-    const slideRight = this._slideRight.bind(this);
+    const slideLeft = this._slideLeft;
+    const slideRight = this._slideRight;
 
@@ -936,6 +941,6 @@ let slides = [];
       const renderItem = item.renderItem ||
-        this.props.renderItem || this._renderItem.bind(this);
+        this.props.renderItem || this._renderItem;
 
       const renderThumbInner = item.renderThumbInner ||
-        this.props.renderThumbInner || this._renderThumbInner.bind(this);
+        this.props.renderThumbInner || this._renderThumbInner;
 
@@ -948,2 +953,3 @@ const showItem = !this.props.lazyLoad || alignment || this._lazyLoaded[index];
       let slideStyle = this._getSlideStyle(index);
+
       const slide = (
@@ -976,3 +982,3 @@ <div
             onMouseOver={this._handleMouseOverThumbnails.bind(this, index)}
-            onMouseLeave={this._handleMouseLeaveThumbnails.bind(this, index)}
+            onMouseLeave={this._handleMouseLeaveThumbnails}
             key={index}
@@ -1027,3 +1033,3 @@ role='button'
           this.props.showFullscreenButton &&
-            this.props.renderFullscreenButton(this._toggleFullScreen.bind(this), isFullscreen)
+            this.props.renderFullscreenButton(this._toggleFullScreen, isFullscreen)
         }
@@ -1033,3 +1039,3 @@
           this.props.showPlayButton &&
-            this.props.renderPlayPauseButton(this._togglePlay.bind(this), isPlaying)
+            this.props.renderPlayPauseButton(this._togglePlay, isPlaying)
         }
@@ -1054,10 +1060,10 @@
                     key='swipeable'
-                    delta={1}
-                    onSwipingLeft={this._handleSwiping.bind(this, -1)}
-                    onSwipingRight={this._handleSwiping.bind(this, 1)}
-                    onSwiped={this._handleOnSwiped.bind(this)}
-                    onSwipedLeft={this._handleOnSwipedTo.bind(this, 1)}
-                    onSwipedRight={this._handleOnSwipedTo.bind(this, -1)}
-                    onSwipedDown={this._handleOnSwipedTo.bind(this, 0)}
-                    onSwipedUp={this._handleOnSwipedTo.bind(this, 0)}
+                    delta={0}
+                    flickThreshold={this.props.flickThreshold}
+                    onSwiping={this._handleSwiping}
+                    onSwipingLeft={this._onSwipingNoOp}
+                    onSwipingRight={this._onSwipingNoOp}
+                    onSwipingUp={this._onSwipingNoOp}
+                    onSwipingDown={this._onSwipingNoOp}
+                    onSwiped={this._handleOnSwiped}
                     stopPropagation={this.props.stopPropagation}
@@ -1064,0 +1070,0 @@ preventDefaultTouchmoveEvent={this.props.preventDefaultTouchmoveEvent}

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

124966

increased by3.07%

Number of package files

16

increased by6.67%

Lines of code

2798

increased by4.36%

Number of lines in readme file

260

increased by0.78%

No dependency changes