audio-vis/raw/javascript/playerConfigHandler.js

107 lines
3.2 KiB
JavaScript

class PlayerConfigHandler {
async init() {
await template.loadArray([
'config/nav',
'config/content',
'config/visualitem'
]);
this.last = 'base';
$('.settings-icon').addEventListener('click', this.open.bind(this));
$('modal-content').addDelegatedEventListener('click', '.config-nav .item', this.navHandler.bind(this));
}
open() {
if (this.content === undefined) {
let content = template.parseTemplate('config/nav', {});
content += template.parseTemplate('config/content', {content: ""});
this.content = content;
}
gui.modal.renderModal('Settings', this.content, "by VersusTuneZ");
this.handleById();
gui.modal.showModal();
}
navHandler(e, el) {
this.last = el.dataset.id;
this.handleById();
}
handleById() {
let id = this.last;
new VisualConfig(id === 'visual', id === 'base');
let active = $('.config-nav .item.active'),
current = $('.config-nav .item[data-id="' + id + '"]');
if (active) {
active.removeClass('active');
}
if (current) {
current.addClass('active');
}
}
}
class VisualConfig {
static visualTemplates = {};
constructor(showVisual, renderBase) {
this.content = $('modal-content .config-content');
if (showVisual) {
this.renderVisualConfig(visual.c);
} else {
if (renderBase) {
this.renderBase();
} else {
this.renderVisuals();
}
}
}
renderVisuals() {
let keys = Object.keys(visual.visuals),
content = '<section class="visuals">';
for (let i = 0; i < keys.length; i++) {
content += template.parseTemplate('config/visualitem', {
title: visual.visuals[keys[i]].name,
id: keys[i],
active: keys[i] === visual.c ? 'active' : ''
})
}
content += '</div>';
this.content.innerHTML = content;
}
async renderBase() {
let data = await this.loadVisualConfig('base'),
div = create('section');
div.addClass('base');
div.innerHTML = GUIHelper.fromJSON(data, pConf);
this.content.innerHTML = div.outerHTML;
}
// the name loads the json and handle it!
async renderVisualConfig(name) {
let data = await this.loadVisualConfig(name, vConf),
div = create('section');
div.addClass('visual');
div.innerHTML = GUIHelper.fromJSON(data, vConf);
div.innerHTML += GUIHelper.createButton({
action: "resetVConf",
name: "Reset Visual Config"
});
div.innerHTML += GUIHelper.createButton({
action: "makeModalTransparent",
name: "toggle Modal Opacity"
})
this.content.innerHTML = div.outerHTML;
}
async loadVisualConfig(name) {
let tem = VisualConfig.visualTemplates;
if (!tem[name]) {
//load config and save it
tem[name] = await FetchHandler.loadFile('/out/gui/' + name + ".json", true);
}
return tem[name];
}
}