2f:T51f,30:T706,function dropdownButton(buttonName, content) { function toggleDropdown() { const dropdown = document.getElementById("dropdownContent"); // Check the current display property if (dropdown.style.display === "none" || dropdown.style.display === "") { dropdown.style.display = "block"; // Display the dropdown if it's hidden // Add an event listener to the document body to detect clicks document.body.addEventListener('click', closeDropdownOnClickOutside); } else { dropdown.style.display = "none"; // Hide the dropdown if it's displayed // Remove the event listener when the dropdown is hidden document.body.removeEventListener('click', closeDropdownOnClickOutside); } } function closeDropdownOnClickOutside(event) { const dropdown = document.getElementById("dropdownContent"); const button = document.querySelector('.dropbtn'); // Check if the click is outside the dropdown and button if (!dropdown.contains(event.target) && event.target !== button) { dropdown.style.display = "none"; // Hide the dropdown document.body.removeEventListener('click', closeDropdownOnClickOutside); } } const dropdownButton = htl.html` ` return dropdownButton}31:Ta8b,function checkbox(config = {}) { let { value: formValue, title, description, submit, orientation = "horizontal", disabled, options } = Array.isArray(config) ? { options: config } : config; options = options.map(o => typeof o === "string" ? { value: o, label: o } : o ); const buttons = html`

`; const selectAllBtn = buttons.querySelector('#selectAllBtn'); selectAllBtn.addEventListener('click', () => { const checkboxes = form.querySelectorAll('input[type="checkbox"]'); checkboxes.forEach(checkbox => { checkbox.checked = true; }); updateFormValue(); }); const clearAllBtn = buttons.querySelector('#clearAllBtn'); clearAllBtn.addEventListener('click', () => { const checkboxes = form.querySelectorAll('input[type="checkbox"]'); checkboxes.forEach(checkbox => { checkbox.checked = false; }); updateFormValue(); }); const updateFormValue = () => { const checkboxes = form.querySelectorAll('input[type="checkbox"]'); const selectedValues = Array.from(checkboxes) .filter(checkbox => checkbox.checked) .map(checkbox => checkbox.value); form.value = selectedValues; // Trigger the input event to signal the value change form.dispatchEvent(new Event('input', { bubbles: true })); }; const form = input({ type: "checkbox", title, description, submit, getValue: input => { if (input.length) return Array.prototype.filter .call(input, i => i.checked) .map(i => i.value); return input.checked ? input.value : false; }, form: html` ` }); form.output.remove(); return form; }32:[{"id":"d5e8cffb480d7046be4c90c4a38cb6dcaca3d52afc144c045cbffc65ca719d6387228295e8f268c363dd48074a596dc5eaf6cdaf0b4236fc17fbf1fa636e73a8","href":"https://static.observableusercontent.com/files/d5e8cffb480d7046be4c90c4a38cb6dcaca3d52afc144c045cbffc65ca719d6387228295e8f268c363dd48074a596dc5eaf6cdaf0b4236fc17fbf1fa636e73a8","name":"nba_full_stats.csv","type":"text/csv","lastModified":1702057521628.687,"size":134753}] 2d:{"title":"NBA Player Table","cells":[{"id":0,"value":"# NBA Player Table","pinned":false,"hidden":false,"mode":"md"},{"id":358,"value":"viewof searchData = Inputs.search(filteredStats)","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"

\n \n

${nbaTable()}\n

\n\n","pinned":false,"hidden":false,"mode":"html"},{"id":34,"value":"$2f","pinned":false,"hidden":false,"mode":"html"},{"id":334,"value":"viewof selectedPositions = Inputs.checkbox(positions, {label: \"Position\", value: positions})","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"selectedTeams","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"function playerImage(name) {\n var data = nba_stats.filter(d => d.name === name);\n var player_image = data[0].player_image\n var pos = data[0].pos\n var team_abbr = data[0].team_abbr\n var team_logo = data[0].team_logo\n return htl.html`

${name}

${pos} • ${team_abbr}

`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":222,"value":"nbaTable = () => { return Inputs.table(searchData, { height:470,\n columns: [\"name\", \"team_abbr\",\"pos\",\"g\",\"fg\",\"fga\",\"fg_percent\",\"pts\"],\n header: {\n name: \"PLAYER\",\n team_abbr: \"TEAM\",\n pos: \"POS\",\n g: \"GP\",\n fg: \"FGM\",\n fga: \"FGA\",\n fg_percent: \"FG %\",\n pts: \"PTS\"\n },\n align: {\n pos:\"center\",\n team_abbr: \"center\"\n },\n width: {\n name: 230\n },\n format: {\n name: x => playerImage(x)\n }\n })}","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"Data set with Basketball Teams.","pinned":false,"hidden":false,"mode":"md"},{"id":40,"value":"base_url = \"https://a.espncdn.com/combiner/i?img=/i/teamlogos/nba/500/\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":324,"value":"positions = [...new Set(nba_stats.map(d => d.pos))].sort()","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"teams = [{value: 'ATL', label:'Atlanta Hawks'},\n {value: 'DEN', label:'Denver Nuggets'},\n {value: 'BOS', label: 'Boston Celtics'},\n {value: 'LAC', label: 'LA Clippers'},\n {value: 'GSW', label: 'GS Warriors'},\n {value: 'LAL', label: 'LA Lakers'},\n {value: 'PHO', label: 'Phoenix Suns'},\n {value: 'OKC', label: 'OKC Thunder'},\n {value:'DAL', label: 'Dallas Mavericks'}]","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"Map data to create HTML labels for checkbox inputs.","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"teamFormat = teams.map(d => ({ value: d.value, label: \"

\"+d.label+\"\"}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"viewof selectedTeams = checkbox({\n options: teamFormat,\n value: [\"ATL\", \"LAC\"],\n orientation: 'vertical'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"Modified version of Jeremy Ashkenas's checkbox input.","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import {input} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"Custom styling. Includes styling to create bold labels for selected checkbox values.","pinned":false,"hidden":false,"mode":"md"},{"id":221,"value":"nba_stats = await FileAttachment(\"nba_full_stats.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":229,"value":"filteredStats = nba_stats.filter(d => selectedTeams.includes(d.team_abbr) & selectedPositions.includes(d.pos))","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}