fix bug

koodo-reader · Sep 10, 2023 · f47798f · f47798f
1 parent 4fa3ed9
commit f47798f
Show file tree

Hide file tree

Showing 11 changed files with 581 additions and 30 deletions.
diff --git a/src/components/popups/popupBox/component.tsx b/src/components/popups/popupBox/component.tsx
diff --git a/src/components/popups/popupBox/index.tsx b/src/components/popups/popupBox/index.tsx
@@ -0,0 +1,37 @@
+import {
+  handleSelection,
+  handleOpenMenu,
+  handleMenuMode,
+  handleChangeDirection,
+  handleNoteKey,
+  handleRenderNoteFunc,
+} from "../../../store/actions";
+import { connect } from "react-redux";
+import { stateType } from "../../../store";
+import PopupBox from "./component";
+import { withTranslation } from "react-i18next";
+
+const mapStateToProps = (state: stateType) => {
+  return {
+    digests: state.reader.digests,
+    notes: state.reader.notes,
+    noteKey: state.reader.noteKey,
+    currentBook: state.book.currentBook,
+    isOpenMenu: state.viewArea.isOpenMenu,
+    menuMode: state.viewArea.menuMode,
+    color: state.reader.color,
+    isChangeDirection: state.viewArea.isChangeDirection,
+  };
+};
+const actionCreator = {
+  handleSelection,
+  handleOpenMenu,
+  handleMenuMode,
+  handleChangeDirection,
+  handleNoteKey,
+  handleRenderNoteFunc,
+};
+export default connect(
+  mapStateToProps,
+  actionCreator
+)(withTranslation()(PopupBox as any) as any);
diff --git a/src/components/popups/popupBox/interface.tsx b/src/components/popups/popupBox/interface.tsx
@@ -0,0 +1,30 @@
+import BookModel from "../../../model/Book";
+import NoteModel from "../../../model/Note";
+
+export interface PopupBoxProps {
+  currentBook: BookModel;
+  isOpenMenu: boolean;
+  isChangeDirection: boolean;
+  menuMode: string;
+  digests: NoteModel[];
+  notes: NoteModel[];
+  color: number;
+  rendition: any;
+  // cfiRange: any;
+  rect: any;
+  noteKey: string;
+  chapterDocIndex: number;
+  chapter: string;
+  handleNoteKey: (key: string) => void;
+  t: (title: string) => string;
+  handleOpenMenu: (isOpenMenu: boolean) => void;
+  handleMenuMode: (menu: string) => void;
+  handleChangeDirection: (isChangeDirection: boolean) => void;
+  handleRenderNoteFunc: (renderNoteFunc: () => void) => void;
+}
+export interface PopupBoxStates {
+  deleteKey: string;
+  isRightEdge: boolean;
+  // cfiRange: string;
+  rect: DOMRect | null;
+}
diff --git a/src/components/popups/popupBox/popupMenu.css b/src/components/popups/popupBox/popupMenu.css
@@ -0,0 +1,40 @@
+.popup-menu-box {
+  opacity: 1;
+  border-radius: 19px;
+  position: relative;
+  z-index: -1;
+}
+.popup-menu-triangle-down {
+  float: left;
+  margin-left: 59px;
+  font-size: 16px;
+  text-shadow: 0px 8px 8px rgba(0, 0, 0, 0.16);
+  z-index: 0;
+}
+.popup-menu-triangle-up {
+  transform: rotate(180deg);
+  position: absolute;
+  bottom: 172px;
+  margin-left: 60px;
+  font-size: 16px;
+  text-shadow: 0px 8px 8px rgba(0, 0, 0, 0.16);
+  z-index: 0;
+}
+.delete-highlighter-container {
+  position: relative;
+}
+
+.popup-close {
+  position: absolute;
+  top: -30px;
+  right: 70px;
+  cursor: pointer;
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/src/components/popups/popupMenu/component.tsx b/src/components/popups/popupMenu/component.tsx
@@ -1,9 +1,6 @@
 import React from "react";
 import "./popupMenu.css";
-import PopupNote from "../popupNote";
 import PopupOption from "../popupOption";
-import PopupTrans from "../popupTrans";
-import PopupDict from "../popupDict";
 import NoteModel from "../../../model/Note";
 import { PopupMenuProps, PopupMenuStates } from "./interface";
 import { getIframeDoc } from "../../../utils/serviceUtils/docUtil";
@@ -29,6 +26,7 @@ class PopupMenu extends React.Component<PopupMenuProps, PopupMenuStates> {
     this.state = {
       deleteKey: "",
       rect: this.props.rect,
+      isRightEdge: false,
     };
   }
 
@@ -47,11 +45,13 @@ class PopupMenu extends React.Component<PopupMenuProps, PopupMenuStates> {
           rect: nextProps.rect,
         },
         () => {
+          console.log("open", nextProps.rect, this.props.rect);
           this.openMenu();
         }
       );
     }
     if (nextProps.menuMode !== this.props.menuMode) {
+      console.log("1sfasdfsd", nextProps.menuMode, this.props.menuMode);
       this.showMenu(nextProps.menuMode);
     }
   }
