mirror of
https://github.com/BetterSEQTA/BetterSEQTA-Plus.git
synced 2026-06-06 03:34:40 +00:00
format: run prettify
This commit is contained in:
SethBurkart123
@@ -1,26 +1,26 @@
|
||||
import stringToHTML from "../stringToHTML"
|
||||
import browser from "webextension-polyfill"
|
||||
import { settingsState } from "../listeners/SettingsState"
|
||||
import { animate, stagger } from "motion"
|
||||
import { DeleteWhatsNew } from "../Whatsnew"
|
||||
import stringToHTML from "../stringToHTML";
|
||||
import browser from "webextension-polyfill";
|
||||
import { settingsState } from "../listeners/SettingsState";
|
||||
import { animate, stagger } from "motion";
|
||||
import { DeleteWhatsNew } from "../Whatsnew";
|
||||
|
||||
export function OpenAboutPage() {
|
||||
const background = document.createElement("div")
|
||||
background.id = "whatsnewbk"
|
||||
background.classList.add("whatsnewBackground")
|
||||
|
||||
const container = document.createElement("div")
|
||||
container.classList.add("whatsnewContainer")
|
||||
|
||||
var header: any = stringToHTML(
|
||||
/* html */
|
||||
`<div class="whatsnewHeader">
|
||||
const background = document.createElement("div");
|
||||
background.id = "whatsnewbk";
|
||||
background.classList.add("whatsnewBackground");
|
||||
|
||||
const container = document.createElement("div");
|
||||
container.classList.add("whatsnewContainer");
|
||||
|
||||
var header: any = stringToHTML(
|
||||
/* html */
|
||||
`<div class="whatsnewHeader">
|
||||
<h1>About</h1>
|
||||
<p>BetterSEQTA+ V${browser.runtime.getManifest().version}</p>
|
||||
</div>`,
|
||||
).firstChild
|
||||
|
||||
let text = stringToHTML(/* html */ `
|
||||
).firstChild;
|
||||
|
||||
let text = stringToHTML(/* html */ `
|
||||
<div class="whatsnewTextContainer" style="overflow-y: scroll;">
|
||||
<img src="${settingsState.DarkMode ? "https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Plus/main/src/resources/branding/dark.jpg" : "https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Plus/main/src/resources/branding/light.jpg"}" class="aboutImg" />
|
||||
|
||||
@@ -29,9 +29,9 @@ export function OpenAboutPage() {
|
||||
<h1>Credits</h1>
|
||||
<p>Nulkem created the original extension, was ported to Manifest V3 by MEGA-Dawg68, and is under active development by Crazypersonalph and SethBurkart123.</p>
|
||||
</div>
|
||||
`).firstChild
|
||||
|
||||
let footer = stringToHTML(/* html */ `
|
||||
`).firstChild;
|
||||
|
||||
let footer = stringToHTML(/* html */ `
|
||||
<div class="whatsnewFooter">
|
||||
<div>
|
||||
Report bugs and feedback:
|
||||
@@ -52,56 +52,56 @@ export function OpenAboutPage() {
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
`).firstChild
|
||||
|
||||
let exitbutton = document.createElement("div")
|
||||
exitbutton.id = "whatsnewclosebutton"
|
||||
|
||||
container.append(header)
|
||||
container.append(text as ChildNode)
|
||||
container.append(footer as ChildNode)
|
||||
container.append(exitbutton)
|
||||
|
||||
background.append(container)
|
||||
|
||||
document.getElementById("container")!.append(background)
|
||||
|
||||
let bkelement = document.getElementById("whatsnewbk")
|
||||
let popup = document.getElementsByClassName("whatsnewContainer")[0]
|
||||
|
||||
if (settingsState.animations) {
|
||||
animate(
|
||||
[popup, bkelement as HTMLElement],
|
||||
{ scale: [0, 1] },
|
||||
{
|
||||
type: "spring",
|
||||
stiffness: 220,
|
||||
damping: 18,
|
||||
},
|
||||
)
|
||||
|
||||
animate(
|
||||
".whatsnewTextContainer *",
|
||||
{ opacity: [0, 1], y: [10, 0] },
|
||||
{
|
||||
delay: stagger(0.05, { startDelay: 0.1 }),
|
||||
duration: 0.5,
|
||||
ease: [0.22, 0.03, 0.26, 1],
|
||||
},
|
||||
)
|
||||
`).firstChild;
|
||||
|
||||
let exitbutton = document.createElement("div");
|
||||
exitbutton.id = "whatsnewclosebutton";
|
||||
|
||||
container.append(header);
|
||||
container.append(text as ChildNode);
|
||||
container.append(footer as ChildNode);
|
||||
container.append(exitbutton);
|
||||
|
||||
background.append(container);
|
||||
|
||||
document.getElementById("container")!.append(background);
|
||||
|
||||
let bkelement = document.getElementById("whatsnewbk");
|
||||
let popup = document.getElementsByClassName("whatsnewContainer")[0];
|
||||
|
||||
if (settingsState.animations) {
|
||||
animate(
|
||||
[popup, bkelement as HTMLElement],
|
||||
{ scale: [0, 1] },
|
||||
{
|
||||
type: "spring",
|
||||
stiffness: 220,
|
||||
damping: 18,
|
||||
},
|
||||
);
|
||||
|
||||
animate(
|
||||
".whatsnewTextContainer *",
|
||||
{ opacity: [0, 1], y: [10, 0] },
|
||||
{
|
||||
delay: stagger(0.05, { startDelay: 0.1 }),
|
||||
duration: 0.5,
|
||||
ease: [0.22, 0.03, 0.26, 1],
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
delete settingsState.justupdated;
|
||||
|
||||
bkelement!.addEventListener("click", function (event) {
|
||||
// Check if the click event originated from the element itself and not any of its children
|
||||
if (event.target === bkelement) {
|
||||
DeleteWhatsNew();
|
||||
}
|
||||
|
||||
delete settingsState.justupdated
|
||||
|
||||
bkelement!.addEventListener("click", function (event) {
|
||||
// Check if the click event originated from the element itself and not any of its children
|
||||
if (event.target === bkelement) {
|
||||
DeleteWhatsNew()
|
||||
}
|
||||
})
|
||||
|
||||
var closeelement = document.getElementById("whatsnewclosebutton")
|
||||
closeelement!.addEventListener("click", function () {
|
||||
DeleteWhatsNew()
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
var closeelement = document.getElementById("whatsnewclosebutton");
|
||||
closeelement!.addEventListener("click", function () {
|
||||
DeleteWhatsNew();
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,259 +1,253 @@
|
||||
import type { SettingsState } from "@/types/storage";
|
||||
import { settingsState } from "../listeners/SettingsState";
|
||||
import stringToHTML from "../stringToHTML";
|
||||
import Sortable from "sortablejs";
|
||||
|
||||
import type { SettingsState } from "@/types/storage"
|
||||
import { settingsState } from "../listeners/SettingsState"
|
||||
import stringToHTML from "../stringToHTML"
|
||||
import Sortable from "sortablejs"
|
||||
|
||||
export let MenuOptionsOpen = false
|
||||
|
||||
export let MenuOptionsOpen = false;
|
||||
|
||||
export function OpenMenuOptions() {
|
||||
var container = document.getElementById("container")
|
||||
var menu = document.getElementById("menu")
|
||||
var container = document.getElementById("container");
|
||||
var menu = document.getElementById("menu");
|
||||
|
||||
if (settingsState.defaultmenuorder.length == 0) {
|
||||
let childnodes = menu!.firstChild!.childNodes
|
||||
let newdefaultmenuorder = []
|
||||
let childnodes = menu!.firstChild!.childNodes;
|
||||
let newdefaultmenuorder = [];
|
||||
for (let i = 0; i < childnodes.length; i++) {
|
||||
const element = childnodes[i]
|
||||
newdefaultmenuorder.push((element as HTMLElement).dataset.key)
|
||||
settingsState.defaultmenuorder = newdefaultmenuorder
|
||||
const element = childnodes[i];
|
||||
newdefaultmenuorder.push((element as HTMLElement).dataset.key);
|
||||
settingsState.defaultmenuorder = newdefaultmenuorder;
|
||||
}
|
||||
}
|
||||
let childnodes = menu!.firstChild!.childNodes
|
||||
let childnodes = menu!.firstChild!.childNodes;
|
||||
if (settingsState.defaultmenuorder.length != childnodes.length) {
|
||||
for (let i = 0; i < childnodes.length; i++) {
|
||||
const element = childnodes[i]
|
||||
const element = childnodes[i];
|
||||
if (
|
||||
!settingsState.defaultmenuorder.indexOf(
|
||||
(element as HTMLElement).dataset.key,
|
||||
)
|
||||
) {
|
||||
let newdefaultmenuorder = settingsState.defaultmenuorder
|
||||
newdefaultmenuorder.push((element as HTMLElement).dataset.key)
|
||||
settingsState.defaultmenuorder = newdefaultmenuorder
|
||||
let newdefaultmenuorder = settingsState.defaultmenuorder;
|
||||
newdefaultmenuorder.push((element as HTMLElement).dataset.key);
|
||||
settingsState.defaultmenuorder = newdefaultmenuorder;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
MenuOptionsOpen = true
|
||||
MenuOptionsOpen = true;
|
||||
|
||||
var cover = document.createElement("div")
|
||||
cover.classList.add("notMenuCover")
|
||||
menu!.style.zIndex = "20"
|
||||
menu!.style.setProperty("--menuHidden", "flex")
|
||||
container!.append(cover)
|
||||
var cover = document.createElement("div");
|
||||
cover.classList.add("notMenuCover");
|
||||
menu!.style.zIndex = "20";
|
||||
menu!.style.setProperty("--menuHidden", "flex");
|
||||
container!.append(cover);
|
||||
|
||||
var menusettings = document.createElement("div")
|
||||
menusettings.classList.add("editmenuoption-container")
|
||||
var menusettings = document.createElement("div");
|
||||
menusettings.classList.add("editmenuoption-container");
|
||||
|
||||
var defaultbutton = document.createElement("div")
|
||||
defaultbutton.classList.add("editmenuoption")
|
||||
defaultbutton.innerText = "Restore Default"
|
||||
defaultbutton.id = "restoredefaultoption"
|
||||
var defaultbutton = document.createElement("div");
|
||||
defaultbutton.classList.add("editmenuoption");
|
||||
defaultbutton.innerText = "Restore Default";
|
||||
defaultbutton.id = "restoredefaultoption";
|
||||
|
||||
var savebutton = document.createElement("div")
|
||||
savebutton.classList.add("editmenuoption")
|
||||
savebutton.innerText = "Save"
|
||||
savebutton.id = "restoredefaultoption"
|
||||
var savebutton = document.createElement("div");
|
||||
savebutton.classList.add("editmenuoption");
|
||||
savebutton.innerText = "Save";
|
||||
savebutton.id = "restoredefaultoption";
|
||||
|
||||
menusettings.appendChild(defaultbutton)
|
||||
menusettings.appendChild(savebutton)
|
||||
menusettings.appendChild(defaultbutton);
|
||||
menusettings.appendChild(savebutton);
|
||||
|
||||
menu!.appendChild(menusettings)
|
||||
menu!.appendChild(menusettings);
|
||||
|
||||
var ListItems = menu!.firstChild!.childNodes
|
||||
var ListItems = menu!.firstChild!.childNodes;
|
||||
for (let i = 0; i < ListItems.length; i++) {
|
||||
const element1 = ListItems[i]
|
||||
const element = element1 as HTMLElement
|
||||
const element1 = ListItems[i];
|
||||
const element = element1 as HTMLElement;
|
||||
|
||||
;(element as HTMLElement).classList.add("draggable")
|
||||
(element as HTMLElement).classList.add("draggable");
|
||||
if ((element as HTMLElement).classList.contains("hasChildren")) {
|
||||
(element as HTMLElement).classList.remove("active")
|
||||
;(element.firstChild as HTMLElement).classList.remove("noscroll")
|
||||
(element as HTMLElement).classList.remove("active");
|
||||
(element.firstChild as HTMLElement).classList.remove("noscroll");
|
||||
}
|
||||
|
||||
let MenuItemToggle = stringToHTML(
|
||||
`<div class="onoffswitch" style="margin: auto 0;"><input class="onoffswitch-checkbox notification menuitem" type="checkbox" id="${(element as HTMLElement).dataset.key}"><label for="${(element as HTMLElement).dataset.key}" class="onoffswitch-label"></label>`,
|
||||
).firstChild
|
||||
;(element as HTMLElement).append(MenuItemToggle!)
|
||||
).firstChild;
|
||||
(element as HTMLElement).append(MenuItemToggle!);
|
||||
|
||||
if (!element.dataset.betterseqta) {
|
||||
const a = document.createElement("section")
|
||||
a.innerHTML = element.innerHTML
|
||||
cloneAttributes(a, element)
|
||||
menu!.firstChild!.insertBefore(a, element)
|
||||
element.remove()
|
||||
const a = document.createElement("section");
|
||||
a.innerHTML = element.innerHTML;
|
||||
cloneAttributes(a, element);
|
||||
menu!.firstChild!.insertBefore(a, element);
|
||||
element.remove();
|
||||
}
|
||||
}
|
||||
|
||||
if (Object.keys(settingsState.menuitems).length == 0) {
|
||||
menubuttons = menu!.firstChild!.childNodes
|
||||
let menuItems = {} as any
|
||||
menubuttons = menu!.firstChild!.childNodes;
|
||||
let menuItems = {} as any;
|
||||
for (var i = 0; i < menubuttons.length; i++) {
|
||||
var id = (menubuttons[i] as HTMLElement).dataset.key
|
||||
const element: any = {}
|
||||
element.toggle = true
|
||||
;(menuItems[id as keyof typeof menuItems] as any) = element
|
||||
var id = (menubuttons[i] as HTMLElement).dataset.key;
|
||||
const element: any = {};
|
||||
element.toggle = true;
|
||||
(menuItems[id as keyof typeof menuItems] as any) = element;
|
||||
}
|
||||
settingsState.menuitems = menuItems
|
||||
settingsState.menuitems = menuItems;
|
||||
}
|
||||
|
||||
var menubuttons: any = document.getElementsByClassName("menuitem")
|
||||
var menubuttons: any = document.getElementsByClassName("menuitem");
|
||||
|
||||
let menuItems = settingsState.menuitems as any
|
||||
let buttons = document.getElementsByClassName("menuitem")
|
||||
let menuItems = settingsState.menuitems as any;
|
||||
let buttons = document.getElementsByClassName("menuitem");
|
||||
for (let i = 0; i < buttons.length; i++) {
|
||||
let id = buttons[i].id as string | undefined
|
||||
let id = buttons[i].id as string | undefined;
|
||||
if (menuItems[id as keyof typeof menuItems]) {
|
||||
(buttons[i] as HTMLInputElement).checked =
|
||||
menuItems[id as keyof typeof menuItems].toggle
|
||||
menuItems[id as keyof typeof menuItems].toggle;
|
||||
} else {
|
||||
(buttons[i] as HTMLInputElement).checked = true
|
||||
(buttons[i] as HTMLInputElement).checked = true;
|
||||
}
|
||||
(buttons[i] as HTMLInputElement).checked = true
|
||||
(buttons[i] as HTMLInputElement).checked = true;
|
||||
}
|
||||
|
||||
try {
|
||||
var el = document.querySelector("#menu > ul")
|
||||
var el = document.querySelector("#menu > ul");
|
||||
var sortable = Sortable.create(el as HTMLElement, {
|
||||
draggable: ".draggable",
|
||||
dataIdAttr: "data-key",
|
||||
animation: 150,
|
||||
easing: "cubic-bezier(.5,0,.5,1)",
|
||||
onEnd: function () {
|
||||
saveNewOrder(sortable)
|
||||
saveNewOrder(sortable);
|
||||
},
|
||||
})
|
||||
});
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
console.error(err);
|
||||
}
|
||||
|
||||
function changeDisplayProperty(element: any) {
|
||||
if (!element.checked) {
|
||||
element.parentNode.parentNode.style.display = "var(--menuHidden)"
|
||||
element.parentNode.parentNode.style.display = "var(--menuHidden)";
|
||||
}
|
||||
if (element.checked) {
|
||||
element.parentNode.parentNode.style.setProperty(
|
||||
"display",
|
||||
"flex",
|
||||
"important",
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function StoreMenuSettings() {
|
||||
let menu = document.getElementById("menu")
|
||||
const menuItems: any = {}
|
||||
let menubuttons = menu!.firstChild!.childNodes
|
||||
const button = document.getElementsByClassName("menuitem")
|
||||
let menu = document.getElementById("menu");
|
||||
const menuItems: any = {};
|
||||
let menubuttons = menu!.firstChild!.childNodes;
|
||||
const button = document.getElementsByClassName("menuitem");
|
||||
for (let i = 0; i < menubuttons.length; i++) {
|
||||
const id = (menubuttons[i] as HTMLElement).dataset.key
|
||||
const element: any = {}
|
||||
element.toggle = (button[i] as HTMLInputElement).checked
|
||||
const id = (menubuttons[i] as HTMLElement).dataset.key;
|
||||
const element: any = {};
|
||||
element.toggle = (button[i] as HTMLInputElement).checked;
|
||||
|
||||
menuItems[id as keyof typeof menuItems] = element
|
||||
menuItems[id as keyof typeof menuItems] = element;
|
||||
}
|
||||
settingsState.menuitems = menuItems
|
||||
settingsState.menuitems = menuItems;
|
||||
}
|
||||
|
||||
for (let i = 0; i < menubuttons.length; i++) {
|
||||
const element = menubuttons[i]
|
||||
const element = menubuttons[i];
|
||||
element.addEventListener("change", () => {
|
||||
element.parentElement.parentElement.getAttribute("data-key")
|
||||
StoreMenuSettings()
|
||||
changeDisplayProperty(element)
|
||||
})
|
||||
element.parentElement.parentElement.getAttribute("data-key");
|
||||
StoreMenuSettings();
|
||||
changeDisplayProperty(element);
|
||||
});
|
||||
}
|
||||
|
||||
function closeAll() {
|
||||
menusettings?.remove()
|
||||
cover?.remove()
|
||||
MenuOptionsOpen = false
|
||||
menu!.style.setProperty("--menuHidden", "none")
|
||||
menusettings?.remove();
|
||||
cover?.remove();
|
||||
MenuOptionsOpen = false;
|
||||
menu!.style.setProperty("--menuHidden", "none");
|
||||
|
||||
for (let i = 0; i < ListItems.length; i++) {
|
||||
const element1 = ListItems[i]
|
||||
const element = element1 as HTMLElement
|
||||
element.classList.remove("draggable")
|
||||
element.setAttribute("draggable", "false")
|
||||
const element1 = ListItems[i];
|
||||
const element = element1 as HTMLElement;
|
||||
element.classList.remove("draggable");
|
||||
element.setAttribute("draggable", "false");
|
||||
|
||||
if (!element.dataset.betterseqta) {
|
||||
const a = document.createElement("li")
|
||||
a.innerHTML = element.innerHTML
|
||||
cloneAttributes(a, element)
|
||||
menu!.firstChild!.insertBefore(a, element)
|
||||
element.remove()
|
||||
const a = document.createElement("li");
|
||||
a.innerHTML = element.innerHTML;
|
||||
cloneAttributes(a, element);
|
||||
menu!.firstChild!.insertBefore(a, element);
|
||||
element.remove();
|
||||
}
|
||||
}
|
||||
|
||||
let switches = menu!.querySelectorAll(".onoffswitch")
|
||||
let switches = menu!.querySelectorAll(".onoffswitch");
|
||||
for (let i = 0; i < switches.length; i++) {
|
||||
switches[i].remove()
|
||||
switches[i].remove();
|
||||
}
|
||||
}
|
||||
|
||||
cover?.addEventListener("click", closeAll)
|
||||
savebutton?.addEventListener("click", closeAll)
|
||||
cover?.addEventListener("click", closeAll);
|
||||
savebutton?.addEventListener("click", closeAll);
|
||||
|
||||
defaultbutton?.addEventListener("click", function () {
|
||||
const options = settingsState.defaultmenuorder
|
||||
settingsState.menuorder = options
|
||||
const options = settingsState.defaultmenuorder;
|
||||
settingsState.menuorder = options;
|
||||
|
||||
ChangeMenuItemPositions(options)
|
||||
ChangeMenuItemPositions(options);
|
||||
|
||||
for (let i = 0; i < menubuttons.length; i++) {
|
||||
const element = menubuttons[i]
|
||||
element.checked = true
|
||||
const element = menubuttons[i];
|
||||
element.checked = true;
|
||||
element.parentNode.parentNode.style.setProperty(
|
||||
"display",
|
||||
"flex",
|
||||
"important",
|
||||
)
|
||||
);
|
||||
}
|
||||
saveNewOrder(sortable)
|
||||
})
|
||||
saveNewOrder(sortable);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
function saveNewOrder(sortable: any) {
|
||||
var order = sortable.toArray()
|
||||
settingsState.menuorder = order
|
||||
var order = sortable.toArray();
|
||||
settingsState.menuorder = order;
|
||||
}
|
||||
|
||||
function cloneAttributes(target: any, source: any) {
|
||||
[...source.attributes].forEach((attr) => {
|
||||
target.setAttribute(attr.nodeName, attr.nodeValue)
|
||||
})
|
||||
target.setAttribute(attr.nodeName, attr.nodeValue);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
export function ChangeMenuItemPositions(menuorder: SettingsState["menuorder"]) {
|
||||
var menuList = document.querySelector("#menu")!.firstChild!.childNodes
|
||||
var menuList = document.querySelector("#menu")!.firstChild!.childNodes;
|
||||
|
||||
let listorder = []
|
||||
let listorder = [];
|
||||
for (let i = 0; i < menuList.length; i++) {
|
||||
const menu = menuList[i] as HTMLElement
|
||||
const menu = menuList[i] as HTMLElement;
|
||||
|
||||
let a = menuorder.indexOf(menu.dataset.key)
|
||||
let a = menuorder.indexOf(menu.dataset.key);
|
||||
|
||||
listorder.push(a)
|
||||
listorder.push(a);
|
||||
}
|
||||
|
||||
var newArr = []
|
||||
var newArr = [];
|
||||
for (var i = 0; i < listorder.length; i++) {
|
||||
newArr[listorder[i]] = menuList[i]
|
||||
newArr[listorder[i]] = menuList[i];
|
||||
}
|
||||
|
||||
let listItemsDOM = document.getElementById("menu")!.firstChild
|
||||
let listItemsDOM = document.getElementById("menu")!.firstChild;
|
||||
for (let i = 0; i < newArr.length; i++) {
|
||||
const element = newArr[i]
|
||||
const element = newArr[i];
|
||||
if (element) {
|
||||
const elem = element as HTMLElement
|
||||
elem.setAttribute("data-checked", "true")
|
||||
listItemsDOM!.appendChild(element)
|
||||
const elem = element as HTMLElement;
|
||||
elem.setAttribute("data-checked", "true");
|
||||
listItemsDOM!.appendChild(element);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user