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 10, 2024
1 parent 2d2791f commit ddb58d1
Show file tree
Hide file tree
Showing 6 changed files with 125 additions and 46 deletions.
50 changes: 37 additions & 13 deletions resources/js/toc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ function recurseChild(elem, recurseData)
recurseData.toc += (new Array(prevLevel+ 1)).join('</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">' + headerText + '</a>';
}

var c = elem.children;
Expand All @@ -59,20 +59,41 @@ function tocHTMLStr()

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

if (isTOCVisible)
{
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;
}
}
}
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 = "31vw";
}
}
}
}

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.textContent = "Hide";
return tocPopupButton;
}

Expand All @@ -82,9 +103,6 @@ function setupTOC()
toc.id = "kiwix-toc";

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

toc.innerHTML += tocContent;

var tocTitle = document.createElement('p');
Expand All @@ -95,8 +113,14 @@ function setupTOC()
var tocDiv = document.createElement('div');
tocDiv.id = "kiwix-toc-div";
tocDiv.prepend(toc);
tocDiv.prepend(tocPopupButtonElem());
document.body.prepend(tocDiv);
tocDiv.append(tocPopupButtonElem());

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

tocSideDiv.prepend(tocDiv);
document.body.prepend(tocSideDiv);
}

setupTOC();
81 changes: 51 additions & 30 deletions resources/js/tocStyle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,23 @@ style.innerHTML = `
list-style-type: none;
visibility: inherit;
unicode-bidi: plaintext;
text-align: start;
font-size: 20px;
margin: 10px 30px;
margin-right: 0px;
font-size: 16px;
line-height: 20px;
font-family: Arial;
margin: 5px 20px;
}
.kiwix-toc-item:before { content: counters(item, ".") " "; counter-increment: item }
.kiwix-toc-list {
all: initial;
display: block;
visibility: inherit;
margin: 0px;
padding: 0px;
counter-reset: item;
}
.kiwix-toc-a {
Expand All @@ -35,25 +36,31 @@ style.innerHTML = `
text-decoration: none;
}
#kiwix-toc {
all: initial;
display: none;
.kiwix-toc-list-a {
color: inherit;
outline: none;
text-decoration: none;
position: relative;
left: 10px;
}
max-height: 50vh;
max-width: 50vh;
width: max-content;
overflow-y: auto;
.kiwix-toc-list-a:hover {
color: inherit;
text-decoration: none;
}
padding: 8px;
padding-top: 0px;
background: white;
border: 1px solid #cccccc;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
#kiwix-toc {
all: initial;
display: block;
max-height: 100vh;
overflow: auto;
padding: 10px;
padding-top: 20px;
}
#kiwix-toc::-webkit-scrollbar {
width: 5px;
width: 0px;
border: none;
outline: none;
}
Expand All @@ -69,9 +76,11 @@ style.innerHTML = `
visibility: inherit;
font-size: 24px;
line-height: 30px;
font-weight: bold;
font-family: Arial;
text-align: center;
unicode-bidi: plaintext;
text-align: start;
margin-left: auto;
margin-right: auto;
Expand All @@ -80,28 +89,40 @@ style.innerHTML = `
#kiwix-toc-button {
all: initial;
position: relative;
display: block;
height: max-content;
background: white;
margin: 0px;
padding 0px;
outline: none;
border: 1px solid #ccc;
border-radius: 3px;
color: #3366CC;
padding: 0px;
margin: 10px;
margin-top: 30px;
font-size: 12px;
font-family: Arial;
line-height: 16px;
font-weight: bold;
}
#kiwix-toc-button:hover {
border: 1px solid #3366CC;
background-color: #D9E9FF;
text-decoration: underline;
}
#kiwix-toc-div {
all: initial;
display: block;
display: flex;
justify-content: space-between;
height: 100vh;
font-size: 0px;
margin: 8px;
margin: 0px;
}
#kiwix-toc-side {
position: fixed;
top: 0px;
min-width: 30vw;
max-width: 30vw;
height: 100%;
z-index: 1000;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
}
`
document.head.appendChild(style);
3 changes: 1 addition & 2 deletions src/kiwixapp.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -443,8 +443,7 @@ void KiwixApp::createActions()
});
mpa_actions[ToggleFullscreenAction]->setCheckable(true);

CREATE_ACTION_SHORTCUT(ToggleTOCAction, gt("table-of-content"), QKeySequence(Qt::CTRL | Qt::SHIFT | Qt::Key_1));
HIDE_ACTION(ToggleTOCAction);
CREATE_ACTION_ICON_SHORTCUT(ToggleTOCAction, "toc", gt("table-of-content"), QKeySequence(Qt::CTRL | Qt::Key_M));

CREATE_ACTION_ONOFF_ICON_SHORTCUT(ToggleReadingListAction, "reading-list-active", "reading-list", gt("reading-list"), QKeySequence(Qt::CTRL | Qt::Key_B));

Expand Down
33 changes: 33 additions & 0 deletions src/tabbar.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,39 @@ TabBar::TabBar(QWidget *parent) :
// the slot relies the connection will be direct to reverting back the tab
connect(this, SIGNAL(tabMoved(int,int)),
this, SLOT(onTabMoved(int,int)), Qt::DirectConnection);

connect(getAction(KiwixApp::ToggleTOCAction), &QAction::triggered, [=](){
if (ZimView* view = currentZimView())
{
view->getWebView()->page()->runJavaScript("var tocElem = document.getElementById(\"kiwix-toc-side\");"
"var isTOCVisible = tocElem.style.display === \"block\";"

"if (isTOCVisible)"
"{"
"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;"
"}"
"}"
"}"
"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 = \"31vw\"; "
"}"
"}"
"}");
}
});
}

void TabBar::openHomePage() {
Expand Down
3 changes: 3 additions & 0 deletions src/topwidget.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@ TopWidget::TopWidget(QWidget *parent) :
QAction *random = app->getAction(KiwixApp::RandomArticleAction);
addAction(random);

QAction *toc = app->getAction(KiwixApp::ToggleTOCAction);
addAction(toc);

// For CSS
if (QGuiApplication::isLeftToRight()) {
widgetForAction(back)->setObjectName("leftHistoryButton");
Expand Down
1 change: 0 additions & 1 deletion src/webpage.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ WebPage::WebPage(QObject *parent) :
auto tocScript = getScript(":/js/toc.js");
auto source = tocScript.sourceCode().prepend("const KIWIX_GT_CONTENT = \"" + gt("table-of-content") + "\";");
tocScript.setSourceCode(source);
qInfo() << source;
scripts().insert(tocScript);
scripts().insert(getScript(":/js/tocStyle.js"));
}
Expand Down

0 comments on commit ddb58d1

Please sign in to comment.