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:* -![image](https://raw.githubusercontent.com/doukasd/AngularJS-Components/master/dd-text-collapse/dd-text-collapse-result.png) \ No newline at end of file +![image](https://raw.githubusercontent.com/doukasd/AngularJS-Components/master/dd-text-collapse/dd-text-collapse-result.png) + +*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:
+