react-image-gallery - npm Package Compare versions

Comparing version 0.8.3 to 0.8.4

build/image-gallery.js

@@ -39,3 +39,3 @@ 'use strict';
 
-var screenChangeEvents = ['fullscreenchange', 'msfullscreenchange', 'mozfullscreenchange', 'webkitfullscreenchange'];
+var screenChangeEvents = ['fullscreenchange', 'MSFullscreenChange', 'mozfullscreenchange', 'webkitfullscreenchange'];
 
@@ -384,3 +384,3 @@ var ImageGallery = function (_React$Component) {
         }
-      }, 500);
+      }, 50);
     }
@@ -462,3 +462,3 @@ }, {
     value: function _sufficientSwipeOffset() {
-      return Math.abs(this.state.offsetPercentage) > 30;
+      return Math.abs(this.state.offsetPercentage) > this.props.swipeThreshold;
     }
@@ -575,3 +575,3 @@ }, {
         } else {
-          if (this._thumbnails.scrollWidth <= thumbnailsWrapperWidth) {
+          if (this._thumbnails.scrollWidth <= thumbnailsWrapperWidth || thumbnailsWrapperWidth <= 0) {
             return 0;
@@ -699,4 +699,23 @@ }
   }, {
+    key: '_shouldPushSlideOnInfiniteMode',
+    value: function _shouldPushSlideOnInfiniteMode(index) {
+      /*
+        Push(show) slide if slide is the current slide, and the next slide
+        OR
+        The slide is going more than 1 slide left, or right, but not going from
+        first to last and not going from last to first
+         There is an edge case where if you go to the first or last slide, when they're
+        not left, or right of each other they will try to catch up in the background
+        so unless were going from first to last or vice versa we don't want the first
+        or last slide to show up during our transition
+      */
+      return !this._slideIsTransitioning(index) || this._ignoreIsTransitioning() && !this._isFirstOrLastSlide(index);
+    }
+  }, {
     key: '_slideIsTransitioning',
     value: function _slideIsTransitioning(index) {
+      /*
+      returns true if the gallery is transitioning and the index is not the
+      previous or currentIndex
+      */
       var _state6 = this.state;
@@ -707,9 +726,20 @@ var isTransitioning = _state6.isTransitioning;
 
-      return isTransitioning && !(index === previousIndex || index == currentIndex);
+      var indexIsNotPreviousOrNextSlide = !(index === previousIndex || index === currentIndex);
+      return isTransitioning && indexIsNotPreviousOrNextSlide;
     }
   }, {
+    key: '_isFirstOrLastSlide',
+    value: function _isFirstOrLastSlide(index) {
+      var totalSlides = this.props.items.length - 1;
+      var isLastSlide = index === totalSlides;
+      var isFirstSlide = index === 0;
+      return isLastSlide || isFirstSlide;
+    }
+  }, {
     key: '_ignoreIsTransitioning',
     value: function _ignoreIsTransitioning() {
-      // Ignore isTransitioning because were not going to sibling slides
-      // e.g. center to left or center to right
+      /*
+        Ignore isTransitioning because were not going to sibling slides
+        e.g. center to left or center to right
+      */
       var _state7 = this.state;
@@ -719,3 +749,9 @@ var previousIndex = _state7.previousIndex;
 
-      return Math.abs(previousIndex - currentIndex) > 1 && !this._isGoingFromFirstToLast() && !this._isGoingFromLastToFirst();
+      var totalSlides = this.props.items.length - 1;
+      // we want to show the in between slides transition
+      var slidingMoreThanOneSlideLeftOrRight = Math.abs(previousIndex - currentIndex) > 1;
+      var notGoingFromFirstToLast = !(previousIndex === 0 && currentIndex === totalSlides);
+      var notGoingFromLastToFirst = !(previousIndex === totalSlides && currentIndex === 0);
+
+      return slidingMoreThanOneSlideLeftOrRight && notGoingFromFirstToLast && notGoingFromLastToFirst;
     }
@@ -893,3 +929,3 @@ }, {
           // don't add some slides while transitioning to avoid background transitions
-          if (!_this7._slideIsTransitioning(index) || _this7._ignoreIsTransitioning()) {
+          if (_this7._shouldPushSlideOnInfiniteMode(index)) {
             slides.push(slide);
@@ -970,3 +1006,5 @@ }
             onSwipedDown: this._handleOnSwipedTo.bind(this, 0),
-            onSwipedUp: this._handleOnSwipedTo.bind(this, 0)
+            onSwipedUp: this._handleOnSwipedTo.bind(this, 0),
+            stopPropagation: this.props.stopPropagation,
+            preventDefaultTouchmoveEvent: this.props.preventDefaultTouchmoveEvent
           },
@@ -1085,2 +1123,3 @@ _react2.default.createElement(
   useBrowserFullscreen: _propTypes2.default.bool,
+  preventDefaultTouchmoveEvent: _propTypes2.default.bool,
   defaultImage: _propTypes2.default.string,
@@ -1092,2 +1131,3 @@ indexSeparator: _propTypes2.default.string,
   slideInterval: _propTypes2.default.number,
+  swipeThreshold: _propTypes2.default.number,
   swipingTransitionDuration: _propTypes2.default.number,
@@ -1111,3 +1151,4 @@ onSlide: _propTypes2.default.func,
   renderFullscreenButton: _propTypes2.default.func,
-  renderItem: _propTypes2.default.func
+  renderItem: _propTypes2.default.func,
+  stopPropagation: _propTypes2.default.bool
 };
@@ -1130,2 +1171,3 @@ ImageGallery.defaultProps = {
   useBrowserFullscreen: true,
+  preventDefaultTouchmoveEvent: false,
   indexSeparator: ' / ',
@@ -1137,2 +1179,3 @@ thumbnailPosition: 'bottom',
   slideInterval: 3000,
+  swipeThreshold: 30,
   renderLeftNav: function renderLeftNav(onClick, disabled) {
@@ -1139,0 +1182,0 @@ return _react2.default.createElement('button', {

package.json

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

README.md

@@ -1,2 +0,2 @@
-React Image Gallery
+React Carousel Image Gallery
 ===
@@ -92,2 +92,4 @@
     * `thumbnailClass` - custom thumbnail class
+    * `renderItem` - Function for custom renderer (see renderItem below)
+    * `renderThumbInner` - Function for custom thumbnail renderer (see renderThumbInner below)
     * `originalAlt` - image alt
@@ -130,2 +132,9 @@ * `thumbnailAlt` - thumbnail image alt
 * `slideInterval`: Integer, default `3000`
+* `swipeThreshold`: Integer, default `30`
+  * A percentage of how far the offset of the current slide is swiped to trigger a slide event.
+    e.g. If the current slide is swiped less than 30% to the left or right, it will not trigger a slide event.
+* `stopPropagation`: Boolean, default `false`
+    * Automatically calls stopPropagation on all 'swipe' events.
+* `preventDefaultTouchmoveEvent`: Boolean, default `false`
+    * An option to prevent the browser's touchmove event (stops the gallery from scrolling up or down when swiping)
 * `startIndex`: Integer, default `0`
@@ -132,0 +141,0 @@ * `onImageError`: Function, `callback(event)`

src/ImageGallery.jsx

@@ -9,3 +9,3 @@ import React from 'react';
   'fullscreenchange',
-  'msfullscreenchange',
+  'MSFullscreenChange',
   'mozfullscreenchange',
@@ -51,2 +51,3 @@ 'webkitfullscreenchange'
     useBrowserFullscreen: PropTypes.bool,
+    preventDefaultTouchmoveEvent: PropTypes.bool,
     defaultImage: PropTypes.string,
@@ -58,2 +59,3 @@ indexSeparator: PropTypes.string,
     slideInterval: PropTypes.number,
+    swipeThreshold: PropTypes.number,
     swipingTransitionDuration: PropTypes.number,
@@ -77,3 +79,4 @@ onSlide: PropTypes.func,
     renderFullscreenButton: PropTypes.func,
-    renderItem: PropTypes.func
+    renderItem: PropTypes.func,
+    stopPropagation: PropTypes.bool
   };
@@ -97,2 +100,3 @@
     useBrowserFullscreen: true,
+    preventDefaultTouchmoveEvent: false,
     indexSeparator: ' / ',
@@ -104,2 +108,3 @@ thumbnailPosition: 'bottom',
     slideInterval: 3000,
+    swipeThreshold: 30,
     renderLeftNav: (onClick, disabled) => {
@@ -450,3 +455,3 @@ return (
       }
-    }, 500);
+    }, 50);
   }
@@ -519,3 +524,3 @@
   _sufficientSwipeOffset() {
-    return Math.abs(this.state.offsetPercentage) > 30;
+    return Math.abs(this.state.offsetPercentage) > this.props.swipeThreshold;
   }
@@ -621,3 +626,3 @@
       } else {
-        if (this._thumbnails.scrollWidth <= thumbnailsWrapperWidth) {
+        if (this._thumbnails.scrollWidth <= thumbnailsWrapperWidth || thumbnailsWrapperWidth <= 0) {
           return 0;
@@ -734,15 +739,50 @@ }
 
+  _shouldPushSlideOnInfiniteMode(index) {
+    /*
+      Push(show) slide if slide is the current slide, and the next slide
+      OR
+      The slide is going more than 1 slide left, or right, but not going from
+      first to last and not going from last to first
+
+      There is an edge case where if you go to the first or last slide, when they're
+      not left, or right of each other they will try to catch up in the background
+      so unless were going from first to last or vice versa we don't want the first
+      or last slide to show up during our transition
+    */
+    return !this._slideIsTransitioning(index) ||
+      (this._ignoreIsTransitioning() && !this._isFirstOrLastSlide(index));
+  }
+
   _slideIsTransitioning(index) {
+    /*
+    returns true if the gallery is transitioning and the index is not the
+    previous or currentIndex
+    */
     const { isTransitioning, previousIndex, currentIndex } = this.state;
-    return isTransitioning &&
-      !(index === previousIndex || index == currentIndex);
+    const indexIsNotPreviousOrNextSlide = !(index === previousIndex || index === currentIndex);
+    return isTransitioning && indexIsNotPreviousOrNextSlide;
   }
 
+  _isFirstOrLastSlide(index) {
+    const totalSlides = this.props.items.length - 1;
+    const isLastSlide = index === totalSlides;
+    const isFirstSlide = index === 0;
+    return isLastSlide || isFirstSlide;
+  }
+
   _ignoreIsTransitioning() {
-    // Ignore isTransitioning because were not going to sibling slides
-    // e.g. center to left or center to right
+    /*
+      Ignore isTransitioning because were not going to sibling slides
+      e.g. center to left or center to right
+    */
     const { previousIndex, currentIndex } = this.state;
-    return Math.abs(previousIndex - currentIndex) > 1 &&
-      !this._isGoingFromFirstToLast() &&
-      !this._isGoingFromLastToFirst();
+    const totalSlides = this.props.items.length - 1;
+    // we want to show the in between slides transition
+    const slidingMoreThanOneSlideLeftOrRight = Math.abs(previousIndex - currentIndex) > 1;
+    const notGoingFromFirstToLast = !(previousIndex === 0 && currentIndex === totalSlides);
+    const notGoingFromLastToFirst = !(previousIndex === totalSlides && currentIndex === 0);
+
+    return slidingMoreThanOneSlideLeftOrRight &&
+      notGoingFromFirstToLast &&
+      notGoingFromLastToFirst;
   }
@@ -910,3 +950,3 @@
         // don't add some slides while transitioning to avoid background transitions
-        if (!this._slideIsTransitioning(index) || this._ignoreIsTransitioning()) {
+        if (this._shouldPushSlideOnInfiniteMode(index)) {
           slides.push(slide);
@@ -1005,2 +1045,4 @@ }
                     onSwipedUp={this._handleOnSwipedTo.bind(this, 0)}
+                    stopPropagation={this.props.stopPropagation}
+                    preventDefaultTouchmoveEvent={this.props.preventDefaultTouchmoveEvent}
                   >
@@ -1007,0 +1049,0 @@ <div className='image-gallery-slides'>

No alert changes

Improved metrics

Total package byte prevSize

121238

increased by3.92%

Lines of code

2681

increased by3.08%

Number of lines in readme file

258

increased by3.61%

No dependency changes