mirror of
https://github.com/BetterSEQTA/BetterSEQTA-Plus.git
synced 2026-06-06 03:34:40 +00:00
Merge pull request #357 from Jones8683/main
This commit is contained in:
Alphons Joseph
+39
-13
@@ -158,6 +158,16 @@ select {
|
||||
color: var(--text-primary);
|
||||
position: relative;
|
||||
}
|
||||
#main {
|
||||
> .timetablepage {
|
||||
> .quickbar {
|
||||
.gutter {
|
||||
border-bottom-left-radius: 15px;
|
||||
border-bottom-right-radius: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.forums {
|
||||
color: var(--text-color);
|
||||
}
|
||||
@@ -823,11 +833,18 @@ div > ol:has(.uiFileHandlerWrapper) {
|
||||
box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
html.transparencyEffects [class*="ResourceList__ResourceItem___voTSd"],
|
||||
html.transparencyEffects [class*="ResourceList__ResourceItem___voTSd"] [class*="ResourceList__name___ydvDT"] {
|
||||
html.transparencyEffects [class*="BasicPanel__BasicPanel___q92_U"] > ol > li {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
html.transparencyEffects
|
||||
[class*="BasicPanel__BasicPanel___q92_U"]
|
||||
> ol
|
||||
> li
|
||||
+ li {
|
||||
border-top: 1px solid var(--theme-offset-bg);
|
||||
}
|
||||
|
||||
.assessmentsWrapper .message {
|
||||
display: none;
|
||||
}
|
||||
@@ -1690,7 +1707,7 @@ iframe.userHTML {
|
||||
}
|
||||
|
||||
.programmeNavigator {
|
||||
box-shadow: 0 0 40px 0px rgba(0,0,0,0.05);
|
||||
box-shadow: 0 0 40px 0px rgba(0, 0, 0, 0.05);
|
||||
overflow-y: scroll;
|
||||
height: 100%;
|
||||
|
||||
@@ -1761,7 +1778,9 @@ iframe.userHTML {
|
||||
background: var(--auto-background);
|
||||
opacity: 0;
|
||||
scale: 0.95;
|
||||
transition: opacity 0.2s ease-out, scale 0.1s ease-out;
|
||||
transition:
|
||||
opacity 0.2s ease-out,
|
||||
scale 0.1s ease-out;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -1775,7 +1794,6 @@ iframe.userHTML {
|
||||
opacity: 1;
|
||||
scale: 1;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1799,7 +1817,9 @@ iframe.userHTML {
|
||||
.dark .programmeNavigator .navigator {
|
||||
.search {
|
||||
background: var(--background-secondary) !important;
|
||||
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1), inset 0px 0px 15px 0px rgba(0, 0, 0, 0.1) !important;
|
||||
box-shadow:
|
||||
0px 0px 10px 0px rgba(0, 0, 0, 0.1),
|
||||
inset 0px 0px 15px 0px rgba(0, 0, 0, 0.1) !important;
|
||||
}
|
||||
}
|
||||
.dark #main > .course > .content > h1 {
|
||||
@@ -2179,7 +2199,7 @@ div.bar.flat {
|
||||
background: var(--background-secondary) !important;
|
||||
}
|
||||
|
||||
.dashlet-motd {
|
||||
.dashlet-motd {
|
||||
padding: 7px !important;
|
||||
.message {
|
||||
font-size: 24px !important;
|
||||
@@ -2195,8 +2215,7 @@ div.bar.flat {
|
||||
align-items: flex-start !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.cke_toolbox > .cke_toolbar > .cke_toolgroup > .cke_button {
|
||||
background: var(--background-secondary) !important;
|
||||
@@ -3750,7 +3769,12 @@ div.day-empty {
|
||||
}
|
||||
|
||||
.notice-unified-content {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
font-weight: inherit !important;
|
||||
@@ -3842,7 +3866,8 @@ div.day-empty {
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
ul,
|
||||
ol {
|
||||
margin: 12px 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
@@ -3852,7 +3877,7 @@ div.day-empty {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notice-header {
|
||||
display: flex;
|
||||
@@ -3989,7 +4014,8 @@ button.notice-close-btn {
|
||||
}
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
ul,
|
||||
ol {
|
||||
margin: 12px 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
@@ -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";
|
||||
@@ -103,7 +103,7 @@
|
||||
{#if !standalone}
|
||||
<button
|
||||
onclick={openAbout}
|
||||
class="absolute top-1 right-[62px] w-8 h-8 text-lg rounded-xl font-IconFamily bg-zinc-100 dark:bg-zinc-700"
|
||||
class="absolute top-1 right-[63px] w-8 h-8 text-lg rounded-xl font-IconFamily bg-zinc-100 dark:bg-zinc-700"
|
||||
>
|
||||
{"\ueb73"}
|
||||
</button>
|
||||
|
||||
@@ -39,7 +39,7 @@ const notificationCollectorPlugin: Plugin<{}, NotificationCollectorStorage> = {
|
||||
"[class*='notifications__bubble___']",
|
||||
) as HTMLElement;
|
||||
|
||||
if (api.storage.lastNotificationCount !== 0) {
|
||||
if (alertDiv && api.storage.lastNotificationCount !== 0) {
|
||||
alertDiv.textContent = api.storage.lastNotificationCount.toString();
|
||||
}
|
||||
|
||||
@@ -74,13 +74,17 @@ const notificationCollectorPlugin: Plugin<{}, NotificationCollectorStorage> = {
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("[BetterSEQTA+] Error fetching notifications:", error);
|
||||
api.storage.consecutiveErrors = (api.storage.consecutiveErrors || 0) + 1;
|
||||
api.storage.consecutiveErrors =
|
||||
(api.storage.consecutiveErrors || 0) + 1;
|
||||
}
|
||||
};
|
||||
|
||||
const getNextInterval = () => {
|
||||
// Exponential backoff on errors, max 5 minutes
|
||||
const errorMultiplier = Math.min(Math.pow(2, api.storage.consecutiveErrors || 0), 10);
|
||||
const errorMultiplier = Math.min(
|
||||
Math.pow(2, api.storage.consecutiveErrors || 0),
|
||||
10,
|
||||
);
|
||||
return Math.min(baseInterval * errorMultiplier, maxInterval);
|
||||
};
|
||||
|
||||
@@ -92,7 +96,8 @@ const notificationCollectorPlugin: Plugin<{}, NotificationCollectorStorage> = {
|
||||
const interval = getNextInterval();
|
||||
pollInterval = window.setTimeout(() => {
|
||||
checkNotifications().then(() => {
|
||||
if (pollInterval) { // Only continue if not stopped
|
||||
if (pollInterval) {
|
||||
// Only continue if not stopped
|
||||
scheduleNext();
|
||||
}
|
||||
});
|
||||
@@ -124,14 +129,16 @@ const notificationCollectorPlugin: Plugin<{}, NotificationCollectorStorage> = {
|
||||
isVisible = !document.hidden;
|
||||
if (isVisible && !pollInterval) {
|
||||
// Resume polling when tab becomes visible
|
||||
const alertDiv = document.querySelector("[class*='notifications__bubble___']");
|
||||
const alertDiv = document.querySelector(
|
||||
"[class*='notifications__bubble___']",
|
||||
);
|
||||
if (alertDiv) {
|
||||
startPolling();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('visibilitychange', handleVisibilityChange);
|
||||
document.addEventListener("visibilitychange", handleVisibilityChange);
|
||||
|
||||
api.seqta.onMount("[class*='notifications__bubble___']", (_) => {
|
||||
startPolling();
|
||||
@@ -139,7 +146,7 @@ const notificationCollectorPlugin: Plugin<{}, NotificationCollectorStorage> = {
|
||||
|
||||
return () => {
|
||||
stopPolling();
|
||||
document.removeEventListener('visibilitychange', handleVisibilityChange);
|
||||
document.removeEventListener("visibilitychange", handleVisibilityChange);
|
||||
};
|
||||
},
|
||||
};
|
||||
|
||||
@@ -23,12 +23,9 @@ 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 {
|
||||
updateTimetableTimes,
|
||||
} from "@/seqta/utils/updateTimetableTimes";
|
||||
import { updateTimetableTimes } from "@/seqta/utils/updateTimetableTimes";
|
||||
|
||||
// JSON content
|
||||
import MenuitemSVGKey from "@/seqta/content/MenuItemSVGKey.json";
|
||||
|
||||
@@ -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],
|
||||
});
|
||||
}
|
||||
|
||||
+19
-98
@@ -1,24 +1,5 @@
|
||||
import { settingsState } from "./listeners/SettingsState";
|
||||
import { animate, stagger } from "motion";
|
||||
import stringToHTML from "./stringToHTML";
|
||||
|
||||
export async function DeleteWhatsNew() {
|
||||
const bkelement = document.getElementById("whatsnewbk");
|
||||
const popup = document.querySelector(".whatsnewContainer") as HTMLElement;
|
||||
|
||||
if (!settingsState.animations) {
|
||||
bkelement?.remove();
|
||||
return;
|
||||
}
|
||||
|
||||
animate(
|
||||
[popup, bkelement!],
|
||||
{ opacity: [1, 0], scale: [1, 0] },
|
||||
{ ease: [0.22, 0.03, 0.26, 1] },
|
||||
).then(() => {
|
||||
bkelement?.remove();
|
||||
});
|
||||
}
|
||||
import stringToHTML from "../stringToHTML";
|
||||
import { openPopup } from "./PopupManager";
|
||||
|
||||
export function OpenMinecraftServerPopup() {
|
||||
if (!document.querySelector('link[href*="minecraftia"]')) {
|
||||
@@ -28,45 +9,36 @@ 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 */ `
|
||||
<div class="whatsnewTextContainer" style="height: 50%; overflow-y: scroll;">
|
||||
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>
|
||||
|
||||
@@ -92,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="
|
||||
@@ -107,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:
|
||||
@@ -144,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],
|
||||
});
|
||||
}
|
||||
@@ -1,48 +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";
|
||||
|
||||
export async function DeleteWhatsNew() {
|
||||
const bkelement = document.getElementById("whatsnewbk");
|
||||
const popup = document.getElementsByClassName("whatsnewContainer")[0];
|
||||
|
||||
if (!settingsState.animations) {
|
||||
bkelement?.remove();
|
||||
return;
|
||||
}
|
||||
|
||||
animate(
|
||||
[popup, bkelement!],
|
||||
{ opacity: [1, 0], scale: [1, 0] },
|
||||
{ ease: [0.22, 0.03, 0.26, 1] },
|
||||
).then(() => {
|
||||
bkelement?.remove();
|
||||
});
|
||||
}
|
||||
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",
|
||||
@@ -53,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: auto;">
|
||||
|
||||
<h1>3.4.11 - New Features & Bug Fixes</h1>
|
||||
<li>Added Background Music plugin</li>
|
||||
@@ -291,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:
|
||||
@@ -321,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],
|
||||
});
|
||||
}
|
||||
@@ -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());
|
||||
}
|
||||
Reference in New Issue
Block a user