Rebuild topo zoom as full screen modal

[brendanheywood]

I'm still stalled half way through fixing the topo zoom bug #1911 but the more I dig and think about it, the less I want to just squish that bug and the more I want to rework this UI bit more deeply. I still think I need to finish #1911 regardless so this is the followup issue.

What I think we really want is not so much a topo zoom but a topo modal. The difference is that when you are in the modal the rest of the page in inaccessible. This also has a lot of crossover with the direction the app mockups are heading so I won't kick this off for a while until that settles so we have some consistency. If there is code reuse then great, but that's bonus points.

Usability wise it won't really be that much different, but under the hood I think it will leave the existing topo as is and just create an overlay with a new cloned fullscreen topo. Being modal and fullscreen allows us to avoid a bunch of existing issues with the current UI and opportunity to make things easier. Rough list of interactions, a few might need rethinking once I get knee deep into it testing.

• [ ] when you zoom, full screen topo, with gray background covering the rest of the page
• [ ] esc goes back to list view
• [ ] x close modal button
• [ ] normal hover and click selects routes, these sync and stay selected in listview when you close the modal
• [ ] because the main list view is obscured, if you hover / touch on a route we show that routes details somewhere, probably top so it's not obscured by fat fingers
• [ ] mouse wheel zooms in and out of topo centered on where the pointer is
• [ ] as you zoom the topo it rerenders so the lines are the same absolute thickness regardless of the zoom level. ie as you zoom in the lines get relatively thinner compared to the photo so they obscure less
• [ ] re-render on page orientation change / resize

Touch

• [ ] pinch zoom in and out of topo.
• [ ] If you pinch out over a threshold then it closes the topo
• [ ] double tap zooms in / then back out
• [ ] single finger drag pans
• [ ] single tap on route selects / deselects
• [ ] need to test: on mobile zoom in to full height so width is offscreen, focused on where you tapped

Style wise something like when you zoom in on a photo here: https://www.theguardian.com/australia-news/2017/jul/23/indigenous-australians-carbon-farming-canada#img-4

A really great example is this: https://www.slideshare.net/mobile/Branded3/searchleeds-2017-jon-myers-chief-growth-office-deep-crawl-prepare-your-website-for-mobilefirst-indexing

To see what I mean load this on a mobile device, then rotate to landscape and see it to fullscreen. Tap on the slides to toggle actions and progress.

Bonus points or for later:

• [ ] If you pinch out, it closes the topo
• [ ] if 100% zoom and you swipe up or down it closes the modal
• [ ] on big screens show the route list in the right, toggle this on and off. If off the highlighted route appears at the bottom
• [ ] keyboard nav, up / down highlight routes. space toggles selection, page up / down or shift arrows next / prev topo

Things I like:

http://fat.github.io/zoom.js/

https://openseadragon.github.io/

[killakalle]

This would be great to have!

[longb1]

Would be really helpful.