31:T18ee,function ScrollingMultiSelect(options, config = {}) { const { label: titleText, values: presetValues = [], format = (v) => v, Objformat } = config; const { label: labelProp, value: valueProp } = Objformat || { label: "label", value: "value" }; const container = document.createElement("div"); container.innerHTML = ` `; container.classList.add("multi-select"); container.style.width = "300px"; //50% container.value = []; const updateButtonColor = () => { if (container.value.length === options.length) { selectAllButton.style.backgroundColor = "green"; } else { selectAllButton.style.backgroundColor = "grey"; } }; const title = document.createElement("p"); title.textContent = titleText; title.classList.add("title"); container.appendChild(title); const separator = document.createElement("div"); separator.classList.add("separator"); container.appendChild(separator); const optionsContainer = document.createElement("div"); optionsContainer.classList.add("select-options"); optionsContainer.style.maxHeight = "10em"; optionsContainer.style.overflowY = "auto"; options = Array.isArray(options) ? options : Array.from(options.entries()).map(([label, value]) => ({ label, value })); options.forEach((option) => { const value = typeof option === "object" ? option[valueProp] : option; // const value = index; // const value = option; const label = typeof option === "object" ? option[labelProp] : option; const uniqueId = `${titleText}_${value}_${Math.random() .toString(36) .substr(2, 9)}`; const optionElement = document.createElement("div"); optionElement.classList.add("option"); const checkbox = document.createElement("input"); checkbox.type = "checkbox"; checkbox.id = uniqueId; checkbox.value = value; const labelElement = document.createElement("label"); labelElement.htmlFor = uniqueId; labelElement.textContent = format(label); if (presetValues.includes(value)) { checkbox.checked = true; container.value.push(value); optionElement.classList.add("selected"); labelElement.style.color = "green"; } optionElement.appendChild(checkbox); optionElement.appendChild(labelElement); optionsContainer.appendChild(optionElement); checkbox.addEventListener("change", () => { if (checkbox.checked) { optionElement.classList.add("selected"); labelElement.style.color = "green"; container.value.push(checkbox.value); } else { optionElement.classList.remove("selected"); labelElement.style.color = "inherit"; const index = container.value.indexOf(checkbox.value); if (index > -1) { container.value.splice(index, 1); } } updateButtonColor(); container.dispatchEvent(new CustomEvent("input", { bubbles: true })); }); }); const controlsContainer = document.createElement("div"); controlsContainer.classList.add("select-controls"); const selectAllButton = document.createElement("button"); selectAllButton.classList.add("select-all"); selectAllButton.textContent = "Select All"; const deselectAllButton = document.createElement("button"); deselectAllButton.classList.add("deselect-all"); deselectAllButton.textContent = "Deselect All"; controlsContainer.appendChild(selectAllButton); controlsContainer.appendChild(deselectAllButton); container.appendChild(controlsContainer); container.appendChild(optionsContainer); selectAllButton.addEventListener("click", () => { const checkboxes = container.querySelectorAll('input[type="checkbox"]'); container.value = []; checkboxes.forEach((checkbox) => { checkbox.checked = true; checkbox.parentNode.classList.add("selected"); checkbox.nextSibling.style.color = "green"; container.value.push(checkbox.value); }); container.dispatchEvent(new CustomEvent("input", { bubbles: true })); container.dispatchEvent(new Event("change", { bubbles: true })); updateButtonColor(); }); deselectAllButton.addEventListener("click", () => { const checkboxes = container.querySelectorAll('input[type="checkbox"]'); checkboxes.forEach((checkbox) => { checkbox.checked = false; checkbox.parentNode.classList.remove("selected"); checkbox.nextSibling.style.color = "inherit"; }); container.value = []; container.dispatchEvent(new CustomEvent("input", { bubbles: true })); container.dispatchEvent(new Event("change", { bubbles: true })); updateButtonColor(); }); const searchInput = document.createElement("input"); searchInput.type = "text"; searchInput.placeholder = "Search..."; searchInput.classList.add("search-input"); searchInput.addEventListener("input", () => { const searchValue = searchInput.value.toLowerCase(); optionsContainer.querySelectorAll(".option").forEach((option) => { const label = option.querySelector("label").textContent.toLowerCase(); option.style.display = label.includes(searchValue) ? "" : "none"; }); }); container.insertBefore(searchInput, optionsContainer); return container; }32:T18af,function ScrollingMultiSelect_testing(options, config = {}) { const { label: titleText, values: presetValues = [], format = (v) => v, Objformat } = config; const { label: labelProp, value: valueProp } = Objformat || { label: "label", value: "value" }; const container = document.createElement("div"); container.innerHTML = ` `; container.classList.add("multi-select"); container.style.width = "300px"; //50% container.value = []; const updateButtonColor = () => { if (container.value.length === options.length) { selectAllButton.style.backgroundColor = "green"; } else { selectAllButton.style.backgroundColor = "grey"; } }; const title = document.createElement("p"); title.textContent = titleText; title.classList.add("title"); container.appendChild(title); const separator = document.createElement("div"); separator.classList.add("separator"); container.appendChild(separator); const optionsContainer = document.createElement("div"); optionsContainer.classList.add("select-options"); optionsContainer.style.maxHeight = "10em"; optionsContainer.style.overflowY = "auto"; options = Array.isArray(options) ? options : Array.from(options.entries()).map(([label, value]) => ({ label, value })); options.forEach((option) => { const value = typeof option === "object" ? option[valueProp] : option; // const value = option; const label = typeof option === "object" ? option[labelProp] : option; // const label = format(option); //if format !== undefined, we prioritize it over option === 'object'.. nested like in the code for the 'tree map plot'? const uniqueId = `${titleText}_${value}_${Math.random() .toString(36) .substr(2, 9)}`; const optionElement = document.createElement("div"); optionElement.classList.add("option"); const checkbox = document.createElement("input"); checkbox.type = "checkbox"; checkbox.id = uniqueId; checkbox.value = value; const labelElement = document.createElement("label"); labelElement.htmlFor = uniqueId; labelElement.textContent = label; if (presetValues.includes(value)) { checkbox.checked = true; container.value.push(value); optionElement.classList.add("selected"); labelElement.style.color = "green"; } optionElement.appendChild(checkbox); optionElement.appendChild(labelElement); optionsContainer.appendChild(optionElement); checkbox.addEventListener("change", () => { if (checkbox.checked) { optionElement.classList.add("selected"); labelElement.style.color = "green"; container.value.push(checkbox.value); } else { optionElement.classList.remove("selected"); labelElement.style.color = "inherit"; const index = container.value.indexOf(checkbox.value); if (index > -1) { container.value.splice(index, 1); } } updateButtonColor(); // container.dispatchEvent(new CustomEvent("input")); }); }); const controlsContainer = document.createElement("div"); controlsContainer.classList.add("select-controls"); const selectAllButton = document.createElement("button"); selectAllButton.classList.add("select-all"); selectAllButton.textContent = "Select All"; const deselectAllButton = document.createElement("button"); deselectAllButton.classList.add("deselect-all"); deselectAllButton.textContent = "Deselect All"; controlsContainer.appendChild(selectAllButton); controlsContainer.appendChild(deselectAllButton); container.appendChild(controlsContainer); container.appendChild(optionsContainer); selectAllButton.addEventListener("click", () => { const checkboxes = container.querySelectorAll('input[type="checkbox"]'); container.value = []; checkboxes.forEach((checkbox) => { checkbox.checked = true; checkbox.parentNode.classList.add("selected"); checkbox.nextSibling.style.color = "green"; container.value.push(checkbox.value); }); container.dispatchEvent(new CustomEvent("input")); updateButtonColor(); }); deselectAllButton.addEventListener("click", () => { const checkboxes = container.querySelectorAll('input[type="checkbox"]'); checkboxes.forEach((checkbox) => { checkbox.checked = false; checkbox.parentNode.classList.remove("selected"); checkbox.nextSibling.style.color = "inherit"; }); container.value = []; container.dispatchEvent(new CustomEvent("input")); updateButtonColor(); }); const searchInput = document.createElement("input"); searchInput.type = "text"; searchInput.placeholder = "Search..."; searchInput.classList.add("search-input"); searchInput.addEventListener("input", () => { const searchValue = searchInput.value.toLowerCase(); optionsContainer.querySelectorAll(".option").forEach((option) => { const label = option.querySelector("label").textContent.toLowerCase(); option.style.display = label.includes(searchValue) ? "" : "none"; }); }); container.insertBefore(searchInput, optionsContainer); return container; }33:T2673,function ScrollingMultiSelect_collapsible(options, config = {}) { const { label: titleText, values: presetValues = [], // selectAll_alias: selectAll_alias, format = (v) => v, Objformat } = config; const { label: labelProp, value: valueProp } = Objformat || { label: "label", value: "value" }; const container = document.createElement("div"); container.className = "multi-select-container"; container.value = []; container.selectedLabels = []; const title = document.createElement("p"); title.textContent = titleText; title.className = "title"; container.appendChild(title); const separator = document.createElement("div"); separator.classList.add("separator"); container.appendChild(separator); const selectedOptionsBox = document.createElement("div"); selectedOptionsBox.className = "selected-options-box"; selectedOptionsBox.style.lineHeight = "40px"; // align text to the center selectedOptionsBox.style.fontSize = "14px"; // increase font size selectedOptionsBox.style.whiteSpace = "nowrap"; selectedOptionsBox.style.overflow = "hidden"; selectedOptionsBox.style.textOverflow = "ellipsis"; selectedOptionsBox.style.paddingRight = "20px"; container.appendChild(selectedOptionsBox); const selectorContainer = document.createElement("div"); selectorContainer.className = "selector-container"; container.appendChild(selectorContainer); const searchInput = document.createElement("input"); searchInput.type = "text"; searchInput.placeholder = "Search..."; searchInput.className = "search-input"; searchInput.addEventListener("input", () => { const searchValue = searchInput.value.toLowerCase(); optionsContainer.querySelectorAll(".option").forEach((option) => { const label = option.querySelector("label").textContent.toLowerCase(); option.style.display = label.includes(searchValue) ? "" : "none"; }); }); selectorContainer.appendChild(searchInput); const controlsContainer = document.createElement("div"); controlsContainer.className = "select-controls"; selectorContainer.appendChild(controlsContainer); const selectAllButton = document.createElement("button"); selectAllButton.className = "select-all"; selectAllButton.textContent = "Select All"; controlsContainer.appendChild(selectAllButton); const deselectAllButton = document.createElement("button"); deselectAllButton.className = "deselect-all"; deselectAllButton.textContent = "Deselect All"; controlsContainer.appendChild(deselectAllButton); const optionsContainer = document.createElement("div"); optionsContainer.className = "select-options"; selectorContainer.appendChild(optionsContainer); options = Array.isArray(options) ? options : Array.from(options.entries()).map(([label, value]) => ({ label, value })); const updateSelectedOptionsBox = () => { selectedOptionsBox.textContent = container.selectedLabels.join(", "); }; options.forEach((option, index) => { const value = typeof option === "object" ? option[valueProp] : option; const label = typeof option === "object" ? option[labelProp] : option; const uniqueId = `${titleText}_${value}_${Math.random() .toString(36) .substr(2, 9)}`; const optionElement = document.createElement("div"); optionElement.className = "option"; const checkbox = document.createElement("input"); checkbox.type = "checkbox"; checkbox.id = uniqueId; checkbox.value = value; const labelElement = document.createElement("label"); labelElement.htmlFor = uniqueId; labelElement.textContent = label; // if (presetValues.includes(value)) { // checkbox.checked = true; // container.value.push(value); // container.selectedLabels.push(label); // optionElement.classList.add("selected"); // labelElement.style.color = "green"; // } if ( presetValues.includes(value) || (presetValues.length === 0 && index === 0) ) { checkbox.checked = true; container.value.push(value); container.selectedLabels.push(label); optionElement.classList.add("selected"); labelElement.style.color = "green"; } optionElement.appendChild(checkbox); optionElement.appendChild(labelElement); optionsContainer.appendChild(optionElement); checkbox.addEventListener("change", () => { if (checkbox.checked) { optionElement.classList.add("selected"); labelElement.style.color = "green"; container.value.push(checkbox.value); container.selectedLabels.push(label); } else { optionElement.classList.remove("selected"); labelElement.style.color = "inherit"; container.value = container.value.filter( (val) => val !== checkbox.value ); container.selectedLabels = container.selectedLabels.filter( (lbl) => lbl !== label ); } updateButtonColor(); container.dispatchEvent(new CustomEvent("input", { bubbles: true })); updateSelectedOptionsBox(); }); }); selectAllButton.addEventListener("click", () => { // const selectAllAliasOption = optionsContainer.querySelector( // `input[type="checkbox"][value="${selectAll_alias}"]` // ); // if (selectAll_alias) { // // Only select the `selectAll_alias` option // selectAllAliasOption.checked = true; // selectAllAliasOption.parentElement.classList.add("selected"); // selectAllAliasOption.nextSibling.style.color = "green"; // container.value = [selectAllAliasOption.value]; // container.selectedLabels = [selectAllAliasOption.nextSibling.textContent]; // } else { container.value = []; container.selectedLabels = []; optionsContainer .querySelectorAll('input[type="checkbox"]') .forEach((checkbox) => { checkbox.checked = true; checkbox.parentElement.classList.add("selected"); checkbox.nextSibling.style.color = "green"; container.value.push(checkbox.value); container.selectedLabels.push(checkbox.nextSibling.textContent); }); // } container.dispatchEvent(new CustomEvent("input", { bubbles: true })); container.dispatchEvent(new Event("change", { bubbles: true })); updateSelectedOptionsBox(); updateButtonColor(); }); deselectAllButton.addEventListener("click", () => { optionsContainer .querySelectorAll('input[type="checkbox"]') .forEach((checkbox) => { checkbox.checked = false; checkbox.parentElement.classList.remove("selected"); checkbox.nextSibling.style.color = "inherit"; }); container.value = []; container.selectedLabels = []; container.dispatchEvent(new CustomEvent("input", { bubbles: true })); container.dispatchEvent(new Event("change", { bubbles: true })); updateSelectedOptionsBox(); updateButtonColor(); }); document.addEventListener("click", function (event) { if (!container.contains(event.target)) { selectorContainer.classList.remove("open"); } }); const updateButtonColor = () => { selectAllButton.style.backgroundColor = container.value.length === options.length ? "green" : "grey"; }; const toggleDropdown = () => { selectorContainer.classList.toggle("open"); }; selectedOptionsBox.addEventListener("click", toggleDropdown); const style = document.createElement("style"); // font-weight: bold; style.textContent = ` .multi-select-container { position: relative; width: 300px; } .title { font-weight: normal !important; font-size: 14px !important; margin-bottom: 5px; } .separator { border-top: 1px solid black; margin-bottom: 1px; } .selected-options-box { border: 0; height: 40px; font-size: 14px; background: #e9e9ed; position: relative; cursor: pointer; } .selected-options-box::after { content: "⌄"; font-size: 1.1rem; position: absolute; right: 10px; top: 50%; transform: translateY(-75%); } .selected-options-box.open::after { transform: translateY(-50%) rotate(180deg); } .selector-container { display: none; position: absolute; width: 100%; background-color: white; border: 1px solid #ddd; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 9999 !important; padding: 10px; } .selector-container.open { display: block !important; } .search-input { padding: 5px; border-radius: 4px; border: 1px solid #ccc; width: calc(100% - 12px); margin-bottom: 10px; } .select-controls { display: flex; justify-content: space-between; margin-bottom: 10px; width: 100%; box-sizing: border-box; } .select-all, .deselect-all { background-color: grey; border: none; color: white; padding: 10px; text-align: center; cursor: pointer; width: 48%; box-sizing: border-box; } .select-options { max-height: 10em; overflow-y: auto; overflow-x: hidden; } .option { border-bottom: 1px solid #ccc; padding: 5px; } .option label { display: flex; align-items: center; } .option label::before { content: " "; display: inline-block; width: 15px; height: 15px; margin-right: 5px; } .option input[type="checkbox"] { display: none; } .option input[type="checkbox"]:checked + label::before { content: "✔"; color: green; } `; document.head.appendChild(style); updateSelectedOptionsBox(); // Initial update of selectedOptionsBox return container; }34:T1e5b,function dropdownInput(config = {}) { const style = html` `; //set up configuration let { inputId, inputLabel, placeholderText, options, selected } = config; const width = "250px"; const maxHeight = "250px"; //dropdown button const dropdownButton = Inputs.button( html`

${placeholderText}

` ); dropdownButton.classList.add("dropdown-button"); const optionValues = options.map((option) => option.value); //selectInput const selectInput = Inputs.select(optionValues, { multiple: true, value: selected }); selectInput.classList.add("dropdown-select"); selectInput.style.display = "none"; //select and deselect buttons const selectDeselectButtons = Inputs.button([ ["Select All", (value) => "Select All"], ["Deselect All", (value) => "Deselect All"] ]); selectDeselectButtons.classList.add("dropdown-action-buttons"); let selectInputValue = selected.slice(); // Create a copy of selected for selectInputValue let optionListItems = options.map((option) => { const isSelected = selectInputValue.includes(option.value); const listItem = html`

`; // Event listener for the list item listItem.addEventListener("click", (event) => { event.preventDefault(); const clickedListItem = event.currentTarget; const clickedItemId = clickedListItem.id; const index = selectInputValue.indexOf(clickedItemId); if (clickedListItem.classList.contains("selected")) { clickedListItem.classList.remove("selected"); if (index !== -1) { selectInputValue.splice(index, 1); } } else { clickedListItem.classList.add("selected"); selectInputValue.push(option.value); } // Update selectInput value selectInput.value = selectInputValue; // Update form value with selectInputValue form.value = selectInputValue; form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }); return listItem; }); const optionList = html``; const innerDropdown = html`${selectInput} `; innerDropdown.classList.add("dropdown-inner"); innerDropdown.style.display = "none"; innerDropdown.style.width = width; // Function to toggle dropdown visibility const toggleDropdown = () => { innerDropdown.style.display = innerDropdown.style.display === "none" ? "block" : "none"; }; // Toggle the visibility of the select input on button click dropdownButton.onclick = (event) => { toggleDropdown(); }; optionListItems.forEach((t, index) => { const option = options[index].value; if (selectInputValue.includes(option)) { t.classList.add("selected"); } }); selectDeselectButtons.onclick = () => { const buttonText = selectDeselectButtons.value; if (buttonText === "Select All") { selectInput.value = options.map((option) => option.value); selectInputValue = options.map((option) => option.value); form.value = selectInputValue; optionListItems.forEach((t) => { t.classList.add("selected"); }); } else if (buttonText === "Deselect All") { selectInput.value = []; selectInputValue = []; form.value = []; optionListItems.forEach((t) => { t.classList.remove("selected"); }); } form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; //modified from inputs formula by https://observablehq.com/@jashkenas/inputs selectInput.onchange = (e) => { e && e.preventDefault(); const value = selectInput.value; if (form.output) { const out = value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } // Update form.value with the selectInput value form.value = value; form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; const form = html`${inputLabel}`; form.classList.add("dropdown-form"); form.value = selected; const updatePlaceholderText = () => { const selectedValues = form.value; if (selectedValues.length > 0) { const filteredLabels = options .filter((option) => selectedValues.includes(option.value)) .map((filteredOption) => { // Check if the label is an HTML element if ( typeof filteredOption.label === "object" && filteredOption.label instanceof HTMLElement ) { return filteredOption.label.outerHTML; } else { return filteredOption.label; // Assuming label is a string if not HTML } }); const concatenatedText = filteredLabels.join(", "); dropdownButton.querySelector( ".filter-selected" ).innerHTML = `${concatenatedText}`; } else { dropdownButton.querySelector(".filter-selected").innerHTML = placeholderText; } }; // ... (existing code) // Listen for changes in form.value form.addEventListener("input", updatePlaceholderText); // Initial update of placeholder text updatePlaceholderText(); form.appendChild(style); return form; }35:Tf77,function createStyledMultiSelect_html(options, config = {}) { const { label: titleText, values: presetValues = [], format = (v) => v, Objformat } = config; const { label: labelProp, value: valueProp } = Objformat || { label: "label", value: "value" }; const container = document.createElement("div"); container.className = "multi-select-container"; const title = document.createElement("p"); title.textContent = titleText; title.className = "title"; container.appendChild(title); const searchInput = document.createElement("input"); searchInput.type = "text"; searchInput.placeholder = "Search..."; searchInput.className = "search-input"; container.appendChild(searchInput); const controlsContainer = document.createElement("div"); controlsContainer.className = "select-controls"; const selectAllButton = document.createElement("button"); selectAllButton.className = "select-all"; selectAllButton.textContent = "Select All"; controlsContainer.appendChild(selectAllButton); const deselectAllButton = document.createElement("button"); deselectAllButton.className = "deselect-all"; deselectAllButton.textContent = "Deselect All"; controlsContainer.appendChild(deselectAllButton); container.appendChild(controlsContainer); const selectElement = document.createElement("select"); selectElement.className = "styled-multi-select"; selectElement.multiple = true; selectElement.size = 10; options = Array.isArray(options) ? options : Array.from(options.entries()).map(([label, value]) => ({ label, value })); options.forEach((option) => { const value = typeof option === "object" ? option[valueProp] : option; const label = typeof option === "object" ? option[labelProp] : option; const optionElement = document.createElement("option"); optionElement.value = value; optionElement.textContent = format(label); if (presetValues.includes(value)) { optionElement.selected = true; } selectElement.appendChild(optionElement); }); container.appendChild(selectElement); selectAllButton.addEventListener("click", () => { Array.from(selectElement.options).forEach( (option) => (option.selected = true) ); }); deselectAllButton.addEventListener("click", () => { Array.from(selectElement.options).forEach( (option) => (option.selected = false) ); }); searchInput.addEventListener("input", () => { const searchValue = searchInput.value.toLowerCase(); Array.from(selectElement.options).forEach((option) => { const label = option.textContent.toLowerCase(); option.style.display = label.includes(searchValue) ? "" : "none"; }); }); const style = document.createElement("style"); style.textContent = ` .multi-select-container { position: relative; width: 300px; } .title { font-weight: bold; margin-bottom: 5px; } .separator { border-top: 1px solid black; margin-bottom: 10px; } .styled-multi-select { width: 100%; height: auto; border: 1px solid #ddd; border-radius: 4px; padding: 5px; background-color: white; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); } .styled-multi-select option { padding: 10px; border-bottom: 1px solid #ccc; } .select-controls { display: flex; justify-content: space-between; margin-bottom: 10px; } .select-all, .deselect-all { background-color: grey; border: none; color: white; padding: 10px; text-align: center; cursor: pointer; } .select-all:hover, .deselect-all:hover { background-color: darkgrey; } .search-input { width: 100%; padding: 5px; margin-bottom: 10px; border-radius: 4px; border: 1px solid #ccc; } `; document.head.appendChild(style); return container; }36:T2452,function ScrollingMultiSelect_collapsible2(options, config = {}) { const { label: titleText, values: presetValues = [], selectAll_alias: selectAll_alias, format = (v) => v, Objformat } = config; const { label: labelProp, value: valueProp } = Objformat || { label: "label", value: "value" }; const container = document.createElement("div"); container.className = "multi-select-container"; container.value = []; container.selectedLabels = []; const title = document.createElement("p"); title.textContent = titleText; title.className = "title"; container.appendChild(title); const separator = document.createElement("div"); separator.classList.add("separator"); container.appendChild(separator); const selectedOptionsBox = document.createElement("div"); selectedOptionsBox.className = "selected-options-box"; selectedOptionsBox.style.lineHeight = "40px"; // align text to the center selectedOptionsBox.style.fontSize = "14px"; // increase font size selectedOptionsBox.style.whiteSpace = "nowrap"; selectedOptionsBox.style.overflow = "hidden"; selectedOptionsBox.style.textOverflow = "ellipsis"; container.appendChild(selectedOptionsBox); const selectorContainer = document.createElement("div"); selectorContainer.className = "selector-container"; container.appendChild(selectorContainer); const searchInput = document.createElement("input"); searchInput.type = "text"; searchInput.placeholder = "Search..."; searchInput.className = "search-input"; searchInput.addEventListener("input", () => { const searchValue = searchInput.value.toLowerCase(); optionsContainer.querySelectorAll(".option").forEach((option) => { const label = option.querySelector("label").textContent.toLowerCase(); option.style.display = label.includes(searchValue) ? "" : "none"; }); }); selectorContainer.appendChild(searchInput); const controlsContainer = document.createElement("div"); controlsContainer.className = "select-controls"; selectorContainer.appendChild(controlsContainer); const selectAllButton = document.createElement("button"); selectAllButton.className = "select-all"; selectAllButton.textContent = "Select All"; controlsContainer.appendChild(selectAllButton); const deselectAllButton = document.createElement("button"); deselectAllButton.className = "deselect-all"; deselectAllButton.textContent = "Deselect All"; controlsContainer.appendChild(deselectAllButton); const optionsContainer = document.createElement("div"); optionsContainer.className = "select-options"; selectorContainer.appendChild(optionsContainer); options = Array.isArray(options) ? options : Array.from(options.entries()).map(([label, value]) => ({ label, value })); const updateSelectedOptionsBox = () => { selectedOptionsBox.textContent = container.selectedLabels.join(", "); }; options.forEach((option, index) => { const value = typeof option === "object" ? option[valueProp] : option; const label = typeof option === "object" ? option[labelProp] : option; const uniqueId = `${titleText}_${value}_${Math.random() .toString(36) .substr(2, 9)}`; const optionElement = document.createElement("div"); optionElement.className = "option"; const checkbox = document.createElement("input"); checkbox.type = "checkbox"; checkbox.id = uniqueId; checkbox.value = value; const labelElement = document.createElement("label"); labelElement.htmlFor = uniqueId; labelElement.textContent = label; if ( presetValues.includes(value) || (presetValues.length === 0 && index === 0) ) { checkbox.checked = true; container.value.push(value); container.selectedLabels.push(label); optionElement.classList.add("selected"); labelElement.style.color = "green"; } optionElement.appendChild(checkbox); optionElement.appendChild(labelElement); optionsContainer.appendChild(optionElement); checkbox.addEventListener("change", () => { if (checkbox.checked) { optionElement.classList.add("selected"); labelElement.style.color = "green"; container.value.push(checkbox.value); container.selectedLabels.push(label); } else { optionElement.classList.remove("selected"); labelElement.style.color = "inherit"; container.value = container.value.filter( (val) => val !== checkbox.value ); container.selectedLabels = container.selectedLabels.filter( (lbl) => lbl !== label ); } updateButtonColor(); container.dispatchEvent(new CustomEvent("input", { bubbles: true })); updateSelectedOptionsBox(); }); }); selectAllButton.addEventListener("click", () => { const selectAllAliasOption = optionsContainer.querySelector( `input[type="checkbox"][value="${selectAll_alias}"]` ); if (selectAll_alias) { // Only select the `selectAll_alias` option selectAllAliasOption.checked = true; selectAllAliasOption.parentElement.classList.add("selected"); selectAllAliasOption.nextSibling.style.color = "green"; container.value = [selectAllAliasOption.value]; container.selectedLabels = [selectAllAliasOption.nextSibling.textContent]; } else { container.value = []; container.selectedLabels = []; optionsContainer .querySelectorAll('input[type="checkbox"]') .forEach((checkbox) => { checkbox.checked = true; checkbox.parentElement.classList.add("selected"); checkbox.nextSibling.style.color = "green"; container.value.push(checkbox.value); container.selectedLabels.push(checkbox.nextSibling.textContent); }); } container.dispatchEvent(new CustomEvent("input", { bubbles: true })); updateSelectedOptionsBox(); updateButtonColor(); }); deselectAllButton.addEventListener("click", () => { optionsContainer .querySelectorAll('input[type="checkbox"]') .forEach((checkbox) => { checkbox.checked = false; checkbox.parentElement.classList.remove("selected"); checkbox.nextSibling.style.color = "inherit"; }); container.value = []; container.selectedLabels = []; container.dispatchEvent(new CustomEvent("input", { bubbles: true })); updateSelectedOptionsBox(); updateButtonColor(); }); document.addEventListener("click", function (event) { if (!container.contains(event.target)) { selectorContainer.classList.remove("open"); } }); const updateButtonColor = () => { selectAllButton.style.backgroundColor = container.value.length === options.length ? "green" : "grey"; }; const toggleDropdown = () => { selectorContainer.classList.toggle("open"); }; selectedOptionsBox.addEventListener("click", toggleDropdown); const style = document.createElement("style"); // font-weight: bold; style.textContent = ` .multi-select-container { position: relative; width: 300px; } .title { margin-bottom: 5px; } .separator { border-top: 1px solid black; margin-bottom: 1px; } .selected-options-box { border: 0; height: 40px; font-size: 14px; background: #e9e9ed; position: relative; cursor: pointer; } .selected-options-box::after { content: "⌄"; font-size: 30px; position: absolute; right: 10px; top: 50%; transform: translateY(-75%); } .selected-options-box.open::after { transform: translateY(-50%) rotate(180deg); } .selector-container { display: none; position: absolute; width: 100%; background-color: white; border: 1px solid #ddd; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 9999 !important; padding: 10px; } .selector-container.open { display: block !important; } .search-input { padding: 5px; border-radius: 4px; border: 1px solid #ccc; width: calc(100% - 12px); margin-bottom: 10px; } .select-controls { display: flex; justify-content: space-between; margin-bottom: 10px; width: 100%; box-sizing: border-box; } .select-all, .deselect-all { background-color: grey; border: none; color: white; padding: 10px; text-align: center; cursor: pointer; width: 48%; box-sizing: border-box; } .select-options { max-height: 10em; overflow-y: auto; overflow-x: hidden; } .option { border-bottom: 1px solid #ccc; padding: 5px; } .option label { display: flex; align-items: center; } .option label::before { content: " "; display: inline-block; width: 15px; height: 15px; margin-right: 5px; } .option input[type="checkbox"] { display: none; } .option input[type="checkbox"]:checked + label::before { content: "✔"; color: green; } `; document.head.appendChild(style); updateSelectedOptionsBox(); // Initial update of selectedOptionsBox return container; }37:[] 2f:{"title":"Scrolling Multi-select","cells":[{"id":0,"value":"# Scrolling Multi-select","pinned":false,"hidden":false,"mode":"md"},{"id":189,"value":"import {ScrollingMultiSelect} from '@brayden-youngberg/scrolling-multi-select'","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"viewof selections = ScrollingMultiSelect(\n [\n {\n label: \"Realllllllllllllllllly super duper Loooong Name\",\n value: \"1\",\n somethingelse: \"ghgh\"\n },\n { label: \"Option 2\", value: \"2\" },\n { label: \"Option 3\", value: \"3\" },\n { label: \"Option 4\", value: \"4\" },\n { label: \"Option 5\", value: \"5\" },\n { label: \"Option 6\", value: \"6\" },\n { label: \"Option 7\", value: \"7\" },\n { label: \"Option 8\", value: \"8\" }\n ],\n { label: \"Select (Objects)\", format: (d) => d }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"selections","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"viewof val = ScrollingMultiSelect(\n [\"happy\", \"test\", \"list\", \"hello\", \"world\"],\n \"Select (list)\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"val","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"ScrollingMultiSelect([\"happy\", \"test\", \"list\", \"hello\", \"world\"], {\n label: \"Select (list)\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"viewof form = Inputs.form([\n ScrollingMultiSelect([\"happy\", \"test\", \"list\", \"hello\", \"world\"], {\n label: \"Select (list)\"\n }),\n ScrollingMultiSelect(\n [\n { lab: \"o1\", val: \"1\" },\n { lab: \"Option 2\", val: \"2\" },\n { lab: \"Option 3\", val: \"3\" },\n { lab: \"Option 4\", val: \"4\" },\n { lab: \"Option 5\", val: \"5\" },\n { lab: \"Option 6\", val: \"6\" },\n { lab: \"Option 7\", val: \"7\" },\n { lab: \"Option 8\", val: \"8\" }\n ],\n {\n label: \"Select (Objects)\",\n Objformat: { label: \"lab\", value: \"val\" },\n values: [\"5\", \"6\"]\n }\n )\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"form","pinned":true,"hidden":false,"mode":"ojs"},{"id":503,"value":"Inputs.bind(\n ScrollingMultiSelect([\"happy\", \"test\", \"list\", \"hello\", \"world\"], {\n label: \"Select (list)\",\n values: [\"happy\", \"world\"]\n }),\n viewof test\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"viewof test = ScrollingMultiSelect([\"happy\", \"test\", \"list\", \"hello\", \"world\"], {\n label: \"Select (list)\",\n values: [\"happy\", \"world\"]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"test","pinned":true,"hidden":false,"mode":"ojs"},{"id":160,"value":"viewof selection_objTest = ScrollingMultiSelect(\n [\n { lab: \"o1\", val: \"1\" },\n { lab: \"Option 2\", val: \"2\" },\n { lab: \"Option 3\", val: \"3\" },\n { lab: \"Option 4\", val: \"4\" },\n { lab: \"Option 5\", val: \"5\" },\n { lab: \"Option 6\", val: \"6\" },\n { lab: \"Option 7\", val: \"7\" },\n { lab: \"Option 8\", val: \"8\" }\n ],\n {\n label: \"Select (Objects)\",\n Objformat: { label: \"lab\", value: \"val\" },\n values: [\"5\", \"6\"]\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"selection_objTest","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"viewof pass_map = ScrollingMultiSelect(\n new Map([\n [\"Short\", 8],\n [\"Tall\", 12],\n [\"Grande\", 16],\n [\"Venti\", 20]\n ]),\n {\n format: (v) => {\n console.log(v);\n return v.toUpperCase();\n }\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"pass_map","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":319,"value":"## Collapsible version?","pinned":false,"hidden":false,"mode":"md"},{"id":321,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":598,"value":"viewof value = ScrollingMultiSelect_collapsible(\n new Map([\n [\"Baseline\", \"historic\"],\n [\"2040\", \"2021_2040\"],\n [\"2060\", \"2041_2060\"],\n [(\"2070\", \"2042_2060\")],\n [(\"2080\", \"2044_2060\")],\n [(\"2090\", \"2046_2060\")]\n ]),\n {\n label: \"Time Period\",\n format: (v) => \"___\" + v\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":604,"value":"value","pinned":false,"hidden":false,"mode":"ojs"},{"id":648,"value":"ScrollingMultiSelect_collapsible(\n new Map([\n [\"Baseline\", \"historic\"],\n [\"2040\", \"2021_2040\"],\n [\"2060\", \"2041_2060\"]\n ]),\n { values: value, label: \"Time Period\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"viewof pass_mapC = {\n const multiSel = ScrollingMultiSelect_collapsible([1, 2, 3, 4, 5], {\n format: (v) => {\n return v.toUpperCase();\n },\n selectAll_alias: 1,\n label: \"Test with collapse\",\n values: mutable mut_vals\n });\n multiSel.addEventListener(\"input\", () => {\n mutable mut_vals = multiSel.value;\n });\n return multiSel;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"Bind doesn't worl, but alternative of mutable vals","pinned":false,"hidden":false,"mode":"md"},{"id":510,"value":"viewof values = {\n let multi_select = ScrollingMultiSelect_collapsible([1, 2, 3, 4], {\n format: (v) => {\n return v.toString();\n },\n label: \"Test with collapse\",\n values: mut_vals\n });\n\n multi_select.addEventListener(\"change\", (event) => {\n console.log(multi_select.value);\n mutable mut_vals = multi_select.value;\n });\n return multi_select;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"mutable mut_vals = [1, 2, 3]","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"## modified version from \nNote this doesn't work wit hthe atlas css\n","pinned":false,"hidden":false,"mode":"md"},{"id":397,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"viewof d = dropdownInput({\n inputLabel: \"Positions\",\n inputId: \"positionsTest\",\n placeholderText: \"Select Positions...\",\n options: [\n { value: \"C\", label: \"Center\" },\n { value: \"PF\", label: \"Power Forward\" },\n { value: \"SG\", label: \"Shooting Guard\" },\n { value: \"PG\", label: \"Point Guard\" }\n ],\n selected: [\"C\", \"PF\", \"SG\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"Inputs.bind(\n dropdownInput({\n inputLabel: \"Positions\",\n inputId: \"positionsTest\",\n placeholderText: \"Select Positions...\",\n options: [\n { value: \"C\", label: \"Center\" },\n { value: \"PF\", label: \"Power Forward\" },\n { value: \"SG\", label: \"Shooting Guard\" },\n { value: \"PG\", label: \"Point Guard\" }\n ],\n selected: [\"C\", \"PF\", \"SG\"]\n }),\n viewof d\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":577,"value":"-----\n\n-----\n\n-----\n\n-----\n\n-----","pinned":false,"hidden":false,"mode":"md"},{"id":609,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":613,"value":"viewof bind1 = ScrollingMultiSelect_collapsible2(\n new Map([\n [\"Baseline\", \"historic\"],\n [\"2040\", \"2021_2040\"],\n [\"2060\", \"2041_2060\"]\n ]),\n {\n label: \"Time Period\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":616,"value":"viewof bind2 = Inputs.bind(\n ScrollingMultiSelect_collapsible2(\n new Map([\n [\"Baseline\", \"historic\"],\n [\"2040\", \"2021_2040\"],\n [\"2060\", \"2041_2060\"]\n ]),\n {\n label: \"Time Period\"\n }\n ),\n viewof bind1\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":623,"value":"bind2","pinned":false,"hidden":false,"mode":"ojs"},{"id":628,"value":"bind1","pinned":false,"hidden":false,"mode":"ojs"},{"id":620,"value":"-----\n\n-----\n\n-----\n\n-----\n\n-----\n\n-----\n\n-----\n","pinned":false,"hidden":false,"mode":"md"}],"files":"$W37","stdlib":"1","titling":"auto"}