Add options of panel display position
This commit is contained in:
parent
7b0a8783e8
commit
479e3164bb
|
@ -127,18 +127,30 @@
|
||||||
"buttonPositionLabel": {
|
"buttonPositionLabel": {
|
||||||
"message": "Display position"
|
"message": "Display position"
|
||||||
},
|
},
|
||||||
"rightUpLabel": {
|
"topRightLabel": {
|
||||||
"message": "Top right"
|
"message": "Top right"
|
||||||
},
|
},
|
||||||
"rightDownLabel": {
|
"bottomRightLabel": {
|
||||||
"message": "Bottom right"
|
"message": "Bottom right"
|
||||||
},
|
},
|
||||||
"leftUpLabel": {
|
"topLeftLabel": {
|
||||||
"message": "Top left"
|
"message": "Top left"
|
||||||
},
|
},
|
||||||
"leftDownLabel": {
|
"bottomLeftLabel": {
|
||||||
"message": "Bottom left"
|
"message": "Bottom left"
|
||||||
},
|
},
|
||||||
|
"topLabel": {
|
||||||
|
"message": "Top"
|
||||||
|
},
|
||||||
|
"bottomLabel": {
|
||||||
|
"message": "Bottom"
|
||||||
|
},
|
||||||
|
"leftLabel": {
|
||||||
|
"message": "Left"
|
||||||
|
},
|
||||||
|
"rightLabel": {
|
||||||
|
"message": "Right"
|
||||||
|
},
|
||||||
"panelStyleLabel": {
|
"panelStyleLabel": {
|
||||||
"message": "Translation panel"
|
"message": "Translation panel"
|
||||||
},
|
},
|
||||||
|
@ -154,6 +166,21 @@
|
||||||
"fontSizeLabel": {
|
"fontSizeLabel": {
|
||||||
"message": "Font size"
|
"message": "Font size"
|
||||||
},
|
},
|
||||||
|
"referencePointLabel": {
|
||||||
|
"message": "Display position - Reference point"
|
||||||
|
},
|
||||||
|
"bottomSelectedTextLabel": {
|
||||||
|
"message": "Bottom of selected text"
|
||||||
|
},
|
||||||
|
"topSelectedTextLabel": {
|
||||||
|
"message": "Top of selected text"
|
||||||
|
},
|
||||||
|
"clickedPointLabel": {
|
||||||
|
"message": "Clicked point"
|
||||||
|
},
|
||||||
|
"displayDirectionLabel": {
|
||||||
|
"message": "Display position - Direction"
|
||||||
|
},
|
||||||
"resultFontColorLabel": {
|
"resultFontColorLabel": {
|
||||||
"message": "Font color of translation result"
|
"message": "Font color of translation result"
|
||||||
},
|
},
|
||||||
|
|
|
@ -5,15 +5,24 @@ import "../styles/TranslateButton.scss";
|
||||||
const calcPosition = () => {
|
const calcPosition = () => {
|
||||||
const buttonSize = parseInt(getSettings("buttonSize"));
|
const buttonSize = parseInt(getSettings("buttonSize"));
|
||||||
const offset = 10;
|
const offset = 10;
|
||||||
switch (getSettings("buttonPosition")) {
|
switch (getSettings("buttonDirection")) {
|
||||||
case "rightUp":
|
case "top":
|
||||||
|
return { top: -buttonSize - offset, left: -buttonSize / 2 };
|
||||||
|
case "bottom":
|
||||||
|
return { top: offset, left: -buttonSize / 2 };
|
||||||
|
case "right":
|
||||||
|
return { top: -buttonSize / 2, left: offset };
|
||||||
|
case "left":
|
||||||
|
return { top: -buttonSize / 2, left: -buttonSize - offset };
|
||||||
|
case "topRight":
|
||||||
return { top: -buttonSize - offset, left: offset };
|
return { top: -buttonSize - offset, left: offset };
|
||||||
case "rightDown":
|
case "topLeft":
|
||||||
return { top: offset, left: offset };
|
|
||||||
case "leftUp":
|
|
||||||
return { top: -buttonSize - offset, left: -buttonSize - offset };
|
return { top: -buttonSize - offset, left: -buttonSize - offset };
|
||||||
case "leftDown":
|
case "bottomLeft":
|
||||||
return { top: offset, left: -buttonSize - offset };
|
return { top: offset, left: -buttonSize - offset };
|
||||||
|
case "bottomRight":
|
||||||
|
default:
|
||||||
|
return { top: offset, left: offset };
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -25,13 +25,40 @@ const getSelectedPosition = () => {
|
||||||
.getSelection()
|
.getSelection()
|
||||||
.getRangeAt(0)
|
.getRangeAt(0)
|
||||||
.getBoundingClientRect();
|
.getBoundingClientRect();
|
||||||
const selectedPosition = {
|
|
||||||
x: selectedRect.left + selectedRect.width / 2,
|
let selectedPosition;
|
||||||
y: selectedRect.bottom
|
const panelReferencePoint = getSettings("panelReferencePoint");
|
||||||
};
|
switch (panelReferencePoint) {
|
||||||
|
case "topSelectedText":
|
||||||
|
selectedPosition = {
|
||||||
|
x: selectedRect.left + selectedRect.width / 2,
|
||||||
|
y: selectedRect.top
|
||||||
|
};
|
||||||
|
break;
|
||||||
|
case "bottomSelectedText":
|
||||||
|
default:
|
||||||
|
selectedPosition = {
|
||||||
|
x: selectedRect.left + selectedRect.width / 2,
|
||||||
|
y: selectedRect.bottom
|
||||||
|
};
|
||||||
|
break;
|
||||||
|
}
|
||||||
return selectedPosition;
|
return selectedPosition;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const calcPanelPosition = clickedPosition => {
|
||||||
|
const panelReferencePoint = getSettings("panelReferencePoint");
|
||||||
|
switch (panelReferencePoint) {
|
||||||
|
case "topSelectedText":
|
||||||
|
return getSelectedPosition("top");
|
||||||
|
case "bottomSelectedText":
|
||||||
|
return getSelectedPosition("bottom");
|
||||||
|
case "clickedPoint":
|
||||||
|
if (clickedPosition) return clickedPosition;
|
||||||
|
else return getSelectedPosition("bottom");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const translateText = async text => {
|
const translateText = async text => {
|
||||||
const targetLang = getSettings("targetLang");
|
const targetLang = getSettings("targetLang");
|
||||||
const result = await translate(text, "auto", targetLang);
|
const result = await translate(text, "auto", targetLang);
|
||||||
|
@ -72,6 +99,7 @@ export default class TranslateContainer extends Component {
|
||||||
statusText: "OK"
|
statusText: "OK"
|
||||||
};
|
};
|
||||||
this.selectedText = "";
|
this.selectedText = "";
|
||||||
|
this.selectedPosition = { x: 0, y: 0 };
|
||||||
this.init();
|
this.init();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -93,10 +121,10 @@ export default class TranslateContainer extends Component {
|
||||||
return tabInfo;
|
return tabInfo;
|
||||||
case "translateSelectedText":
|
case "translateSelectedText":
|
||||||
this.selectedText = getSelectedText();
|
this.selectedText = getSelectedText();
|
||||||
const position = getSelectedPosition();
|
|
||||||
if (this.selectedText.length === 0) return;
|
if (this.selectedText.length === 0) return;
|
||||||
|
this.selectedPosition = getSelectedPosition();
|
||||||
this.hideButton();
|
this.hideButton();
|
||||||
this.showPanel(position);
|
this.showPanel();
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -108,8 +136,8 @@ export default class TranslateContainer extends Component {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
showButton = position => {
|
showButton = clickedPosition => {
|
||||||
this.setState({ shouldShowButton: true, buttonPosition: position });
|
this.setState({ shouldShowButton: true, buttonPosition: clickedPosition });
|
||||||
};
|
};
|
||||||
|
|
||||||
hideButton = () => {
|
hideButton = () => {
|
||||||
|
@ -117,16 +145,20 @@ export default class TranslateContainer extends Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
handleButtonClick = e => {
|
handleButtonClick = e => {
|
||||||
const position = { x: e.clientX, y: e.clientY };
|
const clickedPosition = { x: e.clientX, y: e.clientY };
|
||||||
this.showPanel(position);
|
this.showPanel(clickedPosition);
|
||||||
this.hideButton();
|
this.hideButton();
|
||||||
};
|
};
|
||||||
|
|
||||||
showPanel = async position => {
|
showPanel = async (clickedPosition = null) => {
|
||||||
|
const panelReferencePoint = getSettings("panelReferencePoint");
|
||||||
|
const useClickedPosition = panelReferencePoint === "clickedPoint" && clickedPosition !== null;
|
||||||
|
const panelPosition = useClickedPosition ? clickedPosition : this.selectedPosition;
|
||||||
|
|
||||||
const result = await translateText(this.selectedText);
|
const result = await translateText(this.selectedText);
|
||||||
this.setState({
|
this.setState({
|
||||||
shouldShowPanel: true,
|
shouldShowPanel: true,
|
||||||
panelPosition: position,
|
panelPosition: panelPosition,
|
||||||
resultText: result.resultText,
|
resultText: result.resultText,
|
||||||
candidateText: getSettings("ifShowCandidate") ? result.candidateText : "",
|
candidateText: getSettings("ifShowCandidate") ? result.candidateText : "",
|
||||||
statusText: result.statusText
|
statusText: result.statusText
|
||||||
|
@ -148,13 +180,14 @@ export default class TranslateContainer extends Component {
|
||||||
this.hidePanel();
|
this.hidePanel();
|
||||||
|
|
||||||
this.selectedText = getSelectedText();
|
this.selectedText = getSelectedText();
|
||||||
const position = { x: e.clientX, y: e.clientY };
|
this.selectedPosition = getSelectedPosition();
|
||||||
|
const clickedPosition = { x: e.clientX, y: e.clientY };
|
||||||
|
|
||||||
if (this.selectedText.length === 0) return;
|
if (this.selectedText.length === 0) return;
|
||||||
this.handleTextSelect(position);
|
this.handleTextSelect(clickedPosition);
|
||||||
};
|
};
|
||||||
|
|
||||||
handleTextSelect = async position => {
|
handleTextSelect = async clickedPosition => {
|
||||||
const onSelectBehavior = getSettings("whenSelectText");
|
const onSelectBehavior = getSettings("whenSelectText");
|
||||||
if (onSelectBehavior === "dontShowButton") return;
|
if (onSelectBehavior === "dontShowButton") return;
|
||||||
|
|
||||||
|
@ -164,9 +197,9 @@ export default class TranslateContainer extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
if (onSelectBehavior === "showButton") {
|
if (onSelectBehavior === "showButton") {
|
||||||
this.showButton(position);
|
this.showButton(clickedPosition);
|
||||||
} else if (onSelectBehavior === "showPanel") {
|
} else if (onSelectBehavior === "showPanel") {
|
||||||
this.showPanel(position);
|
this.showPanel(clickedPosition);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -30,13 +30,45 @@ export default class TranslatePanel extends Component {
|
||||||
const panelHeight = Math.min(wrapper.clientHeight, maxHeight);
|
const panelHeight = Math.min(wrapper.clientHeight, maxHeight);
|
||||||
const windowWidth = document.documentElement.clientWidth;
|
const windowWidth = document.documentElement.clientWidth;
|
||||||
const windowHeight = document.documentElement.clientHeight;
|
const windowHeight = document.documentElement.clientHeight;
|
||||||
|
const referencePosition = this.props.position;
|
||||||
const offset = 10;
|
const offset = 10;
|
||||||
|
|
||||||
//TODO: パネルの表示位置オプション
|
let position = { x: 0, y: 0 };
|
||||||
let position = {
|
const panelDirection = getSettings("panelDirection");
|
||||||
x: this.props.position.x - panelWidth / 2,
|
switch (panelDirection) {
|
||||||
y: this.props.position.y + offset
|
case "top":
|
||||||
};
|
position.x = referencePosition.x - panelWidth / 2;
|
||||||
|
position.y = referencePosition.y - panelHeight - offset;
|
||||||
|
break;
|
||||||
|
case "bottom":
|
||||||
|
position.x = referencePosition.x - panelWidth / 2;
|
||||||
|
position.y = referencePosition.y + offset;
|
||||||
|
break;
|
||||||
|
case "right":
|
||||||
|
position.x = referencePosition.x + offset;
|
||||||
|
position.y = referencePosition.y - panelHeight / 2;
|
||||||
|
break;
|
||||||
|
case "left":
|
||||||
|
position.x = referencePosition.x - panelWidth - offset;
|
||||||
|
position.y = referencePosition.y - panelHeight / 2;
|
||||||
|
break;
|
||||||
|
case "topRight":
|
||||||
|
position.x = referencePosition.x + offset;
|
||||||
|
position.y = referencePosition.y - panelHeight - offset;
|
||||||
|
break;
|
||||||
|
case "topLeft":
|
||||||
|
position.x = referencePosition.x - panelWidth - offset;
|
||||||
|
position.y = referencePosition.y - panelHeight - offset;
|
||||||
|
break;
|
||||||
|
case "bottomRight":
|
||||||
|
position.x = referencePosition.x + offset;
|
||||||
|
position.y = referencePosition.y + offset;
|
||||||
|
break;
|
||||||
|
case "bottomLeft":
|
||||||
|
position.x = referencePosition.x - panelWidth - offset;
|
||||||
|
position.y = referencePosition.y + offset;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
if (position.x + panelWidth > windowWidth - offset) {
|
if (position.x + panelWidth > windowWidth - offset) {
|
||||||
position.x = windowWidth - panelWidth - offset;
|
position.x = windowWidth - panelWidth - offset;
|
||||||
|
|
|
@ -142,29 +142,46 @@ export default [
|
||||||
default: 22
|
default: 22
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "buttonPosition",
|
id: "buttonDirection",
|
||||||
title: "buttonPositionLabel",
|
title: "buttonPositionLabel",
|
||||||
captions: [],
|
captions: [],
|
||||||
type: "select",
|
type: "select",
|
||||||
default: "rightDown",
|
default: "bottomRight",
|
||||||
options: [
|
options: [
|
||||||
{
|
{
|
||||||
name: "rightUpLabel",
|
name: "topLabel",
|
||||||
value: "rightUp"
|
value: "top"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "rightDownLabel",
|
name: "bottomLabel",
|
||||||
value: "rightDown"
|
value: "bottom"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "leftUpLabel",
|
name: "rightLabel",
|
||||||
value: "leftUp"
|
value: "right"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "leftDownLabel",
|
name: "leftLabel",
|
||||||
value: "leftDown"
|
value: "left"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "topRightLabel",
|
||||||
|
value: "topRight"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "topLeftLabel",
|
||||||
|
value: "topLeft"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "bottomRightLabel",
|
||||||
|
value: "bottomRight"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "bottomLeftLabel",
|
||||||
|
value: "bottomLeft"
|
||||||
}
|
}
|
||||||
]
|
],
|
||||||
|
new: true
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
@ -200,6 +217,70 @@ export default [
|
||||||
placeholder: 13,
|
placeholder: 13,
|
||||||
default: 13
|
default: 13
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: "panelReferencePoint",
|
||||||
|
title: "referencePointLabel",
|
||||||
|
captions: [],
|
||||||
|
type: "select",
|
||||||
|
default: "bottomSelectedText",
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
name: "topSelectedTextLabel",
|
||||||
|
value: "topSelectedText"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "bottomSelectedTextLabel",
|
||||||
|
value: "bottomSelectedText"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "clickedPointLabel",
|
||||||
|
value: "clickedPoint"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
new: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "panelDirection",
|
||||||
|
title: "displayDirectionLabel",
|
||||||
|
captions: [],
|
||||||
|
type: "select",
|
||||||
|
default: "bottom",
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
name: "topLabel",
|
||||||
|
value: "top"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "bottomLabel",
|
||||||
|
value: "bottom"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "rightLabel",
|
||||||
|
value: "right"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "leftLabel",
|
||||||
|
value: "left"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "topRightLabel",
|
||||||
|
value: "topRight"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "topLeftLabel",
|
||||||
|
value: "topLeft"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "bottomRightLabel",
|
||||||
|
value: "bottomRight"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "bottomLeftLabel",
|
||||||
|
value: "bottomLeft"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
new: true
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: "resultFontColor",
|
id: "resultFontColor",
|
||||||
title: "resultFontColorLabel",
|
title: "resultFontColorLabel",
|
||||||
|
|
Loading…
Reference in a new issue