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

Compare commits

merge into: archive:master
Branches Tags
archive:master
archive:production
archive:cryptography-rust-fix
archive:dillo
archive:wip-comments-confidence-sorting
archive:wip-refactor-node-hooks
archive:wip-tags-view-progress
archive:tmp-video-endcard
archive:wip-redesign
archive:wip-frontend-design
archive:wip-open-project-landing
archive:wip-sybren-notifications
archive:last-py27
archive:last-before-fusion
...
pull from: archive:wip-sybren-notifications
Branches Tags
archive:master
archive:production
archive:cryptography-rust-fix
archive:dillo
archive:wip-comments-confidence-sorting
archive:wip-refactor-node-hooks
archive:wip-tags-view-progress
archive:tmp-video-endcard
archive:wip-redesign
archive:wip-frontend-design
archive:wip-open-project-landing
archive:wip-sybren-notifications
archive:last-py27
archive:last-before-fusion

1 Commits
master ... wip-sybren

Author SHA1 Message Date
Sybren A. Stüvel
6fe1c34def WIP: integration with pillar-notifserv 
See https://github.com/armadillica/pillar-notifserv
 2016-08-26 11:05:50 +02:00
3 changed files with 104 additions and 126 deletions
Show Stats Expand all files Collapse all files

223
src/scripts/tutti/5_notifications.js
View File

