From 41776d2b89a815edbffc7f70b54e00157a6f190a Mon Sep 17 00:00:00 2001 From: shenleban tongying Date: Sat, 3 Jun 2023 20:02:39 -0400 Subject: [PATCH] feat: add article-script.js * like article-style.css but for javascript --- src/article_maker.cc | 6 ++++++ src/config.cc | 11 +++++++++++ src/config.hh | 6 +++++- website/docs/topic_userstyle.md | 19 +++++++++++++++---- website/mkdocs.yml | 2 +- 5 files changed, 38 insertions(+), 6 deletions(-) diff --git a/src/article_maker.cc b/src/article_maker.cc index 8c3e88de..183e29f0 100644 --- a/src/article_maker.cc +++ b/src/article_maker.cc @@ -201,6 +201,12 @@ body { background: #242525; } )"; } + + // load the `article-style.js` in user's config folder + if ( auto userJsFile = Config::getUserJsFileName(); userJsFile.has_value() ) { + result += fmt::format( FMT_COMPILE( R"()" ), userJsFile.value() ); + } + result += ""; return result; diff --git a/src/config.cc b/src/config.cc index 3fa553ba..2372704e 100644 --- a/src/config.cc +++ b/src/config.cc @@ -2262,6 +2262,17 @@ QString getUserCssFileName() return getHomeDir().filePath( "article-style.css" ); } +std::optional< std::string > getUserJsFileName() +{ + QString userJsPath = getHomeDir().filePath( "article-script.js" ); + if ( QFileInfo::exists( userJsPath ) ) { + return userJsPath.toStdString(); + } + else { + return std::nullopt; + } +} + QString getUserCssPrintFileName() { return getHomeDir().filePath( "article-style-print.css" ); diff --git a/src/config.hh b/src/config.hh index 469d74a6..cd6de6c5 100644 --- a/src/config.hh +++ b/src/config.hh @@ -14,6 +14,7 @@ #include #include "ex.hh" #include +#include /// GoldenDict's configuration namespace Config { @@ -807,9 +808,12 @@ QString getHistoryFileName() ; /// Returns the filename of a favorities file. QString getFavoritiesFileName() ; -/// Returns the user .css file name. +/// Returns the user .css file name (article-style.css). QString getUserCssFileName() ; +/// Returns the user .js file name (article-script.js). +std::optional< std::string > getUserJsFileName(); + /// Returns the user .css file name used for printing only. QString getUserCssPrintFileName() ; diff --git a/website/docs/topic_userstyle.md b/website/docs/topic_userstyle.md index c21ba4fa..8249093f 100644 --- a/website/docs/topic_userstyle.md +++ b/website/docs/topic_userstyle.md @@ -1,7 +1,18 @@ -# User defined stylesheets +By creating `article-style.css` or `article-script.js` in GoldenDict's configuration folder (beside the `config` file), you can change dictionaries' presentation or inject javascript to dictionaries. -To change of dictionary articles presentation you can create the file with styles which will be used while articles output. Such file must be named `article-style.css` and placed in GoldenDict configuration folder beside the "config" file. The `article-style.css` is just style sheet file wrote in accordance with standard html style sheet rules. To see a class names used in articles you can call inspector via article context menu. +The `article-style.css` is just standard HTML [Style Sheets](https://developer.mozilla.org/docs/Web/CSS). To know class or id names used in article, you can open inspector by right click article's body and click `Inspect (F12)`. The inspector's documentation can be found at [Chrome DevTools](https://developer.chrome.com/docs/devtools/) -Also you can tune GoldenDict interface. To make it you should create the `qt-style.css` style sheet file in GoldenDict configuration folder beside the "config" file. The rules for Qt style sheets you can find here. +You can adjust dark reader mode's parameter by add those lines to `article-script.js` -The examples of "article-style.css" and "qt-style.css" files you can find in GoldenDict \ No newline at end of file +```javascript +DarkReader.enable({ + brightness: 100, + contrast: 100, + sepia: 0, + grayscale: 0, +}); +``` + +Also, you can tune GoldenDict's interface by creating `qt-style.css` style sheet file in GoldenDict configuration folder. It is a [Qt Style Sheet](https://doc.qt.io/qt-6/stylesheet-reference.html) loaded during startup. + +Samples of `article-style.css` and `qt-style.css` files can found in GoldenDict's source code at [/src/stylesheets](https://github.com/xiaoyifang/goldendict-ng/tree/staged/src/stylesheets) diff --git a/website/mkdocs.yml b/website/mkdocs.yml index cd36d956..1b821876 100644 --- a/website/mkdocs.yml +++ b/website/mkdocs.yml @@ -38,7 +38,7 @@ nav: - Special Usages: - Anki Integration: topic_anki.md - Command Lines: topic_commandline.md - - Custom Stylesheets: topic_userstyle.md + - Custom Stylesheet & JavaScript: topic_userstyle.md - Portable Mode: topic_portablemode.md - Custom transliteration: topic_transliteration.md - Customize Dictionary Name: custom_dictionary_name.md