Implement docked popups

[nateirwin]

This will bring consistency with how we're doing "popups" in Mobile, and will make it much easier to manage the limited available space on interactive maps. We should basically mirror the design we've implemented in Mobile.

[nateirwin]

This is working fairly well. One big piece of feedback though:

• [x] Popups for locations that have minimal content have too much empty whitespace in them. We should figure out what to do for these. In Mobile, if a popup doesn't have a photo, it's vertical height is much smaller. We could play around with this idea or try something different.

[nateirwin]

• [x] Also, the popup should slide back down and hide when a location is deselected. Related to this: https://github.com/trailheadlabs/outerspatial-map-library/issues/148.

[nateirwin]

Removed.

[ryanjhodge]

Yea I had been considering have it slide in from the left, if the screen width is greater than the height.

[nateirwin]

Thinking it's not a good idea to have two different behaviors, so if sliding in from the left works better, we should probably just go with that.

[nateirwin]

Google Maps does this well. They slide in more info from the left and the panel takes up the full width/height of the screen on mobile. Think we can emulate the basic behavior for now. I even think there may be a Leaflet plugin or two out there that do this.

[ryanjhodge]

@nateirwin , Is this what you mean?

Portrait

Landscape

[nateirwin]

Yep, and if the width of the available space is smaller, the panel just takes up 100% of the height and width.

Probably makes sense to do a quick and dirty prototype and then put it out so we can do a bit of testing. That way we don't spend a bunch of time on this until we're sure it's the right approach.

[ryanjhodge]

Okay, just pushed a basic implementation. We just need to think about what we want to do with the close button. Can also look into closing docked popup on swipe left event on mobile.

[nateirwin]

I like it! I'm feeling unsure on which approach is better though. What are your thoughts?

After reviewing Google Maps, it looks like they actually do use a hybrid approach. They use the left-hand panel when there's more screen space then fallback to a bottom panel when on mobile devices.

Let's take a little while to think about this before moving forward with either approach.

[nateirwin]

Ok, if it's not too difficult, I think we should support both the bottom and left docked positions and make the placement configurable. My thinking is each option has its own strengths and we may want to use a combination of the two in the future (e.g. use the left-hand docked popup if there's more screen real estate and use the bottom docked popup if there's less real estate).

How does that sound, @ryanjhodge? If it's difficult to support both, I think we should go with the left-hand docked popup.

Either way, the left-hand docked popup still needs some work:

• [ ] I think we should add a collapse/show button that's similar to Google Maps' (but styled with the same blue color as the current popup close button).
• [ ] And we should detect if a location that's clicked/tapped exists underneath the popup window after it expands and reposition the map so it still displays if it does.
• [ ] And lastly we should bump the left controls over so they're still visible even when the popup is showing.

[ryanjhodge]

I dont think it would be too difficult to support both

What would determine where the popup would show up? I can think of these two cases:

If the map div's width is less than 2x the width of the popup, then the popup should come up from the bottom. -or- If the map div's height is larger than its width, go with bottom popup, and vice versa.

[nateirwin]

Without thinking about it too much, I like the second option :-)

I think we should actually just play around with Google Maps to see how they handle the different layouts and screen widths. In general, it seems like they default to the left-hand popup and then show the bottom popup on "mobile" devices (or smaller viewports).

So yeah, maybe we should go with the second option ("if the map div's height is larger than its width, go with bottom popup"), but also modify the behavior of the bottom popup so it behaves more like the Google Maps bottom popup. So if the bottom popup is shown but there isn't much vertical screen real estate available, just show a "preview" of the popup and then, when the user clicks/taps on it, expand it to take up 100% of the height and width with a close button.

In some ways, this is actually more in line with what we're doing with OuterSpatial iOS. When you tap on a location, the popup slides up and displays the location details (name, location type, parent area, and a "cut-off" preview of the image of the location). Then, if you tap on the popup, it takes you to the location detail screen.

[nateirwin]

This has been rolled out. Still haven't implemented the slide-in from bottom, but I did optimize the left-hand slide in to work fairly well on mobile. Going to leave this open until a full implementation is in place though.

[nateirwin]

Ok, I spent more time today solidifying this. I split out the bottom/preview popup on mobile issue, as it's not critical at the moment: https://github.com/trailheadlabs/outerspatial-map-library/issues/160.

[ryanbranciforte]

@nateirwin Quick question on this. Will this now propagate to all OuterSpatial interactive maps? If not, can you remind me of the process/timing?

[nateirwin]

Definitely not. Not sure why we'd push it out to all the maps? First of all, it hasn't really been tested. Secondly, I'm not at all convinced it's the best approach — especially for mobile. Guess I see no reason to roll it out to other maps at this point. Unless we have a customer requirement?