[version] patch; @digitalcraft createTextNode() 🚀 (#146)

dollarshaveclub · Apr 17, 2019 · da7371b · da7371b
1 parent 1876911
commit da7371b
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 8 deletions.
diff --git a/dist/jquery.shave.min.js b/dist/jquery.shave.min.js
diff --git a/dist/shave.es.js b/dist/shave.es.js
@@ -1,6 +1,6 @@
 /**
   shave - Shave is a javascript plugin that truncates multi-line text within a html element based on set max height
-  @version v2.5.2
+  @version v2.5.3
   @link https://github.com/dollarshaveclub/shave#readme
   @author Jeff Wainwright <yowainwright@gmail.com> (jeffry.in)
   @license MIT
@@ -61,7 +61,12 @@ function shave(target, maxHeight) {
     el[textProp] = spaces ? words.slice(0, max).join(' ') : words.slice(0, max);
     el.insertAdjacentHTML('beforeend', charHtml);
     var diff = spaces ? " ".concat(words.slice(max).join(' ')) : words.slice(max);
-    el.insertAdjacentHTML('beforeend', "<span class=\"".concat(classname, "\" style=\"display:none;\">").concat(diff, "</span>"));
+    var shavedText = document.createTextNode(diff);
+    var elWithShavedText = document.createElement('span');
+    elWithShavedText.classList.add(classname);
+    elWithShavedText.style.display = 'none';
+    elWithShavedText.appendChild(shavedText);
+    el.insertAdjacentElement('beforeend', elWithShavedText);
     styles.height = heightStyle;
     styles.maxHeight = maxHeightStyle;
   }

diff --git a/dist/shave.js b/dist/shave.js
@@ -1,6 +1,6 @@
 /**
   shave - Shave is a javascript plugin that truncates multi-line text within a html element based on set max height
-  @version v2.5.2
+  @version v2.5.3
   @link https://github.com/dollarshaveclub/shave#readme
   @author Jeff Wainwright <yowainwright@gmail.com> (jeffry.in)
   @license MIT
@@ -67,7 +67,12 @@
       el[textProp] = spaces ? words.slice(0, max).join(' ') : words.slice(0, max);
       el.insertAdjacentHTML('beforeend', charHtml);
       var diff = spaces ? " ".concat(words.slice(max).join(' ')) : words.slice(max);
-      el.insertAdjacentHTML('beforeend', "<span class=\"".concat(classname, "\" style=\"display:none;\">").concat(diff, "</span>"));
+      var shavedText = document.createTextNode(diff);
+      var elWithShavedText = document.createElement('span');
+      elWithShavedText.classList.add(classname);
+      elWithShavedText.style.display = 'none';
+      elWithShavedText.appendChild(shavedText);
+      el.insertAdjacentElement('beforeend', elWithShavedText);
       styles.height = heightStyle;
       styles.maxHeight = maxHeightStyle;
     }

diff --git a/dist/shave.min.js b/dist/shave.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "shave",
-  "version": "2.5.2",
+  "version": "2.5.3",
   "description": "Shave is a javascript plugin that truncates multi-line text within a html element based on set max height",
   "main": "dist/shave.js",
   "module": "dist/shave.es.js",

diff --git a/src/shave.js b/src/shave.js
@@ -57,7 +57,6 @@ export default function shave (target, maxHeight, opts = {}) {
     el.insertAdjacentHTML('beforeend', charHtml)
     const diff = spaces ? ` ${words.slice(max).join(' ')}` : words.slice(max)
 
-    // https://stackoverflow.com/questions/476821/is-a-dom-text-node-guaranteed-to-not-be-interpreted-as-html
     const shavedText = document.createTextNode(diff)
     const elWithShavedText = document.createElement('span')
     elWithShavedText.classList.add(classname)