move table of contents and anchor js to separate file

root/static/js/cpan.js

@@ -3,6 +3,10 @@
 const relatizeDate = require('./relatize_date.js');
 const storage = require('./storage.js');
 const Mousetrap = require('mousetrap');
+const {
+    formatTOC,
+    createAnchors
+} = require('./document-ui.mjs');
 
 // Store global data in this object
 var MetaCPAN = {};
@@ -151,16 +155,7 @@ $(document).ready(function() {
         element.insertBefore(start, end);
     }
 
-    function create_anchors(top) {
-        top.find('h1,h2,h3,h4,h5,h6,dt').each(function() {
-            if (this.id) {
-                $(document.createElement('a')).attr('href', '#' + this.id).addClass('anchor').append(
-                    $(document.createElement('span')).addClass('fa fa-bookmark black')
-                ).prependTo(this);
-            }
-        });
-    }
-    create_anchors($('.anchors'));
+    createAnchors(document.querySelectorAll('.anchors'));
 
     for (const favButton of document.querySelectorAll('.breadcrumbs .favorite')) {
         setFavTitle(favButton);
@@ -213,9 +208,9 @@ $(document).ready(function() {
         });
     }
 
-    let toc = document.querySelector(".content .toc")
+    const toc = document.querySelector(".content .toc")
     if (toc) {
-        format_toc(toc);
+        formatTOC(toc);
     }
 
     $('a[href*="/search?"]').on('click', function() {
@@ -340,9 +335,9 @@ $(document).ready(function() {
                 );
                 var toc = $("nav", rendered);
                 if (toc.length) {
-                    format_toc(toc[0]);
+                    formatTOC(toc[0]);
                 }
-                create_anchors(rendered);
+                createAnchors(rendered);
                 loading.hide();
                 error.hide();
                 rendered.show();

root/static/js/document-ui.mjs

@@ -0,0 +1,67 @@
+import storage from './storage.js';
+
+export const createAnchors = (topList) => {
+    const it = typeof (topList)[Symbol.iterator] === 'function' ? topList : [topList];
+    for (const top of it) {
+        for (const heading of top.querySelectorAll(':scope h1,h2,h3,h4,h5,h6,dt')) {
+            const id = heading.id;
+            if (!id) {
+                continue;
+            }
+
+            const link = document.createElement('a');
+            link.href = '#' + id;
+            link.classList.add('anchor');
+
+            const icon = document.createElement('span');
+            icon.classList.add('fa', 'fa-bookmark', 'black');
+            link.append(icon);
+
+            heading.prepend(link);
+        }
+    }
+}
+
+export const formatTOC = (toc) => {
+    if (storage.getItem('hideTOC') == 1) {
+        toc.classList.add("hide-toc");
+    }
+
+    const toc_header = toc.querySelector('.toc-header');
+    const toc_body = toc.querySelector('ul');
+
+    toc_header.insertAdjacentHTML('beforeend',
+        ' [ <button class="btn-link toggle-toc"><span class="toggle-show">show</span><span class="toggle-hide">hide</span></button> ]'
+    );
+    toc_header.querySelector('.toggle-toc').addEventListener('click', e => {
+        e.preventDefault();
+        const currentVisible = !toc.classList.contains('hide-toc');
+        storage.setItem('hideTOC', currentVisible ? 1 : 0);
+
+        const fullHeight = toc_body.scrollHeight;
+
+        if (currentVisible) {
+            const trans = toc_body.style.transition;
+            toc_body.style.transition = '';
+
+            requestAnimationFrame(() => {
+                toc_body.style.height = fullHeight + 'px';
+                toc_body.style.transition = trans;
+                toc.classList.toggle('hide-toc');
+
+                requestAnimationFrame(() => {
+                    toc_body.style.height = null;
+                });
+            });
+        } else {
+            const finish = e => {
+                toc_body.removeEventListener('transitionend', finish);
+                toc_body.style.height = null;
+            };
+
+            toc_body.addEventListener('transitionend', finish);
+            toc_body.style.height = fullHeight + 'px';
+            toc.classList.toggle('hide-toc');
+        }
+    });
+};