Daniel Werner has submitted this change and it was merged.
Change subject: (bug 48145) Handling "animationstep" event in value variation
......................................................................
(bug 48145) Handling "animationstep" event in value variation
This change set ensures that the input extender does not overlap other links
(e.g. the "add qualifier" link when editing a main snak).
Requires change I8d67308208889904ea94a30158c71a705ea18157 in the DataValues
(ValueView) extension.
Change-Id: Id592442afa3d141ad336710cf12d1740418ded75
---
M
lib/resources/jquery.wikibase/jquery.wikibase.snakview/snakview.variations.Value.js
M lib/resources/jquery.wikibase/jquery.wikibase.snakview/snakview.variations.js
M lib/resources/wikibase.css
3 files changed, 69 insertions(+), 11 deletions(-)
Approvals:
Daniel Werner: Verified; Looks good to me, approved
jenkins-bot: Verified
diff --git
a/lib/resources/jquery.wikibase/jquery.wikibase.snakview/snakview.variations.Value.js
b/lib/resources/jquery.wikibase/jquery.wikibase.snakview/snakview.variations.Value.js
index ab4271f..facf8c2 100644
---
a/lib/resources/jquery.wikibase/jquery.wikibase.snakview/snakview.variations.Value.js
+++
b/lib/resources/jquery.wikibase/jquery.wikibase.snakview/snakview.variations.Value.js
@@ -39,8 +39,9 @@
* @see jQuery.wikibase.snakview.variations.Variation.destroy
*/
destroy: function() {
+ this.$viewPort.css( 'height', 'auto' );
if( this._valueView ) {
- this._valueView.element.off(
'.snakview-variations-value' );
+ this._valueView.element.off( '.' +
this.variationBaseClass );
this._valueView.destroy();
}
PARENT.prototype.destroy.call( this );
@@ -157,6 +158,13 @@
// switch to edit/non-edit view depending on
snakview:
this._valueView[ (
this._viewState.isInEditMode() ? 'start' : 'stop' ) + 'Editing' ]();
+ if( this._viewState.isInEditMode() ) {
+ this._attachEventHandlers();
+ } else {
+ this.$viewPort.css( 'height', 'auto' );
+ this._removeEventHandlers();
+ }
+
// set state
if ( this._viewState.isDisabled() ) {
this._valueView.disable();
@@ -164,6 +172,63 @@
this._valueView.enable();
}
}
+ },
+
+ /**
+ * Attach event handlers to the value view widget's element.
+ */
+ _attachEventHandlers: function() {
+ var self = this;
+
+ this._removeEventHandlers();
+
+ this._valueView.element
+ .on( 'valueviewparse.' + this.variationBaseClass,
function( event ) {
+ self._viewState.notify( 'invalid' );
+ } )
+ .on( 'valueviewafterparse.' + this.variationBaseClass,
function( event ) {
+ self._viewState.notify( (
self._valueView.value() ) ? 'valid' : 'invalid' );
+ } )
+ .on( 'inputextenderanimationstep.' +
this.variationBaseClass, function( event, now, tween ) {
+ if( tween !== undefined && tween.prop ===
'opacity' ) {
+ // Do not do anything when fading.
Animation will be performed when fading is
+ // completed via the animation's
"complete" callback triggering an
+ // "animationstep" event without
parameters.
+ return;
+ }
+
+ var $input = $( event.target ),
+ $extension = $input.data(
'inputextender' ).$extension,
+ newHeight = 0;
+
+ self.$viewPort.stop( true );
+
+ if( $extension.is( ':visible' ) ) {
+ newHeight = $input.outerHeight() +
$extension.outerHeight();
+ } else {
+ var currentHeight =
self.$viewPort.height();
+ self.$viewPort.css( 'height', 'auto' );
+ newHeight = self.$viewPort.height();
+ self.$viewPort.height( currentHeight )
+ }
+
+ if( tween === undefined ) {
+ self.$viewPort.animate( { height:
newHeight }, 250 );
+ } else {
+ self.$viewPort.height( newHeight );
+ }
+
+ // Using .height() and .animate() automatically
set overflow to "hidden" which we do
+ // not want since it clips the input element.
+ self.$viewPort.css( 'overflow', 'visible' );
+ } );
+ },
+
+ /**
+ * Removes event handlers from the value view widget's element.
+ */
+ _removeEventHandlers: function() {
+ this._valueView.element.off( '.' +
this.variationBaseClass );
},
/**
@@ -213,14 +278,6 @@
value: dataValue
} );
this._valueView = $valueViewDom.data( 'valueview' );
-
- $valueViewDom
- .on( 'valueviewparse.snakview-variations-value',
function( event ) {
- self._viewState.notify( 'invalid' );
- } )
- .on( 'valueviewafterparse.snakview-variations-value',
function( event ) {
- self._viewState.notify( (
self._valueView.value() ) ? 'valid' : 'invalid' );
- } );
return true;
},
diff --git
a/lib/resources/jquery.wikibase/jquery.wikibase.snakview/snakview.variations.js
b/lib/resources/jquery.wikibase/jquery.wikibase.snakview/snakview.variations.js
index 953fc6d..1c5d5b9 100644
---
a/lib/resources/jquery.wikibase/jquery.wikibase.snakview/snakview.variations.js
+++
b/lib/resources/jquery.wikibase/jquery.wikibase.snakview/snakview.variations.js
@@ -48,9 +48,9 @@
}
var snakType = snakConstructor.TYPE,
- variatonName = 'WbSnakviewVariations_' +
snakType; // name for constructor
+ variationName = 'WbSnakviewVariations_' +
snakType; // name for constructor
- var Variation = wb.utilities.inherit( variatonName,
base, $.extend(
+ var Variation = wb.utilities.inherit( variationName,
base, $.extend(
{ variationBaseClass: 'wb-snakview-variation-'
+ snakType + 'snak' },
variationDefinition,
{ // we don't want to allow to overwrite this
one via the definition
diff --git a/lib/resources/wikibase.css b/lib/resources/wikibase.css
index d2103f0..fd10d2e 100644
--- a/lib/resources/wikibase.css
+++ b/lib/resources/wikibase.css
@@ -663,6 +663,7 @@
/* "add" link in one reference's snak list */
.wb-claim-qualifiers .wb-snaklistview > .wb-addtoolbar {
float: right;
+ clear: both;
margin-bottom: 1em;
}
--
To view, visit https://gerrit.wikimedia.org/r/63836
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Id592442afa3d141ad336710cf12d1740418ded75
Gerrit-PatchSet: 3
Gerrit-Project: mediawiki/extensions/Wikibase
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
