fix follow for contenteditable
This commit is contained in:
parent
10beccfab2
commit
4646e8b18d
3 changed files with 17 additions and 4 deletions
|
@ -4,6 +4,10 @@ import Hint from 'content/hint';
|
||||||
import HintKeyProducer from 'content/hint-key-producer';
|
import HintKeyProducer from 'content/hint-key-producer';
|
||||||
|
|
||||||
const DEFAULT_HINT_CHARSET = 'abcdefghijklmnopqrstuvwxyz';
|
const DEFAULT_HINT_CHARSET = 'abcdefghijklmnopqrstuvwxyz';
|
||||||
|
const TARGET_SELECTOR = [
|
||||||
|
'a', 'button', 'input', 'textarea',
|
||||||
|
'[contenteditable=true]', '[contenteditable=""]'
|
||||||
|
].join(',');
|
||||||
|
|
||||||
const inWindow = (window, element) => {
|
const inWindow = (window, element) => {
|
||||||
let {
|
let {
|
||||||
|
@ -130,6 +134,9 @@ export default class FollowComponent {
|
||||||
return element.focus();
|
return element.focus();
|
||||||
case 'button':
|
case 'button':
|
||||||
return element.click();
|
return element.click();
|
||||||
|
default:
|
||||||
|
// it may contenteditable
|
||||||
|
return element.focus();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -154,7 +161,7 @@ export default class FollowComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
static getTargetElements(doc) {
|
static getTargetElements(doc) {
|
||||||
let all = doc.querySelectorAll('a,button,input,textarea');
|
let all = doc.querySelectorAll(TARGET_SELECTOR);
|
||||||
let filtered = Array.prototype.filter.call(all, (element) => {
|
let filtered = Array.prototype.filter.call(all, (element) => {
|
||||||
let style = window.getComputedStyle(element);
|
let style = window.getComputedStyle(element);
|
||||||
return style.display !== 'none' &&
|
return style.display !== 'none' &&
|
||||||
|
|
|
@ -1,9 +1,12 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<body>
|
<body>
|
||||||
<a href='#' >link</a>
|
<a id='visible_a' href='#' >link</a>
|
||||||
<a href='#' style='display:none'>invisible 1</a>
|
<a href='#' style='display:none'>invisible 1</a>
|
||||||
<a href='#' style='visibility:hidden'>invisible 2</a>
|
<a href='#' style='visibility:hidden'>invisible 2</a>
|
||||||
<i>not link<i>
|
<i>not link<i>
|
||||||
|
<div id='editable_div_1' contenteditable>link</div>
|
||||||
|
<div id='editable_div_2' contenteditable='true'>link</div>
|
||||||
|
<div id='x' contenteditable='false'>link</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -8,8 +8,11 @@ describe('FollowComponent', () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
it('returns visible links', () => {
|
it('returns visible links', () => {
|
||||||
let links = FollowComponent.getTargetElements(window.document);
|
let targets = FollowComponent.getTargetElements(window.document);
|
||||||
expect(links).to.have.lengthOf(1);
|
expect(targets).to.have.lengthOf(3);
|
||||||
|
|
||||||
|
let ids = Array.prototype.map.call(targets, (e) => e.id);
|
||||||
|
expect(ids).to.include.members(['visible_a', 'editable_div_1', 'editable_div_2']);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
Reference in a new issue