43 lines
1.8 KiB
JavaScript
43 lines
1.8 KiB
JavaScript
import { normalizeLanguage } from '../lib/settings.js';
|
|
|
|
export const MENU_SETTING_KEYS = ['contextMenuMode', 'showTranslate', 'translationMode', 'translationLanguage'];
|
|
export function initializeMenuSettings({ document, onChange }) {
|
|
const field = id => document.getElementById(id);
|
|
function update() {
|
|
const advanced = field('contextMenuMode').value === 'advanced';
|
|
const translation = advanced && field('showTranslate').checked;
|
|
const preferred = translation && field('translationMode').value === 'preferred';
|
|
field('advanced-settings').hidden = !advanced;
|
|
field('translation-settings').hidden = !translation;
|
|
field('preferred-language-field').hidden = !preferred;
|
|
const valid = Boolean(normalizeLanguage(field('translationLanguage').value));
|
|
field('language-validation').textContent = preferred && !valid
|
|
? 'Enter a language using up to 100 characters. Until then, Translate will ask each time.' : '';
|
|
field('translationLanguage').setAttribute('aria-invalid', String(preferred && !valid));
|
|
}
|
|
for (const id of MENU_SETTING_KEYS) {
|
|
const changed = () => { update(); onChange(); };
|
|
field(id).addEventListener('input', changed);
|
|
field(id).addEventListener('change', changed);
|
|
}
|
|
return {
|
|
render(settings) {
|
|
for (const id of MENU_SETTING_KEYS) {
|
|
const element = field(id);
|
|
if (element === document.activeElement) continue;
|
|
if (id === 'showTranslate') element.checked = settings[id];
|
|
else element.value = settings[id];
|
|
}
|
|
update();
|
|
},
|
|
collect() {
|
|
return {
|
|
contextMenuMode: field('contextMenuMode').value,
|
|
showTranslate: field('showTranslate').checked,
|
|
translationMode: field('translationMode').value,
|
|
translationLanguage: normalizeLanguage(field('translationLanguage').value),
|
|
};
|
|
},
|
|
};
|
|
}
|