Nemcio/NodeBB
1
0
Fork 0
mirror of https://github.com/NodeBB/NodeBB.git synced 2025-11-02 03:55:55 +01:00
Code Issues Packages Projects Releases Wiki Activity

move image code to client/topic/images

Browse Source
This commit is contained in:
barisusakli
2017-03-02 18:11:31 +03:00
parent d60930a51d
commit 5ca8456340
5 changed files with 134 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
public/src/client/topic/posts.js
View File

@@ -5,12 +5,11 @@ define('forum/topic/posts', [
'forum/pagination',
'forum/infinitescroll',
'forum/topic/postTools',
'forum/topic/images',
'navigator',
'components',
], function (pagination, infinitescroll, postTools, navigator, components) {
var Posts = {
_imageLoaderTimeout: undefined,
};
], function (pagination, infinitescroll, postTools, images, navigator, components) {
var Posts = { };
Posts.onNewPost = function (data) {
if (!data || !data.posts || !data.posts.length) {
@@ -63,7 +62,7 @@ define('forum/topic/posts', [
function onNewPostPagination(data) {
function scrollToPost() {
scrollToPostIfSelf(data.posts[0]);
Posts.loadImages();
images.loadImages();
}
var posts = data.posts;
@@ -107,7 +106,7 @@ define('forum/topic/posts', [
html.addClass('new');
}
scrollToPostIfSelf(data.posts[0]);
Posts.loadImages();
images.loadImages();
});
}
@@ -247,7 +246,7 @@ define('forum/topic/posts', [
};
Posts.processPage = function (posts) {
Posts.unloadImages(posts);
images.unloadImages(posts);
Posts.showBottomPostBar();
posts.find('[component="post/content"] img:not(.not-responsive)').addClass('img-responsive');
app.createUserTooltips(posts);
@@ -260,110 +259,6 @@ define('forum/topic/posts', [
hidePostToolsForDeletedPosts(posts);
};
Posts.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');
Posts.wrapImagesInLinks(posts);
}
};
Posts.loadImages = function (threshold) {
if (Posts._imageLoaderTimeout) {
clearTimeout(Posts._imageLoaderTimeout);
}
Posts._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;
Posts.wrapImagesInLinks(posts);
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);
};
Posts.wrapImagesInLinks = function (posts) {
posts.find('[component="post/content"] img:not(.emoji)').each(function () {
var $this = $(this);
var src = $this.attr('src');
var suffixRegex = /-resized(\.[\w]+)?$/;
if (src === 'about:blank') {
return;
}
if (utils.isRelativeUrl(src) && suffixRegex.test(src)) {
src = src.replace(suffixRegex, '$1');
}
if (!$this.parent().is('a')) {
$this.wrap('<a href="' + src + '" target="_blank">');
}
});
};
Posts.showBottomPostBar = function () {
var mainPost = components.get('post', 'index', 0);
var placeHolder = $('.post-bar-placeholder');