From 8445f07827eb13db005aa38b7f665f8154e3918c Mon Sep 17 00:00:00 2001 From: Ben Harris Date: Mon, 14 Nov 2022 22:16:03 +0000 Subject: 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. --- emccpre.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) (limited to 'emccpre.js') 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']); -- cgit v1.1