From 5f406b18d544528237b2bb79c16f62e5d45cbaad Mon Sep 17 00:00:00 2001
From: Evan Tatarka <evan@server1.example.com>
Date: Thu, 12 May 2011 20:38:05 -0400
Subject: [PATCH] Updated code to work with lastest master. Tests should now
 pass.

---
 config/assets.yml                            |   1 +
 public/javascripts/stream.js                 |   8 +
 public/javascripts/vendor/jquery.expander.js | 152 +++++++++++++++++++
 spec/javascripts/stream-spec.js              |  30 ++++
 spec/javascripts/support/jasmine.yml         |   1 +
 5 files changed, 192 insertions(+)
 create mode 100644 public/javascripts/vendor/jquery.expander.js

diff --git a/config/assets.yml b/config/assets.yml
index 0b7d8a1d0..3efc19882 100644
--- a/config/assets.yml
+++ b/config/assets.yml
@@ -16,6 +16,7 @@ javascripts:
     - public/javascripts/vendor/jquery.autoresize.min.js
     - public/javascripts/vendor/jquery-ui-1.8.9.custom.min.js
     - public/javascripts/vendor/jquery.infinitescroll.min.js
+    - public/javascripts/vendor/jquery.expander.js
     - public/javascripts/vendor/facebox.js
     - public/javascripts/vendor/timeago.js
     - public/javascripts/vendor/Mustache.js
diff --git a/public/javascripts/stream.js b/public/javascripts/stream.js
index 8b6c2a69a..30c439b01 100644
--- a/public/javascripts/stream.js
+++ b/public/javascripts/stream.js
@@ -84,6 +84,14 @@ var Stream = {
       });
 
     });
