Fixed some bug with Carousel and transitionEnd.

thednp · Feb 14, 2017 · b0548c7 · b0548c7
1 parent 8828c11
commit b0548c7
Show file tree

Hide file tree

Showing 11 changed files with 87 additions and 69 deletions.
diff --git a/assets/css/theme.css b/assets/css/theme.css
@@ -188,7 +188,7 @@ p .btn-group {margin-bottom: 20px}
   -webkit-transform: translate3d( 0%, 0, 0);
   transform: translate3d(0%, 0, 0);
   opacity:1;
-  visibility: visible;  
+  /*visibility: visible;  */
 }
 
 /* Declare heights because of positioning of img element */

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "bootstrap.native",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "homepage": "http://thednp.github.io/bootstrap.native/",
   "authors": [
     "dnp_theme"

diff --git a/dist/bootstrap-native-v4.js b/dist/bootstrap-native-v4.js
@@ -1,4 +1,4 @@
-// Native Javascript for Bootstrap 4 v2.0.4 | © dnp_theme | MIT-License
+// Native Javascript for Bootstrap 4 v2.0.5 | © dnp_theme | MIT-License
 (function (root, factory) {
   if (typeof define === 'function' && define.amd) {
     // AMD support:
@@ -181,8 +181,8 @@
       element.removeEventListener(event, handler, false);
     },
     one = function (element, event, handler) { // one since 2.0.4
-      on(element, event, function handlerWrapper(){
-        handler();
+      on(element, event, function handlerWrapper(e){
+        handler(e);
         off(element, event, handlerWrapper);
       });
     },
@@ -577,21 +577,25 @@
         addClass(slides[next],carouselItem +'-'+ slideDirection);
         addClass(slides[activeItem],carouselItem +'-'+ slideDirection);
 
-        one(slides[next], transitionEndEvent, function(){
-          isSliding = self.isSliding = false;
+        one(slides[activeItem], transitionEndEvent, function(e) {
+          var timeout = e[target] !== slides[activeItem] ? e.elapsedTime*1000 : 0;
+          setTimeout(function(){
+            isSliding = self.isSliding = false;
 
-          addClass(slides[next],active);
-          removeClass(slides[activeItem],active);
+            addClass(slides[next],active);
+            removeClass(slides[activeItem],active);
 
-          removeClass(slides[next],carouselItem +'-'+ orientation);
-          removeClass(slides[next],carouselItem +'-'+ slideDirection);
-          removeClass(slides[activeItem],carouselItem +'-'+ slideDirection);
+            removeClass(slides[next],carouselItem +'-'+ orientation);
+            removeClass(slides[next],carouselItem +'-'+ slideDirection);
+            removeClass(slides[activeItem],carouselItem +'-'+ slideDirection);
 
-          if ( self[interval] && !hasClass(element,paused) ) {
-            self.cycle();
-          }
-          bootstrapCustomEvent.call(element, slidEvent, component, slides[next]); // here we go with the slid event
-        });
+            bootstrapCustomEvent.call(element, slidEvent, component, slides[next]);
+
+            if ( !document.hidden && self[interval] && !hasClass(element,paused) ) {
+              self.cycle();
+            }
+          },timeout);
+      });
 
       } else {
         addClass(slides[next],active);
@@ -602,7 +606,7 @@
           if ( self[interval] && !hasClass(element,paused) ) {
             self.cycle();
           }
-          bootstrapCustomEvent.call(element, slidEvent, component, slides[next]); // here we go with the slid event
+          bootstrapCustomEvent.call(element, slidEvent, component, slides[next]);
         }, 100 );
       }
     };

diff --git a/dist/bootstrap-native-v4.min.js b/dist/bootstrap-native-v4.min.js
diff --git a/dist/bootstrap-native.js b/dist/bootstrap-native.js
@@ -1,4 +1,4 @@
-// Native Javascript for Bootstrap 3 v2.0.4 | © dnp_theme | MIT-License
+// Native Javascript for Bootstrap 3 v2.0.5 | © dnp_theme | MIT-License
 (function (root, factory) {
   if (typeof define === 'function' && define.amd) {
     // AMD support:
@@ -193,8 +193,8 @@
       element.removeEventListener(event, handler, false);
     },
     one = function (element, event, handler) { // one since 2.0.4
-      on(element, event, function handlerWrapper(){
-        handler();
+      on(element, event, function handlerWrapper(e){
+        handler(e);
         off(element, event, handlerWrapper);
       });
     },
@@ -737,27 +737,32 @@
       setActivePage( next );
 
       if ( supportTransitions && hasClass(element,'slide') ) {
+
         addClass(slides[next],orientation);
-        slides[next][offsetWidth];  
+        slides[next][offsetWidth];
         addClass(slides[next],slideDirection);
         addClass(slides[activeItem],slideDirection);
 
-        one(slides[next], transitionEndEvent, function() { //we're gonna fake waiting for the animation to finish, cleaner and better
-          isSliding = self.isSliding = false;
+        one(slides[activeItem], transitionEndEvent, function(e) {
+          var timeout = e[target] !== slides[activeItem] ? e.elapsedTime*1000 : 0;
+          setTimeout(function(){
+            isSliding = self.isSliding = false;
 
-          addClass(slides[next],active);
-          removeClass(slides[activeItem],active);
+            addClass(slides[next],active);
+            removeClass(slides[activeItem],active);
 
-          removeClass(slides[next],orientation);
-          removeClass(slides[next],slideDirection);
-          removeClass(slides[activeItem],slideDirection);
+            removeClass(slides[next],orientation);
+            removeClass(slides[next],slideDirection);
+            removeClass(slides[activeItem],slideDirection);
 
-          if ( self[interval] && !hasClass(element,paused) ) {
-            self.cycle();
-          }
-          bootstrapCustomEvent.call(element, slidEvent, component, slides[next]); // here we go with the slid event
+            bootstrapCustomEvent.call(element, slidEvent, component, slides[next]);
+
+            if ( self[interval] && !hasClass(element,paused) ) {
+              self.cycle();
+            }
+          },timeout);
         });
-        
+
       } else {
         addClass(slides[next],active);
         slides[next][offsetWidth];

diff --git a/dist/bootstrap-native.min.js b/dist/bootstrap-native.min.js
diff --git a/lib/V3/carousel-native.js b/lib/V3/carousel-native.js
@@ -152,27 +152,32 @@ var Carousel = function( element, options ) {
     setActivePage( next );
 
     if ( supportTransitions && hasClass(element,'slide') ) {
+
       addClass(slides[next],orientation);
-      slides[next][offsetWidth];  
+      slides[next][offsetWidth];
       addClass(slides[next],slideDirection);
       addClass(slides[activeItem],slideDirection);
 
-      one(slides[next], transitionEndEvent, function() { //we're gonna fake waiting for the animation to finish, cleaner and better
-        isSliding = self.isSliding = false;
+      one(slides[activeItem], transitionEndEvent, function(e) {
+        var timeout = e[target] !== slides[activeItem] ? e.elapsedTime*1000 : 0;
+        setTimeout(function(){
+          isSliding = self.isSliding = false;
 
-        addClass(slides[next],active);
-        removeClass(slides[activeItem],active);
+          addClass(slides[next],active);
+          removeClass(slides[activeItem],active);
 
-        removeClass(slides[next],orientation);
-        removeClass(slides[next],slideDirection);
-        removeClass(slides[activeItem],slideDirection);
+          removeClass(slides[next],orientation);
+          removeClass(slides[next],slideDirection);
+          removeClass(slides[activeItem],slideDirection);
 
-        if ( self[interval] && !hasClass(element,paused) ) {
-          self.cycle();
-        }
-        bootstrapCustomEvent.call(element, slidEvent, component, slides[next]); // here we go with the slid event
+          bootstrapCustomEvent.call(element, slidEvent, component, slides[next]);
+
+          if ( self[interval] && !hasClass(element,paused) ) {
+            self.cycle();
+          }
+        },timeout);
       });
-      
+
     } else {
       addClass(slides[next],active);
       slides[next][offsetWidth];

diff --git a/lib/V3/utils.js b/lib/V3/utils.js
@@ -169,8 +169,8 @@ var globalObject = typeof global !== 'undefined' ? global : this||window,
     element.removeEventListener(event, handler, false);
   },
   one = function (element, event, handler) { // one since 2.0.4
-    on(element, event, function handlerWrapper(){
-      handler();
+    on(element, event, function handlerWrapper(e){
+      handler(e);
       off(element, event, handlerWrapper);
     });
   },

diff --git a/lib/V4/carousel-native.js b/lib/V4/carousel-native.js
@@ -158,21 +158,25 @@ var Carousel = function( element, options ) {
       addClass(slides[next],carouselItem +'-'+ slideDirection);
       addClass(slides[activeItem],carouselItem +'-'+ slideDirection);
 
-      one(slides[next], transitionEndEvent, function(){
-        isSliding = self.isSliding = false;
+      one(slides[activeItem], transitionEndEvent, function(e) {
+        var timeout = e[target] !== slides[activeItem] ? e.elapsedTime*1000 : 0;
+        setTimeout(function(){
+          isSliding = self.isSliding = false;
 
-        addClass(slides[next],active);
-        removeClass(slides[activeItem],active);
+          addClass(slides[next],active);
+          removeClass(slides[activeItem],active);
 
-        removeClass(slides[next],carouselItem +'-'+ orientation);
-        removeClass(slides[next],carouselItem +'-'+ slideDirection);
-        removeClass(slides[activeItem],carouselItem +'-'+ slideDirection);
+          removeClass(slides[next],carouselItem +'-'+ orientation);
+          removeClass(slides[next],carouselItem +'-'+ slideDirection);
+          removeClass(slides[activeItem],carouselItem +'-'+ slideDirection);
 
-        if ( self[interval] && !hasClass(element,paused) ) {
-          self.cycle();
-        }
-        bootstrapCustomEvent.call(element, slidEvent, component, slides[next]); // here we go with the slid event
-      });
+          bootstrapCustomEvent.call(element, slidEvent, component, slides[next]);
+
+          if ( !document.hidden && self[interval] && !hasClass(element,paused) ) {
+            self.cycle();
+          }
+        },timeout);
+    });
 
     } else {
       addClass(slides[next],active);
@@ -183,7 +187,7 @@ var Carousel = function( element, options ) {
         if ( self[interval] && !hasClass(element,paused) ) {
           self.cycle();
         }
-        bootstrapCustomEvent.call(element, slidEvent, component, slides[next]); // here we go with the slid event
+        bootstrapCustomEvent.call(element, slidEvent, component, slides[next]);
       }, 100 );
     }
   };

diff --git a/lib/V4/utils.js b/lib/V4/utils.js
@@ -158,8 +158,8 @@ var globalObject = typeof global !== 'undefined' ? global : this||window,
     element.removeEventListener(event, handler, false);
   },
   one = function (element, event, handler) { // one since 2.0.4
-    on(element, event, function handlerWrapper(){
-      handler();
+    on(element, event, function handlerWrapper(e){
+      handler(e);
       off(element, event, handlerWrapper);
     });
   },

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bootstrap.native",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "Native Javascript for Bootstrap, the sweetest Javascript library without jQuery.",
   "main": "dist/bootstrap-native.js",
   "scripts": {