Merge branch 'aspect_nav_rework'

app/views/aspects/_aspect_listings.haml

@@ -4,10 +4,10 @@
 
 %ul#aspect_nav.left_nav
   %li.all_aspects{:class => ("active" if params["set"] != "all" && params["set"] != "only_sharing" && !@featured && !@finder)}
-    %a.home_selector{:href => aspects_path, :class => ("sub_selected" if params["a_id"])}
+    .root_element= t('aspects.index.your_aspects')
-      = t('aspects.index.your_aspects')
 
     %ul.sub_nav
+      %a.toggle_selector{:href => '#'}
       - for aspect in all_aspects
         %li{:data => {:aspect_id => aspect.id}, :class => ("active" if params["a_id"].to_i == aspect.id)}
           .edit

config/assets.yml

@@ -55,7 +55,6 @@ javascripts:
     - public/javascripts/friend-finder.js
   home:
     - public/javascripts/publisher.js
-    - public/javascripts/aspect-filters.js
     - public/javascripts/aspect-edit-pane.js
     - public/javascripts/fileuploader-custom.js
   people:

config/locales/javascript/javascript.en.yml

@@ -53,3 +53,7 @@ en:
         hide: "hide comments"
       reshares:
         duplicate: "You've already reshared that post!"
+      aspect_navigation:
+        select_all: "Select all"
+        deselect_all: "Deselect all"
+        no_aspects: "No aspects selected"

features/comments.feature

@@ -62,8 +62,7 @@ Feature: commenting
     When I focus the comment field
     Then the first comment field should be open
 
-    When I follow "Besties"
+    When I select "Besties" aspect
-    And I wait for the ajax to finish
     Then I should see "Look at this dog"
     Then the first comment field should be closed
     When I focus the comment field

features/connects_users.feature

@@ -47,7 +47,6 @@ Feature: following and being followed
     And I add the person to my "Unicorns" aspect
 
     When I go to the home page
-    When I follow "Your Aspects"
 
     Then I should have 1 contact in "Unicorns"
     Then I should have 1 contact in "Besties"
@@ -59,7 +58,6 @@ Feature: following and being followed
     Then I go to the destroy user session page
 
     When I sign in as "bob@bob.bob"
-    When I follow "Your Aspects"
     Then I should have 1 contacts in "Besties"
 
     When I am on the home page

features/mentions_from_profile_page.feature

@@ -32,7 +32,7 @@ Feature: mentioning a contact from their profile page
       And I wait for the ajax to finish
       Then I should see "I am eating a yogurt"
 
-      When I follow "Your Aspects" within "#aspect_nav"
+      When I am on the aspects page
       And I follow "NotPostingThingsHere" within "#aspect_nav"
       And I wait for the ajax to finish
       Then I should see "I am eating a yogurt"
@@ -50,11 +50,13 @@ Feature: mentioning a contact from their profile page
       And I press "Share" in the modal window
 
       When I am on the aspects page
+      And I follow "Deselect all" within "#aspect_nav"
       And I follow "PostingTo" within "#aspect_nav"
       And I wait for the ajax to finish
       Then I should see "I am eating a yogurt"
 
-      When I follow "Your Aspects" within "#aspect_nav"
+      When I am on the aspects page
+      And I follow "Deselect all" within "#aspect_nav"
       And I follow "NotPostingThingsHere" within "#aspect_nav"
       And I wait for the ajax to finish
       Then I should not see "I am eating a yogurt"

features/posts_from_main_page.feature

@@ -22,25 +22,22 @@ Feature: posting from the main page
       Given I expand the publisher
       When I fill in "status_message_fake_text" with "I am eating a yogurt"
       And I press "Share"
-      And I follow "Your Aspects"
+      And I go to the aspects page
       Then I should see "I am eating a yogurt" within ".stream_element"
 
     Scenario: post a text-only message to just one aspect
-      When I follow "PostingTo"
+      When I select "PostingTo" aspect
-      And I wait for the ajax to finish
       And I expand the publisher
       And I fill in "status_message_fake_text" with "I am eating a yogurt"
       And I press "Share"
       And I wait for the ajax to finish
 
       When I am on the aspects page
-      And I follow "PostingTo" within "#aspect_nav"
+      And I select "PostingTo" aspect
-      And I wait for the ajax to finish
       Then I should see "I am eating a yogurt"
 
-      When I follow "Your Aspects" within "#aspect_nav"
+      When I am on the aspects page
-      And I follow "NotPostingThingsHere" within "#aspect_nav"
+      And I select "NotPostingThingsHere" aspect
-      And I wait for the ajax to finish
       Then I should not see "I am eating a yogurt"
 
     Scenario: post a photo with text
