import { upgrade } from '../../../../node_modules/@browserkids/dom/index.js'; export default class PreferencesView extends HTMLElement { constructor() { super(); const { app } = window; upgrade(this, ` `); this.render(); app.on('update-downloaded', this.onUpdateDownloaded.bind(this)); } async render() { const { app, preferences } = window; const { $form, $backgrounds, $keys, $tab, } = this.$refs; const all = await preferences.getAll(); const backgrounds = await preferences.getBackgrounds(); const shortcuts = await app.translate('preferences.shortcuts.keys'); backgrounds .map((background) => ([background, background.split('/').pop().split('.').shift()])) .map(([value, name]) => ``) .forEach((background) => $backgrounds.insertAdjacentHTML('beforeend', background)); shortcuts .map(([keys, label]) => ([keys.split('+').map((key) => `${key}`).join('+'), label])) .map(([keys, label]) => `
${keys}
${label}
`) .forEach((shortcut) => $keys.insertAdjacentHTML('beforeend', shortcut)); Array .from(all) .filter(([key]) => $form[key]) .forEach(([key, value]) => { $form[key][typeof value === 'boolean' ? 'checked' : 'value'] = value; }); this.onCategoryClicked({ currentTarget: $tab[0] }); } onInput({ target }) { const { name, value, type, checked, } = target; const { preferences } = window; const isBoolean = ['on', 'off'].indexOf(value) >= 0 && ['checkbox', 'radio'].indexOf(type) >= 0; preferences.set(name, isBoolean ? checked : value); return this; } onCategoryClicked({ currentTarget }) { const { $content, $tab } = this.$refs; const index = $tab.indexOf(currentTarget); const toggleActive = ($el, position) => $el.classList.toggle('-active', index === position); [$tab, $content].forEach(($el) => $el.forEach(toggleActive)); this.onPostRender(); } onKeyDown({ key }) { const { preferences } = window; if (key === 'Escape') { preferences.hide(); } return this; } onRestartClicked() { const { app } = window; app.restart(); return this; } onUpdateDownloaded() { this.$refs.$alert.classList.remove('-hidden'); this.onPostRender(); } onPostRender() { const { app } = window; app.resizeWindow({ width: this.offsetWidth, height: this.offsetHeight, }); } }