From 3fb3abefcaab929f7d25350ec7a477c996d9aba5 Mon Sep 17 00:00:00 2001 From: Dmitry Brusilovsky Date: Wed, 21 Mar 2018 10:48:49 +0200 Subject: [PATCH 1/3] overflow is considered not only by line height but width as well --- 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 1c5eb12..023cc96 100644 --- a/src/angular-ellipsis.js +++ b/src/angular-ellipsis.js @@ -183,7 +183,7 @@ angular.module('dibari.angular-ellipsis', []) */ function isOverflowed(thisElement, useParent) { thisElement = useParent ? thisElement.parent() : thisElement; - return thisElement[0].scrollHeight > thisElement[0].clientHeight; + return thisElement[0].scrollHeight > thisElement[0].clientHeight || thisElement[0].scrollWidth > thisElement[0].clientWidth; } /** From 2b8717ff0c678499eafa74b2f2b29b43a47d571c Mon Sep 17 00:00:00 2001 From: Dmitry Brusilovsky Date: Wed, 21 Mar 2018 11:09:35 +0200 Subject: [PATCH 2/3] Updating uglified js file --- src/angular-ellipsis.min.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/angular-ellipsis.min.js b/src/angular-ellipsis.min.js index e0d1fcb..fe8b1c3 100644 --- a/src/angular-ellipsis.min.js +++ b/src/angular-ellipsis.min.js @@ -1 +1 @@ -angular.module("dibari.angular-ellipsis",[]).directive("ellipsis",["$timeout","$window","$sce",function(a,b,c){var d=function(b){var c=null,d=[];this.remove=function(b){-1!==d.indexOf(b)&&(d.splice(d.indexOf(b),1),0===d.length&&(a.cancel(c),c=null))},this.add=function(e){-1===d.indexOf(e)&&d.push(e),c||(c=a(function(){var a=d.slice();c=null,d.length=0,a.forEach(function(a){a()})},b))}},e=new d(0),f=new d(75);return{restrict:"A",scope:{ngBind:"=",ngBindHtml:"=",ellipsisAppend:"@",ellipsisAppendClick:"&",ellipsisSymbol:"@",ellipsisSeparator:"@",useParent:"@",ellipsisSeparatorReg:"="},compile:function(a,d,g){return function(a,d,g){function h(a){var b=0;return angular.forEach(a.parent().children(),function(c){c!=a[0]&&(b+=c.clientHeight)}),a.parent()[0].clientHeight-b}function i(){var b=a.ngBind||a.ngBindHtml,e=!1;if(c.isEnabled()&&angular.isObject(b)&&c.getTrustedHtml(b)&&(e=!0,b=c.getTrustedHtml(b)),b){var f=!a.ngBind&&!!a.ngBindHtml,i=0,k="undefined"!=typeof g.ellipsisSymbol?g.ellipsisSymbol:"…",l="undefined"!=typeof a.ellipsisSeparator?g.ellipsisSeparator:" ",m="undefined"!=typeof a.ellipsisSeparatorReg?a.ellipsisSeparatorReg:!1,n="undefined"!=typeof a.ellipsisAppend&&""!==a.ellipsisAppend?k+""+a.ellipsisAppend+"":k,o=m?b.match(m):b.split(l);if(g.isTruncated=!1,f?d.html(b):d.text(b),j(d,a.useParent)){var p=o.length,q=a.useParent?h(d):d[0].clientHeight;for(f?d.html(b+n):d.text(b).html(d.html()+n),d.attr("data-overflowed","true");p>i;i++)if(o.pop(),f?d.html(o.join(l)+n):d.text(o.join(l)).html(d.html()+n),(a.useParent?d.parent()[0]:d[0]).scrollHeighta[0].clientHeight}function k(){(g.lastWindowResizeWidth!=window.innerWidth||g.lastWindowResizeHeight!=window.innerHeight)&&i(),g.lastWindowResizeWidth=window.innerWidth,g.lastWindowResizeHeight=window.innerHeight}function l(){f.add(k)}g.lastWindowResizeTime=0,g.lastWindowResizeWidth=0,g.lastWindowResizeHeight=0,g.lastWindowTimeoutEvent=null,g.isTruncated=!1,a.$watch("ngBind",function(){e.add(i)}),a.$watch("ngBindHtml",function(){e.add(i)}),a.$watch("ellipsisAppend",function(){i()});var m=angular.element(b);m.bind("resize",l),a.$on("$destroy",function(){m.unbind("resize",l),e.remove(i),f.remove(k)})}}}}]); \ No newline at end of file +angular.module("dibari.angular-ellipsis",[]).directive("ellipsis",["$timeout","$window","$sce",function(a,b,c){var d=function(b){var c=null,d=[];this.remove=function(b){-1!==d.indexOf(b)&&(d.splice(d.indexOf(b),1),0===d.length&&(a.cancel(c),c=null))},this.add=function(e){-1===d.indexOf(e)&&d.push(e),c||(c=a(function(){var a=d.slice();c=null,d.length=0,a.forEach(function(a){a()})},b))}},e=new d(0),f=new d(75);return{restrict:"A",scope:{ngShow:"=",ngBind:"=",ngBindHtml:"=",ellipsisAppend:"@",ellipsisAppendClick:"&",ellipsisSymbol:"@",ellipsisSeparator:"@",useParent:"@",ellipsisSeparatorReg:"=",ellipsisFallbackFontSize:"@"},compile:function(a,d,g){return function(a,d,g){function h(a){return"undefined"!=typeof a}function i(a){var b=0;return angular.forEach(a.parent().children(),function(c){c!=a[0]&&(b+=c.clientHeight)}),a.parent()[0].clientHeight-b}function j(){var b=a.ngBind||a.ngBindHtml,e=!1;if(c.isEnabled()&&angular.isObject(b)&&c.getTrustedHtml(b)&&(e=!0,b=c.getTrustedHtml(b)),b){var f=!a.ngBind&&!!a.ngBindHtml,j=0,l="undefined"!=typeof g.ellipsisSymbol?g.ellipsisSymbol:"…",m="undefined"!=typeof a.ellipsisSeparator?g.ellipsisSeparator:" ",n="undefined"!=typeof a.ellipsisSeparatorReg?a.ellipsisSeparatorReg:!1,o="undefined"!=typeof a.ellipsisAppend&&""!==a.ellipsisAppend?l+""+a.ellipsisAppend+"":l,p=n?b.match(n):b.split(m);if(g.isTruncated=!1,f?d.html(b):d.text(b),h(g.ellipsisFallbackFontSize)&&k(d)&&d.css("font-size",g.ellipsisFallbackFontSize),k(d,a.useParent)){var q=p.length,r=a.useParent?i(d):d[0].clientHeight;for(f?d.html(b+o):d.text(b).html(d.html()+o),d.attr("data-overflowed","true");q>j;j++){var s=p.pop();if(0===p.length&&(p[0]=s.substring(0,Math.min(s.length,5))),f?d.html(p.join(m)+o):d.text(p.join(m)).html(d.html()+o),(a.useParent?d.parent()[0]:d[0]).scrollHeighta[0].clientHeight||a[0].scrollWidth>a[0].clientWidth}function l(){(g.lastWindowResizeWidth!=window.innerWidth||g.lastWindowResizeHeight!=window.innerHeight)&&j(),g.lastWindowResizeWidth=window.innerWidth,g.lastWindowResizeHeight=window.innerHeight}function m(){f.add(l)}g.lastWindowResizeTime=0,g.lastWindowResizeWidth=0,g.lastWindowResizeHeight=0,g.lastWindowTimeoutEvent=null,g.isTruncated=!1,a.$watch("ngShow",function(){e.add(j)}),a.$watch("ngBind",function(){e.add(j)}),a.$watch("ngBindHtml",function(){e.add(j)}),a.$watch("ellipsisAppend",function(){j()}),a.$watch(function(){return 0!=d[0].offsetWidth&&0!=d[0].offsetHeight},function(){f.add(j)});var n=a.$on("dibari:refresh-ellipsis",function(){e.add(j)}),o=angular.element(b);o.bind("resize",m),a.$on("$destroy",function(){o.unbind("resize",m),e.remove(j),f.remove(l),n&&(n(),n=null)})}}}}]); \ No newline at end of file From 5f9a85b43c7b1e543f0b54868b465821c8369449 Mon Sep 17 00:00:00 2001 From: Dmitry Brusilovsky Date: Wed, 21 Mar 2018 14:42:59 +0200 Subject: [PATCH 3/3] Adding ellipsisDataOverflowed bi-directional binding --- src/angular-ellipsis.js | 5 ++++- src/angular-ellipsis.min.js | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/angular-ellipsis.js b/src/angular-ellipsis.js index 023cc96..8efc228 100644 --- a/src/angular-ellipsis.js +++ b/src/angular-ellipsis.js @@ -63,7 +63,8 @@ angular.module('dibari.angular-ellipsis', []) ellipsisSeparator: '@', useParent: "@", ellipsisSeparatorReg: '=', - ellipsisFallbackFontSize:'@' + ellipsisFallbackFontSize: '@', + dataOverflowed: '=ellipsisDataOverflowed' }, compile: function(elem, attr, linker) { @@ -128,6 +129,7 @@ angular.module('dibari.angular-ellipsis', []) element.text(binding).html(element.html() + appendString); } //Set data-overflow on element for targeting + scope.dataOverflowed = true; element.attr('data-overflowed', 'true'); // Set complete text and remove one word at a time, until there is no overflow @@ -168,6 +170,7 @@ angular.module('dibari.angular-ellipsis', []) } } else{ + scope.dataOverflowed = false; element.attr('data-overflowed', 'false'); } } diff --git a/src/angular-ellipsis.min.js b/src/angular-ellipsis.min.js index fe8b1c3..eb6955b 100644 --- a/src/angular-ellipsis.min.js +++ b/src/angular-ellipsis.min.js @@ -1 +1 @@ -angular.module("dibari.angular-ellipsis",[]).directive("ellipsis",["$timeout","$window","$sce",function(a,b,c){var d=function(b){var c=null,d=[];this.remove=function(b){-1!==d.indexOf(b)&&(d.splice(d.indexOf(b),1),0===d.length&&(a.cancel(c),c=null))},this.add=function(e){-1===d.indexOf(e)&&d.push(e),c||(c=a(function(){var a=d.slice();c=null,d.length=0,a.forEach(function(a){a()})},b))}},e=new d(0),f=new d(75);return{restrict:"A",scope:{ngShow:"=",ngBind:"=",ngBindHtml:"=",ellipsisAppend:"@",ellipsisAppendClick:"&",ellipsisSymbol:"@",ellipsisSeparator:"@",useParent:"@",ellipsisSeparatorReg:"=",ellipsisFallbackFontSize:"@"},compile:function(a,d,g){return function(a,d,g){function h(a){return"undefined"!=typeof a}function i(a){var b=0;return angular.forEach(a.parent().children(),function(c){c!=a[0]&&(b+=c.clientHeight)}),a.parent()[0].clientHeight-b}function j(){var b=a.ngBind||a.ngBindHtml,e=!1;if(c.isEnabled()&&angular.isObject(b)&&c.getTrustedHtml(b)&&(e=!0,b=c.getTrustedHtml(b)),b){var f=!a.ngBind&&!!a.ngBindHtml,j=0,l="undefined"!=typeof g.ellipsisSymbol?g.ellipsisSymbol:"…",m="undefined"!=typeof a.ellipsisSeparator?g.ellipsisSeparator:" ",n="undefined"!=typeof a.ellipsisSeparatorReg?a.ellipsisSeparatorReg:!1,o="undefined"!=typeof a.ellipsisAppend&&""!==a.ellipsisAppend?l+""+a.ellipsisAppend+"":l,p=n?b.match(n):b.split(m);if(g.isTruncated=!1,f?d.html(b):d.text(b),h(g.ellipsisFallbackFontSize)&&k(d)&&d.css("font-size",g.ellipsisFallbackFontSize),k(d,a.useParent)){var q=p.length,r=a.useParent?i(d):d[0].clientHeight;for(f?d.html(b+o):d.text(b).html(d.html()+o),d.attr("data-overflowed","true");q>j;j++){var s=p.pop();if(0===p.length&&(p[0]=s.substring(0,Math.min(s.length,5))),f?d.html(p.join(m)+o):d.text(p.join(m)).html(d.html()+o),(a.useParent?d.parent()[0]:d[0]).scrollHeighta[0].clientHeight||a[0].scrollWidth>a[0].clientWidth}function l(){(g.lastWindowResizeWidth!=window.innerWidth||g.lastWindowResizeHeight!=window.innerHeight)&&j(),g.lastWindowResizeWidth=window.innerWidth,g.lastWindowResizeHeight=window.innerHeight}function m(){f.add(l)}g.lastWindowResizeTime=0,g.lastWindowResizeWidth=0,g.lastWindowResizeHeight=0,g.lastWindowTimeoutEvent=null,g.isTruncated=!1,a.$watch("ngShow",function(){e.add(j)}),a.$watch("ngBind",function(){e.add(j)}),a.$watch("ngBindHtml",function(){e.add(j)}),a.$watch("ellipsisAppend",function(){j()}),a.$watch(function(){return 0!=d[0].offsetWidth&&0!=d[0].offsetHeight},function(){f.add(j)});var n=a.$on("dibari:refresh-ellipsis",function(){e.add(j)}),o=angular.element(b);o.bind("resize",m),a.$on("$destroy",function(){o.unbind("resize",m),e.remove(j),f.remove(l),n&&(n(),n=null)})}}}}]); \ No newline at end of file +angular.module("dibari.angular-ellipsis",[]).directive("ellipsis",["$timeout","$window","$sce",function(a,b,c){var d=function(b){var c=null,d=[];this.remove=function(b){-1!==d.indexOf(b)&&(d.splice(d.indexOf(b),1),0===d.length&&(a.cancel(c),c=null))},this.add=function(e){-1===d.indexOf(e)&&d.push(e),c||(c=a(function(){var a=d.slice();c=null,d.length=0,a.forEach(function(a){a()})},b))}},e=new d(0),f=new d(75);return{restrict:"A",scope:{ngShow:"=",ngBind:"=",ngBindHtml:"=",ellipsisAppend:"@",ellipsisAppendClick:"&",ellipsisSymbol:"@",ellipsisSeparator:"@",useParent:"@",ellipsisSeparatorReg:"=",ellipsisFallbackFontSize:"@",dataOverflowed:"=ellipsisDataOverflowed"},compile:function(a,d,g){return function(a,d,g){function h(a){return"undefined"!=typeof a}function i(a){var b=0;return angular.forEach(a.parent().children(),function(c){c!=a[0]&&(b+=c.clientHeight)}),a.parent()[0].clientHeight-b}function j(){var b=a.ngBind||a.ngBindHtml,e=!1;if(c.isEnabled()&&angular.isObject(b)&&c.getTrustedHtml(b)&&(e=!0,b=c.getTrustedHtml(b)),b){var f=!a.ngBind&&!!a.ngBindHtml,j=0,l="undefined"!=typeof g.ellipsisSymbol?g.ellipsisSymbol:"…",m="undefined"!=typeof a.ellipsisSeparator?g.ellipsisSeparator:" ",n="undefined"!=typeof a.ellipsisSeparatorReg?a.ellipsisSeparatorReg:!1,o="undefined"!=typeof a.ellipsisAppend&&""!==a.ellipsisAppend?l+""+a.ellipsisAppend+"":l,p=n?b.match(n):b.split(m);if(g.isTruncated=!1,f?d.html(b):d.text(b),h(g.ellipsisFallbackFontSize)&&k(d)&&d.css("font-size",g.ellipsisFallbackFontSize),k(d,a.useParent)){var q=p.length,r=a.useParent?i(d):d[0].clientHeight;for(f?d.html(b+o):d.text(b).html(d.html()+o),a.dataOverflowed=!0,d.attr("data-overflowed","true");q>j;j++){var s=p.pop();if(0===p.length&&(p[0]=s.substring(0,Math.min(s.length,5))),f?d.html(p.join(m)+o):d.text(p.join(m)).html(d.html()+o),(a.useParent?d.parent()[0]:d[0]).scrollHeighta[0].clientHeight||a[0].scrollWidth>a[0].clientWidth}function l(){(g.lastWindowResizeWidth!=window.innerWidth||g.lastWindowResizeHeight!=window.innerHeight)&&j(),g.lastWindowResizeWidth=window.innerWidth,g.lastWindowResizeHeight=window.innerHeight}function m(){f.add(l)}g.lastWindowResizeTime=0,g.lastWindowResizeWidth=0,g.lastWindowResizeHeight=0,g.lastWindowTimeoutEvent=null,g.isTruncated=!1,a.$watch("ngShow",function(){e.add(j)}),a.$watch("ngBind",function(){e.add(j)}),a.$watch("ngBindHtml",function(){e.add(j)}),a.$watch("ellipsisAppend",function(){j()}),a.$watch(function(){return 0!=d[0].offsetWidth&&0!=d[0].offsetHeight},function(){f.add(j)});var n=a.$on("dibari:refresh-ellipsis",function(){e.add(j)}),o=angular.element(b);o.bind("resize",m),a.$on("$destroy",function(){o.unbind("resize",m),e.remove(j),f.remove(l),n&&(n(),n=null)})}}}}]); \ No newline at end of file