virtual-keypad 5.11.1 → 5.11.2

package/package.json

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

package/src/keypad.css

@@ -111,35 +111,9 @@
 .response-button:active {
   box-shadow: 1px 2px 2px 1px #999;
   background-color: #aaa;
+  font-size: large;
 }
 
-/* #keypad-control-keys {
-  grid-row: 3;
-
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  align-items: center;
-  justify-content: center;
-} */
-/* #keypad-control-keys > button {
-  height: 95%;
-  width: 95%;
-  min-width: 95%;
-  max-height: min(15vh, 150px);
-} */
-
-.response-button#SPACE {
-  /* TODO actually make sure test doesn't clip */
-  font-size: larger; 
-  /* grid-column: 1;
-  grid-row: 1; */
-}
-.response-button#RETURN {
-  /* TODO actually make sure test doesn't clip */
-  font-size: larger; 
-  /* grid-column: 2;
-  grid-row: 1; */
-}
 /* Only do on a hover-enabled device, ie not a phone/tablet */
 @media (hover: hover) {
   .response-button:hover {

package/src/keypad.js

@@ -213,6 +213,7 @@ class Keypad extends KeypadPeer {
       button.id = symbol;
       button.className = "response-button";
       button.style.fontFamily = this.font;
+      button.style.visibility = "hidden"
 
       const feedbackAudio = document.getElementById("feedbackAudio");
 
@@ -298,7 +299,7 @@ class Keypad extends KeypadPeer {
     // Create new buttons
     this.alphabet.forEach((symbol) => createButton(symbol));
     // Manually style buttons, according to Denis' algorithm
-    setTimeout(() => applyMaxKeySize(this.alphabet.length), 100);
+    setTimeout(() => applyMaxKeySize(this.alphabet.length), 3); // Why?
   };
   visualFeedbackThenReset = (delayTime = 800) => {
     // ie grey out keys just after use, to discourage rapid response

package/src/maxKeySize.js

@@ -53,23 +53,37 @@ export const applyMaxKeySize = (numberOfKeys) => {
     keyElems.forEach((k,i) => {
         k.style.position = "fixed";
         const controlKey = controlKeyElemsMask[i];
-        const height = `${keyHeightPx}px`;
         let top, left, width;
         if (controlKey) {
-            top = (heightPx-keyHeightPx) - verticalMarginOffset + "px";
-            left = (k.innerText.toLowerCase().includes("space") ? 0 : widthPx/2 - horizontalMarginOffset) + horizontalMarginOffset + "px";
-            width = `${(widthPx - horizontalMarginOffset*2)/2}px`;
+            top = (heightPx-keyHeightPx) - verticalMarginOffset;
+            left = (k.id.toLowerCase().includes("space") ? 0 : widthPx/2 - horizontalMarginOffset) + horizontalMarginOffset;
+            width = (widthPx - horizontalMarginOffset*2)/2;
+
+            k.style.height = "auto";
+            k.style.width = "auto";
+            k.style.whiteSpace = "nowrap";
+            // Set to a nominal font size, s
+            const s = 20;
+            let w = k.getBoundingClientRect().width;
+            console.log("!. ~ file: maxKeySize.js:70 ~ keyElems.forEach ~ w:", w)
+            k.style.fontSize = s + "px";
+            // Measure width of elem, w
+            w = k.getBoundingClientRect().width;
+            const r = 1/(w/width)
+            // Set font size to s*r
+            const f = Math.floor(s*r);
+            k.style.fontSize = f + "px";
         } else {
             width = keyHeightPx*aspect;
             const [y,x] = gridCoords[j];
             j += 1;
-            top = y*keyHeightPx + verticalMarginOffset + "px";
-            left = `${x*width+horizontalMarginOffset}px`;
-            width += "px";
+            top = y*keyHeightPx + verticalMarginOffset ;
+            left = x*width+horizontalMarginOffset;
         }
-        k.style.width = width;
-        k.style.height = height;
-        k.style.top = top;
-        k.style.left = left;
+        k.style.width = width + "px";
+        k.style.height = keyHeightPx + "px";
+        k.style.top = top + "px";
+        k.style.left = left + "px";
+        k.style.visibility = "visible";
     });
 };