Refactor content panel dragging

src/content/components/TranslatePanel.js

@@ -19,41 +19,51 @@ export default class TranslatePanel extends Component {
       shouldResize: true,
       isOverflow: false
     };
-    this.isFirst = true;
+
+    this.dragOffsets = { x: 0, y: 0 };
+    this.isDragging = false;
+  }
+
+  componentDidMount = () => {
     document.addEventListener("dragstart", this.handleDragStart);
     document.addEventListener("dragover", this.handleDragOver);
     document.addEventListener("drop", this.handleDrop);
-  }
+  };
+
+  componentWillUnmount = () => {
+    document.removeEventListener("dragstart", this.handleDragStart);
+    document.removeEventListener("dragover", this.handleDragOver);
+    document.removeEventListener("drop", this.handleDrop);
+  };
 
   handleDragStart = e => {
-    // Firefox.
+    if (e.target.className !== "simple-translate-move") return;
-    if (e.explicitOriginalTarget) {
+    this.isDragging = true;
-      if (e.explicitOriginalTarget.className !== "simple-translate-move") {
+
-        return;
-      }
-    }
-    // Chrome.
-    else if (e.target.className !== "simple-translate-move") {
-      return;
-    }
     const rect = document.querySelector(".simple-translate-panel").getBoundingClientRect();
-    const offsets = {
+    this.dragOffsets = {
       x: e.clientX - rect.left,
       y: e.clientY - rect.top
     };
-    e.dataTransfer.setData("text/plain", JSON.stringify(offsets));
+    e.dataTransfer.setData("text/plain", "");
   };
 
   handleDragOver = e => {
+    if (!this.isDragging) return;
     e.preventDefault();
+    const panel = document.querySelector(".simple-translate-panel");
+    panel.style.top = `${e.clientY - this.dragOffsets.y}px`;
+    panel.style.left = `${e.clientX - this.dragOffsets.x}px`;
   };
 
   handleDrop = e => {
+    if (!this.isDragging) return;
     e.preventDefault();
+    this.isDragging = false;
+
     const panel = document.querySelector(".simple-translate-panel");
-    const offsets = JSON.parse(e.dataTransfer.getData("text/plain"));
+    panel.style.top = `${e.clientY - this.dragOffsets.y}px`;
-    panel.style.top = `${e.clientY - offsets.y}px`;
+    panel.style.left = `${e.clientX - this.dragOffsets.x}px`;
-    panel.style.left = `${e.clientX - offsets.x}px`;
   };
 
   calcPosition = () => {
@@ -175,11 +185,6 @@ export default class TranslatePanel extends Component {
     const candidateStyles = {
       color: getSettings("candidateFontColor")
     };
-    const moveStyles = {
-      backgroundColor: "rgb(0, 145, 247)",
-      cursor: "grab",
-      height: "15px"
-    };
 
     return (
       <div
@@ -187,8 +192,9 @@ export default class TranslatePanel extends Component {
         ref="panel"
         style={panelStyles}
       >
-        <div className="simple-translate-move" draggable="true" style={moveStyles}></div>
         <div className="simple-translate-result-wrapper" ref="wrapper" style={wrapperStyles}>
+          <div className="simple-translate-move" draggable="true" ref="move"></div>
+          <div className="simple-translate-result-contents">
             <p className="simple-translate-result" style={resultStyles}>
               {splitLine(resultText)}
             </p>
@@ -202,6 +208,7 @@ export default class TranslatePanel extends Component {
             )}
           </div>
         </div>
+      </div>
     );
   };
 }

src/content/styles/TranslatePanel.scss

@@ -23,7 +23,6 @@
       font-size: inherit;
       visibility: inherit;
       opacity: inherit;
-      padding: 10px 18px;
       box-sizing: border-box;
       width: max-content;
       height: max-content;
@@ -33,6 +32,13 @@
       max-height: 100%;
       overflow: auto;
 
+      .simple-translate-move {
+        height: 15px;
+        cursor: grab;
+      }
+
+      .simple-translate-result-contents {
+        padding: 0px 18px 15px;
         p {
           all: initial;
           display: block;
@@ -65,3 +71,4 @@
       }
     }
   }
+}