Gergő Tisza has uploaded a new change for review. https://gerrit.wikimedia.org/r/143541
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, 45 insertions(+), 38 deletions(-) git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MultimediaViewer refs/changes/41/143541/1 diff --git a/resources/mmv/ui/mmv.ui.truncatableTextField.js b/resources/mmv/ui/mmv.ui.truncatableTextField.js index 16ce63f..3631b81 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..0e6de5b 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' ), @@ -69,7 +72,7 @@ textFive = ( new Array( 100 ) ).join( 'e' ), textFiveTruncated = ( new Array( 85 ) ).join( 'e' ), textSix = ( new Array( 100 ) ).join( 'f' ), - ttf = new mw.mmv.ui.TruncatableTextField( $container, $element ); + ttf = new mw.mmv.ui.TruncatableTextField( $container, $element); $element.append( $( '<span>' ) @@ -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 ) { -- To view, visit https://gerrit.wikimedia.org/r/143541 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: newchange Gerrit-Change-Id: I34db79faa80ee5d1b3518aafd9b866cc9cdcc45b Gerrit-PatchSet: 1 Gerrit-Project: mediawiki/extensions/MultimediaViewer Gerrit-Branch: master Gerrit-Owner: Gergő Tisza <[email protected]> _______________________________________________ MediaWiki-commits mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