@@ -131,6 +131,7 @@ class PopupMenu extends React.Component<PopupMenuProps, PopupMenuStates> {
     sel.addRange(range);
 
     this.setState({ rect: range.getBoundingClientRect() }, () => {
+      console.log("1sfasdfsd");
       this.showMenu(this.props.menuMode);
       this.handleClickHighlighter(event.currentTarget.dataset.key);
       event.stopPropagation();
@@ -139,6 +140,7 @@ class PopupMenu extends React.Component<PopupMenuProps, PopupMenuStates> {
   handlePDFClick = (event: any) => {
     this.props.handleMenuMode("note");
     this.setState({ rect: event.currentTarget.getBoundingClientRect() }, () => {
+      console.log("1sfasdfsd");
       this.showMenu(this.props.menuMode);
       this.handleClickHighlighter(event.currentTarget.getAttribute("key"));
       event.stopPropagation();
@@ -159,15 +161,18 @@ class PopupMenu extends React.Component<PopupMenuProps, PopupMenuStates> {
     this.setState({ deleteKey });
   };
   showMenu = (menuMode: string) => {
+    console.log(this.state.rect);
     let rect = this.state.rect;
     if (!rect) return;
-    let { posX, posY } =
-      this.props.currentBook.format !== "PDF"
-        ? this.getHtmlPosition(rect, menuMode)
-        : this.getPdfPosition(rect, menuMode);
-    this.props.handleOpenMenu(true);
-    let popupMenu = document.querySelector(".popup-menu-container");
-    popupMenu?.setAttribute("style", `left:${posX}px;top:${posY}px`);
+    this.setState({ isRightEdge: false }, () => {
+      let { posX, posY } =
+        this.props.currentBook.format !== "PDF"
+          ? this.getHtmlPosition(rect, menuMode)
+          : this.getPdfPosition(rect, menuMode);
+      this.props.handleOpenMenu(true);
+      let popupMenu = document.querySelector(".popup-menu-container");
+      popupMenu?.setAttribute("style", `left:${posX}px;top:${posY}px`);
+    });
   };
   getPdfPosition(rect: any, menuMode: string) {
     let posY = rect.bottom;
@@ -180,15 +185,18 @@ class PopupMenu extends React.Component<PopupMenuProps, PopupMenuStates> {
     let iframe = pageArea.getElementsByTagName("iframe")[0];
     if (!iframe) return;
     let doc: any = iframe.contentWindow || iframe.contentDocument?.defaultView;
+    console.log(rect.bottom, doc.document.body.scrollHeight - 188);
     if (rect.bottom < doc.document.body.scrollHeight - 188) {
       this.props.handleChangeDirection(true);
       posY = posY + 16;
     } else {
       posY = posY - rect.height - 188;
     }
     posX = posX - 80;
-    if (posX > doc.document.body.scrollWidth - 264 && menuMode !== "menu") {
+    console.log(posX, doc.document.body.clientWidth - 264, menuMode);
+    if (posX > doc.document.body.clientWidth - 264 && menuMode !== "menu") {
       posX = posX - (264 - 159);
+      this.setState({ isRightEdge: true });
     }
     return { posX, posY } as any;
   }
@@ -207,6 +215,20 @@ class PopupMenu extends React.Component<PopupMenuProps, PopupMenuStates> {
       posY = posY - rect.height - 188 + this.props.rendition.getPageSize().top;
     }
     posX = posX - 80 + this.props.rendition.getPageSize().left;
+    let pageArea = document.getElementById("page-area");
+    if (!pageArea) return;
+    let iframe = pageArea.getElementsByTagName("iframe")[0];
+    if (!iframe) return;
+    let doc: any = iframe.contentDocument;
+    if (!doc) {
+      return;
+    }
+    console.log(posX, doc.body.clientWidth - 264);
+    if (posX > doc.body.clientWidth - 264 && menuMode !== "menu") {
+      posX = posX - (264 - 159);
+
+      this.setState({ isRightEdge: true });
+    }
     return { posX, posY } as any;
   }
   //渲染高亮
@@ -305,6 +327,7 @@ class PopupMenu extends React.Component<PopupMenuProps, PopupMenuStates> {
       this.props.handleNoteKey("");
       return;
     }
+    console.log("1sfasdfsd");
     this.showMenu(this.props.menuMode);
     this.props.handleMenuMode("menu");
   };
@@ -360,12 +383,6 @@ class PopupMenu extends React.Component<PopupMenuProps, PopupMenuStates> {
           <div className="popup-menu-box">
             {this.props.menuMode === "menu" ? (
               <PopupOption {...PopupProps} />
-            ) : this.props.menuMode === "note" ? (
-              <PopupNote {...PopupProps} />
-            ) : this.props.menuMode === "trans" ? (
-              <PopupTrans {...PopupProps} />
-            ) : this.props.menuMode === "dict" ? (
-              <PopupDict {...PopupProps} />
             ) : null}
             <span
               className="icon-close popup-close"
@@ -375,16 +392,12 @@ class PopupMenu extends React.Component<PopupMenuProps, PopupMenuStates> {
               style={this.props.isChangeDirection ? { top: "180px" } : {}}
             ></span>
           </div>
-          {this.props.isChangeDirection ? (
-            <span
-              className="icon-popup popup-menu-triangle-up"
-              style={
-                this.props.menuMode === "highlight" ? { bottom: "110px" } : {}
-              }
-            ></span>
-          ) : (
-            <span className="icon-popup popup-menu-triangle-down"></span>
-          )}
+          {this.props.menuMode === "menu" &&
+            (this.props.isChangeDirection ? (
+              <span className="icon-popup popup-menu-triangle-up"></span>
+            ) : (
+              <span className="icon-popup popup-menu-triangle-down"></span>
+            ))}
         </div>
       </div>
     );

diff --git a/src/components/popups/popupMenu/interface.tsx b/src/components/popups/popupMenu/interface.tsx
@@ -24,6 +24,7 @@ export interface PopupMenuProps {
 }
 export interface PopupMenuStates {
   deleteKey: string;
+  isRightEdge: boolean;
   // cfiRange: string;
   rect: DOMRect | null;
 }
diff --git a/src/components/popups/popupMenu/popupMenu.css b/src/components/popups/popupMenu/popupMenu.css
@@ -15,7 +15,7 @@
   transform: rotate(180deg);
   position: absolute;
   bottom: 172px;
-  right: 60px;
+  margin-left: 60px;
   font-size: 16px;
   text-shadow: 0px 8px 8px rgba(0, 0, 0, 0.16);
   z-index: 0;

diff --git a/src/components/popups/popupOption/component.tsx b/src/components/popups/popupOption/component.tsx
@@ -20,7 +20,7 @@ declare var window: any;
 
 class PopupOption extends React.Component<PopupOptionProps> {
   handleNote = () => {
-    this.props.handleChangeDirection(false);
+    // this.props.handleChangeDirection(false);
     this.props.handleMenuMode("note");
   };
   handleCopy = () => {

diff --git a/src/containers/htmlViewer/component.tsx b/src/containers/htmlViewer/component.tsx
@@ -16,6 +16,7 @@ import { getIframeDoc } from "../../utils/serviceUtils/docUtil";
 import { tsTransform } from "../../utils/serviceUtils/langUtil";
 import CFI from "epub-cfi-resolver";
 import { binicReadingProcess } from "../../utils/serviceUtils/bionicUtil";
+import PopupBox from "../../components/popups/popupBox";
 
 declare var window: any;
 let lock = false; //prevent from clicking too fasts
@@ -338,7 +339,7 @@ class Viewer extends React.Component<ViewerProps, ViewerState> {
             .props.currentBook.key ? (
           <Background />
         ) : null}
-        {this.props.htmlBook ? (
+        {this.props.htmlBook && this.props.menuMode === "menu" ? (
           <PopupMenu
             {...{
               rendition: this.props.htmlBook.rendition,
@@ -348,6 +349,19 @@ class Viewer extends React.Component<ViewerProps, ViewerState> {
             }}
           />
         ) : null}
+        {this.props.htmlBook &&
+        (this.props.menuMode === "dict" ||
+          this.props.menuMode === "trans" ||
+          this.props.menuMode === "note") ? (
+          <PopupBox
+            {...{
+              rendition: this.props.htmlBook.rendition,
+              rect: this.state.rect,
+              chapterDocIndex: this.state.chapterDocIndex,
+              chapter: this.state.chapter,
+            }}
+          />
+        ) : null}
         {this.props.htmlBook && (
           <ImageViewer
             {...{

diff --git a/src/containers/htmlViewer/index.tsx b/src/containers/htmlViewer/index.tsx
@@ -25,6 +25,7 @@ const mapStateToProps = (state: stateType) => {
     renderNoteFunc: state.book.renderNoteFunc,
     htmlBook: state.reader.htmlBook,
     books: state.manager.books,
+    menuMode: state.viewArea.menuMode,
   };
 };
 const actionCreator = {

diff --git a/src/containers/htmlViewer/interface.tsx b/src/containers/htmlViewer/interface.tsx
@@ -6,6 +6,8 @@ export interface ViewerProps {
   rendition: any;
   currentBook: BookModel;
   books: BookModel[];
+  menuMode: string;
+
   isReading: boolean;
   htmlBook: HtmlBookModel;
   isShow: boolean;