nocebo/diaspora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix #2799 - bullet points in a post that has 'read more'

Browse source
This commit is contained in:
Sarah Mei 2012-02-01 14:30:56 -08:00
parent d8bfa52af7
commit 7389b895d6
3 changed files with 102 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
public/javascripts/app/views/stream_object_view.js
View file

@ -3,7 +3,7 @@ app.views.StreamObject = app.views.Base.extend({
this.setupRenderEvents();
},
postRenderTemplate : function(){
postRenderTemplate : function() {
// collapse long posts
this.$(".collapsible").expander({
slicePoint: 400,
@ -12,28 +12,40 @@ app.views.StreamObject = app.views.Base.extend({
expandText: Diaspora.I18n.t("show_more"),
userCollapse: false,
beforeExpand: function() {
var readMoreDiv = $(this).find('.read-more');
var lastParagraphBeforeReadMore = readMoreDiv.prev();
var firstParagraphAfterReadMore = $(readMoreDiv.next().find('p')[0]);
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();
lastParagraphBeforeReadMore.append(firstParagraphAfterReadMore.html());
if (lastElementBeforeReadMore.is('p')) {
lastElementBeforeReadMore.append(firstElementAfterReadMore.html());
firstElementAfterReadMore.remove();
firstParagraphAfterReadMore.remove();
readMoreDiv.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(); }
if(!confirm(Diaspora.I18n.t("confirm_dialog"))) { return }
destroyModel: function(evt) {
if (evt) {
evt.preventDefault();
}
if (!confirm(Diaspora.I18n.t("confirm_dialog"))) {
return
}
this.model.destroy();
this.slideAndRemove();
},
slideAndRemove : function(){
$(this.el).slideUp(400, function(){
slideAndRemove : function() {
$(this.el).slideUp(400, function() {
$(this).remove();
});
}

17
spec/controllers/jasmine_fixtures/streams_spec.rb
View file

@ -26,6 +26,23 @@ describe StreamsController do
posts << alice.post(:status_message,
:text => "LONG POST TO TEST SHOW MORE. Cardigan trust fund vice, sartorial twee pitchfork +1 quinoa whatever readymade gluten-free. Seitan brooklyn mustache quinoa carles. Gentrify ethical four loko you probably haven't heard of them 3 wolf moon helvetica. Terry richardson +1 artisan, raw denim iphone four loko leggings organic helvetica retro mcsweeney's put a bird on it skateboard 3 wolf moon. Fap skateboard high life 8-bit. Iphone ethical tumblr lo-fi, dreamcatcher irony whatever farm-to-table mustache tofu marfa. Before they sold out next level lomo farm-to-table leggings, williamsburg jean shorts messenger bag. Synth readymade Austin artisan art party, cardigan vice mustache 3 wolf moon craft beer. Messenger bag before they sold out tattooed wayfarers viral photo booth. Food truck master cleanse locavore raw denim. Sustainable master cleanse seitan, trust fund cred yr keffiyeh butcher mlkshk put a bird on it gentrify you probably haven't heard of them vinyl craft beer gluten-free. Master cleanse retro next level messenger bag craft beer. DIY leggings dreamcatcher lo-fi. Etsy carles tattooed mcsweeney's food truck DIY wolf shoreditch.",
:to => alice.aspects.first.id)
elsif i == 8
posts << alice.post(:status_message,
:to => alice.aspects.first.id,
:text => <<TXT
LONG POST TO TEST SHOW MORE WITH BULLETS.
<ul>
<li>Cardigan trust fund vice, sartorial twee pitchfork +1 quinoa whatever readymade gluten-free.</li>
<li>Seitan brooklyn mustache quinoa carles.</li>
<li>Gentrify ethical four loko you probably haven't heard of them 3 wolf moon helvetica.</li>
<li>Terry richardson +1 artisan, raw denim iphone four loko leggings organic helvetica retro mcsweeney's put a bird on it skateboard 3 wolf moon.</li>
<li>Fap skateboard high life 8-bit</li>
<li>Iphone ethical tumblr lo-fi, dreamcatcher irony whatever farm-to-table mustache tofu marfa.</li>
<li>Before they sold out next level lomo farm-to-table leggings, williamsburg jean shorts messenger bag.</li>
<li>Synth readymade Austin artisan art party, cardigan vice mustache 3 wolf moon craft beer.</li>
</ul>
TXT
)
else
posts << alice.post(:status_message, :text => "you're gonna love this.", :to => alice.aspects.first.id)
end

89
spec/javascripts/app/views/stream_view_spec.js
View file

@ -1,5 +1,5 @@
describe("app.views.Stream", function(){
beforeEach(function(){
describe("app.views.Stream", function() {
beforeEach(function() {
loginAs({name: "alice", avatar : {small : "http://avatar.com/photo.jpg"}});
this.posts = $.parseJSON(spec.readFixture("multi_stream_json"))["posts"];
@ -13,27 +13,29 @@ describe("app.views.Stream", function(){
// do this manually because we've moved loadMore into render??
this.view.render();
_.each(this.view.collection.models, function(post){ this.view.addPost(post); }, this);
_.each(this.view.collection.models, function(post) {
this.view.addPost(post);
}, this);
});
describe("initialize", function(){
it("binds an infinite scroll listener", function(){
describe("initialize", function() {
it("binds an infinite scroll listener", function() {
spyOn($.fn, "scroll");
new app.views.Stream({model : this.stream});
expect($.fn.scroll).toHaveBeenCalled();
});
});
describe("#render", function(){
beforeEach(function(){
describe("#render", function() {
beforeEach(function() {
this.statusMessage = this.stream.posts.models[0];
this.reshare = this.stream.posts.models[1];
this.statusElement = $(this.view.$("#" + this.statusMessage.get("guid")));
this.reshareElement = $(this.view.$("#" + this.reshare.get("guid")));
});
context("when rendering a status message", function(){
it("shows the message in the content area", function(){
context("when rendering a status message", function() {
it("shows the message in the content area", function() {
expect(this.statusElement.find(".post-content p").text()).toContain("LONG POST"); //markdown'ed
});
});
@ -55,30 +57,61 @@ describe("app.views.Stream", function(){
expect(this.statusElement.find('.collapsible .details').attr('style')).not.toContain('display: none;');
});
it('removes the read-more div', function() {
expect(this.statusElement.find('.read-more').length).toEqual(1);
readMoreLink.click();
expect(this.statusElement.find('.read-more').length).toEqual(0);
});
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;
it('collapses the p elements on webkit', function() {
// The expander plugin has different behavior on firefox and webkit >.<
expect(this.statusElement.find('.collapsible p').length).toEqual(2);
readMoreLink.click();
if(this.statusElement.find('.collapsible .summary').length > 0) {
// Firefox
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);
} else {
// Chrome
expect(this.statusElement.find('.collapsible p').length).toEqual(1);
}
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.$("#" + this.statusMessage.get("guid")));
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);
}
});
});
});
describe("infScroll", function(){
describe("infScroll", function() {
// NOTE: inf scroll happens at 500px
it("calls render when the user is at the bottom of the page", function(){
it("calls render when the user is at the bottom of the page", function() {
spyOn($.fn, "height").andReturn(0);
spyOn($.fn, "scrollTop").andReturn(100);
spyOn(this.view, "render");
@ -89,7 +122,7 @@ describe("app.views.Stream", function(){
});
describe("removeLoader", function() {
it("emptys the pagination div when the stream is fetched", function(){
it("emptys the pagination div when the stream is fetched", function() {
$("#jasmine_content").append($('<div id="paginate">OMG</div>'));
expect($("#paginate").text()).toBe("OMG");
this.view.stream.trigger("fetched");
@ -97,7 +130,7 @@ describe("app.views.Stream", function(){
});
});
describe("unbindInfScroll", function(){
describe("unbindInfScroll", function() {
it("unbinds scroll", function() {
spyOn($.fn, "unbind");
this.view.unbindInfScroll();