From 54178b316c3664a5f55322f81151cbd1f7bdce0c Mon Sep 17 00:00:00 2001 From: Fred Heusschen Date: Fri, 22 Feb 2019 22:31:59 +0100 Subject: [PATCH] separated umd and es6 files --- composer.json | 2 +- dist/dotdotdot.es6.js | 12 +++ dist/dotdotdot.js | 15 +--- dist/dotdotdot.umd.js | 12 +++ gulpfile.js | 66 ++++++++++------ index.html | 164 ++++++++++++++++++++------------------- package-lock.json | 148 +++++++++++++++++++++++------------ package.json | 5 +- src/dotdotdot.ts | 174 ++++++++++++++---------------------------- tsconfig.json | 3 +- 10 files changed, 320 insertions(+), 281 deletions(-) create mode 100644 dist/dotdotdot.es6.js create mode 100644 dist/dotdotdot.umd.js diff --git a/composer.json b/composer.json index 4beadc9..0c02fec 100644 --- a/composer.json +++ b/composer.json @@ -1,6 +1,6 @@ { "name" : "dotdotdot-js", - "version" : "4.0.2", + "version" : "4.0.3", "authors" : "Fred Heusschen ", "license" : "CC-BY-NC-4.0", "description" : "Dotdotdot is a javascript plugin for truncating multiple line content with an ellipsis.", diff --git a/dist/dotdotdot.es6.js b/dist/dotdotdot.es6.js new file mode 100644 index 0000000..b7591e4 --- /dev/null +++ b/dist/dotdotdot.es6.js @@ -0,0 +1,12 @@ +/*! + * dotdotdot JS 4.0.3 + * + * dotdotdot.frebsite.nl + * + * Copyright (c) Fred Heusschen + * www.frebsite.nl + * + * License: CC-BY-NC-4.0 + * http://creativecommons.org/licenses/by-nc/4.0/ + */ +export default class Dotdotdot{constructor(t,e){this.container=t,this.options=e,this.watchTimeout=null,this.watchInterval=null,this.resizeEvent=null;for(let t in Dotdotdot.options)Dotdotdot.options.hasOwnProperty(t)&&void 0===this.options[t]&&(this.options[t]=Dotdotdot.options[t]);var i=this.container.dotdotdot;i&&i.destroy(),this.API={},["truncate","restore","destroy","watch","unwatch"].forEach(t=>{this.API[t]=(()=>this[t].call(this))}),this.container.dotdotdot=this.API,this.originalStyle=this.container.getAttribute("style")||"",this.originalContent=this._getOriginalContent(),this.ellipsis=document.createTextNode(this.options.ellipsis);var o=window.getComputedStyle(this.container);"break-word"!==o["word-wrap"]&&(this.container.style["word-wrap"]="break-word"),"nowrap"===o["white-space"]&&(this.container.style["white-space"]="normal"),null===this.options.height&&(this.options.height=this._getMaxHeight()),this.truncate(),this.options.watch&&this.watch()}restore(){this.unwatch(),this.container.setAttribute("style",this.originalStyle),this.container.classList.remove("ddd-truncated"),this.container.innerHTML="",this.originalContent.forEach(t=>{this.container.append(t)})}destroy(){this.restore(),this.container.dotdotdot=null}watch(){this.unwatch();var t={width:null,height:null},e=(e,i,o)=>{if(this.container.offsetWidth||this.container.offsetHeight||this.container.getClientRects().length){let n={width:e[i],height:e[o]};return t.width==n.width&&t.height==n.height||this.truncate(),n}return t};"window"==this.options.watch?(this.resizeEvent=(i=>{this.watchTimeout&&clearTimeout(this.watchTimeout),this.watchTimeout=setTimeout(()=>{t=e(window,"innerWidth","innerHeight")},100)}),window.addEventListener("resize",this.resizeEvent)):this.watchInterval=setInterval(()=>{t=e(this.container,"clientWidth","clientHeight")},1e3)}unwatch(){this.resizeEvent&&(window.removeEventListener("resize",this.resizeEvent),this.resizeEvent=null),this.watchInterval&&clearInterval(this.watchInterval),this.watchTimeout&&clearTimeout(this.watchTimeout)}truncate(){var t=!1;return this.container.innerHTML="",this.originalContent.forEach(t=>{this.container.append(t.cloneNode(!0))}),this.maxHeight=this._getMaxHeight(),this._fits()||(t=!0,this._truncateToNode(this.container)),this.container.classList[t?"add":"remove"]("ddd-truncated"),this.options.callback.call(this.container,t),t}_truncateToNode(t){var e=[],i=[];if(Dotdotdot.$.contents(t).forEach(t=>{if(1!=t.nodeType||!t.matches(".ddd-keep")){let o=document.createComment("");t.replaceWith(o),i.push(t),e.push(o)}}),i.length){for(var o=0;o1)return void i[o-2].remove();break}}for(var n=o;n=0;n--)if(t.textContent=this._addEllipsis(o.slice(0,n).join(i)),this._fits()){"letter"==this.options.truncate&&(t.textContent=o.slice(0,n+1).join(i),this._truncateToLetter(t));break}}_truncateToLetter(t){for(var e=t.textContent.split(""),i="",o=e.length;o>=0&&(!(i=e.slice(0,o).join("")).length||(t.textContent=this._addEllipsis(i),!this._fits()));o--);}_fits(){return this.container.scrollHeight<=this.maxHeight+this.options.tolerance}_addEllipsis(t){for(var e=[" ","　",",",";",".","!","?"];e.indexOf(t.slice(-1))>-1;)t=t.slice(0,-1);return t+=this.ellipsis.textContent}_getOriginalContent(){let t="script, style";this.options.keep&&(t+=", "+this.options.keep),Dotdotdot.$.find(t,this.container).forEach(t=>{t.classList.add("ddd-keep")}),[this.container,...Dotdotdot.$.find("*",this.container)].forEach(t=>{t.normalize(),Dotdotdot.$.contents(t).forEach(e=>{let i=!1;if(3==e.nodeType){if(""==e.textContent.trim()){let t=e.previousSibling,o=e.nextSibling;(e.parentElement.matches("table, thead, tbody, tfoot, tr, dl, ul, ol, video")||!t||t.matches("div, p, table, td, td, dt, dd, li")||!o||o.matches("div, p, table, td, td, dt, dd, li"))&&(i=!0)}}else 8==e.nodeType&&(i=!0);i&&t.removeChild(e)})});let e=[];return Dotdotdot.$.contents(this.container).forEach(t=>{e.push(t.cloneNode(!0))}),e}_getMaxHeight(){if("number"==typeof this.options.height)return this.options.height;for(var t=window.getComputedStyle(this.container),e=["maxHeight","height"],i=0,o=0;o(e=e||document,Array.prototype.slice.call(e.querySelectorAll(t))),contents:t=>(t=t||document,Array.prototype.slice.call(t.childNodes))},function(t){void 0!==t&&(t.fn.dotdotdot=function(t){return this.each((e,i)=>{let o=new Dotdotdot(i,t);i.dotdotdot=o.API})})}(window.Zepto||window.jQuery); \ No newline at end of file diff --git a/dist/dotdotdot.js b/dist/dotdotdot.js index 7b1cbf0..b2cf65a 100644 --- a/dist/dotdotdot.js +++ b/dist/dotdotdot.js @@ -1,14 +1,5 @@ -;(function(root, factory) { - if (typeof define === 'function' && define.amd) { - define([], factory); - } else if (typeof exports === 'object') { - module.exports = factory(); - } else { - root.Dotdotdot = factory(); - } -}(this, function() { /*! - * dotdotdot JS 4.0.2 + * dotdotdot JS 4.0.3 * * dotdotdot.frebsite.nl * @@ -18,6 +9,4 @@ * License: CC-BY-NC-4.0 * http://creativecommons.org/licenses/by-nc/4.0/ */ -var Dotdotdot=function(){function t(e,i){var n=this;for(var o in 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.dotdotdot;r&&r.destroy(),this.API={},["truncate","restore","destroy","watch","unwatch"].forEach(function(t){n.API[t]=function(){return n[t].call(n)}}),this.container.dotdotdot=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"),"nowrap"===s["white-space"]&&(this.container.style["white-space"]="normal"),null===this.options.height&&(this.options.height=this._getMaxHeight()),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)})},t.prototype.destroy=function(){this.restore(),this.container.dotdotdot=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.container.innerHTML="",this.originalContent.forEach(function(e){t.container.append(e.cloneNode(!0))}),this.maxHeight=this._getMaxHeight(),this._fits()||(e=!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;o1)return void n[o-2].remove();break}}for(var a=o;a=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(){return this.container.scrollHeight<=this.maxHeight+this.options.tolerance},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")}),[this.container].concat(t.$.find("*",this.container)).forEach(function(e){e.normalize(),t.$.contents(e).forEach(function(t){var i=!1;if(3==t.nodeType){if(""==t.textContent.trim()){var n=t.previousSibling,o=t.nextSibling;t.parentElement.matches("table, thead, tbody, tfoot, tr, dl, ul, ol, video")?i=!0:!n||n.matches("div, p, table, td, td, dt, dd, li")?i=!0:o&&!o.matches("div, p, table, td, td, dt, dd, li")||(i=!0)}}else 8==t.nodeType&&(i=!0);i&&e.removeChild(t)})});var i=[];return t.$.contents(this.container).forEach(function(t){i.push(t.cloneNode(!0))}),i},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;n1)return void n[o-2].remove();break}}for(var a=o;a=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(){return this.container.scrollHeight<=this.maxHeight+this.options.tolerance},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")}),[this.container].concat(t.$.find("*",this.container)).forEach(function(e){e.normalize(),t.$.contents(e).forEach(function(t){var i=!1;if(3==t.nodeType){if(""==t.textContent.trim()){var n=t.previousSibling,o=t.nextSibling;(t.parentElement.matches("table, thead, tbody, tfoot, tr, dl, ul, ol, video")||!n||n.matches("div, p, table, td, td, dt, dd, li")||!o||o.matches("div, p, table, td, td, dt, dd, li"))&&(i=!0)}}else 8==t.nodeType&&(i=!0);i&&e.removeChild(t)})});var i=[];return t.$.contents(this.container).forEach(function(t){i.push(t.cloneNode(!0))}),i},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;n1)return void n[o-2].remove();break}}for(var a=o;a=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(){return this.container.scrollHeight<=this.maxHeight+this.options.tolerance},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")}),[this.container].concat(t.$.find("*",this.container)).forEach(function(e){e.normalize(),t.$.contents(e).forEach(function(t){var i=!1;if(3==t.nodeType){if(""==t.textContent.trim()){var n=t.previousSibling,o=t.nextSibling;(t.parentElement.matches("table, thead, tbody, tfoot, tr, dl, ul, ol, video")||!n||n.matches("div, p, table, td, td, dt, dd, li")||!o||o.matches("div, p, table, td, td, dt, dd, li"))&&(i=!0)}}else 8==t.nodeType&&(i=!0);i&&e.removeChild(t)})});var i=[];return t.$.contents(this.container).forEach(function(t){i.push(t.cloneNode(!0))}),i},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 { + return gulp.src( 'src/*.ts' ) + + // First, we transpile back to JS. + .pipe( typescript({ + "target": target, + "module": module + }) ) + + // Next, uglify it. + .pipe( terser({ + output: { + comments: "/^!/" + } + }) ); +}; + +/** Save plugin to be used without UMD pattern or ES6 module. */ const js = ( cb ) => { - return gulp.src( 'src/*.ts' ) - .pipe( typescript({ - "target": "es5" - }) ) - .pipe( terser({ - output: { - comments: "/^!/" - } - }) ) - .pipe( umd() ) - .pipe( gulp.dest( 'dist' ) ); - - cb(); + return transpile( 'es5', 'es6' ) + .pipe( rename( 'dotdotdot.js' ) ) + .pipe( replace( 'export default Dotdotdot;', '' ) ) + .pipe( gulp.dest( 'dist' ) ) +}; + +/** Save plugin to be used as an ES6 module. */ +const jsES6 = ( cb ) => { + return transpile( 'es6', 'es6' ) + .pipe( rename( 'dotdotdot.es6.js' ) ) + .pipe( gulp.dest( 'dist' ) ); +}; + +const jsUMD = ( cb ) => { + return transpile( 'es5', 'umd' ) + .pipe( rename( 'dotdotdot.umd.js' ) ) + .pipe( gulp.dest( 'dist' ) ); }; -exports.default = js; +exports.default = gulp.parallel( js, jsES6, jsUMD ); -// Watch task 'gulp watch': Starts a watch on JS tasks +// Watch task 'gulp watch': Starts a watch on JS tasks const watch = ( cb ) => { - gulp.watch( 'src/*.ts', js ); - cb(); + gulp.watch( 'src/*.ts', gulp.parallel( js, jsES6, jsUMD ) ); + cb(); }; exports.watch = watch; \ No newline at end of file diff --git a/index.html b/index.html index dc6bf2f..d1f0921 100644 --- a/index.html +++ b/index.html @@ -94,6 +94,22 @@ .example > .full-story .toggle:before { content: 'Show less'; } + + .oldbrowser { + display: none; + } + @media screen and (min-width:0\0) { + .oldbrowser { + background: red; + color: white; + font-weight: bold; + font-size: 20px; + line-height: 1.5; + display: block; + padding: 50px; + margin: 50px -50px; + } + } @@ -101,6 +117,14 @@

+ +
+ Oh no!
+ You're using an old browser. + Although the Dotdotdot plugin will work in older browsers (although you might need some polyfills), + these examples use modern JS your browser probably doesn't understand. +
+

dotdotdot

Javascript plugin for truncating multiple line content on a webpage.
@@ -141,109 +165,95 @@

Toggle full story

- - diff --git a/package-lock.json b/package-lock.json index 435fd2e..4233804 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "dotdotdot-js", - "version": "4.0.2", + "version": "4.0.3", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -290,6 +290,12 @@ "integrity": "sha512-DYWGk01lDcxeS/K9IHPGWfT8PsJmbXRtRd2Sx72Tnb8pcYZQFF1oSDb8hJtS1vhp212q1Rzi5dUf9+nq0o9UIg==", "dev": true }, + "binaryextensions": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/binaryextensions/-/binaryextensions-2.1.2.tgz", + "integrity": "sha512-xVNN69YGDghOqCCtA6FI7avYrr02mTJjOgB0/f1VPD3pJC8QEvjTKWc4epDx8AqxxA75NI0QpVM2gPJXUbE4Tg==", + "dev": true + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -687,6 +693,12 @@ "object.defaults": "^1.1.0" } }, + "editions": { + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/editions/-/editions-1.3.4.tgz", + "integrity": "sha512-gzao+mxnYDzIysXKMQi/+M1mjy/rjestjg6OPoYTtI+3Izp23oiGZitsl9lPDPiTGXbcSIk1iJWhliSaglxnUg==", + "dev": true + }, "end-of-stream": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz", @@ -749,6 +761,12 @@ "es6-symbol": "^3.1.1" } }, + "escape-string-regexp": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", + "dev": true + }, "expand-brackets": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz", @@ -1042,7 +1060,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -1063,12 +1082,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -1083,17 +1104,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -1210,7 +1234,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -1222,6 +1247,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -1236,6 +1262,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -1243,12 +1270,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -1267,6 +1296,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -1347,7 +1377,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -1359,6 +1390,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -1444,7 +1476,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -1480,6 +1513,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -1499,6 +1533,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -1542,12 +1577,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -1715,6 +1752,23 @@ } } }, + "gulp-rename": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/gulp-rename/-/gulp-rename-1.4.0.tgz", + "integrity": "sha512-swzbIGb/arEoFK89tPY58vg3Ok1bw+d35PfUNwWqdo7KM4jkmuGA78JiDNqR+JeZFaeeHnRg9N7aihX3YPmsyg==", + "dev": true + }, + "gulp-replace": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/gulp-replace/-/gulp-replace-1.0.0.tgz", + "integrity": "sha512-lgdmrFSI1SdhNMXZQbrC75MOl1UjYWlOWNbNRnz+F/KHmgxt3l6XstBoAYIdadwETFyG/6i+vWUSCawdC3pqOw==", + "dev": true, + "requires": { + "istextorbinary": "2.2.1", + "readable-stream": "^2.0.1", + "replacestream": "^4.0.0" + } + }, "gulp-terser": { "version": "1.1.7", "resolved": "https://registry.npmjs.org/gulp-terser/-/gulp-terser-1.1.7.tgz", @@ -1777,17 +1831,6 @@ } } }, - "gulp-umd": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/gulp-umd/-/gulp-umd-2.0.0.tgz", - "integrity": "sha512-zA0RDIITdOwpVUBQ6vy2R+iCsTXwDImPnWreNBmVJQAg3nDGefowV7KYwWoIeEVoxyHZT2CR50nEF6ovUh5/2A==", - "dev": true, - "requires": { - "concat-stream": "^1.6.2", - "lodash.template": "^4.4.0", - "through2": "^2.0.3" - } - }, "gulplog": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/gulplog/-/gulplog-1.0.0.tgz", @@ -2102,6 +2145,17 @@ "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=", "dev": true }, + "istextorbinary": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/istextorbinary/-/istextorbinary-2.2.1.tgz", + "integrity": "sha512-TS+hoFl8Z5FAFMK38nhBkdLt44CclNRgDHWeMgsV8ko3nDlr/9UI2Sf839sW7enijf8oKsZYXRvM8g0it9Zmcw==", + "dev": true, + "requires": { + "binaryextensions": "2", + "editions": "^1.3.3", + "textextensions": "2" + } + }, "json-stable-stringify-without-jsonify": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", @@ -2186,37 +2240,12 @@ "strip-bom": "^2.0.0" } }, - "lodash._reinterpolate": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz", - "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=", - "dev": true - }, "lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=", "dev": true }, - "lodash.template": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.4.0.tgz", - "integrity": "sha1-5zoDhcg1VZF0bgILmWecaQ5o+6A=", - "dev": true, - "requires": { - "lodash._reinterpolate": "~3.0.0", - "lodash.templatesettings": "^4.0.0" - } - }, - "lodash.templatesettings": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.1.0.tgz", - "integrity": "sha1-K01OlbpEDZFf8IvImeRVNmZxMxY=", - "dev": true, - "requires": { - "lodash._reinterpolate": "~3.0.0" - } - }, "make-iterator": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/make-iterator/-/make-iterator-1.0.1.tgz", @@ -2384,6 +2413,12 @@ "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=", "dev": true }, + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=", + "dev": true + }, "object-copy": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/object-copy/-/object-copy-0.1.0.tgz", @@ -2803,6 +2838,17 @@ "remove-trailing-separator": "^1.1.0" } }, + "replacestream": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/replacestream/-/replacestream-4.0.3.tgz", + "integrity": "sha512-AC0FiLS352pBBiZhd4VXB1Ab/lh0lEgpP+GGvZqbQh8a5cmXVoTe5EX/YeTFArnp4SRGTHh1qCHu9lGs1qG8sA==", + "dev": true, + "requires": { + "escape-string-regexp": "^1.0.3", + "object-assign": "^4.0.1", + "readable-stream": "^2.0.2" + } + }, "require-directory": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", @@ -3217,6 +3263,12 @@ } } }, + "textextensions": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/textextensions/-/textextensions-2.4.0.tgz", + "integrity": "sha512-qftQXnX1DzpSV8EddtHIT0eDDEiBF8ywhFYR2lI9xrGtxqKN+CvLXhACeCIGbCpQfxxERbrkZEFb8cZcDKbVZA==", + "dev": true + }, "through2": { "version": "2.0.5", "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz", diff --git a/package.json b/package.json index 5f9b7df..17a4528 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "dotdotdot-js", - "version": "4.0.2", + "version": "4.0.3", "main": "dist/dotdotdot.js", "author": "Fred Heusschen ", "license": "CC-BY-NC-4.0", @@ -25,9 +25,10 @@ }, "devDependencies": { "gulp": "^4.0.0", + "gulp-rename": "^1.4.0", + "gulp-replace": "^1.0.0", "gulp-terser": "^1.1.7", "gulp-typescript": "^5.0.0", - "gulp-umd": "^2.0.0", "typescript": "^3.3.1" } } diff --git a/src/dotdotdot.ts b/src/dotdotdot.ts index 36d382f..e478018 100644 --- a/src/dotdotdot.ts +++ b/src/dotdotdot.ts @@ -1,5 +1,5 @@ /*! - * dotdotdot JS 4.0.2 + * dotdotdot JS 4.0.3 * * dotdotdot.frebsite.nl * @@ -14,10 +14,10 @@ /** * Class for a multiline ellipsis. */ -class Dotdotdot { +export default class Dotdotdot { /** Plugin version. */ - static version : string = '4.0.2' + static version : string = '4.0.3' /** Default options. */ @@ -88,15 +88,12 @@ class Dotdotdot { this.resizeEvent = null; // Extend the specified options with the default options. - for ( let option in Dotdotdot.options ) - { - if ( !Dotdotdot.options.hasOwnProperty( option ) ) - { + for ( let option in Dotdotdot.options ) { + if ( !Dotdotdot.options.hasOwnProperty( option ) ) { continue; } - if ( typeof this.options[ option ] == 'undefined' ) - { + if ( typeof this.options[ option ] == 'undefined' ) { this.options[ option ] = Dotdotdot.options[ option ]; } } @@ -104,8 +101,7 @@ class Dotdotdot { // If the element allready is a dotdotdot instance. // -> Destroy the previous instance. var oldAPI = this.container[ 'dotdotdot' ]; - if ( oldAPI ) - { + if ( oldAPI ) { oldAPI.destroy(); } @@ -132,18 +128,15 @@ class Dotdotdot { // Set CSS properties for the container. var computedStyle = window.getComputedStyle( this.container ); - if ( computedStyle[ 'word-wrap' ] !== 'break-word' ) - { + if ( computedStyle[ 'word-wrap' ] !== 'break-word' ) { this.container.style[ 'word-wrap' ] = 'break-word'; } - if ( computedStyle[ 'white-space' ] === 'nowrap' ) - { + if ( computedStyle[ 'white-space' ] === 'nowrap' ) { this.container.style[ 'white-space' ] = 'normal'; } // Set the max-height for the container. - if ( this.options.height === null ) - { + if ( this.options.height === null ) { this.options.height = this._getMaxHeight(); } @@ -151,8 +144,7 @@ class Dotdotdot { this.truncate(); // Set the watch. - if ( this.options.watch ) - { + if ( this.options.watch ) { this.watch(); } } @@ -229,13 +221,11 @@ class Dotdotdot { }; // Update onWindowResize. - if ( this.options.watch == 'window' ) - { + if ( this.options.watch == 'window' ) { this.resizeEvent = ( evnt ) => { // Debounce the resize event to prevent it from being called very often. - if ( this.watchTimeout ) - { + if ( this.watchTimeout ) { clearTimeout( this.watchTimeout ); } @@ -245,11 +235,9 @@ class Dotdotdot { }; window.addEventListener( 'resize', this.resizeEvent ); - } // Update in an interval. - else - { + } else { this.watchInterval = setInterval(() => { oldSizes = watchSizes( this.container, 'clientWidth', 'clientHeight' ); }, 1000); @@ -262,21 +250,18 @@ class Dotdotdot { unwatch() { // Stop the windowResize handler. - if ( this.resizeEvent ) - { + if ( this.resizeEvent ) { window.removeEventListener( 'resize', this.resizeEvent ); this.resizeEvent = null; } // Stop the watch interval. - if ( this.watchInterval ) - { + if ( this.watchInterval ) { clearInterval( this.watchInterval ); } // Stop the watch timeout. - if ( this.watchTimeout ) - { + if ( this.watchTimeout ) { clearTimeout( this.watchTimeout ); } } @@ -284,8 +269,7 @@ class Dotdotdot { /** * Start the truncate process. */ - truncate() - { + truncate() { var isTruncated = false; // Fill the container with all the original content. @@ -298,8 +282,7 @@ class Dotdotdot { this.maxHeight = this._getMaxHeight(); // Truncate the text. - if ( !this._fits() ) - { + if ( !this._fits() ) { isTruncated = true; this._truncateToNode( this.container ); } @@ -340,22 +323,19 @@ class Dotdotdot { } }); - if ( !_elms.length ) - { + if ( !_elms.length ) { return; } // Re-fill the element // -> replace comments with contents until it doesn't fit anymore. - for ( var e = 0; e < _elms.length; e++ ) - { + for ( var e = 0; e < _elms.length; e++ ) { _coms[ e ].replaceWith( _elms[ e ] ); let ellipsis = this.ellipsis.cloneNode( true ); - switch ( _elms[ e ].nodeType ) - { + switch ( _elms[ e ].nodeType ) { case 1: _elms[ e ].append( ellipsis ); break; @@ -368,10 +348,8 @@ class Dotdotdot { let fits = this._fits(); ellipsis.parentElement.removeChild( ellipsis ); - if ( !fits ) - { - if ( this.options.truncate == 'node' && e > 1 ) - { + if ( !fits ) { + if ( this.options.truncate == 'node' && e > 1 ) { _elms[ e - 2 ].remove(); return; } @@ -380,8 +358,7 @@ class Dotdotdot { } // Remove left over comments. - for ( var c = e; c < _coms.length; c++ ) - { + for ( var c = e; c < _coms.length; c++ ) { _coms[ c ].remove(); } @@ -392,8 +369,7 @@ class Dotdotdot { // Border case // -> the last node with only an ellipsis in it... - if ( _last.nodeType == 1 ) - { + if ( _last.nodeType == 1 ) { let element = document.createElement( _last.nodeName ); element.append( this.ellipsis ); @@ -402,27 +378,21 @@ class Dotdotdot { // ... fits // -> Restore the full last element. - if ( this._fits() ) - { + if ( this._fits() ) { element.replaceWith( _last ); - } // ... doesn't fit // -> remove it and go back one element. - else - { + } else { element.remove(); _last = _elms[ Math.max( 0, e - 1 ) ]; } } // Proceed inside last element. - if ( _last.nodeType == 1 ) - { + if ( _last.nodeType == 1 ) { this._truncateToNode( _last ); - } - else - { + } else { this._truncateToWord( _last ); } } @@ -439,14 +409,11 @@ class Dotdotdot { seporator = ( text.indexOf( ' ' ) !== -1 ) ? ' ' : '\u3000', words = text.split( seporator ); - for ( var a = words.length; a >= 0; a-- ) - { + for ( var a = words.length; a >= 0; a-- ) { element.textContent = this._addEllipsis( words.slice( 0, a ).join( seporator ) ); - if ( this._fits() ) - { - if ( this.options.truncate == 'letter' ) - { + if ( this._fits() ) { + if ( this.options.truncate == 'letter' ) { element.textContent = words.slice( 0, a + 1 ).join( seporator ); this._truncateToLetter( element ); } @@ -467,19 +434,16 @@ class Dotdotdot { var letters = element.textContent.split( '' ), text = ''; - for ( var a = letters.length; a >= 0; a-- ) - { + for ( var a = letters.length; a >= 0; a-- ) { text = letters.slice( 0, a ).join( '' ); - if ( !text.length ) - { + if ( !text.length ) { continue; } element.textContent = this._addEllipsis( text ); - if ( this._fits() ) - { + if ( this._fits() ) { break; } } @@ -490,8 +454,7 @@ class Dotdotdot { * * @return {boolean} Whether or not the content fits in the container. */ - _fits() : boolean - { + _fits() : boolean { return ( this.container.scrollHeight <= this.maxHeight + this.options.tolerance ); } @@ -506,8 +469,7 @@ class Dotdotdot { ) : string { var remove = [' ', '\u3000', ',', ';', '.', '!', '?']; - while ( remove.indexOf( text.slice( -1 ) ) > -1 ) - { + while ( remove.indexOf( text.slice( -1 ) ) > -1 ) { text = text.slice( 0, -1 ); } text += this.ellipsis.textContent; @@ -523,8 +485,7 @@ class Dotdotdot { _getOriginalContent() : HTMLElement[] { let keep = 'script, style'; - if ( this.options.keep ) - { + if ( this.options.keep ) { keep += ', ' + this.options.keep; } @@ -548,37 +509,26 @@ class Dotdotdot { // Remove Text nodes that do not take up space in the DOM. // This kinda asumes a default display property for the elements in the container. - if ( text.nodeType == 3 ) - { + if ( text.nodeType == 3 ) { - if ( text.textContent.trim() == '' ) - { + if ( text.textContent.trim() == '' ) { let prev = (text.previousSibling as HTMLElement), next = (text.nextSibling as HTMLElement); - if ( text.parentElement.matches( 'table, thead, tbody, tfoot, tr, dl, ul, ol, video' ) ) - { - remove = true; - } - else if ( !prev || prev.matches( 'div, p, table, td, td, dt, dd, li' ) ) - { - remove = true; - } - else if ( !next || next.matches( 'div, p, table, td, td, dt, dd, li' ) ) - { + if ( text.parentElement.matches( 'table, thead, tbody, tfoot, tr, dl, ul, ol, video' ) || + !prev || prev.matches( 'div, p, table, td, td, dt, dd, li' ) || + !next || next.matches( 'div, p, table, td, td, dt, dd, li' ) + ) { remove = true; } } - } // Remove Comment nodes. - else if ( text.nodeType == 8 ) - { + } else if ( text.nodeType == 8 ) { remove = true; } - if ( remove ) - { + if ( remove ) { element.removeChild( text ); } }); @@ -600,10 +550,8 @@ class Dotdotdot { * * @return {number} The max-height for the container. */ - _getMaxHeight() : number - { - if ( typeof this.options.height == 'number' ) - { + _getMaxHeight() : number { + if ( typeof this.options.height == 'number' ) { return this.options.height; } @@ -613,11 +561,9 @@ class Dotdotdot { var properties = [ 'maxHeight', 'height' ], height = 0; - for ( var a = 0; a < properties.length; a++ ) - { + for ( var a = 0; a < properties.length; a++ ) { let property = style[ properties[ a ] ]; - if ( property.slice( -2 ) == 'px' ) - { + if ( property.slice( -2 ) == 'px' ) { height = parseFloat( property ); break; } @@ -625,8 +571,7 @@ class Dotdotdot { // Remove padding-top/bottom when needed. properties = []; - switch ( style.boxSizing ) - { + switch ( style.boxSizing ) { case 'border-box': properties.push( 'borderTopWidth' ); properties.push( 'borderBottomWidth' ); @@ -637,11 +582,9 @@ class Dotdotdot { properties.push( 'paddingBottom' ); break; } - for ( var a = 0; a < properties.length; a++ ) - { + for ( var a = 0; a < properties.length; a++ ) { let property = style[ properties[ a ] ]; - if ( property.slice( -2 ) == 'px' ) - { + if ( property.slice( -2 ) == 'px' ) { height -= parseFloat( property ); } } @@ -683,13 +626,10 @@ class Dotdotdot { } } -// The jQuery plugin. -declare var Zepto : any -declare var jQuery : any +// The jQuery plugin. (function( $ ) { - if ( typeof $ != 'undefined' ) - { + if ( typeof $ != 'undefined' ) { $.fn.dotdotdot = function( options ) { return this.each(( e, element ) => { let dot = new Dotdotdot( element, options ); @@ -697,5 +637,5 @@ declare var jQuery : any }); } } -})( document[ 'Zepto' ] || document[ 'jQuery' ] ); +})( (window as any).Zepto || (window as any).jQuery ); diff --git a/tsconfig.json b/tsconfig.json index c05375e..bb5f279 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,6 +3,7 @@ "src/*.ts" ], "compilerOptions": { - "target": "es5" + "target": "es6", + "module": "es6" } } \ No newline at end of file