dibari / angular-ellipsis Goto Github PK

Angular directive to truncate multi-line text to visible height

License: MIT License

JavaScript 98.68% HTML 1.32%

angular-ellipsis's Introduction

angular-ellipsis

Angular directive to truncate multi-line text to visible height. The end of the visible text is appended with an ellipsis, optional text, and optional click callback function.

To use, copy src/angular-ellipsis.js to your project and rename the included module (which is set to 'exampleApp' at the bottom) to your own module.

Or, to install via Bower:

bower install angular-ellipsis

and then inject into your app:

var myApp = angular.module('myApp', ['dibari.angular-ellipsis']);

DEMO

Angular Ellipsis Directive demo page

FEATURES

Truncates multi-line text (no HTML)
On any window resize, truncation and ellipsis will be recalcuated
Text will only be truncated if there is overflow, otherwise it will display as normal
Custom ellipsis append text will live-update (if a $scope variable is used)

BASIC USAGE

Select an HTML element that has a CSS height or max-height value set (max-height will take precedence)
Use ng-bind on the element to include text to truncate
Add the ellipsis/data-ellipsis directive to the element
Text will be truncated to visible area, and an ellipsis (...) will be added to the end

Simple example

OPTIONS

Custom Ellipsis Symbol
A custom ellipsis string can be used. If this value is set, it will replace the default ellipsis (...). This value will be appended at the end of the truncated text, before a custom append (if included). Example:


Custom Append Text
You can include a custom string after the ellipsis by setting the attribute ellipsis-append/data-ellipsis-append on the element. This value may be bound to a scope variable instead of just being a static string. If a scope value is used, the direcive will update the appended text on its update. Only text may be used, not HTML. When rendered in the truncated text, this custom string wrapped in a span tag, and can be styled through CSS as usual. Examples:


Custom Append Text Click Function
If a custom append string is included, a function can be executed on the resulting span tag's click. The function must exist within the controller's scope. If an ellipsis append string is not included, the function will not execute (since it has no element to bind to). Example:

Custom String Separator 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.

To make the plugin work in non-modern versions of Internet Explorer, be sure to review the Angular Internet Explorer Compatibility page. This StackOverflow question regarding the Angular $sce service addresses an issue with the ng-bind directive.
One suggested use case for < IE 8 implementation is to maintain an additional non-truncated element with overflow set to hidden. Using IE conditional CSS, the truncated element can be displayed to IE 8 and above, and the non-truncated version to < IE 8.

TODO's

Add option to execute passed function on append click
Basic option to use a show more/show less functionality for append

angular-ellipsis's People

Contributors

Stargazers

Watchers

Forkers

pchoi mohlsen whatadewitt lordonix gildorwang weconnect epeleg lukas1994 bravewick vanbergcamp juanolalla jumpjam antecime jmagder cb-talent-development fiznool huangjian ajspera marcodejong jetfault danghoa1 bregnholm beckyconning celle886 bob76828 mamluka catalant-backup lawriestewart sborysiewicz tzafrir nicolxiang mutualmobile cooljith91112 rokerkony kherp harunsmrkovic edtechfoundry schonert willyboy guibot17 reillydavis leohenning rschick sod rgksugan aklokov-html amri pascalbaljet loganfreeman feiyang1 educarlabs vsubbotskyy beelphegor gstoyanov appirio-tech darocha t-evans youscience mobichel yuff stephan-klein chicuonght sveer meeplagm btwelch hanneshentzschel bchiru004 rumentech velinsky ninofloris bryansummers14 translucentcomputing winnietong wakeinc danielstarmach alonbardavid pixnlove storuky sbatezat shaibo10 playbuzz pkerspe sindhushankar fabioaarito konstantinmilovanovdsr sergeykurdyukov dicbrus andrew-aladev nicholassinggih serhiipohuts kjng davidramosweb

angular-ellipsis's Issues

bower version is not the latest, doesn't include dibari:refresh-ellipsis

I tried using this functionality from the bower version and it seems like it's not there yet, when I clone the repository from here it works, but only in the not-minified version

