hyperzlib
/
nodebb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixed #756 - sequestering Notifications and Chat DOM functions in their module, and not in footer

Browse Source
v1.18.x
Julian Lam 11 years ago
parent e36f92b18e
commit b86ae3f7f0
3 changed files with 199 additions and 189 deletions
Show Stats Download Patch File Download Diff File

193
public/src/forum/footer.js
Unescape Escape View File

@ -1,202 +1,17 @@
(function() { define(['notifications', 'chat'], function(Notifications, Chat) {
socket.emit('api:meta.updateHeader', { socket.emit('api:meta.updateHeader', {
fields: ['username', 'picture', 'userslug'] fields: ['username', 'picture', 'userslug']
}, app.updateHeader); }, app.updateHeader);
// Notifications dropdown Notifications.prepareDOM();
var notifContainer = document.getElementsByClassName('notifications')[0], Chat.prepareDOM();
notifTrigger = notifContainer.querySelector('a'),
notifList = document.getElementById('notif-list'),
notifIcon = $('.notifications a');
notifTrigger.addEventListener('click', function(e) {
e.preventDefault();
if (notifContainer.className.indexOf('open') === -1) {
socket.emit('api:notifications.get', null, function(data) {
var notifFrag = document.createDocumentFragment(),
notifEl = document.createElement('li'),
numRead = data.read.length,
numUnread = data.unread.length,
x;
notifList.innerHTML = '';
if ((data.read.length + data.unread.length) > 0) {
for (x = 0; x < numUnread; x++) {
notifEl.setAttribute('data-nid', data.unread[x].nid);
notifEl.className = 'unread';
notifEl.innerHTML = '<a href="' + data.unread[x].path + '"><span class="pull-right">' + utils.relativeTime(data.unread[x].datetime, true) + '</span>' + data.unread[x].text + '</a>';
notifFrag.appendChild(notifEl.cloneNode(true));
}
for (x = 0; x < numRead; x++) {
notifEl.setAttribute('data-nid', data.read[x].nid);
notifEl.className = '';
notifEl.innerHTML = '<a href="' + data.read[x].path + '"><span class="pull-right">' + utils.relativeTime(data.read[x].datetime, true) + '</span>' + data.read[x].text + '</a>';
notifFrag.appendChild(notifEl.cloneNode(true));
}
} else {
notifEl.className = 'no-notifs';
notifEl.innerHTML = '<a>You have no notifications</a>';
notifFrag.appendChild(notifEl.cloneNode(true));
}
// Add dedicated link to /notifications
notifEl.removeAttribute('data-nid');
notifEl.className = 'pagelink';
notifEl.innerHTML = '<a href="' + RELATIVE_PATH + '/notifications">See all Notifications</a>';
notifFrag.appendChild(notifEl.cloneNode(true));
notifList.appendChild(notifFrag);
if (data.unread.length > 0) {
notifIcon.toggleClass('active', true);
} else {
notifIcon.toggleClass('active', false);
}
socket.emit('api:modules.notifications.mark_all_read', null, function() {
notifIcon.toggleClass('active', false);
app.refreshTitle();
// Update favicon + local count
Tinycon.setBubble(0);
localStorage.setItem('notifications:count', 0);
});
});
}
});
notifList.addEventListener('click', function(e) {
var target;
switch (e.target.nodeName) {
case 'SPAN':
target = e.target.parentNode.parentNode;
break;
case 'A':
target = e.target.parentNode;
break;
case 'li':
target = e.target;
break;
}
if (target) {
var nid = parseInt(target.getAttribute('data-nid'));
if (nid > 0) socket.emit('api:modules.notifications.mark_read', nid);
}
});
var updateNotifCount = function(count) {
// Update notification icon, if necessary
if (count > 0) {
notifIcon.toggleClass('active', true);
} else {
notifIcon.toggleClass('active', false);
}
// Update the favicon + saved local count
Tinycon.setBubble(count);
localStorage.setItem('notifications:count', count);
};
socket.emit('api:notifications.getCount', function(err, count) {
if (!err) {
updateNotifCount(count);
} else {
updateNotifCount(0);
}
});
socket.on('event:new_notification', function() {
notifIcon.toggleClass('active', true);
app.alert({
alert_id: 'new_notif',
title: 'New notification',
message: 'You have unread notifications.',
type: 'warning',
timeout: 2000
});
app.refreshTitle();
if (ajaxify.currentPage === 'notifications') {
ajaxify.refresh();
}
// Update the favicon + local storage
var savedCount = parseInt(localStorage.getItem('notifications:count'),10) || 0;
updateNotifCount(savedCount+1);
});
socket.on('event:notifications.updateCount', function(count) {
updateNotifCount(count);
});
// Chats Dropdown
var chatsToggleEl = $('#chat_dropdown'),
chatsListEl = $('#chat-list'),
chatDropdownEl = chatsToggleEl.parent();
chatsToggleEl.on('click', function() {
if (chatDropdownEl.hasClass('open')) {
return;
}
socket.emit('api:modules.chats.list', function(chats) {
var chatsFrag = document.createDocumentFragment(),
chatEl = document.createElement('li'),
numChats = chats.length,
x, userObj;
if (numChats > 0) {
for(x=0;x<numChats;x++) {
userObj = chats[x];
chatEl.setAttribute('data-uid', userObj.uid);
chatEl.innerHTML = '<a href="javascript:app.openChat(\'' + userObj.username + '\', ' + userObj.uid + ');"><img src="' + userObj.picture + '" title="' + userObj.username + '" />' + userObj.username + '</a>';
chatsFrag.appendChild(chatEl.cloneNode(true));
}
chatsListEl.empty();
chatsListEl.html(chatsFrag);
} else {
translator.get('modules:chat.no_active', function(str) {
chatEl.innerHTML = '<a href="#">' + str + '</a>';
chatsFrag.appendChild(chatEl.cloneNode(true));
chatsListEl.empty();
chatsListEl.html(chatsFrag);
});
}
});
});
socket.on('event:chats.receive', function(data) {
require(['chat'], function(chat) {
if (chat.modalExists(data.fromuid)) {
var modal = chat.getModal(data.fromuid);
chat.appendChatMessage(modal, data.message, data.timestamp);
if (modal.is(":visible")) {
chat.load(modal.attr('UUID'));
} else {
chat.toggleNew(modal.attr('UUID'), true);
}
if (!modal.is(":visible") || !app.isFocused) {
app.alternatingTitle(data.username + ' has messaged you');
}
} else {
chat.createModal(data.username, data.fromuid, function(modal) {
chat.toggleNew(modal.attr('UUID'), true);
app.alternatingTitle(data.username + ' has messaged you');
});
}
});
});
function updateUnreadCount(count) { function updateUnreadCount(count) {
$('#unread-count').toggleClass('unread-count', count > 0); $('#unread-count').toggleClass('unread-count', count > 0);
$('#unread-count').attr('data-content', count > 20 ? '20+' : count); $('#unread-count').attr('data-content', count > 20 ? '20+' : count);
} }
socket.on('event:unread.updateCount', updateUnreadCount); socket.on('event:unread.updateCount', updateUnreadCount);
socket.emit('api:user.getUnreadCount', updateUnreadCount); socket.emit('api:user.getUnreadCount', updateUnreadCount);
});
}());

