diff --git a/src/interface/pages/settings.svelte b/src/interface/pages/settings.svelte index 5be5f0d2..7166fc59 100644 --- a/src/interface/pages/settings.svelte +++ b/src/interface/pages/settings.svelte @@ -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"; diff --git a/src/plugins/monofile.ts b/src/plugins/monofile.ts index 4a692dad..5b2361d4 100644 --- a/src/plugins/monofile.ts +++ b/src/plugins/monofile.ts @@ -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, diff --git a/src/seqta/utils/Openers/OpenAboutPage.ts b/src/seqta/utils/Openers/OpenAboutPage.ts index f06b6785..450daf44 100644 --- a/src/seqta/utils/Openers/OpenAboutPage.ts +++ b/src/seqta/utils/Openers/OpenAboutPage.ts @@ -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 */ `

About

About the extension

`, - ).firstChild; + ).firstChild as HTMLElement; - let text = stringToHTML(/* html */ ` + const text = stringToHTML(/* html */ `

BetterSEQTA+ is a fork of BetterSEQTA (originally developed by Nulkem), which was discontinued. BetterSEQTA+ continued development of BetterSEQTA, while incorporating a plethora of features.

@@ -37,9 +29,9 @@ export function OpenAboutPage() { style="width: 100%; max-width: 500px; height: auto; object-fit: contain; display: block; margin: -110px auto 0;">
- `).firstChild; + `).firstChild as HTMLElement; - let footer = stringToHTML(/* html */ ` + const footer = stringToHTML(/* html */ `
Resources and Feedback: @@ -67,56 +59,10 @@ export function OpenAboutPage() {
- `).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], }); } diff --git a/src/seqta/utils/AboutMinecraftServer.ts b/src/seqta/utils/Openers/OpenMinecraftServerPopup.ts similarity index 83% rename from src/seqta/utils/AboutMinecraftServer.ts rename to src/seqta/utils/Openers/OpenMinecraftServerPopup.ts index 4be9e3c7..bf207a46 100644 --- a/src/seqta/utils/AboutMinecraftServer.ts +++ b/src/seqta/utils/Openers/OpenMinecraftServerPopup.ts @@ -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 */ `

Minecraft Server

The official BetterSEQTA+ Minecraft Server

`, - ).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 */ `

Join our community in Minecraft!

Join the official BetterSEQTA+ Minecraft Server community now!

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

+ 1px 1px 0 #000;"> Version: 1.21.4

-`).firstChild; +`).firstChild as HTMLElement; - let footer = stringToHTML(/* html */ ` + const footer = stringToHTML(/* html */ `
Resources and Feedback: @@ -127,59 +114,10 @@ export function OpenMinecraftServerPopup() {
- `).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], }); } diff --git a/src/seqta/utils/Whatsnew.ts b/src/seqta/utils/Openers/OpenWhatsNewPopup.ts similarity index 85% rename from src/seqta/utils/Whatsnew.ts rename to src/seqta/utils/Openers/OpenWhatsNewPopup.ts index 4fc1adc3..5a468b9f 100644 --- a/src/seqta/utils/Whatsnew.ts +++ b/src/seqta/utils/Openers/OpenWhatsNewPopup.ts @@ -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 */ `

What's New

BetterSEQTA+ V${browser.runtime.getManifest().version}

`, - ).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 */ ` -
+ const text = stringToHTML(/* html */ ` +

