Effects: Split, new effect #185

Closed
wants to merge 40 commits into
from

Conversation

Projects
None yet
7 participants

jstroem commented Apr 18, 2011

The split effects reported in feature bug http://bugs.jqueryui.com/ticket/7069 has been implemented

Jesper Lindstroem Nielsen added some commits Mar 24, 2011

This does have a dependency on effects.core.js doesn't it?

Owner

jstroem replied Mar 27, 2011

ofc!

The other UI effect that is similar also takes a "pieces" argument, and uses Math.sqrt(pieces) to determine rows/cols - I like passing rows/cols but perhaps we should also support pieces?

If you were to call this effect on multiple elements, this o is going to overwrite the passed in o

Take a look at $.effects.setMode( el, o.mode ) -- it converts "toggle" to "show" or "hide" for you.

There is a $.effects.createWrapper( el ) that might help reduce the need to make your own container here.

You might want to look at the other effects for the $.effects.save( el, props ) calls - it caches "starting" css values you can restore with restore...

Also, you are going to want to el.show() before trying to get .offset() and width, etc...

You can replace this whole test with:

 effect("#build", "build", { easing: 'linear' });

Jesper Lindstroem Nielsen added some commits Mar 27, 2011

Jesper Lindstroem Nielsen Made some bugs so now build works propperly.
Still considering using $.effects.createWrapper and
$.effects.save/restore.
eee07da
Jesper Lindstroem Nielsen Pinwheel is up! 7f0daf3

Just being super picky - But this text should probably just be "pinweel" :)

Jesper Lindstroem Nielsen added some commits Mar 28, 2011

Jesper Lindstroem Nielsen test text updated! 61c75e2
Jesper Lindstroem Nielsen testing 9dd803a
Jesper Lindstroem Nielsen Rewriting so interval can be zero 862208f
Jesper Lindstroem Nielsen Indentation magic e0b19cc
Jesper Lindstroem Nielsen Using the builtin effects.save/restore functions instead of
hardcoding
771d193
Jesper Lindstroem Nielsen blockfade added and tested! c541941
Jesper Lindstroem Nielsen Shear is on! 55da89c
Jesper Lindstroem Nielsen sexplode is inserted in one split file to unite all of em' a3992d5

All the others default to random: false - why default to random here?

Is there any reason to not put this in startSplitAnim()

missing spaces .css( 'visibility', 'hidden' )

Store [ 'visibility', 'opacity' ] as modifiedProps or something, and reuse it for the restore call later...

Spacing between the () and the args

Also Whitespace between () and args

Also - currently the effects api helpers generally take ( el, otherParams ) - might be worth passing the el from startSplitAnim in rather than redeclaring - if we ever decide to use the jQuery.sub() idea I have out there, we can move it over...

I'm not sure you need i and j - couldn't you do:

for ( left = 0; left < width; left += pieceWidth ) { 
   for ( top = 0; top < height; top += pieceHeight ) {
      /// work...
   }
}

Maybe even left = -Math.floor( ( pieceWidth * columns - width ) / 2); so that the pieces will be more "centered" and not lose all the excess transparent area on the right and bottom

