30:T16da,function dropdownInput(config = {}) { //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(); return form; } 31:T6a0,dropdownCSS = html` `32:[{"id":"2c596952d55f7dfdce218bfc072dd10626d9b2a16e834fd24bfeb91b3a6c0f3b0c1453f9eac08551a4da07d9d09bd09fe93ae03127531e1ca35b1e6568c9e692","href":"https://static.observableusercontent.com/files/2c596952d55f7dfdce218bfc072dd10626d9b2a16e834fd24bfeb91b3a6c0f3b0c1453f9eac08551a4da07d9d09bd09fe93ae03127531e1ca35b1e6568c9e692","name":"nba_full_stats_2023@1.csv","type":"text/csv","lastModified":1703027389503.476,"size":152527}] 2e:{"title":"Custom Dropdown Multi-Select Input","cells":[{"id":0,"value":"# Custom Dropdown Multi-Select Input\nExperiment to create a custom Observable input to match the pickerInput from [shinyWidgets](https://shinyapps.dreamrs.fr/shinyWidgets/). ","pinned":false,"hidden":false,"mode":"md"},{"id":775,"value":"To try this out in other notebooks, you will need to import the function and the CSS blocks. You will also need to call the dropdownCSS function in a code chunk for it to render the styling.\n\nimport {dropdownInput, dropdownCSS} from '@tashapiro/dropdown-input'","pinned":false,"hidden":false,"mode":"md"},{"id":682,"value":"## Some Examples","pinned":false,"hidden":false,"mode":"md"},{"id":587,"value":"An example with just text labels. Below is a dropdown for player positions.","pinned":false,"hidden":false,"mode":"md"},{"id":572,"value":"viewof selectPositionTest = dropdownInput({\n inputLabel: \"Positions\",\n inputId: \"positionsTest\",\n placeholderText: 'Select Positions...',\n options: [{value:'C', label:'Center'},\n {value:'PF', label: 'Power Forward'}, \n {value:'SG', label: 'Shooting Guard'},\n {value: 'PG', label: 'Point Guard'}],\n selected: ['C','PF','SG']\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":867,"value":"Values returned:","pinned":false,"hidden":false,"mode":"md"},{"id":596,"value":"selectPositionTest","pinned":false,"hidden":false,"mode":"ojs"},{"id":856,"value":"An example with some html labels. Here's a test with teams and team logos. ","pinned":false,"hidden":false,"mode":"md"},{"id":930,"value":"Function to create an HTML label for basketball teams.","pinned":false,"hidden":false,"mode":"md"},{"id":917,"value":"function teamLogo(teamAbbr, teamName){\n const base_url = 'https://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/'\n const team_div = '

' + teamName + '

'\n return team_div\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":853,"value":"viewof selectTeamTest = dropdownInput({\n inputLabel: \"Teams\",\n inputId: \"teamsTest\",\n placeholderText: 'Select Teams...',\n options: [{value:'ATL', label: teamLogo(\"ATL\", \"Hawks\")}, {value:'CHI', label: teamLogo(\"CHI\", \"Bulls\")}, {value:'DAL', label: teamLogo(\"DAL\", \"Mavericks\")}],\n selected: ['ATL','CHI','DAL']\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":875,"value":"Values returned:","pinned":false,"hidden":false,"mode":"md"},{"id":864,"value":"selectTeamTest","pinned":false,"hidden":false,"mode":"ojs"},{"id":635,"value":"
\n## Inputs in Action \nTesting inputs with an table output.","pinned":false,"hidden":false,"mode":"md"},{"id":639,"value":"

${viewof selectTeam}

${viewof selectPosition}

${Inputs.table(filteredStats)}

","pinned":false,"hidden":false,"mode":"html"},{"id":695,"value":"viewof selectTeam = dropdownInput({\n inputLabel: \"Teams\",\n inputId: \"team\",\n placeholderText: 'Select Teams...',\n options: teamImages,\n selected: ['ATL','BKN','LAC']\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":661,"value":"viewof selectPosition = dropdownInput({\n inputLabel: \"Positions\",\n inputId: \"position\",\n placeholderText: 'Select Positions...',\n options: [{value:'C', label:'Center'},\n {value:'PF', label: 'Power Forward'}, \n {value:'SG', label: 'Shooting Guard'},\n {value: 'PG', label: 'Point Guard'}],\n selected: ['C','PF','SG']\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":641,"value":"filteredStats = nbaStats.filter(d => selectTeam.includes(d.team_abbr) && selectPosition.includes(d.pos))","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"Function. Custom function for multi-select dropdown","pinned":true,"hidden":false,"mode":"md"},{"id":4,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":714,"value":"CSS. Essential styling for dropdown input below. For this to work in a separate notebook, you will need to import this too.","pinned":false,"hidden":false,"mode":"md"},{"id":169,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":564,"value":"Creating the array of options for basketball teams","pinned":false,"hidden":false,"mode":"md"},{"id":411,"value":"base_url = 'https://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/'","pinned":true,"hidden":false,"mode":"ojs"},{"id":415,"value":"teams = [\n { value: 'ATL', label: 'ATL Hawks' },\n { value: 'BKN', label: 'BKN Nets' },\n { value: 'BOS', label: 'BOS Celtics' },\n { value: 'CHI', label: 'CHI Bulls' },\n { value: 'DAL', label: 'DAL Mavericks' },\n { value: 'DEN', label: 'DEN Nuggets' },\n { value: 'LAC', label: 'LA Clippers' },\n { value: 'LAL', label: 'LA Lakers' },\n { value: 'PHI', label: 'PHI 76ers' },\n { value: 'PHO', label: 'PHO Suns' },\n { value: 'SAS', label: 'SA Spurs' },\n { value: 'TOR', label: 'TOR Raptors' },\n ]","pinned":true,"hidden":false,"mode":"ojs"},{"id":417,"value":"teamImages = teams.map(d => {\n return { ...d, label: teamLogo(d.value, d.label)};\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":720,"value":"Import data for table output","pinned":false,"hidden":false,"mode":"md"},{"id":637,"value":"nbaStats = await FileAttachment(\"nba_full_stats_2023@1.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":703,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W32","stdlib":"1","titling":"auto"}