Accords-Library-Archive
/
gallery.accords-library.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

client/pager: synchronize page number with URL

This commit is contained in:
rr- 2016-04-13 21:33:49 +02:00
parent 04f7d183c0
commit 26d46a43bf
1 changed files with 35 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,6 @@
'use strict'; 'use strict';
const page = require('page');
const events = require('../events.js'); const events = require('../events.js');
const misc = require('../util/misc.js'); const misc = require('../util/misc.js');
const views = require('../util/views.js'); const views = require('../util/views.js');
@ -29,8 +30,27 @@ class EndlessPageView {
this.maxPageShown = null; this.maxPageShown = null;
this.totalPages = null; this.totalPages = null;
this.fetching = false; this.fetching = false;
this.currentPage = null;
this.updater = () => { this.updater = () => {
let topPage = null;
let allPageNodes =
pagesHolder.querySelectorAll('.page');
for (let pageNode of allPageNodes) {
if (pageNode.getBoundingClientRect().bottom >= 0) {
topPage = parseInt(pageNode.getAttribute('data-page'));
break;
}
}
if (topPage !== this.currentPage) {
page.replace(
ctx.clientUrl.format({page: topPage}),
null,
false,
false);
this.currentPage = topPage;
}
if (this.fetching || this.totalPages === null) { if (this.fetching || this.totalPages === null) {
return; return;
} }
@ -54,42 +74,44 @@ class EndlessPageView {
window.removeEventListener('scroll', this.updater, true); window.removeEventListener('scroll', this.updater, true);
} }
loadPage(pagesHolder, ctx, currentPage, append) { loadPage(pagesHolder, ctx, pageNumber, append) {
this.fetching = true; this.fetching = true;
if (currentPage < this.minPageShown || this.minPageShown === null) { if (pageNumber < this.minPageShown || this.minPageShown === null) {
this.minPageShown = currentPage; this.minPageShown = pageNumber;
} }
if (currentPage > this.maxPageShown || this.maxPageShown === null) { if (pageNumber > this.maxPageShown || this.maxPageShown === null) {
this.maxPageShown = currentPage; this.maxPageShown = pageNumber;
} }
ctx.requestPage(currentPage).then(response => { ctx.requestPage(pageNumber).then(response => {
this.totalPages = Math.ceil(response.total / response.pageSize); this.totalPages = Math.ceil(response.total / response.pageSize);
if (response.total) { if (response.total) {
const page = this.pageTemplate({ const pageNode = this.pageTemplate({
page: currentPage, page: pageNumber,
totalPages: this.totalPages, totalPages: this.totalPages,
}); });
pageNode.setAttribute('data-page', pageNumber);
let pageRendererCtx = response; let pageRendererCtx = response;
pageRendererCtx.target = page.querySelector( pageRendererCtx.target = pageNode.querySelector(
'.page-content-holder'); '.page-content-holder');
ctx.pageRenderer.render(pageRendererCtx); ctx.pageRenderer.render(pageRendererCtx);
if (append) { if (append) {
pagesHolder.appendChild(page); pagesHolder.appendChild(pageNode);
} else { } else {
pagesHolder.prependChild(page); pagesHolder.prependChild(pageNode);
window.scroll( window.scroll(
window.scrollX, window.scrollY + page.offsetHeight); window.scrollX,
window.scrollY + pageNode.offsetHeight);
} }
} }
this.fetching = false; this.fetching = false;
this.updater(); this.updater();
if (response.total <= (currentPage - 1) * response.pageSize) { if (response.total <= (pageNumber - 1) * response.pageSize) {
events.notify(events.Info, 'No data to show'); events.notify(events.Info, 'No data to show');
} }
}, response => { }, response => {