Close bugs for milestone 1.1.2 (#29)

Fix issues #8, #11, #25. #26 + bump version to 1.1.2
jeffchan · Jun 22, 2016 · ebf6aa5 · ebf6aa5
1 parent 13191e8
commit ebf6aa5
Show file tree

Hide file tree

Showing 8 changed files with 195 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -10,8 +10,7 @@ Truncate.js currently depends on jQuery. There are two ways to use Truncate.js:
 
     // Initialize and truncate.
     $('#truncate_me').truncate({
-      lines: 2,
-      lineHeight: 20
+      lines: 2
     });
 
     // Update the HTML and truncate.
@@ -27,8 +26,7 @@ Truncate.js currently depends on jQuery. There are two ways to use Truncate.js:
 
     // Initialize and truncate.
     var truncated = new Truncate(document.getElementById('#truncate_me'), {
-      lines: 2,
-      lineHeight: 20
+      lines: 2
     });
 
     // Update the HTML and truncate.
@@ -54,6 +52,7 @@ Truncate.js currently depends on jQuery. There are two ways to use Truncate.js:
 - `showMore`: HTML to insert at the truncation point. Useful for a "Show More" button. _default: ""_
 - `showLess`: HTML to insert when .expand() is called. Useful for a "Show Less" button. _default: ""_
 - `position`: Position of the truncation. Possible values: `start`, `middle`, `end`. _default: "end"_
+- `maxHeight`: Truncate the content to fit in the specified height (in px).
 
 ----
 

diff --git a/dist/truncate.js b/dist/truncate.js
@@ -2,6 +2,17 @@
 
   var BLOCK_TAGS = ['table', 'thead', 'tbody', 'tfoot', 'tr', 'col', 'colgroup', 'object', 'embed', 'param', 'ol', 'ul', 'dl', 'blockquote', 'select', 'optgroup', 'option', 'textarea', 'script', 'style'];
 
+  /* Trim function.
+   * Trim only end of string whitespaces
+   *
+   * text - String to trim
+   *
+   * Returns text without end whitespaces
+   */
+  function trimRight(text) {
+    return text.replace(/\s*$/,"");
+  }
+
   function setText(element, text) {
     if (element.innerText) {
       element.innerText = text;
@@ -81,7 +92,7 @@
     while (low <= high) {
       mid = low + ((high - low) >> 1); // Integer division
 
-      chunk = options.ellipsis + $.trim(original.substr(mid - 1, original.length));
+      chunk = options.ellipsis + trimRight(original.substr(mid - 1, original.length));
       setText(element, chunk);
 
       if ($rootNode.height() > options.maxHeight) {
@@ -117,7 +128,7 @@
     while (low <= high) {
       mid = low + ((high - low) >> 1); // Integer division
 
-      chunk = $.trim(original.substr(0, mid + 1)) + options.ellipsis;
+      chunk = trimRight(original.substr(0, mid + 1)) + options.ellipsis;
       setText(element, chunk);
 
       if ($rootNode.height() > options.maxHeight) {
@@ -152,7 +163,7 @@
     while (low <= high) {
       mid = low + ((high - low) >> 1); // Integer division
 
-      chunk = $.trim(original.substr(0, mid)) + options.ellipsis + original.substr(len - mid, len - mid);
+      chunk = trimRight(original.substr(0, mid)) + options.ellipsis + original.substr(len - mid, len - mid);
       setText(element, chunk);
 
       if ($rootNode.height() > options.maxHeight) {
@@ -425,13 +436,19 @@
         margin: 0,
         padding: 0,
         width: 'auto',
-        height: 'auto'
+        height: 'auto',
+        'word-wrap': 'break-word'
       });
 
       this.isTruncated = false;
       // Check if already meets height requirement
       if ($wrap.height() > this.options.maxHeight) {
         this.isTruncated = truncateNestedNode($wrap, $wrap, this.$clipNode, this.options);
+
+        if(this.isExplicitlyCollapsed) {
+          this.isCollapsed = true;
+          wasExpanded = false;
+        }
       } else {
         this.isCollapsed = false;
       }
@@ -454,12 +471,20 @@
      * Returns nothing.
      */
     expand: function () {
+      var includeShowLess = true;
+
+      if(this.isExplicitlyCollapsed) {
+        this.isExplicitlyCollapsed = false;
+        includeShowLess = false;
+      }
+
       if (!this.isCollapsed) {
         return;
       }
 
       this.isCollapsed = false;
-      this.element.innerHTML = this.isTruncated ? this.original + this.options.showLess : this.original;
+
+      this.element.innerHTML = this.isTruncated ? this.original + (includeShowLess ? this.options.showLess : "") : this.original;
     },
 
     /* Public: Collapses the element to the truncated state.
@@ -470,6 +495,8 @@
      * Returns nothing.
      */
     collapse: function (retruncate) {
+      this.isExplicitlyCollapsed = true;
+
       if (this.isCollapsed) {
         return;
       }

diff --git a/dist/truncate.min.js b/dist/truncate.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "truncate.js",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Fast, intelligent Javascript text truncation",
   "author": "Jeff Chan",
   "contributors": [{

diff --git a/test/.jshintrc b/test/.jshintrc
@@ -0,0 +1,39 @@
+{
+  "globals": {
+    "jQuery": false,
+    "$": false,
+    "describe": false,
+    "it": false,
+    "beforeEach": false,
+    "assert": false,
+    "afterEach": false
+  },
+  "node": false,
+  "browser": true,
+  "boss": true,
+  "camelcase": false,
+  "curly": true,
+  "debug": false,
+  "devel": false,
+  "eqeqeq": true,
+  "evil": true,
+  "expr": true,
+  "forin": true,
+  "immed": true,
+  "indent": 2,
+  "laxbreak": false,
+  "latedef": true,
+  "newcap": true,
+  "noarg": true,
+  "noempty": false,
+  "nonew": false,
+  "nomen": false,
+  "onevar": false,
+  "plusplus": false,
+  "sub": true,
+  "strict": false,
+  "trailing": true,
+  "white": true,
+  "undef": true,
+  "unused": true
+}
diff --git a/test/chrome/truncate-test.js b/test/chrome/truncate-test.js
@@ -48,6 +48,24 @@ describe('truncate.js', function () {
     assert.equal(this.$fixture.html(), "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer to…");
   });
 
+  it('truncate correctly word with no space', function () {
+    this.$fixture.html('E83F2E36E5EB4A0CBE92758E5C20BB8A');
+    this.$fixture.css('width', '60px');
+
+    this.run({lines: 1}, false);
+
+    assert.equal(this.$fixture.html(), "E83F2…");
+  });
+
+  it('truncate correctly white space', function () {
+    this.$fixture.html('Some text <a href="/foo">with some link</a> and some more text.');
+    this.$fixture.css('width', '250px');
+
+    this.run({lines: 1}, false);
+
+    assert.equal(this.$fixture.html(), "Some text <a href=\"/foo\">with some link</a> and some…");
+  });
+
   it('truncate correctly when container has no margin or padding', function () {
     this.run({lines: 5});
 
@@ -256,6 +274,20 @@ describe('truncate.js', function () {
         this.$fixture.truncate('expand');
         assert.equal(this.$fixture.html(), "<div>Members, friends, adversaries, competitors, and colleagues</div><a href=\"#\">Less</a>");
       });
+
+      it('should be able to expand after multiple update', function () {
+        this.$fixture.truncate('collapse');
+        assert.equal(this.$fixture.html(), "<div>Members, friends, adversaries… <a href=\"#\">More</a></div>");
+
+        this.$fixture.truncate('update', '<div>Members.</div>');
+        assert.equal(this.$fixture.html(), "<div>Members.</div>");
+
+        this.$fixture.truncate('update', '<div>Members, friends, adversaries, competitors, and colleagues</div>');
+        assert.equal(this.$fixture.html(), "<div>Members, friends, adversaries… <a href=\"#\">More</a></div>");
+
+        this.$fixture.truncate('expand');
+        assert.equal(this.$fixture.html(), '<div>Members, friends, adversaries, competitors, and colleagues</div>');
+      });
     });
 
     describe('when no truncation happened', function () {
@@ -285,7 +317,18 @@ describe('truncate.js', function () {
     });
 
     it('retruncates if retruncate is true', function () {
-      this.$fixture.truncate('collapse', true);
+      this.$fixture.truncate('collapse');
+      assert.equal(this.$fixture.html(), "<div>Members, friends, adversaries… <a href=\"#\">More</a></div>");
+    });
+
+    it('should keep the collapsed status after multiple update', function () {
+      this.$fixture.truncate('collapse');
+      assert.equal(this.$fixture.html(), "<div>Members, friends, adversaries… <a href=\"#\">More</a></div>");
+
+      this.$fixture.truncate('update', '<div>Members.</div>');
+      assert.equal(this.$fixture.html(), "<div>Members.</div>");
+
+      this.$fixture.truncate('update', '<div>Members, friends, adversaries, competitors, and colleagues</div>');
       assert.equal(this.$fixture.html(), "<div>Members, friends, adversaries… <a href=\"#\">More</a></div>");
     });
   });

diff --git a/test/phantomjs/truncate-test.js b/test/phantomjs/truncate-test.js
@@ -48,6 +48,24 @@ describe('truncate.js', function () {
     assert.equal(this.$fixture.html(), "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer too…");
   });
 
+  it('truncate correctly word with no space', function () {
+    this.$fixture.html('E83F2E36E5EB4A0CBE92758E5C20BB8A');
+    this.$fixture.css('width', '60px');
+
+    this.run({lines: 1}, false);
+
+    assert.equal(this.$fixture.html(), "E83F2…");
+  });
+
+  it('truncate correctly white space', function () {
+    this.$fixture.html('Some text <a href="/foo">with some link</a> and some more text.');
+    this.$fixture.css('width', '250px');
+
+    this.run({lines: 1}, false);
+
+    assert.equal(this.$fixture.html(), "Some text <a href=\"/foo\">with some link</a> and some…");
+  });
+
   it('truncate correctly when container has no margin or padding', function () {
     this.run({ lines: 5 });
 
@@ -256,6 +274,20 @@ describe('truncate.js', function () {
         this.$fixture.truncate('expand');
         assert.equal(this.$fixture.html(), "<div>Members, friends, adversaries, competitors, and colleagues</div><a href=\"#\">Less</a>");
       });
+
+      it('should be able to expand after multiple update', function () {
+        this.$fixture.truncate('collapse');
+        assert.equal(this.$fixture.html(), "<div>Members, friends, adversaries,… <a href=\"#\">More</a></div>");
+
+        this.$fixture.truncate('update', '<div>Members.</div>');
+        assert.equal(this.$fixture.html(), "<div>Members.</div>");
+
+        this.$fixture.truncate('update', '<div>Members, friends, adversaries, competitors, and colleagues</div>');
+        assert.equal(this.$fixture.html(), "<div>Members, friends, adversaries,… <a href=\"#\">More</a></div>");
+
+        this.$fixture.truncate('expand');
+        assert.equal(this.$fixture.html(), '<div>Members, friends, adversaries, competitors, and colleagues</div>');
+      });
     });
 
     describe('when no truncation happened', function () {
@@ -288,6 +320,17 @@ describe('truncate.js', function () {
       this.$fixture.truncate('collapse', true);
       assert.equal(this.$fixture.html(), "<div>Members, friends, adversaries,… <a href=\"#\">More</a></div>");
     });
+
+    it('should keep the collapsed status after multiple update', function () {
+      this.$fixture.truncate('collapse');
+      assert.equal(this.$fixture.html(), "<div>Members, friends, adversaries,… <a href=\"#\">More</a></div>");
+
+      this.$fixture.truncate('update', '<div>Members.</div>');
+      assert.equal(this.$fixture.html(), "<div>Members.</div>");
+
+      this.$fixture.truncate('update', '<div>Members, friends, adversaries, competitors, and colleagues</div>');
+      assert.equal(this.$fixture.html(), "<div>Members, friends, adversaries,… <a href=\"#\">More</a></div>");
+    });
   });
 
   describe('.isTruncated', function () {