Merge pull request #4 from ah-simonkrix/lazyload-preload

Moved restoration of clickable flag from animation timer into a separate timer

Author: Martin Jujou

CHANGELOG.md

@@ -1,17 +1,22 @@
 # Change Log
 
 ## [Unreleased](https://github.com/akiran/react-slick/tree/HEAD)
+
 - Note
+
   - Project forked by Domain at this point to maintain this codebase.
 
-- Added 
+- Added
   - option to enable lazy loading for the closest slides images (for previous and next slide images) See example `LazyLoadClosestImages`
+- Fixed
+- Moved restoration of clickable flag from animation cooldown timer into another separate timer (AH-4429)
 
 ## 0.22.0
 
 **Release Changes**
 
 - Internal Changes
+
   - converted InnerSlider from createReactClass object to ES6 class
   - removed all the mixins, created classMethods and pure utility functions instead
   - changed autoplay from setTimeout to setInterval
@@ -41,12 +46,12 @@
   - fixed bugs due to uncleared callback timers
   - fixed update issues on just slider resize
 
-
 ## 0.21.0
 
 **Release Changes**
 
 - Fixed issues
+
   - dataset undefined error in case of swipeToSlide but finite slides
   - slideWidth issue by transform scale
   - variableWidth + finite alignment problems
@@ -55,6 +60,7 @@
   - fixed breaking of animation on setState
 
 - Mixins to Pure Functions
+
   - getWidth, getHeight
   - swipeDirection
   - initialize, update
@@ -80,7 +86,6 @@
 - implemented reInit event
 - implemented onSwipe event and documented edgeEvent
 
-
 ## 0.19.0
 
 **Release Changes**
@@ -97,7 +102,6 @@ Following are the changes to be mentioned:
 - responsive lazyloading bug fixed
 - increased verticalswiping resistance from 4 to 10
 
-
 ## 0.18.0
 
 **Major Changes:**
@@ -109,18 +113,17 @@ Following are the changes to be mentioned:
 - Modified logic for updating lazyLoadedList, earlier there were some whitespaces at ends, now they're gone
 - Fixed getTrackLeft issue for slideCount=1
 
-
 ## 0.17.1
 
 **Major Changes**
 
-* Enforced some settings in specific configurations like:
-  - `slidesToScroll = 1` *when fade is true*
-  - `slidesToScroll = 1` *when centerMode is true*
-  - `slidesToShow = 1` *when fade is true*
+- Enforced some settings in specific configurations like:
 
-* Changed the number of clones (preclones and postclones), that fixed couple of issues like blank spaces after last slide and/or before first slide which occurred in several cases.
+  - `slidesToScroll = 1` _when fade is true_
+  - `slidesToScroll = 1` _when centerMode is true_
+  - `slidesToShow = 1` _when fade is true_
 
+- Changed the number of clones (preclones and postclones), that fixed couple of issues like blank spaces after last slide and/or before first slide which occurred in several cases.
 
 **Minor Changes**
 

src/inner-slider.js

@@ -118,6 +118,9 @@ export class InnerSlider extends React.Component {
       this.callbackTimers.forEach(timer => clearTimeout(timer));
       this.callbackTimers = [];
     }
+    if (this.unblockClickableTimer) {
+      clearTimeout(this.unblockClickableTimer);
+    }
     if (window.addEventListener) {
       window.removeEventListener("resize", this.onWindowResized);
     } else {
@@ -264,9 +267,7 @@ export class InnerSlider extends React.Component {
       };
       if (this.props.centerMode) {
         let currentWidth = `${childrenWidths[this.state.currentSlide]}px`;
-        trackStyle.left = `calc(${
-          trackStyle.left
-        } + (100% - ${currentWidth}) / 2 ) `;
+        trackStyle.left = `calc(${trackStyle.left} + (100% - ${currentWidth}) / 2 ) `;
       }
       this.setState({
         trackStyle
@@ -276,15 +277,15 @@ export class InnerSlider extends React.Component {
     let childrenCount = React.Children.count(this.props.children);
     const spec = { ...this.props, ...this.state, slideCount: childrenCount };
     let slideCount = getPreClones(spec) + getPostClones(spec) + childrenCount;
-    let trackWidth = 100 / this.props.slidesToShow * slideCount;
+    let trackWidth = (100 / this.props.slidesToShow) * slideCount;
     let slideWidth = 100 / slideCount;
     let trackLeft =
-      -slideWidth *
-      (getPreClones(spec) + this.state.currentSlide) *
-      trackWidth /
+      (-slideWidth *
+        (getPreClones(spec) + this.state.currentSlide) *
+        trackWidth) /
       100;
     if (this.props.centerMode) {
-      trackLeft += (100 - slideWidth * trackWidth / 100) / 2;
+      trackLeft += (100 - (slideWidth * trackWidth) / 100) / 2;
     }
     let trackStyle = {
       width: trackWidth + "%",
@@ -474,6 +475,9 @@ export class InnerSlider extends React.Component {
     let triggerSlideHandler = state["triggerSlideHandler"];
     delete state["triggerSlideHandler"];
     this.setState(state);
+    this.unblockClickableTimer = setTimeout(() => {
+      this.clickable = true;
+    }, this.props.speed);
     if (triggerSlideHandler === undefined) return;
     this.slideHandler(triggerSlideHandler);
     if (this.props.verticalSwiping) {