Effects: Rewrote "clip" effect to animate CSS clip property

[mpetrovich]

Known issues:

1. still vulnerable to positional css selectors: .class:first, :nth-child, etc.

[mikesherov]

there's gotta be a shorter version of this.

[Jellyfrog]

You prolly want to escape that . since now it acts like a "any character"-capture
which makes this valid: rect(#10px, Mpx, 100!px, 2A0px)

Solution:

(-?\d*\.?\d*px|-?\d+%|auto)

@mikesherov only thing I can think of is adding {4} after the capture group, thus this would only capture one big group instead of 4 afaik =/

[mpetrovich]

@Jellyfrog How would you repeat the capture group to extract the necessary fields? In JS, only the last capture is kept.

A more maintainable solution might be to first split on delimiters and then extract each clip dimension in an exec loop. I'll test out that approach.

[Jellyfrog]

I don't know, thereof the

thus this would only capture one big group instead of 4 afaik =/

a while((match = regex.exec(str)) !== null) might look better yes, tho I don't mind the current regex, except for the bug (see my prev. comment)

[mikesherov]

For now, don't worry about positional selectors being effected by the shadow.

[mikesherov]

byte saver:

values = clipRegex.exec( str ) || [ "", 0, outerWidth, outerHeight, 0 ];

[mpetrovich]

Funny, I originally did the same thing but changed it to its current form to prevent the unnecessary ternary and parseInt calls for the most common case where clip is auto. Another case of premature optimization on my part ;)

[mikesherov]

:-) Speed here takes a back seat to size and maintainability, as @scottgonzalez mentions.

[mikesherov]

I'm going to create a createPlaceholder method for effects that does the shadow functionality. I'm going to see how it can be used in the other effects.

[mikesherov]

no need for clip variable. Just return the object.

[mikesherov]

Closing this for now, @mpetrovich. I'll open a new one so you're not a blocker. Thanks for contributing!