Revert "Mobile Keyboard Input (#223)" (#264)

This reverts commit 0de4194.
tiny-pilot · Sep 22, 2020 · e80b887 · e80b887 · djclueless · Sep 22, 2020
1 parent 0de4194
commit e80b887
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 39 deletions.
diff --git a/app/static/js/app.js b/app/static/js/app.js
@@ -2,6 +2,7 @@
 
 const socket = io();
 let connectedToServer = false;
+
 const screenCursorOptions = [
   "disabled", //to show on disconnect
   "default", // Note that this is the browser default, not TinyPilot's default.
@@ -312,7 +313,6 @@ document.getElementById("fullscreen-btn").addEventListener("click", (evt) => {
 document.getElementById("paste-btn").addEventListener("click", () => {
   showPasteOverlay();
 });
-
 document
   .getElementById("paste-overlay")
   .addEventListener("paste-text", (evt) => {

diff --git a/app/templates/custom-elements/remote-screen.html b/app/templates/custom-elements/remote-screen.html
@@ -30,14 +30,8 @@
     :host([fullscreen="true"]) #remote-screen-img.full-height {
       height: 100%;
     }
-
-    #mobile-keyboard-input {
-      position: fixed;
-      bottom: -1000px;
-    }
   </style>
   <div class="screen-wrapper">
-    <input id="mobile-keyboard-input" autocapitalize="off" type="text" />
     <img id="remote-screen-img" src="/stream?advance_headers=1" />
   </div>
   <script
@@ -114,35 +108,8 @@
           screenImg.addEventListener("contextmenu", (evt) => {
             evt.preventDefault();
           });
-          let isTouchScreen = false;
-          this.shadowRoot.addEventListener("touchend", () => {
-            isTouchScreen = true;
-          });
-          this.shadowRoot.addEventListener("click", () => {
-            if (isTouchScreen) {
-              this.shadowRoot.getElementById("mobile-keyboard-input").focus();
-            }
-          });
 
-          // On mobile, the keydown events function differently due to the OS
-          // attempting to autocomplete text. Instead of listening for keydown
-          // events, we listen for input events.
-          const mobileKeyboard = this.shadowRoot.getElementById(
-            "mobile-keyboard-input"
-          );
-          mobileKeyboard.addEventListener("input", (evt) => {
-            // Handle insertCompositionText, which mean typing in autocomplete
-            // mode. The global keydown event handler processes all other key
-            // input events.
-            if (evt.inputType === "insertCompositionText") {
-              sendTextInput(evt.data);
-            }
-
-            // Force the autocomplete sequence to restart.
-            mobileKeyboard.blur();
-            mobileKeyboard.value = "";
-            mobileKeyboard.focus();
-          });
+          window.addEventListener("resize", this.onWindowResize);
         }
 
         disconnectedCallback() {

diff --git a/app/templates/index.html b/app/templates/index.html
@@ -12,10 +12,6 @@
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, maximum-scale=1; scalable=no;"
-    />
     <meta name="csrf-token" content="{{ csrf_token() }}" />
   </head>
   <body>
@@ -37,6 +33,7 @@ <h3 id="error-type">Error Type</h3>
         <shutdown-dialog id="shutdown-dialog"></shutdown-dialog>
 
         <remote-screen id="remote-screen"></remote-screen>
+
         {% include "components/keyboard-panel.html" %}
       </div>
     </div>