From f9da6441756b6f08785993ec317dab12568e5093 Mon Sep 17 00:00:00 2001 From: Andy Dyer Date: Wed, 27 Feb 2019 11:45:00 -0600 Subject: [PATCH 1/5] cleaned up logic on what function to use browser depending, added in wordBreak option --- src/index.js | 26 +++++++++++--------------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/src/index.js b/src/index.js index 67d2f9a..96e8437 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,7 @@ const currentValueProp = 'vLineClampValue'; -function defaultFallbackFunc(el, bindings, lines) { +function defaultFallbackFunc(el, bindings) { + let lines = parseInt(bindings.value); if (lines) { let lineHeight = parseInt(bindings.arg); if (isNaN(lineHeight)) { @@ -20,26 +21,21 @@ function defaultFallbackFunc(el, bindings, lines) { } } -const truncateText = function(el, bindings, useFallbackFunc) { +const truncateText = function(el, bindings) { 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; - - if (useFallbackFunc) { - useFallbackFunc(el, bindings, lines); - } else { - el.style.webkitLineClamp = lines ? lines : ''; - } + el.style.webkitLineClamp = lines ? lines : ''; } }; const VueLineClamp = { install(Vue, options) { options = Object.assign( - { importCss: false, textOverflow: 'ellipsis' }, + { importCss: false, textOverflow: 'ellipsis', wordBreak: 'break-all' }, options ); @@ -48,7 +44,7 @@ const VueLineClamp = { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; - word-break: break-all; + word-break: ${options.wordBreak}; text-overflow: ${options.textOverflow}; `; @@ -65,9 +61,9 @@ const VueLineClamp = { } } - const useFallbackFunc = + const clampFunction = 'webkitLineClamp' in document.body.style - ? undefined + ? truncateText : options.fallbackFunc || defaultFallbackFunc; Vue.directive('line-clamp', { @@ -79,10 +75,10 @@ const VueLineClamp = { el.classList.add('vue-line-clamp'); } }, - inserted: (el, bindings) => truncateText(el, bindings, useFallbackFunc), - updated: (el, bindings) => truncateText(el, bindings, useFallbackFunc), + inserted: (el, bindings) => clampFunction(el, bindings), + updated: (el, bindings) => clampFunction(el, bindings), componentUpdated: (el, bindings) => - truncateText(el, bindings, useFallbackFunc), + clampFunction(el, bindings), }); }, }; From 9d904f0bdf10d1382cf9718f7fd5b51f53bed238 Mon Sep 17 00:00:00 2001 From: Andy Dyer Date: Mon, 1 Apr 2019 15:27:05 -0500 Subject: [PATCH 2/5] updated readme --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index 19f227a..77687ab 100644 --- a/README.md +++ b/README.md @@ -36,6 +36,7 @@ In some upcoming version it may be able to detect this value automatically. | --- | --- | --- | --- | | 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 +| wordBreak | String | `break-all` | set the value for [`word-break`](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break) | 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)` @@ -46,6 +47,8 @@ In some upcoming version it may be able to detect this value automatically. ### Changelog +**1.2.5** - Implemented `wordBreak` option, refactored how the backup function is called + **v1.2.4** - Implemented `textOverflow` option. **v1.2.1** - Implemented `fallbackFunc` options, fixed multiple elements clamping on same page. From 12954674b3bbd3abde91032e97aacc53392b1d2b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Federico=20V=C3=A1zquez?= Date: Wed, 3 Apr 2019 09:22:53 -0500 Subject: [PATCH 3/5] Update README.md Co-Authored-By: AndyDyer --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 77687ab..edb4d93 100644 --- a/README.md +++ b/README.md @@ -47,7 +47,7 @@ In some upcoming version it may be able to detect this value automatically. ### Changelog -**1.2.5** - Implemented `wordBreak` option, refactored how the backup function is called +**v1.6.0** - Implemented `wordBreak` option, refactored how the backup function is called **v1.2.4** - Implemented `textOverflow` option. From 8aeed88432edb9feb40b314c1bac28f8b64c98dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Federico=20V=C3=A1zquez?= Date: Wed, 3 Apr 2019 09:23:04 -0500 Subject: [PATCH 4/5] Update README.md Co-Authored-By: AndyDyer --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index edb4d93..417eada 100644 --- a/README.md +++ b/README.md @@ -36,7 +36,7 @@ In some upcoming version it may be able to detect this value automatically. | --- | --- | --- | --- | | 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 -| wordBreak | String | `break-all` | set the value for [`word-break`](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break) +| wordBreak | String | `break-word` | Set the value for [`word-break`](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break) | 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)` From 86dd7cdf463bc8a43fd74ce59129eb45367f9ef3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Federico=20V=C3=A1zquez?= Date: Wed, 3 Apr 2019 09:23:14 -0500 Subject: [PATCH 5/5] Update src/index.js Co-Authored-By: AndyDyer --- src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.js b/src/index.js index 96e8437..112e76b 100644 --- a/src/index.js +++ b/src/index.js @@ -35,7 +35,7 @@ const truncateText = function(el, bindings) { const VueLineClamp = { install(Vue, options) { options = Object.assign( - { importCss: false, textOverflow: 'ellipsis', wordBreak: 'break-all' }, + { importCss: false, textOverflow: 'ellipsis', wordBreak: 'break-word' }, options );