npm - virtual-keypad - Versions diffs - 5.13.5 → 5.14.2 - Mend

virtual-keypad 5.13.5 → 5.14.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/receiver.html CHANGED Viewed

@@ -31,46 +31,61 @@
       html,
       body {
+        font-size: calc(1em + 1vw);
         margin: 0;
         padding: 0;
+        overflow: hidden;
+      }
+      #container {
         height: 100vh;
         width: 100vw;
-        font-size: calc(1em + 1vw);
-        /* background-color: #eee; */
+        display: grid;
+        grid-template-rows: 1fr 3fr;
+        grid-template-columns: auto;
+        padding: 1em;
       }
-      main {
-        margin: 0 auto;
-        padding-bottom: 5rem;
-        width: 80%;
-        max-width: 1440px;
-        /* background-color: #eee; */
+      #display-and-buttons {
+        display: flex;
+        min-width: 50vh;
+        overflow-y: auto;
+        border: 3px solid black;
+        border-radius: 10px;
       }
       #display {
         overflow-x: wrap;
-        max-width: 75vw;
         word-break: break-all;
+        padding: 0;
+        width: 70%;
+        /* max-height: 100%; */
+        overflow-y: auto;
+      }
+      #display-control-buttons {
+        display: flex;
+        flex-direction: column;
+        width: 30%;
+        padding: 2rem;
       }
-      /* -------------------------------------------------------------------------- */
-      /* color: #FF9A00; */
-      /* color: #666; */
     </style>
   </head>
   <body>
-    <div id="info">
-      <h1>Set up keypad</h1>
-      <p>
-        Scan the QR code from the device you'd like to use as a keypad. This
-        receiver just echoes keypresses; provide a different on-data callback to
-        customize how the receiver handles keypresses.
-      </p>
-    </div>
-    <div id="display"></div>
-    <div style="display: flex">
-      <button id="toggle-disable" style="display: none">Disable keys.</button>
-      <button id="randomize-alphabet" style="display: none">
-        Randomize character set.
-      </button>
+    <div id="container">
+      <div id="info">
+        <h1>Set up keypad</h1>
+        <p>
+          Scan the QR code from the device you'd like to use as a keypad. This
+          receiver just echoes keypresses; provide a different on-data callback to
+          customize how the receiver handles keypresses.
+        </p>
+      </div>
+      <div id="display-and-buttons">
+        <div id="display"></div>
+        <div id="display-control-buttons">
+          <button id="toggle-disable" style="display: none">Disable keys.</button>
+          <button id="randomize-alphabet" style="display: none">
+            Randomize character set.
+          </button>
+        </div>
+      </div>
     </div>
     <script>
       if (window.location !== window.parent.location) {
@@ -93,7 +108,7 @@
         onErrorReconnectMessage: "Custom error message",
       };
       let ondata_callback = (data) => {
-        document.getElementById("display").innerText += "\n" + data.response;
+        receiver.displayUpdate(`[data] ${data.response}`, true);
         console.log(data);
       };
       const disableSomeKeys = (ev) => {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "virtual-keypad",
-  "version": "5.13.5",
+  "version": "5.14.2",
   "description": "User response at a distance. Simple utility to summon forth a virtual keypad webapp.",
   "main": "dist/main.js",
   "directories": {

package/src/keypad.js CHANGED Viewed

@@ -8,7 +8,7 @@ class Keypad extends KeypadPeer {
       keypadUrl: keypadUrl,
       targetElementId: null,
       visualResponseFeedback: false,
-    }
+    },
   ) {
     super({
       keypadUrl: keypadParameters.keypadUrl,
@@ -18,7 +18,7 @@ class Keypad extends KeypadPeer {
     this.receiverPeerId = null;
     const parametersFromURL = this.parseParams(
-      new URLSearchParams(window.location.search)
+      new URLSearchParams(window.location.search),
     );
     // this.alphabet = this.checkAlphabet(parametersFromURL.alphabet);
     // this.font = parametersFromURL.font;
@@ -83,7 +83,7 @@ class Keypad extends KeypadPeer {
         // Keypad has received data to update the keypad
         if (!data.hasOwnProperty("alphabet") && !data.hasOwnProperty("font")) {
           console.error(
-            'Error in parsing data received! Must set "alphabet" or "font" properties'
+            'Error in parsing data received! Must set "alphabet" or "font" properties',
           );
         } else {
           this.alphabet = data.alphabet ?? this.alphabet;
@@ -190,6 +190,11 @@ class Keypad extends KeypadPeer {
     };
     window.onresize = () => {
+      console.count("Window resized.");
+      applyMaxKeySize(this.alphabet?.length);
+    };
+    if (window.visualViewport) window.visualViewport.onresize = () => {
+      console.count("VisualViewport resized.");
       applyMaxKeySize(this.alphabet?.length);
     };
   };
@@ -264,7 +269,7 @@ class Keypad extends KeypadPeer {
         e.preventDefault();
         const elementEndedOn = document.elementFromPoint(
           e.changedTouches[0].clientX,
-          e.changedTouches[0].clientY
+          e.changedTouches[0].clientY,
         );
         switch (elementEndedOn?.className) {
           case "response-button-label noselect":
@@ -338,7 +343,7 @@ class Keypad extends KeypadPeer {
     });
   };
   interResponseKeypadMessaging = (
-    interResponseMessage = "Please fix your gaze on the + mark on your computer screen."
+    interResponseMessage = "Please fix your gaze on the + mark on your computer screen.",
   ) => {
     // Change header text to reflect WAIT message
     const header = document.getElementById("keypad-header");

package/src/keypadPeer.js CHANGED Viewed

@@ -95,9 +95,13 @@ export class KeypadPeer {
   onPeerDisconnected = () => {
     this.displayUpdate(this.onErrorReconnectMessage);
     // Workaround for peer.reconnect deleting previous id
-    this.peer.id = this.lastPeerId;
-    this.peer._lastServerId = this.lastPeerId;
-    this.peer.reconnect();
+    try {
+      this.peer.id = this.lastPeerId;
+      this.peer._lastServerId = this.lastPeerId;
+      this.peer.reconnect();
+    } catch (e) {
+      console.log(e);
+    }
   };
   onPeerClose = () => {
     this.displayUpdate("Connection closed");

package/src/maxKeySize.js CHANGED Viewed

@@ -58,12 +58,12 @@ export const applyMaxKeySize = (numberOfKeys) => {
   const { keyHeightPx, cols, rows, widthPx, heightPx } = getKeysDimensions(
     keysElem,
     numberOfKeys,
-    aspect
+    aspect,
   );
   const keyElems = [...keysElem.getElementsByClassName("response-button")];
   const controlKeyElemsMask = keyElems.map(
-    (e) => e.parentNode.id === "keypad-control-keys"
+    (e) => e.parentNode.id === "keypad-control-keys",
   );
   const gridCoords = keyElems
     .filter((k, i) => !controlKeyElemsMask[i])

package/src/receiver.js CHANGED Viewed

@@ -1,6 +1,6 @@
 // import { QRCode  } from "qrcode";
 var QRCode = require("qrcode");
-import "./receiver.css";
+// import "./receiver.css";
 import { KeypadPeer } from "./keypadPeer.js";
 const doNothing = () => undefined;
@@ -209,7 +209,7 @@ class Receiver extends KeypadPeer {
     }
     this.conn = connection;
     console.log("Connection: ", connection);
-    this.displayUpdate("You typed: ");
+    this.displayUpdate("[Connection established]", true);
     this.#ready();
   };
   #ready = () => {