From 516ba47609610bb9510bff1df6dd9133d8eed8be Mon Sep 17 00:00:00 2001
From: RJ Spiker <spiker.rj@gmail.com>
Date: Thu, 6 Dec 2018 12:17:35 -0700
Subject: [PATCH] website: fix carousel bugs

---
 .../source/assets/javascripts/application.js  |  5 ++
 .../javascripts/consul-connect/carousel.js    | 87 +++++++++++--------
 website/source/configuration.html.erb         |  9 +-
 website/source/discovery.html.erb             |  9 +-
 4 files changed, 58 insertions(+), 52 deletions(-)

diff --git a/website/source/assets/javascripts/application.js b/website/source/assets/javascripts/application.js
index 98ee102687..98baefa2de 100644
--- a/website/source/assets/javascripts/application.js
+++ b/website/source/assets/javascripts/application.js
@@ -4,6 +4,11 @@
 //= require hashicorp/mega-nav
 //= require hashicorp/sidebar
 //= require hashicorp/analytics
+
+//= require consul-connect/vendor/object-fit-images.min.js
+//= require consul-connect/vendor/siema.min.js
+//= require consul-connect/carousel
+
 //= require analytics
 //= require gsap-custom
 //= require animations
diff --git a/website/source/assets/javascripts/consul-connect/carousel.js b/website/source/assets/javascripts/consul-connect/carousel.js
index 805e419fab..66e0202864 100644
--- a/website/source/assets/javascripts/consul-connect/carousel.js
+++ b/website/source/assets/javascripts/consul-connect/carousel.js
@@ -1,44 +1,55 @@
-objectFitImages()
+document.addEventListener('turbolinks:load', function () {
+  var qs = document.querySelector.bind(document)
+  var qsa = document.querySelectorAll.bind(document)
+  var carousel = qs('.siema')
 
-var qs = document.querySelector.bind(document)
-var qsa = document.querySelectorAll.bind(document)
+  if (carousel) {
+    objectFitImages()
 
-// siema carousels
-var dots = qsa('.g-carousel .pagination li')
-var carousel = new Siema({
-  selector: '.siema',
-  duration: 200,
-  easing: 'ease-out',
-  perPage: 1,
-  startIndex: 0,
-  draggable: true,
-  multipleDrag: true,
-  threshold: 20,
-  loop: true,
-  rtl: false,
-  onChange: function() {
+    // siema carousels
+    var dots = qsa('.g-carousel .pagination li')
+    var siema = new Siema({
+      selector: carousel,
+      duration: 200,
+      easing: 'ease-out',
+      perPage: 1,
+      startIndex: 0,
+      draggable: true,
+      multipleDrag: true,
+      threshold: 20,
+      loop: true,
+      rtl: false,
+      onChange: function() {
+        for (var i = 0; i < dots.length; i++) {
+          dots[i].classList.remove('active')
+        }
+        dots[siema.currentSlide].classList.add('active')
+      }
+    })
+
+    // on previous button click
+    qs('.g-carousel .prev')
+      .addEventListener('click', function() {
+        siema.prev()
+      })
+  
+    // on next button click
+    qs('.g-carousel .next')
+      .addEventListener('click', function() {
+        siema.next()
+      })
+  
+    // on dot click
     for (var i = 0; i < dots.length; i++) {
-      dots[i].classList.remove('active')
+      dots[i].addEventListener('click', function() {
+        siema.goTo(this.dataset.index)
+      })
     }
-    dots[carousel.currentSlide].classList.add('active')
-  }
+
+    document.addEventListener('turbolinks:before-cache', function() {
+      siema.goTo(0) // reset pagination
+      siema.destroy(true)
+    });
+  }  
 })
 
-// on previous button click
-qs('.g-carousel .prev')
-  .addEventListener('click', function() {
-    carousel.prev()
-  })
-
-// on next button click
-qs('.g-carousel .next')
-  .addEventListener('click', function() {
-    carousel.next()
-  })
-
-// on dot click
-for (var i = 0; i < dots.length; i++) {
-  dots[i].addEventListener('click', function() {
-    carousel.goTo(i)
-  })
-}
diff --git a/website/source/configuration.html.erb b/website/source/configuration.html.erb
index 60175ad9f2..9e8ae01401 100644
--- a/website/source/configuration.html.erb
+++ b/website/source/configuration.html.erb
@@ -242,8 +242,8 @@ description: |-
           </a>
         </div>
         <ul class='pagination'>
-          <li class='active'></li>
-          <li></li>
+          <li data-index='0' class='active'></li>
+          <li data-index='1'></li>
         </ul>
         <span class='prev'>
           <svg width="18px" height="14px" viewBox="0 0 18 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M20.9227917,11.6173214 C20.8717917,11.4953214 20.7987917,11.3843214 20.7067917,11.2923214 L14.7067917,5.29232143 C14.3167917,4.90232143 13.6837917,4.90232143 13.2927917,5.29232143 C12.9017917,5.68332143 12.9017917,6.31632143 13.2927917,6.70632143 L17.5857917,10.9993214 L3.99979167,10.9993214 C3.44779167,10.9993214 2.99979167,11.4473214 2.99979167,11.9993214 C2.99979167,12.5523214 3.44779167,12.9993214 3.99979167,12.9993214 L17.5857917,12.9993214 L13.2927917,17.2923214 C12.9017917,17.6833214 12.9017917,18.3163214 13.2927917,18.7063214 C13.4877917,18.9023214 13.7437917,18.9993214 13.9997917,18.9993214 C14.2557917,18.9993214 14.5117917,18.9023214 14.7067917,18.7063214 L20.7067917,12.7073214 C20.7987917,12.6153214 20.8717917,12.5043214 20.9227917,12.3823214 C21.0237917,12.1373214 21.0237917,11.8623214 20.9227917,11.6173214" id="path-1"></path></defs><g id="Consul" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Consol.io-Service-Discovery-Op1" transform="translate(-1275.000000, -5150.000000)"><g id="Icons/Feather/arrow/arrow-right" transform="translate(1272.000000, 5145.000000)"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="Mask" fill="#000000" fill-rule="evenodd" xlink:href="#path-1"></use><g id="Mixin/Fill/Black" mask="url(#mask-2)" fill="#000000" fill-rule="evenodd"><rect id="Rectangle" x="0" y="0" width="24" height="24"></rect></g></g></g></g></svg>
@@ -269,8 +269,3 @@ description: |-
   </section>
 
 </div>
-
-<% content_for :scripts do %>
-  <script src='/assets/javascripts/consul-connect/vendor/object-fit-images.min.js' defer></script>
-  <script src='/assets/javascripts/consul-connect/carousel.js' defer></script>
-<% end %>
diff --git a/website/source/discovery.html.erb b/website/source/discovery.html.erb
index 920f98a192..a4891d8bee 100644
--- a/website/source/discovery.html.erb
+++ b/website/source/discovery.html.erb
@@ -263,8 +263,8 @@ $ curl http://localhost:8500/v1/catalog/nodes?<code class='keyword'>dc=dc2</code
           </a>
         </div>
         <ul class='pagination'>
-          <li class='active'></li>
-          <li></li>
+          <li data-index='0' class='active'></li>
+          <li data-index='1'></li>
         </ul>
         <span class='prev'>
           <svg width="18px" height="14px" viewBox="0 0 18 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M20.9227917,11.6173214 C20.8717917,11.4953214 20.7987917,11.3843214 20.7067917,11.2923214 L14.7067917,5.29232143 C14.3167917,4.90232143 13.6837917,4.90232143 13.2927917,5.29232143 C12.9017917,5.68332143 12.9017917,6.31632143 13.2927917,6.70632143 L17.5857917,10.9993214 L3.99979167,10.9993214 C3.44779167,10.9993214 2.99979167,11.4473214 2.99979167,11.9993214 C2.99979167,12.5523214 3.44779167,12.9993214 3.99979167,12.9993214 L17.5857917,12.9993214 L13.2927917,17.2923214 C12.9017917,17.6833214 12.9017917,18.3163214 13.2927917,18.7063214 C13.4877917,18.9023214 13.7437917,18.9993214 13.9997917,18.9993214 C14.2557917,18.9993214 14.5117917,18.9023214 14.7067917,18.7063214 L20.7067917,12.7073214 C20.7987917,12.6153214 20.8717917,12.5043214 20.9227917,12.3823214 C21.0237917,12.1373214 21.0237917,11.8623214 20.9227917,11.6173214" id="path-1"></path></defs><g id="Consul" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="Consol.io-Service-Discovery-Op1" transform="translate(-1275.000000, -5150.000000)"><g id="Icons/Feather/arrow/arrow-right" transform="translate(1272.000000, 5145.000000)"><mask id="mask-2" fill="white"><use xlink:href="#path-1"></use></mask><use id="Mask" fill="#000000" fill-rule="evenodd" xlink:href="#path-1"></use><g id="Mixin/Fill/Black" mask="url(#mask-2)" fill="#000000" fill-rule="evenodd"><rect id="Rectangle" x="0" y="0" width="24" height="24"></rect></g></g></g></g></svg>
@@ -290,8 +290,3 @@ $ curl http://localhost:8500/v1/catalog/nodes?<code class='keyword'>dc=dc2</code
   </section>
 
 </div>
-
-<% content_for :scripts do %>
-  <script src='/assets/javascripts/consul-connect/vendor/object-fit-images.min.js' defer></script>
-  <script src='/assets/javascripts/consul-connect/carousel.js' defer></script>
-<% end %>