Merge pull request #196 from chocolateboy/rel-improvements
improve #linkPrev and #linkNext
This commit is contained in:
commit
af3a2cbf30
2 changed files with 136 additions and 51 deletions
|
@ -2,13 +2,14 @@ const PREV_LINK_PATTERNS = [
|
|||
/\bprev\b/i, /\bprevious\b/i, /\bback\b/i,
|
||||
/</, /\u2039/, /\u2190/, /\xab/, /\u226a/, /<</
|
||||
];
|
||||
|
||||
const NEXT_LINK_PATTERNS = [
|
||||
/\bnext\b/i,
|
||||
/>/, /\u203a/, /\u2192/, /\xbb/, /\u226b/, />>/
|
||||
];
|
||||
|
||||
const findLinkByPatterns = (win, patterns) => {
|
||||
let links = win.document.getElementsByTagName('a');
|
||||
const links = win.document.getElementsByTagName('a');
|
||||
return Array.prototype.find.call(links, (link) => {
|
||||
return patterns.some(ptn => ptn.test(link.textContent));
|
||||
});
|
||||
|
@ -22,30 +23,32 @@ const historyNext = (win) => {
|
|||
win.history.forward();
|
||||
};
|
||||
|
||||
const linkPrev = (win) => {
|
||||
let link = win.document.querySelector('a[rel=prev]');
|
||||
const linkCommon = (win, rel, patterns) => {
|
||||
let link = win.document.querySelector(`link[rel~=${rel}][href]`);
|
||||
|
||||
if (link) {
|
||||
return link.click();
|
||||
win.location = link.getAttribute('href');
|
||||
return;
|
||||
}
|
||||
link = findLinkByPatterns(win, PREV_LINK_PATTERNS);
|
||||
|
||||
link = win.document.querySelector(`a[rel~=${rel}]`) ||
|
||||
findLinkByPatterns(win, patterns);
|
||||
|
||||
if (link) {
|
||||
link.click();
|
||||
}
|
||||
};
|
||||
|
||||
const linkPrev = (win) => {
|
||||
linkCommon(win, 'prev', PREV_LINK_PATTERNS);
|
||||
};
|
||||
|
||||
const linkNext = (win) => {
|
||||
let link = win.document.querySelector('a[rel=next]');
|
||||
if (link) {
|
||||
return link.click();
|
||||
}
|
||||
link = findLinkByPatterns(win, NEXT_LINK_PATTERNS);
|
||||
if (link) {
|
||||
link.click();
|
||||
}
|
||||
linkCommon(win, 'next', NEXT_LINK_PATTERNS);
|
||||
};
|
||||
|
||||
const parent = (win) => {
|
||||
let loc = win.location;
|
||||
const loc = win.location;
|
||||
if (loc.hash !== '') {
|
||||
loc.hash = '';
|
||||
return;
|
||||
|
|
|
@ -1,56 +1,138 @@
|
|||
import { expect } from "chai";
|
||||
import { expect } from 'chai';
|
||||
import * as navigates from 'content/navigates';
|
||||
|
||||
const testRel = (done, rel, html) => {
|
||||
const method = rel === 'prev' ? 'linkPrev' : 'linkNext';
|
||||
document.body.innerHTML = html;
|
||||
navigates[method](window);
|
||||
setTimeout(() => {
|
||||
expect(document.location.hash).to.equal(`#${rel}`);
|
||||
done();
|
||||
}, 0);
|
||||
};
|
||||
|
||||
const testPrev = html => done => testRel(done, 'prev', html);
|
||||
const testNext = html => done => testRel(done, 'next', html);
|
||||
|
||||
describe('navigates module', () => {
|
||||
describe('#linkPrev', () => {
|
||||
it('clicks prev link by text content', (done) => {
|
||||
document.body.innerHTML = '<a href="#dummy">xprevx</a> <a href="#prev">go to prev</a>';
|
||||
navigates.linkPrev(window);
|
||||
setTimeout(() => {
|
||||
expect(document.location.hash).to.equal('#prev');
|
||||
done();
|
||||
}, 0);
|
||||
});
|
||||
it('navigates to <link> elements whose rel attribute is "prev"', testPrev(
|
||||
'<link rel="prev" href="#prev" />'
|
||||
));
|
||||
|
||||
it('clicks a[rel=prev] element preferentially', (done) => {
|
||||
document.body.innerHTML = '<a href="#dummy">prev</a> <a rel="prev" href="#prev">rel</a>';
|
||||
navigates.linkPrev(window);
|
||||
setTimeout(() => {
|
||||
expect(document.location.hash).to.equal('#prev');
|
||||
done();
|
||||
}, 0);
|
||||
});
|
||||
it('navigates to <link> elements whose rel attribute starts with "prev"', testPrev(
|
||||
'<link rel="prev bar" href="#prev" />'
|
||||
));
|
||||
|
||||
it('navigates to <link> elements whose rel attribute ends with "prev"', testPrev(
|
||||
'<link rel="foo prev" href="#prev" />'
|
||||
));
|
||||
|
||||
it('navigates to <link> elements whose rel attribute contains "prev"', testPrev(
|
||||
'<link rel="foo prev bar" href="#prev" />'
|
||||
));
|
||||
|
||||
it('navigates to <a> elements whose rel attribute is "prev"', testPrev(
|
||||
'<a rel="prev" href="#prev">click me</a>'
|
||||
));
|
||||
|
||||
it('navigates to <a> elements whose rel attribute starts with "prev"', testPrev(
|
||||
'<a rel="prev bar" href="#prev">click me</a>'
|
||||
));
|
||||
|
||||
it('navigates to <a> elements whose rel attribute ends with "prev"', testPrev(
|
||||
'<a rel="foo prev" href="#prev">click me</a>'
|
||||
));
|
||||
|
||||
it('navigates to <a> elements whose rel attribute contains "prev"', testPrev(
|
||||
'<a rel="foo prev bar" href="#prev">click me</a>'
|
||||
));
|
||||
|
||||
it('navigates to <a> elements whose text matches "prev"', testPrev(
|
||||
'<a href="#dummy">preview</a><a href="#prev">go to prev</a>'
|
||||
));
|
||||
|
||||
it('navigates to <a> elements whose text matches "previous"', testPrev(
|
||||
'<a href="#dummy">preview</a><a href="#prev">go to previous</a>'
|
||||
));
|
||||
|
||||
it('navigates to <a> elements whose decoded text matches "<<"', testPrev(
|
||||
'<a href="#dummy">click me</a><a href="#prev"><<</a>'
|
||||
));
|
||||
|
||||
it('navigates to matching <a> elements by clicking', testPrev(
|
||||
`<a rel="prev" href="#dummy" onclick="return location = '#prev', false">go to prev</a>`
|
||||
));
|
||||
|
||||
it('prefers link[rel~=prev] to a[rel~=prev]', testPrev(
|
||||
'<a rel="prev" href="#dummy">click me</a><link rel="prev" href="#prev" />'
|
||||
));
|
||||
|
||||
it('prefers a[rel~=prev] to a::text(pattern)', testPrev(
|
||||
'<a href="#dummy">go to prev</a><a rel="prev" href="#prev">click me</a>'
|
||||
));
|
||||
});
|
||||
|
||||
|
||||
describe('#linkNext', () => {
|
||||
it('clicks next link by text content', (done) => {
|
||||
document.body.innerHTML = '<a href="#dummy">xnextx</a> <a href="#next">go to next</a>';
|
||||
navigates.linkNext(window);
|
||||
setTimeout(() => {
|
||||
expect(document.location.hash).to.equal('#next');
|
||||
done();
|
||||
}, 0);
|
||||
});
|
||||
it('navigates to <link> elements whose rel attribute is "next"', testNext(
|
||||
'<link rel="next" href="#next" />'
|
||||
));
|
||||
|
||||
it('clicks a[rel=next] element preferentially', (done) => {
|
||||
document.body.innerHTML = '<a href="#dummy">next</a> <a rel="next" href="#next">rel</a>';
|
||||
navigates.linkNext(window);
|
||||
setTimeout(() => {
|
||||
expect(document.location.hash).to.equal('#next');
|
||||
done();
|
||||
}, 0);
|
||||
});
|
||||
it('navigates to <link> elements whose rel attribute starts with "next"', testNext(
|
||||
'<link rel="next bar" href="#next" />'
|
||||
));
|
||||
|
||||
it('navigates to <link> elements whose rel attribute ends with "next"', testNext(
|
||||
'<link rel="foo next" href="#next" />'
|
||||
));
|
||||
|
||||
it('navigates to <link> elements whose rel attribute contains "next"', testNext(
|
||||
'<link rel="foo next bar" href="#next" />'
|
||||
));
|
||||
|
||||
it('navigates to <a> elements whose rel attribute is "next"', testNext(
|
||||
'<a rel="next" href="#next">click me</a>'
|
||||
));
|
||||
|
||||
it('navigates to <a> elements whose rel attribute starts with "next"', testNext(
|
||||
'<a rel="next bar" href="#next">click me</a>'
|
||||
));
|
||||
|
||||
it('navigates to <a> elements whose rel attribute ends with "next"', testNext(
|
||||
'<a rel="foo next" href="#next">click me</a>'
|
||||
));
|
||||
|
||||
it('navigates to <a> elements whose rel attribute contains "next"', testNext(
|
||||
'<a rel="foo next bar" href="#next">click me</a>'
|
||||
));
|
||||
|
||||
it('navigates to <a> elements whose text matches "next"', testNext(
|
||||
'<a href="#dummy">inextricable</a><a href="#next">go to next</a>'
|
||||
));
|
||||
|
||||
it('navigates to <a> elements whose decoded text matches ">>"', testNext(
|
||||
'<a href="#dummy">click me</a><a href="#next">>></a>'
|
||||
));
|
||||
|
||||
it('navigates to matching <a> elements by clicking', testNext(
|
||||
`<a rel="next" href="#dummy" onclick="return location = '#next', false">go to next</a>`
|
||||
));
|
||||
|
||||
it('prefers link[rel~=next] to a[rel~=next]', testNext(
|
||||
'<a rel="next" href="#dummy">click me<><link rel="next" href="#next" />'
|
||||
));
|
||||
|
||||
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>'
|
||||
));
|
||||
});
|
||||
|
||||
describe('#parent', () => {
|
||||
// NOTE: not able to test location
|
||||
it('removes hash', () => {
|
||||
window.location.hash = "#section-1";
|
||||
window.location.hash = '#section-1';
|
||||
navigates.parent(window);
|
||||
expect(document.location.hash).to.be.empty;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
|
Reference in a new issue