diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index d94d4582a..0e22c2623 100644 --- a/app/views/layouts/application.html.haml +++ b/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}" diff --git a/app/views/notifications/_popup.haml b/app/views/notifications/_popup.haml index 0dbc75d4c..9bb8f36bb 100644 --- a/app/views/notifications/_popup.haml +++ b/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. - -= person_image_tag(person) -= link_to "#{person.name.titleize}", person_path(person.id) -= object_link(note) +.notification + = person_image_tag(person) + = link_to "#{person.name.titleize}", person_path(person.id) + = object_link(note) diff --git a/app/views/notifications/index.html.haml b/app/views/notifications/index.html.haml index 67d99a426..9c4b1828d 100644 --- a/app/views/notifications/index.html.haml +++ b/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)} diff --git a/config/assets.yml b/config/assets.yml index 0e791557b..6f0b5bed7 100644 --- a/config/assets.yml +++ b/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: diff --git a/public/javascripts/notifications.js b/public/javascripts/notifications.js deleted file mode 100644 index b91e5ddd5..000000000 --- a/public/javascripts/notifications.js +++ /dev/null @@ -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'); -}); diff --git a/public/javascripts/web-socket-receiver.js b/public/javascripts/web-socket-receiver.js index 5b39cc415..b448042d1 100644 --- a/public/javascripts/web-socket-receiver.js +++ b/public/javascripts/web-socket-receiver.js @@ -64,22 +64,7 @@ var WebSocketReceiver = { processNotification: function(notification){ - var nBadge = $("#notification_badge div.badge_count"); - - 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(""); - }); + Diaspora.widgets.notifications.showNotification(notification); }, processRetraction: function(post_id){ diff --git a/public/javascripts/widgets/notifications.js b/public/javascripts/widgets/notifications.js new file mode 100644 index 000000000..95acc40ac --- /dev/null +++ b/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); +})(); \ No newline at end of file diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index 8b6fee986..79a6f44df 100644 --- a/public/stylesheets/sass/application.sass +++ b/public/stylesheets/sass/application.sass @@ -1607,36 +1607,39 @@ ul.aspects h3 span.current_gs_step :color #22C910 -#notification - @include border-radius(5px) - @include box-shadow(0,2px,3px,#333) - +#notifications :z-index 10 - :display none :position fixed :bottom 21px :right 12px - :background - :color rgb(30,30,30) - :color rgba(30,30,30,0.9) + .notification + @include border-radius(5px) + @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 diff --git a/spec/javascripts/support/jasmine.yml b/spec/javascripts/support/jasmine.yml index f766308c4..de698e936 100644 --- a/spec/javascripts/support/jasmine.yml +++ b/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 diff --git a/spec/javascripts/widgets/notifications-spec.js b/spec/javascripts/widgets/notifications-spec.js new file mode 100644 index 000000000..4b086d89e --- /dev/null +++ b/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("
"); + 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: '
' + }); + + expect($("#notifications div").length).toEqual(1); + }); + }); + }); + }); +}); \ No newline at end of file