├── .jshintrc ├── LICENSE ├── README.md ├── demo1.html ├── demo2.html └── ng-text-truncate.js /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "globalstrict": true, 3 | "globals": { 4 | "angular": false 5 | } 6 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Loreno Oliveira 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ng-text-truncate 2 | ================ 3 | 4 | This is a simple, but fully functional, directive for truncating text in [angularjs](https://angularjs.org/) apps. This directive not only truncates your text, but also permits toggling the hidden part of the truncated text. 5 | 6 | If you are using *ng-text-truncate* in a project that already uses [Twitter Boostrap](http://getbootstrap.com/), then the toggling elements (i.e. textual links with the texts "More" and "Less") shall inherit Bootstrap's styles for textual links. If you are not using Twitter Boostrap or if you want to customize some aspect of the toggling elements, then you can write your own CSS for the class *ngTruncateToggleText*. 7 | 8 | [DEMO 1 (Most of the use cases)](https://rawgit.com/lorenooliveira/ng-text-truncate/master/demo1.html) 9 | 10 | [DEMO 2 (Custom CSS)](https://rawgit.com/lorenooliveira/ng-text-truncate/master/demo2.html) 11 | 12 | Usage Instructions 13 | ================== 14 | 15 | 1. Include the JS file 16 | ---------------------- 17 | 18 | ```html 19 | 20 | ... 21 | 22 | ``` 23 | 24 | As usual, include this file after the inclusion of the *angular.min.js* file. 25 | 26 | 2. Import *ng-text-truncate* in your app 27 | -------------------------------------- 28 | 29 | ```javascript 30 | angular.module( "TestApp", [ "ngTextTruncate" ] ); 31 | ``` 32 | 33 | 3. Assign a text to some variable 34 | --------------------------------- 35 | 36 | ```javascript 37 | $scope.longText = "Lorem ipsum dolor sit amet, and a possibly long remaining text."; 38 | ``` 39 | 40 | 4. Apply the directive to the element where you intend to put your text 41 | ----------------------------------------------------------------------- 42 | 43 | Use the *cs-truncate* attribute to pass the variable holding your text. In the *cs-truncate-threshould* attribute you should indicate the maximum number of chars to be displayed before truncation. That is, any string bigger than *cs-truncate-threshould* will be truncated. 44 | 45 | ```html 46 |

48 | ``` 49 | 50 | 5. And...... that's all folks 51 | ----------------------------- 52 | 53 | Now open your HTML and everything should be working as intended. 54 | 55 | 6. Ok, but, what are all this directive's features? 56 | --------------------------------------------------- 57 | 58 | By using this directive you can: 59 | 60 | * Truncate your text based on the number of chars to be displayed; 61 | * Truncate your text based on the number of words to be displayed; 62 | * Toggle the hidden part of truncated text visible or not; 63 | * Customize the text of the toggling elements (the defaults are "More" and "Less"); 64 | * If you want/need, you can just truncate the text (i.e., ommit the toggling elements); 65 | * Take a ride in Bootstrap's styles for the toggling elements; 66 | * Customize the appearance of the toggling elements by means of a custom CSS class (for the case you don't like Bootstrap's defaults or if you are not using Bootstrap). 67 | 68 | 7. Nice. And how to use them? 69 | ----------------------------- 70 | 71 | Take a look at our live demos. There we have clear examples about using each of our features. 72 | 73 | [DEMO 1 (Most of the use cases)](https://rawgit.com/lorenooliveira/ng-text-truncate/master/demo1.html) 74 | 75 | [DEMO 2 (Custom CSS)](https://rawgit.com/lorenooliveira/ng-text-truncate/master/demo2.html) 76 | 77 | Future Improvements 78 | =================== 79 | 80 | Get in touch if you have ideas for improvements. Bug reports and pull requests are welcome. -------------------------------------------------------------------------------- /demo1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 13 | 14 | 15 |
16 |

17 |

Original text

18 | 19 | 
$scope.longText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla semper augue vel scelerisque egestas. Praesent odio lacus, porta vitae nisl a, semper tempor elit. Etiam fringilla ut nisl non dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis eros euismod, elementum tortor ut, sagittis felis. Nulla lectus ante, eleifend non felis pharetra, porta aliquet urna. Curabitur nec elit sit amet tortor accumsan volutpat sed vitae ante. Cras semper consequat nunc, in tincidunt dolor scelerisque eget. Morbi volutpat quis est bibendum aliquet. Sed euismod neque nisl, congue fermentum eros sagittis sit amet. Nulla at tincidunt nibh.";
20 |

21 | 22 |

23 |

Char-based truncation

24 | 25 |

Use the ng-text-truncate directive along with the ng-tt-chars-threshould attribute for truncating your text according to the number of chars in the string.

26 | 27 |

So, this block...

28 | 
<p ng-text-truncate="longText"
 29 |    ng-tt-chars-threshold="40"></p>
30 | 31 |

...produces this:

32 | 33 |
34 |
35 |

37 |
38 |
39 |

40 | 41 |

42 |

Word-based truncation

43 | 44 |

Similarly the last example, use the ng-text-truncate directive along with the ng-tt-words-threshould attribute for truncating your text based on the number of words in the string.

45 |

So, this block...

46 | 
<p ng-text-truncate="longText"
 47 |    ng-tt-words-threshold="15"></p>
48 | 49 |

...produces this:

50 | 51 |
52 |
53 |

55 |
56 |
57 |

58 | 59 |

60 |

Custom toggling elements

61 | 62 |

You can set your own labels for the toggling elements using the ng-tt-more-label and ng-tt-less-label attributes.

63 | 
<p ng-text-truncate="longText"
 64 |    ng-tt-chars-threshold="40"
 65 |    ng-tt-more-label="Show"
 66 |    ng-tt-less-label="Hide"></p>
67 | 68 |
69 |
70 |

74 |
75 |
76 |

77 | 78 |

79 |

Text truncation without toggling

80 | 81 |

You can also truncate the text and ommit the toggling elements by addind the attribute ng-tt-no-toggling.

82 | 
<p ng-text-truncate="longText"
 83 |    ng-tt-words-threshold="15"
 84 |    ng-tt-no-toggling></p>
85 | 86 |

The previous statement produces this:

87 |
88 |
89 |

92 |
93 |
94 |

95 |
96 | 97 | 98 | 99 | 100 | 101 | 108 | 109 | -------------------------------------------------------------------------------- /demo2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Document 6 | 7 | 8 | 19 | 20 | 21 |
22 |

23 |

Original text

24 | 25 | 
$scope.longText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla semper augue vel scelerisque egestas. Praesent odio lacus, porta vitae nisl a, semper tempor elit. Etiam fringilla ut nisl non dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis eros euismod, elementum tortor ut, sagittis felis. Nulla lectus ante, eleifend non felis pharetra, porta aliquet urna. Curabitur nec elit sit amet tortor accumsan volutpat sed vitae ante. Cras semper consequat nunc, in tincidunt dolor scelerisque eget. Morbi volutpat quis est bibendum aliquet. Sed euismod neque nisl, congue fermentum eros sagittis sit amet. Nulla at tincidunt nibh.";
26 |

27 | 28 |

29 |

Custom CSS

30 | 31 |

The styles defined in the ngTruncateToggleText class are applied to both toggling elements.

32 | 
.ngTruncateToggleText {
33 |     color: red;
34 |     font-size: 90%;
35 |     font-style: italic;
36 | }
37 | 38 |

So, the previous definitions along with de following statement...

39 | 40 | 
<p ng-text-truncate="longText"
41 |    ng-tt-chars-threshold="40"></p>
42 | 43 |

...produces this:

44 | 45 |
46 |
47 |

49 |
50 |
51 |

52 |
53 | 54 | 55 | 56 | 57 | 58 | 65 | 66 | -------------------------------------------------------------------------------- /ng-text-truncate.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 'use strict'; 3 | 4 | 5 | angular.module( 'ngTextTruncate', [] ) 6 | 7 | 8 | .directive( "ngTextTruncate", [ "$compile", "ValidationServices", "CharBasedTruncation", "WordBasedTruncation", 9 | function( $compile, ValidationServices, CharBasedTruncation, WordBasedTruncation ) { 10 | return { 11 | restrict: "A", 12 | scope: { 13 | text: "=ngTextTruncate", 14 | charsThreshould: "@ngTtCharsThreshold", 15 | wordsThreshould: "@ngTtWordsThreshold", 16 | customMoreLabel: "@ngTtMoreLabel", 17 | customLessLabel: "@ngTtLessLabel" 18 | }, 19 | controller: function( $scope, $element, $attrs ) { 20 | $scope.toggleShow = function() { 21 | $scope.open = !$scope.open; 22 | }; 23 | 24 | $scope.useToggling = $attrs.ngTtNoToggling === undefined; 25 | }, 26 | link: function( $scope, $element, $attrs ) { 27 | $scope.open = false; 28 | 29 | ValidationServices.failIfWrongThreshouldConfig( $scope.charsThreshould, $scope.wordsThreshould ); 30 | 31 | var CHARS_THRESHOLD = parseInt( $scope.charsThreshould ); 32 | var WORDS_THRESHOLD = parseInt( $scope.wordsThreshould ); 33 | 34 | $scope.$watch( "text", function() { 35 | $element.empty(); 36 | 37 | if( CHARS_THRESHOLD ) { 38 | if( $scope.text && CharBasedTruncation.truncationApplies( $scope, CHARS_THRESHOLD ) ) { 39 | CharBasedTruncation.applyTruncation( CHARS_THRESHOLD, $scope, $element ); 40 | 41 | } else { 42 | $element.append( $scope.text ); 43 | } 44 | 45 | } else { 46 | 47 | if( $scope.text && WordBasedTruncation.truncationApplies( $scope, WORDS_THRESHOLD ) ) { 48 | WordBasedTruncation.applyTruncation( WORDS_THRESHOLD, $scope, $element ); 49 | 50 | } else { 51 | $element.append( $scope.text ); 52 | } 53 | 54 | } 55 | } ); 56 | } 57 | }; 58 | }] ) 59 | 60 | 61 | 62 | .factory( "ValidationServices", function() { 63 | return { 64 | failIfWrongThreshouldConfig: function( firstThreshould, secondThreshould ) { 65 | if( (! firstThreshould && ! secondThreshould) || (firstThreshould && secondThreshould) ) { 66 | throw "You must specify one, and only one, type of threshould (chars or words)"; 67 | } 68 | } 69 | }; 70 | }) 71 | 72 | 73 | 74 | .factory( "CharBasedTruncation", [ "$compile", function( $compile ) { 75 | return { 76 | truncationApplies: function( $scope, threshould ) { 77 | return $scope.text.length > threshould; 78 | }, 79 | 80 | applyTruncation: function( threshould, $scope, $element ) { 81 | if( $scope.useToggling ) { 82 | var el = angular.element( "" + 83 | $scope.text.substr( 0, threshould ) + 84 | "..." + 85 | "" + 88 | " " + ($scope.customMoreLabel ? $scope.customMoreLabel : "More") + 89 | "" + 90 | "" + 91 | $scope.text.substring( threshould ) + 92 | "" + 94 | " " + ($scope.customLessLabel ? $scope.customLessLabel : "Less") + 95 | "" + 96 | "" + 97 | "" ); 98 | $compile( el )( $scope ); 99 | $element.append( el ); 100 | 101 | } else { 102 | $element.append( $scope.text.substr( 0, threshould ) + "..." ); 103 | 104 | } 105 | } 106 | }; 107 | }]) 108 | 109 | 110 | 111 | .factory( "WordBasedTruncation", [ "$compile", function( $compile ) { 112 | return { 113 | truncationApplies: function( $scope, threshould ) { 114 | return $scope.text.split( " " ).length > threshould; 115 | }, 116 | 117 | applyTruncation: function( threshould, $scope, $element ) { 118 | var splitText = $scope.text.split( " " ); 119 | if( $scope.useToggling ) { 120 | var el = angular.element( "" + 121 | splitText.slice( 0, threshould ).join( " " ) + " " + 122 | "..." + 123 | "" + 126 | " " + ($scope.customMoreLabel ? $scope.customMoreLabel : "More") + 127 | "" + 128 | "" + 129 | splitText.slice( threshould, splitText.length ).join( " " ) + 130 | "" + 132 | " " + ($scope.customLessLabel ? $scope.customLessLabel : "Less") + 133 | "" + 134 | "" + 135 | "" ); 136 | $compile( el )( $scope ); 137 | $element.append( el ); 138 | 139 | } else { 140 | $element.append( splitText.slice( 0, threshould ).join( " " ) + "..." ); 141 | } 142 | } 143 | }; 144 | }]); 145 | 146 | }()); 147 | --------------------------------------------------------------------------------