From a0da8816f2d192ffdee5ca967b02dc85e0de41dc Mon Sep 17 00:00:00 2001
From: malik najjar <malik446644@gmail.com>
Date: Fri, 26 Jul 2024 17:14:52 +0200
Subject: [PATCH] adding the fullscreen feature

---
 .../fields/containers/Container/Container.ts  | 42 ++++++++++++++++++-
 src/guifier/types.ts                          |  3 +-
 src/main.ts                                   |  1 +
 3 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/src/guifier/fields/containers/Container/Container.ts b/src/guifier/fields/containers/Container/Container.ts
index 9a5c6ef..06d34ce 100644
--- a/src/guifier/fields/containers/Container/Container.ts
+++ b/src/guifier/fields/containers/Container/Container.ts
@@ -183,7 +183,12 @@ export abstract class Container extends Field {
         guifierContainerHeaderButtons.classList.add('guifierContainerHeaderButtons')
 
         if (!this.params.readOnlyMode) {
-            if (!this.containerInFirstLevel()) guifierContainerHeaderButtons.append(this.drawDeleteButton())
+            if (this.containerInFirstLevel() && this.params.fullScrean) {
+                guifierContainerHeaderButtons.append(this.drawFullScreenButton())
+            }
+            if (!this.containerInFirstLevel()) {
+                guifierContainerHeaderButtons.append(this.drawDeleteButton())
+            }
             guifierContainerHeaderButtons.append(this.drawAddButton())
         }
         if (!this.containerInFirstLevel()) guifierContainerHeaderButtons.append(this.drawCollapseButton(collapseButtonDown))
@@ -272,4 +277,39 @@ export abstract class Container extends Field {
 
         return iconElement
     }
+
+    /**
+     * This function is responsible for drawing the fullScreen button for the container field
+     *
+     * @returns {HTMLElement} html element object
+     */
+    protected drawFullScreenButton (): HTMLElement {
+        const fullScreenButton = drawOutlineIcon('fullscreen')
+        const fullScreenExitButton = drawOutlineIcon('fullscreen_exit')
+        fullScreenExitButton.setAttribute('style', 'display: none')
+
+        const fullScreenContainer = document.createElement('span')
+        fullScreenContainer.style.height = '25px'
+        fullScreenContainer.append(fullScreenButton)
+        fullScreenContainer.append(fullScreenExitButton)
+
+        fullScreenContainer.addEventListener('click', () => {
+            const mainContainer = document.querySelector(this.params.elementSelector) as HTMLElement
+            if (fullScreenButton.getAttribute('style') !== null) {
+                // when its not full screen
+                fullScreenExitButton.setAttribute('style', 'display: none')
+                fullScreenButton.removeAttribute('style')
+                void document.exitFullscreen()
+                mainContainer.removeAttribute('style')
+            } else {
+                // when its fullscreen
+                fullScreenButton.setAttribute('style', 'display: none')
+                fullScreenExitButton.removeAttribute('style')
+                void mainContainer?.requestFullscreen()
+                mainContainer.setAttribute('style', 'padding: 2vw')
+            }
+        })
+
+        return fullScreenContainer
+    }
 }
diff --git a/src/guifier/types.ts b/src/guifier/types.ts
index 5f9f947..49504e0 100644
--- a/src/guifier/types.ts
+++ b/src/guifier/types.ts
@@ -19,7 +19,8 @@ export const ParameterSchema = z.object({
     expandFieldsToFullWidth: z.boolean().default(false),
     readOnlyMode: z.boolean().default(false),
     onChange: z.function().optional(),
-    xmlRootName: z.any()
+    xmlRootName: z.any(),
+    fullScrean: z.boolean().default(false)
 })
 /**
  * Represents the object that gets passed to the instantiated Guifier object
diff --git a/src/main.ts b/src/main.ts
index a5cacb0..42de137 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -11,6 +11,7 @@ async function init (): Promise<void> {
         data: exampleData,
         dataType: DataType.Json,
         rootContainerName: 'Example Object',
+        fullScrean: true,
         onChange: () => {
             console.log('guifier has changed')
             console.log(guifier.getData(DataType.Json))