diff options
-rw-r--r-- | src/console/index.html | 2 | ||||
-rw-r--r-- | src/console/site.scss | 5 | ||||
-rw-r--r-- | src/content/components/common/follow.js | 3 | ||||
-rw-r--r-- | src/content/components/common/hint.css | 2 | ||||
-rw-r--r-- | src/content/console-frame.scss | 3 | ||||
-rw-r--r-- | src/content/navigates.js | 31 | ||||
-rw-r--r-- | test/content/navigates.test.js | 156 |
7 files changed, 146 insertions, 56 deletions
diff --git a/src/console/index.html b/src/console/index.html index 52ecb76..e049b5e 100644 --- a/src/console/index.html +++ b/src/console/index.html @@ -7,7 +7,7 @@ </head> <body class='vimvixen-console'> <p class='vimvixen-console-message'></p> - <div id='vimvixen-console-command'> + <div id='vimvixen-console-command' class='vimvixen-console-command-wrapper'> <ul id='vimvixen-console-completion' class='vimvixen-console-completion'></ul> <div class='vimvixen-console-command'> <i class='vimvixen-console-command-prompt'></i><input diff --git a/src/console/site.scss b/src/console/site.scss index cd40db5..5aaea12 100644 --- a/src/console/site.scss +++ b/src/console/site.scss @@ -12,7 +12,6 @@ body { } .vimvixen-console { - border-top: 1px solid gray; bottom: 0; margin: 0; padding: 0; @@ -24,6 +23,10 @@ body { line-height: 16px; } + &-command-wrapper { + border-top: 1px solid gray; + } + &-completion { background-color: white; diff --git a/src/content/components/common/follow.js b/src/content/components/common/follow.js index 7a35105..7717154 100644 --- a/src/content/components/common/follow.js +++ b/src/content/components/common/follow.js @@ -4,7 +4,8 @@ import * as dom from 'shared/utils/dom'; const TARGET_SELECTOR = [ 'a', 'button', 'input', 'textarea', 'area', - '[contenteditable=true]', '[contenteditable=""]', '[tabindex]' + '[contenteditable=true]', '[contenteditable=""]', '[tabindex]', + '[role="button"]' ].join(','); diff --git a/src/content/components/common/hint.css b/src/content/components/common/hint.css index 119dd21..1f2ab20 100644 --- a/src/content/components/common/hint.css +++ b/src/content/components/common/hint.css @@ -4,7 +4,7 @@ font-weight: bold; position: absolute; text-transform: uppercase; - z-index: 100000; + z-index: 2147483647; font-size: 12px; color: black; } diff --git a/src/content/console-frame.scss b/src/content/console-frame.scss index 33bfff3..dece648 100644 --- a/src/content/console-frame.scss +++ b/src/content/console-frame.scss @@ -6,7 +6,8 @@ width: 100%; height: 100%; position: fixed; - z-index: 10000; + z-index: 2147483647; border: none; + background-color: unset; pointer-events:none; } diff --git a/src/content/navigates.js b/src/content/navigates.js index 64e5fc0..3e12a6f 100644 --- a/src/content/navigates.js +++ b/src/content/navigates.js @@ -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; diff --git a/test/content/navigates.test.js b/test/content/navigates.test.js index b5144e9..d8a3316 100644 --- a/test/content/navigates.test.js +++ b/test/content/navigates.test.js @@ -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; }); }); }); - - |