diff options
29 files changed, 314 insertions, 256 deletions
@@ -35,6 +35,7 @@ "multiline-ternary": "off", "newline-after-var": "off", "newline-before-return": "off", + "newline-per-chained-call": "off", "no-bitwise": "off", "no-console": ["error", { "allow": ["warn", "error"] }], "no-empty-function": "off", diff --git a/.travis.yml b/.travis.yml index 29b167b..8acb121 100644 --- a/.travis.yml +++ b/.travis.yml @@ -2,7 +2,7 @@ language: node_js node_js: - "6" addons: - firefox: "55.0" + firefox: "56.0" before_script: - export DISPLAY=:99.0 - sh -e /etc/init.d/xvfb start @@ -1,10 +1,10 @@ -### Checklist for testing Vim Vixen +## Checklist for testing Vim Vixen -#### Operations +### Operations Test operations with default key maps. -##### Scrolling +#### Scrolling - [ ] <kbd>k</kbd> or <kbd>Ctrl</kbd>+<kbd>Y</kbd>, <kbd>j</kbd> or <kbd>Ctrl</kbd>+<kbd>E</kbd>: scroll up and down - [ ] <kbd>h</kbd>, <kbd>l</kbd>: scroll left and right @@ -13,7 +13,7 @@ Test operations with default key maps. - [ ] <kbd>0</kbd>, <kbd>$</kbd>: scroll to leftmost and rightmost - [ ] <kbd>g</kbd><kbd>g</kbd>, <kbd>G</kbd>: scroll to top and bottom -##### Console +#### Console The behaviors of the console are tested in [Console section](#consoles). @@ -22,7 +22,7 @@ The behaviors of the console are tested in [Console section](#consoles). - [ ] <kbd>O</kbd>, <kbd>T</kbd>, <kbd>W</kbd>: open a console with `open`, `tabopen`, `winopen` and current URL - [ ] <kbd>b</kbd>: open a consolw with `buffer` -##### Tabs +#### Tabs - [ ] <kbd>d</kbd>: delete current tab - [ ] <kbd>u</kbd>: reopen close tab @@ -30,24 +30,36 @@ The behaviors of the console are tested in [Console section](#consoles). - [ ] <kbd>r</kbd>: reload current tab - [ ] <kbd>R</kbd>: reload current tab without cache -##### Navigation +#### Navigation -- [ ] <kbd>f</kbd>: start following links -- [ ] <kbd>F</kbd>: start following links and open in new tab - [ ] <kbd>H</kbd>, <kbd>L</kbd>: go back and forward in histories - [ ] <kbd>[</kbd><kbd>[</kbd>, <kbd>]</kbd><kbd>]</kbd>: find prev and next links and open it - [ ] <kbd>g</kbd><kbd>u</kbd>: go to parent directory - [ ] <kbd>g</kbd><kbd>U</kbd>: go to root directory -##### Misc +#### Misc - [ ] <kbd>z</kbd><kbd>i</kbd>, <kbd>z</kbd><kbd>o</kbd>: zoom-in and zoom-out - [ ] <kbd>z</kbd><kbd>z</kbd>: set zoom level as default - [ ] <kbd>y</kbd>: yank current URL and show a message +- [ ] Toggle enabled/disabled of plugin bu <kbd>Shift</kbd>+<kbd>Esc</kbd> + +### Following links + +- [ ] <kbd>f</kbd>: start following links +- [ ] <kbd>F</kbd>: start following links and open in new tab +- [ ] open link with target='_blank' in new tab by <kbd>f</kbd> +- [ ] open link with target='_blank' in new tab by <kbd>F</kbd> +- [ ] Show hints on following on a page containing `<frame>`/`<iframe>` +- [ ] Show hints only inside viewport of the frame on following on a page containing `<frame>`/`<iframe>` +- [ ] Show hints only inside top window on following on a page containing `<frame>`/`<iframe>` +- [ ] Select link and open it in the frame in `<iframe>`/`<frame`> on following by <kbd>f</kbd> +- [ ] Select link and open it in new tab in `<iframe>`/`<frame`> on following by <kbd>F</kbd> +- [ ] Select link and open it in `<area>` tags, for <kbd>f</kbd> and <kbd>F</kbd> -#### Consoles +### Consoles -##### Exec a command +#### Exec a command - [ ] `<EMPTY>`, `<SP>`: do nothing <br> @@ -70,9 +82,9 @@ The behaviors of the console are tested in [Console section](#consoles). - [ ] `buffer 0`, `buffer 99`: shows an error - [ ] select tabs rotationally when more than two tabs are matched -#### Completions +### Completions -##### History and search engines +#### History and search engines - [ ] `open`: show no completions - [ ] `open<SP>`: show all engines and some history items @@ -80,16 +92,21 @@ The behaviors of the console are tested in [Console section](#consoles). - [ ] `open foo bar`: complete history items matched with keywords `foo` and `bar` - [ ] also `tabopen` and `winopen` - shortening commands such as `o` are not test in this release +- [ ] Show competions for `:open`/`:tabopen`/`:buffer` on opning just after closed -##### Buffer command +#### Buffer command - [ ] `buffer`: show no completions - [ ] `buffer<SP>`: show all opened tabs in completion - [ ] `buffer x`: show tabs which has title and URL matches with `x` -#### Settings +#### Misc + +- [ ] Select next item by <kbd>Tab</kbd> and previous item by <kbd>Shift</kbd>+<kbd>Tab</kbd> -##### Validations +### Settings + +#### Validations - [ ] show error on invalid json - [ ] show error when top-level keys has keys other than `keymaps`, `search`, and `blacklist` @@ -102,35 +119,7 @@ The behaviors of the console are tested in [Console section](#consoles). - validations in `"search"` section are not tested in this release -##### Updating - -- [ ] changes are updated on textarea blure when no errors -- [ ] changes are not updated on textarea blure when errors occurs -- [ ] keymap settings are applied to open tabs without reload -- [ ] search settings are applied to open tabs without reload - -#### Events are fired on Slack and Twitter (#54) - -- [ ] Fucus text box on Twitter or Slack, press <kbd>j</kbd>, then <kbd>j</kbd> is typed in the box -- [ ] Focus the text box on Twitter or Slack on following mode - -#### Multi frame support (#61) - -- [ ] Show hints on following on a page containing `<frame>`/`<iframe>` -- [ ] Show hints only inside viewport of the frame on following on a page containing `<frame>`/`<iframe>` -- [ ] Show hints only inside top window on following on a page containing `<frame>`/`<iframe>` -- [ ] Select link and open it in the frame in `<iframe>`/`<frame`> on following by <kbd>f</kbd> -- [ ] Select link and open it in new tab in `<iframe>`/`<frame`> on following by <kbd>F</kbd> - -#### Empty suggestion (#65) - -- [ ] Show competions for `:open`/`:tabopen`/`:buffer` on console after closed - -#### Disable add-on temporary (#86) - -- [ ] Toggle enabled/disabled of plugin bu <kbd>Shift</kbd>+<kbd>Esc</kbd> - -#### URL blacklist (#90) +#### `"blacklist"` section - [ ] `github.com/a` blocks `github.com/a`, and not blocks `github.com/aa` - [ ] `github.com/a*` blocks both `github.com/a` and `github.com/aa` @@ -138,11 +127,20 @@ The behaviors of the console are tested in [Console section](#consoles). - [ ] `github.com` blocks both `github.com/` and `github.com/a` - [ ] `*.github.com` blocks `gist.github.com/`, and not `github.com` -#### Improve for aberration pages (#93) +#### Updating + +- [ ] changes are updated on textarea blure when no errors +- [ ] changes are not updated on textarea blure when errors occurs +- [ ] keymap settings are applied to open tabs without reload +- [ ] search settings are applied to open tabs without reload + +### For certain sites +- [ ] scoll on Hacker News - [ ] able to scroll on Gmail and Slack +- [ ] Fucus text box on Twitter or Slack, press <kbd>j</kbd>, then <kbd>j</kbd> is typed in the box +- [ ] Focus the text box on Twitter or Slack on following mode -#### Link with target='_blank' link (#94) +## Misc -- [ ] open link with target='_blank' in new tab by <kbd>f</kbd> -- [ ] open link with target='_blank' in new tab by <kbd>F</kbd> +- [ ] Work after plugin reload @@ -3,14 +3,14 @@ Vim Vixen is a Firefox add-on which allows you to navigate with keyboard on the browser. Firefox started to support WebExtensions API and will stop supporting add-ons using legacy APIs from version 57. For this reason, many legacy add-ons do not work on Firefox 57. -and Vim Vixen is a new choise for Vim users since Vim Vixen uses WebExtensions API +Vim Vixen is a new choice for Vim users since Vim Vixen uses the WebExtensions API. ## Basic usage ### Key-maps -The key-maps are configurable in preferences of the add-ons. -The default mapping are shown in the following. +The key-maps are configurable in the add-ons preferences by navigating to `about:addons` and selecting "Extensions". +The default mappings are as follows: #### Console @@ -52,34 +52,33 @@ The default mapping are shown in the following. ### Console commands -Vim-Vixen provides a console like the Vimperator's one. +Vim Vixen provides a console for `ex`-style commands similar to Vimperator. Open the console with <kbd>:</kbd>. Or start it with initial values using <kbd>o</kbd>, <kbd>t</kbd>, or <kbd>w</kbd>. #### `:open` command -Open a URL or search keywords by search engine in current tab, -When specified parameter is formatted in URL as following, URL is opened to current tab. +The `:open` command operates two different ways, depending on the parameter. +When the parameter is a URL, that URL is opened in the current tab. ``` :open http://github.com/ueokande ``` -If specified parameters are keywords as following, open new tab searched by the -keywords with search engines (default to Google). +Otherwise, the current tab will open a search page with the supplied string (defaults to Google). ``` :open How to contribute to Vim-Vixen ``` -You can specify search engines in first parameter. -For the default of search engines, see [search engines](#search-engines) section. +To use a search engine other than the default, specify which search engine to use as the first parameter. ``` :open yahoo How to contribute to Vim-Vixen ``` +To adjust the search engine default and add/remove search engines, see the [search engines](#search-engines) section. #### `:tabopen` command @@ -95,12 +94,11 @@ Select tabs by URL or title matched by keywords. ### Search engines -Vim-Vixen support to search by search engines such as google or yahoo. -But the engines are independent on browsers' because of there is a limitation of WebExtensions. +Vim Vixen supports search by search engines like Google and Yahoo. -You can configure search engines and default search engine in preferences of the add-ons. -The URLs specified in `"engines"` must contain a {}-placeholder, which will -replaced with keywords in parameters of the command. +You can configure search engines, including the default search engine, in the add-ons preferences. +The URLs specified in `"engines"` must contain a {}-placeholder, which will be +replaced with the search keyword parameters of the command. ```json { @@ -120,10 +118,9 @@ replaced with keywords in parameters of the command. ### Blacklist -Blacklist allows to disable the plugin for certain pages by URL patterns. +The blacklist allows you to disable the plugin for certain pages by URL patterns. For instance, when you describe `"*.slack.com"`, the plugin is disabled on any Slack rooms. In addition, you can also specify path patterns, such as `"example.com/mail/*"`. -Disabled plugin can be made re-enabled by Shift+Esc (in default). ```json { @@ -134,6 +131,8 @@ Disabled plugin can be made re-enabled by Shift+Esc (in default). } ``` +You can toggle Vim Vixen between disabled and enabled with `shift + Esc`. + ## Licence MIT diff --git a/manifest.json b/manifest.json index 268dae8..8ed7a7b 100644 --- a/manifest.json +++ b/manifest.json @@ -2,7 +2,7 @@ "manifest_version": 2, "name": "Vim Vixen", "description": "Vim Vixen", - "version": "0.3", + "version": "0.4", "icons": { "48": "resources/icon_48x48.png", "96": "resources/icon_96x96.png" diff --git a/src/background/actions/settings.js b/src/background/actions/settings.js deleted file mode 100644 index e69de29..0000000 --- a/src/background/actions/settings.js +++ /dev/null diff --git a/src/console/components/completion.js b/src/console/components/completion.js index 5033b5c..a49a221 100644 --- a/src/console/components/completion.js +++ b/src/console/components/completion.js @@ -3,6 +3,10 @@ export default class Completion { this.wrapper = wrapper; this.store = store; this.prevState = {}; + + store.subscribe(() => { + this.update(); + }); } update() { diff --git a/src/console/components/console.js b/src/console/components/console.js index dcd4041..5028e2a 100644 --- a/src/console/components/console.js +++ b/src/console/components/console.js @@ -4,7 +4,6 @@ import * as consoleActions from 'console/actions/console'; export default class ConsoleComponent { constructor(wrapper, store) { this.wrapper = wrapper; - this.prevValue = ''; this.prevState = {}; this.completionOrigin = ''; this.store = store; @@ -13,10 +12,14 @@ export default class ConsoleComponent { let input = doc.querySelector('#vimvixen-console-command-input'); input.addEventListener('blur', this.onBlur.bind(this)); input.addEventListener('keydown', this.onKeyDown.bind(this)); - input.addEventListener('keyup', this.onKeyUp.bind(this)); + input.addEventListener('input', this.onInput.bind(this)); this.hideCommand(); this.hideMessage(); + + store.subscribe(() => { + this.update(); + }); } onBlur() { @@ -49,22 +52,14 @@ export default class ConsoleComponent { } } - onKeyUp(e) { - if (e.keyCode === KeyboardEvent.DOM_VK_TAB) { - return; - } - if (e.target.value === this.prevValue) { - return; - } - + onInput(e) { let doc = this.wrapper.ownerDocument; let input = doc.querySelector('#vimvixen-console-command-input'); this.completionOrigin = input.value; - this.prevValue = e.target.value; return browser.runtime.sendMessage({ type: messages.CONSOLE_QUERY_COMPLETIONS, - text: e.target.value + text: e.target.value, }).then((completions) => { this.store.dispatch(consoleActions.setCompletions(completions)); }); @@ -109,7 +104,7 @@ export default class ConsoleComponent { input.focus(); window.focus(); - this.prevValue = ''; + this.onInput({ target: input }); } hideCommand() { diff --git a/src/console/index.js b/src/console/index.js index 2ae5779..36473fe 100644 --- a/src/console/index.js +++ b/src/console/index.js @@ -7,14 +7,11 @@ import { createStore } from 'shared/store'; import * as consoleActions from 'console/actions/console'; const store = createStore(reducers); -let completionComponent = null; -let consoleComponent = null; window.addEventListener('load', () => { let wrapper = document.querySelector('#vimvixen-console-completion'); - completionComponent = new CompletionComponent(wrapper, store); - - consoleComponent = new ConsoleComponent(document.body, store); + new CompletionComponent(wrapper, store); // eslint-disable-line no-new + new ConsoleComponent(document.body, store); // eslint-disable-line no-new }); const onMessage = (message) => { @@ -30,11 +27,6 @@ const onMessage = (message) => { } }; -store.subscribe(() => { - completionComponent.update(); - consoleComponent.update(); -}); - browser.runtime.onMessage.addListener(onMessage); window.addEventListener('message', (event) => { onMessage(JSON.parse(event.data)); diff --git a/src/content/actions/follow.js b/src/content/actions/follow-controller.js index 5a18dd5..3fd4dce 100644 --- a/src/content/actions/follow.js +++ b/src/content/actions/follow-controller.js @@ -2,27 +2,27 @@ import actions from 'content/actions'; const enable = (newTab) => { return { - type: actions.FOLLOW_ENABLE, + type: actions.FOLLOW_CONTROLLER_ENABLE, newTab, }; }; const disable = () => { return { - type: actions.FOLLOW_DISABLE, + type: actions.FOLLOW_CONTROLLER_DISABLE, }; }; const keyPress = (key) => { return { - type: actions.FOLLOW_KEY_PRESS, + type: actions.FOLLOW_CONTROLLER_KEY_PRESS, key: key }; }; const backspace = () => { return { - type: actions.FOLLOW_BACKSPACE, + type: actions.FOLLOW_CONTROLLER_BACKSPACE, }; }; diff --git a/src/content/actions/index.js b/src/content/actions/index.js index 83fa7cf..8cc2303 100644 --- a/src/content/actions/index.js +++ b/src/content/actions/index.js @@ -17,8 +17,8 @@ export default { COMPLETION_SELECT_PREV: 'completions.select.prev', // Follow - FOLLOW_ENABLE: 'follow.enable', - FOLLOW_DISABLE: 'follow.disable', - FOLLOW_KEY_PRESS: 'follow.key.press', - FOLLOW_BACKSPACE: 'follow.backspace', + FOLLOW_CONTROLLER_ENABLE: 'follow.controller.enable', + FOLLOW_CONTROLLER_DISABLE: 'follow.controller.disable', + FOLLOW_CONTROLLER_KEY_PRESS: 'follow.controller.key.press', + FOLLOW_CONTROLLER_BACKSPACE: 'follow.controller.backspace', }; diff --git a/src/content/components/common/follow.js b/src/content/components/common/follow.js index 4eeaaa2..83aeb0a 100644 --- a/src/content/components/common/follow.js +++ b/src/content/components/common/follow.js @@ -3,17 +3,18 @@ import Hint from './hint'; import * as dom from 'shared/utils/dom'; const TARGET_SELECTOR = [ - 'a', 'button', 'input', 'textarea', + 'a', 'button', 'input', 'textarea', 'area', '[contenteditable=true]', '[contenteditable=""]', '[tabindex]' ].join(','); + const inViewport = (win, element, viewSize, framePosition) => { let { top, left, bottom, right - } = element.getBoundingClientRect(); - let doc = win.doc; - let frameWidth = win.innerWidth || doc.documentElement.clientWidth; - let frameHeight = win.innerHeight || doc.documentElement.clientHeight; + } = dom.viewportRect(element); + let doc = win.document; + let frameWidth = doc.documentElement.clientWidth; + let frameHeight = doc.documentElement.clientHeight; if (right < 0 || bottom < 0 || top > frameHeight || left > frameWidth) { // out of frame @@ -39,9 +40,6 @@ export default class Follow { messages.onMessage(this.onMessage.bind(this)); } - update() { - } - key(key) { if (Object.keys(this.hints).length === 0) { return false; @@ -118,6 +116,7 @@ export default class Follow { let element = hint.target; switch (element.tagName.toLowerCase()) { case 'a': + case 'area': return this.openLink(element); case 'input': switch (element.type) { @@ -165,7 +164,9 @@ export default class Follow { let all = win.document.querySelectorAll(TARGET_SELECTOR); let filtered = Array.prototype.filter.call(all, (element) => { let style = win.getComputedStyle(element); - return style.display !== 'none' && + + // AREA's 'display' in Browser style is 'none' + return (element.tagName === 'AREA' || style.display !== 'none') && style.visibility !== 'hidden' && element.type !== 'hidden' && element.offsetHeight > 0 && diff --git a/src/content/components/common/hint.js b/src/content/components/common/hint.js index cc46fd6..9ef9eba 100644 --- a/src/content/components/common/hint.js +++ b/src/content/components/common/hint.js @@ -1,4 +1,18 @@ import './hint.css'; +import * as dom from 'shared/utils/dom'; + +const hintPosition = (element) => { + let { left, top, right, bottom } = dom.viewportRect(element); + + if (element.tagName !== 'AREA') { + return { x: left, y: top }; + } + + return { + x: (left + right) / 2, + y: (top + bottom) / 2, + }; +}; export default class Hint { constructor(target, tag) { @@ -9,14 +23,14 @@ export default class Hint { this.target = target; let doc = target.ownerDocument; - let { top, left } = target.getBoundingClientRect(); + let { x, y } = hintPosition(target); 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.element.style.left = x + scrollX + 'px'; + this.element.style.top = y + scrollY + 'px'; this.show(); doc.body.append(this.element); diff --git a/src/content/components/common/index.js b/src/content/components/common/index.js index 5f5531b..565632c 100644 --- a/src/content/components/common/index.js +++ b/src/content/components/common/index.js @@ -14,21 +14,12 @@ export default class Common { input.onKey(key => keymapper.key(key)); this.store = store; - this.children = [ - follow, - input, - keymapper, - ]; this.reloadSettings(); messages.onMessage(this.onMessage.bind(this)); } - update() { - this.children.forEach(c => c.update()); - } - onMessage(message) { switch (message.type) { case messages.SETTINGS_CHANGED: @@ -41,6 +32,10 @@ export default class Common { type: messages.SETTINGS_QUERY, }).then((settings) => { this.store.dispatch(settingActions.set(settings)); + }).catch((e) => { + // Sometime sendMessage fails when background script is not ready. + console.warn(e); + setTimeout(() => this.reloadSettings(), 500); }); } } diff --git a/src/content/components/common/input.js b/src/content/components/common/input.js index ef5af29..8b1d35d 100644 --- a/src/content/components/common/input.js +++ b/src/content/components/common/input.js @@ -28,9 +28,6 @@ export default class InputComponent { target.addEventListener('keyup', this.onKeyUp.bind(this)); } - update() { - } - onKey(cb) { this.onKeyListeners.push(cb); } diff --git a/src/content/components/common/keymapper.js b/src/content/components/common/keymapper.js index 44d8212..1da3c0d 100644 --- a/src/content/components/common/keymapper.js +++ b/src/content/components/common/keymapper.js @@ -7,9 +7,6 @@ export default class KeymapperComponent { this.store = store; } - update() { - } - key(key) { this.store.dispatch(inputActions.keyPress(key)); diff --git a/src/content/components/frame-content.js b/src/content/components/frame-content.js index 46786d2..ca999ba 100644 --- a/src/content/components/frame-content.js +++ b/src/content/components/frame-content.js @@ -1,16 +1,3 @@ import CommonComponent from './common'; -export default class FrameContent { - - constructor(win, store) { - this.children = [new CommonComponent(win, store)]; - } - - update() { - this.children.forEach(c => c.update()); - } - - onMessage(message, sender) { - this.children.forEach(c => c.onMessage(message, sender)); - } -} +export default CommonComponent; diff --git a/src/content/components/top-content/follow-controller.js b/src/content/components/top-content/follow-controller.js index 7570cf8..38869e6 100644 --- a/src/content/components/top-content/follow-controller.js +++ b/src/content/components/top-content/follow-controller.js @@ -1,4 +1,4 @@ -import * as followActions from 'content/actions/follow'; +import * as followControllerActions from 'content/actions/follow-controller'; import messages from 'shared/messages'; import HintKeyProducer from 'content/hint-key-producer'; @@ -19,12 +19,17 @@ export default class FollowController { this.producer = null; messages.onMessage(this.onMessage.bind(this)); + + store.subscribe(() => { + this.update(); + }); } onMessage(message, sender) { switch (message.type) { case messages.FOLLOW_START: - return this.store.dispatch(followActions.enable(message.newTab)); + return this.store.dispatch( + followControllerActions.enable(message.newTab)); case messages.FOLLOW_RESPONSE_COUNT_TARGETS: return this.create(message.count, sender); case messages.FOLLOW_KEY_PRESS: @@ -34,7 +39,7 @@ export default class FollowController { update() { let prevState = this.state; - this.state = this.store.getState().follow; + this.state = this.store.getState().followController; if (!prevState.enabled && this.state.enabled) { this.count(); @@ -49,7 +54,7 @@ export default class FollowController { let shown = this.keys.filter(key => key.startsWith(this.state.keys)); if (shown.length === 1) { this.activate(); - this.store.dispatch(followActions.disable()); + this.store.dispatch(followControllerActions.disable()); } broadcastMessage(this.win, { @@ -69,18 +74,18 @@ export default class FollowController { switch (key) { case 'Enter': this.activate(); - this.store.dispatch(followActions.disable()); + this.store.dispatch(followControllerActions.disable()); break; case 'Escape': - this.store.dispatch(followActions.disable()); + this.store.dispatch(followControllerActions.disable()); break; case 'Backspace': case 'Delete': - this.store.dispatch(followActions.backspace()); + this.store.dispatch(followControllerActions.backspace()); break; default: if (DEFAULT_HINT_CHARSET.includes(key)) { - this.store.dispatch(followActions.keyPress(key)); + this.store.dispatch(followControllerActions.keyPress(key)); } break; } diff --git a/src/content/components/top-content/index.js b/src/content/components/top-content/index.js index c4a8461..5124f83 100644 --- a/src/content/components/top-content/index.js +++ b/src/content/components/top-content/index.js @@ -9,17 +9,18 @@ export default class TopContent { constructor(win, store) { this.win = win; - this.children = [ - new CommonComponent(win, store), - new FollowController(win, store), - ]; this.store = store; this.prevBlacklist = undefined; + new CommonComponent(win, store); // eslint-disable-line no-new + new FollowController(win, store); // eslint-disable-line no-new + // TODO make component consoleFrames.initialize(this.win.document); messages.onMessage(this.onMessage.bind(this)); + + this.store.subscribe(() => this.update()); } update() { @@ -28,8 +29,6 @@ export default class TopContent { this.disableIfBlack(blacklist); this.prevBlacklist = blacklist; } - - this.children.forEach(c => c.update()); } disableIfBlack(blacklist) { diff --git a/src/content/index.js b/src/content/index.js index 77249f8..97a8b30 100644 --- a/src/content/index.js +++ b/src/content/index.js @@ -6,12 +6,8 @@ import FrameContentComponent from './components/frame-content'; const store = createStore(reducers); -let rootComponent = window.self === window.top - ? new TopContentComponent(window, store) - : new FrameContentComponent(window, store); - -store.subscribe(() => { - rootComponent.update(); -}); - -rootComponent.update(); +if (window.self === window.top) { + new TopContentComponent(window, store); // eslint-disable-line no-new +} else { + new FrameContentComponent(window, store); // eslint-disable-line no-new +} diff --git a/src/content/reducers/follow.js b/src/content/reducers/follow-controller.js index b7c0cf3..2afb232 100644 --- a/src/content/reducers/follow.js +++ b/src/content/reducers/follow-controller.js @@ -8,21 +8,21 @@ const defaultState = { export default function reducer(state = defaultState, action = {}) { switch (action.type) { - case actions.FOLLOW_ENABLE: + case actions.FOLLOW_CONTROLLER_ENABLE: return Object.assign({}, state, { enabled: true, newTab: action.newTab, keys: '', }); - case actions.FOLLOW_DISABLE: + case actions.FOLLOW_CONTROLLER_DISABLE: return Object.assign({}, state, { enabled: false, }); - case actions.FOLLOW_KEY_PRESS: + case actions.FOLLOW_CONTROLLER_KEY_PRESS: return Object.assign({}, state, { keys: state.keys + action.key, }); - case actions.FOLLOW_BACKSPACE: + case actions.FOLLOW_CONTROLLER_BACKSPACE: return Object.assign({}, state, { keys: state.keys.slice(0, -1), }); diff --git a/src/content/reducers/index.js b/src/content/reducers/index.js index ae4a845..17c0429 100644 --- a/src/content/reducers/index.js +++ b/src/content/reducers/index.js @@ -1,14 +1,14 @@ import addonReducer from './addon'; import settingReducer from './setting'; import inputReducer from './input'; -import followReducer from './follow'; +import followControllerReducer from './follow-controller'; // Make setting reducer instead of re-use const defaultState = { addon: addonReducer(undefined, {}), setting: settingReducer(undefined, {}), input: inputReducer(undefined, {}), - follow: followReducer(undefined, {}), + followController: followControllerReducer(undefined, {}), }; export default function reducer(state = defaultState, action = {}) { @@ -16,6 +16,6 @@ export default function reducer(state = defaultState, action = {}) { addon: addonReducer(state.addon, action), setting: settingReducer(state.setting, action), input: inputReducer(state.input, action), - follow: followReducer(state.follow, action), + followController: followControllerReducer(state.followController, action), }); } diff --git a/src/content/reducers/setting.js b/src/content/reducers/setting.js index 22fac6f..b6f6c58 100644 --- a/src/content/reducers/setting.js +++ b/src/content/reducers/setting.js @@ -1,6 +1,8 @@ import actions from 'content/actions'; -const defaultState = {}; +const defaultState = { + keymaps: {}, +}; export default function reducer(state = defaultState, action = {}) { switch (action.type) { diff --git a/src/shared/utils/dom.js b/src/shared/utils/dom.js index c111ee7..d4fd68a 100644 --- a/src/shared/utils/dom.js +++ b/src/shared/utils/dom.js @@ -5,4 +5,80 @@ const isContentEditable = (element) => { ); }; -export { isContentEditable }; +const rectangleCoordsRect = (coords) => { + let [left, top, right, bottom] = coords.split(',').map(n => Number(n)); + return { left, top, right, bottom }; +}; + +const circleCoordsRect = (coords) => { + let [x, y, r] = coords.split(',').map(n => Number(n)); + return { + left: x - r, + top: y - r, + right: x + r, + bottom: y + r, + }; +}; + +const polygonCoordsRect = (coords) => { + let params = coords.split(','); + let minx = Number(params[0]), + maxx = Number(params[0]), + miny = Number(params[1]), + maxy = Number(params[1]); + let len = Math.floor(params.length / 2); + for (let i = 2; i < len; i += 2) { + let x = Number(params[i]), + y = Number(params[i + 1]); + if (x < minx) { + minx = x; + } + if (x > maxx) { + maxx = x; + } + if (y < miny) { + miny = y; + } + if (y > maxy) { + maxy = y; + } + } + return { left: minx, top: miny, right: maxx, bottom: maxy }; +}; + +const viewportRect = (e) => { + if (e.tagName !== 'AREA') { + return e.getBoundingClientRect(); + } + + let mapElement = e.parentNode; + let imgElement = document.querySelector(`img[usemap="#${mapElement.name}"]`); + let { + left: mapLeft, + top: mapTop + } = imgElement.getBoundingClientRect(); + let coords = e.getAttribute('coords'); + let rect = { left: 0, top: 0, right: 0, bottom: 0 }; + switch (e.getAttribute('shape')) { + case 'rect': + case 'rectangle': + rect = rectangleCoordsRect(coords); + break; + case 'circ': + case 'circle': + rect = circleCoordsRect(coords); + break; + case 'poly': + case 'polygon': + rect = polygonCoordsRect(coords); + break; + } + return { + left: rect.left + mapLeft, + top: rect.top + mapTop, + right: rect.right + mapLeft, + bottom: rect.bottom + mapTop, + }; +}; + +export { isContentEditable, viewportRect }; diff --git a/test/content/actions/follow-controller.test.js b/test/content/actions/follow-controller.test.js new file mode 100644 index 0000000..298abf2 --- /dev/null +++ b/test/content/actions/follow-controller.test.js @@ -0,0 +1,35 @@ +import { expect } from "chai"; +import actions from 'content/actions'; +import * as followControllerActions from 'content/actions/follow-controller'; + +describe('follow-controller actions', () => { + describe('enable', () => { + it('creates FOLLOW_CONTROLLER_ENABLE action', () => { + let action = followControllerActions.enable(true); + expect(action.type).to.equal(actions.FOLLOW_CONTROLLER_ENABLE); + expect(action.newTab).to.equal(true); + }); + }); + + describe('disable', () => { + it('creates FOLLOW_CONTROLLER_DISABLE action', () => { + let action = followControllerActions.disable(true); + expect(action.type).to.equal(actions.FOLLOW_CONTROLLER_DISABLE); + }); + }); + + describe('keyPress', () => { + it('creates FOLLOW_CONTROLLER_KEY_PRESS action', () => { + let action = followControllerActions.keyPress(100); + expect(action.type).to.equal(actions.FOLLOW_CONTROLLER_KEY_PRESS); + expect(action.key).to.equal(100); + }); + }); + + describe('backspace', () => { + it('creates FOLLOW_CONTROLLER_BACKSPACE action', () => { + let action = followControllerActions.backspace(100); + expect(action.type).to.equal(actions.FOLLOW_CONTROLLER_BACKSPACE); + }); + }); +}); diff --git a/test/content/actions/follow.test.js b/test/content/actions/follow.test.js deleted file mode 100644 index 3ac844c..0000000 --- a/test/content/actions/follow.test.js +++ /dev/null @@ -1,35 +0,0 @@ -import { expect } from "chai"; -import actions from 'content/actions'; -import * as followActions from 'content/actions/follow'; - -describe('follow actions', () => { - describe('enable', () => { - it('creates FOLLOW_ENABLE action', () => { - let action = followActions.enable(true); - expect(action.type).to.equal(actions.FOLLOW_ENABLE); - expect(action.newTab).to.equal(true); - }); - }); - - describe('disable', () => { - it('creates FOLLOW_DISABLE action', () => { - let action = followActions.disable(true); - expect(action.type).to.equal(actions.FOLLOW_DISABLE); - }); - }); - - describe('keyPress', () => { - it('creates FOLLOW_KEY_PRESS action', () => { - let action = followActions.keyPress(100); - expect(action.type).to.equal(actions.FOLLOW_KEY_PRESS); - expect(action.key).to.equal(100); - }); - }); - - describe('backspace', () => { - it('creates FOLLOW_BACKSPACE action', () => { - let action = followActions.backspace(100); - expect(action.type).to.equal(actions.FOLLOW_BACKSPACE); - }); - }); -}); diff --git a/test/content/reducers/follow-controller.test.js b/test/content/reducers/follow-controller.test.js new file mode 100644 index 0000000..f4b91d2 --- /dev/null +++ b/test/content/reducers/follow-controller.test.js @@ -0,0 +1,48 @@ +import { expect } from "chai"; +import actions from 'content/actions'; +import followControllerReducer from 'content/reducers/follow-controller'; + +describe('follow-controller reducer', () => { + it ('returns the initial state', () => { + let state = followControllerReducer(undefined, {}); + expect(state).to.have.property('enabled', false); + expect(state).to.have.property('newTab'); + expect(state).to.have.deep.property('keys', ''); + }); + + it ('returns next state for FOLLOW_CONTROLLER_ENABLE', () => { + let action = { type: actions.FOLLOW_CONTROLLER_ENABLE, newTab: true }; + let state = followControllerReducer({ enabled: false, newTab: false }, action); + expect(state).to.have.property('enabled', true); + expect(state).to.have.property('newTab', true); + expect(state).to.have.property('keys', ''); + }); + + it ('returns next state for FOLLOW_CONTROLLER_DISABLE', () => { + let action = { type: actions.FOLLOW_CONTROLLER_DISABLE }; + let state = followControllerReducer({ enabled: true }, action); + expect(state).to.have.property('enabled', false); + }); + + it ('returns next state for FOLLOW_CONTROLLER_KEY_PRESS', () => { + let action = { type: actions.FOLLOW_CONTROLLER_KEY_PRESS, key: 'a'}; + let state = followControllerReducer({ keys: '' }, action); + expect(state).to.have.deep.property('keys', 'a'); + + action = { type: actions.FOLLOW_CONTROLLER_KEY_PRESS, key: 'b'}; + state = followControllerReducer(state, action); + expect(state).to.have.deep.property('keys', 'ab'); + }); + + it ('returns next state for FOLLOW_CONTROLLER_BACKSPACE', () => { + let action = { type: actions.FOLLOW_CONTROLLER_BACKSPACE }; + let state = followControllerReducer({ keys: 'ab' }, action); + expect(state).to.have.deep.property('keys', 'a'); + + state = followControllerReducer(state, action); + expect(state).to.have.deep.property('keys', ''); + + state = followControllerReducer(state, action); + expect(state).to.have.deep.property('keys', ''); + }); +}); diff --git a/test/content/reducers/follow.test.js b/test/content/reducers/follow.test.js deleted file mode 100644 index e2b3445..0000000 --- a/test/content/reducers/follow.test.js +++ /dev/null @@ -1,48 +0,0 @@ -import { expect } from "chai"; -import actions from 'content/actions'; -import followReducer from 'content/reducers/follow'; - -describe('follow reducer', () => { - it ('returns the initial state', () => { - let state = followReducer(undefined, {}); - expect(state).to.have.property('enabled', false); - expect(state).to.have.property('newTab'); - expect(state).to.have.deep.property('keys', ''); - }); - - it ('returns next state for FOLLOW_ENABLE', () => { - let action = { type: actions.FOLLOW_ENABLE, newTab: true }; - let state = followReducer({ enabled: false, newTab: false }, action); - expect(state).to.have.property('enabled', true); - expect(state).to.have.property('newTab', true); - expect(state).to.have.property('keys', ''); - }); - - it ('returns next state for FOLLOW_DISABLE', () => { - let action = { type: actions.FOLLOW_DISABLE }; - let state = followReducer({ enabled: true }, action); - expect(state).to.have.property('enabled', false); - }); - - it ('returns next state for FOLLOW_KEY_PRESS', () => { - let action = { type: actions.FOLLOW_KEY_PRESS, key: 'a'}; - let state = followReducer({ keys: '' }, action); - expect(state).to.have.deep.property('keys', 'a'); - - action = { type: actions.FOLLOW_KEY_PRESS, key: 'b'}; - state = followReducer(state, action); - expect(state).to.have.deep.property('keys', 'ab'); - }); - - it ('returns next state for FOLLOW_BACKSPACE', () => { - let action = { type: actions.FOLLOW_BACKSPACE }; - let state = followReducer({ keys: 'ab' }, action); - expect(state).to.have.deep.property('keys', 'a'); - - state = followReducer(state, action); - expect(state).to.have.deep.property('keys', ''); - - state = followReducer(state, action); - expect(state).to.have.deep.property('keys', ''); - }); -}); diff --git a/test/content/reducers/setting.test.js b/test/content/reducers/setting.test.js index 50d1cf0..ef49594 100644 --- a/test/content/reducers/setting.test.js +++ b/test/content/reducers/setting.test.js @@ -5,7 +5,7 @@ import settingReducer from 'content/reducers/setting'; describe("content setting reducer", () => { it('return the initial state', () => { let state = settingReducer(undefined, {}); - expect(state).to.deep.equal({}); + expect(state).to.deep.equal({ keymaps: {} }); }); it('return next state for SETTING_SET', () => { |