extracted "show more" part from #2941, tests still WIP

public/javascripts/app/views/comment_view.js

@@ -4,8 +4,10 @@ app.views.Comment = app.views.Content.extend({
 
   className : "comment media",
 
-  events : {
+  events : function() {
-    "click .comment_delete": "destroyModel"
+    return _.extend(app.views.Content.prototype.events, {
+      "click .comment_delete": "destroyModel"
+    });
   },
 
   presenter : function() {

public/javascripts/app/views/content_view.js

@@ -1,7 +1,8 @@
 app.views.Content = app.views.StreamObject.extend({
 
   events: {
-    "click .oembed .thumb": "showOembedContent"
+    "click .oembed .thumb": "showOembedContent",
+    "click .expander": "expandPost"
   },
   
   presenter : function(){
@@ -41,7 +42,15 @@ app.views.Content = app.views.StreamObject.extend({
     var paramSeparator = ( /\\?/.test(embedHTML.attr("href")) ) ? "&" : "?";
     embedHTML.attr("src", embedHTML.attr("src") + paramSeparator + "autoplay=1");
     oembed.html( embedHTML );
+  },
+
+  expandPost: function(evt) {
+    var el = $(this.el).find('.collapsible');
+    el.removeClass('collapsed').addClass('opened');
+    el.animate({'height':el.data('orig-height')}, 550);
+    $(evt.currentTarget).hide();
   }
+  
 });
 
 app.views.StatusMessage = app.views.Content.extend({

public/javascripts/app/views/stream_object_view.js

@@ -1,34 +1,5 @@
 app.views.StreamObject = app.views.Base.extend({
 
-  postRenderTemplate : function() {
-    // collapse long posts
-    this.$(".collapsible").expander({
-      slicePoint: 400,
-      widow: 12,
-      expandPrefix: "",
-      expandText: Diaspora.I18n.t("show_more"),
-      userCollapse: false,
-      beforeExpand: function() {
-        if ($(this).find('.summary').length == 0) { // Sigh. See comments in the spec.
-          var readMoreDiv = $(this).find('.read-more');
-          var lastElementBeforeReadMore = readMoreDiv.prev();
-          var firstElementAfterReadMore = readMoreDiv.next().children().first();
-
-          if (lastElementBeforeReadMore.is('p')) {
-            lastElementBeforeReadMore.append(firstElementAfterReadMore.html());
-            firstElementAfterReadMore.remove();
-
-          } else if (lastElementBeforeReadMore.is('ul') && firstElementAfterReadMore.is('ul')) {
-            var firstBullet = firstElementAfterReadMore.children().first();
-            lastElementBeforeReadMore.find('li').last().append(firstBullet.html());
-            firstBullet.remove();
-          }
-          readMoreDiv.remove();
-        }
-      }
-    });
-  },
-
   destroyModel: function(evt) {
     if (evt) {
       evt.preventDefault();

public/javascripts/app/views/stream_view.js

@@ -16,6 +16,7 @@ app.views.Stream = Backbone.View.extend({
 
   setupEvents : function(){
     this.stream.bind("fetched", this.removeLoader, this)
+    this.stream.bind("fetched", this.postRender, this)
     this.stream.bind("allPostsLoaded", this.unbindInfScroll, this)
     this.collection.bind("add", this.addPost, this);
     if(window.app.user()) {
@@ -52,6 +53,35 @@ app.views.Stream = Backbone.View.extend({
 
     return this;
   },
+
+  postRender : function() {
+    // collapse long posts
+    var collHeight = 190,
+        collElem = $(this.el).find(".collapsible");
+
+    _.each(collElem, function(elem) {
+      var elem = $(elem),
+          oembed = elem.find(".oembed"),
+          addHeight = 0;
+
+      if( $.trim(oembed.html()) != "" ) {
+        addHeight = oembed.height();
+      }
+
+      // only collapse if height exceeds collHeight+20%
+      if( elem.height() > ((collHeight*1.2)+addHeight) && !elem.is(".opened") ) {
+        elem.data("orig-height", elem.height() );
+        elem
+          .height( Math.max(collHeight, addHeight) )
+          .addClass("collapsed")
+          .append(
+            $('<div />')
+              .addClass('expander')
+              .text( Diaspora.I18n.t("show_more") )
+          );
+      }
+    });
+  },
   
   appendLoader: function(){
     $("#paginate").html($("<img>", {

public/stylesheets/sass/application.sass

@@ -1828,6 +1828,26 @@ ul#press_logos
     :color #777
 
   .collapsible
+    :overflow hidden
+    :position relative
+
+    .expander
+      :position absolute
+      :bottom 0
+      :left 0
+      :right 0
+      :height 30px
+      :text-align center
+      :line-height 48px
+      :font-size .8em
+      :color $grey
+      :text-shadow 0 0 7px #FFF
+      :cursor pointer
+      :border-bottom 2px solid #DDD
+      @include border-radius(0, 0, 3px, 3px)
+      @include linear-gradient(rgba(255,255,255,0) , #EEE, 0%, 95%)
+      :background-color transparent
+
     .oembed
       :background url('/images/ajax-loader2.gif') no-repeat center center
 

spec/javascripts/app/views/stream_view_spec.js

@@ -45,64 +45,21 @@ describe("app.views.Stream", function() {
     beforeEach(function() {
       this.statusMessage = this.stream.posts.models[0];
       this.statusElement = $(this.view.$(".stream_element")[0]);
-      readMoreLink = this.statusElement.find('.read-more a');
+      readMoreLink = this.statusElement.find('.expander');
       readMoreLink.text("read more");
+
+      $(this.view.el).find('.collapsible').css('width', 400); // make content narrow like in real stream
+      setFixtures(this.view.el);
+      this.view.postRender();
     });
 
     it('expands the post', function() {
-      expect(this.statusElement.find('.collapsible .details').attr('style')).toContain('display: none;');
+      // TODO
+      var textElement = this.statusElement.find('.collapsible');
+      expect(textElement.hasClass('collapsed')).toBeTruthy();
       readMoreLink.click();
-      expect(this.statusElement.find('.collapsible .details').attr('style')).not.toContain('display: none;');
+      expect(textElement.hasClass('collapsed')).toBeFalsy();
-    });
+      expect(textElement.hasClass('opened')).toBeTruthy();
-
-    describe('differences between firefox and webkit/IE', function() {
-      // Firefox creates 2 divs - one with the summary and one with the whole post.
-      //   It hides the summary and shows the whole post when you click show more. Works great!
-      // Webkit and IE also create 2 divs, but they split the post - the 1st has the summary and the 2nd has the rest
-      //   of the post. When you click read more, it just shows the 2nd div. This leaves whitespace in odd places.
-      //   So there's a callback that this is testing, that fixes the whitespace on webkit & IE.
-      var weAreOnFirefox;
-
-      beforeEach(function() {
-        weAreOnFirefox = this.statusElement.find('.collapsible .summary').length > 0;
-      });
-
-      it('removes the read-more div on webkit/IE but leaves it on firefox', function() {
-        expect(this.statusElement.find('.read-more').length).toEqual(1);
-        readMoreLink.click();
-        if (weAreOnFirefox === true) {
-          expect(this.statusElement.find('.read-more').length).toEqual(1);
-        } else {
-          expect(this.statusElement.find('.read-more').length).toEqual(0);
-        }
-      });
-
-      it('collapses p elements on webkit/IE but leaves them alone on firefox', function() {
-        expect(this.statusElement.find('.collapsible p').length).toEqual(2);
-        readMoreLink.click();
-        if (weAreOnFirefox === true) {
-          expect(this.statusElement.find('.collapsible p').length).toEqual(2);
-        } else {
-          expect(this.statusElement.find('.collapsible p').length).toEqual(1);
-        }
-      });
-
-      it('collapses li elements on webkit/IE but leaves them alone on firefox', function() {
-        this.statusMessage = this.stream.posts.models[3];
-        this.statusElement = $(this.view.$(".stream_element")[3]);
-        readMoreLink = this.statusElement.find('.read-more a');
-        readMoreLink.text("read more");
-
-        if (weAreOnFirefox === true) {
-          expect(this.statusElement.find('.collapsible li').length).toEqual(12);
-          readMoreLink.click();
-          expect(this.statusElement.find('.collapsible li').length).toEqual(12);
-        } else {
-          expect(this.statusElement.find('.collapsible li').length).toEqual(9);
-          readMoreLink.click();
-          expect(this.statusElement.find('.collapsible li').length).toEqual(8);
-        }
-      });
     });
   });