narayana/simple-translate
3
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Refactor content panel dragging

Browse source
This commit is contained in:
sienori 2019-10-20 21:50:14 +09:00
parent a758039fe4
commit 4f36b77890
2 changed files with 74 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
src/content/components/TranslatePanel.js
View file

@ -19,41 +19,51 @@ export default class TranslatePanel extends Component {
shouldResize: true, shouldResize: true,
isOverflow: false isOverflow: false
}; };
this.isFirst = true;
this.dragOffsets = { x: 0, y: 0 };
this.isDragging = false;
}
componentDidMount = () => {
document.addEventListener("dragstart", this.handleDragStart); document.addEventListener("dragstart", this.handleDragStart);
document.addEventListener("dragover", this.handleDragOver); document.addEventListener("dragover", this.handleDragOver);
document.addEventListener("drop", this.handleDrop); document.addEventListener("drop", this.handleDrop);
} };
componentWillUnmount = () => {
document.removeEventListener("dragstart", this.handleDragStart);
document.removeEventListener("dragover", this.handleDragOver);
document.removeEventListener("drop", this.handleDrop);
};
handleDragStart = e => { 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 rect = document.querySelector(".simple-translate-panel").getBoundingClientRect();
const offsets = { this.dragOffsets = {
x: e.clientX - rect.left, x: e.clientX - rect.left,
y: e.clientY - rect.top y: e.clientY - rect.top
}; };
e.dataTransfer.setData("text/plain", JSON.stringify(offsets)); e.dataTransfer.setData("text/plain", "");
}; };
handleDragOver = e => { handleDragOver = e => {
if (!this.isDragging) return;
e.preventDefault(); 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 => { handleDrop = e => {
if (!this.isDragging) return;
e.preventDefault(); e.preventDefault();
this.isDragging = false;
const panel = document.querySelector(".simple-translate-panel"); 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 = () => { calcPosition = () => {
@ -175,11 +185,6 @@ 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
@ -187,19 +192,21 @@ 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}> <div className="simple-translate-move" draggable="true" ref="move"></div>
{splitLine(resultText)} <div className="simple-translate-result-contents">
</p> <p className="simple-translate-result" style={resultStyles}>
<p className="simple-translate-candidate" style={candidateStyles}> {splitLine(resultText)}
{splitLine(candidateText)}
</p>
{isError && (
<p className="simple-translate-error" style={candidateStyles}>
{getErrorMessage(statusText)}
</p> </p>
)} <p className="simple-translate-candidate" style={candidateStyles}>
{splitLine(candidateText)}
</p>
{isError && (
<p className="simple-translate-error" style={candidateStyles}>
{getErrorMessage(statusText)}
</p>
)}
</div>
</div> </div>
</div> </div>
); );

57
src/content/styles/TranslatePanel.scss
View file

@ -23,7 +23,6 @@
font-size: inherit; font-size: inherit;
visibility: inherit; visibility: inherit;
opacity: inherit; opacity: inherit;
padding: 10px 18px;
box-sizing: border-box; box-sizing: border-box;
width: max-content; width: max-content;
height: max-content; height: max-content;
@ -33,32 +32,40 @@
max-height: 100%; max-height: 100%;
overflow: auto; overflow: auto;
p { .simple-translate-move {
all: initial; height: 15px;
display: block; cursor: grab;
margin: 0; }
font-family: "Segoe UI", "San Francisco", "Ubuntu", "Fira Sans", "Roboto", "Arial",
"Helvetica", sans-serif !important;
text-align: left;
word-wrap: break-word;
font-size: inherit;
line-height: 150%;
visibility: inherit;
opacity: inherit;
&::-moz-selection { .simple-translate-result-contents {
background: var(--simple-translate-line); padding: 0px 18px 15px;
} p {
all: initial;
display: block;
margin: 0;
font-family: "Segoe UI", "San Francisco", "Ubuntu", "Fira Sans", "Roboto", "Arial",
"Helvetica", sans-serif !important;
text-align: left;
word-wrap: break-word;
font-size: inherit;
line-height: 150%;
visibility: inherit;
opacity: inherit;
&.simple-translate-result { &::-moz-selection {
color: var(--simple-translate-main-text); background: var(--simple-translate-line);
} }
&.simple-translate-candidate,
&.simple-translate-error { &.simple-translate-result {
color: var(--simple-translate-sub-text); color: var(--simple-translate-main-text);
margin-top: 1em; }
&:empty { &.simple-translate-candidate,
margin-top: 0; &.simple-translate-error {
color: var(--simple-translate-sub-text);
margin-top: 1em;
&:empty {
margin-top: 0;
}
} }
} }
} }