toggle all nsfw posts

config/locales/javascript/javascript.en.yml

@@ -83,7 +83,9 @@ en:
         reshare: "Reshare"
         comment: "Comment"
         original_post_deleted: "Original post deleted by author."
-        show_post: "Show post"
+        show_nsfw_post: "Show post"
+        show_nsfw_posts: "Show all"
+        hide_nsfw_posts: "Hide #nsfw posts"
         follow: "Follow"
         unfollow: "Unfollow"
 

features/not_safe_for_work.feature

@@ -14,14 +14,30 @@ Scenario: Setting not safe for work
   And I submit the form
   Then I should see the "you are safe for work" message
 
-Scenario: NSFWs users posts are nsfw
+Scenario: Toggling nsfw state
+  #Nsfw users posts are marked nsfw
   Given a nsfw user with email "tommy@pr0nking.com"
-  And I sign in as "tommy@pr0nking.com"
-  Then I should not see "I love 0bj3ction4bl3 c0nt3nt!"
-  #And I post "I love 0bj3ction4bl3 c0nt3nt!"
-  #Then the post "I love 0bj3ction4bl3 c0nt3nt!" should be marked nsfw
+  And a user with email "laura@officeworkers.com"
+  And a user with email "laura@officeworkers.com" is connected with "tommy@pr0nking.com"
+  When I sign in as "tommy@pr0nking.com"
+  And I post "I love 0bj3ction4bl3 c0nt3nt!"
+  And I post "Sexy Senators Gone Wild!"
+  Then I should have 2 nsfw posts
 
-#  And I log out
-#  And I log in as an office worker
-#  And I am folllowing "tommy@pr0n.xxx"
-#  Then I should not see "I love 0bj3ction4bl3 c0nt3nt!" in my stream
+  #toggling global nsfw state
+  When I log out
+  And I sign in as "laura@officeworkers.com"
+  Then I should not see "I love 0bj3ction4bl3 c0nt3nt!"
+  When I toggle nsfw posts
+  Then I should see "I love 0bj3ction4bl3 c0nt3nt!"
+  And I should see "Sexy Senators Gone Wild!"
+
+  #cookies
+  #When I refresh the page
+  #Then I should see "I love 0bj3ction4bl3 c0nt3nt!"
+  #And I should see "Sexy Senators Gone Wild!"
+
+  #hiding
+  When I toggle nsfw posts
+  Then I should not see "I love 0bj3ction4bl3 c0nt3nt!"
+  And I should not see "Sexy Senators Gone Wild!"

features/step_definitions/session_steps.rb

@@ -21,13 +21,13 @@ When /^I try to sign in manually$/ do
   step %(I press "Sign in")
 end
 
-When /^I sign in as "([^"]*)"$/ do |email|
+When /^I (?:sign|log) in as "([^"]*)"$/ do |email|
   @me = User.find_by_email(email)
   @me.password ||= 'password'
   step 'I am signed in'
 end
 
-When /^I sign in with password "([^"]*)"$/ do |password|
+When /^I (?:sign|log) in with password "([^"]*)"$/ do |password|
   @me.password = password
   step 'I am signed in'
 end

features/step_definitions/stream_steps.rb

@@ -9,3 +9,11 @@ end
 Then /^"([^"]*)" should be post (\d+)$/ do |post_text, position|
   find(".stream_element:nth-child(#{position}) .post-content").text.should == post_text
 end
+
+When /^I toggle nsfw posts$/ do
+  find(".toggle_nsfw_state").click
+end
+
+Then /^I should have (\d+) nsfw posts$/ do |num_posts|
+  all(".nsfw-shield").size.should == num_posts.to_i
+end

public/javascripts/app/app.js

