From 817d997b75d970cc22000f345f68092ed3f0525b Mon Sep 17 00:00:00 2001
From: Johann-S <johann.servoire@gmail.com>
Date: Sun, 27 Sep 2015 01:30:11 +0200
Subject: [PATCH] Use Page Visibility API in Carousel; fixes #17706

Avoids cycling carousels when the page isn't visible.
Closes #17710
Refs #15566
---
 js/src/carousel.js            |  9 ++++++++-
 js/tests/visual/carousel.html | 10 +++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/js/src/carousel.js b/js/src/carousel.js
index d8da854a22..8d47fbf9b4 100644
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -119,6 +119,13 @@ const Carousel = (($) => {
       }
     }
 
+    nextWhenVisible() {
+      // Don't call next when the page isn't visible
+      if (!document.hidden) {
+        this.next()
+      }
+    }
+
     prev() {
       if (!this._isSliding) {
         this._slide(Direction.PREVIOUS)
@@ -152,7 +159,7 @@ const Carousel = (($) => {
 
       if (this._config.interval && !this._isPaused) {
         this._interval = setInterval(
-          $.proxy(this.next, this), this._config.interval
+          $.proxy(document.visibilityState ? this.nextWhenVisible : this.next, this), this._config.interval
         )
       }
     }
diff --git a/js/tests/visual/carousel.html b/js/tests/visual/carousel.html
index 47dacaa6a0..e6bfeedab0 100644
--- a/js/tests/visual/carousel.html
+++ b/js/tests/visual/carousel.html
@@ -21,7 +21,7 @@
   <div class="page-header">
     <h1>Carousel <small>Bootstrap Visual Test</small></h1>
   </div>
-
+  <p>Also, the carousel shouldn't slide when its window/tab is hidden. Check the console log.</p>
   <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
     <ol class="carousel-indicators">
       <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
@@ -53,6 +53,14 @@
 <script src="../vendor/jquery.min.js"></script>
 <script src="../../dist/util.js"></script>
 <script src="../../dist/carousel.js"></script>
+<script>
+  $(function () {
+    // Test to show that the carousel doesn't slide when the current tab isn't visible
+    $('#carousel-example-generic').on('slid.bs.carousel', function (event) {
+      console.log('slid at ', event.timeStamp);
+    })
+  });
+</script>
 
 </body>
 </html>