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

server: use index-based paging (#123)

Browse Source
This commit is contained in:
rr-
2017-02-09 00:48:06 +01:00
parent ba7ca0cd87
commit fdad08e176
34 changed files with 222 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/html/comments_page.tpl
View File

@ -1,6 +1,6 @@
<div class='global-comment-list'>
<ul><!--
--><% for (let post of ctx.results) { %><!--
--><% for (let post of ctx.response.results) { %><!--
--><li><!--
--><div class='post-thumbnail'><!--
--><% if (ctx.canViewPosts) { %><!--

12
client/html/manual_pager_nav.tpl
View File

@ -1,8 +1,8 @@
<nav class='buttons'>
<ul>
<li>
<% if (ctx.prevLinkActive) { %>
<a class='prev' href='<%- ctx.prevLink %>'>
<% if (ctx.prevPage !== ctx.currentPage) { %>
<a class='prev' href='<%- ctx.getClientUrlForPage(ctx.pages.get(ctx.prevPage).offset, ctx.pages.get(ctx.prevPage).limit) %>'>
<% } else { %>
<a class='prev disabled'>
<% } %>
@ -11,7 +11,7 @@
</a>
</li>
<% for (let page of ctx.pages) { %>
<% for (let page of ctx.pages.values()) { %>
<% if (page.ellipsis) { %>
<li>&hellip;</li>
<% } else { %>
@ -20,14 +20,14 @@
<% } else { %>
<li>
<% } %>
<a href='<%- page.link %>'><%- page.number %></a>
<a href='<%- ctx.getClientUrlForPage(page.offset, page.limit) %>'><%- page.number %></a>
</li>
<% } %>
<% } %>
<li>
<% if (ctx.nextLinkActive) { %>
<a class='next' href='<%- ctx.nextLink %>'>
<% if (ctx.nextPage !== ctx.currentPage) { %>
<a class='next' href='<%- ctx.getClientUrlForPage(ctx.pages.get(ctx.nextPage).offset, ctx.pages.get(ctx.nextPage).limit) %>'>
<% } else { %>
<a class='next disabled'>
<% } %>

4
client/html/posts_page.tpl
View File

@ -1,7 +1,7 @@
<div class='post-list'>
<% if (ctx.results.length) { %>
<% if (ctx.response.results.length) { %>
<ul>
<% for (let post of ctx.results) { %>
<% for (let post of ctx.response.results) { %>
<li>
<a class='thumbnail-wrapper <%= post.tags.length > 0 ? "tags" : "no-tags" %>'
title='@<%- post.id %> (<%- post.type %>)&#10;&#10;Tags: <%- post.tags.map(tag => '#' + tag).join(' ') || 'none' %>'

4
client/html/snapshots_page.tpl
View File

@ -1,7 +1,7 @@
<div class='snapshot-list'>
<% if (ctx.results.length) { %>
<% if (ctx.response.results.length) { %>
<ul>
<% for (let item of ctx.results) { %>
<% for (let item of ctx.response.results) { %>
<li>
<div class='header operation-<%= item.operation %>'>
<span class='time'>

4
client/html/tags_page.tpl
View File

@ -1,5 +1,5 @@
<div class='tag-list'>
<% if (ctx.results.length) { %>
<% if (ctx.response.results.length) { %>
<table>
<thead>
<th class='names'>
@ -39,7 +39,7 @@
</th>
</thead>
<tbody>
<% for (let tag of ctx.results) { %>
<% for (let tag of ctx.response.results) { %>
<tr>
<td class='names'>
<ul>

2
client/html/users_page.tpl
View File

@ -1,6 +1,6 @@
<div class='user-list'>
<ul><!--
--><% for (let user of ctx.results) { %><!--
--><% for (let user of ctx.response.results) { %><!--
--><li>
<div class='wrapper'>
<% if (ctx.canViewUsers) { %>

10
client/js/controllers/comments_controller.js
View File

@ -25,14 +25,16 @@ class CommentsController {
this._pageController = new PageController();
this._pageController.run({
parameters: ctx.parameters,
getClientUrlForPage: page => {
defaultLimit: 10,
getClientUrlForPage: (offset, limit) => {
const parameters = Object.assign(
{}, ctx.parameters, {page: page});
{}, ctx.parameters, {offset: offset, limit: limit});
return uri.formatClientLink('comments', parameters);
},
requestPage: page => {
requestPage: (offset, limit) => {
return PostList.search(
'sort:comment-date comment-count-min:1', page, 10, fields);
'sort:comment-date comment-count-min:1',
offset, limit, fields);
},
pageRenderer: pageCtx => {
Object.assign(pageCtx, {

6
client/js/controllers/page_controller.js
View File

@ -18,12 +18,6 @@ class PageController {
}
run(ctx) {
const extendedContext = {
getClientUrlForPage: ctx.getClientUrlForPage,
parameters: ctx.parameters,
};
ctx.pageContext = Object.assign({}, extendedContext);
this._view.run(ctx);
}

15
client/js/controllers/post_list_controller.js
View File

@ -88,14 +88,17 @@ class PostListController {
_syncPageController() {
this._pageController.run({
parameters: this._ctx.parameters,
getClientUrlForPage: page => {
return uri.formatClientLink('posts',
Object.assign({}, this._ctx.parameters, {page: page}));
defaultLimit: parseInt(settings.get().postsPerPage),
getClientUrlForPage: (offset, limit) => {
const parameters = Object.assign(
{}, this._ctx.parameters, {offset: offset, limit: limit});
return uri.formatClientLink('posts', parameters);
},
requestPage: page => {
requestPage: (offset, limit) => {
return PostList.search(
this._decorateSearchQuery(this._ctx.parameters.query),
page, settings.get().postsPerPage, fields);
this._decorateSearchQuery(
this._ctx.parameters.query || ''),
offset, limit, fields);
},
pageRenderer: pageCtx => {
Object.assign(pageCtx, {

2
client/js/controllers/post_main_controller.js
View File

@ -21,7 +21,7 @@ class PostMainController extends BasePostController {
Post.get(ctx.parameters.id),
PostList.getAround(
ctx.parameters.id, this._decorateSearchQuery(
parameters ? parameters.query : '')),
parameters ? parameters.query || '' : '')),
]).then(responses => {
const [post, aroundResponse] = responses;

9
client/js/controllers/snapshots_controller.js
View File

@ -22,13 +22,14 @@ class SnapshotsController {
this._pageController = new PageController();
this._pageController.run({
parameters: ctx.parameters,
getClientUrlForPage: page => {
defaultLimit: 25,
getClientUrlForPage: (offset, limit) => {
const parameters = Object.assign(
{}, ctx.parameters, {page: page});
{}, ctx.parameters, {offset: offset, limit: limit});
return uri.formatClientLink('history', parameters);
},
requestPage: page => {
return SnapshotList.search('', page, 25);
requestPage: (offset, limit) => {
return SnapshotList.search('', offset, limit);
},
pageRenderer: pageCtx => {
Object.assign(pageCtx, {

9
client/js/controllers/tag_list_controller.js
View File

@ -57,14 +57,15 @@ class TagListController {
_syncPageController() {
this._pageController.run({
parameters: this._ctx.parameters,
getClientUrlForPage: page => {
defaultLimit: 50,
getClientUrlForPage: (offset, limit) => {
const parameters = Object.assign(
{}, this._ctx.parameters, {page: page});
{}, this._ctx.parameters, {offset: offset, limit: limit});
return uri.formatClientLink('tags', parameters);
},
requestPage: page => {
requestPage: (offset, limit) => {
return TagList.search(
this._ctx.parameters.query, page, 50, fields);
this._ctx.parameters.query, offset, limit, fields);
},
pageRenderer: pageCtx => {
return new TagsPageView(pageCtx);

10
client/js/controllers/user_list_controller.js
View File

@ -49,13 +49,15 @@ class UserListController {
_syncPageController() {
this._pageController.run({
parameters: this._ctx.parameters,
getClientUrlForPage: page => {
defaultLimit: 30,
getClientUrlForPage: (offset, limit) => {
const parameters = Object.assign(
{}, this._ctx.parameters, {page: page});
{}, this._ctx.parameters, {offset, offset, limit: limit});
return uri.formatClientLink('users', parameters);
},
requestPage: page => {
return UserList.search(this._ctx.parameters.query, page);
requestPage: (offset, limit) => {
return UserList.search(
this._ctx.parameters.query || '', offset, limit);
},
pageRenderer: pageCtx => {
Object.assign(pageCtx, {

6
client/js/models/post_list.js
View File

@ -12,13 +12,13 @@ class PostList extends AbstractList {
'post', id, 'around', {query: searchQuery, fields: 'id'}));
}
static search(text, page, pageSize, fields) {
static search(text, offset, limit, fields) {
return api.get(
uri.formatApiLink(
'posts', {
query: text,
page: page,
pageSize: pageSize,
offset: offset,
limit: limit,
fields: fields.join(','),
}))
.then(response => {

4
client/js/models/snapshot_list.js
View File

@ -6,9 +6,9 @@ const AbstractList = require('./abstract_list.js');
const Snapshot = require('./snapshot.js');
class SnapshotList extends AbstractList {
static search(text, page, pageSize) {
static search(text, offset, limit) {
return api.get(uri.formatApiLink(
'snapshots', {query: text, page: page, pageSize: pageSize}))
'snapshots', {query: text, offset: offset, limit: limit}))
.then(response => {
return Promise.resolve(Object.assign(
{},

6
client/js/models/tag_list.js
View File

@ -6,13 +6,13 @@ const AbstractList = require('./abstract_list.js');
const Tag = require('./tag.js');
class TagList extends AbstractList {
static search(text, page, pageSize, fields) {
static search(text, offset, limit, fields) {
return api.get(
uri.formatApiLink(
'tags', {
query: text,
page: page,
pageSize: pageSize,
offset: offset,
limit: limit,
fields: fields.join(','),
}))
.then(response => {

4
client/js/models/user_list.js
View File

@ -6,10 +6,10 @@ const AbstractList = require('./abstract_list.js');
const User = require('./user.js');
class UserList extends AbstractList {
static search(text, page) {
static search(text, offset, limit) {
return api.get(
uri.formatApiLink(
'users', {query: text, page: page, pageSize: 30}))
'users', {query: text, offset: offset, limit: limit}))
.then(response => {
return Promise.resolve(Object.assign(
{},

4
client/js/router.js
View File

@ -112,10 +112,6 @@ class Route {
return false;
}
// XXX: it is very unfitting place for this
parameters.query = parameters.query || '';
parameters.page = parseInt(parameters.page || '1');
return true;
}
};

2
client/js/views/comments_page_view.js
View File

@ -13,7 +13,7 @@ class CommentsPageView extends events.EventTarget {
const sourceNode = template(ctx);
for (let post of ctx.results) {
for (let post of ctx.response.results) {
const commentListControl = new CommentListControl(
sourceNode.querySelector(
`.comments-container[data-for="${post.id}"]`),

91
client/js/views/endless_page_view.js
View File

@ -21,16 +21,19 @@ class EndlessPageView {
views.emptyContent(this._pagesHolderNode);
this.threshold = window.innerHeight / 3;
this.minPageShown = null;
this.maxPageShown = null;
this.totalPages = null;
this.currentPage = null;
this.minOffsetShown = null;
this.maxOffsetShown = null;
this.totalRecords = null;
this.currentOffset = 0;
this._loadPage(ctx, ctx.parameters.page, true).then(pageNode => {
if (ctx.parameters.page !== 1) {
pageNode.scrollIntoView();
}
});
const offset = parseInt(ctx.parameters.offset || 0);
const limit = parseInt(ctx.parameters.limit || ctx.defaultLimit);
this._loadPage(ctx, offset, limit, true)
.then(pageNode => {
if (offset !== 0) {
pageNode.scrollIntoView();
}
});
this._probePageLoad(ctx);
views.monitorNodeRemoval(this._pagesHolderNode, () => this._destroy());
@ -75,42 +78,45 @@ class EndlessPageView {
if (!topPageNode) {
return;
}
let topPageNumber = parseInt(topPageNode.getAttribute('data-page'));
if (topPageNumber !== this.currentPage) {
let topOffset = parseInt(topPageNode.getAttribute('data-offset'));
let topLimit = parseInt(topPageNode.getAttribute('data-limit'));
if (topOffset !== this.currentOffset) {
router.replace(
ctx.getClientUrlForPage(topPageNumber),
ctx.getClientUrlForPage(
topOffset,
topLimit === ctx.defaultLimit ? null : topLimit),
ctx.state,
false);
this.currentPage = topPageNumber;
this.currentOffset = topOffset;
}
if (this.totalPages === null) {
if (this.totalRecords === null) {
return;
}
let scrollHeight =
document.documentElement.scrollHeight -
document.documentElement.clientHeight;
if (this.minPageShown > 1 && window.scrollY < this.threshold) {
this._loadPage(ctx, this.minPageShown - 1, false);
} else if (this.maxPageShown < this.totalPages &&
if (this.minOffsetShown > 0 && window.scrollY < this.threshold) {
this._loadPage(
ctx, this.minOffsetShown - topLimit, topLimit, false);
} else if (this.maxOffsetShown < this.totalRecords &&
window.scrollY + this.threshold > scrollHeight) {
this._loadPage(ctx, this.maxPageShown + 1, true);
this._loadPage(
ctx, this.maxOffsetShown, topLimit, true);
}
}
_loadPage(ctx, pageNumber, append) {
_loadPage(ctx, offset, limit, append) {
this._working++;
return new Promise((resolve, reject) => {
ctx.requestPage(pageNumber).then(response => {
ctx.requestPage(offset, limit).then(response => {
if (!this._active) {
this._working--;
return Promise.reject();
}
this.totalPages = Math.ceil(response.total / response.pageSize);
window.requestAnimationFrame(() => {
let pageNode = this._renderPage(
ctx, pageNumber, append, response);
let pageNode = this._renderPage(ctx, append, response);
this._working--;
resolve(pageNode);
});
@ -122,33 +128,40 @@ class EndlessPageView {
});
}
_renderPage(ctx, pageNumber, append, response) {
_renderPage(ctx, append, response) {
let pageNode = null;
if (response.total) {
pageNode = pageTemplate({
page: pageNumber,
totalPages: this.totalPages,
totalPages: Math.ceil(response.total / response.limit),
page: Math.ceil(
(response.offset + response.limit) / response.limit),
});
pageNode.setAttribute('data-page', pageNumber);
pageNode.setAttribute('data-offset', response.offset);
pageNode.setAttribute('data-limit', response.limit);
Object.assign(ctx.pageContext, response);
ctx.pageContext.hostNode = pageNode.querySelector(
'.page-content-holder');
ctx.pageRenderer(ctx.pageContext);
ctx.pageRenderer({
parameters: ctx.parameters,
response: response,
hostNode: pageNode.querySelector('.page-content-holder'),
});
if (pageNumber < this.minPageShown ||
this.minPageShown === null) {
this.minPageShown = pageNumber;
this.totalRecords = response.total;
if (response.offset < this.minOffsetShown ||
this.minOffsetShown === null) {
this.minOffsetShown = response.offset;
}
if (pageNumber > this.maxPageShown ||
this.maxPageShown === null) {
this.maxPageShown = pageNumber;
if (response.offset + response.results.length
> this.maxOffsetShown ||
this.maxOffsetShown === null) {
this.maxOffsetShown =
response.offset + response.results.length;
}
if (append) {
this._pagesHolderNode.appendChild(pageNode);
if (!this._init && pageNumber !== 1) {
if (!this._init && response.offset > 0) {
window.scroll(0, pageNode.getBoundingClientRect().top);
}
} else {
@ -158,7 +171,7 @@ class EndlessPageView {
window.scrollX,
window.scrollY + pageNode.offsetHeight);
}
} else if (response.total <= (pageNumber - 1) * response.pageSize) {
} else if (!response.results.length) {
this.showInfo('No data to show');
}

81
client/js/views/manual_page_view.js
View File

@ -35,19 +35,20 @@ function _getVisiblePageNumbers(currentPage, totalPages) {
return pagesVisible;
}
function _getPages(currentPage, pageNumbers, ctx) {
const pages = [];
let lastPage = 0;
function _getPages(currentPage, pageNumbers, ctx, limit) {
const pages = new Map();
let prevPage = 0;
for (let page of pageNumbers) {
if (page !== lastPage + 1) {
pages.push({ellipsis: true});
if (page !== prevPage + 1) {
pages.set(page - 1, {ellipsis: true});
}
pages.push({
pages.set(page, {
number: page,
link: ctx.getClientUrlForPage(page),
offset: (page - 1) * limit,
limit: limit === ctx.defaultLimit ? null : limit,
active: currentPage === page,
});
lastPage = page;
prevPage = page;
}
return pages;
}
@ -59,43 +60,30 @@ class ManualPageView {
}
run(ctx) {
const currentPage = ctx.parameters.page;
const offset = parseInt(ctx.parameters.offset || 0);
const limit = parseInt(ctx.parameters.limit || ctx.defaultLimit);
this.clearMessages();
views.emptyContent(this._pageNavNode);
ctx.requestPage(currentPage).then(response => {
Object.assign(ctx.pageContext, response);
ctx.pageContext.hostNode = this._pageContentHolderNode;
ctx.pageRenderer(ctx.pageContext);
const totalPages = Math.ceil(response.total / response.pageSize);
const pageNumbers = _getVisiblePageNumbers(currentPage, totalPages);
const pages = _getPages(currentPage, pageNumbers, ctx);
ctx.requestPage(offset, limit).then(response => {
ctx.pageRenderer({
parameters: ctx.parameters,
response: response,
hostNode: this._pageContentHolderNode,
});
keyboard.bind(['a', 'left'], () => {
if (currentPage > 1) {
router.show(ctx.getClientUrlForPage(currentPage - 1));
}
this._navigateToPrevNextPage('prev');
});
keyboard.bind(['d', 'right'], () => {
if (currentPage < totalPages) {
router.show(ctx.getClientUrlForPage(currentPage + 1));
}
this._navigateToPrevNextPage('next');
});
if (response.total) {
views.replaceContent(
this._pageNavNode,
navTemplate({
prevLink: ctx.getClientUrlForPage(currentPage - 1),
nextLink: ctx.getClientUrlForPage(currentPage + 1),
prevLinkActive: currentPage > 1,
nextLinkActive: currentPage < totalPages,
pages: pages,
}));
this._refreshNav(response, ctx);
}
if (response.total <= (currentPage - 1) * response.pageSize) {
if (!response.results.length) {
this.showInfo('No data to show');
}
@ -132,6 +120,33 @@ class ManualPageView {
showInfo(message) {
views.showInfo(this._hostNode, message);
}
_navigateToPrevNextPage(className) {
const linkNode = this._hostNode.querySelector('a.' + className);
if (linkNode.classList.contains('disabled')) {
return;
}
router.show(linkNode.getAttribute('href'));
}
_refreshNav(response, ctx) {
const currentPage = Math.ceil(
(response.offset + response.limit) / response.limit);
const totalPages = Math.ceil(response.total / response.limit);
const pageNumbers = _getVisiblePageNumbers(currentPage, totalPages);
const pages = _getPages(currentPage, pageNumbers, ctx, response.limit);
views.replaceContent(
this._pageNavNode,
navTemplate({
getClientUrlForPage: ctx.getClientUrlForPage,
prevPage: Math.min(totalPages, Math.max(1, currentPage - 1)),
nextPage: Math.min(totalPages, Math.max(1, currentPage + 1)),
currentPage: currentPage,
totalPages: totalPages,
pages: pages,
}));
}
}
module.exports = ManualPageView;

9
client/js/views/posts_header_view.js
View File

@ -89,7 +89,8 @@ class PostsHeaderView extends events.EventTarget {
this._toggleMassTagVisibility(false);
this.dispatchEvent(new CustomEvent('navigate', {detail: {parameters: {
query: this._ctx.parameters.query,
page: this._ctx.parameters.page,
offset: this._ctx.parameters.offset,
limit: this._ctx.parameters.limit,
tag: null,
}}}));
}
@ -107,7 +108,7 @@ class PostsHeaderView extends events.EventTarget {
'navigate', {
detail: {
parameters: Object.assign(
{}, this._ctx.parameters, {tag: null, page: 1}),
{}, this._ctx.parameters, {tag: null, offset: 0}),
},
}));
}
@ -119,8 +120,8 @@ class PostsHeaderView extends events.EventTarget {
this._masstagAutoCompleteControl.hide();
}
let parameters = {query: this._queryInputNode.value};
parameters.page = parameters.query === this._ctx.parameters.query ?
this._ctx.parameters.page : 1;
parameters.offset = parameters.query === this._ctx.parameters.query ?
this._ctx.parameters.offset : 0;
if (this._massTagInputNode) {
parameters.tag = this._massTagInputNode.value;
this._massTagInputNode.blur();

2
client/js/views/posts_page_view.js
View File

@ -13,7 +13,7 @@ class PostsPageView extends events.EventTarget {
views.replaceContent(this._hostNode, template(ctx));
this._postIdToPost = {};
for (let post of ctx.results) {
for (let post of ctx.response.results) {
this._postIdToPost[post.id] = post;
post.addEventListener('change', e => this._evtPostChange(e));
}