fix bug

koodo-reader · Sep 15, 2023 · e8481e4 · e8481e4
1 parent b21c0f7
commit e8481e4
Show file tree

Hide file tree

Showing 15 changed files with 244 additions and 150 deletions.
diff --git a/src/assets/locales/cn/translation.json b/src/assets/locales/cn/translation.json
@@ -273,6 +273,7 @@
   "File size": "文件大小",
   "Take effect at next startup": "下次打开图书生效",
   "View Mode": "视图模式",
+  "Prototype": "原形",
   "Download Desktop Version": "下载客户端",
   "No Favorite Books": "您喜爱的图书为空",
   "Right click on any book and Click Add to Favorite to add it to your favorite books": "在任意图书上右键，点击添加到喜爱以将它添加您喜爱的图书",

diff --git a/src/assets/locales/en/translation.json b/src/assets/locales/en/translation.json
@@ -289,6 +289,7 @@
   "File size": "File size",
   "Take effect at next startup": "Take effect at next startup",
   "View Mode": "View Mode",
+  "Prototype": "Prototype",
   "Download Desktop Version": "Download Desktop Version",
   "No Favorite Books": "No Favorite Books",
   "Right click on any book and Click Add to Favorite to add it to your favorite books": "Right click on any book and Click Add to Favorite to add it to your favorite books",