you can bring the { up to this line: var opt = $.extend({

Jesper Lindstroem Nielsen added some commits Apr 1, 2011

Jesper Lindstroem Nielsen Minor fixes added de4d7cc
Jesper Lindstroem Nielsen Minor fixes 5d792f3
Jesper Lindstroem Nielsen refixing defects ee618d7
Jesper Lindstroem Nielsen Removed offset variable in $.effects.effect.build 0e61cdb
Jesper Lindstroem Nielsen Removed last TODO's de16a23
Owner

gnarf commented Apr 18, 2011

Awesome work here @Lindstroem! So, this brings up one bit of conversation - This effect set totally includes (and supersedes) the current effects.explode - I'm thinking we might want to replace the current explode effect with yours...

@gnarf gnarf commented on an outdated diff Apr 18, 2011

tests/visual/effects.all.html
@@ -186,7 +187,42 @@
<p>hide/show (jQuery)</p>
</div>
</li>
+
+ <li>
@gnarf

gnarf Apr 18, 2011

Owner

Since this doesn't really do anything "visual" do you think you could clear it out of this test? If its not working, the next 4 effects aren't going to work either...

@gnarf gnarf commented on an outdated diff Apr 18, 2011

ui/jquery.effects.split.js
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Effects/Split (Not yet!)
+ *
+ * Depends:
+ * jquery.effects.core.js
+ *
+ */
+
+(function( $, undefined ) {
+
+ //Helper function to control the split on each animation
+ function startSplitAnim( el, o, animation, next ) {
+ //Support for pieces
@gnarf

gnarf Apr 18, 2011

Owner

Style Guidance: empty line before comments...

@gnarf gnarf commented on an outdated diff Apr 18, 2011

ui/jquery.effects.split.js
+ crop: false
+ },
+ o
+ ),
+ el = $( this );
+
+
+ //Reverse it if it is hidden and mode is toggle
+ if ( el.is( ':hidden' ) && opt.mode == 'toggle' ) {
+ opt.reverse = !opt.reverse;
+ }
+
+ //Sets mode for toggle
+ opt.mode = $.effects.setMode( el, opt.mode );
+
+ opt.show = 0 + ( opt.mode == 'show' );
@gnarf

gnarf Apr 18, 2011

Owner

don't need the 0 +, assuming you just want opt.show = opt.mode === "show"

Owner

gnarf commented Apr 18, 2011

Also, I just got called out on some of my code for jquery.color -- We should always prefer using double quotes instead of single quotes, as well as === instead of == ( unless we really want the == )

@gnarf gnarf commented on an outdated diff Apr 18, 2011

ui/jquery.effects.split.js
+ random: false,
+ interval: false
+ },
+ o
+ ),
+ el = $( this );
+
+ //Reverse it if it is hidden and mode is toggle
+ if ( el.is( ':hidden' ) && opt.mode == 'toggle' ) {
+ opt.reverse = !opt.reverse;
+ }
+
+ //Sets mode for toggle
+ opt.mode = $.effects.setMode( el, opt.mode );
+
+ opt.show = 0 + ( opt.mode == 'show' );
@gnarf

gnarf Apr 18, 2011

Owner

Having just seen the above 20 lines of code duplicated, might it be possible to create a function to DRY this up a little?

function splitOptions( el, defaults, o ) {
   var opt = $.extend( {}, defaults, o );
   if ( el.is( ':hidden' ) && opt.mode === "toggle") {
     opt.reverse = !opt.reverse;
   }
   opt.mode = $.effects.setMode( el, opt.mode );
   opt.show = opt.mode === "show";
   return opt;
 }

 // then in the functions:
 var el = $( this ),
     opt = splitOptions( el, {.....}, o );

@gnarf gnarf commented on the diff Apr 18, 2011

ui/jquery.effects.split.js
+ /*
+ * Options
+ * rows
+ * columns
+ * pieces
+ */
+ $.effects.piecer = function( el, o ){
+ //Support pieces
+ if ( ( !o.rows || !o.columns ) && o.pieces ) {
+ o.rows = o.columns = Math.round( Math.sqrt( o.pieces ) );
+ } else {
+ o.rows = o.rows || 3;
+ o.columns = o.columns || 3;
+ }
+
+ var height = el.outerHeight(),
@gnarf

gnarf Apr 18, 2011

Owner

You're going to want to make sure el is shown here before you start getting offset, etc...

In the old explode effect we use el.show().css('visibility', 'hidden'); at the beginning of the animation, and then use el.css('visibility', 'visible'); in the complete callback, and .hide() the actual element in the callback if it's not a "show" effect...

I would imagine we will want/need the same technique for this piecer....

@jstroem

jstroem Apr 27, 2011

I'm allready doing this in the startSplitAnim function just before we are calling the piecer function (line 37-39).

I could do it one more time in the piecer function so it is more useable for outside users? but it won't make the split functions better!

@gnarf

gnarf Apr 27, 2011

Owner

Nope, doubtful its needed - I just totally missed it in startSplitAnim

Jesper Lindstroem Nielsen added some commits Apr 27, 2011

Jesper Lindstroem Nielsen Removed piecer from test 19c4c89
Jesper Lindstroem Nielsen changed the opt.show = 0 + (opt.mode == "show") to opt.show = opt.mode
=== "show".

This given i made some changes to some of the uses of opt.show
c9c21cd
Jesper Lindstroem Nielsen changed ' to " and used === instead of == d51e1f2

jstroem commented Apr 27, 2011

What if a element is trying to split out of the document like, moves to a negative value or larger than the document is wide/high?

Should this be taken care of maybe?

Owner

gnarf commented Apr 27, 2011

I would think it may be possible to wrap the container element in an overflow:hidden that is document width/height so that the animations can go outside the doc all they want but not induce extra scrollbars

Jesper Lindstroem Nielsen added some commits May 15, 2011

jstroem commented May 15, 2011

I have done this implementation as you mentioned where i wraps the container inside another container with the document height/width if o.crop is false.
The problem now is that this container will be the highest element (lastChild in body) so it will block every other element (clicks on anything else).. do you have an idea how we can fix this?

otherwise we'll need to check left/top on all animation..

jstroem closed this May 15, 2011

jstroem reopened this May 15, 2011

jstroem commented May 15, 2011

Sorry i did push a wrong button just there :)

Owner

gnarf commented May 15, 2011

Hrmmm - I didn't even think about that issue... lets just leave this feature out for now --- We can add a bug about the split effects "falling off the document border" to worry about for later rather than trying to solve it all right now?

gnarf commented on ab5a579 May 15, 2011

Considering the issues you brought up with this approach, lets just revert this commit and then worry about it after we get the main part of the effects pulled in

jstroem commented May 16, 2011

Done!

I have another idea to a feature that could be implemented;
it could be nice if you could (as a option) define the way the effect is happening, like in effects.blockfade where it is comming from top-left and going to bottom-right.
But i don't have any really good idea to implement this?

Jesper Lindstroem Nielsen added some commits May 17, 2011

Jesper Lindstroem Nielsen Removed direction from the effects not using it! a937f68
Jesper Lindstroem Nielsen testing c07b28b
Jesper Lindstroem Nielsen Merge branch 'refs/heads/split' of https://lindstroem@github.com/lind…
…stroem/jquery-ui.git into HEAD
7cd1157
Jesper Lindstroem Nielsen trailing comma removed 66bc0fb
Jesper Lindstroem Nielsen Added complete to options list.
Used counter instead of array to count pieces in childProcess (a
little better for memory)
66c830d
Jesper Lindstroem Nielsen Minor changes 5c464cc
Owner

gnarf commented Jun 22, 2011

RE your old comment about blockfade direction, we could use an option like origin: "left top", but it would need to support top/center/bottom left/center/right -- Take a look at the UI Position arguments on http://docs.jquery.com/UI/API/1.8/Position

Owner

gnarf commented Jun 28, 2011

There was an update to the core functions that requires updating this branch. -- The .queue() portion is handled in effects.core now.

Jesper Lindstroem Nielsen added some commits Jul 23, 2011

Owner

gnarf commented Oct 12, 2011

This pull has gone stale, any chance we can get it freshened up?

jstroem commented Oct 12, 2011

so there is really 2 things to this pull the first is the split thing just on normal elements and, as far as i know, there is nothing more to put into this? it works right?

then there is the effects on the text witch i have made some of but as i remember have some problems with. So i will write this on my todo list and i should have time se whats needed!

jstroem commented Oct 12, 2011

ohh.. just looked at the repo..
this is only a pull on the split things on the html elements not the text split?

I think i stopped working on the text split effects because there were some guys (on weekly dev meetings) that said this split wasn't going to get under the hood of jquery ui?

but i don't know if that has changed now where 2.0 is a little closer?

Owner

gnarf commented Oct 12, 2011

We can look again at the text split, but I still think this could use some freshening up... I'd like to see the split effects land in 1.9, but It no longer merges cleanly with master, and I believe its still using an API that isn't current in 1.9... track me down, talk with me about it :)

jstroem commented Oct 12, 2011

i just gonna take a quick look at the code tomorrow and then i will catch you at irc and we can discuss whats need to be done!

Member

paulirish commented Nov 9, 2011

@Lindstroem can you summarize what the status is? I'd love to see this make its way in and can ask Scott to take a look..

Owner

gnarf commented Nov 9, 2011

I'm still willing to update this branch myself if @Lindstroem doesn't have the time for it

Jesper Lindstroem Nielsen dummy change 928be4e

jstroem commented Nov 9, 2011

Yea. so I've been looking into it today and it is good to go.. but the merging with master fails as i understand from @gnarf37.. so if there is something there needs to be updated in the code just notifiy me!

jstroem closed this Nov 9, 2011

Member

paulirish commented Nov 9, 2011

lindstroem can you reopen ;)

