Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ps-size no longer works with css calc() as of version 2.0.0 #169

Open
michaelrogersdisney opened this issue Jun 7, 2017 · 2 comments
Open

Comments

@michaelrogersdisney
Copy link

michaelrogersdisney commented Jun 7, 2017

I was previously able to use css calc() values on size (for example, calc(100% - 60px), so that the menu button wouldn't be pushed off screen or covered) in versions 1.4.4 and below. As of version 2.0.0, this no longer functions as expected. From what I can tell, the width is being set properly, but the left style attribute is what is breaking (and defaults to 0), causing it to load open and be unclosable.

EDIT:
Seems to be the negation aspect, since -calc(100% - 60px) is invalid (proper negation would be calc(-100% - 60px)). Looking for a solution.

@michaelrogersdisney
Copy link
Author

michaelrogersdisney commented Jun 7, 2017

The following seems to be a quick and dirty way to support calc(). Add to the top of psOpen and psClose, and replace the inline negations within the switch statements with the offset variable:

                    var offset;
                    if (/calc\(/i.test(param.size)) {
                        offset = param.size.replace('calc(', 'calc(-');
                    } else {
                        offset = "-" + param.size;
                    }

@michaelrogersdisney
Copy link
Author

michaelrogersdisney commented Jun 7, 2017

A better solution seems to be ditching left/right/top/bottom altogether, and instead moving to transformX()/transformY() on the slider, and margin-<side> on the body. Doing so allows for native calc() support without any processing, while the sliding animates seamlessly, with and without ps-push. Potential downside is that this could be a major version level change (at least for end-user effect, depending on how they might tamper with the body/slider in their own styles).

EDIT:
Only caveat I've found is that you'd need to use a negated margin-top for the bottom instead of margin-bottom (since the body anchors to the top and sides by default, but not the bottom). This means in order to use calc() with the ps-push state on the bottom, you still need the dirty fix from my second comment.

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

No branches or pull requests

1 participant