@@ -4,8 +4,8 @@ var app = {
   helpers: {},
   views: {},
 
-  user: function(user) {
-    if(user) { return this._user = user }
+  user: function(userAttrs) {
+    if(userAttrs) { return this._user = new app.models.User(userAttrs) }
     return this._user || false
   },
 

public/javascripts/app/models/user.js

@@ -0,0 +1,6 @@
+app.models.User = Backbone.Model.extend({
+  toggleNsfwState : function() {
+    this.set({showNsfw : !this.get("showNsfw")});
+    this.trigger("nsfwChanged");
+  }
+});

public/javascripts/app/templates/stream-element.handlebars

@@ -44,24 +44,37 @@
       </span>
     </div>
 
+    {{#if showPost}}
         {{#if nsfw}}
-      <div class="nsfw-shield">
+          <div class="nsfw_off">
             <strong>
-          NSFW
+              #NSFW
             </strong>
             |
-        <a href="#">
-          {{t "stream.show_post"}}
+            <a href="#" class="toggle_nsfw_state">
+                {{t "stream.hide_nsfw_posts"}}
             </a>
           </div>
-
-    {{else}}
-
+        {{/if}}
       <div class="post-content"> </div>
 
       <div class="feedback"> </div>
       <div class="likes"> </div>
       <div class="comments"> </div>
+    {{else}}
+      <div class="nsfw-shield">
+        <strong>
+          #NSFW
+        </strong>
+        |
+        <a href="#" class="show_nsfw_post">
+          {{t "stream.show_nsfw_post"}}
+        </a>
+        |
+        <a href="#" class="toggle_nsfw_state">
+          {{t "stream.show_nsfw_posts"}}
+        </a>
+      </div>
     {{/if}}
 
   </div>

public/javascripts/app/views.js

@@ -11,7 +11,7 @@ app.views.Base =  Backbone.View.extend({
 
   defaultPresenter : function(){
     var modelJson = this.model ? this.model.toJSON() : {}
-    return _.extend(modelJson, {current_user: app.user()});
+    return _.extend(modelJson, {current_user: app.user().attributes});
   },
 
   render : function() {

public/javascripts/app/views/comment_view.js

@@ -16,11 +16,11 @@ app.views.Comment = app.views.Content.extend({
   },
 
   ownComment : function() {
-    return this.model.get("author").diaspora_id == app.user().diaspora_id
+    return this.model.get("author").diaspora_id == app.user().get("diaspora_id")
   },
 
   postOwner : function() {
-    return this.model.get("parent").author.diaspora_id == app.user().diaspora_id
+    return this.model.get("parent").author.diaspora_id == app.user().get("diaspora_id")
   },
 
   canRemove : function() {

public/javascripts/app/views/feedback_view.js

@@ -43,8 +43,8 @@ app.views.Feedback = app.views.StreamObject.extend({
     var rootExists = (isReshare ? this.model.get("root") : true)
 
     var publicPost = this.model.get("public");
-    var userIsNotAuthor = this.model.get("author").diaspora_id != app.user().diaspora_id;
-    var userIsNotRootAuthor = rootExists && (isReshare ? this.model.get("root").author.diaspora_id != app.user().diaspora_id : true)
+    var userIsNotAuthor = this.model.get("author").diaspora_id != app.user().get("diaspora_id");
+    var userIsNotRootAuthor = rootExists && (isReshare ? this.model.get("root").author.diaspora_id != app.user().get("diaspora_id") : true)
 
     return publicPost && userIsNotAuthor && userIsNotRootAuthor;
   }

public/javascripts/app/views/post_view.js

@@ -6,7 +6,9 @@ app.views.Post = app.views.StreamObject.extend({
 
   events: {
     "click .focus_comment_textarea": "focusCommentTextarea",
-    "click .nsfw-shield a": "removeNsfwShield",
+    "click .show_nsfw_post": "removeNsfwShield",
+    "click .toggle_nsfw_state": "toggleNsfwState",
+
     "click .remove_post": "destroyModel",
     "click .hide_post": "hidePost",
     "click .block_user": "blockUser"
@@ -49,15 +51,24 @@ app.views.Post = app.views.StreamObject.extend({
 
   presenter : function() {
     return _.extend(this.defaultPresenter(), {
-      authorIsCurrentUser : this.authorIsCurrentUser()
+      authorIsCurrentUser : this.authorIsCurrentUser(),
+      showPost : this.showPost()
     })
   },
 
+  showPost : function() {
+    return (app.user() && app.user().get("showNsfw")) || !this.model.get("nsfw")
+  },
+
   removeNsfwShield: function(evt){
     if(evt){ evt.preventDefault(); }
     this.model.set({nsfw : false})
     this.render();
-    return this;
+  },
+
+  toggleNsfwState: function(evt){
+    if(evt){ evt.preventDefault(); }
+    app.user().toggleNsfwState();
   },
 
   blockUser: function(evt){

public/javascripts/app/views/stream_view.js

@@ -11,12 +11,16 @@ app.views.Stream = Backbone.View.extend({
     this.setupEvents()
     this.setupInfiniteScroll()
     this.setupLightbox()
+    this.postViews = []
   },
 
   setupEvents : function(){
     this.stream.bind("fetched", this.removeLoader, this)
     this.stream.bind("allPostsLoaded", this.unbindInfScroll, this)
     this.collection.bind("add", this.addPost, this);
+    app.user().bind("nsfwChanged", function() {
+        _.map(this.postViews, function(view){ view.render() })
+      }, this)
   },
 
   addPost : function(post) {
@@ -28,6 +32,7 @@ app.views.Stream = Backbone.View.extend({
         : "append"
     ](postView.render().el);
 
+    this.postViews.push(postView)
     return this;
   },
 

public/stylesheets/sass/application.sass

@@ -2815,3 +2815,9 @@ a.toggle_selector
 .float-right
   :float right
   :margin-top 5px
+
+.nsfw_off
+  :font-size smaller
+  :color #999
+  a
+    :color #666

spec/javascripts/app/app_spec.js

@@ -5,7 +5,7 @@ describe("app", function() {
 
       app.user({name: "alice"});
 
-      expect(app.user()).toEqual({name: "alice"});
+      expect(app.user().get("name")).toEqual("alice");
     });
     
     it("returns false if the current_user isn't set", function() {

spec/javascripts/app/views/post_view_spec.js

@@ -61,23 +61,40 @@ describe("app.views.Post", function(){
     })
 
     context("NSFW", function(){
-      it("contains a shield element", function(){
+      beforeEach(function(){
         this.statusMessage.set({nsfw: true});
+        this.view = new app.views.Post({model : this.statusMessage}).render();
 
-        var view = new app.views.Post({model : this.statusMessage}).render();
-        var statusElement = $(view.el)
+        this.hiddenPosts = function(){
+           return this.view.$(".nsfw-shield")
+         }
+      });
 
-        expect(statusElement.find(".nsfw-shield").length).toBe(1)
-      })
+      it("contains a shield element", function(){
+        expect(this.hiddenPosts().length).toBe(1)
+      });
 
-      it("does not contain a shield element", function(){
+      it("does not contain a shield element when nsfw is false", function(){
         this.statusMessage.set({nsfw: false});
+        this.view.render();
+        expect(this.hiddenPosts()).not.toExist();
+      })
 
-        var view = new app.views.Post({model : this.statusMessage}).render();
-        var statusElement = $(view.el)
+      context("showing a single post", function(){
+        it("removes the shields when the post is clicked", function(){
+          expect(this.hiddenPosts()).toExist();
+          this.view.$(".nsfw-shield .show_nsfw_post").click();
+          expect(this.hiddenPosts()).not.toExist();
+        });
+      });
 
-        expect(statusElement.find(".shield").html()).toBe(null);
-      })
+      context("clicking the toggle nsfw link toggles it on the user", function(){
+        it("calls toggleNsfw on the user", function(){
+          spyOn(app.user(), "toggleNsfwState")
+          this.view.$(".toggle_nsfw_state").first().click();
+          expect(app.user().toggleNsfwState).toHaveBeenCalled();
+        });
       })
     })
   })
+});