Refactor: wrap .modal in .blocker (fix #69)#110
Refactor: wrap .modal in .blocker (fix #69)#110xfra35 wants to merge 4 commits intokylefox:masterfrom
Conversation
|
A test demo is visible here. |
|
Cool, thanks for the thoughtful write up. I like it 👍 I think the backwards-incompatible consequences are minor and are worth it:
I think this makes the library better :) I prefer moving as much of the styling into plain CSS as possible, and am all for removing configuration params.
Sounds good to me — we'll just make a note of the compatibility in the README.
That would be MUCH appreciated — thank you! |
|
Here it is. You should be able to merge now. The latest commits include the following changes:
|
|
Is there plans to write a breaking changes section? |
|
That's a good idea. It could fit either in a changelog file or in the releases page. |
|
Awesome :) Yeah I've actually been meaning to add a We're currently at version 0.5.10, so presumably this would bump it to 0.6.0. @xfra35 Would you mind preparing a changelog file? I think then this is good to merge 👍 |
|
@kylefox: Increasing to 0.6.0 is satisfying semver as the first zero indicates the software must be considered unstable. 👍 |
|
Are we only waiting for the |
|
Thanks for bumping this — yes, this is basically just waiting for the |
|
I included the machine-generated Including the right magic words in the commit messages in future will require less cleaning up after running |
|
Hey @joonas-lahtinen, thanks for digging into this! 👍 |
|
Thanks, #133 has been merged! 🍔 |
Hi,
First of all thanks for sharing that plugin. It's light and functional, and that's all we need :)
The only blocking issue is the inability to scroll overflowing content (#69).
@alexgalli (#67) and @pawel-piskorz (#75) suggested two approaches to fix it, which both have the advantage of being simple and backward compatible. They also have some drawbacks:
Here's a third approach, so that you can make your choice ;)
This approach is the one you've been described here. It works well with overflowing content, but it has the disadvantage to break a few things and thus, not to be backward compatible. Here's the list of changes:
.modalis wrapped inside.blocker.modalis horizontally and vertically centered using CSS (cf. the ghost technique described here)overflow: hiddenis applied to the document body when the modal is displayedHere are the consequences of those changes:
.blockercan't be styled in JS only, because of the ghost technique. So it has to appear in the plugin stylesheet. Also, we can't apply opacity on it anymore, now that it contains the modal, so this has to be replaced with CSSrgba(). That also means we can drop theoverlayandopacityoptions.center()method can be dropped.If you decide to go with this solution, some extra cleanup should follow (mainly remove
center(),overlayandopacityfrom the docs and the examples). I can take care of it if you need.