scl/szurubooru
1
0
Fork 0
mirror of https://github.com/rr-/szurubooru.git synced 2025-07-17 08:26:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added endless scroll (closed #5)

Browse Source 
The code for paged collections now feels like playing ping-pong with
callbacks, and like I have no idea on who should render who.

It works, though.
This commit is contained in:
Marcin Kurczewski
2014-09-12 22:58:07 +02:00
parent 0828a0aa89
commit 12b43b1bb8
5 changed files with 170 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
public_html/js/Presenters/UserListPresenter.js
View File

@ -13,33 +13,41 @@ App.Presenters.UserListPresenter = function(
messagePresenter) {
var $el = jQuery('#content');
var template;
var userList = [];
var activeSearchOrder;
var listTemplate;
var itemTemplate;
function init(args) {
topNavigationPresenter.select('users');
topNavigationPresenter.changeTitle('Users');
promise.wait(util.promiseTemplate('user-list')).then(function(html) {
template = _.template(html);
initPaginator(args);
promise.waitAll(
util.promiseTemplate('user-list'),
util.promiseTemplate('user-list-item')).then(function(listHtml, itemHtml) {
listTemplate = _.template(listHtml);
itemTemplate = _.template(itemHtml);
render();
reinit(args);
});
}
function initPaginator(args) {
function reinit(args) {
var searchArgs = util.parseComplexRouteArgs(args.searchArgs);
searchArgs.order = searchArgs.order || 'name';
activeSearchOrder = searchArgs.order;
updateActiveOrder(searchArgs.order);
initPaginator(searchArgs);
}
function initPaginator(searchArgs) {
pagedCollectionPresenter.init({
page: searchArgs.page,
order: searchArgs.order,
searchParams: {order: searchArgs.order},
baseUri: '#/users',
backendUri: '/users',
renderCallback: function updateCollection(data) {
userList = data.entities;
render();
updateCallback: function(data, clear) {
renderUsers(data.entities, clear);
return $el.find('.pagination-content');
},
failCallback: function(response) {
$el.empty();
@ -48,28 +56,44 @@ App.Presenters.UserListPresenter = function(
}
function render() {
$el.html(template({
userList: userList,
formatRelativeTime: util.formatRelativeTime,
}));
$el.html(listTemplate());
$el.find('.order a').click(orderLinkClicked);
$el.find('.order [data-order="' + activeSearchOrder + '"]').parent('li').addClass('active');
}
var $pager = $el.find('.pager');
pagedCollectionPresenter.render($pager);
function updateActiveOrder(activeOrder) {
$el.find('.order li').removeClass('active');
$el.find('.order [data-order="' + activeOrder + '"]').parent('li').addClass('active');
}
function renderUsers(users, clear) {
var $target = $el.find('.users');
var all = '';
_.each(users, function(user) {
all += itemTemplate({
user: user,
formatRelativeTime: util.formatRelativeTime,
});
});
if (clear) {
$target.html(all);
} else {
$target.append(all);
}
}
function orderLinkClicked(e) {
e.preventDefault();
var $orderLink = jQuery(this);
activeSearchOrder = $orderLink.attr('data-order');
router.navigate(pagedCollectionPresenter.getSearchOrderChangeLink(activeSearchOrder));
var activeSearchOrder = $orderLink.attr('data-order');
router.navigate(pagedCollectionPresenter.getSearchChangeLink({order: activeSearchOrder}));
}
return {
init: init,
reinit: initPaginator,
render: render
reinit: reinit,
render: render,
};
};