Use of deprecated "bind"

I noticed that I was getting console errors related to "$win.bind('resize', onResize);". "bind" is undefined.

A few issues with this:

Requires full version of jQuery
this dependency is not documented
"bind" is deprecated: http://api.jquery.com/bind

Recommend updating to "on". And, if possible, remove dependency on full jQuery.

Publish new version to bower

It would be great to have a new version published to bower as there are a few updates (specifically the refresh update from January) that I would like to use but I would rather not point at master and instead use a solidified version.

in some cases there will be just ... and no strings left

there is a condition that, just assume that I only have several extreme long words, and each of the word isOverflowed in space I give, thus there will be only ...(ellipsisSymbol) left for my whole string.
maybe in this condition we can use substring(maybe 5 characters) of one word and then add ... instead of just leave ...?

How to stop the flashing of full text

In my application I have only 6 angular-ellipses instances on my page. However when my data loads from the service and the ng-bind gets filled, All of them show the full text for like 1/3 second.

How do I deal with that? Ng-show won't work because of the flashing only appears when the binding is loaded.

XSS vulnerability

Since Angular Ellipsis uses the actual value of ngBind attribute and then simply adds it to DOM using element.html(), this creates an XSS vulnerability as string can contain can script tags and is inserted as is into DOM. This can be confusing, as developers count on ngBind being sanitized using SCE service by default.

IMO, since ngBind is utilized the way it is, there needs to be a check in code to see if ngSanitized is present and if it is - utilize it.

Console error if ng-bind has null data

if I bind a null value to an ellipses element, a console error is thrown:

TypeError: Cannot read property 'split' of null
    at o (angular-ellipsis.js:40)

$scope.something = null;

<div ellipsis ng-bind="something"></div>

ng-repeat with 300+ items?

Is there an upper limit to the amount of truncations this directive can perform? I have 300+ right now and it is taking a few seconds.

Please advise.

Performance is really bad at ng-repeat.

There is the worst performance if I implement it in ng-repeat..
Any help would be more appreciated.

Action assigned to data-ellipsis-append-click will be called more than one time

Action assigned to data-ellipsis-append-click will be called more than one time if the element has nested span elements.

<p style="height: 40px" data-ellipsis data-ellipsis-append="more" data-ellipsis-append-click="<SomeAction>" ng-bind-html="<SomeExpression>">
<p>

Suppose that the bound html has span elements.. Now the Action will be called many times as the selector that binds the "ellipsis-append" click event tries to find a "span" (ellipsis-append span) assuming that this is the only span available inside the element.

Can you dynamically turn on/off data-ellipsis?

Hi,

I was wondering if there is any way to tell dynamically if the directive is actually doing the 'ellipsis'-ing? I have a situation where I would like to be able to turn the ellipsis on or off.

In ui-bootstrap's popover button there is an option on the directive called popover-is-open, which allows you to open/close the thing based on a value. Is there an easy way to do the same with data-ellipsis?

Tom

Integration of ng-bind with ng-repeat.

How to make the ng-bind to work with ng-repeat in order to include the truncate text in looping.

Short text is not shown

look at the following example:
for short text like "text" i get only "read more"

this is the html

 <ul>
            <li ng-repeat="insight in data.insights | limitTo:5 track by $index" ><i style="margin-bottom: 3px;" class="icon icons-less-info"></i>
              <p class="insight-text" data-ng-bind="insight.insight" data-ellipsis data-ellipsis-append="read more"
                   ng-click="getFullInsights({insightData:insight})"></p>
            </li>
        </ul>

the css has min-width:1024px;

Use Tags for versioning

Would be great if you could use tags in the commits for versioning.

Error with minified version

If we minify the current code, we got an error:
Error: [$injector:unpr] Unknown provider: aProvider <- a <- ellipsisDirective

