resources/jquery/jquery.autoEllipsis.js

   1 /**
   2  * Plugin that automatically truncates the plain text contents of an element and adds an ellipsis
   3  */
   4 ( function( $ ) {
   5
   6 // Cache ellipsed substrings for every string-width combination
   7 var cache = { };
   8 // Use a seperate cache when match highlighting is enabled
   9 var matchTextCache = { };
  10
  11 $.fn.autoEllipsis = function( options ) {
  12         options = $.extend( {
  13                 'position': 'center',
  14                 'tooltip': false,
  15                 'restoreText': false,
  16                 'hasSpan': false,
  17                 'matchText': null
  18         }, options );
  19         $(this).each( function() {
  20                 var $el = $(this);
  21                 if ( options.restoreText ) {
  22                         if ( !$el.data( 'autoEllipsis.originalText' ) ) {
  23                                 $el.data( 'autoEllipsis.originalText', $el.text() );
  24                         } else {
  25                                 $el.text( $el.data( 'autoEllipsis.originalText' ) );
  26                         }
  27                 }
  28
  29                 // container element - used for measuring against
  30                 var $container = $el;
  31                 // trimmable text element - only the text within this element will be trimmed
  32                 var $trimmableText = null;
  33                 // protected text element - the width of this element is counted, but next is never trimmed from it
  34                 var $protectedText = null;
  35
  36                 if ( options.hasSpan ) {
  37                         $trimmableText = $el.children( options.selector );
  38                 } else {
  39                         $trimmableText = $( '<span />' )
  40                                 .css( 'whiteSpace', 'nowrap' )
  41                                 .text( $el.text() );
  42                         $el
  43                                 .empty()
  44                                 .append( $trimmableText );
  45                 }
  46
  47                 var text = $container.text();
  48                 var trimmableText = $trimmableText.text();
  49                 var w = $container.width();
  50                 var pw = $protectedText ? $protectedText.width() : 0;
  51                 // Try cache
  52                 if ( !( text in cache ) ) {
  53                         cache[text] = {};
  54                 }
  55                 if ( options.matchText && !( text in matchTextCache ) ) {
  56                         matchTextCache[text] = {};
  57                 }
  58                 if ( options.matchText && !( options.matchText in matchTextCache[text] ) ) {
  59                         matchTextCache[text][options.matchText] = {};
  60                 }
  61                 if ( !options.matchText && w in cache[text] ) {
  62                         $container.html( cache[text][w] );
  63                         if ( options.tooltip ) {
  64                                 $container.attr( 'title', text );
  65                         }
  66                         return;
  67                 }
  68                 if( options.matchText && options.matchText in matchTextCache[text] && w in matchTextCache[text][options.matchText] ) {
  69                         $container.html( matchTextCache[text][options.matchText][w] );
  70                         if ( options.tooltip ) {
  71                                 $container.attr( 'title', text );
  72                         }
  73                         return;
  74                 }
  75                 if ( $trimmableText.width() + pw > w ) {
  76                         switch ( options.position ) {
  77                                 case 'right':
  78                                         // Use binary search-like technique for efficiency
  79                                         var l = 0, r = trimmableText.length;
  80                                         do {
  81                                                 var m = Math.ceil( ( l + r ) / 2 );
  82                                                 $trimmableText.text( trimmableText.substr( 0, m ) + '...' );
  83                                                 if ( $trimmableText.width() + pw > w ) {
  84                                                         // Text is too long
  85                                                         r = m - 1;
  86                                                 } else {
  87                                                         l = m;
  88                                                 }
  89                                         } while ( l < r );
  90                                         $trimmableText.text( trimmableText.substr( 0, l ) + '...' );
  91                                         break;
  92                                 case 'center':
  93                                         // TODO: Use binary search like for 'right'
  94                                         var i = [Math.round( trimmableText.length / 2 ), Math.round( trimmableText.length / 2 )];
  95                                         var side = 1; // Begin with making the end shorter
  96                                         while ( $trimmableText.outerWidth() + pw > w  && i[0] > 0 ) {
  97                                                 $trimmableText.text( trimmableText.substr( 0, i[0] ) + '...' + trimmableText.substr( i[1] ) );
  98                                                 // Alternate between trimming the end and begining
  99                                                 if ( side === 0 ) {
 100                                                         // Make the begining shorter
 101                                                         i[0]--;
 102                                                         side = 1;
 103                                                 } else {
 104                                                         // Make the end shorter
 105                                                         i[1]++;
 106                                                         side = 0;
 107                                                 }
 108                                         }
 109                                         break;
 110                                 case 'left':
 111                                         // TODO: Use binary search like for 'right'
 112                                         var r = 0;
 113                                         while ( $trimmableText.outerWidth() + pw > w && r < trimmableText.length ) {
 114                                                 $trimmableText.text( '...' + trimmableText.substr( r ) );
 115                                                 r++;
 116                                         }
 117                                         break;
 118                         }
 119                 }
 120                 if ( options.tooltip ) {
 121                         $container.attr( 'title', text );
 122                 }
 123                 if ( options.matchText ) {
 124                         $container.highlightText( options.matchText );
 125                         matchTextCache[text][options.matchText][w] = $container.html();
 126                 } else {
 127                         cache[text][w] = $container.html();
 128                 }
 129
 130         } );
 131 };
 132
 133 } )( jQuery );