108 lines
2.9 KiB
JavaScript
108 lines
2.9 KiB
JavaScript
|
(function(context,$) {
|
||
|
|
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
context.JK = context.JK || {};
|
||
|
|
context.JK.NotificationPanel = function(app) {
|
||
|
|
var logger = context.JK.logger;
|
||
|
|
var friends = [];
|
||
|
|
var rest = context.JK.Rest();
|
||
|
|
var missedNotificationsWhileAway = false;
|
||
|
|
var $panel = null;
|
||
|
|
var $expanded = null;
|
||
|
|
var $count = null;
|
||
|
|
var darkenedColor = '#0D7B89';
|
||
|
|
var highlightedColor = 'white'
|
||
|
|
|
||
|
|
|
||
|
|
// one important limitation; if the user is focused on an iframe, this will be false
|
||
|
|
// however, if they are doing something with Facebook or the photo picker, this may actually still be desirable
|
||
|
|
function userCanSeeNotifications() {
|
||
|
|
return document.hasFocus() || app.layout.isDialogShowing();
|
||
|
|
}
|
||
|
|
|
||
|
|
function isNotificationsPanelVisible() {
|
||
|
|
return $expanded.is(':visible')
|
||
|
|
}
|
||
|
|
|
||
|
|
function incrementNotificationCount() {
|
||
|
|
var count = parseInt($count.text());
|
||
|
|
$count.text(count + 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
// set the element to white, and pulse it down to the un-highlighted value 2x, then set
|
||
|
|
function pulseToDark() {
|
||
|
|
lowlightCount();
|
||
|
|
$count.pulse({'background-color' : highlightedColor}, {pulses: 2}, function() {
|
||
|
|
$count.text('0');
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function lowlightCount() {
|
||
|
|
$count.removeClass('highlighted');
|
||
|
|
}
|
||
|
|
|
||
|
|
function highlightCount() {
|
||
|
|
$count.addClass('highlighted');
|
||
|
|
}
|
||
|
|
|
||
|
|
function onNotificationOccurred(payload) {
|
||
|
|
if(userCanSeeNotifications()) {
|
||
|
|
app.updateNotificationSeen(payload.created_at);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
highlightCount();
|
||
|
|
incrementNotificationCount();
|
||
|
|
missedNotificationsWhileAway = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function userCameBack() {
|
||
|
|
if(isNotificationsPanelVisible()) {
|
||
|
|
if(missedNotificationsWhileAway) {
|
||
|
|
// catch user's eye, then put count to 0
|
||
|
|
pulseToDark();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
missedNotificationsWhileAway = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
function windowBlurred() {
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function events() {
|
||
|
|
$(app.layout).on('dialog_closed', function(e, data) {if(data.dialogCount == 0) userCameBack(); });
|
||
|
|
$(window).focus(userCameBack);
|
||
|
|
$(window).blur(windowBlurred);
|
||
|
|
}
|
||
|
|
|
||
|
|
function populate() {
|
||
|
|
// retrieve pending notifications for this user
|
||
|
|
rest.getNotifications()
|
||
|
|
.done(function(response) {
|
||
|
|
updateNotificationList(response);
|
||
|
|
})
|
||
|
|
.fail(app.ajaxError)
|
||
|
|
}
|
||
|
|
|
||
|
|
function initialize(sidebar) {
|
||
|
|
$panel = $('[layout-id="panelNotifications"]');
|
||
|
|
$expanded = $panel.find('.panel.expanded');
|
||
|
|
$count = $panel.find('#sidebar-notification-count');
|
||
|
|
if($panel.length == 0) throw "notifications panel not found"
|
||
|
|
if($expanded.length == 0) throw "notifications expanded content not found"
|
||
|
|
if($count.length == 0) throw "notifications count element not found";
|
||
|
|
|
||
|
|
events();
|
||
|
|
|
||
|
|
populate();
|
||
|
|
};
|
||
|
|
|
||
|
|
this.initiliaze = initialize;
|
||
|
|
this.onNotificationOccurred = onNotificationOccurred;
|
||
|
|
};
|
||
|
|
})(window, jQuery);
|