+
+    // collapse long comments
+    $(".content").find("p").expander({
+      slicePoint: 400,
+      widow: 12,
+      expandText: "show more",
+      userCollapseText: "show less"
+    });
   },
   setUpLikes: function(){
     var likes = $("#main_stream .like_it, #main_stream .dislike_it");
diff --git a/public/javascripts/vendor/jquery.expander.js b/public/javascripts/vendor/jquery.expander.js
new file mode 100644
index 000000000..f56eef03c
--- /dev/null
+++ b/public/javascripts/vendor/jquery.expander.js
@@ -0,0 +1,152 @@
+/*
+ * jQuery Expander plugin
+ * Version 0.4  (12/09/2008)
+ * @requires jQuery v1.1.1+
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.gnu.org/licenses/gpl.html
+ *
+ */
+
+
+(function($) {
+
+  $.fn.expander = function(options) {
+
+    var opts = $.extend({}, $.fn.expander.defaults, options);
+    var delayedCollapse;
+    return this.each(function() {
+      var $this = $(this);
+      var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
+     	var cleanedTag, startTags, endTags;	
+     	var allText = $this.html();
+     	var startText = allText.slice(0, o.slicePoint).replace(/\w+$/,'');
+     	startTags = startText.match(/<\w[^>]*>/g);
+   	  if (startTags) {startText = allText.slice(0,o.slicePoint + startTags.join('').length).replace(/\w+$/,'');}
+   	  
+     	if (startText.lastIndexOf('<') > startText.lastIndexOf('>') ) {
+     	  startText = startText.slice(0,startText.lastIndexOf('<'));
+     	}
+     	var endText = allText.slice(startText.length);    	  
+     	// create necessary expand/collapse elements if they don't already exist
+   	  if (!$('span.details', this).length) {
+        // end script if text length isn't long enough.
+       	if ( endText.replace(/\s+$/,'').split(' ').length < o.widow ) { return; }
+       	// otherwise, continue...    
+       	if (endText.indexOf('</') > -1) {
+         	endTags = endText.match(/<(\/)?[^>]*>/g);
+          for (var i=0; i < endTags.length; i++) {
+
+            if (endTags[i].indexOf('</') > -1) {
+              var startTag, startTagExists = false;
+              for (var j=0; j < i; j++) {
+                startTag = endTags[j].slice(0, endTags[j].indexOf(' ')).replace(/(\w)$/,'$1>');
+                if (startTag == rSlash(endTags[i])) {
+                  startTagExists = true;
+                }
+              }              
+              if (!startTagExists) {
+                startText = startText + endTags[i];
+                var matched = false;
+                for (var s=startTags.length - 1; s >= 0; s--) {
+                  if (startTags[s].slice(0, startTags[s].indexOf(' ')).replace(/(\w)$/,'$1>') == rSlash(endTags[i]) 
+                  && matched == false) {
+                    cleanedTag = cleanedTag ? startTags[s] + cleanedTag : startTags[s];
+                    matched = true;
+                  }
+                };
+              }
+            }
+          }
+
+          endText = cleanedTag && cleanedTag + endText || endText;
+        }
+     	  $this.html([
+     		startText,
+     		'<span class="read-more">',
+     		o.expandPrefix,
+       		'<a href="#">',
+       		  o.expandText,
+       		'</a>',
+        '</span>',
+     		'<span class="details">',
+     		  endText,
+     		'</span>'
+     		].join('')
+     	  );
+      }
+      var $thisDetails = $('span.details', this),
+        $readMore = $('span.read-more', this);
+   	  $thisDetails.hide();
+ 	    $readMore.find('a').click(function() {
+ 	      $readMore.hide();
+
+ 	      if (o.expandEffect === 'show' && !o.expandSpeed) {
+          o.beforeExpand($this);
+ 	        $thisDetails.show();
+          o.afterExpand($this);
+          delayCollapse(o, $thisDetails);
+ 	      } else {
+          o.beforeExpand($this);
+ 	        $thisDetails[o.expandEffect](o.expandSpeed, function() {
+            $thisDetails.css({zoom: ''});
+            o.afterExpand($this);
+            delayCollapse(o, $thisDetails);
+ 	        });
+ 	      }
+        return false;
+ 	    });
+      if (o.userCollapse) {
+        $this
+        .find('span.details').append('<span class="re-collapse">' + o.userCollapsePrefix + '<a href="#">' + o.userCollapseText + '</a></span>');
+        $this.find('span.re-collapse a').click(function() {
+
+          clearTimeout(delayedCollapse);
+          var $detailsCollapsed = $(this).parents('span.details');
+          reCollapse($detailsCollapsed);
+          o.onCollapse($this, true);
+          return false;
+        });
+      }
+    });
+    function reCollapse(el) {
+       el.hide()
+        .prev('span.read-more').show();
+    }
+    function delayCollapse(option, $collapseEl) {
+      if (option.collapseTimer) {
+        delayedCollapse = setTimeout(function() {  
+          reCollapse($collapseEl);
+          option.onCollapse($collapseEl.parent(), false);
+          },
+          option.collapseTimer
+        );
+      }
+    }
+    function rSlash(rString) {
+      return rString.replace(/\//,'');
+    }    
+  };
+    // plugin defaults
+  $.fn.expander.defaults = {
+    slicePoint:       100,  // the number of characters at which the contents will be sliced into two parts. 
+                            // Note: any tag names in the HTML that appear inside the sliced element before 
+                            // the slicePoint will be counted along with the text characters.
+    widow:            4,  // a threshold of sorts for whether to initially hide/collapse part of the element's contents. 
+                          // If after slicing the contents in two there are fewer words in the second part than 
+                          // the value set by widow, we won't bother hiding/collapsing anything.
+    expandText:       'read more', // text displayed in a link instead of the hidden part of the element. 
+                                      // clicking this will expand/show the hidden/collapsed text
+    expandPrefix:     '&hellip; ',
+    collapseTimer:    0, // number of milliseconds after text has been expanded at which to collapse the text again
+    expandEffect:     'fadeIn',
+    expandSpeed:      '',   // speed in milliseconds of the animation effect for expanding the text
+    userCollapse:     true, // allow the user to re-collapse the expanded text.
+    userCollapseText: '[collapse expanded text]',  // text to use for the link to re-collapse the text
+    userCollapsePrefix: ' ',
+    beforeExpand: function($thisEl) {},
+    afterExpand: function($thisEl) {},
+    onCollapse: function($thisEl, byUser) {}
+  };
+})(jQuery);
diff --git a/spec/javascripts/stream-spec.js b/spec/javascripts/stream-spec.js
index 4b0a16275..c7ecd19c0 100644
--- a/spec/javascripts/stream-spec.js
+++ b/spec/javascripts/stream-spec.js
@@ -2,6 +2,15 @@
  *   licensed under the Affero General Public License version 3 or later.  See
  *   the COPYRIGHT file.
  */
+function randomString(string_length) {
+  var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz     ";
+  var randomstring = '';
+  for (var i=0; i<string_length; i++) {
+    var rnum = Math.floor(Math.random() * chars.length);
+    randomstring += chars.substring(rnum,rnum+1);
+  }
+  return randomstring;
+}
 
 describe("Stream", function() {
   beforeEach(function() {
@@ -16,6 +25,27 @@ describe("Stream", function() {
       $('.stream a.show_post_comments').click();
       expect(Stream.toggleComments).toHaveBeenCalled();
     });
+
+    it("adds a 'show more' links to long posts", function() {
+      $("#jasmine_content").html(
+        '<li class="stream_element">' +
+          '<div class="content">' +
+            '<p id="text">' +
+              randomString(1000) +
+            '</p>' +
+          '</div>' +
+        '</li>'
+      );
+      Stream.initialize();
+      expect($(".details").css('display')).toEqual('none');
+      expect($(".read-more a").css('display').toEqual('inline');
+      expect($(".re-collapse a").css('display')).toEqual('none');
+      $(".read-more a").click();
+      jasmine.Clock.tick(200);
+      expect($(".read-more a").css('display').toEqual('none');
+      expect($(".re-collapse a").css('display')).toEqual('inline');
+      expect($(".details").css('display')).toEqual('inline');
+    });
   });
 
   describe("toggleComments", function() {
diff --git a/spec/javascripts/support/jasmine.yml b/spec/javascripts/support/jasmine.yml
index 707fb41ad..db177e801 100644
--- a/spec/javascripts/support/jasmine.yml
+++ b/spec/javascripts/support/jasmine.yml
@@ -16,6 +16,7 @@ src_files:
   - public/javascripts/vendor/jquery.tipsy.js
   - public/javascripts/jquery.infieldlabel-custom.js
   - public/javascripts/vendor/jquery.autoresize.min.js
+  - public/javascripts/vendor/jquery.expander.js
   - public/javascripts/vendor/Mustache.js
   - public/javascripts/vendor/charCount.js
   - public/javascripts/vendor/timeago.js