From 2057c8fcf112d466902af8a6c90c9d3601c37565 Mon Sep 17 00:00:00 2001 From: Dan Hansen & Gonzalo Rodriguez Date: Mon, 5 Sep 2011 02:02:07 -0300 Subject: [PATCH 1/9] Aspect navigation rework started.. ToDo: * Fix failing posts cuke, seems to be timing issue * Populate stream title when no aspects selected * All aspects selected by default? --- config/assets.yml | 1 - public/javascripts/aspect-filters.js | 173 ------------------ public/javascripts/pages/aspects-index.js | 1 + public/javascripts/publisher.js | 8 +- .../javascripts/widgets/aspect-navigation.js | 122 ++++++++++++ spec/javascripts/aspect-filters-spec.js | 13 -- spec/javascripts/support/jasmine.yml | 1 - 7 files changed, 127 insertions(+), 192 deletions(-) delete mode 100644 public/javascripts/aspect-filters.js create mode 100644 public/javascripts/widgets/aspect-navigation.js delete mode 100644 spec/javascripts/aspect-filters-spec.js diff --git a/config/assets.yml b/config/assets.yml index b290a4fed..b3c819a50 100644 --- a/config/assets.yml +++ b/config/assets.yml @@ -62,7 +62,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: diff --git a/public/javascripts/aspect-filters.js b/public/javascripts/aspect-filters.js deleted file mode 100644 index 536ba7da6..000000000 --- a/public/javascripts/aspect-filters.js +++ /dev/null @@ -1,173 +0,0 @@ -/* Copyright (c) 2010, 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 + "
  • " + ("") + "
    • "; - } - - // 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(); -}); diff --git a/public/javascripts/pages/aspects-index.js b/public/javascripts/pages/aspects-index.js index 898db0372..071f6e4d5 100644 --- a/public/javascripts/pages/aspects-index.js +++ b/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"); }); diff --git a/public/javascripts/publisher.js b/public/javascripts/publisher.js index aa08b783c..b2c229c29 100644 --- a/public/javascripts/publisher.js +++ b/public/javascripts/publisher.js @@ -375,11 +375,11 @@ var Publisher = { } }, onSuccess: function(data, json, xhr){ - if(Publisher.bookmarklet == false){ - var isPostVisible = AspectFilters.selectedGUIDS.length == 0; + if (Publisher.bookmarklet == false) { + var isPostVisible = Diaspora.page.aspectNavigation.selectedAspects().length == 0; var postedTo = Publisher.selectedAspectIds(); - $.each(AspectFilters.selectedGUIDS, function(index, value){ - if(postedTo.indexOf(parseInt(value))>-1) + $.each(Diaspora.page.aspectNavigation.selectedAspects(), function(index, value) { + if (postedTo.indexOf(parseInt(value)) > -1) isPostVisible = true; }); diff --git a/public/javascripts/widgets/aspect-navigation.js b/public/javascripts/widgets/aspect-navigation.js new file mode 100644 index 000000000..99d057301 --- /dev/null +++ b/public/javascripts/widgets/aspect-navigation.js @@ -0,0 +1,122 @@ +/* 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]"), + homeSelector: aspectNavigation.find("a.home_selector"), + }); + + self.aspectSelectors.click(self.toggleSelection); + self.aspectSelectors.debounce("click", self.performAjax, 250); + self.homeSelector.click(self.selectAll); + }); + + 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.selectAll = function(evt) { + evt.preventDefault(); + + var aspectLis = self.aspectSelectors.parent(); + + if (aspectLis.not(".active").length === 0) { + aspectLis.removeClass("active"); + + } else { + aspectLis.addClass("active"); + self.performAjax(); + } + }; + + this.generateURL = function() { + var baseURL = location.href.split("?")[0]; + + // generate new url + baseURL = baseURL.replace('#',''); + baseURL += '?'; + + self.aspectSelectors.each(function() { + var aspectSelector = $(this); + if(aspectSelector.parent().hasClass("active")) { + baseURL += "a_ids[]=" + aspectSelector.data("guid") + "&"; + } + }); + + 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"); + }); + + 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"), + photozone = $("#photodropzone"); + + if( post !== "" ) { + textarea.val(post).focus(); + } + + $.each(photos, function(GUID, URL) { + photozone.append([ + '
  • ', + '', + '
    • ' + ].join("")); + }); + + self.globalPublish("stream/reloaded"); + 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/spec/javascripts/aspect-filters-spec.js b/spec/javascripts/aspect-filters-spec.js deleted file mode 100644 index 89bed4ced..000000000 --- a/spec/javascripts/aspect-filters-spec.js +++ /dev/null @@ -1,13 +0,0 @@ -/* Copyright (c) 2010, 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); - }); -}); diff --git a/spec/javascripts/support/jasmine.yml b/spec/javascripts/support/jasmine.yml index a26934412..bc3844754 100644 --- a/spec/javascripts/support/jasmine.yml +++ b/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 From 04786bc43ee6948f3f1e656eca39c687682524c1 Mon Sep 17 00:00:00 2001 From: Gonzalo Rodriguez Date: Thu, 8 Sep 2011 02:01:14 -0300 Subject: [PATCH 2/9] 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, From 37c67c23cf21c8527534d1c77f54c5d8f507fc2b Mon Sep 17 00:00:00 2001 From: Gonzalo Rodriguez Date: Sun, 11 Sep 2011 22:46:45 -0300 Subject: [PATCH 3/9] Add aspectLis to aspectNavigation widget --- .../javascripts/widgets/aspect-navigation.js | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/public/javascripts/widgets/aspect-navigation.js b/public/javascripts/widgets/aspect-navigation.js index 5aa4e38c4..46b5a0e0f 100644 --- a/public/javascripts/widgets/aspect-navigation.js +++ b/public/javascripts/widgets/aspect-navigation.js @@ -11,6 +11,7 @@ $.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") }); @@ -43,21 +44,18 @@ this.toggleAll = function(evt) { evt.preventDefault(); - var aspectLis = self.aspectSelectors.parent(); - - if (aspectLis.not(".active").length === 0) { - aspectLis.removeClass("active"); + if (self.aspectLis.not(".active").length === 0) { + self.aspectLis.removeClass("active"); self.abortAjax(); } else { - aspectLis.addClass("active"); + self.aspectLis.addClass("active"); self.performAjax(); } self.calculateToggleText(); }; this.calculateToggleText = function() { - var aspectLis = self.aspectSelectors.parent(); - if (aspectLis.not(".active").length === 0) { + if (self.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')); @@ -71,10 +69,10 @@ baseURL = baseURL.replace('#',''); baseURL += '?'; - self.aspectSelectors.each(function() { - var aspectSelector = $(this); - if(aspectSelector.parent().hasClass("active")) { - baseURL += "a_ids[]=" + aspectSelector.data("guid") + "&"; + self.aspectLis.each(function() { + var aspectLi = $(this); + if (aspectLi.hasClass("active")) { + baseURL += "a_ids[]=" + aspectLi.data("aspect_id") + "&"; } }); From 4f17dbf36ed97d1371337a81836244b79a70627c Mon Sep 17 00:00:00 2001 From: Gonzalo Rodriguez Date: Sun, 11 Sep 2011 22:49:40 -0300 Subject: [PATCH 4/9] Reuse abortAjax function on aspectNavigation widget --- public/javascripts/widgets/aspect-navigation.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/public/javascripts/widgets/aspect-navigation.js b/public/javascripts/widgets/aspect-navigation.js index 46b5a0e0f..e2a1e329c 100644 --- a/public/javascripts/widgets/aspect-navigation.js +++ b/public/javascripts/widgets/aspect-navigation.js @@ -47,6 +47,7 @@ if (self.aspectLis.not(".active").length === 0) { self.aspectLis.removeClass("active"); self.abortAjax(); + self.fadeIn(); } else { self.aspectLis.addClass("active"); self.performAjax(); @@ -101,12 +102,9 @@ history.pushState(null, document.title, newURL); } - if(self.jXHR) { - self.jXHR.abort(); - self.jXHR = null; - } - + self.abortAjax(); self.fadeOut(); + self.jXHR = $.getScript(newURL, function(data) { var textarea = $("#publisher textarea"), photozone = $("#photodropzone"); @@ -133,7 +131,6 @@ self.jXHR.abort(); self.jXHR = null; } - self.fadeIn(); }; this.fadeOut = function() { From dc0c23da2f9a96e502a0243bcc2ec1b77a5616ec Mon Sep 17 00:00:00 2001 From: Gonzalo Rodriguez Date: Tue, 27 Sep 2011 03:09:48 -0300 Subject: [PATCH 5/9] Slight enhacements on aspect-navigation widget --- features/posts_from_main_page.feature | 2 +- .../javascripts/widgets/aspect-navigation.js | 28 +++++++++++++------ 2 files changed, 20 insertions(+), 10 deletions(-) diff --git a/features/posts_from_main_page.feature b/features/posts_from_main_page.feature index 21376bafb..10d11a7df 100644 --- a/features/posts_from_main_page.feature +++ b/features/posts_from_main_page.feature @@ -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 am on the aspects page 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" diff --git a/public/javascripts/widgets/aspect-navigation.js b/public/javascripts/widgets/aspect-navigation.js index e2a1e329c..704ed22cf 100644 --- a/public/javascripts/widgets/aspect-navigation.js +++ b/public/javascripts/widgets/aspect-navigation.js @@ -18,7 +18,6 @@ self.initializeSelectedAspects(); self.calculateToggleText(); self.aspectSelectors.click(self.toggleAspect); - self.aspectSelectors.debounce("click", self.performAjax, 250); self.toggleSelector.click(self.toggleAll); }); @@ -38,25 +37,32 @@ evt.preventDefault(); $(this).parent().toggleClass("active"); - self.calculateToggleText(); + self.perform(); }; this.toggleAll = function(evt) { evt.preventDefault(); - if (self.aspectLis.not(".active").length === 0) { + if (self.allSelected()) { self.aspectLis.removeClass("active"); + } else { + self.aspectLis.addClass("active"); + } + self.perform(); + }; + + this.perform = function() { + if (self.noneSelected()) { self.abortAjax(); self.fadeIn(); } else { - self.aspectLis.addClass("active"); self.performAjax(); } self.calculateToggleText(); }; this.calculateToggleText = function() { - if (self.aspectLis.not(".active").length === 0) { + if (self.allSelected()) { self.toggleSelector.text(Diaspora.I18n.t('aspect_navigation.deselect_all')); } else { self.toggleSelector.text(Diaspora.I18n.t('aspect_navigation.select_all')); @@ -98,10 +104,6 @@ photos[img.attr("data-id")] = img.attr("src"); }); - if (typeof(history.pushState) == 'function') { - history.pushState(null, document.title, newURL); - } - self.abortAjax(); self.fadeOut(); @@ -133,6 +135,14 @@ } }; + 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); From 372a472fbfb93733a4787670f99855046894b4d8 Mon Sep 17 00:00:00 2001 From: Gonzalo Rodriguez Date: Tue, 27 Sep 2011 23:46:02 -0300 Subject: [PATCH 6/9] Empty aspect stream when no aspect selected on the left nav --- config/locales/javascript/javascript.en.yml | 1 + public/javascripts/widgets/aspect-navigation.js | 2 ++ public/javascripts/widgets/stream.js | 13 ++++++++++++- 3 files changed, 15 insertions(+), 1 deletion(-) diff --git a/config/locales/javascript/javascript.en.yml b/config/locales/javascript/javascript.en.yml index 235775635..13f8ff7bd 100644 --- a/config/locales/javascript/javascript.en.yml +++ b/config/locales/javascript/javascript.en.yml @@ -56,3 +56,4 @@ en: aspect_navigation: select_all: "Select all" deselect_all: "Deselect all" + no_aspects: "No aspects selected" diff --git a/public/javascripts/widgets/aspect-navigation.js b/public/javascripts/widgets/aspect-navigation.js index 704ed22cf..354b09695 100644 --- a/public/javascripts/widgets/aspect-navigation.js +++ b/public/javascripts/widgets/aspect-navigation.js @@ -54,6 +54,8 @@ 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(); diff --git a/public/javascripts/widgets/stream.js b/public/javascripts/widgets/stream.js index 037b76ed9..09630c6ae 100644 --- a/public/javascripts/widgets/stream.js +++ b/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; From 5a5bc852e2207193e537c00e98990f6407a58b9f Mon Sep 17 00:00:00 2001 From: Gonzalo Rodriguez Date: Wed, 28 Sep 2011 22:34:19 -0300 Subject: [PATCH 7/9] Adapt some cukes to the new implementation --- features/connects_users.feature | 2 -- features/mentions_from_profile_page.feature | 6 ++++-- features/reshare.feature | 20 ++++++++------------ 3 files changed, 12 insertions(+), 16 deletions(-) diff --git a/features/connects_users.feature b/features/connects_users.feature index bb0feacbf..6f698c292 100644 --- a/features/connects_users.feature +++ b/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 diff --git a/features/mentions_from_profile_page.feature b/features/mentions_from_profile_page.feature index dec5bda6c..198348e87 100644 --- a/features/mentions_from_profile_page.feature +++ b/features/mentions_from_profile_page.feature @@ -31,7 +31,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" @@ -49,11 +49,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" diff --git a/features/reshare.feature b/features/reshare.feature index b8278976e..7ef3e9411 100644 --- a/features/reshare.feature +++ b/features/reshare.feature @@ -48,10 +48,9 @@ Feature: public repost And I go to the home page Then I should see a ".reshare" - And I follow "Your Aspects" - Then I should see "reshare this!" - Then I should see a ".reshare" - And I should see "Bob" + And I should see "reshare this!" + And I should see a ".reshare" + And I should see "Bob" Scenario: I can delete a post that has been reshared Given "bob@bob.bob" has a public post with text "reshare this!" @@ -62,11 +61,9 @@ Feature: public repost And I go to the home page Then I should see a ".reshare" - - When I follow "Your Aspects" - Then I should see "reshare this!" - Then I should see a ".reshare" - And I should see "Bob" + And I should see "reshare this!" + And I should see a ".reshare" + And I should see "Bob" When I go to the destroy user session page And I sign in as "bob@bob.bob" @@ -86,10 +83,9 @@ Feature: public repost When I go to the home page Then I should see a ".reshare" - When I follow "Your Aspects" - Then I should see "reshare this!" + And I should see "reshare this!" And I should see a ".reshare" - And I should see "Bob" + And I should see "Bob" When I go to the home page Then I should see "1 reshare" From 389136eaf27c515ec01d4fe83e90ebd26dbf96ec Mon Sep 17 00:00:00 2001 From: Gonzalo Rodriguez Date: Wed, 28 Sep 2011 22:35:33 -0300 Subject: [PATCH 8/9] Show all aspects selected by default --- public/javascripts/widgets/aspect-navigation.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/public/javascripts/widgets/aspect-navigation.js b/public/javascripts/widgets/aspect-navigation.js index 354b09695..6fc00079d 100644 --- a/public/javascripts/widgets/aspect-navigation.js +++ b/public/javascripts/widgets/aspect-navigation.js @@ -26,11 +26,15 @@ }; this.initializeSelectedAspects = function() { - self.aspectSelectors.each(function() { - guid = $(this).data('guid'); - if (guid && location.href.search("a_ids..=" + guid + "(#|&|$)") != -1) - $(this).parent().addClass('active'); - }); + 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) { From dee0c068965b26959b72eb122061a47aedf7efef Mon Sep 17 00:00:00 2001 From: Gonzalo Rodriguez Date: Sat, 1 Oct 2011 04:49:05 -0300 Subject: [PATCH 9/9] Adapt some cukes for the new aspect nav refactor --- features/comments.feature | 3 +-- features/posts_from_main_page.feature | 9 +++------ features/step_definitions/aspects_steps.rb | 14 ++++++++++++++ features/step_definitions/custom_web_steps.rb | 7 ------- 4 files changed, 18 insertions(+), 15 deletions(-) create mode 100644 features/step_definitions/aspects_steps.rb diff --git a/features/comments.feature b/features/comments.feature index 82fcbd9be..fa73d5fca 100644 --- a/features/comments.feature +++ b/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" - And I wait for the ajax to finish + When I select "Besties" aspect Then I should see "Look at this dog" Then the first comment field should be closed When I focus the comment field diff --git a/features/posts_from_main_page.feature b/features/posts_from_main_page.feature index 10d11a7df..7a8ba929b 100644 --- a/features/posts_from_main_page.feature +++ b/features/posts_from_main_page.feature @@ -26,21 +26,18 @@ Feature: posting from the main 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" - And I wait for the ajax to finish + When I select "PostingTo" aspect 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 wait for the ajax to finish + And I select "PostingTo" aspect Then I should see "I am eating a yogurt" When I am on the aspects page - And I follow "NotPostingThingsHere" within "#aspect_nav" - And I wait for the ajax to finish + And I select "NotPostingThingsHere" aspect Then I should not see "I am eating a yogurt" Scenario: post a photo with text diff --git a/features/step_definitions/aspects_steps.rb b/features/step_definitions/aspects_steps.rb new file mode 100644 index 000000000..3f6505f27 --- /dev/null +++ b/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 diff --git a/features/step_definitions/custom_web_steps.rb b/features/step_definitions/custom_web_steps.rb index 84c60bc3d..5e1d6e411 100644 --- a/features/step_definitions/custom_web_steps.rb +++ b/features/step_definitions/custom_web_steps.rb @@ -189,13 +189,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')")