add ToC as in kiwix pwa

www/css/app.css

@@ -210,6 +210,20 @@ iframe._invert, iframe._mwInvert {
     height: 50px;
 }
 
+.btn-group.btn-block {
+    padding-left: 5%;
+}
+
+.dropdown-menu.flex-container {
+    overflow-y:auto;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    padding-right: 10px;
+    padding-left: 10px;
+    position: absolute;
+    left: 10px;
+}
+
 .status {
     position: absolute;
     top: 50%;

www/index.html

@@ -788,8 +788,14 @@ <h3 data-i18n="configure-expert-settings-title">Expert settings</h3>
                         <button type="button" class="close" data-hide="alert">&times;</button>
                         <span id="alertMessage"></span>
                     </div>
-                </div>
-                <div id="navigationButtons" class="btn-group btn-block">
+                    </div>
+                    <div id="navigationButtons" class="btn-group btn-block">
+                    <div class="dropup">
+                        <a href="#" class="btn btn-lg dropdown-toggle col-xs-4" role="button" id="dropup" data-toggle="dropdown" aria-haspopup="true" aria-expanded="True" style="font-size: 14px; padding-top: 12px;">
+                            <i class="fas fa-list-alt fa-lg"></i>
+                        </a>
+                        <ul id="ToCList" class="dropdown-menu flex-container"></ul>
+                    </div>
                     <a href="#" data-i18n-tip="home" class="btn btn-lg" id="btnHomeBottom" title="Home"><i class="fas fa-home"></i></a>
                     <a href="#" class="btn btn-lg" data-i18n-tip="home-btn-back" id="btnBack" title="Back"><i class="fas fa-arrow-left"></i></a>
                     <a href="#" class="btn btn-lg" data-i18n-tip="home-btn-forward" id="btnForward" title="Forward"><i class="fas fa-arrow-right"></i></a>

www/js/app.js

@@ -3061,6 +3061,67 @@ function pushBrowserHistoryState (title, titleSearch) {
     window.history.pushState(stateObj, stateLabel, urlParameters);
 }
 
+// Setup table of contents and display the list when the dropup button is clicked
+var dropup = document.getElementById('dropup');
+dropup.setAttribute('tabindex', '0');
+var ToCList = document.getElementById('ToCList');
+dropup.addEventListener('click', function () {
+    if (ToCList.style.display !== 'none') {
+        ToCList.style.display = 'none';
+    } else {
+        setupTableOfContents();
+        ToCList.style.display = 'block';
+        dropup.style.fontSize = '14px';
+    }
+});
+
+dropup.addEventListener('blur', function () {
+    setTimeout(() => {
+        if (ToCList.style.display === 'block') ToCList.style.display = 'none';
+    }, 200);
+});
+
+// Inject table of contents list into dropup element and scroll selection into view
+function setupTableOfContents () {
+    var iframe = document.getElementById('articleContent');
+    var innerDoc = iframe.contentDocument;
+    var tableOfContents = new uiUtil.TOC(innerDoc);
+    var headings = tableOfContents.getHeadingObjects();
+
+    var dropupHtml = '';
+    params.relativeFontSize = 100;
+    headings.forEach(function (heading) {
+        if (/^h1$/i.test(heading.tagName)) {
+            dropupHtml += '<li style="font-size:' + params.relativeFontSize + '%;"><a style="color: black;" href="#" data-heading-id="' + heading.id + '">' + heading.textContent + '</a></li>';
+        } else if (/^h2$/i.test(heading.tagName)) {
+            dropupHtml += '<li style="font-size:' + ~~(params.relativeFontSize * 0.9) + '%;"><a style="color: black;" href="#" data-heading-id="' + heading.id + '">' + heading.textContent + '</a></li>';
+        } else if (/^h3$/i.test(heading.tagName)) {
+            dropupHtml += '<li style="font-size:' + ~~(params.relativeFontSize * 0.8) + '%;"><a style="color: black;" href="#" data-heading-id="' + heading.id + '">' + heading.textContent + '</a></li>';
+        } else if (/^h4$/i.test(heading.tagName)) {
+            dropupHtml += '<li style="font-size:' + ~~(params.relativeFontSize * 0.7) + '%;"><a style="color: black;" href="#" data-heading-id="' + heading.id + '">' + heading.textContent + '</a></li>';
+        }
+        // Skip smaller headings (if there are any) to avoid making list too long
+    });
+    var ToCList = document.getElementById('ToCList');
+    ToCList.style.maxHeight = ~~(window.innerHeight * 0.75) + 'px';
+    ToCList.style.marginLeft = '-5% !important';
+    ToCList.innerHTML = dropupHtml;
+    Array.prototype.slice.call(ToCList.getElementsByTagName('a')).forEach(function (listElement) {
+        listElement.addEventListener('click', function () {
+            var sectionEle = innerDoc.getElementById(this.dataset.headingId);
+            // Scroll to element
+            sectionEle.scrollIntoView();
+            // Scrolling up then down ensures that the toolbars show according to user settings
+            iframe.contentWindow.scrollBy(0, -5);
+            setTimeout(function () {
+                iframe.contentWindow.scrollBy(0, 5);
+                iframe.contentWindow.focus();
+            }, 150);
+            ToCList.style.display = 'none';
+        });
+    });
+}
+
 /**
  * Extracts the content of the given article pathname, or a downloadable file, from the ZIM
  *

www/js/lib/uiUtil.js

@@ -172,6 +172,32 @@ function slideAway (e) {
     }
 }
 
+/*
+  * Returns a list of headings from an article
+    * @param {String} the page for which table of cotents needs to be listed
+    * @returns {List} a list of all headings as objects
+*/
+function TableOfContents (articleDoc) {
+    this.doc = articleDoc;
+    this.headings = this.doc.querySelectorAll('h1, h2, h3, h4, h5, h6');
+
+    this.getHeadingObjects = function () {
+        var headings = [];
+        for (var i = 0; i < this.headings.length; i++) {
+            var element = this.headings[i];
+            var obj = {};
+            obj.id = element.id;
+            var objectId = element.innerHTML.match(/\bid\s*=\s*["']\s*([^"']+?)\s*["']/i);
+            obj.id = obj.id ? obj.id : objectId && objectId.length > 1 ? objectId[1] : '';
+            obj.index = i;
+            obj.textContent = element.textContent;
+            obj.tagName = element.tagName;
+            headings.push(obj);
+        }
+        return headings;
+    };
+}
+
 /**
  * Displays a Bootstrap alert or confirm dialog box depending on the options provided
  *
@@ -1065,6 +1091,7 @@ export default {
     determineCanvasElementsWorkaround: determineCanvasElementsWorkaround,
     replaceCSSLinkWithInlineCSS: replaceCSSLinkWithInlineCSS,
     deriveZimUrlFromRelativeUrl: deriveZimUrlFromRelativeUrl,
+    TOC: TableOfContents,
     removeUrlParameters: removeUrlParameters,
     displayActiveContentWarning: displayActiveContentWarning,
     displayFileDownloadAlert: displayFileDownloadAlert,