separate createAudioOptions
This commit is contained in:
parent
fad1bbb875
commit
6ed4bd1227
1 changed files with 34 additions and 23 deletions
|
@ -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) {
|
||||||
|
|
Loading…
Reference in a new issue