add theme resize bar

2026-06-06 11:44:40 +00:00 · 2024-03-31 16:53:45 +11:00
parent 82dbdf321e
commit 869058ff73
3 changed files with 96 additions and 18 deletions
@@ -5,18 +5,72 @@ import browser from "webextension-polyfill";
 * @returns void
 */
 export function OpenThemeCreator() {
-    const width = '300px'
+  const width = '310px';

-    const themeCreatorIframe: HTMLIFrameElement = document.createElement('iframe')
-    themeCreatorIframe.src = `${browser.runtime.getURL('src/interface/index.html')}#themeCreator`
-    themeCreatorIframe.id = 'themeCreatorIframe'
-    themeCreatorIframe.setAttribute('allowTransparency', 'true')
-    themeCreatorIframe.setAttribute('excludeDarkCheck', 'true')
-    themeCreatorIframe.style.width = width
-    themeCreatorIframe.style.border = 'none'
-    
-    const mainContent = document.querySelector('#container') as HTMLDivElement
-    if (mainContent) mainContent.style.width = `calc(100% - ${width})`
+  const themeCreatorIframe: HTMLIFrameElement = document.createElement('iframe');
+  themeCreatorIframe.src = `${browser.runtime.getURL('src/interface/index.html')}#themeCreator`;
+  themeCreatorIframe.id = 'themeCreatorIframe';
+  themeCreatorIframe.setAttribute('allowTransparency', 'true');
+  themeCreatorIframe.setAttribute('excludeDarkCheck', 'true');
+  themeCreatorIframe.style.border = 'none';
+  themeCreatorIframe.style.width = width;

-    document.body.appendChild(themeCreatorIframe)
+  const mainContent = document.querySelector('#container') as HTMLDivElement;
+  if (mainContent) mainContent.style.width = `calc(100% - ${width})`;
+
+  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');
+  if (themeCreatorIframe) themeCreatorIframe.remove();
+
+  const mainContent = document.querySelector('#container') as HTMLDivElement;
+  if (mainContent) mainContent.style.width = '100%';
+
+  const resizeBar = document.querySelector('.resizeBar') as HTMLDivElement;
+  if (resizeBar) resizeBar.remove();
 }