diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index 2c4d51620..d164220ee 100644 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -71,8 +71,9 @@ #notifications - %header{:class=>('landing' unless current_user)} - = render 'layouts/header' + - unless user_signed_in? + %header{:class=>('landing')} + = render 'layouts/header' = render 'templates/templates' diff --git a/app/views/templates/_templates.haml b/app/views/templates/_templates.haml index 6dd5ea81b..3c2f9e3a2 100644 --- a/app/views/templates/_templates.haml +++ b/app/views/templates/_templates.haml @@ -2,6 +2,9 @@ -# licensed under the Affero General Public License version 3 or later. See -# the COPYRIGHT file. +%script{:id => "header-template", :type => 'text/template'} + != File.read("#{Rails.root}/app/views/templates/header.ujs") + %script{:id => "stream-element-template", :type => 'text/template'} != File.read("#{Rails.root}/app/views/templates/stream_element.ujs") @@ -19,3 +22,4 @@ %script{:id => "activity-streams-photo-template", :type => 'text/template'} != File.read("#{Rails.root}/app/views/templates/activity-streams-photo.ujs") + diff --git a/app/views/templates/header.ujs b/app/views/templates/header.ujs new file mode 100644 index 000000000..828557d9a --- /dev/null +++ b/app/views/templates/header.ujs @@ -0,0 +1,86 @@ +
+
+ + + +
+
+
+ Mark All as Read + | + View all +
+

+ Recent notifications +

+
+
+
+ Ajax-loader +
+
+
+
+
+ +

+ +

+

