Fix carousel javascript error (#1779)

viamrobotics · Sep 8, 2023 · ee07bb2 · ee07bb2
1 parent 5619013
commit ee07bb2
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 7 deletions.
diff --git a/static/js/carousel.js → assets/js/carousel.js b/static/js/carousel.js → assets/js/carousel.js
@@ -32,8 +32,10 @@ document.addEventListener('DOMContentLoaded', function() {
           });
           const scrolllength = carousel.querySelector('ul li:nth-child(2)').offsetLeft - carousel.querySelector('ul li:nth-child(1)').offsetLeft;
           const nthchild = (Math.round((ele.scrollLeft/scrolllength)+1));
-          carousel.querySelector('ol li:nth-child('+nthchild+')').classList.add('selected');
-          carousel.querySelector('ul li:nth-child('+nthchild+')').classList.add('selected');
+          let ol_elem = carousel.querySelector('ol li:nth-child('+nthchild+')');
+          let ul_elem = carousel.querySelector('ul li:nth-child('+nthchild+')');
+          if (ol_elem) { ol_elem.classList.add('selected'); }
+          if (ul_elem) { ul_elem.classList.add('selected'); }
           if(carousel.parentElement.parentElement.querySelector('.dynamictitle')) {
               const title = carousel.querySelector('ul li:nth-child('+nthchild+') img').getAttribute('title');
               if(title) carousel.parentElement.parentElement.querySelector('.dynamictitle').innerHTML = title;
@@ -97,7 +99,7 @@ document.addEventListener('DOMContentLoaded', function() {
       }
 
   // Add CSS to hide arrows when all elements visible
-  var styles = "@media (min-width:" + (slides.length * 100 + 400) "px) {#board-carousel { padding: 0 !important; }#board-carousel div.prev, #board-carousel div.next {visibility: hidden;}}"
+  var styles = "@media (min-width:" + (slides.length * 100 + 400) + "px) {#board-carousel { padding: 0 !important; }#board-carousel div.prev, #board-carousel div.next {visibility: hidden;}}"
 
   var styleSheet = document.createElement("style")
   styleSheet.innerText = styles

diff --git a/static/js/tutorials.js → assets/js/tutorials.js b/static/js/tutorials.js → assets/js/tutorials.js
diff --git a/docs/_index.md b/docs/_index.md
@@ -216,5 +216,3 @@ sitemap:
     {{< card link="/tutorials/projects/integrating-viam-with-openai/" class="yellow">}}
   </div>
 </div>
-
-<script type="text/javascript" src="js/carousel-min.js"></script>
diff --git a/layouts/docs/tutorials.html b/layouts/docs/tutorials.html
@@ -80,7 +80,10 @@ <h4 class="alert-heading">Javascript</h4>
     <script src="https://cdn.jsdelivr.net/npm/typesense-instantsearch-adapter@2/dist/typesense-instantsearch-adapter.min.js"></script>
 
     <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
-    <script src="../js/tutorials.js"></script>
+
+    {{ $jsTutorials := resources.Get "js/tutorials.js" }}
+    {{ $jsTutorials := $jsTutorials | minify }}
+    <script type="text/javascript" src="{{ $jsTutorials.RelPermalink }}" crossorigin="anonymous"></script>
 
   </body>
 </html>
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
@@ -1,3 +1,10 @@
+
+{{ $jsCarousel := resources.Get "js/carousel.js" }}
+{{ $jsCarousel := $jsCarousel | minify }}
+{{ if eq .Page.Title "Viam Documentation" }}
+<script type="text/javascript" src="{{$jsCarousel.RelPermalink}}" crossorigin="anonymous"></script>
+{{ end }}
+
 <!-- START script for lazy loading -->
 <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
 {{ $jsLozad := resources.Get "js/lozad.js" }}

diff --git a/static/js/carousel-min.js b/static/js/carousel-min.js
-Original file line number
+Diff line change
@@ Expand Up / @@ -216,5 +216,3 @@ sitemap: @@
         {{< card link="/tutorials/projects/integrating-viam-with-openai/" class="yellow">}}
       </div>
     </div>
-    <script type="text/javascript" src="js/carousel-min.js"></script>