From 6fa1d6735cce4f36dd1f0647a653eb5fe65d0539 Mon Sep 17 00:00:00 2001 From: leibler Date: Tue, 15 Sep 2015 09:51:25 +0200 Subject: [PATCH 1/5] add html escape option (default enabled) --- README.md | 8 +++++++- dd-text-collapse/dd-text-collapse.js | 29 +++++++++++++++++++++++++--- dd-text-collapse/example-usage.html | 5 ++++- 3 files changed, 37 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 4ff742d..cc85fe4 100644 --- a/README.md +++ b/README.md @@ -9,4 +9,10 @@ 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" diff --git a/dd-text-collapse/dd-text-collapse.js b/dd-text-collapse/dd-text-collapse.js index b3bbd32..7ba0edc 100644 --- a/dd-text-collapse/dd-text-collapse.js +++ b/dd-text-collapse/dd-text-collapse.js @@ -1,5 +1,6 @@ // a directive to auto-collapse long text // in elements with the "dd-text-collapse" attribute +// default: escape text - turn off with dd-text-collapse-escape="false" app.directive('ddTextCollapse', ['$compile', function($compile) { return { @@ -9,18 +10,40 @@ 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; }; + + scope.entityMap = { + "&": "&", + "<": "<", + ">": ">", + '"': '"', + "'": ''', + "/": '/' + }; + + scope.escapeHtml = function(string) { + return String(string).replace(/[&<>"'\/]/g, function (s) { + return scope.entityMap[s]; + }); + } + // wait for changes on the text attrs.$observe('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; + } + 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); diff --git a/dd-text-collapse/example-usage.html b/dd-text-collapse/example-usage.html index 2e1437d..1101613 100644 --- a/dd-text-collapse/example-usage.html +++ b/dd-text-collapse/example-usage.html @@ -1,3 +1,6 @@

-

\ No newline at end of file
+

+
+Turn off escape:

+


From c2cf53221b355c245ee0dbc8e72966efb9b9f698 Mon Sep 17 00:00:00 2001
From: leibler 
Date: Tue, 27 Oct 2015 20:06:16 +0100
Subject: [PATCH 2/5] turn into module 'ddTextCollapse'; add newline to 

 feature;

---
 dd-text-collapse/dd-text-collapse.js | 39 +++++++++++++++++++++++-----
 1 file changed, 33 insertions(+), 6 deletions(-)

diff --git a/dd-text-collapse/dd-text-collapse.js b/dd-text-collapse/dd-text-collapse.js
index 7ba0edc..0a4d862 100644
--- a/dd-text-collapse/dd-text-collapse.js
+++ b/dd-text-collapse/dd-text-collapse.js
@@ -1,7 +1,9 @@
 // a directive to auto-collapse long text
 // in elements with the "dd-text-collapse" attribute
+// example: 

 // default: escape text - turn off with dd-text-collapse-escape="false"
-app.directive('ddTextCollapse', ['$compile', function($compile) {
+// default: newlines to 
 - turn off with dd-text-collapse-nl2br="false"
+angular.module('ddTextCollapse', []).directive('ddTextCollapse', ['$compile', function($compile) {
 
     return {
         restrict: 'A',
@@ -32,15 +34,24 @@ app.directive('ddTextCollapse', ['$compile', function($compile) {
                 });
             }
 
-            // wait for changes on the text
-            attrs.$observe('ddTextCollapseText', function(text) {
-                // get the length from the attributes
+            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 );
                 }
@@ -48,9 +59,17 @@ app.directive('ddTextCollapse', ['$compile', function($compile) {
                     // 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);
@@ -60,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);
@@ -69,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);
             });
         }
     };

From 56316d8e35fbefbc194a4b7ff903cd8810445158 Mon Sep 17 00:00:00 2001
From: leibler 
Date: Tue, 27 Oct 2015 20:09:57 +0100
Subject: [PATCH 3/5] documentation nl2br feature

---
 dd-text-collapse/example-usage.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/dd-text-collapse/example-usage.html b/dd-text-collapse/example-usage.html
index 1101613..db338a7 100644
--- a/dd-text-collapse/example-usage.html
+++ b/dd-text-collapse/example-usage.html
@@ -4,3 +4,6 @@
 
 Turn off escape:

 

+
+Turn off auto newline to <br> feature if expanded:

+


From fa2e137caa626702dc76b4316bea90df4af03724 Mon Sep 17 00:00:00 2001
From: leibler 
Date: Tue, 27 Oct 2015 20:11:04 +0100
Subject: [PATCH 4/5] documentation nl2br feature

---
 README.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/README.md b/README.md
index cc85fe4..a1069f8 100644
--- a/README.md
+++ b/README.md
@@ -16,3 +16,9 @@ Thanks to [@micabot](https://github.com/micabot) for the improvements.
 All content is html escaped. 
 Turn off escaping content by using
 	dd-text-collapse-escape="false"
+
+*Auto newline to 
 Feature:*
+
+If expanded, all newlines are converted to 

+Turn off nl2br content by using
+	dd-text-collapse-nl2br="false"

From ff06b2cee353649350d96c1b6cdcceef678423e8 Mon Sep 17 00:00:00 2001
From: leibler 
Date: Tue, 27 Oct 2015 20:13:53 +0100
Subject: [PATCH 5/5] Update README.md

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index a1069f8..bb2f37f 100644
--- a/README.md
+++ b/README.md
@@ -17,8 +17,8 @@ All content is html escaped.
 Turn off escaping content by using
 	dd-text-collapse-escape="false"
 
-*Auto newline to 
 Feature:*
+*Auto newline to <br> Feature:*
 
-If expanded, all newlines are converted to 

+If expanded, all newlines are converted to <br>
 Turn off nl2br content by using
 	dd-text-collapse-nl2br="false"