scinote-web/app/assets/javascripts/sitewide/infinite_scroll.js

145 lines
4.2 KiB
JavaScript
Raw Normal View History

/* eslint-disable no-use-before-define */
/* eslint-disable no-unused-vars */
var InfiniteScroll = (function() {
function scrollNotVisible($container) {
let eventTarget = $($container.data('config').eventTarget || $container);
return scrollHitBottom(eventTarget[0]);
}
function loadData($container, page = 1) {
var customParams = $container.data('config').customParams;
var params = (customParams ? customParams({ page: page }) : { page: page });
if ($container.hasClass('loading') || $container.hasClass('last-page')) return;
$container.addClass('loading');
renderPlaceholder($container);
$.get($container.data('config').url, params, function(result) {
$container.find('.placeholder-block').remove();
if ($container.data('config').customResponse) {
$container.data('config').customResponse(result, $container);
} else {
$(result.data).appendTo($container);
}
if (result.next_page) {
$container.data('next-page', result.next_page);
} else {
$container.addClass('last-page');
if ($container.data('config').endOfListTemplate && page >= 2) {
$($($container.data('config').endOfListTemplate).html()).appendTo($container);
}
}
$container.removeClass('loading');
2020-03-06 20:51:18 +08:00
if ($container.data('config').afterAction) {
$container.data('config').afterAction(result, $container);
}
if (scrollNotVisible($container)) {
loadData($container, $container.data('next-page'));
}
});
}
function initScroll(object, config = {}) {
var $container = $(object);
$container.data('next-page', 2);
$container.data('config', config);
if (config.lastPage) {
$container.addClass('last-page');
}
if (config.loadFirstPage) {
loadData($container, 1);
}
let eventTarget = $($container.data('config').eventTarget || $container);
eventTarget.on('scroll', () => {
if (scrollHitBottom(eventTarget[0]) && !$container.hasClass('last-page')) {
loadData($container, $container.data('next-page'));
}
});
if (scrollNotVisible($container)) {
loadData($container, $container.data('next-page'));
}
$(document).one('turbolinks:before-visit', $container.data('config').eventTarget, function() {
removeScroll($container);
});
}
// support functions
// Full scroll height
function scrollHeight(con) {
return con.scrollHeight || document.documentElement.scrollHeight;
}
// Top scroll position
function scrollTop(con) {
return con.scrollTop || con.scrollY || 0;
}
// Get container size
function containerSize(con) {
return con.innerHeight || con.offsetHeight;
}
// Container position
function containerPosition(con) {
return scrollTop(con) + containerSize(con);
}
// Check when load next page
function scrollHitBottom(con) {
return scrollHeight(con) - containerPosition(con) <= 0;
}
function removeScroll(con) {
let $container = $(con);
if (!$container.data('config')) {
return;
}
let eventTarget = $($container.data('config').eventTarget) || $container;
$container.data('config', null);
$container.data('next-page', null);
$container.removeClass('last-page');
eventTarget.off('scroll');
}
function renderPlaceholder($container) {
let palceholder = '';
$.each(Array($container.data('config').pageSize || 10), function() {
palceholder += $($container.data('config').placeholderTemplate).html();
});
$(palceholder).addClass('placeholder-block').appendTo($container);
}
return {
init: (object, config) => {
removeScroll(object);
initScroll(object, config);
},
resetScroll: (object) => {
2020-03-06 20:51:18 +08:00
$(object).data('next-page', $(object).data('config').loadFirstPage ? 1 : 2).removeClass('last-page');
if (scrollNotVisible($(object))) {
loadData($(object), $(object).data('next-page'));
}
},
removeScroll: (object) => {
removeScroll(object);
},
loadMore: (object) => {
let $container = $(object);
if (scrollNotVisible($container)) {
loadData($container, $container.data('next-page'));
}
}
};
}());