diff --git a/README.md b/README.md index faa0c30..19f227a 100644 --- a/README.md +++ b/README.md @@ -35,15 +35,19 @@ In some upcoming version it may be able to detect this value automatically. | property | type | default | description | | --- | --- | --- | --- | | importCss | Boolean | false | Set to `true` in order to import styles into `` automatically, element.style is used by default +| textOverflow | String | `ellipsis` | Set the value for [`text-overflow`](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow) property in modern browsers | fallbackFunc | Function | defaultFallbackFunc | Provide your own default method to handle the truncation strategy on unsupported browsers. Accepts all directive params: `element (Node)`, `bindings (Object)`, `lines (Number)` ### Caveats -Probably there may be problems when loading custom fonts. I've done some tests and couldn't detect any inconsistence so far, so feel free to open an issue and provide code to reproduce any bug or glitch you find. +1. Probably there may be problems when loading custom fonts. I've done some tests and couldn't detect any inconsistence so far, so feel free to open an issue and provide code to reproduce any bug or glitch you find. +2. The fallback method for older browsers won't show up the ellipsis (`...`) since we can't control the part of the text node that may get "clamped". ### Changelog +**v1.2.4** - Implemented `textOverflow` option. + **v1.2.1** - Implemented `fallbackFunc` options, fixed multiple elements clamping on same page. **v1.2** - Lines parameter passed to `v-line-clamp` is now reactive. diff --git a/dev/index.html b/dev/index.html index 8cc1d08..6b7ed54 100644 --- a/dev/index.html +++ b/dev/index.html @@ -1,41 +1,41 @@ - - - - - - - Vue Line Clamp - A multi-line ellipsis for Vue - - -
-
- - -

- Truncate my lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore, neque minima libero voluptatibus voluptate enim earum qui tempora sed sequi fugiat aut commodi laboriosam iste cupiditate quo veritatis quam obcaecati. -

- -

- Truncate my lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore, neque minima libero voluptatibus voluptate enim earum qui tempora sed sequi fugiat aut commodi laboriosam iste cupiditate quo veritatis quam obcaecati. -

- -

- Truncate my lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore, neque minima libero voluptatibus voluptate enim earum qui tempora sed sequi fugiat aut commodi laboriosam iste cupiditate quo veritatis quam obcaecati. -

-
- - - - - \ No newline at end of file + + + + + + + Vue Line Clamp - A multi-line ellipsis for Vue + + +
+
+ + +

+ Truncate my lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore, neque minima libero voluptatibus voluptate enim earum qui tempora sed sequi fugiat aut commodi laboriosam iste cupiditate quo veritatis quam obcaecati. +

+ +

+ Truncate my lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore, neque minima libero voluptatibus voluptate enim earum qui tempora sed sequi fugiat aut commodi laboriosam iste cupiditate quo veritatis quam obcaecati. +

+ +

+ Truncate my lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore, neque minima libero voluptatibus voluptate enim earum qui tempora sed sequi fugiat aut commodi laboriosam iste cupiditate quo veritatis quam obcaecati. +

