From 890f84c34382253d6c178a5a09149832d145c60f Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sat, 14 Oct 2017 06:40:49 +0900 Subject: move hint component --- src/content/components/follow.js | 2 +- src/content/components/hint.css | 10 +++++++ src/content/components/hint.js | 36 ++++++++++++++++++++++ src/content/hint.css | 10 ------- src/content/hint.js | 36 ---------------------- test/content/components/hint.html | 1 + test/content/components/hint.test.js | 58 ++++++++++++++++++++++++++++++++++++ test/content/hint.html | 1 - test/content/hint.test.js | 58 ------------------------------------ 9 files changed, 106 insertions(+), 106 deletions(-) create mode 100644 src/content/components/hint.css create mode 100644 src/content/components/hint.js delete mode 100644 src/content/hint.css delete mode 100644 src/content/hint.js create mode 100644 test/content/components/hint.html create mode 100644 test/content/components/hint.test.js delete mode 100644 test/content/hint.html delete mode 100644 test/content/hint.test.js diff --git a/src/content/components/follow.js b/src/content/components/follow.js index eb453a5..119a493 100644 --- a/src/content/components/follow.js +++ b/src/content/components/follow.js @@ -1,6 +1,6 @@ import * as followActions from 'content/actions/follow'; import messages from 'shared/messages'; -import Hint from 'content/hint'; +import Hint from './hint'; import HintKeyProducer from 'content/hint-key-producer'; const DEFAULT_HINT_CHARSET = 'abcdefghijklmnopqrstuvwxyz'; diff --git a/src/content/components/hint.css b/src/content/components/hint.css new file mode 100644 index 0000000..119dd21 --- /dev/null +++ b/src/content/components/hint.css @@ -0,0 +1,10 @@ +.vimvixen-hint { + background-color: yellow; + border: 1px solid gold; + font-weight: bold; + position: absolute; + text-transform: uppercase; + z-index: 100000; + font-size: 12px; + color: black; +} diff --git a/src/content/components/hint.js b/src/content/components/hint.js new file mode 100644 index 0000000..cc46fd6 --- /dev/null +++ b/src/content/components/hint.js @@ -0,0 +1,36 @@ +import './hint.css'; + +export default class Hint { + constructor(target, tag) { + if (!(document.body instanceof HTMLElement)) { + throw new TypeError('target is not an HTMLElement'); + } + + this.target = target; + + let doc = target.ownerDocument; + let { top, left } = target.getBoundingClientRect(); + let { scrollX, scrollY } = window; + + this.element = doc.createElement('span'); + this.element.className = 'vimvixen-hint'; + this.element.textContent = tag; + this.element.style.left = left + scrollX + 'px'; + this.element.style.top = top + scrollY + 'px'; + + this.show(); + doc.body.append(this.element); + } + + show() { + this.element.style.display = 'inline'; + } + + hide() { + this.element.style.display = 'none'; + } + + remove() { + this.element.remove(); + } +} diff --git a/src/content/hint.css b/src/content/hint.css deleted file mode 100644 index 119dd21..0000000 --- a/src/content/hint.css +++ /dev/null @@ -1,10 +0,0 @@ -.vimvixen-hint { - background-color: yellow; - border: 1px solid gold; - font-weight: bold; - position: absolute; - text-transform: uppercase; - z-index: 100000; - font-size: 12px; - color: black; -} diff --git a/src/content/hint.js b/src/content/hint.js deleted file mode 100644 index cc46fd6..0000000 --- a/src/content/hint.js +++ /dev/null @@ -1,36 +0,0 @@ -import './hint.css'; - -export default class Hint { - constructor(target, tag) { - if (!(document.body instanceof HTMLElement)) { - throw new TypeError('target is not an HTMLElement'); - } - - this.target = target; - - let doc = target.ownerDocument; - let { top, left } = target.getBoundingClientRect(); - let { scrollX, scrollY } = window; - - this.element = doc.createElement('span'); - this.element.className = 'vimvixen-hint'; - this.element.textContent = tag; - this.element.style.left = left + scrollX + 'px'; - this.element.style.top = top + scrollY + 'px'; - - this.show(); - doc.body.append(this.element); - } - - show() { - this.element.style.display = 'inline'; - } - - hide() { - this.element.style.display = 'none'; - } - - remove() { - this.element.remove(); - } -} diff --git a/test/content/components/hint.html b/test/content/components/hint.html new file mode 100644 index 0000000..b50c5fe --- /dev/null +++ b/test/content/components/hint.html @@ -0,0 +1 @@ +link diff --git a/test/content/components/hint.test.js b/test/content/components/hint.test.js new file mode 100644 index 0000000..f98b79b --- /dev/null +++ b/test/content/components/hint.test.js @@ -0,0 +1,58 @@ +import { expect } from "chai"; +import Hint from 'content/components/hint'; + +describe('Hint class', () => { + beforeEach(() => { + document.body.innerHTML = __html__['test/content/components/hint.html']; + }); + + describe('#constructor', () => { + it('creates a hint element with tag name', () => { + let link = document.getElementById('test-link'); + let hint = new Hint(link, 'abc'); + expect(hint.element.textContent.trim()).to.be.equal('abc'); + }); + + it('throws an exception when non-element given', () => { + expect(() => new Hint(window, 'abc')).to.throw(TypeError); + }); + }); + + describe('#show', () => { + it('shows an element', () => { + let link = document.getElementById('test-link'); + let hint = new Hint(link, 'abc'); + hint.hide(); + hint.show(); + + expect(hint.element.style.display).to.not.equal('none'); + }); + }); + + describe('#hide', () => { + it('hides an element', () => { + let link = document.getElementById('test-link'); + let hint = new Hint(link, 'abc'); + hint.hide(); + + expect(hint.element.style.display).to.equal('none'); + }); + }); + + describe('#remove', () => { + it('removes an element', () => { + let link = document.getElementById('test-link'); + let hint = new Hint(link, 'abc'); + + expect(hint.element.parentElement).to.not.be.null; + hint.remove(); + expect(hint.element.parentElement).to.be.null; + }); + }); + + describe('#activate', () => { + // TODO test activations + }); +}); + + diff --git a/test/content/hint.html b/test/content/hint.html deleted file mode 100644 index b50c5fe..0000000 --- a/test/content/hint.html +++ /dev/null @@ -1 +0,0 @@ -link diff --git a/test/content/hint.test.js b/test/content/hint.test.js deleted file mode 100644 index 1547971..0000000 --- a/test/content/hint.test.js +++ /dev/null @@ -1,58 +0,0 @@ -import { expect } from "chai"; -import Hint from 'content/hint'; - -describe('Hint class', () => { - beforeEach(() => { - document.body.innerHTML = __html__['test/content/hint.html']; - }); - - describe('#constructor', () => { - it('creates a hint element with tag name', () => { - let link = document.getElementById('test-link'); - let hint = new Hint(link, 'abc'); - expect(hint.element.textContent.trim()).to.be.equal('abc'); - }); - - it('throws an exception when non-element given', () => { - expect(() => new Hint(window, 'abc')).to.throw(TypeError); - }); - }); - - describe('#show', () => { - it('shows an element', () => { - let link = document.getElementById('test-link'); - let hint = new Hint(link, 'abc'); - hint.hide(); - hint.show(); - - expect(hint.element.style.display).to.not.equal('none'); - }); - }); - - describe('#hide', () => { - it('hides an element', () => { - let link = document.getElementById('test-link'); - let hint = new Hint(link, 'abc'); - hint.hide(); - - expect(hint.element.style.display).to.equal('none'); - }); - }); - - describe('#remove', () => { - it('removes an element', () => { - let link = document.getElementById('test-link'); - let hint = new Hint(link, 'abc'); - - expect(hint.element.parentElement).to.not.be.null; - hint.remove(); - expect(hint.element.parentElement).to.be.null; - }); - }); - - describe('#activate', () => { - // TODO test activations - }); -}); - - -- cgit v1.2.3