mirror of
https://github.com/BetterSEQTA/BetterSEQTA-Plus.git
synced 2026-06-05 19:24:39 +00:00
SethBurkart123
100 lines
3.3 KiB
TypeScript
100 lines
3.3 KiB
TypeScript
import renderSvelte from "@/interface/main"
|
||
import themeCreator from "@/interface/pages/themeCreator.svelte"
|
||
import { unmount } from "svelte"
|
||
import { ThemeManager } from "@/plugins/built-in/themes/theme-manager"
|
||
|
||
let themeCreatorSvelteApp: any = null
|
||
const themeManager = ThemeManager.getInstance();
|
||
|
||
/**
|
||
* 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()
|
||
themeManager.clearPreview()
|
||
})
|
||
|
||
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%"
|
||
}
|