triple-dots/dist/triple-dots.js

Triple dots is a javascript plugin for truncating multiple line content with an ellipsis.

var __spreadArrays=this&&this.__spreadArrays||function(){for(var t=0,e=0,i=arguments.length;e<i;e++)t+=arguments[e].length;var n=Array(t),o=0;for(e=0;e<i;e++)for(var r=arguments[e],s=0,a=r.length;s<a;s++,o++)n[o]=r[s];return n},TripleDots=function(){function t(e,i){var n=this;for(var o in void 0===i&&(i=t.options),this.container=e,this.options=i||{},this.watchTimeout=null,this.watchInterval=null,this.resizeEvent=null,t.options)t.options.hasOwnProperty(o)&&void 0===this.options[o]&&(this.options[o]=t.options[o]);var r=this.container.tripleDots;r&&r.destroy(),this.API={},["truncate","restore","destroy","watch","unwatch"].forEach((function(t){n.API[t]=function(){return n[t].call(n)}})),this.container.tripleDots=this.API,this.originalStyle=this.container.getAttribute("style")||"",this.originalContent=this._getOriginalContent(),this.ellipsis=document.createTextNode(this.options.ellipsis);var s=window.getComputedStyle(this.container);"break-word"!==s["word-wrap"]&&(this.container.style["word-wrap"]="break-word"),"pre"===s["white-space"]?this.container.style["white-space"]="pre-wrap":"nowrap"===s["white-space"]&&(this.container.style["white-space"]="normal"),null===this.options.height&&(this.options.height=this._getMaxHeight()),this.expanded=!1,this.isClamped=!1,this.truncate(),this.options.watch&&this.watch()}return t.prototype.restore=function(){var t=this;this.unwatch(),this.container.setAttribute("style",this.originalStyle),this.container.classList.remove("ddd-truncated"),this.container.innerHTML="",this.originalContent.forEach((function(e){t.container.append(e)})),this.expanded=!1},t.prototype.destroy=function(){this.restore(),this.container.tripleDots=null},t.prototype.watch=function(){var t=this;this.unwatch();var e={width:null,height:null},i=function(i,n,o){if(t.container.offsetWidth||t.container.offsetHeight||t.container.getClientRects().length){var r={width:i[n],height:i[o]};return e.width==r.width&&e.height==r.height||t.truncate(),r}return e};"window"===this.options.watch?(this.resizeEvent=function(n){t.watchTimeout&&clearTimeout(t.watchTimeout),t.watchTimeout=setTimeout((function(){e=i(window,"innerWidth","innerHeight")}),100)},window.addEventListener("resize",this.resizeEvent)):this.watchInterval=setInterval((function(){e=i(t.container,"clientWidth","clientHeight")}),1e3)},t.prototype.unwatch=function(){this.resizeEvent&&(window.removeEventListener("resize",this.resizeEvent),this.resizeEvent=null),this.watchInterval&&clearInterval(this.watchInterval),this.watchTimeout&&clearTimeout(this.watchTimeout)},t.prototype.truncate=function(){var t=this,e=!1;return this.expanded=!1,this.container.innerHTML="",this.originalContent.forEach((function(e){t.container.append(e.cloneNode(!0))})),this.maxHeight=this._getMaxHeight(),this._fits()||(e=!0,this.expanded=!0,this._truncateToNode(this.container)),this.container.classList[e?"add":"remove"]("ddd-truncated"),this.options.callback.call(this.container,e),e},t.prototype._truncateToNode=function(e){var i=[],n=[];if(t.$.contents(e).forEach((function(t){if(1!=t.nodeType||!t.matches(".ddd-keep")){var e=document.createComment("");t.replaceWith(e),n.push(t),i.push(e)}})),n.length){for(var o=0;o<n.length;o++){i[o].replaceWith(n[o]);var r=this.ellipsis.cloneNode(!0);switch(n[o].nodeType){case 1:n[o].append(r);break;case 3:n[o].after(r)}var s=this._fits();if(r.parentElement.removeChild(r),!s){if("node"==this.options.truncate&&o>1)return void n[o-2].remove();break}}for(var a=o;a<i.length;a++)i[a].remove();var h=n[Math.max(0,Math.min(o,n.length-1))];if(1==h.nodeType){var c=document.createElement(h.nodeName);c.append(this.ellipsis),this.isClamped=!0,h.replaceWith(c),this._fits()?c.replaceWith(h):(c.remove(),h=n[Math.max(0,o-1)])}1==h.nodeType?this._truncateToNode(h):this._truncateToWord(h)}},t.prototype._truncateToWord=function(t){for(var e=t.textContent,i=-1!==e.indexOf(" ")?" ":"　",n=e.split(i),o=n.length;o>=0;o--)if(t.textContent=this._addEllipsis(n.slice(0,o).join(i)),this._fits()){"letter"==this.options.truncate&&(t.textContent=n.slice(0,o+1).join(i),this._truncateToLetter(t));break}},t.prototype._truncateToLetter=function(t){for(var e=t.textContent.split(""),i="",n=e.length;n>=0&&(!(i=e.slice(0,n).join("")).length||(t.textContent=this._addEllipsis(i),!this._fits()));n--);},t.prototype._fits=function(){var t=this.maxHeight+this.options.tolerance;return this.container.scrollHeight<=t},t.prototype._addEllipsis=function(t){for(var e=[" ","　",",",";",".","!","?"];e.indexOf(t.slice(-1))>-1;)t=t.slice(0,-1);return t+=this.ellipsis.textContent},t.prototype._getOriginalContent=function(){var e="script, style";this.options.keep&&(e+=", "+this.options.keep),t.$.find(e,this.container).forEach((function(t){t.classList.add("ddd-keep")}));var i="div, section, article, header, footer, p, h1, h2, h3, h4, h5, h6, table, td, td, dt, dd, li";__spreadArrays([this.container],t.$.find("*",this.container)).forEach((function(e){e.normalize(),t.$.contents(e).forEach((function(t){8==t.nodeType&&e.removeChild(t)})),t.$.contents(e).forEach((function(t){if(3==t.nodeType&&""==t.textContent.trim()){var n=t.previousSibling,o=t.nextSibling;(t.parentElement.matches("table, thead, tbody, tfoot, tr, dl, ul, ol, video")||!n||1==n.nodeType&&n.matches(i)||!o||1==o.nodeType&&o.matches(i))&&e.removeChild(t)}}))}));var n=[];return t.$.contents(this.container).forEach((function(t){n.push(t.cloneNode(!0))})),n},t.prototype._getMaxHeight=function(){if("number"==typeof this.options.height)return this.options.height;for(var t=window.getComputedStyle(this.container),e=["maxHeight","height"],i=0,n=0;n<e.length;n++){if("px"==(o=t[e[n]]).slice(-2)){i=parseFloat(o);break}}if("border-box"==t.boxSizing){e=["borderTopWidth","borderBottomWidth","paddingTop","paddingBottom"];for(n=0;n<e.length;n++){var o;"px"==(o=t[e[n]]).slice(-2)&&(i-=parseFloat(o))}}return Math.max(i,0)},t.version="0.0.3",t.options={ellipsis:"… ",callback:function(){},truncate:"word",tolerance:0,keep:null,watch:"window",height:null},t.$={find:function(t,e){return e=e||document,Array.prototype.slice.call(e.querySelectorAll(t))},contents:function(t){return t=t||document,Array.prototype.slice.call(t.childNodes)}},t}();!function(t){void 0!==t&&(t.fn.tripleDots=function(t){return this.each((function(e,i){var n=new TripleDots(i,t);i.tripleDots=n.API}))})}(window.Zepto||window.jQuery);