nyagami
1617 lines
49 KiB
JavaScript
1617 lines
49 KiB
JavaScript
// @ts-check
|
|
/* Imports */
|
|
/** @typedef {import("@libs/filterInputs").Filters} Filters */
|
|
/** @typedef {import("@typings/types").PluginList} PluginList */
|
|
/** @typedef {import("@typings/plugin").Plugin.PluginItem} PluginItem */
|
|
/** @typedef {import("@typings/plugin").Plugin.ChapterItem} ChapterItem */
|
|
/** @typedef {import("@typings/plugin").Plugin.NovelItem} NovelItem */
|
|
/** @typedef {import("@typings/plugin").Plugin.SourceNovel & {totalPages?: number}} SourceNovel */
|
|
/** @typedef {import("@typings/plugin").Plugin.SourcePage} SourcePage */
|
|
/** @typedef {import("@libs/filterInputs").FilterTypes} FilterTypes */
|
|
/** @typedef {import("@libs/filterInputs").FilterTypes.CheckboxGroup} CheckboxGroup */
|
|
/**
|
|
* @template {FilterTypes} T
|
|
* @typedef {import("@libs/filterInputs").ValueOfFilter<T>} ValueOfFilter<T> */
|
|
/**
|
|
* @template {Filters} T
|
|
* @typedef {import("@libs/filterInputs").FilterToValues<T>} FilterToValues<T>
|
|
*/
|
|
/** @typedef {{backgroundColor:string, textColor:string}} Theme */
|
|
/** @typedef {Theme[]} Themes */
|
|
/** @typedef {import("./accordion").AccordionBox} AccordionBox */
|
|
/// <reference path="./types.d.ts" />
|
|
|
|
// #region DOM Queries
|
|
const nav = $('nav');
|
|
|
|
/** @type {JQuery<AccordionBox>} */
|
|
const headerChanger = $('#headerChanger');
|
|
|
|
/** @type {JQuery<AccordionBox>} */
|
|
const popularNovels = $('#popularNovels');
|
|
/** @type {JQuery<HTMLDivElement>} */
|
|
const popularNovels_page_select = $('#popularNovels .page-select');
|
|
/** @type {JQuery<HTMLDivElement>} */
|
|
const popularNovels_fetch_btn = $('#popularNovels .fetch-btn');
|
|
/** @type {JQuery<HTMLDivElement>} */
|
|
const popularNovels_spinner = $('#popularNovels .spinner-border');
|
|
/** @type {JQuery<HTMLDivElement>} */
|
|
const popularNovels_novel_list = $('#popularNovels .novel-list');
|
|
|
|
/** @type {JQuery<AccordionBox>} */
|
|
const searchNovels = $('#searchNovels');
|
|
/** @type {JQuery<HTMLDivElement>} */
|
|
const seacrhNovels_novel_list = $('#searchNovels .novel-list');
|
|
/** @type {JQuery<HTMLDivElement>} */
|
|
const searchNovels_page_select = $('#searchNovels .page-select');
|
|
/** @type {JQuery<HTMLDivElement>} */
|
|
const searchNovels_fetch_btn = $('#searchNovels .fetch-btn');
|
|
/** @type {JQuery<HTMLInputElement>} */
|
|
const searchNovels_searchbar = $('#searchNovels .searchbar input');
|
|
|
|
/** @type {JQuery<AccordionBox>} */
|
|
const parseNovel = $('#parseNovel');
|
|
/** @type {JQuery<AccordionBox>} */
|
|
const parsePage = $('#parsePage');
|
|
/** @type {JQuery<AccordionBox>} */
|
|
const parseChapter = $('#parseChapter');
|
|
|
|
/** @type {JQuery<AccordionBox>} */
|
|
const fetchImage = $('#fetchImage');
|
|
/** @type {JQuery<AccordionBox>} */
|
|
const resolveUrl = $('#resolveUrl');
|
|
|
|
/** @type {JQuery<HTMLSelectElement>}*/
|
|
const plugin_language_selection = $('#language');
|
|
/** @type {JQuery<HTMLInputElement>} */
|
|
const plugin_search = $('#plugin');
|
|
/** @type {JQuery<HTMLDivElement>} */
|
|
const plugin_search_results = $('#search-results');
|
|
/** @type {JQuery<HTMLButtonElement>} */
|
|
const clear_plugin_search = $('#clear-search');
|
|
|
|
/** @type {JQuery<HTMLInputElement>} */
|
|
const previewSwitch = $('#raw-preview-switch');
|
|
/** @type {JQuery<HTMLDivElement>} */
|
|
const chapterViewer = $('#chapter-viewer');
|
|
/** @type {JQuery<HTMLDivElement>} */
|
|
const filtersModal = $('#filtersModal .modal-body');
|
|
/** @type {JQuery<HTMLInputElement>} */
|
|
const latestSwitch = $('#latest-switch');
|
|
|
|
// #endregion
|
|
|
|
// #region pagination
|
|
class NovelListPagination {
|
|
constructor(
|
|
/** @type {boolean} */ sL,
|
|
/** @type {JQuery<HTMLDivElement>} */ sE,
|
|
/** @type {JQuery<HTMLDivElement>} */ fC,
|
|
/** @type {JQuery<HTMLDivElement>} */ nL,
|
|
) {
|
|
/** @type {Record<number,NovelItem[]>} */
|
|
this.pageStore = {};
|
|
this._showlatest = sL;
|
|
this.lastFetchedPage = 0;
|
|
this.currentPage = 0;
|
|
this.canFetchMore = true;
|
|
this.selectElement = sE;
|
|
this.fetchContainer = fC;
|
|
this.resetStoreOnFetch = true;
|
|
this.novelList = nL;
|
|
}
|
|
get showLatest() {
|
|
return this._showlatest;
|
|
}
|
|
set showLatest(val) {
|
|
this._showlatest = val;
|
|
this.reset();
|
|
}
|
|
get fetchBtn() {
|
|
return this.fetchContainer.children('button')[0];
|
|
}
|
|
get numSelect() {
|
|
return this.selectElement.children('select')[0];
|
|
}
|
|
lockFetch(cause = 0) {
|
|
this.canFetchMore = false;
|
|
this.fetchBtn.disabled = true;
|
|
if (cause === 1) this.fetchBtn.innerText = 'no more to fetch';
|
|
if (cause === 2) this.fetchBtn.innerText = 'fetching';
|
|
if (cause === 3) this.fetchBtn.innerText = 'error';
|
|
}
|
|
unlockFetch() {
|
|
this.canFetchMore = true;
|
|
this.fetchBtn.disabled = false;
|
|
this.fetchBtn.innerText = 'fetch';
|
|
}
|
|
async fetchNovels(
|
|
/** @type {(page:number, latest: boolean)=>Promise<NovelItem[]>} */ fn,
|
|
) {
|
|
this.error = undefined;
|
|
if (this.resetStoreOnFetch) {
|
|
this.resetStoreOnFetch = false;
|
|
this.pageStore = {};
|
|
}
|
|
try {
|
|
this.lockFetch(2);
|
|
const lfp = ++this.lastFetchedPage;
|
|
console.log('fetching ', lfp, 'page');
|
|
const novels = await fn(lfp, this.showLatest);
|
|
if (novels.length === 0) {
|
|
this.lastFetchedPage--;
|
|
this.lockFetch(1);
|
|
if (this.lastFetchedPage === 0) {
|
|
this.error = 'No novels found!';
|
|
this.render();
|
|
}
|
|
return false;
|
|
}
|
|
this.loadNovels(lfp, novels);
|
|
this.unlockFetch();
|
|
return true;
|
|
} catch (e) {
|
|
this.lastFetchedPage--;
|
|
this.lockFetch(3);
|
|
this.error = `${e}`;
|
|
this.render();
|
|
return false;
|
|
}
|
|
}
|
|
showNextPage() {
|
|
console.log('lf', this.lastFetchedPage, 'cp', this.currentPage);
|
|
if (this.lastFetchedPage > this.currentPage) {
|
|
this.currentPage = this.lastFetchedPage;
|
|
this.render();
|
|
}
|
|
this.numSelect.value = `${this.currentPage}`;
|
|
}
|
|
arePagesTheSame(
|
|
/** @type {NovelItem[]} */ p1,
|
|
/** @type {NovelItem[]} */ p2,
|
|
) {
|
|
if (p1.length !== p2.length) return false;
|
|
let i = 0;
|
|
for (const novel of p1) {
|
|
if (novel.path !== p2[i].path) return false;
|
|
i++;
|
|
}
|
|
return true;
|
|
}
|
|
loadNovels(/** @type {number} */ page, /** @type {NovelItem[]} */ list) {
|
|
this.pageStore[page] = list;
|
|
if (page - 1 > 0 && this.pageStore[page - 1]) {
|
|
if (
|
|
this.arePagesTheSame(this.pageStore[page], this.pageStore[page - 1])
|
|
) {
|
|
if (this.numSelect.nextElementSibling)
|
|
this.numSelect.nextElementSibling.innerHTML =
|
|
"Pages are the same! It's possible that pagination is not implemented in the source!";
|
|
}
|
|
}
|
|
}
|
|
reset() {
|
|
this.hideSelectBox();
|
|
this.currentPage = 0;
|
|
this.lastFetchedPage = 0;
|
|
this.resetStoreOnFetch = true;
|
|
this.error = undefined;
|
|
if (this.numSelect.nextElementSibling) {
|
|
this.numSelect.nextElementSibling.innerHTML = '';
|
|
}
|
|
this.unlockFetch();
|
|
}
|
|
setupSelectBox() {
|
|
this.selectElement[0].style.display = 'inline';
|
|
this.numSelect.innerHTML = '';
|
|
for (let i = 1; i <= this.lastFetchedPage; i++) {
|
|
const option = $('<option>').text(`${i}`).val(`${i}`);
|
|
this.numSelect.append(option[0]);
|
|
}
|
|
this.numSelect.value = `${this.currentPage}`;
|
|
this.numSelect.onchange = () => {
|
|
this.currentPage = parseInt(this.numSelect.value);
|
|
this.render();
|
|
};
|
|
}
|
|
hideSelectBox() {
|
|
this.selectElement[0].style.display = '';
|
|
}
|
|
render() {
|
|
if (this.lastFetchedPage > 1) {
|
|
if (!this.pageStore[this.currentPage]) {
|
|
console.log('no page store, erroring');
|
|
this.reset();
|
|
this.error =
|
|
'Please request new pages after previous one loaded! Try again!';
|
|
}
|
|
}
|
|
if (this.error) {
|
|
this.novelList.html('');
|
|
this.novelList.append(this.error);
|
|
return;
|
|
}
|
|
if (this.lastFetchedPage > 0) {
|
|
this.setupSelectBox();
|
|
this.fetchBtn.innerText = 'fetch next';
|
|
}
|
|
this.novelList.html('');
|
|
this.novelList.append(
|
|
...this.pageStore[this.currentPage].map(novel =>
|
|
PluginWrapper.createNovelItem(novel, {
|
|
target: popularNovels[0],
|
|
}),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
// #endregion
|
|
|
|
// #region state
|
|
const state = {
|
|
/** @type {PluginList} */
|
|
all_plugins: {},
|
|
/** @type {Array<PluginItem>} */
|
|
plugin_infos: [],
|
|
/** @type {{language: string, keyword:null|string}} */
|
|
plugin_search: {
|
|
language: '',
|
|
keyword: null,
|
|
},
|
|
/** @type {Array<PluginItem>} */
|
|
plugins_in_search: [],
|
|
/** @type {PluginWrapper | undefined} */
|
|
current_plugin: undefined,
|
|
/** @type {FilterToValues<Filters>} */
|
|
filterValues: {},
|
|
/** popularNovels pagination states */
|
|
popular_pages: new NovelListPagination(
|
|
false,
|
|
popularNovels_page_select,
|
|
popularNovels_fetch_btn,
|
|
popularNovels_novel_list,
|
|
),
|
|
search_pages: new NovelListPagination(
|
|
false,
|
|
searchNovels_page_select,
|
|
searchNovels_fetch_btn,
|
|
seacrhNovels_novel_list,
|
|
),
|
|
};
|
|
// #endregion
|
|
|
|
// #region util functions
|
|
/**
|
|
*
|
|
* @param {string} path
|
|
* @param {RequestInit | undefined} init
|
|
*/
|
|
const fetchFromAPI = async (path, init = undefined) => {
|
|
if (init) {
|
|
init.headers = {
|
|
...init.headers,
|
|
'x-custom-headers': JSON.stringify(getHeaders()),
|
|
};
|
|
}
|
|
return fetch(path, init);
|
|
};
|
|
// #endregion
|
|
|
|
class PluginWrapper {
|
|
/**
|
|
* @param {string} requirePath
|
|
*/
|
|
constructor(requirePath) {
|
|
/** @type {string} */
|
|
parsePage.addClass('d-none');
|
|
this.requirePath = requirePath;
|
|
this.currentView = previewSwitch?.[0]?.checked ? 'preview' : 'raw';
|
|
fetchFromAPI('/hasParsePage/', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
pluginRequirePath: this.requirePath,
|
|
}),
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
if (data.hasParsePage) {
|
|
parsePage.removeClass('d-none');
|
|
}
|
|
});
|
|
}
|
|
|
|
static previewSettings = {
|
|
htmlTemplate: '',
|
|
fillJS: '',
|
|
fillCSS: '',
|
|
customJS: '',
|
|
customCSS: '',
|
|
readerSettings: {
|
|
theme: '#292832',
|
|
textColor: '#CCCCCC',
|
|
textSize: 16,
|
|
textAlign: 'left',
|
|
padding: 5,
|
|
fontFamily: '',
|
|
lineHeight: 1.5,
|
|
},
|
|
iframeSize: {
|
|
width: 800,
|
|
height: 1200,
|
|
},
|
|
/** @type {Theme} */
|
|
theme: window.themes[window.themes.length - 2],
|
|
layoutHeight: 0,
|
|
novel: { pluginId: 0 },
|
|
chapter: { novelId: 0, id: 0 },
|
|
html: '',
|
|
sanitizedHTML: '',
|
|
sanitize: true,
|
|
StatusBar: { currentHeight: 0 },
|
|
};
|
|
|
|
/** @type {"raw" | "preview"} */
|
|
currentView = 'raw';
|
|
|
|
/** @type {NodeJS.Timeout[]} */
|
|
static clocks = [];
|
|
|
|
/**
|
|
* @param {[string,Filters[string]]} flt
|
|
* @returns {JQuery<HTMLDivElement>}
|
|
*/
|
|
static createFilterElement(flt) {
|
|
/** @param {string} f */
|
|
const getSafeFilterID = f => f.replace(/\s/g, '_').toLowerCase();
|
|
/** @type {JQuery<HTMLDivElement>} */
|
|
const retDiv = $('<div>');
|
|
const [key, filter] = flt;
|
|
retDiv.addClass(`${filter.type}Filter`);
|
|
switch (filter.type) {
|
|
case 'Picker':
|
|
{
|
|
const id = `${key}_picker`;
|
|
// add label
|
|
$('<span>')
|
|
.addClass('filter-label')
|
|
.text(`${filter.label}:`)
|
|
.appendTo(retDiv);
|
|
|
|
/** @type {JQuery<HTMLSelectElement>} */
|
|
const select = $('<select>');
|
|
// add select and its attributes
|
|
select
|
|
.attr('title', `key: ${key}`)
|
|
.addClass('custom-select')
|
|
.on('change', e => {
|
|
state.popular_pages.reset();
|
|
state.filterValues[key].value = e.target.selectedOptions[0].value;
|
|
})
|
|
.appendTo(retDiv);
|
|
// add all the options
|
|
for (const option of filter.options) {
|
|
select.append(
|
|
`<option ${
|
|
option.value === filter.value ? 'selected' : ''
|
|
} value='${option.value}'>${option.label}</option>`,
|
|
);
|
|
}
|
|
}
|
|
break;
|
|
case 'Checkbox':
|
|
{
|
|
// add label
|
|
$('<span>')
|
|
.addClass('filter-label')
|
|
.text(filter.label)
|
|
.appendTo(retDiv);
|
|
|
|
// create box for checkboxes
|
|
const box = $('<div>').appendTo(retDiv).addClass('checkbox-groupbox');
|
|
|
|
// add all checkboxes
|
|
for (let cb of filter.options) {
|
|
const id = `checkbox_${key}_${getSafeFilterID(cb.value)}`;
|
|
/** @type {JQuery<HTMLInputElement>} */
|
|
let inp = $('<input>', { type: 'checkbox' });
|
|
// set default value
|
|
inp[0].checked = filter.value.includes(cb.value);
|
|
// set checkbox attributes and listeners
|
|
inp.attr('id', id).on('change', e => {
|
|
const { checked } = e.target;
|
|
state.popular_pages.reset();
|
|
const fV = state.filterValues[key];
|
|
if (Array.isArray(fV.value)) {
|
|
fV.value = checked
|
|
? [...fV.value, cb.value]
|
|
: fV.value.filter(r => r !== cb.value);
|
|
}
|
|
});
|
|
// add checkbox label
|
|
const label = $('<label>', { for: id })
|
|
.text(cb.label)
|
|
.prepend(inp)
|
|
.attr('title', `${key}: ${cb.value}`);
|
|
$('<div>').append(label).appendTo(box);
|
|
}
|
|
}
|
|
break;
|
|
case 'Switch': {
|
|
const id = `switch_${key}`;
|
|
// add the checkbox
|
|
const slider_checkbox = $('<div>');
|
|
slider_checkbox.addClass('slider-checkbox');
|
|
const label = $('<label>');
|
|
/** @type {JQuery<HTMLInputElement>} */
|
|
const checkbox = $('<input>', { type: 'checkbox' });
|
|
checkbox.attr('id', id);
|
|
// set default value
|
|
checkbox[0].checked = filter.value;
|
|
label
|
|
.append(checkbox, $('<span>').text(filter.label))
|
|
.appendTo(slider_checkbox);
|
|
slider_checkbox.appendTo(retDiv);
|
|
break;
|
|
}
|
|
case 'Text':
|
|
{
|
|
const id = `text_${key}`;
|
|
$('<label>', { for: id })
|
|
.text(filter.label)
|
|
.addClass('filter-label')
|
|
.appendTo(retDiv);
|
|
/** @type {JQuery<HTMLInputElement>} */
|
|
const inp = $('<input>', { type: 'text' });
|
|
inp
|
|
.attr('id', id)
|
|
.on('change', e => {
|
|
state.popular_pages.reset();
|
|
const fV = state.filterValues[key];
|
|
if (typeof fV.value === 'string') {
|
|
fV.value = e.target.value;
|
|
}
|
|
})
|
|
.appendTo(retDiv);
|
|
// set default value
|
|
inp.val(filter.value);
|
|
}
|
|
break;
|
|
case 'XCheckbox':
|
|
{
|
|
// add label
|
|
$('<span>')
|
|
.addClass('filter-label')
|
|
.text(filter.label)
|
|
.appendTo(retDiv);
|
|
|
|
// create box for checkboxes
|
|
const box = $('<div>')
|
|
.appendTo(retDiv)
|
|
.addClass('xcheckbox-groupbox');
|
|
|
|
// add all checkboxes
|
|
for (let cb of filter.options) {
|
|
const id = `checkbox_${key}_${getSafeFilterID(cb.value)}`;
|
|
|
|
const getCurrentState = () => {
|
|
const fV = state.filterValues[key];
|
|
if (typeof fV.value === 'object' && !Array.isArray(fV.value)) {
|
|
return (
|
|
(fV.value.exclude?.includes(cb.value) && 'x') ||
|
|
(fV.value.include?.includes(cb.value) && 'i') ||
|
|
false
|
|
);
|
|
}
|
|
return false;
|
|
};
|
|
|
|
// default State
|
|
const checkedState =
|
|
(filter.value.exclude?.includes(cb.value) && 'x') ||
|
|
(filter.value.include?.includes(cb.value) && 'i') ||
|
|
false;
|
|
|
|
/** @type {JQuery<HTMLLabelElement>} */
|
|
const label = $('<label>', { for: id });
|
|
label.addClass('xcheckbox').attr('data-state', checkedState || '');
|
|
/** @type {JQuery<HTMLInputElement>} */
|
|
const xchb = $('<input>', { type: 'checkbox' });
|
|
if (checkedState) xchb[0].checked = true;
|
|
xchb.attr('id', id);
|
|
label.text(cb.label).append(xchb).append($('<span>'));
|
|
xchb.on('change', e => {
|
|
state.popular_pages.reset();
|
|
e.preventDefault();
|
|
e.stopImmediatePropagation();
|
|
e.stopPropagation();
|
|
const fV = state.filterValues[key];
|
|
if (fV.value instanceof Array || typeof fV.value !== 'object')
|
|
return;
|
|
const curState = getCurrentState();
|
|
switch (curState) {
|
|
case 'i':
|
|
if (fV.value.include)
|
|
fV.value.include = fV.value.include.filter(
|
|
f => f !== cb.value,
|
|
);
|
|
if (fV.value.exclude) fV.value.exclude.push(cb.value);
|
|
else fV.value.exclude = [cb.value];
|
|
e.target.checked = true;
|
|
label[0].dataset.state = 'x';
|
|
break;
|
|
case 'x':
|
|
// set to false
|
|
if (fV.value.exclude)
|
|
fV.value.exclude = fV.value.exclude.filter(
|
|
f => f !== cb.value,
|
|
);
|
|
e.target.checked = false;
|
|
label[0].dataset.state = '';
|
|
break;
|
|
default:
|
|
// set to "e"
|
|
if (!fV.value.include) fV.value.include = [cb.value];
|
|
else fV.value.include.push(cb.value);
|
|
e.target.checked = true;
|
|
label[0].dataset.state = 'i';
|
|
break;
|
|
}
|
|
});
|
|
box.append(label);
|
|
}
|
|
}
|
|
break;
|
|
default:
|
|
return retDiv;
|
|
}
|
|
return retDiv;
|
|
}
|
|
|
|
async getFilters() {
|
|
try {
|
|
/** @type {Filters} */
|
|
const filters = await (
|
|
await fetchFromAPI('/filters', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
pluginRequirePath: this.requirePath,
|
|
}),
|
|
})
|
|
).json();
|
|
filtersModal.html('');
|
|
state.filterValues = {};
|
|
for (const fKey in filters) {
|
|
filtersModal.append(
|
|
PluginWrapper.createFilterElement([fKey, filters[fKey]]),
|
|
$('<hr>'),
|
|
);
|
|
state.filterValues[fKey] = {
|
|
type: filters[fKey].type,
|
|
value: filters[fKey].value,
|
|
};
|
|
}
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
}
|
|
/**
|
|
* @param {string} name
|
|
* @param {string | undefined} data
|
|
*/
|
|
static createInfoItem = (name, data) => {
|
|
/** @type {JQuery<HTMLDivElement>} */
|
|
const info_item = $('<div>');
|
|
info_item.addClass('info-item');
|
|
// many data but one datum
|
|
const datum = data || 'undefined';
|
|
$('<div>')
|
|
.addClass('info-name btn btn-info disabled')
|
|
.text(name)
|
|
.appendTo(info_item);
|
|
$('<samp>')
|
|
.addClass('info-value btn-light')
|
|
.text(datum.slice(0, 50))
|
|
.appendTo(info_item);
|
|
$('<div>')
|
|
.addClass('info-copy btn btn-primary')
|
|
.text('Copy')
|
|
.on('click', () => {
|
|
navigator.clipboard.writeText(datum);
|
|
})
|
|
.appendTo(info_item);
|
|
return info_item;
|
|
};
|
|
|
|
/**
|
|
* @param {NovelItem} novel
|
|
* @param {{target:AccordionBox}|undefined} parsable
|
|
* @returns
|
|
*/
|
|
static createNovelItem(novel, parsable = undefined) {
|
|
/** @type {JQuery<HTMLDivElement>} */
|
|
const novel_item = $(`<div>`);
|
|
novel_item.addClass('novel-item');
|
|
const novel_image = $('<div>').addClass('novel-img').appendTo(novel_item);
|
|
$('<img>')
|
|
.attr('src', novel.cover || '')
|
|
.attr('alt', 'No cover found')
|
|
.appendTo(novel_image);
|
|
/** @type {JQuery<HTMLDivElement>} */
|
|
const novel_info = $('<div>');
|
|
novel_info.addClass('novel-info').appendTo(novel_item);
|
|
this.createInfoItem('name', novel.name).appendTo(novel_info);
|
|
this.createInfoItem('path', novel.path).appendTo(novel_info);
|
|
this.createInfoItem('cover', novel.cover || 'undefined').appendTo(
|
|
novel_info,
|
|
);
|
|
if (parsable)
|
|
novel_info.append(
|
|
$('<div>')
|
|
.addClass('btn btn-primary parse-novel-btn')
|
|
.text('Parse')
|
|
.on('click', () => {
|
|
// parsable.target.toggle();
|
|
/** @type {JQuery<AccordionBox>} */
|
|
const pnc = $('#parseNovel');
|
|
const box = pnc[0];
|
|
$('#parse-novel-path').val(novel.path);
|
|
$('#parse-novel-btn').trigger('click');
|
|
if (box.collapsed) {
|
|
box.toggle();
|
|
setTimeout(() => {
|
|
// scroll after it un-collapses
|
|
box.scrollIntoView({
|
|
behavior: 'smooth',
|
|
});
|
|
}, 500);
|
|
} else box.scrollIntoView({ behavior: 'smooth' });
|
|
}),
|
|
);
|
|
return novel_item;
|
|
}
|
|
|
|
/** @param {ChapterItem} chapter */
|
|
static createChapterItem(chapter) {
|
|
/**
|
|
* @type {JQuery<HTMLDivElement>}
|
|
*/
|
|
const chapter_item = $('<div>');
|
|
chapter_item.addClass('chapter-item');
|
|
$('<samp>')
|
|
.addClass('info-value btn-light ci-topleft')
|
|
.text(chapter.name?.slice(0, 26))
|
|
.appendTo(chapter_item);
|
|
$('<samp>')
|
|
.addClass('info-value btn-light ci-bottomleft')
|
|
.text(chapter.releaseTime || 'undefined')
|
|
.appendTo(chapter_item);
|
|
$('<div>')
|
|
.addClass('info-copy btn btn-primary ci-btn1')
|
|
.attr('data', chapter.path)
|
|
.text('Copy path')
|
|
.on('click', () => {
|
|
navigator.clipboard.writeText(chapter.path);
|
|
})
|
|
.appendTo(chapter_item);
|
|
$('<div>')
|
|
.addClass('info-copy btn btn-primary ci-btn2')
|
|
.attr('data', chapter.path)
|
|
.text('Parse')
|
|
.on('click', () => {
|
|
/** @type {JQuery<AccordionBox>} */
|
|
const parseChapter = $('#parseChapter');
|
|
const box = parseChapter[0];
|
|
$('#chapter-parse-path').val(chapter.path);
|
|
$('#chapter-parse-btn').trigger('click');
|
|
if (box.collapsed) {
|
|
box.toggle();
|
|
setTimeout(() => {
|
|
// scroll after it un-collapses
|
|
box.scrollIntoView({
|
|
behavior: 'smooth',
|
|
});
|
|
}, 500);
|
|
} else box.scrollIntoView({ behavior: 'smooth' });
|
|
})
|
|
.appendTo(chapter_item);
|
|
return chapter_item;
|
|
}
|
|
|
|
async getPopularNovels() {
|
|
popularNovels_spinner.show();
|
|
/** @type {FilterToValues<Filters>} */
|
|
const filters = { ...state.filterValues };
|
|
try {
|
|
await state.popular_pages.fetchNovels(async (page, latest) => {
|
|
console.log('Asking for page #', page);
|
|
const novels = await (
|
|
await fetchFromAPI(`/popularNovels/`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
showLatestNovels: latest,
|
|
pluginRequirePath: this.requirePath,
|
|
filters: filters,
|
|
page,
|
|
}),
|
|
})
|
|
).json();
|
|
if ('error' in novels)
|
|
throw `popularNovels threw an error:<div class='error'>${novels.error}</div>`;
|
|
return novels;
|
|
});
|
|
state.popular_pages.showNextPage();
|
|
} catch (/** @type {unknown}*/ e) {
|
|
console.error(e);
|
|
if (e)
|
|
popularNovels_novel_list.html(
|
|
`${typeof e === 'object' && 'message' in e ? e.message : e}`,
|
|
);
|
|
} finally {
|
|
popularNovels_spinner.hide();
|
|
}
|
|
}
|
|
|
|
async getSearchedNovels() {
|
|
/** @type {JQuery<AccordionBox>} */
|
|
const accordionBox = $('#searchNovels');
|
|
/** @type {JQuery<HTMLInputElement>} */
|
|
const searchBox = $('#searchNovels input');
|
|
const searchTerm = searchBox.val();
|
|
const spinner = $('#searchNovels .spinner-border');
|
|
spinner.show();
|
|
try {
|
|
await state.search_pages.fetchNovels(async (n, _) => {
|
|
const novels = await (
|
|
await fetchFromAPI(`/searchNovels/`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
pluginRequirePath: this.requirePath,
|
|
searchTerm: searchTerm,
|
|
page: n,
|
|
}),
|
|
})
|
|
).json();
|
|
if ('error' in novels)
|
|
throw `searchNovels threw an error:<div class='error'>${novels.error}</div>`;
|
|
return novels;
|
|
});
|
|
state.search_pages.showNextPage();
|
|
} catch (/** @type {unknown} */ e) {
|
|
console.error(e);
|
|
if (e)
|
|
seacrhNovels_novel_list.html(
|
|
`${typeof e === 'object' && 'message' in e ? e.message : e}`,
|
|
);
|
|
} finally {
|
|
spinner.hide();
|
|
}
|
|
}
|
|
|
|
async getNovel() {
|
|
/** @type {JQuery<HTMLInputElement>} */
|
|
const novelPathInput = $('#parseNovel input');
|
|
const novel_item = $('#parseNovel .novel-item');
|
|
const chapter_list = $('#parseNovel .chapter-list');
|
|
const novelPath = novelPathInput.val();
|
|
const spinner = $('#parseNovel .spinner-border');
|
|
spinner.show();
|
|
try {
|
|
/** @type {SourceNovel | {error:string}} */
|
|
const sourceNovel = await (
|
|
await fetchFromAPI(`/parseNovel/`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
pluginRequirePath: this.requirePath,
|
|
novelPath,
|
|
}),
|
|
})
|
|
).json();
|
|
if ('error' in sourceNovel)
|
|
throw `Error getting the novel ${sourceNovel.error}`;
|
|
novel_item.empty();
|
|
const novel_data = PluginWrapper.createNovelItem({
|
|
name: sourceNovel.name || 'undefined',
|
|
path: sourceNovel.path,
|
|
cover: sourceNovel.cover,
|
|
});
|
|
|
|
novel_data
|
|
.children('div + div')
|
|
.append(
|
|
PluginWrapper.createInfoItem('summary', sourceNovel.summary),
|
|
PluginWrapper.createInfoItem('author', sourceNovel.author),
|
|
PluginWrapper.createInfoItem('artist', sourceNovel.artist),
|
|
PluginWrapper.createInfoItem('status', sourceNovel.status),
|
|
PluginWrapper.createInfoItem('genres', sourceNovel.genres),
|
|
);
|
|
if (sourceNovel.totalPages) {
|
|
novel_data
|
|
.children('div + div')
|
|
.append(
|
|
PluginWrapper.createInfoItem(
|
|
'totalPages',
|
|
sourceNovel.totalPages.toString(),
|
|
),
|
|
);
|
|
}
|
|
if (sourceNovel.latestChapter) {
|
|
novel_data
|
|
.children('div + div')
|
|
.append(PluginWrapper.createChapterItem(sourceNovel.latestChapter));
|
|
}
|
|
novel_item.replaceWith(novel_data);
|
|
|
|
if (
|
|
sourceNovel?.chapters?.length !==
|
|
new Set(sourceNovel?.chapters?.map(r => r.path) || []).size
|
|
) {
|
|
alert('Chapter paths are the same!');
|
|
}
|
|
|
|
chapter_list.html('');
|
|
if (sourceNovel.chapters)
|
|
for (const chapter of sourceNovel.chapters) {
|
|
chapter_list.append(PluginWrapper.createChapterItem(chapter));
|
|
}
|
|
} catch (/** @type {unknown} */ e) {
|
|
} finally {
|
|
spinner.hide();
|
|
}
|
|
}
|
|
async getPage() {
|
|
/** @type {JQuery<HTMLInputElement>} */
|
|
const novelPathInput = $('#parsePage #parse-page-novel-path');
|
|
const pageInput = $('#parsePage #parse-page-index');
|
|
const chapter_list = $('#parsePage .chapter-list');
|
|
const novelPath = novelPathInput.val();
|
|
const page = pageInput.val();
|
|
const spinner = $('#parsePage .spinner-border');
|
|
spinner.show();
|
|
try {
|
|
/** @type {SourcePage | {error:string}} */
|
|
const sourcePage = await (
|
|
await fetchFromAPI(`/parsePage/`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
pluginRequirePath: this.requirePath,
|
|
novelPath,
|
|
page,
|
|
}),
|
|
})
|
|
).json();
|
|
if ('error' in sourcePage)
|
|
throw `Error getting the novel ${sourcePage.error}`;
|
|
if (
|
|
sourcePage?.chapters?.length !==
|
|
new Set(sourcePage?.chapters?.map(r => r.path) || []).size
|
|
) {
|
|
alert('Chapter paths are the same!');
|
|
}
|
|
|
|
chapter_list.html('');
|
|
if (sourcePage.chapters)
|
|
for (const chapter of sourcePage.chapters) {
|
|
chapter_list.append(PluginWrapper.createChapterItem(chapter));
|
|
}
|
|
} catch (/** @type {unknown} */ e) {
|
|
} finally {
|
|
spinner.hide();
|
|
}
|
|
}
|
|
async getChapter() {
|
|
const chapterPath = $('#parseChapter input').val();
|
|
const chapterRawTextarea = $('#parseChapter textarea');
|
|
const spinner = $('#parseChapter .spinner-border');
|
|
spinner.show();
|
|
try {
|
|
const chapterText = await (
|
|
await fetchFromAPI(`/parseChapter/`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
pluginRequirePath: this.requirePath,
|
|
chapterPath,
|
|
}),
|
|
})
|
|
).text();
|
|
PluginWrapper.previewSettings.html = chapterText;
|
|
PluginWrapper.previewSettings.sanitizedHTML =
|
|
window.sanitizeChapterText(chapterText);
|
|
this.refreshPreview();
|
|
} catch (e) {
|
|
console.error(e);
|
|
if (e)
|
|
chapterRawTextarea.text(
|
|
`${typeof e === 'object' && 'message' in e ? e.message : e}`,
|
|
);
|
|
} finally {
|
|
spinner.hide();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {Window | null} iframeWindow
|
|
*/
|
|
loadHTMLToIFrame = async iframeWindow => {
|
|
const text = PluginWrapper.previewSettings.htmlTemplate.replace(
|
|
/\/\*\{(.*)\}\*\//gi,
|
|
function (s, p1) {
|
|
/** @type {[(keyof PluginWrapper.previewSettings), (keyof PluginWrapper.previewSettings[keyof PluginWrapper.previewSettings])?]} */
|
|
const dotted = p1.split('.').map((/** @type {string} */ r) => r.trim());
|
|
const [key1, key2] = dotted;
|
|
if (dotted.length === 1) {
|
|
if (key1 === 'html') {
|
|
return `${
|
|
PluginWrapper.previewSettings.sanitize
|
|
? PluginWrapper.previewSettings.sanitizedHTML
|
|
: PluginWrapper.previewSettings.html
|
|
}`;
|
|
}
|
|
return `${PluginWrapper.previewSettings[key1]}`;
|
|
} else if (dotted.length === 2 && key2) {
|
|
return `${PluginWrapper.previewSettings[key1][key2]}`;
|
|
}
|
|
return '';
|
|
},
|
|
);
|
|
PluginWrapper.clocks.push(
|
|
setTimeout(() => {
|
|
if (iframeWindow) {
|
|
const html = iframeWindow.document.querySelector('html');
|
|
if (html) {
|
|
PluginWrapper.clocks.push(
|
|
setTimeout(() => {
|
|
// @ts-ignore
|
|
iframeWindow?.eval(PluginWrapper.previewSettings.customJS);
|
|
}, 10),
|
|
);
|
|
html.innerHTML = text;
|
|
} else {
|
|
console.error('No html object inside the iframe');
|
|
}
|
|
} else console.error('No iframe window yet!');
|
|
}, 10),
|
|
);
|
|
};
|
|
|
|
showChapterPreview() {
|
|
PluginWrapper.clocks.forEach(c => {
|
|
clearTimeout(c);
|
|
});
|
|
this.currentView = 'preview';
|
|
chapterViewer.empty();
|
|
// create the iframe
|
|
/** @type {JQuery<HTMLIFrameElement>} */
|
|
const iframe = $('<iframe>');
|
|
iframe.attr('id', 'preview');
|
|
iframe.css({
|
|
width: `${PluginWrapper.previewSettings.iframeSize.width}px`,
|
|
height: `${PluginWrapper.previewSettings.iframeSize.height}px`,
|
|
});
|
|
$('#scaled-info').text('');
|
|
$('#parseChapter').css({ 'max-height': 'unset' });
|
|
// the thing is too big!
|
|
if (
|
|
PluginWrapper.previewSettings.iframeSize.width >
|
|
window.innerWidth - 75
|
|
) {
|
|
const factor =
|
|
(window.innerWidth - 75) /
|
|
PluginWrapper.previewSettings.iframeSize.width;
|
|
iframe.css({
|
|
transform: `scale(${factor})`,
|
|
'transform-origin': 'top left',
|
|
});
|
|
$('#scaled-info').text(
|
|
`Scaled ${(factor * 100).toFixed(2)}% to fit on screen!`,
|
|
);
|
|
$('#parseChapter').css({
|
|
'max-height': `${
|
|
PluginWrapper.previewSettings.iframeSize.height * factor + 150
|
|
}px`,
|
|
});
|
|
}
|
|
chapterViewer.append(iframe);
|
|
const iframeWindow = iframe[0].contentWindow;
|
|
this.loadHTMLToIFrame(iframeWindow);
|
|
}
|
|
|
|
showRawChapterText() {
|
|
chapterViewer.empty();
|
|
/**
|
|
* @type {JQuery<HTMLTextAreaElement>}
|
|
*/
|
|
const chapterRawTextarea = $('<textarea>');
|
|
chapterRawTextarea
|
|
.attr('rows', '10')
|
|
.attr('maxlength', 10000000)
|
|
.appendTo(chapterViewer);
|
|
chapterRawTextarea.addClass('form-control');
|
|
const rawHTML = PluginWrapper.previewSettings.sanitize
|
|
? PluginWrapper.previewSettings.sanitizedHTML
|
|
: PluginWrapper.previewSettings.html;
|
|
if (rawHTML) {
|
|
chapterRawTextarea.text(rawHTML);
|
|
} else chapterRawTextarea.text('');
|
|
this.currentView = 'raw';
|
|
}
|
|
|
|
toggleChapterView(nochange = false) {
|
|
if (!nochange) {
|
|
this.currentView = this.currentView === 'raw' ? 'preview' : 'raw';
|
|
}
|
|
if (this.currentView === 'preview') this.showChapterPreview();
|
|
else this.showRawChapterText();
|
|
previewSwitch
|
|
.siblings('span')
|
|
.text(this.currentView === 'preview' ? 'Preview' : 'Raw');
|
|
}
|
|
|
|
/**
|
|
* @param {boolean | undefined} forcedValue
|
|
*/
|
|
static toggleHTMLSanitize(forcedValue) {
|
|
PluginWrapper.previewSettings.sanitize =
|
|
forcedValue ?? !PluginWrapper.previewSettings.sanitize;
|
|
currentWrapper().refreshPreview();
|
|
$('#sanitize-preview-html')
|
|
.siblings('span')
|
|
.text(
|
|
PluginWrapper.previewSettings.sanitize
|
|
? 'Sanitized HTML'
|
|
: 'Unsanitized HTML',
|
|
);
|
|
}
|
|
|
|
refreshPreview() {
|
|
this.toggleChapterView(true);
|
|
}
|
|
|
|
async fetchImage() {
|
|
const url = $('#fetchImage input').val();
|
|
const spinner = $('#fetchImage .spinner-border');
|
|
spinner.show();
|
|
try {
|
|
const base64 = await (
|
|
await fetchFromAPI(`/fetchImage/`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
pluginRequirePath: this.requirePath,
|
|
url: url,
|
|
}),
|
|
})
|
|
).text();
|
|
$('#fetchImage img').attr('src', `data:image/jpg;base64,${base64}`);
|
|
} catch (e) {
|
|
console.error(e);
|
|
if (e)
|
|
$('#fetchImage').text(
|
|
`${typeof e === 'object' && 'message' in e ? e.message : e}`,
|
|
);
|
|
} finally {
|
|
spinner.hide();
|
|
}
|
|
}
|
|
|
|
async resolveUrl() {
|
|
const type = $('#resolveUrl select').val();
|
|
const path = $('#resolveUrl input').val();
|
|
const spinner = $('#resolveUrl .spinner-border');
|
|
spinner.show();
|
|
try {
|
|
const fullURL = await (
|
|
await fetchFromAPI('/resolveUrl/', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
pluginRequirePath: this.requirePath,
|
|
isNovel: type === 'novel',
|
|
path,
|
|
}),
|
|
})
|
|
).text();
|
|
$('#resolveUrl input[readonly]').val(fullURL);
|
|
} catch (e) {
|
|
console.error(e);
|
|
if (e)
|
|
$('#resolveUrl').text(
|
|
`${typeof e === 'object' && 'message' in e ? e.message : e}`,
|
|
);
|
|
} finally {
|
|
spinner.hide();
|
|
}
|
|
}
|
|
}
|
|
const currentWrapper = () => state.current_plugin || emptyPluginWrapper;
|
|
const emptyPluginWrapper = new PluginWrapper('');
|
|
|
|
// #region headers
|
|
/** @type {Record<string,string>} */
|
|
let lastCopiedHeaders = {};
|
|
|
|
const getHeaders = () => {
|
|
/** @type {Record<string,string>} */
|
|
const headers = {};
|
|
const els = document.querySelectorAll('.headerinfo').forEach(el => {
|
|
/** @type {HTMLSpanElement | null} */
|
|
const nameSpan = el.querySelector('.headername');
|
|
/** @type {HTMLSpanElement | null} */
|
|
const valueSpan = el.querySelector('.headervalue');
|
|
if (nameSpan && valueSpan) {
|
|
const { innerText: name } = nameSpan;
|
|
const { innerText: value } = valueSpan;
|
|
if (
|
|
typeof name === 'string' &&
|
|
typeof value === 'string' &&
|
|
value.trim()
|
|
) {
|
|
headers[name] = value.trim();
|
|
}
|
|
}
|
|
});
|
|
return headers;
|
|
};
|
|
|
|
const checkIfHeadersChanged = () => {
|
|
const currentHeaders = getHeaders();
|
|
|
|
const headers = new Set(Object.keys(currentHeaders));
|
|
// quick exit if all custom headers removed
|
|
if (headers.size <= 2) {
|
|
$('#headersnotcopied').css({ display: 'none' });
|
|
return;
|
|
}
|
|
|
|
// get a list of all headers
|
|
for (const headername of Object.keys(lastCopiedHeaders)) {
|
|
headers.add(headername);
|
|
}
|
|
|
|
headers.delete('Cookie');
|
|
headers.delete('User-Agent');
|
|
|
|
let headersChanged = false;
|
|
// check if they're all the same
|
|
for (const headername of Array.from(headers)) {
|
|
if (currentHeaders[headername] !== lastCopiedHeaders[headername])
|
|
headersChanged = true;
|
|
}
|
|
|
|
if (headersChanged) $('#headersnotcopied').css({ display: 'block' });
|
|
else $('#headersnotcopied').css({ display: 'none' });
|
|
};
|
|
// #endregion
|
|
|
|
// #region preview
|
|
|
|
const loadThemePreset = (/** @type {Theme} */ t) => {
|
|
PluginWrapper.previewSettings.theme = t;
|
|
PluginWrapper.previewSettings.readerSettings = {
|
|
...PluginWrapper.previewSettings.readerSettings,
|
|
textColor: t.textColor,
|
|
theme: t.backgroundColor,
|
|
};
|
|
};
|
|
|
|
const refreshPreviewSettings = () => {
|
|
/**
|
|
* @param {number} w
|
|
* @param {number} h
|
|
*/
|
|
const setPreviewSize = (w, h) => {
|
|
const { iframeSize } = PluginWrapper.previewSettings;
|
|
[iframeSize.width, iframeSize.height] = [w, h];
|
|
width[0].value = `${iframeSize.width}`;
|
|
height[0].value = `${iframeSize.height}`;
|
|
currentWrapper().refreshPreview();
|
|
};
|
|
|
|
/** @type {JQuery<HTMLInputElement>} */
|
|
const width = $('#width-input');
|
|
if (width[0])
|
|
width[0].value = `${PluginWrapper.previewSettings.iframeSize.width}`;
|
|
width.off('change').on('change', ({ target: { value } }) => {
|
|
PluginWrapper.previewSettings.iframeSize.width = parseFloat(value);
|
|
currentWrapper().refreshPreview();
|
|
});
|
|
|
|
/** @type {JQuery<HTMLInputElement>} */
|
|
const height = $('#height-input');
|
|
if (height[0])
|
|
height[0].value = `${PluginWrapper.previewSettings.iframeSize.height}`;
|
|
height.off('change').on('change', ({ target: { value } }) => {
|
|
PluginWrapper.previewSettings.iframeSize.height = parseFloat(value);
|
|
currentWrapper().refreshPreview();
|
|
});
|
|
|
|
$('#swap-iframe-size')
|
|
.off('click')
|
|
.on('click', () => {
|
|
const { width, height } = PluginWrapper.previewSettings.iframeSize;
|
|
setPreviewSize(height, width);
|
|
});
|
|
|
|
$('#load-preset-size')
|
|
.off('click')
|
|
.on('click', () => {
|
|
/** @type {JQuery<HTMLSelectElement>} */
|
|
const select = $('#size-preset');
|
|
const [wStr, hStr] = select[0].value.split(',');
|
|
if (wStr && hStr && parseInt(wStr) && parseInt(hStr))
|
|
setPreviewSize(parseInt(wStr), parseInt(hStr));
|
|
});
|
|
|
|
/** @type {JQuery<HTMLInputElement>}*/
|
|
const shouldSanitizeHTML = $('#sanitize-preview-html');
|
|
if (shouldSanitizeHTML[0])
|
|
PluginWrapper.toggleHTMLSanitize(shouldSanitizeHTML[0].checked);
|
|
shouldSanitizeHTML.off('click').on('click', ({ target: { checked } }) => {
|
|
PluginWrapper.toggleHTMLSanitize(checked);
|
|
});
|
|
|
|
/** @type {JQuery<HTMLInputElement>} */
|
|
const lineHeight = $('#lh-input');
|
|
if (lineHeight[0])
|
|
lineHeight[0].value = `${PluginWrapper.previewSettings.readerSettings.lineHeight}`;
|
|
lineHeight.off('change').on('change', ({ target: { value } }) => {
|
|
PluginWrapper.previewSettings.readerSettings.lineHeight = parseFloat(value);
|
|
currentWrapper().refreshPreview();
|
|
});
|
|
|
|
/** @type {JQuery<HTMLInputElement>} */
|
|
const backgroundColor = $('#bgc-input');
|
|
if (backgroundColor[0])
|
|
backgroundColor[0].value = `${PluginWrapper.previewSettings.readerSettings.theme}`;
|
|
backgroundColor.off('change').on('change', ({ target: { value } }) => {
|
|
PluginWrapper.previewSettings.readerSettings.theme = value;
|
|
currentWrapper().refreshPreview();
|
|
});
|
|
|
|
/** @type {JQuery<HTMLInputElement>} */
|
|
const textColor = $('#txt-input');
|
|
if (textColor[0])
|
|
textColor[0].value = `${PluginWrapper.previewSettings.readerSettings.textColor}`;
|
|
textColor.off('change').on('change', ({ target: { value } }) => {
|
|
PluginWrapper.previewSettings.readerSettings.textColor = value;
|
|
currentWrapper().refreshPreview();
|
|
});
|
|
|
|
/** @type {JQuery<HTMLInputElement>} */
|
|
const fontSize = $('#fs-input');
|
|
if (fontSize[0])
|
|
fontSize[0].value = `${PluginWrapper.previewSettings.readerSettings.textSize}`;
|
|
fontSize.off('change').on('change', ({ target: { value } }) => {
|
|
PluginWrapper.previewSettings.readerSettings.textSize = parseFloat(value);
|
|
currentWrapper().refreshPreview();
|
|
});
|
|
|
|
/** @type {JQuery<HTMLSelectElement>} */
|
|
const textAlign = $('#ta-input');
|
|
textAlign.off('change').on('change', ({ target: { selectedOptions } }) => {
|
|
PluginWrapper.previewSettings.readerSettings.textAlign =
|
|
selectedOptions[0].value;
|
|
currentWrapper().refreshPreview();
|
|
});
|
|
|
|
/** @type {JQuery<HTMLTextAreaElement>} */
|
|
const customCSS = $('#css-ta');
|
|
if (customCSS[0])
|
|
customCSS[0].value = PluginWrapper.previewSettings.customCSS;
|
|
customCSS.off('change').on('change', ({ target: { value } }) => {
|
|
PluginWrapper.previewSettings.customCSS = value;
|
|
currentWrapper().refreshPreview();
|
|
});
|
|
|
|
/** @type {JQuery<HTMLTextAreaElement>} */
|
|
const customJS = $('#js-ta');
|
|
if (customJS[0]) customJS[0].value = PluginWrapper.previewSettings.customJS;
|
|
customJS.off('change').on('change', ({ target: { value } }) => {
|
|
PluginWrapper.previewSettings.customJS = value;
|
|
currentWrapper().refreshPreview();
|
|
});
|
|
};
|
|
|
|
// #endregion
|
|
|
|
// load plugin
|
|
|
|
const load_plugin = (/** @type {HTMLButtonElement} */ btn) => {
|
|
const ele = $(btn);
|
|
const plugin_requirePath = ele.attr('data-require');
|
|
if (!plugin_requirePath) return;
|
|
state.current_plugin = new PluginWrapper(plugin_requirePath);
|
|
plugin_search.attr('data-require', plugin_requirePath);
|
|
plugin_search.val(ele.text().split('/')[1]);
|
|
state.popular_pages.reset();
|
|
state.search_pages.reset();
|
|
destroySearchTurnOffBox();
|
|
state.current_plugin.getFilters().then(() => {
|
|
$('#loadedplugin').text('Loaded: ' + btn.innerText);
|
|
});
|
|
};
|
|
|
|
// #region plugin search
|
|
|
|
const loadPluginsIntoSearchBar = () => {
|
|
const { language, keyword } = state.plugin_search;
|
|
const plugins = language ? state.all_plugins[language] : state.plugin_infos;
|
|
state.plugins_in_search = keyword
|
|
? plugins.filter(p =>
|
|
keyword.charAt(0) === '-'
|
|
? !p.name.toLowerCase().includes(keyword.toLowerCase().substring(1))
|
|
: p.name.toLowerCase().includes(keyword.toLowerCase()),
|
|
)
|
|
: plugins;
|
|
};
|
|
|
|
fetchFromAPI('/all_plugins')
|
|
.then(res => res.json())
|
|
.then((/** @type {PluginList} */ all) => {
|
|
state.all_plugins = all;
|
|
for (let lang in all) {
|
|
plugin_language_selection.append(`<option>${lang}</option>`);
|
|
state.plugin_infos = state.plugin_infos.concat(all[lang]);
|
|
}
|
|
});
|
|
|
|
const destroySearchTurnOffBox = () => {
|
|
$('#turnoff-catch').trigger('click');
|
|
};
|
|
|
|
const createSearchTurnOffBox = () => {
|
|
// if there is no unclick box
|
|
if (!$('#turnoff-catch').length) {
|
|
// create it
|
|
const turnoff_catch = $('<div>').attr('id', 'turnoff-catch');
|
|
$('body').append(turnoff_catch);
|
|
turnoff_catch.on('click', () => {
|
|
plugin_search_results.hide();
|
|
turnoff_catch.remove();
|
|
});
|
|
}
|
|
};
|
|
|
|
const display_plugin_search = () => {
|
|
plugin_search_results.hide();
|
|
plugin_search_results.empty();
|
|
createSearchTurnOffBox();
|
|
state.plugins_in_search.forEach(plugin => {
|
|
/** @type {JQuery<HTMLImageElement>} */
|
|
const img = $('<img>', { src: `./icons/${plugin.icon}` });
|
|
img.css({
|
|
height: '100%',
|
|
'object-fit': 'contains',
|
|
'margin-right': '10px',
|
|
});
|
|
/** @type {JQuery<HTMLButtonElement>} */
|
|
const btn = $('<button>', {
|
|
type: 'button',
|
|
class: 'search-item btn btn-light btn-outline-primary btn-md btn-block',
|
|
});
|
|
btn
|
|
.css({
|
|
display: 'flex',
|
|
'align-items': 'center',
|
|
height: '30px',
|
|
'flex-shrink': 0,
|
|
})
|
|
.attr('data-require', `${plugin.requirePath}`)
|
|
.on('click', e => {
|
|
load_plugin(e.target);
|
|
});
|
|
/** @type {JQuery<HTMLDivElement>} */
|
|
const div = $('<div>');
|
|
div.css({
|
|
display: 'flex',
|
|
'align-items': 'center',
|
|
});
|
|
btn.append(img).append(`${plugin.lang}/${plugin.name}`);
|
|
div.append(btn);
|
|
plugin_search_results.append(div);
|
|
});
|
|
plugin_search_results.show();
|
|
};
|
|
// #endregion
|
|
|
|
// #region event handlers
|
|
plugin_language_selection.on('change', e => {
|
|
state.plugin_search.language = e.target.value;
|
|
loadPluginsIntoSearchBar();
|
|
});
|
|
|
|
plugin_search.on('focus', () => {
|
|
if (!state.all_plugins) return;
|
|
plugin_search[0].selectionStart = 0;
|
|
plugin_search[0].selectionEnd = plugin_search.val()?.length || 0;
|
|
loadPluginsIntoSearchBar();
|
|
display_plugin_search();
|
|
});
|
|
|
|
plugin_search.on('keyup', e => {
|
|
state.plugin_search.keyword = e.target.value;
|
|
loadPluginsIntoSearchBar();
|
|
display_plugin_search();
|
|
});
|
|
|
|
clear_plugin_search.on('click', e => {
|
|
plugin_search_results.hide();
|
|
plugin_search.val('');
|
|
plugin_search.attr('data-require', '');
|
|
});
|
|
|
|
previewSwitch.on('change', () => {
|
|
currentWrapper().toggleChapterView();
|
|
});
|
|
|
|
// get all header inputs and check if headers changed after
|
|
$(".headerinfo > span[contenteditable='true']").each((_, inputElement) => {
|
|
$(inputElement).on('input', checkIfHeadersChanged);
|
|
});
|
|
|
|
latestSwitch.on('change', () => {
|
|
const label = latestSwitch.siblings('span');
|
|
/** @type {JQuery<HTMLInputElement>} */
|
|
const filtersBtn = $('#filters-btn');
|
|
if (latestSwitch[0].checked) {
|
|
state.popular_pages.showLatest = true;
|
|
filtersBtn[0].disabled = true;
|
|
label.text('Latest');
|
|
} else {
|
|
state.popular_pages.showLatest = false;
|
|
filtersBtn[0].disabled = false;
|
|
label.text('Popular');
|
|
}
|
|
});
|
|
|
|
searchNovels_searchbar.on('keyup', () => {
|
|
state.search_pages.reset();
|
|
});
|
|
|
|
$('#addheaderbtn').on('click', () => {
|
|
/**
|
|
<div class="headerinfo" data-headername="Cookie">
|
|
<span class="headername" onclick="this.nextElementSibling.nextElementSibling.focus()">Cookie</span><b>: </b>
|
|
<span class="headervalue" contenteditable="true" ></span>
|
|
</div>
|
|
*/
|
|
const nameSpan = $('<span>').addClass('headername');
|
|
const valueSpan = $('<span>').addClass('headervalue');
|
|
const separator = $('<b>').html(': ');
|
|
const clearButton = $('<button>')
|
|
.text('Clear')
|
|
.addClass('headereditbutton')
|
|
.on('click', () => {
|
|
valueSpan.text('');
|
|
checkIfHeadersChanged();
|
|
});
|
|
const removeButton = $('<button>')
|
|
.text('Remove')
|
|
.addClass('headereditbutton');
|
|
nameSpan[0].contentEditable = 'true';
|
|
valueSpan[0].contentEditable = 'true';
|
|
nameSpan.on('input', checkIfHeadersChanged);
|
|
valueSpan.on('input', checkIfHeadersChanged);
|
|
const headerinfo = $('<div>')
|
|
.append(nameSpan, separator, valueSpan, clearButton, removeButton)
|
|
.attr('class', 'headerinfo');
|
|
removeButton.on('click', () => {
|
|
headerinfo.remove();
|
|
checkIfHeadersChanged();
|
|
});
|
|
$('#headerinfos').append(headerinfo);
|
|
});
|
|
|
|
$('#copyascode').on('click', async () => {
|
|
const headers = getHeaders();
|
|
const strippedHeaders = {
|
|
...headers,
|
|
};
|
|
delete strippedHeaders['Cookie'];
|
|
delete strippedHeaders['User-Agent'];
|
|
await navigator.clipboard.writeText(JSON.stringify(strippedHeaders, null, 4));
|
|
lastCopiedHeaders = headers;
|
|
checkIfHeadersChanged();
|
|
$('#headerscopied').css({ display: 'block' });
|
|
setTimeout(() => $('#headerscopied').css({ display: 'none' }), 1000);
|
|
});
|
|
|
|
// buttons:
|
|
$('.popularNovels-btn').on('click', () =>
|
|
state.current_plugin?.getPopularNovels(),
|
|
);
|
|
|
|
$('.searchNovels-btn').on('click', () =>
|
|
state.current_plugin?.getSearchedNovels(),
|
|
);
|
|
|
|
$('.parseNovel-btn').on('click', () => state.current_plugin?.getNovel());
|
|
$('.parsePage-btn').on('click', () => state.current_plugin?.getPage());
|
|
|
|
$('.parseChapter-btn').on('click', () => state.current_plugin?.getChapter());
|
|
$('.fetchImage-btn').on('click', () => state.current_plugin?.fetchImage());
|
|
$('.resolveUrl-btn').on('click', () => state.current_plugin?.resolveUrl());
|
|
|
|
// #endregion
|
|
|
|
// JQuery document.body.onload
|
|
$(() => {
|
|
/** @type {JQuery<HTMLSpanElement>} */
|
|
const userAgentInput = $('[data-headername="User-Agent"] .headervalue');
|
|
if (userAgentInput.length) {
|
|
userAgentInput.text(navigator.userAgent);
|
|
}
|
|
// TODO read the values from localstorage
|
|
state.plugin_search.keyword = plugin_search[0].value;
|
|
PluginWrapper.previewSettings.sanitize = false;
|
|
Promise.allSettled([
|
|
fetchFromAPI('static/html/template.html')
|
|
.then(r => r.text())
|
|
.then(t => {
|
|
PluginWrapper.previewSettings.htmlTemplate = t;
|
|
}),
|
|
fetchFromAPI(
|
|
'https://raw.githubusercontent.com/LNReader/lnreader/plugins/android/app/src/main/assets/css/index.css',
|
|
)
|
|
.then(r => r.text())
|
|
.then(t => (PluginWrapper.previewSettings.fillCSS = t)),
|
|
fetchFromAPI(
|
|
'https://raw.githubusercontent.com/LNReader/lnreader/plugins/android/app/src/main/assets/js/index.js',
|
|
)
|
|
.then(r => r.text())
|
|
.then(t => (PluginWrapper.previewSettings.fillJS = t)),
|
|
]).then(() => {
|
|
emptyPluginWrapper.refreshPreview();
|
|
});
|
|
latestSwitch.trigger('change');
|
|
for (const key in window.themes) {
|
|
const t = window.themes[key];
|
|
const picker = $('#theme-picker');
|
|
picker.append(
|
|
$('<div>')
|
|
.text(PluginWrapper.previewSettings.theme === t ? '✓' : 'A')
|
|
.addClass('theme')
|
|
.css({
|
|
'background-color': t.backgroundColor,
|
|
color: t.textColor,
|
|
})
|
|
.attr('id', key)
|
|
.on('click', x => {
|
|
loadThemePreset(t);
|
|
refreshPreviewSettings();
|
|
currentWrapper().refreshPreview();
|
|
$('#theme-picker .theme').each((e, el) => {
|
|
el.innerText = el.id === key ? '✓' : 'A';
|
|
});
|
|
}),
|
|
);
|
|
}
|
|
refreshPreviewSettings();
|
|
lastCopiedHeaders = getHeaders();
|
|
checkIfHeadersChanged();
|
|
});
|