wikimedia/mediawiki-extensions-VisualEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor synced 2024-11-15 02:23:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add a threshold to 'read more' calculation in media dialog info

Browse source 
When calculating whether to show the 'read more' button on fields
that are configured 'descriptions', use a threshold to check if
the height is enough to be shown.

Bug: T87265
Change-Id: I0601e4fa92cb58903641a146500cf560bc029425
This commit is contained in:
Moriel Schottlender 2015-02-26 15:40:26 -08:00
parent a515c4468b
commit 06f29f343a
2 changed files with 30 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
modules/ve-mw/ui/dialogs/ve.ui.MWMediaDialog.js
View file

@ -619,11 +619,9 @@ ve.ui.MWMediaDialog.prototype.buildMediaInfoPanel = function ( imageinfo ) {
$info.outerWidth( Math.floor( windowWidth - $thumbContainer.outerWidth( true ) - 15 ) ); $info.outerWidth( Math.floor( windowWidth - $thumbContainer.outerWidth( true ) - 15 ) );
} }
// Adjust height-limited fields // Initialize fields
for ( field in fields ) { for ( field in fields ) {
if ( fields[field].getType() === 'description' ) { fields[field].initialize();
fields[field].toggleReadMoreButton();
}
} }
// Let the scrollbar appear naturally if it should // Let the scrollbar appear naturally if it should
this.mediaImageInfoPanel.$element.css( 'overflow', '' ); this.mediaImageInfoPanel.$element.css( 'overflow', '' );

33
modules/ve-mw/ui/widgets/ve.ui.MWMediaInfoFieldWidget.js
View file

@ -106,15 +106,38 @@ OO.mixinClass( ve.ui.MWMediaInfoFieldWidget, OO.ui.LabelElement );
ve.ui.MWMediaInfoFieldWidget.static.tagName = 'div'; ve.ui.MWMediaInfoFieldWidget.static.tagName = 'div';
/**
* Define a height threshold for the description fields.
* If the rendered field's height is under the defined limit
* (max-height + threshold) we should remove the max-height
* and display the field as-is.
* This prevents cases where "read more" appears but only
* exposes only a few pixels or a line extra.
*
* @property {number} Threshold in pixels
*/
ve.ui.MWMediaInfoFieldWidget.static.threshold = 24;
/** /**
* Toggle the read more button according to whether it should be * Toggle the read more button according to whether it should be
* visible or not. * visible or not.
*/ */
ve.ui.MWMediaInfoFieldWidget.prototype.toggleReadMoreButton = function () { ve.ui.MWMediaInfoFieldWidget.prototype.initialize = function () {
var show = this.$text.height() < this.$text.prop( 'scrollHeight' ); var actualHeight, containerHeight;
// Only show the readMore button if it should be shown, and not while
// the expansion animation is ongoing if ( this.getType() === 'description' ) {
this.readMoreButton.toggle( show ); actualHeight = this.$text.prop( 'scrollHeight' );
containerHeight = this.$text.outerHeight( true );
if ( actualHeight < containerHeight + this.constructor.static.threshold ) {
// The contained result is big enough to show. Remove the maximum height
this.$text
.css( 'maxHeight', '' );
} else {
// Only show the readMore button if it should be shown
this.readMoreButton.toggle( containerHeight < actualHeight );
}
}
}; };
/** /**