react-image-gallery - npm Package Compare versions

Comparing version 0.7.2 to 0.7.3

build/image-gallery.js

@@ -63,16 +63,2 @@ 'use strict';
 
-// This is to handle accessing event properties in an asynchronous way
-// https://facebook.github.io/react/docs/events.html#syntheticevent
-function debounceEventHandler() {
-  var throttled = throttle.apply(undefined, arguments);
-  return function (event) {
-    if (event) {
-      event.persist();
-      return throttled(event);
-    }
-
-    return throttled();
-  };
-}
-
 var screenChangeEvents = ['fullscreenchange', 'msfullscreenchange', 'mozfullscreenchange', 'webkitfullscreenchange'];
@@ -131,7 +117,4 @@
     value: function componentWillMount() {
-
-      this._slideLeft = debounceEventHandler(this._slideLeft.bind(this), MIN_INTERVAL, true);
-
-      this._slideRight = debounceEventHandler(this._slideRight.bind(this), MIN_INTERVAL, true);
-
+      this._slideLeft = throttle(this._slideLeft.bind(this), MIN_INTERVAL, true);
+      this._slideRight = throttle(this._slideRight.bind(this), MIN_INTERVAL, true);
       this._handleResize = this._handleResize.bind(this);
@@ -230,4 +213,8 @@ this._handleScreenChange = this._handleScreenChange.bind(this);
       } else {
-        // fallback to modal for unsupported browsers
+        // fallback to fullscreen modal for unsupported browsers
         this.setState({ modalFullscreen: true });
+        // manually call because browser does not support screenchange events
+        if (this.props.onScreenChange) {
+          this.props.onScreenChange(true);
+        }
       }
@@ -250,4 +237,8 @@
         } else {
-          // fallback to modal for unsupported browsers
+          // fallback to fullscreen modal for unsupported browsers
           this.setState({ modalFullscreen: false });
+          // manually call because browser does not support screenchange events
+          if (this.props.onScreenChange) {
+            this.props.onScreenChange(false);
+          }
         }
