jquery.dotdotdot-1.8.3.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759
  1. /*
  2. * jQuery dotdotdot 1.8.3
  3. *
  4. * Copyright (c) Fred Heusschen
  5. * www.frebsite.nl
  6. *
  7. * Plugin website:
  8. * dotdotdot.frebsite.nl
  9. *
  10. * Licensed under the MIT license.
  11. * http://en.wikipedia.org/wiki/MIT_License
  12. */
  13. (function( $, undef )
  14. {
  15. if ( $.fn.dotdotdot )
  16. {
  17. return;
  18. }
  19. $.fn.dotdotdot = function( o )
  20. {
  21. if ( this.length == 0 )
  22. {
  23. $.fn.dotdotdot.debug( 'No element found for "' + this.selector + '".' );
  24. return this;
  25. }
  26. if ( this.length > 1 )
  27. {
  28. return this.each(
  29. function()
  30. {
  31. $(this).dotdotdot( o );
  32. }
  33. );
  34. }
  35. var $dot = this;
  36. var orgContent = $dot.contents();
  37. if ( $dot.data( 'dotdotdot' ) )
  38. {
  39. $dot.trigger( 'destroy.dot' );
  40. }
  41. $dot.data( 'dotdotdot-style', $dot.attr( 'style' ) || '' );
  42. $dot.css( 'word-wrap', 'break-word' );
  43. if ($dot.css( 'white-space' ) === 'nowrap')
  44. {
  45. $dot.css( 'white-space', 'normal' );
  46. }
  47. $dot.bind_events = function()
  48. {
  49. $dot.bind(
  50. 'update.dot',
  51. function( e, c )
  52. {
  53. $dot.removeClass("is-truncated");
  54. e.preventDefault();
  55. e.stopPropagation();
  56. switch( typeof opts.height )
  57. {
  58. case 'number':
  59. opts.maxHeight = opts.height;
  60. break;
  61. case 'function':
  62. opts.maxHeight = opts.height.call( $dot[ 0 ] );
  63. break;
  64. default:
  65. opts.maxHeight = getTrueInnerHeight( $dot );
  66. break;
  67. }
  68. opts.maxHeight += opts.tolerance;
  69. if ( typeof c != 'undefined' )
  70. {
  71. if ( typeof c == 'string' || ('nodeType' in c && c.nodeType === 1) )
  72. {
  73. c = $('<div />').append( c ).contents();
  74. }
  75. if ( c instanceof $ )
  76. {
  77. orgContent = c;
  78. }
  79. }
  80. $inr = $dot.wrapInner( '<div class="dotdotdot" />' ).children();
  81. $inr.contents()
  82. .detach()
  83. .end()
  84. .append( orgContent.clone( true ) )
  85. .find( 'br' )
  86. .replaceWith( ' <br /> ' )
  87. .end()
  88. .css({
  89. 'height' : 'auto',
  90. 'width' : 'auto',
  91. 'border' : 'none',
  92. 'padding' : 0,
  93. 'margin' : 0
  94. });
  95. var after = false,
  96. trunc = false;
  97. if ( conf.afterElement )
  98. {
  99. after = conf.afterElement.clone( true );
  100. after.show();
  101. conf.afterElement.detach();
  102. }
  103. if ( test( $inr, opts ) )
  104. {
  105. if ( opts.wrap == 'children' )
  106. {
  107. trunc = children( $inr, opts, after );
  108. }
  109. else
  110. {
  111. trunc = ellipsis( $inr, $dot, $inr, opts, after );
  112. }
  113. }
  114. $inr.replaceWith( $inr.contents() );
  115. $inr = null;
  116. if ( $.isFunction( opts.callback ) )
  117. {
  118. opts.callback.call( $dot[ 0 ], trunc, orgContent );
  119. }
  120. conf.isTruncated = trunc;
  121. return trunc;
  122. }
  123. ).bind(
  124. 'isTruncated.dot',
  125. function( e, fn )
  126. {
  127. e.preventDefault();
  128. e.stopPropagation();
  129. if ( typeof fn == 'function' )
  130. {
  131. fn.call( $dot[ 0 ], conf.isTruncated );
  132. }
  133. return conf.isTruncated;
  134. }
  135. ).bind(
  136. 'originalContent.dot',
  137. function( e, fn )
  138. {
  139. e.preventDefault();
  140. e.stopPropagation();
  141. if ( typeof fn == 'function' )
  142. {
  143. fn.call( $dot[ 0 ], orgContent );
  144. }
  145. return orgContent;
  146. }
  147. ).bind(
  148. 'destroy.dot',
  149. function( e )
  150. {
  151. e.preventDefault();
  152. e.stopPropagation();
  153. $dot.unwatch()
  154. .unbind_events()
  155. .contents()
  156. .detach()
  157. .end()
  158. .append( orgContent )
  159. .attr( 'style', $dot.data( 'dotdotdot-style' ) || '' )
  160. .removeClass( 'is-truncated' )
  161. .data( 'dotdotdot', false );
  162. }
  163. );
  164. return $dot;
  165. }; // /bind_events
  166. $dot.unbind_events = function()
  167. {
  168. $dot.unbind('.dot');
  169. return $dot;
  170. }; // /unbind_events
  171. $dot.watch = function()
  172. {
  173. $dot.unwatch();
  174. if ( opts.watch == 'window' )
  175. {
  176. var $window = $(window),
  177. _wWidth = $window.width(),
  178. _wHeight = $window.height();
  179. $window.bind(
  180. 'resize.dot' + conf.dotId,
  181. function()
  182. {
  183. if ( _wWidth != $window.width() || _wHeight != $window.height() || !opts.windowResizeFix )
  184. {
  185. _wWidth = $window.width();
  186. _wHeight = $window.height();
  187. if ( watchInt )
  188. {
  189. clearInterval( watchInt );
  190. }
  191. watchInt = setTimeout(
  192. function()
  193. {
  194. $dot.trigger( 'update.dot' );
  195. }, 100
  196. );
  197. }
  198. }
  199. );
  200. }
  201. else
  202. {
  203. watchOrg = getSizes( $dot );
  204. watchInt = setInterval(
  205. function()
  206. {
  207. if ( $dot.is( ':visible' ) )
  208. {
  209. var watchNew = getSizes( $dot );
  210. if ( watchOrg.width != watchNew.width ||
  211. watchOrg.height != watchNew.height )
  212. {
  213. $dot.trigger( 'update.dot' );
  214. watchOrg = watchNew;
  215. }
  216. }
  217. }, 500
  218. );
  219. }
  220. return $dot;
  221. };
  222. $dot.unwatch = function()
  223. {
  224. $(window).unbind( 'resize.dot' + conf.dotId );
  225. if ( watchInt )
  226. {
  227. clearInterval( watchInt );
  228. }
  229. return $dot;
  230. };
  231. var opts = $.extend( true, {}, $.fn.dotdotdot.defaults, o ),
  232. conf = {},
  233. watchOrg = {},
  234. watchInt = null,
  235. $inr = null;
  236. if ( !( opts.lastCharacter.remove instanceof Array ) )
  237. {
  238. opts.lastCharacter.remove = $.fn.dotdotdot.defaultArrays.lastCharacter.remove;
  239. }
  240. if ( !( opts.lastCharacter.noEllipsis instanceof Array ) )
  241. {
  242. opts.lastCharacter.noEllipsis = $.fn.dotdotdot.defaultArrays.lastCharacter.noEllipsis;
  243. }
  244. conf.afterElement = getElement( opts.after, $dot );
  245. conf.isTruncated = false;
  246. conf.dotId = dotId++;
  247. $dot.data( 'dotdotdot', true )
  248. .bind_events()
  249. .trigger( 'update.dot' );
  250. if ( opts.watch )
  251. {
  252. $dot.watch();
  253. }
  254. return $dot;
  255. };
  256. // public
  257. $.fn.dotdotdot.defaults = {
  258. 'ellipsis' : '... ',
  259. 'wrap' : 'word',
  260. 'fallbackToLetter' : true,
  261. 'lastCharacter' : {},
  262. 'tolerance' : 0,
  263. 'callback' : null,
  264. 'after' : null,
  265. 'height' : null,
  266. 'watch' : false,
  267. 'windowResizeFix' : true
  268. };
  269. $.fn.dotdotdot.defaultArrays = {
  270. 'lastCharacter' : {
  271. 'remove' : [ ' ', '\u3000', ',', ';', '.', '!', '?' ],
  272. 'noEllipsis' : []
  273. }
  274. };
  275. $.fn.dotdotdot.debug = function( msg ) {};
  276. // private
  277. var dotId = 1;
  278. function children( $elem, o, after )
  279. {
  280. var $elements = $elem.children(),
  281. isTruncated = false;
  282. $elem.empty();
  283. for ( var a = 0, l = $elements.length; a < l; a++ )
  284. {
  285. var $e = $elements.eq( a );
  286. $elem.append( $e );
  287. if ( after )
  288. {
  289. $elem.append( after );
  290. }
  291. if ( test( $elem, o ) )
  292. {
  293. $e.remove();
  294. isTruncated = true;
  295. break;
  296. }
  297. else
  298. {
  299. if ( after )
  300. {
  301. after.detach();
  302. }
  303. }
  304. }
  305. return isTruncated;
  306. }
  307. function ellipsis( $elem, $d, $i, o, after )
  308. {
  309. var isTruncated = false;
  310. // Don't put the ellipsis directly inside these elements
  311. var notx = 'a, table, thead, tbody, tfoot, tr, col, colgroup, object, embed, param, ol, ul, dl, blockquote, select, optgroup, option, textarea, script, style';
  312. // Don't remove these elements even if they are after the ellipsis
  313. var noty = 'script, .dotdotdot-keep';
  314. $elem
  315. .contents()
  316. .detach()
  317. .each(
  318. function()
  319. {
  320. var e = this,
  321. $e = $(e);
  322. if ( typeof e == 'undefined' )
  323. {
  324. return true;
  325. }
  326. else if ( $e.is( noty ) )
  327. {
  328. $elem.append( $e );
  329. }
  330. else if ( isTruncated )
  331. {
  332. return true;
  333. }
  334. else
  335. {
  336. $elem.append( $e );
  337. if ( after && !$e.is( o.after ) && !$e.find( o.after ).length )
  338. {
  339. $elem[ $elem.is( notx ) ? 'after' : 'append' ]( after );
  340. }
  341. if ( test( $i, o ) )
  342. {
  343. if ( e.nodeType == 3 ) // node is TEXT
  344. {
  345. isTruncated = ellipsisElement( $e, $d, $i, o, after );
  346. }
  347. else
  348. {
  349. isTruncated = ellipsis( $e, $d, $i, o, after );
  350. }
  351. }
  352. if ( !isTruncated )
  353. {
  354. if ( after )
  355. {
  356. after.detach();
  357. }
  358. }
  359. }
  360. }
  361. );
  362. $d.addClass("is-truncated");
  363. return isTruncated;
  364. }
  365. function ellipsisElement( $e, $d, $i, o, after )
  366. {
  367. var e = $e[ 0 ];
  368. if ( !e )
  369. {
  370. return false;
  371. }
  372. var txt = getTextContent( e ),
  373. space = ( txt.indexOf(' ') !== -1 ) ? ' ' : '\u3000',
  374. separator = ( o.wrap == 'letter' ) ? '' : space,
  375. textArr = txt.split( separator ),
  376. position = -1,
  377. midPos = -1,
  378. startPos = 0,
  379. endPos = textArr.length - 1;
  380. // Only one word
  381. if ( o.fallbackToLetter && startPos == 0 && endPos == 0 )
  382. {
  383. separator = '';
  384. textArr = txt.split( separator );
  385. endPos = textArr.length - 1;
  386. }
  387. while ( startPos <= endPos && !( startPos == 0 && endPos == 0 ) )
  388. {
  389. var m = Math.floor( ( startPos + endPos ) / 2 );
  390. if ( m == midPos )
  391. {
  392. break;
  393. }
  394. midPos = m;
  395. setTextContent( e, textArr.slice( 0, midPos + 1 ).join( separator ) + o.ellipsis );
  396. $i.children()
  397. .each(
  398. function()
  399. {
  400. $(this).toggle().toggle();
  401. }
  402. );
  403. if ( !test( $i, o ) )
  404. {
  405. position = midPos;
  406. startPos = midPos;
  407. }
  408. else
  409. {
  410. endPos = midPos;
  411. // Fallback to letter
  412. if (o.fallbackToLetter && startPos == 0 && endPos == 0 )
  413. {
  414. separator = '';
  415. textArr = textArr[ 0 ].split( separator );
  416. position = -1;
  417. midPos = -1;
  418. startPos = 0;
  419. endPos = textArr.length - 1;
  420. }
  421. }
  422. }
  423. if ( position != -1 && !( textArr.length == 1 && textArr[ 0 ].length == 0 ) )
  424. {
  425. txt = addEllipsis( textArr.slice( 0, position + 1 ).join( separator ), o );
  426. setTextContent( e, txt );
  427. }
  428. else
  429. {
  430. var $w = $e.parent();
  431. $e.detach();
  432. var afterLength = ( after && after.closest($w).length ) ? after.length : 0;
  433. if ( $w.contents().length > afterLength )
  434. {
  435. e = findLastTextNode( $w.contents().eq( -1 - afterLength ), $d );
  436. }
  437. else
  438. {
  439. e = findLastTextNode( $w, $d, true );
  440. if ( !afterLength )
  441. {
  442. $w.detach();
  443. }
  444. }
  445. if ( e )
  446. {
  447. txt = addEllipsis( getTextContent( e ), o );
  448. setTextContent( e, txt );
  449. if ( afterLength && after )
  450. {
  451. var $parent = after.parent();
  452. $(e).parent().append( after );
  453. if ( !$.trim( $parent.html() ) )
  454. {
  455. $parent.remove();
  456. }
  457. }
  458. }
  459. }
  460. return true;
  461. }
  462. function test( $i, o )
  463. {
  464. return $i.innerHeight() > o.maxHeight;
  465. }
  466. function addEllipsis( txt, o )
  467. {
  468. while( $.inArray( txt.slice( -1 ), o.lastCharacter.remove ) > -1 )
  469. {
  470. txt = txt.slice( 0, -1 );
  471. }
  472. if ( $.inArray( txt.slice( -1 ), o.lastCharacter.noEllipsis ) < 0 )
  473. {
  474. txt += o.ellipsis;
  475. }
  476. return txt;
  477. }
  478. function getSizes( $d )
  479. {
  480. return {
  481. 'width' : $d.innerWidth(),
  482. 'height': $d.innerHeight()
  483. };
  484. }
  485. function setTextContent( e, content )
  486. {
  487. if ( e.innerText )
  488. {
  489. e.innerText = content;
  490. }
  491. else if ( e.nodeValue )
  492. {
  493. e.nodeValue = content;
  494. }
  495. else if (e.textContent)
  496. {
  497. e.textContent = content;
  498. }
  499. }
  500. function getTextContent( e )
  501. {
  502. if ( e.innerText )
  503. {
  504. return e.innerText;
  505. }
  506. else if ( e.nodeValue )
  507. {
  508. return e.nodeValue;
  509. }
  510. else if ( e.textContent )
  511. {
  512. return e.textContent;
  513. }
  514. else
  515. {
  516. return "";
  517. }
  518. }
  519. function getPrevNode( n )
  520. {
  521. do
  522. {
  523. n = n.previousSibling;
  524. }
  525. while ( n && n.nodeType !== 1 && n.nodeType !== 3 );
  526. return n;
  527. }
  528. function findLastTextNode( $el, $top, excludeCurrent )
  529. {
  530. var e = $el && $el[ 0 ], p;
  531. if ( e )
  532. {
  533. if ( !excludeCurrent )
  534. {
  535. if ( e.nodeType === 3 )
  536. {
  537. return e;
  538. }
  539. if ( $.trim( $el.text() ) )
  540. {
  541. return findLastTextNode( $el.contents().last(), $top );
  542. }
  543. }
  544. p = getPrevNode( e );
  545. while ( !p )
  546. {
  547. $el = $el.parent();
  548. if ( $el.is( $top ) || !$el.length )
  549. {
  550. return false;
  551. }
  552. p = getPrevNode( $el[0] );
  553. }
  554. if ( p )
  555. {
  556. return findLastTextNode( $(p), $top );
  557. }
  558. }
  559. return false;
  560. }
  561. function getElement( e, $i )
  562. {
  563. if ( !e )
  564. {
  565. return false;
  566. }
  567. if ( typeof e === 'string' )
  568. {
  569. e = $(e, $i);
  570. return ( e.length )
  571. ? e
  572. : false;
  573. }
  574. return !e.jquery
  575. ? false
  576. : e;
  577. }
  578. function getTrueInnerHeight( $el )
  579. {
  580. var h = $el.innerHeight(),
  581. a = [ 'paddingTop', 'paddingBottom' ];
  582. for ( var z = 0, l = a.length; z < l; z++ )
  583. {
  584. var m = parseInt( $el.css( a[ z ] ), 10 );
  585. if ( isNaN( m ) )
  586. {
  587. m = 0;
  588. }
  589. h -= m;
  590. }
  591. return h;
  592. }
  593. // override jQuery.html
  594. var _orgHtml = $.fn.html;
  595. $.fn.html = function( str )
  596. {
  597. if ( str != undef && !$.isFunction( str ) && this.data( 'dotdotdot' ) )
  598. {
  599. return this.trigger( 'update', [ str ] );
  600. }
  601. return _orgHtml.apply( this, arguments );
  602. };
  603. // override jQuery.text
  604. var _orgText = $.fn.text;
  605. $.fn.text = function( str )
  606. {
  607. if ( str != undef && !$.isFunction( str ) && this.data( 'dotdotdot' ) )
  608. {
  609. str = $( '<div />' ).text( str ).html();
  610. return this.trigger( 'update', [ str ] );
  611. }
  612. return _orgText.apply( this, arguments );
  613. };
  614. })( jQuery );
  615. /*
  616. ## Automatic parsing for CSS classes
  617. Contributed by [Ramil Valitov](https://github.com/rvalitov)
  618. ### The idea
  619. You can add one or several CSS classes to HTML elements to automatically invoke "jQuery.dotdotdot functionality" and some extra features. It allows to use jQuery.dotdotdot only by adding appropriate CSS classes without JS programming.
  620. ### Available classes and their description
  621. * dot-ellipsis - automatically invoke jQuery.dotdotdot to this element. This class must be included if you plan to use other classes below.
  622. * dot-resize-update - automatically update if window resize event occurs. It's equivalent to option `watch:'window'`.
  623. * dot-timer-update - automatically update if window resize event occurs. It's equivalent to option `watch:true`.
  624. * dot-load-update - automatically update after the window has beem completely rendered. Can be useful if your content is generated dynamically using using JS and, hence, jQuery.dotdotdot can't correctly detect the height of the element before it's rendered completely.
  625. * dot-height-XXX - available height of content area in pixels, where XXX is a number, e.g. can be `dot-height-35` if you want to set maximum height for 35 pixels. It's equivalent to option `height:'XXX'`.
  626. ### Usage examples
  627. *Adding jQuery.dotdotdot to element*
  628. <div class="dot-ellipsis">
  629. <p>Lorem Ipsum is simply dummy text.</p>
  630. </div>
  631. *Adding jQuery.dotdotdot to element with update on window resize*
  632. <div class="dot-ellipsis dot-resize-update">
  633. <p>Lorem Ipsum is simply dummy text.</p>
  634. </div>
  635. *Adding jQuery.dotdotdot to element with predefined height of 50px*
  636. <div class="dot-ellipsis dot-height-50">
  637. <p>Lorem Ipsum is simply dummy text.</p>
  638. </div>
  639. */
  640. jQuery(document).ready(function($) {
  641. //We only invoke jQuery.dotdotdot on elements that have dot-ellipsis class
  642. $(".dot-ellipsis").each(function(){
  643. //Checking if update on window resize required
  644. var watch_window=$(this).hasClass("dot-resize-update");
  645. //Checking if update on timer required
  646. var watch_timer=$(this).hasClass("dot-timer-update");
  647. //Checking if height set
  648. var height=0;
  649. var classList = $(this).attr('class').split(/\s+/);
  650. $.each(classList, function(index, item) {
  651. var matchResult = item.match(/^dot-height-(\d+)$/);
  652. if(matchResult !== null)
  653. height = Number(matchResult[1]);
  654. });
  655. //Invoking jQuery.dotdotdot
  656. var x = new Object();
  657. if (watch_timer)
  658. x.watch=true;
  659. if (watch_window)
  660. x.watch='window';
  661. if (height>0)
  662. x.height=height;
  663. $(this).dotdotdot(x);
  664. });
  665. });
  666. //Updating elements (if any) on window.load event
  667. jQuery(window).on('load', function(){
  668. jQuery(".dot-ellipsis.dot-load-update").trigger("update.dot");
  669. });