From cade2e182f1af56bb26f7593076c642d15d9e7fe Mon Sep 17 00:00:00 2001 From: Pascal Baljet Date: Mon, 26 Oct 2015 12:45:19 +0100 Subject: [PATCH 1/7] Added main JS file to package.json --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index bc60865..6ebc73b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,7 @@ { "author": "https://github.com/dibari", "name": "angular-ellipsis", + "main": "src/angular-ellipsis.js", "keywords": [ "angular", "directives", From cdca2e0ae2f98df93d8ad0f8b642104d9be481f5 Mon Sep 17 00:00:00 2001 From: Juan Jose Guevara Date: Tue, 15 Dec 2015 17:59:53 -0600 Subject: [PATCH 2/7] rebuilding ellipsis after element becomes visible --- src/angular-ellipsis.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/angular-ellipsis.js b/src/angular-ellipsis.js index 26e97c8..89552be 100644 --- a/src/angular-ellipsis.js +++ b/src/angular-ellipsis.js @@ -196,6 +196,13 @@ angular.module('dibari.angular-ellipsis', []) buildEllipsis(); }); + /** + * Execute ellipsis truncate when element becomes visible + */ + scope.$watch(function() { return element.is(':visible') }, function() { + asyncDigestDebounced.add(buildEllipsis); + }); + function checkWindowForRebuild() { if (attributes.lastWindowResizeWidth != window.innerWidth || attributes.lastWindowResizeHeight != window.innerHeight) { buildEllipsis(); From e0bfa6daaf28dc108b60ee89bd20cfc80c8d9f90 Mon Sep 17 00:00:00 2001 From: Juan Jose Guevara Date: Tue, 15 Dec 2015 18:01:29 -0600 Subject: [PATCH 3/7] cleanup --- src/angular-ellipsis.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/angular-ellipsis.js b/src/angular-ellipsis.js index 89552be..dc5f7f8 100644 --- a/src/angular-ellipsis.js +++ b/src/angular-ellipsis.js @@ -200,7 +200,7 @@ angular.module('dibari.angular-ellipsis', []) * Execute ellipsis truncate when element becomes visible */ scope.$watch(function() { return element.is(':visible') }, function() { - asyncDigestDebounced.add(buildEllipsis); + asyncDigestDebounced.add(buildEllipsis); }); function checkWindowForRebuild() { From 7ab9a02911dccae50b59b3387412c41df59f34a0 Mon Sep 17 00:00:00 2001 From: Juan Jose Guevara Date: Tue, 15 Dec 2015 19:22:19 -0600 Subject: [PATCH 4/7] removing jquery dependency --- src/angular-ellipsis.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/angular-ellipsis.js b/src/angular-ellipsis.js index dc5f7f8..1f58850 100644 --- a/src/angular-ellipsis.js +++ b/src/angular-ellipsis.js @@ -199,7 +199,7 @@ angular.module('dibari.angular-ellipsis', []) /** * Execute ellipsis truncate when element becomes visible */ - scope.$watch(function() { return element.is(':visible') }, function() { + scope.$watch(function() { return element[0].offsetWidth != 0 && element[0].offsetHeight != 0 }, function() { asyncDigestDebounced.add(buildEllipsis); }); From 7be0a2c62b099475298651f1e19ed1dc8d32d963 Mon Sep 17 00:00:00 2001 From: Georgi Stoyanov Date: Sat, 2 Jan 2016 09:41:22 +0200 Subject: [PATCH 5/7] Listen for an event to allow refreshing the ellipsis Users of the directive can now trigger the 'dibari:refresh-ellipsis' event to refresh the ellipsis state. This can be used to implement expand/collapse functionality just by changing the element's height and triggering the event: $scope.$broadcast('dibari:refresh-ellipsis'); --- src/angular-ellipsis.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/angular-ellipsis.js b/src/angular-ellipsis.js index 1f58850..f3310c5 100644 --- a/src/angular-ellipsis.js +++ b/src/angular-ellipsis.js @@ -212,6 +212,9 @@ angular.module('dibari.angular-ellipsis', []) attributes.lastWindowResizeHeight = window.innerHeight; } + var unbindRefreshEllipsis = scope.$on('dibari:refresh-ellipsis', function() { + asyncDigestImmediate.add(buildEllipsis); + }); /** * When window width or height changes - re-init truncation */ @@ -230,10 +233,14 @@ angular.module('dibari.angular-ellipsis', []) $win.unbind('resize', onResize); asyncDigestImmediate.remove(buildEllipsis); asyncDigestDebounced.remove(checkWindowForRebuild); + if (unbindRefreshEllipsis) { + unbindRefreshEllipsis(); + unbindRefreshEllipsis = null; + } }); }; } }; -}]); \ No newline at end of file +}]); From 1531dadae507d30b830f2dc5f624f5c109a89a99 Mon Sep 17 00:00:00 2001 From: Matthew Kirkley Date: Fri, 26 Aug 2016 12:50:01 +0000 Subject: [PATCH 6/7] #70 Added ability to assign a fall back font size before ellipsis is determined. --- src/angular-ellipsis.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/angular-ellipsis.js b/src/angular-ellipsis.js index f3310c5..22255c0 100644 --- a/src/angular-ellipsis.js +++ b/src/angular-ellipsis.js @@ -61,7 +61,8 @@ angular.module('dibari.angular-ellipsis', []) ellipsisSymbol: '@', ellipsisSeparator: '@', useParent: "@", - ellipsisSeparatorReg: '=' + ellipsisSeparatorReg: '=', + ellipsisFallbackFontSize:'@' }, compile: function(elem, attr, linker) { @@ -74,6 +75,10 @@ angular.module('dibari.angular-ellipsis', []) /* State Variables */ attributes.isTruncated = false; + function _isDefined(value) { + return typeof(value) !== 'undefined'; + } + function getParentHeight(element) { var heightOfChildren = 0; angular.forEach(element.parent().children(), function(child) { @@ -107,6 +112,10 @@ angular.module('dibari.angular-ellipsis', []) element.text(binding); } + if (_isDefined(attributes.ellipsisFallbackFontSize) && isOverflowed(element)) { + element.css('font-size',attributes.ellipsisFallbackFontSize); + } + // If text has overflow if (isOverflowed(element, scope.useParent)) { var bindArrayStartingLength = bindArray.length, From 93b3742f9a6adafbc0c754d0002764c7ac4583d5 Mon Sep 17 00:00:00 2001 From: Matthew Kirkley Date: Fri, 26 Aug 2016 12:29:06 +0000 Subject: [PATCH 7/7] #70 Updated README.md to document fallback font size. --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index 890e341..86fae2f 100644 --- a/README.md +++ b/README.md @@ -55,6 +55,10 @@ If a custom append string is included, a function can be executed on the resulti You can use string separator to split the string by something else than " " (space). Example (split by characters): ``

`` +* **Fallback Font-Size** +You can specify a fallback font size. If text is detected to overflow an attempt to resize the text to the fallback font-size will be made before ellipsis are added. +``

`` + COMPATIBILITY -------- Works on modern web browers, which includes any relatively recent version of Chrome, Firefox, Safari, and IE 9+. Although there is no formally-maintained list, mobile device support is quite thorough. I will update cross-browser and device issues if they are entered as issues.