jenkins-bot has submitted this change and it was merged. Change subject: TextInputWidget: Reuse a single clone instead of appending and removing new ones ......................................................................
TextInputWidget: Reuse a single clone instead of appending and removing new ones Also, use '.style.display' instead of '.show()' and '.hide()' http://jsperf.com/adjustsize/2 Bug: T75328 Change-Id: I45ba2ba9d0009918043a91888f5f281f7a67e65b --- M src/widgets/TextInputWidget.js 1 file changed, 32 insertions(+), 12 deletions(-) Approvals: Trevor Parscal: Looks good to me, approved jenkins-bot: Verified diff --git a/src/widgets/TextInputWidget.js b/src/widgets/TextInputWidget.js index 9b0da89..8c8bc42 100644 --- a/src/widgets/TextInputWidget.js +++ b/src/widgets/TextInputWidget.js @@ -37,6 +37,14 @@ this.maxRows = config.maxRows !== undefined ? config.maxRows : 10; this.validate = null; + // Clone for resizing + if ( this.autosize ) { + this.$clone = this.$input + .clone() + .insertAfter( this.$input ) + .hide(); + } + this.setValidation( config.validate ); // Events @@ -199,28 +207,40 @@ * @chainable */ OO.ui.TextInputWidget.prototype.adjustSize = function () { - var $clone, scrollHeight, innerHeight, outerHeight, maxInnerHeight, measurementError, idealHeight; + var scrollHeight, innerHeight, outerHeight, maxInnerHeight, measurementError, idealHeight; if ( this.multiline && this.autosize && this.$input.val() !== this.valCache ) { - $clone = this.$input.clone() + this.$clone .val( this.$input.val() ) + .attr( 'rows', '' ) // Set inline height property to 0 to measure scroll height - .css( 'height', 0 ) - .insertAfter( this.$input ); + .css( 'height', 0 ); + + this.$clone[0].style.display = 'block'; + this.valCache = this.$input.val(); - scrollHeight = $clone[0].scrollHeight; + + scrollHeight = this.$clone[0].scrollHeight; + // Remove inline height property to measure natural heights - $clone.css( 'height', '' ); - innerHeight = $clone.innerHeight(); - outerHeight = $clone.outerHeight(); + this.$clone.css( 'height', '' ); + innerHeight = this.$clone.innerHeight(); + outerHeight = this.$clone.outerHeight(); + // Measure max rows height - $clone.attr( 'rows', this.maxRows ).css( 'height', 'auto' ).val( '' ); - maxInnerHeight = $clone.innerHeight(); + this.$clone + .attr( 'rows', this.maxRows ) + .css( 'height', 'auto' ) + .val( '' ); + maxInnerHeight = this.$clone.innerHeight(); + // Difference between reported innerHeight and scrollHeight with no scrollbars present // Equals 1 on Blink-based browsers and 0 everywhere else - measurementError = maxInnerHeight - $clone[0].scrollHeight; - $clone.remove(); + measurementError = maxInnerHeight - this.$clone[0].scrollHeight; idealHeight = Math.min( maxInnerHeight, scrollHeight + measurementError ); + + this.$clone[0].style.display = 'none'; + // Only apply inline height when expansion beyond natural height is needed if ( idealHeight > innerHeight ) { // Use the difference between the inner and outer height as a buffer -- To view, visit https://gerrit.wikimedia.org/r/176476 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I45ba2ba9d0009918043a91888f5f281f7a67e65b Gerrit-PatchSet: 4 Gerrit-Project: oojs/ui Gerrit-Branch: master Gerrit-Owner: Prtksxna <[email protected]> Gerrit-Reviewer: Bartosz Dziewoński <[email protected]> Gerrit-Reviewer: Jforrester <[email protected]> Gerrit-Reviewer: Krinkle <[email protected]> Gerrit-Reviewer: Prtksxna <[email protected]> Gerrit-Reviewer: Trevor Parscal <[email protected]> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
