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; overflow-x: hidden;
} }
#search-results:before { #search-results:not([data-empty]):before {
background-image: linear-gradient(transparent, rgba(0, 0, 0, .3) 200px); background-image: linear-gradient(transparent, rgba(0, 0, 0, .3) 200px);
content: ""; content: "";
top: -50px; top: -50px;
@ -236,7 +236,7 @@ body.search-results-shown {
#search-results .search-results-nav button:disabled { #search-results .search-results-nav button:disabled {
cursor: auto; cursor: auto;
opacity: .5; opacity: .25;
pointer-events: none; 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'); $('#find-styles-inline-group').classList.add('hidden');
dom.container = $('#search-results'); dom.container = $('#search-results');
dom.container.dataset.empty = '';
dom.error = $('#search-results-error'); dom.error = $('#search-results-error');
dom.nav = {}; dom.nav = {};
@ -108,6 +110,8 @@ window.addEventListener('showStyles:done', function _() {
dom.list = $('#search-results-list'); dom.list = $('#search-results-list');
addEventListener('scroll', loadMoreIfNeeded, {passive: true});
addEventListener('styleDeleted', ({detail}) => { addEventListener('styleDeleted', ({detail}) => {
const entries = [...dom.list.children]; const entries = [...dom.list.children];
const entry = entries.find(el => el._result.installedStyleId === detail.id); const entry = entries.find(el => el._result.installedStyleId === detail.id);
@ -233,8 +237,19 @@ window.addEventListener('showStyles:done', function _() {
.catch(error); .catch(error);
} }
function loadMoreIfNeeded() { function loadMoreIfNeeded(event) {
if (processedResults.length < (displayedPage + 1) * DISPLAY_PER_PAGE) { 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); setTimeout(load, DELAY_BEFORE_SEARCHING_STYLES);
} }
} }
@ -328,14 +343,19 @@ window.addEventListener('showStyles:done', function _() {
dom.list.lastElementChild.remove(); dom.list.lastElementChild.remove();
} }
if (scrollToFirstResult && if (processedResults.length && 'empty' in dom.container.dataset) {
dom.container.getBoundingClientRect().bottom > window.innerHeight * 2) { delete dom.container.dataset.empty;
scrollToFirstResult = false;
if (!FIREFOX || FIREFOX >= 55) {
setTimeout(() => {
dom.container.scrollIntoView({behavior: 'smooth', block: 'start'});
});
} }
if (scrollToFirstResult && (!FIREFOX || FIREFOX >= 55)) {
debounce(doScrollToFirstResult);
}
}
function doScrollToFirstResult() {
if (dom.container.scrollHeight > window.innerHeight * 2) {
scrollToFirstResult = false;
dom.container.scrollIntoView({behavior: 'smooth', block: 'start'});
} }
} }