refactoring

multiversx · Aug 1, 2024 · 8306592 · 8306592
1 parent cc78ff1
commit 8306592
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 26 deletions.
diff --git a/src/IFrameManager/IFrameProviderContentWindow.ts b/src/IFrameManager/IFrameProviderContentWindow.ts
@@ -4,7 +4,8 @@ import {
   closeWalletButtonStyle,
   collapsibleButtonStyle,
   containerStyle,
-  headerStyle
+  headerStyle,
+  iframeStyle
 } from './iframeManager.styles';
 
 export class IFrameProviderContentWindow {
@@ -16,6 +17,8 @@ export class IFrameProviderContentWindow {
   private readonly header: HTMLDivElement;
   private readonly body: HTMLDivElement;
 
+  private readonly onClose: (() => void) | undefined = undefined;
+
   public constructor(props: {
     id: string;
     url: string;
@@ -24,17 +27,48 @@ export class IFrameProviderContentWindow {
   }) {
     const { id, url, anchor, onClose } = props;
 
+    this.onClose = onClose;
+
     this.container = document.createElement('div');
     this.header = document.createElement('div');
     this.body = document.createElement('div');
+    this.iframe = document.createElement('iframe');
+
+    this.buildWindow(id, url);
+    this.contentWindow = this.iframe.contentWindow;
+
+    this.setupWindow();
 
+    if (anchor) {
+      anchor.appendChild(this.container);
+    } else {
+      document.body.appendChild(this.container);
+    }
+  }
+
+  private buildWindow(id: string, url: string) {
     this.container.setAttribute('data-draggable', 'true');
     this.container.setAttribute('data-resizable', 'true');
     this.header.setAttribute('data-drag-handle', 'true');
     this.container.style.cssText = containerStyle;
     this.header.style.cssText = headerStyle;
     this.body.style.cssText = bodyStyle;
 
+    const { collapsibleButton, closeWalletButton } = this.getHeaderButtons();
+
+    this.header.appendChild(closeWalletButton);
+    this.header.appendChild(collapsibleButton);
+    this.container.appendChild(this.header);
+    this.container.appendChild(this.body);
+
+    this.iframe.id = id;
+    this.iframe.src = url;
+    this.iframe.style.cssText = iframeStyle;
+
+    this.body.appendChild(this.iframe);
+  }
+
+  private getHeaderButtons() {
     const title = document.createElement('span');
     title.innerText = 'Wallet';
     this.header.appendChild(title);
@@ -62,32 +96,9 @@ export class IFrameProviderContentWindow {
     closeWalletButton.style.cssText = closeWalletButtonStyle;
     closeWalletButton.onclick = () => {
       this.container.remove();
-      onClose?.();
+      this.onClose?.();
     };
-
-    this.header.appendChild(closeWalletButton);
-    this.header.appendChild(collapsibleButton);
-    this.container.appendChild(this.header);
-    this.container.appendChild(this.body);
-
-    this.iframe = document.createElement('iframe');
-    this.iframe.id = id;
-    this.iframe.src = url;
-    this.iframe.style.width = '100%';
-    this.iframe.style.height = '100%';
-    this.iframe.style.border = 'none';
-    this.iframe.style.borderRadius = '0 0 5px 5px';
-
-    this.body.appendChild(this.iframe);
-    this.contentWindow = this.iframe.contentWindow;
-
-    this.setupWindow();
-
-    if (anchor) {
-      anchor.appendChild(this.container);
-    } else {
-      document.body.appendChild(this.container);
-    }
+    return { collapsibleButton, closeWalletButton };
   }
 
   private setupWindow() {

diff --git a/src/IFrameManager/iframeManager.styles.ts b/src/IFrameManager/iframeManager.styles.ts
@@ -1,3 +1,5 @@
+import exp from 'node:constants';
+
 export const containerStyle = `
     width: 400px;
     height: 600px;
@@ -24,6 +26,13 @@ export const bodyStyle = `
     overflow: hidden;
   `;
 
+export const iframeStyle = `
+    width: 100%;
+    height: 100%;
+    border: none;
+    border-radius: 0 0 5px 5px;
+  `;
+
 export const collapsibleButtonStyle = `
     width: 30px;
     height: 30px;