jenkins-bot has submitted this change and it was merged. Change subject: Add functionality to TruncatedTextField to toggle full text ......................................................................
Add functionality to TruncatedTextField to toggle full text Change-Id: I34db79faa80ee5d1b3518aafd9b866cc9cdcc45b Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/396 --- M resources/mmv/ui/mmv.ui.truncatableTextField.js M tests/qunit/mmv/ui/mmv.ui.truncatableTextField.test.js 2 files changed, 69 insertions(+), 37 deletions(-) Approvals: Gilles: Looks good to me, approved jenkins-bot: Verified diff --git a/resources/mmv/ui/mmv.ui.truncatableTextField.js b/resources/mmv/ui/mmv.ui.truncatableTextField.js index 16ce63f..a240e3f 100644 --- a/resources/mmv/ui/mmv.ui.truncatableTextField.js +++ b/resources/mmv/ui/mmv.ui.truncatableTextField.js @@ -32,8 +32,17 @@ function TruncatableTextField( $container, $element, sizes ) { mw.mmv.ui.Element.call( this, $container ); + /** @property {boolean} truncated state flag */ + this.truncated = false; + /** @property {jQuery} $element The DOM element that holds text for this element. */ this.$element = $element; + + /** @property {string} originalHtml the original (after sanitizing) element as a HTML string */ + this.originalHtml = null; + + /** @property {string} truncatedHtml the truncated element as a HTML string */ + this.truncatedHtml = null; /** @property {mw.mmv.HtmlUtils} htmlUtils Our HTML utility instance. */ this.htmlUtils = new mw.mmv.HtmlUtils(); @@ -73,28 +82,36 @@ * @override */ TTFP.set = function ( value ) { - this.whitelistHtmlAndSet( value ); - this.shrink(); + this.originalHtml = this.htmlUtils.htmlToTextWithLinks( value ); + this.$element.empty().append( this.originalHtml ); + this.changeStyle(); this.$element.toggleClass( 'empty', !value ); - }; + this.truncated = false; - /** - * Whitelists HTML in the DOM element. Just a shortcut because - * this class has only one element member. Then sets the text. - * @param {string} value Has unsafe HTML. - */ - TTFP.whitelistHtmlAndSet = function ( value ) { - var $newEle = $.parseHTML( this.htmlUtils.htmlToTextWithLinks( value ) ); - this.$element.empty().append( $newEle ); + this.truncatedHtml = this.truncate( this.$element.get( 0 ), this.max, true ).html(); + + this.shrink(); }; /** * Makes the text smaller via a few different methods. */ TTFP.shrink = function () { - this.changeStyle(); - this.$element = this.truncate( this.$element.get( 0 ), this.max, true ); + if ( !this.truncated ) { + this.$element.html( this.truncatedHtml ); + this.truncated = true; + } + }; + + /** + * Restores original text + */ + TTFP.grow = function () { + if ( this.truncated ) { + this.$element.html( this.originalHtml ); + this.truncated = false; + } }; /** @@ -156,7 +173,6 @@ $result.append( '…' ); } - $( element ).replaceWith( $result ); return $result; }; diff --git a/tests/qunit/mmv/ui/mmv.ui.truncatableTextField.test.js b/tests/qunit/mmv/ui/mmv.ui.truncatableTextField.test.js index 0beca5d..a04d0dc 100644 --- a/tests/qunit/mmv/ui/mmv.ui.truncatableTextField.test.js +++ b/tests/qunit/mmv/ui/mmv.ui.truncatableTextField.test.js @@ -41,7 +41,8 @@ } ); QUnit.test( 'Truncate method', 1, function ( assert ) { - var $container = $( '#qunit-fixture' ).empty(), + var $truncatedElement, + $container = $( '#qunit-fixture' ).empty(), $element = $( '<div>' ).appendTo( $container ), textOne = ( new Array( 50 ) ).join( 'a' ), textTwo = ( new Array( 100 ) ).join( 'b' ), @@ -54,13 +55,15 @@ // We only want to test the element exclusion here ttf.truncateText = function () { return ''; }; - ttf.truncate( $element.get( 0 ), ttf.max, false ); - assert.strictEqual( $container.text(), textOne, 'The too-long element is excluded.' ); + $truncatedElement = ttf.truncate( $element.get( 0 ), ttf.max, false ); + + assert.strictEqual( $truncatedElement.text(), textOne, 'The too-long element is excluded.' ); } ); QUnit.test( 'Truncate method', 2, function ( assert ) { - var $container = $( '#qunit-fixture' ).empty(), + var $truncatedElement, + $container = $( '#qunit-fixture' ).empty(), $element = $( '<div>' ).appendTo( $container ), textOne = ( new Array( 5 ) ).join( 'a' ), textTwo = ( new Array( 5 ) ).join( 'b' ), @@ -85,12 +88,12 @@ ) ); - ttf.truncate( $element.get( 0 ), ttf.max, false ); + $truncatedElement = ttf.truncate( $element.get( 0 ), ttf.max, false ); - assert.strictEqual( $container.text().length, ttf.max, 'Correctly truncated to max length' ); + assert.strictEqual( $truncatedElement.text().length, ttf.max, 'Correctly truncated to max length' ); assert.strictEqual( - $container.text(), + $truncatedElement.text(), textOne + textTwo + textThree + textFour + textFiveTruncated, 'Markup truncated correctly.' ); } ); @@ -106,19 +109,6 @@ assert.strictEqual( newText, ( new Array( 101 ) ).join( 'a' ), 'Text has the right content.' ); } ); - QUnit.test( 'Shrink method', 2, function ( assert ) { - var $container = $( '#qunit-fixture' ).empty(), - $element = $( '<div>' ).appendTo( $container ), - ttf = new mw.mmv.ui.TruncatableTextField( $container, $element ); - - ttf.truncate = function ( ele, max, ell ) { - assert.strictEqual( max, ttf.max, 'Max length is passed in right' ); - assert.strictEqual( ell, true, 'Ellipses are enabled on the first call' ); - }; - - ttf.shrink(); - } ); - QUnit.test( 'Different max length - text truncation', 2, function ( assert ) { var $container = $( '#qunit-fixture' ).empty(), $element = $( '<div>' ).appendTo( $container ), @@ -131,7 +121,8 @@ } ); QUnit.test( 'Different max length - DOM truncation', 1, function ( assert ) { - var $container = $( '#qunit-fixture' ).empty(), + var $truncatedElement, + $container = $( '#qunit-fixture' ).empty(), $element = $( '<div>' ).appendTo( $container ), textOne = ( new Array( 150 ) ).join( 'a' ), textTwo = ( new Array( 100 ) ).join( 'b' ), @@ -144,9 +135,9 @@ // We only want to test the element exclusion here ttf.truncateText = function () { return ''; }; - ttf.truncate( $element.get( 0 ), ttf.max, false ); + $truncatedElement = ttf.truncate( $element.get( 0 ), ttf.max, false ); - assert.strictEqual( $container.text(), textOne, 'The too-long element is removed.' ); + assert.strictEqual( $truncatedElement.text(), textOne, 'The too-long element is removed.' ); } ); QUnit.test( 'Changing style for slightly too-long elements', 3, function ( assert ) { @@ -163,4 +154,29 @@ ttf.changeStyle(); assert.ok( ttf.$element.hasClass( 'mw-mmv-truncate-toolong' ), 'Class re-set on too-long text.' ); } ); + + QUnit.test( 'Shrink/grow', 5, function ( assert ) { + var $container = $( '#qunit-fixture' ).empty(), + $element = $( '<div>' ).appendTo( $container ), + textOne = ( new Array( 50 ) ).join( 'a' ), + textTwo = ( new Array( 100 ) ).join( 'b' ), + ttf = new mw.mmv.ui.TruncatableTextField( $container, $element ); + + ttf.max = 50; + + ttf.set( '<a>' + textOne + '</a><a>' + textTwo + '</a>' ); // calls shrink + assert.strictEqual( $element.text(), textOne + '…', 'The too-long element is excluded.' ); + + ttf.grow(); + assert.strictEqual( $element.text(), textOne + textTwo, 'The full text is readable after calling grow().' ); + + ttf.grow(); + assert.strictEqual( $element.text(), textOne + textTwo, 'grow() is idempotent.' ); + + ttf.shrink(); + assert.strictEqual( $element.text(), textOne + '…', 'The text is shortened again after calling shrink().' ); + + ttf.shrink(); + assert.strictEqual( $element.text(), textOne + '…', 'shrink() is idempotent.' ); + } ); }( mediaWiki, jQuery ) ); -- To view, visit https://gerrit.wikimedia.org/r/143541 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I34db79faa80ee5d1b3518aafd9b866cc9cdcc45b Gerrit-PatchSet: 3 Gerrit-Project: mediawiki/extensions/MultimediaViewer Gerrit-Branch: master Gerrit-Owner: Gergő Tisza <[email protected]> Gerrit-Reviewer: Gilles <[email protected]> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
