Introduce Table of Content

kiwix-desktop.pro

@@ -5,7 +5,7 @@
 #-------------------------------------------------
 
 QT       += core gui network
-QT       += webenginewidgets
+QT       += webenginewidgets webchannel
 QT       += printsupport
 
 # Avoid stripping incompatible files, due to false identification as executables, on WSL
@@ -92,6 +92,7 @@ SOURCES += \
     src/fullscreennotification.cpp \
     src/zimview.cpp \
     src/multizimbutton.cpp \
+    src/kiwixwebchannelobject.cpp \
 
 HEADERS += \
     src/choiceitem.h \
@@ -145,6 +146,7 @@ HEADERS += \
     src/portutils.h \
     src/css_constants.h \
     src/multizimbutton.h \
+    src/kiwixwebchannelobject.h \
 
 FORMS += \
     src/choiceitem.ui \
@@ -224,6 +226,7 @@ RESOURCES += \
     resources/translations.qrc \
     resources/contentmanager.qrc \
     resources/settingsmanager.qrc \
-    resources/style.qrc
+    resources/style.qrc \
+    resources/js.qrc
 
 RC_ICONS = resources/icons/kiwix/app_icon.ico

resources/css/toc.css

@@ -0,0 +1,168 @@
+#kiwix-toc-side {
+    all: initial;
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    width: 306px; /* ui/mainwindow.ui width and spacing */
+    height: 100vh;
+    border-right: 1px solid #ccc;
+    background: white;
+    margin: 0px;
+    padding: 0px;
+    z-index: 10000;
+}
+
+#kiwix-toc-title-div {
+    all: initial;
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    font-size: 0px;
+    height: 30px;
+    margin: 0px;
+    border: 0px;
+    padding: 10px;
+}
+
+#kiwix-toc-title {
+    all: initial;
+    display: block;
+    position: relative;
+
+    font-size: 24px;
+    line-height: 30px;
+    font-weight: bold;
+    font-family: Arial;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    margin: 0px;
+    padding: 0px;
+}
+
+#kiwix-toc-hide-button {
+    all: initial;
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    background: white;
+    color: #3366CC;
+
+    margin: 0px;
+    margin-top: 7px;
+    padding: 0px;
+
+    font-size: 12px;
+    font-family: Arial;
+    font-weight: bold;
+}
+
+#kiwix-toc-hide-button:hover {
+    text-decoration: underline;
+}
+
+.kiwix-toc-item {
+    all: initial;
+    display: list-item;
+    list-style-type: none;
+    position: relative;
+    width: 100%;
+}
+
+.kiwix-toc-list {
+    all: initial;
+    display: block;
+    width: 100%;
+    margin: 0px;
+    padding: 0px;
+    counter-reset: item;
+}
+
+.kiwix-toc-item-a {
+    all: initial;
+    color: inherit;
+    outline: none;
+    display: block;
+    position: relative;
+
+    padding-bottom: 3px;
+    padding-top: 3px;
+    border: none;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid transparent;
+
+    font-size: 16px;
+    line-height: 24px;
+    font-family: Arial;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.kiwix-toc-item-a:hover {
+    color: inherit; 
+    text-decoration: none;
+
+    border-top: 1px solid #3366CC;
+    border-bottom: 1px solid #3366CC;
+
+    background-color: #D9E9FF; 
+    cursor: pointer;
+}
+
+.kiwix-toc-item-a:before { content: counters(item, ".") " "; counter-increment: item; margin-right: 10px; padding-left: 10px; }
+
+.kiwix-tool-tip {
+    all: initial;
+    display: none;
+    position: fixed;
+
+    background-color: #ffffe1;
+    border: 1px solid black;
+    padding: 5px;
+
+    font-size: 16px;
+    line-height: 20px;
+    font-family: Arial;
+
+    z-index: 10000;
+}
+
+.kiwix-toc-a {
+    all: inherit;
+    pointer-events: none;
+}
+
+.kiwix-toc-a:hover {
+    all: inherit;
+}
+
+.kiwix-toc-a:visited {
+    all: inherit;
+}
+
+#kiwix-toc {
+    all: initial;
+    display: block;
+    position: relative;
+
+    /* #kiwix-toc-title-div height&padding and #kiwix-toc border-top */
+    height: calc(100vh - 51px);
+
+    width: 100%;
+    overflow: auto;
+    border-top: 1px solid #ccc;
+}
+
+#kiwix-toc::-webkit-scrollbar {
+    width: 5px;
+    border: 1px solid #ccc;
+    outline: none;
+}
+
+#kiwix-toc::-webkit-scrollbar-thumb {
+    background-color: darkgrey;
+    outline: none;
+}

