BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-06-06 03:34:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: debounce creator + general improvements

Browse Source
This commit is contained in:
SethBurkart123
2025-03-28 00:14:29 +11:00
parent 5413286f56
commit ad2ad4d456
5 changed files with 22 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/seqta/ui/ThemeCreator.ts
-98
View File
@@ -1,98 +0,0 @@
import renderSvelte from "@/interface/main"
import themeCreator from "@/interface/pages/themeCreator.svelte"
import { unmount } from "svelte"
import { ClearThemePreview } from "./themes/UpdateThemePreview"
let themeCreatorSvelteApp: any = null
/**
* Open the Theme Creator sidebar, it is an embedded page loaded similar to the extension popup
* @param themeID - The ID of the theme to load in the Theme Creator
* @returns void
*/
export function OpenThemeCreator(themeID: string = "") {
CloseThemeCreator()
const width = "310px"
const themeCreatorDiv: HTMLDivElement = document.createElement("div")
themeCreatorDiv.id = "themeCreator"
themeCreatorDiv.style.width = width
const shadow = themeCreatorDiv.attachShadow({ mode: "open" })
themeCreatorSvelteApp = renderSvelte(themeCreator, shadow, {
themeID: themeID,
})
const mainContent = document.querySelector("#container") as HTMLDivElement
if (mainContent) mainContent.style.width = `calc(100% - ${width})`
// close button
const closeButton = document.createElement("button")
closeButton.classList.add("themeCloseButton")
closeButton.textContent = "×"
closeButton.addEventListener("click", () => {
CloseThemeCreator()
ClearThemePreview()
})
document.body.appendChild(closeButton)
const resizeBar = document.createElement("div")
resizeBar.classList.add("resizeBar")
resizeBar.style.right = "307.5px"
let isDragging = false
const mouseDownHandler = (_: MouseEvent) => {
isDragging = true
document.addEventListener("mousemove", mouseMoveHandler)
document.addEventListener("mouseup", mouseUpHandler)
document.body.style.userSelect = "none"
themeCreatorDiv.style.pointerEvents = "none"
}
const mouseMoveHandler = (e: MouseEvent) => {
if (!isDragging) return
const windowWidth = window.innerWidth
const newWidth = Math.max(310, windowWidth - e.clientX)
themeCreatorDiv.style.width = `${newWidth}px`
mainContent.style.width = `calc(100% - ${newWidth}px)`
resizeBar.style.right = `${newWidth - 2.5}px`
}
const mouseUpHandler = () => {
isDragging = false
document.removeEventListener("mousemove", mouseMoveHandler)
document.removeEventListener("mouseup", mouseUpHandler)
document.body.style.userSelect = ""
themeCreatorDiv.style.pointerEvents = "auto"
}
resizeBar.addEventListener("mousedown", mouseDownHandler)
resizeBar.addEventListener("mouseover", () => (resizeBar.style.opacity = "1"))
resizeBar.addEventListener("mouseout", () => (resizeBar.style.opacity = "0"))
document.body.appendChild(themeCreatorDiv)
document.body.appendChild(resizeBar)
}
/**
* Close the Theme Creator sidebar
* @returns void
*/
export function CloseThemeCreator() {
const themeCreator = document.getElementById("themeCreator")
const closeButton = document.querySelector(
".themeCloseButton",
) as HTMLButtonElement
const resizeBar = document.querySelector(".resizeBar") as HTMLDivElement
if (themeCreatorSvelteApp) unmount(themeCreatorSvelteApp)
if (themeCreator) themeCreator.remove()
if (closeButton) closeButton.remove()
if (resizeBar) resizeBar.remove()
const mainContent = document.querySelector("#container") as HTMLDivElement
if (mainContent) mainContent.style.width = "100%"
}