130 lines
2.9 KiB
JavaScript
130 lines
2.9 KiB
JavaScript
"use strict";
|
|
|
|
if (chrome)
|
|
window.browser = chrome;
|
|
if (!browser)
|
|
throw Error("wtf");
|
|
|
|
// REMOVE THE BUTTON IF IT ALREADY EXISTS
|
|
{
|
|
let buttonEl = document.getElementById("fdtransparentbutton");
|
|
if(buttonEl)
|
|
buttonEl.parentNode.removeChild(buttonEl);
|
|
}
|
|
|
|
if([...document.getElementsByClassName("principal")].length > 0) {
|
|
class FDTransparent {
|
|
static createButton() {
|
|
// STYLESHEET
|
|
var styleText = `
|
|
img#fdtransparentbutton {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
left: 20px;
|
|
z-index: 9;
|
|
width: 48px;
|
|
height: 48px;
|
|
|
|
border-radius: 50%;
|
|
filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.22));
|
|
|
|
background: #fff;
|
|
|
|
transition: background 0.5s;
|
|
}
|
|
|
|
img#fdtransparentbutton.on {
|
|
background: none;
|
|
}
|
|
|
|
@media screen and (min-width: 1201px) {
|
|
img#fdtransparentbutton {
|
|
left: 325px;
|
|
}
|
|
}
|
|
|
|
.principal.post
|
|
{
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.principal {
|
|
transition: background-color 0.5s, box-shadow 0.5s;
|
|
box-shadow: none !important;
|
|
filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.22));
|
|
}
|
|
|
|
.principal.transparent {
|
|
background-color: #0000;
|
|
}
|
|
`;
|
|
var styleEl = document.createElement("style");
|
|
if (styleEl.styleSheet) {
|
|
styleEl.styleSheet.cssText = styleText;
|
|
} else {
|
|
styleEl.appendChild(document.createTextNode(styleText));
|
|
}
|
|
document.head.appendChild(styleEl);
|
|
// CREATE BUTTON
|
|
FDTransparent.button = document.createElement('img');
|
|
FDTransparent.button.id = "fdtransparentbutton";
|
|
FDTransparent.button.src = browser.runtime.getURL('icon96.png');
|
|
// button click
|
|
FDTransparent.button.addEventListener("click", () => {
|
|
FDTransparent.isOn = !FDTransparent.isOn;
|
|
FDTransparent.setTransparent(FDTransparent.isOn);
|
|
});
|
|
// append button
|
|
document.body.appendChild(FDTransparent.button);
|
|
// SYNC TRANSPARENCY FROM STORAGE
|
|
FDTransparent.isTransparent()
|
|
.then((v) =>
|
|
{
|
|
FDTransparent.isOn = v;
|
|
FDTransparent.setTransparent(FDTransparent.isOn);
|
|
}
|
|
);
|
|
}
|
|
|
|
static changeButtonDisplay(value) {
|
|
if(value)
|
|
FDTransparent.button.className = "on";
|
|
else
|
|
FDTransparent.button.className = "";
|
|
}
|
|
|
|
static isOn = false;
|
|
|
|
static isTransparent() {
|
|
return new Promise((resolve, reject) => {
|
|
browser.storage.local.get("transparent")
|
|
.then((v) => {
|
|
resolve(Boolean(v.transparent));
|
|
});
|
|
});
|
|
}
|
|
|
|
static setTransparent(value) {
|
|
// CHANGE SAVED VALUE
|
|
browser.storage.local.set({"transparent": value });
|
|
|
|
// CHANGE TRANSPARENCY
|
|
[...document.getElementsByClassName("principal")].forEach((el) => {
|
|
if (value)
|
|
el.classList.add("transparent");
|
|
else
|
|
el.classList.remove("transparent");
|
|
});
|
|
|
|
// CHANGE BUTTON
|
|
FDTransparent.changeButtonDisplay(value);
|
|
}
|
|
}
|
|
|
|
FDTransparent.createButton();
|
|
|
|
console.info('Extension FDTransparent chargée !');
|
|
}
|
|
else {
|
|
console.info('L\'extension FDTransparent est inutile sur cette page.');
|
|
}
|