Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Fixed #7041 - Toggle size effect demo not working. #203

Closed
wants to merge 5 commits into from

2 participants

@kzys

Size effect's problems are

  • Don't swap from/to on "show" mode.
  • Modify some properties with setTransition, but don't save/restore these properties.

In this branch, I've fixed these problems to close #7041.

@kzys kzys Effects (size): Size effect should swap from/to on show, and restore …
…more properties. Fixed #7041 - Toggle size effect demo not working.
ff9c545
@gnarf

Why did you remove this? This removes the default values if you are using a 'show' / 'hide' toggle, and its not a part of the size effect

Sorry, but original scale effect don't work smoothly on my Safari 5 and Firefox 4. I'll move this to new branch.

Owner

File a new ticket on it? :)

@gnarf

I feel like this should probably take into account that the default for a show should be {height:0, width:0} -> original and then the default for a hide should be original -> {height:0, width:0}

Thank you. I'll fix too.

@gnarf

I would like to suggest if ( o.mode === "toggle" && mode === "hide" ) {

Also don't forget the whitespace, preferring double quotes and === where possible... http://docs.jquery.com/JQuery_Core_Style_Guidelines

Also - I tried to start a discussion of which direction should actually swap on the ticket, chime in people? http://bugs.jqueryui.com/ticket/7041#comment:4

Thank you. I'll fix this.

@gnarf
Owner

Also, you might wanna make the changes from this commit to see what happens in another "toggle" scenario.

@kzys kzys Effects (size): Code cleanup.
 * Separete `scale` effect's problem.
 * Clearify the default value of `from` and `to`.
 * Follow http://docs.jquery.com/JQuery_Core_Style_Guidelines.
bc50fe3
@kzys

Thank you Corey. I've added new commit to clean up my code. Please review again.

@gnarf

I'm still not sure if this should be mode === "show" or mode === "hide"

Other than this question, it looks good to me!

I think it should be mode === "show" because the default is { height: 0, width: 0 } -> original.

Owner

After having seen the way it reads in the "visual effects test" page updates I've been doing, try doing something like this:

$( "#sizeToggle" ).bind( "click", function() {
    var opts = { to: { width: 300, height: 300 } },
                wait = 500, duration = 2000;
    $( this ).addClass( "current" )
        .toggle( "size", opts, duration )
        .delay( wait )
        .toggle( "size", opts, duration, function() {
            $( this ).removeClass( "current" );
        });
});

It makes pefect sense there (and looks pretty decent!!!) because the element starts out shown, but what if the element started hidden? Which case do we anticipate being more popular? With the toggle case, using mode === "show" in the if, it would make the options effectively hide to and hide from. Which again, seems to make sense (if the element started shown)

@gnarf

I just realized while I was playing around with this commit that there are still two cases to handle here... || ( mode === "hide" ? original : { height: 0, width: 0 } ) and the line below

Also, since we seem to be using this {height:0, width:0} default here a lot, can we assign it to a var?

Owner

In particular try doing a .hide("size", 2000).show("size", 2000) as well as .toggle("size", 2000).toggle("size", 2000) on an element...

Owner

How does this look to you?

// assuming zero = { height: 0, width: 0 };
el.from = o.from || ( mode === "show" ? zero : original );
el.to = o.to || ( mode === "hide" ? zero : original );`

This even covers the effect version to just default to original for both.

@kzys

Thank you! I've merged your suggestion.

@gnarf
Owner

@kzys sorry if I didn't explain myself fully, that first half of the if was still totally valid, that was just a replacement for the else case... Also, could you maybe move that zero var definition up into the var statement?

@kzys

Finally I understand your point.

On #sizeToggle of "visual effects test" page (It's very helpful. Thank you), First toggle hide element and second toggle show element again. And second animation looks odd because it's zero -> original.

However, It's problem of show, not toggle. We should swap from/to on show because other effect do this. For example, $(shown).hide('slide', { direction: 'left' }); is slide to left, but $(hidden).show('slide', { direction: 'left' }); is slide from left.

@gnarf
Owner

I think I'm sold on the reverse direction for show... All the time... Because of your point about the directions on slide/etc. We really need to document that behavior though...

@gnarf
Owner

For right now, can you put the if back in that works for toggle show only? I'd like to at least get this change in to fix this bug for the toggle case... We can further discuss the fate of the rest of show animations for size later...

@kzys

Like this?

@gnarf
Owner

Not quite, you still need the direction detection in the "else" :

if ( o.mode === "toggle" && mode === "show" ) {
    el.from = o.to || zero;
    el.to = o.from || original;
} else {
    el.from = o.from || ( mode === "show" ? zero : original );
    el.to = o.to || ( mode === "hide" ? zero : original );
}
@kzys

Oh, Sorry. I've fixed (actually just a copy-and-paste...).

@gnarf
Owner

This no longer wants to merge cleanly, could you rebase / merge with changes upstream?

Also, make sure to cover the whitespace issues :)

@gnarf
Owner

There have been a lot of changes upstream, I'd like to keep this fix, if you want to re-make it on top of a clean master that would be awesome. Please re-open / make a new pull when you get this mergable.

@gnarf gnarf closed this
@kzys

Okay.

@gnarf gnarf referenced this pull request from a commit
@kzys kzys Effects (size): Adjusting behavior of toggled size effects - See gh-203
… - Partial Fix for #7041
5f9d5c5
@kborchers kborchers referenced this pull request from a commit
@kzys kzys Effects (size): Adjusting behavior of toggled size effects - See gh-203
… - Partial Fix for #7041
c80a850
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on May 5, 2011
  1. @kzys

    Effects (size): Size effect should swap from/to on show, and restore …

    kzys authored
    …more properties. Fixed #7041 - Toggle size effect demo not working.
  2. @kzys

    Effects (size): Code cleanup.

    kzys authored
     * Separete `scale` effect's problem.
     * Clearify the default value of `from` and `to`.
     * Follow http://docs.jquery.com/JQuery_Core_Style_Guidelines.
  3. @kzys
Commits on May 12, 2011
  1. @kzys
  2. @kzys
This page is out of date. Refresh to see the latest.
Showing with 16 additions and 9 deletions.
  1. +16 −9 ui/jquery.effects.scale.js
View
25 ui/jquery.effects.scale.js
@@ -97,7 +97,7 @@ $.effects.effect.size = function( o ) {
return this.queue( function() {
// Create element
var el = $( this ),
- props = [ 'position', 'top', 'bottom', 'left', 'right', 'width', 'height', 'overflow', 'opacity' ],
+ props0 = [ 'position', 'top', 'bottom', 'left', 'right', 'width', 'height', 'overflow', 'opacity' ],
// Always restore
props1 = [ 'position', 'top', 'bottom', 'left', 'right', 'overflow', 'opacity' ],
@@ -117,10 +117,17 @@ $.effects.effect.size = function( o ) {
height: el.height(),
width: el.width()
},
- baseline, factor;
-
- el.from = o.from || original;
- el.to = o.to || original;
+ baseline, factor,
+ props = restore ? props0 : props1,
+ zero = { height: 0, width: 0 };
+
+ if ( o.mode === "toggle" && mode === "show" ) {
+ el.from = o.to || zero;
+ el.to = o.from || original;
+ } else {
+ el.from = o.from || ( mode === "show" ? zero : original );
+ el.to = o.to || ( mode === "hide" ? zero : original );
+ }
// Adjust
if (origin) { // Calculate baseline shifts
@@ -166,13 +173,13 @@ $.effects.effect.size = function( o ) {
// Vertical props scaling
if ( factor.from.y != factor.to.y ) {
- props = props.concat( cProps );
+ props = props.concat(cProps).concat(props2);
el.from = $.effects.setTransition( el, cProps, factor.from.y, el.from );
el.to = $.effects.setTransition( el, cProps, factor.to.y, el.to );
};
};
- $.effects.save( el, restore ? props : props1 );
+ $.effects.save( el, props );
el.show();
$.effects.createWrapper( el );
el.css( 'overflow', 'hidden' ).css( el.from );
@@ -183,7 +190,7 @@ $.effects.effect.size = function( o ) {
// Add margins/font-size
vProps = vProps.concat([ 'marginTop', 'marginBottom' ]).concat(cProps);
hProps = hProps.concat([ 'marginLeft', 'marginRight' ]);
- props2 = props.concat(vProps).concat(hProps);
+ props2 = props0.concat(vProps).concat(hProps);
el.find( "*[width]" ).each( function(){
var child = $( this ),
@@ -236,7 +243,7 @@ $.effects.effect.size = function( o ) {
if( mode == 'hide' ) {
el.hide();
}
- $.effects.restore( el, restore ? props : props1 );
+ $.effects.restore( el, props );
$.effects.removeWrapper( el );
$.isFunction( o.complete ) && o.complete.apply( this, arguments ); // Callback
el.dequeue();
Something went wrong with that request. Please try again.