Add more keys

Fixes #36
Fixes #27
Fixes #22

webdata/fn.js

@@ -43,6 +43,14 @@ var KEY_MEDIA_NEXT_TRACK = 5;
 var KEY_BROWSER_BACK = 6;
 var KEY_BROWSER_FORWARD = 7;
 var KEY_SUPER = 8;
+var KEY_LEFT = 9;
+var KEY_RIGHT = 10;
+var KEY_UP = 11;
+var KEY_DOWN = 12;
+var KEY_HOME = 13;
+var KEY_END = 14;
+var KEY_BACK_SPACE = 15;
+var KEY_DELETE = 16;
 
 var ws;
 var pad;
@@ -301,6 +309,7 @@ window.addEventListener("load", function() {
     pad = document.getElementById("pad");
     padlabel = document.getElementById("padlabel");
     var keys = document.getElementById("keys");
+    var keys_pages = keys.querySelectorAll(".page");
     var keyboard = document.getElementById("keyboard");
     var fullscreenbutton = document.getElementById("fullscreenbutton");
     var text = document.getElementById("text");
@@ -311,11 +320,19 @@ window.addEventListener("load", function() {
         });
     }
 
-    function showKeys() {
+    function showKeys(page_index) {
+        if (page_index < 0 || keys_pages.length <= page_index) {
+            page_index = 0;
+        }
         exitFullscreen();
         showScene(keys);
-        if (history.state != "keys") {
-            history.pushState("keys", "");
+        for (var i = 0; i < keys_pages.length; i += 1) {
+            keys_pages[i].classList.toggle("hidden", i != page_index);
+        }
+        if ((history.state || "").split(":")[0] == "keys") {
+            history.replaceState("keys:" + page_index, "");
+        } else {
+            history.pushState("keys:" + page_index, "");
         }
     }
 
@@ -352,7 +369,7 @@ window.addEventListener("load", function() {
     };
 
     document.getElementById("keysbutton").addEventListener("click", function() {
-        showKeys();
+        showKeys(0);
     });
     document.getElementById("keyboardbutton").addEventListener("click", function() {
         showKeyboard();
@@ -367,6 +384,15 @@ window.addEventListener("load", function() {
             requestFullscreen(document.documentElement, {navigationUI: "hide"});
         }
     });
+    document.getElementById("switchbutton").addEventListener("click", function() {
+        var page_index = 0;
+        for (var i = 0; i < keys_pages.length; i += 1) {
+            if (!keys_pages[i].classList.contains("hidden")) {
+                page_index = i;
+            }
+        }
+        showKeys(page_index + 1);
+    });
     [{id: "browserbackbutton", key: KEY_BROWSER_BACK},
      {id: "superbutton", key: KEY_SUPER},
      {id: "browserforwardbutton", key: KEY_BROWSER_FORWARD},
@@ -375,11 +401,22 @@ window.addEventListener("load", function() {
      {id: "nexttrackbutton", key: KEY_MEDIA_NEXT_TRACK},
      {id: "volumedownbutton", key: KEY_VOLUME_DOWN},
      {id: "volumemutebutton", key: KEY_VOLUME_MUTE},
-     {id: "volumeupbutton", key: KEY_VOLUME_UP}].forEach(function(o) {
+     {id: "volumeupbutton", key: KEY_VOLUME_UP},
+     {id: "backspacebutton", key: KEY_BACK_SPACE},
+     {id: "deletebutton", key: KEY_DELETE},
+     {id: "homebutton", key: KEY_HOME},
+     {id: "endbutton", key: KEY_END},
+     {id: "leftbutton", key: KEY_LEFT},
+     {id: "rightbutton", key: KEY_RIGHT},
+     {id: "upbutton", key: KEY_UP},
+     {id: "downbutton", key: KEY_DOWN}].forEach(function(o) {
         document.getElementById(o.id).addEventListener("click", function() {
             ws.send("k" + o.key);
         });
     });
+    document.getElementById("textkeysbutton").addEventListener("click", function() {
+        showKeys(1);
+    });
     document.getElementById("sendbutton").addEventListener("click", function() {
         if (text.value != "") {
             ws.send("t" + text.value);
@@ -389,8 +426,8 @@ window.addEventListener("load", function() {
     });
     window.onpopstate = function() {
         if (authenticated) {
-            if (history.state == "keys") {
-                showKeys();
+            if ((history.state || "").split(":")[0] == "keys") {
+                showKeys(parseInt(history.state.split(":")[1]) || 0);
             } else if (history.state == "keyboard") {
                 showKeyboard();
             } else {

webdata/index.html

@@ -25,22 +25,45 @@
 </div>
 <div id="keyboard" class="hidden">
     <textarea id="text" cols=1 rows=1></textarea>
-    <button id="sendbutton">➣</button>
+    <div class="buttons">
+        <button id="textkeysbutton">≡</button>
+        <button id="sendbutton">➣</button>
+    </div>
 </div>
 <div id="keys" class="hidden">
-    <div class="buttons">
-        <button id="browserbackbutton">⭠</button>
-        <button id="superbutton">🪟</button>
-        <button id="browserforwardbutton">⭢</button>
+    <div class="page hidden">
+        <div class="buttons">
+            <button id="browserbackbutton">⭠</button>
+            <button id="superbutton">🪟</button>
+            <button id="browserforwardbutton">⭢</button>
+        </div>
+        <div class="buttons">
+            <button id="prevtrackbutton">⏮</button>
+            <button id="playpausebutton">⏯</button>
+            <button id="nexttrackbutton">⏭</button>
+        </div>
+        <div class="buttons">
+            <button id="volumedownbutton">🔉</button>
+            <button id="volumemutebutton">🔇</button>
+            <button id="volumeupbutton">🔊</button>
+        </div>
     </div>
-    <div class="buttons">
-        <button id="prevtrackbutton">⏮</button>
-        <button id="playpausebutton">⏯</button>
-        <button id="nexttrackbutton">⏭</button>
-    </div>
-    <div class="buttons">
-        <button id="volumedownbutton">🔉</button>
-        <button id="volumemutebutton">🔇</button>
-        <button id="volumeupbutton">🔊</button>
+    <div class="page hidden">
+        <div class="buttons">
+            <button id="backspacebutton">⌫</button>
+            <button disabled></button>
+            <button id="deletebutton">⌦</button>
+        </div>
+        <div class="buttons">
+            <button id="homebutton">⭰</button>
+            <button id="upbutton">↑</button>
+            <button id="endbutton">⭲</button>
+        </div>
+        <div class="buttons">
+            <button id="leftbutton">←</button>
+            <button id="downbutton">↓</button>
+            <button id="rightbutton">→</button>
+        </div>
     </div>
+    <button id="switchbutton">⮂</button>
 </div>

webdata/main.css

@@ -94,7 +94,7 @@ button:focus {
     }
 }
 
-#pad > button {
+#pad > button, #keys > button {
     position: absolute;
     max-width: 50%;
     max-height: 50%;
@@ -132,12 +132,19 @@ textarea {
     padding: 0 0.5rem;
 }
 
-#sendbutton {
+#keyboard .buttons {
+    display: flex;
+    flex-direction: row;
+}
+
+#keyboard .buttons > button {
     border-bottom: none;
-    border-right: none;
     border-left: none;
-    width: auto;
-    height: 1.5em;
+}
+
+#keyboard .buttons > button:last-of-type {
+    flex-grow: 1;
+    border-right: none;
 }
 
 @media (min-aspect-ratio: 4/3) {
@@ -145,11 +152,18 @@ textarea {
         flex-direction: row;
     }
 
-    #sendbutton {
+    #keyboard .buttons {
+        flex-direction: column;
+    }
+
+    #keyboard .buttons > button {
         border-top: none;
+        border-right: none;
         border-left: 1px solid black;
-        width: 2em;
-        height: auto;
+    }
+
+    #keyboard .buttons > button:last-of-type {
+        border-top: 1px solid black;
     }
 }
 
@@ -159,6 +173,13 @@ textarea {
     justify-content: flex-end;
 }
 
+#switchbutton {
+    right: 0;
+    top: 0;
+    border-top: none;
+    border-right: none;
+}
+
 #keys .buttons {
     display: flex;
     justify-content: center;
@@ -178,3 +199,8 @@ textarea {
     width: 8rem;
     min-width: 0;
 }
+
+#keys .buttons > button:disabled {
+    border-top: none;
+    border-bottom: none;
+}