Modal fix

[circlingthesun]

Makes off screen modals accessible by opening a non fixed window at the scroll offset position on screen. Fixes #87

[jbrowning]

Explanation, please. 😉

[circlingthesun]

From what I've seen, this is what vanilla foundation does. It opens the window at 100px offset from the top of your viewport unless its on mobile, then it opens it at 0px offset because the modal is full screen. 800px is the breakpoint at which the modal opens full screen. It's probably better to use a project wide media query module for this but no such module exists yet.

[jbrowning]

Interesting. I believe this behavior is already handled in Foundation's CSS. For example, if you open the modal as we have it now on the demo site, this behavior is already present:

Was this not working properly with just the scrollY offset?

[circlingthesun]

The problem with the current behaviour is that the positioning is fixed. So if a modal is too big, the bottom content can't be scrolled into view.

[jbrowning]

Yeah I understand. I was referring to the top offset being set to either scrollY or scrollY + 100, depending on the width.

[circlingthesun]

Mmm... I've been running that code for a while on a fork. There must have been a reason why I added that. It seems however that its redundant. I'm actually now getting a gap at the top of a small window, with or without that line :|

[circlingthesun]

I removed the 100px offset. On Firefox there is no space at the top now both on desktop and mobile. On Chrome I get the gap at the top on desktop and mobile :/

[circlingthesun]

So it appears that the 100px offset is necessary. I'm just not sure why Chrome gives me a gap at the top when the screen is mobile size.

[jbrowning]

Yep looks like it. The only thing that bugs me is how we're determining if we're on a small screen. Gonna do some experimentin'.

[circlingthesun]

Have a look at the mediaQueries service in the top bar module.

[jbrowning]

So I did some experimenting with vanilla Foundation, and here's how they solve this: they open the modal window, grab the computed top CSS value, and then quickly close the modal again (see here). This computed top value is then added to the scrollTop() value to compute the offset.

I don't think this is even possible to do in Angular because of the scope lifecycle.

[jbrowning]

And yeah, we need a generalized breakpoint detection service to handle this sort of thing for us. I just realized that we redundant detection in both the mediaQueries and interchangeQueries providers. 😢

[nervetattoo]

So, whats holding this PR back?
I created a mm.foundation.mediaQueries module in #99, we can separate that into a PR that'll get merged first and then base this and #99 on top of that?
I'll be happy to make this happen if we can get it merged asap.

I also agree that the redundant detection should be merged, but hopefully that can happen after moving mediaQueries out to be standalone as lots of other parts depends on it.

[circlingthesun]

When running this on Chrome at a small screen size, the modal opens at a 100px offset. I'm not sure why and haven't taken the time to figure it out. @jbrowning had a look and it looks like vanilla Foundation opens and closes the modal to determine the offset. So this needs a little work. I'm all for merging #99 :)

[nervetattoo]

We can just rip my offset calculation out of #101 where i get the offset by creating a faux modal

It moves one class name to the JS side, but it was required due to animations causing issues in timing the calculation. At the same time, that means it becomes possible to replace the reveal-modal className more easily, should anyone want that type of customisation.

[jbrowning]

@circlingthesun #99 has been merged so would appreciate if you could adapt this to use mm.foundation.mediaQueries 😀

[jbrowning]

@nervetattoo yeah looks like you were doing basically what VF does in #101 to grab the offset.

@circlingthesun this may be the way to go.

[circlingthesun]

While this is certainly a more elegant way to compute the offset, the problem remains. I've had a closer look the issue. At the time the modal is triggered on a small screen the opening position needs to be window.scrollY and the modal does open at that offset. It appears however that after the modal has opened the view port scrolls up resulting in a gap at the top. Any ideas why this happens?

[nervetattoo]

Strange. My testcase works just fine in Chrome (Both stable and canary):

[circlingthesun]

Yeah, I don't have issues with it either, except when I run it on the angular foundation demo page. It might be the page length or some other code that is causing this.

[nervetattoo]

I've debugged it now, it seems its the autofocus code that forces the scroll.
Maybe remove this on small screens, or revisit its timing, or even set the scroll to the correctly measured coord.

[circlingthesun]

@nervetattoo, It seems that there was some transclusion iffyness going on. Focusing on a child element instead fixes the issue. Shot for the pointer! @jbrowning I think that sorts it.

[nervetattoo]

Cool. Is it absolutely guaranteed that there'll be a div element? If not maybe a :first-child selector would be better.

[circlingthesun]

The query resolves to <div ng-transclude></div> in the window template. So unless you modify that, it'll work. The first child resolves to a text element that does not have the focus function, so that won't work.

[jbrowning]

Awesome. Thanks for all your work on this gentlemen. 🍻

[drasill]

Thank you for the fix ! 😄