"); } else { description.innerHTML = `${this.chapter.title}`; } anchor.appendChild(description); anchor.onclick = (event) => { event.preventDefault(); this.chapter.onclick?.(this.index); }; return element; } render() { } } function q(selector, parent) { const element = (parent || document).querySelector(selector); if (!element) { throw new Error(`Can't find element: ${selector}`); } return element; } class PageFetcher { chapters = []; chapterIndex = 0; queue; matcher; done = false; beforeInit; afterInit; appendPageLock = false; abortb = false; chaptersSelectionElement; constructor(queue, matcher) { this.queue = queue; this.matcher = matcher; this.chaptersSelectionElement = q("#backChaptersSelection"); this.chaptersSelectionElement.addEventListener("click", () => this.backChaptersSelection()); const debouncer = new Debouncer(); EBUS.subscribe("ifq-on-finished-report", (index) => debouncer.addEvent("APPEND-NEXT-PAGES", () => this.appendPages(index, !this.queue.downloading?.()), 5)); EBUS.subscribe("pf-try-extend", () => debouncer.addEvent("APPEND-NEXT-PAGES", () => !this.queue.downloading?.() && this.appendNextPage(true), 5)); } appendToView(total, nodes, done) { EBUS.emit("pf-on-appended", total, nodes, done); } abort() { this.abortb = true; } async init() { this.chapters = await this.matcher.fetchChapters(); this.chapters.forEach((c) => { c.sourceIter = this.matcher.fetchPagesSource(c); c.onclick = (index) => { EBUS.emit("pf-change-chapter", index); if (this.chapters[index].queue) { this.appendToView(this.chapters[index].queue.length, this.chapters[index].queue, false); if (this.chapters.length > 1) { this.chaptersSelectionElement.hidden = false; } } if (!this.queue.downloading?.()) { this.beforeInit?.(); this.changeChapter(index, true).finally(() => this.afterInit?.()); } }; }); if (this.chapters.length === 1) { this.beforeInit?.(); this.changeChapter(0, true).finally(() => this.afterInit?.()); } if (this.chapters.length > 1) { this.appendToView(this.chapters.length, this.chapters.map((c, i) => new ChapterNode(c, i)), true); } } backChaptersSelection() { EBUS.emit("pf-change-chapter", -1); this.appendToView(this.chapters.length, this.chapters.map((c, i) => new ChapterNode(c, i)), true); this.chaptersSelectionElement.hidden = true; } /// start the chapter by index async changeChapter(index, appendToView) { this.chapterIndex = index; const chapter = this.chapters[this.chapterIndex]; this.queue.restore(index, chapter.queue); if (!chapter.sourceIter) { evLog("error", "chapter sourceIter is not set!"); return; } let first = await chapter.sourceIter.next(); if (!first.done) { await this.appendImages(first.value, appendToView); } this.appendPages(this.queue.length - 1, appendToView); } // append next page until the queue length is 60 more than finished async appendPages(appendedCount, appendToView) { while (true) { if (appendedCount + 60 < this.queue.length) break; if (!await this.appendNextPage(appendToView)) break; } } async appendNextPage(appendToView) { if (this.appendPageLock) return false; try { this.appendPageLock = true; if (this.done || this.abortb) return false; const chapter = this.chapters[this.chapterIndex]; const next = await chapter.sourceIter.next(); if (next.done) { chapter.done = true; this.appendToView(this.queue.length, [], true); return false; } else { await this.appendImages(next.value, appendToView); return true; } } finally { this.appendPageLock = false; } } async appendImages(page, appendToView) { try { const nodes = await this.obtainImageNodeList(page); if (this.abortb) return false; const IFs = nodes.map( (imgNode) => new IMGFetcher(imgNode, this.matcher, this.chapterIndex) ); this.queue.push(...IFs); this.chapters[this.chapterIndex].queue.push(...IFs); if (appendToView) { this.appendToView(this.queue.length, IFs); } return true; } catch (error) { evLog("error", `page fetcher append images error: `, error); return false; } } //从文档的字符串中创建缩略图元素列表 async obtainImageNodeList(page) { let tryTimes = 0; while (tryTimes < 3) { try { return await this.matcher.parseImgNodes(page, this.chapters[this.chapterIndex].id); } catch (error) { evLog("error", "warn: parse image nodes failed, retrying: ", error); tryTimes++; } } evLog("error", "warn: parse image nodes failed: reached max try times!"); return []; } //通过地址请求该页的文档 async fetchDocument(pageURL) { return await window.fetch(pageURL).then((response) => response.text()); } } class GalleryMeta { url; title; originTitle; downloader; tags; constructor(url, title) { this.url = url; this.title = title; this.tags = {}; this.downloader = "https://github.com/MapoMagpie/eh-view-enhance"; } } class BaseMatcher { async fetchChapters() { return [{ id: 1, title: "Default", source: window.location.href, queue: [] }]; } title(doc) { const meta = this.galleryMeta(doc); return meta.originTitle || meta.title || "unknown"; } galleryMeta(doc, _chapter) { return new GalleryMeta(window.location.href, doc.title || "unknown"); } workURLs() { return [this.workURL()]; } async processData(data, contentType, _url) { return [data, contentType]; } } function toMD5(s) { return md5(s); } function get_num(gid, page) { gid = window.atob(gid); page = window.atob(page); let n = toMD5(gid + page).slice(-1).charCodeAt(0); if (gid >= window.atob("MjY4ODUw") && gid <= window.atob("NDIxOTI1")) { n %= 10; } else if (gid >= window.atob("NDIxOTI2")) { n %= 8; } if (n < 10) { return 2 + 2 * n; } else { return 10; } } function drawImage(ctx, e, gid, page) { const width = e.width; const height = e.height; const s = get_num(window.btoa(gid), window.btoa(page)); const l = parseInt((height % s).toString()); const r = width; for (let m = 0; m < s; m++) { let c = Math.floor(height / s); let g = c * m; let w = height - c * (m + 1) - l; 0 == m ? c += l : g += l, ctx.drawImage(e, 0, w, r, c, 0, g, r, c); } } class Comic18Matcher extends BaseMatcher { meta; async fetchChapters() { const ret = []; const thumb = document.querySelector(".thumb-overlay > img"); const chapters = Array.from(document.querySelectorAll(".visible-lg .episode > ul > a")); if (chapters.length > 0) { chapters.forEach((ch, i) => { const title = Array.from(ch.querySelector("li")?.childNodes || []).map((n) => n.textContent?.trim()).filter(Boolean).map((n) => n); ret.push({ id: i, title, source: ch.href, queue: [], thumbimg: thumb?.src }); }); } else { const href = document.querySelector(".read-block > a")?.href; if (href === void 0) throw new Error("No page found"); ret.push({ id: 0, title: "Default", source: href, queue: [] }); } return ret; } async *fetchPagesSource(chapter) { yield chapter.source; } async parseImgNodes(source) { const list = []; const raw = await window.fetch(source).then((resp) => resp.text()); const document2 = new DOMParser().parseFromString(raw, "text/html"); const elements = Array.from(document2.querySelectorAll(".scramble-page:not(.thewayhome)")); for (const element of elements) { const title = element.id; const img = element.querySelector("img"); if (!img) { evLog("error", "warn: cannot find img element", element); continue; } const src = img.getAttribute("data-original"); if (!src) { evLog("error", "warn: cannot find data-original", element); continue; } list.push(new ImageNode("", src, title)); } return list; } async processData(data, contentType, url) { const reg = /(\d+)\/(\d+)\.(\w+)/; const matches = url.match(reg); const gid = matches[1]; let scrambleID = 220980; if (Number(gid) < scrambleID) return [data, contentType]; const page = matches[2]; const ext = matches[3]; if (ext === "gif") return [data, contentType]; const img = await createImageBitmap(new Blob([data], { type: contentType })); const canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; const ctx = canvas.getContext("2d"); drawImage(ctx, img, gid, page); return new Promise( (resolve) => canvas.toBlob( (blob) => blob?.arrayBuffer().then((buf) => resolve([new Uint8Array(buf), blob.type])).finally(() => canvas.remove()), contentType ) ); } workURL() { return /18-?comic(freedom)?.(vip|org|xyz)\/album\/\d+/; } galleryMeta(doc) { if (this.meta) return this.meta; const title = doc.querySelector(".panel-heading h1")?.textContent || "UNTITLE"; this.meta = new GalleryMeta(window.location.href, title); this.meta.originTitle = title; const tagTrList = doc.querySelectorAll("div.tag-block > span"); const tags = {}; tagTrList.forEach((tr) => { const cat = tr.getAttribute("data-type")?.trim(); if (cat) { const values = Array.from(tr.querySelectorAll("a")).map((a) => a.textContent).filter(Boolean); if (values.length > 0) { tags[cat] = values; } } }); this.meta.tags = tags; return this.meta; } // https://cdn-msp.18comic.org/media/photos/529221/00004.gif async fetchOriginMeta(url) { return { url }; } } class DanbooruMatcher extends BaseMatcher { tags = {}; count = 0; async *fetchPagesSource() { let doc = document; yield doc; let tryTimes = 0; while (true) { const url = this.nextPage(doc); if (!url) break; try { doc = await window.fetch(url).then((res) => res.text()).then((text) => new DOMParser().parseFromString(text, "text/html")); } catch (e) { tryTimes++; if (tryTimes > 3) throw new Error(`fetch next page failed, ${e}`); continue; } tryTimes = 0; yield doc; } } async fetchOriginMeta(href) { let url = null; const doc = await window.fetch(href).then((res) => res.text()).then((text) => new DOMParser().parseFromString(text, "text/html")); if (conf.fetchOriginal) { url = this.getOriginalURL(doc); } if (!url) { url = this.getNormalURL(doc); } if (!url) throw new Error("Cannot find origin image or video url"); let title; const ext = url.split(".").pop()?.match(/^\w+/)?.[0]; const id = this.extractIDFromHref(href); if (ext && id) { title = `${id}.${ext}`; } return { url, title }; } async parseImgNodes(source) { const list = []; const doc = source; this.queryList(doc).forEach((ele) => { const [imgNode, tags] = this.toImgNode(ele); if (!imgNode) return; this.count++; if (tags !== "") { this.tags[imgNode.title.split(".")[0]] = tags.trim().replaceAll(": ", ":").split(" ").map((v) => v.trim()).filter((v) => v !== ""); } list.push(imgNode); }); return list; } galleryMeta() { const url = new URL(window.location.href); const tags = url.searchParams.get("tags")?.trim(); const meta = new GalleryMeta(window.location.href, `${this.site()}_${tags}_${this.count}`); meta.tags = this.tags; return meta; } } class DanbooruDonmaiMatcher extends DanbooruMatcher { site() { return "danbooru"; } workURL() { return /danbooru.donmai.us\/(posts(?!\/)|$)/; } nextPage(doc) { return doc.querySelector(".paginator a.paginator-next")?.href || null; } queryList(doc) { return Array.from(doc.querySelectorAll(".posts-container > article:not(.blacklisted-active)")); } toImgNode(ele) { const anchor = ele.querySelector("a"); if (!anchor) { evLog("error", "warn: cannot find anchor element", anchor); return [null, ""]; } const img = anchor.querySelector("img"); if (!img) { evLog("error", "warn: cannot find img element", img); return [null, ""]; } const href = anchor.getAttribute("href"); if (!href) { evLog("error", "warn: cannot find href", anchor); return [null, ""]; } return [new ImageNode(img.src, href, `${ele.getAttribute("data-id") || ele.id}.jpg`), ele.getAttribute("data-tags") || ""]; } getOriginalURL(doc) { return doc.querySelector("#image-resize-notice > a")?.href || null; } getNormalURL(doc) { return doc.querySelector("#image")?.getAttribute("src") || null; } extractIDFromHref(href) { return href.match(/posts\/(\d+)/)?.[1]; } } class Rule34Matcher extends DanbooruMatcher { site() { return "rule34"; } workURL() { return /rule34.xxx\/index.php\?page=post&s=list/; } nextPage(doc) { return doc.querySelector(".pagination a[alt=next]")?.href || null; } queryList(doc) { return Array.from(doc.querySelectorAll(".image-list > .thumb:not(.blacklisted-image) > a")); } toImgNode(ele) { const img = ele.querySelector("img"); if (!img) { evLog("error", "warn: cannot find img element", img); return [null, ""]; } const href = ele.getAttribute("href"); if (!href) { evLog("error", "warn: cannot find href", ele); return [null, ""]; } return [new ImageNode(img.src, href, `${ele.id}.jpg`), img.getAttribute("alt") || ""]; } getOriginalURL(doc) { const raw = doc.querySelector("#note-container + script")?.textContent?.trim().replace("image = ", "").replace(";", "").replaceAll("'", '"'); try { if (raw) { const info = JSON.parse(raw); return `${info.domain}/${info.base_dir}/${info.dir}/${info.img}`; } } catch (error) { evLog("error", "get original url failed", error); } return null; } getNormalURL(doc) { return doc.querySelector("#image,#gelcomVideoPlayer > source")?.getAttribute("src") || null; } extractIDFromHref(href) { return href.match(/id=(\d+)/)?.[1]; } } const POST_INFO_REGEX = /Post\.register\((.*)\)/g; class YandereMatcher extends BaseMatcher { infos = {}; count = 0; workURL() { return /yande.re\/post(?!\/show\/.*)/; } async *fetchPagesSource() { let doc = document; yield doc; let tryTimes = 0; while (true) { const url = doc.querySelector("#paginator a.next_page")?.href; if (!url) break; try { doc = await window.fetch(url).then((res) => res.text()).then((text) => new DOMParser().parseFromString(text, "text/html")); } catch (e) { tryTimes++; if (tryTimes > 3) throw new Error(`fetch next page failed, ${e}`); continue; } tryTimes = 0; yield doc; } } async parseImgNodes(source) { const doc = source; const raw = doc.querySelector("body > form + script")?.textContent; if (!raw) throw new Error("cannot find post list from script"); const matches = raw.matchAll(POST_INFO_REGEX); const ret = []; for (const match of matches) { if (!match || match.length < 2) continue; try { const info = JSON.parse(match[1]); this.infos[info.id.toString()] = info; this.count++; ret.push(new ImageNode(info.preview_url, `${window.location.origin}/post/show/${info.id}`, `${info.id}.${info.file_ext}`)); } catch (error) { evLog("error", "parse post info failed", error); continue; } } return ret; } async fetchOriginMeta(href) { let id = href.split("/").pop(); if (!id) { throw new Error(`cannot find id from ${href}`); } let url; if (conf.fetchOriginal) { url = this.infos[id]?.file_url; } else { url = this.infos[id]?.sample_url; } if (!url) { throw new Error(`cannot find url for id ${id}`); } return { url }; } galleryMeta() { const url = new URL(window.location.href); const tags = url.searchParams.get("tags")?.trim(); const meta = new GalleryMeta(window.location.href, `yande_${tags}_${this.count}`); meta["infos"] = this.infos; return meta; } } class GelBooruMatcher extends DanbooruMatcher { site() { return "gelbooru"; } workURL() { return /gelbooru.com\/index.php\?page=post&s=list/; } nextPage(doc) { return doc.querySelector("#paginator a[alt=next]")?.href || null; } queryList(doc) { return Array.from(doc.querySelectorAll(".thumbnail-container > article.thumbnail-preview:not(.blacklisted-image) > a")); } toImgNode(ele) { const img = ele.querySelector("img"); if (!img) { evLog("error", "warn: cannot find img element", img); return [null, ""]; } const href = ele.getAttribute("href"); if (!href) { evLog("error", "warn: cannot find href", ele); return [null, ""]; } return [new ImageNode(img.src, href, `${ele.id}.jpg`), img.getAttribute("alt") || ""]; } getOriginalURL(doc) { return doc.querySelector("head > meta[property='og:image']")?.getAttribute("content") || null; } getNormalURL(doc) { const img = doc.querySelector("#image"); if (img?.src) return img.src; const vidSources = Array.from(doc.querySelectorAll("#gelcomVideoPlayer > source")); if (vidSources.length === 0) return null; return vidSources.find((s) => s.type.endsWith("mp4"))?.src || vidSources[0].src; } extractIDFromHref(href) { return href.match(/id=(\d+)/)?.[1]; } } function parseImagePositions(styles) { return styles.map((st) => { const [x, y] = st.backgroundPosition.split(" ").map((v) => Math.abs(parseInt(v))); return { x, y, width: parseInt(st.width), height: parseInt(st.height) }; }); } function splitSpriteImage(image, positions) { const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); const result = []; for (const pos of positions) { canvas.width = pos.width; canvas.height = pos.height; ctx.drawImage(image, pos.x, pos.y, pos.width, pos.height, 0, 0, pos.width, pos.height); result.push(canvas.toDataURL()); } canvas.remove(); return result; } async function splitImagesFromUrl(url, positions) { let data; for (let i = 0; i < 3; i++) { try { data = await fetchImage(url); break; } catch (err) { } } if (!data) throw new Error("load sprite image error"); url = URL.createObjectURL(data); const img = await new Promise((resolve, reject) => { let img2 = new Image(); img2.onload = () => resolve(img2); img2.onerror = () => reject(new Error("load sprite image error")); img2.src = url; }); URL.revokeObjectURL(url); return splitSpriteImage(img, positions); } const regulars = { /** 有压缩的大图地址 */ normal: /\
Exclude URL|Site
✖
-
${workURLs.map((r, index) => `
- ${r} `).join("")}
Custom Keyboard
✖
${Object.entries(keyboardEvents.inMain).map(([id]) => `
`).join("")}
${i18n.keyboardCustom.inMain[id].get()}
${Object.entries(keyboardEvents.inFullViewGrid).map(([id]) => `
`).join("")}
${i18n.keyboardCustom.inFullViewGrid[id].get()}
${Object.entries(keyboardEvents.inBigImageMode).map(([id]) => `
`).join("")}
${i18n.keyboardCustom.inBigImageMode[id].get()}
${i18n.help.get()}
`;
guideElement.classList.add("ehvp-full-panel");
guideElement.setAttribute("style", `align-items: center; color: black; text-align: left;`);
guideElement.addEventListener("click", () => guideElement.remove());
if (HTML.root.classList.contains("ehvp-root-collapse")) {
document.body.after(guideElement);
} else {
HTML.root.appendChild(guideElement);
}
}
function showKeyboardCustomEvent() {
createKeyboardCustomPanel(keyboardEvents, HTML.root);
}
function showExcludeURLEvent() {
createExcludeURLPanel(HTML.root);
}
const signal = { first: true };
function main(expand) {
if (HTML.pageHelper) {
if (expand && !HTML.pageHelper.classList.contains("p-helper-extend")) {
HTML.pageHelper.classList.add("p-helper-extend");
showFullViewGrid();
if (signal.first) {
signal.first = false;
PF.init();
}
} else {
HTML.pageHelper.classList.remove("p-helper-extend");
["config", "downloader"].forEach((id) => togglePanelEvent(id, true));
hiddenFullViewGrid();
}
}
}
return {
main,
modNumberConfigEvent,
modBooleanConfigEvent,
modSelectConfigEvent,
modPageHelperPostion,
togglePanelEvent,
showFullViewGrid,
hiddenFullViewGridEvent,
hiddenFullViewGrid,
scrollEvent,
fullViewGridKeyBoardEvent,
bigImageFrameKeyBoardEvent,
keyboardEvent,
showGuideEvent,
collapsePanelEvent,
abortMouseleavePanelEvent,
showKeyboardCustomEvent,
showExcludeURLEvent
};
}
class FullViewGridManager {
root;
// renderRangeRecord: [number, number] = [0, 0];
queue = [];
done = false;
chapterIndex = 0;
constructor(HTML, BIFM) {
this.root = HTML.fullViewGrid;
EBUS.subscribe("pf-on-appended", (_total, nodes, done) => {
this.append(nodes);
this.done = done || false;
setTimeout(() => this.renderCurrView(), 200);
});
EBUS.subscribe("pf-change-chapter", (index) => {
this.chapterIndex = Math.max(0, index);
this.root.innerHTML = "";
this.queue = [];
this.done = false;
});
EBUS.subscribe("ifq-do", (_, imf) => {
if (!BIFM.visible)
return;
if (imf.chapterIndex !== this.chapterIndex)
return;
if (!imf.node.root)
return;
let scrollTo = imf.node.root.offsetTop - window.screen.availHeight / 3;
scrollTo = scrollTo <= 0 ? 0 : scrollTo >= this.root.scrollHeight ? this.root.scrollHeight : scrollTo;
if (this.root.scrollTo.toString().includes("[native code]")) {
this.root.scrollTo({ top: scrollTo, behavior: "smooth" });
} else {
this.root.scrollTop = scrollTo;
}
});
}
append(nodes) {
if (nodes.length > 0) {
const list = nodes.map((n) => {
return {
node: n,
element: n.create()
};
});
this.queue.push(...list);
this.root.append(...list.map((l) => l.element));
}
}
tryExtend() {
if (this.done)
return;
const nodes = Array.from(this.root.childNodes);
if (nodes.length === 0)
return;
const lastImgNode = nodes[nodes.length - 1];
const viewButtom = this.root.scrollTop + this.root.clientHeight;
if (viewButtom + this.root.clientHeight * 2.5 < lastImgNode.offsetTop + lastImgNode.offsetHeight) {
return;
}
EBUS.emit("pf-try-extend");
}
/**
* 当滚动停止时，检查当前显示的页面上的是什么元素，然后渲染图片
*/
renderCurrView() {
const [scrollTop, clientHeight] = [this.root.scrollTop, this.root.clientHeight];
const [start, end] = this.findOutsideRoundView(scrollTop, clientHeight);
this.queue.slice(start, end + 1 + conf.colCount).forEach((e) => e.node.render());
}
findOutsideRoundView(currTop, clientHeight) {
const viewButtom = currTop + clientHeight;
let outsideTop = 0;
let outsideBottom = 0;
for (let i = 0; i < this.queue.length; i += conf.colCount) {
const element = this.queue[i].element;
if (outsideBottom === 0) {
if (element.offsetTop + 2 >= currTop) {
outsideBottom = i + 1;
} else {
outsideTop = i;
}
} else {
outsideBottom = i;
if (element.offsetTop + element.offsetHeight > viewButtom) {
break;
}
}
}
return [outsideTop, Math.min(outsideBottom + conf.colCount, this.queue.length - 1)];
}
}
function dragElement(element, dragHub, callback) {
(dragHub ?? element).addEventListener("mousedown", (event) => {
event.preventDefault();
const wh = window.innerHeight;
const ww = window.innerWidth;
const mouseMove = (event2) => {
event2.preventDefault();
const mouseX = event2.clientX;
const mouseY = event2.clientY;
if (mouseY <= wh / 2) {
element.style.top = Math.max(mouseY, 5) + "px";
element.style.bottom = "unset";
} else {
element.style.bottom = Math.max(wh - mouseY - element.clientHeight, 5) + "px";
element.style.top = "unset";
}
if (mouseX <= ww / 2) {
element.style.left = Math.max(mouseX, 5) + "px";
element.style.right = "unset";
} else {
element.style.right = Math.max(ww - mouseX - element.clientWidth, 5) + "px";
element.style.left = "unset";
}
console.log("drag element: offset top: ", element.style.top, "offset left: ", element.style.left, "offset bottom: ", element.style.bottom, "offset right: ", element.style.right);
};
document.addEventListener("mousemove", mouseMove);
document.addEventListener("mouseup", () => {
document.removeEventListener("mousemove", mouseMove);
callback?.(element.offsetTop, element.offsetLeft);
}, { once: true });
});
}
function createOption(item) {
const i18nKey = item.i18nKey || item.key;
const i18nValue = i18n[i18nKey];
const i18nValueTooltip = i18n[`${i18nKey}Tooltip`];
if (!i18nValue) {
throw new Error(`i18n key ${i18nKey} not found`);
}
let display = true;
if (item.displayInSite) {
display = item.displayInSite.test(location.href);
}
let input = "";
switch (item.typ) {
case "boolean":
input = ``;
break;
case "number":
input = `
`;
break;
case "select":
if (!item.options) {
throw new Error(`options for ${item.key} not found`);
}
const optionsStr = item.options.map((o) => ``).join("");
input = ``;
break;
}
const [start, end] = item.gridColumnRange ? item.gridColumnRange : [1, 11];
return ``;
}
function createHTML() {
const fullViewGrid = document.createElement("div");
fullViewGrid.classList.add("ehvp-root");
fullViewGrid.classList.add("ehvp-root-collapse");
document.body.after(fullViewGrid);
const configItemStr = ConfigItems.map(createOption).join("");
const HTML_STRINGS = `
${configItemStr}
${i18n.showHelp.get()}
${i18n.showKeyboard.get()}
${i18n.showExcludes.get()}
${i18n.letUsStar.get()}
${i18n.imageScale.get()}:
${conf.imgScale}%
-
+
RESET
⋖📖
${i18n.config.get()}
${i18n.download.get()}
1/0/FIN:0
${i18n.autoPagePlay.get()}
${i18n.collapse.get()}
⋗
${i18n.backChapters.get()}
`;
this.frame.appendChild(lockEle);
const ani = lockEle.children[0].animate([{ width: "30vw" }, { width: "0vw" }], { duration: conf.preventScrollPageTime });
this.preventStep = { ele: lockEle, ani, fin: false };
ani.onfinish = () => this.resetPreventStep(true);
ani.oncancel = () => this.resetPreventStep(true);
}
return true;
}
}
isReachedBoundary(oriented) {
if (oriented === "prev") {
return this.frame.scrollTop <= 0;
}
if (oriented === "next") {
return this.frame.scrollTop >= this.frame.scrollHeight - this.frame.offsetHeight;
}
return false;
}
consecutive() {
this.throttler.addEvent("SCROLL", () => {
this.debouncer.addEvent("REDUCE", () => {
if (!this.elements.curr[0])
return;
const distance2 = this.getRealOffsetTop(this.elements.curr[0]) - this.frame.scrollTop;
if (this.tryReduce()) {
this.restoreScrollTop(this.elements.curr[0], distance2);
}
}, 500);
let mediaNodes = this.getMediaNodes();
let index = this.findMediaNodeIndexOnCenter(mediaNodes);
const centerNode = mediaNodes[index];
if (this.elements.curr[0] !== centerNode) {
const oldIndex = parseIndex(this.elements.curr[0]);
const newIndex = parseIndex(centerNode);
const oriented = oldIndex < newIndex ? "next" : "prev";
const queue = this.getChapter(this.chapterIndex).queue;
if (queue.length === 0 || newIndex < 0 || newIndex > queue.length - 1)
return;
const imf = queue[newIndex];
EBUS.emit("ifq-do", newIndex, imf, oriented);
if (this.elements.curr[0] instanceof HTMLVideoElement) {
this.elements.curr[0].pause();
}
this.tryPlayVideo(centerNode);
}
this.elements.curr[0] = centerNode;
const distance = this.getRealOffsetTop(this.elements.curr[0]) - this.frame.scrollTop;
if (this.tryExtend() > 0) {
this.restoreScrollTop(this.elements.curr[0], distance);
}
}, 60);
}
restoreScrollTop(imgNode, distance) {
this.frame.scrollTop = this.getRealOffsetTop(imgNode) - distance;
}
getRealOffsetTop(imgNode) {
return imgNode.offsetTop;
}
tryExtend() {
let indexOffset = 0;
let mediaNodes = [];
let scrollTopFix = 0;
while (true) {
mediaNodes = this.getMediaNodes();
const frist = mediaNodes[0];
if (frist.offsetTop + frist.offsetHeight > this.frame.scrollTop + scrollTopFix) {
const extended = this.extendImgNode(frist, "prev");
if (extended === null) {
break;
} else {
scrollTopFix += extended.offsetHeight;
}
indexOffset++;
} else {
break;
}
}
while (true) {
mediaNodes = this.getMediaNodes();
const last = mediaNodes[mediaNodes.length - 1];
if (last.offsetTop < this.frame.scrollTop + this.frame.offsetHeight) {
if (this.extendImgNode(last, "next") === null)
break;
} else {
break;
}
}
return indexOffset;
}
tryReduce() {
const imgNodes = this.getMediaNodes();
const shouldRemoveNodes = [];
let oriented = "prev";
for (const imgNode of imgNodes) {
if (oriented === "prev") {
if (imgNode.offsetTop + imgNode.offsetHeight < this.frame.scrollTop) {
shouldRemoveNodes.push(imgNode);
} else {
oriented = "next";
shouldRemoveNodes.pop();
}
} else if (oriented === "next") {
if (imgNode.offsetTop > this.frame.scrollTop + this.frame.offsetHeight) {
oriented = "remove";
}
} else {
shouldRemoveNodes.push(imgNode);
}
}
if (shouldRemoveNodes.length === 0)
return false;
for (const imgNode of shouldRemoveNodes) {
imgNode.remove();
}
return true;
}
extendImgNode(mediaNode, oriented) {
let extendedNode;
const index = parseInt(mediaNode.getAttribute("d-index"));
if (isNaN(index)) {
throw new Error("BIFM: extendImgNode: media node index is NaN");
}
const queue = this.getChapter(this.chapterIndex).queue;
if (queue.length === 0)
return null;
if (oriented === "prev") {
if (index === 0)
return null;
extendedNode = this.newMediaNode(index - 1, queue[index - 1]);
mediaNode.before(extendedNode);
} else {
if (index === queue.length - 1)
return null;
extendedNode = this.newMediaNode(index + 1, queue[index + 1]);
mediaNode.after(extendedNode);
}
return extendedNode;
}
newMediaNode(index, imf) {
if (!imf)
throw new Error("BIFM: newMediaNode: img fetcher is null");
if (imf.contentType?.startsWith("video")) {
const vid = document.createElement("video");
vid.classList.add("bifm-img");
vid.classList.add("bifm-vid");
vid.setAttribute("d-index", index.toString());
vid.onloadeddata = () => {
if (this.visible && vid === this.elements.curr[0]) {
this.tryPlayVideo(vid);
}
};
vid.src = imf.blobUrl;
return vid;
} else {
const img = document.createElement("img");
img.decoding = "sync";
img.classList.add("bifm-img");
img.setAttribute("d-index", index.toString());
if (imf.stage === FetchState.DONE) {
img.src = imf.blobUrl;
} else {
img.src = imf.node.src;
}
return img;
}
}
tryPlayVideo(vid) {
if (vid instanceof HTMLVideoElement) {
if (!this.vidController) {
this.vidController = new VideoControl(this.html.root);
}
this.vidController.attach(vid);
} else {
this.vidController?.hidden();
}
}
/**
* @param fix: 1 or -1, means scale up or down
* @param rate: step of scale, eg: current scale is 80, rate is 10, then new scale is 90
* @param _percent: directly set width percent
*/
scaleBigImages(fix, rate, _percent) {
const rule = queryCSSRules(this.html.styleSheel, ".bifm-img");
if (!rule)
return 0;
let percent = _percent || parseInt(conf.readMode === "pagination" ? rule.style.height : rule.style.width);
if (isNaN(percent))
percent = 100;
percent = percent + rate * fix;
switch (conf.readMode) {
case "pagination":
percent = Math.max(percent, 100);
percent = Math.min(percent, 300);
rule.style.height = `${percent}vh`;
break;
case "continuous":
percent = Math.max(percent, 20);
percent = Math.min(percent, 100);
rule.style.width = `${percent}vw`;
break;
}
if (conf.readMode === "pagination") {
this.checkFrameOverflow();
rule.style.minWidth = percent > 100 ? "" : "100vw";
if (percent === 100) {
this.resetScaleBigImages();
return 100;
}
}
conf.imgScale = percent;
saveConf(conf);
this.flushImgScaleBar();
return percent;
}
checkFrameOverflow() {
const flexRule = queryCSSRules(this.html.styleSheel, ".bifm-flex");
if (flexRule) {
if (this.frame.offsetWidth < this.frame.scrollWidth) {
flexRule.style.justifyContent = "flex-start";
} else {
flexRule.style.justifyContent = "center";
}
}
}
resetScaleBigImages() {
const rule = queryCSSRules(this.html.styleSheel, ".bifm-img");
if (!rule)
return;
rule.style.minWidth = "";
rule.style.minHeight = "";
rule.style.maxWidth = "";
rule.style.maxHeight = "";
rule.style.height = "";
rule.style.width = "";
rule.style.margin = "";
if (conf.readMode === "pagination") {
rule.style.height = "100vh";
rule.style.margin = "0";
if (conf.paginationIMGCount === 1)
rule.style.minWidth = "100vw";
} else {
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile/i.test(navigator.userAgent);
rule.style.maxWidth = "100vw";
rule.style.width = isMobile ? "100vw" : "80vw";
rule.style.margin = "0 auto";
}
conf.imgScale = 0;
saveConf(conf);
this.flushImgScaleBar();
}
initImgScaleStyle() {
this.resetScaleBigImages();
if (conf.imgScale && conf.imgScale > 0) {
const imgScale = conf.imgScale;
conf.imgScale = 0;
this.scaleBigImages(1, 0, imgScale);
}
}
stickyMouse(event, lastMouse) {
if (conf.readMode !== "pagination" || conf.stickyMouse === "disable")
return;
let [distanceY, distanceX] = [event.clientY - lastMouse.y, event.clientX - lastMouse.x];
if (conf.stickyMouse === "enable")
[distanceY, distanceX] = [-distanceY, -distanceX];
const overflowY = this.frame.scrollHeight - this.frame.offsetHeight;
if (overflowY > 0) {
const rateY = overflowY / (this.frame.offsetHeight / 4) * 3;
let scrollTop = this.frame.scrollTop + distanceY * rateY;
scrollTop = Math.max(scrollTop, 0);
scrollTop = Math.min(scrollTop, overflowY);
this.frame.scrollTop = scrollTop;
}
const overflowX = this.frame.scrollWidth - this.frame.offsetWidth;
if (overflowX > 0) {
const rateX = overflowX / (this.frame.offsetWidth / 4) * 3;
let scrollLeft = this.frame.scrollLeft + distanceX * rateX;
if (conf.reversePages) {
scrollLeft = Math.min(scrollLeft, 0);
scrollLeft = Math.max(scrollLeft, -overflowX);
} else {
scrollLeft = Math.max(scrollLeft, 0);
scrollLeft = Math.min(scrollLeft, overflowX);
}
this.frame.scrollLeft = scrollLeft;
}
}
findMediaNodeIndexOnCenter(imgNodes) {
const centerLine = this.frame.offsetHeight / 2;
for (let i = 0; i < imgNodes.length; i++) {
const imgNode = imgNodes[i];
const realOffsetTop = imgNode.offsetTop - this.frame.scrollTop;
if (realOffsetTop < centerLine && realOffsetTop + imgNode.offsetHeight >= centerLine) {
return i;
}
}
return 0;
}
}
class AutoPage {
bifm;
status;
button;
lockVer;
restart;
constructor(BIFM, root) {
this.bifm = BIFM;
this.status = "stop";
this.button = root;
this.lockVer = 0;
this.restart = false;
this.bifm.callbackOnWheel = () => {
if (this.status === "running") {
this.stop();
this.start(this.lockVer);
}
};
EBUS.subscribe("bifm-on-hidden", () => this.stop());
EBUS.subscribe("bifm-on-show", () => conf.autoPlay && this.start(this.lockVer));
this.initPlayButton();
}
initPlayButton() {
this.button.addEventListener("click", () => {
if (this.status === "stop") {
this.start(this.lockVer);
} else {
this.stop();
}
});
}
async start(lockVer) {
this.status = "running";
this.button.firstElementChild.innerText = i18n.autoPagePause.get();
const b = this.bifm.frame;
if (this.bifm.frame.classList.contains("big-img-frame-collapse")) {
const queue = this.bifm.getChapter(this.bifm.chapterIndex).queue;
if (queue.length === 0)
return;
const index = Math.max(parseIndex(this.bifm.elements.curr[0]), 0);
this.bifm.show(queue[index]);
}
const progress = q("#auto-page-progress", this.button);
while (true) {
await sleep(10);
progress.style.animation = `${conf.autoPageInterval ?? 1e4}ms linear main-progress`;
await sleep(conf.autoPageInterval ?? 1e4);
if (this.lockVer !== lockVer) {
return;
}
if (this.restart) {
this.restart = false;
continue;
}
progress.style.animation = ``;
if (this.status !== "running") {
break;
}
if (this.bifm.elements.curr.length === 0)
break;
const index = parseInt(this.bifm.elements.curr[0]?.getAttribute("d-index"));
const queue = this.bifm.getChapter(this.bifm.chapterIndex).queue;
if (index < 0 || index >= queue.length)
break;
const deltaY = this.bifm.frame.offsetHeight / 2;
if (this.bifm.isReachedBoundary("next")) {
this.bifm.onWheel(new WheelEvent("wheel", { deltaY }), false, true);
if (conf.readMode === "pagination")
continue;
}
b.scrollBy({ top: deltaY, behavior: "smooth" });
}
this.stop();
}
stop() {
this.status = "stop";
const progress = q("#auto-page-progress", this.button);
progress.style.animation = ``;
this.lockVer += 1;
this.button.firstElementChild.innerText = i18n.autoPagePlay.get();
}
}
function parseIndex(ele) {
if (!ele)
return -1;
const d = ele.getAttribute("d-index") || "";
const i = parseInt(d);
return isNaN(i) ? -1 : i;
}
function revertMonkeyPatch(element) {
const originalScrollTo = Element.prototype.scrollTo;
Object.defineProperty(element, "scrollTo", {
value: originalScrollTo,
writable: true,
configurable: true
});
}
function main(MATCHER) {
const HTML = createHTML();
[HTML.fullViewGrid, HTML.bigImageFrame].forEach((e) => revertMonkeyPatch(e));
const IFQ = IMGFetcherQueue.newQueue();
const IL = new IdleLoader(IFQ);
const PF = new PageFetcher(IFQ, MATCHER);
const DL = new Downloader(HTML, IFQ, IL, PF, MATCHER);
const PH = new PageHelper(HTML, (index) => PF.chapters[index]);
const BIFM = new BigImageFrameManager(HTML, (index) => PF.chapters[index]);
const FVGM = new FullViewGridManager(HTML, BIFM);
const events = initEvents(HTML, BIFM, FVGM, IFQ, PF, IL, PH);
addEventListeners(events, HTML, BIFM, DL);
EBUS.subscribe("downloader-canvas-on-click", (index) => {
IFQ.currIndex = index;
if (IFQ.chapterIndex !== BIFM.chapterIndex)
return;
BIFM.show(IFQ[index]);
});
PF.beforeInit = () => HTML.pageLoading.style.display = "flex";
PF.afterInit = () => {
HTML.pageLoading.style.display = "none";
IL.processingIndexList = [0];
IL.start();
};
if (conf["first"]) {
events.showGuideEvent();
conf["first"] = false;
saveConf(conf);
}
if (conf.autoOpen)
events.main(true);
return () => {
console.log("destory eh-view-enhance");
PF.abort();
IL.abort();
IFQ.length = 0;
EBUS.reset();
HTML.root.remove();
return sleep(500);
};
}
(() => {
let oldPushState = history.pushState;
history.pushState = function pushState(...args) {
let ret = oldPushState.apply(this, args);
window.dispatchEvent(new Event("pushstate"));
window.dispatchEvent(new Event("locationchange"));
return ret;
};
let oldReplaceState = history.replaceState;
history.replaceState = function replaceState(...args) {
let ret = oldReplaceState.apply(this, args);
window.dispatchEvent(new Event("replacestate"));
window.dispatchEvent(new Event("locationchange"));
return ret;
};
window.addEventListener("popstate", () => {
window.dispatchEvent(new Event("locationchange"));
});
})();
let destoryFunc;
const debouncer = new Debouncer();
window.addEventListener("locationchange", () => {
debouncer.addEvent("LOCATION-CHANGE", () => {
const newStart = () => {
if (document.querySelector(".ehvp-root"))
return;
const matcher2 = adaptMatcher(window.location.href);
matcher2 && (destoryFunc = main(matcher2));
};
if (destoryFunc) {
console.log("locationchange");
destoryFunc().then(newStart);
} else {
newStart();
}
}, 10);
});
const matcher = adaptMatcher(window.location.href);
if (matcher !== null) {
destoryFunc = main(matcher);
}
})();