import { upgrade } from '../../../../node_modules/@browserkids/dom/index.js';
export default class PreferencesView extends HTMLElement {
constructor() {
super();
const { app } = window;
upgrade(this, `
🎉
app.updateDownloaded
`);
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,
});
}
}