@@ -262,3 +253,2 @@
       if (event) {
-        event.preventDefault();
         if (this._intervalId) {
@@ -295,2 +285,16 @@ // user triggered event while ImageGallery is playing, reset interval
   }, {
+    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',
@@ -314,2 +318,11 @@ value: function _onScreenChangeEvent() {
   }, {
+    key: '_toggleFullScreen',
+    value: function _toggleFullScreen() {
+      if (this.state.isFullscreen) {
+        this.exitFullScreen();
+      } else {
+        this.fullScreen();
+      }
+    }
+  }, {
     key: '_togglePlay',
@@ -324,11 +337,2 @@ value: function _togglePlay() {
   }, {
-    key: '_toggleFullScreen',
-    value: function _toggleFullScreen() {
-      if (this.state.isFullscreen) {
-        this.exitFullScreen();
-      } else {
-        this.fullScreen();
-      }
-    }
-  }, {
     key: '_handleResize',
@@ -345,13 +349,2 @@ value: function _handleResize() {
   }, {
-    key: '_handleScreenChange',
-    value: function _handleScreenChange() {
-      var fullScreenElement = document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
-
-      if (this.props.onScreenChange) {
-        this.props.onScreenChange(fullScreenElement);
-      }
-
-      this.setState({ isFullscreen: !!fullScreenElement });
-    }
-  }, {
     key: '_handleKeyDown',
@@ -751,5 +744,2 @@ value: function _handleKeyDown(event) {
 
-              onTouchStart: function onTouchStart(event) {
-                return _this7.slideToIndex.call(_this7, index, event);
-              },
               onClick: function onClick(event) {
@@ -775,5 +765,2 @@ return _this7.slideToIndex.call(_this7, index, event);
 
-            onTouchStart: function onTouchStart(event) {
-              return _this7.slideToIndex.call(_this7, index, event);
-            },
             onClick: function onClick(event) {
@@ -813,3 +800,2 @@ return _this7.slideToIndex.call(_this7, index, event);
                 disabled: !this._canSlideLeft(),
-                onTouchStart: slideLeft,
                 onClick: slideLeft }),
@@ -819,3 +805,2 @@ _react2.default.createElement('button', {
                 disabled: !this._canSlideRight(),
-                onTouchStart: slideRight,
                 onClick: slideRight })
@@ -822,0 +807,0 @@ ), this.props.disableSwipe ? _react2.default.createElement(

package.json

 {
   "name": "react-image-gallery",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "React Carousel, React Image gallery, React Slide Show component",
@@ -5,0 +5,0 @@ "main": "./build/image-gallery",

README.md

@@ -9,3 +9,3 @@ React Image Gallery
 
-React image gallery is a React component for building image gallery and carousels
+React image gallery is a React component for building image galleries and carousels
 
@@ -12,0 +12,0 @@ Features of `react-image-gallery`

src/ImageGallery.jsx

@@ -39,16 +39,2 @@ import React from 'react';
 
-// This is to handle accessing event properties in an asynchronous way
-// https://facebook.github.io/react/docs/events.html#syntheticevent
-function debounceEventHandler(...args) {
-  const throttled = throttle(...args);
-  return function(event) {
-    if (event) {
-      event.persist();
-      return throttled(event);
-    }
-
-    return throttled();
-  };
-}
-
 const screenChangeEvents = [
@@ -61,3 +47,2 @@ 'fullscreenchange',
 
-
 export default class ImageGallery extends React.Component {
@@ -109,9 +94,4 @@
   componentWillMount() {
-
-    this._slideLeft = debounceEventHandler(
-      this._slideLeft.bind(this), MIN_INTERVAL, true);
-
-    this._slideRight = debounceEventHandler(
-      this._slideRight.bind(this), MIN_INTERVAL, true);
-
+    this._slideLeft = throttle(this._slideLeft.bind(this), MIN_INTERVAL, true);
+    this._slideRight = throttle(this._slideRight.bind(this), MIN_INTERVAL, true);
     this._handleResize = this._handleResize.bind(this);
@@ -195,7 +175,12 @@ this._handleScreenChange = this._handleScreenChange.bind(this);
     } else {
-      // fallback to modal for unsupported browsers
+      // fallback to fullscreen modal for unsupported browsers
       this.setState({modalFullscreen: true});
+      // manually call because browser does not support screenchange events
+      if (this.props.onScreenChange) {
+        this.props.onScreenChange(true);
+      }
     }
 
     this.setState({isFullscreen: true});
+
   }
@@ -214,7 +199,12 @@
       } else {
-        // fallback to modal for unsupported browsers
+        // fallback to fullscreen modal for unsupported browsers
         this.setState({modalFullscreen: false});
+        // manually call because browser does not support screenchange events
+        if (this.props.onScreenChange) {
+          this.props.onScreenChange(false);
+        }
       }
 
       this.setState({isFullscreen: false});
+
     }
@@ -225,3 +215,2 @@ }
     if (event) {
-      event.preventDefault();
       if (this._intervalId) {
@@ -257,2 +246,18 @@ // user triggered event while ImageGallery is playing, reset interval
 
+  _handleScreenChange() {
+    /*
+      handles screen change events that the browser triggers e.g. esc key
+    */
+    const fullScreenElement = document.fullscreenElement ||
+      document.msFullscreenElement ||
+      document.mozFullScreenElement ||
+      document.webkitFullscreenElement;
+
+    if (this.props.onScreenChange) {
+      this.props.onScreenChange(fullScreenElement);
+    }
+
+    this.setState({isFullscreen: !!fullScreenElement});
+  }
+
   _onScreenChangeEvent() {
@@ -270,2 +275,10 @@ screenChangeEvents.map(eventName => {
 
+  _toggleFullScreen() {
+    if (this.state.isFullscreen) {
+      this.exitFullScreen();
+    } else {
+      this.fullScreen();
+    }
+  }
+
   _togglePlay() {
@@ -279,10 +292,2 @@ if (this._intervalId) {
 
-  _toggleFullScreen() {
-    if (this.state.isFullscreen) {
-      this.exitFullScreen();
-    } else {
-      this.fullScreen();
-    }
-  }
-
   _handleResize() {
@@ -298,15 +303,2 @@ if (this._imageGallery) {
 
-  _handleScreenChange() {
-    const fullScreenElement = document.fullscreenElement ||
-      document.msFullscreenElement ||
-      document.mozFullScreenElement ||
-      document.webkitFullscreenElement;
-
-    if (this.props.onScreenChange) {
-      this.props.onScreenChange(fullScreenElement);
-    }
-
-    this.setState({isFullscreen: !!fullScreenElement});
-  }
-
   _handleKeyDown(event) {
@@ -686,3 +678,2 @@ const LEFT_ARROW = 37;
 
-            onTouchStart={event => this.slideToIndex.call(this, index, event)}
             onClick={event => this.slideToIndex.call(this, index, event)}>
@@ -708,3 +699,2 @@ <img
 
-            onTouchStart={event => this.slideToIndex.call(this, index, event)}
             onClick={event => this.slideToIndex.call(this, index, event)}>
@@ -750,3 +740,2 @@ </button>
                         disabled={!this._canSlideLeft()}
-                        onTouchStart={slideLeft}
                         onClick={slideLeft}/>
@@ -757,3 +746,2 @@
                         disabled={!this._canSlideRight()}
-                        onTouchStart={slideRight}
                         onClick={slideRight}/>
@@ -760,0 +748,0 @@ </span>,

No alert changes

Worsened metrics

Total package byte prevSize

300801

decreased by-0.14%

Lines of code

2788

decreased by-0.61%

No dependency changes