js: Replace :focus-within with JS-maintained .focus-within

Old browsers (like KaiOS 2.5) don't have :focus-within, but it's pretty
easy to replace the pseudo-class with a real .focus-within class
maintained by JavaScript event handlers.  This is made only marginally
fiddlier by the odd fact that "focus" and "blur" events don't bubble.

1 files changed, 19 insertions, 0 deletions

diff --git a/emccpre.js b/emccpre.js
index 2e1508c..b050cf0 100644
--- a/emccpre.js
+++ b/emccpre.js
@@ -525,6 +525,25 @@ function initPuzzle() {
             command(4);
     });
 
+    // Event handlers to fake :focus-within on browsers too old for
+    // it (like KaiOS 2.5).  Browsers without :focus-within are also
+    // too old for focusin/out events, so we have to use focus and
+    // which don't bubble but can be captured.
+    menuform.addEventListener("focus", function(event) {
+        var elem = event.target;
+        while (elem && elem !== menuform) {
+            elem.classList.add("focus-within");
+            elem = elem.parentElement;
+        }
+    }, true);
+    menuform.addEventListener("blur", function(event) {
+        var elem = event.target;
+        while (elem && !elem.contains(event.relatedTarget)) {
+            elem.classList.remove("focus-within");
+            elem = elem.parentElement;
+        }
+    }, true);
+
     // Set up the function pointers we haven't already grabbed. 
     dlg_return_sval = Module.cwrap('dlg_return_sval', 'void',
                                    ['number','string']);