Remove remaining onTouchStart events #107

xiaolin · Oct 22, 2016 · 5b58388 · 5b58388
1 parent 5f71ea1
commit 5b58388
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 27 deletions.
diff --git a/src/ImageGallery.jsx b/src/ImageGallery.jsx
@@ -36,28 +36,13 @@ function throttle(func, wait) {
 
 }
 
-// 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 = [
   'fullscreenchange',
   'msfullscreenchange',
   'mozfullscreenchange',
   'webkitfullscreenchange'
 ];
 
-
 export default class ImageGallery extends React.Component {
 
   constructor(props) {
@@ -104,13 +89,8 @@ export default class ImageGallery extends React.Component {
   }
 
   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);
     this._handleScreenChange = this._handleScreenChange.bind(this);
     this._handleKeyDown = this._handleKeyDown.bind(this);
@@ -227,7 +207,6 @@ export default class ImageGallery extends React.Component {
 
   slideToIndex(index, event) {
     if (event) {
-      event.preventDefault();
       if (this._intervalId) {
         // user triggered event while ImageGallery is playing, reset interval
         this.pause(false);
@@ -686,7 +665,6 @@ export default class ImageGallery extends React.Component {
               thumbnailClass
             }
 
-            onTouchStart={event => this.slideToIndex.call(this, index, event)}
             onClick={event => this.slideToIndex.call(this, index, event)}>
               <img
                 src={item.thumbnail}
@@ -707,7 +685,6 @@ export default class ImageGallery extends React.Component {
               'image-gallery-bullet ' + (
                 currentIndex === index ? 'active' : '')}
 
-            onTouchStart={event => this.slideToIndex.call(this, index, event)}
             onClick={event => this.slideToIndex.call(this, index, event)}>
           </button>
         );
@@ -748,13 +725,11 @@ export default class ImageGallery extends React.Component {
                       <button
                         className='image-gallery-left-nav'
                         disabled={!this._canSlideLeft()}
-                        onTouchStart={slideLeft}
                         onClick={slideLeft}/>
 
                       <button
                         className='image-gallery-right-nav'
                         disabled={!this._canSlideRight()}
-                        onTouchStart={slideRight}
                         onClick={slideRight}/>
                     </span>,
 

diff --git a/styles/scss/image-gallery.scss b/styles/scss/image-gallery.scss
@@ -6,6 +6,7 @@ $ig-white: #fff !default;
 $ig-black: #000 !default;
 $ig-blue: #337ab7 !default;
 $ig-background-black: rgba(0, 0, 0, .4) !default;
+$ig-transparent: rgba(0, 0, 0, 0) !default;
 
 @mixin vendor-prefix($name, $value) {
   @each $vendor in ('-webkit-', '-moz-', '-ms-', '-o-', '') {
@@ -15,6 +16,7 @@ $ig-background-black: rgba(0, 0, 0, .4) !default;
 
 .image-gallery {
   @include vendor-prefix('user-select', none);
+  -webkit-tap-highlight-color: $ig-transparent;
 
   &.fullscreen-modal {
     background: $ig-black;