From ddb58d1fe9904fda04cf1770edac53d09298415f Mon Sep 17 00:00:00 2001 From: ShaopengLin Date: Mon, 9 Sep 2024 16:56:08 -0400 Subject: [PATCH] fixup! Temporary code for UI testing only --- resources/js/toc.js | 50 ++++++++++++++++++------- resources/js/tocStyle.js | 81 +++++++++++++++++++++++++--------------- src/kiwixapp.cpp | 3 +- src/tabbar.cpp | 33 ++++++++++++++++ src/topwidget.cpp | 3 ++ src/webpage.cpp | 1 - 6 files changed, 125 insertions(+), 46 deletions(-) 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")); }