diff --git a/README.md b/README.md index c6c8c77..ade94dd 100644 --- a/README.md +++ b/README.md @@ -3,9 +3,10 @@ ng-text-truncate 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. -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 *csTruncateToggleText*. +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*. -[DEMO](https://rawgit.com/lorenooliveira/ng-text-truncate/master/index.html) +[DEMO 1 (Most of the use cases)](https://rawgit.com/lorenooliveira/ng-text-truncate/master/demo1.html) +[DEMO 2 (Custom CSS)](https://rawgit.com/lorenooliveira/ng-text-truncate/master/demo2.html) Usage Instructions ================== @@ -41,9 +42,8 @@ $scope.longText = "Lorem ipsum dolor sit amet, and a possibly long remaining tex 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. ```html -

+

``` 5. And...... that's all folks @@ -51,6 +51,29 @@ Use the *cs-truncate* attribute to pass the variable holding your text. In the * Now open your HTML and everything should be working as intended. +6. Ok, but, what are all this directive's features? +--------------------------------------------------- + +By using this directive you can: + +* Truncate your text based on the number of chars to be displayed; +* Truncate your text based on the number of words to be displayed; +* Toggle the hidden part of truncated text visible or not; +* Customize the text of the toggling elements (the defaults are "More" and "Less"); +* If you want/need, you can just truncate the text (i.e., ommit the toggling elements); +* Take a ride in Bootstrap's styles for the toggling elements; +* 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). + +Good question. Take a look at our two demos for a complete list of features and live examples of how to use each of them. + +7. Nice. And how to use them? +----------------------------- + +Take a look at our live demos. There we have clear examples about using each of our features. + +[DEMO 1 (Most of the use cases)](https://rawgit.com/lorenooliveira/ng-text-truncate/master/demo1.html) +[DEMO 2 (Custom CSS)](https://rawgit.com/lorenooliveira/ng-text-truncate/master/demo2.html) + Future Improvements =================== diff --git a/index.html b/demo1.html similarity index 84% rename from index.html rename to demo1.html index fb3911f..6fd2511 100644 --- a/index.html +++ b/demo1.html @@ -56,44 +56,42 @@

Word-based truncation

-

-

Custom CSS

- -

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

-
.ngTruncateToggleText {
-    color: red,
-    margin: 1px
-}
-

-

Custom toggling elements

-

You can set your own labels for the toggling elements.

+

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

<p ng-text-truncate="longText"
    ng-tt-chars-threshold="40"
    ng-tt-more-label="Show"
    ng-tt-less-label="Hide"></p>
+ +
+
+

+
+

Text truncation without toggling

-

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

-
<p ng-text-truncate="longText"
-   ng-tt-chars-threshold="40"
-   ng-tt-no-toggling></p>
-

Or...

+

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

<p ng-text-truncate="longText"
    ng-tt-words-threshold="15"
    ng-tt-no-toggling></p>
-

- +

The previous statement produces this:

+
+
+

+
+
+

diff --git a/demo2.html b/demo2.html new file mode 100644 index 0000000..7fb42b4 --- /dev/null +++ b/demo2.html @@ -0,0 +1,66 @@ + + + + + Document + + + + + +
+

+

Original text

+ +
$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.";
+

+ +

+

Custom CSS

+ +

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

+
.ngTruncateToggleText {
+    color: red;
+    font-size: 90%;
+    font-style: italic;
+}
+ +

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

+ +
<p ng-text-truncate="longText"
+   ng-tt-chars-threshold="40"></p>
+ +

...produces this:

+ +
+
+

+
+
+

+
+ + + + + + + + \ No newline at end of file diff --git a/ng-text-truncate.js b/ng-text-truncate.js index a11d74a..7a1ab6b 100644 --- a/ng-text-truncate.js +++ b/ng-text-truncate.js @@ -10,34 +10,36 @@ angular.module( 'ngTextTruncate', [] ) scope: { text: "=ngTextTruncate", charsThreshould: "@ngTtCharsThreshold", - wordsThreshould: "@ngTtWordsThreshold" + wordsThreshould: "@ngTtWordsThreshold", + customMoreLabel: "@ngTtMoreLabel", + customLessLabel: "@ngTtLessLabel" }, controller: function( $scope, $element, $attrs ) { $scope.toggleShow = function() { $scope.open = !$scope.open; }; + + $scope.useToggling = $attrs.ngTtNoToggling === undefined; }, link: function( $scope, $element, $attrs ) { $scope.open = false; - + ValidationServices.failIfWrongThreshouldConfig( $scope.charsThreshould, $scope.wordsThreshould ); var CHARS_THRESHOLD = parseInt( $scope.charsThreshould ); var WORDS_THRESHOLD = parseInt( $scope.wordsThreshould ); if( CHARS_THRESHOLD ) { - console.log( "Truncando pelo numero de caracteres" ); - if( $scope.text && CharBasedTruncation.truncationApplies( $scope.text, CHARS_THRESHOLD ) ) { - CharBasedTruncation.applyTruncation( $scope.text, CHARS_THRESHOLD, $scope, $element ); + if( $scope.text && CharBasedTruncation.truncationApplies( $scope, CHARS_THRESHOLD ) ) { + CharBasedTruncation.applyTruncation( CHARS_THRESHOLD, $scope, $element ); } else { $element.append( $scope.text ); } } else { - console.log( "Truncando pelo numero de palavras" ); - if( $scope.text && WordBasedTruncation.truncationApplies( $scope.text, WORDS_THRESHOLD ) ) { - WordBasedTruncation.applyTruncation( $scope.text, WORDS_THRESHOLD, $scope, $element ); + if( $scope.text && WordBasedTruncation.truncationApplies( $scope, WORDS_THRESHOLD ) ) { + WordBasedTruncation.applyTruncation( WORDS_THRESHOLD, $scope, $element ); } else { $element.append( $scope.text ); @@ -64,29 +66,35 @@ angular.module( 'ngTextTruncate', [] ) .factory( "CharBasedTruncation", function( $compile ) { return { - truncationApplies: function( originalText, threshould ) { - return originalText.length > threshould; + truncationApplies: function( $scope, threshould ) { + return $scope.text.length > threshould; }, - applyTruncation: function( originalText, threshould, $scope, $element ) { - var el = angular.element( "" + - originalText.substr( 0, threshould ) + - "..." + - "" + - " More" + - "" + - "" + - originalText.substring( threshould ) + - "" + - " Less" + + applyTruncation: function( threshould, $scope, $element ) { + if( $scope.useToggling ) { + var el = angular.element( "" + + $scope.text.substr( 0, threshould ) + + "..." + + "" + + " " + ($scope.customMoreLabel ? $scope.customMoreLabel : "More") + "" + - "" + - "" ); - $compile( el )( $scope ); - $element.append( el ); + "" + + $scope.text.substring( threshould ) + + "" + + " " + ($scope.customLessLabel ? $scope.customLessLabel : "Less") + + "" + + "" + + "" ); + $compile( el )( $scope ); + $element.append( el ); + + } else { + $element.append( $scope.text.substr( 0, threshould ) + "..." ); + + } } } }) @@ -95,30 +103,35 @@ angular.module( 'ngTextTruncate', [] ) .factory( "WordBasedTruncation", function( $compile ) { return { - truncationApplies: function( originalText, threshould ) { - return originalText.split( " " ).length > threshould; + truncationApplies: function( $scope, threshould ) { + return $scope.text.split( " " ).length > threshould; }, - applyTruncation: function( originalText, threshould, $scope, $element ) { - var splitText = originalText.split( " " ); - var el = angular.element( "" + - splitText.slice( 0, threshould ).join( " " ) + " " + - "..." + - "" + - " More" + - "" + - "" + - splitText.slice( threshould, splitText.length ).join( " " ) + - "" + - " Less" + + applyTruncation: function( threshould, $scope, $element ) { + var splitText = $scope.text.split( " " ); + if( $scope.useToggling ) { + var el = angular.element( "" + + splitText.slice( 0, threshould ).join( " " ) + " " + + "..." + + "" + + " More" + + "" + + "" + + splitText.slice( threshould, splitText.length ).join( " " ) + + "" + + " Less" + + "" + "" + - "" + - "" ); - $compile( el )( $scope ); - $element.append( el ); + "" ); + $compile( el )( $scope ); + $element.append( el ); + + } else { + $element.append( splitText.slice( 0, threshould ).join( " " ) + "..." ); + } } } });