From 04786bc43ee6948f3f1e656eca39c687682524c1 Mon Sep 17 00:00:00 2001 From: Gonzalo Rodriguez Date: Thu, 8 Sep 2011 02:01:14 -0300 Subject: [PATCH] Improvements on aspect navigation rework --- app/views/aspects/_aspect_listings.haml | 4 +- config/locales/javascript/javascript.en.yml | 3 + features/posts_from_main_page.feature | 12 +-- .../javascripts/widgets/aspect-navigation.js | 77 +++++++++++++------ public/stylesheets/sass/application.sass | 7 ++ 5 files changed, 71 insertions(+), 32 deletions(-) diff --git a/app/views/aspects/_aspect_listings.haml b/app/views/aspects/_aspect_listings.haml index 2c8b82d9f..3addc47b7 100644 --- a/app/views/aspects/_aspect_listings.haml +++ b/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"])} - = t('aspects.index.your_aspects') + .root_element= 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 diff --git a/config/locales/javascript/javascript.en.yml b/config/locales/javascript/javascript.en.yml index 427da07de..79127ca5c 100644 --- a/config/locales/javascript/javascript.en.yml +++ b/config/locales/javascript/javascript.en.yml @@ -53,3 +53,6 @@ en: hide: "hide comments" reshares: duplicate: "You've already reshared that post!" + aspect_navigation: + select_all: "Select all" + deselect_all: "Deselect all" diff --git a/features/posts_from_main_page.feature b/features/posts_from_main_page.feature index 10489a3fc..b1e69d5f2 100644 --- a/features/posts_from_main_page.feature +++ b/features/posts_from_main_page.feature @@ -22,7 +22,7 @@ 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 @@ -38,7 +38,7 @@ Feature: posting from the main 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 go to the aspects page And I follow "NotPostingTo" within "#aspect_nav" And I wait for the ajax to finish Then I should not see "I am eating a yogurt" @@ -49,7 +49,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 +65,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 +130,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" diff --git a/public/javascripts/widgets/aspect-navigation.js b/public/javascripts/widgets/aspect-navigation.js index 99d057301..5aa4e38c4 100644 --- a/public/javascripts/widgets/aspect-navigation.js +++ b/public/javascripts/widgets/aspect-navigation.js @@ -11,38 +11,59 @@ $.extend(self, { aspectNavigation: aspectNavigation, aspectSelectors: aspectNavigation.find("a.aspect_selector[data-guid]"), - homeSelector: aspectNavigation.find("a.home_selector"), + toggleSelector: aspectNavigation.find("a.toggle_selector") }); - - self.aspectSelectors.click(self.toggleSelection); + + self.initializeSelectedAspects(); + self.calculateToggleText(); + self.aspectSelectors.click(self.toggleAspect); self.aspectSelectors.debounce("click", self.performAjax, 250); - self.homeSelector.click(self.selectAll); + 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.toggleSelection = function(evt) { - evt.preventDefault(); - - $(this).parent().toggleClass("active"); + + this.initializeSelectedAspects = function() { + self.aspectSelectors.each(function() { + guid = $(this).data('guid'); + if (guid && location.href.search("a_ids..=" + guid + "(#|&|$)") != -1) + $(this).parent().addClass('active'); + }); }; - this.selectAll = function(evt) { + this.toggleAspect = function(evt) { evt.preventDefault(); - + + $(this).parent().toggleClass("active"); + self.calculateToggleText(); + }; + + this.toggleAll = function(evt) { + evt.preventDefault(); + var aspectLis = self.aspectSelectors.parent(); - + if (aspectLis.not(".active").length === 0) { aspectLis.removeClass("active"); - + self.abortAjax(); } else { - aspectLis.addClass("active"); + aspectLis.addClass("active"); self.performAjax(); } + self.calculateToggleText(); }; - + + this.calculateToggleText = function() { + var aspectLis = self.aspectSelectors.parent(); + if (aspectLis.not(".active").length === 0) { + 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]; @@ -66,12 +87,12 @@ } return baseURL; }; - + this.performAjax = function() { var post = $("#publisher textarea").val(), newURL = self.generateURL(), photos = {}; - + //pass photos $('#photodropzone img').each(function() { var img = $(this); @@ -81,12 +102,12 @@ if (typeof(history.pushState) == 'function') { history.pushState(null, document.title, newURL); } - + if(self.jXHR) { self.jXHR.abort(); self.jXHR = null; } - + self.fadeOut(); self.jXHR = $.getScript(newURL, function(data) { var textarea = $("#publisher textarea"), @@ -95,7 +116,7 @@ if( post !== "" ) { textarea.val(post).focus(); } - + $.each(photos, function(GUID, URL) { photozone.append([ '
  • ', @@ -103,17 +124,25 @@ '
    • ' ].join("")); }); - + self.globalPublish("stream/reloaded"); self.fadeIn(); }); }; - + + this.abortAjax = function() { + if (self.jXHR) { + self.jXHR.abort(); + self.jXHR = null; + } + self.fadeIn(); + }; + 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); diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index e55cb4554..19a0adf93 100644 --- a/public/stylesheets/sass/application.sass +++ b/public/stylesheets/sass/application.sass @@ -2920,12 +2920,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,