button to toggle fullscreen in Undo component #137

using HTML5 fullscreen API <https://fullscreen.spec.whatwg.org/>

src/components/UndoRedo.vue

@@ -20,11 +20,23 @@
         <font-awesome-icon icon="redo" />
       </span>
     </button>
+    <button
+      class="button is-small"
+      title="Vollbildmodus"
+      @click="fullScreen"
+      :v-if="canFullscreen"
+    >
+      <span class="icon">
+        <font-awesome-icon
+          :icon="isFullScreen ? 'compress-arrows-alt' : 'expand-arrows-alt'"
+        />
+      </span>
+    </button>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from "vue";
+import { defineComponent, computed, ref } from "vue";
 import { useStore } from "@/store";
 
 export default defineComponent({
@@ -39,11 +51,34 @@ export default defineComponent({
       return store.state.unredo && store.state.unredo.redoCount > 0;
     });
 
+    const isFullScreen = ref(false);
+
     return {
       canUndo,
       canRedo,
       undo: () => store.commit("unredo/undo"),
       redo: () => store.commit("unredo/redo"),
+      isFullScreen,
+      canFullscreen: () => document.fullscreenEnabled,
+      fullScreen: () => {
+        if (
+          window.innerWidth == screen.width &&
+          window.innerHeight == screen.height
+        ) {
+          console.log("from full");
+          document.exitFullscreen().then(() => {
+            isFullScreen.value = false;
+          });
+        } else {
+          console.log("to full");
+          const elem = document.documentElement;
+          if (elem.requestFullscreen) {
+            elem.requestFullscreen().then(() => {
+              isFullScreen.value = true;
+            });
+          }
+        }
+      },
     };
   },
 });

src/main.ts

@@ -35,6 +35,8 @@ import {
   // faRedoAlt,
   faUndo,
   faRedo,
+  faExpandArrowsAlt,
+  faCompressArrowsAlt,
   faChartBar,
   faUserSecret,
   faRss,
@@ -75,6 +77,8 @@ library.add(
   // faRedoAlt,
   faUndo,
   faRedo,
+  faExpandArrowsAlt,
+  faCompressArrowsAlt,
   faChartBar,
   faUserSecret,
   faRss,