@@ -49,7 +46,7 @@ Feature: posting from the main page
       And I fill in "status_message_fake_text" with "Look at this dog"
       And I press "Share"
       And I wait for the ajax to finish
-      And I follow "Your Aspects"
+      And I go to the aspects page
       Then I should see a "img" within ".stream_element div.photo_attachments"
       And I should see "Look at this dog" within ".stream_element"
       Then I log out
@@ -65,7 +62,7 @@ Feature: posting from the main page
       Then I should see an uploaded image within the photo drop zone
       And I press "Share"
       And I wait for the ajax to finish
-      And I follow "Your Aspects"
+      And I go to the aspects page
       Then I should see a "img" within ".stream_element div.photo_attachments"
       Then I log out
       And I sign in as "alice@alice.alice"
@@ -130,10 +127,10 @@ Feature: posting from the main page
       And I press "Share"
       And I wait for the ajax to finish
 
-      When I follow "Your Aspects"
+      When I go to the aspects page
       And I hover over the ".stream_element"
       And I preemptively confirm the alert
       And I click to delete the first post
       And I wait for the ajax to finish
-      And I follow "Your Aspects"
+      And I go to the aspects page
       Then I should not see "I am eating a yogurt"

features/reshare.feature

@@ -49,9 +49,8 @@ Feature: public repost
     And I go to the home page
     And I wait for the ajax to finish
     Then I should see a ".reshare"
-    And I follow "Your Aspects"
+    And I should see "reshare this!"
-    Then I should see "reshare this!" 
+    And I should see a ".reshare"
-    Then I should see a ".reshare"
     And I should see "Bob"
 
   Scenario: I can delete a post that has been reshared 
@@ -63,10 +62,8 @@ Feature: public repost
 
     And I go to the home page
     Then I should see a ".reshare"
-
+    And I should see "reshare this!"
-    When I follow "Your Aspects"
+    And I should see a ".reshare"
-    Then I should see "reshare this!" 
-    Then I should see a ".reshare"
     And I should see "Bob"
 
     When I go to the destroy user session page
@@ -88,8 +85,7 @@ Feature: public repost
 
     When I go to the home page
     Then I should see a ".reshare"
-    When I follow "Your Aspects"
+    And I should see "reshare this!"
-    Then I should see "reshare this!" 
     And I should see a ".reshare"
     And I should see "Bob"
 

features/step_definitions/aspects_steps.rb

@@ -0,0 +1,14 @@
+When /^I click on "([^"]*)" aspect edit icon$/ do |aspect_name|
+  When %{I hover over the "ul.sub_nav > li:contains('#{aspect_name}')"}
+  within("#aspect_nav") do
+    find(:xpath, "//a[@rel='facebox'][.//img[@title='Edit #{aspect_name}']]").click
+  end
+end
+
+When /^I select "([^"]*)" aspect$/ do |aspect_name|
+  within('#aspect_nav') do
+    click_link 'Deselect all'
+    click_link aspect_name
+  end
+  And %{I wait for the ajax to finish}
+end

features/step_definitions/custom_web_steps.rb

@@ -193,13 +193,6 @@ When /^I resize my window to 800x600$/ do
   JS
 end
 
-When /^I click on "([^"]*)" aspect edit icon$/ do |aspect_name|
-  When %{I hover over the "ul.sub_nav > li:contains('#{aspect_name}')"}
-  within("#aspect_nav") do
-    find(:xpath, "//a[@rel='facebox'][.//img[@title='Edit #{aspect_name}']]").click
-  end
-end
-
 Then /^I follow Edit Profile in the same window$/ do 
   page.execute_script("$('a[href=\"#{edit_profile_path}\"]').removeAttr('target')")
 

public/javascripts/aspect-filters.js

