nocebo/diaspora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Port notifications to backbone part. 2

Browse source
This commit is contained in:
Augier 2015-03-12 02:37:37 +01:00
parent 25e80fddc8
commit 2a9fddf7a0
6 changed files with 125 additions and 145 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
app/assets/javascripts/app/views/header_view.js
View file

@ -6,40 +6,42 @@ app.views.Header = app.views.Base.extend({
className : "dark-header", className : "dark-header",
events : { events :{
"click ul.dropdown li:first-child" : "toggleDropdown", "click ul.dropdown li:first-child" : "toggleUserDropdown",
"focusin #q": "toggleSearchActive", "focusin #q": "toggleSearchActive",
"focusout #q": "toggleSearchActive" "focusout #q": "toggleSearchActive"
}, },
initialize : function() { initialize : function(){
$(document.body).click($.proxy(this.hideDropdown, this)); $(document.body).click($.proxy(this.hideUserDropdown, this));
return this; return this;
}, },
postRenderTemplate: function(){ postRenderTemplate: function(){
new app.views.Notifications({ el: '#notification_dropdown' }); new app.views.Notifications({ el: '#notification_dropdown' });
new app.views.NotificationsBadge({ el: '#notification_badge' });
}, },
menuElement : function() { return this.$("ul.dropdown"); }, menuElement : function(){ return this.$("ul.dropdown"); },
toggleDropdown : function(evt) { toggleUserDropdown : function(evt){
if(evt){ evt.preventDefault(); } if(evt){ evt.preventDefault(); }
this.menuElement().toggleClass("active"); this.menuElement().toggleClass("active");
if($.browser.msie) { if($.browser.msie){
this.$("header").toggleClass('ie-user-menu-active'); this.$("header").toggleClass('ie-user-menu-active');
} }
}, },
hideDropdown : function(evt) { hideUserDropdown : function(evt){
if(this.menuElement().hasClass("active") && !$(evt.target).parents("#user_menu").length) { if(this.menuElement().hasClass("active") && !$(evt.target).parents("#user_menu").length){
this.menuElement().removeClass("active"); this.menuElement().removeClass("active");
} }
}, },
toggleSearchActive: function(ev) { toggleSearchActive: function(ev){
// jQuery produces two events for focus/blur (for bubbling) // jQuery produces two events for focus/blur (for bubbling)
// don't rely on which event arrives first, by allowing for both variants // don't rely on which event arrives first, by allowing for both variants
var is_active = (_.indexOf(['focus','focusin'], ev.type) !== -1); var is_active = (_.indexOf(['focus','focusin'], ev.type) !== -1);
@ -48,4 +50,3 @@ app.views.Header = app.views.Base.extend({
} }
}); });
// @license-end // @license-end

107
app/assets/javascripts/app/views/notifications_badge_view.js Normal file
View file

