react-image-gallery - npm Package Compare versions

Comparing version 0.8.14 to 0.8.15

build/image-gallery.js

@@ -167,3 +167,3 @@ 'use strict';
       if (_this._thumbnailsWrapper) {
-        if (_this._isThumbnailHorizontal()) {
+        if (_this._isThumbnailVertical()) {
           _this.setState({ thumbnailsWrapperHeight: _this._thumbnailsWrapper.offsetHeight });
@@ -349,2 +349,23 @@ } else {
 
+    _this._onThumbnailMouseOver = function (event, index) {
+      if (_this._thumbnailMouseOverTimer) {
+        window.clearTimeout(_this._thumbnailMouseOverTimer);
+        _this._thumbnailMouseOverTimer = null;
+      }
+      _this._thumbnailMouseOverTimer = window.setTimeout(function () {
+        _this.slideToIndex(index);
+        _this.pause();
+      }, 300);
+    };
+
+    _this._onThumbnailMouseLeave = function () {
+      if (_this._thumbnailMouseOverTimer) {
+        window.clearTimeout(_this._thumbnailMouseOverTimer);
+        _this._thumbnailMouseOverTimer = null;
+        if (_this.props.autoPlay) {
+          _this.play();
+        }
+      }
+    };
+
     _this.state = {
@@ -440,8 +461,6 @@ currentIndex: props.startIndex,
         this._intervalId = window.setInterval(function () {
-          if (!_this2.state.hovering) {
-            if (!_this2.props.infinite && !_this2._canSlideRight()) {
-              _this2.pause();
-            } else {
-              _this2.slideToIndex(_this2.state.currentIndex + 1);
-            }
+          if (!_this2.props.infinite && !_this2._canSlideRight()) {
+            _this2.pause();
+          } else {
+            _this2.slideToIndex(_this2.state.currentIndex + 1);
           }
@@ -551,4 +570,4 @@ }, Math.max(slideInterval, slideDuration));
   }, {
-    key: '_isThumbnailHorizontal',
-    value: function _isThumbnailHorizontal() {
+    key: '_isThumbnailVertical',
+    value: function _isThumbnailVertical() {
       var thumbnailPosition = this.props.thumbnailPosition;
@@ -671,3 +690,3 @@
         // total scroll required to see the last thumbnail
-        if (this._isThumbnailHorizontal()) {
+        if (this._isThumbnailVertical()) {
           if (this._thumbnails.scrollHeight <= thumbnailsWrapperHeight) {
@@ -793,3 +812,3 @@ return 0;
     value: function _getThumbnailBarHeight() {
-      if (this._isThumbnailHorizontal()) {
+      if (this._isThumbnailVertical()) {
         return {
@@ -919,3 +938,3 @@ height: this.state.gallerySlideWrapperHeight
 
-      if (this._isThumbnailHorizontal()) {
+      if (this._isThumbnailVertical()) {
         translate = 'translate(0, ' + thumbsTranslate + 'px)';
@@ -953,3 +972,5 @@ if (useTranslate3D) {
           preventDefaultTouchmoveEvent = _props4.preventDefaultTouchmoveEvent,
-          isRTL = _props4.isRTL;
+          slideOnThumbnailOver = _props4.slideOnThumbnailOver,
+          isRTL = _props4.isRTL,
+          showThumbnails = _props4.showThumbnails;
 
@@ -1009,3 +1030,3 @@
 
-        if (_this5.props.showThumbnails) {
+        if (showThumbnails) {
           thumbnails.push(_react2.default.createElement(
@@ -1019,2 +1040,6 @@ 'a',
               className: 'image-gallery-thumbnail' + (currentIndex === index ? ' active' : '') + thumbnailClass,
+              onMouseLeave: slideOnThumbnailOver ? _this5._onThumbnailMouseLeave : undefined,
+              onMouseOver: function onMouseOver(event) {
+                return slideOnThumbnailOver ? _this5._onThumbnailMouseOver(event, index) : undefined;
+              },
               onClick: function onClick(event) {
@@ -1121,2 +1146,3 @@ return _this5._onThumbnailClick(event, index);
 
+      var contentClassNames = ['image-gallery-content', isFullscreen ? 'fullscreen' : '', showThumbnails && this._isThumbnailVertical() ? 'thumbnails-vertical' : '', showThumbnails && !this._isThumbnailVertical() ? 'thumbnails-horizontal' : ''].join(' ');
       return _react2.default.createElement(
@@ -1134,9 +1160,9 @@ 'div',
           {
-            className: 'image-gallery-content' + (isFullscreen ? ' fullscreen' : '')
+            className: contentClassNames
           },
           (thumbnailPosition === 'bottom' || thumbnailPosition === 'right') && slideWrapper,
-          this.props.showThumbnails && _react2.default.createElement(
+          showThumbnails && _react2.default.createElement(
             'div',
             {
-              className: 'image-gallery-thumbnails-wrapper ' + thumbnailPosition + ' ' + (!this._isThumbnailHorizontal() && isRTL ? 'thumbnails-wrapper-rtl' : ''),
+              className: 'image-gallery-thumbnails-wrapper ' + thumbnailPosition + ' ' + (!this._isThumbnailVertical() && isRTL ? 'thumbnails-wrapper-rtl' : ''),
               style: this._getThumbnailBarHeight()
@@ -1198,2 +1224,3 @@ },
   slideInterval: _propTypes2.default.number,
+  slideOnThumbnailOver: _propTypes2.default.bool,
   swipeThreshold: _propTypes2.default.number,
@@ -1200,0 +1227,0 @@ swipingTransitionDuration: _propTypes2.default.number,

package.json

 {
   "name": "react-image-gallery",
-  "version": "0.8.14",
+  "version": "0.8.15",
   "description": "React carousel image gallery component with thumbnail and mobile support",
@@ -15,2 +15,3 @@ "main": "./build/image-gallery.js",
   },
+  "style": "styles/css/image-gallery.css",
   "keywords": [
@@ -17,0 +18,0 @@ "react",

README.md

@@ -133,2 +133,3 @@ React Carousel Image Gallery
 * `slideInterval`: Number, default `3000`
+* `slideOnThumbnailOver`: Boolean, default `false`
 * `flickThreshold`: Number (float), default `0.4`
@@ -135,0 +136,0 @@ * Determines the max velocity of a swipe before it's considered a flick (lower = more sensitive)

src/ImageGallery.jsx

@@ -64,2 +64,3 @@ import React from 'react';
     slideInterval: PropTypes.number,
+    slideOnThumbnailOver: PropTypes.bool,
     swipeThreshold: PropTypes.number,
@@ -225,8 +226,6 @@ swipingTransitionDuration: PropTypes.number,
       this._intervalId = window.setInterval(() => {
-        if (!this.state.hovering) {
-          if (!this.props.infinite && !this._canSlideRight()) {
-            this.pause();
-          } else {
-            this.slideToIndex(this.state.currentIndex + 1);
-          }
+        if (!this.props.infinite && !this._canSlideRight()) {
+          this.pause();
+        } else {
+          this.slideToIndex(this.state.currentIndex + 1);
         }
@@ -438,3 +437,3 @@ }, Math.max(slideInterval, slideDuration));
     if (this._thumbnailsWrapper) {
-      if (this._isThumbnailHorizontal()) {
+      if (this._isThumbnailVertical()) {
         this.setState({thumbnailsWrapperHeight: this._thumbnailsWrapper.offsetHeight});
@@ -450,3 +449,3 @@ } else {
 
-  _isThumbnailHorizontal() {
+  _isThumbnailVertical() {
     const { thumbnailPosition } = this.props;
@@ -626,3 +625,3 @@ return thumbnailPosition === 'left' || thumbnailPosition === 'right';
       // total scroll required to see the last thumbnail
-      if (this._isThumbnailHorizontal()) {
+      if (this._isThumbnailVertical()) {
         if (this._thumbnails.scrollHeight <= thumbnailsWrapperHeight) {
@@ -737,3 +736,3 @@ return 0;
   _getThumbnailBarHeight() {
-    if (this._isThumbnailHorizontal()) {
+    if (this._isThumbnailVertical()) {
       return {
@@ -844,3 +843,3 @@ height: this.state.gallerySlideWrapperHeight
 
-    if (this._isThumbnailHorizontal()) {
+    if (this._isThumbnailVertical()) {
       translate = `translate(0, ${thumbsTranslate}px)`;
@@ -956,2 +955,23 @@ if (useTranslate3D) {
 
+  _onThumbnailMouseOver = (event, index) => {
+    if (this._thumbnailMouseOverTimer) {
+      window.clearTimeout(this._thumbnailMouseOverTimer);
+      this._thumbnailMouseOverTimer = null;
+    }
+    this._thumbnailMouseOverTimer = window.setTimeout(() => {
+      this.slideToIndex(index);
+      this.pause();
+    }, 300);
+  };
+
+   _onThumbnailMouseLeave = () => {
+    if (this._thumbnailMouseOverTimer) {
+      window.clearTimeout(this._thumbnailMouseOverTimer);
+      this._thumbnailMouseOverTimer = null;
+      if (this.props.autoPlay) {
+        this.play();
+      }
+    }
+  };
+
   render() {
@@ -969,3 +989,5 @@ const {
       preventDefaultTouchmoveEvent,
+      slideOnThumbnailOver,
       isRTL,
+      showThumbnails,
     } = this.props;
@@ -1029,3 +1051,3 @@
 
-      if (this.props.showThumbnails) {
+      if (showThumbnails) {
         thumbnails.push(
@@ -1042,2 +1064,4 @@ <a
             }
+            onMouseLeave={slideOnThumbnailOver ? this._onThumbnailMouseLeave : undefined}
+            onMouseOver={event => slideOnThumbnailOver ? this._onThumbnailMouseOver(event, index) : undefined}
             onClick={event => this._onThumbnailClick(event, index)}
@@ -1158,2 +1182,8 @@ >
 
+    const contentClassNames = [
+      'image-gallery-content',
+      isFullscreen ? 'fullscreen' : '',
+      showThumbnails && this._isThumbnailVertical() ? 'thumbnails-vertical' : '',
+      showThumbnails && !this._isThumbnailVertical() ? 'thumbnails-horizontal' : '',
+    ].join(' ');
     return (
@@ -1167,3 +1197,3 @@ <div
         <div
-          className={`image-gallery-content${isFullscreen ? ' fullscreen' : ''}`}
+          className={contentClassNames}
         >
@@ -1176,5 +1206,5 @@
           {
-            this.props.showThumbnails &&
+            showThumbnails &&
               <div
-                className={`image-gallery-thumbnails-wrapper ${thumbnailPosition} ${!this._isThumbnailHorizontal() && isRTL ? 'thumbnails-wrapper-rtl' : ''}`}
+                className={`image-gallery-thumbnails-wrapper ${thumbnailPosition} ${!this._isThumbnailVertical() && isRTL ? 'thumbnails-wrapper-rtl' : ''}`}
                 style={this._getThumbnailBarHeight()}
@@ -1181,0 +1211,0 @@ >

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

267

increased by0.38%

Worsened metrics

Total package byte prevSize

132418

decreased by-0.09%

Number of package files

14

decreased by-6.67%

Lines of code

2901

decreased by-1.93%

No dependency changes