adding the fullscreen feature

maliknajjar · Jul 26, 2024 · a0da881 · a0da881
1 parent ad69c3d
commit a0da881
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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))