Autosize the EditSummaryWidget

Change-Id: I4df49b1ea202dcb7bbb82cb99d26f0dec17133bc
This commit is contained in:
Ed Sanders 2020-05-31 17:31:04 +01:00
parent 8adceadac0
commit f923081e3f
3 changed files with 39 additions and 2 deletions

View file

@ -572,6 +572,16 @@ ve.ui.MWSaveDialog.prototype.initialize = function () {
dialog.updateOptionsBar(); dialog.updateOptionsBar();
} ); } );
this.editSummaryInput.on( 'resize', function () {
if ( dialog.overflowTimeout !== undefined ) {
clearTimeout( dialog.overflowTimeout );
}
dialog.panels.$element.css( 'overflow', 'hidden' );
dialog.updateSize();
dialog.overflowTimeout = setTimeout( function () {
dialog.panels.$element.css( 'overflow', '' );
}, 250 );
} );
this.$saveCheckboxes = $( '<div>' ).addClass( 've-ui-mwSaveDialog-checkboxes' ); this.$saveCheckboxes = $( '<div>' ).addClass( 've-ui-mwSaveDialog-checkboxes' );
this.$saveOptions = $( '<div>' ).addClass( 've-ui-mwSaveDialog-options' ).append( this.$saveOptions = $( '<div>' ).addClass( 've-ui-mwSaveDialog-options' ).append(

View file

@ -17,8 +17,6 @@
.ve-ui-mwSaveDialog-summary textarea { .ve-ui-mwSaveDialog-summary textarea {
height: 4em; height: 4em;
/* stylelint-disable-next-line plugin/no-unsupported-browser-features */
resize: vertical;
} }
.ve-ui-mwSaveDialog-foot { .ve-ui-mwSaveDialog-foot {

View file

@ -21,6 +21,8 @@ ve.ui.MWEditSummaryWidget = function VeUiMWEditSummaryWidget( config ) {
// Parent method // Parent method
ve.ui.MWEditSummaryWidget.super.call( this, ve.extendObject( { ve.ui.MWEditSummaryWidget.super.call( this, ve.extendObject( {
autosize: true,
maxRows: 15,
inputFilter: function ( value ) { inputFilter: function ( value ) {
// Prevent the user from inputting newlines (this kicks in on paste, etc.) // Prevent the user from inputting newlines (this kicks in on paste, etc.)
return value.replace( /\r?\n/g, ' ' ); return value.replace( /\r?\n/g, ' ' );
@ -102,6 +104,33 @@ ve.ui.MWEditSummaryWidget.static.getMatchingSummaries = function ( summaries, qu
/* Methods */ /* Methods */
/**
* @inheritdoc
*/
ve.ui.MWEditSummaryWidget.prototype.adjustSize = function () {
// To autosize, the widget will render another element beneath the input
// with the same text for measuring. This extra element could cause scrollbars
// to appear, changing the available width, so if scrollbars are intially
// hidden, force them to stay hidden during the adjustment.
// TODO: Consider upstreaming this?
var scrollContainer = this.getClosestScrollableElementContainer();
var hasScrollbar = scrollContainer.offsetWidth > scrollContainer.scrollWidth;
var overflowY;
if ( !hasScrollbar ) {
overflowY = scrollContainer.style.overflowY;
scrollContainer.style.overflowY = 'hidden';
}
// Parent method
ve.ui.MWEditSummaryWidget.super.prototype.adjustSize.apply( this, arguments );
if ( !hasScrollbar ) {
scrollContainer.style.overflowY = overflowY;
}
return this;
};
/** /**
* @inheritdoc * @inheritdoc
*/ */