Refactor content panel dragging
This commit is contained in:
parent
a758039fe4
commit
4f36b77890
|
@ -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.explicitOriginalTarget) {
|
||||
if (e.explicitOriginalTarget.className !== "simple-translate-move") {
|
||||
return;
|
||||
}
|
||||
}
|
||||
// Chrome.
|
||||
else if (e.target.className !== "simple-translate-move") {
|
||||
return;
|
||||
}
|
||||
if (e.target.className !== "simple-translate-move") return;
|
||||
this.isDragging = true;
|
||||
|
||||
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 - offsets.y}px`;
|
||||
panel.style.left = `${e.clientX - offsets.x}px`;
|
||||
panel.style.top = `${e.clientY - this.dragOffsets.y}px`;
|
||||
panel.style.left = `${e.clientX - this.dragOffsets.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>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
|
|
@ -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 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue