when clicking on esc button it doesnt remove container padding fix

maliknajjar · Jul 28, 2024 · 9cfaf94 · 9cfaf94
1 parent 714d061
commit 9cfaf94
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "guifier",
-  "version": "1.0.26",
+  "version": "1.0.27",
   "type": "module",
   "license": "MIT",
   "description": "An interactive front-end toolkit simplifying JSON, YAML, TOML, and XML data. Visualize, edit, convert formats, and perform real-time data manipulations. Empower your data-driven apps with user-friendly data processing and interactive visualization.",

diff --git a/src/guifier/fields/containers/Container/Container.ts b/src/guifier/fields/containers/Container/Container.ts
@@ -293,8 +293,8 @@ export abstract class Container extends Field {
         fullScreenContainer.append(fullScreenButton)
         fullScreenContainer.append(fullScreenExitButton)
 
+        const mainContainer = document.querySelector(this.params.elementSelector) as HTMLElement
         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')
@@ -310,6 +310,14 @@ export abstract class Container extends Field {
             }
         })
 
+        document.addEventListener('fullscreenchange', () => {
+            if (document.fullscreenElement === null) {
+                fullScreenExitButton.setAttribute('style', 'display: none')
+                fullScreenButton.removeAttribute('style')
+                mainContainer.removeAttribute('style')
+            }
+        })
+
         return fullScreenContainer
     }
 }