Ticket #3772 (closed feature: fixed)

Opened 6 years ago

Last modified 3 years ago

Determine how to support effects across plugins

Reported by: scott.gonzalez Owned by:
Priority: blocker Milestone: 1.9.0
Component: [meta] ui.dev Version: 1.6rc4
Keywords: Cc:
Blocking: Blocked by:

Description (last modified by scott.gonzalez) (diff)

There should be a unified method for using effects across plugins.

accordion - open
accordion - close
autocomplete - open
autocomplete - close
datepicker - show
datepicker - hide
dialog - show
dialog - hide
dialog - resize
draggable: revert
resizable - resize (when ghosting)
slider - slide (click on bar)
sortable - sort
tabs - show
tabs - hide
tooltip - show
tooltip - hide


Proposed API: ._show() and ._hide() methods on $.Widget.

show: null                 // .show()
show: true                 // .fadeIn()
show: number               // .fadeIn( number )
show: string (effect name) // .show( effectName )
show: string (core method) // .coreMethod()
show: object (effect)      // .show( options )
show: object (core method) // .coreMethod( o.duration, o.easing )

Change History

comment:1 Changed 6 years ago by scott.gonzalez

  • Milestone changed from 1.next to 1.8

comment:2 Changed 5 years ago by scott.gonzalez

Current places where animations could be used:
accordion - open
accordion - close
datepicker - show
datepicker - hide
dialog - show
dialog - hide
dialog - resize
resizable - resize (when ghosting)
slider - slide (click on bar)
tabs - show
tabs - hide

#2358 is about supporting effects in dialogs

comment:3 Changed 5 years ago by ThrushAAX

Another one which was mentioned by someone on IRC: sortables - when an item changes position the old item is just bumped down

comment:4 Changed 5 years ago by joern.zaefferer

In places where we can't abstract a common API, it may be an option to just expose the configuration of the underlying method (usually works well for plugins that delegate to $.ajax, also $.ui.mouse, where delay and distance are exposed).

In this case, we'd provide the necessary properties, eg. height: "hide", and mix that with user specified properties for duration, easing etc.; at best, by a call to $.extend and passing the result to .animate().

comment:5 Changed 5 years ago by joern.zaefferer

Another occurence of animations:

Draggable revert is animated, can be customized with revertDuration.

comment:6 Changed 5 years ago by kbwood

The following function performs a show or hide animation for a target element based upon a single option that describes the required effect. It allows for the built-in show and fade animations, as well as any of the UI effects.

function showHideAnim(target, effect, showing) {
	// Convert to array
	effect = ($.isArray(effect) ? effect : (typeof effect == 'string' ? [effect] :
		[effect.fx, effect.options, effect.speed, effect.callback]));
	// Check for options
	(effect[1] && typeof effect[1] != 'object' ? effect.splice(1, 0, null) : effect);
	// Check for callback
	($.isFunction(effect[2]) ? effect.splice(2, 0, null) : effect);
	// Special case for 'show'
	effect = (effect[0] && effect[0] != 'show' ? effect : effect.slice(2));
	(effect[0] == 'fade' ?
		// Special case for 'fade'
		target[showing ? 'fadeIn' : 'fadeOut'].apply(target, effect.slice(2)) :
		// Apply effect
		target[showing ? 'show' : 'hide'].apply(target, effect));
}

This allows the effect to be defined by any of the following - a single string, an array of settings, or a hash of settings:

'' - immediate show/hide

false - immediate show/hide

'show' - immediate show/hide

['', 'normal'] - default show/hide, normal speed

['show', 'slow'] - default show/hide, slow speed

['show', 3000] - default show/hide, 3 seconds

'slow' - default show/hide, slow speed

'normal' - default show/hide, normal speed

'fast' - default show/hide, fast speed

'fade' - fadeIn/Out, normal speed

['fade', 'fast'] - fadeIn/Out, fast speed

'blind' - blind effect, normal speed

['blind', 2000, function() { alert('finished'); }] - blind effect, 2 seconds, callback

['blind', {direction: 'horizontal'}, 3000] - blind effect, options, 3 seconds

{fx: 'blind', speed: 'slow'} - blind effect, slow speed

{fx: 'blind', options: {direction: 'horizontal'}, speed: 3000} - blind effect, options, 3 seconds

['slide'] - slide effect, normal speed

['slide', function() { alert('slid'); } ] - slide effect, normal speed, callback

comment:8 Changed 5 years ago by scott.gonzalez

  • Milestone changed from 1.8 to 1.next

comment:9 Changed 4 years ago by joern.zaefferer

Will also be relevant for Tooltip.

comment:10 Changed 4 years ago by kradmiy

scottgonzalez

"Dialog probably comes the closest to an ideal situation (it's possible that it is the ideal solution)."

Last edited 4 years ago by kradmiy (previous) (diff)

comment:11 Changed 4 years ago by scott.gonzalez

  • Description modified (diff)

comment:12 Changed 4 years ago by scott.gonzalez

  • Description modified (diff)

comment:13 Changed 4 years ago by scott.gonzalez

  • Milestone changed from 1.next to 1.9

comment:14 Changed 3 years ago by joern.zaefferer

Haven't we resolved this with the _show/_hide methods in $.Widget?

comment:15 Changed 3 years ago by scott.gonzalez

Partly. There are still other cases like accordion (solved), tabs (potentially solved, but not yet tested), resizable and slider (not yet investigated).

comment:16 Changed 3 years ago by scott.gonzalez

  • Status changed from new to open

Resizable and slider can use the same syntax as accordion, just specifying a duration and easing.

Tabs is whacky. The only thing that really makes sense is animating height. Right now you can toggle the height and/or fade. A better animation would really be animating the height from the current to the new height, without toggling. If we did that we could still support the accordion syntax. We'll need to discuss changing this API. If we do it, we should land this in 1.9 with the rest of the API change for tabs.

comment:17 Changed 3 years ago by scott.gonzalez

Just discussed this with ajpiano and we can just use the new show/hide API. If we're going to support anything, we may as well support everything.

comment:18 Changed 3 years ago by scott.gonzalez

  • Status changed from open to closed
  • Resolution set to fixed

The show/hide options will be used for anything that does a full show/hide. The new animate option that accordion implements will be used for other animations, such as resizing (with ghost), slider, etc.

Note: See TracTickets for help on using tickets.