+
+ + + + + diff --git a/dist/vue-line-clamp.cjs.js b/dist/vue-line-clamp.cjs.js index 8386b3e..636188f 100644 --- a/dist/vue-line-clamp.cjs.js +++ b/dist/vue-line-clamp.cjs.js @@ -1,82 +1,84 @@ 'use strict'; -const css = 'display:block;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis'; const currentValueProp = "vLineClampValue"; function defaultFallbackFunc(el, bindings, lines) { - if(lines){ + if (lines) { let lineHeight = parseInt(bindings.arg); if (isNaN(lineHeight)) { - console.warn('line-height argument for vue-line-clamp must be a number (of pixels), falling back to 16px'); + console.warn( + "line-height argument for vue-line-clamp must be a number (of pixels), falling back to 16px" + ); lineHeight = 16; } let maxHeight = lineHeight * lines; - el.style.maxHeight = maxHeight ? maxHeight+'px' : ''; - el.style.overflowX = 'hidden'; - el.style.lineHeight = lineHeight+'px'; // to ensure consistency + el.style.maxHeight = maxHeight ? maxHeight + "px" : ""; + el.style.overflowX = "hidden"; + el.style.lineHeight = lineHeight + "px"; // to ensure consistency } else { - el.style.maxHeight = el.style.overflowX = ''; + el.style.maxHeight = el.style.overflowX = ""; } } -const truncateText = function (el, bindings, useFallbackFunc) { +const truncateText = function(el, bindings, useFallbackFunc) { let lines = parseInt(bindings.value); if (isNaN(lines)) { - console.error('Parameter for vue-line-clamp must be a number'); - return - } - else if (lines !== el[currentValueProp]) { + console.error("Parameter for vue-line-clamp must be a number"); + return; + } else if (lines !== el[currentValueProp]) { el[currentValueProp] = lines; if (useFallbackFunc) { useFallbackFunc(el, bindings, lines); - } - else { - el.style.webkitLineClamp = lines ? lines : ''; + } else { + el.style.webkitLineClamp = lines ? lines : ""; } } }; const VueLineClamp = { - install (Vue, options) { - options = Object.assign({ - importCss: false - }, options); + install(Vue, options) { + options = Object.assign( + { importCss: false, textOverflow: "ellipsis" }, + options + ); + const styles = + "display:block;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:" + + options.textOverflow; if (options.importCss) { const stylesheets = window.document.styleSheets, - rule = `.vue-line-clamp{${css}}`; + rule = `.vue-line-clamp{${styles}}`; if (stylesheets && stylesheets[0] && stylesheets.insertRule) { stylesheets.insertRule(rule); } else { - let link = window.document.createElement('style'); - link.id = 'vue-line-clamp'; + let link = window.document.createElement("style"); + link.id = "vue-line-clamp"; link.appendChild(window.document.createTextNode(rule)); window.document.head.appendChild(link); } } const useFallbackFunc = - "webkitLineClamp" in document.body.style + "webkitLineClamp" in document.body.style ? undefined : options.fallbackFunc || defaultFallbackFunc; - Vue.directive('line-clamp', { + Vue.directive("line-clamp", { currentValue: 0, - bind (el) { + bind(el) { if (!options.importCss) { - el.style.cssText += css; + el.style.cssText += styles; + } else { + el.classList.add("vue-line-clamp"); } - else { - el.classList.add('vue-line-clamp'); - } - }, inserted: (el, bindings) => truncateText(el, bindings, useFallbackFunc), updated: (el, bindings) => truncateText(el, bindings, useFallbackFunc), - componentUpdated: (el, bindings) => truncateText(el, bindings, useFallbackFunc) + componentUpdated: (el, bindings) => + truncateText(el, bindings, useFallbackFunc) }); } }; diff --git a/dist/vue-line-clamp.esm.js b/dist/vue-line-clamp.esm.js index e71fd3d..347e520 100644 --- a/dist/vue-line-clamp.esm.js +++ b/dist/vue-line-clamp.esm.js @@ -1,80 +1,82 @@ -const css = 'display:block;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis'; const currentValueProp = "vLineClampValue"; function defaultFallbackFunc(el, bindings, lines) { - if(lines){ + if (lines) { let lineHeight = parseInt(bindings.arg); if (isNaN(lineHeight)) { - console.warn('line-height argument for vue-line-clamp must be a number (of pixels), falling back to 16px'); + console.warn( + "line-height argument for vue-line-clamp must be a number (of pixels), falling back to 16px" + ); lineHeight = 16; } let maxHeight = lineHeight * lines; - el.style.maxHeight = maxHeight ? maxHeight+'px' : ''; - el.style.overflowX = 'hidden'; - el.style.lineHeight = lineHeight+'px'; // to ensure consistency + el.style.maxHeight = maxHeight ? maxHeight + "px" : ""; + el.style.overflowX = "hidden"; + el.style.lineHeight = lineHeight + "px"; // to ensure consistency } else { - el.style.maxHeight = el.style.overflowX = ''; + el.style.maxHeight = el.style.overflowX = ""; } } -const truncateText = function (el, bindings, useFallbackFunc) { +const truncateText = function(el, bindings, useFallbackFunc) { let lines = parseInt(bindings.value); if (isNaN(lines)) { - console.error('Parameter for vue-line-clamp must be a number'); - return - } - else if (lines !== el[currentValueProp]) { + console.error("Parameter for vue-line-clamp must be a number"); + return; + } else if (lines !== el[currentValueProp]) { el[currentValueProp] = lines; if (useFallbackFunc) { useFallbackFunc(el, bindings, lines); - } - else { - el.style.webkitLineClamp = lines ? lines : ''; + } else { + el.style.webkitLineClamp = lines ? lines : ""; } } }; const VueLineClamp = { - install (Vue, options) { - options = Object.assign({ - importCss: false - }, options); + install(Vue, options) { + options = Object.assign( + { importCss: false, textOverflow: "ellipsis" }, + options + ); + const styles = + "display:block;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:" + + options.textOverflow; if (options.importCss) { const stylesheets = window.document.styleSheets, - rule = `.vue-line-clamp{${css}}`; + rule = `.vue-line-clamp{${styles}}`; if (stylesheets && stylesheets[0] && stylesheets.insertRule) { stylesheets.insertRule(rule); } else { - let link = window.document.createElement('style'); - link.id = 'vue-line-clamp'; + let link = window.document.createElement("style"); + link.id = "vue-line-clamp"; link.appendChild(window.document.createTextNode(rule)); window.document.head.appendChild(link); } } const useFallbackFunc = - "webkitLineClamp" in document.body.style + "webkitLineClamp" in document.body.style ? undefined : options.fallbackFunc || defaultFallbackFunc; - Vue.directive('line-clamp', { + Vue.directive("line-clamp", { currentValue: 0, - bind (el) { + bind(el) { if (!options.importCss) { - el.style.cssText += css; + el.style.cssText += styles; + } else { + el.classList.add("vue-line-clamp"); } - else { - el.classList.add('vue-line-clamp'); - } - }, inserted: (el, bindings) => truncateText(el, bindings, useFallbackFunc), updated: (el, bindings) => truncateText(el, bindings, useFallbackFunc), - componentUpdated: (el, bindings) => truncateText(el, bindings, useFallbackFunc) + componentUpdated: (el, bindings) => + truncateText(el, bindings, useFallbackFunc) }); } }; diff --git a/dist/vue-line-clamp.umd.js b/dist/vue-line-clamp.umd.js index 8a56f67..974447f 100644 --- a/dist/vue-line-clamp.umd.js +++ b/dist/vue-line-clamp.umd.js @@ -4,31 +4,30 @@ (global.VueLineClamp = factory()); }(this, (function () { 'use strict'; -var css = 'display:block;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis'; var currentValueProp = "vLineClampValue"; function defaultFallbackFunc(el, bindings, lines) { if (lines) { var lineHeight = parseInt(bindings.arg); if (isNaN(lineHeight)) { - console.warn('line-height argument for vue-line-clamp must be a number (of pixels), falling back to 16px'); + console.warn("line-height argument for vue-line-clamp must be a number (of pixels), falling back to 16px"); lineHeight = 16; } var maxHeight = lineHeight * lines; - el.style.maxHeight = maxHeight ? maxHeight + 'px' : ''; - el.style.overflowX = 'hidden'; - el.style.lineHeight = lineHeight + 'px'; // to ensure consistency + el.style.maxHeight = maxHeight ? maxHeight + "px" : ""; + el.style.overflowX = "hidden"; + el.style.lineHeight = lineHeight + "px"; // to ensure consistency } else { - el.style.maxHeight = el.style.overflowX = ''; + el.style.maxHeight = el.style.overflowX = ""; } } var truncateText = function truncateText(el, bindings, useFallbackFunc) { var lines = parseInt(bindings.value); if (isNaN(lines)) { - console.error('Parameter for vue-line-clamp must be a number'); + console.error("Parameter for vue-line-clamp must be a number"); return; } else if (lines !== el[currentValueProp]) { el[currentValueProp] = lines; @@ -36,25 +35,24 @@ var truncateText = function truncateText(el, bindings, useFallbackFunc) { if (useFallbackFunc) { useFallbackFunc(el, bindings, lines); } else { - el.style.webkitLineClamp = lines ? lines : ''; + el.style.webkitLineClamp = lines ? lines : ""; } } }; var VueLineClamp = { install: function install(Vue, options) { - options = Object.assign({ - importCss: false - }, options); + options = Object.assign({ importCss: false, textOverflow: "ellipsis" }, options); + var styles = "display:block;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:" + options.textOverflow; if (options.importCss) { var stylesheets = window.document.styleSheets, - rule = '.vue-line-clamp{' + css + '}'; + rule = ".vue-line-clamp{" + styles + "}"; if (stylesheets && stylesheets[0] && stylesheets.insertRule) { stylesheets.insertRule(rule); } else { - var link = window.document.createElement('style'); - link.id = 'vue-line-clamp'; + var link = window.document.createElement("style"); + link.id = "vue-line-clamp"; link.appendChild(window.document.createTextNode(rule)); window.document.head.appendChild(link); } @@ -62,13 +60,13 @@ var VueLineClamp = { var useFallbackFunc = "webkitLineClamp" in document.body.style ? undefined : options.fallbackFunc || defaultFallbackFunc; - Vue.directive('line-clamp', { + Vue.directive("line-clamp", { currentValue: 0, bind: function bind(el) { if (!options.importCss) { - el.style.cssText += css; + el.style.cssText += styles; } else { - el.classList.add('vue-line-clamp'); + el.classList.add("vue-line-clamp"); } }, diff --git a/package.json b/package.json index 049f1ad..d7661f7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-line-clamp", - "version": "1.2.3", + "version": "1.2.4", "description": "A simple, fast and lightweight directive for truncating multi line texts using \"cross-browser\" CSS strategies.", "main": "dist/vue-line-clamp.cjs.js", "module": "dist/vue-line-clamp.esm.js", @@ -14,9 +14,9 @@ "prepublishOnly": "npm run build" }, "devDependencies": { - "babel-core": "^6.26.0", + "babel-core": "^6.26.3", "babel-plugin-external-helpers": "^6.22.0", - "babel-preset-env": "^1.6.1", + "babel-preset-env": "^1.7.0", "jest": "^22.1.4", "rollup": "^0.50.0", "rollup-plugin-babel": "^3.0.3", diff --git a/src/main.js b/src/main.js index dc48c57..347e520 100644 --- a/src/main.js +++ b/src/main.js @@ -1,82 +1,84 @@ -const css = 'display:block;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis' -const currentValueProp = "vLineClampValue" +const currentValueProp = "vLineClampValue"; function defaultFallbackFunc(el, bindings, lines) { - if(lines){ - let lineHeight = parseInt(bindings.arg) + if (lines) { + let lineHeight = parseInt(bindings.arg); if (isNaN(lineHeight)) { - console.warn('line-height argument for vue-line-clamp must be a number (of pixels), falling back to 16px') - lineHeight = 16 + console.warn( + "line-height argument for vue-line-clamp must be a number (of pixels), falling back to 16px" + ); + lineHeight = 16; } - let maxHeight = lineHeight * lines + let maxHeight = lineHeight * lines; - el.style.maxHeight = maxHeight ? maxHeight+'px' : '' - el.style.overflowX = 'hidden' - el.style.lineHeight = lineHeight+'px' // to ensure consistency + el.style.maxHeight = maxHeight ? maxHeight + "px" : ""; + el.style.overflowX = "hidden"; + el.style.lineHeight = lineHeight + "px"; // to ensure consistency } else { - el.style.maxHeight = el.style.overflowX = '' + el.style.maxHeight = el.style.overflowX = ""; } } -const truncateText = function (el, bindings, useFallbackFunc) { - let lines = parseInt(bindings.value) +const truncateText = function(el, bindings, useFallbackFunc) { + let lines = parseInt(bindings.value); if (isNaN(lines)) { - console.error('Parameter for vue-line-clamp must be a number') - return - } - else if (lines !== el[currentValueProp]) { - el[currentValueProp] = lines + console.error("Parameter for vue-line-clamp must be a number"); + return; + } else if (lines !== el[currentValueProp]) { + el[currentValueProp] = lines; if (useFallbackFunc) { - useFallbackFunc(el, bindings, lines) - } - else { - el.style.webkitLineClamp = lines ? lines : '' + useFallbackFunc(el, bindings, lines); + } else { + el.style.webkitLineClamp = lines ? lines : ""; } } -} +}; const VueLineClamp = { - install (Vue, options) { - options = Object.assign({ - importCss: false - }, options) + install(Vue, options) { + options = Object.assign( + { importCss: false, textOverflow: "ellipsis" }, + options + ); + const styles = + "display:block;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;text-overflow:" + + options.textOverflow; if (options.importCss) { const stylesheets = window.document.styleSheets, - rule = `.vue-line-clamp{${css}}` + rule = `.vue-line-clamp{${styles}}`; if (stylesheets && stylesheets[0] && stylesheets.insertRule) { - stylesheets.insertRule(rule) + stylesheets.insertRule(rule); } else { - let link = window.document.createElement('style') - link.id = 'vue-line-clamp' - link.appendChild(window.document.createTextNode(rule)) - window.document.head.appendChild(link) + let link = window.document.createElement("style"); + link.id = "vue-line-clamp"; + link.appendChild(window.document.createTextNode(rule)); + window.document.head.appendChild(link); } } const useFallbackFunc = - "webkitLineClamp" in document.body.style + "webkitLineClamp" in document.body.style ? undefined : options.fallbackFunc || defaultFallbackFunc; - Vue.directive('line-clamp', { + Vue.directive("line-clamp", { currentValue: 0, - bind (el) { + bind(el) { if (!options.importCss) { - el.style.cssText += css + el.style.cssText += styles; + } else { + el.classList.add("vue-line-clamp"); } - else { - el.classList.add('vue-line-clamp') - } - }, inserted: (el, bindings) => truncateText(el, bindings, useFallbackFunc), updated: (el, bindings) => truncateText(el, bindings, useFallbackFunc), - componentUpdated: (el, bindings) => truncateText(el, bindings, useFallbackFunc) - }) + componentUpdated: (el, bindings) => + truncateText(el, bindings, useFallbackFunc) + }); } -} +}; -export default VueLineClamp +export default VueLineClamp;