Add tippy to content.js, minor modifications
This commit is contained in:
parent
c80b9c679c
commit
079acca33c
10 changed files with 63 additions and 53 deletions
|
@ -1,4 +1,5 @@
|
|||
import { browser, Runtime, Tabs } from "webextension-polyfill-ts";
|
||||
import { GTranslateScraper } from "./gtranslate_scraper";
|
||||
|
||||
console.log("Background script loaded");
|
||||
const getTab = async (s: Runtime.MessageSender): Promise<Tabs.Tab> => {
|
||||
|
@ -57,3 +58,5 @@ browser.tabs.onUpdated.addListener(async (tabID, changeInfo) => {
|
|||
}
|
||||
}
|
||||
});
|
||||
|
||||
new GTranslateScraper();
|
|
@ -1,43 +0,0 @@
|
|||
import { browser } from "webextension-polyfill-ts";
|
||||
import { isEnabledOnPage } from "./common";
|
||||
import tippy from "tippy.js";
|
||||
import "tippy.js/dist/tippy.css";
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
hasRun: any;
|
||||
}
|
||||
}
|
||||
(() => {
|
||||
//Make sure our script only runs once
|
||||
if (window.hasRun) return;
|
||||
window.hasRun = true;
|
||||
|
||||
const setEnabled = (v: boolean) => {
|
||||
document.removeEventListener("selectionchange", onSelectionChange);
|
||||
if (v) document.addEventListener("selectionchange", onSelectionChange);
|
||||
};
|
||||
|
||||
browser.runtime.onMessage.addListener((c: command) => {
|
||||
switch (c.commandKind) {
|
||||
case commands.setEnabled:
|
||||
setEnabled(c.value);
|
||||
break;
|
||||
}
|
||||
});
|
||||
isEnabledOnPage().then((v) => setEnabled(v));
|
||||
|
||||
const tippyInstance = tippy(document.body, {
|
||||
content: "Lorem ipsum",
|
||||
trigger: "manual",
|
||||
getReferenceClientRect: () =>
|
||||
document.getSelection().getRangeAt(0).getBoundingClientRect(),
|
||||
});
|
||||
let timeoutID: number;
|
||||
const onSelectionChange = () => {
|
||||
clearTimeout(timeoutID);
|
||||
tippyInstance.hide();
|
||||
if (document.getSelection().type == "Range")
|
||||
timeoutID = window.setTimeout(tippyInstance.show, 500);
|
||||
};
|
||||
})();
|
|
@ -1,6 +1,8 @@
|
|||
import { browser } from "webextension-polyfill-ts";
|
||||
import "./custom_elements";
|
||||
import tippy from "tippy.js";
|
||||
import "tippy.js/dist/tippy.css";
|
||||
import "./tippy.scss";
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
|
@ -29,7 +31,8 @@ declare global {
|
|||
});
|
||||
|
||||
const tippyInstance = tippy(document.body, {
|
||||
content: "Lorem ipsum",
|
||||
content: "<lingo-loading></lingo-loading>",
|
||||
allowHTML: true,
|
||||
trigger: "manual",
|
||||
interactive: true,
|
||||
getReferenceClientRect: () =>
|
||||
|
|
17
src/content_script/custom_elements.ts
Normal file
17
src/content_script/custom_elements.ts
Normal file
|
@ -0,0 +1,17 @@
|
|||
import spinnerCSS from "./spinner.raw.scss";
|
||||
|
||||
export class LingoLoading extends HTMLElement {
|
||||
constructor() {
|
||||
super();
|
||||
this.innerHTML = "";
|
||||
const shadow = this.attachShadow({ mode: "open" });
|
||||
let spinner = document.createElement("div");
|
||||
spinner.id = "spinner";
|
||||
|
||||
const style = document.createElement("style");
|
||||
style.textContent = spinnerCSS;
|
||||
shadow.appendChild(style);
|
||||
shadow.appendChild(spinner);
|
||||
}
|
||||
}
|
||||
customElements.define("lingo-loading", LingoLoading);
|
18
src/content_script/spinner.raw.scss
Normal file
18
src/content_script/spinner.raw.scss
Normal file
|
@ -0,0 +1,18 @@
|
|||
#spinner {
|
||||
border: 0.3em solid #f3f3f3;
|
||||
border-top: 0.3em solid #3498db;
|
||||
border-radius: 50%;
|
||||
width: 0.8em;
|
||||
height: 0.8em;
|
||||
display: inline-block;
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
7
src/content_script/tippy.scss
Normal file
7
src/content_script/tippy.scss
Normal file
|
@ -0,0 +1,7 @@
|
|||
.tippy-content {
|
||||
user-select: none;
|
||||
* {
|
||||
user-select: none;
|
||||
}
|
||||
font-size: larger;
|
||||
}
|
|
@ -13,5 +13,5 @@
|
|||
"default_popup": "popup.html"
|
||||
},
|
||||
"background": { "scripts": ["background.bundle.js"] },
|
||||
"permissions": ["<all_urls>", "sessions"]
|
||||
"permissions": ["<all_urls>", "sessions", "webRequest", "webRequestBlocking"]
|
||||
}
|
||||
|
|
|
@ -19,6 +19,10 @@ class ExtensionToggle extends HTMLButtonElement {
|
|||
return this.isON;
|
||||
}
|
||||
|
||||
public render() {
|
||||
this.textContent = this.on ? "ON" : "OFF";
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.addEventListener("click", () => (this.on = !this.on));
|
||||
|
|
6
src/types.d.ts
vendored
6
src/types.d.ts
vendored
|
@ -1,6 +1,6 @@
|
|||
declare module "*.raw" {
|
||||
const content: string;
|
||||
export = content;
|
||||
declare module "*.raw.scss" {
|
||||
const css: string;
|
||||
export = css;
|
||||
}
|
||||
|
||||
declare const enum commands {
|
||||
|
|
|
@ -16,7 +16,7 @@ let options = {
|
|||
"content_script",
|
||||
"content_script.ts"
|
||||
),
|
||||
background: path.join(__dirname, "src", "background.ts"),
|
||||
background: path.join(__dirname, "src", "background", "background.ts"),
|
||||
},
|
||||
output: {
|
||||
path: path.resolve(__dirname, "dist"),
|
||||
|
@ -40,12 +40,13 @@ let options = {
|
|||
exclude: /node_modules/,
|
||||
},
|
||||
{
|
||||
test: /\.(c|s[ac])ss\.raw$/i,
|
||||
use: ["raw-loader", "sass-loader"],
|
||||
test: /\.(c|s[ac])ss$/i,
|
||||
exclude: /\.raw\.(c|s[ac])ss$/i,
|
||||
use: ["style-loader", "css-loader", "sass-loader"],
|
||||
},
|
||||
{
|
||||
test: /\.(c|s[ac])ss$/i,
|
||||
use: ["style-loader", "css-loader", "sass-loader"],
|
||||
test: /\.raw\.(c|s[ac])ss$/i,
|
||||
use: ["raw-loader", "sass-loader"],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
Loading…
Reference in a new issue