64
public/src/modules/chat.js
Unescape Escape View File

@ -2,6 +2,70 @@ define(['taskbar', 'string'], function(taskbar, S) {
var module = {}; var module = {};
module.prepareDOM = function() {
// Chats Dropdown
var chatsToggleEl = $('#chat_dropdown'),
chatsListEl = $('#chat-list'),
chatDropdownEl = chatsToggleEl.parent();
chatsToggleEl.on('click', function() {
if (chatDropdownEl.hasClass('open')) {
return;
}
socket.emit('api:modules.chats.list', function(chats) {
var chatsFrag = document.createDocumentFragment(),
chatEl = document.createElement('li'),
numChats = chats.length,
x, userObj;
if (numChats > 0) {
for(x=0;x<numChats;x++) {
userObj = chats[x];
chatEl.setAttribute('data-uid', userObj.uid);
chatEl.innerHTML = '<a href="javascript:app.openChat(\'' + userObj.username + '\', ' + userObj.uid + ');"><img src="' + userObj.picture + '" title="' + userObj.username + '" />' + userObj.username + '</a>';
chatsFrag.appendChild(chatEl.cloneNode(true));
}
chatsListEl.empty();
chatsListEl.html(chatsFrag);
} else {
translator.get('modules:chat.no_active', function(str) {
chatEl.innerHTML = '<a href="#">' + str + '</a>';
chatsFrag.appendChild(chatEl.cloneNode(true));
chatsListEl.empty();
chatsListEl.html(chatsFrag);
});
}
});
});
socket.on('event:chats.receive', function(data) {
require(['chat'], function(chat) {
if (chat.modalExists(data.fromuid)) {
var modal = chat.getModal(data.fromuid);
chat.appendChatMessage(modal, data.message, data.timestamp);
if (modal.is(":visible")) {
chat.load(modal.attr('UUID'));
} else {
chat.toggleNew(modal.attr('UUID'), true);
}
if (!modal.is(":visible") || !app.isFocused) {
app.alternatingTitle(data.username + ' has messaged you');
}
} else {
chat.createModal(data.username, data.fromuid, function(modal) {
chat.toggleNew(modal.attr('UUID'), true);
app.alternatingTitle(data.username + ' has messaged you');
});
}
});
});
}
module.bringModalToTop = function(chatModal) { module.bringModalToTop = function(chatModal) {
var topZ = 0; var topZ = 0;
$('.chat-modal').each(function() { $('.chat-modal').each(function() {

131
public/src/modules/notifications.js
Unescape Escape View File

@ -0,0 +1,131 @@
define(function() {
var Notifications = {};
Notifications.prepareDOM = function() {
// Notifications dropdown
var notifContainer = document.getElementsByClassName('notifications')[0],
notifTrigger = notifContainer.querySelector('a'),
notifList = document.getElementById('notif-list'),
notifIcon = $('.notifications a');
notifTrigger.addEventListener('click', function(e) {
e.preventDefault();
if (notifContainer.className.indexOf('open') === -1) {
socket.emit('api:notifications.get', null, function(data) {
var notifFrag = document.createDocumentFragment(),
notifEl = document.createElement('li'),
numRead = data.read.length,
numUnread = data.unread.length,
x;
notifList.innerHTML = '';
if ((data.read.length + data.unread.length) > 0) {
for (x = 0; x < numUnread; x++) {
notifEl.setAttribute('data-nid', data.unread[x].nid);
notifEl.className = 'unread';
notifEl.innerHTML = '<a href="' + data.unread[x].path + '"><span class="pull-right">' + utils.relativeTime(data.unread[x].datetime, true) + '</span>' + data.unread[x].text + '</a>';
notifFrag.appendChild(notifEl.cloneNode(true));
}
for (x = 0; x < numRead; x++) {
notifEl.setAttribute('data-nid', data.read[x].nid);
notifEl.className = '';
notifEl.innerHTML = '<a href="' + data.read[x].path + '"><span class="pull-right">' + utils.relativeTime(data.read[x].datetime, true) + '</span>' + data.read[x].text + '</a>';
notifFrag.appendChild(notifEl.cloneNode(true));
}
} else {
notifEl.className = 'no-notifs';
notifEl.innerHTML = '<a>You have no notifications</a>';
notifFrag.appendChild(notifEl.cloneNode(true));
}
// Add dedicated link to /notifications
notifEl.removeAttribute('data-nid');
notifEl.className = 'pagelink';
notifEl.innerHTML = '<a href="' + RELATIVE_PATH + '/notifications">See all Notifications</a>';
notifFrag.appendChild(notifEl.cloneNode(true));
notifList.appendChild(notifFrag);
if (data.unread.length > 0) {
notifIcon.toggleClass('active', true);
} else {
notifIcon.toggleClass('active', false);
}
socket.emit('api:modules.notifications.mark_all_read', null, function() {
notifIcon.toggleClass('active', false);
app.refreshTitle();
// Update favicon + local count
Tinycon.setBubble(0);
localStorage.setItem('notifications:count', 0);
});
});
}
});
notifList.addEventListener('click', function(e) {
var target;
switch (e.target.nodeName) {
case 'SPAN':
target = e.target.parentNode.parentNode;
break;
case 'A':
target = e.target.parentNode;
break;
case 'li':
target = e.target;
break;
}
if (target) {
var nid = parseInt(target.getAttribute('data-nid'));
if (nid > 0) socket.emit('api:modules.notifications.mark_read', nid);
}
});
var updateNotifCount = function(count) {
// Update notification icon, if necessary
if (count > 0) {
notifIcon.toggleClass('active', true);
} else {
notifIcon.toggleClass('active', false);
}
// Update the favicon + saved local count
Tinycon.setBubble(count);
localStorage.setItem('notifications:count', count);
};
socket.emit('api:notifications.getCount', function(err, count) {
if (!err) {
updateNotifCount(count);
} else {
updateNotifCount(0);
}
});
socket.on('event:new_notification', function() {
notifIcon.toggleClass('active', true);
app.alert({
alert_id: 'new_notif',
title: 'New notification',
message: 'You have unread notifications.',
type: 'warning',
timeout: 2000
});
app.refreshTitle();
if (ajaxify.currentPage === 'notifications') {
ajaxify.refresh();
}
// Update the favicon + local storage
var savedCount = parseInt(localStorage.getItem('notifications:count'),10) || 0;
updateNotifCount(savedCount+1);
});
socket.on('event:notifications.updateCount', function(count) {
updateNotifCount(count);
});
};
return Notifications;
});
Write Preview
Loading…
Cancel
Save