@ -0,0 +1,107 @@
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
app.views.NotificationsBadge = app.views.Base.extend({
events:{
"click #notifications-badge": "toggleNotifDropdown"
},
initialize: function(){
$(document.body).click($.proxy(this.hideNotifDropdown, this));
this.currentPage = 2;
this.notificationsLoaded = 10;
this.badge = this.$el;
this.dropdown = $('#notification_dropdown');
this.dropdownNotifications = this.dropdown.find(".notifications");
this.ajaxLoader = this.dropdown.find(".ajax_loader");
},
toggleNotifDropdown: function(evt){
evt.preventDefault();
evt.stopPropagation();
if(this.notifDropdownShowing()){ this.hideNotifDropdown(evt); }
else{ this.showNotifDropdown(); }
},
notifDropdownShowing: function(){
return this.dropdown.css("display") === "block";
},
showNotifDropdown: function(){
this.ajaxLoader.show();
this.badge.addClass("active");
this.dropdown.css("display", "block");
this.dropdownNotifications.addClass("loading");
this.getNotifications();
},
hideNotifDropdown: function(evt){
var inDropdown = $(evt.target).parents().is(this.dropdown);
var inHovercard = $.contains(app.hovercard.el, evt.target);
if(!inDropdown && !inHovercard && this.notifDropdownShowing()){
this.badge.removeClass("active");
this.dropdown.css("display", "none");
this.dropdownNotifications.perfectScrollbar('destroy');
}
},
notifDropdownScroll: function(){
var bottom = this.dropdownNotifications.prop('scrollHeight') - this.dropdownNotifications.height();
var currentPosition = this.dropdownNotifications.scrollTop();
var isLoading = ($('.loading').length === 1);
if (currentPosition + 50 >= bottom && this.notificationsLoaded <= this.notifications.length && !isLoading){
this.dropdownNotifications.addClass("loading");
this.getMoreNotifications(++this.currentPage);
}
},
getMoreNotifications: function(page){
var self = this;
$.getJSON(Routes.notifications_path({ per_page:5, page: page }), function(notifications){
for(var i = 0; i < notifications.length; ++i){ self.notifications.push(notifications[i]); }
self.notificationsLoaded += 5;
self.renderNotifications();
});
},
hideAjaxLoader: function(){
var self = this;
this.ajaxLoader.find('img').fadeTo(200, 0, function(){
self.ajaxLoader.hide(300, function(){
self.ajaxLoader.find('img').css('opacity', 1);
});
});
},
getNotifications: function(){
var self = this;
$.getJSON(Routes.notifications_path({ per_page: self.notificationsLoaded }), function(notifications){
self.notifications = notifications;
self.renderNotifications();
});
},
renderNotifications: function(){
var self = this;
this.dropdownNotifications.find('.media.stream_element').remove();
$.each(self.notifications, function(index, notifications){
$.each(notifications, function(index, notification){
if($.inArray(notification, notifications) === -1){
var node = self.dropdownNotifications.append(notification.note_html);
$(node).find('.unread-toggle .entypo').tooltip('destroy').tooltip();
}
});
});
this.hideAjaxLoader();
app.helpers.timeago(this.dropdownNotifications);
this.dropdownNotifications.perfectScrollbar('destroy').perfectScrollbar();
this.dropdownNotifications.removeClass('loading');
this.dropdownNotifications.scroll(function(){
self.notifDropdownScroll();
});
}
});
// @license-end

10
app/assets/javascripts/widgets/header.js
View file

@ -5,16 +5,6 @@
var self = this; var self = this;
this.subscribe("widget/ready", function(evt, header) { this.subscribe("widget/ready", function(evt, header) {
self.notifications = self.instantiate("Notifications",
header.find("#notification_badge .badge_count"),
header.find("#notification_dropdown")
);
self.notificationsDropdown = self.instantiate("NotificationsDropdown",
header.find("#notification_badge"),
header.find("#notification_dropdown")
);
self.search = self.instantiate("Search", header.find(".search_form")); self.search = self.instantiate("Search", header.find(".search_form"));
}); });
}; };

118
app/assets/javascripts/widgets/notifications-badge.js
View file

