Merge pull request #5237 from jaideng123/added_infinite_scrolling_to_notedropdown

Notifications Dropdown infinite scrolling

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
 

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();
+        }
+      });
     };
   };
 

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

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);

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}}")