mirror of
https://github.com/bilawalsidhu/gods-eye-view.git
synced 2026-11-05 19:04:02 +00:00
feat(ui): render the language picker as a Vue component
LocalePicker renders the existing picker model with the same markup and listbox behaviour; ProviderSettingsView shows it while the shell publishes the active language and its choice handler to the gev-locale store. A host passing localePicker: false publishes nothing. A choice reaches the shell after the list is closed on screen, and every opening keeps the active option in view.
This commit is contained in:
Sameh Khamis committed
1 parent
5bf797ef71
commit
6cb01ff975
9 files changed
+627
-335
No files matched your search
+11
-306
@@ -2,7 +2,7 @@
|
||||
* Interface language picker: a HUD button in the bottom-right corner that
|
||||
* opens a listbox of the shipped languages.
|
||||
*
|
||||
* The logic is pure and DOM-free; mountLocalePicker() only renders it. The
|
||||
* The logic is pure and DOM-free; the LocalePicker view renders it. The
|
||||
* shell decides what a choice does (confirm, reload).
|
||||
*
|
||||
* The list follows the ARIA listbox pattern: the button opens it, focus moves
|
||||
@@ -309,12 +309,10 @@ export function createLocalePickerModel({
|
||||
};
|
||||
}
|
||||
|
||||
/* ── DOM ───────────────────────────────────────────────────────────────── */
|
||||
|
||||
const SVG_NS = 'http://www.w3.org/2000/svg';
|
||||
/* ── Presentation ──────────────────────────────────────────────────────── */
|
||||
|
||||
/** Thin-line globe, check mark and caret, drawn in currentColor. */
|
||||
const ICONS = Object.freeze({
|
||||
export const LOCALE_PICKER_ICONS = Object.freeze({
|
||||
globe: {
|
||||
stroke: [
|
||||
'M12 3a9 9 0 1 0 0 18a9 9 0 1 0 0-18Z',
|
||||
@@ -329,307 +327,14 @@ const ICONS = Object.freeze({
|
||||
caret: { fill: ['M7 10h10l-5 5.5Z'] },
|
||||
});
|
||||
|
||||
function icon(documentRef, name, className) {
|
||||
const svg = documentRef.createElementNS(SVG_NS, 'svg');
|
||||
svg.setAttribute('viewBox', '0 0 24 24');
|
||||
svg.setAttribute('aria-hidden', 'true');
|
||||
svg.setAttribute('focusable', 'false');
|
||||
svg.setAttribute('class', className);
|
||||
const { stroke = [], fill = [] } = ICONS[name];
|
||||
for (const d of stroke) {
|
||||
const path = documentRef.createElementNS(SVG_NS, 'path');
|
||||
path.setAttribute('d', d);
|
||||
path.setAttribute('fill', 'none');
|
||||
path.setAttribute('stroke', 'currentColor');
|
||||
path.setAttribute('stroke-width', '1.4');
|
||||
path.setAttribute('stroke-linecap', 'round');
|
||||
path.setAttribute('stroke-linejoin', 'round');
|
||||
svg.append(path);
|
||||
}
|
||||
for (const d of fill) {
|
||||
const path = documentRef.createElementNS(SVG_NS, 'path');
|
||||
path.setAttribute('d', d);
|
||||
path.setAttribute('fill', 'currentColor');
|
||||
svg.append(path);
|
||||
}
|
||||
return svg;
|
||||
}
|
||||
|
||||
function element(documentRef, tag, className) {
|
||||
const node = documentRef.createElement(tag);
|
||||
if (className) node.className = className;
|
||||
return node;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the picker into `root` and wire it.
|
||||
* @param {object} input
|
||||
* @param {HTMLElement} input.root Empty #locale-picker container.
|
||||
* @param {string} input.current Active interface language.
|
||||
* @param {(locale: string) => void} input.onSelect Called after the list
|
||||
* closes, for a language other than the current one.
|
||||
* @param {readonly string[]} [input.locales]
|
||||
* @param {Record<string, string>} [input.nativeNames]
|
||||
* @param {number} [input.searchThreshold]
|
||||
* @returns {{open: Function, close: Function, isOpen: () => boolean, destroy: Function}}
|
||||
* The code shown beside a language's name. Chinese variants are named by
|
||||
* script rather than region, in English.
|
||||
* @param {string} code
|
||||
* @returns {{text: string, lang: string|undefined}}
|
||||
*/
|
||||
export function mountLocalePicker({
|
||||
root,
|
||||
current,
|
||||
onSelect,
|
||||
locales = LOCALES,
|
||||
nativeNames = LOCALE_NAMES,
|
||||
searchThreshold = LOCALE_SEARCH_THRESHOLD,
|
||||
}) {
|
||||
const documentRef = root.ownerDocument;
|
||||
const windowRef = documentRef.defaultView;
|
||||
const model = createLocalePickerModel({
|
||||
locales,
|
||||
current,
|
||||
nativeNames,
|
||||
localName: createLocalNameReader(current),
|
||||
searchThreshold,
|
||||
});
|
||||
const id = root.id || 'locale-picker';
|
||||
const ids = {
|
||||
popup: `${id}-popup`,
|
||||
heading: `${id}-heading`,
|
||||
listbox: `${id}-listbox`,
|
||||
option: (code) => `${id}-option-${code}`,
|
||||
};
|
||||
|
||||
root.textContent = '';
|
||||
root.classList.add('locale-picker');
|
||||
|
||||
const button = element(documentRef, 'button', 'locale-picker-button');
|
||||
button.type = 'button';
|
||||
button.setAttribute('aria-haspopup', 'listbox');
|
||||
button.setAttribute('aria-expanded', 'false');
|
||||
button.setAttribute('aria-controls', ids.popup);
|
||||
button.setAttribute(
|
||||
'aria-label',
|
||||
t('Language: {language}', {
|
||||
language: nativeNames[current] || current,
|
||||
}),
|
||||
);
|
||||
button.title = t('Change the interface language');
|
||||
const code = element(documentRef, 'span', 'locale-picker-code');
|
||||
code.setAttribute('translate', 'no');
|
||||
code.setAttribute('aria-hidden', 'true');
|
||||
code.textContent = current.toUpperCase();
|
||||
button.append(
|
||||
icon(documentRef, 'globe', 'locale-picker-globe'),
|
||||
code,
|
||||
icon(documentRef, 'caret', 'locale-picker-caret'),
|
||||
);
|
||||
|
||||
const popup = element(documentRef, 'div', 'locale-picker-popup');
|
||||
popup.id = ids.popup;
|
||||
popup.hidden = true;
|
||||
const heading = element(documentRef, 'div', 'locale-picker-heading');
|
||||
heading.id = ids.heading;
|
||||
heading.textContent = t('Interface language');
|
||||
popup.append(heading);
|
||||
|
||||
const listbox = element(documentRef, 'ul', 'locale-picker-list ui-scroll');
|
||||
listbox.id = ids.listbox;
|
||||
listbox.setAttribute('role', 'listbox');
|
||||
listbox.setAttribute('aria-labelledby', ids.heading);
|
||||
listbox.tabIndex = -1;
|
||||
|
||||
let search = null;
|
||||
if (model.searchable) {
|
||||
search = element(documentRef, 'input', 'locale-picker-search');
|
||||
search.type = 'search';
|
||||
search.autocomplete = 'off';
|
||||
search.spellcheck = false;
|
||||
search.setAttribute('role', 'combobox');
|
||||
search.setAttribute('aria-autocomplete', 'list');
|
||||
search.setAttribute('aria-expanded', 'true');
|
||||
search.setAttribute('aria-controls', ids.listbox);
|
||||
search.setAttribute('aria-label', t('Search languages'));
|
||||
search.placeholder = t('Search languages');
|
||||
popup.append(search);
|
||||
}
|
||||
popup.append(listbox);
|
||||
const empty = element(documentRef, 'p', 'locale-picker-empty');
|
||||
empty.setAttribute('role', 'status');
|
||||
empty.textContent = t('No matching languages');
|
||||
empty.hidden = true;
|
||||
popup.append(empty);
|
||||
root.append(button, popup);
|
||||
|
||||
const optionNodes = new Map();
|
||||
for (const option of model.options) {
|
||||
const item = element(documentRef, 'li', 'locale-picker-option');
|
||||
item.id = ids.option(option.code);
|
||||
item.setAttribute('role', 'option');
|
||||
item.setAttribute('aria-selected', String(option.selected));
|
||||
item.lang = option.code;
|
||||
item.dataset.locale = option.code;
|
||||
const name = element(documentRef, 'span', 'locale-picker-native');
|
||||
name.textContent = option.nativeName;
|
||||
// Chinese variants are distinguished by script rather than region.
|
||||
const meta = element(documentRef, 'span', 'locale-picker-meta');
|
||||
const codeLabel = element(documentRef, 'span', 'locale-picker-option-code');
|
||||
codeLabel.setAttribute('translate', 'no');
|
||||
codeLabel.textContent =
|
||||
CHINESE_LABELS[option.code] || option.code.toUpperCase();
|
||||
if (CHINESE_LABELS[option.code]) codeLabel.lang = 'en';
|
||||
meta.append(codeLabel);
|
||||
const text = element(documentRef, 'span', 'locale-picker-text');
|
||||
text.append(name, meta);
|
||||
item.append(text);
|
||||
if (option.selected)
|
||||
item.append(icon(documentRef, 'check', 'locale-picker-check'));
|
||||
optionNodes.set(option.code, item);
|
||||
}
|
||||
|
||||
const focusTarget = () => search || listbox;
|
||||
|
||||
const render = () => {
|
||||
const visible = new Set(model.visible.map((option) => option.code));
|
||||
listbox.replaceChildren(
|
||||
...model.visible.map((option) => optionNodes.get(option.code)),
|
||||
);
|
||||
for (const [localeCode, item] of optionNodes) {
|
||||
item.classList.toggle(
|
||||
'is-active',
|
||||
visible.has(localeCode) && model.activeOption?.code === localeCode,
|
||||
);
|
||||
}
|
||||
empty.hidden = model.visible.length > 0;
|
||||
const activeNode = model.activeOption
|
||||
? optionNodes.get(model.activeOption.code)
|
||||
: null;
|
||||
if (activeNode) {
|
||||
focusTarget().setAttribute('aria-activedescendant', activeNode.id);
|
||||
activeNode.scrollIntoView?.({ block: 'nearest' });
|
||||
} else {
|
||||
focusTarget().removeAttribute('aria-activedescendant');
|
||||
}
|
||||
};
|
||||
|
||||
let swallowSpaceKeyup = false;
|
||||
|
||||
const close = ({ restoreFocus = false } = {}) => {
|
||||
if (!model.open) return;
|
||||
model.closeList();
|
||||
popup.hidden = true;
|
||||
root.classList.remove('is-open');
|
||||
button.setAttribute('aria-expanded', 'false');
|
||||
windowRef?.removeEventListener('keydown', onWindowKeyDown, true);
|
||||
documentRef.removeEventListener('pointerdown', onDocumentPointerDown, true);
|
||||
if (restoreFocus) button.focus({ preventScroll: true });
|
||||
};
|
||||
|
||||
const choose = (localeCode) => {
|
||||
close({ restoreFocus: true });
|
||||
if (localeCode !== current) onSelect(localeCode);
|
||||
};
|
||||
|
||||
const open = () => {
|
||||
if (model.open) return;
|
||||
model.openList();
|
||||
if (search) search.value = '';
|
||||
popup.hidden = false;
|
||||
root.classList.add('is-open');
|
||||
button.setAttribute('aria-expanded', 'true');
|
||||
render();
|
||||
// Window capture runs before the document-level shortcut handlers
|
||||
// (cockpit, hotkeys, push-to-talk), so keys typed in the list stay here.
|
||||
windowRef?.addEventListener('keydown', onWindowKeyDown, true);
|
||||
documentRef.addEventListener('pointerdown', onDocumentPointerDown, true);
|
||||
focusTarget().focus({ preventScroll: true });
|
||||
};
|
||||
|
||||
function onWindowKeyDown(event) {
|
||||
if (!model.open || event.isComposing) return;
|
||||
const inside = root.contains(event.target);
|
||||
if (!inside && event.key !== 'Escape') return;
|
||||
const result = model.keydown(event);
|
||||
if (!result.handled) return;
|
||||
event.preventDefault();
|
||||
event.stopImmediatePropagation();
|
||||
if (result.close) close({ restoreFocus: true });
|
||||
else if (result.choose) {
|
||||
if (event.key === ' ') swallowSpaceKeyup = true;
|
||||
choose(result.choose);
|
||||
} else render();
|
||||
}
|
||||
|
||||
function onDocumentPointerDown(event) {
|
||||
if (!root.contains(event.target)) close();
|
||||
}
|
||||
|
||||
const onButtonClick = () => {
|
||||
if (model.open) close({ restoreFocus: true });
|
||||
else open();
|
||||
};
|
||||
|
||||
const onButtonKeyDown = (event) => {
|
||||
if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
open();
|
||||
};
|
||||
|
||||
// Space chose an option and moved focus here; its keyup must not click.
|
||||
const onButtonKeyUp = (event) => {
|
||||
if (event.key !== ' ' || !swallowSpaceKeyup) return;
|
||||
swallowSpaceKeyup = false;
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
const optionFromEvent = (event) =>
|
||||
event.target?.closest?.('[role="option"]')?.dataset.locale || null;
|
||||
|
||||
const onListClick = (event) => {
|
||||
const localeCode = optionFromEvent(event);
|
||||
if (localeCode) choose(localeCode);
|
||||
};
|
||||
|
||||
const onListPointerMove = (event) => {
|
||||
const localeCode = optionFromEvent(event);
|
||||
if (!localeCode || model.activeOption?.code === localeCode) return;
|
||||
model.setActive(
|
||||
model.visible.findIndex((option) => option.code === localeCode),
|
||||
);
|
||||
render();
|
||||
};
|
||||
|
||||
const onSearchInput = () => {
|
||||
model.setQuery(search.value);
|
||||
render();
|
||||
};
|
||||
|
||||
const onFocusOut = (event) => {
|
||||
const next = event.relatedTarget;
|
||||
if (model.open && next && !root.contains(next)) close();
|
||||
};
|
||||
|
||||
button.addEventListener('click', onButtonClick);
|
||||
button.addEventListener('keydown', onButtonKeyDown);
|
||||
button.addEventListener('keyup', onButtonKeyUp);
|
||||
listbox.addEventListener('click', onListClick);
|
||||
listbox.addEventListener('pointermove', onListPointerMove);
|
||||
search?.addEventListener('input', onSearchInput);
|
||||
root.addEventListener('focusout', onFocusOut);
|
||||
|
||||
return {
|
||||
open,
|
||||
close,
|
||||
isOpen: () => model.open,
|
||||
destroy() {
|
||||
close();
|
||||
button.removeEventListener('click', onButtonClick);
|
||||
button.removeEventListener('keydown', onButtonKeyDown);
|
||||
button.removeEventListener('keyup', onButtonKeyUp);
|
||||
listbox.removeEventListener('click', onListClick);
|
||||
listbox.removeEventListener('pointermove', onListPointerMove);
|
||||
search?.removeEventListener('input', onSearchInput);
|
||||
root.removeEventListener('focusout', onFocusOut);
|
||||
root.textContent = '';
|
||||
},
|
||||
};
|
||||
export function localeOptionCode(code) {
|
||||
return CHINESE_LABELS[code]
|
||||
? { text: CHINESE_LABELS[code], lang: 'en' }
|
||||
: { text: code.toUpperCase(), lang: undefined };
|
||||
}
|
||||
Reference in new issue
Block a user