@ -1,118 +0,0 @@
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
(function() {
var NotificationDropdown = function() {
var self = this;
var currentPage = 2;
var notificationsLoaded = 10;
this.subscribe("widget/ready",function(evt, badge, dropdown) {
$.extend(self, {
badge: badge,
badgeLink: badge.find("a"),
documentBody: $(document.body),
dropdown: dropdown,
dropdownNotifications: dropdown.find(".notifications"),
ajaxLoader: dropdown.find(".ajax_loader")
});
if( ! $.browser.msie ) {
self.badge.on('click', self.badgeLink, function(evt){
evt.preventDefault();
evt.stopPropagation();
if (self.dropdownShowing()){
self.hideDropdown();
} else {
self.showDropdown();
}
});
}
self.documentBody.click(function(evt) {
var inDropdown = $(evt.target).parents().is(self.dropdown);
var inHovercard = $.contains(app.hovercard.el, evt.target);
if(!inDropdown && !inHovercard && self.dropdownShowing()) {
self.badgeLink.click();
}
});
});
this.dropdownShowing = function() {
return this.dropdown.css("display") === "block";
};
this.showDropdown = function() {
self.ajaxLoader.show();
self.badge.addClass("active");
self.dropdown.css("display", "block");
self.dropdownNotifications.addClass("loading");
self.getNotifications();
};
this.hideDropdown = function() {
self.badge.removeClass("active");
self.dropdown.css("display", "none");
self.dropdownNotifications.perfectScrollbar('destroy');
};
this.getMoreNotifications = function(page) {
$.getJSON("/notifications?per_page=5&page=" + page, function(notifications) {
for(var i = 0; i < notifications.length; ++i)
self.notifications.push(notifications[i]);
notificationsLoaded += 5;
self.renderNotifications();
});
};
this.hideAjaxLoader = function(){
self.ajaxLoader.find('img').fadeTo(200, 0, function(){
self.ajaxLoader.hide(300, function(){
self.ajaxLoader.find('img').css('opacity', 1);
});
});
};
this.getNotifications = function() {
$.getJSON("/notifications?per_page="+notificationsLoaded, function(notifications) {
self.notifications = notifications;
self.renderNotifications();
});
};
this.renderNotifications = function() {
this.dropdownNotifications.find('.media.stream_element').remove();
$.each(self.notifications, function(index, notifications) {
$.each(notifications, function(index, notification) {
if($.inArray(notification, notifications) === -1){
var node = self.dropdownNotifications.append(notification.note_html);
$(node).find(".unread-toggle .entypo").tooltip('destroy').tooltip();
}
});
});
self.hideAjaxLoader();
app.helpers.timeago(self.dropdownNotifications);
self.dropdownNotifications.perfectScrollbar('destroy').perfectScrollbar();
var isLoading = false;
self.dropdownNotifications.removeClass("loading");
//Infinite Scrolling
self.dropdownNotifications.scroll(function() {
var bottom = self.dropdownNotifications.prop('scrollHeight') - self.dropdownNotifications.height();
var currentPosition = self.dropdownNotifications.scrollTop();
isLoading = ($('.loading').length === 1);
if (currentPosition + 50 >= bottom && notificationsLoaded <= self.notifications.length && !isLoading) {
self.dropdownNotifications.addClass("loading");
self.getMoreNotifications(++currentPage);
}
});
};
};
Diaspora.Widgets.NotificationsDropdown = NotificationDropdown;
})();
// @license-end

2
app/assets/templates/header_tpl.jst.hbs
View file

@ -22,7 +22,7 @@
<div id="nav_badges"> <div id="nav_badges">
<div class="badge badge-inverse" id="notification_badge"> <div class="badge badge-inverse" id="notification_badge">
<div class="icons-notifications_grey" > <div class="icons-notifications_grey" >
<a href="/notifications" title="{{t "header.notifications"}}" class="badge_link" > <a id="notifications-badge" href="/notifications" title="{{t "header.notifications"}}" class="badge_link" >
<div class="badge_count {{#unless current_user.notifications_count}} hidden {{/unless}}"> <div class="badge_count {{#unless current_user.notifications_count}} hidden {{/unless}}">
{{current_user.notifications_count}} {{current_user.notifications_count}}
</div> </div>

10
spec/javascripts/app/views/header_view_spec.js
View file

@ -54,20 +54,20 @@ describe("app.views.Header", function() {
}); });
}); });
describe("#toggleDropdown", function() { describe("#toggleUserDropdown", function() {
it("adds the class 'active'", function() { it("adds the class 'active'", function() {
expect(this.view.$(".dropdown")).not.toHaveClass("active"); expect(this.view.$(".dropdown")).not.toHaveClass("active");
this.view.toggleDropdown($.Event()); this.view.toggleUserDropdown($.Event());
expect(this.view.$(".dropdown")).toHaveClass("active"); expect(this.view.$(".dropdown")).toHaveClass("active");
}); });
}); });
describe("#hideDropdown", function() { describe("#hideUserDropdown", function() {
it("removes the class 'active' if the user clicks anywhere that isn't the menu element", function() { it("removes the class 'active' if the user clicks anywhere that isn't the menu element", function() {
this.view.toggleDropdown($.Event()); this.view.toggleUserDropdown($.Event());
expect(this.view.$(".dropdown")).toHaveClass("active"); expect(this.view.$(".dropdown")).toHaveClass("active");
this.view.hideDropdown($.Event()); this.view.hideUserDropdown($.Event());
expect(this.view.$(".dropdown")).not.toHaveClass("active"); expect(this.view.$(".dropdown")).not.toHaveClass("active");
}); });
}); });