@ -2,124 +2,101 @@
// Store the title, to later append notifications count // Store the title, to later append notifications count
var page_title = document.title; var page_title = document.title;
var unread_on_load = 0; /**
var unread_new = 0; * Adds a new notification to the top of the notification list.
var first_load = false; */
function addNotification(no) {
var $notifications_list = $('#notifications-list');
// getNotifications by fetching json every X seconds // There is a notification to be shown, so remove any "no notifications yet" message.
function getNotifications(){ $notifications_list.find('li.nc-item-empty').remove();
$.getJSON( "/notifications/", function( data ) {
if (!first_load) { console.log('New notification:', no);
unread_on_load = data['items'].length; return;
first_load = true; //
} // // Increase the unread_new counter
// if (!no['is_read']){ unread_new++ };
var items = []; //
unread_new = 0; // // Check if the current item has been read, to style it
// var is_read = no['is_read'] ? 'is_read' : '';
// Only if there's actual data //
if (data['items'][0]){ // var read_info = 'data-id="'+ no['_id'] + '" data-read="' + no['is_read'] + '"';
//
// Loop through each item // // Notification list item
$.each(data['items'], function(i, no){ // var content = '<li class="nc-item ' + is_read +'" data-id="'+ no['_id'] + '">';
//
// Increase the unread_new counter // // User's avatar
if (!no['is_read']){ unread_new++ }; // content += '<div class="nc-avatar">';
// content += '<img ' + read_info + ' src="' + no['username_avatar'] + '"/> ';
// Check if the current item has been read, to style it // content += '</div>';
var is_read = no['is_read'] ? 'is_read' : ''; //
// // Text of the notification
var read_info = 'data-id="'+ no['_id'] + '" data-read="' + no['is_read'] + '"'; // content += '<div class="nc-text">';
//
// Notification list item // // Username and action
var content = '<li class="nc-item ' + is_read +'" data-id="'+ no['_id'] + '">'; // content += no['username'] + ' ' + no['action'] + ' ';
//
// User's avatar // // Object
content += '<div class="nc-avatar">'; // content += '<a '+read_info+'" href="'+no['object_url']+'" class="nc-a">';
content += '<img ' + read_info + ' src="' + no['username_avatar'] + '"/> '; // content += no['context_object_name'] + ' ';
content += '</div>'; // content += '</a> ';
//
// Text of the notification // // Date
content += '<div class="nc-text">'; // content += '<span class="nc-date">';
// content += '<a '+read_info+'" href="'+no['object_url']+'" class="nc-a">';
// Username and action // content += no['date'];
content += no['username'] + ' ' + no['action'] + ' '; // content += '</a>';
// content += '</span>';
// Object //
content += '<a '+read_info+'" href="'+no['object_url']+'" class="nc-a">'; // // Read Toggle
content += no['context_object_name'] + ' '; // content += '<a id="'+no['_id']+'" href="/notifications/' + no['_id'] + '/read-toggle" class="nc-button nc-read_toggle">';
content += '</a> '; // if (no['is_read']){
// content += '<i title="Mark as Unread" class="pi pi-circle-dot"></i>';
// Date // } else {
content += '<span class="nc-date">'; // content += '<i title="Mark as Read" class="pi pi-circle"></i>';
content += '<a '+read_info+'" href="'+no['object_url']+'" class="nc-a">'; // };
content += no['date']; // content += '</a>';
content += '</a>'; //
content += '</span>'; // // Subscription Toggle
// content += '<a href="/notifications/' + no['_id'] + '/subscription-toggle" class="nc-button nc-subscription_toggle">';
// Read Toggle // if (no['is_subscribed']){
content += '<a id="'+no['_id']+'" href="/notifications/' + no['_id'] + '/read-toggle" class="nc-button nc-read_toggle">'; // content += '<i title="Turn Off Notifications" class="pi-toggle-on"></i>';
if (no['is_read']){ // } else {
content += '<i title="Mark as Unread" class="pi pi-circle-dot"></i>'; // content += '<i title="Turn On Notifications" class="pi-toggle-off"></i>';
} else { // };
content += '<i title="Mark as Read" class="pi pi-circle"></i>'; // content += '</a>';
//
// content += '</div>';
// content += '</li>';
//
// items.push(content);
// }); // each
//
// if (unread_new > 0) {
// // Set page title, display notifications and set counter
// document.title = '(' + unread_new + ') ' + page_title;
// $('#notifications-count').addClass('bloom');
// $('#notifications-count').html('<span>' + unread_new + '</span>');
// $('#notifications-toggle i').removeClass('pi-notifications-none').addClass('pi-notifications-active');
// } else {
// document.title = page_title;
// $('#notifications-count').removeAttr('class');
// $('#notifications-toggle i').removeClass('pi-notifications-active').addClass('pi-notifications-none');
// };
//
// checkPopNotification(
// data['items'][0]['_id'],
// data['items'][0]['username'],
// data['items'][0]['username_avatar'],
// data['items'][0]['action'],
// data['items'][0]['date'],
// data['items'][0]['context_object_name'],
// data['items'][0]['object_url']);
//
// // Populate the list
// $('#notifications-list').html( items.join(''));
// })
}; };
content += '</a>';
// Subscription Toggle
content += '<a href="/notifications/' + no['_id'] + '/subscription-toggle" class="nc-button nc-subscription_toggle">';
if (no['is_subscribed']){
content += '<i title="Turn Off Notifications" class="pi-toggle-on"></i>';
} else {
content += '<i title="Turn On Notifications" class="pi-toggle-off"></i>';
};
content += '</a>';
content += '</div>';
content += '</li>';
items.push(content);
}); // each
if (unread_new > 0) {
// Set page title, display notifications and set counter
document.title = '(' + unread_new + ') ' + page_title;
$('#notifications-count').addClass('bloom');
$('#notifications-count').html('<span>' + unread_new + '</span>');
$('#notifications-toggle i').removeClass('pi-notifications-none').addClass('pi-notifications-active');
} else {
document.title = page_title;
$('#notifications-count').removeAttr('class');
$('#notifications-toggle i').removeClass('pi-notifications-active').addClass('pi-notifications-none');
};
checkPopNotification(
data['items'][0]['_id'],
data['items'][0]['username'],
data['items'][0]['username_avatar'],
data['items'][0]['action'],
data['items'][0]['date'],
data['items'][0]['context_object_name'],
data['items'][0]['object_url']);
} else {
var content = '<li class="nc-item nc-item-empty">';
content += 'No notifications... yet.';
content += '</li>';
items.push(content);
}; // if items
// Populate the list
$('ul#notifications-list').html( items.join(''));
})
.done(function(){
// clear the counter
unread_on_load = unread_new;
});
};
// Used when we click somewhere in the page // Used when we click somewhere in the page
function hideNotifications(){ function hideNotifications(){
@ -319,11 +296,13 @@ $(function() {
}); });
}); });
/**
function getNotificationsLoop() { * Uses ServerSide Events (SSE) to fetch notifications from Pillar-Notifserv.
getNotifications(); */
function setupNotifications() {
var getLoop = setTimeout(function () { var source = new EventSource('/notifications', {withCredentials: true});
getNotificationsLoop(); source.addEventListener('notification', function (event) {
}, 30000); var notif = JSON.parse(event.data);
addNotification(notif);
}, false);
} }

5
src/templates/_notifications.jade
View File

@ -1,4 +1,3 @@
ul#notifications-list ul#notifications-list
li.nc-item li.nc-item.nc-item-empty
#notifications-loader |No notifications... yet.
i.pi-spin.spin

2
src/templates/layout.jade
View File

@ -414,7 +414,7 @@ html(lang="en")
script. script.
$(document).ready(function() { $(document).ready(function() {
{% if current_user.is_authenticated %} {% if current_user.is_authenticated %}
getNotificationsLoop(); // Check for new notifications in the background setupNotifications(); // Check for new notifications in the background
// Resize #notifications and change overflow for scrollbars // Resize #notifications and change overflow for scrollbars
$(window).on("resize", function() { notificationsResize(); }); $(window).on("resize", function() { notificationsResize(); });