add ToC as in kiwix pwa

www/index.html

@@ -789,7 +789,13 @@ <h3 data-i18n="configure-expert-settings-title">Expert settings</h3>
                         <span id="alertMessage"></span>
                     </div>
                 </div>
-                <div id="navigationButtons" class="btn-group btn-block">
+                <div id="navigationButtons" class="btn-group btn-block" style="padding-left: 5%;">
+                    <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" style="overflow-y:auto; padding-top: 10px; padding-bottom: 10px; padding-right: 10px; padding-left: 10px; position: absolute; left: 10px;"></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

@@ -2956,6 +2956,56 @@ function pushBrowserHistoryState (title, titleSearch) {
     }
     window.history.pushState(stateObj, stateLabel, urlParameters);
 }
+var dropup = document.getElementById('dropup');
+dropup.addEventListener('click', function () {
+    var ToCList = document.getElementById('ToCList');
+    ToCList.style.display = ToCList.style.display === 'block' ? 'none' : 'block';
+    dropup.style.fontSize = '14px';
+    setupTableOfContents();
+});
+
+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 = '-30px'
+    ToCList.innerHTML = dropupHtml;
+    Array.prototype.slice.call(ToCList.getElementsByTagName('a')).forEach(function (listElement) {
+        listElement.addEventListener('click', function () {
+            var sectionEle = innerDoc.getElementById(this.dataset.headingId);
+            console.log(this.dataset.geadingId)
+            var csec = uiUtil.closest(sectionEle, 'details, section');
+            csec = csec && /DETAILS|SECTION/.test(csec.parentElement.tagName) ? csec.parentElement : csec;
+            // 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();
+            }, 250);
+            ToCList.style.display = 'block';
+        });
+    });
+}
 
 /**
  * Extracts the content of the given article pathname, or a downloadable file, from the ZIM

www/js/lib/uiUtil.js

@@ -171,6 +171,38 @@ function slideAway (e) {
         // console.debug('eventType: ' + e.type + ' oldScrollY: ' + oldScrollY + ' newScrollY: ' + newScrollY + ' windowIsScrollable: ' + windowIsScrollable);
     }
 }
+function closest (ele, s) {
+    var cele = ele;
+    var cmatches = Element.prototype.matches || Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
+    do {
+        if (cmatches.call(cele, s)) return cele;
+        cele = cele.parentElement || cele.parentNode;
+    } while (cele !== null && cele.nodeType === 1);
+    return null;
+}
+/*
+  * Returns a list of headings
+*/
+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
@@ -1063,6 +1095,8 @@ export default {
     determineCanvasElementsWorkaround: determineCanvasElementsWorkaround,
     replaceCSSLinkWithInlineCSS: replaceCSSLinkWithInlineCSS,
     deriveZimUrlFromRelativeUrl: deriveZimUrlFromRelativeUrl,
+    TOC: TableOfContents,
+    closest: closest,
     removeUrlParameters: removeUrlParameters,
     displayActiveContentWarning: displayActiveContentWarning,
     displayFileDownloadAlert: displayFileDownloadAlert,