107 lines
3.6 KiB
JavaScript
107 lines
3.6 KiB
JavaScript
// @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
|