resources/js.qrc

@@ -0,0 +1,6 @@
+<RCC>
+    <qresource prefix="/">
+        <file>js/toc.js</file>
+        <file>js/tocCSS.js</file>
+    </qresource>
+</RCC>

resources/js/toc.js

@@ -0,0 +1,174 @@
+/**
+ * Construct recurseData.str as a nested list of headers by recursively going 
+ * through all children of elem that has header tags.
+ * 
+ * References:
+ * https://stackoverflow.com/questions/187619/is-there-a-javascript-solution-to-generating-a-table-of-contents-for-a-page
+ * @param elem DOM element
+ * @param recurseData Object with fields: { int: level, int: count, str: toc }
+ */
+function recurseChild(elem, recurseData)
+{
+    if (elem !== "undefined") 
+    {
+        if(elem.nodeName.match(/^H\d+$/) && elem.textContent)
+        {
+            var headerText = elem.textContent;
+            var prevLevel = recurseData.level;
+            var level = elem.nodeName.substr(1);
+            var anchor = "kiwix-toc-" + recurseData.count;
+            recurseData.count += 1;
+
+            /* Wrap header content with something we can reference. */
+            elem.innerHTML = '<a href="#' + anchor + '" id="' + anchor + '" class="kiwix-toc-a">' + headerText + '</a>';
+
+            /* Start or end a list or item based on current and previous level */
+            if (level > prevLevel) 
+                recurseData.toc += '<ul class="kiwix-toc-list">';
+            else if (level < prevLevel)
+                recurseData.toc += '</li></ul>';
+            else
+                recurseData.toc += '</li>';
+
+            recurseData.level = parseInt(level);
+            recurseData.toc += '<li class="kiwix-toc-item"><a href="#' + anchor + '" class="kiwix-toc-item-a">' +
+            '<span class="kiwix-tool-tip">'  + headerText + '</span>' + headerText + '</a>';
+        }
+
+        var c = elem.children;
+        for (var i = 0; i < c.length; i++)
+            recurseChild(c[i], recurseData);
+    }
+}
+
+function tocHTMLStr()
+{
+    /* level used to track current header level.
+       toc used to store constructed list.
+       count used to uniquely identify each list item in toc.
+    */
+    var recurseData = { level: 0, toc: "", count: 0,};
+    recurseChild(document.body, recurseData);
+
+    /* End list when non-empty */
+    if (recurseData.level)
+        recurseData.toc += (new Array(recurseData.level + 1)).join('</ul>');
+    return recurseData.toc;
+}
+
+function getPixelWithZoom(pixel)
+{
+    var zoom = window.outerWidth / window.document.documentElement.clientWidth;
+    return (pixel / zoom.toFixed(1)).toString() + "px";
+}
+
+function makeTOCVisible(visible)
+{
+    var tocElem = document.getElementById("kiwix-toc-side");
+    tocElem.style.display = visible ? "block" : "none";
+    document.body.style.marginLeft = visible ? getPixelWithZoom(310) : null;
+    document.body.style.maxWidth = visible ?  "calc(100vw - " + getPixelWithZoom(310) + ")" : null;
+}
+
+function showToolTip (elem) {
+    var tooltip = elem.getElementsByClassName("kiwix-tool-tip")[0];
+
+    /* Check if there is overflow. */ 
+    if (tooltip && elem.offsetWidth < elem.scrollWidth)
+    {
+        tooltip.style.display = "block";
+
+        var rect = elem.getBoundingClientRect();
+        tooltip.style.top = (rect.top).toString() + "px";
+        tooltip.style.left = getPixelWithZoom(306);
+    }
+}
+
+function hideToolTip (elem) {
+    var tooltip = elem.getElementsByClassName("kiwix-tool-tip")[0];
+
+    if (tooltip)
+        tooltip.style.display = "";
+}
+
+function setupTOCItems()
+{
+    var c = document.getElementsByClassName("kiwix-toc-item-a");
+    for (var i = 0; i < c.length; i++)
+    {
+        if (c[i] !== "undefined" && c[i].style) 
+        {
+            var p = c[i].parentNode;
+            var count = -1;
+            while (p)
+            {
+                if (p.nodeName.match(/^UL$/))
+                    count += 1;
+                p = p.parentNode;
+            }
+
+            /* We need manual padding to achieve visual effects on hover. */
+            c[i].style.paddingLeft = ((count == -1 ? 0 : count) * 30).toString() + "px";
+
+            c[i].addEventListener("mouseover", (event) => { showToolTip(event.target); });
+            c[i].addEventListener("mouseout", (event) => { hideToolTip(event.target); });
+        }
+    }
+}
+
+function setupTOC()
+{
+    var toc = document.createElement('div');
+    toc.id = "kiwix-toc";
+    toc.innerHTML += tocHTMLStr();
+
+    var tocTitle = document.createElement('p');
+    tocTitle.id = "kiwix-toc-title";
+
+    var tocHideButton = document.createElement('button');
+    tocHideButton.id = "kiwix-toc-hide-button"
+
+    var tocTitleDiv = document.createElement('div');
+    tocTitleDiv.id = "kiwix-toc-title-div";
+    tocTitleDiv.append(tocTitle);
+    tocTitleDiv.append(tocHideButton);
+
+    var tocSideDiv = document.createElement('div');
+    tocSideDiv.id = "kiwix-toc-side";
+    tocSideDiv.append(tocTitleDiv);
+    tocSideDiv.append(toc);
+
+    document.body.prepend(tocSideDiv);
+}
+
+function resize(){
+    document.getElementById("kiwix-toc-side").style.width = getPixelWithZoom(306);
+
+    if (document.getElementById("kiwix-toc-side").style.display !== "none")
+    {
+        document.body.style.marginLeft = getPixelWithZoom(310);
+        document.body.style.maxWidth = "calc(100vw - " + getPixelWithZoom(310) + ")";
+    }
+}
+
+new QWebChannel(qt.webChannelTransport, function(channel) {
+
+    var kiwixObj = channel.objects.kiwixChannelObj
+    setupTOC();
+    setupTOCItems();
+
+    document.getElementById("kiwix-toc-title").textContent = kiwixObj.tocTitle;
+
+    var tocHideButton = document.getElementById("kiwix-toc-hide-button");
+    tocHideButton.textContent = kiwixObj.hideButtontext;
+    tocHideButton.onclick = () => { kiwixObj.tocVisible = false; };
+
+    kiwixObj.tocVisibleChanged.connect(function(visible) {
+        makeTOCVisible(visible);
+    });
+    makeTOCVisible(kiwixObj.tocVisible);
+
+    window.onresize = resize;
+    resize();
+});
+

resources/js/tocCSS.js

@@ -0,0 +1,5 @@
+var style = document.createElement('link');
+style.rel = "stylesheet";
+style.type = "text/css";
+style.href = "qrc:/css/toc.css";
+document.head.appendChild(style);

resources/style.qrc

@@ -6,5 +6,6 @@
         <file>css/confirmBox.css</file>
         <file>css/contentmanagerside.css</file>
         <file>css/choiceBox.css</file>
+        <file>css/toc.css</file>
     </qresource>
 </RCC>