To fix this, please use the recommanded syntax (a note on minification):
Before:
app.directive('ellipsis', function ($timeout, $window) {
After:
app.directive('ellipsis', ['$timeout', '$window', function($timeout, $window) {

Truncate long words

Hi, thanks for you work! I notice that there is an issue if a word is too long... the plugin doesn't truncate words, for example if my text is:

abcdefghijklmnopqrstuvwxyz123456789abcdefghijklmnopqrstuvwxyz123456789abcdefghijklmnopqrstuvwxyz123456789abcdefghijklmnopqrstuvwxyz123456789Four score

I can see only:

abcdefghijklmnopqrstuvwxyz123456789abcdefghijklmnopqrstuvwxyz123456789abcdefghijklmnopqrstuvwxyz123456789abcdefghijklmnopqrstuvw

There is an example with demo script:

Any ideas for a solution? Thanks again for the plugin!

Alessandro

please publish to npm registry

there is allready a package called angular-ellipsis on npm, which is a fork of this project... however, its an old version and doesnt seem to be maintained

as a browserify/webpack user i manage my dependencies via npm and try not to use bower

issue - edited to be empty - closed

6 second delay

For some reason, when I use this directive my pages are very slow. Not sure what could be the issue - I'm running it with HTML in the binding, perhaps that is it....

Malfunctioning when resized using uib-tab

I am using angular-ellipsis on one tab of a UI Bootstrap uib-tab.

When I click on the other tab, and resize that tab, and then click back on the tab with the angular-ellipsis elements, they then show their full text instead of the truncated ellipsis text. If you then resize the window on this tab, it then does cause the ellipsis to function properly.

Show all

How can I show all text on click please ? I tried to change the height of element, but I think it needs some 'restart' after then. Can you help me ? Thankx

How to use this plugin in angular 2?

I need to use this in angular 2.
Is there a way to use it in angluar 2?

ng-bind XSS Vulnerability

The addition of ng-bind-html has also reverted the XSS fix for ng-bind. ng-bind should escape HTML as it did before.

issue on tab navigation

Hello,

I'm having problem using angular-ellipsis on a tab navigation where elements called by the tabs are hidden or shown with ng-if.
It seems (but I'm not sure) that the directive works only for elements that are already on DOM.

Any ideas?
Thanks in advance and a star for your good work.

Daniele

Which is better? angular-ellipsis or ng-text-truncate?

ng-text-truncate
https://github.com/lorenooliveira/ng-text-truncate

Demo
https://rawgit.com/lorenooliveira/ng-text-truncate/master/demo1.html

Why is angular-ellipsis more active and more popular?

Add ability to have a fallback font-size

The fallback font-size will be applied before a determination is made to ellipsis the text.

I will submit a pull request with this functionality

Facing issue with single line text ... ellipsis

I added data-ellipsis directive to spans and i am getting ellipsis and working fine when the span is having height which renders only two lines, the issue is with single line when there enough width also i am getting ellipsis after the first word

Minified version not working

Hi,

the minified version (both the provided one as well as a self-minified one) do not work. (in Angluar v1.4.3).
There is no error message and the directive is properly found and entered, but text does not get shortened. The non-minified version works just fine.

Cannot install using bower

When I do
bower install after including the following in bower.json
"angular-ellipsis": "0.1.0"

It gives back the error as
bower angular-ellipsis#0.1.0 ENORESTARGET No tag found that was able to satisfy 0.1.0

Additional error details:
No versions found in https://github.com/dibari/angular-ellipsis.git

Is there workaround for install?

Trimming/Ellipsis on Chinese, Japanese, etc... Characters

Hi there,

Loving the current fuctionality so far. I've ran into an interesting problem that I can't seem to properly isolate.

When using angular-ellipsis within a project I am working on it works great as intended with normal languages however, when I translate something from English to Chinese (pre-compiled strings) the DOM correctly updates, digests and outputs as I would expect but the ellipsis seems to trim too much. Chrome seems to be the culprate.

The content should fill the div like so:

This is the truncate issue:

Thanks

tag stable version

Could you please tag a stable version so that we can use npm to manage our dependency on this module? c.f.

http://stackoverflow.com/questions/14187956/npm-install-from-git-in-a-specific-version
videogular/bower-videogular#7 (comment)

Does not support hidden elements

Hi,

I have some elements in ng-show/ng-hide until the ajax call completes.
For these elements ellipsis does not work since element.is(':visible') returns false.
I thought about putting some kind of $(element).on('show', function() { to run buildEllipsis() in this case but so far haven't gotten it to work.

Thanks

Server-side rendering issue with Angular Universal

Angular version: 9.1.4 (Ivy enabled)

When running in SSR mode (on 2.2.2 version), an error is thrown (only on server-side render):
TypeError: this.removeWindowResizeListener is not a function

It worked fine on v2.1.2.

Using element.find without jQuery doesn't work correctly

This issue was introduced by the changes in PR #69 on line 156.

The find method is used to locate the span for the custom click action. However, as mentioned in the AngularJS documentation, the find method in jqLite is limited to only tag names, and therefore this doesn't work anymore for apps that don't load the full jQuery.

A way to fix this would be to use querySelector:

angular.element(element[0].querySelector('span.angular-ellipsis-append'))
    .bind(...

Does it work with a single line? Like LongfilenameABC...pdf

If I have the file extension (.pdf in this case) as a scope variable and want the file name to shrink and have ellipsis - is this possible?

On your live example I tried setting your max-height to 25 instead of 75 (using chrome dev tools) and it did not work. would it work on single line text if I tried?

Is this repo still maintained

Is this repo actively maintained? If not I'll happily fork and maintain a new version. Noticed there are some impressive performance improvements pull requests that ought to get merged. Would you mind me forking and creating a new bower package based on your work? Or even better to add me as an admin of this repo.

Use directive in span

Hello,
I have noticed the directive is working when placed onto

elements. So I have a few questions :

Is there a reason why it is not working on other elements such as ?
and could it be possible to make it with the actual code base ?

Thanks in advance for your help

Not supported in Firefox ?

Hi, I have a strange behaviour with your angular script, when used in Firefox.
Here is how it looks in chrome :

And here is how it looks in Firefox :

Are you aware of any cross-browsers issues ?

Thank you.

Possible to use width instead of height?

This directive works with the height, but it would be useful for me only if it worked with width. Is this possible?

jasmine should be in devDependencies

otherwise build tools pull it into the build, and it breaks stuff.

since this hasnt been updated in 2 years, I am forking it here:

https://github.com/HourlyNerd/angular-ellipsis
and registering it on bower as hn-angular-ellipsis

Content with HTML tag not working..

@dibari
i have content in which there are p, pre, span, ul li and other html tag. Which i am assign from the controller using ng-bind-html. In this case full content not is visible.

$scope.paragraphText = "Four score and seven years ago our <pre>fathers brought forth on this continent</pre>, a new nation, conceived in Liberty, <a href='http://google.com'>and</a> dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live."

Output:-
With HTML Tag--

Without HTML Tag--

Make max-height work for truncation

Currently, the element must have a height attribute set. Many times a max-height attribute would be better used instead. Make max-height work and have precedence over height (if height is set)

Incorrect initial 'element.scrollHeight' on iOS devices

In iOS there seems to be an issue with elements not having the correct element.scrollHeight when the buildEllipsis() is fired. The plugin seems to work perfectly on all desktop browsers.

The scenario I'm facing is that single line titles with a 2 line ellipsis, defined by max-height, are showing just '...' and not 'The title' until the buildEllipsis is fired again on the window resize and then the correct title appears.

The problem seems to be that thisElement[0].scrollHeight in the isOverflowed function seems to be too big at first and then later is reduced to the correct height.

I am currently getting around this issue by using the jQuery load function, but obviously this is not a desirable long-term fix.

The scenario simplified would be...

<!DOCTYPE html>
<html>
     <head>
          <style>
              h3 {
                   font-size: 24px;
                   line-height: 28px;
                   max-height: 56px;
              }
          </style>
     </head>

    <body>
        <h3 data-ng-bind="something" data-ellipsis></div> <!--Where $scope.something = 'A title'-->
    </body>
</html>