Vim-Vixen/src/content/components/top-content/follow-controller.js

import * as followControllerActions from 'content/actions/follow-controller';
import messages from 'shared/messages';
import HintKeyProducer from 'content/hint-key-producer';
import * as properties from 'shared/settings/properties';

const broadcastMessage = (win, message) => {
  let json = JSON.stringify(message);
  let frames = [window.self].concat(Array.from(window.frames));
  frames.forEach(frame => frame.postMessage(json, '*'));
};

export default class FollowController {
  constructor(win, store) {
    this.win = win;
    this.store = store;
    this.state = {};
    this.keys = [];
    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(
        followControllerActions.enable(message.newTab, message.background));
    case messages.FOLLOW_RESPONSE_COUNT_TARGETS:
      return this.create(message.count, sender);
    case messages.FOLLOW_KEY_PRESS:
      return this.keyPress(message.key, message.ctrlKey);
    }
  }

  update() {
    let prevState = this.state;
    this.state = this.store.getState().followController;

    if (!prevState.enabled && this.state.enabled) {
      this.count();
    } else if (prevState.enabled && !this.state.enabled) {
      this.remove();
    } else if (prevState.keys !== this.state.keys) {
      this.updateHints();
    }
  }

  updateHints() {
    let shown = this.keys.filter(key => key.startsWith(this.state.keys));
    if (shown.length === 1) {
      this.activate();
      this.store.dispatch(followControllerActions.disable());
    }

    broadcastMessage(this.win, {
      type: messages.FOLLOW_SHOW_HINTS,
      keys: this.state.keys,
    });
  }

  activate() {
    broadcastMessage(this.win, {
      type: messages.FOLLOW_ACTIVATE,
      keys: this.state.keys,
    });
  }

  keyPress(key, ctrlKey) {
    if (key === '[' && ctrlKey) {
      this.store.dispatch(followControllerActions.disable());
      return true;
    }
    switch (key) {
    case 'Enter':
      this.activate();
      this.store.dispatch(followControllerActions.disable());
      break;
    case 'Esc':
      this.store.dispatch(followControllerActions.disable());
      break;
    case 'Backspace':
    case 'Delete':
      this.store.dispatch(followControllerActions.backspace());
      break;
    default:
      if (this.hintchars().includes(key)) {
        this.store.dispatch(followControllerActions.keyPress(key));
      }
      break;
    }
    return true;
  }

  count() {
    this.producer = new HintKeyProducer(this.hintchars());
    let doc = this.win.document;
    let viewWidth = this.win.innerWidth || doc.documentElement.clientWidth;
    let viewHeight = this.win.innerHeight || doc.documentElement.clientHeight;
    let frameElements = this.win.document.querySelectorAll('frame,iframe');

    this.win.postMessage(JSON.stringify({
      type: messages.FOLLOW_REQUEST_COUNT_TARGETS,
      viewSize: { width: viewWidth, height: viewHeight },
      framePosition: { x: 0, y: 0 },
    }), '*');
    frameElements.forEach((element) => {
      let { left: frameX, top: frameY } = element.getBoundingClientRect();
      let message = JSON.stringify({
        type: messages.FOLLOW_REQUEST_COUNT_TARGETS,
        viewSize: { width: viewWidth, height: viewHeight },
        framePosition: { x: frameX, y: frameY },
      });
      element.contentWindow.postMessage(message, '*');
    });
  }

  create(count, sender) {
    let produced = [];
    for (let i = 0; i < count; ++i) {
      produced.push(this.producer.produce());
    }
    this.keys = this.keys.concat(produced);

    sender.postMessage(JSON.stringify({
      type: messages.FOLLOW_CREATE_HINTS,
      keysArray: produced,
      newTab: this.state.newTab,
      background: this.state.background,
    }), '*');
  }

  remove() {
    this.keys = [];
    broadcastMessage(this.win, {
      type: messages.FOLLOW_REMOVE_HINTS,
    });
  }

  hintchars() {
    return this.store.getState().setting.properties.hintchars ||
      properties.defaults.hintchars;
  }
}