docs: better handling for not supported

w3c · Aug 9, 2023 · cdac12c · cdac12c
1 parent bf143c1
commit cdac12c
Showing 1 changed file with 8 additions and 7 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -63,7 +63,7 @@
       font-size: medium;
     }
   </style>
-  <body onload="init()" class="not-supported">
+  <body onload="init()">
     <h1>Screen Orientation Lock API Demo</h1>
     <p>
       This demo shows how to use the
@@ -128,7 +128,7 @@ <h1>Screen Orientation Lock API Demo</h1>
       }
     }
 
-    function isSupported() {
+    function isLockingSupported() {
       if (!screen.orientation) {
         logError("screen.orientation not available.");
         return false;
@@ -146,8 +146,9 @@ <h1>Screen Orientation Lock API Demo</h1>
     }
 
     function init() {
-      if (isSupported()) {
-        document.body.classList.remove("not-supported");
+      const canLock = isLockingSupported();
+      if (!canLock) {
+        document.body.classList.add("not-supported");
         selector.disabled = false;
       }
 
@@ -160,12 +161,12 @@ <h1>Screen Orientation Lock API Demo</h1>
       if (!screen.orientation) {
         const orientationQuery = window.matchMedia("(orientation: landscape)");
         orientationQuery.addEventListener("change", handleOrientationChange);
+      } else {
+          screen.orientation?.addEventListener("change", handleOrientationChange);
       }
 
-      screen.orientation?.addEventListener("change", handleOrientationChange);
-
       document.addEventListener("fullscreenchange", handleFullscreen);
-      selector.addEventListener("input", lockOrientation);
+      if (canLock) selector.addEventListener("input", lockOrientation);
 
       clearButton.addEventListener("click", (ev) => {
         ev.preventDefault();