Add function to enable / disable elements on the page
This commit is contained in:
parent
1cd9da3873
commit
ce6f96454b
|
@ -71,6 +71,12 @@ const matchesTargetLang = async selectedText => {
|
||||||
return matchsLangs;
|
return matchsLangs;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const waitTime = time => {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
setTimeout(resolve(), time);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
export default class TranslateContainer extends Component {
|
export default class TranslateContainer extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
@ -92,7 +98,7 @@ export default class TranslateContainer extends Component {
|
||||||
init = async () => {
|
init = async () => {
|
||||||
await initSettings();
|
await initSettings();
|
||||||
this.setState({ isInit: true });
|
this.setState({ isInit: true });
|
||||||
document.addEventListener("mouseup", e => setTimeout(() => this.handleMouseUp(e), 0));
|
document.addEventListener("mouseup", this.handleMouseUp);
|
||||||
document.addEventListener("keydown", this.handleKeyDown);
|
document.addEventListener("keydown", this.handleKeyDown);
|
||||||
browser.storage.onChanged.addListener(handleSettingsChange);
|
browser.storage.onChanged.addListener(handleSettingsChange);
|
||||||
browser.runtime.onMessage.addListener(this.handleMessage);
|
browser.runtime.onMessage.addListener(this.handleMessage);
|
||||||
|
@ -121,6 +127,8 @@ export default class TranslateContainer extends Component {
|
||||||
this.hideButton();
|
this.hideButton();
|
||||||
this.showPanel();
|
this.showPanel();
|
||||||
break;
|
break;
|
||||||
|
default:
|
||||||
|
return empty;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -172,7 +180,8 @@ export default class TranslateContainer extends Component {
|
||||||
this.setState({ shouldShowPanel: false });
|
this.setState({ shouldShowPanel: false });
|
||||||
};
|
};
|
||||||
|
|
||||||
handleMouseUp = e => {
|
handleMouseUp = async e => {
|
||||||
|
await waitTime(0);
|
||||||
const isLeftClick = e.button === 0;
|
const isLeftClick = e.button === 0;
|
||||||
const isInPasswordField = e.target.tagName === "INPUT" && e.target.type === "password";
|
const isInPasswordField = e.target.tagName === "INPUT" && e.target.type === "password";
|
||||||
const isInThisElement = document.querySelector("#simple-translate").contains(e.target);
|
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 = () => {
|
render = () => {
|
||||||
if (!this.state.isInit) return null;
|
if (!this.state.isInit) return null;
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -2,5 +2,47 @@ import React from "react";
|
||||||
import ReactDOM from "react-dom";
|
import ReactDOM from "react-dom";
|
||||||
import TranslateContainer from "./components/TranslateContainer";
|
import TranslateContainer from "./components/TranslateContainer";
|
||||||
|
|
||||||
|
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>");
|
document.body.insertAdjacentHTML("beforeend", "<div id='simple-translate'></div>");
|
||||||
ReactDOM.render(<TranslateContainer />, document.getElementById("simple-translate"));
|
ReactDOM.render(
|
||||||
|
<TranslateContainer removeElement={removeElement} insertElement={insertElement} />,
|
||||||
|
document.getElementById("simple-translate")
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
insertElement();
|
||||||
|
|
Loading…
Reference in a new issue