-
Notifications
You must be signed in to change notification settings - Fork 5
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
James lowenthal/134/replace dropdown with choices js #176
Changes from 2 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import Choices from "choices.js"; | ||
import "choices.js/public/assets/styles/choices.css"; | ||
import scoreCardsData from "../../data/score-cards.json"; | ||
|
||
export const DROPDOWN = new Choices("#city-choice", { | ||
allowHTML: false, | ||
itemSelectText: "Select", | ||
searchEnabled: true, | ||
}); | ||
|
||
const setUpDropdown = (initialCityId, fallBackCityId) => { | ||
const cities = Object.entries(scoreCardsData).map(([id, { Name }]) => ({ | ||
value: id, | ||
label: Name, | ||
})); | ||
DROPDOWN.setChoices(cities); | ||
if (Object.keys(scoreCardsData).includes(initialCityId)) { | ||
DROPDOWN.setChoiceByValue(initialCityId); | ||
} else { | ||
DROPDOWN.setChoiceByValue(fallBackCityId); | ||
} | ||
}; | ||
|
||
export default setUpDropdown; |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -7,6 +7,7 @@ import setUpIcons from "./fontAwesome"; | |
import scoreCardsData from "../../data/score-cards.json"; | ||
import setUpAbout from "./about"; | ||
import setUpShareUrlClickListener from "./share"; | ||
import setUpDropdown, { DROPDOWN } from "./dropdown"; | ||
|
||
const parkingLots = import("../../data/parking-lots/*"); // eslint-disable-line | ||
|
||
|
@@ -48,21 +49,6 @@ const STYLES = { | |
}, | ||
}; | ||
|
||
const addCitiesToToggle = (initialCityId, fallbackCityId) => { | ||
const cityToggleElement = document.getElementById("city-choice"); | ||
let validInitialId = false; | ||
Object.entries(scoreCardsData).forEach(([id, { Name }]) => { | ||
if (id === initialCityId) { | ||
validInitialId = true; | ||
} | ||
const option = document.createElement("option"); | ||
option.value = id; | ||
option.textContent = Name; | ||
cityToggleElement.appendChild(option); | ||
}); | ||
cityToggleElement.value = validInitialId ? initialCityId : fallbackCityId; | ||
}; | ||
|
||
/** | ||
* Create the initial map object. | ||
* | ||
|
@@ -138,7 +124,8 @@ const loadParkingLot = async (cityId, parkingLayer) => { | |
.getLayers() | ||
.find((city) => city.feature.properties.id === cityId); | ||
if (!alreadyLoaded) { | ||
parkingLayer.addData(await parkingLots[`${cityId}.geojson`]()); | ||
const lots = await parkingLots; | ||
parkingLayer.addData(await lots[`${cityId}.geojson`]()); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why this change? Btw the dynamic import is so that we lazily load the GeoJSON file because they are large and loading everything eagerly slows down the site too much. Implemented recently in #142. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm reverting it. I thought it solved an issue I was having with an error I was getting in the console but I can't seem to reproduce the error. I'm finding it a bit difficult to make sure the version of the app I have served is up to date with my changes and I've gotten what I think is a corrupted cache a number of times (weird segfauls/mutex lock complaints?). Anyway sorry that crept in. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Hm, possibly Parcel bugs. Sometimes it can help to There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yeah that's what I ended up doing. |
||
parkingLayer.bringToBack(); // Ensures city boundary is on top") | ||
} | ||
}; | ||
|
@@ -198,7 +185,7 @@ const setUpAutoScorecard = async (map, cities, parkingLayer) => { | |
} | ||
}); | ||
if (centralCity) { | ||
document.getElementById("city-choice").value = centralCity; | ||
DROPDOWN.setChoiceByValue(centralCity); | ||
setScorecard(centralCity, cities[centralCity]); | ||
} | ||
}); | ||
|
@@ -280,7 +267,7 @@ const setUpSite = async () => { | |
setUpIcons(); | ||
|
||
const initialCityId = extractCityIdFromUrl(window.location.href); | ||
addCitiesToToggle(initialCityId, "atlanta-ga"); | ||
setUpDropdown(initialCityId, "atlanta-ga"); | ||
setUpAbout(); | ||
|
||
const map = createMap(); | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nit: we've been using
em
rather thanpx
. Web dev is not my specialty, but my understanding is thatem
works better for responsive design and things like retina displays. https://www.reddit.com/r/webdev/comments/wlnt6e/should_i_use_emrem_instead_of_px/There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Honestly I'm finding it difficult to redo my styling using em without breaking the layout. I've changed for the gap and media query since that seemed to work fine. I'll confess my CSS workflow (as well as many of the webdevs I know) is basically hack on it until it does what I want but I won't tell you I understand it particular well. This url that was in the thread you sent seems pretty good for understanding it better: https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/.
It looks like in most cases you'd switch back and forth anyway. That all being said I'd say most of the frontend codebases I've seen use a mix of the two and px is still used in many places I don't think many web-devs would agree with "never use px" but maybe I'm wrong.
If it's obvious to you how I can redo this layout using em I'm happy to make the changes (it doesn't seem to be as simple as calculating em and subbing those values in)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That's fine with me. Thanks, James!
Fwiw, I like
rem
because it's always the same size. Easier to reason about thanem
.