stylus/manage/new-ui.js
2020-12-17 23:23:18 +03:00

58 lines
1.3 KiB
JavaScript

'use strict';
define(require => {
const {$} = require('/js/dom');
const t = require('/js/localization');
const prefs = require('/js/prefs');
/**
* @type NewUI
* @namespace NewUI
*/
const newUI = {
enabled: null, // the global option should come first
favicons: null,
faviconsGray: null,
sliders: null,
targets: null,
};
// ...add utility functions
Object.assign(newUI, /** @namespace NewUI */ {
ids: Object.keys(newUI),
prefKeyForId: id =>
id === 'sliders' ? `ui.${id}` :
id === 'enabled' ? 'manage.newUI' :
`manage.newUI.${id}`,
renderClass: () => {
const cl = document.documentElement.classList;
cl.toggle('newUI', newUI.enabled);
cl.toggle('oldUI', !newUI.enabled);
},
tpl: {
getToggle() {
return t.template[newUI.sliders ? 'toggleSlider' : 'toggleChecker'].cloneNode(true);
},
getEntry() {
const tpl = t.template[newUI.enabled ? 'styleNewUI' : 'style'].cloneNode(true);
if (newUI.enabled) {
const slot = $('toggle', tpl);
slot.parentElement.replaceChild(newUI.tpl.getToggle(), slot);
}
return tpl;
},
},
});
for (const id of newUI.ids) {
newUI[id] = prefs.get(newUI.prefKeyForId(id));
}
newUI.renderClass();
return newUI;
});