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

Notifications: Define selectors once and re-use

Browse Source 
Plus some comments and simplifying the switch/adding of icons
by just adding a css class that controls it.

No functional changes
This commit is contained in:
Pablo Vazquez 2017-10-04 00:38:31 +02:00
parent a2ffb8a342
commit 389413ab8a
2 changed files with 57 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,6 +3,18 @@ var unread_on_load = false;
var unread_new = 0; var unread_new = 0;
var first_load = false; var first_load = false;
var $notifications = $('#notifications');
var $notification_pop = $('#notification-pop');
var $notifications_count = $('#notifications-count');
var $notifications_toggle = $('#notifications-toggle');
function clearNotificationIcon(){
$notifications_count.html('');
$notifications_toggle.removeClass('has-notifications');
}
// getNotifications by fetching json every X seconds // getNotifications by fetching json every X seconds
function getNotifications(){ function getNotifications(){
$.getJSON( "/notifications/", function( data ) { $.getJSON( "/notifications/", function( data ) {
@ -83,14 +95,15 @@ function getNotifications(){
unread_on_load = unread_new; unread_on_load = unread_new;
// Display notifications count // Display notifications count
$('#notifications-count').addClass('bloom'); $notifications_count.html('<span>' + unread_new + '</span>');
$('#notifications-count').html('<span>' + unread_new + '</span>'); $notifications_toggle.addClass('has-notifications');
$('#notifications-toggle i').removeClass('pi-notifications-none').addClass('pi-notifications-active');
// Let Pillar know the notifications total has been updated.
// Used for example to update of the page title via updateTitle();
$('body').trigger('pillar:notifications-total-updated', unread_new); $('body').trigger('pillar:notifications-total-updated', unread_new);
} else { } else {
$('#notifications-count').removeAttr('class'); clearNotificationIcon();
$('#notifications-toggle i').removeClass('pi-notifications-active').addClass('pi-notifications-none');
}; };
checkPopNotification( checkPopNotification(
@ -111,7 +124,7 @@ function getNotifications(){
}; // if items }; // if items
// Populate the list // Populate the list
$('ul#notifications-list').html( items.join('')); $('ul#notifications-list').html(items.join(''));
}) })
.done(function(){ .done(function(){
// clear the counter // clear the counter
@ -122,22 +135,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! // 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);
}, 10000); }, 10000);
@ -152,8 +165,8 @@ function checkPopNotification(id,username,username_avatar,action,date,context_ob
// 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 + ' ';
@ -161,8 +174,8 @@ function checkPopNotification(id,username,username_avatar,action,date,context_ob
text += '<span class="nc-date">' + date + '</span>'; text += '<span class="nc-date">' + date + '</span>';
// Fill the html // Fill the html
$('#notification-pop .nc-text').html(text); $notification_pop.find('.nc-text').html(text);
$('#notification-pop .nc-avatar img').attr('src', username_avatar); $notification_pop.find('.nc-avatar img').attr('src', username_avatar);
// pop in! // pop in!
popNotification(); popNotification();
@ -176,14 +189,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'
} }
@ -193,20 +206,21 @@ function notificationsResize(){
$(function() { $(function() {
// Click anywhere in the page to hide #notifications // Click anywhere in the page to hide #notifications
$(document).click(function () { $(document).click(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(); $notifications.toggle();
$(this).toggleClass("active"); $(this).toggleClass("active");
notificationsResize(); notificationsResize();
@ -214,25 +228,25 @@ $(function() {
// Hide other dropdowns // Hide other dropdowns
$('nav .dropdown').removeClass('open'); $('nav .dropdown').removeClass('open');
var navbarCollapse = $('nav.navbar-collapse'); var $navbarCollapse = $('nav.navbar-collapse');
if ($(navbarCollapse).hasClass('in')){ if ($navbarCollapse.hasClass('in')){
$(navbarCollapse).addClass('show-notifications').removeClass('in'); $navbarCollapse.addClass('show-notifications').removeClass('in');
$('.nav-notifications-icon').removeClass('pi-notifications-none').addClass('pi-cancel'); $('.nav-notifications-icon').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'); $('.nav-notifications-icon').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();
@ -312,11 +326,12 @@ $(function() {
$(this).addClass('is_read'); $(this).addClass('is_read');
}); });
$('#notifications-count').removeAttr('class'); clearNotificationIcon();
$('#notifications-toggle i').removeClass('pi-notifications-active').addClass('pi-notifications-none');
unread_on_load = 0; unread_on_load = 0;
// Let Pillar know the notifications total has been updated.
// Used for example to update of the page title via updateTitle();
$('body').trigger('pillar:notifications-total-updated', unread_on_load); $('body').trigger('pillar:notifications-total-updated', unread_on_load);
}); });
}); });

16
src/styles/_notifications.sass
View File

@ -30,6 +30,18 @@
position: relative position: relative
user-select: none user-select: none
> i:before
content: '\e815'
&.has-notifications
> i:before
content: '\e813'
#notifications-count
opacity: 1
transform: scale(1) !important
-webkit-transform: scale(1) !important
.flyout-hat .flyout-hat
border-color: transparent transparent white transparent border-color: transparent transparent white transparent
border-style: solid border-style: solid
@ -68,10 +80,6 @@
user-select: none user-select: none
width: 18px width: 18px
&.bloom
opacity: 1
transform: scale(1) !important
-webkit-transform: scale(1) !important
#notifications-list #notifications-list
list-style-type: none list-style-type: none