masi/lnreader-plugins
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add accordion and fix minor issues (#742)

Browse Source 
* Add docs v0.0.1

* Add icon size warning

* Fix sourcenover caution

* Fix semver descriptions

* Filters fix

* Quickfix quickstart

* Add icon warning v2

* Fix typos

* Add NovelItem

* Update plugins host

* Update plugins host

* Remove unnecesarry .js and .dist

* Update plugins host

* Add host.ps1

* Fix readme.txt

* Fix READNE.txt, again

* Remove .js and .dist

* Add accordion

* Working pagination

* readme update with ost

* Add linux/windows hosting functions

* Add tswatch

* Fix fetch function

* Change plugin versions

* Fix chrome

* Fix workflows

* Fix search not showing results

* remove unnecesarry code

* Revert novelupdates changes

* Reverted NobleMTL instead of novelupdates, fixing that

* Revert nobleMTL to e346c7d0

* WTF NobleMTL?
This commit is contained in:
Marcin Majewski
2024-02-04 17:39:07 +01:00
committed by GitHub
parent fc52a6e665
commit e1207c172a
16 changed files with 4339 additions and 1872 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.ts
+57 -28
View File
@@ -9,7 +9,7 @@ import localizedFormat from "dayjs/plugin/localizedFormat";
const app = express();
const port = Number(process.argv[2]);
if(!port){
if (!port) {
process.exit(0);
}
const host = "localhost";
@@ -23,7 +23,9 @@ export const getHeaders = () => {
app.use((req, res, next) => {
const xHeaders = req.headers["x-custom-headers"];
if (xHeaders && typeof xHeaders === "string") {
for (const [headerName, headerValue] of Object.entries(pluginApi.fetchHeaders)) {
for (const [headerName, headerValue] of Object.entries(
pluginApi.fetchHeaders
)) {
if (
typeof headerName === "string" &&
typeof headerValue === "string"
@@ -56,41 +58,68 @@ app.post("/filters", async (req, res) => {
res.json(filters || []);
});
app.post("/popularNovels/", async (req, res) => {
const filters = req.body["filters"] || {};
const requirePath = req.body["pluginRequirePath"];
const showLatestNovels = req.body["showLatestNovels"] || false;
const novels = await pluginApi.popularNovels(
req.body["pluginRequirePath"],
{ showLatestNovels, filters }
);
res.json(novels);
const defaultFilters = await pluginApi.getFilter(requirePath);
const filters = showLatestNovels
? defaultFilters
: req.body["filters"] || defaultFilters;
const page = parseInt(req.body["page"]);
try {
const novels = await pluginApi.popularNovels(requirePath, page || 1, {
showLatestNovels,
filters,
});
res.json(novels);
} catch (err) {
res.json({ error: err });
}
});
app.post("/searchNovels/", async (req, res) => {
const novels = await pluginApi.searchNovels(
req.body["pluginRequirePath"],
req.body["searchTerm"]
);
res.json(novels);
const page = parseInt(req.body["page"]) || 1;
try {
const novels = await pluginApi.searchNovels(
req.body["pluginRequirePath"],
page,
req.body["searchTerm"]
);
res.json(novels);
} catch (err) {
res.json({ error: err });
}
});
app.post("/parseNovelAndChapters/", async (req, res) => {
const sourceNovel = await pluginApi.parseNovelAndChapters(
req.body["pluginRequirePath"],
req.body["novelUrl"]
);
res.json(sourceNovel);
try {
const sourceNovel = await pluginApi.parseNovelAndChapters(
req.body["pluginRequirePath"],
req.body["novelUrl"]
);
res.json(sourceNovel);
} catch (err) {
res.json({ error: err });
}
});
app.post("/parseChapter/", async (req, res) => {
const chapterText = await pluginApi.parseChapter(
req.body["pluginRequirePath"],
req.body["chapterUrl"]
);
res.send(chapterText);
try {
const chapterText = await pluginApi.parseChapter(
req.body["pluginRequirePath"],
req.body["chapterUrl"]
);
res.send(chapterText);
} catch (err) {
res.json({ error: err });
}
});
app.post("/fetchImage/", async (req, res) => {
const base64 = await pluginApi.fetchImage(
req.body["pluginRequirePath"],
req.body["url"]
);
res.send(base64);
try {
const base64 = await pluginApi.fetchImage(
req.body["pluginRequirePath"],
req.body["url"]
);
res.send(base64);
} catch (err) {
res.json({ error: err });
}
});
app.get("/", (req, res) => {
libs/fetch.ts
+21 -18
View File
@@ -1,8 +1,13 @@
type FetchInit = {
headers?: Record<string, string> | Headers;
headers?: Record<string, string | undefined> | Headers;
method?: string;
body?: FormData | string;
[x: string]: string | Record<string, string> | undefined | FormData | Headers;
[x: string]:
| string
| Record<string, string | undefined>
| undefined
| FormData
| Headers;
};
const makeInit = async (init?: FetchInit) => {
@@ -31,21 +36,19 @@ const makeInit = async (init?: FetchInit) => {
};
}
return init;
}
};
/**
* Fetch with (Android) User Agent
* @param url
* @param init
* @param url
* @param init
* @returns response as normal fetch
*/
export async function fetchApi(
url: string,
init?: FetchInit
) {
export async function fetchApi(url: string, init?: FetchInit) {
init = await makeInit(init);
console.log(url, init);
return await fetch(url, init);
// console.log(init.headers);
// console.log(url, init);
return await fetch(url, init as RequestInit);
}
/**
@@ -59,12 +62,12 @@ export const fetchFile = async function (url: string, init?: FetchInit) {
init = await makeInit(init);
console.log(url, init);
try {
const res = await fetch(url, init);
if (!res.ok) return '';
const res = await fetch(url, init as RequestInit);
if (!res.ok) return "";
const arrayBuffer = await res.arrayBuffer();
return Buffer.from(arrayBuffer).toString("base64");
} catch (e) {
return '';
return "";
}
};
@@ -79,17 +82,17 @@ export const fetchFile = async function (url: string, init?: FetchInit) {
export const fetchText = async function (
url: string,
init?: FetchInit,
encoding?: string,
encoding?: string
): Promise<string> {
init = await makeInit(init);
console.log(url, init);
try {
const res = await fetch(url, init);
if (!res.ok) return '';
const res = await fetch(url, init as RequestInit);
if (!res.ok) return "";
const arrayBuffer = await res.arrayBuffer();
const decoder = new TextDecoder(encoding);
return decoder.decode(arrayBuffer);
} catch (e) {
return '';
return "";
}
};
package.json
+1 -1
View File
@@ -4,7 +4,7 @@
"description": "Plugins repo for LNReader",
"main": "index.js",
"scripts": {
"start": "tsc-watch --onSuccess \"node ./.js/index.js 3000\"",
"start": "ts-node ./tswatch.ts",
"test": "exit 0",
"json": "tsc && node ./.js/scripts/json_plugins.js",
"generate": "ts-node ./scripts/multisrc/generate.ts",
plugins/english/nobleMTL.ts
+25 -1
View File
@@ -124,10 +124,34 @@ class NobleMTL implements Plugin.PluginBase {
.trim(); // Feb 25, 2024
if (!releaseDate) return;
const months = [
"jan",
"feb",
"mar",
"apr",
"may",
"jun",
"jul",
"aug",
"sep",
"oct",
"nov",
"dec",
];
const rx = new RegExp(
`(${months.join("|")}).*? (\\d{2}).*?(\\d{4})`,
"i"
).exec(releaseDate);
if (!rx) return;
const year = +rx[3];
const month = months.indexOf(rx[1].toLowerCase());
const day = +rx[2];
if (month < 0) return;
chapter.push({
name: chapterName,
releaseTime: new Date(releaseDate).toISOString(),
releaseTime: new Date(year, month, day).toISOString(),
url: chapterUrl,
});
});
plugins/japanese/Syosetu.ts
+125 -40
View File
@@ -1,8 +1,9 @@
import { load as loadCheerio } from "cheerio";
import { fetchFile } from "@libs/fetch";
import { load, load as loadCheerio } from "cheerio";
import { fetchApi, fetchFile } from "@libs/fetch";
import { Plugin } from "@typings/plugin";
import { defaultCover } from "@libs/defaultCover";
import { Filters } from "@libs/filterInputs";
import { FilterTypes, Filters } from "@libs/filterInputs";
import { NovelItem } from "../../test_web/static/js";
// const novelStatus = require('@libs/novelStatus');
// const isUrlAbsolute = require('@libs/isAbsoluteUrl');
// const parseDate = require('@libs/parseDate');
@@ -12,11 +13,11 @@ class Syosetu implements Plugin.PluginBase {
name = "Syosetu";
icon = "src/jp/syosetu/icon.png";
site = "https://yomou.syosetu.com/";
filters?: Filters | undefined;
version = "1.0.0";
version = "1.1.0";
headers = {
"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"
}
"User-Agent":
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
};
searchUrl = (pagenum?: number, order?: string) => {
return `https://yomou.syosetu.com/search.php?order=${order || "hyoka"}${
pagenum !== undefined
@@ -24,37 +25,62 @@ class Syosetu implements Plugin.PluginBase {
: "" // if isn't don't set ?p
}`;
};
async popularNovels(pageNo: number, options: Plugin.PopularNovelsOptions<Filters>): Promise<Plugin.NovelItem[]> {
async popularNovels(
pageNo: number,
{ filters }: Plugin.PopularNovelsOptions<typeof this.filters>
): Promise<Plugin.NovelItem[]> {
const getNovelsFromPage = async (pagenumber: number) => {
// load page
let url = this.site;
const result = await fetch(this.searchUrl(pagenumber), {headers: this.headers});
const body = await result.text();
// Cheerio it!
const cheerioQuery = loadCheerio(body, { decodeEntities: false });
let pageNovels: Plugin.NovelItem[] = [];
// find class=searchkekka_box
cheerioQuery(".searchkekka_box").each(function (i, e) {
// get div with link and name
const novelDIV = cheerioQuery(this).find(".novel_h");
// get link element
const novelA = novelDIV.children()[0];
// add new novel to array
pageNovels.push({
name: novelDIV.text(), // get the name
url: novelA.attribs.href, // get last part of the link
cover: defaultCover,
});
if (!filters.genre.value) {
url += `rank/list/type/${filters.ranking.value}_${filters.modifier.value}/?p=${pagenumber}`;
} else {
url += `rank/${
filters.genre.value.length === 1
? "isekailist"
: "genrelist"
}/type/${filters.ranking.value}_${filters.genre.value}${
filters.modifier.value === "total"
? ""
: `_${filters.modifier.value}`
}/?p=${pagenumber}`;
}
const html = await (await fetchApi(url)).text();
const loadedCheerio = loadCheerio(html, {
decodeEntities: false,
});
// return all novels from this page
return pageNovels;
}
if (
parseInt(loadedCheerio(".is-current").html() || "1") !==
pagenumber
)
return [];
const novels: NovelItem[] = [];
loadedCheerio(".c-card").each((_, e) => {
const anchor = loadedCheerio(e).find(
".p-ranklist-item__title a"
);
const url = anchor.attr("href");
if (!url) return;
const name = anchor.text();
const novel: NovelItem = {
url,
name,
cover: defaultCover,
};
novels.push(novel);
});
return novels;
};
const novels = await getNovelsFromPage(pageNo);
return novels;
}
async parseNovelAndChapters(novelUrl: string): Promise<Plugin.SourceNovel> {
let chapters: Plugin.ChapterItem[] = [];
const result = await fetch(novelUrl, {headers: this.headers});
const result = await fetch(novelUrl, { headers: this.headers });
const body = await result.text();
const loadedCheerio = loadCheerio(body, { decodeEntities: false });
@@ -103,7 +129,7 @@ class Syosetu implements Plugin.PluginBase {
const nameResult = await fetch(
this.searchUrl() + `&word=${novel.name}`,
{headers: this.headers}
{ headers: this.headers }
);
const nameBody = await nameResult.text();
const summaryQuery = loadCheerio(nameBody, {
@@ -129,7 +155,7 @@ class Syosetu implements Plugin.PluginBase {
return novel;
}
async parseChapter(chapterUrl: string): Promise<string> {
const result = await fetch(chapterUrl, {headers: this.headers});
const result = await fetch(chapterUrl, { headers: this.headers });
const body = await result.text();
// create cheerioQuery
@@ -137,20 +163,23 @@ class Syosetu implements Plugin.PluginBase {
decodeEntities: false,
});
let chapterText = cheerioQuery("#novel_honbun") // get chapter text
.html() || '';
let chapterText =
cheerioQuery("#novel_honbun") // get chapter text
.html() || "";
return chapterText;
}
async searchNovels(searchTerm: string, pageNo: number): Promise<Plugin.NovelItem[]> {
async searchNovels(
searchTerm: string,
pageNo: number
): Promise<Plugin.NovelItem[]> {
let novels = [];
// returns list of novels from given page
const getNovelsFromPage = async (pagenumber: number) => {
// load page
const result = await fetch(
this.searchUrl(pagenumber) + `&word=${searchTerm}`,
{headers: this.headers}
);
const url = this.searchUrl(pagenumber) + `&word=${searchTerm}`;
console.log(url);
const result = await fetch(url, { headers: this.headers });
const body = await result.text();
// Cheerio it!
const cheerioQuery = loadCheerio(body, { decodeEntities: false });
@@ -171,7 +200,7 @@ class Syosetu implements Plugin.PluginBase {
});
// return all novels from this page
return pageNovels;
}
};
// counter of loaded pages
// let pagesLoaded = 0;
@@ -181,7 +210,7 @@ class Syosetu implements Plugin.PluginBase {
// pagesLoaded++;
// } while (pagesLoaded < maxPageLoad && isNext); // check if we should load more
novels = await getNovelsFromPage(1);
novels = await getNovelsFromPage(pageNo);
/** Use
* novels.push(...(await getNovelsFromPage(pageNumber)))
@@ -194,6 +223,62 @@ class Syosetu implements Plugin.PluginBase {
async fetchImage(url: string): Promise<string | undefined> {
return fetchFile(url);
}
filters = {
ranking: {
type: FilterTypes.Picker,
label: "Ranked by",
options: [
{ label: "日間", value: "daily" },
{ label: "週間", value: "weekly" },
{ label: "月間", value: "monthly" },
{ label: "四半期", value: "quarter" },
{ label: "年間", value: "yearly" },
{ label: "累計", value: "total" },
],
value: "total",
},
genre: {
type: FilterTypes.Picker,
label: "Ranking Genre",
options: [
{ label: "総ジャンル", value: "" },
{ label: "異世界転生/転移〔恋愛〕〕", value: "1" },
{ label: "異世界転生/転移〔ファンタジー〕", value: "2" },
{ label: "異世界転生/転移〔文芸・SF・その他〕", value: "o" },
{ label: "異世界〔恋愛〕", value: "101" },
{ label: "現実世界〔恋愛〕", value: "102" },
{ label: "ハイファンタジー〔ファンタジー〕", value: "201" },
{ label: "ローファンタジー〔ファンタジー〕", value: "202" },
{ label: "純文学〔文芸〕", value: "301" },
{ label: "ヒューマンドラマ〔文芸〕", value: "302" },
{ label: "歴史〔文芸〕", value: "303" },
{ label: "推理〔文芸〕", value: "304" },
{ label: "ホラー〔文芸〕", value: "305" },
{ label: "アクション〔文芸〕", value: "306" },
{ label: "コメディー〔文芸〕", value: "307" },
{ label: "VRゲーム〔SF〕", value: "401" },
{ label: "宇宙〔SF〕", value: "402" },
{ label: "空想科学〔SF〕", value: "403" },
{ label: "パニック〔SF〕", value: "404" },
{ label: "童話〔その他〕", value: "9901" },
{ label: "詩〔その他〕", value: "9902" },
{ label: "エッセイ〔その他〕", value: "9903" },
{ label: "その他〔その他〕", value: "9999" },
],
value: "",
},
modifier: {
type: FilterTypes.Picker,
label: "Modifier",
options: [
{ label: "すべて", value: "total" },
{ label: "連載中", value: "r" },
{ label: "完結済", value: "er" },
{ label: "短編", value: "t" },
],
value: "total",
},
} satisfies Filters;
}
export default new Syosetu();
test_web/api/plugins.ts
+11 -6
View File
@@ -6,7 +6,7 @@ import { Plugin, isPlugin } from "@typings/plugin";
import { Filters } from "@libs/filterInputs";
const root = path.dirname(require?.main?.filename || "");
export const fetchHeaders: Record<string, string> = {}
export const fetchHeaders: Record<string, string> = {};
export const all_plugins = (): PluginList => {
const res: PluginList = {};
@@ -48,9 +48,12 @@ const getPlugin = async (
): Promise<Plugin.PluginBase | null> => {
console.log("loading plugin", requirePath);
const plugin = await require(requirePath).default;
console.log(plugin);
if (isPlugin(plugin)) return plugin;
console.log("Not a plugin!");
// console.log(plugin);
if (isPlugin(plugin)) {
console.log("loaded plugin", plugin.name);
return plugin;
}
console.error("Not a plugin!");
return null;
};
@@ -59,13 +62,15 @@ export const getFilter = async (pluginRequirePath: string) =>
export const popularNovels = async (
pluginRequirePath: string,
page: number,
options: Plugin.PopularNovelsOptions<Filters>
) => (await getPlugin(pluginRequirePath))?.popularNovels(1, options);
) => (await getPlugin(pluginRequirePath))?.popularNovels(page, options);
export const searchNovels = async (
pluginRequirePath: string,
page: number,
searchTerm: string
) => (await getPlugin(pluginRequirePath))?.searchNovels(searchTerm, 1);
) => (await getPlugin(pluginRequirePath))?.searchNovels(searchTerm, page);
export const parseNovelAndChapters = async (
pluginRequirePath: string,
test_web/index.html
+261 -217
View File
@@ -9,12 +9,14 @@
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/css/mdb5.css">
<link rel="stylesheet/less" type="text/css" href="/static/css/index.less" />
<link rel="stylesheet/less" type="text/css" href="/static/css/accordion.less" />
<script src="/static/js/less.js"></script>
<script src="static/md5Themes/themes.js"></script>
<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/html-sanitize.js" defer></script>
<script src="/static/js/bootstrap.min.js" defer></script>
<script src="/static/js/mdb5.js" defer></script>
<script src="/static/js/accordion.js" defer></script>
<script src="/static/js/index.js" defer></script>
<title>Testing plugin</title>
</head>
@@ -27,6 +29,7 @@
<div id="search-results">
<div id="turnoff-catch"></div>
</div>
<div id="loadedplugin"></div>
</form>
<div class="input-group">
<div class="input-group-append">
@@ -36,7 +39,8 @@
<option value="">Any</option>
</select>
</div>
<button class="btn btn-secondary" id="darkstyletoggle" style="float:left;" onclick="toggleDarkMode(this)">Light mode</div>
<button class="btn btn-secondary" id="darkstyletoggle" style="float:left;" onclick="toggleDarkMode(this)">Light
mode</div>
<script>
const toggleDarkMode = (btn) => {
if (document.body.classList.contains("darkmode")) {
@@ -50,211 +54,50 @@
</script>
</nav>
<div id="test-container">
<div class="test-wrapper" id="headerChanger">
<div class="form-group">
<div class="title">Headers</div>
<div id="headerinfos">
<div class="headerinfo" data-headername="User-Agent">
<span class="headername" >User-Agent</span><b>:</b>
<span class="headervalue"></span>
</div>
<div class="headerinfo">
<span class="headername">Cookie</span><b>:&nbsp;</b>
<span class="headervalue" contenteditable="true" ></span>
</div>
</div>
<button id="addheaderbtn" class="btn-secondary pl-1 pr-1">Add header</button>
<button id="copyascode" class="btn-secondary pl-1 pr-1">Copy as code</button>
<div id="headersnotcopied">Remember to copy the headers into the plugin file after changing them!</div>
<div id="headerscopied" display="none">Copied</div>
</div>
</div>
<div class="test-wrapper" id="popularNovels">
<div class="title">
popularNovels
</div>
<div style="display: inline-block;" class="modal-container">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#filtersModal">
Filters
</button>
<div class="modal fade" id="filtersModal" tabindex="-1" role="dialog"
aria-labelledby="filtersModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="filterModalLabel">Filters</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
<main-accordion class="accordion tests-accordion">
<accordion-box class="accordion-box" id="headerChanger" collapsed>
<accordion-header>
Headers
</accordion-header>
<accordion-content>
<div id="headerinfos">
<div class="headerinfo" data-headername="User-Agent">
<span class="headername">User-Agent</span><b>:</b>
<span class="headervalue"></span>
</div>
<div class="headerinfo">
<span class="headername">Cookie</span><b>:&nbsp;</b>
<span class="headervalue" contenteditable="true"></span>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary popularNovels-btn">fetch</button>
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="novel-list">
</div>
</div>
<div class="test-wrapper" id="searchNovels">
<div class="title">
searchNovels
<div class="input-group">
<input type="text" class="form-control" placeholder="searchTerm">
<div class="input-group-append">
<button class="btn btn-primary searchNovels-btn" type="button">search</button>
<button id="addheaderbtn" class="btn-secondary pl-1 pr-1">Add header</button>
<button id="copyascode" class="btn-secondary pl-1 pr-1">Copy as code</button>
<div id="headersnotcopied">Remember to copy the headers into the plugin file after changing them!
</div>
</div>
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="novel-list">
</div>
</div>
<div class="test-wrapper" id="parseNovelAndChapters">
<div class="title">
parseNovelAndChapters
<div class="input-group">
<input type="text" class="form-control" placeholder="novel url" id="parse-novel-url">
<div class="input-group-append">
<button class="btn btn-primary parseNovelAndChapters-btn" type="button"
id="parse-novel-btn">fetch</button>
</div>
</div>
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="novel-list">
<div class="novel-item">
</div>
<div class="chapter-list-container">
<div class="chapter-list">
</div>
</div>
</div>
</div>
<div class="test-wrapper" id="parseChapter">
<div class="title">
parseChapter
<div class="input-group">
<input type="text" class="form-control" placeholder="chapter url" id="chapter-parse-url">
<div class="input-group-append">
<button class="btn btn-primary parseChapter-btn" type="button"
id="chapter-parse-btn">fetch</button>
</div>
</div>
<div id="preview-toggler">
<div class="slider-checkbox">
<label>
<input type="checkbox" id="raw-preview-switch" />
<span>Raw</span>
</label>
</div>
<div class="slider-checkbox">
<label>
<input type="checkbox" id="sanitize-preview-html" />
<span>Sanitized HTML</span>
</label>
</div>
<div id="scaled-info"></div>
<div class="modal-container">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#settingsModal">
Preview settings
<div id="headerscopied" display="none">Copied</div>
</accordion-content>
</accordion-box>
<accordion-box id="popularNovels" collapsed>
<accordion-header>
popularNovels
</accordion-header>
<accordion-content>
<div style="display: inline-block;" class="modal-container">
<button id="filters-btn" type="button" class="btn btn-primary" data-toggle="modal"
data-target="#filtersModal">
Filters
</button>
<div class="modal fade" id="settingsModal" tabindex="-1" role="dialog"
aria-labelledby="settingsModalLabel" aria-hidden="true">
<div class="modal fade" id="filtersModal" tabindex="-1" role="dialog"
aria-labelledby="filtersModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="settingsModalLabel">Settings</h5>
<h5 class="modal-title" id="filterModalLabel">Filters</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div>
<label class="filter-label">Preview Size</label>
<div id="size-input">
<div>
<select id="size-preset">
<option value="800,1200">Default</option>
<option value="2200,2480">8" Fold</option>
<option value="1536,2048">Nexus 9 (Tablet)</option>
<option value="1440,2560">Pixel XL</option>
<option value="1440,3120">Pixel 6 Pro</option>
<option value="1080,2400">Pixel 6</option>
<option value="1080,2340">Pixel 5</option>
<option value="1440,3040">Pixel 4 XL</option>
<option value="1080,2280">Pixel 4</option>
<option value="1080,2160">Pixel 3</option>
<option value="1080,1920">Pixel 2</option>
<option value="768,1280">Nexus 4</option>
<option value="720,1280">720p</option>
<option value="480,854">480p</option>
<option value="480,800">Nexus One</option>
<option value="320,480">320p</option>
</select>
<div class="btn btn-primary" id="load-preset-size">Load preset</div>
</div>
<div>
<input type="number" id="width-input"
style="display:inline-block" />
<input type="number" id="height-input"
style="display:inline-block" />
<div class="btn btn-primary" id="swap-iframe-size">Rotate</div>
</div>
</div>
</div>
<div>
<label class="filter-label">Theme</label>
<div id="theme-picker">
</div>
</div>
<div>
<label class="filter-label">Background Color</label>
<input type="text" id="bgc-input" />
</div>
<div>
<label class="filter-label">Text Color</label>
<input type="text" id="txt-input" />
</div>
<div>
<label class="filter-label">Text Align</label>
<select id="ta-input" class="custom-select">
<option value="left" selected>Left</option>
<option value="right">Right</option>
<option value="center">Center</option>
<option value="justify">Justify</option>
</select>
</div>
<div>
<label class="filter-label">Font Size</label>
<input type="number" id="fs-input" />
</div>
<div>
<label class="filter-label">Line Height</label>
<input step="0.1" type="number" id="lh-input" />
</div>
<hr />
<div>
<label class="filter-label">Custom CSS</label>
<textarea rows="5" id="css-ta"></textarea>
</div>
<hr />
<div>
<label class="filter-label">Custom JS</label>
<textarea rows="5" id="js-ta"></textarea>
</div>
<hr />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
@@ -264,30 +107,231 @@
</div>
</div>
</div>
</div>
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="form-group" id="chapter-viewer">
</div>
</div>
<div class="test-wrapper" id="fetchImage">
<div class="title">
fetchImage
<div class="input-group">
<input type="text" class="form-control" placeholder="image url (should be in chapterText)">
<div class="input-group-append">
<button class="btn btn-primary fetchImage-btn" type="button">fetch</button>
<div class="inline-container fetch-btn">
<button type="button" class="btn btn-primary popularNovels-btn">fetch</button>
</div>
</div>
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<img src="" style="min-height: 300px; max-width: 450px;" alt="">
</div>
</div>
<div class="inline-container page-select">
<select>
<option>1</option>
</select>
<span class="page-the-same-warn"></span>
</div>
<div class="inline-slider-checkbox">
<label>
<input type="checkbox" id="latest-switch" />
<span>Popular</span>
</label>
</div>
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="novel-list">
</div>
</accordion-content>
</accordion-box>
<accordion-box id="searchNovels" collapsed>
<accordion-header>
searchNovels
</accordion-header>
<accordion-content>
<div class="searchbar">
<div class="input-group">
<input type="text" class="form-control" placeholder="searchTerm">
<div class="input-group-append fetch-btn">
<button class="btn btn-primary searchNovels-btn" type="button">search</button>
</div>
</div>
</div>
<div class="inline-container page-select">
<select>
<option>1</option>
</select>
<span class="page-the-same-warn"></span>
</div>
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="novel-list">
</div>
</accordion-content>
</accordion-box>
<accordion-box id="parseNovelAndChapters" collapsed>
<accordion-header>
parseNovelAndChapters
</accordion-header>
<accordion-content>
<div class="input-group">
<input type="text" class="form-control" placeholder="novel url" id="parse-novel-url">
<div class="input-group-append">
<button class="btn btn-primary parseNovelAndChapters-btn" type="button"
id="parse-novel-btn">fetch</button>
</div>
</div>
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="parsed-novel-info">
<div class="novel-item">
</div>
<div class="chapter-list-container">
<div class="chapter-list">
</div>
</div>
</div>
</accordion-content>
</accordion-box>
<accordion-box id="parseChapter" collapsed>
<accordion-header>
parseChapter
</accordion-header>
<accordion-content>
<div class="input-group">
<input type="text" class="form-control" placeholder="chapter url" id="chapter-parse-url">
<div class="input-group-append">
<button class="btn btn-primary parseChapter-btn" type="button"
id="chapter-parse-btn">fetch</button>
</div>
</div>
<div id="preview-toggler">
<div class="slider-checkbox">
<label>
<input type="checkbox" id="raw-preview-switch" />
<span>Raw</span>
</label>
</div>
<div class="slider-checkbox">
<label>
<input type="checkbox" id="sanitize-preview-html" />
<span>Sanitized HTML</span>
</label>
</div>
<div id="scaled-info"></div>
<div class="modal-container">
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#settingsModal">
Preview settings
</button>
<div class="modal fade" id="settingsModal" tabindex="-1" role="dialog"
aria-labelledby="settingsModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="settingsModalLabel">Settings</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div>
<label class="filter-label">Preview Size</label>
<div id="size-input">
<div>
<select id="size-preset">
<option value="800,1200">Default</option>
<option value="2200,2480">8" Fold</option>
<option value="1536,2048">Nexus 9 (Tablet)</option>
<option value="1440,2560">Pixel XL</option>
<option value="1440,3120">Pixel 6 Pro</option>
<option value="1080,2400">Pixel 6</option>
<option value="1080,2340">Pixel 5</option>
<option value="1440,3040">Pixel 4 XL</option>
<option value="1080,2280">Pixel 4</option>
<option value="1080,2160">Pixel 3</option>
<option value="1080,1920">Pixel 2</option>
<option value="768,1280">Nexus 4</option>
<option value="720,1280">720p</option>
<option value="480,854">480p</option>
<option value="480,800">Nexus One</option>
<option value="320,480">320p</option>
</select>
<div class="btn btn-primary" id="load-preset-size">Load preset
</div>
</div>
<div>
<input type="number" id="width-input"
style="display:inline-block" />
<input type="number" id="height-input"
style="display:inline-block" />
<div class="btn btn-primary" id="swap-iframe-size">Rotate</div>
</div>
</div>
</div>
<div>
<label class="filter-label">Theme</label>
<div id="theme-picker">
</div>
</div>
<div>
<label class="filter-label">Background Color</label>
<input type="text" id="bgc-input" />
</div>
<div>
<label class="filter-label">Text Color</label>
<input type="text" id="txt-input" />
</div>
<div>
<label class="filter-label">Text Align</label>
<select id="ta-input" class="custom-select">
<option value="left" selected>Left</option>
<option value="right">Right</option>
<option value="center">Center</option>
<option value="justify">Justify</option>
</select>
</div>
<div>
<label class="filter-label">Font Size</label>
<input type="number" id="fs-input" />
</div>
<div>
<label class="filter-label">Line Height</label>
<input step="0.1" type="number" id="lh-input" />
</div>
<hr />
<div>
<label class="filter-label">Custom CSS</label>
<textarea rows="5" id="css-ta"></textarea>
</div>
<hr />
<div>
<label class="filter-label">Custom JS</label>
<textarea rows="5" id="js-ta"></textarea>
</div>
<hr />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
<div class="form-group" id="chapter-viewer">
</div>
</accordion-content>
</accordion-box>
<accordion-box id="fetchImage" collapsed>
<accordion-header>
fetchImage
</accordion-header>
<accordion-content>
<div class="input-group">
<input type="text" class="form-control" placeholder="image url (should be in chapterText)">
<div class="input-group-append">
<button class="btn btn-primary fetchImage-btn" type="button">fetch</button>
</div>
</div>
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
<img src="" style="min-height: 300px; max-width: 450px;" alt="">
</accordion-content>
</accordion-box>
</main-accordion>
</body>
</html>
test_web/static/css/accordion.less
+72
View File
@@ -0,0 +1,72 @@
:root {
--accordion-animation: 0.4s ease;
}
/** Accordion header button styles */
accordion-box {
display: grid;
margin: 0.2rem 1rem;
padding: 0.5rem;
background-color: aliceblue;
&:not([collapsed]) {
accordion-header {
button {
color: #000;
background-color: white;
}
button:after {
background-image: var(--mdb-accordion-btn-active-icon);
transform: var(--mdb-accordion-btn-icon-transform);
}
}
accordion-content {
grid-template-rows: 1fr;
}
}
accordion-content {
display: grid;
grid-template-rows: 0fr;
padding-inline: 5px;
transition: grid-template-rows var(--accordion-animation);
.accordion-animation-content {
overflow-y: hidden;
}
}
accordion-header {
display: block;
button {
font-weight: bolder;
position: relative;
display: flex;
align-items: center;
width: 100%;
padding: 5px;
font-size: 1rem;
text-align: left;
background-color: white;
color: #aaaa;
border: 0;
border-radius: 0;
overflow-anchor: none;
&:after {
flex-shrink: 0;
width: var(--mdb-accordion-btn-icon-width);
height: var(--mdb-accordion-btn-icon-width);
margin-left: auto;
content: "";
background-image: var(--mdb-accordion-btn-icon);
background-repeat: no-repeat;
background-size: var(--mdb-accordion-btn-icon-width);
transition: var(--mdb-accordion-btn-icon-transition);
}
&:hover {
z-index: 2;
}
&:focus {
z-index: 3;
box-shadow: var(--mdb-accordion-btn-focus-box-shadow);
}
}
}
}
test_web/static/css/darkmode.less
+36 -19
View File
@@ -12,6 +12,33 @@
.darkmode {
color-scheme: dark;
background-color: var(--main-bg);
main-accordion {
accordion-box {
&:not([collapsed]) {
accordion-header {
button {
color: white;
}
}
}
accordion-header {
button {
color: #cccc;
background-color: var(--main-bg);
}
}
background-color: var(--highlight-bg);
color: var(--text-color);
input {
&[type="text"] {
background-color: var(--main-bg);
border-color: var(--dark-border-color);
}
}
}
}
.headerinfo span[contenteditable="true"] {
border: 1px solid #fff2;
}
@@ -34,6 +61,15 @@
color: var(--text-color);
border-color: var(--dark-border-color);
}
#search-results {
color: var(--text-color);
background-color: transparent;
button {
background-color: var(--hr-color);
color: var(--dark-label-color);
font-weight: bolder;
}
}
}
button.btn-secondary {
background-color: var(--btn-secondary-color);
@@ -41,15 +77,6 @@
box-shadow: none;
}
}
#search-results {
color: var(--text-color);
background-color: transparent;
button {
background-color: var(--hr-color);
color: var(--dark-label-color);
font-weight: bolder;
}
}
#darkstyletoggle {
color: var(--dark-label-color);
}
@@ -80,16 +107,6 @@
background-color: var(--main-bg);
border-color: var(--dark-border-color);
}
.test-wrapper {
background-color: var(--highlight-bg);
color: var(--text-color);
input {
&[type="text"] {
background-color: var(--main-bg);
border-color: var(--dark-border-color);
}
}
}
.modal-content {
background-color: var(--main-bg);
.close {
test_web/static/css/index.less
+307 -295
View File
@@ -6,6 +6,10 @@
box-sizing: border-box;
}
#loadedplugin {
margin-left: 5px;
}
.navbar {
width: 100vw;
align-items: center;
@@ -18,25 +22,312 @@
button.btn-secondary {
padding-inline: 5px;
}
}
#search-results {
position: absolute;
top: calc(100% - 0.5rem);
width: fit-content;
max-height: 500%;
overflow-y: scroll;
overflow-x: hidden;
padding: 0.375rem 0;
border-radius: 5px;
background-color: transparent;
z-index: 3;
button {
background-color: white;
text-transform: capitalize;
.input-group {
width: 20rem;
}
#search-results {
display: none;
position: absolute;
top: calc(100% - 0.5rem);
width: fit-content;
max-height: 500%;
overflow-y: scroll;
overflow-x: hidden;
padding: 0.375rem 0;
border-radius: 5px;
background-color: transparent;
z-index: 3;
button {
background-color: white;
text-transform: capitalize;
}
}
}
.btn {
font-size: 0.75rem;
padding: 0.25rem 0.25rem;
&.disabled,
&:disabled {
opacity: 1;
}
}
@keyframes spinner-border {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.inline-container {
display: inline-block;
}
#popularNovels {
.page-select {
display: none;
}
}
#searchNovels {
.page-select {
display: none;
}
.searchbar {
width: fit-content;
display: inline-block;
}
}
.page-the-same-warn {
color: orange;
}
.fetch-btn button,
#filters-btn {
&:disabled {
background-color: gray;
box-shadow: none;
}
}
.spinner-border {
display: none;
width: 1rem;
height: 1rem;
vertical-align: text-bottom;
border: 0.25em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
-webkit-animation: spinner-border 0.75s linear infinite;
animation: spinner-border 0.75s linear infinite;
}
.headerinfo {
margin-bottom: 5px;
span[contenteditable="true"] {
border: 1px solid black;
padding: 3px 10px;
display: inline;
}
#headersnotcopied,
#headerscopied {
font-size: 1.3rem;
}
#headersnotcopied {
color: red;
display: none;
}
#headerscopied {
color: green;
display: none;
}
.headereditbutton {
margin-left: 5px;
border: none;
padding-inline: 5px;
}
}
.novel-list {
display: grid;
overflow-x: scroll;
width: 100%;
margin-top: 5px;
padding-bottom: 15px;
padding-left: 5px;
grid-auto-flow: column;
gap: 5px;
align-items: center;
.error {
color: red;
grid-row: 2;
}
}
.novel-item {
display: grid;
grid-auto-flow: column;
display: grid;
gap: 5px;
}
.novel-info {
display: flex;
flex-direction: column;
}
.novel-img {
display: grid;
width: fit-content;
justify-content: center;
align-content: center;
img {
max-width: 300px;
max-height: 300px;
}
}
/* comment */
.info-item {
display: grid;
min-width: 300px;
grid-auto-columns: min-content auto 50px;
margin-top: 5px;
grid-auto-flow: column;
div {
display: grid;
align-items: center;
}
}
.parse-novel-btn {
width: 85%;
margin-inline: auto;
margin-top: 5px;
}
.parsed-novel-info {
display: grid;
grid-auto-flow: column;
gap: 20px;
grid-auto-columns: 1.5fr 1fr;
}
.chapter-list-container {
max-height: 400px;
overflow-y: scroll;
}
.chapter-list {
column-count: 2;
}
.chapter-item {
margin-top: 5px;
break-inside: avoid;
display: grid;
grid-template-areas: "name btn1 btn2" "date btn1 btn2";
}
.ci-topleft {
grid-area: name;
}
.ci-bottomleft {
grid-area: date;
}
.ci-btn1 {
grid-area: btn1;
}
.ci-btn2 {
grid-area: btn2;
}
.select-option-text {
padding-left: 1rem;
}
/* Slider checkbox */
.inline-slider-checkbox {
display: inline;
}
.inline-slider-checkbox,
.slider-checkbox {
--ball-width: 15px;
--box-margin: 5px;
--box-width: calc(2 * var(--ball-width) + var(--box-margin));
input {
display: none;
}
label {
height: fit-content;
width: fit-content;
span {
position: relative;
left: calc(var(--box-margin) + var(--box-width));
user-select: none;
&::after {
transition: 0.2s ease-out;
position: absolute;
content: "";
top: calc((100% - var(--ball-width)) / 2);
width: var(--ball-width);
height: var(--ball-width);
left: calc(-1 * (var(--box-width) + var(--box-margin)) + 2px);
border-radius: 50%;
display: inline-block;
background-color: rgb(0, 60, 255);
}
&::before {
position: absolute;
top: 0;
left: calc(-1 * var(--box-width) - var(--box-margin));
content: "";
width: var(--box-width);
height: 100%;
border-radius: 10px;
background-color: red;
display: inline-block;
}
}
input:checked ~ span::after {
left: calc(-1 * (var(--box-margin) + var(--ball-width) + 3px));
background-color: rgb(0, 60, 255);
}
input:checked ~ span::before {
background-color: rgb(0, 255, 0);
}
}
}
iframe {
margin: 0 auto;
border: 1px solid black;
background-color: white;
display: block;
overflow: scroll;
}
#preview-toggler {
display: flex;
flex-direction: row;
gap: 50px;
}
#theme-picker {
display: grid;
grid-template-columns: repeat(5, auto);
gap: 10px;
justify-content: center;
.theme {
width: 50px;
height: 50px;
padding: 5px;
word-wrap: break-word;
word-break: break-all;
border-radius: 50%;
border: 1px solid gray;
transition-duration: 0.2s;
display: grid;
text-align: center;
justify-content: center;
align-content: center;
&:hover {
border: 1px solid blue;
cursor: pointer;
transform: translateY(-5px);
}
}
}
#size-input {
select {
padding: 5px;
}
& > div:first-child {
margin-bottom: 5px;
}
}
#turnoff-catch {
width: 100vw;
height: 100vh;
@@ -218,282 +509,3 @@
margin-inline: auto;
}
}
#test-container {
align-items: center;
height: max-content;
margin-bottom: 100px;
}
.test-wrapper {
margin: 1rem;
padding: 0.5rem;
background-color: aliceblue;
}
#popularNovels,
#headerChanger,
#searchNovels,
#parseNovelAndChapters,
#parseChapter,
#fetchImage {
min-width: 95%;
max-width: 95%;
margin-inline: auto;
}
.headerinfo {
margin-bottom: 5px;
span[contenteditable="true"] {
border: 1px solid black;
padding: 3px 10px;
display: inline;
}
}
#headersnotcopied,
#headerscopied {
font-size: 1.3rem;
}
#headersnotcopied {
color: red;
display: none;
}
#headerscopied {
color: green;
display: none;
}
.headereditbutton {
margin-left: 5px;
border: none;
padding-inline: 5px;
}
#popularNovels,
#searchNovels {
height: 350px;
overflow-y: hidden;
overflow-x: scroll;
}
.novel_info {
display: grid;
grid-auto-flow: row;
grid-auto-rows: min-content;
}
.parse-novel-btn {
width: 85%;
margin-inline: auto;
margin-top: 5px;
}
#parseNovelAndChapters {
height: 380px;
}
.title {
font-weight: bold;
}
@keyframes spinner-border {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.spinner-border {
display: none;
width: 1rem;
height: 1rem;
vertical-align: text-bottom;
border: 0.25em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
-webkit-animation: spinner-border 0.75s linear infinite;
animation: spinner-border 0.75s linear infinite;
}
.novel-list {
display: flex;
margin-top: 0.5rem;
height: 300px;
width: 100%;
}
.novel-item {
display: flex;
padding: 0.5rem;
img {
max-height: 90%;
}
}
.novel-info {
width: 16rem;
}
/* comment */
.info-item {
display: grid;
grid-auto-columns: min-content auto 50px;
margin-top: 5px;
grid-auto-flow: column;
div {
display: grid;
align-items: center;
}
}
.info-value {
width: 10rem;
padding-inline: 0.25rem;
font-size: 0.65rem;
word-wrap: break-word;
}
.info-copy {
display: grid;
align-content: center;
}
.btn {
font-size: 0.75rem;
padding: 0.25rem 0.25rem;
&.disabled,
&:disabled {
opacity: 1;
}
}
.chapter-list-container {
max-height: 95%;
overflow-y: scroll;
}
.chapter-list {
column-count: 2;
}
.chapter-item {
display: grid;
grid-template-areas: "name btn1 btn2" "date btn1 btn2";
}
.ci-topleft {
grid-area: name;
}
.ci-bottomleft {
grid-area: date;
}
.ci-btn1 {
grid-area: btn1;
}
.ci-btn2 {
grid-area: btn2;
}
.select-option-text {
padding-left: 1rem;
}
/* Slider checkbox */
.slider-checkbox {
--ball-width: 15px;
--box-margin: 5px;
--box-width: calc(2 * var(--ball-width) + var(--box-margin));
input {
display: none;
}
label {
height: fit-content;
width: fit-content;
span {
position: relative;
left: calc(var(--box-margin) + var(--box-width));
user-select: none;
&::after {
transition: 0.2s ease-out;
position: absolute;
content: "";
top: calc((100% - var(--ball-width)) / 2);
width: var(--ball-width);
height: var(--ball-width);
left: calc(-1 * (var(--box-width) + var(--box-margin)) + 2px);
border-radius: 50%;
display: inline-block;
background-color: rgb(0, 60, 255);
}
&::before {
position: absolute;
top: 0;
left: calc(-1 * var(--box-width) - var(--box-margin));
content: "";
width: var(--box-width);
height: 100%;
border-radius: 10px;
background-color: red;
display: inline-block;
}
}
input:checked ~ span::after {
left: calc(-1 * (var(--box-margin) + var(--ball-width) + 3px));
background-color: rgb(0, 60, 255);
}
input:checked ~ span::before {
background-color: rgb(0, 255, 0);
}
}
}
iframe {
margin: 0 auto;
border: 1px solid black;
background-color: white;
display: block;
overflow: scroll;
}
#preview-toggler {
display: flex;
flex-direction: row;
gap: 50px;
}
#theme-picker {
display: grid;
grid-template-columns: repeat(5, auto);
gap: 10px;
justify-content: center;
.theme {
width: 50px;
height: 50px;
padding: 5px;
word-wrap: break-word;
word-break: break-all;
border-radius: 50%;
border: 1px solid gray;
transition-duration: 0.2s;
display: grid;
text-align: center;
justify-content: center;
align-content: center;
&:hover {
border: 1px solid blue;
cursor: pointer;
transform: translateY(-5px);
}
}
}
#size-input {
select {
padding: 5px;
}
& > div:first-child {
margin-bottom: 5px;
}
}
test_web/static/css/index_old.less
+445
View File
@@ -0,0 +1,445 @@
@import "./darkmode";
#search-results {
position: absolute;
top: calc(100% - 0.5rem);
width: fit-content;
max-height: 500%;
overflow-y: scroll;
overflow-x: hidden;
padding: 0.375rem 0;
border-radius: 5px;
background-color: transparent;
z-index: 3;
button {
background-color: white;
text-transform: capitalize;
}
}
#turnoff-catch {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.input-group {
width: 20rem;
}
.checkbox-groupbox {
border: 1px solid rgb(182, 176, 166);
padding: 5px;
display: grid;
gap: 10px;
grid-template-columns: repeat(3, auto);
justify-content: center;
}
.xcheckbox-groupbox {
border: 1px solid rgb(182, 176, 166);
padding: 5px;
display: grid;
gap: 10px;
grid-template-columns: repeat(3, auto);
justify-content: center;
}
.xcheckbox {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* Hide the browser's default checkbox */
input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
span {
position: absolute;
top: 6px;
left: 5px;
height: 20px;
width: 20px;
background-color: #eee;
border: 1px solid white;
&::after {
content: "";
position: absolute;
display: none;
}
}
&[data-state="i"] {
span {
background-color: #2196f3;
&::after {
left: 6px;
top: 3px;
width: 6px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
}
&:hover {
span {
background-color: #56a3ff;
}
}
}
&[dara-state="x"] {
span {
background-color: #f32196;
position: absolute;
height: 20px;
width: 20px;
display: flex;
flex-direction: column;
justify-content: center;
background-color: red;
&::after,
&::before {
position: absolute;
content: "";
width: 80%;
left: 10%;
height: 2px;
background-color: white;
}
&::before {
transform: rotate(45deg);
}
&::after {
transform: rotate(-45deg);
}
}
&:hover {
span {
background-color: #ff56a3;
}
input ~ span {
background-color: #ccc;
}
}
}
input:checked ~ span::after {
display: block;
}
}
.modal-body {
padding: 16px 50px 0 50px;
}
.checkbox-groupbox input {
margin-right: 5px;
}
.SwitchFilter {
display: flex;
justify-content: center;
}
.SwitchFilter input {
margin-left: 10px;
}
.PickerFilter select {
text-align: center;
}
.filter-label {
display: block;
text-align: center;
font-weight: bold;
}
#filtersModal {
.modal-body div {
display: grid;
align-content: center;
}
hr {
margin-bottom: 10px;
margin-top: 10px;
/* visibility: hidden; */
}
}
#settingsModal {
.modal-body > div {
display: grid;
align-content: center;
}
input {
text-align: center;
}
textarea {
display: block;
width: 100%;
margin-inline: auto;
}
}
#test-container {
align-items: center;
height: max-content;
margin-bottom: 100px;
}
.accordion-box {
margin: 1rem;
padding: 0.5rem;
background-color: aliceblue;
}
#popularNovels,
#headerChanger,
#searchNovels,
#parseNovelAndChapters,
#parseChapter,
#fetchImage {
min-width: 95%;
max-width: 95%;
margin-inline: auto;
}
#popularNovels,
#searchNovels {
overflow-x: scroll;
}
.novel_info {
display: grid;
grid-auto-flow: row;
grid-auto-rows: min-content;
}
.parse-novel-btn {
width: 85%;
margin-inline: auto;
margin-top: 5px;
}
.title {
font-weight: bold;
}
@keyframes spinner-border {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.spinner-border {
display: none;
width: 1rem;
height: 1rem;
vertical-align: text-bottom;
border: 0.25em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
-webkit-animation: spinner-border 0.75s linear infinite;
animation: spinner-border 0.75s linear infinite;
}
.novel-list {
display: flex;
overflow-x: scroll;
scrollbar-width: 5px;
margin-top: 0.5rem;
height: 300px;
width: 100%;
}
.novel-item {
display: flex;
padding: 0.5rem;
img {
max-height: 90%;
}
}
.novel-info {
width: 16rem;
}
/* comment */
.info-item {
display: grid;
grid-auto-columns: min-content auto 50px;
margin-top: 5px;
grid-auto-flow: column;
div {
display: grid;
align-items: center;
}
}
.info-value {
width: 10rem;
padding-inline: 0.25rem;
font-size: 0.65rem;
word-wrap: break-word;
}
.info-copy {
display: grid;
align-content: center;
}
.btn {
font-size: 0.75rem;
padding: 0.25rem 0.25rem;
&.disabled,
&:disabled {
opacity: 1;
}
}
.chapter-list-container {
max-height: 95%;
overflow-y: scroll;
}
.chapter-list {
column-count: 2;
}
.chapter-item {
display: grid;
grid-template-areas: "name btn1 btn2" "date btn1 btn2";
}
.ci-topleft {
grid-area: name;
}
.ci-bottomleft {
grid-area: date;
}
.ci-btn1 {
grid-area: btn1;
}
.ci-btn2 {
grid-area: btn2;
}
.select-option-text {
padding-left: 1rem;
}
/* Slider checkbox */
.slider-checkbox {
--ball-width: 15px;
--box-margin: 5px;
--box-width: calc(2 * var(--ball-width) + var(--box-margin));
input {
display: none;
}
label {
height: fit-content;
width: fit-content;
span {
position: relative;
left: calc(var(--box-margin) + var(--box-width));
user-select: none;
&::after {
transition: 0.2s ease-out;
position: absolute;
content: "";
top: calc((100% - var(--ball-width)) / 2);
width: var(--ball-width);
height: var(--ball-width);
left: calc(-1 * (var(--box-width) + var(--box-margin)) + 2px);
border-radius: 50%;
display: inline-block;
background-color: rgb(0, 60, 255);
}
&::before {
position: absolute;
top: 0;
left: calc(-1 * var(--box-width) - var(--box-margin));
content: "";
width: var(--box-width);
height: 100%;
border-radius: 10px;
background-color: red;
display: inline-block;
}
}
input:checked ~ span::after {
left: calc(-1 * (var(--box-margin) + var(--ball-width) + 3px));
background-color: rgb(0, 60, 255);
}
input:checked ~ span::before {
background-color: rgb(0, 255, 0);
}
}
}
iframe {
margin: 0 auto;
border: 1px solid black;
background-color: white;
display: block;
overflow: scroll;
}
#preview-toggler {
display: flex;
flex-direction: row;
gap: 50px;
}
#theme-picker {
display: grid;
grid-template-columns: repeat(5, auto);
gap: 10px;
justify-content: center;
.theme {
width: 50px;
height: 50px;
padding: 5px;
word-wrap: break-word;
word-break: break-all;
border-radius: 50%;
border: 1px solid gray;
transition-duration: 0.2s;
display: grid;
text-align: center;
justify-content: center;
align-content: center;
&:hover {
border: 1px solid blue;
cursor: pointer;
transform: translateY(-5px);
}
}
}
#size-input {
select {
padding: 5px;
}
& > div:first-child {
margin-bottom: 5px;
}
}
test_web/static/js/accordion.js
+92
View File
@@ -0,0 +1,92 @@
/** @ts-check */
class AccordionContent extends HTMLElement {
constructor() {
super();
this.gridElement = document.createElement("div");
}
get content() {
return this.gridElement;
}
connectedCallback() {
// create a div that'll animate the collapsing
this.gridElement.append(...Array.from(this.childNodes));
this.gridElement.classList.add("accordion-animation-content");
this.innerHTML = "";
this.append(this.gridElement);
}
}
class AccordionHeader extends HTMLElement {
constructor() {
super();
console.log("contructor?");
this.btn = document.createElement("button");
}
get html() {
return this.btn.innerHTML;
}
set html(val) {
this.btn.innerHTML = val;
}
get text() {
return this.btn.innerText;
}
set text(val) {
this.btn.innerText = val;
}
get parentBox() {
return this.parentElement;
}
connectedCallback() {
console.log("I AM ON THE SCREEN, DO YOUR FUCKING JOB");
const childNodes = Array.from(this.childNodes);
this.innerHTML = "";
this.btn.append(...childNodes);
this.append(this.btn);
this.btn.addEventListener("click", this._btnClicked.bind(this));
}
_btnClicked() {
this.parentBox?.toggle();
}
}
class AccordionBox extends HTMLElement {
constructor() {
super();
}
get collapsed() {
return this.hasAttribute("collapsed");
}
set collapsed(val) {
if (val) {
this.setAttribute("collapsed", "");
} else {
this.removeAttribute("collapsed");
}
}
toggle() {
this.collapsed = !this.collapsed;
}
}
class Accordion extends HTMLElement {
constructor() {
super();
}
}
window.customElements.define("main-accordion", Accordion);
window.customElements.define("accordion-box", AccordionBox);
window.customElements.define("accordion-header", AccordionHeader);
window.customElements.define("accordion-content", AccordionContent);
// Export types for use in index.js
const module = {};
module.exports = {
AccordionBox,
Accordion,
AccordionContent,
AccordionHeader,
};
test_web/static/js/index.js
+1552 -1247
View File
File diff suppressed because it is too large Load Diff
test_web/static/js/index_old.js
+1315
View File
File diff suppressed because it is too large Load Diff
test_web/static/js/types.d.ts
Vendored
+1
View File
@@ -1,4 +1,5 @@
interface Window {
themes: Record<string, ThemeType>;
sanitizeChapterText(html: string, options?: Options);
encodeHTML5(html: string, options?: Options);
}
tswatch.ts
+18
View File
@@ -0,0 +1,18 @@
import { TscWatchClient } from "tsc-watch/client";
const watch = new TscWatchClient();
let port = Number(process.argv[2]);
if (!port) {
console.log(`Port not specified! Setting default 3000!
Run \`npm start -- <port>\` to change it
`);
port = 3000;
}
watch.start("--onSuccess", `node ./.js/index.js ${port}`);
try {
} catch (e) {
watch.kill(); // Fatal error, kill the compiler instance.
}