[Summary view] [Print] [Text view]

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