diff --git a/src/scripts/tutti/5_1_notifications.js b/src/scripts/tutti/5_1_notifications.js
index 5cd5f248..434aa7d8 100644
--- a/src/scripts/tutti/5_1_notifications.js
+++ b/src/scripts/tutti/5_1_notifications.js
@@ -1,21 +1,25 @@
-var unread_on_load = false;
-var unread_new = 0;
+
+/**
+ * Store the number of unread notifications on load.
+ * That way, if the number got higher while the page was
+ * still open, we can announce it by popping a nice dialog.
+ */
+var unread_on_load = 0;
var first_load = false;
+var unread_new = 0;
-var $notifications = $('#notifications');
-var $notification_pop = $('#notification-pop');
-var $notifications_count = $('#notifications-count');
-var $notifications_toggle = $('#notifications-toggle');
-
-
+/**
+ * Clear notifications by emptying the count number
+ * and removing the has-notification class that styles the toggle
+ */
function clearNotificationIcon(){
- $notifications_count.html('');
- $notifications_toggle.removeClass('has-notifications');
+ $('#notifications-count').html('');
+ $('#notifications-toggle').removeClass('has-notifications');
}
-// getNotifications by fetching json every X seconds
+// Get notifications by fetching /notifications/ JSON every 30 seconds
function getNotifications(){
$.getJSON( "/notifications/", function( data ) {
@@ -95,8 +99,8 @@ function getNotifications(){
unread_on_load = unread_new;
// Display notifications count
- $notifications_count.html('' + unread_new + '');
- $notifications_toggle.addClass('has-notifications');
+ $('#notifications-count').html('' + unread_new + '');
+ $('#notifications-toggle').addClass('has-notifications');
// Update notifications count on the document title
DocumentTitleAPI.set_notification_count(unread_new);
@@ -134,20 +138,22 @@ function getNotifications(){
// Used when we click somewhere in the page
function hideNotifications(){
- $notifications.hide();
- $notifications_toggle.removeClass('active');
+ $('#notifications').hide();
+ $('#notifications-toggle').removeClass('active');
};
function popNotification(){
- // pop in!
+ var $notification_pop = $('#notification-pop');
+
+ // Pop in!
$notification_pop.addClass('in');
- // After 10s, add a class to make it pop out
+ // After 10s, add a class to make it pop out...
setTimeout(function(){
$notification_pop.addClass('out');
- // And a second later, remove all classes
+ // ...and a second later, remove all classes
setTimeout(function(){
$notification_pop.removeAttr('class');
}, 1000);
@@ -161,11 +167,16 @@ function popNotification(){
function checkPopNotification(id,username,username_avatar,action,date,context_object_name,object_url)
{
+
+ var $notification_pop = $('#notification-pop');
+
// If there's new content
if (unread_new > unread_on_load){
+
// Fill in the urls for redirect on click, and mark-read
$notification_pop.attr('data-url', object_url);
$notification_pop.attr('data-read-toggle', '/notifications/' + id + '/read-toggle');
+
// The text in the pop
var text = '' + username + ' ';
text += action + ' ';
@@ -176,10 +187,8 @@ function checkPopNotification(id,username,username_avatar,action,date,context_ob
$notification_pop.find('.nc-text').html(text);
$notification_pop.find('.nc-avatar img').attr('src', username_avatar);
- // pop in!
+ // Pop in!
popNotification();
-
- $('body').trigger('pillar:notifications-total-updated', unread_new);
};
};
@@ -188,14 +197,14 @@ function checkPopNotification(id,username,username_avatar,action,date,context_ob
function notificationsResize(){
var height = $(window).height() - 80;
- if ($notifications.height() > height){
- $notifications.css({
+ if ($('#notifications').height() > height){
+ $('#notifications').css({
'max-height' : height / 2,
'overflow-y' : 'scroll'
}
);
} else {
- $notifications.css({
+ $('#notifications').css({
'max-height' : '1000%',
'overflow-y' : 'initial'
}
@@ -211,15 +220,18 @@ $(function() {
hideNotifications();
});
// ...but clicking inside #notifications shouldn't hide itself
- $notifications.on('click', function (e) {
+ $('#notifications').on('click', function (e) {
e.stopPropagation();
});
// Toggle the #notifications flyout
- $notifications_toggle.on('click', function (e) {
+ $('#notifications-toggle').on('click', function (e) {
e.stopPropagation();
- $notifications.toggle();
+ var $navbarCollapse = $('nav.navbar-collapse');
+ var $notificationIcon = $('.nav-notifications-icon');
+
+ $('#notifications').toggle();
$(this).toggleClass("active");
notificationsResize();
@@ -227,25 +239,33 @@ $(function() {
// Hide other dropdowns
$('nav .dropdown').removeClass('open');
- var $navbarCollapse = $('nav.navbar-collapse');
-
if ($navbarCollapse.hasClass('in')){
- $navbarCollapse.addClass('show-notifications').removeClass('in');
- $('.nav-notifications-icon').removeClass('pi-notifications-none').addClass('pi-cancel');
+
+ $navbarCollapse
+ .addClass('show-notifications')
+ .removeClass('in');
+
+ $notificationIcon
+ .removeClass('pi-notifications-none')
+ .addClass('pi-cancel');
+
} else {
+
$navbarCollapse.removeClass('show-notifications');
- $('.nav-notifications-icon').addClass('pi-notifications-none').removeClass('pi-cancel');
+ $notificationIcon
+ .addClass('pi-notifications-none')
+ .removeClass('pi-cancel');
}
});
// Hide flyout when clicking other dropdowns
$('nav').on('click', '.dropdown', function (e) {
- $notifications.hide();
- $notifications_toggle.removeClass('active');
+ $('#notifications').hide();
+ $('#notifications-toggle').removeClass('active');
});
- $notification_pop.on('click', function (e) {
+ $('#notification-pop').on('click', function (e) {
e.preventDefault();
e.stopPropagation();
@@ -329,7 +349,6 @@ $(function() {
// Update notifications count on the document title
DocumentTitleAPI.set_notification_count(0);
-
});
});