633 lines
11 KiB
JavaScript
633 lines
11 KiB
JavaScript
|
/*
|
||
|
|
* jQuery dotdotdot 1.6.1
|
||
|
|
*
|
||
|
|
* Copyright (c) 2013 Fred Heusschen
|
||
|
|
* www.frebsite.nl
|
||
|
|
*
|
||
|
|
* Plugin website:
|
||
|
|
* dotdotdot.frebsite.nl
|
||
|
|
*
|
||
|
|
* Dual licensed under the MIT and GPL licenses.
|
||
|
|
* http://en.wikipedia.org/wiki/MIT_License
|
||
|
|
* http://en.wikipedia.org/wiki/GNU_General_Public_License
|
||
|
|
*/
|
||
|
|
|
||
|
|
(function( $ )
|
||
|
|
{
|
||
|
|
if ( $.fn.dotdotdot )
|
||
|
|
{
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
$.fn.dotdotdot = function( o )
|
||
|
|
{
|
||
|
|
if ( this.length == 0 )
|
||
|
|
{
|
||
|
|
if ( !o || o.debug !== false )
|
||
|
|
{
|
||
|
|
debug( true, 'No element found for "' + this.selector + '".' );
|
||
|
|
}
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
if ( this.length > 1 )
|
||
|
|
{
|
||
|
|
return this.each(
|
||
|
|
function()
|
||
|
|
{
|
||
|
|
$(this).dotdotdot( o );
|
||
|
|
}
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
var $dot = this;
|
||
|
|
|
||
|
|
if ( $dot.data( 'dotdotdot' ) )
|
||
|
|
{
|
||
|
|
$dot.trigger( 'destroy.dot' );
|
||
|
|
}
|
||
|
|
|
||
|
|
$dot.data( 'dotdotdot-style', $dot.attr( 'style' ) );
|
||
|
|
$dot.css( 'word-wrap', 'break-word' );
|
||
|
|
if ($dot.css( 'white-space' ) === 'nowrap')
|
||
|
|
{
|
||
|
|
$dot.css( 'white-space', 'normal' );
|
||
|
|
}
|
||
|
|
|
||
|
|
$dot.bind_events = function()
|
||
|
|
{
|
||
|
|
$dot.bind(
|
||
|
|
'update.dot',
|
||
|
|
function( e, c )
|
||
|
|
{
|
||
|
|
e.preventDefault();
|
||
|
|
e.stopPropagation();
|
||
|
|
|
||
|
|
opts.maxHeight = ( typeof opts.height == 'number' )
|
||
|
|
? opts.height
|
||
|
|
: getTrueInnerHeight( $dot );
|
||
|
|
|
||
|
|
opts.maxHeight += opts.tolerance;
|
||
|
|
|
||
|
|
if ( typeof c != 'undefined' )
|
||
|
|
{
|
||
|
|
if ( typeof c == 'string' || c instanceof HTMLElement )
|
||
|
|
{
|
||
|
|
c = $('<div />').append( c ).contents();
|
||
|
|
}
|
||
|
|
if ( c instanceof $ )
|
||
|
|
{
|
||
|
|
orgContent = c;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
$inr = $dot.wrapInner( '<div class="dotdotdot" />' ).children();
|
||
|
|
$inr.empty()
|
||
|
|
.append( orgContent.clone( true ) )
|
||
|
|
.css({
|
||
|
|
'height' : 'auto',
|
||
|
|
'width' : 'auto',
|
||
|
|
'border' : 'none',
|
||
|
|
'padding' : 0,
|
||
|
|
'margin' : 0
|
||
|
|
});
|
||
|
|
|
||
|
|
var after = false,
|
||
|
|
trunc = false;
|
||
|
|
|
||
|
|
if ( conf.afterElement )
|
||
|
|
{
|
||
|
|
after = conf.afterElement.clone( true );
|
||
|
|
conf.afterElement.remove();
|
||
|
|
}
|
||
|
|
if ( test( $inr, opts ) )
|
||
|
|
{
|
||
|
|
if ( opts.wrap == 'children' )
|
||
|
|
{
|
||
|
|
trunc = children( $inr, opts, after );
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
trunc = ellipsis( $inr, $dot, $inr, opts, after );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
$inr.replaceWith( $inr.contents() );
|
||
|
|
$inr = null;
|
||
|
|
|
||
|
|
if ( $.isFunction( opts.callback ) )
|
||
|
|
{
|
||
|
|
opts.callback.call( $dot[ 0 ], trunc, orgContent );
|
||
|
|
}
|
||
|
|
|
||
|
|
conf.isTruncated = trunc;
|
||
|
|
return trunc;
|
||
|
|
}
|
||
|
|
|
||
|
|
).bind(
|
||
|
|
'isTruncated.dot',
|
||
|
|
function( e, fn )
|
||
|
|
{
|
||
|
|
e.preventDefault();
|
||
|
|
e.stopPropagation();
|
||
|
|
|
||
|
|
if ( typeof fn == 'function' )
|
||
|
|
{
|
||
|
|
fn.call( $dot[ 0 ], conf.isTruncated );
|
||
|
|
}
|
||
|
|
return conf.isTruncated;
|
||
|
|
}
|
||
|
|
|
||
|
|
).bind(
|
||
|
|
'originalContent.dot',
|
||
|
|
function( e, fn )
|
||
|
|
{
|
||
|
|
e.preventDefault();
|
||
|
|
e.stopPropagation();
|
||
|
|
|
||
|
|
if ( typeof fn == 'function' )
|
||
|
|
{
|
||
|
|
fn.call( $dot[ 0 ], orgContent );
|
||
|
|
}
|
||
|
|
return orgContent;
|
||
|
|
}
|
||
|
|
|
||
|
|
).bind(
|
||
|
|
'destroy.dot',
|
||
|
|
function( e )
|
||
|
|
{
|
||
|
|
e.preventDefault();
|
||
|
|
e.stopPropagation();
|
||
|
|
|
||
|
|
$dot.unwatch()
|
||
|
|
.unbind_events()
|
||
|
|
.empty()
|
||
|
|
.append( orgContent )
|
||
|
|
.attr( 'style', $dot.data( 'dotdotdot-style' ) )
|
||
|
|
.data( 'dotdotdot', false );
|
||
|
|
}
|
||
|
|
);
|
||
|
|
return $dot;
|
||
|
|
}; // /bind_events
|
||
|
|
|
||
|
|
$dot.unbind_events = function()
|
||
|
|
{
|
||
|
|
$dot.unbind('.dot');
|
||
|
|
return $dot;
|
||
|
|
}; // /unbind_events
|
||
|
|
|
||
|
|
$dot.watch = function()
|
||
|
|
{
|
||
|
|
$dot.unwatch();
|
||
|
|
if ( opts.watch == 'window' )
|
||
|
|
{
|
||
|
|
var $window = $(window),
|
||
|
|
_wWidth = $window.width(),
|
||
|
|
_wHeight = $window.height();
|
||
|
|
|
||
|
|
$window.bind(
|
||
|
|
'resize.dot' + conf.dotId,
|
||
|
|
function()
|
||
|
|
{
|
||
|
|
if ( _wWidth != $window.width() || _wHeight != $window.height() || !opts.windowResizeFix )
|
||
|
|
{
|
||
|
|
_wWidth = $window.width();
|
||
|
|
_wHeight = $window.height();
|
||
|
|
|
||
|
|
if ( watchInt )
|
||
|
|
{
|
||
|
|
clearInterval( watchInt );
|
||
|
|
}
|
||
|
|
watchInt = setTimeout(
|
||
|
|
function()
|
||
|
|
{
|
||
|
|
$dot.trigger( 'update.dot' );
|
||
|
|
}, 10
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
);
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
watchOrg = getSizes( $dot );
|
||
|
|
watchInt = setInterval(
|
||
|
|
function()
|
||
|
|
{
|
||
|
|
var watchNew = getSizes( $dot );
|
||
|
|
if ( watchOrg.width != watchNew.width ||
|
||
|
|
watchOrg.height != watchNew.height )
|
||
|
|
{
|
||
|
|
$dot.trigger( 'update.dot' );
|
||
|
|
watchOrg = getSizes( $dot );
|
||
|
|
}
|
||
|
|
}, 100
|
||
|
|
);
|
||
|
|
}
|
||
|
|
return $dot;
|
||
|
|
};
|
||
|
|
$dot.unwatch = function()
|
||
|
|
{
|
||
|
|
$(window).unbind( 'resize.dot' + conf.dotId );
|
||
|
|
if ( watchInt )
|
||
|
|
{
|
||
|
|
clearInterval( watchInt );
|
||
|
|
}
|
||
|
|
return $dot;
|
||
|
|
};
|
||
|
|
|
||
|
|
var orgContent = $dot.contents(),
|
||
|
|
opts = $.extend( true, {}, $.fn.dotdotdot.defaults, o ),
|
||
|
|
conf = {},
|
||
|
|
watchOrg = {},
|
||
|
|
watchInt = null,
|
||
|
|
$inr = null;
|
||
|
|
|
||
|
|
|
||
|
|
if ( !( opts.lastCharacter.remove instanceof Array ) )
|
||
|
|
{
|
||
|
|
opts.lastCharacter.remove = $.fn.dotdotdot.defaultArrays.lastCharacter.remove;
|
||
|
|
}
|
||
|
|
if ( !( opts.lastCharacter.noEllipsis instanceof Array ) )
|
||
|
|
{
|
||
|
|
opts.lastCharacter.noEllipsis = $.fn.dotdotdot.defaultArrays.lastCharacter.noEllipsis;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
conf.afterElement = getElement( opts.after, $dot );
|
||
|
|
conf.isTruncated = false;
|
||
|
|
conf.dotId = dotId++;
|
||
|
|
|
||
|
|
|
||
|
|
$dot.data( 'dotdotdot', true )
|
||
|
|
.bind_events()
|
||
|
|
.trigger( 'update.dot' );
|
||
|
|
|
||
|
|
if ( opts.watch )
|
||
|
|
{
|
||
|
|
$dot.watch();
|
||
|
|
}
|
||
|
|
|
||
|
|
return $dot;
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
// public
|
||
|
|
$.fn.dotdotdot.defaults = {
|
||
|
|
'ellipsis' : '... ',
|
||
|
|
'wrap' : 'word',
|
||
|
|
'fallbackToLetter' : true,
|
||
|
|
'lastCharacter' : {},
|
||
|
|
'tolerance' : 0,
|
||
|
|
'callback' : null,
|
||
|
|
'after' : null,
|
||
|
|
'height' : null,
|
||
|
|
'watch' : false,
|
||
|
|
'windowResizeFix' : true,
|
||
|
|
'debug' : false
|
||
|
|
};
|
||
|
|
$.fn.dotdotdot.defaultArrays = {
|
||
|
|
'lastCharacter' : {
|
||
|
|
'remove' : [ ' ', '\u3000', ',', ';', '.', '!', '?' ],
|
||
|
|
'noEllipsis' : []
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
// private
|
||
|
|
var dotId = 1;
|
||
|
|
|
||
|
|
function children( $elem, o, after )
|
||
|
|
{
|
||
|
|
var $elements = $elem.children(),
|
||
|
|
isTruncated = false;
|
||
|
|
|
||
|
|
$elem.empty();
|
||
|
|
|
||
|
|
for ( var a = 0, l = $elements.length; a < l; a++ )
|
||
|
|
{
|
||
|
|
var $e = $elements.eq( a );
|
||
|
|
$elem.append( $e );
|
||
|
|
if ( after )
|
||
|
|
{
|
||
|
|
$elem.append( after );
|
||
|
|
}
|
||
|
|
if ( test( $elem, o ) )
|
||
|
|
{
|
||
|
|
$e.remove();
|
||
|
|
isTruncated = true;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
if ( after )
|
||
|
|
{
|
||
|
|
after.detach();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return isTruncated;
|
||
|
|
}
|
||
|
|
function ellipsis( $elem, $d, $i, o, after )
|
||
|
|
{
|
||
|
|
var $elements = $elem.contents(),
|
||
|
|
isTruncated = false;
|
||
|
|
|
||
|
|
$elem.empty();
|
||
|
|
|
||
|
|
var notx = 'table, thead, tbody, tfoot, tr, col, colgroup, object, embed, param, ol, ul, dl, blockquote, select, optgroup, option, textarea, script, style';
|
||
|
|
for ( var a = 0, l = $elements.length; a < l; a++ )
|
||
|
|
{
|
||
|
|
|
||
|
|
if ( isTruncated )
|
||
|
|
{
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
|
||
|
|
var e = $elements[ a ],
|
||
|
|
$e = $(e);
|
||
|
|
|
||
|
|
if ( typeof e == 'undefined' )
|
||
|
|
{
|
||
|
|
continue;
|
||
|
|
}
|
||
|
|
|
||
|
|
$elem.append( $e );
|
||
|
|
if ( after )
|
||
|
|
{
|
||
|
|
$elem[ ( $elem.is( notx ) ) ? 'after' : 'append' ]( after );
|
||
|
|
}
|
||
|
|
if ( e.nodeType == 3 )
|
||
|
|
{
|
||
|
|
if ( test( $i, o ) )
|
||
|
|
{
|
||
|
|
isTruncated = ellipsisElement( $e, $d, $i, o, after );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
isTruncated = ellipsis( $e, $d, $i, o, after );
|
||
|
|
}
|
||
|
|
|
||
|
|
if ( !isTruncated )
|
||
|
|
{
|
||
|
|
if ( after )
|
||
|
|
{
|
||
|
|
after.detach();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return isTruncated;
|
||
|
|
}
|
||
|
|
function ellipsisElement( $e, $d, $i, o, after )
|
||
|
|
{
|
||
|
|
var isTruncated = false,
|
||
|
|
e = $e[ 0 ];
|
||
|
|
|
||
|
|
if ( typeof e == 'undefined' )
|
||
|
|
{
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
var txt = getTextContent( e ),
|
||
|
|
space = ( txt.indexOf(' ') !== -1 ) ? ' ' : '\u3000',
|
||
|
|
separator = ( o.wrap == 'letter' ) ? '' : space,
|
||
|
|
textArr = txt.split( separator ),
|
||
|
|
position = -1,
|
||
|
|
midPos = -1,
|
||
|
|
startPos = 0,
|
||
|
|
endPos = textArr.length - 1;
|
||
|
|
|
||
|
|
while ( startPos <= endPos && !( startPos == 0 && endPos == 0 ) )
|
||
|
|
{
|
||
|
|
var m = Math.floor( ( startPos + endPos ) / 2 );
|
||
|
|
if ( m == midPos )
|
||
|
|
{
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
midPos = m;
|
||
|
|
|
||
|
|
setTextContent( e, textArr.slice( 0, midPos + 1 ).join( separator ) + o.ellipsis );
|
||
|
|
|
||
|
|
if ( !test( $i, o ) )
|
||
|
|
{
|
||
|
|
position = midPos;
|
||
|
|
startPos = midPos;
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
endPos = midPos;
|
||
|
|
}
|
||
|
|
if( endPos == startPos && endPos == 0 && o.fallbackToLetter )
|
||
|
|
{
|
||
|
|
separator = '';
|
||
|
|
textArr = textArr[0].split(separator);
|
||
|
|
position = -1;
|
||
|
|
midPos = -1;
|
||
|
|
startPos = 0;
|
||
|
|
endPos = textArr.length - 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if ( position != -1 && !( textArr.length == 1 && textArr[ 0 ].length == 0 ) )
|
||
|
|
{
|
||
|
|
txt = addEllipsis( textArr.slice( 0, position + 1 ).join( separator ), o );
|
||
|
|
isTruncated = true;
|
||
|
|
setTextContent( e, txt );
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
var $w = $e.parent();
|
||
|
|
$e.remove();
|
||
|
|
|
||
|
|
var afterLength = ( after ) ? after.length : 0 ;
|
||
|
|
|
||
|
|
if ( $w.contents().size() > afterLength )
|
||
|
|
{
|
||
|
|
var $n = $w.contents().eq( -1 - afterLength );
|
||
|
|
isTruncated = ellipsisElement( $n, $d, $i, o, after );
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
var $p = $w.prev()
|
||
|
|
var e = $p.contents().eq( -1 )[ 0 ];
|
||
|
|
|
||
|
|
if ( typeof e != 'undefined' )
|
||
|
|
{
|
||
|
|
var txt = addEllipsis( getTextContent( e ), o );
|
||
|
|
setTextContent( e, txt );
|
||
|
|
if ( after )
|
||
|
|
{
|
||
|
|
$p.append( after );
|
||
|
|
}
|
||
|
|
$w.remove();
|
||
|
|
isTruncated = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return isTruncated;
|
||
|
|
}
|
||
|
|
function test( $i, o )
|
||
|
|
{
|
||
|
|
return $i.innerHeight() > o.maxHeight;
|
||
|
|
}
|
||
|
|
function addEllipsis( txt, o )
|
||
|
|
{
|
||
|
|
while( $.inArray( txt.slice( -1 ), o.lastCharacter.remove ) > -1 )
|
||
|
|
{
|
||
|
|
txt = txt.slice( 0, -1 );
|
||
|
|
}
|
||
|
|
if ( $.inArray( txt.slice( -1 ), o.lastCharacter.noEllipsis ) < 0 )
|
||
|
|
{
|
||
|
|
txt += o.ellipsis;
|
||
|
|
}
|
||
|
|
return txt;
|
||
|
|
}
|
||
|
|
function getSizes( $d )
|
||
|
|
{
|
||
|
|
return {
|
||
|
|
'width' : $d.innerWidth(),
|
||
|
|
'height': $d.innerHeight()
|
||
|
|
};
|
||
|
|
}
|
||
|
|
function setTextContent( e, content )
|
||
|
|
{
|
||
|
|
if ( e.innerText )
|
||
|
|
{
|
||
|
|
e.innerText = content;
|
||
|
|
}
|
||
|
|
else if ( e.nodeValue )
|
||
|
|
{
|
||
|
|
e.nodeValue = content;
|
||
|
|
}
|
||
|
|
else if (e.textContent)
|
||
|
|
{
|
||
|
|
e.textContent = content;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
function getTextContent( e )
|
||
|
|
{
|
||
|
|
if ( e.innerText )
|
||
|
|
{
|
||
|
|
return e.innerText;
|
||
|
|
}
|
||
|
|
else if ( e.nodeValue )
|
||
|
|
{
|
||
|
|
return e.nodeValue;
|
||
|
|
}
|
||
|
|
else if ( e.textContent )
|
||
|
|
{
|
||
|
|
return e.textContent;
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
return "";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
function getElement( e, $i )
|
||
|
|
{
|
||
|
|
if ( typeof e == 'undefined' )
|
||
|
|
{
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if ( !e )
|
||
|
|
{
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if ( typeof e == 'string' )
|
||
|
|
{
|
||
|
|
e = $(e, $i);
|
||
|
|
return ( e.length )
|
||
|
|
? e
|
||
|
|
: false;
|
||
|
|
}
|
||
|
|
if ( typeof e == 'object' )
|
||
|
|
{
|
||
|
|
return ( typeof e.jquery == 'undefined' )
|
||
|
|
? false
|
||
|
|
: e;
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
function getTrueInnerHeight( $el )
|
||
|
|
{
|
||
|
|
var h = $el.innerHeight(),
|
||
|
|
a = [ 'paddingTop', 'paddingBottom' ];
|
||
|
|
|
||
|
|
for ( var z = 0, l = a.length; z < l; z++ ) {
|
||
|
|
var m = parseInt( $el.css( a[ z ] ), 10 );
|
||
|
|
if ( isNaN( m ) )
|
||
|
|
{
|
||
|
|
m = 0;
|
||
|
|
}
|
||
|
|
h -= m;
|
||
|
|
}
|
||
|
|
return h;
|
||
|
|
}
|
||
|
|
function debug( d, m )
|
||
|
|
{
|
||
|
|
if ( !d )
|
||
|
|
{
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if ( typeof m == 'string' )
|
||
|
|
{
|
||
|
|
m = 'dotdotdot: ' + m;
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
m = [ 'dotdotdot:', m ];
|
||
|
|
}
|
||
|
|
|
||
|
|
if ( typeof window.console != 'undefined' )
|
||
|
|
{
|
||
|
|
if ( typeof window.console.log != 'undefined' )
|
||
|
|
{
|
||
|
|
window.console.log( m );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
// override jQuery.html
|
||
|
|
var _orgHtml = $.fn.html;
|
||
|
|
$.fn.html = function( str ) {
|
||
|
|
if ( typeof str != 'undefined' )
|
||
|
|
{
|
||
|
|
if ( this.data( 'dotdotdot' ) )
|
||
|
|
{
|
||
|
|
if ( typeof str != 'function' )
|
||
|
|
{
|
||
|
|
return this.trigger( 'update', [ str ] );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return _orgHtml.call( this, str );
|
||
|
|
}
|
||
|
|
return _orgHtml.call( this );
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
// override jQuery.text
|
||
|
|
var _orgText = $.fn.text;
|
||
|
|
$.fn.text = function( str ) {
|
||
|
|
if ( typeof str != 'undefined' )
|
||
|
|
{
|
||
|
|
if ( this.data( 'dotdotdot' ) )
|
||
|
|
{
|
||
|
|
var temp = $( '<div />' );
|
||
|
|
temp.text( str );
|
||
|
|
str = temp.html();
|
||
|
|
temp.remove();
|
||
|
|
return this.trigger( 'update', [ str ] );
|
||
|
|
}
|
||
|
|
return _orgText.call( this, str );
|
||
|
|
}
|
||
|
|
return _orgText.call( this );
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
})( jQuery );
|