+
+
+
+
+
+
+
+
+ + + +
+
diff --git a/public/javascripts/app/app.js b/public/javascripts/app/app.js index 38c7b96f5..d21aa6c69 100644 --- a/public/javascripts/app/app.js +++ b/public/javascripts/app/app.js @@ -12,6 +12,12 @@ var App = { initialize: function() { App.router = new App.Router; + if(this._user){ + App.header = new App.Views.Header; + $("body").prepend(App.header.el); + App.header.render(); + } + Backbone.history.start({pushState: true}); } }; diff --git a/public/javascripts/app/views/header_view.js b/public/javascripts/app/views/header_view.js new file mode 100644 index 000000000..d054dcba0 --- /dev/null +++ b/public/javascripts/app/views/header_view.js @@ -0,0 +1,39 @@ +App.Views.Header = Backbone.View.extend({ + + events : { + "click ul.dropdown li:first-child" : "toggleDropdown" + }, + + initialize : function(options) { + this.menuElement = this.$("ul.dropdown"); + + _.bindAll(this, "toggleDropdown", "hideDropdown"); + this.menuElement.find("li a").slice(1).click(function(evt) { evt.stopPropagation(); }); + $(document.body).click(this.hideDropdown); + + return this; + }, + + render : function(){ + this.template = _.template($("#header-template").html()); + $(this.el).html(this.template(App.user())); + return this; + }, + + toggleDropdown : function(evt) { + evt.preventDefault(); + evt.stopPropagation(); + + this.$("ul.dropdown").toggleClass("active"); + + if ( $.browser.msie ) { + this.$('header').toggleClass('ie-user-menu-active'); + } + }, + + hideDropdown : function(evt) { + if(this.$("ul.dropdown").hasClass("active") && !$(evt.target).parents("#user_menu").length) { + this.$("ul.dropdown").removeClass("active"); + } + } +}); diff --git a/public/javascripts/diaspora.js b/public/javascripts/diaspora.js index c2414d239..1159836fa 100644 --- a/public/javascripts/diaspora.js +++ b/public/javascripts/diaspora.js @@ -49,7 +49,7 @@ globalSubscribe: function(eventName, callback, context) { Diaspora.page.subscribe(eventName, callback, context); - }, + }, globalPublish: function(eventName, args) { Diaspora.page.publish(eventName, args); diff --git a/public/javascripts/widgets/header.js b/public/javascripts/widgets/header.js index 3dfe64828..208c5cd84 100644 --- a/public/javascripts/widgets/header.js +++ b/public/javascripts/widgets/header.js @@ -1,22 +1,21 @@ (function() { var Header = function() { var self = this; - + this.subscribe("widget/ready", function(evt, header) { self.notifications = self.instantiate("Notifications", header.find("#notifications"), header.find("#notification_badge .badge_count") ); - + self.notificationsDropdown = self.instantiate("NotificationsDropdown", header.find("#notification_badge"), header.find("#notification_dropdown") ); self.search = self.instantiate("Search", header.find(".search_form")); - self.menuElement = self.instantiate("UserDropdown", header.find("#user_menu")); }); }; Diaspora.Widgets.Header = Header; -})(); \ No newline at end of file +})(); diff --git a/public/javascripts/widgets/user-dropdown.js b/public/javascripts/widgets/user-dropdown.js deleted file mode 100644 index 92e12369a..000000000 --- a/public/javascripts/widgets/user-dropdown.js +++ /dev/null @@ -1,34 +0,0 @@ -(function() { - var UserDropdown = function() { - var self = this; - - this.subscribe("widget/ready", function(evt, menuElement) { - $.extend(self, { - menuElement: menuElement - }); - - self.menuElement.click(self.toggleDropdown); - self.menuElement.find("li a").slice(1).click(function(evt) { evt.stopPropagation(); }); - $(document.body).click(self.hideDropdown); - }); - - this.toggleDropdown = function(evt) { - evt.preventDefault(); - evt.stopPropagation(); - - self.menuElement.toggleClass("active"); - - if ( $.browser.msie ) { - $('header').toggleClass('ie-user-menu-active'); - } - }; - - this.hideDropdown = function() { - if(self.menuElement.hasClass("active") && !$(this).parents("#user_menu").length) { - self.menuElement.removeClass("active"); - } - }; - }; - - Diaspora.Widgets.UserDropdown = UserDropdown; -})(); diff --git a/spec/javascripts/app/views/header_view_spec.js b/spec/javascripts/app/views/header_view_spec.js new file mode 100644 index 000000000..70509b489 --- /dev/null +++ b/spec/javascripts/app/views/header_view_spec.js @@ -0,0 +1,32 @@ +describe("App.Views.Header", function() { + beforeEach(function() { + // should be jasmine helper + + window.current_user = App.user({name: "alice", avatar : {small : "http://avatar.com/photo.jpg"}}); + + spec.loadFixture("aspects_index"); + + this.view = new App.Views.Header().render(); + + console.log(this.view); + + }); + + describe("#toggleDropdown", function() { + it("adds the class 'active'", function() { + expect(this.view.$(".dropdown")).not.toHaveClass("active"); + this.view.toggleDropdown($.Event()); + expect(this.view.$(".dropdown")).toHaveClass("active"); + }); + }); + + describe("#hideDropdown", function() { + it("removes the class 'active' if the user clicks anywhere that isn't the menu element", function() { + this.view.toggleDropdown($.Event()); + expect(this.view.$(".dropdown")).toHaveClass("active"); + + this.view.hideDropdown($.Event()); + expect(this.view.$(".dropdown")).not.toHaveClass("active"); + }); + }); +}); diff --git a/spec/javascripts/app/views/stream_view_spec.js b/spec/javascripts/app/views/stream_view_spec.js index f25a7dd4b..b1fcda671 100644 --- a/spec/javascripts/app/views/stream_view_spec.js +++ b/spec/javascripts/app/views/stream_view_spec.js @@ -20,7 +20,7 @@ describe("App.views.Stream", function(){ context("when rendering a Status Mesasage", function(){ it("shows the status message in the content area", function(){ - expect(this.statusElement.find(".post-content p").text()).toContain("jimmy's 2 whales") + expect(this.statusElement.find(".post-content p").text()).toContain("hella infos yo!") }) }) }) diff --git a/spec/javascripts/widgets/user-dropdown-spec.js b/spec/javascripts/widgets/user-dropdown-spec.js deleted file mode 100644 index 32cce8799..000000000 --- a/spec/javascripts/widgets/user-dropdown-spec.js +++ /dev/null @@ -1,25 +0,0 @@ -describe("Diaspora.Widgets.UserDropdown", function() { - var userDropdown; - beforeEach(function() { - spec.loadFixture("aspects_index"); - userDropdown = Diaspora.BaseWidget.instantiate("UserDropdown", $("#user_menu")); - }); - - describe("toggleDropdown", function() { - it("adds the class 'active'", function() { - expect(userDropdown.menuElement).not.toHaveClass("active"); - userDropdown.toggleDropdown($.Event()); - expect(userDropdown.menuElement).toHaveClass("active"); - }); - }); - - describe("hideDropdown", function() { - it("removes the class 'active' if the user clicks anywhere that isn't the menu element", function() { - userDropdown.toggleDropdown($.Event()); - expect(userDropdown.menuElement).toHaveClass("active"); - - userDropdown.hideDropdown(); - expect(userDropdown.menuElement).not.toHaveClass("active"); - }); - }); -}); \ No newline at end of file