2e:null 2f:["$","title",null,{"children":"Custom Dropdown Multi-Select Input | Tanya Shapiro | Observable"}] 34: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; } 35:T6a0,dropdownCSS = html` `36:[{"id":"2c596952d55f7dfdce218bfc072dd10626d9b2a16e834fd24bfeb91b3a6c0f3b0c1453f9eac08551a4da07d9d09bd09fe93ae03127531e1ca35b1e6568c9e692","href":"https://static.observableusercontent.com/files/2c596952d55f7dfdce218bfc072dd10626d9b2a16e834fd24bfeb91b3a6c0f3b0c1453f9eac08551a4da07d9d09bd09fe93ae03127531e1ca35b1e6568c9e692","name":"nba_full_stats_2023@1.csv","type":"text/csv","lastModified":1703027389503.476,"size":152527}] 32:{"id":"286cb08074da9b8f","slug":"dropdown-input","title":"Custom Dropdown Multi-Select Input","thumbnail":"03ff92fa09da466be13fbd7110fe95fc151064cbba0a74380786353f00e4a862","access_level":"public","create_time":"$D2023-12-19T13:52:14.340Z","update_time":"$D2024-06-13T15:53:11.414Z","view_time":null,"first_public_time":"$D2023-12-19T22:54:47.143Z","has_unpublished_edits":null,"fork":false,"stars":11,"starred":false,"owner":{"type":"team","id":"230f604926360997","login":"tashapiro","name":"Tanya Shapiro","avatar_url":"https://avatars-next.observableusercontent.com/28b8518718dc3e70bed3a8256215864c8ac22777155e21dd5564f285665f60ae","tier":"starter_2024"},"version":989,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fccfb83ec070004a","login":"tashapiro","name":"Tanya Shapiro","avatar_url":"https://avatars-next.observableusercontent.com/28b8518718dc3e70bed3a8256215864c8ac22777155e21dd5564f285665f60ae","tier":null}],"members":[{"type":"individual","id":"fccfb83ec070004a","login":"tashapiro","name":"Tanya Shapiro","avatar_url":"https://avatars-next.observableusercontent.com/28b8518718dc3e70bed3a8256215864c8ac22777155e21dd5564f285665f60ae","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":682,"value":"## Some Examples","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":587,"value":"An example with just text labels. Below is a dropdown for player positions.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":867,"value":"Values returned:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":596,"value":"selectPositionTest","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":856,"value":"An example with some html labels. Here's a test with teams and team logos. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":930,"value":"Function to create an HTML label for basketball teams.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":875,"value":"Values returned:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":864,"value":"selectTeamTest","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"
\n## Inputs in Action \nTesting inputs with an table output.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":639,"value":"

${viewof selectTeam}

${viewof selectPosition}

${Inputs.table(filteredStats)}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"filteredStats = nbaStats.filter(d => selectTeam.includes(d.team_abbr) && selectPosition.includes(d.pos))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"Function. Custom function for multi-select dropdown","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":169,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"Creating the array of options for basketball teams","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":411,"value":"base_url = 'https://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"teamImages = teams.map(d => {\n return { ...d, label: teamLogo(d.value, d.label)};\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":720,"value":"Import data for table output","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":637,"value":"nbaStats = await FileAttachment(\"nba_full_stats_2023@1.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"nbaStats","database":"$undefined"},{"id":703,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"