Notifications.js refactor, add specs

app/views/layouts/application.html.haml

@@ -79,7 +79,7 @@
 
   %body{:class => "#{yield(:body_class)}"}
     - unless @landing_page
-      #notification
+      #notifications
 
       - flash.each do |name, msg|
         = content_tag :div, msg, :id => "flash_#{name}"

app/views/notifications/_popup.haml

@@ -1,7 +1,7 @@
 -#   Copyright (c) 2010, Diaspora Inc.  This file is
 -#   licensed under the Affero General Public License version 3 or later.  See
 -#   the COPYRIGHT file.
-
+.notification
-= person_image_tag(person)
+  = person_image_tag(person)
-= link_to "#{person.name.titleize}", person_path(person.id)
+  = link_to "#{person.name.titleize}", person_path(person.id)
-= object_link(note)
+  = object_link(note)

app/views/notifications/index.html.haml

@@ -1,5 +1,3 @@
-- content_for :head do
-  = include_javascripts :notifications
 .span-13
   %h2
     %span.notification_count{:class => ('unread' if @notification_count > 0)}

config/assets.yml

@@ -31,6 +31,7 @@ javascripts:
     - public/javascripts/widgets/timeago.js
     - public/javascripts/widgets/infinite-scroll.js
     - public/javascripts/widgets/directionDetector.js
+    - public/javascripts/widgets/notifications.js
     - public/javascripts/view.js
     - public/javascripts/stream.js
     - public/javascripts/search.js
@@ -66,8 +67,6 @@ javascripts:
     - public/javascripts/inbox.js
   profile:
     - public/javascripts/vendor/jquery.autoSuggest.custom.js
-  notifications:
-    - public/javascripts/notifications.js
 
 stylesheets:
   default:

public/javascripts/notifications.js

@@ -1,28 +0,0 @@
-$('.stream_element').live('mousedown', function(evt){
-  var note = $(this).closest('.stream_element'),
-      note_id = note.attr('data-guid'),
-      nBadge = $("#notification_badge .badge_count");
-
-  if(note.hasClass('unread') ){
-    note.removeClass('unread');
-    $.ajax({
-      url: 'notifications/' + note_id,
-      type: 'PUT'
-    });
-  }
-    if(nBadge.html() !== null) {
-    nBadge.html().replace(/\d+/, function(num){
-      num = parseInt(num);
-      nBadge.html(parseInt(num)-1);
-      if(num == 1) {
-        nBadge.addClass("hidden");
-      }
-  });
-
-  }
-});
-
-$('a.more').live('click', function(){
-  $(this).hide();
-  $(this).next('span').removeClass('hidden');
-});

public/javascripts/web-socket-receiver.js

