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

[michaelrogersdisney]

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]

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]

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.