Skip to content

Commit

Permalink
fixup! Temporary code for UI testing only
Browse files Browse the repository at this point in the history
  • Loading branch information
@ShaopengLin
ShaopengLin committed Sep 16, 2024
1 parent 8b19fad commit f992132
Show file tree
Hide file tree
Showing 11 changed files with 386 additions and 66 deletions.
2 changes: 1 addition & 1 deletion kiwix-desktop.pro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
200 changes: 180 additions & 20 deletions resources/js/toc.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,23 @@
const KIWIX_TAG_PREFIX = "kiwix-toc-";


function showToolTip (elem) { /* added argument */
var tooltip = elem.getElementsByClassName("kiwix-tool-tip")[0];
if (elem.offsetWidth < elem.scrollWidth)
{
tooltip.style.display="block"; /* changed variable to argument */

var rect = elem.getBoundingClientRect();
tooltip.style.top = (rect.top).toString() + "px";
tooltip.style.left = (rect.left + 286).toString() + "px";
}
}
function hideToolTip (elem) { /* added argument */
var tooltip = elem.getElementsByClassName("kiwix-tool-tip")[0];
tooltip.style.display=""; /* changed variable to argument */
}


/**
* Construct recurseData.str as a nested list of headers by recursively going
* through all children of elem that has header tags.
Expand All @@ -26,14 +44,14 @@ function recurseChild(elem, recurseData)

/* Start or end a list or item based on current and previous level */
if (level > prevLevel)
recurseData.toc += (new Array(level - prevLevel + 1)).join('<ul class="kiwix-toc-list">');
recurseData.toc += '<ul class="kiwix-toc-list">';
else if (level < prevLevel)
recurseData.toc += (new Array(prevLevel - level + 1)).join('</li></ul>');
recurseData.toc += '</li></ul>';
else
recurseData.toc += (new Array(prevLevel+ 1)).join('</li>');
recurseData.toc += '</li>';

recurseData.level = parseInt(level);
recurseData.toc += '<li class="kiwix-toc-item"><a href="#' + anchor + '">' + headerText + '</a>';
recurseData.toc += '<li class="kiwix-toc-item"><a href="#' + anchor + '" class="kiwix-toc-list-a"><span class="kiwix-tool-tip">' + headerText + '</span>' + headerText + '</a>';
}

var c = elem.children;
Expand All @@ -57,22 +75,96 @@ function tocHTMLStr()
return recurseData.toc;
}

function closePop()
{
var tocElem = document.getElementById("kiwix-toc-side");
tocElem.style.display = "none";
// var c = document.body.children;
// for (var i = 0; i < c.length; i++)
// {
// if (c[i] !== "undefined" && c[i].id !== "kiwix-toc-side" && c[i].style)
// {
// c[i].style.marginLeft = null;
// }
// }
document.body.style.marginLeft = null
document.body.style.maxWidth = null
}

function openPop()
{
var tocElem = document.getElementById("kiwix-toc");
var tocElem = document.getElementById("kiwix-toc-side");
tocElem.style.display = "block";
// var zoom = window.outerWidth / window.document.documentElement.clientWidth;
// var c = document.body.children;
// for (var i = 0; i < c.length; i++)
// {
// if (c[i] !== "undefined" && c[i].id !== "kiwix-toc-side" && c[i].style)
// {
// c[i].style.marginLeft = (300 / zoom.toFixed(1)).toString() + "px";
// }
// }

var zoom = window.outerWidth / window.document.documentElement.clientWidth;
document.body.style.marginLeft = (290 / zoom.toFixed(1)).toString() + "px";
document.body.style.maxWidth = "calc(100vw - " + (290 / zoom.toFixed(1)).toString() + "px)";
}

function urlRequest(){

// Creating Our XMLHttpRequest object
let xhr = new XMLHttpRequest();

// Making our connection
let url = 'zim://kiwix-desktop';
xhr.open("GET", url, true);
xhr.send();
}

function togglePop()
{
var tocElem = document.getElementById("kiwix-toc-side");
var isTOCVisible = tocElem.style.display === "block";
tocElem.style.display = isTOCVisible ? "none" : "block";

if (isTOCVisible)
{
closePop();
urlRequest();
}
else
{
tocElem.style.display = "block";
var c = document.body.children;
// for (var i = 0; i < c.length; i++)
// {
// if (c[i] !== "undefined" && c[i].id !== "kiwix-toc-side" && c[i].style)
// {
// c[i].style.marginLeft = "286px";
// }
// }
// var zoom = window.outerWidth / window.document.documentElement.clientWidth;
// var c = document.body.children;
// for (var i = 0; i < c.length; i++)
// {
// if (c[i] !== "undefined" && c[i].id !== "kiwix-toc-side" && c[i].style)
// {
// c[i].style.marginLeft = (300 / zoom.toFixed(1)).toString() + "px";
// }
// }

var zoom = window.outerWidth / window.document.documentElement.clientWidth;
document.body.style.marginLeft = (290 / zoom.toFixed(1)).toString() + "px";
document.body.style.maxWidth = "calc(100vw - " + (290 / zoom.toFixed(1)).toString() + "px)";
}
}

