Merge pull request #2 from gustavocovas/overlay

Add overlay div when opening virtual_keyboard
gustavocovas · Mar 25, 2024 · 35e3e0f · 35e3e0f
2 parents 93b5fbf + 631319d
commit 35e3e0f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/keyboard.css b/keyboard.css
@@ -49,3 +49,13 @@
 .virtual_keyboard_shift_button {
   width: 80px;
 }
+
+.virtual_keyboard_overlay {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background: rgba(255, 255, 255, 0.3);
+  z-index: 10;
+}
diff --git a/keyboard.js b/keyboard.js
@@ -41,10 +41,17 @@ function onShiftPressed(virtualKeyboard, input) {
 
 function openVirtualKeyboard(anchor, input) {
   let virtualKeyboard = document.createElement("div");
+  let virtualKeyboardOverlay = document.createElement("div");
 
   virtualKeyboard.id = "virtualKeyboard";
   virtualKeyboard.className = "virtual_keyboard";
 
+  virtualKeyboardOverlay.id = "virtualKeyboardOverlay";
+  virtualKeyboardOverlay.className = "virtual_keyboard_overlay";
+  virtualKeyboardOverlay.addEventListener("click", () => {
+    closeVirtualKeyboard();
+  });
+
   renderLetters(virtualKeyboard, input);
 
   let rect = anchor.getBoundingClientRect();
@@ -54,12 +61,14 @@ function openVirtualKeyboard(anchor, input) {
   virtualKeyboard.style.top = y + "px";
   virtualKeyboard.style.left = x + "px";
 
+  document.body.appendChild(virtualKeyboardOverlay);
   document.body.appendChild(virtualKeyboard);
   virtualKeyboardIsOpen = true;
 }
 
 function closeVirtualKeyboard() {
   document.getElementById("virtualKeyboard").remove();
+  document.getElementById("virtualKeyboardOverlay").remove();
 
   virtualKeyboardIsOpen = false;
   shiftIsPressed = false;
@@ -124,9 +133,6 @@ for (let input of inputs) {
   });
 
   input.parentElement.addEventListener("mouseleave", (event) => {
-    if (virtualKeyboardIsOpen) {
-      closeVirtualKeyboard();
-    }
     if (!virtualKeyboardIsOpen) {
       toggle.style.visibility = "hidden";
     }