diff --git a/README.md b/README.md
index 4ff742d..bb2f37f 100644
--- a/README.md
+++ b/README.md
@@ -9,4 +9,16 @@ Thanks to [@micabot](https://github.com/micabot) for the improvements.
*Result:*
-
\ No newline at end of file
+
+
+*HTML Escape:*
+
+All content is html escaped.
+Turn off escaping content by using
+ dd-text-collapse-escape="false"
+
+*Auto newline to <br> Feature:*
+
+If expanded, all newlines are converted to <br>
+Turn off nl2br content by using
+ dd-text-collapse-nl2br="false"
diff --git a/dd-text-collapse/dd-text-collapse.js b/dd-text-collapse/dd-text-collapse.js
index b3bbd32..0a4d862 100644
--- a/dd-text-collapse/dd-text-collapse.js
+++ b/dd-text-collapse/dd-text-collapse.js
@@ -1,6 +1,9 @@
// a directive to auto-collapse long text
// in elements with the "dd-text-collapse" attribute
-app.directive('ddTextCollapse', ['$compile', function($compile) {
+// example:
+// default: escape text - turn off with dd-text-collapse-escape="false"
+// default: newlines to
- turn off with dd-text-collapse-nl2br="false"
+angular.module('ddTextCollapse', []).directive('ddTextCollapse', ['$compile', function($compile) {
return {
restrict: 'A',
@@ -9,25 +12,64 @@ app.directive('ddTextCollapse', ['$compile', function($compile) {
// start collapsed
scope.collapsed = false;
-
+
// create the function to toggle the collapse
scope.toggle = function() {
scope.collapsed = !scope.collapsed;
};
- // wait for changes on the text
- attrs.$observe('ddTextCollapseText', function(text) {
- // get the length from the attributes
- var maxLength = scope.$eval(attrs.ddTextCollapseMaxLength);
+ scope.entityMap = {
+ "&": "&",
+ "<": "<",
+ ">": ">",
+ '"': '"',
+ "'": ''',
+ "/": '/'
+ };
+
+ scope.escapeHtml = function(string) {
+ return String(string).replace(/[&<>"'\/]/g, function (s) {
+ return scope.entityMap[s];
+ });
+ }
+ scope.ddTextCollapseText = function(text) {
+ // get the length from the attributes
+ var maxLength = scope.$eval(attrs.ddTextCollapseMaxLength);
+ // check dd-text-collapse-escape attribute and use true as default
+ var escape = scope.$eval(attrs.ddTextCollapseEscape);
+ if( typeof(escape) == "undefined" ) {
+ escape = true;
+ }
+ // check dd-text-collapse-nl2br attribute and use true as default
+ var nl2br = scope.$eval(attrs.ddTextCollapseNl2br);
+ if( typeof(nl2br) == "undefined" ) {
+ nl2br = true;
+ }
+ if( typeof(text) == "undefined" ) {
+ text = ''+scope.text;
+ } else {
+ scope.text = text;
+ }
+ if( escape ) {
+ text = scope.escapeHtml( text );
+ }
if (text.length > maxLength) {
// split the text in two parts, the first always showing
var firstPart = String(text).substring(0, maxLength);
var secondPart = String(text).substring(maxLength, text.length);
-
+ if( nl2br ) {
+ firstPartNl2Br = firstPart.replace(/\n/g, "
");
+ secondPart = secondPart.replace(/\n/g, "
");
+ }
// create some new html elements to hold the separate info
- var firstSpan = $compile('' + firstPart + '')(scope);
+ if( nl2br ) {
+ var firstSpan = $compile('' + firstPart + '')(scope);
+ var firstSpan2 = $compile('' + firstPartNl2Br + '')(scope);
+ } else {
+ var firstSpan = $compile('' + firstPart + '')(scope);
+ }
var secondSpan = $compile('' + secondPart + '')(scope);
var moreIndicatorSpan = $compile('... ')(scope);
var lineBreak = $compile('
')(scope);
@@ -37,6 +79,9 @@ app.directive('ddTextCollapse', ['$compile', function($compile) {
// and add the new ones we created
element.empty();
element.append(firstSpan);
+ if( nl2br ) {
+ element.append(firstSpan2);
+ }
element.append(secondSpan);
element.append(moreIndicatorSpan);
element.append(lineBreak);
@@ -46,6 +91,11 @@ app.directive('ddTextCollapse', ['$compile', function($compile) {
element.empty();
element.append(text);
}
+ }
+
+ // wait for changes on the text
+ attrs.$observe('ddTextCollapseText', function(text) {
+ scope.ddTextCollapseText(text);
});
}
};
diff --git a/dd-text-collapse/example-usage.html b/dd-text-collapse/example-usage.html
index 2e1437d..db338a7 100644
--- a/dd-text-collapse/example-usage.html
+++ b/dd-text-collapse/example-usage.html
@@ -1,3 +1,9 @@
-
\ No newline at end of file
+
+
+Turn off escape:
+
+
+Turn off auto newline to <br> feature if expanded:
+