Add function to enable / disable elements on the page

This commit is contained in:
sienori 2019-05-02 17:33:29 +09:00
parent 1cd9da3873
commit ce6f96454b
2 changed files with 62 additions and 4 deletions

View file

@ -71,6 +71,12 @@ const matchesTargetLang = async selectedText => {
return matchsLangs;
};
const waitTime = time => {
return new Promise(resolve => {
setTimeout(resolve(), time);
});
};
export default class TranslateContainer extends Component {
constructor(props) {
super(props);
@ -92,7 +98,7 @@ export default class TranslateContainer extends Component {
init = async () => {
await initSettings();
this.setState({ isInit: true });
document.addEventListener("mouseup", e => setTimeout(() => this.handleMouseUp(e), 0));
document.addEventListener("mouseup", this.handleMouseUp);
document.addEventListener("keydown", this.handleKeyDown);
browser.storage.onChanged.addListener(handleSettingsChange);
browser.runtime.onMessage.addListener(this.handleMessage);
@ -121,6 +127,8 @@ export default class TranslateContainer extends Component {
this.hideButton();
this.showPanel();
break;
default:
return empty;
}
};
@ -172,7 +180,8 @@ export default class TranslateContainer extends Component {
this.setState({ shouldShowPanel: false });
};
handleMouseUp = e => {
handleMouseUp = async e => {
await waitTime(0);
const isLeftClick = e.button === 0;
const isInPasswordField = e.target.tagName === "INPUT" && e.target.type === "password";
const isInThisElement = document.querySelector("#simple-translate").contains(e.target);
@ -206,6 +215,13 @@ export default class TranslateContainer extends Component {
}
};
componentWillUnmount() {
document.removeEventListener("mouseup", this.handleMouseUp);
document.removeEventListener("keydown", this.handleKeyDown);
browser.storage.onChanged.removeListener(handleSettingsChange);
browser.runtime.onMessage.removeListener(this.handleMessage);
}
render = () => {
if (!this.state.isInit) return null;
return (

View file

@ -2,5 +2,47 @@ import React from "react";
import ReactDOM from "react-dom";
import TranslateContainer from "./components/TranslateContainer";
document.body.insertAdjacentHTML("beforeend", "<div id='simple-translate'></div>");
ReactDOM.render(<TranslateContainer />, document.getElementById("simple-translate"));
let isEnabled = true;
const handleMessage = async request => {
const empty = new Promise(resolve => {
setTimeout(() => {
return resolve("");
}, 100);
});
switch (request.message) {
case "getEnabled":
return isEnabled;
case "enableExtension":
isEnabled = true;
insertElement();
break;
case "disableExtension":
isEnabled = false;
removeElement();
break;
default:
return empty;
}
};
browser.runtime.onMessage.addListener(handleMessage);
const removeElement = () => {
const element = document.getElementById("simple-translate");
if (!element) return;
ReactDOM.unmountComponentAtNode(element);
element.parentNode.removeChild(element);
};
const insertElement = () => {
const element = document.getElementById("simple-translate");
if (element) return;
document.body.insertAdjacentHTML("beforeend", "<div id='simple-translate'></div>");
ReactDOM.render(
<TranslateContainer removeElement={removeElement} insertElement={insertElement} />,
document.getElementById("simple-translate")
);
};
insertElement();