Focus {exec} text input elements if they are visible, without stealin…

…g focus.

TODO.md

@@ -3,9 +3,6 @@
 - TODO: Remove the "Click to show" in dropdowns. This should be possible just
   with CSS.
 
-- TODO: Improve the presentation of numbering in {code-block}: more space
-  between number and code, border around number.
-
 - TODO: Render as pdf with solutions (open dropdowns).
 
 - TODO: Make the `name` attribute in graphviz work. This requires a fix in

tdoc/common/static/tdoc-exec.js

@@ -24,11 +24,18 @@ export function element(html) {
     return t.content.firstChild;
 }
 
-// Return a promise and its resolve and reject functions.
-export function signal() {
-    let resolve, reject;
-    const promise = new Promise((res, rej) => { resolve = res; reject = rej; });
-    return {promise, resolve, reject};
+// Return true iff the given element is within the root viewport.
+export function isVisible(el) {
+    const rect = el.getBoundingClientRect();
+    return rect.top >= 0 && rect.left >= 0 &&
+           rect.bottom <= document.documentElement.clientHeight &&
+           rect.right <= document.documentElement.clientWidth;
+}
+
+// Focus an element if it is visible and no other element has the focus.
+export function focusIfVisible(el) {
+    const active = document.activeElement;
+    if ((!active || active.tagName === 'BODY') && isVisible(el)) el.focus();
 }
 
 // An error that is caused by the user, and that doesn't need to be logged.

tdoc/common/static/tdoc-python.js

@@ -2,17 +2,15 @@
 // SPDX-License-Identifier: MIT
 
 import {XWorker} from './polyscript/index.js';
-import {Executor, element, signal, text} from './tdoc-exec.js';
-
-// TODO: Add a button to each {exec} output to remove it
+import {Executor, element, focusIfVisible, text} from './tdoc-exec.js';
 
 const worker = XWorker(import.meta.resolve('./tdoc-python.py'), {
     type: 'pyodide',
     version: import.meta.resolve('./pyodide/pyodide.mjs'),
     // https://docs.pyscript.net/latest/user-guide/configuration/
     config: {},
 });
-const {promise: ready, resolve: resolve_ready} = signal();
+const {promise: ready, resolve: resolve_ready} = Promise.withResolvers();
 worker.sync.ready = (msg) => {
     console.info(`[t-doc] ${msg}`);
     resolve_ready();
@@ -145,6 +143,7 @@ class PythonExecutor extends Executor {
                         btn.click();
                     }
                 });
+                focusIfVisible(input);
                 break;
             }
             case 'text': {
@@ -165,6 +164,7 @@ class PythonExecutor extends Executor {
                         btn.click();
                     }
                 });
+                focusIfVisible(input);
                 break;
             }
             case 'buttons-right':