Replace bootstrap-toc with Tocbot

FestplattenSchnitzel · lukasjuhrich · commit 97b62f48fe55 · 2023-10-09T15:52:51.000+02:00
The bootstrap-toc project is rather unmainted, Tocbot is the alternative recommended by the authors. Also see afeld/bootstrap-toc#74
diff --git a/sipa/static/css/tocbot.css b/sipa/static/css/tocbot.css
diff --git a/sipa/static/css/usersuite_index.css b/sipa/static/css/usersuite_index.css
@@ -1,9 +1,10 @@
-#usersuite-sidebar-nav .nav>li>a {
-    font-size: 20px;
+.toc .node-name--H2 {
+    font-size: 1.5rem;
 }
-#usersuite-sidebar-nav .nav .nav>li>a {
-    font-size: 19px;
+.toc .node-name--H3 {
+    font-size: 1.25rem;
 }
+
 h2,h3 {
     padding-top: 70px;
     margin-top: -50px;
diff --git a/sipa/static/js/tocbot.min.js b/sipa/static/js/tocbot.min.js
diff --git a/sipa/static/js/usersuite_index.js b/sipa/static/js/usersuite_index.js
@@ -1,14 +1,13 @@
-document.addEventListener("DOMContentLoaded", () => {
-    const selector = '#usersuite-sidebar-nav';
-    const $toc = $(selector);
-    const $parent = $toc.parent();
-    const offset = 60;
-    const $body = $('body');
-    Toc.init($toc);
-    $body.scrollspy({target: selector, offset: offset});
-    $toc.affix({
-        offset: {top: () => $parent.offset().top - offset}
-    });
-    // Handle window resize
-    $(window).resize(() => $toc.affix('checkPosition'));
+tocbot.init({
+  // Where to render the table of contents.
+  tocSelector: '.js-toc',
+  // Where to grab the headings to build the table of contents.
+  contentSelector: '.js-toc-content',
+  // Which headings to grab inside of the contentSelector element.
+  headingSelector: 'h2, h3',
+  // For headings inside relative or absolute positioned containers within content.
+  hasInnerContainers: true,
+
+  positionFixedSelector: '#usersuite-sidebar-nav',
+  extraLinkClasses: 'text-decoration-none'
 });
diff --git a/sipa/templates/base.html b/sipa/templates/base.html
@@ -68,7 +68,7 @@
     </script>
 </head>
 
-<body>
+<body class="js-toc-content">
 <nav id="main-navbar" class="navbar navbar-default navbar-fixed-top navbar-expand-lg">
     <div class="container">
         <a class="navbar-brand" href="{{ url_for('generic.index') }}">
@@ -234,6 +234,7 @@ <h1>AG DSN</h1>
         <div id="sidebar" class="col-sm-3">
             {% block sidebar %}
                 <div>
+                    <!-- TODO Fix visibility -->
                     <div class="module hidden-xs">
                         <h2>
                             {{ _("Status") }}
diff --git a/sipa/templates/usersuite/index.html b/sipa/templates/usersuite/index.html
@@ -13,16 +13,16 @@
 {% endblock %}
 
 {% block sidebar %}
-    <nav id="usersuite-sidebar-nav" class="hidden-xs hidden-print"></nav>
+    <nav id="usersuite-sidebar-nav" class="js-toc toc d-none d-md-block"></nav>
 {% endblock %}
 
 {% block custom_css %}
-    <link rel="stylesheet" href="{{ url_for("static", filename="css/bootstrap-toc.min.css") }}"/>
+    <link rel="stylesheet" href="{{ url_for("static", filename="css/tocbot.css") }}"/>
     <link rel="stylesheet" href="{{ url_for("static", filename="css/usersuite_index.css") }}"/>
 {% endblock %}
 
 {% block custom_script %}
-    <script src="{{ url_for("static", filename="js/bootstrap-toc.min.js") }}"></script>
+    <script src="{{ url_for("static", filename="js/tocbot.min.js") }}"></script>
     <script src="{{ url_for("static", filename="js/usersuite_index.js") }}"></script>
     <script src="{{ url_for("static", filename="js/svg.jquery.js") }}"></script>
     <script src="{{ url_for("static", filename="js/pygal-tooltips.js") }}"></script>
