Use class for scenes and fix resizing keys

webdata/fn.js

@@ -330,16 +330,17 @@ function challengeResponse(message) {
 }
 
 window.addEventListener("load", function() {
-    var DEFAULT_KEYS_PAGE = {
+    var DEFAULT_KEYS_SCENE = {
         "": 0,
         "keyboard": 1
     };
     var authenticated = false;
+    var scenes = document.querySelectorAll("body > .scene");
     var opening = document.getElementById("opening");
     var closed = document.getElementById("closed");
     var pad = document.getElementById("pad");
     var keys = document.getElementById("keys");
-    var keysPages = keys.querySelectorAll(".page");
+    var keysScenes = keys.querySelectorAll(".scene");
     var keyboard = document.getElementById("keyboard");
     var fullscreenbutton = document.getElementById("fullscreenbutton");
     var keyboardtext = document.getElementById("keyboardtext");
@@ -352,29 +353,29 @@ window.addEventListener("load", function() {
             exitFullscreen();
         }
         keyboardtext.value = "";
-        [opening, closed, pad, keys, keyboard].forEach(function(element) {
+        scenes.forEach(function(otherScene) {
-            element.classList.toggle("hidden", element != scene);
+            otherScene.classList.toggle("hidden", otherScene != scene);
         });
     }
 
-    function updateKeysPage(pageIndex) {
+    function showKeysScene(index) {
-        if (!Number.isInteger(pageIndex) || pageIndex < 0 || keysPages.length <= pageIndex) {
+        if (!Number.isInteger(index) || index < 0 || keysScenes.length <= index) {
-            pageIndex = 0;
+            index = 0;
         }
-        sessionStorage.setItem(keysActiveName, pageIndex);
+        sessionStorage.setItem(keysActiveName, index);
-        for (var i = 0; i < keysPages.length; i += 1) {
+        for (var i = 0; i < keysScenes.length; i += 1) {
-            keysPages[i].classList.toggle("hidden", i != pageIndex);
+            keysScenes[i].classList.toggle("hidden", i != index);
         }
     }
 
     function showKeys(name) {
         showScene(keys);
         keysActiveName = "keys" + (name ? ":" + name : "");
-        var pageIndex = parseInt(sessionStorage.getItem(keysActiveName));
+        var keysIndex = parseInt(sessionStorage.getItem(keysActiveName));
-        if (isNaN(pageIndex)) {
+        if (isNaN(keysIndex)) {
-            pageIndex = DEFAULT_KEYS_PAGE[name || ""] || 0;
+            keysIndex = DEFAULT_KEYS_SCENE[name || ""] || 0;
         }
-        updateKeysPage(pageIndex);
+        showKeysScene(keysIndex);
         if (history.state != keysActiveName) {
             history.pushState(keysActiveName, "");
         }
@@ -431,13 +432,13 @@ window.addEventListener("load", function() {
         }
     });
     document.getElementById("switchbutton").addEventListener("click", function() {
-        var pageIndex = 0;
+        var keysIndex = 0;
-        for (var i = 0; i < keysPages.length; i += 1) {
+        for (var i = 0; i < keysScenes.length; i += 1) {
-            if (!keysPages[i].classList.contains("hidden")) {
+            if (!keysScenes[i].classList.contains("hidden")) {
-                pageIndex = i;
+                keysIndex = i;
             }
         }
-        updateKeysPage(pageIndex + 1);
+        showKeysScene(keysIndex + 1);
     });
     [
         {id: "browserbackbutton", key: KEY_BROWSER_BACK},

webdata/index.html

@@ -9,29 +9,29 @@
 <link href="main.css" media="screen" rel="stylesheet">
 <link href="icon.png" type="image/png" rel="icon">
 
-<div id="opening">
+<div id="opening" class="scene">
     <noscript><p>JavaScript is required!</p></noscript>
     <p>Connecting…</p>
 </div>
-<div id="closed" class="hidden">
+<div id="closed" class="scene hidden">
     <p>Disconnected</p>
     <button id="reloadbutton">↻</button>
 </div>
-<div id="pad" class="touchpad key fullscreen hidden">
+<div id="pad" class="scene touchpad key fullscreen hidden">
     <p id="padlabel" class="touchpad">Touchpad</p>
     <button id="keysbutton">≡</button>
     <button id="fullscreenbutton">⤢</button>
     <button id="keyboardbutton">⌨</button>
 </div>
-<div id="keyboard" class="hidden">
+<div id="keyboard" class="scene hidden">
     <textarea id="keyboardtext" cols=1 rows=1></textarea>
     <div class="buttons">
         <button id="keyboardkeysbutton">≡</button>
         <button id="sendbutton">➣</button>
     </div>
 </div>
-<div id="keys" class="touchpad key fullscreen hidden">
+<div id="keys" class="scene touchpad key fullscreen hidden">
-    <div class="page">
+    <div class="scene touchpad">
         <div class="buttons">
             <button id="browserbackbutton">⭠</button>
             <button id="superbutton">🪟</button>
@@ -48,7 +48,7 @@
             <button id="volumeupbutton">🔊</button>
         </div>
     </div>
-    <div class="page">
+    <div class="scene touchpad">
         <div class="buttons">
             <button id="backspacebutton">⌫</button>
             <button id="returnbutton">⮠</button>

webdata/main.css

@@ -4,7 +4,7 @@
 }
 
 .hidden {
-    display: none;
+    display: none !important;
 }
 
 html {
@@ -21,13 +21,13 @@ html {
 
 html,
 body,
-body > div {
+.scene {
     width: 100%;
     height: 100%;
     margin: 0;
 }
 
-body > div {
+.scene {
     position: relative;
     display: flex;
     flex-direction: column;
@@ -167,7 +167,7 @@ textarea {
     }
 }
 
-#keys {
+#keys .scene {
     padding: 0.5rem;
     padding-bottom: 0;
     justify-content: flex-end;