viewof inputs = { const inputs = html`` inputs.value = { "sortBySentiment": false, "sortByAmounts": false, "includes": { "Lipid": true, "Mineral": true, "Vitamin": true, "Proximate": true }, "showNames": false, "showValues": false }; // filtering const boxes = inputs.querySelectorAll(".legend"); for (let box of boxes) { box.onclick = () => { inputs.value.includes[box.id] = box.checked; inputs.dispatchEvent(new CustomEvent('input')); } } // sorting const ingSortSentiment = inputs.querySelector("#sortSentiment"); const ingSortWeight = inputs.querySelector("#sortWeight"); const nutSortAmount = inputs.querySelector("#sortAmount"); const nutSortGroup = inputs.querySelector("#sortGroup"); ingSortSentiment.onchange = onChangeIngredientSort; ingSortWeight.onchange = onChangeIngredientSort; nutSortAmount.onchange = onChangeNutrientSort; nutSortGroup.onchange = onChangeNutrientSort; function onChangeIngredientSort() { inputs.value.sortBySentiment = ingSortSentiment.checked; inputs.dispatchEvent(new CustomEvent('input')); } function onChangeNutrientSort() { inputs.value.sortByAmounts = nutSortAmount.checked; inputs.dispatchEvent(new CustomEvent('input')); } // labels const names = inputs.querySelector("#names"); const values = inputs.querySelector("#values"); names.onchange = () => { inputs.value.showNames = names.checked; inputs.dispatchEvent(new CustomEvent('input')); } values.onchange = () => { inputs.value.showValues = values.checked; inputs.dispatchEvent(new CustomEvent('input')); } return inputs; }