audio-vis/raw/javascript/select.js

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);
}
}
})()