resources/src/jquery/jquery.autoEllipsis.js

   1 /**
   2  * @class jQuery.plugin.autoEllipsis
   3  */
   4 ( function ( $ ) {
   5
   6         var
   7                 // Cache ellipsed substrings for every string-width-position combination
   8                 cache = {},
   9
  10                 // Use a separate cache when match highlighting is enabled
  11                 matchTextCache = {};
  12
  13         // Due to <https://github.com/jscs-dev/jscs-jsdoc/issues/136>
  14         // jscs:disable jsDoc
  15         /**
  16          * Automatically truncate the plain text contents of an element and add an ellipsis
  17          *
  18          * @param {Object} options
  19          * @param {'left'|'center'|'right'} [options.position='center'] Where to remove text.
  20          * @param {boolean} [options.tooltip=false] Whether to show a tooltip with the remainder
  21          * of the text.
  22          * @param {boolean} [options.restoreText=false] Whether to save the text for restoring
  23          * later.
  24          * @param {boolean} [options.hasSpan=false] Whether the element is already a container,
  25          * or if the library should create a new container for it.
  26          * @param {string|null} [options.matchText=null] Text to highlight, e.g. search terms.
  27          * @return {jQuery}
  28          * @chainable
  29          */
  30         $.fn.autoEllipsis = function ( options ) {
  31                 options = $.extend( {
  32                         position: 'center',
  33                         tooltip: false,
  34                         restoreText: false,
  35                         hasSpan: false,
  36                         matchText: null
  37                 }, options );
  38
  39                 return this.each( function () {
  40                         var $trimmableText,
  41                                 text, trimmableText, w, pw,
  42                                 l, r, i, side, m,
  43                                 // container element - used for measuring against
  44                                 $container = $( this );
  45
  46                         if ( options.restoreText ) {
  47                                 if ( !$container.data( 'autoEllipsis.originalText' ) ) {
  48                                         $container.data( 'autoEllipsis.originalText', $container.text() );
  49                                 } else {
  50                                         $container.text( $container.data( 'autoEllipsis.originalText' ) );
  51                                 }
  52                         }
  53
  54                         // trimmable text element - only the text within this element will be trimmed
  55                         if ( options.hasSpan ) {
  56                                 $trimmableText = $container.children( options.selector );
  57                         } else {
  58                                 $trimmableText = $( '<span>' )
  59                                         .css( 'whiteSpace', 'nowrap' )
  60                                         .text( $container.text() );
  61                                 $container
  62                                         .empty()
  63                                         .append( $trimmableText );
  64                         }
  65
  66                         text = $container.text();
  67                         trimmableText = $trimmableText.text();
  68                         w = $container.width();
  69                         pw = 0;
  70
  71                         // Try cache
  72                         if ( options.matchText ) {
  73                                 if ( !( text in matchTextCache ) ) {
  74                                         matchTextCache[ text ] = {};
  75                                 }
  76                                 if ( !( options.matchText in matchTextCache[ text ] ) ) {
  77                                         matchTextCache[ text ][ options.matchText ] = {};
  78                                 }
  79                                 if ( !( w in matchTextCache[ text ][ options.matchText ] ) ) {
  80                                         matchTextCache[ text ][ options.matchText ][ w ] = {};
  81                                 }
  82                                 if ( options.position in matchTextCache[ text ][ options.matchText ][ w ] ) {
  83                                         $container.html( matchTextCache[ text ][ options.matchText ][ w ][ options.position ] );
  84                                         if ( options.tooltip ) {
  85                                                 $container.attr( 'title', text );
  86                                         }
  87                                         return;
  88                                 }
  89                         } else {
  90                                 if ( !( text in cache ) ) {
  91                                         cache[ text ] = {};
  92                                 }
  93                                 if ( !( w in cache[ text ] ) ) {
  94                                         cache[ text ][ w ] = {};
  95                                 }
  96                                 if ( options.position in cache[ text ][ w ] ) {
  97                                         $container.html( cache[ text ][ w ][ options.position ] );
  98                                         if ( options.tooltip ) {
  99                                                 $container.attr( 'title', text );
 100                                         }
 101                                         return;
 102                                 }
 103                         }
 104
 105                         if ( $trimmableText.width() + pw > w ) {
 106                                 switch ( options.position ) {
 107                                         case 'right':
 108                                                 // Use binary search-like technique for efficiency
 109                                                 l = 0;
 110                                                 r = trimmableText.length;
 111                                                 do {
 112                                                         m = Math.ceil( ( l + r ) / 2 );
 113                                                         $trimmableText.text( trimmableText.slice( 0, m ) + '...' );
 114                                                         if ( $trimmableText.width() + pw > w ) {
 115                                                                 // Text is too long
 116                                                                 r = m - 1;
 117                                                         } else {
 118                                                                 l = m;
 119                                                         }
 120                                                 } while ( l < r );
 121                                                 $trimmableText.text( trimmableText.slice( 0, l ) + '...' );
 122                                                 break;
 123                                         case 'center':
 124                                                 // TODO: Use binary search like for 'right'
 125                                                 i = [ Math.round( trimmableText.length / 2 ), Math.round( trimmableText.length / 2 ) ];
 126                                                 // Begin with making the end shorter
 127                                                 side = 1;
 128                                                 while ( $trimmableText.outerWidth() + pw > w && i[ 0 ] > 0 ) {
 129                                                         $trimmableText.text( trimmableText.slice( 0, i[ 0 ] ) + '...' + trimmableText.slice( i[ 1 ] ) );
 130                                                         // Alternate between trimming the end and begining
 131                                                         if ( side === 0 ) {
 132                                                                 // Make the begining shorter
 133                                                                 i[ 0 ]--;
 134                                                                 side = 1;
 135                                                         } else {
 136                                                                 // Make the end shorter
 137                                                                 i[ 1 ]++;
 138                                                                 side = 0;
 139                                                         }
 140                                                 }
 141                                                 break;
 142                                         case 'left':
 143                                                 // TODO: Use binary search like for 'right'
 144                                                 r = 0;
 145                                                 while ( $trimmableText.outerWidth() + pw > w && r < trimmableText.length ) {
 146                                                         $trimmableText.text( '...' + trimmableText.slice( r ) );
 147                                                         r++;
 148                                                 }
 149                                                 break;
 150                                 }
 151                         }
 152                         if ( options.tooltip ) {
 153                                 $container.attr( 'title', text );
 154                         }
 155                         if ( options.matchText ) {
 156                                 $container.highlightText( options.matchText );
 157                                 matchTextCache[ text ][ options.matchText ][ w ][ options.position ] = $container.html();
 158                         } else {
 159                                 cache[ text ][ w ][ options.position ] = $container.html();
 160                         }
 161
 162                 } );
 163         };
 164         // jscs:enable jsDoc
 165
 166         /**
 167          * @class jQuery
 168          * @mixins jQuery.plugin.autoEllipsis
 169          */
 170
 171 }( jQuery ) );