mirror of
https://github.com/BetterSEQTA/BetterSEQTA-Plus.git
synced 2026-06-06 11:44:40 +00:00
SethBurkart123
88 lines
3.3 KiB
TypeScript
88 lines
3.3 KiB
TypeScript
import browser from "webextension-polyfill";
|
||
|
||
/**
|
||
* 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 themeCreatorIframe: HTMLIFrameElement = document.createElement('iframe');
|
||
themeCreatorIframe.src = `${browser.runtime.getURL('src/interface/index.html')}${ themeID != '' ? `?themeID=${themeID}` : '' }#themeCreator`;
|
||
themeCreatorIframe.id = 'themeCreatorIframe';
|
||
themeCreatorIframe.setAttribute('allowTransparency', 'true');
|
||
themeCreatorIframe.setAttribute('excludeDarkCheck', 'true');
|
||
themeCreatorIframe.style.border = 'none';
|
||
themeCreatorIframe.style.width = width;
|
||
|
||
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);
|
||
document.body.appendChild(closeButton);
|
||
|
||
const resizeBar = document.createElement('div');
|
||
resizeBar.classList.add('resizeBar');
|
||
resizeBar.style.right = '307.5px';
|
||
|
||
let isDragging = false;
|
||
let currentX: number;
|
||
|
||
const mouseDownHandler = (e: MouseEvent) => {
|
||
isDragging = true;
|
||
currentX = e.clientX;
|
||
document.addEventListener('mousemove', mouseMoveHandler);
|
||
document.addEventListener('mouseup', mouseUpHandler);
|
||
document.body.style.userSelect = 'none';
|
||
themeCreatorIframe.style.pointerEvents = 'none'; // Disable pointer events on iframe during resize
|
||
};
|
||
|
||
const mouseMoveHandler = (e: MouseEvent) => {
|
||
if (!isDragging) return;
|
||
const dx = e.clientX - currentX;
|
||
currentX = e.clientX;
|
||
const newWidth = Math.min(Math.max(310, themeCreatorIframe.offsetWidth - dx), 600);
|
||
themeCreatorIframe.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 = '';
|
||
themeCreatorIframe.style.pointerEvents = 'auto';
|
||
};
|
||
|
||
resizeBar.addEventListener('mousedown', mouseDownHandler);
|
||
resizeBar.addEventListener('mouseover', () => resizeBar.style.opacity = '1');
|
||
resizeBar.addEventListener('mouseout', () => resizeBar.style.opacity = '0');
|
||
|
||
document.body.appendChild(themeCreatorIframe);
|
||
document.body.appendChild(resizeBar);
|
||
}
|
||
|
||
/**
|
||
* Close the Theme Creator sidebar
|
||
* @returns void
|
||
*/
|
||
export function CloseThemeCreator() {
|
||
const themeCreatorIframe = document.getElementById('themeCreatorIframe');
|
||
const closeButton = document.querySelector('.themeCloseButton') as HTMLButtonElement;
|
||
const resizeBar = document.querySelector('.resizeBar') as HTMLDivElement;
|
||
|
||
if (themeCreatorIframe) themeCreatorIframe.remove();
|
||
if (closeButton) closeButton.remove();
|
||
if (resizeBar) resizeBar.remove();
|
||
|
||
const mainContent = document.querySelector('#container') as HTMLDivElement;
|
||
if (mainContent) mainContent.style.width = '100%';
|
||
} |