archive/pillar
0
0
Fork 0
Code Issues 42 Pull Requests Projects Releases Wiki Activity

Notifications: Fix and documentation

Browse Source 
Fixed notification-toggle not working because we were accessing
the selectors before they were available in the DOM.

Now use the ID selector directly, re-use when possible.

Also added comments describing obscure variables.
This commit is contained in:
Pablo Vazquez
2017-10-05 15:13:56 +02:00
committed by Sybren A. Stüvel
parent 68c7a88fed
commit 8fe6b472e4
1 changed files with 55 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/scripts/tutti/5_1_notifications.js
View File

@@ -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 first_load = false;
var unread_new = 0;
var $notifications = $('#notifications'); /**
var $notification_pop = $('#notification-pop'); * Clear notifications by emptying the count number
var $notifications_count = $('#notifications-count'); * and removing the has-notification class that styles the toggle
var $notifications_toggle = $('#notifications-toggle'); */
function clearNotificationIcon(){ function clearNotificationIcon(){
$notifications_count.html(''); $('#notifications-count').html('');
$notifications_toggle.removeClass('has-notifications'); $('#notifications-toggle').removeClass('has-notifications');
} }
// getNotifications by fetching json every X seconds // Get notifications by fetching /notifications/ JSON every 30 seconds
function getNotifications(){ function getNotifications(){
$.getJSON( "/notifications/", function( data ) { $.getJSON( "/notifications/", function( data ) {
@@ -95,8 +99,8 @@ function getNotifications(){
unread_on_load = unread_new; unread_on_load = unread_new;
// Display notifications count // Display notifications count
$notifications_count.html('<span>' + unread_new + '</span>'); $('#notifications-count').html('<span>' + unread_new + '</span>');
$notifications_toggle.addClass('has-notifications'); $('#notifications-toggle').addClass('has-notifications');
// Update notifications count on the document title // Update notifications count on the document title
DocumentTitleAPI.set_notification_count(unread_new); DocumentTitleAPI.set_notification_count(unread_new);
@@ -134,20 +138,22 @@ function getNotifications(){
// Used when we click somewhere in the page // Used when we click somewhere in the page
function hideNotifications(){ function hideNotifications(){
$notifications.hide(); $('#notifications').hide();
$notifications_toggle.removeClass('active'); $('#notifications-toggle').removeClass('active');
}; };
function popNotification(){ function popNotification(){
// pop in! var $notification_pop = $('#notification-pop');
// Pop in!
$notification_pop.addClass('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(){ setTimeout(function(){
$notification_pop.addClass('out'); $notification_pop.addClass('out');
// And a second later, remove all classes // ...and a second later, remove all classes
setTimeout(function(){ setTimeout(function(){
$notification_pop.removeAttr('class'); $notification_pop.removeAttr('class');
}, 1000); }, 1000);
@@ -161,11 +167,16 @@ function popNotification(){
function checkPopNotification(id,username,username_avatar,action,date,context_object_name,object_url) function checkPopNotification(id,username,username_avatar,action,date,context_object_name,object_url)
{ {
var $notification_pop = $('#notification-pop');
// If there's new content // If there's new content
if (unread_new > unread_on_load){ if (unread_new > unread_on_load){
// Fill in the urls for redirect on click, and mark-read // Fill in the urls for redirect on click, and mark-read
$notification_pop.attr('data-url', object_url); $notification_pop.attr('data-url', object_url);
$notification_pop.attr('data-read-toggle', '/notifications/' + id + '/read-toggle'); $notification_pop.attr('data-read-toggle', '/notifications/' + id + '/read-toggle');
// The text in the pop // The text in the pop
var text = '<span class="nc-author">' + username + '</span> '; var text = '<span class="nc-author">' + username + '</span> ';
text += action + ' '; 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-text').html(text);
$notification_pop.find('.nc-avatar img').attr('src', username_avatar); $notification_pop.find('.nc-avatar img').attr('src', username_avatar);
// pop in! // Pop in!
popNotification(); 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(){ function notificationsResize(){
var height = $(window).height() - 80; var height = $(window).height() - 80;
if ($notifications.height() > height){ if ($('#notifications').height() > height){
$notifications.css({ $('#notifications').css({
'max-height' : height / 2, 'max-height' : height / 2,
'overflow-y' : 'scroll' 'overflow-y' : 'scroll'
} }
); );
} else { } else {
$notifications.css({ $('#notifications').css({
'max-height' : '1000%', 'max-height' : '1000%',
'overflow-y' : 'initial' 'overflow-y' : 'initial'
} }
@@ -211,15 +220,18 @@ $(function() {
hideNotifications(); hideNotifications();
}); });
// ...but clicking inside #notifications shouldn't hide itself // ...but clicking inside #notifications shouldn't hide itself
$notifications.on('click', function (e) { $('#notifications').on('click', function (e) {
e.stopPropagation(); e.stopPropagation();
}); });
// Toggle the #notifications flyout // Toggle the #notifications flyout
$notifications_toggle.on('click', function (e) { $('#notifications-toggle').on('click', function (e) {
e.stopPropagation(); e.stopPropagation();
$notifications.toggle(); var $navbarCollapse = $('nav.navbar-collapse');
var $notificationIcon = $('.nav-notifications-icon');
$('#notifications').toggle();
$(this).toggleClass("active"); $(this).toggleClass("active");
notificationsResize(); notificationsResize();
@@ -227,25 +239,33 @@ $(function() {
// Hide other dropdowns // Hide other dropdowns
$('nav .dropdown').removeClass('open'); $('nav .dropdown').removeClass('open');
var $navbarCollapse = $('nav.navbar-collapse');
if ($navbarCollapse.hasClass('in')){ 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 { } else {
$navbarCollapse.removeClass('show-notifications'); $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 // Hide flyout when clicking other dropdowns
$('nav').on('click', '.dropdown', function (e) { $('nav').on('click', '.dropdown', function (e) {
$notifications.hide(); $('#notifications').hide();
$notifications_toggle.removeClass('active'); $('#notifications-toggle').removeClass('active');
}); });
$notification_pop.on('click', function (e) { $('#notification-pop').on('click', function (e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@@ -329,7 +349,6 @@ $(function() {
// Update notifications count on the document title // Update notifications count on the document title
DocumentTitleAPI.set_notification_count(0); DocumentTitleAPI.set_notification_count(0);
}); });
}); });