aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/background/actions/settings.js0
-rw-r--r--src/console/components/completion.js4
-rw-r--r--src/console/components/console.js21
-rw-r--r--src/console/index.js12
-rw-r--r--src/content/actions/follow-controller.js (renamed from src/content/actions/follow.js)8
-rw-r--r--src/content/actions/index.js8
-rw-r--r--src/content/components/common/follow.js19
-rw-r--r--src/content/components/common/hint.js20
-rw-r--r--src/content/components/common/index.js13
-rw-r--r--src/content/components/common/input.js3
-rw-r--r--src/content/components/common/keymapper.js3
-rw-r--r--src/content/components/frame-content.js15
-rw-r--r--src/content/components/top-content/follow-controller.js21
-rw-r--r--src/content/components/top-content/index.js11
-rw-r--r--src/content/index.js14
-rw-r--r--src/content/reducers/follow-controller.js (renamed from src/content/reducers/follow.js)8
-rw-r--r--src/content/reducers/index.js6
-rw-r--r--src/content/reducers/setting.js4
-rw-r--r--src/shared/utils/dom.js78
19 files changed, 164 insertions, 104 deletions
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 };
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-15 12:30:35 +0000