pagination tweaks and fixes:
- fallback links: - select the last matching link rather than the first - use `innerText` rather than `textContent` - use a single regex for each pattern rather than an array - fix markup typo in test
This commit is contained in:
parent
507c5b4f78
commit
ee3cd3faab
2 changed files with 28 additions and 23 deletions
|
@ -1,18 +1,18 @@
|
||||||
const PREV_LINK_PATTERNS = [
|
const REL_PATTERN = {
|
||||||
/\bprev\b/i, /\bprevious\b/i, /\bback\b/i,
|
prev: /^(?:prev(?:ious)?|older)\b|\u2039|\u2190|\xab|\u226a|<</i,
|
||||||
/</, /\u2039/, /\u2190/, /\xab/, /\u226a/, /<</
|
next: /^(?:next|newer)\b|\u203a|\u2192|\xbb|\u226b|>>/i,
|
||||||
];
|
};
|
||||||
|
|
||||||
const NEXT_LINK_PATTERNS = [
|
// Return the last element in the document matching the supplied selector
|
||||||
/\bnext\b/i,
|
// and the optional filter, or null if there are no matches.
|
||||||
/>/, /\u203a/, /\u2192/, /\xbb/, /\u226b/, />>/
|
const selectLast = (win, selector, filter) => {
|
||||||
];
|
let nodes = win.document.querySelectorAll(selector);
|
||||||
|
|
||||||
const findLinkByPatterns = (win, patterns) => {
|
if (filter) {
|
||||||
const links = win.document.getElementsByTagName('a');
|
nodes = Array.from(nodes).filter(filter);
|
||||||
return Array.prototype.find.call(links, (link) => {
|
}
|
||||||
return patterns.some(ptn => ptn.test(link.textContent));
|
|
||||||
});
|
return nodes.length ? nodes[nodes.length - 1] : null;
|
||||||
};
|
};
|
||||||
|
|
||||||
const historyPrev = (win) => {
|
const historyPrev = (win) => {
|
||||||
|
@ -23,16 +23,21 @@ const historyNext = (win) => {
|
||||||
win.history.forward();
|
win.history.forward();
|
||||||
};
|
};
|
||||||
|
|
||||||
const linkCommon = (win, rel, patterns) => {
|
// Code common to linkPrev and linkNext which navigates to the specified page.
|
||||||
let link = win.document.querySelector(`link[rel~=${rel}][href]`);
|
const linkRel = (win, rel) => {
|
||||||
|
let link = selectLast(win, `link[rel~=${rel}][href]`);
|
||||||
|
|
||||||
if (link) {
|
if (link) {
|
||||||
win.location = link.getAttribute('href');
|
win.location = link.href;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
link = win.document.querySelector(`a[rel~=${rel}]`) ||
|
const pattern = REL_PATTERN[rel];
|
||||||
findLinkByPatterns(win, patterns);
|
|
||||||
|
link = selectLast(win, `a[rel~=${rel}][href]`) ||
|
||||||
|
// `innerText` is much slower than `textContent`, but produces much better
|
||||||
|
// (i.e. less unexpected) results
|
||||||
|
selectLast(win, 'a[href]', lnk => pattern.test(lnk.innerText));
|
||||||
|
|
||||||
if (link) {
|
if (link) {
|
||||||
link.click();
|
link.click();
|
||||||
|
@ -40,11 +45,11 @@ const linkCommon = (win, rel, patterns) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const linkPrev = (win) => {
|
const linkPrev = (win) => {
|
||||||
linkCommon(win, 'prev', PREV_LINK_PATTERNS);
|
linkRel(win, 'prev');
|
||||||
};
|
};
|
||||||
|
|
||||||
const linkNext = (win) => {
|
const linkNext = (win) => {
|
||||||
linkCommon(win, 'next', NEXT_LINK_PATTERNS);
|
linkRel(win, 'next');
|
||||||
};
|
};
|
||||||
|
|
||||||
const parent = (win) => {
|
const parent = (win) => {
|
||||||
|
|
|
@ -53,7 +53,7 @@ describe('navigates module', () => {
|
||||||
));
|
));
|
||||||
|
|
||||||
it('navigates to <a> elements whose text matches "previous"', testPrev(
|
it('navigates to <a> elements whose text matches "previous"', testPrev(
|
||||||
'<a href="#dummy">preview</a><a href="#prev">go to previous</a>'
|
'<a href="#dummy">previously</a><a href="#prev">previous page</a>'
|
||||||
));
|
));
|
||||||
|
|
||||||
it('navigates to <a> elements whose decoded text matches "<<"', testPrev(
|
it('navigates to <a> elements whose decoded text matches "<<"', testPrev(
|
||||||
|
@ -119,11 +119,11 @@ describe('navigates module', () => {
|
||||||
));
|
));
|
||||||
|
|
||||||
it('prefers link[rel~=next] to a[rel~=next]', testNext(
|
it('prefers link[rel~=next] to a[rel~=next]', testNext(
|
||||||
'<a rel="next" href="#dummy">click me<><link rel="next" href="#next" />'
|
'<a rel="next" href="#dummy">click me</a><link rel="next" href="#next" />'
|
||||||
));
|
));
|
||||||
|
|
||||||
it('prefers a[rel~=next] to a::text(pattern)', testNext(
|
it('prefers a[rel~=next] to a::text(pattern)', testNext(
|
||||||
'<a href="#dummy">go to next</a><a rel="next" href="#next">click me</a>'
|
'<a href="#dummy">next page</a><a rel="next" href="#next">click me</a>'
|
||||||
));
|
));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Reference in a new issue