Controller and keyboard

ejg.input: navigation actions and control hints.

ejg.input.on("nav", (e) => {
  // e.action: up down left right accept back x y lb rb lt rt menu view
  // e.source: "keyboard" | "gamepad"; e.repeat: while held down
  if (e.action === "back" && somethingOpen) { close(); e.preventDefault(); }
});

Keyboard: arrows, Enter/Space (accept), Esc/Backspace (back), E (x), F (y), Page Up/Page Down (lb/rb), Tab (rb). Ctrl+E (Explore) and Ctrl+J (Downloads) are handled by the host.

If you do not mark a back as handled, the host uses it: it closes whatever it has open and, in Big Picture with nothing open, opens the quick menu. The controller’s Guide button always opens the host’s quick menu.

​

Control hints (controller or keyboard)

ejg.input.source says what was used last ("gamepad", "keyboard" or "mouse") and ejg.input.pad says which controller it is ("xbox", "playstation", "nintendo" or "generic"). The <html> element carries data-input and data-pad, and ejg.on("input", …) reports changes. The easiest way is the kit:

import { hints } from "/_sdk/kit/hints.js";
const bar = hints(document.querySelector("#hints"), [["accept", "Jugar"], ["back", "Atrás"], ["y", "Favorito"]]);
bar.set([["accept", "Instalar"]]);   // change the texts when you need to

With a PlayStation controller you see ✕ ○ △ □. With an Xbox one, A B X Y in their colors. With a keyboard, Enter, Esc, E and F. It updates itself. CSS trick: html[data-input="mouse"] .hints { display: none; }.