website - separate js components so they're only called if needed

website/source/assets/javascripts/consul-connect/carousel.js

@@ -0,0 +1,41 @@
+// 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: () => {
+    for (var i = 0; i < dots.length; i++) {
+      dots[i].classList.remove('active')
+    }
+    dots[carousel.currentSlide].classList.add('active')
+  }
+})
+
+// on previous button click
+document
+  .querySelector('.g-carousel .prev')
+  .addEventListener('click', function() {
+    carousel.prev()
+  })
+
+// on next button click
+document
+  .querySelector('.g-carousel .next')
+  .addEventListener('click', function() {
+    carousel.next()
+  })
+
+// on dot click
+for (let i = 0; i < dots.length; i++) {
+  dots[i].addEventListener('click', function() {
+    carousel.goTo(i)
+  })
+}

website/source/assets/javascripts/consul-connect/home-hero.js

@@ -1,6 +1,3 @@
-//
-//
-// home video carousel
 var qs = document.querySelector.bind(document)
 var qsa = document.querySelectorAll.bind(document)
 
@@ -30,10 +27,11 @@ function initialiateVideoChange(index) {
     )
     loadingBar.style.transitionDuration = '0s'
 
-    // reset the current video and stop deactivation
+    // reset the current video 
     $$videos[currentIndex].currentTime = 0
     $$videoControls[currentIndex].classList.remove('playing')
 
+    // stop deactivation
     wrapper.classList.remove('deactivate')
 
     // check if the video is loaded
@@ -90,48 +88,4 @@ for (var i = 0; i < $$videoControls.length; i++) {
 // go to first video to start this thing
 if ($$videos.length > 0) {
   initialiateVideoChange(0)
-}
-
-//
-//
-// 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: () => {
-    for (var i = 0; i < dots.length; i++) {
-      dots[i].classList.remove('active')
-    }
-    dots[carousel.currentSlide].classList.add('active')
-  }
-})
-
-// on previous button click
-document
-  .querySelector('.g-carousel .prev')
-  .addEventListener('click', function() {
-    carousel.prev()
-  })
-
-// on next button click
-document
-  .querySelector('.g-carousel .next')
-  .addEventListener('click', function() {
-    carousel.next()
-  })
-
-// on dot click
-for (let i = 0; i < dots.length; i++) {
-  dots[i].addEventListener('click', function() {
-    carousel.goTo(i)
-  })
-}
+}

website/source/configuration.html.erb

@@ -250,3 +250,7 @@ description: |-
   </section>
 
 </div>
+
+<% content_for :scripts do %>
+  <script src='/assets/javascripts/consul-connect/carousel.js' defer></script>
+<% end %>

website/source/discovery.html.erb

@@ -250,3 +250,7 @@ description: |-
   </section>
 
 </div>
+
+<% content_for :scripts do %>
+  <script src='/assets/javascripts/consul-connect/carousel.js' defer></script>
+<% end %>

website/source/index.html.erb

@@ -267,3 +267,7 @@ description: |-
   </section>
 
 </div>
+
+<% content_for :scripts do %>
+  <script src='/assets/javascripts/consul-connect/home-hero.js' defer></script>
+<% end %>

website/source/layouts/layout.erb

@@ -34,7 +34,6 @@
     <!--[if lt IE 9]><%= javascript_include_tag "ie-compat", defer: true %><![endif]-->
     <%= javascript_include_tag "consul-connect/vendor/intersection-observer-polyfill", defer: true %>
     <%= javascript_include_tag "consul-connect/vendor/siema.min", defer: true %>
-    <%= javascript_include_tag "consul-connect/application", defer: true %>
     <%= javascript_include_tag "application", defer: true %>
 
     <!-- Analytics scrpts -->
@@ -120,6 +119,8 @@
       </div>
     </div>
 
+    <%= yield_content :scripts %>
+
     <script type="application/ld+json">
       {
         "@context": "http://schema.org",