From 479e3164bb076edf6ca9e3b0059502daebd798c9 Mon Sep 17 00:00:00 2001 From: sienori Date: Sat, 23 Feb 2019 17:33:14 +0900 Subject: [PATCH] Add options of panel display position --- src/_locales/en/messages.json | 35 ++++++- src/content/components/TranslateButton.js | 21 ++-- src/content/components/TranslateContainer.js | 67 +++++++++--- src/content/components/TranslatePanel.js | 42 +++++++- src/settings/defaultSettings.js | 103 +++++++++++++++++-- 5 files changed, 225 insertions(+), 43 deletions(-) diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json index 5838f2f..6d22658 100644 --- a/src/_locales/en/messages.json +++ b/src/_locales/en/messages.json @@ -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" }, diff --git a/src/content/components/TranslateButton.js b/src/content/components/TranslateButton.js index d8081ac..6ee1d35 100644 --- a/src/content/components/TranslateButton.js +++ b/src/content/components/TranslateButton.js @@ -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 }; } }; diff --git a/src/content/components/TranslateContainer.js b/src/content/components/TranslateContainer.js index 1f08fbd..929c795 100644 --- a/src/content/components/TranslateContainer.js +++ b/src/content/components/TranslateContainer.js @@ -25,13 +25,40 @@ const getSelectedPosition = () => { .getSelection() .getRangeAt(0) .getBoundingClientRect(); - const selectedPosition = { - x: selectedRect.left + selectedRect.width / 2, - y: selectedRect.bottom - }; + + 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); } }; diff --git a/src/content/components/TranslatePanel.js b/src/content/components/TranslatePanel.js index 39bd464..5c2884a 100644 --- a/src/content/components/TranslatePanel.js +++ b/src/content/components/TranslatePanel.js @@ -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; diff --git a/src/settings/defaultSettings.js b/src/settings/defaultSettings.js index 1251919..5c6f144 100644 --- a/src/settings/defaultSettings.js +++ b/src/settings/defaultSettings.js @@ -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",