@@ -1,173 +0,0 @@
-/*   Copyright (c) 2010-2011, Diaspora Inc.  This file is
- *   licensed under the Affero General Public License version 3 or later.  See
- *   the COPYRIGHT file.
- */
-
-var AspectFilters = {
-  selectedGUIDS: [],
-  activeRequest: null,
-  initialize: function(){
-    AspectFilters.initializeSelectedGUIDS();
-    AspectFilters.interceptAspectLinks();
-    AspectFilters.interceptAspectNavLinks();
-  },
-  initializeSelectedGUIDS: function(){
-    $("#aspect_nav .aspect_selector").each(function(){
-      var button = $(this),
-          guid = button.attr('data-guid');
-
-      if(guid && location.href.search("a_ids..="+guid+"(#|&|$)") != -1){
-        button.parent().addClass('active');
-        AspectFilters.selectedGUIDS.push(guid);
-        $("#aspect_nav li.all_aspects").removeClass('active');
-      }
-    });
-  },
-  interceptAspectLinks: function(){
-    $("a.hard_aspect_link").live("click", AspectFilters.aspectLinkClicked);
-  },
-  aspectLinkClicked: function(e){
-    var link = $(this);
-    e.preventDefault();
-    if( !link.hasClass('aspect_selector') ){
-      AspectFilters.switchToAspect(link);
-    }
-
-    // remove focus
-    this.blur();
-
-    $('html, body').animate({scrollTop:0}, 'fast');
-  },
-  switchToAspect: function(aspectLi){
-    var guid = aspectLi.attr('data-guid');
-
-    // select correct aspect in filter list & deselect others
-    $("#aspect_nav li.active").removeClass('active');
-    aspectLi.addClass('active');
-
-    AspectFilters.fadeOut();
-
-    AspectFilters.performAjax( aspectLi.attr('href'));
-  },
-  interceptAspectNavLinks: function(){
-    $("#aspect_nav a.aspect_selector").click(function(e){
-      e.preventDefault();
-
-      // loading animation
-      AspectFilters.fadeOut();
-
-      // filtering //////////////////////
-      var $this = $(this),
-          listElement = $this.parent(),
-          guid = $this.attr('data-guid'),
-          homeListElement = $("#aspect_nav li.all_aspects");
-
-      if( listElement.hasClass('active') ){
-        // remove filter
-        var idx = AspectFilters.selectedGUIDS.indexOf( guid );
-        if( idx != -1 ){
-          AspectFilters.selectedGUIDS.splice(idx,1);
-        }
-        listElement.removeClass('active');
-
-        if(AspectFilters.selectedGUIDS.length === 0){
-          homeListElement.addClass('active');
-        }
-
-      } else {
-        // append filter
-        if(AspectFilters.selectedGUIDS.indexOf( guid == 1)){
-          AspectFilters.selectedGUIDS.push( guid );
-        }
-        listElement.addClass('active');
-
-        homeListElement.removeClass('active');
-      }
-
-       AspectFilters.performAjax(AspectFilters.generateURL());
-    });
-  },
-  generateURL: function(){
-    var baseURL = location.href.split("?")[0];
-
-    // generate new url
-    baseURL = baseURL.replace('#','');
-    baseURL += '?';
-    for(i=0; i < AspectFilters.selectedGUIDS.length; i++){
-      baseURL += 'a_ids[]='+ AspectFilters.selectedGUIDS[i] +'&';
-    }
-
-    if(!$("#publisher").hasClass("closed")) {
-      // open publisher
-      baseURL += "op=true";
-    } else {
-      // slice last '&'
-      baseURL = baseURL.slice(0,baseURL.length-1);
-    }
-    return baseURL;
-  },
-  performAjax: function(newURL) {
-    var post = $("#publisher textarea").val(),
-        photos = {};
-
-    //pass photos
-    $('#photodropzone img').each(function(){
-      var img = $(this);
-      var guid = img.attr('data-id');
-      var url = img.attr('src');
-      photos[guid] = url;
-    });
-
-    // set url
-    // some browsers (Firefox for example) don't support pushState
-    if (typeof(history.pushState) == 'function') {
-      history.pushState(null, document.title, newURL);
-    }
-
-    try {
-      AspectFilters.activeRequest.abort();
-    } catch(e) {} finally {
-      AspectFilters.activeRequest = null;
-    }
-    AspectFilters.activeRequest = $.ajax({
-      url : newURL,
-      dataType : 'script',
-      success  : function(data){
-        // fill in publisher
-        // (not cached because this element changes)
-
-        var textarea = $("#publisher textarea");
-        var photozone = $('#photodropzone');
-
-        if( post !== "" ) {
-          textarea.val(post);
-          textarea.focus();
-        }
-
-        var photos_html = "";
-        for(var key in photos){
-          $("#publisher textarea").addClass("with_attachments");
-          photos_html = photos_html + "<li style='position:relative;'> " + ("<img src='" + photos[key] +"' data-id='" + key + "'>") +  "</li>";
-        }
-
-        // reinit listeners on stream
-        photozone.html(photos_html);
-        Diaspora.page.publish("stream/reloaded");
-
-        // fade contents back in
-        AspectFilters.fadeIn();
-      }
-    });
-  },
-  fadeIn: function(){
-    $("#aspect_stream_container").fadeTo(100, 1);
-    $("#aspect_contact_pictures").fadeTo(100, 1);
-  },
-  fadeOut: function(){
-    $("#aspect_stream_container").fadeTo(100, 0.4);
-    $("#aspect_contact_pictures").fadeTo(100, 0.4);
-  }
-}
-$(document).ready(function(){
-  AspectFilters.initialize();
-});

