updates how a check if truncated has run happens

README.md

@@ -3,7 +3,7 @@
 
 # Truncated.js
 
-> A plugin for effeciently & semantically truncating text
+> A plugin for effeciently and semantically truncating text.
 
 ## Setup
 
@@ -41,7 +41,7 @@ truncated('selector:not([not this selector])', maxHeight);
 ```
 **With a special symbol**
 ```javascript
-truncated('selector', maxHeight, '🙌');
+truncated('selector', maxHeight, '🍻');
 ```
 
 **With a special CSS Class**
@@ -56,20 +56,20 @@ $('selector').truncated(maxHeight);
 
 ## How?
 
-**Truncated.js** trims a text string to a last full word of what can fit within a specified max height.
+**Truncated.js** trims an element's text string to the last full word that can fit within a specified max height.
 
 ## Why?
 
-**Truncated.js** is made for simpicity, it doesn't try to oversolve. It truncates text to a max height.
+**Truncated.js** is made for simpicity; it doesn't try to oversolve truncation or provide tons of options. It truncates text to a max height.
 
 ## What about the original text?
 
-**Truncated.js** is re-adds the _diff_ of the original text in a hidden `<span>`. It runs a check for that `<span>` to make sure text is truncated as desired every time.
+**Truncated.js** re-adds the _diff_ of the original seleected elements's text in a hidden `<span>`. It runs a check for that `<span>` to make sure text is truncated as desired every time.
 
 ## What about size?
 
-**Truncated.js** is small - `~2kb` unminified & is meant to do 1 thing - _truncate text based on a specified max height_.
+**Truncated.js** is small - `~1.5kb` unminified and is meant to do 1 thing - _truncate text to fit beatifully to a specified max height_.
 
 ## How can I use it?
 
-You can use **Truncated.js** in all modern formats or even as a `jQuery` or `zepto` plugin;
+You can use **Truncated.js** in all modern formats and as a `jQuery` or `zepto` plugin;

dist/truncated.js

@@ -11,15 +11,17 @@ function truncated(target, maxHeight, symbol, cName) {
   }
   var hellip = symbol || '…';
   var classname = cName || 'js-truncated';
+  var hellipWrap = '<span class="js-hellip">' + hellip + '</span>';
   for (var i = 0; i < els.length; i++) {
     var el = els[i];
-    if (el.offsetHeight < maxHeight) {
-      var span = el.querySelector(classname);
-      if (span) {
-        el.removeChild(span);
-      }
+    var span = el.querySelector(classname);
+    if (el.offsetHeight < maxHeight && span) {
+      el.removeChild(el.querySelector('.js-hellip'));
+      var _text = el.textContent;
+      el.removeChild(span);
+      el.textContent = _text;
       return;
-    }
+    } else if (el.offsetHeight < maxHeight) return;
     var text = el.textContent;
     var trimmedText = text;
     do {
@@ -37,7 +39,7 @@ function truncated(target, maxHeight, symbol, cName) {
         k++;
       }
     }
-    el.insertAdjacentHTML('beforeend', hellip + '<span class="' + classname + '" style="display:none;">' + diff + '</span>');
+    el.insertAdjacentHTML('beforeend', hellipWrap + '<span class="' + classname + '" style="display:none;">' + diff + '</span>');
     return;
   }
 }

src/truncated.js

@@ -5,15 +5,17 @@ export default function truncated(target, maxHeight, symbol, cName) {
   }
   const hellip = symbol || '…';
   const classname = cName || 'js-truncated';
+  const hellipWrap = `<span class="js-hellip">${hellip}</span>`;
   for (let i = 0; i < els.length; i++) {
     const el = els[i];
-    if (el.offsetHeight < maxHeight) {
-      const span = el.querySelector(classname);
-      if (span) {
-        el.removeChild(span);
-      }
+    const span = el.querySelector(classname);
+    if (el.offsetHeight < maxHeight && span) {
+      el.removeChild(el.querySelector('.js-hellip'));
+      const text = el.textContent;
+      el.removeChild(span);
+      el.textContent = text;
       return;
-    }
+    } else if (el.offsetHeight < maxHeight) return;
     const text = el.textContent;
     let trimmedText = text;
     do {
@@ -33,7 +35,7 @@ export default function truncated(target, maxHeight, symbol, cName) {
     }
     el.insertAdjacentHTML(
       'beforeend',
-      `${hellip}<span class="${classname}" style="display:none;">${diff}</span>`
+      `${hellipWrap}<span class="${classname}" style="display:none;">${diff}</span>`
     );
     return;
   }

tests/index.html

@@ -24,9 +24,9 @@
     <p id="test-2">
       To surpass others is fucking tough, if you only do as you are told you don’t have it in you to succeed. When you design, you have to draw on your own fucking life experiences. If it’s not something you would want to read/look at/use then why fucking bother? Intuition is fucking important. Design is all about fucking relationships—the relationship of form and content, the relationship of elements, the relationship of designer and user. Why are you fucking reading all of this? Get back to work. If you’re not being fucking honest with yourself how could you ever hope to communicate something meaningful to someone else? Never, never assume that what you have achieved is fucking good enough. A good fucking composition is the result of a hierarchy consisting of clearly contrasting elements set with distinct alignments containing irregular intervals of negative space. Someday is not a fucking day of the week. Make your work consistent but not fucking predictable. What’s important is the fucking drive to see a project through no matter what. This design is fucking brilliant. The details are not the details. They make the fucking design. Nothing of value comes to you without fucking working
     </p>
-    <!-- <p id="test-3">
-      To surpass others is fucking tough, if you only do as you are told you don’t have it in you to succeed. When you design, you have to draw on your own fucking life experiences. If it’s not something you would want to read/look at/use then why fucking bother? Intuition is fucking important. Design is all about fucking relationships—the relationship of form and content, the relationship of elements, the relationship of designer and user. Why are you fucking reading all of this? Get back to work. If you’re not being fucking honest with yourself how could you ever hope to communicate something meaningful to someone else? Never, never assume that what you have achieved is fucking good enough. A good fucking composition is the result of a hierarchy consisting of clearly contrasting elements set with distinct alignments containing irregular intervals of negative space. Someday is not a fucking day of the week. Make your work consistent but not fucking predictable. What’s important is the fucking drive to see a project through no matter what. This design is fucking brilliant. The details are not the details. They make the fucking design. Nothing of value comes to you without fucking working
-    </p> -->
+    <p id="test-3">
+      To surpass others is fucking tough, if you only do as you are told you don’t have it in you to succeed. When you design, you have to draw<span class="js-hellip">…</span><span class="js-new-text" style="display:none;"> on your own fucking life experiences. If it’s not something you would want to read/look at/use then why fucking bother? Intuition is fucking important. Design is all about fucking relationships—the relationship of form and content, the relationship of elements, the relationship of designer and user. Why are you fucking reading all of this? Get back to work. If you’re not being fucking honest with yourself how could you ever hope to communicate something meaningful to someone else? Never, never assume that what you have achieved is fucking good enough. A good fucking composition is the result of a hierarchy consisting of clearly contrasting elements set with distinct alignments containing irregular intervals of negative space. Someday is not a fucking day of the week. Make your work consistent but not fucking predictable. What’s important is the fucking drive to see a project through no matter what. This design is fucking brilliant. The details are not the details. They make the fucking design. Nothing of value comes to you without fucking working</span>
+    </p>
     <script src="https://code.jquery.com/jquery-3.1.0.slim.min.js" integrity="sha256-cRpWjoSOw5KcyIOaZNo4i6fZ9tKPhYYb6i5T9RSVJG8=" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/qunit/2.0.1/qunit.js"></script>
     <script src="../dist/truncated.js"></script>

tests/tests.js

@@ -4,9 +4,13 @@ QUnit.test("select a paragraph with a class", function(assert) {
 });
 QUnit.test("select a paragraph with an id & unique class", function(assert) {
   truncated('#test', 70, '…', 'js-test');
-  assert.equal(document.querySelectorAll('.js-test').length, 1, 'there should be 1 truncated thing');
+  assert.equal(document.querySelectorAll('.js-test').length, 1, 'there should be 1 truncated thing with a class .js-test');
 });
 QUnit.test("select a paragraph with an id & no class & a special hellip", function(assert) {
   truncated('#test-2', 70, '🐔', 'js-chicken');
-  assert.equal(document.querySelectorAll('.js-chicken').length, 1, 'there should be 1 truncated thing');
+  assert.equal(document.querySelectorAll('.js-chicken').length, 1, 'there should be 1 truncated thing with a class .js-chicken');
+});
+QUnit.test("select a paragraph with an id & no class & a special hellip", function(assert) {
+  truncated('#test-3', 90, '👌', 'js-new-text');
+  assert.equal(document.querySelectorAll('.js-new-text').length, 1, 'there should be 1 truncated thing with a class .js-new-text');
 });