65 lines
2.1 KiB
JavaScript
65 lines
2.1 KiB
JavaScript
|
(function () {
|
||
|
const body = $('body');
|
||
|
body.addDelegatedEventListener('click', 'custom-select .label', (e, el) => {
|
||
|
let parent = el.parentNode;
|
||
|
let options = $$('custom-option', parent),
|
||
|
optionsDiv = $('custom-options', parent);
|
||
|
if (parent.hasClass('open')) {
|
||
|
optionsDiv.style.maxHeight = '';
|
||
|
parent.removeClass('open');
|
||
|
} else {
|
||
|
let sum = 0;
|
||
|
options.forEach(function (element) {
|
||
|
sum += element.offsetHeight;
|
||
|
});
|
||
|
optionsDiv.style.maxHeight = sum + 'px';
|
||
|
parent.addClass('open');
|
||
|
}
|
||
|
})
|
||
|
body.addDelegatedEventListener('click', 'custom-select custom-option', (e, el) => {
|
||
|
let select = el.closest('custom-select'),
|
||
|
input = $('input', select);
|
||
|
$$('custom-option.active').forEach(activeEl => {
|
||
|
activeEl.removeClass('active');
|
||
|
})
|
||
|
el.addClass('active');
|
||
|
if (input) {
|
||
|
input.value = el.dataset.value || el.innerText;
|
||
|
$('.label', select).innerText = el.innerText;
|
||
|
select.removeClass('open');
|
||
|
el.parentNode.style.maxHeight = '';
|
||
|
window.dispatchEvent(new CustomEvent('selectChanged', {
|
||
|
detail: {
|
||
|
select: select,
|
||
|
event: select.dataset.event,
|
||
|
value: input.value,
|
||
|
name: input.name
|
||
|
}
|
||
|
}));
|
||
|
}
|
||
|
})
|
||
|
|
||
|
window.addEventListener('selectChanged', (e) => {
|
||
|
if (e.detail.event === 'visualConf') {
|
||
|
e.preventDefault();
|
||
|
e.stopPropagation();
|
||
|
handleVisualConf(e.detail);
|
||
|
}
|
||
|
})
|
||
|
|
||
|
function handleVisualConf(e) {
|
||
|
try {
|
||
|
let value = e.value,
|
||
|
config = Config.allConfigs[e.select.dataset.conf];
|
||
|
if (e.name === 'fftSize') {
|
||
|
value = parseInt(e.value);
|
||
|
visual.visuals[visual.c].updateFFT(value);
|
||
|
}
|
||
|
config.set(e.name, value);
|
||
|
config.save();
|
||
|
} catch (e) {
|
||
|
console.error(e);
|
||
|
}
|
||
|
}
|
||
|
})()
|