public/javascripts/pages/aspects-index.js

@@ -2,6 +2,7 @@ Diaspora.Pages.AspectsIndex = function() {
   var self = this;
 
   this.subscribe("page/ready", function(evt, document) {
+    self.aspectNavigation = self.instantiate("AspectNavigation", document.find("ul#aspect_nav"));
     self.stream = self.instantiate("Stream", document.find("#aspect_stream_container"));
     self.infiniteScroll = self.instantiate("InfiniteScroll");
   });

public/javascripts/publisher.js

@@ -376,9 +376,9 @@ var Publisher = {
   },
   onSuccess: function(data, json, xhr){
     if (Publisher.bookmarklet == false) {
-      var isPostVisible = AspectFilters.selectedGUIDS.length == 0;
+      var isPostVisible = Diaspora.page.aspectNavigation.selectedAspects().length == 0;
       var postedTo = Publisher.selectedAspectIds();
-      $.each(AspectFilters.selectedGUIDS, function(index, value){
+      $.each(Diaspora.page.aspectNavigation.selectedAspects(), function(index, value) {
         if (postedTo.indexOf(parseInt(value)) > -1)
           isPostVisible = true;
       });

public/javascripts/widgets/aspect-navigation.js

@@ -0,0 +1,162 @@
+/*   Copyright (c) 2010, Diaspora Inc.  This file is
+ *   licensed under the Affero General Public License version 3 or later.  See
+ *   the COPYRIGHT file.
+ */
+
+(function() {
+  Diaspora.Widgets.AspectNavigation = function() {
+    var self = this;
+
+    this.subscribe("widget/ready", function(evt, aspectNavigation) {
+      $.extend(self, {
+        aspectNavigation: aspectNavigation,
+        aspectSelectors: aspectNavigation.find("a.aspect_selector[data-guid]"),
+        aspectLis: aspectNavigation.find("li[data-aspect_id]"),
+        toggleSelector: aspectNavigation.find("a.toggle_selector")
+      });
+
+      self.initializeSelectedAspects();
+      self.calculateToggleText();
+      self.aspectSelectors.click(self.toggleAspect);
+      self.toggleSelector.click(self.toggleAll);
+    });
+
+    this.selectedAspects = function() {
+      return self.aspectNavigation.find("li.active[data-aspect_id]").map(function() { return $(this).data('aspect_id') });
+    };
+
+    this.initializeSelectedAspects = function() {
+      if (location.href.search("a_ids..=") == -1) {
+        self.aspectLis.addClass("active");
+      } else {
+        self.aspectSelectors.each(function() {
+          guid = $(this).data('guid');
+          if (guid && location.href.search("a_ids..=" + guid + "(#|&|$)") != -1)
+            $(this).parent().addClass('active');
+        });
+      }
+    };
+
+    this.toggleAspect = function(evt) {
+      evt.preventDefault();
+
+      $(this).parent().toggleClass("active");
+      self.perform();
+    };
+
+    this.toggleAll = function(evt) {
+      evt.preventDefault();
+
+      if (self.allSelected()) {
+        self.aspectLis.removeClass("active");
+      } else {
+        self.aspectLis.addClass("active");
+      }
+      self.perform();
+    };
+
+    this.perform = function() {
+      if (self.noneSelected()) {
+        self.abortAjax();
+        Diaspora.page.stream.empty();
+        Diaspora.page.stream.setHeaderTitle(Diaspora.I18n.t('aspect_navigation.no_aspects'));
+        self.fadeIn();
+      } else {
+        self.performAjax();
+      }
+      self.calculateToggleText();
+    };
+
+    this.calculateToggleText = function() {
+      if (self.allSelected()) {
+        self.toggleSelector.text(Diaspora.I18n.t('aspect_navigation.deselect_all'));
+      } else {
+        self.toggleSelector.text(Diaspora.I18n.t('aspect_navigation.select_all'));
+      }
+    };
+
+    this.generateURL = function() {
+      var baseURL = location.href.split("?")[0];
+
+      // generate new url
+      baseURL = baseURL.replace('#','');
+      baseURL += '?';
+
+      self.aspectLis.each(function() {
+        var aspectLi = $(this);
+        if (aspectLi.hasClass("active")) {
+          baseURL += "a_ids[]=" + aspectLi.data("aspect_id") + "&";
+        }
+      });
+
+      if(!$("#publisher").hasClass("closed")) {
+        // open publisher
+        baseURL += "op=true";
+      } else {
+        // slice last '&'
+        baseURL = baseURL.slice(0,baseURL.length-1);
+      }
+      return baseURL;
+    };
+
+    this.performAjax = function() {
+      var post = $("#publisher textarea").val(),
+        newURL = self.generateURL(),
+        photos = {};
+
+      //pass photos
+   	  $('#photodropzone img').each(function() {
+        var img = $(this);
+        photos[img.attr("data-id")] = img.attr("src");
+      });
+
+      self.abortAjax();
+      self.fadeOut();
+
+      self.jXHR = $.getScript(newURL, function(data) {
+        var textarea = $("#publisher textarea"),
+          photozone = $("#photodropzone");
+
+        if( post !== "" ) {
+          textarea.val(post).focus();
+        }
+
+        $.each(photos, function(GUID, URL) {
+          photozone.append([
+            '<li style="position: relative;">',
+              '<img src="' + URL + ' data-id="' + GUID + '/>',
+            '</li>'
+          ].join(""));
+        });
+
+        self.globalPublish("stream/reloaded");
+        self.fadeIn();
+      });
+    };
+
+    this.abortAjax = function() {
+      if (self.jXHR) {
+        self.jXHR.abort();
+        self.jXHR = null;
+      }
+    };
+
+    this.noneSelected = function() {
+      return self.aspectLis.filter(".active").length === 0;
+    }
+
+    this.allSelected = function() {
+      return self.aspectLis.not(".active").length === 0;
+    }
+
+    this.fadeOut = function() {
+      $("#aspect_stream_container").fadeTo(100, 0.4);
+      $("#selected_aspect_contacts").fadeTo(100, 0.4);
+    };
+
+    this.fadeIn = function() {
+      $("#aspect_stream_container").fadeTo(100, 1);
+      $("#selected_aspect_contacts").fadeTo(100, 1);
+    };
+  };
+})();

public/javascripts/widgets/stream.js

@@ -5,7 +5,9 @@
 
     this.subscribe("widget/ready", function(evt, stream) {
       $.extend(self, {
-        stream: $(stream)
+        stream: $(stream),
+        mainStream: $(stream).find('#main_stream'),
+        headerTitle: $(stream).find('#aspect_stream_header > h3')
       });
 
       $.each(self.stream.find(".stream_element"), function() {
@@ -31,6 +33,15 @@
     this.addPost = function(post) {
       self.streamElements[post.attr("id")] = self.instantiate("StreamElement", post);
     };
+
+    this.empty = function() {
+      self.mainStream.empty();
+      self.headerTitle.text(Diaspora.I18n.t('stream.no_aspects'));
+    };
+
+    this.setHeaderTitle = function(newTitle) {
+      self.headerTitle.text(newTitle);
+    };
   };
 
   Diaspora.Widgets.Stream = Stream;

public/stylesheets/sass/application.sass

@@ -2923,12 +2923,19 @@ ul.left_nav
       :width 155px
 
     a.aspect_selector,
+    a.toggle_selector,
     .new_aspect,
     a.tag_selector
       :padding
         :left 15px
       :width 182px
 
+    a.toggle_selector
+      :outline none
+      :color #999
+      :font
+        :size 95%
+
 .section
   .left_nav
     a.aspect_selector,

spec/javascripts/aspect-filters-spec.js

@@ -1,13 +0,0 @@
-/*   Copyright (c) 2010-2011, Diaspora Inc.  This file is
-*   licensed under the Affero General Public License version 3 or later.  See
-*   the COPYRIGHT file.
-*/
-
-describe('AspectFilters', function(){
-  it('initializes selectedGUIDS', function(){
-    expect(AspectFilters.selectedGUIDS).toEqual([]);
-  });
-  it('initializes activeRequest', function(){
-    expect(AspectFilters.activeRequest).toEqual(null);
-  });
-});

spec/javascripts/support/jasmine.yml

@@ -40,7 +40,6 @@ src_files:
   - public/javascripts/stream.js
   - public/javascripts/validation.js
   - public/javascripts/rails.js
-  - public/javascripts/aspect-filters.js
   - public/javascripts/aspects-dropdown.js
   - public/javascripts/content-updater.js
   - public/javascripts/tag-followings.js