@@ -64,22 +64,7 @@ var WebSocketReceiver = {
 
 
   processNotification: function(notification){
-    var nBadge = $("#notification_badge div.badge_count");
+    Diaspora.widgets.notifications.showNotification(notification);
-
-    nBadge.html().replace(/\d+/, function(num){
-      nBadge.html(parseInt(num)+1);
-    });
-
-    if(nBadge.hasClass("hidden")){
-      nBadge.removeClass("hidden");
-    }
-
-    $('#notification').html(notification['html'])
-      .fadeIn(200)
-      .delay(8000)
-      .fadeOut(200, function(){
-        $(this).html("");
-      });
   },
 
   processRetraction: function(post_id){

public/javascripts/widgets/notifications.js

@@ -0,0 +1,59 @@
+
+
+(function() {
+  var Notifications = function() {
+    this.start = function() {
+      var self = this;
+      this.badge = $("#notification_badge .badge_count, .notification_count");
+      this.notificationArea = $("#notifications");
+      this.count = parseInt(this.badge.html()) || 0;
+
+      $(".stream_element.unread").live("mousedown", function() {
+        self.decrementCount();
+
+        var notification = $(this);
+        notification.removeClass("unread");
+        
+        $.ajax({
+          url: "notifications/" + notification.data("guid"),
+          type: "PUT"
+        });
+      });
+    };
+  };
+
+  Notifications.prototype.showNotification = function(notification) {    $(notification.html).prependTo(this.notificationArea)
+      .fadeIn(200)
+      .delay(8000)
+      .fadeOut(200, function() {
+        $(this).detach();
+      });
+
+    this.incrementCount();
+  };
+
+  Notifications.prototype.changeNotificationCount = function(change) {
+    this.count += change;
+
+    if(this.badge.text() !== "") {
+      this.badge.text(this.count);
+
+      if(this.count === 0) {
+        this.badge.addClass("hidden");
+      }
+      else if(this.count === 1) {
+        this.badge.removeClass("hidden");
+      }
+    }
+  };
+
+  Notifications.prototype.decrementCount = function() {
+    this.changeNotificationCount(-1);
+  };
+
+  Notifications.prototype.incrementCount = function() {
+    this.changeNotificationCount(1);
+  };
+
+  Diaspora.widgets.add("notifications", Notifications);
+})();

public/stylesheets/sass/application.sass

@@ -1607,36 +1607,39 @@ ul.aspects
 h3 span.current_gs_step
   :color #22C910
 
-#notification
+#notifications
-  @include border-radius(5px)
-  @include box-shadow(0,2px,3px,#333)
-
   :z-index 10
-  :display none
   :position fixed
   :bottom 21px
   :right 12px
 
-  :background
+  .notification
-    :color rgb(30,30,30)
+    @include border-radius(5px)
-    :color rgba(30,30,30,0.9)
+    @include box-shadow(0,2px,3px,#333)
 
-  :min-width 200px
-  :padding 12px
-  :color #fff
-
-  :vertical
-    :align middle
-
-  .avatar
-    :display inline-block
-    :height 20px
-    :width 20px
     :margin
-      :right 5px
+      :bottom 10px
+
+    :background
+      :color rgb(30,30,30)
+      :color rgba(30,30,30,0.9)
+
+    :min-width 200px
+    :padding 12px
+    :color #fff
+
     :vertical
       :align middle
 
+    .avatar
+      :display inline-block
+      :height 20px
+      :width 20px
+      :margin
+        :right 5px
+      :vertical
+        :align middle
+
 .bottom_notification
   :position fixed
   :bottom 0

spec/javascripts/support/jasmine.yml

@@ -29,6 +29,7 @@ src_files:
   - public/javascripts/widgets/timeago.js
   - public/javascripts/widgets/directionDetector.js
   - public/javascripts/widgets/infinite-scroll.js
+  - public/javascripts/widgets/notifications.js
   - public/javascripts/mobile.js
   - public/javascripts/contact-list.js
   - public/javascripts/web-socket-receiver.js

spec/javascripts/widgets/notifications-spec.js

@@ -0,0 +1,55 @@
+/*   Copyright (c) 2010, Diaspora Inc.  This file is
+*   licensed under the Affero General Public License version 3 or later.  See
+*   the COPYRIGHT file.
+*/
+describe("Diaspora", function() {
+  describe("widgets", function() {
+    describe("notifications", function() {
+      var changeNotificationCountSpy = spyOn(Diaspora.widgets.notifications.changeNotificationCount);
+
+      beforeEach(function() {
+        $("#jasmine_content").html("<div id='notifications'></div>");
+        Diaspora.widgets.notifications.start();
+        changeNotificationCountSpy.reset();
+      });
+
+      describe("decrementCount", function() {
+        it("decrements Notifications.count", function() {
+          var originalCount = Diaspora.widgets.notifications.count;
+          Diaspora.widgets.notifications.decrementCount();
+          expect(Diaspora.widgets.notifications.count).toBeLessThan(originalCount);
+        });
+
+        it("calls Notifications.changeNotificationCount", function() {
+          Diaspora.widgets.notifications.decrementCount();
+          expect(Diaspora.widgets.notifications.changeNotificationCount).toHaveBeenCalled();
+        })
+      });
+
+      describe("incrementCount", function() {
+        it("increments Notifications.count", function() {
+          var originalCount = Diaspora.widgets.notifications.count;
+          Diaspora.widgets.notifications.incrementCount();
+          expect(Diaspora.widgets.notifications.count).toBeGreaterThan(originalCount);
+        });
+
+        it("calls Notifications.changeNotificationCount", function() {
+          Diaspora.widgets.notifications.incrementCount();
+          expect(Diaspora.widgets.notifications.changeNotificationCount).toHaveBeenCalled();
+        });
+      });
+
+      describe("showNotification", function() {
+        it("prepends a div to div#notifications", function() {
+          expect($("#notifications div").length).toEqual(0);
+
+          Diaspora.widgets.notifications.showNotification({
+            html: '<div class="notification"></div>'
+          });
+
+          expect($("#notifications div").length).toEqual(1);
+        });
+      });
+    });
+  });
+});