fix: only add page navigation panel to compatible templates

Only add right-hand page navigation panel to #content elements that have
the ietf-auto-nav class and test that the base template's DOM is compatible
with the panel.

Author: jennifer-richards

ietf/static/js/ietf.js

@@ -104,31 +104,37 @@ $(document)
         });
     });
 
-// Automatically add a navigation pane to long pages
-$(document)
-    .ready(function () {
-        var headings = $("#content")
+// Automatically add a navigation pane to long pages if #content element has the ietf-auto-nav class.
+// The parent of #content must have the row class or the navigation pane will render incorrectly.
+$(function () {
+    const contentElement = $('#content.ietf-auto-nav');
+    if (contentElement.length > 0) {
+        const headings = contentElement
             .find("h1:visible, h2:visible, h3:visible, h4:visible, h5:visible, h6:visible")
             .not(".navskip");
 
-        var contents = $(headings)
-            .html()
-            .split("<")
-            .shift()
-            .trim();
+        const contents = (headings.length > 0) &&
+          ($(headings)
+              .html()
+              .split("<")
+              .shift()
+              .trim());
 
-        if (contents
-            .length > 0 && $(headings)
-            .last()
-            .offset()
-            .top > $(window)
-            .height()) {
+        if (
+            contents &&
+            (contents.length > 0) &&
+            ($(headings)
+                .last()
+                .offset()
+                .top > $(window)
+                .height())
+        ) {
             // console.log("Enabling nav.");
-            var n = 0;
-            var last_level;
-            var nav;
+            let n = 0;
+            let last_level;
+            let nav;
 
-            $("#content")
+            contentElement
                 .attr("data-bs-offset", 0)
                 .attr("tabindex", 0)
                 .after($(`
@@ -141,7 +147,7 @@ $(document)
                 .not(".navskip")
                 .each(function () {
                     // Some headings have complex HTML in them - only use first part in that case.
-                    var text = $(this)
+                    const text = $(this)
                         .html()
                         .split("<")
                         .shift()
@@ -151,7 +157,7 @@ $(document)
                         // Nothing to do for empty headings.
                         return;
                     }
-                    var id = $(this)
+                    let id = $(this)
                         .attr("id");
 
                     if (id === undefined) {
@@ -168,8 +174,8 @@ $(document)
                             .last();
                     }
 
-                    var level = parseInt(this.nodeName.substring(1)) - 1;
-                    if (last_level == undefined) {
+                    const level = parseInt(this.nodeName.substring(1)) - 1;
+                    if (!last_level) {
                         last_level = level;
                     }
 
@@ -186,7 +192,7 @@ $(document)
 
             $(window)
                 .on("scroll", function () {
-                    var item = $('#righthand-nav')
+                    const item = $('#righthand-nav')
                         .find(".active")
                         .last();
                     if (item.length) {
@@ -200,7 +206,8 @@ $(document)
                 .scrollspy("refresh");
 
         }
-    });
+    }
+});
 
 // Replace track/untrack functionality with js.
 $(document)

ietf/templates/base.html

@@ -83,7 +83,7 @@
                         </ul>
                     </div>
                 {% endif %}
-                <div class="col overflow-hidden mx-3" id="content">
+                <div class="col overflow-hidden mx-3 ietf-auto-nav" id="content">
                     <noscript>
                         <div class="alert alert-danger alert-ignore my-3">
                             <b>Javascript disabled?</b> Like other modern websites, the IETF Datatracker relies on Javascript.

ietf/utils/tests.py

@@ -8,6 +8,7 @@
 import sys
 import types
 
+from pyquery import PyQuery
 from typing import Dict, List       # pyflakes:ignore
 
 from email.mime.image import MIMEImage
@@ -27,7 +28,7 @@
 from django.template import Context
 from django.template import Template    # pyflakes:ignore
 from django.template.defaulttags import URLNode
-from django.template.loader import get_template
+from django.template.loader import get_template, render_to_string
 from django.templatetags.static import StaticNode
 from django.urls import reverse as urlreverse
 
@@ -291,6 +292,32 @@ def test_500_page(self):
         r = self.client.get(url)        
         self.assertTemplateUsed(r, '500.html')
 
+
+class BaseTemplateTests(TestCase):
+    base_template = 'base.html'
+
+    def test_base_template_includes_ietf_js(self):
+        content = render_to_string(self.base_template, {})
+        pq = PyQuery(content)
+        self.assertTrue(
+            pq('head > script[src$="ietf/js/ietf.js"]'),
+            'base template should include ietf.js',
+        )
+
+    def test_base_template_righthand_nav(self):
+        """The base template provides an automatic righthand navigation panel
+
+        This is provided by ietf.js and requires the ietf-auto-nav class and a parent with the row class
+        or the nav widget will not render properly.
+        """
+        content = render_to_string(self.base_template, {})
+        pq = PyQuery(content)
+        self.assertTrue(
+            pq('.row > #content.ietf-auto-nav'),
+            'base template should have a #content element with .ietf-auto-nav class and .row parent',
+        )
+
+
 @skipIf(skip_version_trac, skip_message_trac)
 @skipIf(skip_wiki_glue_testing, skip_message_svn)
 class TestWikiGlueManagementCommand(TestCase):