Update fullscreen-card.js

KTibow · May 18, 2023 · c8d2459 · c8d2459
1 parent 4459e07
commit c8d2459
Showing 1 changed file with 24 additions and 17 deletions.
diff --git a/fullscreen-card.js b/fullscreen-card.js
@@ -5,7 +5,13 @@ class FullscreenCard extends HTMLElement {
       this.content.style.padding = "1rem";
 
       this.tag = document.createElement("button");
-      this.tag.innerHTML = this.config["go_fullscreen"] || "Go fullscreen";
+      if (window["fullScreen"] || document.fullscreenElement) {
+        this.tag.innerHTML =
+          this.config["exit_fullscreen"] || "Exit fullscreen";
+      } else {
+        this.tag.innerHTML =
+          this.config["go_fullscreen"] || "Go fullscreen";
+      }
       this.tag.style.width = "100%";
       this.tag.style.fontSize = "var(--paper-font-display1_-_font-size)";
       this.tag.style.padding = "0.5rem";
@@ -15,18 +21,28 @@ class FullscreenCard extends HTMLElement {
       this.tag.style.textAlign = "center";
       this.tag.style.borderRadius = "var(--ha-card-border-radius, 4px)";
       this.tag.style.cursor = "pointer";
-      this.tag.onclick = function () {
+
+      const toggleFullscreen = async () => {
         if (window["fullScreen"] || document.fullscreenElement) {
-          document.exitFullscreen();
+          await document.exitFullscreen();
+          this.tag.innerHTML =
+            this.config["go_fullscreen"] || "Go fullscreen";
         } else {
-          document.documentElement.requestFullscreen();
+          await document.documentElement.requestFullscreen();
+          this.tag.innerHTML =
+            this.config["exit_fullscreen"] || "Exit fullscreen";
         }
-        this.updateTag();
-      }.bind(this);
-
+      };
+      this.tag.onclick = toggleFullscreen;
       this.content.appendChild(this.tag);
       this.appendChild(this.content);
-      document.addEventListener("fullscreenchange", this.updateTag.bind(this));
+
+      document.body.onkeydown = (event) => {
+        if (event.key == "F11") {
+          toggleFullscreen();
+          event.preventDefault();
+        }
+      }
     }
   }
   setConfig(config) {
@@ -35,15 +51,6 @@ class FullscreenCard extends HTMLElement {
   getCardSize() {
     return 2;
   }
-  updateTag() {
-    if (window["fullScreen"] || document.fullscreenElement) {
-      this.tag.innerHTML =
-        this.config["exit_fullscreen"] || "Exit fullscreen";
-    } else {
-      this.tag.innerHTML =
-        this.config["go_fullscreen"] || "Go fullscreen";
-    }
-  }
 }
 
 customElements.define("fullscreen-card", FullscreenCard);