open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

prefetch next page on scroll past midpage

Browse Source
This commit is contained in:
tophf 2017-12-11 23:25:41 +03:00
parent 0390a703af
commit 50b489478c
2 changed files with 31 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
popup/search-results.css
View File

@ -3,7 +3,7 @@ body.search-results-shown {
overflow-x: hidden;
}
#search-results:before {
#search-results:not([data-empty]):before {
background-image: linear-gradient(transparent, rgba(0, 0, 0, .3) 200px);
content: "";
top: -50px;
@ -236,7 +236,7 @@ body.search-results-shown {
#search-results .search-results-nav button:disabled {
cursor: auto;
opacity: .5;
opacity: .25;
pointer-events: none;
}

38
popup/search-results.js
View File

@ -91,6 +91,8 @@ window.addEventListener('showStyles:done', function _() {
$('#find-styles-inline-group').classList.add('hidden');
dom.container = $('#search-results');
dom.container.dataset.empty = '';
dom.error = $('#search-results-error');
dom.nav = {};
@ -108,6 +110,8 @@ window.addEventListener('showStyles:done', function _() {
dom.list = $('#search-results-list');
addEventListener('scroll', loadMoreIfNeeded, {passive: true});
addEventListener('styleDeleted', ({detail}) => {
const entries = [...dom.list.children];
const entry = entries.find(el => el._result.installedStyleId === detail.id);
@ -233,8 +237,19 @@ window.addEventListener('showStyles:done', function _() {
.catch(error);
}
function loadMoreIfNeeded() {
if (processedResults.length < (displayedPage + 1) * DISPLAY_PER_PAGE) {
function loadMoreIfNeeded(event) {
let prefetchPages = 0;
if (event instanceof Event) {
const scroller = document.scrollingElement;
if (scroller.scrollTop > scroller.scrollHeight / 2 &&
(loadMoreIfNeeded.prefetchedPage || 0) <= displayedPage) {
prefetchPages = 1;
loadMoreIfNeeded.prefetchedPage = displayedPage + 1;
} else {
return;
}
}
if (processedResults.length < (displayedPage + prefetchPages) * DISPLAY_PER_PAGE) {
setTimeout(load, DELAY_BEFORE_SEARCHING_STYLES);
}
}
@ -328,14 +343,19 @@ window.addEventListener('showStyles:done', function _() {
dom.list.lastElementChild.remove();
}
if (scrollToFirstResult &&
dom.container.getBoundingClientRect().bottom > window.innerHeight * 2) {
if (processedResults.length && 'empty' in dom.container.dataset) {
delete dom.container.dataset.empty;
}
if (scrollToFirstResult && (!FIREFOX || FIREFOX >= 55)) {
debounce(doScrollToFirstResult);
}
}
function doScrollToFirstResult() {
if (dom.container.scrollHeight > window.innerHeight * 2) {
scrollToFirstResult = false;
if (!FIREFOX || FIREFOX >= 55) {
setTimeout(() => {
dom.container.scrollIntoView({behavior: 'smooth', block: 'start'});
});
}
dom.container.scrollIntoView({behavior: 'smooth', block: 'start'});
}
}