51 lines
1.9 KiB
JavaScript
51 lines
1.9 KiB
JavaScript
|
const Record = function(tp) {
|
||
|
|
|
||
|
|
const hot = {};
|
||
|
|
|
||
|
|
const addRecordButton = (layer, propTitle, isActive) => {
|
||
|
|
const panel = tp.getPanel();
|
||
|
|
const panelPropTitle = tp.getPanelPropTitle(propTitle);
|
||
|
|
if (panelPropTitle !== null) {
|
||
|
|
const container = tp.getPanelPropContainer(panelPropTitle);
|
||
|
|
if (container === null) {
|
||
|
|
console.log("Record::addRecordButton",
|
||
|
|
`impossible! cannot find panelPropContainer for ${propTitle}`);
|
||
|
|
} else if (container.querySelector('.recordButton') !== null) {
|
||
|
|
console.log("Record::addRecordButton",
|
||
|
|
`already added an record button for ${propTitle}`);
|
||
|
|
} else {
|
||
|
|
const button = document.createElement('div');
|
||
|
|
button.classList.add('recordButton');
|
||
|
|
button.classList.add(`recordButton${propTitle}`);
|
||
|
|
button.innerHTML = `<img src="/web/assets/record.svg" alt="record" />`;
|
||
|
|
container.append(button);
|
||
|
|
button.addEventListener('click', () => {
|
||
|
|
if (!hot.hasOwnProperty(layer.id())) {
|
||
|
|
hot[layer.id()] = {};
|
||
|
|
}
|
||
|
|
if (!hot[layer.id()].hasOwnProperty(propTitle)) {
|
||
|
|
hot[layer.id()][propTitle] = {};
|
||
|
|
button.classList.add('active');
|
||
|
|
} else {
|
||
|
|
delete hot[layer.id()][propTitle];
|
||
|
|
if (Object.keys(hot[layer.id()]).length === 0) {
|
||
|
|
delete hot[layer.id()];
|
||
|
|
}
|
||
|
|
button.classList.remove('active');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
console.log("Record::addRecordButton",
|
||
|
|
`cannot find panelPropTitle for ${propTitle}`);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// public
|
||
|
|
this.addRecordButton = addRecordButton;
|
||
|
|
};
|
||
|
|
|
||
|
|
export {
|
||
|
|
Record
|
||
|
|
}
|