3.4.11 - New Features & Bug Fixes

  • Added Background Music plugin
    • @@ -147,7 +98,7 @@ export function OpenWhatsNewPopup() {
  • Fixed discord icon colour in light mode
  • Fixed subject averages not showing up with letter grades
  • Tweaked compose UI
    • - +

    3.4.4 - Bug Fixes and Improvements

  • Added vertical zoom to the timetable
  • Fixed theme importing failing when images were included
    • @@ -161,15 +112,15 @@ export function OpenWhatsNewPopup() {
  • Fixed theme application in the creator
  • Performance improvements
  • Other minor bug fixes
    • - +

    3.4.3 - Minor Bug Fixes

  • Fixed a bug where timetable colours couldn't be changed
  • Other minor bug fixes
    • - +

    3.4.2 - Minor Bug Fixes

  • Fixed a bug where Assessment Average wasn't enabled by default
  • Fixed floating menus would sometimes be placed behind other elements
    • - +

    3.4.1 - Bug Fixes and Performance Improvements

  • Added a new "Subject Average" section to the assessments page
  • Fixed a bug where animations wouldn't play correctly
    • @@ -178,7 +129,7 @@ export function OpenWhatsNewPopup() {
  • Improved animation performance
  • Better Animations!
  • Minor style tweaks
    • - +

    3.4.0 - Major Performance Update

  • Completely rebuilt the extension popup using Svelte for dramatically improved performance
  • Added a brand new background store with search functionality and downloadable backgrounds
    • @@ -187,10 +138,10 @@ export function OpenWhatsNewPopup() {
  • Smoother animations and improved scrolling
  • Fixed Firefox compatibility issues
  • Other minor bug fixes and under the hood improvements
    • - +

    3.3.1 - Hot Fix

  • Fixed assessments not loading when no notices are available
    • - +

    3.3.0 - Overhauled Theming System

  • Added a theme store!
  • Added the new theme creator!
    • @@ -204,12 +155,12 @@ export function OpenWhatsNewPopup() {
  • Made animations toggle apply to settings
  • Small styling improvements
  • Other minor bug fixes
    • - - + +

    3.2.7 - Minor Improvements

  • Improved performance!
  • Fixed a bug where the icon wasn't showing up
    • - +

    3.2.6 - Bug fixes and performance improvements

  • Improved contrast for notifications
  • Added 12-hour time format toggle
    • @@ -223,7 +174,7 @@ export function OpenWhatsNewPopup() {
  • Enabled spellcheck inside of direct messages
  • Fixed timetable dates being misaligned
  • Other minor bug fixes and under the hood improvements
    • - +

    3.2.5 - More Bug Fixes

  • New direct message scroll animations
  • Added error message for brave browser shields breaking backgrounds
    • @@ -232,7 +183,7 @@ export function OpenWhatsNewPopup() {
  • Made settings panel auto size to height of screen
  • Fixed timetable dates not visible
  • Other minor bug fixes
    • - +

    3.2.4 - Bug Fixes

  • Added an open changelog button to settings
  • Fixed a memory overflow bug with Education Perfect
    • @@ -240,74 +191,74 @@ export function OpenWhatsNewPopup() {
  • Fixed news feed not loading
  • Fixed home items duplicating
  • Fixed Upcoming assessments not showing
    • - +

    3.2.2 - Minor Improvements

  • Added Settings open-close animation
  • Minor Bug Fixes
    • - +

    3.2.0 - Custom Themes

  • Added transparency (blur) effects
  • Added custom themes
  • Added colour picker history
  • Heaps of bug fixes
    • - +

    3.1.3 - Custom Backgrounds

  • Added custom backgrounds with support for images and videos
  • Overhauled topbar
  • New animated hamburger icon
  • Minor bug fixes
    • - +

    3.1.2 - New settings menu!

  • Overhauled the settings menu
  • Added custom gradients
  • Added HEAPS of animations
  • Fixed a bug where shortcuts don't show up
  • Other minor bugs fixed
    • - +

    3.1.1 - Minor Bug fixes

  • Fixed assessments overlapping
  • Fixed houses not displaying if they aren't a specific color
  • Fixed Chrome Webstore Link
    • - +

    3.1.0 - Design Improvements

  • Minor UI improvements
  • Added Animation Speed Slider
  • Animation now enables and disables without reloading SEQTA
  • Changed logo
    • - +

    3.0.0 - BetterSEQTA+ *Complete Overhaul*

  • Redesigned appearance
  • Upgraded to manifest V3 (longer support)
  • Fixed transitional glitches
  • Under the hood improvements
  • Fixed News Feed
    • - +

    2.0.7 - Added support to other domains + Minor bug fixes

  • Fixed BetterSEQTA+ not loading on some pages
  • Fixed text colour of notices being unreadable
  • Fixed pages not reloading when saving changes
    • - +

    2.0.2 - Minor bug fixes

  • Fixed indicator for current lesson
  • Fixed text colour for DM messages list in Light mode
  • Fixed user info text colour
    • - +

    Sleek New Layout

  • Updated with a new font and presentation, BetterSEQTA+ has never looked better.
    • - +

    New Updated Sidebar

  • Condensed appearance with new updated icons.
    • - +

    Independent Light Mode and Dark Mode

  • Dark mode and Light mode are now available to pick alongside your chosen Theme Colour. Your Theme Colour will now become an accent colour for the page. Light/Dark mode can be toggled with the new button, found in the top-right of the menu bar.
    • - +

    Create Custom Shortcuts

  • Found in the BetterSEQTA+ Settings menu, custom shortcuts can now be created with a name and URL of your choice.
    • - `).firstChild; + `).firstChild as HTMLElement; - let footer = stringToHTML(/* html */ ` + const footer = stringToHTML(/* html */ `
    Resources and Feedback: @@ -335,63 +286,15 @@ export function OpenWhatsNewPopup() {
    - + Buy Me a Coffee at ko-fi.com
    - `).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], }); } diff --git a/src/seqta/utils/Openers/PopupManager.ts b/src/seqta/utils/Openers/PopupManager.ts new file mode 100644 index 00000000..57125289 --- /dev/null +++ b/src/seqta/utils/Openers/PopupManager.ts @@ -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()); +}