Make content panel movable (#183)
Let the user move the content panel. It can be moved by grabbing the blue bar on top.
This commit is contained in:
parent
b056175d4c
commit
a758039fe4
|
@ -20,8 +20,42 @@ export default class TranslatePanel extends Component {
|
||||||
isOverflow: false
|
isOverflow: false
|
||||||
};
|
};
|
||||||
this.isFirst = true;
|
this.isFirst = true;
|
||||||
|
document.addEventListener("dragstart", this.handleDragStart);
|
||||||
|
document.addEventListener("dragover", this.handleDragOver);
|
||||||
|
document.addEventListener("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;
|
||||||
|
}
|
||||||
|
const rect = document.querySelector(".simple-translate-panel").getBoundingClientRect();
|
||||||
|
const offsets = {
|
||||||
|
x: e.clientX - rect.left,
|
||||||
|
y: e.clientY - rect.top
|
||||||
|
};
|
||||||
|
e.dataTransfer.setData("text/plain", JSON.stringify(offsets));
|
||||||
|
};
|
||||||
|
|
||||||
|
handleDragOver = e => {
|
||||||
|
e.preventDefault();
|
||||||
|
};
|
||||||
|
|
||||||
|
handleDrop = e => {
|
||||||
|
e.preventDefault();
|
||||||
|
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`;
|
||||||
|
};
|
||||||
|
|
||||||
calcPosition = () => {
|
calcPosition = () => {
|
||||||
const maxWidth = parseInt(getSettings("width"));
|
const maxWidth = parseInt(getSettings("width"));
|
||||||
const maxHeight = parseInt(getSettings("height"));
|
const maxHeight = parseInt(getSettings("height"));
|
||||||
|
@ -141,6 +175,11 @@ export default class TranslatePanel extends Component {
|
||||||
const candidateStyles = {
|
const candidateStyles = {
|
||||||
color: getSettings("candidateFontColor")
|
color: getSettings("candidateFontColor")
|
||||||
};
|
};
|
||||||
|
const moveStyles = {
|
||||||
|
backgroundColor: "rgb(0, 145, 247)",
|
||||||
|
cursor: "grab",
|
||||||
|
height: "15px"
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
|
@ -148,6 +187,7 @@ export default class TranslatePanel extends Component {
|
||||||
ref="panel"
|
ref="panel"
|
||||||
style={panelStyles}
|
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-result-wrapper" ref="wrapper" style={wrapperStyles}>
|
||||||
<p className="simple-translate-result" style={resultStyles}>
|
<p className="simple-translate-result" style={resultStyles}>
|
||||||
{splitLine(resultText)}
|
{splitLine(resultText)}
|
||||||
|
|
Loading…
Reference in a new issue