Update fullscreen button component to use Vue 3 composition API

zeropingheroes · Sep 8, 2024 · 75a80a6 · 75a80a6
1 parent 9e13760
commit 75a80a6
Showing 1 changed file with 56 additions and 59 deletions.
diff --git a/resources/js/components/fullscreen-button.vue b/resources/js/components/fullscreen-button.vue
@@ -1,70 +1,67 @@
 <template>
     <transition name="fade">
-        <div id="fullscreen-button" class="btn" v-show="visible">
-            <span class="fa fa-solid fa-expand" title="Enter full screen" aria-hidden="true"></span>
+        <div id="fullscreen-button" class="btn" v-show="visible" @click="toggleFullscreen">
+            <span class="fa fa-solid fa-expand" :title="Fullscreen" aria-hidden="true"></span>
         </div>
     </transition>
 </template>
 
-<script>
-    export default {
-        data() {
-            return {
-                visible: false,
-            };
-        },
-        mounted: function () {
-            this.$el.addEventListener('click', this.toggleFullscreen)
-            window.addEventListener('mousemove', this.showFullscreenButton)
-        },
-        beforeDestroy: function () {
-            this.$el.removeEventListener('click', this.toggleFullscreen)
-            window.removeEventListener('mousemove', this.showFullscreenButton)
-        },
-        methods: {
-            toggleFullscreen: function () {
-                if (
-                    document.fullscreenElement ||
-                    document.webkitFullscreenElement ||
-                    document.msFullscreenElement
-                ) {
-                    this.exitFullscreen();
-                } else {
-                    this.enterFullscreen();
-                }
-            },
-            enterFullscreen: function () {
-                var d = document.documentElement;
-                if (d.requestFullscreen) {
-                    d.requestFullscreen();
-                } else if (d.mozRequestFullScreen) { /* Firefox */
-                    d.mozRequestFullScreen();
-                } else if (d.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
-                    d.webkitRequestFullscreen();
-                } else if (d.msRequestFullscreen) { /* IE/Edge */
-                    d.msRequestFullscreen();
-                }
-            },
-            exitFullscreen: function () {
-                if (document.exitFullscreen) {
-                    document.exitFullscreen();
-                } else if (document.webkitExitFullscreen) { /* Safari */
-                    document.webkitExitFullscreen();
-                } else if (document.msExitFullscreen) { /* IE11 */
-                    document.msExitFullscreen();
-                }
-            },
-            showFullscreenButton: function () {
-                if (this.visible != true) {
-                    this.visible = true;
-                    setTimeout(() => {
-                        this.visible = false;
-                    }, 2000);
-                }
+<script setup>
+import {ref, onMounted, onBeforeUnmount} from 'vue';
 
-            }
-        }
+const visible = ref(false);
+
+const toggleFullscreen = () => {
+    if (
+        document.fullscreenElement ||
+        document.webkitFullscreenElement ||
+        document.msFullscreenElement
+    ) {
+        exitFullscreen();
+    } else {
+        enterFullscreen();
+    }
+};
+
+const enterFullscreen = () => {
+    const d = document.documentElement;
+    if (d.requestFullscreen) {
+        d.requestFullscreen();
+    } else if (d.mozRequestFullScreen) {
+        d.mozRequestFullScreen();
+    } else if (d.webkitRequestFullscreen) {
+        d.webkitRequestFullscreen();
+    } else if (d.msRequestFullscreen) {
+        d.msRequestFullscreen();
+    }
+};
+
+const exitFullscreen = () => {
+    if (document.exitFullscreen) {
+        document.exitFullscreen();
+    } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+    } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
     }
+};
+
+const showFullscreenButton = () => {
+    if (!visible.value) {
+        visible.value = true;
+        setTimeout(() => {
+            visible.value = false;
+        }, 2000);
+    }
+};
+
+onMounted(() => {
+    window.addEventListener('mousemove', showFullscreenButton);
+});
+
+onBeforeUnmount(() => {
+    window.removeEventListener('mousemove', showFullscreenButton);
+});
 </script>
 
 <style>