separate createAudioOptions

This commit is contained in:
jrkb 2023-10-08 07:19:27 +02:00
parent fad1bbb875
commit 6ed4bd1227

View file

@ -94,21 +94,7 @@ const Audio = function(tp, record) {
return true; return true;
} }
const addAudioOptions = (layer, propTitle) => { const createAudioOptions = (layer, propTitle, container) => {
if (!started) {
// audioOptions need a started init
init();
}
const panelPropTitle = tp.getPanelPropTitle(propTitle);
if (panelPropTitle === null) {
console.log('Audio::addAudioOptions::error',`cannot find panelPropTitle "${propTitle}"`);
return;
}
if (tp.getPanel().querySelector(toCssClass(`audioOptions${propTitle}`, '.')) !== null) {
//console.log('Audio::addAudioOptions::error',`audioOptions already exist for "${propTitle}"`);
return;
}
const container = panelPropTitle.parentNode.parentNode;
const mappingOptions = mapping[layer.id()][propTitle]; const mappingOptions = mapping[layer.id()][propTitle];
const panel = tp.getPanel(); const panel = tp.getPanel();
const audioOptions = document.createElement('div'); const audioOptions = document.createElement('div');
@ -233,16 +219,41 @@ const Audio = function(tp, record) {
freq_down = mapValue(e.clientX, bb.x, bb.x + bb.width, 0, config.audio.fftBandsUsed, true); freq_down = mapValue(e.clientX, bb.x, bb.x + bb.width, 0, config.audio.fftBandsUsed, true);
}); });
//removeAudioOptions();
container.after(audioOptions); container.after(audioOptions);
const audioButton = container.querySelector('.audioButton');
audioButton.classList.add('active');
canvass.push(fft_imgDom); canvass.push(fft_imgDom);
canvasCtxs.push(fft_imgDom.getContext("2d")); canvasCtxs.push(fft_imgDom.getContext("2d"));
updateMappingOptions(); updateMappingOptions();
return audioOptions;
};
const addAudioOptions = (layer, propTitle) => {
if (!started) {
// audioOptions need a started init
init();
}
const panelPropTitle = tp.getPanelPropTitle(propTitle);
if (panelPropTitle === null) {
console.log('Audio::addAudioOptions::error',`cannot find panelPropTitle "${propTitle}"`);
return;
}
if (tp.getPanel().querySelector(toCssClass(`audioOptions${propTitle}`, '.')) !== null) {
//console.log('Audio::addAudioOptions::error',`audioOptions already exist for "${propTitle}"`);
return;
}
const container = panelPropTitle.parentNode.parentNode;
if (propTitle === 'color') {
createAudioOptions(layer, `${propTitle}.r`, container).classList.add(toCssClass(`audioOptions${propTitle}`));
createAudioOptions(layer, `${propTitle}.g`, container).classList.add(toCssClass(`audioOptions${propTitle}`));
createAudioOptions(layer, `${propTitle}.b`, container).classList.add(toCssClass(`audioOptions${propTitle}`));
createAudioOptions(layer, `${propTitle}.a`, container).classList.add(toCssClass(`audioOptions${propTitle}`));
} else {
createAudioOptions(layer, propTitle, container);
}
const audioButton = container.querySelector('.audioButton');
audioButton.classList.add('active');
}; };
const removeAudioOptions = (layer = false, propTitle = false) => { const removeAudioOptions = (layer = false, propTitle = false) => {
@ -261,9 +272,9 @@ const Audio = function(tp, record) {
// only selected layers have options // only selected layers have options
// otherwise the ui is not there // otherwise the ui is not there
if (layer.isSelected()) { if (layer.isSelected()) {
const audioOptions = panel.querySelector(toCssClass(`audioOptions${propTitle}`,'.')); const audioOptions = panel.querySelectorAll(toCssClass(`audioOptions${propTitle}`,'.'));
if (audioOptions !== null) { if (audioOptions.length > 0) {
audioOptions.remove(); audioOptions.forEach((e) => { e.remove(); });
} }
const audioButton = panel.querySelector(toCssClass(`audioButton${propTitle}`,'.')); const audioButton = panel.querySelector(toCssClass(`audioButton${propTitle}`,'.'));
if (audioButton !== null) { if (audioButton !== null) {