diff --git a/Changelog.md b/Changelog.md index a7df1505a..83d4678f5 100644 --- a/Changelog.md +++ b/Changelog.md @@ -83,6 +83,7 @@ The keys will still be available in the root level within the 0.5 release. The o * Add a link to the reported comment in the admin panel [#5337](https://github.com/diaspora/diaspora/pull/5337) * Strip search query from leading and trailing whitespace [#5317](https://github.com/diaspora/diaspora/pull/5317) * Add the "network" key to statistics.json and set it to "Diaspora" [#5308](https://github.com/diaspora/diaspora/pull/5308) +* Infinite scrolling in the notifications dropdown [#5237](https://github.com/diaspora/diaspora/pull/5237) # 0.4.1.1 diff --git a/app/assets/javascripts/widgets/notifications-badge.js b/app/assets/javascripts/widgets/notifications-badge.js index 0509d0adc..6c775b9be 100644 --- a/app/assets/javascripts/widgets/notifications-badge.js +++ b/app/assets/javascripts/widgets/notifications-badge.js @@ -1,6 +1,9 @@ (function() { var NotificationDropdown = function() { var self = this; + var currentPage = 2; + var notificationsLoaded = 10; + var isLoading = false; this.subscribe("widget/ready",function(evt, badge, dropdown) { $.extend(self, { @@ -43,8 +46,9 @@ self.ajaxLoader.show(); self.badge.addClass("active"); self.dropdown.css("display", "block"); - + $('.notifications').addClass("loading"); self.getNotifications(); + }; this.hideDropdown = function() { @@ -53,8 +57,17 @@ $('.notifications').perfectScrollbar('destroy'); }; + this.getMoreNotifications = function() { + $.getJSON("/notifications?per_page=5&page="+currentPage, function(notifications) { + for(var i = 0; i < notifications.length; ++i) + self.notifications.push(notifications[i]); + notificationsLoaded += 5; + self.renderNotifications(); + }); + }; + this.getNotifications = function() { - $.getJSON("/notifications?per_page=15", function(notifications) { + $.getJSON("/notifications?per_page="+notificationsLoaded, function(notifications) { self.notifications = notifications; self.renderNotifications(); }); @@ -62,10 +75,10 @@ this.renderNotifications = function() { self.dropdownNotifications.empty(); - $.each(self.notifications, function(index, notifications) { $.each(notifications, function(index, notification) { - self.dropdownNotifications.append(notification.note_html); + if($.inArray(notification, notifications) === -1) + self.dropdownNotifications.append(notification.note_html); }); }); self.dropdownNotifications.find("time.timeago").timeago(); @@ -76,9 +89,22 @@ self.dropdownNotifications.find('.read').each(function(index) { Diaspora.page.header.notifications.setUpRead( $(this) ); }); + $('.notifications').perfectScrollbar('destroy'); $('.notifications').perfectScrollbar(); - $(".notifications").scrollTop(0); self.ajaxLoader.hide(); + isLoading = false; + $('.notifications').removeClass("loading"); + //Infinite Scrolling + $('.notifications').scroll(function(e) { + var bottom = $('.notifications').prop('scrollHeight') - $('.notifications').height(); + var currentPosition = $('.notifications').scrollTop(); + isLoading = ($('.loading').length == 1); + if (currentPosition + 50 >= bottom && notificationsLoaded <= self.notifications.length && !isLoading) { + $('.notifications').addClass("loading"); + ++currentPage; + self.getMoreNotifications(); + } + }); }; }; diff --git a/features/desktop/notifications.feature b/features/desktop/notifications.feature index eeafce68c..a94b23df7 100644 --- a/features/desktop/notifications.feature +++ b/features/desktop/notifications.feature @@ -97,3 +97,24 @@ Feature: Notifications And I active the first hovercard after loading the notifications page When I press the aspect dropdown Then the aspect dropdown should be visible + + Scenario: scrollbar shows up when >5 notifications + Given a user with email "bob@bob.bob" is connected with "alice@alice.alice" + And Alice has 6 posts mentioning Bob + When I sign in as "bob@bob.bob" + And I follow "Notifications" in the header + Then the notification dropdown should be visible + Then the notification dropdown scrollbar should be visible + + Scenario: dropdown will load more elements when bottom is reached + Given a user with email "bob@bob.bob" is connected with "alice@alice.alice" + And Alice has 20 posts mentioning Bob + When I sign in as "bob@bob.bob" + And I follow "Notifications" in the header + Then the notification dropdown should be visible + Then the notification dropdown scrollbar should be visible + Then there should be 10 notifications loaded + When I scroll down on the notifications dropdown + Then I should have scrolled down on the notification dropdown + And I wait for notifications to load + Then there should be 15 notifications loaded \ No newline at end of file diff --git a/features/step_definitions/custom_web_steps.rb b/features/step_definitions/custom_web_steps.rb index ca82cdcf6..a25267daa 100644 --- a/features/step_definitions/custom_web_steps.rb +++ b/features/step_definitions/custom_web_steps.rb @@ -190,15 +190,36 @@ end And /^I scroll down$/ do page.execute_script("window.scrollBy(0,3000000)") end +And /^I scroll down on the notifications dropdown$/ do + page.execute_script("$('.notifications').scrollTop(350)") +end Then /^I should have scrolled down$/ do page.evaluate_script("window.pageYOffset").should > 0 end +Then /^I should have scrolled down on the notification dropdown$/ do + page.evaluate_script("$('.notifications').scrollTop()").should > 0 +end + + Then /^the notification dropdown should be visible$/ do find(:css, "#notification_dropdown").should be_visible end +Then /^the notification dropdown scrollbar should be visible$/ do + find(:css, ".ps-active-y").should be_visible +end + +Then /^there should be (\d+) notifications loaded$/ do |n| + result = page.evaluate_script("$('.notification_element').length") + result.should == n.to_i +end + +And "I wait for notifications to load" do + page.should_not have_selector(".loading") +end + When /^I resize my window to 800x600$/ do page.execute_script <<-JS window.resizeTo(800,600); diff --git a/features/step_definitions/mention_steps.rb b/features/step_definitions/mention_steps.rb index e270ea875..f7939afbe 100644 --- a/features/step_definitions/mention_steps.rb +++ b/features/step_definitions/mention_steps.rb @@ -5,6 +5,15 @@ And /^Alice has a post mentioning Bob$/ do alice.post(:status_message, :text => "@{Bob Jones; #{bob.person.diaspora_handle}}", :to => aspect) end +And /^Alice has (\d+) posts mentioning Bob$/ do |n| + n.to_i.times do + alice = User.find_by_email 'alice@alice.alice' + bob = User.find_by_email 'bob@bob.bob' + aspect = alice.aspects.where(:name => "Besties").first + alice.post(:status_message, :text => "@{Bob Jones; #{bob.person.diaspora_handle}}", :to => aspect) + end +end + And /^I mention Alice in the publisher$/ do alice = User.find_by_email 'alice@alice.alice' write_in_publisher("@{Alice Smith ; #{alice.person.diaspora_handle}}")