From c02d584b531fb5e0a875f22d8913b3f1b9d7d5e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?= Date: Sat, 17 Nov 2018 20:50:07 -0500 Subject: [PATCH] reduce initial js payload/requests --- public/src/client/category/tools.js | 35 +- public/src/client/chats/messages.js | 27 +- public/src/client/footer.js | 7 +- public/src/client/header/chat.js | 41 +++ public/src/client/header/notifications.js | 40 +++ public/src/client/notifications.js | 2 - public/src/client/topic.js | 14 +- public/src/client/topic/delete-posts.js | 18 +- public/src/client/topic/fork.js | 21 +- public/src/client/topic/merge.js | 6 +- public/src/client/topic/move-post.js | 44 +-- public/src/client/topic/postTools.js | 13 +- public/src/client/topic/replies.js | 16 +- public/src/client/topic/threadTools.js | 46 +-- public/src/modules/chat.js | 384 ++++++++++------------ public/src/modules/flags.js | 12 +- public/src/modules/notifications.js | 180 +++++----- src/meta/js.js | 10 +- 18 files changed, 471 insertions(+), 445 deletions(-) create mode 100644 public/src/client/header/chat.js create mode 100644 public/src/client/header/notifications.js diff --git a/public/src/client/category/tools.js b/public/src/client/category/tools.js index dfa31ca86a..6dca6671a3 100644 --- a/public/src/client/category/tools.js +++ b/public/src/client/category/tools.js @@ -3,12 +3,10 @@ define('forum/category/tools', [ - 'forum/topic/move', - 'forum/topic/merge', 'topicSelect', 'components', 'translator', -], function (move, merge, topicSelect, components, translator) { +], function (topicSelect, components, translator) { var CategoryTools = {}; CategoryTools.init = function (cid) { @@ -88,26 +86,35 @@ define('forum/category/tools', [ }); components.get('topic/move').on('click', function () { - var tids = topicSelect.getSelectedTids(); + require(['forum/topic/move'], function (move) { + var tids = topicSelect.getSelectedTids(); + + if (!tids.length) { + return app.alertError('[[error:no-topics-selected]]'); + } + move.init(tids, cid, onCommandComplete); + }); - if (!tids.length) { - return app.alertError('[[error:no-topics-selected]]'); - } - move.init(tids, cid, onCommandComplete); return false; }); components.get('topic/move-all').on('click', function () { - move.init(null, cid, function (err) { - if (err) { - return app.alertError(err.message); - } + require(['forum/topic/move'], function (move) { + move.init(null, cid, function (err) { + if (err) { + return app.alertError(err.message); + } - ajaxify.refresh(); + ajaxify.refresh(); + }); }); }); - merge.init(); + $('.category').on('click', '[component="topic/merge"]', function () { + require(['forum/topic/merge'], function (merge) { + merge.init(); + }); + }); CategoryTools.removeListeners(); socket.on('event:topic_deleted', setDeleteState); diff --git a/public/src/client/chats/messages.js b/public/src/client/chats/messages.js index 9ab0b181ca..6c52b1388e 100644 --- a/public/src/client/chats/messages.js +++ b/public/src/client/chats/messages.js @@ -124,20 +124,23 @@ define('forum/chats/messages', ['components', 'sounds', 'translator', 'benchpres }; messages.onChatMessageEdit = function () { - socket.on('event:chats.edit', function (data) { - data.messages.forEach(function (message) { - var self = parseInt(message.fromuid, 10) === parseInt(app.user.uid, 10); - message.self = self ? 1 : 0; - messages.parseMessage(message, function (html) { - var body = components.get('chat/message', message.messageId); - if (body.length) { - body.replaceWith(html); - components.get('chat/message', message.messageId).find('.timeago').timeago(); - } - }); + socket.removeListener('event:chats.edit', onChatMessageEdited); + socket.on('event:chats.edit', onChatMessageEdited); + }; + + function onChatMessageEdited(data) { + data.messages.forEach(function (message) { + var self = parseInt(message.fromuid, 10) === parseInt(app.user.uid, 10); + message.self = self ? 1 : 0; + messages.parseMessage(message, function (html) { + var body = components.get('chat/message', message.messageId); + if (body.length) { + body.replaceWith(html); + components.get('chat/message', message.messageId).find('.timeago').timeago(); + } }); }); - }; + } messages.delete = function (messageId, roomId) { translator.translate('[[modules:chat.delete_message_confirm]]', function (translated) { diff --git a/public/src/client/footer.js b/public/src/client/footer.js index b8db84fe09..ebf023cb57 100644 --- a/public/src/client/footer.js +++ b/public/src/client/footer.js @@ -1,7 +1,12 @@ 'use strict'; -define('forum/footer', ['notifications', 'chat', 'components', 'translator'], function (Notifications, Chat, components, translator) { +define('forum/footer', [ + 'components', + 'translator', + 'forum/header/notifications', + 'forum/header/chat', +], function (components, translator, Notifications, Chat) { Notifications.prepareDOM(); Chat.prepareDOM(); translator.prepareDOM(); diff --git a/public/src/client/header/chat.js b/public/src/client/header/chat.js new file mode 100644 index 0000000000..ccd7aa0098 --- /dev/null +++ b/public/src/client/header/chat.js @@ -0,0 +1,41 @@ +'use strict'; + +define('forum/header/chat', ['components'], function (components) { + var chat = {}; + + chat.prepareDOM = function () { + var chatsToggleEl = components.get('chat/dropdown'); + var chatsListEl = components.get('chat/list'); + + chatsToggleEl.on('click', function () { + if (chatsToggleEl.parent().hasClass('open')) { + return; + } + requireAndCall('loadChatsDropdown', chatsListEl); + }); + + if (chatsToggleEl.parents('.dropdown').hasClass('open')) { + requireAndCall('loadChatsDropdown', chatsListEl); + } + + socket.on('event:chats.receive', function (data) { + requireAndCall('onChatMessageReceived', data); + }); + + socket.on('event:user_status_change', function (data) { + requireAndCall('onUserStatusChange', data); + }); + + socket.on('event:chats.roomRename', function (data) { + requireAndCall('onRoomRename', data); + }); + }; + + function requireAndCall(method, param) { + require(['chat'], function (chat) { + chat[method](param); + }); + } + + return chat; +}); diff --git a/public/src/client/header/notifications.js b/public/src/client/header/notifications.js new file mode 100644 index 0000000000..ff532f52c7 --- /dev/null +++ b/public/src/client/header/notifications.js @@ -0,0 +1,40 @@ +'use strict'; + +define('forum/header/notifications', ['components'], function (components) { + var notifications = {}; + + notifications.prepareDOM = function () { + var notifContainer = components.get('notifications'); + var notifTrigger = notifContainer.children('a'); + var notifList = components.get('notifications/list'); + + notifTrigger.on('click', function (e) { + e.preventDefault(); + if (notifContainer.hasClass('open')) { + return; + } + + requireAndCall('loadNotifications', notifList); + }); + + if (notifTrigger.parents('.dropdown').hasClass('open')) { + requireAndCall('loadNotifications', notifList); + } + + socket.on('event:new_notification', function (data) { + requireAndCall('onNewNotification', data); + }); + + socket.on('event:notifications.updateCount', function (data) { + requireAndCall('updateNotifCount', data); + }); + }; + + function requireAndCall(method, param) { + require(['notifications'], function (notifications) { + notifications[method](param); + }); + } + + return notifications; +}); diff --git a/public/src/client/notifications.js b/public/src/client/notifications.js index 88216fe61e..97e7bb3129 100644 --- a/public/src/client/notifications.js +++ b/public/src/client/notifications.js @@ -15,8 +15,6 @@ define('forum/notifications', ['components'], function (components) { }); }); - $('.timeago').timeago(); - components.get('notifications/mark_all').on('click', function () { socket.emit('notifications.markAllRead', function (err) { if (err) { diff --git a/public/src/client/topic.js b/public/src/client/topic.js index 6a56a7f6fa..34644104f3 100644 --- a/public/src/client/topic.js +++ b/public/src/client/topic.js @@ -8,12 +8,11 @@ define('forum/topic', [ 'forum/topic/events', 'forum/topic/posts', 'forum/topic/images', - 'forum/topic/replies', 'navigator', 'sort', 'components', 'storage', -], function (infinitescroll, threadTools, postTools, events, posts, images, replies, navigator, sort, components, storage) { +], function (infinitescroll, threadTools, postTools, events, posts, images, navigator, sort, components, storage) { var Topic = {}; var currentUrl = ''; @@ -49,7 +48,6 @@ define('forum/topic', [ postTools.init(tid); threadTools.init(tid); - replies.init(tid); events.init(); sort.handleSort('topicPostSort', 'user.setTopicSort', 'topic/' + ajaxify.data.slug); @@ -61,6 +59,7 @@ define('forum/topic', [ addBlockQuoteHandler(); addParentHandler(); addDropupHandler(); + addRepliesHandler(); navigator.init('[component="post"]', ajaxify.data.postcount, Topic.toTop, Topic.toBottom, Topic.navigatorCallback, Topic.calculateIndex); @@ -177,6 +176,15 @@ define('forum/topic', [ }); } + function addRepliesHandler() { + $('[component="topic"]').on('click', '[component="post/reply-count"]', function () { + var btn = $(this); + require(['forum/topic/replies'], function (replies) { + replies.init(btn); + }); + }); + } + function updateTopicTitle() { var span = components.get('navbar/title').find('span'); if ($(window).scrollTop() > 50 && span.hasClass('hidden')) { diff --git a/public/src/client/topic/delete-posts.js b/public/src/client/topic/delete-posts.js index deee764ba6..9f7bdd9206 100644 --- a/public/src/client/topic/delete-posts.js +++ b/public/src/client/topic/delete-posts.js @@ -10,18 +10,9 @@ define('forum/topic/delete-posts', ['components', 'postSelect'], function (compo DeletePosts.init = function () { tid = ajaxify.data.tid; - $('.topic').on('click', '[component="topic/delete/posts"]', onDeletePostsClicked); - $(window).off('action:ajaxify.end', onAjaxifyEnd).on('action:ajaxify.end', onAjaxifyEnd); - }; - function onAjaxifyEnd() { - if (ajaxify.data.template.name !== 'topic' || ajaxify.data.tid !== tid) { - closeModal(); - $(window).off('action:ajaxify.end', onAjaxifyEnd); - } - } + $(window).off('action:ajaxify.end', onAjaxifyEnd).on('action:ajaxify.end', onAjaxifyEnd); - function onDeletePostsClicked() { if (modal) { return; } @@ -49,6 +40,13 @@ define('forum/topic/delete-posts', ['components', 'postSelect'], function (compo deletePosts(purgeBtn, 'posts.purgePosts'); }); }); + }; + + function onAjaxifyEnd() { + if (ajaxify.data.template.name !== 'topic' || ajaxify.data.tid !== tid) { + closeModal(); + $(window).off('action:ajaxify.end', onAjaxifyEnd); + } } function deletePosts(btn, command) { diff --git a/public/src/client/topic/fork.js b/public/src/client/topic/fork.js index 12f873bc1f..3b540e58e7 100644 --- a/public/src/client/topic/fork.js +++ b/public/src/client/topic/fork.js @@ -6,20 +6,12 @@ define('forum/topic/fork', ['components', 'postSelect'], function (components, p var forkModal; var forkCommit; var fromTid; + Fork.init = function () { fromTid = ajaxify.data.tid; - $('.topic').on('click', '[component="topic/fork"]', onForkThreadClicked); - $(window).off('action:ajaxify.end', onAjaxifyEnd).on('action:ajaxify.end', onAjaxifyEnd); - }; - function onAjaxifyEnd() { - if (ajaxify.data.template.name !== 'topic' || ajaxify.data.tid !== fromTid) { - closeForkModal(); - $(window).off('action:ajaxify.end', onAjaxifyEnd); - } - } + $(window).off('action:ajaxify.end', onAjaxifyEnd).on('action:ajaxify.end', onAjaxifyEnd); - function onForkThreadClicked() { if (forkModal) { return; } @@ -29,7 +21,7 @@ define('forum/topic/fork', ['components', 'postSelect'], function (components, p forkCommit = forkModal.find('#fork_thread_commit'); - $(document.body).append(forkModal); + $('body').append(forkModal); forkModal.find('.close,#fork_thread_cancel').on('click', closeForkModal); forkModal.find('#fork-title').on('keyup', checkForkButtonEnable); @@ -42,6 +34,13 @@ define('forum/topic/fork', ['components', 'postSelect'], function (components, p forkCommit.on('click', createTopicFromPosts); }); + }; + + function onAjaxifyEnd() { + if (ajaxify.data.template.name !== 'topic' || ajaxify.data.tid !== fromTid) { + closeForkModal(); + $(window).off('action:ajaxify.end', onAjaxifyEnd); + } } function createTopicFromPosts() { diff --git a/public/src/client/topic/merge.js b/public/src/client/topic/merge.js index fd4eb592ed..85df00636c 100644 --- a/public/src/client/topic/merge.js +++ b/public/src/client/topic/merge.js @@ -9,10 +9,6 @@ define('forum/topic/merge', function () { var selectedTids = {}; Merge.init = function () { - $('.category').on('click', '[component="topic/merge"]', onMergeTopicsClicked); - }; - - function onMergeTopicsClicked() { if (modal) { return; } @@ -33,7 +29,7 @@ define('forum/topic/merge', function () { mergeTopics(mergeBtn); }); }); - } + }; function onTopicClicked(ev) { var tid = $(this).parents('[component="category/topic"]').attr('data-tid'); diff --git a/public/src/client/topic/move-post.js b/public/src/client/topic/move-post.js index b3eb2a1436..50745b6edc 100644 --- a/public/src/client/topic/move-post.js +++ b/public/src/client/topic/move-post.js @@ -7,31 +7,7 @@ define('forum/topic/move-post', ['components', 'postSelect'], function (componen var moveModal; var moveCommit; - MovePost.init = function () { - $('.topic').on('click', '[component="topic/move-posts"]', onMovePostsClicked); - }; - - function onMovePostsClicked() { - MovePost.openMovePostModal(); - } - - function showPostsSelected() { - if (postSelect.pids.length) { - moveModal.find('#pids').translateHtml('[[topic:fork_pid_count, ' + postSelect.pids.length + ']]'); - } else { - moveModal.find('#pids').translateHtml('[[topic:fork_no_pids]]'); - } - } - - function checkMoveButtonEnable() { - if (moveModal.find('#topicId').val().length && postSelect.pids.length) { - moveCommit.removeAttr('disabled'); - } else { - moveCommit.attr('disabled', true); - } - } - - MovePost.openMovePostModal = function (postEl) { + MovePost.init = function (postEl) { if (moveModal) { return; } @@ -40,7 +16,7 @@ define('forum/topic/move-post', ['components', 'postSelect'], function (componen moveCommit = moveModal.find('#move_posts_confirm'); - $(document.body).append(moveModal); + $('body').append(moveModal); moveModal.find('.close,#move_posts_cancel').on('click', closeMoveModal); moveModal.find('#topicId').on('keyup', checkMoveButtonEnable); @@ -57,6 +33,22 @@ define('forum/topic/move-post', ['components', 'postSelect'], function (componen }); }; + function showPostsSelected() { + if (postSelect.pids.length) { + moveModal.find('#pids').translateHtml('[[topic:fork_pid_count, ' + postSelect.pids.length + ']]'); + } else { + moveModal.find('#pids').translateHtml('[[topic:fork_no_pids]]'); + } + } + + function checkMoveButtonEnable() { + if (moveModal.find('#topicId').val().length && postSelect.pids.length) { + moveCommit.removeAttr('disabled'); + } else { + moveCommit.attr('disabled', true); + } + } + function onPostToggled() { checkMoveButtonEnable(); showPostsSelected(); diff --git a/public/src/client/topic/postTools.js b/public/src/client/topic/postTools.js index 1608811166..e7be097e79 100644 --- a/public/src/client/topic/postTools.js +++ b/public/src/client/topic/postTools.js @@ -7,9 +7,7 @@ define('forum/topic/postTools', [ 'components', 'translator', 'forum/topic/votes', - 'forum/topic/move-post', - 'forum/topic/diffs', -], function (share, navigator, components, translator, votes, movePost, diffs) { +], function (share, navigator, components, translator, votes) { var PostTools = {}; var staleReplyAnyway = false; @@ -147,7 +145,9 @@ define('forum/topic/postTools', [ if (config.enablePostHistory && ajaxify.data.privileges['posts:history']) { postContainer.on('click', '[component="post/view-history"], [component="post/edit-indicator"]', function () { var btn = $(this); - diffs.open(getData(btn, 'data-pid')); + require(['forum/topic/diffs'], function (diffs) { + diffs.open(getData(btn, 'data-pid')); + }); }); } @@ -201,7 +201,10 @@ define('forum/topic/postTools', [ }); postContainer.on('click', '[component="post/move"]', function () { - movePost.openMovePostModal($(this).parents('[data-pid]')); + var btn = $(this); + require(['forum/topic/move-post'], function (movePost) { + movePost.init(btn.parents('[data-pid]')); + }); }); postContainer.on('click', '[component="post/ban-ip"]', function () { diff --git a/public/src/client/topic/replies.js b/public/src/client/topic/replies.js index a931ce6eec..e02c2df1ae 100644 --- a/public/src/client/topic/replies.js +++ b/public/src/client/topic/replies.js @@ -4,19 +4,7 @@ define('forum/topic/replies', ['navigator', 'components', 'forum/topic/posts'], function (navigator, components, posts) { var Replies = {}; - Replies.init = function (tid) { - addPostHandlers(tid); - }; - - function addPostHandlers(tid) { - var postContainer = components.get('topic'); - - postContainer.on('click', '[component="post/reply-count"]', function () { - onRepliesClicked($(this), tid); - }); - } - - function onRepliesClicked(button) { + Replies.init = function (button) { var post = button.closest('[data-pid]'); var pid = post.data('pid'); var open = button.find('[component="post/replies/open"]'); @@ -60,7 +48,7 @@ define('forum/topic/replies', ['navigator', 'components', 'forum/topic/posts'], $(this).remove(); }); } - } + }; Replies.onNewPost = function (data) { var post = data.posts[0]; diff --git a/public/src/client/topic/threadTools.js b/public/src/client/topic/threadTools.js index e8b6839d82..14d581a80f 100644 --- a/public/src/client/topic/threadTools.js +++ b/public/src/client/topic/threadTools.js @@ -2,14 +2,9 @@ define('forum/topic/threadTools', [ - 'forum/topic/fork', - 'forum/topic/move', - 'forum/topic/delete-posts', - 'forum/topic/move-post', 'components', 'translator', - 'benchpress', -], function (fork, move, deletePosts, movePosts, components, translator, Benchpress) { +], function (components, translator) { var ThreadTools = {}; ThreadTools.init = function (tid) { @@ -75,21 +70,37 @@ define('forum/topic/threadTools', [ }); topicContainer.on('click', '[component="topic/move"]', function () { - move.init([tid], ajaxify.data.cid); + require(['forum/topic/move'], function (move) { + move.init([tid], ajaxify.data.cid); + }); return false; }); - deletePosts.init(); - fork.init(); - movePosts.init(); + topicContainer.on('click', '[component="topic/delete/posts"]', function () { + require(['forum/topic/delete-posts'], function (deletePosts) { + deletePosts.init(); + }); + }); + + topicContainer.on('click', '[component="topic/fork"]', function () { + require(['forum/topic/fork'], function (fork) { + fork.init(); + }); + }); - $('.topic').on('click', '[component="topic/following"]', function () { + topicContainer.on('click', '[component="topic/move-posts"]', function () { + require(['forum/topic/move-post'], function (movePosts) { + movePosts.init(); + }); + }); + + topicContainer.on('click', '[component="topic/following"]', function () { changeWatching('follow'); }); - $('.topic').on('click', '[component="topic/not-following"]', function () { + topicContainer.on('click', '[component="topic/not-following"]', function () { changeWatching('unfollow'); }); - $('.topic').on('click', '[component="topic/ignoring"]', function () { + topicContainer.on('click', '[component="topic/ignoring"]', function () { changeWatching('ignore'); }); @@ -140,12 +151,9 @@ define('forum/topic/threadTools', [ if (err) { return app.alertError(err); } - - Benchpress.parse('partials/topic/topic-menu-list', data, function (html) { - translator.translate(html, function (html) { - dropdownMenu.html(html); - $(window).trigger('action:topic.tools.load'); - }); + app.parseAndTranslate('partials/topic/topic-menu-list', data, function (html) { + dropdownMenu.html(html); + $(window).trigger('action:topic.tools.load'); }); }); }); diff --git a/public/src/modules/chat.js b/public/src/modules/chat.js index 8ec6cd0300..0ed0c33230 100644 --- a/public/src/modules/chat.js +++ b/public/src/modules/chat.js @@ -1,64 +1,61 @@ 'use strict'; - define('chat', [ 'components', 'taskbar', - 'string', - 'sounds', - 'forum/chats', - 'forum/chats/messages', - 'translator', - 'scrollStop', - 'benchpress', -], function (components, taskbar, S, sounds, Chats, ChatsMessages, translator, scrollStop, Benchpress) { +], function (components, taskbar) { var module = {}; var newMessage = false; - module.prepareDOM = function () { - var chatsToggleEl = components.get('chat/dropdown'); - var chatsListEl = components.get('chat/list'); - var chatsDropdownWrapper = chatsToggleEl.parents('.dropdown'); - - chatsToggleEl.on('click', function () { - if (chatsToggleEl.parent().hasClass('open')) { - return; + module.loadChatsDropdown = function (chatsListEl) { + socket.emit('modules.chats.getRecentChats', { + uid: app.user.uid, + after: 0, + }, function (err, data) { + if (err) { + return app.alertError(err.message); } - module.loadChatsDropdown(chatsListEl); - }); - - if (chatsDropdownWrapper.hasClass('open')) { - module.loadChatsDropdown(chatsListEl); - } + var rooms = data.rooms.filter(function (room) { + return room.teaser; + }); - chatsListEl.on('click', '[data-roomid]', function (ev) { - if ($(ev.target).parents('.user-link').length) { - return; - } - var roomId = $(this).attr('data-roomid'); - if (!ajaxify.currentPage.match(/^chats\//)) { - app.openChat(roomId); - } else { - ajaxify.go('user/' + app.user.userslug + '/chats/' + roomId); - } - }); + app.parseAndTranslate('partials/chats/dropdown', { rooms: rooms }, function (html) { + chatsListEl.find('*').not('.navigation-link').remove(); + chatsListEl.prepend(html); + app.createUserTooltips(chatsListEl, 'right'); + chatsListEl.off('click').on('click', '[data-roomid]', function (ev) { + if ($(ev.target).parents('.user-link').length) { + return; + } + var roomId = $(this).attr('data-roomid'); + if (!ajaxify.currentPage.match(/^chats\//)) { + app.openChat(roomId); + } else { + ajaxify.go('user/' + app.user.userslug + '/chats/' + roomId); + } + }); - $('[component="chats/mark-all-read"]').on('click', function () { - socket.emit('modules.chats.markAllRead', function (err) { - if (err) { - return app.alertError(err); - } + $('[component="chats/mark-all-read"]').off('click').on('click', function () { + socket.emit('modules.chats.markAllRead', function (err) { + if (err) { + return app.alertError(err); + } + }); + }); }); }); + }; - socket.on('event:chats.receive', function (data) { - var username = data.message.fromUser.username; - var isSelf = data.self === 1; - data.message.self = data.self; - newMessage = data.self === 0; - if (module.modalExists(data.roomId)) { + module.onChatMessageReceived = function (data) { + var username = data.message.fromUser.username; + var isSelf = data.self === 1; + data.message.self = data.self; + + newMessage = data.self === 0; + if (module.modalExists(data.roomId)) { + require(['forum/chats/messages'], function (ChatsMessages) { var modal = module.getModal(data.roomId); ChatsMessages.appendChatMessage(modal.find('.chat-content'), data.message); @@ -71,77 +68,54 @@ define('chat', [ } if (!isSelf && (!modal.is(':visible') || !app.isFocused)) { - app.alternatingTitle('[[modules:chat.user_has_messaged_you, ' + username + ']]'); - sounds.play('chat-incoming', 'chat.incoming:' + data.message.mid); - + updateTitleAndPlaySound(data.message.mid, username); taskbar.push('chat', modal.attr('data-uuid'), { title: '[[modules:chat.chatting_with]] ' + (data.roomName || username), touid: data.message.fromUser.uid, roomId: data.roomId, }); } - } else if (!ajaxify.data.template.chats) { - socket.emit('modules.chats.loadRoom', { - roomId: data.roomId, - }, function (err, roomData) { - if (err) { - return app.alertError(err.message); - } + }); + } else if (!ajaxify.data.template.chats) { + socket.emit('modules.chats.loadRoom', { + roomId: data.roomId, + }, function (err, roomData) { + if (err) { + return app.alertError(err.message); + } - roomData.users = roomData.users.filter(function (user) { - return user && parseInt(user.uid, 10) !== parseInt(app.user.uid, 10); - }); - roomData.silent = true; - roomData.uid = app.user.uid; - module.createModal(roomData, function (modal) { - module.toggleNew(modal.attr('data-uuid'), !isSelf, true); - if (!isSelf) { - app.alternatingTitle('[[modules:chat.user_has_messaged_you, ' + username + ']]'); - sounds.play('chat-incoming', 'chat.incoming:' + data.message.mid); - } - }); + roomData.users = roomData.users.filter(function (user) { + return user && parseInt(user.uid, 10) !== parseInt(app.user.uid, 10); }); - } - }); - - socket.on('event:user_status_change', function (data) { - var modal = module.getModal(data.uid); - app.updateUserStatus(modal.find('[component="user/status"]'), data.status); - }); + roomData.silent = true; + roomData.uid = app.user.uid; + module.createModal(roomData, function (modal) { + module.toggleNew(modal.attr('data-uuid'), !isSelf, true); + if (!isSelf) { + updateTitleAndPlaySound(data.message.mid, username); + } + }); + }); + } + }; - socket.on('event:chats.roomRename', function (data) { - var newTitle = $('
').html(data.newName).text(); - var modal = module.getModal(data.roomId); - modal.find('[component="chat/room/name"]').text(newTitle); - taskbar.updateTitle('chat', modal.attr('data-uuid'), newTitle); + function updateTitleAndPlaySound(mid, username) { + app.alternatingTitle('[[modules:chat.user_has_messaged_you, ' + username + ']]'); + require(['sounds'], function (sounds) { + sounds.play('chat-incoming', 'chat.incoming:' + mid); }); + } - ChatsMessages.onChatMessageEdit(); + module.onUserStatusChange = function (data) { + var modal = module.getModal(data.uid); + app.updateUserStatus(modal.find('[component="user/status"]'), data.status); }; - module.loadChatsDropdown = function (chatsListEl) { - socket.emit('modules.chats.getRecentChats', { - uid: app.user.uid, - after: 0, - }, function (err, data) { - if (err) { - return app.alertError(err.message); - } - - var rooms = data.rooms.filter(function (room) { - return room.teaser; - }); - - Benchpress.parse('partials/chats/dropdown', { - rooms: rooms, - }, function (html) { - translator.translate(html, function (translated) { - chatsListEl.find('*').not('.navigation-link').remove(); - chatsListEl.prepend(translated); - app.createUserTooltips(chatsListEl, 'right'); - }); - }); - }); + module.onRoomRename = function (data) { + var newTitle = $('
').html(data.newName).text(); + var modal = module.getModal(data.roomId); + modal.find('[component="chat/room/name"]').text(newTitle); + taskbar.updateTitle('chat', modal.attr('data-uuid'), newTitle); }; module.getModal = function (roomId) { @@ -153,115 +127,118 @@ define('chat', [ }; module.createModal = function (data, callback) { - app.parseAndTranslate('chat', data, function (chatModal) { - var uuid = utils.generateUUID(); - var dragged = false; - - chatModal.attr('id', 'chat-modal-' + data.roomId); - chatModal.attr('data-roomid', data.roomId); - chatModal.attr('intervalId', 0); - chatModal.attr('data-uuid', uuid); - chatModal.css('position', 'fixed'); - chatModal.appendTo($('body')); - chatModal.find('.timeago').timeago(); - module.center(chatModal); - - app.loadJQueryUI(function () { - chatModal.find('.modal-content').resizable({ - handles: 'n, e, s, w, se', - minHeight: 250, - minWidth: 400, - }); + require(['scrollStop', 'forum/chats', 'forum/chats/messages'], function (scrollStop, Chats, ChatsMessages) { + app.parseAndTranslate('chat', data, function (chatModal) { + var uuid = utils.generateUUID(); + var dragged = false; + + chatModal.attr('id', 'chat-modal-' + data.roomId); + chatModal.attr('data-roomid', data.roomId); + chatModal.attr('intervalId', 0); + chatModal.attr('data-uuid', uuid); + chatModal.css('position', 'fixed'); + chatModal.appendTo($('body')); + chatModal.find('.timeago').timeago(); + module.center(chatModal); + + app.loadJQueryUI(function () { + chatModal.find('.modal-content').resizable({ + handles: 'n, e, s, w, se', + minHeight: 250, + minWidth: 400, + }); - chatModal.find('.modal-content').on('resize', function (event, ui) { - if (ui.originalSize.height === ui.size.height) { - return; - } + chatModal.find('.modal-content').on('resize', function (event, ui) { + if (ui.originalSize.height === ui.size.height) { + return; + } - chatModal.find('.modal-body').css('height', module.calculateChatListHeight(chatModal)); + chatModal.find('.modal-body').css('height', module.calculateChatListHeight(chatModal)); + }); + + chatModal.draggable({ + start: function () { + taskbar.updateActive(uuid); + }, + stop: function () { + chatModal.find('#chat-message-input').focus(); + }, + distance: 10, + handle: '.modal-header', + }); }); - chatModal.draggable({ - start: function () { - taskbar.updateActive(uuid); - }, - stop: function () { - chatModal.find('#chat-message-input').focus(); - }, - distance: 10, - handle: '.modal-header', + scrollStop.apply(chatModal.find('[component="chat/messages"]')); + + chatModal.find('#chat-close-btn').on('click', function () { + module.close(chatModal); }); - }); - scrollStop.apply(chatModal.find('[component="chat/messages"]')); + function gotoChats() { + var text = components.get('chat/input').val(); + $(window).one('action:ajaxify.end', function () { + components.get('chat/input').val(text); + }); - chatModal.find('#chat-close-btn').on('click', function () { - module.close(chatModal); - }); + ajaxify.go('user/' + app.user.userslug + '/chats/' + chatModal.attr('data-roomid')); + module.close(chatModal); + } - function gotoChats() { - var text = components.get('chat/input').val(); - $(window).one('action:ajaxify.end', function () { - components.get('chat/input').val(text); + chatModal.find('.modal-header').on('dblclick', gotoChats); + chatModal.find('button[data-action="maximize"]').on('click', gotoChats); + chatModal.find('button[data-action="minimize"]').on('click', function () { + var uuid = chatModal.attr('data-uuid'); + module.minimize(uuid); }); - ajaxify.go('user/' + app.user.userslug + '/chats/' + chatModal.attr('data-roomid')); - module.close(chatModal); - } + chatModal.on('click', ':not(.close)', function () { + taskbar.updateActive(chatModal.attr('data-uuid')); - chatModal.find('.modal-header').on('dblclick', gotoChats); - chatModal.find('button[data-action="maximize"]').on('click', gotoChats); - chatModal.find('button[data-action="minimize"]').on('click', function () { - var uuid = chatModal.attr('data-uuid'); - module.minimize(uuid); - }); + if (dragged) { + dragged = false; + } + }); - chatModal.on('click', ':not(.close)', function () { - taskbar.updateActive(chatModal.attr('data-uuid')); + chatModal.on('mousemove', function (e) { + if (e.which === 1) { + dragged = true; + } + }); - if (dragged) { - dragged = false; - } - }); + chatModal.on('mousemove keypress click', function () { + if (newMessage) { + socket.emit('modules.chats.markRead', data.roomId); + newMessage = false; + } + }); - chatModal.on('mousemove', function (e) { - if (e.which === 1) { - dragged = true; - } - }); + Chats.addActionHandlers(chatModal.find('[component="chat/messages"]'), data.roomId); + Chats.addRenameHandler(chatModal.attr('data-roomid'), chatModal.find('[data-action="rename"]'), data.roomName); + Chats.addLeaveHandler(chatModal.attr('data-roomid'), chatModal.find('[data-action="leave"]')); + Chats.addSendHandlers(chatModal.attr('data-roomid'), chatModal.find('.chat-input'), chatModal.find('[data-action="send"]')); + Chats.addMemberHandler(chatModal.attr('data-roomid'), chatModal.find('[data-action="members"]')); - chatModal.on('mousemove keypress click', function () { - if (newMessage) { - socket.emit('modules.chats.markRead', data.roomId); - newMessage = false; - } - }); + Chats.createAutoComplete(chatModal.find('[component="chat/input"]')); - Chats.addActionHandlers(chatModal.find('[component="chat/messages"]'), data.roomId); - Chats.addRenameHandler(chatModal.attr('data-roomid'), chatModal.find('[data-action="rename"]'), data.roomName); - Chats.addLeaveHandler(chatModal.attr('data-roomid'), chatModal.find('[data-action="leave"]')); - Chats.addSendHandlers(chatModal.attr('data-roomid'), chatModal.find('.chat-input'), chatModal.find('[data-action="send"]')); - Chats.addMemberHandler(chatModal.attr('data-roomid'), chatModal.find('[data-action="members"]')); + Chats.addScrollHandler(chatModal.attr('data-roomid'), data.uid, chatModal.find('.chat-content')); - Chats.createAutoComplete(chatModal.find('[component="chat/input"]')); + Chats.addCharactersLeftHandler(chatModal); + Chats.addIPHandler(chatModal); + ChatsMessages.onChatMessageEdit(); - Chats.addScrollHandler(chatModal.attr('data-roomid'), data.uid, chatModal.find('.chat-content')); + taskbar.push('chat', chatModal.attr('data-uuid'), { + title: '[[modules:chat.chatting_with]] ' + (data.roomName || (data.users.length ? data.users[0].username : '')), + roomId: data.roomId, + icon: 'fa-comment', + state: '', + }); - Chats.addCharactersLeftHandler(chatModal); - Chats.addIPHandler(chatModal); + $(window).trigger('action:chat.loaded', chatModal); - taskbar.push('chat', chatModal.attr('data-uuid'), { - title: '[[modules:chat.chatting_with]] ' + (data.roomName || (data.users.length ? data.users[0].username : '')), - roomId: data.roomId, - icon: 'fa-comment', - state: '', + if (typeof callback === 'function') { + callback(chatModal); + } }); - - $(window).trigger('action:chat.loaded', chatModal); - - if (typeof callback === 'function') { - callback(chatModal); - } }); }; @@ -297,17 +274,19 @@ define('chat', [ }; module.load = function (uuid) { - var chatModal = $('.chat-modal[data-uuid="' + uuid + '"]'); - chatModal.removeClass('hide'); - taskbar.updateActive(uuid); - ChatsMessages.scrollToBottom(chatModal.find('.chat-content')); - module.focusInput(chatModal); - socket.emit('modules.chats.markRead', chatModal.attr('data-roomid')); - - var env = utils.findBootstrapEnvironment(); - if (env === 'xs' || env === 'sm') { - module.enableMobileBehaviour(chatModal); - } + require(['forum/chats/messages'], function (ChatsMessages) { + var chatModal = $('.chat-modal[data-uuid="' + uuid + '"]'); + chatModal.removeClass('hide'); + taskbar.updateActive(uuid); + ChatsMessages.scrollToBottom(chatModal.find('.chat-content')); + module.focusInput(chatModal); + socket.emit('modules.chats.markRead', chatModal.attr('data-roomid')); + + var env = utils.findBootstrapEnvironment(); + if (env === 'xs' || env === 'sm') { + module.enableMobileBehaviour(chatModal); + } + }); }; module.enableMobileBehaviour = function (modalEl) { @@ -340,6 +319,5 @@ define('chat', [ module.toggleNew = taskbar.toggleNew; - return module; }); diff --git a/public/src/modules/flags.js b/public/src/modules/flags.js index f6eb941105..8c02ee9b0a 100644 --- a/public/src/modules/flags.js +++ b/public/src/modules/flags.js @@ -1,14 +1,14 @@ 'use strict'; -define('flags', ['benchpress'], function (Benchpress) { +define('flags', function () { var Flag = {}; var flagModal; var flagCommit; var flagReason; Flag.showFlagModal = function (data) { - parseModal(data, function (html) { + app.parseAndTranslate('partials/modals/flag_modal', data, function (html) { flagModal = $(html); flagModal.on('hidden.bs.modal', function () { @@ -54,14 +54,6 @@ define('flags', ['benchpress'], function (Benchpress) { }); }; - function parseModal(tplData, callback) { - Benchpress.parse('partials/modals/flag_modal', tplData, function (html) { - require(['translator'], function (translator) { - translator.translate(html, callback); - }); - }); - } - function createFlag(type, id, reason) { if (!type || !id || !reason) { return; diff --git a/public/src/modules/notifications.js b/public/src/modules/notifications.js index 0287ecedcd..b6e9f04fed 100644 --- a/public/src/modules/notifications.js +++ b/public/src/modules/notifications.js @@ -6,101 +6,97 @@ define('notifications', ['sounds', 'translator', 'components', 'navigator', 'ben var unreadNotifs = {}; - Notifications.prepareDOM = function () { - var notifContainer = components.get('notifications'); - var notifTrigger = notifContainer.children('a'); - var notifList = components.get('notifications/list'); - var notifDropdownWrapper = notifTrigger.parents('.dropdown'); - - notifTrigger.on('click', function (e) { - e.preventDefault(); - if (notifContainer.hasClass('open')) { - return; - } - - Notifications.loadNotifications(notifList); - }); - - if (notifDropdownWrapper.hasClass('open')) { - Notifications.loadNotifications(notifList); - } - - notifList.on('click', '[data-nid]', function (ev) { - var notifEl = $(this); - if (scrollToPostIndexIfOnPage(notifEl)) { - ev.stopPropagation(); - ev.preventDefault(); - notifTrigger.dropdown('toggle'); - } - - var unread = notifEl.hasClass('unread'); - if (!unread) { - return; + Notifications.loadNotifications = function (notifList) { + socket.emit('notifications.get', null, function (err, data) { + if (err) { + return app.alertError(err.message); } - var nid = notifEl.attr('data-nid'); - markNotification(nid, true); - }); - notifContainer.on('click', '.mark-all-read', Notifications.markAllRead); + var notifs = data.unread.concat(data.read).sort(function (a, b) { + return parseInt(a.datetime, 10) > parseInt(b.datetime, 10) ? -1 : 1; + }); - notifList.on('click', '.mark-read', function () { - var liEl = $(this).parent(); - var unread = liEl.hasClass('unread'); - var nid = liEl.attr('data-nid'); - markNotification(nid, unread, function () { - liEl.toggleClass('unread'); + translator.toggleTimeagoShorthand(function () { + for (var i = 0; i < notifs.length; i += 1) { + notifs[i].timeago = $.timeago(new Date(parseInt(notifs[i].datetime, 10))); + } + translator.toggleTimeagoShorthand(); + Benchpress.parse('partials/notifications_list', { notifications: notifs }, function (html) { + notifList.translateHtml(html); + notifList.off('click').on('click', '[data-nid]', function (ev) { + var notifEl = $(this); + if (scrollToPostIndexIfOnPage(notifEl)) { + ev.stopPropagation(); + ev.preventDefault(); + components.get('notifications/list').dropdown('toggle'); + } + + var unread = notifEl.hasClass('unread'); + if (!unread) { + return; + } + var nid = notifEl.attr('data-nid'); + markNotification(nid, true); + }); + components.get('notifications').on('click', '.mark-all-read', Notifications.markAllRead); + + notifList.on('click', '.mark-read', function () { + var liEl = $(this).parent(); + var unread = liEl.hasClass('unread'); + var nid = liEl.attr('data-nid'); + markNotification(nid, unread, function () { + liEl.toggleClass('unread'); + }); + return false; + }); + }); }); - return false; }); + }; - socket.on('event:new_notification', function (notifData) { - // If a path is defined, show notif data, otherwise show generic data - var payload = { - alert_id: 'new_notif', - title: '[[notifications:new_notification]]', - timeout: parseInt(config.notificationAlertTimeout, 10) || 5000, - }; - - if (notifData.path) { - payload.message = notifData.bodyShort; - payload.type = 'info'; - payload.clickfn = function () { - markNotification(notifData.nid, true); - if (notifData.path.startsWith('http') || notifData.path.startsWith('https')) { - window.location.href = notifData.path; - } else { - window.location.href = window.location.protocol + '//' + window.location.host + config.relative_path + notifData.path; - } - }; - } else { - payload.message = '[[notifications:you_have_unread_notifications]]'; - payload.type = 'warning'; - } - - app.alert(payload); - app.refreshTitle(); - - if (ajaxify.currentPage === 'notifications') { - ajaxify.refresh(); - } + Notifications.onNewNotification = function (notifData) { + // If a path is defined, show notif data, otherwise show generic data + var payload = { + alert_id: 'new_notif', + title: '[[notifications:new_notification]]', + timeout: parseInt(config.notificationAlertTimeout, 10) || 5000, + }; - socket.emit('notifications.getCount', function (err, count) { - if (err) { - return app.alertError(err.message); + if (notifData.path) { + payload.message = notifData.bodyShort; + payload.type = 'info'; + payload.clickfn = function () { + markNotification(notifData.nid, true); + if (notifData.path.startsWith('http') || notifData.path.startsWith('https')) { + window.location.href = notifData.path; + } else { + window.location.href = window.location.protocol + '//' + window.location.host + config.relative_path + notifData.path; } + }; + } else { + payload.message = '[[notifications:you_have_unread_notifications]]'; + payload.type = 'warning'; + } - Notifications.updateNotifCount(count); - }); + app.alert(payload); + app.refreshTitle(); - if (!unreadNotifs[notifData.nid]) { - sounds.play('notification', notifData.nid); - unreadNotifs[notifData.nid] = true; + if (ajaxify.currentPage === 'notifications') { + ajaxify.refresh(); + } + + socket.emit('notifications.getCount', function (err, count) { + if (err) { + return app.alertError(err.message); } - }); - socket.on('event:notifications.updateCount', function (count) { Notifications.updateNotifCount(count); }); + + if (!unreadNotifs[notifData.nid]) { + sounds.play('notification', notifData.nid); + unreadNotifs[notifData.nid] = true; + } }; function markNotification(nid, read, callback) { @@ -130,28 +126,6 @@ define('notifications', ['sounds', 'translator', 'components', 'navigator', 'ben return false; } - Notifications.loadNotifications = function (notifList) { - socket.emit('notifications.get', null, function (err, data) { - if (err) { - return app.alertError(err.message); - } - - var notifs = data.unread.concat(data.read).sort(function (a, b) { - return parseInt(a.datetime, 10) > parseInt(b.datetime, 10) ? -1 : 1; - }); - - translator.toggleTimeagoShorthand(function () { - for (var i = 0; i < notifs.length; i += 1) { - notifs[i].timeago = $.timeago(new Date(parseInt(notifs[i].datetime, 10))); - } - translator.toggleTimeagoShorthand(); - Benchpress.parse('partials/notifications_list', { notifications: notifs }, function (html) { - notifList.translateHtml(html); - }); - }); - }); - }; - Notifications.updateNotifCount = function (count) { var notifIcon = components.get('notifications/icon'); count = Math.max(0, count); diff --git a/src/meta/js.js b/src/meta/js.js index a691c0639c..eed7783090 100644 --- a/src/meta/js.js +++ b/src/meta/js.js @@ -42,18 +42,17 @@ JS.scripts = { // files listed below are only available client-side, or are bundled in to reduce # of network requests on cold load rjs: [ 'public/src/client/footer.js', - 'public/src/client/chats.js', + 'public/src/client/header/chat.js', + 'public/src/client/header/notifications.js', 'public/src/client/infinitescroll.js', 'public/src/client/pagination.js', 'public/src/client/recent.js', 'public/src/client/unread.js', 'public/src/client/topic.js', 'public/src/client/topic/events.js', - 'public/src/client/topic/merge.js', - 'public/src/client/topic/fork.js', - 'public/src/client/topic/move.js', 'public/src/client/topic/posts.js', 'public/src/client/topic/images.js', + 'public/src/client/topic/votes.js', 'public/src/client/topic/postTools.js', 'public/src/client/topic/threadTools.js', 'public/src/client/categories.js', @@ -61,8 +60,6 @@ JS.scripts = { 'public/src/client/category/tools.js', 'public/src/modules/translator.js', - 'public/src/modules/notifications.js', - 'public/src/modules/chat.js', 'public/src/modules/components.js', 'public/src/modules/sort.js', 'public/src/modules/navigator.js', @@ -74,7 +71,6 @@ JS.scripts = { 'public/src/modules/alerts.js', 'public/src/modules/taskbar.js', 'public/src/modules/helpers.js', - 'public/src/modules/flags.js', 'public/src/modules/storage.js', 'public/src/modules/handleBack.js', ],