website: fix carousel bugs

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

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)
+  if (carousel) {
-var qsa = document.querySelectorAll.bind(document)
+    objectFitImages()
 
-// siema carousels
+    // siema carousels
-var dots = qsa('.g-carousel .pagination li')
+    var dots = qsa('.g-carousel .pagination li')
-var carousel = new Siema({
+    var siema = new Siema({
-  selector: '.siema',
+      selector: carousel,
-  duration: 200,
+      duration: 200,
-  easing: 'ease-out',
+      easing: 'ease-out',
-  perPage: 1,
+      perPage: 1,
-  startIndex: 0,
+      startIndex: 0,
-  draggable: true,
+      draggable: true,
-  multipleDrag: true,
+      multipleDrag: true,
-  threshold: 20,
+      threshold: 20,
-  loop: true,
+      loop: true,
-  rtl: false,
+      rtl: false,
-  onChange: function() {
+      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)
-  })
-}

website/source/configuration.html.erb

@@ -242,8 +242,8 @@ description: |-
           </a>
         </div>
         <ul class='pagination'>
-          <li class='active'></li>
+          <li data-index='0' class='active'></li>
-          <li></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 %>

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 data-index='0' class='active'></li>
-          <li></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 %>