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

Add options of panel display position

Browse source
This commit is contained in:
sienori 2019-02-23 17:33:14 +09:00
parent 7b0a8783e8
commit 479e3164bb
5 changed files with 225 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
src/_locales/en/messages.json
View file

@ -127,18 +127,30 @@
"buttonPositionLabel": {
"message": "Display position"
},
"rightUpLabel": {
"topRightLabel": {
"message": "Top right"
},
"rightDownLabel": {
"bottomRightLabel": {
"message": "Bottom right"
},
"leftUpLabel": {
"topLeftLabel": {
"message": "Top left"
},
"leftDownLabel": {
"bottomLeftLabel": {
"message": "Bottom left"
},
"topLabel": {
"message": "Top"
},
"bottomLabel": {
"message": "Bottom"
},
"leftLabel": {
"message": "Left"
},
"rightLabel": {
"message": "Right"
},
"panelStyleLabel": {
"message": "Translation panel"
},
@ -154,6 +166,21 @@
"fontSizeLabel": {
"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": {
"message": "Font color of translation result"
},

21
src/content/components/TranslateButton.js
View file

@ -5,15 +5,24 @@ import "../styles/TranslateButton.scss";
const calcPosition = () => {
const buttonSize = parseInt(getSettings("buttonSize"));
const offset = 10;
switch (getSettings("buttonPosition")) {
case "rightUp":
switch (getSettings("buttonDirection")) {
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 };
case "rightDown":
return { top: offset, left: offset };
case "leftUp":
case "topLeft":
return { top: -buttonSize - offset, left: -buttonSize - offset };
case "leftDown":
case "bottomLeft":
return { top: offset, left: -buttonSize - offset };
case "bottomRight":
default:
return { top: offset, left: offset };
}
};

61
src/content/components/TranslateContainer.js
View file

@ -25,13 +25,40 @@ const getSelectedPosition = () => {
.getSelection()
.getRangeAt(0)
.getBoundingClientRect();
const selectedPosition = {
let selectedPosition;
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;
};
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 targetLang = getSettings("targetLang");
const result = await translate(text, "auto", targetLang);
@ -72,6 +99,7 @@ export default class TranslateContainer extends Component {
statusText: "OK"
};
this.selectedText = "";
this.selectedPosition = { x: 0, y: 0 };
this.init();
}
@ -93,10 +121,10 @@ export default class TranslateContainer extends Component {
return tabInfo;
case "translateSelectedText":
this.selectedText = getSelectedText();
const position = getSelectedPosition();
if (this.selectedText.length === 0) return;
this.selectedPosition = getSelectedPosition();
this.hideButton();
this.showPanel(position);
this.showPanel();
break;
}
};
@ -108,8 +136,8 @@ export default class TranslateContainer extends Component {
}
};
showButton = position => {
this.setState({ shouldShowButton: true, buttonPosition: position });
showButton = clickedPosition => {
this.setState({ shouldShowButton: true, buttonPosition: clickedPosition });
};
hideButton = () => {
@ -117,16 +145,20 @@ export default class TranslateContainer extends Component {
};
handleButtonClick = e => {
const position = { x: e.clientX, y: e.clientY };
this.showPanel(position);
const clickedPosition = { x: e.clientX, y: e.clientY };
this.showPanel(clickedPosition);
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);
this.setState({
shouldShowPanel: true,
panelPosition: position,
panelPosition: panelPosition,
resultText: result.resultText,
candidateText: getSettings("ifShowCandidate") ? result.candidateText : "",
statusText: result.statusText
@ -148,13 +180,14 @@ export default class TranslateContainer extends Component {
this.hidePanel();
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;
this.handleTextSelect(position);
this.handleTextSelect(clickedPosition);
};
handleTextSelect = async position => {
handleTextSelect = async clickedPosition => {
const onSelectBehavior = getSettings("whenSelectText");
if (onSelectBehavior === "dontShowButton") return;
@ -164,9 +197,9 @@ export default class TranslateContainer extends Component {
}
if (onSelectBehavior === "showButton") {
this.showButton(position);
this.showButton(clickedPosition);
} else if (onSelectBehavior === "showPanel") {
this.showPanel(position);
this.showPanel(clickedPosition);
}
};

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

@ -30,13 +30,45 @@ export default class TranslatePanel extends Component {
const panelHeight = Math.min(wrapper.clientHeight, maxHeight);
const windowWidth = document.documentElement.clientWidth;
const windowHeight = document.documentElement.clientHeight;
const referencePosition = this.props.position;
const offset = 10;
//TODO: パネルの表示位置オプション
let position = {
x: this.props.position.x - panelWidth / 2,
y: this.props.position.y + offset
};
let position = { x: 0, y: 0 };
const panelDirection = getSettings("panelDirection");
switch (panelDirection) {
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) {
position.x = windowWidth - panelWidth - offset;

103
src/settings/defaultSettings.js
View file

@ -142,29 +142,46 @@ export default [
default: 22
},
{
id: "buttonPosition",
id: "buttonDirection",
title: "buttonPositionLabel",
captions: [],
type: "select",
default: "rightDown",
default: "bottomRight",
options: [
{
name: "rightUpLabel",
value: "rightUp"
name: "topLabel",
value: "top"
},
{
name: "rightDownLabel",
value: "rightDown"
name: "bottomLabel",
value: "bottom"
},
{
name: "leftUpLabel",
value: "leftUp"
name: "rightLabel",
value: "right"
},
{
name: "leftDownLabel",
value: "leftDown"
name: "leftLabel",
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,
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",
title: "resultFontColorLabel",