Daniel Werner has submitted this change and it was merged.
Change subject: (bug 48145) Input extender: Triggering "animationstep" event
......................................................................
(bug 48145) Input extender: Triggering "animationstep" event
Triggering an "animationstep" event in the input extender widget on each
animation tick.
The same event is introduced in the toggler widget since its animation needs to
be
forwarded by the input extender.
Change-Id: I8d67308208889904ea94a30158c71a705ea18157
---
M ValueView/resources/jquery.ui/jquery.ui.inputextender.js
M ValueView/resources/jquery.ui/jquery.ui.toggler.js
2 files changed, 62 insertions(+), 13 deletions(-)
Approvals:
Daniel Werner: Verified; Looks good to me, approved
jenkins-bot: Verified
diff --git a/ValueView/resources/jquery.ui/jquery.ui.inputextender.js
b/ValueView/resources/jquery.ui/jquery.ui.inputextender.js
index 6a28e8d..00e56ec 100644
--- a/ValueView/resources/jquery.ui/jquery.ui.inputextender.js
+++ b/ValueView/resources/jquery.ui/jquery.ui.inputextender.js
@@ -25,6 +25,14 @@
* @event toggle: Triggered when the visibility of the extended content is
toggled.
* (1) {jQuery.Event}
*
+ * @event animationstep: While the input extender's extension is being
animated, this event is
+ * triggered on each animation step. The event forwards the parameters
received from the
+ * animation's "step" callback. However, when the animation is
finished, the event is
+ * triggered without the second and third parameter.
+ * (1) {jQuery.Event}
+ * (2) {number} [now]
+ * (3) {jQuery.Tween} [tween]
+ *
* @dependency jQuery.Widget
* @dependency jQuery.eachchange
*/
@@ -61,10 +69,10 @@
$extension: null,
/**
- * Caches the timeout when the actual "blur" action should kick
in.
+ * Caches the timeout when the actual input extender animation
should kick in.
* @type {Object}
*/
- _blurTimeout: null,
+ _animationTimeout: null,
/**
* @see jQuery.Widget._create
@@ -78,22 +86,27 @@
this.$extension = $( '<div/>' )
.addClass( this.widgetBaseClass + '-extension
ui-widget-content' )
.on( 'click.' + this.widgetName, function( event ) {
- clearTimeout( self._blurTimeout );
+ clearTimeout( self._animationTimeout );
event.stopPropagation();
self.showExtension();
+ } )
+ .on( 'toggleranimationstep.' + this.widgetName,
function( event, now, tween ) {
+ self._trigger( 'animationstep', null, [ now,
tween ] );
} )
.appendTo( $( 'body' ) );
this.element
.on( 'focus.' + this.widgetName, function( event ) {
if( !self.options.hideWhenInputEmpty ||
self.element.val() !== '' ) {
- clearTimeout( self._blurTimeout );
- self.showExtension();
+ clearTimeout( self._animationTimeout );
+ self._animationTimeout = setTimeout(
function() {
+ self.showExtension();
+ }, 150 );
}
} )
// TODO: Allow direct tabbing into the extension
.on( 'blur.' + this.widgetName, function( event ) {
- self._blurTimeout = setTimeout( function() {
+ self._animationTimeout = setTimeout( function()
{
self.hideExtension();
}, 150 );
} )
@@ -173,6 +186,15 @@
* @param {Function} [callback] Invoked as soon as the contents
are visible.
*/
showExtension: function( callback ) {
+ var self = this;
+
+ // When blurring the browser viewport and an
re-focusing, Chrome is firing the "focus"
+ // event twice. jQuery fadeIn sets the opacity to 0 for
the first fadeIn but does not
+ // pick up the value when triggering fadeIn the second
time.
+ if( this.$extension.css( 'opacity' ) === '0' ) {
+ this.$extension.css( 'opacity', '1' );
+ }
+
// Element needs to be visible to use
jquery.ui.position.
if( !this.$extension.is( ':visible' ) ) {
this.$extension.show();
@@ -182,9 +204,16 @@
this.$extension.hide();
}
- this.$extension.stop( true, true ).fadeIn( 150,
function() {
- if( $.isFunction( callback ) ) {
- callback();
+ this.$extension.stop( true ).fadeIn( {
+ duration: 150,
+ step: function( now, tween ) {
+ self._trigger( 'animationstep', null, [
now, tween ] );
+ },
+ complete: function() {
+ if( $.isFunction( callback ) ) {
+ callback();
+ }
+ self._trigger( 'animationstep' );
}
} );
},
@@ -195,9 +224,18 @@
* @param {Function} [callback] Invoked as soon as the contents
are hidden.
*/
hideExtension: function( callback ) {
- this.$extension.stop( true, true ).fadeOut( 150,
function() {
- if( $.isFunction( callback ) ) {
- callback();
+ var self = this;
+
+ this.$extension.stop( true ).fadeOut( {
+ duration: 150,
+ step: function( now, tween ) {
+ self._trigger( 'animationstep', null, [
now, tween ] );
+ },
+ complete: function() {
+ if( $.isFunction( callback ) ) {
+ callback();
+ }
+ self._trigger( 'animationstep' );
}
} );
}
diff --git a/ValueView/resources/jquery.ui/jquery.ui.toggler.js
b/ValueView/resources/jquery.ui/jquery.ui.toggler.js
index fee6594..2dacdd4 100644
--- a/ValueView/resources/jquery.ui/jquery.ui.toggler.js
+++ b/ValueView/resources/jquery.ui/jquery.ui.toggler.js
@@ -11,6 +11,13 @@
*
* @option {jQuery} $subject (REQUIRED) The node whose visibility shall be
toggled.
*
+ * @event animationstep: While the toggler is being animated, this event is
triggered on each
+ * animation step. The event forwards the parameters received from the
animation's "step"
+ * callback.
+ * (1) {jQuery.Event}
+ * (2) {number} now
+ * (3) {jQuery.Tween} tween
+ *
* @dependency jquery.ui.Widget
*/
( function( $ ) {
@@ -103,7 +110,11 @@
if( !self.element.hasClass( 'ui-state-disabled'
) ) {
// Change toggle icon to reflect
current state of toggle subject visibility:
self._reflectVisibilityOnToggleIcon(
true );
- self.options.$subject.slideToggle();
+ self.options.$subject.slideToggle( {
+ step: function( now, tween ) {
+ self._trigger(
'animationstep', null, [ now, tween ] );
+ }
+ } );
}
} )
.on( 'mouseover', function( event ) {
--
To view, visit https://gerrit.wikimedia.org/r/63835
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I8d67308208889904ea94a30158c71a705ea18157
Gerrit-PatchSet: 7
Gerrit-Project: mediawiki/extensions/DataValues
Gerrit-Branch: master
Gerrit-Owner: Henning Snater <[email protected]>
Gerrit-Reviewer: Daniel Werner <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
