1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
import Hint, { InputHint, LinkHint } from './Hint';
import * as doms from '../../shared/utils/dom';
const TARGET_SELECTOR = [
'a', 'button', 'input', 'textarea', 'area',
'[contenteditable=true]', '[contenteditable=""]', '[tabindex]',
'[role="button"]', 'summary'
].join(',');
interface Size {
width: number;
height: number;
}
interface Point {
x: number;
y: number;
}
const inViewport = (
win: Window,
element: Element,
viewSize: Size,
framePosition: Point,
): boolean => {
let {
top, left, bottom, right
} = doms.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
return false;
}
if (right + framePosition.x < 0 || bottom + framePosition.y < 0 ||
left + framePosition.x > viewSize.width ||
top + framePosition.y > viewSize.height) {
// out of viewport
return false;
}
return true;
};
const isAriaHiddenOrAriaDisabled = (win: Window, element: Element): boolean => {
if (!element || win.document.documentElement === element) {
return false;
}
for (let attr of ['aria-hidden', 'aria-disabled']) {
let value = element.getAttribute(attr);
if (value !== null) {
let hidden = value.toLowerCase();
if (hidden === '' || hidden === 'true') {
return true;
}
}
}
return isAriaHiddenOrAriaDisabled(win, element.parentElement as Element);
};
export default interface FollowPresenter {
getTargetCount(viewSize: Size, framePosition: Point): number;
createHints(viewSize: Size, framePosition: Point, tags: string[]): void;
filterHints(prefix: string): void;
clearHints(): void;
getHint(tag: string): Hint | undefined;
}
export class FollowPresenterImpl implements FollowPresenter {
private hints: Hint[];
constructor() {
this.hints = [];
}
getTargetCount(viewSize: Size, framePosition: Point): number {
let targets = this.getTargets(viewSize, framePosition);
return targets.length;
}
createHints(viewSize: Size, framePosition: Point, tags: string[]): void {
let targets = this.getTargets(viewSize, framePosition);
let min = Math.min(targets.length, tags.length);
for (let i = 0; i < min; ++i) {
let target = targets[i];
if (target instanceof HTMLAnchorElement ||
target instanceof HTMLAreaElement) {
this.hints.push(new LinkHint(target, tags[i]));
} else {
this.hints.push(new InputHint(target, tags[i]));
}
}
}
filterHints(prefix: string): void {
let shown = this.hints.filter(h => h.getTag().startsWith(prefix));
let hidden = this.hints.filter(h => !h.getTag().startsWith(prefix));
shown.forEach(h => h.show());
hidden.forEach(h => h.hide());
}
clearHints(): void {
this.hints.forEach(h => h.remove());
this.hints = [];
}
getHint(tag: string): Hint | undefined {
return this.hints.find(h => h.getTag() === tag);
}
private getTargets(viewSize: Size, framePosition: Point): HTMLElement[] {
let all = window.document.querySelectorAll(TARGET_SELECTOR);
let filtered = Array.prototype.filter.call(all, (element: HTMLElement) => {
let style = window.getComputedStyle(element);
// AREA's 'display' in Browser style is 'none'
return (element.tagName === 'AREA' || style.display !== 'none') &&
style.visibility !== 'hidden' &&
(element as HTMLInputElement).type !== 'hidden' &&
element.offsetHeight > 0 &&
!isAriaHiddenOrAriaDisabled(window, element) &&
inViewport(window, element, viewSize, framePosition);
});
return filtered;
}
}
|
