diff --git a/src/assets/locales/cn/translation.json b/src/assets/locales/cn/translation.json index 361fe071..b0f6d911 100644 --- a/src/assets/locales/cn/translation.json +++ b/src/assets/locales/cn/translation.json @@ -13,6 +13,7 @@ "This action will clear and remove this shelf": "此操作会清空并删除此书架", "Scale": "页面缩放", "Delete this tag": "删除此标签", + "Don't show footer and header": "不显示页眉页脚", "This action will clear and remove this tag": "此操作会清空并删除此标签", "Dont't use mimical background": "不使用仿真背景", "Auto hide cursor when reading": "阅读时自动隐藏鼠标", diff --git a/src/assets/locales/en/translation.json b/src/assets/locales/en/translation.json index 8b1b0def..eaa025c5 100644 --- a/src/assets/locales/en/translation.json +++ b/src/assets/locales/en/translation.json @@ -98,6 +98,7 @@ "Note": "Note", "Scale": "Page Scale", "Digest": "Digest", + "Don't show footer and header": "Don't show footer and header", "Book size is over 20M": "Book size is over 20M", "Current Font Size": "Current Font Size", "Current Chapter": "Current Chapter", diff --git a/src/assets/locales/tw/translation.json b/src/assets/locales/tw/translation.json index dd29f663..45ce4d05 100644 --- a/src/assets/locales/tw/translation.json +++ b/src/assets/locales/tw/translation.json @@ -182,6 +182,7 @@ "This action will clear and remove this tag": "此操作会清空并删除此标签", "Scale": "页面缩放", "Next Chapter": "下一章", + "Don't show footer and header": "不显示页眉页脚", "Prev Chapter": "上一章", "Current Reading Time": "本次阅读时间：{{count}}分钟", "Finish Reading Time": "读完本章需要：{{count}}分钟", diff --git a/src/components/imageViewer/component.tsx b/src/components/imageViewer/component.tsx index e0cee53e..0f25e63a 100644 --- a/src/components/imageViewer/component.tsx +++ b/src/components/imageViewer/component.tsx @@ -3,6 +3,7 @@ import React from "react"; import "./imageViewer.css"; import { ImageViewerProps, ImageViewerStates } from "./interface"; import ReaderConfig from "../../utils/readerConfig"; +import FileSaver from "file-saver"; const isElectron = require("is-electron"); declare var window: any; @@ -13,7 +14,8 @@ class ImageViewer extends React.Component { this.state = { isShowImage: false, imageRatio: "horizontal", - zoomIndex: 1, + zoomIndex: 0, + rotateIndex: 0, }; } @@ -26,26 +28,24 @@ class ImageViewer extends React.Component { return; } ReaderConfig.addDefaultCss(); - doc.addEventListener("click", this.showImage); + doc.addEventListener("click", this.showImage, true); }); } showImage = (event: any) => { - console.log("click"); if (this.props.isShow) { this.props.handleLeaveReader("left"); this.props.handleLeaveReader("right"); this.props.handleLeaveReader("top"); this.props.handleLeaveReader("bottom"); } - if ( - isElectron() && - event.target.parentNode.parentNode.tagName.toLowerCase() === "a" - ) { + let href = + event.target.href || + event.target.parentNode.href || + event.target.parentNode.parentNode.href; + if (isElectron() && href) { event.preventDefault(); - window - .require("electron") - .shell.openExternal(event.target.parentNode.parentNode.href); + window.require("electron").shell.openExternal(href); } if (!event.target.src) { return; @@ -79,67 +79,102 @@ class ImageViewer extends React.Component { this.setState({ isShowImage: false }); }; handleZoomIn = () => { - this.setState({ zoomIndex: 1.1 * this.state.zoomIndex }, () => { - let image: any = document.querySelector(".image"); - image!.setAttribute("style", `width`); + let image: any = document.querySelector(".image"); + if (image.style.width === "100vw" || image.style.height === "100vh") return; + this.setState({ zoomIndex: this.state.zoomIndex + 1 }, () => { + if (this.state.imageRatio === "horizontal") { + image.style.width = `${60 + this.state.zoomIndex * 10}vw`; + } else { + image.style.height = `${90 + 10 * this.state.zoomIndex}vh`; + } + }); + }; + handleZoomOut = () => { + let image: any = document.querySelector(".image"); + if (image.style.width === "50vw" || image.style.height === "50vh") return; + this.setState({ zoomIndex: this.state.zoomIndex - 1 }, () => { + if (this.state.imageRatio === "horizontal") { + image.style.width = `${60 + this.state.zoomIndex * 10}vw`; + } else { + image.style.height = `${90 + 10 * this.state.zoomIndex}vh`; + } + }); + }; + handleSave = async () => { + let image: any = document.querySelector(".image"); + let blob = await fetch(image.src).then((r) => r.blob()); + FileSaver.saveAs(blob, `${new Date().toLocaleDateString()}`); + }; + handleClock = () => { + let image: any = document.querySelector(".image"); + this.setState({ rotateIndex: this.state.rotateIndex + 1 }, () => { + image.style.transform = `rotate(${this.state.rotateIndex * 90}deg)`; + }); + }; + handleCounterClock = () => { + let image: any = document.querySelector(".image"); + this.setState({ rotateIndex: this.state.rotateIndex - 1 }, () => { + image.style.transform = `rotate(${this.state.rotateIndex * 90}deg)`; }); }; render() { return (
{ - this.hideImage(event); - }} + style={this.state.isShowImage ? {} : { display: "none" }} > -
- -
- { - this.handleZoomIn(); - }} - > - { - // this.handleZoomOut(); - }} - > - { - // this.handleSave(); - }} - > - { - // this.handleClock(); - }} - > - { - // this.handleCounterClock(); - }} - > -
+
{ + this.hideImage(event); + }} + >
+ +
+ { + this.handleZoomIn(); + }} + > + { + this.handleZoomOut(); + }} + > + { + this.handleSave(); + }} + > + { + this.handleClock(); + }} + > + { + this.handleCounterClock(); + }} + >
); diff --git a/src/components/imageViewer/imageViewer.css b/src/components/imageViewer/imageViewer.css index f9deceed..c63f0f8b 100644 --- a/src/components/imageViewer/imageViewer.css +++ b/src/components/imageViewer/imageViewer.css @@ -19,6 +19,7 @@ bottom: 30px; color: white; font-size: 30px; + z-index: 6; } .zoom-in-icon, .zoom-out-icon, @@ -28,3 +29,10 @@ margin: 20px; cursor: pointer; } +.image-background { + width: 100%; + height: 100%; + position: absolute; + top: 0px; + left: 0px; +} diff --git a/src/components/imageViewer/interface.tsx b/src/components/imageViewer/interface.tsx index 204e754d..10300085 100644 --- a/src/components/imageViewer/interface.tsx +++ b/src/components/imageViewer/interface.tsx @@ -8,4 +8,5 @@ export interface ImageViewerStates { isShowImage: boolean; imageRatio: string; zoomIndex: number; + rotateIndex: number; } diff --git a/src/components/importLocal/component.tsx b/src/components/importLocal/component.tsx index 0f4aeffe..0fddab13 100644 --- a/src/components/importLocal/component.tsx +++ b/src/components/importLocal/component.tsx @@ -112,7 +112,6 @@ class ImportLocal extends React.Component { const epub = window.ePub(e.target.result); epub.loaded.metadata .then((metadata: any) => { - console.log(metadata, "medata"); if (!e.target) { reject(); throw new Error(); diff --git a/src/components/settingDialog/component.tsx b/src/components/settingDialog/component.tsx index d08dfe75..b2477e0e 100644 --- a/src/components/settingDialog/component.tsx +++ b/src/components/settingDialog/component.tsx @@ -20,6 +20,7 @@ class SettingDialog extends React.Component< isOpenBook: OtherUtil.getReaderConfig("isOpenBook") === "yes", isUseFont: OtherUtil.getReaderConfig("isUseFont") === "yes", isUseBackground: OtherUtil.getReaderConfig("isUseBackground") === "yes", + isShowFooter: OtherUtil.getReaderConfig("isShowFooter") !== "no", }; } componentDidMount() { @@ -80,7 +81,17 @@ class SettingDialog extends React.Component< : this.props.handleMessage("Turn On Successfully"); this.props.handleMessageBox(true); }; - + handleFooterHeader = () => { + this.setState({ isShowFooter: !this.state.isShowFooter }); + OtherUtil.setReaderConfig( + "isShowFooter", + this.state.isShowFooter ? "no" : "yes" + ); + this.state.isShowFooter + ? this.props.handleMessage("Turn On Successfully") + : this.props.handleMessage("Turn Off Successfully"); + this.props.handleMessageBox(true); + }; render() { return (
@@ -152,6 +163,21 @@ class SettingDialog extends React.Component< >
+
+ Don't show footer and header + { + this.handleFooterHeader(); + }} + style={{ float: "right" }} + > + + +
Dont't use mimical background { constructor(props: any) { super(props); this.state = { - isSingle: OtherUtil.getReaderConfig("readerMode") !== "double", + isSingle: + OtherUtil.getReaderConfig("readerMode") && + OtherUtil.getReaderConfig("readerMode") !== "double", currentChapter: "", prevPage: 0, nextPage: 0, - scale: OtherUtil.getReaderConfig("scale"), + scale: OtherUtil.getReaderConfig("scale") || 1, + isShowFooter: OtherUtil.getReaderConfig("isShowFooter") !== "no", }; } componentWillReceiveProps(nextProps: BackgroundProps) { @@ -43,7 +46,7 @@ class Background extends React.Component { } return (
- {this.state.currentChapter && ( + {this.state.isShowFooter && this.state.currentChapter && (

{

)} - {!this.state.isSingle && ( + {this.state.isShowFooter && !this.state.isSingle && (

{

)} - {this.state.prevPage > 0 && ( + {this.state.isShowFooter && this.state.prevPage > 0 && (

{ 第{this.state.prevPage}页

)} - {this.state.nextPage > 0 && !this.state.isSingle && ( -

第{this.state.nextPage}页

- )} + {this.state.isShowFooter && + this.state.nextPage > 0 && + !this.state.isSingle && ( +

第{this.state.nextPage}页

+ )}
{ this.handleOldVersion(); } handleOldVersion = async () => { - console.log(this.props.books, "books"); if (!this.props.books[0].cover) { - console.log( - this.props.books, - this.props.books[0], - !this.props.books[0].cover - ); let bookArr: any = this.props.books; for (let i = 0; i < bookArr.length; i++) { await new Promise(async (resolve, reject) => { diff --git a/src/containers/settingPanel/component.tsx b/src/containers/settingPanel/component.tsx index 999aeaae..b32daf81 100644 --- a/src/containers/settingPanel/component.tsx +++ b/src/containers/settingPanel/component.tsx @@ -113,7 +113,7 @@ class SettingPanel extends React.Component< mode: "fontSize", }} /> - {this.state.readerMode !== "double" ? ( + {this.state.readerMode && this.state.readerMode !== "double" ? ( { }; return (
- {OtherUtil.getReaderConfig("readerMode") !== "double" && + {OtherUtil.getReaderConfig("readerMode") && + OtherUtil.getReaderConfig("readerMode") !== "double" && this.props.locations && ( <>
{ isOpenNavPanel: false, isMessage: false, rendition: null, - scale: OtherUtil.getReaderConfig("scale"), + scale: OtherUtil.getReaderConfig("scale") || 1, time: ReadingTime.getTime(this.props.currentBook.key), isTouch: OtherUtil.getReaderConfig("isTouch") === "yes", readerMode: OtherUtil.getReaderConfig("readerMode") || "double", diff --git a/src/utils/readerConfig.tsx b/src/utils/readerConfig.tsx index c9163265..49f4db55 100644 --- a/src/utils/readerConfig.tsx +++ b/src/utils/readerConfig.tsx @@ -44,24 +44,23 @@ export const themeList = [ ]; export const updateLog = { - date: "2020.9.13", - version: "1.1.5", + date: "2020.9.29", + version: "1.1.6", new: [ - "新增听书功能", - "增加对触控屏的支持，请前往设置->开启触控模式，阅读时双击页面唤出菜单，再双击退出，上下左右滑动控制翻页", - "支持搜索笔记和书摘", - "支持给笔记和书摘添加标签", - "新增下划线标记功能", - "新增黑色阅读主题", - "支持收起多级目录", - "支持自动打开上次阅读的图书，请前往设置->自动打开上次阅读的图书", - "支持控制是否使用内嵌字体，请前往设置->使用内嵌字体", - "客户端新增启动动画", + "减少内存占用，提升首屏打开速度，优化多文件导入体验", + "滚动模式新增连续滚动和分章滚动", + "单页模式下支持调节页面的缩放比例", + "我的书架现在移动到全部图书的顶部", + "支持删除书架和标签", + "新增本次阅读时间，本章剩余时间", + "页眉，页脚现在会显示当前页数，书名和章节名，如不需要，请前往设置关闭", + "支持关闭图书的仿真背景，请前往设置关闭", + "支持缩放、旋转、保存书中的图片", ], fix: [ - "修复滚动模式下的一些bug", - "修复备份恢复时的崩溃问题", - "客户端启动时的性能优化", + "解除之前的书籍大小和数量限制", + "修复书签页崩溃的问题", + "修复触控模式下的一些bug，点击边缘唤出菜单，再点击图书，退出菜单", ], };