react-image-gallery - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

build/image-gallery.js

@@ -76,3 +76,3 @@ 'use strict';
       thumbsTranslate: 0,
-      offsetPercentage: 0,
+      currentSlideOffset: 0,
       galleryWidth: 0,
@@ -357,35 +357,46 @@ thumbnailsWrapperWidth: 0,
           currentIndex = _state4.currentIndex,
-          offsetPercentage = _state4.offsetPercentage,
+          currentSlideOffset = _state4.currentSlideOffset,
           previousIndex = _state4.previousIndex;
 
+      var indexChanged = currentIndex !== previousIndex;
+      var firstSlideWasPrevSlide = index === 0 && previousIndex === 0;
+      var secondSlideWasPrevSlide = index === 1 && previousIndex === 1;
+      var firstSlideIsNextSlide = index === 0 && currentIndex === 1;
+      var secondSlideIsNextSlide = index === 1 && currentIndex === 0;
+      var swipingEnded = currentSlideOffset === 0;
       var baseTranslateX = -100 * currentIndex;
-      var translateX = baseTranslateX + index * 100 + offsetPercentage;
+      var translateX = baseTranslateX + index * 100 + currentSlideOffset;
 
       // keep track of user swiping direction
-      if (offsetPercentage > 0) {
+      // important to understand how to translateX based on last direction
+      if (currentSlideOffset > 0) {
         this.direction = 'left';
-      } else if (offsetPercentage < 0) {
+      } else if (currentSlideOffset < 0) {
         this.direction = 'right';
       }
 
-      // when swiping make sure the slides are on the correct side
-      if (currentIndex === 0 && index === 1 && offsetPercentage > 0) {
-        translateX = -100 + offsetPercentage;
-      } else if (currentIndex === 1 && index === 0 && offsetPercentage < 0) {
-        translateX = 100 + offsetPercentage;
+      // when swiping between two slides make sure the next and prev slides
+      // are on both left and right
+      if (secondSlideIsNextSlide && currentSlideOffset > 0) {
+        // swiping right
+        translateX = -100 + currentSlideOffset;
       }
+      if (firstSlideIsNextSlide && currentSlideOffset < 0) {
+        // swiping left
+        translateX = 100 + currentSlideOffset;
+      }
 
-      if (currentIndex !== previousIndex) {
-        // when swiped move the slide to the correct side
-        if (previousIndex === 0 && index === 0 && offsetPercentage === 0 && this.direction === 'left') {
+      if (indexChanged) {
+        // when indexChanged move the slide to the correct side
+        if (firstSlideWasPrevSlide && swipingEnded && this.direction === 'left') {
           translateX = 100;
-        } else if (previousIndex === 1 && index === 1 && offsetPercentage === 0 && this.direction === 'right') {
+        } else if (secondSlideWasPrevSlide && swipingEnded && this.direction === 'right') {
           translateX = -100;
         }
       } else {
-        // keep the slide on the correct slide even when not a swipe
-        if (currentIndex === 0 && index === 1 && offsetPercentage === 0 && this.direction === 'left') {
+        // keep the slide on the correct side if the swipe was not successful
+        if (secondSlideIsNextSlide && swipingEnded && this.direction === 'left') {
           translateX = -100;
         }
-        if (currentIndex === 1 && index === 0 && offsetPercentage === 0 && this.direction === 'right') {
+        if (firstSlideIsNextSlide && swipingEnded && this.direction === 'right') {
           translateX = 100;
@@ -412,3 +423,3 @@ }
           currentIndex = _state5.currentIndex,
-          offsetPercentage = _state5.offsetPercentage,
+          currentSlideOffset = _state5.currentSlideOffset,
           slideStyle = _state5.slideStyle;
@@ -426,3 +437,3 @@ var _props5 = this.props,
       // if it is RTL the base line should be reversed
-      var translateX = (baseTranslateX + index * 100) * (isRTL ? -1 : 1) + offsetPercentage;
+      var translateX = (baseTranslateX + index * 100) * (isRTL ? -1 : 1) + currentSlideOffset;
 
@@ -433,7 +444,7 @@ if (infinite && items.length > 2) {
           // if it is RTL the base line should be reversed
-          translateX = -100 * (isRTL ? -1 : 1) + offsetPercentage;
+          translateX = -100 * (isRTL ? -1 : 1) + currentSlideOffset;
         } else if (currentIndex === totalSlides && index === 0) {
           // make the first slide the slide after the last
           // if it is RTL the base line should be reversed
-          translateX = 100 * (isRTL ? -1 : 1) + offsetPercentage;
+          translateX = 100 * (isRTL ? -1 : 1) + currentSlideOffset;
         }
@@ -500,3 +511,3 @@ }
     key: 'getSlideItems',
-    value: function getSlideItems(items) {
+    value: function getSlideItems() {
       var _this4 = this;
@@ -507,2 +518,3 @@
           infinite = _props7.infinite,
+          items = _props7.items,
           slideOnThumbnailOver = _props7.slideOnThumbnailOver,
@@ -774,5 +786,5 @@ onClick = _props7.onClick,
 
-        var offsetPercentage = absX / galleryWidth * 100;
-        if (Math.abs(offsetPercentage) >= 100) {
-          offsetPercentage = 100;
+        var currentSlideOffset = absX / galleryWidth * 100;
+        if (Math.abs(currentSlideOffset) >= 100) {
+          currentSlideOffset = 100;
         }
@@ -785,3 +797,3 @@
         this.setState({
-          offsetPercentage: side * offsetPercentage,
+          currentSlideOffset: side * currentSlideOffset,
           slideStyle: swipingTransition
@@ -791,3 +803,3 @@ });
         // don't move the slide
-        this.setState({ offsetPercentage: 0 });
+        this.setState({ currentSlideOffset: 0 });
       }
@@ -798,6 +810,6 @@ }
     value: function sufficientSwipe() {
-      var offsetPercentage = this.state.offsetPercentage;
+      var currentSlideOffset = this.state.currentSlideOffset;
       var swipeThreshold = this.props.swipeThreshold;
 
-      return Math.abs(offsetPercentage) > swipeThreshold;
+      return Math.abs(currentSlideOffset) > swipeThreshold;
     }
@@ -1033,3 +1045,3 @@ }, {
           isTransitioning: nextIndex !== currentIndex,
-          offsetPercentage: 0,
+          currentSlideOffset: 0,
           slideStyle: { transition: 'all ' + slideDuration + 'ms ease-out' }
@@ -1064,5 +1076,31 @@ }, this.onSliding);
     value: function slidePrevious(event) {
-      var currentIndex = this.state.currentIndex;
+      var _this6 = this;
 
-      this.slideToIndex(currentIndex - 1, event);
+      var _state13 = this.state,
+          currentIndex = _state13.currentIndex,
+          currentSlideOffset = _state13.currentSlideOffset,
+          isTransitioning = _state13.isTransitioning;
+      var items = this.props.items;
+
+      var nextIndex = currentIndex - 1;
+
+      if (isTransitioning) return;
+
+      if (items.length === 2) {
+        /*
+          When there are only 2 slides fake a tiny swipe to get the slides
+          on the correct side for transitioning
+        */
+        this.setState({
+          currentSlideOffset: currentSlideOffset + 0.001, // this will reset once index changes
+          slideStyle: { transition: 'none' } // move the slide over instantly
+        }, function () {
+          // add 25ms timeout to avoid delay in moving slides over
+          window.setTimeout(function () {
+            return _this6.slideToIndex(nextIndex, event);
+          }, 25);
+        });
+      } else {
+        this.slideToIndex(nextIndex, event);
+      }
     }
@@ -1072,5 +1110,27 @@ }, {
     value: function slideNext(event) {
-      var currentIndex = this.state.currentIndex;
+      var _this7 = this;
 
-      this.slideToIndex(currentIndex + 1, event);
+      var _state14 = this.state,
+          currentIndex = _state14.currentIndex,
+          currentSlideOffset = _state14.currentSlideOffset,
+          isTransitioning = _state14.isTransitioning;
+      var items = this.props.items;
+
+      var nextIndex = currentIndex + 1;
+
+      if (isTransitioning) return;
+
+      if (items.length === 2) {
+        // same as above for 2 slides
+        this.setState({
+          currentSlideOffset: currentSlideOffset - 0.001,
+          slideStyle: { transition: 'none' }
+        }, function () {
+          window.setTimeout(function () {
+            return _this7.slideToIndex(nextIndex, event);
+          }, 25);
+        });
+      } else {
+        this.slideToIndex(nextIndex, event);
+      }
     }
@@ -1110,6 +1170,6 @@ }, {
     value: function addScreenChangeEvent() {
-      var _this6 = this;
+      var _this8 = this;
 
       screenChangeEvents.forEach(function (eventName) {
-        document.addEventListener(eventName, _this6.handleScreenChange);
+        document.addEventListener(eventName, _this8.handleScreenChange);
       });
@@ -1120,6 +1180,6 @@ }
     value: function removeScreenChangeEvent() {
-      var _this7 = this;
+      var _this9 = this;
 
       screenChangeEvents.forEach(function (eventName) {
-        document.removeEventListener(eventName, _this7.handleScreenChange);
+        document.removeEventListener(eventName, _this9.handleScreenChange);
       });
@@ -1241,2 +1301,3 @@ }
     value: function renderItem(item) {
+      var isFullscreen = this.state.isFullscreen;
       var _props15 = this.props,
@@ -1247,2 +1308,3 @@ onImageError = _props15.onImageError,
       var handleImageError = onImageError || this.handleImageError;
+      var itemSrc = isFullscreen ? item.fullscreen || item.original : item.original;
 
@@ -1269,7 +1331,7 @@ return _react2.default.createElement(
             alt: item.originalAlt,
-            src: item.original
+            src: itemSrc
           })
         ) : _react2.default.createElement('img', {
           className: 'image-gallery-image',
-          src: item.original,
+          src: itemSrc,
           alt: item.originalAlt,
@@ -1316,7 +1378,7 @@ srcSet: item.srcSet,
     value: function render() {
-      var _state13 = this.state,
-          currentIndex = _state13.currentIndex,
-          isFullscreen = _state13.isFullscreen,
-          modalFullscreen = _state13.modalFullscreen,
-          isPlaying = _state13.isPlaying;
+      var _state15 = this.state,
+          currentIndex = _state15.currentIndex,
+          isFullscreen = _state15.isFullscreen,
+          modalFullscreen = _state15.modalFullscreen,
+          isPlaying = _state15.isPlaying;
       var _props16 = this.props,
@@ -1343,3 +1405,3 @@ additionalClass = _props16.additionalClass,
 
-      var _getSlideItems = this.getSlideItems(items),
+      var _getSlideItems = this.getSlideItems(),
           slides = _getSlideItems.slides,
@@ -1359,4 +1421,4 @@ thumbnails = _getSlideItems.thumbnails,
           showNav && _react2.default.createElement(
-            'span',
-            { key: 'navigation' },
+            _react2.default.Fragment,
+            null,
             renderLeftNav(this.slideLeft, !this.canSlideLeft()),
@@ -1369,3 +1431,2 @@ renderRightNav(this.slideRight, !this.canSlideRight())
               className: 'image-gallery-swipe',
-              key: 'swipeable',
               delta: 0,
@@ -1476,2 +1537,3 @@ onSwiping: this.handleSwiping,
     original: _propTypes.string.isRequired,
+    fullscreen: _propTypes.string,
     originalAlt: _propTypes.string,
@@ -1478,0 +1540,0 @@ originalTitle: _propTypes.string,

package.json

 {
   "name": "react-image-gallery",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "React carousel image gallery component with thumbnail and mobile support",
@@ -5,0 +5,0 @@ "main": "./build/image-gallery.js",

README.md

@@ -73,2 +73,3 @@ React Carousel Image Gallery
     * `thumbnail` - image thumbnail src url
+    * `fullscreen` - image for fullscreen (defaults to original)
     * `originalClass` - custom image class
@@ -75,0 +76,0 @@ * `thumbnailClass` - custom thumbnail class

src/ImageGallery.jsx

@@ -45,2 +45,3 @@ import clsx from 'clsx';
       original: string.isRequired,
+      fullscreen: string,
       originalAlt: string,
@@ -207,3 +208,3 @@ originalTitle: string,
       thumbsTranslate: 0,
-      offsetPercentage: 0,
+      currentSlideOffset: 0,
       galleryWidth: 0,
@@ -451,33 +452,43 @@ thumbnailsWrapperWidth: 0,
     // For taking care of infinite swipe when there are only two slides
-    const { currentIndex, offsetPercentage, previousIndex } = this.state;
+    const { currentIndex, currentSlideOffset, previousIndex } = this.state;
+    const indexChanged = currentIndex !== previousIndex;
+    const firstSlideWasPrevSlide = index === 0 && previousIndex === 0;
+    const secondSlideWasPrevSlide = index === 1 && previousIndex === 1;
+    const firstSlideIsNextSlide = index === 0 && currentIndex === 1;
+    const secondSlideIsNextSlide = index === 1 && currentIndex === 0;
+    const swipingEnded = currentSlideOffset === 0;
     const baseTranslateX = -100 * currentIndex;
-    let translateX = baseTranslateX + (index * 100) + offsetPercentage;
+    let translateX = baseTranslateX + (index * 100) + currentSlideOffset;
 
     // keep track of user swiping direction
-    if (offsetPercentage > 0) {
+    // important to understand how to translateX based on last direction
+    if (currentSlideOffset > 0) {
       this.direction = 'left';
-    } else if (offsetPercentage < 0) {
+    } else if (currentSlideOffset < 0) {
       this.direction = 'right';
     }
 
-    // when swiping make sure the slides are on the correct side
-    if (currentIndex === 0 && index === 1 && offsetPercentage > 0) {
-      translateX = -100 + offsetPercentage;
-    } else if (currentIndex === 1 && index === 0 && offsetPercentage < 0) {
-      translateX = 100 + offsetPercentage;
+
+    // when swiping between two slides make sure the next and prev slides
+    // are on both left and right
+    if (secondSlideIsNextSlide && currentSlideOffset > 0) { // swiping right
+      translateX = -100 + currentSlideOffset;
     }
+    if (firstSlideIsNextSlide && currentSlideOffset < 0) { // swiping left
+      translateX = 100 + currentSlideOffset;
+    }
 
-    if (currentIndex !== previousIndex) {
-      // when swiped move the slide to the correct side
-      if (previousIndex === 0 && index === 0 && offsetPercentage === 0 && this.direction === 'left') {
+    if (indexChanged) {
+      // when indexChanged move the slide to the correct side
+      if (firstSlideWasPrevSlide && swipingEnded && this.direction === 'left') {
         translateX = 100;
-      } else if (previousIndex === 1 && index === 1 && offsetPercentage === 0 && this.direction === 'right') {
+      } else if (secondSlideWasPrevSlide && swipingEnded && this.direction === 'right') {
         translateX = -100;
       }
     } else {
-      // keep the slide on the correct slide even when not a swipe
-      if (currentIndex === 0 && index === 1 && offsetPercentage === 0 && this.direction === 'left') {
+      // keep the slide on the correct side if the swipe was not successful
+      if (secondSlideIsNextSlide && swipingEnded && this.direction === 'left') {
         translateX = -100;
       }
-      if (currentIndex === 1 && index === 0 && offsetPercentage === 0 && this.direction === 'right') {
+      if (firstSlideIsNextSlide && swipingEnded && this.direction === 'right') {
         translateX = 100;
@@ -499,3 +510,3 @@ }
   getSlideStyle(index) {
-    const { currentIndex, offsetPercentage, slideStyle } = this.state;
+    const { currentIndex, currentSlideOffset, slideStyle } = this.state;
     const {
@@ -512,3 +523,3 @@ infinite,
     // if it is RTL the base line should be reversed
-    let translateX = (baseTranslateX + (index * 100)) * (isRTL ? -1 : 1) + offsetPercentage;
+    let translateX = (baseTranslateX + (index * 100)) * (isRTL ? -1 : 1) + currentSlideOffset;
 
@@ -519,7 +530,7 @@ if (infinite && items.length > 2) {
         // if it is RTL the base line should be reversed
-        translateX = -100 * (isRTL ? -1 : 1) + offsetPercentage;
+        translateX = -100 * (isRTL ? -1 : 1) + currentSlideOffset;
       } else if (currentIndex === totalSlides && index === 0) {
         // make the first slide the slide after the last
         // if it is RTL the base line should be reversed
-        translateX = 100 * (isRTL ? -1 : 1) + offsetPercentage;
+        translateX = 100 * (isRTL ? -1 : 1) + currentSlideOffset;
       }
@@ -579,6 +590,7 @@ }
 
-  getSlideItems(items) {
+  getSlideItems() {
     const { currentIndex } = this.state;
     const {
       infinite,
+      items,
       slideOnThumbnailOver,
@@ -820,5 +832,5 @@ onClick,
 
-      let offsetPercentage = (absX / galleryWidth * 100);
-      if (Math.abs(offsetPercentage) >= 100) {
-        offsetPercentage = 100;
+      let currentSlideOffset = (absX / galleryWidth * 100);
+      if (Math.abs(currentSlideOffset) >= 100) {
+        currentSlideOffset = 100;
       }
@@ -831,3 +843,3 @@
       this.setState({
-        offsetPercentage: side * offsetPercentage,
+        currentSlideOffset: side * currentSlideOffset,
         slideStyle: swipingTransition,
@@ -837,3 +849,3 @@ });
       // don't move the slide
-      this.setState({ offsetPercentage: 0 });
+      this.setState({ currentSlideOffset: 0 });
     }
@@ -843,5 +855,5 @@ }
   sufficientSwipe() {
-    const { offsetPercentage } = this.state;
+    const { currentSlideOffset } = this.state;
     const { swipeThreshold } = this.props;
-    return Math.abs(offsetPercentage) > swipeThreshold;
+    return Math.abs(currentSlideOffset) > swipeThreshold;
   }
@@ -1042,3 +1054,3 @@
         isTransitioning: nextIndex !== currentIndex,
-        offsetPercentage: 0,
+        currentSlideOffset: 0,
         slideStyle: { transition: `all ${slideDuration}ms ease-out` },
@@ -1068,9 +1080,43 @@ }, this.onSliding);
   slidePrevious(event) {
-    const { currentIndex } = this.state;
-    this.slideToIndex(currentIndex - 1, event);
+    const { currentIndex, currentSlideOffset, isTransitioning } = this.state;
+    const { items } = this.props;
+    const nextIndex = currentIndex - 1;
+
+    if (isTransitioning) return;
+
+    if (items.length === 2) {
+      /*
+        When there are only 2 slides fake a tiny swipe to get the slides
+        on the correct side for transitioning
+      */
+      this.setState({
+        currentSlideOffset: currentSlideOffset + 0.001, // this will reset once index changes
+        slideStyle: { transition: 'none' }, // move the slide over instantly
+      }, () => {
+        // add 25ms timeout to avoid delay in moving slides over
+        window.setTimeout(() => this.slideToIndex(nextIndex, event), 25);
+      });
+    } else {
+      this.slideToIndex(nextIndex, event);
+    }
   }
 
   slideNext(event) {
-    const { currentIndex } = this.state;
-    this.slideToIndex(currentIndex + 1, event);
+    const { currentIndex, currentSlideOffset, isTransitioning } = this.state;
+    const { items } = this.props;
+    const nextIndex = currentIndex + 1;
+
+    if (isTransitioning) return;
+
+    if (items.length === 2) {
+      // same as above for 2 slides
+      this.setState({
+        currentSlideOffset: currentSlideOffset - 0.001,
+        slideStyle: { transition: 'none' },
+      }, () => {
+        window.setTimeout(() => this.slideToIndex(nextIndex, event), 25);
+      });
+    } else {
+      this.slideToIndex(nextIndex, event);
+    }
   }
@@ -1216,4 +1262,6 @@
   renderItem(item) {
+    const { isFullscreen } = this.state;
     const { onImageError, onImageLoad } = this.props;
     const handleImageError = onImageError || this.handleImageError;
+    const itemSrc = isFullscreen ? (item.fullscreen || item.original) : item.original;
 
@@ -1241,3 +1289,3 @@ return (
                 alt={item.originalAlt}
-                src={item.original}
+                src={itemSrc}
               />
@@ -1248,3 +1296,3 @@ </picture>
               className="image-gallery-image"
-              src={item.original}
+              src={itemSrc}
               alt={item.originalAlt}
@@ -1323,3 +1371,3 @@ srcSet={item.srcSet}
     const thumbnailStyle = this.getThumbnailStyle();
-    const { slides, thumbnails, bullets } = this.getSlideItems(items);
+    const { slides, thumbnails, bullets } = this.getSlideItems();
     const slideWrapperClass = clsx(
@@ -1339,6 +1387,6 @@ 'image-gallery-slide-wrapper',
                 showNav && (
-                  <span key="navigation">
+                  <React.Fragment>
                     {renderLeftNav(this.slideLeft, !this.canSlideLeft())}
                     {renderRightNav(this.slideRight, !this.canSlideRight())}
-                  </span>
+                  </React.Fragment>
                 )
@@ -1348,3 +1396,2 @@ }
                 className="image-gallery-swipe"
-                key="swipeable"
                 delta={0}
@@ -1351,0 +1398,0 @@ onSwiping={this.handleSwiping}

No alert changes

Improved metrics

Total package byte prevSize

137250

increased by2.99%

Lines of code

3339

increased by3.02%

Number of lines in readme file

259

increased by0.39%

No dependency changes