Add NavigationPresenter
This commit is contained in:
parent
c81b82ee39
commit
6d9aaef18c
10 changed files with 314 additions and 105 deletions
|
@ -1,83 +0,0 @@
|
||||||
const REL_PATTERN: {[key: string]: RegExp} = {
|
|
||||||
prev: /^(?:prev(?:ious)?|older)\b|\u2039|\u2190|\xab|\u226a|<</i,
|
|
||||||
next: /^(?:next|newer)\b|\u203a|\u2192|\xbb|\u226b|>>/i,
|
|
||||||
};
|
|
||||||
|
|
||||||
// Return the last element in the document matching the supplied selector
|
|
||||||
// and the optional filter, or null if there are no matches.
|
|
||||||
// eslint-disable-next-line func-style
|
|
||||||
function selectLast<E extends Element>(
|
|
||||||
win: Window,
|
|
||||||
selector: string,
|
|
||||||
filter?: (e: E) => boolean,
|
|
||||||
): E | null {
|
|
||||||
let nodes = Array.from(
|
|
||||||
win.document.querySelectorAll(selector) as NodeListOf<E>
|
|
||||||
);
|
|
||||||
|
|
||||||
if (filter) {
|
|
||||||
nodes = nodes.filter(filter);
|
|
||||||
}
|
|
||||||
return nodes.length ? nodes[nodes.length - 1] : null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const historyPrev = (win: Window): void => {
|
|
||||||
win.history.back();
|
|
||||||
};
|
|
||||||
|
|
||||||
const historyNext = (win: Window): void => {
|
|
||||||
win.history.forward();
|
|
||||||
};
|
|
||||||
|
|
||||||
// Code common to linkPrev and linkNext which navigates to the specified page.
|
|
||||||
const linkRel = (win: Window, rel: string): void => {
|
|
||||||
let link = selectLast<HTMLLinkElement>(win, `link[rel~=${rel}][href]`);
|
|
||||||
if (link) {
|
|
||||||
win.location.href = link.href;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const pattern = REL_PATTERN[rel];
|
|
||||||
|
|
||||||
let a = selectLast<HTMLAnchorElement>(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 (a) {
|
|
||||||
a.click();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const linkPrev = (win: Window): void => {
|
|
||||||
linkRel(win, 'prev');
|
|
||||||
};
|
|
||||||
|
|
||||||
const linkNext = (win: Window): void => {
|
|
||||||
linkRel(win, 'next');
|
|
||||||
};
|
|
||||||
|
|
||||||
const parent = (win: Window): void => {
|
|
||||||
const loc = win.location;
|
|
||||||
if (loc.hash !== '') {
|
|
||||||
loc.hash = '';
|
|
||||||
return;
|
|
||||||
} else if (loc.search !== '') {
|
|
||||||
loc.search = '';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const basenamePattern = /\/[^/]+$/;
|
|
||||||
const lastDirPattern = /\/[^/]+\/$/;
|
|
||||||
if (basenamePattern.test(loc.pathname)) {
|
|
||||||
loc.pathname = loc.pathname.replace(basenamePattern, '/');
|
|
||||||
} else if (lastDirPattern.test(loc.pathname)) {
|
|
||||||
loc.pathname = loc.pathname.replace(lastDirPattern, '/');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const root = (win: Window): void => {
|
|
||||||
win.location.href = win.location.origin;
|
|
||||||
};
|
|
||||||
|
|
||||||
export { historyPrev, historyNext, linkPrev, linkNext, parent, root };
|
|
98
src/content/presenters/NavigationPresenter.ts
Normal file
98
src/content/presenters/NavigationPresenter.ts
Normal file
|
@ -0,0 +1,98 @@
|
||||||
|
export default interface NavigationPresenter {
|
||||||
|
openHistoryPrev(): void;
|
||||||
|
|
||||||
|
openHistoryNext(): void;
|
||||||
|
|
||||||
|
openLinkPrev(): void;
|
||||||
|
|
||||||
|
openLinkNext(): void;
|
||||||
|
|
||||||
|
openParent(): void;
|
||||||
|
|
||||||
|
openRoot(): void;
|
||||||
|
|
||||||
|
// eslint-disable-next-line semi
|
||||||
|
}
|
||||||
|
|
||||||
|
const REL_PATTERN: {[key: string]: RegExp} = {
|
||||||
|
prev: /^(?:prev(?:ious)?|older)\b|\u2039|\u2190|\xab|\u226a|<</i,
|
||||||
|
next: /^(?:next|newer)\b|\u203a|\u2192|\xbb|\u226b|>>/i,
|
||||||
|
};
|
||||||
|
|
||||||
|
// Return the last element in the document matching the supplied selector
|
||||||
|
// and the optional filter, or null if there are no matches.
|
||||||
|
// eslint-disable-next-line func-style
|
||||||
|
function selectLast<E extends Element>(
|
||||||
|
selector: string,
|
||||||
|
filter?: (e: E) => boolean,
|
||||||
|
): E | null {
|
||||||
|
let nodes = Array.from(
|
||||||
|
window.document.querySelectorAll(selector) as NodeListOf<E>
|
||||||
|
);
|
||||||
|
|
||||||
|
if (filter) {
|
||||||
|
nodes = nodes.filter(filter);
|
||||||
|
}
|
||||||
|
return nodes.length ? nodes[nodes.length - 1] : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class NavigationPresenterImpl implements NavigationPresenter {
|
||||||
|
openHistoryPrev(): void {
|
||||||
|
window.history.back();
|
||||||
|
}
|
||||||
|
|
||||||
|
openHistoryNext(): void {
|
||||||
|
window.history.forward();
|
||||||
|
}
|
||||||
|
|
||||||
|
openLinkPrev(): void {
|
||||||
|
this.linkRel('prev');
|
||||||
|
}
|
||||||
|
|
||||||
|
openLinkNext(): void {
|
||||||
|
this.linkRel('next');
|
||||||
|
}
|
||||||
|
|
||||||
|
openParent(): void {
|
||||||
|
const loc = window.location;
|
||||||
|
if (loc.hash !== '') {
|
||||||
|
loc.hash = '';
|
||||||
|
return;
|
||||||
|
} else if (loc.search !== '') {
|
||||||
|
loc.search = '';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const basenamePattern = /\/[^/]+$/;
|
||||||
|
const lastDirPattern = /\/[^/]+\/$/;
|
||||||
|
if (basenamePattern.test(loc.pathname)) {
|
||||||
|
loc.pathname = loc.pathname.replace(basenamePattern, '/');
|
||||||
|
} else if (lastDirPattern.test(loc.pathname)) {
|
||||||
|
loc.pathname = loc.pathname.replace(lastDirPattern, '/');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
openRoot(): void {
|
||||||
|
window.location.href = window.location.origin;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Code common to linkPrev and linkNext which navigates to the specified page.
|
||||||
|
private linkRel(rel: 'prev' | 'next'): void {
|
||||||
|
let link = selectLast<HTMLLinkElement>(`link[rel~=${rel}][href]`);
|
||||||
|
if (link) {
|
||||||
|
window.location.href = link.href;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const pattern = REL_PATTERN[rel];
|
||||||
|
|
||||||
|
let a = selectLast<HTMLAnchorElement>(`a[rel~=${rel}][href]`) ||
|
||||||
|
// `innerText` is much slower than `textContent`, but produces much better
|
||||||
|
// (i.e. less unexpected) results
|
||||||
|
selectLast('a[href]', lnk => pattern.test(lnk.innerText));
|
||||||
|
|
||||||
|
if (a) {
|
||||||
|
a.click();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,5 +1,6 @@
|
||||||
import FocusPresenter, { FocusPresenterImpl }
|
import FocusPresenter, { FocusPresenterImpl }
|
||||||
from '../presenters/FocusPresenter';
|
from '../presenters/FocusPresenter';
|
||||||
|
|
||||||
export default class FocusUseCases {
|
export default class FocusUseCases {
|
||||||
private presenter: FocusPresenter;
|
private presenter: FocusPresenter;
|
||||||
|
|
||||||
|
|
|
@ -1,27 +1,36 @@
|
||||||
import * as navigates from '../navigates';
|
import NavigationPresenter, { NavigationPresenterImpl }
|
||||||
|
from '../presenters/NavigationPresenter';
|
||||||
|
|
||||||
|
export default class NavigateUseCase {
|
||||||
|
private navigationPresenter: NavigationPresenter;
|
||||||
|
|
||||||
|
constructor({
|
||||||
|
navigationPresenter = new NavigationPresenterImpl(),
|
||||||
|
} = {}) {
|
||||||
|
this.navigationPresenter = navigationPresenter;
|
||||||
|
}
|
||||||
|
|
||||||
export default class NavigateClass {
|
|
||||||
openHistoryPrev(): void {
|
openHistoryPrev(): void {
|
||||||
navigates.historyPrev(window);
|
this.navigationPresenter.openHistoryPrev();
|
||||||
}
|
}
|
||||||
|
|
||||||
openHistoryNext(): void {
|
openHistoryNext(): void {
|
||||||
navigates.historyNext(window);
|
this.navigationPresenter.openHistoryNext();
|
||||||
}
|
}
|
||||||
|
|
||||||
openLinkPrev(): void {
|
openLinkPrev(): void {
|
||||||
navigates.linkPrev(window);
|
this.navigationPresenter.openLinkPrev();
|
||||||
}
|
}
|
||||||
|
|
||||||
openLinkNext(): void {
|
openLinkNext(): void {
|
||||||
navigates.linkNext(window);
|
this.navigationPresenter.openLinkNext();
|
||||||
}
|
}
|
||||||
|
|
||||||
openParent(): void {
|
openParent(): void {
|
||||||
navigates.parent(window);
|
this.navigationPresenter.openParent();
|
||||||
}
|
}
|
||||||
|
|
||||||
openRoot(): void {
|
openRoot(): void {
|
||||||
navigates.root(window);
|
this.navigationPresenter.openRoot();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,19 +1,26 @@
|
||||||
import * as navigates from 'content/navigates';
|
import NavigationPresenter, { NavigationPresenterImpl }
|
||||||
|
from '../../../src/content/presenters/NavigationPresenter';
|
||||||
|
import { expect } from 'chai';
|
||||||
|
|
||||||
|
describe('NavigationPresenter', () => {
|
||||||
|
let sut;
|
||||||
|
|
||||||
const testRel = (done, rel, html) => {
|
const testRel = (done, rel, html) => {
|
||||||
const method = rel === 'prev' ? 'linkPrev' : 'linkNext';
|
const method = rel === 'prev' ? sut.openLinkPrev.bind(sut) : sut.openLinkNext.bind(sut);
|
||||||
document.body.innerHTML = html;
|
document.body.innerHTML = html;
|
||||||
navigates[method](window);
|
method();
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
expect(document.location.hash).to.equal(`#${rel}`);
|
expect(document.location.hash).to.equal(`#${rel}`);
|
||||||
done();
|
done();
|
||||||
}, 0);
|
}, 0);
|
||||||
};
|
};
|
||||||
|
|
||||||
const testPrev = html => done => testRel(done, 'prev', html);
|
const testPrev = html => done => testRel(done, 'prev', html);
|
||||||
const testNext = html => done => testRel(done, 'next', html);
|
const testNext = html => done => testRel(done, 'next', html);
|
||||||
|
|
||||||
describe('navigates module', () => {
|
before(() => {
|
||||||
|
sut = new NavigationPresenterImpl();
|
||||||
|
});
|
||||||
|
|
||||||
describe('#linkPrev', () => {
|
describe('#linkPrev', () => {
|
||||||
it('navigates to <link> elements whose rel attribute is "prev"', testPrev(
|
it('navigates to <link> elements whose rel attribute is "prev"', testPrev(
|
||||||
'<link rel="prev" href="#prev" />'
|
'<link rel="prev" href="#prev" />'
|
||||||
|
@ -130,7 +137,7 @@ describe('navigates module', () => {
|
||||||
// NOTE: not able to test location
|
// NOTE: not able to test location
|
||||||
it('removes hash', () => {
|
it('removes hash', () => {
|
||||||
window.location.hash = '#section-1';
|
window.location.hash = '#section-1';
|
||||||
navigates.parent(window);
|
sut.openParent();
|
||||||
expect(document.location.hash).to.be.empty;
|
expect(document.location.hash).to.be.empty;
|
||||||
});
|
});
|
||||||
});
|
});
|
31
test/content/repositories/FollowKeyRepository.test.ts
Normal file
31
test/content/repositories/FollowKeyRepository.test.ts
Normal file
|
@ -0,0 +1,31 @@
|
||||||
|
import FollowKeyRepository, { FollowKeyRepositoryImpl }
|
||||||
|
from '../../../src/content/repositories/FollowKeyRepository';
|
||||||
|
import { expect } from 'chai';
|
||||||
|
|
||||||
|
describe('FollowKeyRepositoryImpl', () => {
|
||||||
|
let sut: FollowKeyRepository;
|
||||||
|
|
||||||
|
before(() => {
|
||||||
|
sut = new FollowKeyRepositoryImpl();
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('#getKeys()/#pushKey()/#popKey()', () => {
|
||||||
|
it('enqueues keys', () => {
|
||||||
|
expect(sut.getKeys()).to.be.empty;
|
||||||
|
|
||||||
|
sut.pushKey('a');
|
||||||
|
sut.pushKey('b');
|
||||||
|
sut.pushKey('c');
|
||||||
|
expect(sut.getKeys()).to.deep.equal(['a', 'b', 'c']);
|
||||||
|
|
||||||
|
sut.popKey();
|
||||||
|
expect(sut.getKeys()).to.deep.equal(['a', 'b']);
|
||||||
|
|
||||||
|
sut.clearKeys();
|
||||||
|
expect(sut.getKeys()).to.be.empty;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
49
test/content/repositories/FollowMasterRepository.test.ts
Normal file
49
test/content/repositories/FollowMasterRepository.test.ts
Normal file
|
@ -0,0 +1,49 @@
|
||||||
|
import FollowMasterRepository, { FollowMasterRepositoryImpl }
|
||||||
|
from '../../../src/content/repositories/FollowMasterRepository';
|
||||||
|
import { expect } from 'chai';
|
||||||
|
|
||||||
|
describe('FollowMasterRepositoryImpl', () => {
|
||||||
|
let sut: FollowMasterRepository;
|
||||||
|
|
||||||
|
before(() => {
|
||||||
|
sut = new FollowMasterRepositoryImpl();
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('#getTags()/#addTag()/#clearTags()', () => {
|
||||||
|
it('gets, adds and clears tags', () => {
|
||||||
|
expect(sut.getTags()).to.be.empty;
|
||||||
|
|
||||||
|
sut.addTag('a');
|
||||||
|
sut.addTag('b');
|
||||||
|
sut.addTag('c');
|
||||||
|
expect(sut.getTags()).to.deep.equal(['a', 'b', 'c']);
|
||||||
|
|
||||||
|
sut.clearTags();
|
||||||
|
expect(sut.getTags()).to.be.empty;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('#getTagsByPrefix', () => {
|
||||||
|
it('gets tags matched by prefix', () => {
|
||||||
|
for (let tag of ['a', 'aa', 'ab', 'b', 'ba', 'bb']) {
|
||||||
|
sut.addTag(tag);
|
||||||
|
}
|
||||||
|
expect(sut.getTagsByPrefix('a')).to.deep.equal(['a', 'aa', 'ab']);
|
||||||
|
expect(sut.getTagsByPrefix('aa')).to.deep.equal(['aa']);
|
||||||
|
expect(sut.getTagsByPrefix('b')).to.deep.equal(['b', 'ba', 'bb']);
|
||||||
|
expect(sut.getTagsByPrefix('c')).to.be.empty;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('#setCurrentFollowMode()/#getCurrentNewTabMode()/#getCurrentBackgroundMode', () => {
|
||||||
|
it('updates and gets follow mode', () => {
|
||||||
|
sut.setCurrentFollowMode(false, true);
|
||||||
|
expect(sut.getCurrentNewTabMode()).to.be.false;
|
||||||
|
expect(sut.getCurrentBackgroundMode()).to.be.true;
|
||||||
|
|
||||||
|
sut.setCurrentFollowMode(true, false);
|
||||||
|
expect(sut.getCurrentNewTabMode()).to.be.true;
|
||||||
|
expect(sut.getCurrentBackgroundMode()).to.be.false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
24
test/content/repositories/FollowSlaveRepository.test.ts
Normal file
24
test/content/repositories/FollowSlaveRepository.test.ts
Normal file
|
@ -0,0 +1,24 @@
|
||||||
|
import FollowSlaveRepository, { FollowSlaveRepositoryImpl }
|
||||||
|
from '../../../src/content/repositories/FollowSlaveRepository';
|
||||||
|
import { expect } from 'chai';
|
||||||
|
|
||||||
|
describe('FollowSlaveRepository', () => {
|
||||||
|
let sut: FollowSlaveRepository;
|
||||||
|
|
||||||
|
before(() => {
|
||||||
|
sut = new FollowSlaveRepositoryImpl();
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('#isFollowMode()/#enableFollowMode()/#disableFollowMode()', () => {
|
||||||
|
it('gets, adds updates follow mode', () => {
|
||||||
|
expect(sut.isFollowMode()).to.be.false;
|
||||||
|
|
||||||
|
sut.enableFollowMode();
|
||||||
|
expect(sut.isFollowMode()).to.be.true;
|
||||||
|
|
||||||
|
sut.disableFollowMode();
|
||||||
|
expect(sut.isFollowMode()).to.be.false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
37
test/content/repositories/KeymapRepository.test.ts
Normal file
37
test/content/repositories/KeymapRepository.test.ts
Normal file
|
@ -0,0 +1,37 @@
|
||||||
|
import KeymapRepository, { KeymapRepositoryImpl }
|
||||||
|
from '../../../src/content/repositories/KeymapRepository';
|
||||||
|
import { expect } from 'chai';
|
||||||
|
|
||||||
|
describe('KeymapRepositoryImpl', () => {
|
||||||
|
let sut: KeymapRepository;
|
||||||
|
|
||||||
|
before(() => {
|
||||||
|
sut = new KeymapRepositoryImpl();
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('#enqueueKey()', () => {
|
||||||
|
it('enqueues keys', () => {
|
||||||
|
sut.enqueueKey({ key: 'a' });
|
||||||
|
sut.enqueueKey({ key: 'b' });
|
||||||
|
let sequence = sut.enqueueKey({ key: 'c' });
|
||||||
|
|
||||||
|
expect(sequence.getKeyArray()).deep.equals([
|
||||||
|
{ key: 'a' }, { key: 'b' }, { key: 'c' },
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('#clear()', () => {
|
||||||
|
it('clears keys', () => {
|
||||||
|
sut.enqueueKey({ key: 'a' });
|
||||||
|
sut.enqueueKey({ key: 'b' });
|
||||||
|
sut.enqueueKey({ key: 'c' });
|
||||||
|
sut.clear();
|
||||||
|
|
||||||
|
let sequence = sut.enqueueKey({ key: 'a' });
|
||||||
|
expect(sequence.length()).to.equal(1);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
36
test/content/repositories/MarkKeyRepository.test.ts
Normal file
36
test/content/repositories/MarkKeyRepository.test.ts
Normal file
|
@ -0,0 +1,36 @@
|
||||||
|
import MarkRepository, { MarkKeyRepositoryImpl }
|
||||||
|
from '../../../src/content/repositories/MarkKeyRepository';
|
||||||
|
import { expect } from 'chai';
|
||||||
|
|
||||||
|
describe('MarkKeyRepositoryImpl', () => {
|
||||||
|
let sut: MarkRepository;
|
||||||
|
|
||||||
|
before(() => {
|
||||||
|
sut = new MarkKeyRepositoryImpl();
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('#isSetMode/#enableSetMode/#disabeSetMode', () => {
|
||||||
|
it('enables and disables set mode', () => {
|
||||||
|
expect(sut.isSetMode()).to.be.false;
|
||||||
|
|
||||||
|
sut.enableSetMode();
|
||||||
|
expect(sut.isSetMode()).to.be.true;
|
||||||
|
|
||||||
|
sut.disabeSetMode();
|
||||||
|
expect(sut.isSetMode()).to.be.false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('#isJumpMode/#enableJumpMode/#disabeJumpMode', () => {
|
||||||
|
it('enables and disables jump mode', () => {
|
||||||
|
expect(sut.isJumpMode()).to.be.false;
|
||||||
|
|
||||||
|
sut.enableJumpMode();
|
||||||
|
expect(sut.isJumpMode()).to.be.true;
|
||||||
|
|
||||||
|
sut.disabeJumpMode();
|
||||||
|
expect(sut.isJumpMode()).to.be.false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
Reference in a new issue