From 98c14e0e68a15bfcb40b3ca90276054ea165f7ca Mon Sep 17 00:00:00 2001 From: Julian Lam Date: Tue, 20 Nov 2018 16:56:54 -0500 Subject: [PATCH] fix: removal of scroll anchoring code in favour of browser handling closes #6150 --- public/js-enabled.css | 4 -- public/less/global.less | 18 ------ public/src/client/topic.js | 4 +- public/src/client/topic/diffs.js | 2 - public/src/client/topic/events.js | 2 - public/src/client/topic/images.js | 101 +----------------------------- public/src/client/topic/posts.js | 3 - 7 files changed, 3 insertions(+), 131 deletions(-) diff --git a/public/js-enabled.css b/public/js-enabled.css index 2fddb0542f..269d7d42ab 100644 --- a/public/js-enabled.css +++ b/public/js-enabled.css @@ -1,7 +1,3 @@ /* The following stylesheet is only included on pages that can execute javascript */ - -.page-topic [component="post/content"] img:not(.not-responsive):not([data-state]) { - display: none !important; -} \ No newline at end of file diff --git a/public/less/global.less b/public/less/global.less index a4c838dbbf..7fb8234708 100644 --- a/public/less/global.less +++ b/public/less/global.less @@ -6,21 +6,3 @@ ========== */ -/* Prevent viewport shuffling on image load by restricting image dimensions until viewed by the browser */ -.page-topic [component="post/content"] img { - transition: width 500ms ease; - transition: height 500ms ease; - transition: opacity 500ms ease; - - &[data-state="unloaded"], &[data-state="loading"] { - display: inherit; - height: 0; - opacity: 0; - } - - &[data-state="loaded"] { - display: inherit; - height: auto; - opacity: 1; - } -} \ No newline at end of file diff --git a/public/src/client/topic.js b/public/src/client/topic.js index 322fead491..9c7254088d 100644 --- a/public/src/client/topic.js +++ b/public/src/client/topic.js @@ -207,7 +207,7 @@ define('forum/topic', [ return index; }; - Topic.navigatorCallback = function (index, elementCount, threshold) { + Topic.navigatorCallback = function (index, elementCount) { var path = ajaxify.removeRelativePath(window.location.pathname.slice(1)); if (!path.startsWith('topic')) { return; @@ -217,8 +217,6 @@ define('forum/topic', [ return; } - images.loadImages(threshold); - var newUrl = 'topic/' + ajaxify.data.slug + (index > 1 ? ('/' + index) : ''); if (newUrl !== currentUrl) { diff --git a/public/src/client/topic/diffs.js b/public/src/client/topic/diffs.js index be7b5b0731..7f1e8ae115 100644 --- a/public/src/client/topic/diffs.js +++ b/public/src/client/topic/diffs.js @@ -68,8 +68,6 @@ define('forum/topic/diffs', ['forum/topic/images', 'benchpress', 'translator'], posts: [data], }, function (html) { postContainer.empty().append(html); - Images.unloadImages(html); - Images.loadImages(); }); }); }; diff --git a/public/src/client/topic/events.js b/public/src/client/topic/events.js index 95e5b2720a..fa2b07d1c4 100644 --- a/public/src/client/topic/events.js +++ b/public/src/client/topic/events.js @@ -130,8 +130,6 @@ define('forum/topic/events', [ editedPostEl.html(translator.unescape(data.post.content)); editedPostEl.find('img:not(.not-responsive)').addClass('img-responsive'); images.wrapImagesInLinks(editedPostEl.parent()); - images.unloadImages(editedPostEl.parent()); - images.loadImages(); editedPostEl.fadeIn(250); var editData = { diff --git a/public/src/client/topic/images.js b/public/src/client/topic/images.js index e121eda7c2..cb8dd0fcfb 100644 --- a/public/src/client/topic/images.js +++ b/public/src/client/topic/images.js @@ -1,104 +1,8 @@ 'use strict'; -define('forum/topic/images', [ - 'forum/topic/postTools', - 'navigator', - 'components', -], function (postTools, navigator, components) { - var Images = { - _imageLoaderTimeout: undefined, - }; - - Images.unloadImages = function (posts) { - var images = posts.find('[component="post/content"] img:not(.not-responsive)'); - - if (config.delayImageLoading) { - images.each(function () { - $(this).attr('data-src', $(this).attr('src')); - }).attr('data-state', 'unloaded').attr('src', 'about:blank'); - } else { - images.attr('data-state', 'loaded'); - Images.wrapImagesInLinks(posts); - $(window).trigger('action:images.loaded'); - } - }; - - Images.loadImages = function (threshold) { - if (Images._imageLoaderTimeout) { - clearTimeout(Images._imageLoaderTimeout); - } - - if (!config.delayImageLoading) { - return; - } - - Images._imageLoaderTimeout = setTimeout(function () { - /* - If threshold is defined, images loaded above this threshold will modify - the user's scroll position so they are not scrolled away from content - they were reading. Images loaded below this threshold will push down content. - - If no threshold is defined, loaded images will push down content, as per - default - */ - - var images = components.get('post/content').find('img[data-state="unloaded"]'); - var visible = images.filter(function () { - return utils.isElementInViewport(this); - }); - var posts = $.unique(visible.map(function () { - return $(this).parents('[component="post"]').get(0); - })); - var scrollTop = $(window).scrollTop(); - var adjusting = false; - var adjustQueue = []; - var oldHeight; - var newHeight; - - function adjustPosition() { - adjusting = true; - oldHeight = document.body.clientHeight; - - // Display the image - $(this).attr('data-state', 'loaded'); - newHeight = document.body.clientHeight; - - var imageRect = this.getBoundingClientRect(); - if (imageRect.top < threshold) { - scrollTop += newHeight - oldHeight; - $(window).scrollTop(scrollTop); - } - - if (adjustQueue.length) { - adjustQueue.pop()(); - } else { - adjusting = false; - - Images.wrapImagesInLinks(posts); - $(window).trigger('action:images.loaded'); - posts.length = 0; - } - } - - // For each image, reset the source and adjust scrollTop when loaded - visible.attr('data-state', 'loading'); - visible.each(function (index, image) { - image = $(image); - - image.on('load', function () { - if (!adjusting) { - adjustPosition.call(this); - } else { - adjustQueue.push(adjustPosition.bind(this)); - } - }); - - image.attr('src', image.attr('data-src')); - image.removeAttr('data-src'); - }); - }, 250); - }; +define('forum/topic/images', [], function () { + var Images = {}; Images.wrapImagesInLinks = function (posts) { posts.find('[component="post/content"] img:not(.emoji)').each(function () { @@ -126,6 +30,5 @@ define('forum/topic/images', [ }); }; - return Images; }); diff --git a/public/src/client/topic/posts.js b/public/src/client/topic/posts.js index 2283d444b4..b653edb0bc 100644 --- a/public/src/client/topic/posts.js +++ b/public/src/client/topic/posts.js @@ -63,7 +63,6 @@ define('forum/topic/posts', [ function onNewPostPagination(data) { function scrollToPost() { scrollToPostIfSelf(data.posts[0]); - images.loadImages(); } var posts = data.posts; @@ -111,7 +110,6 @@ define('forum/topic/posts', [ html.addClass('new'); } scrollToPostIfSelf(data.posts[0]); - images.loadImages(); }); } @@ -252,7 +250,6 @@ define('forum/topic/posts', [ }; Posts.onTopicPageLoad = function (posts) { - images.unloadImages(posts); Posts.showBottomPostBar(); posts.find('[component="post/content"] img:not(.not-responsive)').addClass('img-responsive'); addBlockquoteEllipses(posts.find('[component="post/content"] > blockquote > blockquote'));