Add tippy to content.js, minor modifications

This commit is contained in:
a 2020-08-02 20:31:27 +02:00
parent c80b9c679c
commit 079acca33c
10 changed files with 63 additions and 53 deletions

View file

@ -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();

View file

@ -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);
};
})();

View file

@ -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: () =>

View 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);

View 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);
}
}

View file

@ -0,0 +1,7 @@
.tippy-content {
user-select: none;
* {
user-select: none;
}
font-size: larger;
}

View file

@ -13,5 +13,5 @@
"default_popup": "popup.html"
},
"background": { "scripts": ["background.bundle.js"] },
"permissions": ["<all_urls>", "sessions"]
"permissions": ["<all_urls>", "sessions", "webRequest", "webRequestBlocking"]
}

View file

@ -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
View file

@ -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 {

View file

@ -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"],
},
],
},