Add fullscreen mode

Author: alies-dev

dist/js/field.js

@@ -1,3 +1,3 @@
 {
-    "/js/field.js": "/js/field.js?id=15620b3e531fb4496884"
+    "/js/field.js": "/js/field.js?id=e534e43a5e9b3e765e3b"
 }

dist/mix-manifest.json

@@ -1,6 +1,13 @@
 <template>
-    <default-field :field="field" :errors="errors">
+    <default-field :field="field" :errors="errors" :full-width-content="true">
         <template slot="field">
+            <button
+                    id="fullscreenToggleButton"
+                    class="text-xs bg-90 hover:bg-black text-white font-semibold rounded-sm px-4 py-1 m-1 border"
+                    @click="toggleFullscreen"
+                    type="button">
+                ▶ Enter fullscreen
+            </button>
             <div :id=containerId :style="{height: field.height || '800px'}"></div>
             <p v-if="hasError" class="my-2 text-danger">
                 {{ firstError }}
@@ -28,6 +35,19 @@
         },
 
         methods: {
+            toggleFullscreen() {
+                document.body.classList.toggle('overflow-hidden');
+                const container = document.getElementById(`${this.containerId}`);
+                container.classList.toggle('z-50');
+                container.classList.toggle('fullscreen');
+
+                const toggleButton = document.querySelector(`#fullscreenToggleButton`);
+                toggleButton.classList.toggle('stickyControl');
+                container.classList.contains('fullscreen')
+                    ? toggleButton.innerText = '✖︎ Exit fullscreen'
+                    : toggleButton.innerText = '▶ Enter fullscreen';
+            },
+
             /*
              * Set the initial, internal value for the field.
              */
@@ -101,3 +121,20 @@
         },
     }
 </script>
+
+<style scoped>
+    .fullscreen {
+        position: fixed;
+        left: 1vw;
+        top: 1vh;
+        width: 98vw !important;
+        height: 98vh !important;
+    }
+
+    .stickyControl {
+        position: fixed;
+        left: 1vw;
+        top: 1vh;
+        z-index: 51;
+    }
+</style>