mirror of
https://github.com/koodo-reader/koodo-reader.git
synced 2026-06-18 12:50:44 -04:00
fix bug
Former-commit-id: 6fe88fa3171a5a640d27a9e56c4c5e0352dd1915
This commit is contained in:
@@ -59,12 +59,6 @@
|
||||
- Stable Version (Recommended): [Download](https://koodo.960960.xyz/en/download)
|
||||
- Developer Version: [Download](https://github.com/troyeguo/koodo-reader/releases/latest) ( With new feature and bug fix, but may induce some unknown bugs)
|
||||
- Web Version:[Preview](https://koodo-reader.vercel.app/)
|
||||
- Install with Chocolatey:
|
||||
|
||||
```shell
|
||||
choco install koodo-reader
|
||||
```
|
||||
|
||||
- Install with Homebrew:
|
||||
|
||||
```shell
|
||||
|
||||
@@ -59,12 +59,6 @@
|
||||
- 稳定版 (推荐下载):[官网](https://koodo.960960.xyz/zh/download)(感谢 [GitHub Proxy](https://ghproxy.com/) 提供下载加速服务)
|
||||
- 开发版:[Github Release](https://github.com/troyeguo/koodo-reader/releases/latest) (包含新功能和 bug 修复,但也可能引入更多未知 bug)
|
||||
- 网页版:[前往](https://koodo-reader.vercel.app/)
|
||||
- 使用 Chocolatey 安装:
|
||||
|
||||
```shell
|
||||
choco install koodo-reader
|
||||
```
|
||||
|
||||
- 使用 Homebrew 安装:
|
||||
|
||||
```shell
|
||||
|
||||
2
main.js
2
main.js
@@ -17,7 +17,7 @@ let mainWin;
|
||||
let readerWindow;
|
||||
const singleInstance = app.requestSingleInstanceLock();
|
||||
var filePath = null;
|
||||
if (process.platform == "win32" && process.argv.length >= 2) {
|
||||
if (process.platform != "darwin" && process.argv.length >= 2) {
|
||||
filePath = process.argv[1];
|
||||
}
|
||||
let options = {
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -187,8 +187,8 @@
|
||||
"Auto open last-read book": "自动打开上次阅读的图书",
|
||||
"Open books in the main window": "直接在主窗口打开图书",
|
||||
"Book won't be opened in a seperate window but directly opened in the main window": "图书不会在一个单独的窗口打开,而是直接在主窗口打开",
|
||||
"Please turn off open books in main window": "请关闭直接在主窗口打开图书",
|
||||
"Please turn off merge with word": "请关闭摸鱼模式",
|
||||
"Please turn off open books in the main window first": "请关闭直接在主窗口打开图书",
|
||||
"Please turn off merge with word first": "请关闭摸鱼模式",
|
||||
"Project link": "开源地址",
|
||||
"View Mode": "视图模式",
|
||||
"Book not exsits": "图书文件不存在",
|
||||
@@ -246,7 +246,7 @@
|
||||
"Line Height": "行间距",
|
||||
"Tips": "提示",
|
||||
"How sync works": "同步是如何实现的?",
|
||||
"You need to manually change the storage location to the same sync folder on different computers. When you click the sync button, Koodo Reader will automatically upload or download the data from this folder according the timestamp.": "同步功能需要配合第三方同步盘实现,在不同电脑上把数据存储位置修改为同一个网盘文件夹。当在其中一台电脑上点击同步后,Koodo中的数据就会更新到这个文件夹中,另外一台电脑中检测到数据变化,同步的按钮就会变蓝,提示有数据可以更新,点击同步按钮后,就会把同步文件夹中的数据更新到Koodo中,从而实现同步。前往设置->修改数据存储位置处修改",
|
||||
"You need to manually change the storage location to the same sync folder on different computers. When you click the sync button, Koodo Reader will automatically upload or download the data from this folder according the timestamp.": "同步功能需要配合第三方同步盘实现,在不同电脑上把数据存储位置修改为同一个网盘文件夹。当在其中一台电脑上点击同步后,Koodo中的数据就会更新到这个文件夹中。经过网盘同步后,在另一台电脑上打开Koodo,点击同步按钮,数据就会同步到Koodo中。具体操作方法请查看帮助文档。",
|
||||
"Please choose an empty folder": "请选择空文件夹",
|
||||
"Data change detected, whether to update?": "检测到数据变化,是否更新",
|
||||
"Empty Library": "图书库为空",
|
||||
@@ -296,7 +296,7 @@
|
||||
"Download Desktop Version": "下载客户端",
|
||||
"Download": "前往下载",
|
||||
"Sync": "同步",
|
||||
"Help": "需要帮助",
|
||||
"Help": "帮助文档",
|
||||
"Feedback": "反馈建议",
|
||||
"Text Align": "文字对齐",
|
||||
"left": "左对齐",
|
||||
|
||||
@@ -203,7 +203,7 @@
|
||||
"Collapse sidebar": "Collapse sidebar",
|
||||
"Show sidebar": "Show sidebar",
|
||||
"Sync": "Sync",
|
||||
"Help": "Need Help",
|
||||
"Help": "Document",
|
||||
"Feedback": "Feedback",
|
||||
"Github Repo": "Github Repo",
|
||||
"Speak the text": "Speak the text",
|
||||
@@ -232,8 +232,10 @@
|
||||
"Tips": "Tips",
|
||||
"Brightness": "Brightness",
|
||||
"How sync works": "How sync works",
|
||||
"You need to manually change the storage location to the same sync folder on different computers. When you click the sync button, Koodo Reader will automatically upload or download the data from this folder according the timestamp.": "You need to change the storage location to the same cloud drive folder on different computers. When you click the sync button, Koodo Reader will automatically upload or download your data from this folder and keep data synchronized across all you computers. Please change storage location in Setting->Change storage location",
|
||||
"You need to manually change the storage location to the same sync folder on different computers. When you click the sync button, Koodo Reader will automatically upload or download the data from this folder according the timestamp.": "You need to change the storage location to the same cloud drive folder on different computers. When you click the sync button, Koodo Reader will automatically upload or download your data from this folder and keep data synchronized across all you computers. Visit our document for more instructions.",
|
||||
"Line Height": "Line Height",
|
||||
"Please turn off open books in the main window first": "Please turn off open books in the main window first",
|
||||
"Please turn off merge with word first": "Please turn off merge with word first",
|
||||
"Please choose an empty folder": "Please choose an empty folder",
|
||||
"Data change detected, whether to update?": "Data change detected, whether to update?",
|
||||
"Empty Library": "Empty Library",
|
||||
|
||||
@@ -235,7 +235,7 @@
|
||||
"View Mode": "View Mode",
|
||||
"Show sidebar": "Show sidebar",
|
||||
"Sync": "Sync",
|
||||
"Help": "Need Help",
|
||||
"Help": "Document",
|
||||
"Feedback": "Feedback",
|
||||
"Github Repo": "Github Repo",
|
||||
"left": "Left",
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
border: 2px solid rgba(191, 191, 191, 1);
|
||||
border-left: none;
|
||||
box-sizing: border-box;
|
||||
z-index: 15;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.spine-shadow-left {
|
||||
|
||||
@@ -9,9 +9,8 @@ class Background extends React.Component<BackgroundProps, BackgroundState> {
|
||||
super(props);
|
||||
this.state = {
|
||||
isSingle:
|
||||
(StorageUtil.getReaderConfig("readerMode") &&
|
||||
StorageUtil.getReaderConfig("readerMode") !== "double") ||
|
||||
this.props.currentBook.description === "readonly",
|
||||
StorageUtil.getReaderConfig("readerMode") &&
|
||||
StorageUtil.getReaderConfig("readerMode") !== "double",
|
||||
scale: StorageUtil.getReaderConfig("scale") || 1,
|
||||
};
|
||||
this.isFirst = true;
|
||||
|
||||
@@ -179,14 +179,14 @@ class SettingDialog extends React.Component<
|
||||
};
|
||||
handleMergeWord = () => {
|
||||
if (this.state.isOpenInMain && !this.state.isMergeWord) {
|
||||
toast("Please turn off open books in the main window");
|
||||
toast(this.props.t("Please turn off open books in the main window"));
|
||||
return;
|
||||
}
|
||||
this.handleSetting("isMergeWord");
|
||||
};
|
||||
handleOpenInMain = () => {
|
||||
if (this.state.isMergeWord && !this.state.isOpenInMain) {
|
||||
toast("Please turn off merge with word");
|
||||
toast(this.props.t("Please turn off merge with word first"));
|
||||
return;
|
||||
}
|
||||
this.handleSetting("isOpenInMain");
|
||||
|
||||
@@ -75,9 +75,7 @@ class DropdownList extends React.Component<
|
||||
this.state.currentTextAlignIndex
|
||||
].setAttribute("selected", "selected");
|
||||
}
|
||||
handleRest = () => {
|
||||
this.props.renderFunc("html-render");
|
||||
};
|
||||
|
||||
//切换不同的样式
|
||||
handleView(event: any, option: string) {
|
||||
let arr = event.target.value.split(",");
|
||||
@@ -105,7 +103,7 @@ class DropdownList extends React.Component<
|
||||
default:
|
||||
break;
|
||||
}
|
||||
this.handleRest();
|
||||
this.props.renderFunc();
|
||||
}
|
||||
render() {
|
||||
const renderParagraphCharacter = () => {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
export interface DropdownListProps {
|
||||
currentEpub: any;
|
||||
t: (title: string) => string;
|
||||
renderFunc: (id: string) => void;
|
||||
renderFunc: () => void;
|
||||
}
|
||||
export interface DropdownListState {
|
||||
currentFontFamilyIndex: number;
|
||||
|
||||
@@ -3,10 +3,7 @@ import { SettingSwitchProps, SettingSwitchState } from "./interface";
|
||||
import { Trans } from "react-i18next";
|
||||
import TextToSpeech from "../../textToSpeech";
|
||||
import StorageUtil from "../../../utils/storageUtil";
|
||||
import {
|
||||
readerSettingList,
|
||||
htmlSettingList,
|
||||
} from "../../../constants/settingList";
|
||||
import { readerSettingList } from "../../../constants/settingList";
|
||||
import { isElectron } from "react-device-detect";
|
||||
import toast from "react-hot-toast";
|
||||
class SettingSwitch extends React.Component<
|
||||
@@ -33,9 +30,6 @@ class SettingSwitch extends React.Component<
|
||||
};
|
||||
}
|
||||
|
||||
handleRest = () => {
|
||||
this.props.renderFunc("html-render");
|
||||
};
|
||||
_handleRest = () => {
|
||||
if (isElectron) {
|
||||
toast(this.props.t("Take effect at next startup"));
|
||||
@@ -51,7 +45,7 @@ class SettingSwitch extends React.Component<
|
||||
this.state[stateName] ? "yes" : "no"
|
||||
);
|
||||
setTimeout(() => {
|
||||
this.handleRest();
|
||||
this.props.renderFunc();
|
||||
}, 500);
|
||||
});
|
||||
};
|
||||
@@ -72,10 +66,7 @@ class SettingSwitch extends React.Component<
|
||||
return (
|
||||
<>
|
||||
{Object.keys(this.props.currentEpub).length !== 0 && <TextToSpeech />}
|
||||
{(this.props.currentBook.description !== "readonly"
|
||||
? readerSettingList
|
||||
: htmlSettingList
|
||||
).map((item) => (
|
||||
{readerSettingList.map((item) => (
|
||||
<div className="single-control-switch-container" key={item.title}>
|
||||
<span className="single-control-switch-title">
|
||||
<Trans>{item.title}</Trans>
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import BookModel from "../../../model/Book";
|
||||
import HtmlBook from "../../../model/HtmlBook";
|
||||
export interface SettingSwitchProps {
|
||||
currentEpub: any;
|
||||
currentBook: BookModel;
|
||||
locations: any;
|
||||
isReading: boolean;
|
||||
htmlBook;
|
||||
renderFunc: (id: string) => void;
|
||||
htmlBook: HtmlBook;
|
||||
renderFunc: () => void;
|
||||
t: (title: string) => string;
|
||||
}
|
||||
export interface SettingSwitchState {
|
||||
|
||||
@@ -32,7 +32,7 @@ class SliderList extends React.Component<SliderListProps, SliderListState> {
|
||||
}
|
||||
return;
|
||||
}
|
||||
this.props.renderFunc("html-render");
|
||||
this.props.renderFunc();
|
||||
};
|
||||
onValueChange = (event: any) => {
|
||||
if (this.props.mode === "fontSize") {
|
||||
|
||||
@@ -7,7 +7,7 @@ export interface SliderListProps {
|
||||
title: string;
|
||||
minLabel: string;
|
||||
maxLabel: string;
|
||||
renderFunc: (id: string) => void;
|
||||
renderFunc: () => void;
|
||||
t: (title: string) => string;
|
||||
}
|
||||
export interface SliderListState {
|
||||
|
||||
@@ -68,14 +68,12 @@ class ThemeList extends React.Component<ThemeListProps, ThemeListState> {
|
||||
});
|
||||
}
|
||||
if (!this.props.currentEpub.rendition) {
|
||||
this.handleRest();
|
||||
this.props.renderFunc();
|
||||
} else {
|
||||
StyleUtil.addDefaultCss();
|
||||
}
|
||||
};
|
||||
handleRest = () => {
|
||||
this.props.renderFunc("html-render");
|
||||
};
|
||||
|
||||
handleChooseBgColor = (color) => {
|
||||
StorageUtil.setReaderConfig("backgroundColor", color.color);
|
||||
StyleUtil.addDefaultCss();
|
||||
@@ -128,7 +126,7 @@ class ThemeList extends React.Component<ThemeListProps, ThemeListState> {
|
||||
} !important`,
|
||||
},
|
||||
});
|
||||
this.handleRest();
|
||||
this.props.renderFunc();
|
||||
};
|
||||
render() {
|
||||
const renderBackgroundColorList = () => {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
export interface ThemeListProps {
|
||||
currentEpub: any;
|
||||
t: (title: string) => string;
|
||||
renderFunc: (id: string) => void;
|
||||
renderFunc: () => void;
|
||||
}
|
||||
|
||||
export interface ThemeListState {
|
||||
|
||||
@@ -143,29 +143,3 @@ export const readerSettingList = [
|
||||
propName: "isHideMenuButton",
|
||||
},
|
||||
];
|
||||
export const htmlSettingList = [
|
||||
{
|
||||
title: "Text Indent",
|
||||
propName: "isIndent",
|
||||
},
|
||||
{
|
||||
title: "Bold Font",
|
||||
propName: "isBold",
|
||||
},
|
||||
{
|
||||
title: "Italic",
|
||||
propName: "isItalic",
|
||||
},
|
||||
{
|
||||
title: "Text Underline",
|
||||
propName: "isUnderline",
|
||||
},
|
||||
{
|
||||
title: "Text Shadow",
|
||||
propName: "isShadow",
|
||||
},
|
||||
{
|
||||
title: "Dont't use mimical background",
|
||||
propName: "isHideBackground",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -176,7 +176,7 @@
|
||||
bottom: 25px;
|
||||
/* width: calc(100% - 100px);
|
||||
height: calc(100% - 100px); */
|
||||
z-index: 0;
|
||||
z-index: 5;
|
||||
user-select: text;
|
||||
}
|
||||
.previous-chapter-single-container {
|
||||
@@ -208,7 +208,7 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 5;
|
||||
z-index: 10;
|
||||
}
|
||||
.next-chapter-single-container:hover {
|
||||
opacity: 0.7;
|
||||
|
||||
@@ -13,6 +13,8 @@ import RecordLocation from "../../utils/readUtils/recordLocation";
|
||||
import { mimetype } from "../../constants/mimetype";
|
||||
import BackgroundWidget from "../../components/backgroundWidget";
|
||||
import toast from "react-hot-toast";
|
||||
import StyleUtil from "../../utils/readUtils/styleUtil";
|
||||
import "./index.css";
|
||||
|
||||
declare var window: any;
|
||||
|
||||
@@ -30,11 +32,18 @@ class Viewer extends React.Component<ViewerProps, ViewerState> {
|
||||
chapterTitle:
|
||||
RecordLocation.getScrollHeight(this.props.currentBook.key)
|
||||
.chapterTitle || "",
|
||||
readerMode: StorageUtil.getReaderConfig("readerMode") || "double",
|
||||
margin: parseInt(StorageUtil.getReaderConfig("margin")) || 30,
|
||||
};
|
||||
this.lock = false;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.handleRenderBook();
|
||||
|
||||
this.props.handleRenderFunc(this.handleRenderBook);
|
||||
}
|
||||
handleRenderBook = () => {
|
||||
let { key, path, format, name } = this.props.currentBook;
|
||||
BookUtil.fetchBook(key, true, path).then((result) => {
|
||||
if (!result) {
|
||||
@@ -69,10 +78,10 @@ class Viewer extends React.Component<ViewerProps, ViewerState> {
|
||||
RecentBooks.setRecent(this.props.currentBook.key);
|
||||
document.title = name + " - Koodo Reader";
|
||||
});
|
||||
|
||||
// this.props.handleRenderFunc(this.handleRenderHtml);
|
||||
}
|
||||
};
|
||||
handleRest = (rendition: any) => {
|
||||
StyleUtil.addDefaultCss();
|
||||
rendition.setStyle(StyleUtil.getCustomCss(true));
|
||||
let bookLocation = RecordLocation.getScrollHeight(
|
||||
this.props.currentBook.key
|
||||
);
|
||||
@@ -87,20 +96,22 @@ class Viewer extends React.Component<ViewerProps, ViewerState> {
|
||||
this.props.handleLeaveReader("top");
|
||||
this.props.handleLeaveReader("bottom");
|
||||
});
|
||||
|
||||
let iframe = document.getElementsByTagName("iframe")[0];
|
||||
if (!iframe) return;
|
||||
let doc = iframe.contentDocument;
|
||||
if (!doc) return;
|
||||
let isFirefox = navigator.userAgent.indexOf("Firefox") > -1;
|
||||
let postion = rendition.getPosition();
|
||||
if (isFirefox) {
|
||||
doc.addEventListener(
|
||||
"DOMMouseScroll",
|
||||
(event) => {
|
||||
RecordLocation.recordScrollHeight(
|
||||
this.props.htmlBook.key,
|
||||
StorageUtil.getKookitConfig("text"),
|
||||
StorageUtil.getKookitConfig("chapterTitle"),
|
||||
StorageUtil.getKookitConfig("count")
|
||||
postion.text,
|
||||
postion.chapterTitle,
|
||||
postion.count
|
||||
);
|
||||
},
|
||||
false
|
||||
@@ -127,16 +138,16 @@ class Viewer extends React.Component<ViewerProps, ViewerState> {
|
||||
});
|
||||
};
|
||||
handleMobi = async (result: ArrayBuffer) => {
|
||||
let rendition = new MobiRender(result, "single");
|
||||
let rendition = new MobiRender(result, this.state.readerMode);
|
||||
await rendition.renderTo(
|
||||
document.getElementsByClassName("ebook-viewer")[0]
|
||||
document.getElementsByClassName("html-viewer-page")[0]
|
||||
);
|
||||
this.handleRest(rendition);
|
||||
};
|
||||
handleAzw3 = async (result: ArrayBuffer) => {
|
||||
let rendition = new Azw3Render(result, "continuous");
|
||||
let rendition = new Azw3Render(result, this.state.readerMode);
|
||||
await rendition.renderTo(
|
||||
document.getElementsByClassName("ebook-viewer")[0]
|
||||
document.getElementsByClassName("html-viewer-page")[0]
|
||||
);
|
||||
this.handleRest(rendition);
|
||||
};
|
||||
@@ -164,11 +175,11 @@ class Viewer extends React.Component<ViewerProps, ViewerState> {
|
||||
}
|
||||
let rendition = new TxtRender(
|
||||
result,
|
||||
"single",
|
||||
this.state.readerMode,
|
||||
this.props.currentBook.charset || charset || "utf8"
|
||||
);
|
||||
await rendition.renderTo(
|
||||
document.getElementsByClassName("ebook-viewer")[0]
|
||||
document.getElementsByClassName("html-viewer-page")[0]
|
||||
);
|
||||
this.handleRest(rendition);
|
||||
};
|
||||
@@ -177,9 +188,9 @@ class Viewer extends React.Component<ViewerProps, ViewerState> {
|
||||
var reader = new FileReader();
|
||||
reader.onload = async (evt) => {
|
||||
let docStr = window.marked(evt.target?.result as any);
|
||||
let rendition = new StrRender(docStr, "continuous");
|
||||
let rendition = new StrRender(docStr, this.state.readerMode);
|
||||
await rendition.renderTo(
|
||||
document.getElementsByClassName("ebook-viewer")[0]
|
||||
document.getElementsByClassName("html-viewer-page")[0]
|
||||
);
|
||||
this.handleRest(rendition);
|
||||
};
|
||||
@@ -196,9 +207,9 @@ class Viewer extends React.Component<ViewerProps, ViewerState> {
|
||||
);
|
||||
|
||||
rtfToHTML.fromString(text, async (err: any, html: any) => {
|
||||
let rendition = new StrRender(html, "continuous");
|
||||
let rendition = new StrRender(html, this.state.readerMode);
|
||||
await rendition.renderTo(
|
||||
document.getElementsByClassName("ebook-viewer")[0]
|
||||
document.getElementsByClassName("html-viewer-page")[0]
|
||||
);
|
||||
this.handleRest(rendition);
|
||||
});
|
||||
@@ -207,9 +218,9 @@ class Viewer extends React.Component<ViewerProps, ViewerState> {
|
||||
window.mammoth
|
||||
.convertToHtml({ arrayBuffer: result })
|
||||
.then(async (res: any) => {
|
||||
let rendition = new StrRender(res.value, "continuous");
|
||||
let rendition = new StrRender(res.value, this.state.readerMode);
|
||||
await rendition.renderTo(
|
||||
document.getElementsByClassName("ebook-viewer")[0]
|
||||
document.getElementsByClassName("html-viewer-page")[0]
|
||||
);
|
||||
this.handleRest(rendition);
|
||||
});
|
||||
@@ -225,9 +236,9 @@ class Viewer extends React.Component<ViewerProps, ViewerState> {
|
||||
);
|
||||
let bookObj = xmlBookToObj(Buffer.from(result));
|
||||
bookObj += xmlBookTagFilter(fb2Str);
|
||||
let rendition = new StrRender(bookObj, "continuous");
|
||||
let rendition = new StrRender(bookObj, this.state.readerMode);
|
||||
await rendition.renderTo(
|
||||
document.getElementsByClassName("ebook-viewer")[0]
|
||||
document.getElementsByClassName("html-viewer-page")[0]
|
||||
);
|
||||
this.handleRest(rendition);
|
||||
};
|
||||
@@ -238,28 +249,49 @@ class Viewer extends React.Component<ViewerProps, ViewerState> {
|
||||
var reader = new FileReader();
|
||||
reader.onload = async (evt) => {
|
||||
const html = evt.target?.result as any;
|
||||
let rendition = new StrRender(html, "continuous");
|
||||
let rendition = new StrRender(html, this.state.readerMode);
|
||||
await rendition.renderTo(
|
||||
document.getElementsByClassName("ebook-viewer")[0]
|
||||
document.getElementsByClassName("html-viewer-page")[0]
|
||||
);
|
||||
this.handleRest(rendition);
|
||||
};
|
||||
reader.readAsText(blob, "UTF-8");
|
||||
};
|
||||
render() {
|
||||
console.log(parseFloat(this.state.scale));
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className="ebook-viewer"
|
||||
style={{
|
||||
position: "absolute",
|
||||
left: `calc(50vw - ${270 * parseFloat(this.state.scale)}px + 9px)`,
|
||||
right: `calc(50vw - ${270 * parseFloat(this.state.scale)}px + 7px)`,
|
||||
top: "20px",
|
||||
bottom: "20px",
|
||||
zIndex: 5,
|
||||
}}
|
||||
className="html-viewer-page"
|
||||
style={
|
||||
document.body.clientWidth < 570
|
||||
? { left: 0, right: 0 }
|
||||
: this.state.readerMode === "continuous"
|
||||
? {
|
||||
left: `calc(50vw - ${
|
||||
270 * parseFloat(this.state.scale)
|
||||
}px + 9px)`,
|
||||
right: `calc(50vw - ${
|
||||
270 * parseFloat(this.state.scale)
|
||||
}px + 7px)`,
|
||||
overflowY: "scroll",
|
||||
overflowX: "hidden",
|
||||
}
|
||||
: this.state.readerMode === "single"
|
||||
? {
|
||||
left: `calc(50vw - ${
|
||||
270 * parseFloat(this.state.scale)
|
||||
}px + 9px)`,
|
||||
right: `calc(50vw - ${
|
||||
270 * parseFloat(this.state.scale)
|
||||
}px + 7px)`,
|
||||
}
|
||||
: this.state.readerMode === "double"
|
||||
? {
|
||||
left: this.state.margin + 10 + "px",
|
||||
right: this.state.margin + 10 + "px",
|
||||
}
|
||||
: {}
|
||||
}
|
||||
></div>
|
||||
{StorageUtil.getReaderConfig("isHideBackground") === "yes" ? null : this
|
||||
.props.currentBook.key ? (
|
||||
|
||||
9
src/containers/htmlViewer/index.css
Normal file
9
src/containers/htmlViewer/index.css
Normal file
@@ -0,0 +1,9 @@
|
||||
.html-viewer-page {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
top: 40px;
|
||||
bottom: 40px;
|
||||
z-index: 5;
|
||||
user-select: text;
|
||||
}
|
||||
@@ -21,4 +21,6 @@ export interface ViewerState {
|
||||
scale: string;
|
||||
isFirst: boolean;
|
||||
chapterTitle: string;
|
||||
margin: number;
|
||||
readerMode: string;
|
||||
}
|
||||
|
||||
@@ -56,7 +56,7 @@ class SettingPanel extends React.Component<
|
||||
<Trans>Reading Option</Trans>
|
||||
</div>
|
||||
<div className="setting-panel">
|
||||
{Object.keys(this.props.currentEpub).length !== 0 && <ModeControl />}
|
||||
<ModeControl />
|
||||
<ThemeList />
|
||||
<SliderList
|
||||
{...{
|
||||
@@ -69,7 +69,8 @@ class SettingPanel extends React.Component<
|
||||
title: "Font Size",
|
||||
}}
|
||||
/>
|
||||
{Object.keys(this.props.currentEpub).length !== 0 && (
|
||||
|
||||
{this.state.readerMode && this.state.readerMode === "double" && (
|
||||
<SliderList
|
||||
{...{
|
||||
maxValue: 80,
|
||||
@@ -82,6 +83,7 @@ class SettingPanel extends React.Component<
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
<SliderList
|
||||
{...{
|
||||
maxValue: 20,
|
||||
@@ -93,21 +95,20 @@ class SettingPanel extends React.Component<
|
||||
title: "Letter Spacing",
|
||||
}}
|
||||
/>
|
||||
{Object.keys(this.props.currentEpub).length !== 0 && (
|
||||
<SliderList
|
||||
{...{
|
||||
maxValue: 60,
|
||||
minValue: 0,
|
||||
mode: "paraSpacing",
|
||||
minLabel: "0",
|
||||
maxLabel: "60",
|
||||
step: 1,
|
||||
title: "Paragraph Spacing",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{(this.state.readerMode && this.state.readerMode !== "double") ||
|
||||
this.props.currentBook.description === "readonly" ? (
|
||||
|
||||
<SliderList
|
||||
{...{
|
||||
maxValue: 60,
|
||||
minValue: 0,
|
||||
mode: "paraSpacing",
|
||||
minLabel: "0",
|
||||
maxLabel: "60",
|
||||
step: 1,
|
||||
title: "Paragraph Spacing",
|
||||
}}
|
||||
/>
|
||||
|
||||
{this.state.readerMode && this.state.readerMode !== "double" ? (
|
||||
<SliderList
|
||||
{...{
|
||||
maxValue: 3,
|
||||
|
||||
@@ -124,6 +124,26 @@ class Reader extends React.Component<ReaderProps, ReaderState> {
|
||||
};
|
||||
return (
|
||||
<div className="viewer">
|
||||
{StorageUtil.getReaderConfig("isHidePageButton") !== "yes" && (
|
||||
<>
|
||||
<div
|
||||
className="previous-chapter-single-container"
|
||||
onClick={() => {
|
||||
this.props.htmlBook.rendition.prevPage();
|
||||
}}
|
||||
>
|
||||
<span className="icon-dropdown previous-chapter-single"></span>
|
||||
</div>
|
||||
<div
|
||||
className="next-chapter-single-container"
|
||||
onClick={() => {
|
||||
this.props.htmlBook.rendition.nextPage();
|
||||
}}
|
||||
>
|
||||
<span className="icon-dropdown next-chapter-single"></span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{StorageUtil.getReaderConfig("isHideMenuButton") !== "yes" && (
|
||||
<div
|
||||
className="reader-setting-icon-container"
|
||||
|
||||
@@ -15,6 +15,7 @@ const mapStateToProps = (state: stateType) => {
|
||||
currentEpub: state.book.currentEpub,
|
||||
currentBook: state.book.currentBook,
|
||||
percentage: state.progressPanel.percentage,
|
||||
htmlBook: state.reader.htmlBook,
|
||||
};
|
||||
};
|
||||
const actionCreator = {
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
import BookModel from "../../model/Book";
|
||||
import HtmlBookModel from "../../model/HtmlBook";
|
||||
export interface ReaderProps {
|
||||
currentEpub: any;
|
||||
currentBook: BookModel;
|
||||
percentage: number;
|
||||
t: (title: string) => string;
|
||||
htmlBook: HtmlBookModel;
|
||||
handleFetchNotes: () => void;
|
||||
handleFetchBooks: () => void;
|
||||
handleFetchBookmarks: () => void;
|
||||
|
||||
@@ -3,13 +3,10 @@ import StorageUtil from "../storageUtil";
|
||||
class styleUtil {
|
||||
// 为 iframe 添加默认的样式
|
||||
static addDefaultCss() {
|
||||
let iframe = document.getElementsByTagName("iframe")[0];
|
||||
if (!iframe) return;
|
||||
let doc = iframe.contentDocument;
|
||||
let doc = window.frames[0].document;
|
||||
if (!doc) return;
|
||||
let css = this.getDefaultCss();
|
||||
let style = doc.getElementById("default-style");
|
||||
let background = document.querySelector(".background");
|
||||
let background = document.querySelector(".viewer");
|
||||
if (!background) return;
|
||||
background.setAttribute(
|
||||
"style",
|
||||
@@ -22,14 +19,11 @@ class styleUtil {
|
||||
if (!doc.head) {
|
||||
return;
|
||||
}
|
||||
if (!style) {
|
||||
style = doc.createElement("style");
|
||||
style.id = "default-style";
|
||||
style.textContent = css;
|
||||
doc.head.appendChild(style);
|
||||
return;
|
||||
}
|
||||
|
||||
let style = doc.createElement("style");
|
||||
style.id = "default-style";
|
||||
style.textContent = css;
|
||||
doc.head.appendChild(style);
|
||||
}
|
||||
// 获取为文档默认应用的css样式
|
||||
static getDefaultCss() {
|
||||
|
||||
Reference in New Issue
Block a user