Skip to content

Refactor: wrap .modal in .blocker (fix #69)#110

Closed
xfra35 wants to merge 4 commits intokylefox:masterfrom
xfra35:refactor
Closed

Refactor: wrap .modal in .blocker (fix #69)#110
xfra35 wants to merge 4 commits intokylefox:masterfrom
xfra35:refactor

Conversation

@xfra35
Copy link
Copy Markdown
Contributor

@xfra35 xfra35 commented Jun 12, 2015

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:

  1. .modal is wrapped inside .blocker
  2. .modal is horizontally and vertically centered using CSS (cf. the ghost technique described here)
  3. overflow: hidden is applied to the document body when the modal is displayed

Here are the consequences of those changes:

  • .blocker can'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 CSS rgba(). That also means we can drop the overlay and opacity options.
  • since centering is performed using CSS instead of JS, the plugin will probably fail to work on IE<8. That also mean the center() method can be dropped.

If you decide to go with this solution, some extra cleanup should follow (mainly remove center(), overlay and opacity from the docs and the examples). I can take care of it if you need.

@xfra35
Copy link
Copy Markdown
Contributor Author

xfra35 commented Oct 23, 2015

A test demo is visible here.

@kylefox
Copy link
Copy Markdown
Owner

kylefox commented Oct 25, 2015

Cool, thanks for the thoughtful write up. I like it 👍

I think the backwards-incompatible consequences are minor and are worth it:

.blocker can'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 CSS rgba(). That also means we can drop the overlay and opacity options.

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.

since centering is performed using CSS instead of JS, the plugin will probably fail to work on IE<8. That also mean the center() method can be dropped.

Sounds good to me — we'll just make a note of the compatibility in the README.

If you decide to go with this solution, some extra cleanup should follow (mainly remove center(), overlay and opacity from the docs and the examples). I can take care of it if you need.

That would be MUCH appreciated — thank you!

@xfra35
Copy link
Copy Markdown
Contributor Author

xfra35 commented Oct 29, 2015

Here it is. You should be able to merge now. The latest commits include the following changes:

  • entire styling has been moved to the CSS file
  • overlay, opacity and zIndex have been removed from the library and the docs
  • the resize() method has been removed
  • example 3 has been reworded

@hultberg
Copy link
Copy Markdown

Is there plans to write a breaking changes section?

@xfra35
Copy link
Copy Markdown
Contributor Author

xfra35 commented Oct 30, 2015

That's a good idea. It could fit either in a changelog file or in the releases page.

@kylefox
Copy link
Copy Markdown
Owner

kylefox commented Oct 30, 2015

Awesome :) Yeah I've actually been meaning to add a CHANGELOG.md file but haven't gotten around to it. We can use semver to indicate that there is a backwards-incompatible change, and then document the details in the changelog.

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 👍

@hultberg
Copy link
Copy Markdown

@kylefox: Increasing to 0.6.0 is satisfying semver as the first zero indicates the software must be considered unstable. 👍

@kylefox kylefox mentioned this pull request Nov 10, 2015
@joonas-lahtinen
Copy link
Copy Markdown
Contributor

Are we only waiting for the CHANGELOG.md? If so, would something automated like https://github.com/stevemao/gulp-conventional-changelog be OK?

@kylefox
Copy link
Copy Markdown
Owner

kylefox commented Nov 15, 2015

Thanks for bumping this — yes, this is basically just waiting for the CHANGELOG.md. Conventional changelog looks good, however I don't have much time to investigate / set it up right now, so PRs welcome.

@joonas-lahtinen
Copy link
Copy Markdown
Contributor

I included the machine-generated CHANGELOG.md, I think you could merge that pull-request and if you wish, make a commit where you strip information you feel is not necessary per each version change (I do not have such a vision of the project history to do that). The script will only append to the beginning of file since last released version, so those changes will then stay.

Including the right magic words in the commit messages in future will require less cleaning up after running gulp changelog.

@xfra35
Copy link
Copy Markdown
Contributor Author

xfra35 commented Nov 17, 2015

Hey @joonas-lahtinen, thanks for digging into this! 👍
I really couldn't find time for it these days.

@kylefox
Copy link
Copy Markdown
Owner

kylefox commented Nov 18, 2015

Thanks, #133 has been merged! 🍔

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants