multiplexInputs = {
let serialID = 0;
return function multiplexInputs(
inputs,
{ label = null, open = '', inline = false } = {}
) {
const params = {};
let container;
if (label) {
container = html`<details ${
open ? 'open' : ''
}><summary style="cursor:pointer;">${label}</summary></details>`;
} else {
container = DOM.element('div');
}
function update(e) {
if (e) e.stopPropagation();
for (const [key, input] of Object.entries(inputs)) {
params[key] = input.value;
}
container.dispatchEvent(new CustomEvent('input'));
}
update();
for (const input of Object.values(inputs)) {
const wrapper = DOM.element('div');
if (inline) {
wrapper.style.display = 'inline-block';
wrapper.style.marginRight = '0.5em';
input.style.display = 'inline';
}
container.appendChild(wrapper);
wrapper.appendChild(input);
input.addEventListener('input', update);
}
container.value = params;
const stateKey = `__state${serialID++}`;
Object.defineProperties(container, {
cacheState: {
value: function(object) {
return Object.defineProperty(object, stateKey, {
value: Object.assign({}, this.value),
enumerable: false,
configurable: true
});
}
},
canIgnore: {
value: function(object, properties) {
if (!object || !object[stateKey]) return false;
if (
JSON.stringify(object[stateKey]) === JSON.stringify(container.value)
) {
return false;
}
if (!Array.isArray(properties)) properties = [properties];
for (let property of properties) {
if (object[stateKey][property] !== container.value[property])
return false;
}
container.cacheState(object);
return true;
}
}
});
return container;
};
}