|
|
| Line 1: |
Line 1: |
| /* SK navigation – keyboard controls (WASD + arrows + Q/E for Up/Down) */
| |
|
| |
|
| mw.loader.using('mediawiki.util', function () {
| |
| 'use strict';
| |
|
| |
| function isTypingTarget(el) {
| |
| if (!el) return false;
| |
| var tag = (el.tagName || '').toLowerCase();
| |
| if (tag === 'input' || tag === 'textarea' || tag === 'select') return true;
| |
| if (el.isContentEditable) return true;
| |
| return false;
| |
| }
| |
|
| |
| function getNavLink(selector) {
| |
| var btn = document.querySelector(selector);
| |
| if (!btn) return null;
| |
| var a = btn.querySelector('a');
| |
| return a || null;
| |
| }
| |
|
| |
| function navigate(selector) {
| |
| var link = getNavLink(selector);
| |
| if (link && link.href) {
| |
| window.location.href = link.href;
| |
| return true;
| |
| }
| |
| return false;
| |
| }
| |
|
| |
| document.addEventListener('keydown', function (e) {
| |
| // don't hijack keys while typing in forms, search, editor, etc.
| |
| if (isTypingTarget(e.target)) return;
| |
|
| |
| var key = e.key;
| |
| if (!key) return;
| |
|
| |
| // normalize letters to lowercase
| |
| if (key.length === 1) {
| |
| key = key.toLowerCase();
| |
| }
| |
|
| |
| var handled = false;
| |
|
| |
| switch (key) {
| |
| // MOVE NORTH
| |
| case 'w':
| |
| case 'ArrowUp':
| |
| handled = navigate('.nav-link-north');
| |
| break;
| |
|
| |
| // MOVE SOUTH
| |
| case 's':
| |
| case 'ArrowDown':
| |
| handled = navigate('.nav-link-south');
| |
| break;
| |
|
| |
| // MOVE WEST
| |
| case 'a':
| |
| case 'ArrowLeft':
| |
| handled = navigate('.nav-link-west');
| |
| break;
| |
|
| |
| // MOVE EAST
| |
| case 'd':
| |
| case 'ArrowRight':
| |
| handled = navigate('.nav-link-east');
| |
| break;
| |
|
| |
| // MOVE UP
| |
| case 'q':
| |
| case 'PageUp':
| |
| handled = navigate('.nav-link-up');
| |
| break;
| |
|
| |
| // MOVE DOWN
| |
| case 'e':
| |
| case 'PageDown':
| |
| handled = navigate('.nav-link-down');
| |
| break;
| |
| }
| |
|
| |
| if (handled) {
| |
| e.preventDefault();
| |
| }
| |
| });
| |
| });
| |
