Skip to content

Commit

Permalink
A bunch of new features. New live demos with more detailed examples.
Browse files Browse the repository at this point in the history
  • Loading branch information
@lorenooliveira
lorenooliveira committed May 7, 2014
1 parent 16bfdca commit f6dafc1
Show file tree
Hide file tree
Showing 4 changed files with 176 additions and 76 deletions.
33 changes: 28 additions & 5 deletions README.md
View file
Expand Up @@ -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
==================
Expand Down Expand Up @@ -41,16 +42,38 @@ $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
<p cs-text-truncate
cs-truncate="longText"
cs-truncate-threshold="40"></p>
<p ng-text-truncate="longText"
ng-tt-chars-threshold="40"></p>
```

5. And...... that's all folks
-----------------------------

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
===================

Expand Down
42 changes: 20 additions & 22 deletions index.html → demo1.html
View file
Expand Up @@ -56,44 +56,42 @@ <h3>Word-based truncation</h3>
</div>
</p>

<p>
<h3>Custom CSS</h3>

<p>The styles defined in the ngTruncateToggleText class are applied to both toggling elements.</p>
<pre class="prettyprint language-css linenums">.ngTruncateToggleText {
color: red,
margin: 1px
}</pre>
</p>

<p>
<h3>Custom toggling elements</h3>

<p>You can set your own labels for the toggling elements.</p>
<p>You can set your own labels for the toggling elements using the <code>ng-tt-more-label</code> and <code>ng-tt-less-label</code> attributes.</p>
<pre class="prettyprint language-html linenums">&lt;p ng-text-truncate="longText"
ng-tt-chars-threshold="40"
ng-tt-more-label="Show"
ng-tt-less-label="Hide"&gt;&lt;/p&gt;</pre>

<div class="panel panel-default">
<div class="panel-body">
<p ng-text-truncate="longText"
ng-tt-chars-threshold="40"
ng-tt-more-label="Show"
ng-tt-less-label="Hide"></p>
</div>
</div>
</p>

<p>
<h3>Text truncation without toggling</h3>

<p>You can also truncate the text and ommit the toggling elements addind the attribute ng-tt-no-toggling</p>
<pre class="prettyprint language-html linenums">&lt;p ng-text-truncate="longText"
ng-tt-chars-threshold="40"
ng-tt-no-toggling&gt;&lt;/p&gt;</pre>
<p>Or...</p>
<p>You can also truncate the text and ommit the toggling elements by addind the attribute <code>ng-tt-no-toggling</code>.</p>
<pre class="prettyprint language-html linenums">&lt;p ng-text-truncate="longText"
ng-tt-words-threshold="15"
ng-tt-no-toggling&gt;&lt;/p&gt;</pre>
</p>

<!--
<p cs-text-truncate
cs-truncate="longText"
cs-truncate-threshold="40"></p>
-->
<p>The previous statement produces this:</p>
<div class="panel panel-default">
<div class="panel-body">
<p ng-text-truncate="longText"
ng-tt-words-threshold="15"
ng-tt-no-toggling></p>
</div>
</div>
</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
Expand Down
66 changes: 66 additions & 0 deletions demo2.html
View file
@@ -0,0 +1,66 @@
<!doctype html>
<html lang="en" ng-app="TestApp">
<head>
<meta charset="UTF-8">
<title>Document</title>

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8
{ list-style-type: decimal !important }

.ngTruncateToggleText {
color: red;
font-size: 90%;
font-style: italic;
}
</style>
</head>
<body ng-controller="TestCtrl">
<div class="container">
<p>
<h3>Original text</h3>

<pre class="prettyprint language-javascript linenums">$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.";</pre>
</p>

<p>
<h3>Custom CSS</h3>

<p>The styles defined in the <code>ngTruncateToggleText</code> class are applied to both toggling elements.</p>
<pre class="prettyprint language-css linenums">.ngTruncateToggleText {
color: red;
font-size: 90%;
font-style: italic;
}</pre>

<p>So, the previous definitions along with de following statement...</p>

<pre class="prettyprint language-html linenums">&lt;p ng-text-truncate="longText"
ng-tt-chars-threshold="40"&gt;&lt;/p&gt;</pre>

<p>...produces this:</p>

<div class="panel panel-default">
<div class="panel-body">
<p ng-text-truncate="longText"
ng-tt-chars-threshold="40"></p>
</div>
</div>
</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<script src="ng-text-truncate.js"></script>

<script type="text/javascript">
var testApp = angular.module( "TestApp", [ "ngTextTruncate" ] );

testApp.controller( "TestCtrl", function( $scope ) {
$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.";
} );
</script>
</body>
</html>
111 changes: 62 additions & 49 deletions ng-text-truncate.js
View file
Expand Up @@ -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 );
Expand All @@ -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( "<span>" +
originalText.substr( 0, threshould ) +
"<span ng-show='!open'>...</span>" +
"<span class='btn-link csTruncateToggleText' " +
"ng-click='toggleShow()'" +
"ng-show='!open'>" +
" More" +
"</span>" +
"<span ng-show='open'>" +
originalText.substring( threshould ) +
"<span class='btn-link csTruncateToggleText'" +
"ng-click='toggleShow()'>" +
" Less" +
applyTruncation: function( threshould, $scope, $element ) {
if( $scope.useToggling ) {
var el = angular.element( "<span>" +
$scope.text.substr( 0, threshould ) +
"<span ng-show='!open'>...</span>" +
"<span class='btn-link ngTruncateToggleText' " +
"ng-click='toggleShow()'" +
"ng-show='!open'>" +
" " + ($scope.customMoreLabel ? $scope.customMoreLabel : "More") +
"</span>" +
"</span>" +
"</span>" );
$compile( el )( $scope );
$element.append( el );
"<span ng-show='open'>" +
$scope.text.substring( threshould ) +
"<span class='btn-link ngTruncateToggleText'" +
"ng-click='toggleShow()'>" +
" " + ($scope.customLessLabel ? $scope.customLessLabel : "Less") +
"</span>" +
"</span>" +
"</span>" );
$compile( el )( $scope );
$element.append( el );

} else {
$element.append( $scope.text.substr( 0, threshould ) + "..." );

}
}
}
})
Expand All @@ -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( "<span>" +
splitText.slice( 0, threshould ).join( " " ) + " " +
"<span ng-show='!open'>...</span>" +
"<span class='btn-link csTruncateToggleText' " +
"ng-click='toggleShow()'" +
"ng-show='!open'>" +
" More" +
"</span>" +
"<span ng-show='open'>" +
splitText.slice( threshould, splitText.length ).join( " " ) +
"<span class='btn-link csTruncateToggleText'" +
"ng-click='toggleShow()'>" +
" Less" +
applyTruncation: function( threshould, $scope, $element ) {
var splitText = $scope.text.split( " " );
if( $scope.useToggling ) {
var el = angular.element( "<span>" +
splitText.slice( 0, threshould ).join( " " ) + " " +
"<span ng-show='!open'>...</span>" +
"<span class='btn-link ngTruncateToggleText' " +
"ng-click='toggleShow()'" +
"ng-show='!open'>" +
" More" +
"</span>" +
"<span ng-show='open'>" +
splitText.slice( threshould, splitText.length ).join( " " ) +
"<span class='btn-link ngTruncateToggleText'" +
"ng-click='toggleShow()'>" +
" Less" +
"</span>" +
"</span>" +
"</span>" +
"</span>" );
$compile( el )( $scope );
$element.append( el );
"</span>" );
$compile( el )( $scope );
$element.append( el );

} else {
$element.append( splitText.slice( 0, threshould ).join( " " ) + "..." );
}
}
}
});

0 comments on commit f6dafc1

Please sign in to comment.