Merge pull request #123 from ueokande/64-follow-area-tags

follow area tags

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() {

src/console/components/console.js

@@ -17,6 +17,10 @@ export default class ConsoleComponent {
 
     this.hideCommand();
     this.hideMessage();
+
+    store.subscribe(() => {
+      this.update();
+    });
   }
 
   onBlur() {

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));

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,
   };
 };
 

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',
 };

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 &&

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);

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:

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);
   }

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));
 

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;

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;
     }

src/content/components/top-content/index.js

@@ -9,13 +9,12 @@ 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);
 
@@ -28,8 +27,6 @@ export default class TopContent {
       this.disableIfBlack(blacklist);
       this.prevBlacklist = blacklist;
     }
-
-    this.children.forEach(c => c.update());
   }
 
   disableIfBlack(blacklist) {

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
+}

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),
     });

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),
   });
 }

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 };

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);
+    });
+  });
+});

test/content/actions/follow.test.js

@@ -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);
-    });
-  });
-});

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', '');
+  });
+});

test/content/reducers/follow.test.js

@@ -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', '');
-  });
-});