jstroem reopened this Nov 9, 2011

Jesper Lindstroem Nielsen added some commits Nov 9, 2011

Jesper Lindstroem Nielsen Merge branch 'master' of https://github.com/jquery/jquery-ui into split
Conflicts:
	tests/unit/effects/effects.html
	tests/visual/effects/effects.all.html

Made merge
f572598
Jesper Lindstroem Nielsen Revert "dummy change"
This reverts commit 928be4e.
daaea85
Jesper Lindstroem Nielsen Trying to make reverting 6bd1a43
Jesper Lindstroem Nielsen reverting 34d956b
Jesper Lindstroem Nielsen Reverting e698953
Jesper Lindstroem Nielsen reverting 57906d3
Jesper Lindstroem Nielsen Revert goddammit! 8756332

jstroem commented Feb 8, 2012

@gnarf37: any news on this?

Bump

Member

paulirish commented Apr 17, 2012

👍

Contributor

sindresorhus commented Apr 17, 2012

👍

jstroem commented Apr 18, 2012

been looking into this; in the pull request status: http://oksoclap.com/ui-pull-requests the following is pointed out:

#185 - Split

  • on hold, waiting for a big block of time to review new set of effects
  • would rather get existing code cleaned up first

i don't know if anyone is up for reviewing and how the status is for the other cleaning tasks. I will try to be at the weekly meeting for UI today and ask into this.

Owner

gnarf commented Apr 18, 2012

We haven't used that clap in a while, but that was the last time we did a big group review of pulls.

I do want this to land in 1.9 soon, but I'm pretty involved in some other areas of the project right now that stop me from doing the necessary work at the current moment.

Member

mikesherov commented Nov 10, 2012

@gnarf37, @scottgonzalez, @jzaefferer ping.

Owner

scottgonzalez commented Nov 12, 2012

We're still waiting until we've cleaned up more of the existing code before adding more effects.

Member

mikesherov commented Sep 12, 2014

Thanks again for the had work here, but we've finally decided that we're not going to pursue further effects at this time, and therefore, are closing this pull request.

mikesherov closed this Sep 12, 2014

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