diff --git a/src/components/popups/popupBox/component.tsx b/src/components/popups/popupBox/component.tsx
@@ -37,7 +37,7 @@ class PopupBox extends React.Component<PopupBoxProps, PopupBoxStates> {
           // style={this.props.isOpenMenu ? {} : { display: "none" }}
         >
           {this.props.menuMode === "note" ? (
-            <PopupDict {...PopupProps} />
+            <PopupNote {...PopupProps} />
           ) : this.props.menuMode === "trans" ? (
             <PopupTrans {...PopupProps} />
           ) : this.props.menuMode === "dict" ? (
@@ -51,7 +51,12 @@ class PopupBox extends React.Component<PopupBoxProps, PopupBoxStates> {
             style={{ top: "-30px", left: "calc(50% - 10px)" }}
           ></span>
         </div>
-        <div className="drag-background" onClick={() => {}}></div>
+        <div
+          className="drag-background"
+          onClick={() => {
+            this.props.handleOpenMenu(false);
+          }}
+        ></div>
       </>
     );
   }

diff --git a/src/components/popups/popupDict/component.tsx b/src/components/popups/popupDict/component.tsx
@@ -10,13 +10,16 @@ import { getBingDict } from "../../../utils/serviceUtils/bingDictUtil";
 import { openExternalUrl } from "../../../utils/serviceUtils/urlUtil";
 import RecordLocation from "../../../utils/readUtils/recordLocation";
 import DictHistory from "../../../model/DictHistory";
+import { Trans } from "react-i18next";
 
 declare var window: any;
 class PopupDict extends React.Component<PopupDictProps, PopupDictState> {
   constructor(props: PopupDictProps) {
     super(props);
     this.state = {
       dictText: "",
+      word: "",
+      prototype: "",
       dictService: StorageUtil.getReaderConfig("dictService"),
       dictTarget: StorageUtil.getReaderConfig("dictTarget"),
     };
@@ -25,11 +28,15 @@ class PopupDict extends React.Component<PopupDictProps, PopupDictState> {
     let originalText = this.props.originalText
       .replace(/(\r\n|\n|\r)/gm, "")
       .replace(/-/gm, "");
+    this.setState({ word: originalText });
+    let prototype = "";
+    var lemmatize = window.require("wink-lemmatizer");
+    prototype = lemmatize.verb(originalText);
+    prototype = lemmatize.noun(prototype);
+    prototype = lemmatize.adjective(prototype);
+    this.setState({ prototype });
     if (StorageUtil.getReaderConfig("isLemmatizeWord") === "yes") {
-      var lemmatize = window.require("wink-lemmatizer");
-      originalText = lemmatize.verb(originalText);
-      originalText = lemmatize.noun(originalText);
-      originalText = lemmatize.adjective(originalText);
+      originalText = prototype;
     }
     this.handleDict(originalText);
     this.handleRecordHistory(originalText);
@@ -63,7 +70,7 @@ class PopupDict extends React.Component<PopupDictProps, PopupDictState> {
           .filter((item) => item !== "result")
           .map((item) => {
             if (res[item]) {
-              return `<p><span class="dict-word-type">[${item}]</span> ${res[item]}</p>`;
+              return `<p><p class="dict-word-type">[${item}]</p> ${res[item]}</p>`;
             } else {
               return "";
             }
@@ -123,7 +130,7 @@ class PopupDict extends React.Component<PopupDictProps, PopupDictState> {
       }
     } else {
       axios
-        .get(`https://api.dictionaryapi.dev/api/v2/entries/en/${"love"}`)
+        .get(`https://api.dictionaryapi.dev/api/v2/entries/en/${text}`)
         .then((res: any) => {
           let dictText = res.data[0].meanings
             .map((item) => {
@@ -158,7 +165,7 @@ class PopupDict extends React.Component<PopupDictProps, PopupDictState> {
           <div className="dict-service-container">
             <select
               className="dict-service-selector"
-              style={{ width: "120px", margin: 0 }}
+              style={{ margin: 0 }}
               onChange={(event: React.ChangeEvent<HTMLSelectElement>) => {
                 this.setState({ dictService: event.target.value }, () => {
                   StorageUtil.setReaderConfig(
@@ -195,10 +202,11 @@ class PopupDict extends React.Component<PopupDictProps, PopupDictState> {
               })}
             </select>
           </div>
-          <div className="dict-word">Love</div>
+          <div className="dict-word">{this.state.word}</div>
           <div className="dict-original-word">
-            <span>原型:</span>
-            <span>Love</span>
+            <Trans>Prototype</Trans>
+            <span>:</span>
+            <span>{this.state.prototype}</span>
           </div>
 
           <div className="dict-text-box">

diff --git a/src/components/popups/popupDict/interface.tsx b/src/components/popups/popupDict/interface.tsx
@@ -8,6 +8,8 @@ export interface PopupDictProps {
 }
 export interface PopupDictState {
   dictText: string;
+  word: string;
+  prototype: string;
   dictService: string;
   dictTarget: string;
 }
diff --git a/src/components/popups/popupDict/popupDict.css b/src/components/popups/popupDict/popupDict.css
@@ -1,17 +1,14 @@
 .dict-container {
-  width: calc(100% - 30px);
+  width: calc(100% - 50px);
   height: calc(100% - 65px);
   padding: 25px;
   padding-top: 5px;
 }
 .dict-word {
   font-size: 30px;
-  /* color: #2084e8; */
   font-weight: bold;
   line-height: 30px;
   display: inline-block;
-  /* border-left: solid 4px #2084e8; */
-  /* padding-left: 5px; */
   margin-top: 20px;
   margin-left: 5px;
 }
@@ -28,6 +25,7 @@
   font-weight: bold;
   color: #2084e8;
   margin-bottom: 5px;
+  margin-top: 5px;
 }
 .dict-text-box {
   opacity: 1;
@@ -54,7 +52,7 @@
   right: 25px;
 }
 .dict-service-selector {
-  width: 120px;
+  width: 100px;
   height: 30px;
   opacity: 1;
   font-size: 15px;

diff --git a/src/components/popups/popupNote/component.tsx b/src/components/popups/popupNote/component.tsx
@@ -27,11 +27,30 @@ let classes = [
 class PopupNote extends React.Component<PopupNoteProps, PopupNoteState> {
   constructor(props: PopupNoteProps) {
     super(props);
-    this.state = { tag: [] };
+    this.state = { tag: [], text: "" };
   }
   componentDidMount() {
     let textArea: any = document.querySelector(".editor-box");
     textArea && textArea.focus();
+
+    let pageArea = document.getElementById("page-area");
+    if (!pageArea) return;
+    let iframe = pageArea.getElementsByTagName("iframe")[0];
+    if (!iframe) return;
+    let doc = iframe.contentDocument;
+    if (!doc) {
+      return;
+    }
+    let text = doc.getSelection()?.toString();
+    if (!text) {
+      return;
+    }
+    text = text.replace(/\s\s/g, "");
+    text = text.replace(/\r/g, "");
+    text = text.replace(/\n/g, "");
+    text = text.replace(/\t/g, "");
+    text = text.replace(/\f/g, "");
+    this.setState({ text });
   }
   handleTag = (tag: string[]) => {
     this.setState({ tag });
@@ -88,15 +107,7 @@ class PopupNote extends React.Component<PopupNoteProps, PopupNoteState> {
         this.props.currentBook.format === "PDF"
           ? JSON.stringify(getHightlightCoords())
           : JSON.stringify(charRange);
-      let text = doc.getSelection()?.toString();
-      if (!text) {
-        return;
-      }
-      text = text.replace(/\s\s/g, "");
-      text = text.replace(/\r/g, "");
-      text = text.replace(/\n/g, "");
-      text = text.replace(/\t/g, "");
-      text = text.replace(/\f/g, "");
+
       let percentage = 0;
 
       let color = this.props.color || 0;
@@ -106,7 +117,7 @@ class PopupNote extends React.Component<PopupNoteProps, PopupNoteState> {
         bookKey,
         this.props.chapter,
         this.props.chapterDocIndex,
-        text,
+        this.state.text,
         cfi,
         notes,
         range,
@@ -174,9 +185,7 @@ class PopupNote extends React.Component<PopupNoteProps, PopupNoteState> {
     const renderNoteEditor = () => {
       return (
         <div className="note-editor">
-          <div className="note-original-text">
-            如果写到情节高潮段落，在QQ上会看到她不停表演吐血、上吊和撞墙。哪怕用再长的时间，她也一定要把最完美最到位的感觉表现出来
-          </div>
+          <div className="note-original-text">{this.state.text}</div>
           <div className="editor-box-parent">
             <textarea className="editor-box" />
           </div>

diff --git a/src/components/popups/popupNote/interface.tsx b/src/components/popups/popupNote/interface.tsx
@@ -15,4 +15,5 @@ export interface PopupNoteProps {
 }
 export interface PopupNoteState {
   tag: string[];
+  text: string;
 }
diff --git a/src/components/popups/popupNote/popupNote.css b/src/components/popups/popupNote/popupNote.css
@@ -8,22 +8,30 @@
   padding-left: 10px;
   margin-bottom: 20px;
   margin-top: 5px;
+  line-height: 1.25;
+  text-align: left;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
 }
 .editor-box-parent {
   width: 100%;
-  height: 100%;
+  height: calc(100% - 15px);
 }
 .editor-box {
   border: none;
   outline: none;
   resize: none;
   font-size: 15px;
-  width: 100%;
+  width: calc(100% - 20px);
   height: 100%;
   line-height: 18px;
   overflow-y: scroll;
-  background-color: #ebf6f3;
+  background-color: rgba(16, 152, 112, 0.05);
   border-radius: 7px;
+  padding: 10px;
 }
 
 .editor-box::placeholder {