react-image-gallery 1.0.6 → 1.0.7

package/README.md

@@ -4,19 +4,21 @@ React Carousel Image Gallery
 [![npm version](https://badge.fury.io/js/react-image-gallery.svg)](https://badge.fury.io/js/react-image-gallery)
 [![Download Count](http://img.shields.io/npm/dm/react-image-gallery.svg?style=flat)](http://www.npmjs.com/package/react-image-gallery)
 
-## Live Demo (try it on mobile for swipe support)
-#### [`linxtion.com/demo/react-image-gallery`](http://linxtion.com/demo/react-image-gallery)
+### Live Demo (try it on mobile for swipe support)
+[`linxtion.com/demo/react-image-gallery`](http://linxtion.com/demo/react-image-gallery)
 
 ![demo gif](https://github.com/xiaolin/react-image-gallery/raw/master/static/image_gallery_v1.0.2.gif)
 
 React image gallery is a React component for building image galleries and carousels
 
-Features of `react-image-gallery`
-* Mobile Swipe Gestures
-* Thumbnail Navigation
-* Fullscreen Support
-* Custom Rendered Slides
-* Responsive Design
+## Features
+
+* Mobile swipe gestures
+* Thumbnail navigation
+* Fullscreen support
+* Custom rendered slides
+* RTL support
+* Responsive design
 * Tons of customization options (see props below)
 * Lightweight ~7kb gzipped
 

package/build/image-gallery.js

@@ -176,9 +176,9 @@ var ImageGallery = function (_React$Component) {
       window.removeEventListener('mousedown', this.handleMouseDown);
       this.removeScreenChangeEvent();
       this.removeResizeObserver();
-      if (this.intervalId) {
-        window.clearInterval(this.intervalId);
-        this.intervalId = null;
+      if (this.playPauseIntervalId) {
+        window.clearInterval(this.playPauseIntervalId);
+        this.playPauseIntervalId = null;
       }
       if (this.transitionTimer) {
         window.clearTimeout(this.transitionTimer);
@@ -546,7 +546,7 @@ var ImageGallery = function (_React$Component) {
         var slide = _react2.default.createElement(
           'div',
           {
-            key: 'slide-' + item.original,
+            key: 'slide-' + item.original + '-' + index,
             tabIndex: '-1',
             className: 'image-gallery-slide ' + alignment + ' ' + originalClass,
             style: slideStyle,
@@ -577,7 +577,7 @@ var ImageGallery = function (_React$Component) {
           thumbnails.push(_react2.default.createElement(
             'button',
             {
-              key: 'thumbnail-' + item.original,
+              key: 'thumbnail-' + item.original + '-' + index,
               type: 'button',
               tabIndex: '0',
               'aria-pressed': currentIndex === index ? 'true' : 'false',
@@ -612,7 +612,7 @@ var ImageGallery = function (_React$Component) {
           var igBulletClass = (0, _clsx2.default)('image-gallery-bullet', item.bulletClass, { active: currentIndex === index });
           bullets.push(_react2.default.createElement('button', {
             type: 'button',
-            key: 'bullet-' + item.original,
+            key: 'bullet-' + item.original + '-' + index,
             className: igBulletClass,
             onClick: bulletOnClick,
             'aria-pressed': currentIndex === index ? 'true' : 'false',
@@ -887,13 +887,13 @@ var ImageGallery = function (_React$Component) {
 
       switch (key) {
         case LEFT_ARROW:
-          if (this.canSlideLeft() && !this.intervalId) {
-            this.slideLeft();
+          if (this.canSlideLeft() && !this.playPauseIntervalId) {
+            this.slideLeft(event);
           }
           break;
         case RIGHT_ARROW:
-          if (this.canSlideRight() && !this.intervalId) {
-            this.slideRight();
+          if (this.canSlideRight() && !this.playPauseIntervalId) {
+            this.slideRight(event);
           }
           break;
         case ESC_KEY:
@@ -976,7 +976,7 @@ var ImageGallery = function (_React$Component) {
   }, {
     key: 'togglePlay',
     value: function togglePlay() {
-      if (this.intervalId) {
+      if (this.playPauseIntervalId) {
         this.pause();
       } else {
         this.play();
@@ -988,12 +988,16 @@ var ImageGallery = function (_React$Component) {
       /*
         handles screen change events that the browser triggers e.g. esc key
       */
-      var onScreenChange = this.props.onScreenChange;
+      var _props13 = this.props,
+          onScreenChange = _props13.onScreenChange,
+          useBrowserFullscreen = _props13.useBrowserFullscreen;
 
       var fullScreenElement = document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
 
-      if (onScreenChange) onScreenChange(fullScreenElement);
-      this.setState({ isFullscreen: !!fullScreenElement });
+      // check if screenchange element is the gallery
+      var isFullscreen = this.imageGallery.current === fullScreenElement;
+      if (onScreenChange) onScreenChange(isFullscreen);
+      if (useBrowserFullscreen) this.setState({ isFullscreen: isFullscreen });
     }
   }, {
     key: 'slideToIndex',
@@ -1001,15 +1005,15 @@ var ImageGallery = function (_React$Component) {
       var _state12 = this.state,
           currentIndex = _state12.currentIndex,
           isTransitioning = _state12.isTransitioning;
-      var _props13 = this.props,
-          items = _props13.items,
-          slideDuration = _props13.slideDuration,
-          onBeforeSlide = _props13.onBeforeSlide;
+      var _props14 = this.props,
+          items = _props14.items,
+          slideDuration = _props14.slideDuration,
+          onBeforeSlide = _props14.onBeforeSlide;
 
 
       if (!isTransitioning) {
         if (event) {
-          if (this.intervalId) {
+          if (this.playPauseIntervalId) {
             // user triggered event while ImageGallery is playing, reset interval
             this.pause(false);
             this.play(false);
@@ -1039,24 +1043,24 @@ var ImageGallery = function (_React$Component) {
     }
   }, {
     key: 'slideLeft',
-    value: function slideLeft() {
+    value: function slideLeft(event) {
       var isRTL = this.props.isRTL;
 
       if (isRTL) {
-        this.slideNext();
+        this.slideNext(event);
       } else {
-        this.slidePrevious();
+        this.slidePrevious(event);
       }
     }
   }, {
     key: 'slideRight',
-    value: function slideRight() {
+    value: function slideRight(event) {
       var isRTL = this.props.isRTL;
 
       if (isRTL) {
-        this.slidePrevious();
+        this.slidePrevious(event);
       } else {
-        this.slideNext();
+        this.slideNext(event);
       }
     }
   }, {
@@ -1235,15 +1239,15 @@ var ImageGallery = function (_React$Component) {
     key: 'play',
     value: function play() {
       var shouldCallOnPlay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-      var _props14 = this.props,
-          onPlay = _props14.onPlay,
-          slideInterval = _props14.slideInterval,
-          slideDuration = _props14.slideDuration;
+      var _props15 = this.props,
+          onPlay = _props15.onPlay,
+          slideInterval = _props15.slideInterval,
+          slideDuration = _props15.slideDuration;
       var currentIndex = this.state.currentIndex;
 
-      if (!this.intervalId) {
+      if (!this.playPauseIntervalId) {
         this.setState({ isPlaying: true });
-        this.intervalId = window.setInterval(this.pauseOrPlay, Math.max(slideInterval, slideDuration));
+        this.playPauseIntervalId = window.setInterval(this.pauseOrPlay, Math.max(slideInterval, slideDuration));
         if (onPlay && shouldCallOnPlay) {
           onPlay(currentIndex);
         }
@@ -1256,9 +1260,9 @@ var ImageGallery = function (_React$Component) {
       var onPause = this.props.onPause;
       var currentIndex = this.state.currentIndex;
 
-      if (this.intervalId) {
-        window.clearInterval(this.intervalId);
-        this.intervalId = null;
+      if (this.playPauseIntervalId) {
+        window.clearInterval(this.playPauseIntervalId);
+        this.playPauseIntervalId = null;
         this.setState({ isPlaying: false });
         if (onPause && shouldCallOnPause) {
           onPause(currentIndex);
@@ -1314,9 +1318,9 @@ var ImageGallery = function (_React$Component) {
             },
             onError: handleImageError
           },
-          item.imageSet.map(function (source) {
+          item.imageSet.map(function (source, index) {
             return _react2.default.createElement('source', {
-              key: source.media,
+              key: 'media-' + source.srcSet + '-' + index,
               media: source.media,
               srcSet: source.srcSet,
               type: source.type
@@ -1378,23 +1382,23 @@ var ImageGallery = function (_React$Component) {
           isFullscreen = _state15.isFullscreen,
           modalFullscreen = _state15.modalFullscreen,
           isPlaying = _state15.isPlaying;
-      var _props15 = this.props,
-          additionalClass = _props15.additionalClass,
-          indexSeparator = _props15.indexSeparator,
-          isRTL = _props15.isRTL,
-          items = _props15.items,
-          thumbnailPosition = _props15.thumbnailPosition,
-          renderFullscreenButton = _props15.renderFullscreenButton,
-          renderCustomControls = _props15.renderCustomControls,
-          renderLeftNav = _props15.renderLeftNav,
-          renderRightNav = _props15.renderRightNav,
-          showBullets = _props15.showBullets,
-          showFullscreenButton = _props15.showFullscreenButton,
-          showIndex = _props15.showIndex,
-          showThumbnails = _props15.showThumbnails,
-          showNav = _props15.showNav,
-          showPlayButton = _props15.showPlayButton,
-          renderPlayPauseButton = _props15.renderPlayPauseButton;
+      var _props16 = this.props,
+          additionalClass = _props16.additionalClass,
+          indexSeparator = _props16.indexSeparator,
+          isRTL = _props16.isRTL,
+          items = _props16.items,
+          thumbnailPosition = _props16.thumbnailPosition,
+          renderFullscreenButton = _props16.renderFullscreenButton,
+          renderCustomControls = _props16.renderCustomControls,
+          renderLeftNav = _props16.renderLeftNav,
+          renderRightNav = _props16.renderRightNav,
+          showBullets = _props16.showBullets,
+          showFullscreenButton = _props16.showFullscreenButton,
+          showIndex = _props16.showIndex,
+          showThumbnails = _props16.showThumbnails,
+          showNav = _props16.showNav,
+          showPlayButton = _props16.showPlayButton,
+          renderPlayPauseButton = _props16.renderPlayPauseButton;
 
 
       var thumbnailStyle = this.getThumbnailStyle();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-image-gallery",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "React carousel image gallery component with thumbnail and mobile support",
   "main": "./build/image-gallery.js",
   "scripts": {

package/src/ImageGallery.jsx

@@ -305,9 +305,9 @@ export default class ImageGallery extends React.Component {
     window.removeEventListener('mousedown', this.handleMouseDown);
     this.removeScreenChangeEvent();
     this.removeResizeObserver();
-    if (this.intervalId) {
-      window.clearInterval(this.intervalId);
-      this.intervalId = null;
+    if (this.playPauseIntervalId) {
+      window.clearInterval(this.playPauseIntervalId);
+      this.playPauseIntervalId = null;
     }
     if (this.transitionTimer) {
       window.clearTimeout(this.transitionTimer);
@@ -622,7 +622,7 @@ export default class ImageGallery extends React.Component {
 
       const slide = (
         <div
-          key={`slide-${item.original}`}
+          key={`slide-${item.original}-${index}`}
           tabIndex="-1"
           className={`image-gallery-slide ${alignment} ${originalClass}`}
           style={slideStyle}
@@ -657,7 +657,7 @@ export default class ImageGallery extends React.Component {
         );
         thumbnails.push(
           <button
-            key={`thumbnail-${item.original}`}
+            key={`thumbnail-${item.original}-${index}`}
             type="button"
             tabIndex="0"
             aria-pressed={currentIndex === index ? 'true' : 'false'}
@@ -690,7 +690,7 @@ export default class ImageGallery extends React.Component {
         bullets.push(
           <button
             type="button"
-            key={`bullet-${item.original}`}
+            key={`bullet-${item.original}-${index}`}
             className={igBulletClass}
             onClick={bulletOnClick}
             aria-pressed={currentIndex === index ? 'true' : 'false'}
@@ -911,13 +911,13 @@ export default class ImageGallery extends React.Component {
 
     switch (key) {
       case LEFT_ARROW:
-        if (this.canSlideLeft() && !this.intervalId) {
-          this.slideLeft();
+        if (this.canSlideLeft() && !this.playPauseIntervalId) {
+          this.slideLeft(event);
         }
         break;
       case RIGHT_ARROW:
-        if (this.canSlideRight() && !this.intervalId) {
-          this.slideRight();
+        if (this.canSlideRight() && !this.playPauseIntervalId) {
+          this.slideRight(event);
         }
         break;
       case ESC_KEY:
@@ -990,7 +990,7 @@ export default class ImageGallery extends React.Component {
   }
 
   togglePlay() {
-    if (this.intervalId) {
+    if (this.playPauseIntervalId) {
       this.pause();
     } else {
       this.play();
@@ -1002,14 +1002,16 @@ export default class ImageGallery extends React.Component {
     /*
       handles screen change events that the browser triggers e.g. esc key
     */
-    const { onScreenChange } = this.props;
+    const { onScreenChange, useBrowserFullscreen } = this.props;
     const fullScreenElement = document.fullscreenElement
       || document.msFullscreenElement
       || document.mozFullScreenElement
       || document.webkitFullscreenElement;
 
-    if (onScreenChange) onScreenChange(fullScreenElement);
-    this.setState({ isFullscreen: !!fullScreenElement });
+    // check if screenchange element is the gallery
+    const isFullscreen = this.imageGallery.current === fullScreenElement;
+    if (onScreenChange) onScreenChange(isFullscreen);
+    if (useBrowserFullscreen) this.setState({ isFullscreen });
   }
 
   slideToIndex(index, event) {
@@ -1018,7 +1020,7 @@ export default class ImageGallery extends React.Component {
 
     if (!isTransitioning) {
       if (event) {
-        if (this.intervalId) {
+        if (this.playPauseIntervalId) {
           // user triggered event while ImageGallery is playing, reset interval
           this.pause(false);
           this.play(false);
@@ -1047,21 +1049,21 @@ export default class ImageGallery extends React.Component {
     }
   }
 
-  slideLeft() {
+  slideLeft(event) {
     const { isRTL } = this.props;
     if (isRTL) {
-      this.slideNext();
+      this.slideNext(event);
     } else {
-      this.slidePrevious();
+      this.slidePrevious(event);
     }
   }
 
-  slideRight() {
+  slideRight(event) {
     const { isRTL } = this.props;
     if (isRTL) {
-      this.slidePrevious();
+      this.slidePrevious(event);
     } else {
-      this.slideNext();
+      this.slideNext(event);
     }
   }
 
@@ -1207,9 +1209,9 @@ export default class ImageGallery extends React.Component {
       slideDuration,
     } = this.props;
     const { currentIndex } = this.state;
-    if (!this.intervalId) {
+    if (!this.playPauseIntervalId) {
       this.setState({ isPlaying: true });
-      this.intervalId = window.setInterval(
+      this.playPauseIntervalId = window.setInterval(
         this.pauseOrPlay,
         Math.max(slideInterval, slideDuration),
       );
@@ -1222,9 +1224,9 @@ export default class ImageGallery extends React.Component {
   pause(shouldCallOnPause = true) {
     const { onPause } = this.props;
     const { currentIndex } = this.state;
-    if (this.intervalId) {
-      window.clearInterval(this.intervalId);
-      this.intervalId = null;
+    if (this.playPauseIntervalId) {
+      window.clearInterval(this.playPauseIntervalId);
+      this.playPauseIntervalId = null;
       this.setState({ isPlaying: false });
       if (onPause && shouldCallOnPause) {
         onPause(currentIndex);
@@ -1271,9 +1273,9 @@ export default class ImageGallery extends React.Component {
               onError={handleImageError}
             >
               {
-                item.imageSet.map(source => (
+                item.imageSet.map((source, index) => (
                   <source
-                    key={source.media}
+                    key={`media-${source.srcSet}-${index}`}
                     media={source.media}
                     srcSet={source.srcSet}
                     type={source.type}