style interaction with states
Closed this issue · 3 comments
- highlight state that is currently selected
- hover / depressed styling on states
I took a first pass at this.
It works for the hover, and click on the state path.. Depressed doesnt work with svg easily using active, but the delay between hover to click to active orange color is so fast maybe this is skippable.
Screen shots:
Why didn't I open a pull request.
This doesn't work in the following scenario:
User clicks a state, opens the modal, and clicks one of the arrows to go to the next state.
Expected: That state would turn orange
Actual: Nothing.
The clicked(d) function in map.js expects this item called d. These seem to kinda represent a state? I can't find a global array of them so we can execute a clicked(d) call in nextState() and previousState() in modal-controller.js.
I tried looking at the g variable in the chrome console but can't figure out where the array of d items lives. Do you know or can you think of another way to get access to the d object? Checking for the id of the d in the nextState() function should be easy once we have the list of objects. Perhaps there is a way to create this array in initMap in map.js?
Cheers
It looks like the US variable here https://github.com/DevProgress/maps-showcase/blob/master/site/assets/js/map.js#L16
Contains all the state information, as you can see here
See how the states have an id attribute? We store the current selected state id here https://github.com/DevProgress/maps-showcase/blob/master/site/assets/js/modal-controller.js#L3
Scoping might be a little tricky (you may have to pull one of these variables of their current scope) but you should be able to loop over every state in US until you get to the one with the ID that matches. I think the US objects are the same as d objects, but I'm not 100% sure.
I think the states in the us object and the d objects are different? states have arcs and d objects have coordinates.
I think I found a workaround. We don't actually need d. We can use g and filter via id position and get the d element that way, opening a pr. Thanks for the suggestion!