kiwix/kiwix-desktop
1
0
Fork 0
mirror of https://github.com/kiwix/kiwix-desktop.git synced 2025-09-25 13:56:39 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add Tooltip to Elided TOC Items

Browse Source
This commit is contained in:
ShaopengLin 2024-09-27 22:40:07 -04:00
parent e7dffe198d
commit bb4628a35a
2 changed files with 42 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
resources/css/toc.css
View File

@ -114,6 +114,22 @@
.kiwix-toc-item-a:before { content: counters(item, ".") " "; counter-increment: item; margin-right: 10px; padding-left: 10px; } .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 { .kiwix-toc-a {
all: inherit; all: inherit;
pointer-events: none; pointer-events: none;

27
resources/js/toc.js
View File

@ -31,7 +31,8 @@ function recurseChild(elem, recurseData)
recurseData.toc += '</li>'; recurseData.toc += '</li>';
recurseData.level = parseInt(level); recurseData.level = parseInt(level);
recurseData.toc += '<li class="kiwix-toc-item"><a href="#' + anchor + '" class="kiwix-toc-item-a">' + headerText + '</a>'; 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; var c = elem.children;
@ -63,6 +64,27 @@ function makeTOCVisible(visible)
document.body.style.maxWidth = visible ? "calc(100vw - 310px)" : null; document.body.style.maxWidth = visible ? "calc(100vw - 310px)" : 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 = "306px";
}
}
function hideToolTip (elem) {
var tooltip = elem.getElementsByClassName("kiwix-tool-tip")[0];
if (tooltip)
tooltip.style.display = "";
}
function setupTOCItems() function setupTOCItems()
{ {
var c = document.getElementsByClassName("kiwix-toc-item-a"); var c = document.getElementsByClassName("kiwix-toc-item-a");
@ -81,6 +103,9 @@ function setupTOCItems()
/* We need manual padding to achieve visual effects on hover. */ /* We need manual padding to achieve visual effects on hover. */
c[i].style.paddingLeft = ((count == -1 ? 0 : count) * 30).toString() + "px"; 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); });
} }
} }
} }