From c617a3f0089660fab4351e8325049377806ef4f9 Mon Sep 17 00:00:00 2001 From: barisusakli Date: Thu, 24 Sep 2015 21:14:34 -0400 Subject: [PATCH] inf scroll changes dont load main post if start > 0 --- public/src/client/category.js | 30 +++--- public/src/client/infinitescroll.js | 33 +------ public/src/client/topic.js | 4 +- public/src/client/topic/posts.js | 143 ++++++++++++---------------- src/controllers/topics.js | 4 - src/socket.io/categories.js | 14 ++- src/socket.io/topics.js | 44 ++++++--- src/topics.js | 4 +- src/views/partials/data/topic.tpl | 2 +- 9 files changed, 126 insertions(+), 152 deletions(-) diff --git a/public/src/client/category.js b/public/src/client/category.js index dbf30b7e68..ee7c37d984 100644 --- a/public/src/client/category.js +++ b/public/src/client/category.js @@ -73,7 +73,7 @@ define('forum/category', [ $('.watch').toggleClass('hidden', command === 'watch'); $('.ignore').toggleClass('hidden', command === 'ignore'); - app.alertSuccess('[[category:' + command + '.message]]') + app.alertSuccess('[[category:' + command + '.message]]'); }); }); } @@ -130,7 +130,7 @@ define('forum/category', [ $('[component="category"]').empty(); - loadTopicsAfter(bookmarkIndex, function() { + loadTopicsAfter(bookmarkIndex - 1, 1, function() { Category.scrollToTopic(bookmarkIndex, clickedIndex, 0); }); } @@ -139,6 +139,7 @@ define('forum/category', [ Category.highlightTopic = function(topicIndex) { var highlight = components.get('category/topic', 'index', topicIndex); + if (highlight.length && !highlight.hasClass('highlight')) { highlight.addClass('highlight'); setTimeout(function() { @@ -158,9 +159,10 @@ define('forum/category', [ var scrollTo = components.get('category/topic', 'index', bookmarkIndex); var cid = ajaxify.data.cid; + if (scrollTo.length && cid) { - $('html, body').animate({ - scrollTop: (scrollTo.offset().top - $('#header-menu').height() - offset) + 'px' + $('html, body').animate({ + scrollTop: (scrollTo.offset().top - offset) + 'px' }, duration !== undefined ? duration : 400, function() { Category.highlightTopic(clickedIndex); navigator.update(); @@ -321,17 +323,20 @@ define('forum/category', [ return; } - infinitescroll.calculateAfter(direction, components.get('category/topic'), config.topicsPerPage, false, function(after, offset, el) { - loadTopicsAfter(after, function() { - if (direction < 0 && el) { - Category.scrollToTopic(el.attr('data-index'), null, 0, offset); - } - }); + var topics = components.get('category/topic'); + var afterEl = direction > 0 ? topics.last() : topics.first(); + var after = parseInt(afterEl.attr('data-index'), 10) || 0; + var offset = $('#header-menu').height(); + + loadTopicsAfter(after, direction, function() { + if (direction < 0 && afterEl.length) { + Category.scrollToTopic(afterEl.attr('data-index'), null, 0, offset); + } }); }; - function loadTopicsAfter(after, callback) { - if(!utils.isNumber(after) || (after === 0 && components.get('category/topic', 'index', 0).length)) { + function loadTopicsAfter(after, direction, callback) { + if (!utils.isNumber(after) || (after === 0 && components.get('category/topic', 'index', 0).length)) { return; } @@ -339,6 +344,7 @@ define('forum/category', [ infinitescroll.loadMore('categories.loadMore', { cid: ajaxify.data.cid, after: after, + direction: direction, author: utils.params().author }, function (data, done) { if (data.topics && data.topics.length) { diff --git a/public/src/client/infinitescroll.js b/public/src/client/infinitescroll.js index 7c79da1e79..8a28b9c8cb 100644 --- a/public/src/client/infinitescroll.js +++ b/public/src/client/infinitescroll.js @@ -17,12 +17,11 @@ define('forum/infinitescroll', ['translator'], function(translator) { }; function onScroll() { - var originalPostEl = $('li[data-index="0"]'), - top = $(window).height() * 0.15 + topOffset + (originalPostEl ? originalPostEl.outerHeight() : 0), + var top = $(window).height() * 0.15 + topOffset, bottom = ($(document).height() - $(window).height()) * 0.85, currentScrollTop = $(window).scrollTop(); - if(currentScrollTop < top && currentScrollTop < previousScrollTop) { + if (currentScrollTop < top && currentScrollTop < previousScrollTop) { callback(-1); } else if (currentScrollTop > bottom && currentScrollTop > previousScrollTop) { callback(1); @@ -54,33 +53,5 @@ define('forum/infinitescroll', ['translator'], function(translator) { }); }; - scroll.calculateAfter = function(direction, selector, count, reverse, callback) { - var after = 0, - offset = 0, - el = direction > 0 ? $(selector).last() : $(selector).first(), - increment; - - count = reverse ? -count : count; - increment = reverse ? -1 : 1; - - if (direction > 0) { - after = parseInt(el.attr('data-index'), 10) + increment; - } else { - after = parseInt(el.attr('data-index'), 10); - if (isNaN(after)) { - after = 0; - } - after -= count; - if (after < 0) { - after = 0; - } - if (el && el.offset()) { - offset = el.offset().top - $('#header-menu').offset().top + $('#header-menu').height(); - } - } - - callback(after, offset, el); - }; - return scroll; }); \ No newline at end of file diff --git a/public/src/client/topic.js b/public/src/client/topic.js index 98a9661f16..8fb93e8c40 100644 --- a/public/src/client/topic.js +++ b/public/src/client/topic.js @@ -171,8 +171,8 @@ define('forum/topic', [ function enableInfiniteLoadingOrPagination() { - if(!config.usePagination) { - infinitescroll.init(posts.loadMorePosts, components.get('post', 'index', 0).height()); + if (!config.usePagination) { + infinitescroll.init(posts.loadMorePosts); } else { navigator.hide(); diff --git a/public/src/client/topic/posts.js b/public/src/client/topic/posts.js index dc9825f1dc..523da2c793 100644 --- a/public/src/client/topic/posts.js +++ b/public/src/client/topic/posts.js @@ -22,29 +22,21 @@ define('forum/topic/posts', [ return; } + updatePostCounts(data.posts); + if (config.usePagination) { - return onNewPostPagination(data); + onNewPostPagination(data); + } else { + onNewPostInfiniteScroll(data); } + }; - for (var i=0; i 1) { data.posts.forEach(function(post) { - components.get('post', 'pid', post.pid).remove(); - }); - } else { - data.posts = data.posts.filter(function(post) { - return components.get('post', 'pid', post.pid).length === 0; - }); - } - } - - var after = null, - before = null; - - function findInsertionPoint() { - var firstPostTimestamp = parseInt(data.posts[0].timestamp, 10); - var firstPostVotes = parseInt(data.posts[0].votes, 10); - var firstPostIndex = parseInt(data.posts[0].index, 10); - var replies = $(repliesSelector); - var firstReply = replies.first(); - var lastReply = replies.last(); - - if (config.topicPostSort === 'oldest_to_newest') { - if (firstPostTimestamp < parseInt(firstReply.attr('data-timestamp'), 10)) { - before = firstReply; - } else if(firstPostTimestamp >= parseInt(lastReply.attr('data-timestamp'), 10)) { - after = lastReply; - } - } else if(config.topicPostSort === 'newest_to_oldest') { - if (firstPostTimestamp > parseInt(firstReply.attr('data-timestamp'), 10)) { - before = firstReply; - } else if(firstPostTimestamp <= parseInt(lastReply.attr('data-timestamp'), 10)) { - after = lastReply; - } - } else if(config.topicPostSort === 'most_votes') { - if (firstPostVotes > parseInt(firstReply.attr('data-votes'), 10)) { - before = firstReply; - } else if(firstPostVotes < parseInt(firstReply.attr('data-votes'), 10)) { - after = lastReply; - } else { - if (firstPostIndex > parseInt(firstReply.attr('data-index'), 10)) { - before = firstReply; - } else if(firstPostIndex <= parseInt(firstReply.attr('data-index'), 10)) { - after = lastReply; + var p = components.get('post', 'pid', post.pid); + if (p.hasClass('new')) { + p.remove() } - } + }); } + data.posts = data.posts.filter(function(post) { + return components.get('post', 'pid', post.pid).length === 0; + }); } removeAlreadyAddedPosts(); + if (!data.posts.length) { return callback(); } - findInsertionPoint(); + var after, before; + + if (direction === 1) { + after = repliesSelector.last(); + } else if (direction === -1) { + before = repliesSelector.first(); + } data.title = $('
').text(ajaxify.data.title).html(); data.slug = ajaxify.data.slug; @@ -157,17 +141,13 @@ define('forum/topic/posts', [ } else if (before) { // Save document height and position for future reference (about 5 lines down) var height = $(document).height(), - scrollTop = $(document).scrollTop(), - originalPostEl = components.get('post', 'index', 0); + scrollTop = $(document).scrollTop(); // Insert the new post html.insertBefore(before); - // If the user is not at the top of the page... (or reasonably so...) - if (scrollTop > originalPostEl.offset().top) { - // Now restore the relative position the user was on prior to new post insertion - $(document).scrollTop(scrollTop + ($(document).height() - height)); - } + // Now restore the relative position the user was on prior to new post insertion + $(document).scrollTop(scrollTop + ($(document).height() - height)); } else { components.get('topic').append(html); } @@ -225,16 +205,12 @@ define('forum/topic/posts', [ return; } - var reverse = config.topicPostSort === 'newest_to_oldest' || config.topicPostSort === 'most_votes'; - - infinitescroll.calculateAfter(direction, components.get('topic').find('[data-index][data-index!="0"]:not(.new)'), config.postsPerPage, reverse, function(after, offset, el) { - loadPostsAfter(after); - }); - }; + var replies = components.get('post').not('[data-index=0]').not('.new'); + var afterEl = direction > 0 ? replies.last() : replies.first(); + var after = parseInt(afterEl.attr('data-index'), 10) || 0; - function loadPostsAfter(after) { var tid = ajaxify.data.tid; - if (!utils.isNumber(tid) || !utils.isNumber(after) || (after === 0 && components.get('post', 'index', 1).length)) { + if (!utils.isNumber(tid) || !utils.isNumber(after) || (direction < 0 && components.get('post', 'index', 0).length)) { return; } @@ -245,13 +221,14 @@ define('forum/topic/posts', [ infinitescroll.loadMore('topics.loadMore', { tid: tid, - after: after + after: after, + direction: direction }, function (data, done) { indicatorEl.fadeOut(); if (data && data.posts && data.posts.length) { - createNewPosts(data, components.get('post').not('[data-index=0]').not('.new'), done); + createNewPosts(data, components.get('post').not('[data-index=0]').not('.new'), direction, done); } else { if (app.user.uid) { socket.emit('topics.markAsRead', [tid]); @@ -260,7 +237,7 @@ define('forum/topic/posts', [ done(); } }); - } + }; Posts.processPage = function(posts) { app.createUserTooltips(); diff --git a/src/controllers/topics.js b/src/controllers/topics.js index 18069505e6..c4abfcbfbf 100644 --- a/src/controllers/topics.js +++ b/src/controllers/topics.js @@ -124,10 +124,6 @@ topicsController.get = function(req, res, callback) { topicData.pageCount = pageCount; topicData.currentPage = page; - if (page > 1) { - topicData.posts.splice(0, 1); - } - plugins.fireHook('filter:controllers.topic.get', topicData, next); }); }, diff --git a/src/socket.io/categories.js b/src/socket.io/categories.js index b437349ded..d351d5f334 100644 --- a/src/socket.io/categories.js +++ b/src/socket.io/categories.js @@ -61,7 +61,7 @@ SocketCategories.loadMore = function(socket, data, callback) { return callback(new Error('[[error:no-privileges]]')); } - + var infScrollTopicsPerPage = 20; var set = 'cid:' + data.cid + ':tids', reverse = false; @@ -72,8 +72,16 @@ SocketCategories.loadMore = function(socket, data, callback) { set = 'cid:' + data.cid + ':tids:posts'; } - var start = parseInt(data.after, 10), - stop = start + results.settings.topicsPerPage - 1; + var start = Math.max(0, parseInt(data.after, 10)) + 1; + + if (data.direction === -1) { + start = start - (reverse ? infScrollTopicsPerPage : -infScrollTopicsPerPage); + } + + var stop = start + infScrollTopicsPerPage - 1; + + start = Math.max(0, start); + stop = Math.max(0, stop); if (results.targetUid) { set = 'cid:' + data.cid + ':uid:' + results.targetUid + ':tids'; diff --git a/src/socket.io/topics.js b/src/socket.io/topics.js index 958d9f6ddd..289421157e 100644 --- a/src/socket.io/topics.js +++ b/src/socket.io/topics.js @@ -414,7 +414,7 @@ SocketTopics.follow = function(socket, tid, callback) { }; SocketTopics.loadMore = function(socket, data, callback) { - if(!data || !data.tid || !utils.isNumber(data.after) || parseInt(data.after, 10) < 0) { + if (!data || !data.tid || !utils.isNumber(data.after) || parseInt(data.after, 10) < 0) { return callback(new Error('[[error:invalid-data]]')); } @@ -425,11 +425,8 @@ SocketTopics.loadMore = function(socket, data, callback) { privileges: function(next) { privileges.topics.get(data.tid, socket.uid, next); }, - postCount: function(next) { - topics.getPostCount(data.tid, next); - }, topic: function(next) { - topics.getTopicFields(data.tid, ['deleted'], next); + topics.getTopicFields(data.tid, ['postcount', 'deleted'], next); } }, function(err, results) { if (err) { @@ -440,22 +437,35 @@ SocketTopics.loadMore = function(socket, data, callback) { return callback(new Error('[[error:no-privileges]]')); } - var set = 'tid:' + data.tid + ':posts', - reverse = false, - start = Math.max(parseInt(data.after, 10) - 1, 0); + var set = 'tid:' + data.tid + ':posts'; + var reverse = results.settings.topicPostSort === 'newest_to_oldest' || results.settings.topicPostSort === 'most_votes'; + var start = Math.max(0, parseInt(data.after, 10)); + + var infScrollPostsPerPage = 10; - if (results.settings.topicPostSort === 'newest_to_oldest' || results.settings.topicPostSort === 'most_votes') { - reverse = true; - data.after = results.postCount - 1 - data.after; - start = Math.max(parseInt(data.after, 10), 0); + if (data.direction === -1) { + start = start - (reverse ? -infScrollPostsPerPage : infScrollPostsPerPage); + } + + if (reverse) { + start = results.topic.postcount - 1 - start; if (results.settings.topicPostSort === 'most_votes') { set = 'tid:' + data.tid + ':posts:votes'; } } - var stop = start + results.settings.postsPerPage - 1; + var stop = start + (infScrollPostsPerPage - 1); + + start = Math.max(0, start); + stop = Math.max(0, stop); async.parallel({ + mainPost: function(next) { + if (start > 0) { + return next(); + } + topics.getMainPost(data.tid, socket.uid, next); + }, posts: function(next) { topics.getTopicPosts(data.tid, set, start, stop, socket.uid, reverse, next); }, @@ -468,7 +478,13 @@ SocketTopics.loadMore = function(socket, data, callback) { 'downvote:disabled': function(next) { next(null, parseInt(meta.config['downvote:disabled'], 10) === 1); } - }, callback); + }, function(err, results) { + if (results.mainPost) { + results.posts = [results.mainPost].concat(results.posts); + } + + callback(err, results); + }); }); }; diff --git a/src/topics.js b/src/topics.js index 535ae88993..cf03f5c349 100644 --- a/src/topics.js +++ b/src/topics.js @@ -266,7 +266,7 @@ var async = require('async'), return callback(null, []); } - if (topic.mainPid) { + if (topic.mainPid && start === 0) { pids.unshift(topic.mainPid); } posts.getPostsByPids(pids, uid, next); @@ -276,7 +276,7 @@ var async = require('async'), return next(null, []); } var replies = posts; - if (topic.mainPid) { + if (topic.mainPid && start === 0) { posts[0].index = 0; replies = posts.slice(1); } diff --git a/src/views/partials/data/topic.tpl b/src/views/partials/data/topic.tpl index 125926e94f..2a77407f48 100644 --- a/src/views/partials/data/topic.tpl +++ b/src/views/partials/data/topic.tpl @@ -1 +1 @@ -data-pid="{posts.pid}" data-uid="{posts.uid}" data-username="{posts.user.username}" data-userslug="{posts.user.userslug}" data-index="{posts.index}" data-timestamp="{posts.timestamp}" data-votes="{posts.votes}" itemscope itemtype="http://schema.org/Comment" \ No newline at end of file +data-index="{posts.index}" data-pid="{posts.pid}" data-uid="{posts.uid}" data-username="{posts.user.username}" data-userslug="{posts.user.userslug}" data-timestamp="{posts.timestamp}" data-votes="{posts.votes}" itemscope itemtype="http://schema.org/Comment" \ No newline at end of file