Merge pull request #38488 from aireilly/fix-footer-overlap

fix footer overlap of sidebar and toc

Author: vikram-redhat

_templates/_page_openshift.html.erb

@@ -339,48 +339,54 @@
 
   <!-- update active toc class when mouse scrolls -->
   <script type="text/javascript">
-    window.addEventListener("wheel", () => {
-
-      const ioConfiguration = {
-        "rootMargin": "-120px 0px -400px 0px",
-        "threshold": 0
-      };
+    window.addEventListener('DOMContentLoaded', () => {
+      window.addEventListener("wheel", () => {
+        
+        const ioConfiguration = {
+          "rootMargin": "-120px 0px -400px 0px",
+          "threshold": 0
+        };
 
-      const observer = new IntersectionObserver(setCurrent, ioConfiguration, entries => {
-        entries.forEach(entry => {
-          var id = entry.target.getAttribute('id');
-          //fight with js
-          document.querySelector(`#toc li a[href="#${id}"]`).classList.remove('toc-active');
+        const observer = new IntersectionObserver(setCurrent, ioConfiguration, entries => {
+          entries.forEach(entry => {
+            var id = entry.target.getAttribute('id');
+            //fight with js
+            document.querySelector(`#toc li a[href="#${id}"]`).classList.remove('toc-active');
+          });
         });
-      });
-
-      //track all h1-4 headings that have an id
-      document.querySelectorAll('.main h2[id], .main h3[id]').forEach((h) => {
-        observer.observe(h);
-      });
-
-      //runs when the IntersectionObserver fires
-      function setCurrent(e) {
-        var allTocLinks = document.querySelectorAll("#toc li a");
-        e.map(i => {
-          if (i.isIntersecting && i.intersectionRatio >= 1) {
-            allTocLinks.forEach(link => link.classList.remove("toc-active"));
-            document.querySelector(`#toc li a[href="#${i.target.id}"]`).classList.add('toc-active');
-          }
-        });
-      };
 
-      //make clicked toc item active and stop IntersectionObserver
-      $("#toc a").click(function() {
-        //stop tracking all h1-4 headings that have an id
+        //track all h1-4 headings that have an id
         document.querySelectorAll('.main h2[id], .main h3[id]').forEach((h) => {
-          observer.unobserve(h);
+          observer.observe(h);
         });
-        var tocItems = $("#toc a");
-        for (let i = 0; i < tocItems.length; i++) {
-          tocItems[i].classList.remove("toc-active");
-        }
-        this.classList.add("toc-active");
+
+        //runs when the IntersectionObserver fires
+        function setCurrent(e) {
+          var allTocLinks = document.querySelectorAll("#toc li a");
+          if (allTocLinks !== undefined) {
+            e.map(i => {
+              if (i.isIntersecting && i.intersectionRatio >= 1) {
+                allTocLinks.forEach(link => link.classList.remove("toc-active"));
+                document.querySelector(`#toc li a[href="#${i.target.id}"]`).classList.add('toc-active')
+              }
+            })
+          } 
+        };
+
+        //make clicked toc item active and stop IntersectionObserver
+        $("#toc a").click(function() {
+          //stop tracking all h1-4 headings that have an id
+          document.querySelectorAll('.main h2[id], .main h3[id]').forEach((h) => {
+            observer.unobserve(h);
+          });
+          var tocItems = $("#toc a");
+          if (tocItems !== undefined) {
+            for (let i = 0; i < tocItems.length; i++) {
+              tocItems[i].classList.remove("toc-active");
+            };
+            this.classList.add("toc-active");
+          }
+        })
       })
     })
   </script>
@@ -407,25 +413,60 @@
       })
   </script>
 
+  <!--adjust sidebar and toc when footer is displayed -->
+  <script type="text/javascript">
+    sidebar = document.querySelector('.sidebar')
+    toc = document.querySelector('#toc')
+    main = document.querySelector('.main')
+    okd_footer = document.querySelector('.footer-origin-docs')
+    document.addEventListener('scroll', () => {
+      //scroll to bottom
+      if (window.innerWidth >= 1425) {
+        if(sidebar !== null && toc !== null) {
+          if(document.documentElement.scrollHeight === window.pageYOffset + window.innerHeight) {
+              sidebar.style.marginBottom = "38px";
+              toc.style.bottom = "35px";
+              main.style.marginBottom = "35px";
+              //okd footer
+              if(okd_footer !== null) {
+                sidebar.style.marginBottom = "176px";
+                toc.style.bottom = "175px";
+                main.style.marginBottom = "135px";
+              };
+            };
+          if(document.documentElement.scrollHeight != window.pageYOffset + window.innerHeight) {
+            sidebar.style.marginBottom = "0px"; 
+            toc.style.bottom = "0px";
+          }
+        }
+      }
+    })
+  </script>
+
   <!-- adjust alerts on mobile -->
   <script type="text/javascript">
+    alert = document.querySelector('#support-alert')
     window.addEventListener("wheel", () => {
       if (window.innerWidth < 1425) {
         //adjust alert
         if(window.pageYOffset > 0) {
-          document.querySelector('#support-alert').style.position = "fixed";
-          document.querySelector('#support-alert').style.bottom = "0px";
-          document.querySelector('#support-alert').style.margin = "5px";
-          document.querySelector('#support-alert').style.zIndex = "9999999";     
+          if(alert !== null) {
+            document.querySelector('#support-alert').style.position = "fixed";
+            document.querySelector('#support-alert').style.bottom = "0px";
+            document.querySelector('#support-alert').style.margin = "5px";
+            document.querySelector('#support-alert').style.zIndex = "9999999"; 
+          }    
         }
       }
    });
     window.addEventListener('resize', () => {
       if (window.innerWidth >= 1425) {
-        document.querySelector('#support-alert').style.removeProperty('position');
-        document.querySelector('#support-alert').style.removeProperty('bottom');
-        document.querySelector('#support-alert').style.removeProperty('margin');
-        document.querySelector('#support-alert').style.removeProperty('zIndex');
+        if(alert !== null) {
+          document.querySelector('#support-alert').style.removeProperty('position');
+          document.querySelector('#support-alert').style.removeProperty('bottom');
+          document.querySelector('#support-alert').style.removeProperty('margin');
+          document.querySelector('#support-alert').style.removeProperty('zIndex');          
+        }
       }
     })
   </script>