function tocPopupButtonElem()
{
var tocPopupButton = document.createElement('input');
var tocPopupButton = document.createElement('button');
tocPopupButton.id = "kiwix-toc-button"
tocPopupButton.onclick = openPop;
tocPopupButton.type = "image";
tocPopupButton.src = "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' id='toc'%3E%3Cpath fill='none' d='M0 0h24v24H0V0zm0 0h24v24H0V0z'%3E%3C/path%3E%3Cpath d='M4 9h12c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h12c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0 4h12c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm15 0h2v-2h-2v2zm0-10v2h2V7h-2zm0 6h2v-2h-2v2z'%3E%3C/path%3E%3C/svg%3E%0A";
tocPopupButton.width = 40;
tocPopupButton.height = 40;
tocPopupButton.onclick = togglePop;
tocPopupButton.textContent = "Hide";

return tocPopupButton;
}

Expand All @@ -82,21 +174,89 @@ function setupTOC()
toc.id = "kiwix-toc";

tocContent = tocHTMLStr();
if (tocContent.length == 0)
return;

toc.innerHTML += tocContent;
var c = toc.getElementsByClassName("kiwix-toc-list-a");
for (var i = 0; i < c.length; i++)
{
if (c[i] !== "undefined" && c[i].id !== "kiwix-toc-side" && c[i].style)
{
var p = c[i].parentNode;
var count = -1;
while (p)
{
if (p.nodeName.match(/^UL$/))
count += 1;
p = p.parentNode;
}
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);});
}
}

var tocTitleDiv = document.createElement('div');
tocTitleDiv.id = "kiwix-toc-title-div";

var tocTitle = document.createElement('p');
tocTitle.id = "kiwix-toc-title";
tocTitle.textContent = KIWIX_GT_CONTENT;
toc.prepend(tocTitle);

tocTitleDiv.append(tocTitle);
tocTitleDiv.append(tocPopupButtonElem());

var tocDiv = document.createElement('div');
tocDiv.id = "kiwix-toc-div";
tocDiv.prepend(toc);
tocDiv.prepend(tocPopupButtonElem());
document.body.prepend(tocDiv);
tocDiv.prepend(tocTitleDiv);

var tocSideDiv = document.createElement('div');
tocSideDiv.id = "kiwix-toc-side";
tocSideDiv.style.display = "none";
tocSideDiv.prepend(tocDiv);

var closeBut = document.createElement('button');
closeBut.id = "kiwix-toc-close-button"
closeBut.onclick = closePop;
closeBut.style.display = "none";

var openBut = document.createElement('button');
openBut.id = "kiwix-toc-open-button"
openBut.onclick = openPop;
openBut.style.display = "none";

document.body.prepend(tocSideDiv);
document.body.append(closeBut);
document.body.append(openBut);
}

setupTOC();
setupTOC();

function resize(){
var zoom = window.outerWidth / window.document.documentElement.clientWidth;
var width = 286;
document.getElementById("kiwix-toc-side").style.width = (parseInt(width) / zoom.toFixed(1)).toString() + "px";

if (document.getElementById("kiwix-toc-side").style.display !== "none")
{
// var c = document.body.children;
// for (var i = 0; i < c.length; i++)
// {
// if (c[i] !== "undefined" && c[i].id !== "kiwix-toc-side" && c[i].style)
// {
// c[i].style.marginLeft = (parseInt(width) / zoom.toFixed(1)).toString() + "px";
// }
// }
var zoom = window.outerWidth / window.document.documentElement.clientWidth;
document.body.style.marginLeft = (290 / zoom.toFixed(1)).toString() + "px";
document.body.style.maxWidth = "calc(100vw - " + (290 / zoom.toFixed(1)).toString() + "px)";
}

}
window.onresize = resize;
resize();

new QWebChannel(qt.webChannelTransport, function(channel) {

var JSobject = channel.objects.obj;
JSobject.foo();
});
Loading

0 comments on commit f992132

Please sign in to comment.