BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-06-05 19:24:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: seperate file to manage the 3 popups

Browse Source
This commit is contained in:
Jones8683
2025-11-10 19:05:08 +10:30
parent 7136de90be
commit 1d634d0da1
6 changed files with 173 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/interface/pages/settings.svelte
+2 -2
View File
@@ -11,8 +11,8 @@
import { closeExtensionPopup } from "@/seqta/utils/Closers/closeExtensionPopup";
import { OpenAboutPage } from "@/seqta/utils/Openers/OpenAboutPage";
import { OpenWhatsNewPopup } from "@/seqta/utils/Whatsnew";
import { OpenMinecraftServerPopup } from "@/seqta/utils/AboutMinecraftServer";
import { OpenWhatsNewPopup } from "@/seqta/utils/Openers/OpenWhatsNewPopup";
import { OpenMinecraftServerPopup } from "@/seqta/utils/Openers/OpenMinecraftServerPopup";
import ColourPicker from "../components/ColourPicker.svelte";
import { settingsPopup } from "../hooks/SettingsPopup";
src/plugins/monofile.ts
+2 -2
View File
@@ -23,8 +23,8 @@ import { updateAllColors } from "@/seqta/ui/colors/Manager";
import loading from "@/seqta/ui/Loading";
import { SendNewsPage } from "@/seqta/utils/SendNewsPage";
import { loadHomePage } from "@/seqta/utils/Loaders/LoadHomePage";
import { OpenWhatsNewPopup } from "@/seqta/utils/Whatsnew";
//import { OpenMinecraftServerPopup } from "@/seqta/utils/AboutMinecraftServer";
import { OpenWhatsNewPopup } from "@/seqta/utils/Openers/OpenWhatsNewPopup";
//import { OpenMinecraftServerPopup } from "@/seqta/utils/Openers/OpenMinecraftServerPopup";
import {
updateTimetableTimes,
src/seqta/utils/Openers/OpenAboutPage.ts
+10 -64
View File
@@ -1,25 +1,17 @@
import stringToHTML from "../stringToHTML";
import { settingsState } from "../listeners/SettingsState";
import { animate, stagger } from "motion";
import { DeleteWhatsNew } from "../Whatsnew";
import { openPopup } from "./PopupManager";
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(
const header = stringToHTML(
/* html */
`<div class="whatsnewHeader">
<h1>About</h1>
<p>About the extension</p>
</div>`,
).firstChild;
).firstChild as HTMLElement;
let text = stringToHTML(/* html */ `
const text = stringToHTML(/* html */ `
<div class="whatsnewTextContainer" style="overflow-y: hidden;">
<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" />
<p>BetterSEQTA+ is a fork of BetterSEQTA (originally developed by Nulkem), which was discontinued. BetterSEQTA+ continued development of BetterSEQTA, while incorporating a plethora of features. </p>
@@ -37,9 +29,9 @@ export function OpenAboutPage() {
style="width: 100%; max-width: 500px; height: auto; object-fit: contain; display: block; margin: -110px auto 0;">
</div>
</div>
`).firstChild;
`).firstChild as HTMLElement;
let footer = stringToHTML(/* html */ `
const footer = stringToHTML(/* html */ `
<div class="whatsnewFooter">
<div>
Resources and Feedback:
@@ -67,56 +59,10 @@ export function OpenAboutPage() {
</a>
</div>
</div>
`).firstChild;
`).firstChild as HTMLElement;
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();
}
});
var closeelement = document.getElementById("whatsnewclosebutton");
closeelement!.addEventListener("click", function () {
DeleteWhatsNew();
openPopup({
header,
content: [text, footer],
});
}
src/seqta/utils/AboutMinecraftServer.ts → src/seqta/utils/Openers/OpenMinecraftServerPopup.ts
+18 -80
View File
@@ -1,7 +1,5 @@
import stringToHTML from "./stringToHTML";
import { settingsState } from "./listeners/SettingsState";
import { animate, stagger } from "motion";
import { DeleteWhatsNew } from "@/seqta/utils/Whatsnew";
import stringToHTML from "../stringToHTML";
import { openPopup } from "./PopupManager";
export function OpenMinecraftServerPopup() {
if (!document.querySelector('link[href*="minecraftia"]')) {
@@ -11,44 +9,35 @@ export function OpenMinecraftServerPopup() {
document.head.appendChild(fontLink);
}
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(
const header = stringToHTML(
/* html */
`<div class="whatsnewHeader">
<h1>Minecraft Server</h1>
<p>The official BetterSEQTA+ Minecraft Server</p>
</div>`,
).firstChild;
).firstChild as HTMLElement;
let imagecont = document.createElement("div");
imagecont.classList.add("whatsnewImgContainer");
const imageContainer = document.createElement("div");
imageContainer.classList.add("whatsnewImgContainer");
let video = document.createElement("video");
const video = document.createElement("video");
video.style.aspectRatio = "16/9";
video.style.background = "black";
let source = document.createElement("source");
const source = document.createElement("source");
source.setAttribute(
"src",
"https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Plus/main/src/resources/server-video.mp4",
);
video.autoplay = true;
video.muted = true;
video.loop = true;
video.appendChild(source);
video.classList.add("whatsnewImg");
imagecont.appendChild(video);
imageContainer.appendChild(video);
let textcontainer = document.createElement("div");
textcontainer.classList.add("whatsnewTextContainer");
let text = stringToHTML(/* html */ `
const text = stringToHTML(/* html */ `
<div class="whatsnewTextContainer" style="height: 50%; overflow-y: hidden;">
<h1>Join our community in Minecraft!</h1>
<p style="margin-left: 0;">Join the official BetterSEQTA+ Minecraft Server community now!</p>
@@ -75,8 +64,7 @@ export function OpenMinecraftServerPopup() {
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
">
1px 1px 0 #000;">
mc.betterseqta.org
</p>
<p style="
@@ -90,14 +78,13 @@ export function OpenMinecraftServerPopup() {
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
">
1px 1px 0 #000;">
Version: 1.21.4
</p>
</div>
`).firstChild;
`).firstChild as HTMLElement;
let footer = stringToHTML(/* html */ `
const footer = stringToHTML(/* html */ `
<div class="whatsnewFooter">
<div>
Resources and Feedback:
@@ -127,59 +114,10 @@ export function OpenMinecraftServerPopup() {
<div>
</div>
</div>
`).firstChild;
`).firstChild as HTMLElement;
let exitbutton = document.createElement("div");
exitbutton.id = "whatsnewclosebutton";
container.append(
openPopup({
header,
imagecont,
text as HTMLElement,
footer as HTMLElement,
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();
}
});
var closeelement = document.getElementById("whatsnewclosebutton");
closeelement!.addEventListener("click", function () {
DeleteWhatsNew();
content: [imageContainer, text, footer],
});
}
src/seqta/utils/Whatsnew.ts → src/seqta/utils/Openers/OpenWhatsNewPopup.ts
+18 -115
View File
@@ -1,62 +1,22 @@
import { settingsState } from "./listeners/SettingsState";
import { animate, stagger } from "motion";
import stringToHTML from "./stringToHTML";
import stringToHTML from "../stringToHTML";
import browser from "webextension-polyfill";
import kofi from "@/resources/kofi.png?base64";
let isClosing = false;
export async function DeleteWhatsNew() {
if (isClosing) return;
isClosing = true;
const bkelement = document.getElementById("whatsnewbk");
const popup = document.getElementsByClassName(
"whatsnewContainer",
)[0] as HTMLElement;
if (!bkelement || !popup) {
isClosing = false;
return;
}
if (!settingsState.animations) {
bkelement.remove();
isClosing = false;
return;
}
await animate(
[popup, bkelement as HTMLElement],
{ opacity: [1, 0], scale: [1, 0.95] } as any,
{ duration: 0.25, ease: [0.22, 0.03, 0.26, 1] },
);
bkelement.remove();
isClosing = false;
}
import { openPopup } from "./PopupManager";
export function OpenWhatsNewPopup() {
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(
const header = stringToHTML(
/* html */
`<div class="whatsnewHeader">
<h1>What's New</h1>
<p>BetterSEQTA+ V${browser.runtime.getManifest().version}</p>
</div>`,
).firstChild;
).firstChild as HTMLElement;
let imagecont = document.createElement("div");
imagecont.classList.add("whatsnewImgContainer");
const imageContainer = document.createElement("div");
imageContainer.classList.add("whatsnewImgContainer");
let video = document.createElement("video");
let source = document.createElement("source");
const video = document.createElement("video");
const source = document.createElement("source");
source.setAttribute(
"src",
@@ -67,19 +27,10 @@ export function OpenWhatsNewPopup() {
video.loop = true;
video.appendChild(source);
video.classList.add("whatsnewImg");
imagecont.appendChild(video);
imageContainer.appendChild(video);
/* let whatsnewimg = document.createElement("img");
//whatsnewimg.src = "https://raw.githubusercontent.com/BetterSEQTA/BetterSEQTA-Plus/main/src/resources/update-image.webp";
whatsnewimg.src = browser.runtime.getURL('../../resources/update-image.webp');
whatsnewimg.classList.add("whatsnewImg");
imagecont.appendChild(whatsnewimg); */
let textcontainer = document.createElement("div");
textcontainer.classList.add("whatsnewTextContainer");
let text = stringToHTML(/* html */ `
<div class="whatsnewTextContainer" style="height: 50%;overflow-y: scroll;">
const text = stringToHTML(/* html */ `
<div class="whatsnewTextContainer" style="height: 50%;overflow-y: hidden;">
<h1>3.4.11 - New Features & Bug Fixes</h1>
<li>Added Background Music plugin</li>
@@ -305,9 +256,9 @@ export function OpenWhatsNewPopup() {
<h1>Create Custom Shortcuts</h1>
<li>Found in the BetterSEQTA+ Settings menu, custom shortcuts can now be created with a name and URL of your choice.</li>
</div>
`).firstChild;
`).firstChild as HTMLElement;
let footer = stringToHTML(/* html */ `
const footer = stringToHTML(/* html */ `
<div class="whatsnewFooter">
<div>
Resources and Feedback:
@@ -335,63 +286,15 @@ export function OpenWhatsNewPopup() {
</a>
</div>
<div>
<a href="https://ko-fi.com/sethburkart" target="_blank" style="background: none !important; margin:0;margin-left:6px; padding:0; display: flex; align-items: center;">
<a href="https://ko-fi.com/sethburkart" target="_blank" style="background: none !important; margin:0;margin-left:6px;padding:0; display: flex; align-items: center;">
<img height="25" style="border:0px; height:25px; margin-right: -6px;" src="${kofi}" border="0" alt="Buy Me a Coffee at ko-fi.com" />
</a>
</div>
</div>
`).firstChild;
`).firstChild as HTMLElement;
let exitbutton = document.createElement("div");
exitbutton.id = "whatsnewclosebutton";
container.append(header);
container.append(imagecont);
container.append(textcontainer);
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();
}
});
var closeelement = document.getElementById("whatsnewclosebutton");
closeelement!.addEventListener("click", function () {
DeleteWhatsNew();
openPopup({
header,
content: [imageContainer, text, footer],
});
}
src/seqta/utils/Openers/PopupManager.ts
+98
View File
@@ -0,0 +1,98 @@
import { settingsState } from "../listeners/SettingsState";
import { animate as motionAnimate, stagger } from "motion";
type AnimationTarget = string | Element | Element[] | NodeList | null;
let isClosing = false;
export async function closePopup() {
if (isClosing) return;
isClosing = true;
const background = document.getElementById("whatsnewbk");
const popup = document.getElementsByClassName("whatsnewContainer")[0] as
| HTMLElement
| undefined;
if (!background || !popup) {
isClosing = false;
return;
}
if (!settingsState.animations) {
background.remove();
isClosing = false;
return;
}
await (motionAnimate as any)(
[popup, background],
{ opacity: [1, 0], scale: [1, 0.95] },
{ duration: 0.25, easing: [0.22, 0.03, 0.26, 1] },
);
background.remove();
isClosing = false;
}
interface OpenPopupOptions {
header?: Node | null;
content?: (Node | null | undefined)[];
animateSelector?: AnimationTarget;
}
export function openPopup({
header,
content = [],
animateSelector = ".whatsnewTextContainer *",
}: OpenPopupOptions = {}) {
const background = document.createElement("div");
background.id = "whatsnewbk";
background.classList.add("whatsnewBackground");
const container = document.createElement("div");
container.classList.add("whatsnewContainer");
if (header) container.append(header);
for (const node of content) if (node) container.append(node);
const closeButton = document.createElement("div");
closeButton.id = "whatsnewclosebutton";
container.append(closeButton);
background.append(container);
document.getElementById("container")!.append(background);
if (settingsState.animations) {
(motionAnimate as any)(
[container, background],
{ scale: [0, 1] },
{ type: "spring", stiffness: 220, damping: 18 },
);
if (animateSelector) {
const targets =
typeof animateSelector === "string"
? document.querySelectorAll(animateSelector)
: animateSelector;
(motionAnimate as any)(
targets!,
{ opacity: [0, 1], y: [10, 0] },
{
delay: stagger(0.05, { startDelay: 0.1 }),
duration: 0.5,
easing: [0.22, 0.03, 0.26, 1],
},
);
}
}
delete settingsState.justupdated;
background.addEventListener("click", (event) => {
if (event.target === background) void closePopup();
});
closeButton.addEventListener("click", () => void closePopup());
}