diff --git a/public/src/forum/footer.js b/public/src/forum/footer.js index 04b08013ef..99c7d8aad7 100644 --- a/public/src/forum/footer.js +++ b/public/src/forum/footer.js @@ -1,202 +1,17 @@ -(function() { +define(['notifications', 'chat'], function(Notifications, Chat) { socket.emit('api:meta.updateHeader', { fields: ['username', 'picture', 'userslug'] }, app.updateHeader); - // 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 = '' + utils.relativeTime(data.unread[x].datetime, true) + '' + data.unread[x].text + ''; - notifFrag.appendChild(notifEl.cloneNode(true)); - } - for (x = 0; x < numRead; x++) { - notifEl.setAttribute('data-nid', data.read[x].nid); - notifEl.className = ''; - notifEl.innerHTML = '' + utils.relativeTime(data.read[x].datetime, true) + '' + data.read[x].text + ''; - notifFrag.appendChild(notifEl.cloneNode(true)); - } - } else { - notifEl.className = 'no-notifs'; - notifEl.innerHTML = 'You have no notifications'; - notifFrag.appendChild(notifEl.cloneNode(true)); - } - - // Add dedicated link to /notifications - notifEl.removeAttribute('data-nid'); - notifEl.className = 'pagelink'; - notifEl.innerHTML = 'See all Notifications'; - 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' + userObj.username + ''; - - chatsFrag.appendChild(chatEl.cloneNode(true)); - } - - chatsListEl.empty(); - chatsListEl.html(chatsFrag); - } else { - translator.get('modules:chat.no_active', function(str) { - chatEl.innerHTML = '' + str + ''; - 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'); - }); - } - }); - }); + Notifications.prepareDOM(); + Chat.prepareDOM(); function updateUnreadCount(count) { - $('#unread-count').toggleClass('unread-count', count > 0); $('#unread-count').attr('data-content', count > 20 ? '20+' : count); } socket.on('event:unread.updateCount', updateUnreadCount); socket.emit('api:user.getUnreadCount', updateUnreadCount); - -}()); +}); \ No newline at end of file diff --git a/public/src/modules/chat.js b/public/src/modules/chat.js index 21475fe39d..d0f5dec0cd 100644 --- a/public/src/modules/chat.js +++ b/public/src/modules/chat.js @@ -2,6 +2,70 @@ define(['taskbar', 'string'], function(taskbar, S) { 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' + userObj.username + ''; + + chatsFrag.appendChild(chatEl.cloneNode(true)); + } + + chatsListEl.empty(); + chatsListEl.html(chatsFrag); + } else { + translator.get('modules:chat.no_active', function(str) { + chatEl.innerHTML = '' + str + ''; + 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) { var topZ = 0; $('.chat-modal').each(function() { diff --git a/public/src/modules/notifications.js b/public/src/modules/notifications.js new file mode 100644 index 0000000000..250bf6e77d --- /dev/null +++ b/public/src/modules/notifications.js @@ -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 = '' + utils.relativeTime(data.unread[x].datetime, true) + '' + data.unread[x].text + ''; + notifFrag.appendChild(notifEl.cloneNode(true)); + } + for (x = 0; x < numRead; x++) { + notifEl.setAttribute('data-nid', data.read[x].nid); + notifEl.className = ''; + notifEl.innerHTML = '' + utils.relativeTime(data.read[x].datetime, true) + '' + data.read[x].text + ''; + notifFrag.appendChild(notifEl.cloneNode(true)); + } + } else { + notifEl.className = 'no-notifs'; + notifEl.innerHTML = 'You have no notifications'; + notifFrag.appendChild(notifEl.cloneNode(true)); + } + + // Add dedicated link to /notifications + notifEl.removeAttribute('data-nid'); + notifEl.className = 'pagelink'; + notifEl.innerHTML = 'See all Notifications'; + 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; +}); \ No newline at end of file