diff --git a/resources/js/toc.js b/resources/js/toc.js
index 95ff7e7b6..73057c1d0 100644
--- a/resources/js/toc.js
+++ b/resources/js/toc.js
@@ -33,7 +33,7 @@ function recurseChild(elem, recurseData)
recurseData.toc += (new Array(prevLevel+ 1)).join('');
recurseData.level = parseInt(level);
- recurseData.toc += '' + headerText + '';
+ recurseData.toc += '' + headerText + '';
}
var c = elem.children;
@@ -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;
}
@@ -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');
@@ -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();
\ No newline at end of file
diff --git a/resources/js/tocStyle.js b/resources/js/tocStyle.js
index c428474c6..adf2f7e0e 100644
--- a/resources/js/tocStyle.js
+++ b/resources/js/tocStyle.js
@@ -6,15 +6,15 @@ 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;
@@ -22,6 +22,7 @@ style.innerHTML = `
margin: 0px;
padding: 0px;
+ counter-reset: item;
}
.kiwix-toc-a {
@@ -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;
}
@@ -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;
@@ -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);
diff --git a/src/kiwixapp.cpp b/src/kiwixapp.cpp
index 58fe0e556..fe3bdc7d5 100644
--- a/src/kiwixapp.cpp
+++ b/src/kiwixapp.cpp
@@ -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));
diff --git a/src/tabbar.cpp b/src/tabbar.cpp
index a3b2d7861..1093d3c12 100644
--- a/src/tabbar.cpp
+++ b/src/tabbar.cpp
@@ -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() {
diff --git a/src/topwidget.cpp b/src/topwidget.cpp
index c29d59279..9843b0bf9 100644
--- a/src/topwidget.cpp
+++ b/src/topwidget.cpp
@@ -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");
diff --git a/src/webpage.cpp b/src/webpage.cpp
index abba46037..53ee6fd9d 100644
--- a/src/webpage.cpp
+++ b/src/webpage.cpp
@@ -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"));
}